From 6d27dd1cf467afa4c1301d7711cf425bb25ea542 Mon Sep 17 00:00:00 2001 From: Elijah Hamovitz Date: Thu, 23 Mar 2017 18:59:31 -0700 Subject: [PATCH 1/2] process level files in a sorted order at the ruby level --- bin/i18n/sync-codeorg-in | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/bin/i18n/sync-codeorg-in b/bin/i18n/sync-codeorg-in index d721f31caaef9..e381a149eaa71 100755 --- a/bin/i18n/sync-codeorg-in +++ b/bin/i18n/sync-codeorg-in @@ -21,8 +21,8 @@ end def copy_to_yml(label, data, allow_full_length=false) args = allow_full_length ? {line_width: -1} : {} File.open("dashboard/config/locales/#{label}.en.yml", "w+") do |f| - f.write(({ "en" => { "data" => { label => data }}}).to_yaml(**args)) - File.write(f, File.read(f)) + data = ({ "en" => { "data" => { label => data }}}).to_yaml(**args) + f.write(data) end end @@ -63,7 +63,7 @@ def localize_level_content authored_hint_pattern = /^\s*"authored_hints": "(.*?)",?\n$/ callout_pattern = /^\s*"callout_json": "(.*?)",?\n$/ - Dir.glob("dashboard/config/scripts/levels/*.level").each do |file| + Dir.glob("dashboard/config/scripts/levels/*.level").sort.each do |file| level = File.basename(file, ".*") + "_instruction" markdown_level = File.basename(file, ".*") + "_markdown_instruction" failure_message_override_level = File.basename(file, ".*") + "_failure_message_override" From f8f0e03ba4610ef63b591c8e3b6c15db6c04d8c3 Mon Sep 17 00:00:00 2001 From: Elijah Hamovitz Date: Thu, 23 Mar 2017 19:00:00 -0700 Subject: [PATCH 2/2] commit re-ordered hashes --- .../config/locales/authored_hints.en.yml | 644 +- dashboard/config/locales/callouts.en.yml | 1006 +- .../locales/failure_message_overrides.en.yml | 22 +- dashboard/config/locales/instructions.en.yml | 9682 ++--- .../locales/markdown_instructions.en.yml | 32596 ++++++++-------- .../source/dashboard/authored_hints.yml | 644 +- i18n/locales/source/dashboard/callouts.yml | 1006 +- .../dashboard/failure_message_overrides.yml | 22 +- .../locales/source/dashboard/instructions.yml | 9682 ++--- .../dashboard/markdown_instructions.yml | 32596 ++++++++-------- 10 files changed, 43950 insertions(+), 43950 deletions(-) diff --git a/dashboard/config/locales/authored_hints.en.yml b/dashboard/config/locales/authored_hints.en.yml index 364ed6dcd978a..04ca764828d44 100644 --- a/dashboard/config/locales/authored_hints.en.yml +++ b/dashboard/config/locales/authored_hints.en.yml @@ -257,40 +257,6 @@ en: **360 / 6 = ?** 4-5 While Loops 8_authored_hint: 4-5_While_Loops_8_a: Each item will need its own `while` loop. - aE1_authored_hint: {} - aE2_authored_hint: - aE2_a: Notice that since the napkins are 20 pixels long, you'll need to jump 20 pixels before you start your next loop. - aE3_authored_hint: - aE3_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. - aE3_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" - aE3_c: When you're all done, your **nested loops** should be three repeats deep. - aE3_d: If your code becomes too confusing, you can always click "Start Over" and try again! - aE3alternate_authored_hint: - aE3alternate_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. - aE3alternate_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" - aE3alternate_c: When you're all done, your **nested loops** should be three repeats deep. - aE3alternate_d: If your code becomes too confusing, you can always click "Start Over" and try again! - aE3alternateB_authored_hint: - aE4alternateB_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. - aE4alternateB_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" - aE4alternateB_c: When you're all done, your **nested loops** should be three repeats deep. - aE4alternateB_d: If your code becomes too confusing, you can always click "Start Over" and try again! - aE4_authored_hint: - aE4_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. - aE4_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" - aE4_c: When you're all done, your **nested loops** should be three repeats deep. - aE4_d: If your code becomes too confusing, you can always click "Start Over" and try again! - aE5_authored_hint: {} - aE6_authored_hint: - aE6_a: |- - If there are 180 degrees in a semicircle and each loop the artist makes turns 3 degrees, how many times would you need to loop to draw half of a full circle? - - **180 ÷ 3 = ?** - aE7_authored_hint: - aE7_a: Draw the bottom half of a circle and then the top half of a circle to make one segment. - aE7_b: You will need 4 segments to complete this puzzle. - aE8_authored_hint: - aE8_a: "To make a square from your line, you will need to: \n- draw the line \n- use the curvy corner\n\nRepeat these steps 4 times." Artist Inspiration_authored_hint: brush_width: We set the brush width to 1, then the color to blue before we did anything else. double_loop: Try putting a `for loop` inside of a `repeat` loop. @@ -301,32 +267,6 @@ en: ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) - artistDebugVideo1_authored_hint: - courseA_artist_loops7_a: Can't figure out where to put the loop? Try writing the code step-by-step and look for a pattern. - artistFunctionsVideo1_authored_hint: {} - artistLoopsK2_authored_hint: - artistLoopsK2_a: If you want the loop to repeat more than 4 times, you can change the number at the top of the block. - artistLoopsK2gradek_artist_loops3_authored_hint: - artistLoopsK2_a: If you want the loop to repeat more than 4 times, you can change the number at the top of the block. - artistLoopsK3_authored_hint: - artistLoopsK3_a: Try using what you've learned about repeat blocks to complete this puzzle! - artistLoopsK4_authored_hint: - artistLoopsK4_a: Stuck? Try running the code to see which block is incorrect. - artistLoopsK5_authored_hint: - artistLoopsK5_a: All 4 of the starting blocks should go inside of your repeat block to solve this puzzle. - artistLoopsK6_authored_hint: - artistLoopsK6_a: Try running the code to see where there is a bug. - artistLoopsK7_authored_hint: - artistLoopsK7_a: All of the blocks you need for this puzzle are already in your workspace! - artistLoopsK8_authored_hint: - artistLoopsK8_a: Try running the code to see where there is a bug. - artistLoopsK9_authored_hint: - artistLoopsK9_a: This challenge uses FOUR loops, one right after another! - artistLoopsKA_authored_hint: - artistLoopsKA_a: Use the jump block to move forward without drawing a line. - artistLoopsKB_authored_hint: - artistLoopsKB_a: There should be 3 blocks inside of your loop to solve this puzzle. - artistLoopsKFP_authored_hint: {} Bergeron Robot Maze1_authored_hint: 2-3_Maze_1_a: To use a `move forward` block, drag it from the toolbar area out into the workspace and connect it to the `when run` block. Course 4 Artist 11_authored_hint: @@ -381,17 +321,17 @@ en: Course_4_Artist_For_Loops_inspire_b: Try a `for` loop that goes from 3 to 10 with an increment of 1. Course_4_Artist_For_Loops_inspire_c: There are two iterations of the same repeat loop inside the `for` loop, but the second repeat turns the opposite direction. Course_4_Artist_For_Loops_inspire_d: "**Solution:** \n\n![Solution](https://images.code.org/418dfd57794706de541f1c162911a6e2-image-1469641233597.png)" - Course 4 Artist Functions challenge_authored_hint: - Course_4_Artist_Functions_challenge_a: Part of understanding how to use functions is figuring out which ones you need, and which ones you don't. - Course_4_Artist_Functions_challenge_b: Use a `for loop`, then use its counter variable inside of a nested `repeat` loop. - Course_4_Artist_Functions_challenge_c: Each iteration, you should draw a square then jump forward. - Course_4_Artist_Functions_challenge_d: You will need to turn left by 90 degrees outside of your `repeat`, but still inside the `for loop`. Course 4 Artist Functions Inspiration_authored_hint: Course_4_Artist_Functions_Inspiration_a: Start with the code from the last puzzle and add an extra `turn right` of three degrees inside the repeat loop. Course_4_Artist_Functions_Inspiration_b: Try turning by more than 90 degrees outside of the `repeat loop`, but still inside the `for loop`. Course_4_Artist_Functions_Inspiration_c: |- **Solution:** ![Solution](https://images.code.org/0c94bcde33a00595aa099fea964ca80e-image-1469641309381.png) + Course 4 Artist Functions challenge_authored_hint: + Course_4_Artist_Functions_challenge_a: Part of understanding how to use functions is figuring out which ones you need, and which ones you don't. + Course_4_Artist_Functions_challenge_b: Use a `for loop`, then use its counter variable inside of a nested `repeat` loop. + Course_4_Artist_Functions_challenge_c: Each iteration, you should draw a square then jump forward. + Course_4_Artist_Functions_challenge_d: You will need to turn left by 90 degrees outside of your `repeat`, but still inside the `for loop`. Course 4 Artist Inspire_authored_hint: Course_4_Artist_Inspire_a: After you complete one square, try jumping forward half of it's length before turning and making another. Course_4_Artist_Inspire_b: Each square and jump is repeated four times (using a left turn inbetween) to make a full pinwheel-like unit. @@ -588,6 +528,181 @@ en: **Solution:** ![Solution](https://images.code.org/72f0ce970999deffe87bd93af0db959f-image-1469642214408.png) + Farmer for Authored Hint testing_authored_hint: + first_hint: |- + This is the first hint. + + It has *some* **basic** `markup` + second_hint: |- + This is the second hint. It has an image. + + ![](https://images.code.org/cab43107265a683a6216e18faab2353f-image-1452027548372.png) + last_hint: This is the third and final hint. It doesn't have anything special. + Farmer for TTS testing_authored_hint: + first_hint: |- + This is the first hint. + + It has *some* **basic** `markup` + second_hint: |- + This is the second hint. It has an image. + + ![](https://images.code.org/cab43107265a683a6216e18faab2353f-image-1452027548372.png) + last_hint: This is the third and final hint. It doesn't have anything special. + Harvesting_authored_hint: + pointer_harvester_test: What kind of block can I use to check something and make a decision? + Inspirational Artwork_authored_hint: + brush_width: We set the brush width to 1, then the color to blue before we did anything else. + double_loop: Try putting a `for loop` inside of a `repeat` loop. + specifics: "The `for loop` runs from three to seventeen for each of the six \"petals\" before moving on to create the next, drawing shapes with only an odd number of sides.\n \nThe `set alpha` block uses division to fade the color as the counter gets higher." + after: When you're done with each "petal", be sure to `move forward` 20 pixels before you make a 60 degree rotation. + solution: |- + **Solution** + + + ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) + InspirationalArtwork_authored_hint: {} + K2.0 sequence 1_authored_hint: + K2.0_sequence_1_a: This program is missing one block. Can you figure out which one? + K2.0 sequence 10_authored_hint: + K2.0_sequence_10_a: If you're having trouble, try writing down the steps on a piece of paper first. + K2.0_sequence_10_b: You will need three different kinds of arrows to solve this puzzle. + K2.0 sequence 12_authored_hint: + K2.0_sequence_12_a: If the pig isn't moving far enough, try adding another block. + K2.0 sequence 2_authored_hint: + K2.0_sequence_2_a: One of the blocks is moving the bird in the wrong direction. Can you figure out which one and replace it with the correct block? + K2.0 sequence 3_authored_hint: + K2.0_sequence_3_a: If you are having trouble, try to figure out what the correct path is and then remove the block that doesn't fit. + K2.0 sequence 4_authored_hint: + K2.0_sequence_4_a: Use 2 different arrow blocks to solve this puzzle! + K2.0 sequence 5_authored_hint: + K2.0_sequence_5: Your final code should have three movement blocks. + K2.0 sequence 6_authored_hint: + K2.0_sequence_6_a: There is 1 block that you need to add to move the bird to the pig. + K2.0_sequence_6_b: If you can't figure out what to do, try drawing the puzzle on paper and use your finger to figure out which way to move. + K2.0 sequence 7_authored_hint: + K2.0_sequence_7_a: If you're stuck, try drawing the image on paper to see how the bird should move. + K2.0 sequence 8_authored_hint: + K2.0_sequence_8_a: Stuck? Try tracing the bird's path with your finger. + K2.0 sequence 9_authored_hint: + K2.0_sequence_9_a: If you're having trouble, try writing down the steps on a piece of paper first. + K2.0_sequence_9_b: You will need to go three different directions to solve this puzzle. + K2.0 sequence FP_authored_hint: + K2.0_sequence_FP_a: If the path you need is unclear, use your finger to trace your way from the bird to the pig. + K2.0 sequence pre_authored_hint: + K2.0_sequence_pre_a: If you are having trouble getting the bird to move, make sure blocks are connected under `when run`. + MikeStar_authored_hint: + hint1: Don't give up! + MikeStarHard_authored_hint: + hint1: Don't give up! + MikeStarNested_authored_hint: + hint1: Don't give up! + NEW Course 4 Artist Functions 13_authored_hint: + NEW_Course_4_Artist_Functions_13_a: Edit the `draw a line of squares` function so that you don't have to call it twice. + NEW_Course_4_Artist_Functions_13_b: Notice, you'll have to move forward by 60 pixels and turn 144 degrees. + NEW_Course_4_Artist_Functions_13_c: What code would you need if you were going to try to make a star with regular lines? + NEW Course 4 Artist Functions 4_authored_hint: + NEW_Course_4_Artist_Functions_4_a: You will have to use a `turn right by 120 degrees` block after each square. + NEW Course 4 Artist Functions 9_authored_hint: + NEW_Course_4_Artist_Functions_9_a: Try running the code before you add any blocks. What makes the drawing look a little off? + NEW_Course_4_Artist_Functions_9_b: If you can't quite put your finger on what's going wrong, try slowing down the artist's by moving the slider to the left. + NEW Course 4 Artist Params 11_authored_hint: + NEW_Course_4_Artist_Params_11_a: There is more than one number that needs to be replaced by a variable inside the function. + NEW Course 4 Artist Params 13_authored_hint: + NEW_Course_4_Artist_Params_13_a: 'You will need to divide the *perimeter* by the number of sides in order to keep the shapes the same size overall. ' + NEW Course 4 Artist Params 14_authored_hint: + NEW_Course_4_Artist_Params_14_a: It's okay to run the program a few times to figure out how the function works with different parameters. + NEW Course 4 Artist Params inspire_authored_hint: + brush_width: We set the brush width to 1, then the color to blue before we did anything else. + double_loop: Try putting a `for loop` inside of a `repeat` loop. + specifics: "The `for loop` runs from three to seventeen for each of the six \"petals\" before moving on to create the next, drawing shapes with only an odd number of sides.\n \nThe `set alpha` block uses division to fade the color as the counter gets higher." + after: When you're done with each "petal", be sure to `move forward` 20 pixels before you make a 60 degree rotation. + solution: |- + **Solution** + + + ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) + NEW Course 4 Bee For Loops 10a_authored_hint: + NEW_Course_4_Bee_For_Loops_10a_a: Can you find a pattern between the number of steps you need to take and the number of nectars to gather? + NEW_Course_4_Bee_For_Loops_10a_b: You'll need to have 2 repeats, one will use a math block. + NEW Course 4 Bee For Loops 7_authored_hint: + NEW_Course_4_Bee_For_Loops_7_a: |- + Try doing some math with the counter variable. + + What do you have to do to the counter at each flower to equal the amount of nectar you need to collect? + NEW Course 4 Bee For Loops 8_authored_hint: + NEW_Course_4_Bee_For_Loops_8_a: "If your loop is counting up, the increment is added to your counter variable each time through. \n\nWhat do you need to add to each number to get the number after it?" + Pattern Bee 1_authored_hint: + conditional_pointer: |- + Start by thinking about this part: what's different each step of the way? What kind of block can you use to make a *decision* about whether you're at a flower or honeycomb? + + ![](https://images.code.org/a4883ea91c2f879ca1bb281d7944ed87-image-1471477752512.48.07 PM.png) + turn_at_honeycomb_pointer: Other than making honey, do you see anything different that you have to do at each honeycomb? + Planning Farmer_authored_hint: + conditional_pointer: |- + Start by thinking about this part: what's different each step of the way? What kind of block can you use to make a *decision* about whether you're at a flower or honeycomb? + + ![](https://images.code.org/a4883ea91c2f879ca1bb281d7944ed87-image-1471477752512.48.07 PM.png) + turn_at_honeycomb_pointer: Other than making honey, do you see anything different that you have to do at each honeycomb? + aE1_authored_hint: {} + aE2_authored_hint: + aE2_a: Notice that since the napkins are 20 pixels long, you'll need to jump 20 pixels before you start your next loop. + aE3_authored_hint: + aE3_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. + aE3_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" + aE3_c: When you're all done, your **nested loops** should be three repeats deep. + aE3_d: If your code becomes too confusing, you can always click "Start Over" and try again! + aE3alternate_authored_hint: + aE3alternate_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. + aE3alternate_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" + aE3alternate_c: When you're all done, your **nested loops** should be three repeats deep. + aE3alternate_d: If your code becomes too confusing, you can always click "Start Over" and try again! + aE3alternateB_authored_hint: + aE4alternateB_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. + aE4alternateB_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" + aE4alternateB_c: When you're all done, your **nested loops** should be three repeats deep. + aE4alternateB_d: If your code becomes too confusing, you can always click "Start Over" and try again! + aE4_authored_hint: + aE4_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. + aE4_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" + aE4_c: When you're all done, your **nested loops** should be three repeats deep. + aE4_d: If your code becomes too confusing, you can always click "Start Over" and try again! + aE5_authored_hint: {} + aE6_authored_hint: + aE6_a: |- + If there are 180 degrees in a semicircle and each loop the artist makes turns 3 degrees, how many times would you need to loop to draw half of a full circle? + + **180 ÷ 3 = ?** + aE7_authored_hint: + aE7_a: Draw the bottom half of a circle and then the top half of a circle to make one segment. + aE7_b: You will need 4 segments to complete this puzzle. + aE8_authored_hint: + aE8_a: "To make a square from your line, you will need to: \n- draw the line \n- use the curvy corner\n\nRepeat these steps 4 times." + artistDebugVideo1_authored_hint: + courseA_artist_loops7_a: Can't figure out where to put the loop? Try writing the code step-by-step and look for a pattern. + artistFunctionsVideo1_authored_hint: {} + artistLoopsK2_authored_hint: + artistLoopsK2_a: If you want the loop to repeat more than 4 times, you can change the number at the top of the block. + artistLoopsK2gradek_artist_loops3_authored_hint: + artistLoopsK2_a: If you want the loop to repeat more than 4 times, you can change the number at the top of the block. + artistLoopsK3_authored_hint: + artistLoopsK3_a: Try using what you've learned about repeat blocks to complete this puzzle! + artistLoopsK4_authored_hint: + artistLoopsK4_a: Stuck? Try running the code to see which block is incorrect. + artistLoopsK5_authored_hint: + artistLoopsK5_a: All 4 of the starting blocks should go inside of your repeat block to solve this puzzle. + artistLoopsK6_authored_hint: + artistLoopsK6_a: Try running the code to see where there is a bug. + artistLoopsK7_authored_hint: + artistLoopsK7_a: All of the blocks you need for this puzzle are already in your workspace! + artistLoopsK8_authored_hint: + artistLoopsK8_a: Try running the code to see where there is a bug. + artistLoopsK9_authored_hint: + artistLoopsK9_a: This challenge uses FOUR loops, one right after another! + artistLoopsKA_authored_hint: + artistLoopsKA_a: Use the jump block to move forward without drawing a line. + artistLoopsKB_authored_hint: + artistLoopsKB_a: There should be 3 blocks inside of your loop to solve this puzzle. + artistLoopsKFP_authored_hint: {} courseA_artist_loops10_authored_hint: courseA_artist_loops10_a: Use the jump block to move forward without drawing a line. courseA_artist_loops11_authored_hint: @@ -814,6 +929,39 @@ en: This is the block you need to make the knight vanish: ![](https://images.code.org/f468611cbe51e1cb35531334f625395a-image-1475624478204.41.02.png) + courseC_PlayLab_events3_authored_hint: + courseC_PlayLab_events3_a: You only need to move Jorge to the right by about 25 pixels to solve this puzzle. + courseC_PlayLab_events4_authored_hint: + courseC_PlayLab_events4_b: Jorge needs to move right 100 pixels to reach the cat. + courseC_PlayLab_events4_a: You will need to attach a block to the `when actor touches` event to solve this puzzle. + courseC_PlayLab_events5_authored_hint: + courseC_PlayLab_events5_a: You will need to click the dropdown menu in the `actor say` block to find the text "What's new?" + courseC_PlayLab_events7_authored_hint: + courseC_PlayLab_events7_a: 'Use both the `move actor 2 up 400 pixels` block and the `move actor 2 down 400 pixels` block inside the `repeat forever` loop to solve this puzzle. ' + courseC_PlayLab_events8_authored_hint: + courseC_PlayLab_events8_a: You will need to connect blocks to the `when actor touches` block to make this happen correctly. + courseC_PlayLab_events8_b: The `actor say` and `play sound` blocks in the toolbox should help you out! + courseC_PlayLab_events9_authored_hint: + courseC_PlayLab_events9_a: The `score point` block will help you to solve this puzzle. + courseC_PlayLab_eventsA_authored_hint: + courseC_PlayLab_eventsA_a: Use the `set background` block and the `set actor to a ____ speed` block to solve this puzzle. + courseC_PlayLab_eventsFP_authored_hint: + idea1: |- + *Need an idea?* + + **Who's there?** Make characters appear with random images, so no one knows who's showing up next. + + ![](https://images.code.org/a56e03479801995d93ad5a4e4384a79e-image-1475340154498.gif) + idea2: |- + *Need an idea?* + + **Going on an Adventure** - Change the background, then have the characters talk about where they are now. + + ![](https://images.code.org/010c4d919f841d6049caf9211ab65ccc-image-1475340583052.gif) + idea3: |- + *Need an idea?* + + **Pinball** - Make one character move using the arrow keys (use `when up arrow`, `when down arrow` blocks), then play random sounds when it collides with other characters on the screen. courseC_artist_prog1_authored_hint: {} courseC_artist_prog2_authored_hint: courseC_artist_prog2_a: If you use the block to have me `move forward by 100 pixels`, I will draw a line automatically. @@ -958,39 +1106,6 @@ en: courseC_maze_programming8_authored_hint: {} courseC_maze_programming8_predict1_authored_hint: {} courseC_maze_programming9_authored_hint: {} - courseC_PlayLab_events3_authored_hint: - courseC_PlayLab_events3_a: You only need to move Jorge to the right by about 25 pixels to solve this puzzle. - courseC_PlayLab_events4_authored_hint: - courseC_PlayLab_events4_b: Jorge needs to move right 100 pixels to reach the cat. - courseC_PlayLab_events4_a: You will need to attach a block to the `when actor touches` event to solve this puzzle. - courseC_PlayLab_events5_authored_hint: - courseC_PlayLab_events5_a: You will need to click the dropdown menu in the `actor say` block to find the text "What's new?" - courseC_PlayLab_events7_authored_hint: - courseC_PlayLab_events7_a: 'Use both the `move actor 2 up 400 pixels` block and the `move actor 2 down 400 pixels` block inside the `repeat forever` loop to solve this puzzle. ' - courseC_PlayLab_events8_authored_hint: - courseC_PlayLab_events8_a: You will need to connect blocks to the `when actor touches` block to make this happen correctly. - courseC_PlayLab_events8_b: The `actor say` and `play sound` blocks in the toolbox should help you out! - courseC_PlayLab_events9_authored_hint: - courseC_PlayLab_events9_a: The `score point` block will help you to solve this puzzle. - courseC_PlayLab_eventsA_authored_hint: - courseC_PlayLab_eventsA_a: Use the `set background` block and the `set actor to a ____ speed` block to solve this puzzle. - courseC_PlayLab_eventsFP_authored_hint: - idea1: |- - *Need an idea?* - - **Who's there?** Make characters appear with random images, so no one knows who's showing up next. - - ![](https://images.code.org/a56e03479801995d93ad5a4e4384a79e-image-1475340154498.gif) - idea2: |- - *Need an idea?* - - **Going on an Adventure** - Change the background, then have the characters talk about where they are now. - - ![](https://images.code.org/010c4d919f841d6049caf9211ab65ccc-image-1475340583052.gif) - idea3: |- - *Need an idea?* - - **Pinball** - Make one character move using the arrow keys (use `when up arrow`, `when down arrow` blocks), then play random sounds when it collides with other characters on the screen. courseC_puppy_loops10_authored_hint: courseC_puppy_loops9_1: I need to move two or three time between each turn. courseC_puppy_loops11_authored_hint: {} @@ -1276,21 +1391,6 @@ en: Where do things go wrong? courseD_debugging_6_b: It looks like all of the right steps are here, you just need more of them. How can you repeat the `get nectar` and `make honey` actions multiple times? - courseD_farmer_conditionals10_authored_hint: {} - courseD_farmer_conditionals4_authored_hint: - courseD_farmer_conditionals4_a: Instead of using a `repeat` loop, use a `while` loop to keep digging until the pile is gone. - courseD_farmer_conditionals5_authored_hint: - courseD_farmer_conditionals5a: Try nesting a `while` loop inside of a `repeat` loop. - courseD_farmer_conditionals6_authored_hint: - courseD_farmer_conditionals6_a: Make sure you're using the `while` loop to figure out how many times to fill each hole. - courseD_farmer_conditionals6_b: Notice that the farmer needs to move forward and down several times in a stair-step pattern. - courseD_farmer_conditionals7_authored_hint: - courseD_farmer_conditionals8_a: The `while path ahead` block lets you keep going, even if you don't know how many squares are in a path. - courseD_farmer_conditionals8_authored_hint: - courseD_farmer_conditionals8_a: You are going to need to use more than one `while` loop. - courseD_farmer_conditionals8_b: Every hole is at the end of a path, so use `while path ahead` before using `while there is a hole`. - courseD_farmer_conditionals8_c: Notice that you need to repeat the `while path ahead`, `while there is a hole` code six times. - courseD_farmer_conditionals9_authored_hint: {} courseD_farmer_condLoops1_authored_hint: courseD_farmer_condLoops1_a: You will need to look for corn 5 times, using a repeat loop. courseD_farmer_condLoops1_b: Make sure to use an `if at corn` block or you might try to pick something that's not there! @@ -1326,6 +1426,21 @@ en: courseD_farmer_condLoops9_a: You shouldn't need the `while path ahead` loop this time. courseD_farmer_condLoops9_predict1_authored_hint: courseD_farmer_condLoops9_a: You shouldn't need the `while path ahead` loop this time. + courseD_farmer_conditionals10_authored_hint: {} + courseD_farmer_conditionals4_authored_hint: + courseD_farmer_conditionals4_a: Instead of using a `repeat` loop, use a `while` loop to keep digging until the pile is gone. + courseD_farmer_conditionals5_authored_hint: + courseD_farmer_conditionals5a: Try nesting a `while` loop inside of a `repeat` loop. + courseD_farmer_conditionals6_authored_hint: + courseD_farmer_conditionals6_a: Make sure you're using the `while` loop to figure out how many times to fill each hole. + courseD_farmer_conditionals6_b: Notice that the farmer needs to move forward and down several times in a stair-step pattern. + courseD_farmer_conditionals7_authored_hint: + courseD_farmer_conditionals8_a: The `while path ahead` block lets you keep going, even if you don't know how many squares are in a path. + courseD_farmer_conditionals8_authored_hint: + courseD_farmer_conditionals8_a: You are going to need to use more than one `while` loop. + courseD_farmer_conditionals8_b: Every hole is at the end of a path, so use `while path ahead` before using `while there is a hole`. + courseD_farmer_conditionals8_c: Notice that you need to repeat the `while path ahead`, `while there is a hole` code six times. + courseD_farmer_conditionals9_authored_hint: {} courseD_farmer_while10_authored_hint: {} courseD_farmer_while10_predict2_authored_hint: {} courseD_farmer_while4_authored_hint: @@ -1734,26 +1849,6 @@ en: triangle_geometry_hint: 'Remember: an equilateral triangle has three sides, with a 60 degree turn between each!' repeat_pointer: You have to draw a side and turn 3 times...what block can you use to run the same instructions many times? repeat_bottom_out: Use a `repeat 3 times` block! - Farmer for Authored Hint testing_authored_hint: - first_hint: |- - This is the first hint. - - It has *some* **basic** `markup` - second_hint: |- - This is the second hint. It has an image. - - ![](https://images.code.org/cab43107265a683a6216e18faab2353f-image-1452027548372.png) - last_hint: This is the third and final hint. It doesn't have anything special. - Farmer for TTS testing_authored_hint: - first_hint: |- - This is the first hint. - - It has *some* **basic** `markup` - second_hint: |- - This is the second hint. It has an image. - - ![](https://images.code.org/cab43107265a683a6216e18faab2353f-image-1452027548372.png) - last_hint: This is the third and final hint. It doesn't have anything special. grade1_adventurer_loops10_authored_hint: grade1_adventurer_loops10_a: You'll need three `repeat` loops to solve this puzzle. grade1_adventurer_loops2_authored_hint: @@ -1847,8 +1942,6 @@ en: grade2_CaringForNewPet_6_a: You don't have to code the whole solution at once! Try running the code as you go to make sure it works at each step. grade2_CaringForNewPet_7D_authored_hint: grade2_CaringForNewPet_7D_a: Don't forget to use the "Step" button to go through block by block and look for errors. - grade2_collector_2_authored_hint: - hint1: You can use four `move forward` blocks or use the `repeat 4 times` block to make your program shorter. grade2_MakeDogTag_1_authored_hint: 2-3_Artist_1_new_a: If you use the block to have me `move forward by 100 pixels`, I will draw a line automatically. 2-3_Artist_1_new_b: Having trouble turning the corner? Use the `turn right 90 degrees` block. @@ -1873,6 +1966,31 @@ en: ![](https://images.code.org/e5c7492f509dd41efe2888c7e7895c28-image-1461177002636.29.02.png) 2-3_Artist_Loops_New_11_b: Your new turn should go at the **end** of the code inside the loop. grade2_MakeDogTag_BFP_authored_hint: {} + grade2_PuppyLoops_10_authored_hint: + 2-3_Artist_Debugging_8_a: |- + How many times did my shape repeat? + + How many times *should* the shape repeat? + + Where can you change that in the program? + grade2_PuppyLoops_3_authored_hint: + hint1: This puzzle is very similar to the last one. + hint2: Use a `repeat 5 times` block to create the loop. + hint3: Place a `move forward` block inside the `repeat block`. + grade2_PuppyLoops_5_authored_hint: + hint1: The best solution uses two `move forward` commands and one loop. + grade2_PuppyLoops_6_authored_hint: + 2-3_Maze_16_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. + 2-3_Maze_16_b: "To put lots of blocks inside a `repeat` loop, just drag a loop out into the workspace, then drag all of the blocks from the starting program inside of it. \n\nConnect it all back to the `when run` block and you're good to go!" + grade2_PuppyLoops_7_authored_hint: + 2-3_Maze_Loops_17_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. + 2-3_Maze_Loops_17_b: Did the starting code get deleted? Click `start over` to get it back! + grade2_PuppyLoops_8_authored_hint: + 2-3_Artist_Debugging_2_a: 'Hint: Each whisker is 75 pixels long.' + grade2_PuppyLoops_9_authored_hint: + 2-3_Artist_Debugging_7_a: What happens if you have the artist move or jump backward after he draws the first line? + grade2_collector_2_authored_hint: + hint1: You can use four `move forward` blocks or use the `repeat 4 times` block to make your program shorter. grade2_maze_debuggingFP_authored_hint: {} grade2_maze_intro4_authored_hint: hint_1: Connect a "move forward" block to the bottom of the program. @@ -1912,49 +2030,12 @@ en: 2-3_Maze_16_b: "To put lots of blocks inside a `repeat` loop, just drag a loop out into the workspace, then drag all of the blocks from the starting program inside of it. \n\nConnect it all back to the `when run` block and you're good to go!" grade2_puppy_loops7_authored_hint: 2-3_Maze_Loops_17_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. - grade2_PuppyLoops_10_authored_hint: - 2-3_Artist_Debugging_8_a: |- - How many times did my shape repeat? - - How many times *should* the shape repeat? - - Where can you change that in the program? - grade2_PuppyLoops_3_authored_hint: - hint1: This puzzle is very similar to the last one. - hint2: Use a `repeat 5 times` block to create the loop. - hint3: Place a `move forward` block inside the `repeat block`. - grade2_PuppyLoops_5_authored_hint: - hint1: The best solution uses two `move forward` commands and one loop. - grade2_PuppyLoops_6_authored_hint: - 2-3_Maze_16_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. - 2-3_Maze_16_b: "To put lots of blocks inside a `repeat` loop, just drag a loop out into the workspace, then drag all of the blocks from the starting program inside of it. \n\nConnect it all back to the `when run` block and you're good to go!" - grade2_PuppyLoops_7_authored_hint: - 2-3_Maze_Loops_17_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. - 2-3_Maze_Loops_17_b: Did the starting code get deleted? Click `start over` to get it back! - grade2_PuppyLoops_8_authored_hint: - 2-3_Artist_Debugging_2_a: 'Hint: Each whisker is 75 pixels long.' - grade2_PuppyLoops_9_authored_hint: - 2-3_Artist_Debugging_7_a: What happens if you have the artist move or jump backward after he draws the first line? - grade3_bee_conditionals_new1a_authored_hint: - grade3_bee_conditionals_new1a_a: Be sure to use an `if` statement to check each space to see if it has a flower or nothing. - grade3_bee_conditionals_new2a_authored_hint: - grade3_bee_conditionals_new2a_a: You can still treat every space as if there is a cloud over it, even though you can see the whole path. - grade3_bee_conditionals_new2a_b: 'Use an `if` statement inside your loop to check each space. ' - grade3_bee_conditionals_new3a_authored_hint: - grade3_bee_conditionals_new3a_a: In this puzzle, you know that each square has either a flower or a honeycomb. That means you can repeat your `if/else` conditional at each square. - grade3_bee_Conditionals_new4_authored_hint: - grade3_bee_Conditionals_new4_a: Don't forget that you can use loops for shorter code! - grade3_bee_conditionals_quantum1_authored_hint: - grade3_bee_conditionals_quantum1_a: You will need to use an `if` block to check to see if there is a flower beneath the cloud before you try to get nectar. - grade3_bee_conditionals_quantum2_authored_hint: - grade3_bee_conditionals_quantum2_a: Sometimes a flower will be there, sometimes it won't. If you want your code to run in both cases, make sure to use an `if` statement. - grade3_bee_conditionals_quantum3_authored_hint: - grade3_bee_conditionals_quantum3: Make sure to use an `if` statement to check for honeycomb beneath each cloud. - grade3_bee_conditionals_quantum4_authored_hint: - remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if/else`) to solve the challenge." - grade3_bee_conditionals_quantum5_authored_hint: + grade3_ConditionalsElse_4_authored_hint: + remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." + grade3_ConditionalsElse_5_authored_hint: + remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." + grade3_ConditionalsElse_TeacherIDo_authored_hint: remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." - grade3_bee_conditionals_quantum5_a: This puzzle is tricky, because you can't check blank squares, nectar *and* honey with a single conditional. grade3_Conditionals_10 BAD_authored_hint: 4-5_Bee_Nested_Loops_Rows_a: Try treating this puzzle like a long rectangle where the bee needs to move forward, then turn left several times to complete the path. grade3_Conditionals_11_authored_hint: @@ -1969,12 +2050,6 @@ en: 2-3_Bee_Conditionals_6_a: 'Remember: Purple flowers change between 0 and 1 nectar when you run your program!' grade3_Conditionals_TeacherIDo_authored_hint: 2-3_Bee_Conditionals_6_a: 'Remember: Purple flowers change between 0 and 1 nectar when you run your program!' - grade3_ConditionalsElse_4_authored_hint: - remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." - grade3_ConditionalsElse_5_authored_hint: - remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." - grade3_ConditionalsElse_TeacherIDo_authored_hint: - remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." grade3_Debugging_1_authored_hint: 2-3_Bee_Debugging_1_a: Once you find and fix the incorrect block, do you see any patterns that could be made more simple using a `repeat` loop? grade3_Debugging_10_authored_hint: @@ -2043,38 +2118,6 @@ en: 2-3_Bee_Loops_2_a: You should end up with four blocks inside your loop. grade3_Loops_9_authored_hint: 2-3_Bee_Loops_3_a: You should have 6 blocks inside your loop. - grade3_maze_loops1_authored_hint: - grade3_maze_loops1_a: Try using the "Step" button to find errors. - grade3_maze_loops2_authored_hint: - grade3_maze_loops2_a: |- - Try using this path through the maze. - - ![](https://images.code.org/6a8b4b97a8eef813d8a827b0b7b2d36b-image-1480446509692.05.22.png) - grade3_maze_loops2_b: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. - grade3_maze_loops2_c: Try using one `repeat` loop inside of another to cut down on the amount of code you need. - grade3_maze_loops2a_authored_hint: - grade3_maze_loops2a_a: To solve this puzzle, you will need to "nest" one `repeat` loop inside of another `repeat` loop. - grade3_maze_loops3_authored_hint: - 2-3_Maze_Loops_19_a: If you are stuck, try writing out the code out on paper without loops first and look for patterns. - 2-3_Maze_Loops_19_b: Nesting `repeat` loops can help decrease the number of blocks used. - 2-3_Maze_Loops_19_c: It will take two sets of nested `repeat` loops to solve this puzzle. - grade3_maze_loops4_authored_hint: - 2-3_Maze_Loops_20_a: Look for a stair-step pattern in this maze to find where a nested loop can be used. - grade3_maze_loops5_authored_hint: - 2-3_Maze_Loops_21_a: If you are having trouble finding the stair-step pattern, try covering the blocked paths with your finger. - grade3_robotFarmer_ConditionalsIntro_10a_authored_hint: {} - grade3_robotFarmer_ConditionalsIntro_11a_authored_hint: {} - grade3_robotFarmer_ConditionalsIntro_5_authored_hint: - grade3_robotFarmer_ConditionalsIntro_5a: Try nesting a `while` loop inside of a `repeat` loop. - grade3_robotFarmer_ConditionalsIntro_7_authored_hint: - grade3_robotFarmer_ConditionalsIntro_7_a: Make sure you're using the `while` loop to figure out how many times to fill each hole. - grade3_robotFarmer_ConditionalsIntro_7_b: Notice that the farmer needs to move forward and down several times in a stair-step pattern. - grade3_robotFarmer_ConditionalsIntro_8_authored_hint: - grade3_robotFarmer_ConditionalsIntro_8_a: The `while path ahead` block lets you keep going, even if you don't know how many squares are in a path. - grade3_robotFarmer_ConditionalsIntro_9_authored_hint: - grade3_robotFarmer_ConditionalsIntro_9_a: You are going to need to use more than one `while` loop. - grade3_robotFarmer_ConditionalsIntro_9_b: Every hole is at the end of a path, so use `while path ahead` before using `while there is a hole`. - grade3_robotFarmer_ConditionalsIntro_9_c: Notice that you need to repeat the `while path ahead`, `while there is a hole` code six times. grade3_RunningFarm_1_authored_hint: grade3_RunningFarm_1_a: You will need to look for corn 5 times, using a repeat loop. grade3_RunningFarm_1_b: Make sure to use an `if at corn` block or you might try to pick something that's not there! @@ -2108,6 +2151,58 @@ en: ![](https://images.code.org/ba8b8c624f21ade9ac823b045085c435-image-1479364378437.png) grade3_RunningFarm_7_b: Try using `when path ahead` to keep the farmer moving the right number of steps. grade3_RunningFarm_7_c: 'Use nested `if` statements and `while there is` loops to check each space for corn and lettuce, then pick only a single pumpkin at the end. ' + grade3_bee_Conditionals_new4_authored_hint: + grade3_bee_Conditionals_new4_a: Don't forget that you can use loops for shorter code! + grade3_bee_conditionals_new1a_authored_hint: + grade3_bee_conditionals_new1a_a: Be sure to use an `if` statement to check each space to see if it has a flower or nothing. + grade3_bee_conditionals_new2a_authored_hint: + grade3_bee_conditionals_new2a_a: You can still treat every space as if there is a cloud over it, even though you can see the whole path. + grade3_bee_conditionals_new2a_b: 'Use an `if` statement inside your loop to check each space. ' + grade3_bee_conditionals_new3a_authored_hint: + grade3_bee_conditionals_new3a_a: In this puzzle, you know that each square has either a flower or a honeycomb. That means you can repeat your `if/else` conditional at each square. + grade3_bee_conditionals_quantum1_authored_hint: + grade3_bee_conditionals_quantum1_a: You will need to use an `if` block to check to see if there is a flower beneath the cloud before you try to get nectar. + grade3_bee_conditionals_quantum2_authored_hint: + grade3_bee_conditionals_quantum2_a: Sometimes a flower will be there, sometimes it won't. If you want your code to run in both cases, make sure to use an `if` statement. + grade3_bee_conditionals_quantum3_authored_hint: + grade3_bee_conditionals_quantum3: Make sure to use an `if` statement to check for honeycomb beneath each cloud. + grade3_bee_conditionals_quantum4_authored_hint: + remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if/else`) to solve the challenge." + grade3_bee_conditionals_quantum5_authored_hint: + remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." + grade3_bee_conditionals_quantum5_a: This puzzle is tricky, because you can't check blank squares, nectar *and* honey with a single conditional. + grade3_maze_loops1_authored_hint: + grade3_maze_loops1_a: Try using the "Step" button to find errors. + grade3_maze_loops2_authored_hint: + grade3_maze_loops2_a: |- + Try using this path through the maze. + + ![](https://images.code.org/6a8b4b97a8eef813d8a827b0b7b2d36b-image-1480446509692.05.22.png) + grade3_maze_loops2_b: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. + grade3_maze_loops2_c: Try using one `repeat` loop inside of another to cut down on the amount of code you need. + grade3_maze_loops2a_authored_hint: + grade3_maze_loops2a_a: To solve this puzzle, you will need to "nest" one `repeat` loop inside of another `repeat` loop. + grade3_maze_loops3_authored_hint: + 2-3_Maze_Loops_19_a: If you are stuck, try writing out the code out on paper without loops first and look for patterns. + 2-3_Maze_Loops_19_b: Nesting `repeat` loops can help decrease the number of blocks used. + 2-3_Maze_Loops_19_c: It will take two sets of nested `repeat` loops to solve this puzzle. + grade3_maze_loops4_authored_hint: + 2-3_Maze_Loops_20_a: Look for a stair-step pattern in this maze to find where a nested loop can be used. + grade3_maze_loops5_authored_hint: + 2-3_Maze_Loops_21_a: If you are having trouble finding the stair-step pattern, try covering the blocked paths with your finger. + grade3_robotFarmer_ConditionalsIntro_10a_authored_hint: {} + grade3_robotFarmer_ConditionalsIntro_11a_authored_hint: {} + grade3_robotFarmer_ConditionalsIntro_5_authored_hint: + grade3_robotFarmer_ConditionalsIntro_5a: Try nesting a `while` loop inside of a `repeat` loop. + grade3_robotFarmer_ConditionalsIntro_7_authored_hint: + grade3_robotFarmer_ConditionalsIntro_7_a: Make sure you're using the `while` loop to figure out how many times to fill each hole. + grade3_robotFarmer_ConditionalsIntro_7_b: Notice that the farmer needs to move forward and down several times in a stair-step pattern. + grade3_robotFarmer_ConditionalsIntro_8_authored_hint: + grade3_robotFarmer_ConditionalsIntro_8_a: The `while path ahead` block lets you keep going, even if you don't know how many squares are in a path. + grade3_robotFarmer_ConditionalsIntro_9_authored_hint: + grade3_robotFarmer_ConditionalsIntro_9_a: You are going to need to use more than one `while` loop. + grade3_robotFarmer_ConditionalsIntro_9_b: Every hole is at the end of a path, so use `while path ahead` before using `while there is a hole`. + grade3_robotFarmer_ConditionalsIntro_9_c: Notice that you need to repeat the `while path ahead`, `while there is a hole` code six times. grade4_arist_nested_loop_polygons1_authored_hint: 4-5_Nested_Loops_7_a: |- This design will loop 10 times over 360 degrees. @@ -2143,6 +2238,13 @@ en: grade4_artist_functions2a_a: To get around using multiple `move forward` blocks, create a `draw triangle` function and call that multiple times. grade4_artist_functions3b_authored_hint: grade4_artist_functions2a_a: To get around using multiple `move forward` blocks, create a `draw hexagon` function and call that multiple times. + grade4_artist_functionsChallenge0_authored_hint: + grade4_artist_functionsChallenge0_a: |- + Start by making a function for a square, then try making a function for a line of squares. + + How would you use the `draw a line of squares` function to make this image? + grade4_artist_functionsChallenge0_b: After your first line of squares, you need to move the artist down and back before you start your second line of squares. + grade4_artist_functionsChallenge0_c: You should move the artist back a different number of pixels for even lines than for odd ones. grade4_artist_functions_challenge_authored_hint: Course_4_SCF_1_a: Each hexagon has 40 pixel sides. Course_4_SCF_1_b: There is a 120 pixel jump between each hexagon in each horizontal line. @@ -2179,13 +2281,9 @@ en: grade4_artist_functions_windows2_authored_hint: grade4_artist_functions_windows2_a: Try creating your function first then adding in windows one at a time. grade4_artist_functions_windows2_b: You shouldn't need to add any extra repeat loops. Just jump the artist 100 pixels forward for each top window, and 150 pixels down to get the bottom windows. - grade4_artist_functionsChallenge0_authored_hint: - grade4_artist_functionsChallenge0_a: |- - Start by making a function for a square, then try making a function for a line of squares. - - How would you use the `draw a line of squares` function to make this image? - grade4_artist_functionsChallenge0_b: After your first line of squares, you need to move the artist down and back before you start your second line of squares. - grade4_artist_functionsChallenge0_c: You should move the artist back a different number of pixels for even lines than for odd ones. + grade4_artist_nestedLoops_challenge2_authored_hint: + Course_4_Artist_11_a: 'The half-hexagon has a **length of 30** and turns right by **60 degrees**. ' + Course_4_Artist_11_b: 'The 2/3 triangle has a **length of 80** and turns right by **120 degrees**. ' grade4_artist_nested_loop_polygons1_authored_hint: 4-5_Nested_Loops_7_a: |- This design will loop 10 times over 360 degrees. @@ -2206,9 +2304,6 @@ en: **6 x ? = 360** grade4_artist_nested_loop_triangles6_authored_hint: 4-5_Nested_Loops_12_a: "**360 / 36 = ?**" - grade4_artist_nestedLoops_challenge2_authored_hint: - Course_4_Artist_11_a: 'The half-hexagon has a **length of 30** and turns right by **60 degrees**. ' - Course_4_Artist_11_b: 'The 2/3 triangle has a **length of 80** and turns right by **120 degrees**. ' grade4_bee_conditionals_new1a_authored_hint: grade4_bee_conditionals_new1a_a: An `if` block will help you out in this puzzle. grade4_bee_conditionals_new2_authored_hint: @@ -2437,6 +2532,8 @@ en: grade5_bee_parameters_new9a_b: For each stair, you'll need to call the function once, turn right, call the function again, then turn left. grade5_playlab_variables2_authored_hint: Course_4_Play_Lab_Vars_2_a: Make sure to set the number for `dog_speed` to something larger than `cat_speed`. + gradeK_sequence_4_authored_hint: + gradeK_sequence_4_a: Try writing down the steps on paper to find a solution! gradek_adventurer_loops3_authored_hint: gradek_adventurer_loops3_a: To change how far the adventurer goes, change the number of times that the loop runs. gradek_adventurer_loops3_b: Don't forget that the adventurer needs to walk down and collect gold after she finishes the `repeat` loop! @@ -2515,50 +2612,6 @@ en: 2) Play a random sound when you click the actor. Now, make sure both of those actions are attached underneath the same event! - gradeK_sequence_4_authored_hint: - gradeK_sequence_4_a: Try writing down the steps on paper to find a solution! - Harvesting_authored_hint: - pointer_harvester_test: What kind of block can I use to check something and make a decision? - Inspirational Artwork_authored_hint: - brush_width: We set the brush width to 1, then the color to blue before we did anything else. - double_loop: Try putting a `for loop` inside of a `repeat` loop. - specifics: "The `for loop` runs from three to seventeen for each of the six \"petals\" before moving on to create the next, drawing shapes with only an odd number of sides.\n \nThe `set alpha` block uses division to fade the color as the counter gets higher." - after: When you're done with each "petal", be sure to `move forward` 20 pixels before you make a 60 degree rotation. - solution: |- - **Solution** - - - ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) - InspirationalArtwork_authored_hint: {} - K2.0 sequence 1_authored_hint: - K2.0_sequence_1_a: This program is missing one block. Can you figure out which one? - K2.0 sequence 10_authored_hint: - K2.0_sequence_10_a: If you're having trouble, try writing down the steps on a piece of paper first. - K2.0_sequence_10_b: You will need three different kinds of arrows to solve this puzzle. - K2.0 sequence 12_authored_hint: - K2.0_sequence_12_a: If the pig isn't moving far enough, try adding another block. - K2.0 sequence 2_authored_hint: - K2.0_sequence_2_a: One of the blocks is moving the bird in the wrong direction. Can you figure out which one and replace it with the correct block? - K2.0 sequence 3_authored_hint: - K2.0_sequence_3_a: If you are having trouble, try to figure out what the correct path is and then remove the block that doesn't fit. - K2.0 sequence 4_authored_hint: - K2.0_sequence_4_a: Use 2 different arrow blocks to solve this puzzle! - K2.0 sequence 5_authored_hint: - K2.0_sequence_5: Your final code should have three movement blocks. - K2.0 sequence 6_authored_hint: - K2.0_sequence_6_a: There is 1 block that you need to add to move the bird to the pig. - K2.0_sequence_6_b: If you can't figure out what to do, try drawing the puzzle on paper and use your finger to figure out which way to move. - K2.0 sequence 7_authored_hint: - K2.0_sequence_7_a: If you're stuck, try drawing the image on paper to see how the bird should move. - K2.0 sequence 8_authored_hint: - K2.0_sequence_8_a: Stuck? Try tracing the bird's path with your finger. - K2.0 sequence 9_authored_hint: - K2.0_sequence_9_a: If you're having trouble, try writing down the steps on a piece of paper first. - K2.0_sequence_9_b: You will need to go three different directions to solve this puzzle. - K2.0 sequence FP_authored_hint: - K2.0_sequence_FP_a: If the path you need is unclear, use your finger to trace your way from the bird to the pig. - K2.0 sequence pre_authored_hint: - K2.0_sequence_pre_a: If you are having trouble getting the bird to move, make sure blocks are connected under `when run`. level 'grade3_Loops_10_authored_hint: 2-3_Bee_Loops_4_a: You should end up with five blocks inside your loop. level 'grade3_Loops_11_authored_hint: @@ -2579,59 +2632,6 @@ en: 2-3_Bee_Loops_2_a: You should end up with four blocks inside your loop. level 'grade3_Loops_9_authored_hint: 2-3_Bee_Loops_3_a: You should have 6 blocks inside your loop. - MikeStar_authored_hint: - hint1: Don't give up! - MikeStarHard_authored_hint: - hint1: Don't give up! - MikeStarNested_authored_hint: - hint1: Don't give up! - NEW Course 4 Artist Functions 13_authored_hint: - NEW_Course_4_Artist_Functions_13_a: Edit the `draw a line of squares` function so that you don't have to call it twice. - NEW_Course_4_Artist_Functions_13_b: Notice, you'll have to move forward by 60 pixels and turn 144 degrees. - NEW_Course_4_Artist_Functions_13_c: What code would you need if you were going to try to make a star with regular lines? - NEW Course 4 Artist Functions 4_authored_hint: - NEW_Course_4_Artist_Functions_4_a: You will have to use a `turn right by 120 degrees` block after each square. - NEW Course 4 Artist Functions 9_authored_hint: - NEW_Course_4_Artist_Functions_9_a: Try running the code before you add any blocks. What makes the drawing look a little off? - NEW_Course_4_Artist_Functions_9_b: If you can't quite put your finger on what's going wrong, try slowing down the artist's by moving the slider to the left. - NEW Course 4 Artist Params 11_authored_hint: - NEW_Course_4_Artist_Params_11_a: There is more than one number that needs to be replaced by a variable inside the function. - NEW Course 4 Artist Params 13_authored_hint: - NEW_Course_4_Artist_Params_13_a: 'You will need to divide the *perimeter* by the number of sides in order to keep the shapes the same size overall. ' - NEW Course 4 Artist Params 14_authored_hint: - NEW_Course_4_Artist_Params_14_a: It's okay to run the program a few times to figure out how the function works with different parameters. - NEW Course 4 Artist Params inspire_authored_hint: - brush_width: We set the brush width to 1, then the color to blue before we did anything else. - double_loop: Try putting a `for loop` inside of a `repeat` loop. - specifics: "The `for loop` runs from three to seventeen for each of the six \"petals\" before moving on to create the next, drawing shapes with only an odd number of sides.\n \nThe `set alpha` block uses division to fade the color as the counter gets higher." - after: When you're done with each "petal", be sure to `move forward` 20 pixels before you make a 60 degree rotation. - solution: |- - **Solution** - - - ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) - NEW Course 4 Bee For Loops 10a_authored_hint: - NEW_Course_4_Bee_For_Loops_10a_a: Can you find a pattern between the number of steps you need to take and the number of nectars to gather? - NEW_Course_4_Bee_For_Loops_10a_b: You'll need to have 2 repeats, one will use a math block. - NEW Course 4 Bee For Loops 7_authored_hint: - NEW_Course_4_Bee_For_Loops_7_a: |- - Try doing some math with the counter variable. - - What do you have to do to the counter at each flower to equal the amount of nectar you need to collect? - NEW Course 4 Bee For Loops 8_authored_hint: - NEW_Course_4_Bee_For_Loops_8_a: "If your loop is counting up, the increment is added to your counter variable each time through. \n\nWhat do you need to add to each number to get the number after it?" - Pattern Bee 1_authored_hint: - conditional_pointer: |- - Start by thinking about this part: what's different each step of the way? What kind of block can you use to make a *decision* about whether you're at a flower or honeycomb? - - ![](https://images.code.org/a4883ea91c2f879ca1bb281d7944ed87-image-1471477752512.48.07 PM.png) - turn_at_honeycomb_pointer: Other than making honey, do you see anything different that you have to do at each honeycomb? - Planning Farmer_authored_hint: - conditional_pointer: |- - Start by thinking about this part: what's different each step of the way? What kind of block can you use to make a *decision* about whether you're at a flower or honeycomb? - - ![](https://images.code.org/a4883ea91c2f879ca1bb281d7944ed87-image-1471477752512.48.07 PM.png) - turn_at_honeycomb_pointer: Other than making honey, do you see anything different that you have to do at each honeycomb? playLabDebugVideo1_authored_hint: courseA_playLab_events2_a: "Here is the block you should connect to the `when run` block: \n\n![](https://images.code.org/ae72d1270ad210cd00fae7e0dfb3549a-image-1478144412134.png)" sample3_authored_hint: diff --git a/dashboard/config/locales/callouts.en.yml b/dashboard/config/locales/callouts.en.yml index 3bc2b2fe164f8..01096710d2d21 100644 --- a/dashboard/config/locales/callouts.en.yml +++ b/dashboard/config/locales/callouts.en.yml @@ -13,31 +13,8 @@ en: 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. 4-5 Bee Conditionals 2_callout: 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. - aE1_callout: - aE1_1: There will only be two of these and two turns - aE2_callout: - aE2_1: Still only two of these and two turns - aE3_callout: - aE3_1: Only a handful of these available - aE3alternate_callout: - aE3_1: Only a handful of these available - aE3alternateB_callout: - aE3_1: Only a handful of these available - aE4_callout: - aE3_1: Only a handful of these available - aE5_callout: - aE3_1: Only a handful of these available - aE6_callout: - aE6_1: Only 1 move forward and 1 turn block - aEfreeplay_callout: - aEfreeplay_1: Note that starting the artist in the middle can be awkward. We're looking at adding actions that can move the artist to absolute positions. - allthethings_U3 - Simple Drawing - Rectangle Width and Height_callout: {} - Applab test_callout: {} AppLab_test02_callout: {} - artistLoopsK2_callout: - artistLoopsK2_1: This number tells you how many of these blocks you can use in this puzzle. - artistLoopsK2gradek_artist_loops3_callout: - artistLoopsK2_1: This number tells you how many of these blocks you can use in this puzzle. + Applab test_callout: {} Big Game Animation 1 (copy 1)_callout: {} Big Game Animation 1_callout: {} Big Game Animation 2 (copy 1)_callout: @@ -79,6 +56,152 @@ en: big_game_bg: Click "edit" to change the background image of your game Big Game Vars 4 (copy 1)_callout: {} Big Game Vars 4_callout: {} + CSD U3 - complex - compound conditionals_callout: {} + CSD U3 - complex - key up and down_callout: {} + CSD U3 - complex - mouse down_callout: {} + CSD U3 - complex - mouse move_callout: {} + CSD U3 - complex - nested conditional_callout: {} + CSD U3 - conditionals - first conditional 2_callout: {} + CSD U3 - conditionals - first conditional_callout: {} + CSD U3 - conditionals - transition 2_callout: {} + CSD U3 - conditionals - transition_callout: + CSD_U3_L8_S6_C1: Put the console log statement here + CSD U3 - images - first sprite with image_callout: {} + CSD U3 Boolean Modify_callout: {} + CSD U3 Boolean Predict_callout: {} + CSD U3 Compound Nested Challenge_callout: {} + CSD U3 Compound Nested Examples_callout: {} + CSD U3 Conditional Project_callout: {} + CSD U3 Direction Animations_callout: {} + CSD U3 Direction Arrows_callout: {} + CSD U3 Else_callout: {} + CSD U3 If Else_callout: {} + CSD U3 Keypress Boolean_callout: {} + CSD U3 Keypress Watchers_callout: {} + CSD U3 Property Conditional Multi_callout: {} + CSD U3 Property Conditional_callout: {} + CSD U3 Random Choice_callout: {} + CSD U3 Random Intro_callout: {} + CSD U3 Random Min Max_callout: {} + CSD U3 Simple Drawing - Animation 2_callout: {} + CSD U3 Sprites intro sprites_callout: {} + CSD U3 UP_ARROW_callout: {} + CSD U3 Variables TEMPLATE square_callout: {} + CSD U3 Variables make a big square_callout: {} + CSD U3 Variables make a square_callout: {} + CSD U3 abstraction accelerateX_callout: + CSD_U3_L11_S6_C1: Add your code here. + CSD U3 abstraction accelerateY_callout: + CSD_U3_L11_S7_C1: Add your code here. + CSD U3 abstraction change velocityX_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 abstraction change velocityXY_callout: + CSD_U3_L12_S4_C1: The velocity is updated here. + CSD U3 abstraction change velocityY_callout: + CSD_U3_L11_S6_C1: Add your block here. + CSD U3 abstraction circle_callout: + CSD_U3_L12_S7_C1: Look at this line. + CSD U3 abstraction dragonfly (OLD)_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 abstraction dragonfly OLD_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 abstraction horse_callout: + CSD_U3_L11_S13_C1: Set your sprite's velocityX and velocityY here + CSD_U3_L11_S13_C2: Change your sprite's velocityY here. + CSD U3 abstraction horse2_callout: + CSD_U3_L11_S15_C1: Set your sprite's velocityY here + CSD U3 abstraction horse3_callout: + CSD_U3_L11_S16_C1: Use the counter pattern to make the horse fall here. + CSD_U3_L11_S16_C2: Stop the horse from falling here. + CSD U3 abstraction jump_callout: + CSD_U3_L11_S17_C1: Look at this if statement + CSD_U3_L11_S17_C2: Send the frog back down here + CSD U3 abstraction jumper intro_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction jumper template_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction jumping_callout: + CSD_U3_L13_S8_C1: Set the velocity here + CSD U3 abstraction looping_callout: + CSD_U3_L11_S17_C1: Look at this if statement + CSD U3 abstraction parabola_callout: + CSD_U3_L11_S13_C1: Add your block here. + CSD U3 abstraction rotation accelerate_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD_U3_L11_S5_C2: Add your code here. + CSD U3 abstraction rotation control_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD U3 abstraction rotation_callout: + CSD_U3_L11_S4_C1: Use the rotationSpeed block here + CSD U3 abstraction setSpeed accelerate_callout: + CSD_U3_L11_S14_C1: Add your code here. + CSD U3 abstraction sidescroll intro_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction sidescroll template_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction sidescroll_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction tumbleweed_callout: + CSD_U3_L11_S17_C1: Look at this if statement + CSD U3 abstraction velocityX control_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD U3 abstraction velocityX if-statements_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD U3 abstraction velocityX_callout: + CSD_U3_L11_S4_C1: Add your block here. + CSD U3 abstraction velocityY 2_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 abstraction velocityY control_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD U3 abstraction velocityY_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 collisions getSpeed_callout: + CSD_U3_L11_S2_C1: Add your code for the compass here. + CSD_U3_L11_S2_C2: Change the code to display speed here. + CSD U3 collisions isTouching intro_callout: + CSD_U3_L12_S2_C1: Add your block here. + CSD U3 collisions pinball2_callout: + CSD_U3_L14_S16_C1: Sprite interactions go in this function. + CSD U3 collisions scoreboard_callout: + CSD_U3_L12_S8_C1: These blocks display the score. + CSD_U3_L12_S8_C2: The blocks that determine whether the bunny has caught the carrot go here. + CSD U3 collisions try blocks_callout: + CSD_U3_L13_S6_C1: Change this block. + CSD U3 collisions types_callout: + CSD_U3_L13_S6_C1: Add your code here. + CSD U3 game backgrounds_callout: + CSD_U3_S18_L4_C1: This block calls your function. + CSD_U3_L18_S4_C2: Functions area + CSD U3 game variables_callout: + CSD_U3_S18_L3_C1: This block creates a new variable. + CSD_U3_L18_S3_C2: Variables area + CSD U3 platform background1_callout: + CSD_U3_L16_S3_C1: the function that draws the background + CSD_U3_L16_S3_C2: the code that calls the function + CSD_U3_L16_S3_C3: Change this function. + CSD U3 platform platform1_callout: + CSD_U3_S17_L8_C1: This block creates a new sprite. + CSD U3 platform scoreboard_callout: + CSD_U3_L17_S7_C1: Score is printed here. + CSD U3 platform variable1_callout: + callout: This block creates a variable. + CSDU4 - Design Mode - 3_callout: {} + CSPU5_U3L16 - setPosition to fixed location_callout: + firstTimeSetPosition: Drag this inside the event handler function. Then click the arrows to get rid of the width and height parameters. + CSPU5_U3L16 - setPosition to move button_callout: + randNumReminder: Use this as the the value for the x and y coordinates in setPosition. Just drag it into the parameter you want. + CSPU5_setPosition to fixed location_callout: + firstTimeSetPosition: Drag this inside the event handler function. Then click the arrows to get rid of the width and height parameters. Calc Circles of Eval .1_callout: Calc Circles of Eval .1: This is the evaluation block. Click on the drop down box to change the number Calc Circles of Eval .2_callout: @@ -183,91 +306,298 @@ en: Course 4 Playlab For Loops 6b_callout: {} Course 4 SCV 6_callout: Course_4_SCV_6: This block allows you to customize your color to almost anything you want to see! Play around with the numbers to see what happens! - course_playlab_variables2_callout: - course_playlab_variables2_1: This is how you set the value of your variable. Change the text connected to this block to change what is being held in your variable. - course_playlab_variables3_callout: - course_playlab_variables3_1: This is how you set the value of your variable. - courseA_artist_loops4_callout: - courseA_artist_loops4_1: This number tells you how many of these blocks you can use in this puzzle. - courseA_artist_loops8_callout: - courseA_artist_loops8_1: Did you know that you can draw back over a line whenever you need to? - courseA_collector_loops1_callout: - courseA_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. - courseA_collector_loops3_callout: - gradek_adventurer_loops2_1: This number tells you how many of these blocks you can use in this puzzle. - courseA_collector_loops3_predict1_callout: {} - courseA_playLab_events2_callout: {} - courseA_playLab_events3_callout: {} - courseA_playLab_events4_callout: {} - courseA_playLab_events5_callout: {} - courseA_playLab_events6_callout: - courseA_playLab_events6_1: This let's you choose a "random" sound, which means that you don't know what you are going to get until you hear it! - courseB_artist_loops3_callout: - courseB_artist_loops3_1: There is only one of these blocks in the toolbox. How will you use it? - courseB_collector_loops1_callout: - courseB_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. - courseB_maze_seq7_callout: - courseB_maze_seq7_1: These grey blocks are made of stone! That means that they can't be trashed. - courseC_artist_prog1_callout: {} - courseC_artist_prog2_callout: {} - courseC_collector_prog1_callout: - courseC_collector_prog1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. - courseC_collector_prog7_callout: - courseC_collector_prog7_1: You can take more blocks from the toolbox if you need them! - courseC_collector_prog8_callout: {} - courseC_collector_prog9_callout: {} - courseC_collector_progA_callout: {} - courseC_collector_progB_callout: {} - courseC_maze_loops2_callout: - courseC_maze_loops2_1: You only have one of these blocks available in this puzzle. - courseC_maze_loops2_predict1_callout: {} - courseC_maze_programming1_callout: - grade2_CaringForNewPet_0_1: After connecting all the blocks, press "Run" to start your program. - courseC_maze_programming2_callout: - courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. - courseC_maze_programming3_callout: - courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. - courseC_maze_programming4_callout: - courseC_maze_programming4_1: This is your block limit. It tells you how many of these blocks you have left to use. - courseC_maze_programming5_callout: {} - courseC_maze_programming7_callout: - courseC_maze_programming7_1: This is your first challenge puzzle! These are meant to be hard and may take several tries. - courseD_artist_functions2_callout: - courseD_artist_functions2_1: When this green block runs, all of the code in the function will run. What should the artist do after drawing the first square? - courseD_artist_functions8_callout: - courseD_artist_functions8_1: Your blocks to create functions have been moved under this label in the toolbox. - courseD_artist_ramp11_callout: - courseD_artist_ramp11_1: You can change this number. - courseD_artist_ramp11_2: Click here to type in the number of times to repeat your code. - courseD_artist_ramp12_callout: {} - courseD_bee_conditionals2_callout: - 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. - courseD_collector_ramp10_callout: {} - courseD_collector_ramp8_callout: - courseD_collector_ramp8_1: 'Use this block to collect a single piece of treasure. ' - courseD_collector_ramp9_callout: {} - courseD_maze_ramp1_callout: - grade2_CaringForNewPet_0_1: After connecting all the blocks, press "Run" to start your program. - courseD_maze_ramp2_callout: - courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. - courseD_maze_ramp3_callout: - courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. - courseD_maze_ramp4_callout: - courseC_maze_programming4_1: This is your block limit. It tells you how many of these blocks you have left to use. - courseD_maze_ramp5_callout: {} - courseD_maze_ramp6_callout: - courseD_maze_ramp6_1: Whatever code you put in here will repeat as many times as you tell it to, then continue to run the rest of the program. - courseD_maze_ramp7_callout: - courseD_maze_ramp7_1: This is your first challenge puzzle! These are meant to be hard and may take several tries. - courseD_playLab_condFP_callout: - courseD_playLab_condFP_1: we have organized the blocks into categories to give you more code to play with! Click here to see where everything went. - courseE_artist_functions1_callout: - courseD_artist_functions1_1: Let's start by using this block to help create the first square. - courseE_artist_functions2_callout: - courseD_artist_functions2_1: When this green block runs, all of the code in the function will run. What should the artist do after drawing the first square? - courseE_artist_functions8_callout: - courseD_artist_functions8_1: Your blocks to create functions have been moved under this label in the toolbox. - courseE_artist_functions_predict1_callout: {} + Eval Booleans 2_callout: + Eval Booleans 2 1: Select a number that will make this expression evaluate to true + Eval Cond 1_callout: + Eval Cond 1 1: Click edit to change the value of this variable + Eval Define Funcs 2_callout: + Eval Define Funcs 2 triangle: Change the triangle's style here + Eval Define Funcs 3_callout: + Eval Define Funcs 3: Make our function use the radius parameter instead of always having a radius of 50. + Eval Define Funcs 4_callout: + Eval Define Funcs 4: Go to the Functions drawer to "Create a Function" + Eval Define Funcs 4B: Click "Add" to add a domain radius, of type Number + Eval Define Funcs 4C: Set the range to Image + Eval Define Funcs Test_callout: + Eval Define Funcs 3: Make our function use the radius parameter instead of always having a radius of 50. + Eval Design Recipe .1_callout: + edit_function: Click here to edit your function. + Eval Design Recipe 3_callout: + eval_design_recipe_3: This is your function definition. This code runs every time you use the 'wide-rect' function + Eval Strings Images .1_callout: + type_string: 'Drag this string into the evaluate block in the workspace. ' + Eval Strings Images .2_callout: {} + Eval Strings Images 1_callout: + purple_image_block: Purple colored blocks output Image values + Eval Strings Images 2_callout: + string_block_color: Try typing in a color as a String here + Eval Strings Images 3_callout: + Eval Strings Images 3: Use this style block and select "outline" + Eval Strings Images 5_callout: + Eval Strings Images 5_callout1: Overlay a triangle by filling in this slot + Eval Strings Images 7_callout: {} + Geometric Pattern_callout: + 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! + Geometric Sun_callout: + 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! + Infinity_move_collide_callout: + Infinity_move_collide_callout: Play a sound when this event occurs. + Infinity_move_directions_callout: + Infinity_move_directions_callout: Which block will make Baymax move up when the up arrow is pressed? + Infinity_move_directions_callout_arrow: Use these arrows to steer + Infinity_move_right_callout: + Infinity_move_right_runbutton: Add move block here + Infinity_repeat_callout: + Infinity_repeat_callout: Place Move blocks inside here + Luigi's Pizza 1 (copy 1)_callout: + luigi's pizza 1: Try ordering a pepperoni pizza + Luigi's Pizza 1_callout: + luigi's pizza 1: Try ordering a pepperoni pizza + Luigi's Pizza 2 (copy 1)_callout: + luigi's pizza 2: Edit this function to add your own toppings + Luigi's Pizza 2_callout: + luigi_pizza_2: Edit this function to add your own toppings + Luigi's Pizza 3 (copy 1)_callout: {} + Luigi's Pizza 3_callout: {} + Luigi's Pizza 4_callout: {} + MC HOC 2016 Level 1_callout: {} + MC HOC 2016 Level 2-2_callout: + craft2_run_button_callout: When you are ready, hit "Run" to try your program. + MC HOC 2016 Level 6_callout: {} + MC HOC 2016 Nerop_callout: {} + MC HOC 2016 New Drop_callout: {} + MC HOC 2016 New Spawn_callout: {} + MC HOC 2016 New Walk_callout: + MC_HOC_2016_New_Walk_callout2: Hit "Run" to start moving. + MC HOC 2016 New pn_callout: {} + MSM Defining Vars 2_callout: + MSM Defining Vars 2_callout1: Click "edit" to open the function editor to update the function + MSM Defining Vars 2_callout2: Define the triangle here + MSM Defining Vars 3_callout: + MSM Defining Vars 3: Click here to find your variables + Mike Playlab Project_callout: + New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program + New Play Lab Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + Modular Arithmetic_callout: {} + NEW Course 4 Artist Functions 10_callout: {} + NEW Course 4 Artist Functions 3_callout: + NEW_Course_4_Artist_Functions_3_1: Click here to edit the new function so that it creates a square. + NEW Course 4 Artist Functions 5_callout: + edit_function: Click here to edit your function. + function_editor_draw_square: This is your function definition. These blocks run everytime you use the "draw a square" block + NEW Course 4 Artist Functions 7_callout: + edit_function: Click here to edit your function. + NEW Course 4 Artist Functions 8_callout: + edit_function: Click here to edit your function. + NEW Course 4 Artist Params 10_callout: + create_function: Click here to open the "Functions" flyout, then click the "Create a Function" button. + NEW Course 4 Artist Params 2_callout: + create_function: + name_function: + write_draw_triangle_function: + NEW Course 4 Artist Params 9_callout: + edit_add_parameter: Click edit to add a parameter in your function + add_and_drag_parameter: Write in the name of your parameter here, click add, and then drag it into your function definition + NEW Course 4 Artist Vars 6_callout: + place_length_variable: Drag the length variable here to replace the question marks + NEW Course 4 Bee For Loops 4_callout: + bee_for_loop: Enter the largest number of nectar you want the bee to collect here + NEW Course 4 Bee For Loops 5_callout: + actions_category: The tool box got a new look! The "Actions" blocks are in here now. + New App Lab Project_callout: {} + New Artist Project_callout: + New Artist Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace to add them to your program + New Artist Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + New Maker Lab Project_callout: {} + New Play Lab Project_callout: + New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program + New Play Lab Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + Ninjacat Demo B_callout: + Ninjacat Demo B: Click `Run` to try out the game + Ninjacat Demo No Animate_callout: + Ninjacat Demo B: Click `Run` to try out the game + Overworld Chop Trees_callout: + craft_callout_preplaced: We've put some blocks here to get you started + Overworld House Frame Chosen_callout: + craft_callout_preplaced_house: This code will start building your house. Can you finish it? + Overworld Move to Sheep_callout: + craft_run_button_callout: Hit "Run" to try your program + craft_drag_block_callout: Drag a "move forward" block and snap it below the other block + Overworld Place Wall_callout: + craft_inside_repeat: Repeat actions by placing blocks in here + PDAlg 13-16 Sam Extension Puzzle_callout: {} + PDAlg 17-20 Luigi Extension Puzzle_callout: {} + PDAlg Big Game History_callout: {} + PDAlg Big Game Remix_callout: {} + PDAlg Design Recipe Delete_callout: {} + PS copy 2-3 Bee Conditionals 5_callout: + Bee_Cond_5_1a: Purple flowers can have either 1 or 0 nectar...but you won't know until you run the code! + Pizza on a Plate_callout: + 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! + Play Lab Rocket 2_callout: + pass_function: This start(function) block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! + play lab rocket 2: Define your rocket-height function here + Play Lab Rocket 2B_callout: + pass_function: This black block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! + Play Lab Rocket 3_callout: + Play Lab Rocket 3 1: Update the purpose statement before moving on to the examples and definition. + Play Lab Rocket Free Play_callout: {} + Poorva copy U3L2 Using Simple Commands_callout: {} + Rock Paper Scissors_callout: + New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program + New Play Lab Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + Rocket Height Course A_callout: + pass_function: This start(function) block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! + Ryan - 4-5 Bee Conditionals 2_callout: + 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. + Ryan - Bee Conditionals_callout: + 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. + Sam the Butterfly 3_callout: + Sam the Butterfly 3 1: Edit this function to keep Sam from going off the right side + Sam the Butterfly 5_callout: {} + Test Play Lab Project With Walls_callout: + New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program + New Play Lab Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + TestLab_callout: {} + U3 - Simple Drawing - Ellipse and No Fill_callout: {} + U3 - Simple Drawing - Fill_callout: {} + U3 - Simple Drawing - No Fill_callout: {} + U3 - Simple Drawing - Order of Blocks_callout: {} + U3 - Simple Drawing - Oval_callout: {} + U3 - Simple Drawing - Rectangle Width and Height_callout: {} + U3 - Simple Drawing - Rectangle_callout: {} + U3 - Simple Drawing - Stroke and Stroke Weight_callout: {} + U3 - Simple Drawing - X and Y values_callout: {} + U3 - Simple Drawing - regular polygon_callout: {} + U3 - Simple Drawing - text_callout: {} + U3 - Sprites - Intro Sprites_callout: {} + U3 Variables flower example_callout: {} + U3 Variables gray square_callout: {} + U3 Variables make a square_callout: {} + U3L05_3x3GridEfficiencyChallenge_callout: {} + U3L05_draw3x3GridEfficiently_callout: {} + U3L2 Using Simple Commands (no tooltips)_callout: {} + U3L2 Using Simple Commands_callout: {} + U3L2_Turtle3by3Grid_callout: {} + U3L2_TurtleSquare_right_callout: {} + U5 ColorSleuth Template_callout: {} + Underground Avoiding Lava_callout: + craft_callout_moveforward: This code will check for lava, can you add a command to move forward? + Underground Iron_callout: + craft_what_is_iron: Mine this iron! + WebLab PS test - 1-12_callout: + version_history_button: Check out version history + WhileAdventure_callout: + sample1_1: This will be an adventurer collecting coins, not a farmer digging. + aE1_callout: + aE1_1: There will only be two of these and two turns + aE2_callout: + aE2_1: Still only two of these and two turns + aE3_callout: + aE3_1: Only a handful of these available + aE3alternate_callout: + aE3_1: Only a handful of these available + aE3alternateB_callout: + aE3_1: Only a handful of these available + aE4_callout: + aE3_1: Only a handful of these available + aE5_callout: + aE3_1: Only a handful of these available + aE6_callout: + aE6_1: Only 1 move forward and 1 turn block + aEfreeplay_callout: + aEfreeplay_1: Note that starting the artist in the middle can be awkward. We're looking at adding actions that can move the artist to absolute positions. + allthethings_U3 - Simple Drawing - Rectangle Width and Height_callout: {} + artistLoopsK2_callout: + artistLoopsK2_1: This number tells you how many of these blocks you can use in this puzzle. + artistLoopsK2gradek_artist_loops3_callout: + artistLoopsK2_1: This number tells you how many of these blocks you can use in this puzzle. + courseA_artist_loops4_callout: + courseA_artist_loops4_1: This number tells you how many of these blocks you can use in this puzzle. + courseA_artist_loops8_callout: + courseA_artist_loops8_1: Did you know that you can draw back over a line whenever you need to? + courseA_collector_loops1_callout: + courseA_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. + courseA_collector_loops3_callout: + gradek_adventurer_loops2_1: This number tells you how many of these blocks you can use in this puzzle. + courseA_collector_loops3_predict1_callout: {} + courseA_playLab_events2_callout: {} + courseA_playLab_events3_callout: {} + courseA_playLab_events4_callout: {} + courseA_playLab_events5_callout: {} + courseA_playLab_events6_callout: + courseA_playLab_events6_1: This let's you choose a "random" sound, which means that you don't know what you are going to get until you hear it! + courseB_artist_loops3_callout: + courseB_artist_loops3_1: There is only one of these blocks in the toolbox. How will you use it? + courseB_collector_loops1_callout: + courseB_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. + courseB_maze_seq7_callout: + courseB_maze_seq7_1: These grey blocks are made of stone! That means that they can't be trashed. + courseC_artist_prog1_callout: {} + courseC_artist_prog2_callout: {} + courseC_collector_prog1_callout: + courseC_collector_prog1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. + courseC_collector_prog7_callout: + courseC_collector_prog7_1: You can take more blocks from the toolbox if you need them! + courseC_collector_prog8_callout: {} + courseC_collector_prog9_callout: {} + courseC_collector_progA_callout: {} + courseC_collector_progB_callout: {} + courseC_maze_loops2_callout: + courseC_maze_loops2_1: You only have one of these blocks available in this puzzle. + courseC_maze_loops2_predict1_callout: {} + courseC_maze_programming1_callout: + grade2_CaringForNewPet_0_1: After connecting all the blocks, press "Run" to start your program. + courseC_maze_programming2_callout: + courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. + courseC_maze_programming3_callout: + courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. + courseC_maze_programming4_callout: + courseC_maze_programming4_1: This is your block limit. It tells you how many of these blocks you have left to use. + courseC_maze_programming5_callout: {} + courseC_maze_programming7_callout: + courseC_maze_programming7_1: This is your first challenge puzzle! These are meant to be hard and may take several tries. + courseD_artist_functions2_callout: + courseD_artist_functions2_1: When this green block runs, all of the code in the function will run. What should the artist do after drawing the first square? + courseD_artist_functions8_callout: + courseD_artist_functions8_1: Your blocks to create functions have been moved under this label in the toolbox. + courseD_artist_ramp11_callout: + courseD_artist_ramp11_1: You can change this number. + courseD_artist_ramp11_2: Click here to type in the number of times to repeat your code. + courseD_artist_ramp12_callout: {} + courseD_bee_conditionals2_callout: + 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. + courseD_collector_ramp10_callout: {} + courseD_collector_ramp8_callout: + courseD_collector_ramp8_1: 'Use this block to collect a single piece of treasure. ' + courseD_collector_ramp9_callout: {} + courseD_maze_ramp1_callout: + grade2_CaringForNewPet_0_1: After connecting all the blocks, press "Run" to start your program. + courseD_maze_ramp2_callout: + courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. + courseD_maze_ramp3_callout: + courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. + courseD_maze_ramp4_callout: + courseC_maze_programming4_1: This is your block limit. It tells you how many of these blocks you have left to use. + courseD_maze_ramp5_callout: {} + courseD_maze_ramp6_callout: + courseD_maze_ramp6_1: Whatever code you put in here will repeat as many times as you tell it to, then continue to run the rest of the program. + courseD_maze_ramp7_callout: + courseD_maze_ramp7_1: This is your first challenge puzzle! These are meant to be hard and may take several tries. + courseD_playLab_condFP_callout: + courseD_playLab_condFP_1: we have organized the blocks into categories to give you more code to play with! Click here to see where everything went. + courseE_artist_functions1_callout: + courseD_artist_functions1_1: Let's start by using this block to help create the first square. + courseE_artist_functions2_callout: + courseD_artist_functions2_1: When this green block runs, all of the code in the function will run. What should the artist do after drawing the first square? + courseE_artist_functions8_callout: + courseD_artist_functions8_1: Your blocks to create functions have been moved under this label in the toolbox. + courseE_artist_functions_predict1_callout: {} courseE_artist_ramp11_callout: courseD_artist_ramp11_1: You can change this number. courseD_artist_ramp11_2: Click here to type in the number of times to repeat your code. @@ -315,239 +645,67 @@ en: courseF_artist_for4_callout: {} courseF_artist_fwp1_callout: courseF_artist_fwp1_1: Click the "edit" button to change the code inside the function. - courseF_artist_fwp4_callout: - courseF_artist_fwp4_1: To complete your polygon, make sure you are always turning by 360 ÷ `sides` degrees. - courseF_artist_fwp5_callout: - courseF_artist_fwp5_1: You will find the polygon function in here. - courseF_artist_variables1_callout: - courseF_artist_variables1_1: Notice that blocks now have a new way to enter numbers. These `math` blocks can be pulled out and moved around! - courseF_artist_variables10_callout: {} - courseF_artist_variables2_callout: {} - courseF_artist_variables3_callout: - courseF_artist_variables3_a: Use this to set the value of the variable `length` - courseF_artist_variables3a_predict1_callout: {} - courseF_artist_variables4_callout: {} - courseF_artist_variables5_callout: {} - courseF_artist_variables6_callout: - courseF_artist_variables6_1: Variables can be helpful when you have to change a lot of copies of the same number. - courseF_artist_variables6a_callout: - courseF_artist_variables6a_1: Variables can be helpful when you have to change a lot of copies of the same number. - courseF_artist_variables7_callout: {} - courseF_artist_variables8_callout: {} - courseF_artist_variables9_callout: {} - courseF_artist_variables_10_callout: {} - courseF_artist_variables_2_callout: {} - courseF_artist_variables_3_callout: - courseF_artist_variables_3_a: Use this to set the value of the variable `length` - courseF_artist_variables_4_callout: {} - courseF_artist_variables_5_callout: {} - courseF_artist_variables_6_callout: - courseF_artist_variables_6_1: Variables can be helpful when you have to change a lot of copies of the same number. - courseF_artist_variables_6a_callout: - courseF_artist_variables6a_1: Variables can be helpful when you have to change a lot of copies of the same number. - courseF_artist_variables_7_callout: {} - courseF_artist_variables_8_callout: {} - courseF_artist_variables_9_callout: {} - courseF_artist_variables_FP_callout: {} - courseF_artist_variablesFP_callout: {} - courseF_bee_for3_callout: - courseF_bee_for3_1: The `for` loop is so wide that we have changed the toolbox into category mode to save space. You will find the new `for` loop in here! - courseF_bee_for3_predict1_callout: {} - courseF_bee_for4_callout: {} - courseF_bee_for6_callout: {} - courseF_bee_for9_callout: - courseF_bee_for9_1: You will find the `math` block in here. - courseF_bee_fwp1_callout: - courseF_bee_fwp1_1: You can find `if` statements in here. - courseF_bee_fwp3_callout: - courseF_bee_fwp3_1: This same function can be used when checking for empty spaces as well as clouds. - courseF_bee_fwp4_callout: - courseF_bee_fwp4_1: Press the "edit" button to add a parameter to this function. - courseF_playlab_variables1a_callout: - courseF_playlab_variables1a_1: The toolbox has been organized into categories to make it easier to find the blocks you need. - courseF_playlab_variables2_callout: - course_playlab_variables2_1: This is how you set the value of your variable. Change the text connected to this block to change what is being held in your variable. - courseF_playlab_variables2a_callout: {} - courseF_playlab_variables3_callout: {} - courseF_playlab_variables4_callout: {} - courseF_playlab_variables5_callout: {} - CSD U3 - complex - compound conditionals_callout: {} - CSD U3 - complex - key up and down_callout: {} - CSD U3 - complex - mouse down_callout: {} - CSD U3 - complex - mouse move_callout: {} - CSD U3 - complex - nested conditional_callout: {} - CSD U3 - conditionals - first conditional 2_callout: {} - CSD U3 - conditionals - first conditional_callout: {} - CSD U3 - conditionals - transition 2_callout: {} - CSD U3 - conditionals - transition_callout: - CSD_U3_L8_S6_C1: Put the console log statement here - CSD U3 - images - first sprite with image_callout: {} - CSD U3 abstraction accelerateX_callout: - CSD_U3_L11_S6_C1: Add your code here. - CSD U3 abstraction accelerateY_callout: - CSD_U3_L11_S7_C1: Add your code here. - CSD U3 abstraction change velocityX_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 abstraction change velocityXY_callout: - CSD_U3_L12_S4_C1: The velocity is updated here. - CSD U3 abstraction change velocityY_callout: - CSD_U3_L11_S6_C1: Add your block here. - CSD U3 abstraction circle_callout: - CSD_U3_L12_S7_C1: Look at this line. - CSD U3 abstraction dragonfly (OLD)_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 abstraction dragonfly OLD_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 abstraction horse_callout: - CSD_U3_L11_S13_C1: Set your sprite's velocityX and velocityY here - CSD_U3_L11_S13_C2: Change your sprite's velocityY here. - CSD U3 abstraction horse2_callout: - CSD_U3_L11_S15_C1: Set your sprite's velocityY here - CSD U3 abstraction horse3_callout: - CSD_U3_L11_S16_C1: Use the counter pattern to make the horse fall here. - CSD_U3_L11_S16_C2: Stop the horse from falling here. - CSD U3 abstraction jump_callout: - CSD_U3_L11_S17_C1: Look at this if statement - CSD_U3_L11_S17_C2: Send the frog back down here - CSD U3 abstraction jumper intro_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction jumper template_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction jumping_callout: - CSD_U3_L13_S8_C1: Set the velocity here - CSD U3 abstraction looping_callout: - CSD_U3_L11_S17_C1: Look at this if statement - CSD U3 abstraction parabola_callout: - CSD_U3_L11_S13_C1: Add your block here. - CSD U3 abstraction rotation accelerate_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD_U3_L11_S5_C2: Add your code here. - CSD U3 abstraction rotation control_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD U3 abstraction rotation_callout: - CSD_U3_L11_S4_C1: Use the rotationSpeed block here - CSD U3 abstraction setSpeed accelerate_callout: - CSD_U3_L11_S14_C1: Add your code here. - CSD U3 abstraction sidescroll intro_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction sidescroll template_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction sidescroll_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction tumbleweed_callout: - CSD_U3_L11_S17_C1: Look at this if statement - CSD U3 abstraction velocityX control_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD U3 abstraction velocityX if-statements_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD U3 abstraction velocityX_callout: - CSD_U3_L11_S4_C1: Add your block here. - CSD U3 abstraction velocityY 2_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 abstraction velocityY control_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD U3 abstraction velocityY_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 Boolean Modify_callout: {} - CSD U3 Boolean Predict_callout: {} - CSD U3 collisions getSpeed_callout: - CSD_U3_L11_S2_C1: Add your code for the compass here. - CSD_U3_L11_S2_C2: Change the code to display speed here. - CSD U3 collisions isTouching intro_callout: - CSD_U3_L12_S2_C1: Add your block here. - CSD U3 collisions pinball2_callout: - CSD_U3_L14_S16_C1: Sprite interactions go in this function. - CSD U3 collisions scoreboard_callout: - CSD_U3_L12_S8_C1: These blocks display the score. - CSD_U3_L12_S8_C2: The blocks that determine whether the bunny has caught the carrot go here. - CSD U3 collisions try blocks_callout: - CSD_U3_L13_S6_C1: Change this block. - CSD U3 collisions types_callout: - CSD_U3_L13_S6_C1: Add your code here. - CSD U3 Compound Nested Challenge_callout: {} - CSD U3 Compound Nested Examples_callout: {} - CSD U3 Conditional Project_callout: {} - CSD U3 Direction Animations_callout: {} - CSD U3 Direction Arrows_callout: {} - CSD U3 Else_callout: {} - CSD U3 game backgrounds_callout: - CSD_U3_S18_L4_C1: This block calls your function. - CSD_U3_L18_S4_C2: Functions area - CSD U3 game variables_callout: - CSD_U3_S18_L3_C1: This block creates a new variable. - CSD_U3_L18_S3_C2: Variables area - CSD U3 If Else_callout: {} - CSD U3 Keypress Boolean_callout: {} - CSD U3 Keypress Watchers_callout: {} - CSD U3 platform background1_callout: - CSD_U3_L16_S3_C1: the function that draws the background - CSD_U3_L16_S3_C2: the code that calls the function - CSD_U3_L16_S3_C3: Change this function. - CSD U3 platform platform1_callout: - CSD_U3_S17_L8_C1: This block creates a new sprite. - CSD U3 platform scoreboard_callout: - CSD_U3_L17_S7_C1: Score is printed here. - CSD U3 platform variable1_callout: - callout: This block creates a variable. - CSD U3 Property Conditional Multi_callout: {} - CSD U3 Property Conditional_callout: {} - CSD U3 Random Choice_callout: {} - CSD U3 Random Intro_callout: {} - CSD U3 Random Min Max_callout: {} - CSD U3 Simple Drawing - Animation 2_callout: {} - CSD U3 Sprites intro sprites_callout: {} - CSD U3 UP_ARROW_callout: {} - CSD U3 Variables make a big square_callout: {} - CSD U3 Variables make a square_callout: {} - CSD U3 Variables TEMPLATE square_callout: {} - CSDU4 - Design Mode - 3_callout: {} - CSPU5_setPosition to fixed location_callout: - firstTimeSetPosition: Drag this inside the event handler function. Then click the arrows to get rid of the width and height parameters. - CSPU5_U3L16 - setPosition to fixed location_callout: - firstTimeSetPosition: Drag this inside the event handler function. Then click the arrows to get rid of the width and height parameters. - CSPU5_U3L16 - setPosition to move button_callout: - randNumReminder: Use this as the the value for the x and y coordinates in setPosition. Just drag it into the parameter you want. + courseF_artist_fwp4_callout: + courseF_artist_fwp4_1: To complete your polygon, make sure you are always turning by 360 ÷ `sides` degrees. + courseF_artist_fwp5_callout: + courseF_artist_fwp5_1: You will find the polygon function in here. + courseF_artist_variables1_callout: + courseF_artist_variables1_1: Notice that blocks now have a new way to enter numbers. These `math` blocks can be pulled out and moved around! + courseF_artist_variables10_callout: {} + courseF_artist_variables2_callout: {} + courseF_artist_variables3_callout: + courseF_artist_variables3_a: Use this to set the value of the variable `length` + courseF_artist_variables3a_predict1_callout: {} + courseF_artist_variables4_callout: {} + courseF_artist_variables5_callout: {} + courseF_artist_variables6_callout: + courseF_artist_variables6_1: Variables can be helpful when you have to change a lot of copies of the same number. + courseF_artist_variables6a_callout: + courseF_artist_variables6a_1: Variables can be helpful when you have to change a lot of copies of the same number. + courseF_artist_variables7_callout: {} + courseF_artist_variables8_callout: {} + courseF_artist_variables9_callout: {} + courseF_artist_variablesFP_callout: {} + courseF_artist_variables_10_callout: {} + courseF_artist_variables_2_callout: {} + courseF_artist_variables_3_callout: + courseF_artist_variables_3_a: Use this to set the value of the variable `length` + courseF_artist_variables_4_callout: {} + courseF_artist_variables_5_callout: {} + courseF_artist_variables_6_callout: + courseF_artist_variables_6_1: Variables can be helpful when you have to change a lot of copies of the same number. + courseF_artist_variables_6a_callout: + courseF_artist_variables6a_1: Variables can be helpful when you have to change a lot of copies of the same number. + courseF_artist_variables_7_callout: {} + courseF_artist_variables_8_callout: {} + courseF_artist_variables_9_callout: {} + courseF_artist_variables_FP_callout: {} + courseF_bee_for3_callout: + courseF_bee_for3_1: The `for` loop is so wide that we have changed the toolbox into category mode to save space. You will find the new `for` loop in here! + courseF_bee_for3_predict1_callout: {} + courseF_bee_for4_callout: {} + courseF_bee_for6_callout: {} + courseF_bee_for9_callout: + courseF_bee_for9_1: You will find the `math` block in here. + courseF_bee_fwp1_callout: + courseF_bee_fwp1_1: You can find `if` statements in here. + courseF_bee_fwp3_callout: + courseF_bee_fwp3_1: This same function can be used when checking for empty spaces as well as clouds. + courseF_bee_fwp4_callout: + courseF_bee_fwp4_1: Press the "edit" button to add a parameter to this function. + courseF_playlab_variables1a_callout: + courseF_playlab_variables1a_1: The toolbox has been organized into categories to make it easier to find the blocks you need. + courseF_playlab_variables2_callout: + course_playlab_variables2_1: This is how you set the value of your variable. Change the text connected to this block to change what is being held in your variable. + courseF_playlab_variables2a_callout: {} + courseF_playlab_variables3_callout: {} + courseF_playlab_variables4_callout: {} + courseF_playlab_variables5_callout: {} + course_playlab_variables2_callout: + course_playlab_variables2_1: This is how you set the value of your variable. Change the text connected to this block to change what is being held in your variable. + course_playlab_variables3_callout: + course_playlab_variables3_1: This is how you set the value of your variable. drawings!_callout: {} - Eval Booleans 2_callout: - Eval Booleans 2 1: Select a number that will make this expression evaluate to true - Eval Cond 1_callout: - Eval Cond 1 1: Click edit to change the value of this variable - Eval Define Funcs 2_callout: - Eval Define Funcs 2 triangle: Change the triangle's style here - Eval Define Funcs 3_callout: - Eval Define Funcs 3: Make our function use the radius parameter instead of always having a radius of 50. - Eval Define Funcs 4_callout: - Eval Define Funcs 4: Go to the Functions drawer to "Create a Function" - Eval Define Funcs 4B: Click "Add" to add a domain radius, of type Number - Eval Define Funcs 4C: Set the range to Image - Eval Define Funcs Test_callout: - Eval Define Funcs 3: Make our function use the radius parameter instead of always having a radius of 50. - Eval Design Recipe .1_callout: - edit_function: Click here to edit your function. - Eval Design Recipe 3_callout: - eval_design_recipe_3: This is your function definition. This code runs every time you use the 'wide-rect' function - Eval Strings Images .1_callout: - type_string: 'Drag this string into the evaluate block in the workspace. ' - Eval Strings Images .2_callout: {} - Eval Strings Images 1_callout: - purple_image_block: Purple colored blocks output Image values - Eval Strings Images 2_callout: - string_block_color: Try typing in a color as a String here - Eval Strings Images 3_callout: - Eval Strings Images 3: Use this style block and select "outline" - Eval Strings Images 5_callout: - Eval Strings Images 5_callout1: Overlay a triangle by filling in this slot - Eval Strings Images 7_callout: {} frozen circle function with parameter_callout: frozen_circle_function_with_parameter_circle: Use the "create a circle" block and change the size. frozen cross rotate_callout: @@ -576,10 +734,6 @@ en: replace_questions: Use the drop-down to replace "???" with a number frozen square snowflake_callout: replace_questions: Use the drop-down to replace "???" with a number - Geometric Pattern_callout: - 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! - Geometric Sun_callout: - 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! grade1_artist_loops2_callout: grade1_artist_loops2_1: There is only one of these blocks in the toolbox. How will you use it? grade1_maze_sequence6_callout: @@ -598,6 +752,8 @@ en: grade2_CaringForNewPet_3D_callout: {} grade2_CaringForNewPet_7D_callout: grade2_CaringForNewPet_7D: This is your first challenge puzzle! These are meant to be harder and may take several tries. + grade2_MakeDogTag_1_callout: {} + grade2_MakeDogTag_BFP_callout: {} grade2_collector_10_callout: {} grade2_collector_7_callout: grade2_collector_7_1: You can take more blocks from the toolbox if you need them! @@ -606,8 +762,6 @@ en: grade2_collector_9a_callout: {} grade2_collector_A_callout: {} grade2_collector_A_predict1_callout: {} - grade2_MakeDogTag_1_callout: {} - grade2_MakeDogTag_BFP_callout: {} grade2_maze_intro10_callout: {} grade2_maze_intro2_callout: grade2_maze_intro2_callout1: This is the run button. Press this button to run your program. @@ -623,11 +777,11 @@ en: grade2_maze_intro9_callout: {} grade2_puppy_loops2_callout: grade2_puppy_loops2_callout1: You only have one of these blocks available in this puzzle. - grade3_bee_conditionals_quantum2_callout: + grade3_ConditionalsElse_2_callout: 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. grade3_Conditionals_3_callout: Bee_Cond_5_1a: Purple flowers can have either 1 or 0 nectar...but you won't know until you run the code! - grade3_ConditionalsElse_2_callout: + grade3_bee_conditionals_quantum2_callout: 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. grade3_playLab_buildGame_1_callout: Playlab_cond_1_1: Think of this block as the computer's way of rolling a die, and you get to decide how many sides the die has. @@ -744,128 +898,9 @@ en: gradek_playlab_events4c_callout: {} gradek_playlab_events5c_callout: gradek_playlab_events5c_1: This let's you choose a "random" sound, which means that you don't know what you are going to get until you hear it! - Infinity_move_collide_callout: - Infinity_move_collide_callout: Play a sound when this event occurs. - Infinity_move_directions_callout: - Infinity_move_directions_callout: Which block will make Baymax move up when the up arrow is pressed? - Infinity_move_directions_callout_arrow: Use these arrows to steer - Infinity_move_right_callout: - Infinity_move_right_runbutton: Add move block here - Infinity_repeat_callout: - Infinity_repeat_callout: Place Move blocks inside here kikiTesta_callout: sample1_1: This will be an adventurer collecting coins, not a farmer digging. - Luigi's Pizza 1 (copy 1)_callout: - luigi's pizza 1: Try ordering a pepperoni pizza - Luigi's Pizza 1_callout: - luigi's pizza 1: Try ordering a pepperoni pizza - Luigi's Pizza 2 (copy 1)_callout: - luigi's pizza 2: Edit this function to add your own toppings - Luigi's Pizza 2_callout: - luigi_pizza_2: Edit this function to add your own toppings - Luigi's Pizza 3 (copy 1)_callout: {} - Luigi's Pizza 3_callout: {} - Luigi's Pizza 4_callout: {} - MC HOC 2016 Level 1_callout: {} - MC HOC 2016 Level 2-2_callout: - craft2_run_button_callout: When you are ready, hit "Run" to try your program. - MC HOC 2016 Level 6_callout: {} - MC HOC 2016 Nerop_callout: {} - MC HOC 2016 New Drop_callout: {} - MC HOC 2016 New pn_callout: {} - MC HOC 2016 New Spawn_callout: {} - MC HOC 2016 New Walk_callout: - MC_HOC_2016_New_Walk_callout2: Hit "Run" to start moving. - Mike Playlab Project_callout: - New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program - New Play Lab Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! - Modular Arithmetic_callout: {} - MSM Defining Vars 2_callout: - MSM Defining Vars 2_callout1: Click "edit" to open the function editor to update the function - MSM Defining Vars 2_callout2: Define the triangle here - MSM Defining Vars 3_callout: - MSM Defining Vars 3: Click here to find your variables - New App Lab Project_callout: {} - New Artist Project_callout: - New Artist Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace to add them to your program - New Artist Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! - NEW Course 4 Artist Functions 10_callout: {} - NEW Course 4 Artist Functions 3_callout: - NEW_Course_4_Artist_Functions_3_1: Click here to edit the new function so that it creates a square. - NEW Course 4 Artist Functions 5_callout: - edit_function: Click here to edit your function. - function_editor_draw_square: This is your function definition. These blocks run everytime you use the "draw a square" block - NEW Course 4 Artist Functions 7_callout: - edit_function: Click here to edit your function. - NEW Course 4 Artist Functions 8_callout: - edit_function: Click here to edit your function. - NEW Course 4 Artist Params 10_callout: - create_function: Click here to open the "Functions" flyout, then click the "Create a Function" button. - NEW Course 4 Artist Params 2_callout: - create_function: - name_function: - write_draw_triangle_function: - NEW Course 4 Artist Params 9_callout: - edit_add_parameter: Click edit to add a parameter in your function - add_and_drag_parameter: Write in the name of your parameter here, click add, and then drag it into your function definition - NEW Course 4 Artist Vars 6_callout: - place_length_variable: Drag the length variable here to replace the question marks - NEW Course 4 Bee For Loops 4_callout: - bee_for_loop: Enter the largest number of nectar you want the bee to collect here - NEW Course 4 Bee For Loops 5_callout: - actions_category: The tool box got a new look! The "Actions" blocks are in here now. - New Maker Lab Project_callout: {} - New Play Lab Project_callout: - New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program - New Play Lab Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! - Ninjacat Demo B_callout: - Ninjacat Demo B: Click `Run` to try out the game - Ninjacat Demo No Animate_callout: - Ninjacat Demo B: Click `Run` to try out the game - Overworld Chop Trees_callout: - craft_callout_preplaced: We've put some blocks here to get you started - Overworld House Frame Chosen_callout: - craft_callout_preplaced_house: This code will start building your house. Can you finish it? - Overworld Move to Sheep_callout: - craft_run_button_callout: Hit "Run" to try your program - craft_drag_block_callout: Drag a "move forward" block and snap it below the other block - Overworld Place Wall_callout: - craft_inside_repeat: Repeat actions by placing blocks in here - PDAlg 13-16 Sam Extension Puzzle_callout: {} - PDAlg 17-20 Luigi Extension Puzzle_callout: {} - PDAlg Big Game History_callout: {} - PDAlg Big Game Remix_callout: {} - PDAlg Design Recipe Delete_callout: {} - Pizza on a Plate_callout: - 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! - Play Lab Rocket 2_callout: - pass_function: This start(function) block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! - play lab rocket 2: Define your rocket-height function here - Play Lab Rocket 2B_callout: - pass_function: This black block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! - Play Lab Rocket 3_callout: - Play Lab Rocket 3 1: Update the purpose statement before moving on to the examples and definition. - Play Lab Rocket Free Play_callout: {} playLabDebugVideo1_callout: {} - Poorva copy U3L2 Using Simple Commands_callout: {} - PS copy 2-3 Bee Conditionals 5_callout: - Bee_Cond_5_1a: Purple flowers can have either 1 or 0 nectar...but you won't know until you run the code! - Rock Paper Scissors_callout: - New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program - New Play Lab Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! - Rocket Height Course A_callout: - pass_function: This start(function) block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! - Ryan - 4-5 Bee Conditionals 2_callout: - 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. - Ryan - Bee Conditionals_callout: - 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. - Sam the Butterfly 3_callout: - Sam the Butterfly 3 1: Edit this function to keep Sam from going off the right side - Sam the Butterfly 5_callout: {} sample1_callout: sample1_1: This will be an adventurer collecting coins, not a farmer digging. sample10a_callout: {} @@ -885,40 +920,5 @@ en: sample9_1: This should be something other than artist, but it's here to connect the previous levels to freeplay sample9a_callout: sample9a_1: This would be a puzzle to connect stage to freeplay, but playlab does not have "turn" or "move forward". Also, the goals are not flexible (size or sprites). - Test Play Lab Project With Walls_callout: - New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program - New Play Lab Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! testing code callout_callout: testing_code_callout: This makes the sprite move! - TestLab_callout: {} - U3 - Simple Drawing - Ellipse and No Fill_callout: {} - U3 - Simple Drawing - Fill_callout: {} - U3 - Simple Drawing - No Fill_callout: {} - U3 - Simple Drawing - Order of Blocks_callout: {} - U3 - Simple Drawing - Oval_callout: {} - U3 - Simple Drawing - Rectangle Width and Height_callout: {} - U3 - Simple Drawing - Rectangle_callout: {} - U3 - Simple Drawing - regular polygon_callout: {} - U3 - Simple Drawing - Stroke and Stroke Weight_callout: {} - U3 - Simple Drawing - text_callout: {} - U3 - Simple Drawing - X and Y values_callout: {} - U3 - Sprites - Intro Sprites_callout: {} - U3 Variables flower example_callout: {} - U3 Variables gray square_callout: {} - U3 Variables make a square_callout: {} - U3L05_3x3GridEfficiencyChallenge_callout: {} - U3L05_draw3x3GridEfficiently_callout: {} - U3L2 Using Simple Commands (no tooltips)_callout: {} - U3L2 Using Simple Commands_callout: {} - U3L2_Turtle3by3Grid_callout: {} - U3L2_TurtleSquare_right_callout: {} - U5 ColorSleuth Template_callout: {} - Underground Avoiding Lava_callout: - craft_callout_moveforward: This code will check for lava, can you add a command to move forward? - Underground Iron_callout: - craft_what_is_iron: Mine this iron! - WebLab PS test - 1-12_callout: - version_history_button: Check out version history - WhileAdventure_callout: - sample1_1: This will be an adventurer collecting coins, not a farmer digging. diff --git a/dashboard/config/locales/failure_message_overrides.en.yml b/dashboard/config/locales/failure_message_overrides.en.yml index dcb165323d9db..62eed36849395 100644 --- a/dashboard/config/locales/failure_message_overrides.en.yml +++ b/dashboard/config/locales/failure_message_overrides.en.yml @@ -40,14 +40,9 @@ en: should get to their flags in the same number of moves!" Course 4 Playlab For Loops 5b_failure_message_override: "Remember, both characters need to stop in the same place." - courseE_playLab_scaffold3_failure_message_override: "You must add two or more - new actors to your game and program them to move." Eval Strings Images .2_failure_message_override: "Make sure you append the string \"Universe\" to make the code create \"Hello, Universe\"" - grade4_scaffolded_project3_failure_message_override: "You must add two or more - new actors that move to your game." Kiki_StarWars_Test_5_failure_message_override: "Game over!" - kikiTesta_failure_message_override: "Congratulations! You gathered X coins!" MC HOC 2016 Level 1_failure_message_override: "To go on, you’ll need to collect wool. To collect the wool, use the arrow keys to walk to the sheep and then press the spacebar or click the game to shear the sheep. And, don’t forget @@ -80,22 +75,27 @@ en: MC HOC 2016 New Drop_failure_message_override: "Use the arrow keys to walk to the sheep and press space bar or click the game board to use the sheep. And, don’t forget to add the 'Drop' block to your code." - MC HOC 2016 New pn_failure_message_override: "To go on, you’ll need to collect - wool. To collect the wool, use the arrow keys to walk to the sheep and then - press the spacebar or click the game to shear the sheep. And, don’t forget - to add the “Drop Wool” block to your code." MC HOC 2016 New Spawn_failure_message_override: "Place `spawn sheep` under `when run`." MC HOC 2016 New Walk_failure_message_override: "To open the door, press the space bar or touch the game board while facing it. Walk inside to continue." + MC HOC 2016 New pn_failure_message_override: "To go on, you’ll need to collect + wool. To collect the wool, use the arrow keys to walk to the sheep and then + press the spacebar or click the game to shear the sheep. And, don’t forget + to add the “Drop Wool” block to your code." MC HOC 2016 SCORE LEVEL_failure_message_override: "If you're having trouble tagging 5 Golems, try changing the score to 2 per tag." MC HOC 2016 Village Test_failure_message_override: "You need to make the Iron Golem chase and attack the zombies to win." + WhileAdventure_failure_message_override: "Congratulations! You gathered X + coins!" + courseE_playLab_scaffold3_failure_message_override: "You must add two or more + new actors to your game and program them to move." + grade4_scaffolded_project3_failure_message_override: "You must add two or more + new actors that move to your game." + kikiTesta_failure_message_override: "Congratulations! You gathered X coins!" sample1_failure_message_override: "Congratulations! You gathered X coins!" sample4_failure_message_override: "Congratulations! You gathered X coins!" sample6_failure_message_override: "Not quite. Keep trying! [Move to Play Zone]" sample8_failure_message_override: "Congratulations! You gathered X coins!" - WhileAdventure_failure_message_override: "Congratulations! You gathered X - coins!" diff --git a/dashboard/config/locales/instructions.en.yml b/dashboard/config/locales/instructions.en.yml index 1195420f6ae4e..8efc6b8af5b4a 100644 --- a/dashboard/config/locales/instructions.en.yml +++ b/dashboard/config/locales/instructions.en.yml @@ -374,15 +374,6 @@ en: him!" 2-3 Maze sq10_instruction: "Get me to the pig! What blocks got repeated?" 2-3 Maze sq10v2_instruction: "Get me to the pig! What blocks got repeated?" - 2-3 maze sq11_instruction: "Get me to the pig! What blocks got repeated?" - 2-3 maze sq12_instruction: "Can you replace the previous answer with a loop - by using a \"repeat times\" block?" - 2-3 maze sq13_instruction: "Dear person. Me zombie. Must... get... to sunflower. - Create loop with \"repeat until\" block." - 2-3 maze sq14_instruction: "Can you get to the sunflower using only four blocks?" - 2-3 maze sq15_instruction: "Can you get to the sunflower using only five blocks?" - 2-3 maze sq16_instruction: "Ok, this is similar, but slightly different. Can - you do it in only five blocks?" 2-3 Maze sq2_instruction: "Trace the path and lead me to the silly pig. Avoid the TNT or the feathers will fly!" 2-3 Maze sq3_instruction: "Guide me to the green evilness! (Watch out for TNT)" @@ -396,6 +387,15 @@ en: 2-3 Maze sq8_instruction: "Get me to the pig! (Where is that \"repeat times\" block when I need it?)" 2-3 Maze sq9_instruction: "Create loops to get to the pig using less blocks." + 2-3 maze sq11_instruction: "Get me to the pig! What blocks got repeated?" + 2-3 maze sq12_instruction: "Can you replace the previous answer with a loop + by using a \"repeat times\" block?" + 2-3 maze sq13_instruction: "Dear person. Me zombie. Must... get... to sunflower. + Create loop with \"repeat until\" block." + 2-3 maze sq14_instruction: "Can you get to the sunflower using only four blocks?" + 2-3 maze sq15_instruction: "Can you get to the sunflower using only five blocks?" + 2-3 maze sq16_instruction: "Ok, this is similar, but slightly different. Can + you do it in only five blocks?" 2-3_instruction: "Purple flowers may have either 1 or 0 nectar. Be careful not to collect nectar from a purple flower if it doesn't have any." 2-3level1_instruction: "Help the bird catch the naughty pig by moving it forward" @@ -823,63 +823,18 @@ en: the ground flat?" 4-5 While Loops Assessment 1_instruction: "There are a lot of holes and piles. Help me to fill and remove them to make the ground flat." - aE1_instruction: "You chose to make a square napkin! \r\n\r\nTo finish, draw - a square with 20 pixel sides. " - aE2_instruction: "If you place your square loop inside another loop, we call - that a nested loop. What do you need to add as an outer loop to make sure - all 14 napkins line up next to each other?" - aE3_instruction: "We've got to have a tablecloth! \r\n\r\nTake your row of - 14 napkins and sew 14 of those together with another **outer loop** to make - a cover for our table." - aE3alternate_instruction: "Alternate" - aE3alternateB_instruction: "Alternate" - aE4_instruction: "Alternate" - aE5_instruction: "Example of puzzle using highest difficulty level shape." - aE6_instruction: "How many times do you need to loop this to draw half of - a circle? " - aE7_instruction: "If you create another loop like this one, but turn left instead - of right, what happens? \r\n\r\nCan you repeat all of that to draw this wave?" - aE8_instruction: "Now let's loop that whole thing four times to create this - picture frame. Watch out for the corners - you can't just turn 90 degrees! - \r\n\r\nIf looping a 3 degree turn 60 times makes a half circle, which of - these blocks of code will make an additional quarter circle for the corners?" - aEfreeplay_instruction: "Free Play!" AlgPD DR Free Play_instruction: "Create a function based on your own word problem." Alien Defender_instruction: "Project Idea: Make a defender game in Play Lab!" AllTheThings Applab - Turtle move with button_instruction: "Add a button that moves the turtle when clicked. (Click to see full instructions)" - allthethings data blocks test_instruction: "Please sign in to test applab levels - (By design, applab levels only work if signed in. Normally, we make people - sign in, but this is only enforceable for a whole script and would be annoying - to do for the allthethings script)." - allthethings design mode elements_instruction: "Please sign in to test applab - levels (By design, applab levels only work if signed in. Normally, we make - people sign in, but this is only enforceable for a whole script and would - be annoying to do for the allthethings script)." - allthethings level dataTables_instruction: "Please sign in to test applab levels - (By design, applab levels only work if signed in. Normally, we make people - sign in, but this is only enforceable for a whole script and would be annoying - to do for the allthethings script)." - allthethings_moviebot_instruction: "This level cloned from \"U3 Digital Assistant - Target\"" - allthethings_template_backed1_instruction: "Backed by a template #1. Please - sign in to test applab levels (By design, applab levels only work if signed - in. Normally, we make people sign in, but this is only enforceable for a whole - script and would be annoying to do for the allthethings script). " - allthethings_template_backed2_instruction: "Backed by a template #2. Please - sign in to test applab levels (By design, applab levels only work if signed - in. Normally, we make people sign in, but this is only enforceable for a whole - script and would be annoying to do for the allthethings script)." - allthethings_U3 - Simple Drawing - Rectangle Width and Height_instruction: "Do - This" App Lab test_instruction: "test" + AppLab_test02_instruction: "One sentence summary of the activity. Click to + view full instructions." Applab allthethings onRecordEvent_instruction: "Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and would be annoying to do for the allthethings script)." Applab test_instruction: "This level is submittable. For testing only!" - AppLab_test02_instruction: "One sentence summary of the activity. Click to - view full instructions." Artist - Nested Loops 1_instruction: "Complete the code to draw these triangles. The first one is done for you. Hint: 3 triangles in a 360 degree rotation." Artist - Nested Loops 10_instruction: "Draw the last row of stars on this flag @@ -908,35 +863,6 @@ en: everything you need to know to make a pattern like this! If this picture inspires you, try to make something similar. Otherwise, create something all your own.\r\n \r\nWant to know how our inspiration pattern was made? " - artistDebugVideo1_instruction: "Use the `repeat` loop to add waves to the water." - artistFunctionsVideo1_instruction: "Follow the instructions to make your own - function." - artistLoopsK1_instruction: "This is a new type of puzzle called \"Artist\". - Play with the level and draw something fun." - artistLoopsK2_instruction: "Now, use a `repeat` loop to draw this line five - times!" - artistLoopsK2gradek_artist_loops3_instruction: "Now, use a `repeat` loop to - draw this line five times!" - artistLoopsK3_instruction: "Draw a line eight steps long. This will become - the land for our kingdom!" - artistLoopsK4_instruction: "Now we need a castle with a draw bridge. Fix the - code so that the bridge lays straight instead of falling down." - artistLoopsK5_instruction: "Now we need to fix the top of the castle. Can you - loop the code three times?" - artistLoopsK6_instruction: "Someone is stuck in the tower! Fix the stairs - to set them free. " - artistLoopsK7_instruction: "This tower is lovely, what is downstairs? Build - another staircase to find out! " - artistLoopsK8_instruction: "Wow! There's a garden over there! Help fix these - stairs so I can get to it." - artistLoopsK9_instruction: "**Challenge:** Lovely! Let's take a walk around - the garden." - artistLoopsKA_instruction: "These stones are in the wrong place. Help me move - them so I don't fall in!" - artistLoopsKB_instruction: "Look! It's a theater. Help me set up the chairs - so we can all see the stage. " - artistLoopsKFP_instruction: "Picture time! Use what you have learned to draw - a picture of what you think the Artist saw on stage." Auto Open Function Editor_instruction: "You can call functions from inside other functions! Using your \"shape\" function as a base, create 3 house shapes each 20 pixels larger than the last starting at 50 pixels in length. Using @@ -945,7 +871,6 @@ en: or 0 nectar, but you don't know which one! Be careful not to collect nectar from a purple flower if it doesn't have any. Check if the nectar is equal to 1 by using the if block." - beeDebugVideo1_instruction: "Use a `repeat` loop to collect all of the nectar." Bergeron Robot Maze1_instruction: "Can you help me catch the naughty pig? Stack a couple of `move forward` blocks below the `when run` block and press \"Run\". " @@ -1060,16 +985,12 @@ en: your Player, Target, and Danger. Feel free to play with all of the variables at this point to make your game look like you'd like it to. Click \"Finish\" when you're done." - birdsDebugVideo1_instruction: "Trace the path and lead me to the silly pig. - Avoid TNT or feathers will fly!" Brad Spooky House Copy_instruction: "Freeplay: Here are the functions you've written, and some more for you to play with. Draw something awesome! Play with the pen width to see how different your drawings look!" Brad Spooky House_instruction: "Freeplay: Here are the functions you've written, and some more for you to play with. Draw something awesome! Play with the pen width to see how different your drawings look!" - brendan hackathon level_instruction: "these are the instructions for my level. you - should do this level and have a good time." Building a Foundation Assessment_instruction: "Build a three level pyramid, there are no other directions, so just play with the pieces until you get it!" @@ -1098,4154 +1019,1901 @@ en: make the ground flat? Hint: Use the while loop for both." C3-Farmer While Loops Assessment 1_instruction: "There are a lot of holes and piles. Help me to fill and remove them to make the ground flat." - Calc Circles of Eval .1_instruction: "You’ll be writing a kind of code called - Evaluation Blocks, because each block of code evaluates to a single value. - Change the ??? in this code so that the block evaluates to 5." - Calc Circles of Eval .2_instruction: "This Evaluation Block is a multiplication - function which takes two numbers and returns the product of those numbers. - Edit this block so that it multiplies 2 * 5" - Calc Circles of Eval .3_instruction: "Here's a function for addition which - takes two numbers and returns their sum. Use this Addition Block to add 3 - + 6." - Calc Circles of Eval .4_instruction: "Here we've nested an Addition Block - inside a Multiplication Block. Complete this code so it multiplies 3 by (4 - + 1)" - Calc Circles of Eval 1 (copy 1)_instruction: "Convert this statement to - of evaluation." - Calc Circles of Eval 1_instruction: "Every mathematical operator (+, -, *, - /, and so on) can be represented by an Evaluation Block in code. Change the - Evaluation Block to match the expression." - Calc Circles of Eval 2 (copy 1)_instruction: "Convert this statement to - of evaluation." - Calc Circles of Eval 2_instruction: "Use a Multiplication Block to complete - this code." - Calc Circles of Eval 3_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval 4_instruction: "This code is missing a couple of Evaluation - Blocks - make sure you put everything in the right order." - Calc Circles of Eval 5_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval 6_instruction: "Complete the Evaluation Blocks to match - this expression." - Calc Circles of Eval 7_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval 8_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval 9_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval Free Play_instruction: "Free Play: Try using the Evaluation - Blocks to write some equations of your own. How does nesting the blocks in - different ways impact their evaluation?" - Calc Define Funcs 1 (copy 1)_instruction: "Let's look at some more algebraic - functions now. Here's a function translated from the simple algebraic function - f(x) = x + 1. What would you expect this function to output if provided an - input of 15?" - Calc Define Funcs 1_instruction: "Let's look at some more traditional algebraic - functions now. Here's a function translated from the simple algebraic function - f(x) = x + 1. What would you expect this function to output if provided an - input of 15?" - Calc Define Funcs 2_instruction: "Write a function f that takes a parameter - x and returns x - 10. Test your function using f(15)." - Calc Define Funcs 3_instruction: "We don't have to call our function f every - time; create a function called times-ten that should take a parameter x and - return x * 10. Once you've created the function, run times-ten(50)." - Calc Define Funcs 4_instruction: "Write a function called half that takes a - number x and returns half that number. Once you've written the function, - use it to calculate half(21)" - Calc Define Funcs 5 - multiply 1_instruction: "Oh no! We lost our multiply - block! We'll have to create a function to multiply for us. To start off, - write a function \"f\" that takes a parameter \"x\" and returns x*5. Test - your function using f(3)." - Calc Design Recipe 1_instruction: "Let's use the Design Recipe to create a - function called cube - this function should take in a Number and return that - number to the power of 3. Make sure to write two example cases! When you're - done, use your new function to calculate cube(7)." - Calc Design Recipe 2_instruction: "Your school is holding a bake sale, and - you need to track the cost of making each cookie, the money paid, and the - total profit. Cookies cost $0.25 each to make, and sell for $1.50/cookie.\r\n\r\nWrite - the function cost, which takes in the number of cookies you intend to sell, - and returns the cost of making those cookies.\r\n\r\nTest your function by - calculating the cost of 42 cookies" - Calc Design Recipe 3_instruction: "Write the function sales which takes in - the number of cookies sold, and produces the amount of money customers spent - to buy those cookies (each cookie is sold at $1.50).\r\n\r\nTest your function - by calculating the sales for 135 cookies" - Calc Design Recipe 4_instruction: "Using the two functions we just wrote, write - the function profit, which takes in the number of cookies you sold, and gives - you back the total profit you make from selling your cookies, accounting for - the cost of baking them.\r\n\r\nTest your function by calculating the total - profit for 15 cookies." - Calc Free Play_instruction: "Free Play: Write functions and algorithms of your - own design!" - Calc Rocket 1 (copy 1)_instruction: "In the last puzzle you wrote a contract - for the function \"rocket-height\" that states it has a range of Number, domain - of Number, and should return the height of the rocket traveling at 15 m/s - after a given number of seconds. Let's write an example case now for the - height of the rocket at 3 seconds.\r\n\r\n\r\n\r\n \r\n\r\n" - Calc Rocket 1_instruction: "In the last puzzle you wrote a contract for the - function rocket-height that states it has a range of Number, domain of Number, - and should return the height of the rocket traveling at 15 m/s after a given - number of seconds. Let's write an example case now for the height of the - rocket at 3 seconds." - Calc Rocket 2_instruction: "Great, let's do one more example before writing - the function - what should the rocket height be after 30 seconds?" - Calc Vars 1.1_instruction: "Here we've set the age variable to 17 years. Can - you write an expression that calculates age in days?" - Calc Vars 1_instruction: "Variables allow us to name values so that we can - easily refer to them repeatedly throughout our programs. Here's a variable - called age. Set its value to your age and click run." - Calc Vars 2 (copy 1)_instruction: "Here we've set the \"age\" variable to - 17 - can you write an expression that calculates \"age\" in months?" - Calc Vars 2.1_instruction: "Here's a new variable called age-in-months. Use - the variable age to set age-in-months." - Calc Vars 2_instruction: "Can you write an expression that calculates age in - months?" - Calc Vars 3 (copy 1)_instruction: "Can you add to this code so that it calculates - how many hours there are in \"age\" years?" - Calc Vars 3_instruction: "Can you add to this code so that it uses the \"age\" - variable to calculate age in hours?" - Calc Vars 4_instruction: "We can also set variables by using other variables. - Let's say you have a brother who is two years younger than you - can you - set a new variable \"brother-age\" using your \"age\" variable?" - Choose Your Own Adventure_instruction: "You can do whatever you want in play - lab! Here's an example of choose your own adventure story in play lab." - Code Studio Puzzle Challenge 1 - Artist_instruction: "Draw the line. It is - 200 pixels long. " - Code Studio Puzzle Challenge 1 Artist1_instruction: "Draw the line. It is 200 - pixels long. " - Code Studio Puzzle Challenge 10 - Bee (copy 1)_instruction: "Move the Bee to - the flower and get all of the nectar." - Code Studio Puzzle Challenge 10 - Bee_instruction: "Move the Bee to the flower - and get all of the nectar." - Code Studio Puzzle Challenge 10b - Bee_instruction: "Move the Bee to the flowers - and get all of the nectar at each." - Code Studio Puzzle Challenge 11 - Artist_instruction: "Draw this line by using - the variable \"length\". Each line segment is 75 pixels long." - Code Studio Puzzle Challenge 11b - Artist_instruction: "Draw a square by using - the variable length provided." - Code Studio Puzzle Challenge 12 - Artist_instruction: "The code provided draws - one triangle. Add to it to draw triangles in a hexagon pattern." - Code Studio Puzzle Challenge 12a - Artist_instruction: "The code provided draws - one triangle. Add to it to draw triangles in a hexagon pattern." - Code Studio Puzzle Challenge 13 - Artist_instruction: "This is just like a - \"for\" loop. Complete the code to draw six lines that grow from 50, 60, 70, - 80, 90, to 100 pixels long. " - Code Studio Puzzle Challenge 14 - Artist_instruction: "This is just like a - \"for\" loop. Complete the loop to draw 4 squares that grow from 80, 100, - 120, to 140 pixels. " - Code Studio Puzzle Challenge 2 - Artist_instruction: "Now add a turn and another - line. The lines are 200 pixels long." - Code Studio Puzzle Challenge 3 - Artist_instruction: "Draw the square. Each - side is 100 pixels long." - Code Studio Puzzle Challenge 4 - Artist_instruction: "Draw the octagon. Each - side is 100 pixels long." - Code Studio Puzzle Challenge 5 - Bee (copy 1)_instruction: "Move the Bee to - the flower and get the nectar." - Code Studio Puzzle Challenge 5 - Bee_instruction: "Flowers contain a specific - amount of nectar. Move the Bee to the flower and collect nectar with the get - nectar block." - Code Studio Puzzle Challenge 6 - Bee_instruction: "Honeycombs can hold a specific - amount of honey. Get the nectar from the flower and make some honey." - Code Studio Puzzle Challenge 7 - Bee_instruction: "Move the Bee to the flower - and get the nectar." - Code Studio Puzzle Challenge 8 - Bee_instruction: "The cloud could be hiding - a flower or a honeycomb. Only get nectar from flowers. Only make honey at - honeycombs." - Code Studio Puzzle Challenge 9 - Bee_instruction: "The cloud could be hiding - a flower or a honeycomb. Only get nectar from flowers. Only make honey at - honeycombs." - Code Studio Puzzle Challenge Artist Screencast (copy 1)_instruction: "Draw - the line. Each segment is 100 pixels long. " - Code Studio Puzzle Challenge Artist Screencast 2_instruction: "Complete the - code to draw the line. Each segment is 100 pixels long. " - Code Studio Puzzle Challenge Artist Screencast_instruction: "Draw the line. - Each segment is 100 pixels long. " - Code Studio Puzzle Challenge Bee Screencast_instruction: "Move the Bee to the - flowers and get all of the nectar." - Code Studio Puzzle Challenge Square - Artist_instruction: "Draw a square by - using the variable length provided." - Code Studio Puzzle Challenge Var - Artist_instruction: "Draw a line by using - a variable \"length\" set to 180." - Collector Demo_instruction: "Look at all this loot! Help me get as many coins - as I can so I can improve my farm. I can only use 9 blocks though!" - collector example_instruction: "Put these blocks in order to collect all of - the gold and solve the puzzle." - Collector Test_instruction: "Collect all the gold!" - collectorDebugVideo2_instruction: "Put these blocks in order to collect all - of the gold and solve the puzzle." - collectorSkinVideo1_instruction: "Collect all four piles to pass this level." - collectorSkinVideo2_instruction: "Collect one pile of gold to pass this level." - Course 2 Bee Loops 1_instruction: "Hi, I'm a bee. Can you help me collect - the nectar from these flowers? " - Course 2 Bee Loops 13_instruction: "Assessment: Use the repeat block to collect - all of the nectar." - Course 2 Bee Loops 2_instruction: "Can you do the same task more easily with - a loop?" - Course 2 Bee Loops 3_instruction: "Now use the new repeat block to collect - all of the nectar and make all of the honey." - Course 2 Bee Loops 3__instruction: "Can you use a loop to collect all that - nectar?" - Course 2 Bee Loops 4_instruction: "What happens if you loop this sequence 3 - times? Don't forget to make the honey at the end!" - Course 2 Maze Loops 1_instruction: "Can you get me to the pig using 5 blocks?" - Course 4 2_instruction: "The bee only wants nectar right now. Remember, not - all objects are flowers, so check to gather nectar only at flowers." - Course 4 Artist 1_instruction: "Help me draw a box. (Each line is 200 pixels - long) " - Course 4 Artist 10_instruction: "Click here to see the full instructions again!\r\n\r\nHere - is the code for an interesting shape. What happens when you repeat it multiple - times, turning between each iteration? Notice that the turns in this shape - add up to 420 degrees, which means that when your artist is done drawing, - it will be facing a different direction than when you started. That new direction - is exactly 60 degrees to the right of where you began." - Course 4 Artist 11_instruction: "Now for a challenge! Feel free to use trial - and error. You are not expected to get the image perfect the first time. Want - to see more hints? Click here!" - Course 4 Artist 12_instruction: "Want a second peek at the inspiration design - or the hints? Click here!\r\n\r\nOtherwise, make a design all your own!" - Course 4 Artist 13_instruction: "Still playing? Here is a blank canvas where - you can design anything you want!" - Course 4 Artist 2_instruction: "Can you use a loop to draw the greyed out square? (Each - side is 300px long)" - Course 4 Artist 20_instruction: "Still playing? Here is a blank canvas where - you can create whatever you want!" - Course 4 Artist 3_instruction: "Try to figure out what happens if you run this - code (or press \"Run\" to test it). Then, repeat it enough times to complete - the drawing." - Course 4 Artist 4_instruction: "How many degrees are in a circle? Fill in - the repeat block with that number to create a circle of colors." - Course 4 Artist 5_instruction: "Draw the other half of this design so it's - symmetrical. The triangles are equilateral and are 50 pixels long. Hint: You - may have to run the code several times to figure out all of the blocks that - need to be added." - Course 4 Artist 6_instruction: "Complete the code to draw these three, equilateral - triangles." - Course 4 Artist 7_instruction: "Now nest this loop inside another loop to draw - 10 triangles. This is called a nested loop. Hint: All 10 triangles complete - a 360 degree rotation. " - Course 4 Artist 8_instruction: "Draw this sun by looping this whole block of - code multiple times." - Course 4 Artist 8a_instruction: "Remember this shape? Now we're going to - let you build it without giving you any blocks to start!" - Course 4 Artist 9_instruction: "Loop this design 10 times and make sure to - turn between each shape that's drawn. \r\n" - Course 4 Artist Binary 1_instruction: "Here's a function that takes a binary - string of 1's and 0's and instructs the artist to follow them from left - to right, top to bottom. The artist will fill-in the squares when it sees - a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how - the artist uses binary to draw this pattern." - Course 4 Artist Binary 1a_instruction: "Here's a function that takes a binary - string of 1's and 0's and instructs the artist to follow them from left - to right, top to bottom. The artist will fill-in the squares when it sees - a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how - the artist uses binary to draw this pattern." - Course 4 Artist Binary 2_instruction: "Which of these binary strings could - you loop 8 times to draw this image?" - Course 4 Artist Binary 3_instruction: "Can you draw this pattern by looping - just three binary digits (0s and 1s)?" - Course 4 Artist Binary 4_instruction: "Each binary string represents one row - of this picture. Can you rearrange them so it draws a smiley face instead - of a frowny face?" - Course 4 Artist Binary 5_instruction: "Which 6 digit binary string, repeated - 11 times, will draw this image?" - Course 4 Artist Binary 6_instruction: "What is the shortest binary string that - you can repeat to draw this image?" - Course 4 Artist Binary 7_instruction: "Finish this drawing." - Course 4 Artist Binary Free Play 2_instruction: "Free Play: Here's a blank - canvas for you to draw on. Have fun!" - Course 4 Artist Binary Free Play 2a_instruction: "Here's a higher resolution - canvas to draw on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we - start to get creative with the bits?" - Course 4 Artist Binary Free Play 2b_instruction: "Click here to see hints." - Course 4 Artist Binary Free Play_instruction: "Free Play: Draw whatever you - like with binary!" - Course 4 Artist Binary pre1_instruction: "Use the blocks below to have the - artist draw \"01010101\" in binary in the first row." - Course 4 Artist Binary ryan_instruction: "Binary is a way of representing information - using only two options. Here, we're going to use the options \"off\" (represented - by the number 0) and \"on\" (represented by the number 1). \r\n\r\nWe've - provided you with a grid of \"pixels\" that you can walk through and make - designs by turning on only certain squares. Can you have the artist draw - \"01010101\" in binary in the first row?" - Course 4 Artist For Functions 10_instruction: "Let's Step it up a little, - can you draw a Star shape using the \"Draw a Square Line\" function? Good - luck!" - Course 4 Artist For Functions 11_instruction: "Let's Step it up a little, - can you draw a Star shape using the \"Draw a Square Line\" function? Good - luck!" - Course 4 Artist For Loops 1_instruction: "Use a repeat block to draw this triangle - that is 50 pixels wide." - Course 4 Artist For Loops 10_instruction: "Free Play Time! Have fun drawing - whatever you like with the blocks you have learned how to use" - Course 4 Artist For Loops 11_instruction: "Remember back in a previous stage - when we used a variable to control the number of sides in a shape? We are - going to do the same thing with the `counter` variable now. This pattern starts - with a triangle and adds one side at a time until it draws a decagon (10 sides). - Each side should be 100 pixels long. " - Course 4 Artist For Loops 11a_instruction: "Let's put it all together! Using - your knowledge of `for` loops and the `counter` variable, create this drawing - where each shape has two more sides than the last. Make sure that each side - is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little - of the code has been provided for you." - Course 4 Artist For Loops 12_instruction: "That looked pretty cool, but now - I'd like to draw each shape next to the last one. This time each side is - 20 pixels. Use a jump block to jump forward 40 pixels after each shape. " - Course 4 Artist For Loops 13_instruction: "Hmmm, those shapes are getting bigger - every time! Didn't we already solve this problem with variables? How can - we use the counter variable to make the sides smaller as there are more of - them? Instead of moving forward by a set amount, try moving forward (100 / - counter) pixels." - Course 4 Artist For Loops 14_instruction: "If you turn a little bit more or - less than you normally would for a shape, it creates a neat effect. Try using - some of the code from the last level, but turning 89 degrees to create this - twisted square spiral." - Course 4 Artist For Loops 15_instruction: "Free Play: Try making some drawings - of your own using \"for loops\". We've added a few useful variables for you - as well." - Course 4 Artist For Loops 2_instruction: "I've put the code for drawing a - triangle inside a for loop that counts from 50 to 100 by 10. NOTE: Make sure - you look at the code before you hit \"Run\"." - Course 4 Artist For Loops 3_instruction: "Use the last puzzle as a reference - to complete this one. The smallest triangle has 20 pixel sides, the largest - has 200 pixel sides, and each triangle is 20 pixels larger than the last. - " - Course 4 Artist For Loops 4_instruction: "How would you modify what you've - learned to draw these squares? They start at 15 pixels long, the largest is - 300 pixels long, and each square is 15 pixels larger than the last. " - Course 4 Artist For Loops 5_instruction: "Good job on the last puzzle! Let's - use that \"counter\" variable block again to draw this cool picture. " - Course 4 Artist For Loops 6_instruction: "Free Play! Try using a for loop to - draw a growing shape pattern of your own design." - Course 4 Artist For Loops 6a_instruction: "Make three small changes to the - code from the last level to get this!" - Course 4 Artist For Loops 7_instruction: "What happens if you remove the \"Repeat - 3\" from this algorithm, keeping the \"move\" and \"turn\" blocks in the for - loop? In this spiraling triangle, each side is 20 pixels longer than the last." - Course 4 Artist For Loops 8_instruction: "Just one little change to the code - from the last image can create this drawing. Can you figure out what that - change is?\r\n\r\nHint: You need to remove something!" - Course 4 Artist For Loops 8a_instruction: "Just one little change to the code - from the last image can create this image. Can you figure out what that change - is?" - Course 4 Artist For Loops 9_instruction: "Can you make a spiral? Move forward - from 1 to 75 pixels, increasing by 1 pixel each time." - Course 4 Artist For Loops Challenge_instruction: "**Challenge:** Can you figure - out how to use all of the things you've learned to create this image of polygons, - all with 40 pixel sides?" - Course 4 Artist For Loops Challenge_a_instruction: "Can you figure out how - to use all of the things you've learned to create this image?\r\n\r\nNeed - a hint? Click here." - Course 4 Artist For Loops inspire_instruction: "Free-Play Inspiration: You've - now learned everything you need to know to make a pattern like this! If this - picture inspires you, try to make something similar. Otherwise, create something - all your own.\r\n\r\nNeed a hint? Click here." - Course 4 Artist Functions 1_instruction: "Can you draw a square that is 100 - pixels in length, using a loop?" - Course 4 Artist Functions 10_instruction: "Which block do you need to add to - get the triangle to sit on top of the square?" - Course 4 Artist Functions 11_instruction: "Check out this code that draws a - cube - can you move it into a function called \"Draw a Cube\"" - Course 4 Artist Functions 12.1_instruction: "Let's create a function called - \"draw an octagon 20\" that draws an octagon where each side is 20 pixels - long." - Course 4 Artist Functions 12_instruction: "Loop square function to draw a line" - Course 4 Artist Functions 13.1_instruction: "Now, let's make a function called - \"jump to upper right\" that moves the artist to the upper-right of the octagon - that you just drew so we can finish this pattern.\r\n\r\nHint: To get yourself - to the upper-right corner, try jumping in a pattern that makes just 3/8 of - the octagon." - Course 4 Artist Functions 13_instruction: "Check it out we have a new function - called \"draw a line of squares\". Feel free to take a look inside the function - block to see how we built it. Click on \"Run\" when your are ready for the - next puzzle." - Course 4 Artist Functions 14.1_instruction: "Now, let's make a function called - \"jump to upper right\" that moves the artist to the top-right of the octagon - that you just drew so we can finish this pattern." - Course 4 Artist Functions 14_instruction: "You're doing great! Let's use - your new \"Draw a line of squares\" function to draw a Square shape. Remember - each square is 40 pixels in length." - Course 4 Artist Functions 15_instruction: "Let's Step it up a little, can - you draw a star shape using the \"draw a line of squares\" function? Good - luck! Hint: you may have to turn 144 degrees" - Course 4 Artist Functions 2_instruction: "Can you draw 3 squares 20 pixels - apart from one another? Hint: each square is 100 pixels in size" - Course 4 Artist Functions 3_instruction: "Using the \"draw a square\" function - block, can you draw this picture? Hint: each square is 120 pixels apart.\r\n" - Course 4 Artist Functions 4_instruction: "Are you ready to create your own - \"Function Block\"? Click on the \"Functions\" block in the tool box, name - it \"draw a triangle\", then create a triangle as you have done before with - the Action and Loops blocks. Then click on the Save and Close in the upper - right hand corner. Hint: Create a triangle that is 100 pixels in length. Good - luck!" - Course 4 Artist Functions 5 OLD_instruction: "Let's try to use our two functions - to draw a house - what needs to be fixed in this code to draw the house properly?" - Course 4 Artist Functions 5_instruction: "Using the \"draw a square\" function - block, can you draw this picture? Hint: each square is 120 pixels apart.\r\n" - Course 4 Artist Functions 6_instruction: "Which block do you need to add to - get the triangle to sit on top of the square?" - Course 4 Artist Functions 7_instruction: "Can you draw a line of squares using - a Square function? Each square is 40 pixel's in length." - Course 4 Artist Functions 8_instruction: "Are you getting the hang of how to - use function blocks? Let's modify this square so that it is 200 pixels in - size. Hint: click on \"edit\" to change the size of the \"draw a square\" - function editor. Remember to click on \"save and close\" to get out of the - function editor. " - Course 4 Artist Functions 9_instruction: "We have given you most of the code - to create a function. However there seems to be something missing. Can you - make this function block complete?" - Course 4 Artist Functions challenge_instruction: "Click here to see the hints - again." - Course 4 Artist Functions Inspiration_instruction: "Click here to see the hints - again." - Course 4 Artist Functions inspire_instruction: "Click here to see the inspiration - picture again." - Course 4 Artist Inspire_instruction: "Want a second peek at the inspiration - design or the hints? Click here!\r\n\r\nOtherwise, make a design all your - own!" - Course 4 Artist Params 1_instruction: "Let's edit a function that draws a - square with 50 pixel sides" - Course 4 Artist Params 10_instruction: "You can call functions from inside - other functions! Using your \"shape\" function as a base, create 3 house shapes - each 20 pixels larger than the last starting at 50 pixels in length. Using - a counter loop might be helpful. " - Course 4 Artist Params 11_instruction: "How about a function called \"pinwheel\" - that takes three parameters - \"sides,\" \"length\" and \"repeat.\" You can - calculate how much to turn after each shape using the same math you used to - figure out the turns for a shape of \"sides\". Can you recreate this picture? - Here's a tip each shape is 100 pixel's in length." - Course 4 Artist Params 12_instruction: "Use your \"pinwheel\" function to draw - each of these shapes. The side length for each image is 50." - Course 4 Artist Params 13_instruction: "Freeplay: Here are the functions you've - written, and some more for you to play with. Draw something awesome!" - Course 4 Artist Params 2_instruction: "That triangle function would be a whole - lot more useful if it could draw triangles of different sizes. I've added - a parameter for line length, but it doesn't do anything yet. Can you update - the function so it uses the \"length\" parameter when it draws each side? - The triangle sizes are 150 pixels, 75 pixels and 25 pixels." - Course 4 Artist Params 3_instruction: "Awesome, can you draw each of these - triangles with that new function? The first is 25 pixels long, the second - is 50, and the third is 75. " - Course 4 Artist Params 4_instruction: "Can you add a new function called square? - It should also take a length parameter, just like the triangle. This time - draw 3 squares 25, 50 and 75 pixels in length,100 pixels apart." - Course 4 Artist Params 5_instruction: "Use both of your new functions to draw - this picture. To make this easier you use a loop with a \"counter\" parameter. - " - Course 4 Artist Params 6_instruction: "Let's edit this \"draw a shape\" function. - It already has a \"length\" parameter. Now, let's edit the function to also - add a \"sides\" parameter. Remember the angle to turn for a given shape is - 360 divided by the sides it has. Hint: lengths for each shape are the triangle - is 100 pixels, the hexagon is 25 pixels and the square is 50 pixels. " - Course 4 Artist Params 7_instruction: "Can you draw these shapes by filling - in the \"???\" The square and triangle are 100 pixels in size while the hexagon - is 75 pixels in size. " - Course 4 Artist Params 8_instruction: "Can you figure out how to draw this - shape? Here's a hint create a new function with 6 sides called a hexagon. - " - Course 4 Artist Params 9_instruction: "Do you remember when we used the counter - loop but removed a loop within? Let's have some fun and use the \"draw a - shape\" function with \"sides\" and \"length\" parameters. Can you re create - these shapes? The square counter should be 5/100/5, the triangle counter should - be 10/100/10 and the hexagon is 2/100/2." - Course 4 Artist Var 9_instruction: "Here's the algorithm to draw a triangle, - modify it so it uses the \"sides\" variable instead. Replace the number 3 - with the \"sides\" variable. Hint: remember to use the \"set sides to\" block." - Course 4 Artist Vars 1_instruction: "Let's draw an equilateral triangle. \r\n\r\nIt - has to be exactly 100 pixels long on each side." - Course 4 Artist Vars 10_instruction: "Here's an algorithm that draws a triangle - out of smaller triangles. Can you modify it so that it uses the \"sides\" - variable to draw each triangle? Look through the code, and every time you - see the number 3, replace it with your \"sides\" variable. Remember to use - the \"set sides\" block." - Course 4 Artist Vars 11_instruction: "Here’s more complicated code using the - same concepts from the last puzzle - what should you set the \"sides\" variable - to in order to draw this picture made of squares?" - Course 4 Artist Vars 12_instruction: "Let's set the \"sides\" variable to - 5. The more sides we add to this algorithm, the bigger this whole pattern - gets! Notice that there is another variable called \"length\". We can now - use that wherever we have a \"move forward.\" Set the \"length\" variable - to 75 for this shape." - Course 4 Artist Vars 13_instruction: "When a shape has lots of sides, each - side needs to be shorter if you want the whole pattern to fit on the screen. - \r\nLet's recreate the algorithm for this amazing pattern, but instead of - manually setting the `length` variable, let's use a math block with the `sides` - variable inside to make sure that each shape fits correctly. The perimeter - of each polygon is 300 pixels.\r\nNeed some hints? Click here." - Course 4 Artist Vars 14_instruction: "Free Play: Check it out! Now your algorithm - is nested within one more loop. Experiment with changing the values of your - two variables to draw cool patterns.\r\n\r\nFor even more effect, try playing - with color! Use random colors inside loops to see how it changes your design." - Course 4 Artist Vars 2_instruction: "Instead of using \"move forward by 150,\" - the \"move\" block is now referencing a variable called \"length.\" Can you - set \"length\" to 150 to draw this new triangle?" - Course 4 Artist Vars 3_instruction: "Here's a loop that draws a square, but - something's missing. Can you fix it so that it uses the variable \"length\" - to figure out how long each side should be? " - Course 4 Artist Vars 4_instruction: "Now I want to make a rectangle that is - twice as tall as it is wide. We've got a variable called \"width\" that needs - to be set to 100. Can you use the math blocks to complete the code?" - Course 4 Artist Vars 5_instruction: "Use the variable \"sides\" to control - how many times this loop gets run." - Course 4 Artist Vars 6_instruction: "Here’s some code that can draw any regular - polygon. There’s a new variable called sides that is set to 4. Can you use - the sides variable (along with the math block) to turn the right amount regardless - of how many sides there are in the polygon?\r\n\r\nClick here to go back to - the hint!" - Course 4 Artist Vars 7_instruction: "Use what you learned in the last puzzle - to create this hexagon using the \"sides\" variable.\r\n\r\nSee how you could - change just one value to draw a triangle, square, pentagon, or octagon?" - Course 4 Artist Vars 8_instruction: "Free Play: Experiment with the number - of sides this shape has. Can you change the algorithm so that the overall - size of the shape stays the same, no matter how many sides it has? Hint: If - you divide your starting length by the number of sides, the length of each - side will get shorter as the number of sides gets higher." - Course 4 Artist Vars 9_instruction: "Modify this algorithm so it uses the \"sides\" - variable instead of a fixed number to draw a triangle. Don't forget to use - the \"set sides to\" block." - Course 4 Bee 1_instruction: "The bee can't tell what's under the cloud! \r\n\r\nUse - the `if` block to check whether there is a flower under the cloud. \r\n\r\nGet - nectar one time, ONLY if there is a flower." - Course 4 Bee 2_instruction: "Use the \"if/else\" block to check each object - to see if it's a flower or a honeycomb . If it's a flower, collect one nectar...otherwise, - make one honey!" - Course 4 Bee 3_instruction: "The unknown object is either a flower or a honeycomb. - This time, use the if/else block to collect one nectar if it is a flower, - else make one honey (because then it would be a honeycomb)." - Course 4 Bee 4_instruction: "This purple flower may have either 3, 2, or 1 - nectar. Here an if/else block is combined with another if/else block to create - an \"if/else-if/else\" statement. Complete the solution to collect the unknown - amount of nectar." - Course 4 Bee 5_instruction: "This purple flower may have either 3, 2, or 1 - nectar. Add an if-else block to create an if, else-if, else block. Complete - the solution to collect the unknown amount of nectar." - Course 4 Bee 6_instruction: "This purple flower may have either 3, 2, or 1 - nectar. Create an if, else-if, else block to collect the unknown amount of - nectar." - Course 4 Bee 7_instruction: "Use everything you have learned so far to collect - all the nectar. The purple flower may have either 3, 2, or 1 nectar." - Course 4 Bee For Loops 1_instruction: "Use a loop to collect the nectar from - each flower." - Course 4 Bee For Loops 10_instruction: "If your loop is counting down, the - increment is subtracted from your counter variable each loop. What should - your increment be to collect 9, then 6, and then 3 nectar?" - Course 4 Bee For Loops 11_instruction: "What's wrong with this loop? See if - you can fix it and make the bee collect all the nectar." - Course 4 Bee For Loops 2_instruction: "Here's a new kind of loop, called the - \"for\" loop. This particular for loop will count from 1 to 5 by 1, and run - the contents of the loop each time it counts. Help the Bee get the nectar." - Course 4 Bee For Loops 3_instruction: "You can solve this puzzle by using a - for loop to count from 1 to 3 by 1. Now let's go get some nectar!" - Course 4 Bee For Loops 4_instruction: "Collect all of the nectar from these - flowers. I wonder if there's an easier way to do this..." - Course 4 Bee For Loops 5_instruction: "Ah, the for loop makes this much easier! - Using the \"counter\" variable from the for loop to loop the \"get nectar\" - block the same number of times as the loop. Whew! That's a lot of loops. - All the code you need it there, take a look at how it is put together then - click on Run and see how it works. " - Course 4 Bee For Loops 6_instruction: "You can also use a for loop to count - down. Try gathering this nectar by counting down from 5 to 1 by 1." - Course 4 Bee For Loops 7_instruction: "Use your for loop \"counter\" variable - to control how far to move horizontally." - Course 4 Bee For Loops 8_instruction: "Can you use the loop variable to control - movement and nectar collection?" - Course 4 Bee For Loops 9_instruction: "The last number in your for loop is - called the \"increment,\" and each time the loop is run the counter variable - changes by the increment. Try collecting these flowers using an increment - of 2." - Course 4 Bee Loops 5 NEW_instruction: "Here are three flowers. Can you find - the pattern of instructions that you need to repeat 3 times to collect the - nectar with the fewest number of blocks?" - Course 4 Bee Loops 5a NEW_instruction: "Now, use loops to help the bee collect - all the nectar on its way to the honeycomb with as few blocks as possible. When - you get there, don't forget to make honey!" - Course 4 Bee Params 1_instruction: "Write a sequence to collect all of the - nectar using `get 3 nectar` which turns, moves to collect the nectar, and - then returns to the original location." - Course 4 Bee Params 2_instruction: "Modify the \"get 3 nectar\" function so - it makes me turn right instead of left to the flowers." - Course 4 Bee Params 3 (copy 1)_instruction: "Now there are flowers on both - sides! Maybe you can use a parameter so that the same function works for flowers - on either side. I've added a parameter called \"direction\" to the function. - If the \"direction\" parameter equals 0 I should turn left, if it's 1 I should - turn right." - Course 4 Bee Params 3_instruction: "Now there are flowers on both sides! We've - added variables called \"left\" and \"right\" for you to use, and added a - parameter called \"direction\" to \"get 3 nectar\". Edit \"get 3 nectar\" - so that the bee turns the correct direction when the variables \"left\" or - \"right\" are passed into the function. " - Course 4 Bee Params 4 (copy 1)_instruction: "Try using your new function to - collect all of the flowers. Remember, 0 = left and 1 = right." - Course 4 Bee Params 4 - Two WhenRun_instruction: "Try using your new function - to collect all of the flowers. Remember to use the left and right variables." - Course 4 Bee Params 4 backup_instruction: "Wouldn't it be nice if we could - collect all of these nectars with the a single function? Try adding a new - parameter to your function called \"nectars\" to control the amount of nectar - to collect. You'll probably want to rename the function too!" - Course 4 Bee Params 4_instruction: "Try using your new function to collect - nectar from all of the flowers. Remember to use the left and right variables." - Course 4 Bee Params 5_instruction: "Let's start from scratch - can you create - a new function called \"get 5 nectar\" with a direction parameter?" - Course 4 Bee Params 6 (copy 1)_instruction: "Try using your new function to - collect all of this nectar." - Course 4 Bee Params 6_instruction: "Wouldn't it be nice if we could collect - all of these nectars with a single function? Try adding a new parameter to - your function called \"nectar units\" to control the amount of nectar to collect. - You'll probably want to rename the function too!" - Course 4 Bee Params 7 (copy 1)_instruction: "Try using your new function to - collect all of this nectar." - Course 4 Bee Params 7_instruction: "Try using your new function to collect - all of this nectar." - Course 4 Bee Params 8 Clone 2_instruction: "Oooh, now there's honey to deal - with too! How could you update your function to either get nectar or make - honey." - Course 4 Bee Params 8 clone 3_instruction: "Oooh, now there's honey to deal - with too! How could you update your function to either get nectar or make - honey." - Course 4 Bee Params 8 Clone_instruction: "Oooh, now there's honey to deal - with too! How could you update your function to either get nectar or make - honey." - Course 4 Bee Params 8 new_instruction: "Oooh, now there's honey to deal with - too! How could you update your function to either get nectar or make honey." - Course 4 Bee Params 8_instruction: "Challenge: Now there's honey to deal with - too! Rewrite your function to use both the number of honey units and the number - of nectar units. How would you use those numbers to decide what you should - do?" - Course 4 Bee Params Ex_instruction: "Try using your new function to collect - all of this nectar." - Course 4 Binary 1_instruction: "Here's a function that takes a binary string - of 1's and 0's and instructs the farmer to turn on the go from left to right, - top to bottom, turning on the squares where the number has a zero. Run the - code provided to see how the farmers uses binary to draw an image." - Course 4 Binary 2_instruction: "What binary string could you loop 8 times to - draw this image? Hint: the number \"1\" fills a hole." - Course 4 Binary 3_instruction: "Can you draw this pattern by looping a single - binary string?" - Course 4 Binary 5 (copy 1)_instruction: "Which binary string, repeated 10 times, - will draw this image?" - Course 4 Binary 5_instruction: "Which binary string, repeated 10 times, will - draw this image?" - Course 4 Binary 6 (copy 1)_instruction: "Which binary string, repeated 10 times, - will draw this image?" - Course 4 Binary 6_instruction: "Which binary string, repeated 10 times, will - draw this image?" - Course 4 Binary 7_instruction: "Which binary string, repeated 10 times, will - draw this image?" - Course 4 Binary 8_instruction: "You can complete the most of this image by - looping a 5 bit binary number - then you'll need one more 4 bit number to - get the bottom right-hand corner." - Course 4 EC 1a_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 1b_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 2a_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 2b_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 2c_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 2d_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 3_instruction: "Use what you learned in the previous level to draw - an image like this. Note: The code becomes more simple if you incorporate - parameters. " - Course 4 EC 3a_instruction: "Extreme Challenge: No rules. No clues. Just the - challenge!" - Course 4 Maze 1_instruction: "Get the angry bird to the pig!" - Course 4 Maze 2_instruction: "Avoid the TNT!" - Course 4 Maze 3_instruction: "Program the angry bird to get to the pig. " - Course 4 Maze 4_instruction: "Try the \"repeat\" block to use fewer blocks - when solving this puzzle..." - Course 4 Maze 5_instruction: "Can you solve this puzzle using the fewest number - of blocks possible?" - Course 4 Maze 6_instruction: "Can you solve this puzzle using the fewest number - of blocks possible?" - Course 4 Play Lab For Loops 2_instruction: "This time, let's try counting - the odd numbers from 1 to 100." - Course 4 Play Lab Params 1_instruction: "Here's a function called `jump` that - causes your main character to jump up 100 pixels. Run the program and use - the jump function to collect all of the flags by moving the dog with the arrow - keys." - Course 4 Play Lab Params 10_instruction: "We've added one last function for - you. \r\n\r\nUse an \"if\" statement to program your game to call the \"level_up\" - function only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor - example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 - to move to the next puzzle. " - Course 4 Play Lab Params 2_instruction: "Now we've got flags that are too - high for our current jump! Let's use both the \"up\" and \"down\" arrows - so that we can have multiple jump heights. \r\n\r\nWe need to add a parameter - to our jump function called \"height\". The up arrow should cause the dog - to jump 200 pixels and the down arrow should make it jump only 100 pixels. - " - Course 4 Play Lab Params 3_instruction: "We have added another parameter to - the jump function so that we can use it with other actors. Each actor is represented - by a number, starting from one. Edit the \"jump\" function so that it uses - the \"actor\" parameter to make the correct character jump. " - Course 4 Play Lab Params 4_instruction: "Here's a function called `patrol`. - \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 pixels." - Course 4 Play Lab Params 5_instruction: "Edit the the \"patrol\" function to - add an \"actor\" parameter, so that we can call it for each of the actors - on the screen. Remember, the actors correspond to numbers 1, 2, and 3." - Course 4 Play Lab Params 6_instruction: "Add another parameter called \"speed\" - to the \"patrol\" function. Try using a \"set speed\" block with the new \"speed\" - parameter to help Penguin get both flags before the other sprites even get - one." - Course 4 Play Lab Params 7_instruction: "Let's have some fun! Look at the - code provided to see if you can figure out what each block does. \r\nWhen - you're done, use the arrow keys to control Dog and collect all of the flags.\r\nNOTE: - You don't need to make any changes to the program" - Course 4 Play Lab Params 8_instruction: "Use the `when actor touches` block - to send Dog back to the top-left ONLY if Dog touches any of the other actors." - Course 4 Play Lab Params 9_instruction: "Here's our game from an earlier stage, - but most of the code is hidden. There’s a new function `score_points.`\r\n\r\nEdit - the function so that a new parameter called `points` can be added to `player_score`. - \r\n\r\nThe variable `player_score` should increase each time Dog tags Cat - with pie, and decrease each time that Cat tags Dog with a sandwich.\r\n\r\nNote: - When you're done, click \"Run\" to play. When Dog scores 6 points, you will - move on to the next puzzle. " - Course 4 Play Lab Vars 1_instruction: "This time you don't have to write any - code, just hit \"Run\" to play the game! In this game, you're the dog who - is trying to collect more flags than the cat. Use the down arrow to control - the dog. Press \"Finish\" when you're done playing." - Course 4 Play Lab Vars 2_instruction: "The race in that last puzzle wasn't - very fair! Change the `dog_speed` variable to make sure you can collect more - flags than Cat. The first to collect 10 flags wins!" - Course 4 Play Lab Vars 3_instruction: "Use the left and right arrows to move, - and the up arrow to jump. See if you can collect all of the flags." - Course 4 Play Lab Vars 4_instruction: "Now we're using a variable called \"height\" - to control how high the dog can jump. Update the \"height\" variable so that - the dog can jump high enough to reach all the flags." - Course 4 Play Lab Vars 5_instruction: "Let's build a game! First we'll need - a score. Rebuild the code that you saw in the last level to set the score - to 10. " - Course 4 Play Lab Vars 6 (copy 1)_instruction: "Cool, now we've got our score - variable, but how are we going to make it useful? How about adding to your - score variable each time you hit the enemy with a fireball? Use the \"when - actor 2 touches anything\" event to trigger an update to your score when your - fireballs hit the cat. You can increment the score by setting score = score - + 1. Get your score up to 10 (going one at a time!) to pass the level." - Course 4 Play Lab Vars 6_instruction: "Use the right arrow to throw pie.\r\n\r\nIn - our game, how should we score points? Add 1 to your \"points\" variable each - time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" - event to trigger an update to your score. You can increment your variable - by setting \"points = points + 1.\" Get your score up to 10 (going one at - a time!) to pass the level." - Course 4 Play Lab Vars 7_instruction: "Nice, now let's make sure this game - isn't too easy to play. Any time Dog (actor 1) gets hit by a sandwich from - Cat (actor 2), you should lose a point. Start with 10 points so it's not - too hard. Let your score drop down from 10 to 0 to pass the level." - Course 4 Play Lab Vars 8 (copy 1)_instruction: "Alright, one last thing for - this game - let's set it up so the player can win (or lose). Use a forever - loop to check the value of score - if score is ever greater that 20, make - the enemy vanish. If the score is every less than 0, make the player vanish. - Click \"Finish\" when the game works like you'd like it to." - Course 4 Play Lab Vars 8_instruction: "Let's set up this game so the Dog can - win (or lose). Use a forever loop to check the value of score - if score is - ever greater that 20, make the enemy (the Cat) vanish. If the score is ever - less than 0, make the player (the Dog) vanish. Click \"Finish\" when the game - works like you'd like it to." - Course 4 Play Lab Vars 9_instruction: "Free Play time! Here are all of the - variables we've played with so far in this stage, as well as a few more in - case you want them. \r\n\r\nNotice that there are now so many blocks in our - toolbox that they need to be organized! Here, we've put each piece into - an appropriate category. Take some time to explore everything that is available. - When you're done browsing, make a game or story using repeats, variables, - and events. \r\n\r\nHint: scroll down to see all the commands in the workspace." - Course 4 Play Lab Vars_instruction: "Alright, one last thing for this game - - let's set it up so the player can win (or lose). Use a forever loop to - check the value of score - if score is ever greater that 20, make the emeny - vanish. If the score is every less than 0, make the player vanish." - Course 4 Play Labs For Loops 1_instruction: "Let's make the dog speak every - number from 1 to 100. Use a `for` loop and the counter block to speak the - counter variable each time the loop is run." - Course 4 Play Labs For Loops 2_instruction: "This time, help Olive the Cat - count only the odd numbers from 1 to 101." - Course 4 Play Labs For Loops 3_instruction: "If we count by larger numbers, - we count even higher in the same amount of time. Try making Pirate Pegleg - count from 10 up to 1000, adding 10 at a time." - Course 4 Play Labs For Loops 4_instruction: "Changing the increment can be - helpful, but we're still counting linearly (each number is the same distance - from the last) What if I wanted to count exponentially? Without changing the - settings in this for loop, can you count 1, 4, 9 , 16, 25... (counter squared)?" - Course 4 Play Labs For Loops 4a_instruction: "Now, let's blend the variables - from Stage 7 together with your \"counter\" variable to make some magic happen. \r\n\r\nIn - this puzzle, Dog will count from 0 to 1000 by \"increment\". Set the \"increment\" - variable to 10 at the beginning of your code to see what happens." - Course 4 Play Labs For Loops 5_instruction: "In the last stage we counted the - square of each number. Try changing \"counter ^ 2\" to \"counter ^ 3\" to - count the cube of each number (1, 8, 27, 64, 125, 216, 343…)" - Course 4 Play Labs For Loops 5a_instruction: "In this puzzle, Dog will be your - time keeper.\r\n\r\nDog will count from 0 to 30 by \"increment\". The \"increment\" - variable will begin with a value of 1.\r\n\r\nCan you make it so that each - time you click Dog, the increment increases by 2? Click the forward arrow - to run the for loop.\r\n\r\nRun the loop a couple of times, clicking Dog before - each one." - Course 4 Play Labs For Loops 6_instruction: "You may recall that a prime number - is any whole number that is only divisible by itself and 1. Use the \"is_prime\" - function to speak out only the prime numbers from 1 to 100." - Course 4 Play Labs For Loops 6a_instruction: "Dog will still keep time by counting - with our \"for loop\" by \"increment\", but this time, we will add The Wizard - into the mix. Can you change the code so that \"increment\" goes up by two - each time The Wizard is clicked?\r\n\r\nWatch out! The Wizard moves quickly!" - Course 4 Play Labs For Loops 7_instruction: "Could you use a for loop to help - me speak the sequence 1, 4, 7, 10, 13, 16, 19, 22, 25?" - Course 4 Play Labs For Loops 7a_instruction: "Now we're getting somewhere! What - if we start counting how many times we can click The Wizard before Dog gets - to 30? \r\n\r\nFinish adding blocks to The Wizard so that every time he's - clicked the variable \"clicked\" increases by one. You can ignore \"increment\" - for now.\r\n\r\nDog will start counting when you click \"Run\"." - Course 4 Play Labs For Loops 8_instruction: "Now, help the actors move as they - count. \r\n\r\nDog should move and count by adding 2 (counter + 2) each time. Cat - will move and count by multiplying by 2 (counter * 2) each time. Penguin - will move and count to the power of 2 (counter ^ 2) each time. Who will reach - their flag first?" - Course 4 Play Labs For Loops 8a_instruction: "To finish our game, we need to - bring back the \"increment\" variable! Let's tie it to the level of the - game.\r\n\r\n1) Keep track of the number of times The Wizard is clicked.\r\n2) - If The Wizard is clicked at least 10 times before Dog counts to 30, raise - \"increment\" by 1 and start again.\r\n3) If The Wizard does not get clicked - at least 10 times, the game is over." - Course 4 Playlab For Loop Freeplay_instruction: "Freeplay: Use everything you've - learned so far to make a game that includes a `for` loop!" - Course 4 Playlab For Loops 4b_instruction: "Can you change the **increment** - in one of the loops so that the race is a tie?" - Course 4 Playlab For Loops 5b_instruction: "Adjust the interval on these `for` - loops so that the two characters end in the exact same place." - Course 4 Playlab For Loops 6b_instruction: "Edit this `for` loop to create - a game that's fun for you to play! \r\nPress \"Run\" and click Madame Unicorn - as many times as you can. Can you beat our score of 24? " - Course 4 SCF 1_instruction: "Use the suggested functions to draw four rows - of hexagons. Notice how our even numbered rows are shifted to the right?" - Course 4 SCF 1a_instruction: "Can you figure out how to collect all of this - nectar with the fewest blocks possible?" - Course 4 SCF 1b_instruction: "Can you figure out how to collect all of this - honey with the fewest blocks possible?" - Course 4 SCF 2_instruction: "Use what you learned in the previous level to - draw an image like this. Note: The code becomes more simple if you incorporate - parameters. " - Course 4 SCF 3 Fail 1_instruction: "Can you figure out how to..." - Course 4 SCF 3 Fail 2_instruction: "Can you figure out how to..." - Course 4 SCF 3_instruction: "Use what you learned in the previous level to - draw an image like this. Note: The code becomes more simple if you incorporate - parameters. " - Course 4 SCFL 1_instruction: "Solve this puzzle using the fewest number of - blocks possible." - Course 4 SCFL 1a_instruction: "Can you get Skrat to his acorn using as few - blocks as possible?" - Course 4 SCFL 1b_instruction: "Can you get Skrat to his acorn using as few - blocks as possible?" - Course 4 SCFL 2_instruction: "Solve this puzzle using the fewest number of - blocks possible." - Course 4 SCFL 3_instruction: "Can you figure out how to re-create this drawing?" - Course 4 SCFL 4_instruction: "Can you figure out how to re-create this drawing?" - Course 4 SCFL 5_instruction: "Can you figure out how to re-create this drawing?" - Course 4 SCFL 6_instruction: "Can you figure out how to re-create this drawing - with a single loop?" - Course 4 SCFL 7_instruction: "The artist wants to catch some waves! Can you - figure out how to re-create this drawing?" - Course 4 SCFP 1_instruction: "Create a function with parameters that allows - the artist to jump backward and forward by x pixels, and also up and down - by y pixels (using positive and negative numbers)." - Course 4 SCV 1_instruction: "Click here to view the instructions again." - Course 4 SCV 2_instruction: "Click here to view the instructions again." - Course 4 SCV 3_instruction: "Now for a game of tag! Tag Cat to get 2 points. - Tag Penguin to get 3 points. Get exactly 10 points to win!\r\nBut be careful, - when Cat and Penguin tag each other, they take points away.\r\n\r\nAdd the - blocks necessary to make this game work the way it's been explained. How - will you get Dog to move in all directions using the arrow keys? How will - you add points when Dog tags Cat or Penguin? How will you subtract points - when Cat and Penguin touch?" - Course 4 SCV 4_instruction: "Solve this puzzle with the fewest number of blocks - possible." - Course 4 SCV 5_instruction: "Solve this puzzle with the fewest number of blocks - possible." - Course 4 SCV 6_instruction: "Click here to view the instructions again." - Course 4 SCVP 1_instruction: "Create a function with parameters that allows - the artist to jump backward and forward by x pixels, and also up and down - by y pixels (using positive and negative numbers)." - Course 4 Variables Assessment_instruction: "Can you create this image using - a variable for sides? Each line should be 50 pixels long." - Course1BeePuzzle12_instruction: "Get three nectars and then make two honey" - Course1MazeAssessment1_instruction: "This is a test!\r\nMove one way, then - another to get me to the pig" - Course1MazeAssessment2_instruction: "This is a test!\r\nMove one way, then - another to get me to the pig." - course2_playlab_stage17_1_instruction: "Can you make Jorge the Dog (actor 1) - say \"Hi\"?" - course2_playlab_stage17_10_instruction: "Add blocks to the `when run` event - to change the background and the speed of Waddles.\r\n\r\nPlay the game and - move Waddles with the arrows until you score." - course2_playlab_stage17_11_instruction: "Create your own story. When you're - done, click Finish to let friends try your story on their phones." - course2_playlab_stage17_2_instruction: "Can you make Jorge (actor 1) say something, - then have Olive the Cat (actor 2) say something?" - course2_playlab_stage17_3_instruction: "Can you write a program to make Jorge - (actor 1) move toward Olive the Cat?" - course2_playlab_stage17_4_instruction: "Can you write a program that makes - Jorge (actor 1) move to Olive the Cat, and have Olive say \"Hello\" when Jorge - reaches her?" - course2_playlab_stage17_5_instruction: "Can you write a program to make Octavia - say \"Hi\" when she is clicked?" - course2_playlab_stage17_6_instruction: "Now, write a program to make Waddles - move around using the up / down / left /right keys to hit all of the targets!" - course2_playlab_stage17_7_instruction: "The `repeat forever` block allows you - to run code over and over forever. Can you attach blocks to move Chomp the - Dino (actor 2) up and down forever?" - course2_playlab_stage17_8_instruction: "Can you have Waddles (actor 1) say - \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen you're - done, play the game to make that happen." - course2_playlab_stage17_9_instruction: "Can you add a block to score a point - when Waddles runs into Octavia (actor 3)? \r\nPlay the game and move Waddles - with the arrows until you score!" - course3_playlab_stage16_1_instruction: "Can you make this dog say \"hello world\"?" - course3_playlab_stage16_2_instruction: "Can you make the dog say something - and then have the cat say something afterwards?" - course3_playlab_stage16_3_instruction: "Can you write a program to make this - dog move to the cat?" - course3_playlab_stage16_4_instruction: "Can you write a program that makes - the dog move to the cat, and have the cat say \"hello\" when the dog reaches - him?" - course3_playlab_stage16_5_instruction: "Can you add a block to make the octopus - happy?" - course3_playlab_stage16_6_instruction: "Create your own story. When you're - done, click Finish to let friends try your story on their phones." - course3_playlab_stage17_1_instruction: "Can you write a program to make the - octopus say \"hello\" when it is clicked?" - course3_playlab_stage17_2_instruction: "Can you write a program to make Waddles - move around using the up / down / left /right keys to hit all of the targets?" - course3_playlab_stage17_3_instruction: "The \"repeat forever\" block allows - you to run code continuously. Can you attach blocks to move this dinosaur - up and down repeatedly?" - course3_playlab_stage17_4_instruction: "Can you have Waddles say \"Ouch!\" - and play a \"hit\" sound if he runs into the dinosaur, and then move him with - the arrows to make that happen?" - course3_playlab_stage17_5_instruction: "Can you add a block to score a point - when Waddles runs into the octopus, and then move him with the arrows until - you score?" - course3_playlab_stage17_6_instruction: "Can you add blocks to change the background - and the speed of Waddles, and then move him with the arrows until you score?" - course3_playlab_stage17_7_instruction: "Create your own story. When you're - done, click Finish to let friends try your story on their phones." - course_playlab_variables1_instruction: "This is Pirate Pegleg. He's awfully - hard to understand these days!" - course_playlab_variables2_instruction: "Now, decode Pirate Pegleg's speech - by changing the value of the variables in just two places! \r\n" - course_playlab_variables3_instruction: "Now, decode Pirate Pegleg's speech - by changing the value of the variables in just two places! \r\n" - courseA_artist_loops1_instruction: "This is a new type of puzzle called \"Artist\". - Play with the level and draw something fun." - courseA_artist_loops10_instruction: "Help me put down stones so I don't fall - in!" - courseA_artist_loops11_instruction: "Help me build steps to watch the ship - sail away." - courseA_artist_loops12_instruction: "The artist saw something funny in the - distance. Draw what you think he saw." - courseA_artist_loops2_instruction: "Help the artist draw this line two times - forward." - courseA_artist_loops3_instruction: "Draw a line forward five times." - courseA_artist_loops4_instruction: "Now, use a `repeat` loop to draw this line - five times!" - courseA_artist_loops5_instruction: "Draw a line seven steps long. This will - become our horizon." - courseA_artist_loops6_instruction: "Let's put a nice hill in the back." - courseA_artist_loops7_instruction: "Use the `repeat` loop to add waves to the - water." - courseA_artist_loops8_instruction: "We need a ladder up to the boat." - courseA_artist_loops9_instruction: "Challenge: Fix the stairs." - courseA_collector_loops1_instruction: "Move Laurel around and get as much treasure - as you can!" - courseA_collector_loops10_instruction: "Help Laurel get all of the treasure - from this deep valley." - courseA_collector_loops11_instruction: "Help Laurel get all of the treasure - from this cave." - courseA_collector_loops12_instruction: "Eureka! Collect as much treasure as - you can!" - courseA_collector_loops2_instruction: "Collect all three piles to pass this - level." - courseA_collector_loops3_instruction: "How can Laurel collect all five piles - of treasure using only one `[E-->]` block?" - courseA_collector_loops4_instruction: "Fix Laurel's path to get all of this - treasure." - courseA_collector_loops5_instruction: "Use what you learned to get all of the - treasure." - courseA_collector_loops6_instruction: "Add blocks to this code to collect all - of the treasure." - courseA_collector_loops7_instruction: "What should you add to this code to - get all of the treasure?" - courseA_collector_loops8_instruction: "Write the code to get all of this treasure." - courseA_collector_loops9_instruction: "**Challenge:** The treasure goes all - the way up these stairs! Write the code to help Laurel get it all." - courseA_maze_seq1_instruction: "Get the bird to the bad pig!" - courseA_maze_seq10_instruction: "Challenge: Go around the TNT to get the bird - to the pig! " - courseA_maze_seq11_instruction: "Move one way, then another to get the bird - to the pig." - courseA_maze_seq12_instruction: "Get that pig! " - courseA_maze_seq13_instruction: "Get the pig any way you can!" - courseA_maze_seq2_instruction: "Fix the code to get the bird to the pig." - courseA_maze_seq3_instruction: "Fix the code to get the bird to the pig!" - courseA_maze_seq4_instruction: "REMOVE a block to get the bird to the pig!" - courseA_maze_seq5_instruction: "Try this one yourself from the beginning." - courseA_maze_seq6_instruction: "Move one way, then another to get the bird - to the pig!" - courseA_maze_seq7_instruction: "Figure out what is missing and then add blocks - to get the bird to the pig!" - courseA_maze_seq8_instruction: "Solve this level and get the bird to the pig!" - courseA_maze_seq9_instruction: "Debug this level by adding blocks to get the - bird to the pig!" - courseA_playLab_events1_instruction: "This is a Play Lab level. Move blocks - to the workspace and see what happens!" - courseA_playLab_events2_instruction: "Jorge the Dog wants to say \"Hi there.\" Can - you help him?" - courseA_playLab_events3_instruction: "Connect the `move left` block to the - `when left` event block that is already in the workspace." - courseA_playLab_events4_instruction: "Now, get Jorge to move right when the - `right` button is clicked." - courseA_playLab_events5_instruction: "Add events to have Jorge move up and - down when the `up` and `down` buttons are pressed." - courseA_playLab_events6_instruction: "Make this more interesting by changing - the background and playing a random sound when Jorge is clicked." - courseA_playLab_events7_instruction: "Add anything you want to this game. Can - you make the dinosaur disappear when Jorge runs into him?" - courseA_video_events_instruction: "Need a better playlab/events combo" - courseB_artist_loops1_instruction: "This is a new type of puzzle called \"Artist\". - Play with the level and draw something fun." - courseB_artist_loops10_instruction: "Use what you have learned to draw a picture - of what you think the artist saw when he got home." - courseB_artist_loops2_instruction: "The Artist is trying to draw a line six - times, but can't get it right. Can you help?" - courseB_artist_loops3_instruction: "Help the artist draw a line 7 times to - make a garden wall." - courseB_artist_loops4_instruction: "Now we need to get the soil ready to plant. - Find the bugs in the code and help the artist prepare the ground. " - courseB_artist_loops5_instruction: "Time to fix the stairs! Repeat this pattern - five times so the artist can reach the top of the bushes." - courseB_artist_loops6_instruction: "Climb the vine and see where it goes?" - courseB_artist_loops7_instruction: "**Challenge:** It's a hidden garden! - Let's walk around." - courseB_artist_loops8_instruction: "Time to head home. Can you fix this ladder - to help the artist get down?" - courseB_artist_loops9_instruction: "Let's take the short way home, over the - pond. Can you help the artist stay on the stones?" - courseB_collector_loops1_instruction: "This is Laurel the Adventurer! Can - you move her around and get treasure?" - courseB_collector_loops10_instruction: "Help Laurel get all of the treasure - from this cave." - courseB_collector_loops11_instruction: "Eureka! Collect as much treasure as - you can!" - courseB_collector_loops2_instruction: "Collect all four piles to pass this - level." - courseB_collector_loops3_instruction: "How can Laurel collect all five piles - of treasure using only one `E -->` block?" - courseB_collector_loops3_predict1_instruction: "How can Laurel collect all - five piles of gold using only one `E -->` block?" - courseB_collector_loops4_instruction: "Fix Laurel's path to get all of this - treasure!" - courseB_collector_loops5_instruction: "Add to the code from the last puzzle - to get all of the treasure. " - courseB_collector_loops6_instruction: "Figure out the code to help Laurel get - all of the treasure!" - courseB_collector_loops7_instruction: "Write the code to get all of this treasure." - courseB_collector_loops8_instruction: "**Challenge: ** The treasure goes all - the way down these stairs! Write the code to help Laurel get it all." - courseB_collector_loops9_instruction: "*\"Help me get the treasure from this - deep valley.\"*" - courseB_collector_prog1_instruction: "This is Laurel the Adventurer! Can you - move her around and get gold?" - courseB_collector_prog2_instruction: "Four piles of gold! Collect all four." - courseB_collector_prog3_instruction: "How can Laurel collect all five piles - of gold using only one `E -->` block?" - courseB_maze_seq1_instruction: "Play with these blocks to see what they make - the bird do!" - courseB_maze_seq10_instruction: "Fix the bugs to get the bird to the pig." - courseB_maze_seq11_instruction: "It's all you! Get the bird to the pig." - courseB_maze_seq12_instruction: "Now get that pig any way you can!" - courseB_maze_seq2_instruction: "*\"A bug! Fix the code to get me to the pig.\"*" - courseB_maze_seq3_instruction: "*\"Fix the code to get me to the pig!\"*" - courseB_maze_seq4_instruction: "Add 2 blocks to get the bird to the pig." - courseB_maze_seq5_instruction: "Now try this puzzle from the start!" - courseB_maze_seq6_instruction: "Move one way, then another to get the bird - to the pig!" - courseB_maze_seq7_instruction: "Figure out what is missing and then add blocks - to get the bird to the pig!" - courseB_maze_seq8_instruction: "Your turn! What do you need to do to get the - bird to the pig?" - courseB_maze_seq9_instruction: "Challenge: Move around the TNT to get the bird - to the pig." - courseB_maze_seqCold_instruction: "Challenge: Debug this level by adding blocks - to get the bird to the pig!" - courseB_maze_seqOld_instruction: "Go around the TNT to get the bird to the - pig! " - courseB_playLab_events1_instruction: "See if you can figure out what each block - does." - courseB_playlab_events2_instruction: "Have Daisy the Dragon say something when - you click \"Run\"." - courseB_playlab_events3_instruction: "Use an event to make Daisy the Dragon - switch to a random mood when you click on her." - courseB_playlab_events4_instruction: "Knight time! Add an event so that the - knight moves toward the dragon when the left arrow is clicked." - courseB_playlab_events5_instruction: "Now add an event so that the knight runs - away from the dragon when you press the right arrow." - courseB_playlab_events6_instruction: "Help your knight get all of the flags!\r\n\r\nTo - do this, you'll need to add events to help the knight move up and down." - courseB_playlab_events7_instruction: "Make this game fun by setting the knight - to vanish when he runs into the dragon! Play a sound when they collide to - make it feel more real." - courseB_playlab_events8_instruction: "Use your imagination. What can you do - to make this game more fun?" - courseB_playlab_eventsFP_instruction: "Use your imagination. What can you do - to make this game more fun?" - courseB_playlab_eventsToolbox_instruction: "Finish by playing a sound and making - the knight vanish when he runs into the dragon!" - courseC_artist_prog1_instruction: "Play with the blocks in the toolbox to see - what they do!" - courseC_artist_prog2_instruction: "Drag blocks onto the screen to have the - artist draw over the grey lines in the picture. (Each line is 100 pixels long)" - courseC_artist_prog3_instruction: "Each side of the inner square is 100 pixels - and all of the angles are 90 degrees." - courseC_artist_prog4_instruction: "Finish Starla's rocket so she can chase - her pet." - courseC_artist_prog5_instruction: "Finish this tag by drawing a rectangle around - the outside.\r\n(The long sides are 200 pixels each and the short sides are - each 100 pixels)" - courseC_artist_prog6_instruction: "Draw this diamond with 200 pixel sides." - courseC_artist_prog7_instruction: "**Challenge:** This tag is a special one! Can - you figure out how to draw the outline?" - courseC_artist_prog8_instruction: "One more tag. This is a triangle for Pi.\r\n(Each - side is 150 pixels)" - courseC_collector_prog1_instruction: "Play around with the blocks to see if - you can help Laurel collect some treasure." - courseC_collector_prog2_instruction: "Move Laurel to the treasure, then use - `collect` to pick it up." - courseC_collector_prog3_instruction: "Order these blocks to collect the treasure - and solve the puzzle." - courseC_collector_prog4_instruction: "Put these blocks in order to collect - all of the treasure and solve the puzzle." - courseC_collector_prog5_instruction: "These blocks are in the wrong order. - Can you fix them?" - courseC_collector_prog6_instruction: "Reorder the blocks to collect all of - the treasure." - courseC_collector_prog7_instruction: "Use blocks from the toolbox to collect - all of the treasure." - courseC_collector_prog8_instruction: "*\"Keep up the good work! Help me collect - all of the treasure.\"*" - courseC_collector_prog9_instruction: "*\"Let's get all of the treasure!\"*" - courseC_collector_progA_instruction: "Help Laurel collect all of the treasure." - courseC_collector_progB_instruction: "Collect as many coins as you can to finish - the stage!" - courseC_harvester_loops1_instruction: "Use loops to pick all of the pumpkins." - courseC_harvester_loops10_instruction: "Collect all of the corn and all of - the pumpkins." - courseC_harvester_loops11_instruction: "Collect all of the corn and all of - the pumpkins." - courseC_harvester_loops2_instruction: "Can you combine two different loops - to move toward the pumpkins, then collect them all?" - courseC_harvester_loops3_instruction: "Collect all of the pumpkins." - courseC_harvester_loops4_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_harvester_loops5_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_harvester_loops6_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_harvester_loops7_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_harvester_loops8_instruction: "**Challenge:** Collect all of the corn - and all of the pumpkins." - courseC_harvester_loops9_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_maze_debugging1_instruction: "Fix the code to help get Skrat get to - the acorn." - courseC_maze_debugging10_instruction: "Debug this level by rearranging and - changing blocks to get me to the pig!" - courseC_maze_debugging2_instruction: "Use your debugging skills to get Skrat - to the acorn." - courseC_maze_debugging3_instruction: "Remove blocks to get Skrat to the acorn!" - courseC_maze_debugging4_instruction: "Someone has their directions mixed up! - Can you help?" - courseC_maze_debugging5_instruction: "Debug this level by rearranging and changing - blocks." - courseC_maze_debugging6_instruction: "Figure out what is wrong and get Skrat - to the acorn." - courseC_maze_debugging7_instruction: "**Challenge:** Debug this level by rearranging, - adding, and deleting blocks." - courseC_maze_debugging8_instruction: "Debug this level to get Skrat to the - acorn." - courseC_maze_debugging9_instruction: "Debug this level to get Skrat to the - acorn." - courseC_maze_loops1_instruction: "Can you get the bird to the pig using 5 of - the same kind of blocks?" - courseC_maze_loops10_instruction: "You are doing great! Keep it up!" - courseC_maze_loops11_instruction: "You are almost there! This time, choose - any path you like!" - courseC_maze_loops2_instruction: "Can you get the bird to the pig by creating - a loop that uses only one `move forward` block inside of a `repeat`?" - courseC_maze_loops3_instruction: "Solve this puzzle by creating a loop!" - courseC_maze_loops4_instruction: "In this puzzle, two `repeat` loops will help - you get the bird to the pig with the fewest number of blocks!" - courseC_maze_loops5_instruction: "*\"Get me to the pig as quickly as possible!\"*" - courseC_maze_loops6_instruction: "Loops even work with more than one block - inside! Can you loop this sequence?" - courseC_maze_loops7_instruction: "Use what you learned in other puzzles!" - courseC_maze_loops8_instruction: "Challenge: Combine ideas from the last few - puzzles to complete this level." - courseC_maze_loops9_instruction: "You are doing great! Keep it up!" - courseC_maze_programming1_instruction: "For this puzzle, drag all of the blocks - together and click \"Run\" to watch it go!" - courseC_maze_programming2_instruction: "Drag an extra `move forward` block - out of the toolbox to finish your code." - courseC_maze_programming3_instruction: "There is one extra block that is going - to cause the bird to crash. Throw it away by dragging it back to the toolbox." - courseC_maze_programming4_instruction: "Avoid TNT or feathers will fly!" - courseC_maze_programming5_instruction: "Avoid the TNT." - courseC_maze_programming6_instruction: "\"Keep calm and help me find the bad - pig. Otherwise I might get angry!\"" - courseC_maze_programming7_instruction: "**Challenge:** This code has a lot - of bugs. You'll need to remove some blocks and add others." - courseC_maze_programming8_instruction: "*\"Keep calm and help me find the bad - pig.\"*" - courseC_maze_programming8_predict1_instruction: "*\"Keep calm and help me find - the bad pig.\"*" - courseC_maze_programming9_instruction: "*\"Now, help me sneak up on the pig - any way you want to!\"*" - courseC_PlayLab_events1_instruction: "Make Jorge the Dog (actor 1) say \"Hi - there.\"" - courseC_PlayLab_events2_instruction: "Can you make Jorge (actor 1) say something, - then have Olive the Cat (actor 2) say something afterward?" - courseC_PlayLab_events3_instruction: "Can you write a program to make Jorge - (actor 1) move toward Olive the Cat?" - courseC_PlayLab_events4_instruction: "Can you write a program that makes Jorge - (actor 1) move to Olive the Cat, and have Olive say \"Hi there.\" when Jorge - reaches her?" - courseC_PlayLab_events5_instruction: "Can you write a program to make Octavia - say \"What's new?\" when she is clicked?" - courseC_PlayLab_events6_instruction: "Now, write a program to make Waddles - move around using the up / down / left / right keys to hit all of the targets!" - courseC_PlayLab_events7_instruction: "The `repeat forever` block allows you - to run code over and over forever. Use this block to move Chomp the Dino - (actor 2) up and down by 400 pixels forever." - courseC_PlayLab_events8_instruction: "Can you have Waddles (actor 1) say \"Ouch!\" - and play a \"hit\" sound if he runs into Chomp? \r\nWhen you're done, play - the game to make that happen." - courseC_PlayLab_events9_instruction: "Can you add a block to score a point - when Waddles (actor1) runs into Octavia (actor 3)? \r\nPlay the game and move - Waddles with the arrows until you score!" - courseC_PlayLab_eventsA_instruction: "Add blocks to the `when run` event to - change the background scene and the speed of Waddles.\r\n\r\nPlay the game - and move Waddles with the arrows until you score." - courseC_PlayLab_eventsFP_instruction: "Create your own story. When you're - done, click \"Finish\" to share with friends." - courseC_puppy_loops10_instruction: "You are doing great! Keep it up!" - courseC_puppy_loops11_instruction: "You are almost there! This time, choose - any path you like!" - courseC_puppy_loops8_instruction: "Challenge: Combine ideas from the last few - puzzles to complete this level." - courseC_puppy_loops8courseC_maze_loops8_instruction: "Challenge: Combine ideas - from the last few puzzles to complete this level." - courseC_puppy_loops9_instruction: "You are doing great! Keep it up!" - courseD_artist_binary1_instruction: "Use the blocks below to have the artist - draw \"01010101\" in binary in the first row." - courseD_artist_binary2_instruction: "Run this code to see how the artist uses - binary to draw this pattern." - courseD_artist_binary3_instruction: "Which of the binary strings below could - you loop 8 times to draw this image?" - courseD_artist_binary4_instruction: "Can you draw this pattern by looping just - three binary digits (0s and 1s)?" - courseD_artist_binary5_instruction: "Each binary string below represents one - row of this picture. \r\n\r\nCan you rearrange them so it draws a smiley face - instead of a frown?" - courseD_artist_binary6_instruction: "Which 6 digit binary string, repeated - 11 times, will draw this image?" - courseD_artist_binary7_instruction: "What is the shortest binary string that - you can repeat to draw this image?" - courseD_artist_binary8_instruction: "Finish the code to create this drawing." - courseD_artist_binary8_predict1_instruction: "Finish the code to create this - drawing." - courseD_artist_binaryFP_instruction: "Here's a higher resolution canvas to - draw on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we start to - get creative with the bits!" - courseD_artist_functions10_instruction: "This time, use lines of 8 hexagons - with 25 pixel sides." - courseD_artist_functions2_instruction: "This time, use the `draw a square` - function to create the glasses. \r\n" - courseD_artist_functions3_instruction: "You can make this drawing by adding - a repeat block." - courseD_artist_functions4_instruction: "Now that you can draw a star, try drawing - four stars!" - courseD_artist_functions5_instruction: "Draw only those three stars to finish - this puzzle." - courseD_artist_functions6_instruction: "Make this window by drawing a square, - then turning 90 degrees before drawing another, and so on." - courseD_artist_functions7_instruction: "Try solving this puzzle by creating - `draw a window` and calling it five times. Watch out for the door!" - courseD_artist_functions8_instruction: "Challenge: Create as many functions - as you think you need to make this drawing of 50 pixel squares." - courseD_artist_functions9_instruction: "Create this image using only the blocks - provided." - courseD_artist_nestedLoops1_instruction: "Draw a triangle to kickstart this - stage. \r\n(Each side is 100 pixels long and you'll need to turn 120 degrees - for each exterior angle.)" - courseD_artist_nestedLoops10_instruction: "Take the squares from before, but - this time only make 7 of them, and lay them out in a row." - courseD_artist_nestedLoops1a_instruction: "Now loop the triangle 6 times. " - courseD_artist_nestedLoops2_instruction: "This time, complete the puzzle with - the fewest number of blocks possible." - courseD_artist_nestedLoops3_instruction: "Use your new skills to quickly draw - the last row of windows for this building.\r\n\r\nThe windows are 20 pixel - squares, each 20 pixels apart." - courseD_artist_nestedLoops4_instruction: "Great! Do the same thing with these - circles.\r\n" - courseD_artist_nestedLoops5_instruction: "What happens if you also turn 90 - degrees between circles?" - courseD_artist_nestedLoops6_instruction: "Edit blocks within your existing - code to make this image." - courseD_artist_nestedLoops7_instruction: "Use what you've learned to make - this drawing.\r\n" - courseD_artist_nestedLoops8_instruction: "Using what you have learned in the - last couple of puzzles, build this image from the beginning." - courseD_artist_nestedLoops9_instruction: "**Challenge:** Can you figure out - how to make a picture like this?" - courseD_artist_nestedLoops9_predict1_instruction: "**Challenge:** Can you figure - out how to make a picture like this?" - courseD_artist_nestedLoopsFP_instruction: "Now it's your turn. Take the skills - you have learned and make something that you love!" - courseD_artist_nestedLoopsPre1_instruction: "Create a triangle to kickstart - this stage." - courseD_artist_ramp11_instruction: "Now make a square using Artist!" - courseD_artist_ramp12_instruction: "Use what you've learned to draw this triangle - inside of a square." - courseD_bee_conditionals1_instruction: "Check to see if there's a flower under - the cloud. If there's a flower, get nectar." - courseD_bee_conditionals10_instruction: "Collect all of the nectar and make - all of the honey." - courseD_bee_conditionals1_predict1_instruction: "Check to see if there's a - flower under the cloud. If there's a flower, get nectar." - courseD_bee_conditionals2_instruction: "Check underneath every cloud to see - if it is hiding a flower before you get nectar. \r\n" - courseD_bee_conditionals3_instruction: "Help the bee collect all of the nectar. - \r\n\r\nYou can only collect nectar from flowers, but you can check any space - to see if there is a flower." - courseD_bee_conditionals4_instruction: "Get all of the nectar using as few - blocks as possible." - courseD_bee_conditionals5_instruction: "Collect all of the nectar using as - few blocks as possible" - courseD_bee_conditionals6_instruction: "Some of these clouds might have honeycombs - under them. Be sure to check if a honeycomb is hiding behind each cloud!" - courseD_bee_conditionals7_instruction: "Use the `if/else` block to collect - nectar at flowers and make honey at honeycomb." - courseD_bee_conditionals7_predict2_instruction: "Use the `if/else` block to - collect nectar at flowers and make honey at honeycomb." - courseD_bee_conditionals8_instruction: "Collect nectar if there is a flower.\r\nOtherwise, - make honey (because there is a honeycomb)." - courseD_bee_conditionals9_instruction: "Collect all of the nectar or make all - the honey." - courseD_bee_debugging1_instruction: "Fix the error(s) to collect all of the - nectar." - courseD_bee_debugging2_instruction: "Fix the error(s) to collect all of the - nectar." - courseD_bee_debugging3_instruction: "Fix the error(s) to collect all of the - nectar and make all of the honey." - courseD_bee_debugging4_instruction: "Fix the error(s) to make all of the honey." - courseD_bee_debugging5_instruction: "Challenge: All of the commands that you - need are already here...now use your debugging skills to figure out how to - solve this puzzle." - courseD_bee_debugging6_instruction: "Challenge: Fix the errors to collect - all of the nectar and make all of the honey." - courseD_bee_debugging9_instruction: "Help the bee fix the code to get all the - nectar." - courseD_bee_nestedLoops1_instruction: "Help the bee collect all of the nectar." - courseD_bee_nestedLoops2_instruction: "This time, help the bee collect all - of the nectar using as few blocks as possible." - courseD_bee_nestedLoops2_predict1_instruction: "This time, help the bee collect - all of the nectar using as few blocks as possible." - courseD_bee_nestedLoops3_instruction: "Collect all of the nectar from each - flower." - courseD_bee_nestedLoops5_instruction: "Collect all of the nectar from each - flower and make honey at the honeycomb. " - courseD_bee_nestedLoops6_instruction: "Make all of the nectar." - courseD_bee_nestedLoops7_instruction: "Challenge: Figure out how to get all - of the nectar using only the blocks available." - courseD_bee_nestedLoops8_instruction: "Collect all of the nectar from each - flower and make honey at the honeycomb. " - courseD_bee_nestedLoops9_instruction: "Make all of the honey." - courseD_bee_nestedLoops9_predict2_instruction: "Make all of the honey." - courseD_collector_ramp10_instruction: "Help Laurel collect all of the treasure." - courseD_collector_ramp8_instruction: "Help Laurel collect all of the treasure." - courseD_collector_ramp9_instruction: "Help Laurel collect all of the treasure." - courseD_debugging_1_instruction: "Fix the error(s) to collect all of the nectar." - courseD_debugging_2_instruction: "Fix the error(s) to collect all of the nectar." - courseD_debugging_3_instruction: "Fix the error(s) to collect all of the nectar - and make all of the honey." - courseD_debugging_4_instruction: "Fix the error(s) to make all of the honey." - courseD_debugging_5_instruction: "Challenge: All of the commands that you need - are already here...now use your debugging skills to figure out how to solve - this puzzle." - courseD_debugging_6_instruction: "Challenge: Fix the errors to collect all - of the nectar and make all of the honey." - courseD_farmer_conditionals1_instruction: "Move to the pile of dirt and use - the `remove` block to remove it." - courseD_farmer_conditionals10_instruction: "Flatten all of these piles using - as few blocks as possible. " - courseD_farmer_conditionals2_instruction: "Move to the hole and fill it with - six shovelfuls of dirt, using the `fill` block." - courseD_farmer_conditionals3_instruction: "Use as few blocks as possible to - solve this puzzle." - courseD_farmer_conditionals4_instruction: "Help the farmer remove this entire - pile using a `while` loop." - courseD_farmer_conditionals5_instruction: "Help me remove all of this dirt. - " - courseD_farmer_conditionals6_instruction: "Use the `while` loop to easily fill - all of the holes." - courseD_farmer_conditionals7_instruction: "Fill in the hole at the end of each - of these paths." - courseD_farmer_conditionals8_instruction: "Challenge: Fill all of these holes - using as few blocks as possible. " - courseD_farmer_conditionals9_instruction: "Flatten all of these piles using - as few blocks as possible. " - courseD_farmer_condLoops1_instruction: "Use conditionals to make sure that - you pick all of the corn, but don't disturb the stalks where nothing is growing - yet." - courseD_farmer_condLoops2_instruction: "Help the farmer collect both corn and - lettuce from the field." - courseD_farmer_condLoops3_instruction: "*\"Corn, lettuce, AND pumpkins! Help - me harvest them all.\"*" - courseD_farmer_condLoops4_instruction: "Help the farmer pick all of the lettuce - in each cluster before moving on to the next bunch." - courseD_farmer_condLoops5_instruction: "This field has clusters of corn, lettuce, - and pumpkins all growing together. Can you collect them all?" - courseD_farmer_condLoops6_instruction: "Can you figure out how to pick the - pumpkin? Make sure to collect all of the corn along the way!" - courseD_farmer_condLoops7_instruction: "Challenge: Collect all of the corn - and lettuce, then pick the pumpkin." - courseD_farmer_condLoops8_instruction: "Collect all of the corn and lettuce, - then pick the pumpkin." - courseD_farmer_condLoops9_instruction: "Collect all of the corn and lettuce, - then pick the pumpkin." - courseD_farmer_condLoops9_predict1_instruction: "Collect all of the corn and - lettuce, then pick the pumpkin." - courseD_farmer_while1_instruction: "Move to the pile of dirt and use the `remove` - block to remove it." - courseD_farmer_while10_instruction: "Flatten all of these piles using as few - blocks as possible. " - courseD_farmer_while10_predict2_instruction: "Flatten all of these piles using - as few blocks as possible. " - courseD_farmer_while2_instruction: "Move to the hole and fill it with six shovelfuls - of dirt, using the `fill` block." - courseD_farmer_while3_instruction: "Use as few blocks as possible to solve - this puzzle." - courseD_farmer_while4_instruction: "Help the farmer remove this entire pile - using a `while` loop." - courseD_farmer_while4_predict1_instruction: "Help the farmer remove this entire - pile using a `while` loop." - courseD_farmer_while5_instruction: "Help me remove all of this dirt. " - courseD_farmer_while6_instruction: "Use the `while` loop to easily fill all - of the holes." - courseD_farmer_while7_instruction: "Fill in the hole at the end of each of - these paths." - courseD_farmer_while8_instruction: "Challenge: Fill all of these holes using - as few blocks as possible. " - courseD_farmer_while9_instruction: "Flatten all of these piles using as few - blocks as possible. " - courseD_maze_nestedLoops3_instruction: "Get the zombie to the sunflower using - the fewest number of blocks possible." - courseD_maze_nestedLoops4_instruction: "Get the zombie to the sunflower using - the fewest blocks possible! " - courseD_maze_nestedLoops5_instruction: "Get the zombie to the sunflower using - the fewest number of blocks possible!" - courseD_maze_nestedLoops6_instruction: "Get the zombie to the sunflower using - only the blocks available." - courseD_maze_ramp1_instruction: "For this puzzle, drag all of the blocks together - and click \"Run\" to watch it go!" - courseD_maze_ramp2_instruction: "Drag an extra `move forward` block out of - the toolbox to finish your code." - courseD_maze_ramp3_instruction: "There is one extra block that is going to - cause the bird to crash. Throw it away by dragging it back to the toolbox." - courseD_maze_ramp4_instruction: "Avoid TNT or feathers will fly!" - courseD_maze_ramp5_instruction: "Avoid the TNT." - courseD_maze_ramp6_instruction: "\"Keep calm and help me find the bad pig. - Otherwise I might get angry!\"" - courseD_maze_ramp7_instruction: "**Challenge:** Get the bird to the pig!" - courseD_maze_until1_instruction: "Get the angry bird to the pig." - courseD_maze_until10_instruction: "Help the zombie get to the sunflower." - courseD_maze_until10_predict2_instruction: "Help the zombie get to the sunflower." - courseD_maze_until2_instruction: "Now, use the `repeat until` loop to do the - same thing without specifying how many times to move forward and turn." - courseD_maze_until3_instruction: "Get the bird to the pig." - courseD_maze_until4_instruction: "Can you get the zombie to the sunflower using - only the blocks that are available?" - courseD_maze_until5_instruction: "Use the `if` block to help the zombie decide - when to turn, then get the zombie to the sunflower." - courseD_maze_until6_instruction: "Help the zombie get to the sunflower." - courseD_maze_until7_instruction: "Help the zombie get to the sunflower." - courseD_maze_until8_instruction: "Help the zombie get to the sunflower." - courseD_maze_until9_instruction: "**Challenge:** Avoid the chompers and help - the zombie get to the sunflower." - courseD_playLab_cond1_instruction: "Get Pegleg to the dragon to solve this - puzzle." - courseD_playLab_cond2_instruction: "Give Pegleg a point every time he makes - it to the dragon. " - courseD_playLab_cond3_instruction: "1) Make the dragon change between random - emotions every second. \r\n2) Make it so when Pegleg gets to the dragon, - he gets 2 points if the dragon is happy and 1 otherwise." - courseD_playLab_cond4_instruction: "Add some code so that the ninja (actor - 3) starts chasing Pegleg as soon as the game begins. End the game as a loss - if the ninja catches him." - courseD_playLab_cond5_instruction: "Add a `repeat forever` loop that continuously - checks if the score is greater than 5, then ends the game as a win when it - is." - courseD_playLab_cond6_instruction: "1) Slow the ninja down before you set - him to chase the pirate. \r\n\r\n2) If the pirate is greater than 225 pixels - down, set the ninja to **flee** the pirate. Otherwise, set the ninja to **chase** - the pirate. \r\n\r\n3) If the pirate is in the safe zone, wait one second, - then deduct a point as long as he stays beneath the octopus line." - courseD_playLab_cond6cloneForTest_instruction: "Testing" - courseD_playLab_condFP_instruction: "Now, build your own game to show off to - your friends!" - courseE_artist_concept1_instruction: "Recreate this image. " - courseE_artist_concept4_instruction: "Recreate this drawing using 13 blocks - or fewer." - courseE_artist_functions1_instruction: "Help the zombie draw glasses using - squares with sides of 100 pixels. \r\nThe bridge between the glasses is 75 - pixels long." - courseE_artist_functions10_instruction: "This time, use lines of 8 hexagons - with 25 pixel sides." - courseE_artist_functions2_instruction: "This time, use the `draw a square` - function to create the glasses. \r\n" - courseE_artist_functions3_instruction: "You can make this drawing by adding - a repeat block." - courseE_artist_functions4_instruction: "Now that you can draw a star, try drawing - four stars!" - courseE_artist_functions5_instruction: "Draw only those three stars to finish - this puzzle." - courseE_artist_functions6_instruction: "Make this window by drawing a square, - then turning 90 degrees before drawing another, and so on." - courseE_artist_functions7_instruction: "Try solving this puzzle by creating - `draw a window` and calling it five times. Watch out for the door!" - courseE_artist_functions8_instruction: "Challenge: Create as many functions - as you think you need to make this drawing of 50 pixel squares." - courseE_artist_functions9_instruction: "Create this image using only the blocks - provided." - courseE_artist_ramp11_instruction: "Now make a square using Artist!" - courseE_artist_ramp12_instruction: "Use what you've learned to draw this triangle - inside of a square." - courseE_bee_concept1_instruction: "Collect all of the nectar from each flower." - courseE_bee_concept2_instruction: "Help the bee make all of the honey. You - can only make honey at a honeycomb, but you can check any space to see if - there is a honeycomb." - courseE_bee_concept3_instruction: "Collect all of the nectar using as few - blocks as possible." - courseE_bee_concept4_instruction: "Uh oh! The bee is not sure if he should - collect nectar or make honey. Can you help him out?" - courseE_bee_concept5_instruction: "Help the bee collect the nectar from the - flowers?" - courseE_bee_functions1_instruction: "Collect all the nectar from each flower." - courseE_bee_functions10_instruction: "Solve this function by creating a function - to turn, move forward and make all of the honey, then return the bee to where - it started and turn back." - courseE_bee_functions2_instruction: "Use the `get 2 nectar` function to collect - the nectar from each flower." - courseE_bee_functions3_instruction: "Build the `get 5` function to use in this - puzzle." - courseE_bee_functions4_instruction: "Use the `move and get nectar` function - to collect all of the nectar." - courseE_bee_functions5_instruction: "Now write the function to collect nectar - from the flowers." - courseE_bee_functions6_instruction: "Create a function and call it to collect - nectar at each flower and make honey at each honeycomb." - courseE_bee_functions7_instruction: "Create your own function that goes down - a path, gets nectar, makes honey, and then returns the bee to the top of the - path. Collect all the nectar and make all the honey!" - courseE_bee_functions8_instruction: "Create a function that collects all of - the nectar from each flower." - courseE_bee_functions9_instruction: "Create a function to collect all of the - nectar from each flower." - courseE_collector_ramp10_instruction: "Help Laurel collect all of the treasure." - courseE_collector_ramp8_instruction: "Help Laurel collect all of the treasure." - courseE_collector_ramp9_instruction: "Help Laurel collect all of the treasure." - courseE_farmer_concept1_instruction: "Can you write a program that fills these - holes until the ground is even?" - courseE_farmer_concept2_instruction: "Collect all of the pumpkins." - courseE_farmer_concept3_instruction: "Fill in the hole at the end of each of - these paths." - courseE_farmer_concept4_instruction: "Now let's go one level deeper! We've - nested that whole block of code into another loop, but you need to get the - artist back in place to draw the next line. Which of these code blocks can - you place at the end of the outermost loop to draw the whole grid?" - courseE_farmer_functions1_instruction: "Help the farmer get to the pumpkin - and pick it." - courseE_farmer_functions10_instruction: "No one knows what these sprouts will - become. Use `if` statements to write the code to check and harvest each one. " - courseE_farmer_functions10b_instruction: "Figure out which function to use - and which one to delete, then solve this puzzle!" - courseE_farmer_functions1a_instruction: "Now help the farmer pick the corn, - lettuce, **and** pumpkin." - courseE_farmer_functions2_instruction: "Now, there will be a different number - of pumpkins each time you run the program. \r\n\r\nUse the `while` block - to pick only as many pumpkins as you need." - courseE_farmer_functions2a_instruction: "We're going to check lots of squares - for crops in the next few puzzles. Let's move everything into a function - to make it easier." - courseE_farmer_functions2aALT_instruction: "We're going to check lots of squares - for crops in the next few puzzles. Let's move everything into a function - to make it easier." - courseE_farmer_functions2b_instruction: "Help the farmer pick the corn, lettuce, - and pumpkin." - courseE_farmer_functions3_instruction: "What happens when the paths to the - pumpkins are all different lengths? \r\n\r\nGet them all with as few blocks - as possible." - courseE_farmer_functions3b_instruction: "Now help the farmer pick the corn, - lettuce, **and** pumpkin." - courseE_farmer_functions3c_instruction: "Which set of blocks helps the farmer - check for produce and pick it when it is available? Drag that code into a - function, then call your function from inside the `while path ahead` loops - (after the `move forward` block)." - courseE_farmer_functions4_instruction: "Great! Now you have code that will - work to get pumpkins from any size path.\r\n\r\nLet's drag that code into - a function so we can use it in lots of ways...but first use it to solve this - puzzle again." - courseE_farmer_functions4b_instruction: "Use your new function to solve this - puzzle." - courseE_farmer_functions5_instruction: "How can you change your program to - get this function to work for each of these paths?" - courseE_farmer_functions5a_instruction: "How can you change your program to - get this function to work for each of these paths?" - courseE_farmer_functions5b_instruction: "The crops are now growing in clusters. Add - some new `while` loops to your function to make sure you get all of the produce." - courseE_farmer_functions5c_instruction: "Your function will come in handy here." - courseE_farmer_functions6_instruction: "*\"Lettuce try something new!\"*\r\n\r\nHere's - some code to collect all of the lettuce. Move it into a function so we can - use it later." - courseE_farmer_functions6b_instruction: "Pick all of the produce." - courseE_farmer_functions6c_instruction: "What do you need to add this program - to collect all of the produce?" - courseE_farmer_functions7_instruction: "Use your functions to solve this puzzle." - courseE_farmer_functions7b_instruction: "Make a second function that lets the - farmer get all of the produce down a path, then brings her back to where she - began." - courseE_farmer_functions8_instruction: "**Challenge:** Solve this puzzle with - as few blocks as possible." - courseE_farmer_functions8b_instruction: "**Challenge:** Get the farmer to the - pumpkin and collect all of the lettuce and corn along the way. " - courseE_farmer_functions9_instruction: "Use conditionals to simplify your program." - courseE_maze_ramp1_instruction: "For this puzzle, drag all of the blocks together - and click \"Run\" to watch it go!" - courseE_maze_ramp2_instruction: "Drag an extra `move forward` block out of - the toolbox to finish your code." - courseE_maze_ramp3_instruction: "There is one extra block that is going to - cause the bird to crash. Throw it away by dragging it back to the toolbox." - courseE_maze_ramp4_instruction: "Avoid TNT or feathers will fly!" - courseE_maze_ramp5_instruction: "Avoid the TNT." - courseE_maze_ramp6_instruction: "\"Keep calm and help me find the bad pig. - Otherwise I might get angry!\"" - courseE_maze_ramp7_instruction: "**Challenge:** Get the bird to the pig!" - courseE_playLab_exampleProject2_instruction: "Here's all of your code to choose - a card - try adding some other fun features!" - courseE_playLab_scaffold1_instruction: "Choose a background and map, and pick - an actor to be your game's hero." - courseE_playLab_scaffold2_instruction: "Use event handlers and actions to make - your hero move.\r\n" - courseE_playLab_scaffold3_instruction: "Add two or more additional actors to - your game and make them move." - courseE_playLab_scaffold4_instruction: "Find some interesting ways to change - the score in your game." - courseE_playLab_scaffold5_instruction: "Now spend some time making sure the - game works the way you want. Try including a way to win or lose your game." - courseE_playLab_scaffold6_instruction: "You've finished! Now you can play - your game or share it with your friends and classmates!" - courseE_video_createFunctions_instruction: "We don't have a video for creating - functions, yet. This is a placeholder." - courseF_artist_for1_instruction: "Experiment with the `for` loop and play with - the `counter` variable." - courseF_artist_for10_instruction: "Free Play: Try using the `counter` variable - with other drawing elements to make magical images like this one." - courseF_artist_for2_instruction: "Create this stack of triangles that goes - from 50 pixel to 100 pixel sides." - courseF_artist_for3_instruction: "These triangles go from 20 pixel sides to - 200 pixel sides, and each triangle is 20 pixels larger than the last. " - courseF_artist_for4_instruction: "These squares start at 15 pixels long. The - largest is 300 pixels long, and each square is 15 pixels larger than the last. - " - courseF_artist_for5_instruction: "Just one little change to the code from the - last image can create this drawing. Can you figure out what that change is?" - courseF_artist_for6_instruction: "Try using some of the code from the last - level, but turning 89 degrees to create this twisted square spiral." - courseF_artist_for7_instruction: "Make three small changes to the code from - the last level to get this!" - courseF_artist_for8_instruction: "Take the angle down to 72 degrees to get - a spiraled pentagon." - courseF_artist_for9_instruction: "Use the counter inside the `set alpha` block - to get this faded center." - courseF_artist_fwp1_instruction: "Edit the function 'draw a square' to find - bugs." - courseF_artist_fwp2_instruction: "Edit the function to accept a parameter called - `length`." - courseF_artist_fwp2_predict1_instruction: "Edit the function to accept a parameter - called `length`." - courseF_artist_fwp3_instruction: "Create a function called 'draw a square' - and use it to outline these four boxes using parameters." - courseF_artist_fwp4_instruction: "Edit this function to add a parameter for - the number of sides in your polygon." - courseF_artist_fwp5_instruction: "Use the function from the last puzzle to - draw this series of shapes. " - courseF_artist_fwp6_instruction: "Challenge: Edit `draw a spiral edge` to use - `length` and `sides` parameters, then recreate these shapes." - courseF_artist_fwp7_instruction: "Finish off the `draw a spiral edge` function - to also ask for a minimum length for the center of the spiral." - courseF_artist_fwp8_instruction: "Can you figure out how to make this drawing - using the function that you just created?" - courseF_artist_fwp9_instruction: "Freeplay: Draw something awesome! Play with - the pen width to see how different your drawings look!" - courseF_artist_variables1_instruction: "Let's draw an equilateral triangle - that is exactly 50 pixels long on each side." - courseF_artist_variables10_instruction: "Here's your code from the last puzzle. Try - editing the variable in other ways. " - courseF_artist_variables2_instruction: "Now draw three of those triangles right - next to each other. " - courseF_artist_variables3_instruction: "Move the length of 50 into a variable - so we can use it in the next few puzzles." - courseF_artist_variables4_instruction: "Now, use the `length` variable to have - the artist jump forward and down by `length` pixels between triangles." - courseF_artist_variables5_instruction: "Add another set of loops at the end - of your code to add three more triangles. This time, move forward and up!" - courseF_artist_variables6_instruction: "Now make the triangles to be 60 pixels - wide, with 60 pixel jumps. " - courseF_artist_variables6a_instruction: "Build this design where the squares - have 80 pixel sides and the artist jumps 80 pixels over and down between each - one." - courseF_artist_variables7_instruction: "Draw a triangle with 150 pixels sides. - " - courseF_artist_variables8_instruction: "Rebuild the triangle code from the - last puzzle, but this time use the `set length to` block to reset the `length` - variable to `length`+10 at the end of each loop iteration." - courseF_artist_variables9_instruction: "See what happens when you repeat the - code from the last puzzle 30 times instead of only 3! Feel free to make your - lines any color or pattern for some extra zest." - courseF_artist_variables_10_instruction: "Here's your code from the last puzzle. Try - editing the variable in other ways. " - courseF_artist_variables_2_instruction: "Now use another loop to draw three - of those triangles right next to each other. \r\nYou can nest the code from - your last puzzle inside.\r\n" - courseF_artist_variables_5_instruction: "Add another set of loops at the end - of your code to add three more triangles. This time, move forward and up!" - courseF_artist_variables_6_instruction: "OOPS! We actually need the triangles - to be 60 pixels wide, with 60 pixel jumps. \r\nAren't you glad you're using - a variable?" - courseF_artist_variables_6a_instruction: "Build this design where the squares - have 80 pixel sides and the artist jumps 80 pixels over and down between each - one." - courseF_artist_variables_9_instruction: "See what happens when you repeat the - code from the last puzzle 30 times instead of only 3!\r\n\r\nFeel free to - make your lines any color or pattern for some extra zest." - courseF_artist_variables_FP_instruction: "**Freeplay:** Take what you've learned - and make your own drawing. \r\n\r\nHow can you use variables with squares, - pentagons, or hexagons?" - courseF_artist_variablesFP_instruction: "**Freeplay:** Take what you've learned - and make your own drawing. " - courseF_bee_for1_instruction: "Collect the nectar from each flower using the - fewest blocks possible." - courseF_bee_for10_instruction: "**Challenge:** Take what you've learned about - `for` loops and try to solve this problem. " - courseF_bee_for11_instruction: "What should your increment be to collect 15, - then 12, then 9, 6, 3 nectar?" - courseF_bee_for2_instruction: "Write the code to help the bee collect all of - the nectar.\r\n" - courseF_bee_for3_instruction: "Try this puzzle using the `for` loop and the - `counter` variable to see how much shorter your code becomes." - courseF_bee_for4_instruction: "Help the bee collect all of the nectar." - courseF_bee_for5_instruction: "Use the `counter` variable twice to solve this - puzzle." - courseF_bee_for6_instruction: "Try gathering this nectar by counting down from - 5 to 1 by 1." - courseF_bee_for7_instruction: "Try collecting these flowers using an increment - of 2." - courseF_bee_for8_instruction: "You've got this! What should your increment - be to collect 3, 6, 9, 12, 15 nectar?" - courseF_bee_for9_instruction: "Use the `counter` variable to navigate this - garden with the fewest number of blocks possible." - courseF_bee_fwp2_instruction: "Pull this code into a function, then call the - function to check this row for nectar." - courseF_bee_fwp3_instruction: "Let's see if the function makes collecting - these three rows of nectar any easier." - courseF_bee_fwp4_instruction: "Add a `length` parameter to the function so - that it will still work when the row is a different length." - courseF_bee_fwp5_instruction: "Use this function to collect the nectar." - courseF_bee_fwp6_instruction: "Build a short and sweet solution to this puzzle." - courseF_bee_fwp7_instruction: "**Challenge:** Modify your function to make - honey as well." - courseF_bee_fwp8_instruction: "Use your new function to solve this spiral." - courseF_bee_fwp9_instruction: "Use your new function to solve this puzzle." - courseF_bee_fwp9_predict1_instruction: "Use your new function to solve this - puzzle." - coursef_explore_CYOA_Witch_instruction: "You can do whatever you want in play - lab! Here's an example of choose your own adventure story in play lab." - coursef_explore_playlab2_instruction: "You can do whatever you want in play - lab! Here's an example of story in play lab." - coursef_explore_playlab_cat_game_instruction: "You can do whatever you want - in play lab! Here's an example of game you can make." - courseF_playlab_variables0_instruction: "This is Pirate Pegleg. He's awfully - hard to understand these days!" - courseF_playlab_variables1_instruction: "This is Pirate Pegleg. He's awfully - hard to understand these days!" - courseF_playlab_variables1a_instruction: "Variables can be used to store text - that you want to use later. Have Kiki, the soccer player, scream \"Goal!\" - by assigning that text to the `shout` variable." - courseF_playlab_variables2_instruction: "Now, decode Pirate Pegleg's speech - by changing the value of the variables in just two places! \r\n" - courseF_playlab_variables2a_instruction: "Now, decode Pirate Pegleg's speech - by changing the value of the variables in just two places! \r\n" - courseF_playlab_variables2b_instruction: "Insert the variable `color` into - the middle of a sentence by putting it into the empty slot in the `join` block." - courseF_playlab_variables3_instruction: "The `ask` block will automatically - store whatever the user answers into the variable of your choice." - courseF_playlab_variables3b_instruction: "Help Kiki have a conversation with - Brian by using the variable `A1` in all of the places where age `12` should - be used. " - courseF_playlab_variables4_instruction: "Can you find the correct variable - in the toolbox to fill in the slot?" - courseF_playlab_variables4b_instruction: "Put the variables in the correct - places to create this conversation." - courseF_playlab_variables5_instruction: "Can you find the correct variable - in the toolbox to fill in the slot?" - courseF_playlab_variables5b_instruction: "Put all of the variables in the correct - place so that Pegleg's story makes sense." - courseF_playlab_variables6b_instruction: "We have provided some starter questions - and variables for you. Join them together and put them in the title screen - to make a fun story." - courseF_playlab_variables7b_instruction: "Create some questions and weave the - answers together into your very own story." - courseF_playlab_variables8b_instruction: "Use what you've learned to create - an improv scene between the actors." - Crack a Caesar Cipher_instruction: "Instructions" - Crack Random Substitution_instruction: "Instructions" - CSD Hackathon Pt 1_instruction: "(Click to see full instructions)" - CSD Hackathon Pt 2_instruction: "(Click to see full instructions)" - CSD Hackathon Week 1_instruction: "(Click to see full instructions)" - CSD Hackathon Week 2_instruction: "(Click to see full instructions)" - CSD U3 Background Discuss_instruction: "Here's a program that looks pretty - similar to what you've been writing, but may behave quite differently. You'll - want to stop and discuss with the class before moving on." - CSD U3 Background Experiment_instruction: "Here's a program that looks pretty - similar to what you've been writing, but may behave quite differently. You'll - want to stop and discuss with the class before moving on." - CSD U3 Boolean Modify_instruction: "Modify the code so that all of the console.log - commands print true" - CSD U3 Boolean Predict_instruction: "What do you think this code will do when - it is run? Predict what each console.log() command will print, then run the - program to check your predictions." - CSD U3 Draw Loop Discuss_instruction: "Here's a program that looks pretty - similar to what you've been writing, but may behave quite differently. You'll - want to stop and discuss with the class before moving on." - CSD U3 Draw Loop Experiment_instruction: "Try using some of the other shape - functions you've learned in the draw loop. What happens when you use randomNumber() - to generate some of the inputs?You'll want to stop and discuss with the class - before moving on." - CSD U3 Expressions calculator_instruction: "Add the numbers 1 through 10. Multiply - the numbers 1 through 10. Check your answers with a neighbor." - CSD U3 Frame Rate_instruction: "Slow down Gamelab Gary's animation with frameRate()" - CSD U3 Keypress Boolean_instruction: "Modify the code so that all of the console.log - commands print true" - CSD U3 Keypress Watchers_instruction: "Modify the code so that all of the console.log - commands print true" - CSD U3 Random Animation_instruction: "Use randomNumber() to animate Gary's - mouth." - CSD U3 Random Choice_instruction: "Use the randomNumber() block to generate - either 0 or 1" - CSD U3 Random Color_instruction: "Could you use randomNumber() to pick random - colors as well? Try setting one or more of the channels in the rgb block with - a random number. What should the maximum value be?" - CSD U3 Random Intro_instruction: "What do you think this code will do when - it is run? Make a prediction, then run this code 5 - 10 times, recording the - output each time. Share your results with your neighbor." - CSD U3 Random Min Max_instruction: "Using console.log() write a program that - randomly returns a number in a range you define." - CSD U3 Random Width Height_instruction: "Pick a shape block and use calls to - randomNumber() in place of one or more of the parameters. Maker sure you run - it a few times so you can see the effect of randomization." - CSD U3 Simple Drawing - Animation 2_instruction: "Use randomNumber() on the - x position and width of your cloud ellipses to introduce a bit of animation." - CSD U3 Simple Drawing - Animation_instruction: "Use randomNumber() on the x - position and width of your cloud ellipses to introduce a bit of animation." - CSD U3 Simple Drawing - Background_instruction: "Put all of your code into - a draw() loop and then add set the background to blue with the background() - block." - CSD U3 Simple Drawing - Personal Animation_instruction: "DO This" - CSD U3 Sprites intro sprites_instruction: "Do This" - CSD U3 Variable Arithmetic pt2_instruction: "Predict: What two numbers will - be displayed in the console?" - CSD U3 Variable Arithmetic_instruction: "Change the value \"size\" initialized - to make a larger square." - CSD U3 Variable Incrementation pt2_instruction: "Predict: What two numbers - will be displayed in the console?" - CSD U3 Variable Incrementation_instruction: "Predict: What two numbers will - be displayed in the console?" - CSD U3 Variables CHALLENGE gamelab gary_instruction: "Use variables to animate - Game Lab Gary" - CSD U3 Variables create and assign_instruction: "Create and assign size in - a single line of code." - CSD U3 Variables draw loop newVars_instruction: "Extend this project to create - your own random art visualization with variables." - CSD U3 Variables draw loop rgb_instruction: "Assign the variables x1 and y1 - random values inside the draw loop and use them to control where the square - is drawn." - CSD U3 Variables draw loop xy_instruction: "Assign the variables x1 and y1 - random values inside the draw loop and use them to control where the square - is drawn." - CSD U3 Variables eyeBrows_instruction: "Predict what will happen when you move - the assignment of eyeSize inside the draw loop. Then try it out" - CSD U3 Variables Initialize_instruction: "Predict: What will get displayed - in the console?" - CSD U3 Variables Intro_instruction: "Create your own variable " - CSD U3 Variables make a big square_instruction: "Change the value of size multiple - times. How does it change your drawing?" - CSD U3 Variables make a square_instruction: "Change the value of size multiple - times. How does it change your drawing?" - CSD U3 Variables multiple assignments_instruction: "Change the value of petalSize - multiple times. How does it change your drawing?" - CSD U3 Variables naming rules_instruction: "Change the value of petalSize multiple - times. How does it change your drawing?" - CSD U3 Variables random assignment_instruction: "Change the value of petalSize - multiple times. How does it change your drawing?" - CSD U3 Variables random draw loop_instruction: "Predict what will happen when - you move the assignment of eyeSize inside the draw loop. Then try it out" - CSD U3 Variables random drawing exemplar_instruction: "Check out this example - randomized drawing." - CSD U3 Variables Random_instruction: "Predict: What will get displayed in the - console?" - CSD U3 Variables Reassign pt2_instruction: "Create and assign a new variable - in a single line." - CSD U3 Variables Reassign_instruction: "Predict: What will get displayed in - the console?" - CSD U3 Variables Square Random Loop_instruction: "Test your predictions from - the last level." - CSD U3 Variables Square Random_instruction: "Change the value \"size\" initialized - to make a larger square." - CSD U3 Variables Square_instruction: "Change the value \"size\" initialized - to make a larger square." - CSD U3 Variables TEMPLATE square_instruction: "Change the value of petalSize - multiple times. How does it change your drawing?" - CSD U3 Variables use value rect_instruction: "Predict: What will get displayed - in the console?" - CSD U3 Variables write_instruction: "Use the write block to display the value - of size" - CSD U3 Variables2 expressions in commands_instruction: "Use expressions inside - a drawing command" - CSD U3 Variables2 expressions in variables_instruction: "Assign the value of - each expression to a variable and console.log that variable." - CSD U3 Variables2 expressions_instruction: "Use console.log to display the - results of each expression. Then create your own." - CSD U4 - Events Template_instruction: "Add a large red button to your screen - using Design Mode. (Click for full instructions.)" - CSDU4 - AppLab - 1_instruction: "Read the documentation for penColor() and - penWidth() before using them to draw the blue square." - CSDU4 - AppLab - 2_instruction: "Write a program that acts as a simple calculator. - (click to see full instructions)" - CSDU4 - AppLab - 3_instruction: "Use console to check the ending value of num. - (Click to see full instructions)" - CSDU4 - AppLab - 4_instruction: " Use the Debug Commands to make a list of - all the values rolled before a 6. (Click to see full instructions)" - CSDU4 - Design Mode - 1_instruction: "Add a button that moves the turtle when - clicked. (Click to see full instructions)" - CSDU4 - Design Mode - 10_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - CSDU4 - Design Mode - 11_instruction: "Experiment with different event types - and select the one that you think is best. (Click to see full instructions)" - CSDU4 - Design Mode - 12_instruction: "Use the textLabel command to replace - the button in your program with a text label. (Click to see full instructions)" - CSDU4 - Design Mode - 16_instruction: "Add an event handler for the button - using the \"Insert and show\" link in the Design Mode Events tab. (Click to - see full instructions)." - CSDU4 - Design Mode - 17_instruction: "Update the ID names and `console.log` - messages to match the correct button. (Click to see full instructions.)" - CSDU4 - Design Mode - 18_instruction: "Fix the layout of the bullseye game. - (Click to see full instructions)" - CSDU4 - Design Mode - 2_instruction: "Run a program with two buttons that have - the same id to see the warning message in the console. Change the ids to make - the program run without getting a warning message." - CSDU4 - Design Mode - 24_instruction: "Add an Text Input box for the name and - age. (Click to see full instructions)" - CSDU4 - Design Mode - 25_instruction: "Add an event handler to the Submit button - so that when the button is clicked it will display the name entered in the - text box to the console. Use getText to get the value out of the text box. - (Click to see full instructions)" - CSDU4 - Design Mode - 26_instruction: "Save the age and name of the user in - variables (Click to see full instructions)" - CSDU4 - Design Mode - 27_instruction: "Output a message to the 'textArea' - (Click to see full instructions)" - CSDU4 - Design Mode - 28_instruction: "Write a greeting to the user when they - hit 'enter' in the text input, using the 'change' event. (Click to see - full instructions)" - CSDU4 - Design Mode - 29_instruction: "Add a dropdown for their guess instead - of promptNum (Click to see full instructions)" - CSDU4 - Design Mode - 30_instruction: "Show different die images for the random - number generated. (Click to see full instructions)" - CSDU4 - Design Mode - 31_instruction: "Set up an event handler to respond to - keypress events, and display event.key in the console. Hit keys on the keyboard - to see what happens. (Click to see full instructions)" - CSDU4 - Design Mode - 32_instruction: "Try out the keyup and keydown events - to see how they are different from keypress. (Click to see full instructions)" - CSDU4 - Design Mode - 33_instruction: "Change the code so the sound will only - play when the up arrow is pressed. (Click to see full instructions)" - CSDU4 - Design Mode - 4_instruction: "Improve the button by choosing a descriptive - and meaningful ID. (Click to see full instructions)" - CSDU4 - Design Mode - 5_instruction: "Debug the program by verifying your IDs - are being referenced properly. (Click to see full instructions)" - CSDU4 - Design Mode - 6_instruction: "Debug the program by properly ordering - your button commands and event handlers. (Click to see full instructions)" - CSDU4 - Design Mode - 7_instruction: "Debug the program by fixing the logical - error within the program. (Click to see full instructions)" - CSDU4 - Design Mode - 8_instruction: "Move the button to the middle of the - screen. (Click to see full instructions)" - CSDU4 nameAgeTemplate_instruction: "Add an Text Input box for the name and - age. (Click to see full instructions)" - CSDU6 - Arrays - expressionsAsIndexes_instruction: "Write a program that displays - a randomly chosen color from the array. (Click to see full instructions)" - CSDU6 - Arrays - indexPractice_instruction: "Write the contents of the array - to the screen in numerical order. (Click to see full instructions)" - CSDU6 - Arrays - length_instruction: "Use list.length to determine the length - of each array. (Click to see full instructions)" - CSDU6 - Arrays - lengthMinus1_instruction: "Use list.length - 1 to log the - last item in the array to the console. (Click to see full instructions)" - CSDU6 - for loop - color buttons with for_instruction: "Write the contents - of the array to the screen in numerical order. (Click to see full instructions)" - CSDU6 - for loop - color buttons_instruction: "Write the contents of the array - to the screen in numerical order. (Click to see full instructions)" - CSDU6 - for loop - why for_instruction: "Write the contents of the array to - the screen in numerical order. (Click to see full instructions)" - CSP Data Unit - Counting Multiple Things_instruction: "If you can count one - thing you can count multiple things\r\n\r\nFind out how many people like something - other than dogs and cats\r\n\r\nCount dogs\r\nCount cats\r\nCount total\r\nDo - the math\r\n\r\nblank/ blank toal\r\n\r\nCan also use this to find percents - from this\r\n\r\nx% are dog lovers" - CSP Data Unit -Counting Records - Easy Way_instruction: "ReadRecords with specific - criteria \r\nfind the length of an array\r\n" - CSP Data Unit -Counting Records - Hard Way_instruction: "\r\n1. ReadRecords - for all records\r\n2. Way to loop through and count\r\n" - CSP U4 - JSON Object Intro - Bad Way_instruction: "Trigger both the keyboard - and mouse event and examine the event objects displayed in the console. Why - might an object be the best way to store this information? (Click to see full - instructions)" - CSP U4 - JSON Object Intro - Good Way_instruction: "Create an object with at - least 5 values including at least one string and one number. (Click to see - full instructions) " - CSP U4 - Objects - createObject_instruction: "Create an object with at least - 5 values including at least one string and one number. (Click to see full - instructions) " - CSPU5 Add a 2nd Screen_instruction: "Make a 2 screen app with a black screen - and a white screen. (Click to see detailed instructions)" - CSPU5 Add full screen image to bg of chaser game_instruction: "Recreate the - game from the \"Chaser Game\" with a Welcome Screen and Game Over Screen. - (Click to see full instructions.)" - CSPU5 Add game over screen_instruction: "Recreate the game from the \"Chaser - Game\" with a Welcome Screen and Game Over Screen. (Click to see full instructions.)" - CSPU5 Add onEvent from Design Mode_instruction: "Add an event handler for the - button using the \"Insert and show\" link in the Design Mode Events tab. (Click - to see full instructions)." - CSPU5 Add Screens to Chaser Game_instruction: "Recreate the game from the \"Chaser - Game\" with a Welcome Screen and Game Over Screen. (Click to see full instructions.)" - CSPU5 Add welcome screen to chaser game_instruction: "Recreate the game from - the \"Chaser Game\" with a Welcome Screen and Game Over Screen. (Click to - see full instructions.)" - CSPU5 Adding Screens Template_instruction: "Make a 2 screen app with a black - screen and a white screen. (Click to see detailed instructions)" - CSPU5 Debugging Overlapping Objects and Screen Events_instruction: "Recreate - the \"Chaser Game\" from the last lesson using Design Mode. (Click to see - full instructions.)" - CSPU5 First Time Console.log_instruction: "Add a 3 console.log messages and - test them out. (Click to see full instructions.)" - CSPU5 Layering and Deleting in Design Mode_instruction: "Fix the layout of - the bullseye game. (Click to see full instructions)" - CSPU5 Project - Multi Screen App_instruction: "Create your multi-screen app. - (Click to see full instructions.)" - CSPU5 Use Console.log to update IDs_instruction: "Update the ID names and `console.log` - messages to match the correct button. (Click to see full instructions.)" - CSPU5 Use setScreen for first time_instruction: "Make a 2 screen app which - can switch back and forth between a black screen and a white screen using - buttons. (Click to see detailed instructions.)" - CSPU5_addDescriptiveIDsToTurtleDriver_instruction: "Improve the button by choosing - a descriptive and meaningful ID. (Click to see full instructions)" - CSPU5_AddImage_andMakeChaserGame_instruction: "Introducing the setPosition - command! Replace the moveTo in the button-click event handler to use setPosition - to move the button itself to a random location when it's clicked." - CSPU5_AddImageToChaserGame_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - CSPU5_AddLabelToChaserGame_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - CSPU5_basic if - check driving age_instruction: "Use console.log to print out - the different boolean expressions below to see what information they return. - (Click to see full instructions)" - CSPU5_basic if - DIY secret number_instruction: "Use console.log to print out - the different boolean expressions below to see what information they return. - (Click to see full instructions)" - CSPU5_basic if - voting examle_instruction: "Use console.log to print out the - different boolean expressions below to see what information they return. (Click - to see full instructions)" - CSPU5_basic if-else - driving age_instruction: "Use console.log to print out - the different boolean expressions below to see what information they return. - (Click to see full instructions)" - CSPU5_clickerGame_v1_template_instruction: "Create your own \"Chaser App\". - (Click to see full instructions)" - CSPU5_Debugging predict unexpected behavior - two onEvents to one ID_instruction: "Predict - what will happen. Once you've made a prediction, run the code to see what - happens. (Click to see full instructions)" - CSPU5_FinalizeChaserGame_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - CSPU5_moveTurtleOnButtonClick_instruction: "Add an event handler to the button - to move the turtle forward. (Click to see full instructions)" - CSPU5_playWithEventTypes_instruction: "Debug the program by fixing the logical - error within the program. (Click to see full instructions)" - CSPU5_Project - Multi Screen App_instruction: "Create your multi-screen app. - (Click to see full instructions.)" - CSPU5_setPosition to fixed location_instruction: "Introducing the setPosition - command! Replace the moveTo in the button-click event handler to use setPosition - to move the button itself to a random location when it's clicked." - CSPU5_turtleDriver_add2ndButton_instruction: "Debug the program by verifying - your IDs are being referenced properly. (Click to see full instructions)" - CSPU5_U3 - Arrays - appendItem_instruction: "Create an array of odd numbers - 1-11 by using appendItem. (Click to see full instructions)" - CSPU5_U3 - Arrays - assignment_instruction: "Use indexes to change the values - in this array from 1 to 0. (Click to see full instructions)" - CSPU5_U3 - Arrays - assignment2_instruction: "Calculate the sum of three values - stored in an array. (Click to see full instructions)" - CSPU5_U3 - Arrays - assignment3_instruction: "Increase the value of each value - in the randomly generated array by 1. (Click to see full instructions)" - CSPU5_U3 - Arrays - createFirstArray_instruction: "Create an array of the even - numbers from 0 to 10 and display its contents with console.log. (Click to - see full instructions)" - CSPU5_U3 - Arrays - Demo App_instruction: "Use the \"My Favorite Things\" app. - How might this app be making use of an array? (Click to see full instructions)" - CSPU5_U3 - Arrays - expressionsAsIndexes_instruction: "Write a program that - displays a randomly chosen color from the array. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings addItem_instruction: "Write code that allows - a user to add their own favorite things to the list. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings bounds_instruction: "Add if statements to your - event handlers that prevent the global index from going out of bounds. (Click - to see full instructions)" - CSPU5_U3 - Arrays - favThings Counting Variable_instruction: "Create a global - variable for the current index and use it to display the first item in the - array. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings createArray_instruction: "Create an array of - words describing your favorite things. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings firstOutput_instruction: "Use setText to display - the first item in the array. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings giveIDs_instruction: "Give your UI elements descriptive - and meaningful IDs. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings keepPlaying_instruction: "Make any other improvements - you want! (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings Next_instruction: "Write code that allows the - user to move forward through your list by clicking the \"Next\" button. (Click - to see full instructions)" - CSPU5_U3 - Arrays - favThings Prev_instruction: "Write code that allows the - user to move backward through your list by clicking the \"Last\" button. (Click - to see full instructions)" - CSPU5_U3 - Arrays - indexPractice_instruction: "Write the contents of the array - to the screen in numerical order. (Click to see full instructions)" - CSPU5_U3 - Arrays - insertingItems_instruction: "Insert items into an array - to form a complete sentence. (Click to see full instructions)" - CSPU5_U3 - Arrays - insertionErrors_instruction: "Run each command that references - indexes that are out of bounds and observe the results. (Click to see full - instructions)" - CSPU5_U3 - Arrays - introIndex_instruction: "Display the first and last element - in the array. Display the number 5 from the array. (Click to see full instructions)" - CSPU5_U3 - Arrays - length_instruction: "Use list.length to determine the length - of each array. (Click to see full instructions)" - CSPU5_U3 - Arrays - lengthMinus1_instruction: "Use list.length - 1 to log the - last item in the array to the console. (Click to see full instructions)" - CSPU5_U3 - Arrays - remove_instruction: "Remove items from an array to form - a complete sentence. (Click to see full instructions)" - CSPU5_U3 - Arrays - stringsInArrays_instruction: "Write a sentence word by - word by adding strings to an array. (Click to see full instructions)" - CSPU5_U3 - Canvas - 200dots_instruction: "Add a loop to your program that draws - 200 dots on your canvas. (Click to see full instructions)" - CSPU5_U3 - Canvas - appendToArray_instruction: "Create an array to store each - event parameter. Append each event parameter to this array within your event - handler. (Click to see full instructions)" - CSPU5_U3 - Canvas - changeToMouseMove_instruction: "Change your program so - that dots are drawn at the location of the mouse as the user moves the mouse - on the canvas. (Click to see full instructions)" - CSPU5_U3 - Canvas - clickToAdd_instruction: "Change your program so that dots - are added to the canvas when the user clicks on it. (Click to see full instructions)" - CSPU5_U3 - Canvas - delete_instruction: "Create a button that deletes the drawing - by clearing the canvas and removing all stored values. (Click to see full - instructions)" - CSPU5_U3 - Canvas - draw at click point_instruction: "Change your program so - that dots are drawn at the location of the mouse click. (Click to see full - instructions)" - CSPU5_U3 - Canvas - freePlay_instruction: "Extend the functionality of one - of the effects, or create an entirely new one of your own. (Click to see full - instructions)" - CSPU5_U3 - Canvas - introCanvas_instruction: "Add a canvas to your app and - set it to be the active canvas. Then add a large dot to your canvas. (Click - to see full instructions)" - CSPU5_U3 - Canvas - movementFunction fix Orig_instruction: "Modify the \"Original\" - button event handler so that it takes the movement of the mouse into account. - (Click to see full instructions)" - CSPU5_U3 - Canvas - movementFunction_instruction: "Write a function that takes - the movement of the mouse as input and generates a line width as output. (Click - to see full instructions)" - CSPU5_U3 - Canvas - One Dot sprayPaint_instruction: "Write code that redraws - your image using a dot whose x and y locations use offsetX and offsetY with - a small random value added. (Click to see full instructions)" - CSPU5_U3 - Canvas - redrawOriginal_instruction: "Write a function that processes - your array, redrawing the dots as they originally appeared. (Click to see - full instructions)" - CSPU5_U3 - Canvas - redrawRandom_instruction: "Set up a button and event handler - for the random function. (Click to see full instructions)" - CSPU5_U3 - Canvas - redrawRandom2_instruction: "Write a function that processes - your array, redrawing every dot with a random size. (Click to see full instructions)" - CSPU5_U3 - Canvas - shiftKey_instruction: "Add an if statement to your event - handler so dots are only drawn when the shift key is pressed. (Click to see - full instructions)" - CSPU5_U3 - Canvas - sketch_instruction: "Write code that redraws your image - using a sketch effect. (Click to see full instructions)" - CSPU5_U3 - Canvas - sprayPaint_instruction: "Update the spray paint code so - that it redraws your image using multiple random dots instead of using a nested - for loop. (Click to see full instructions)" - CSPU5_U3 - Canvas - transparentDots_instruction: "Change the colors of your - dots so they have a fully transparent stroke and partially transparent fill. - (Click to see full instructions)" - CSPU5_U3 - Canvas - usingOffsetXY_instruction: "Add a console.log command inside - the function of your event handler. Use it to display the event parameter. - Click on the screen to see the contents of the event parameter (Click to see - full instructions)" - CSPU5_U3 - Conditional Basics - 6_instruction: "Add a setText after the if - statement to \"Nope. Guess again.\" (Click to see full instructions)" - CSPU5_U3 - Conditionals - Combine AND OR and NOT_instruction: "Write an if - statement that uses AND and OR to display \"Time to go to school!\" if it's - not the weekend and the user is under 18. (Click to see full instructions.)" - CSPU5_U3 - Conditionals - Combine AND OR Simple_instruction: "Write an if statement - that uses AND and OR to display \"Sleep in!\" if it's the weekend and the - user is a teenager. (Click to see full instructions." - CSPU5_U3 - Conditionals - Simple AND_instruction: "Write an if statement that - uses AND to display \"You are a teenager.\" if the user enters an age between - 13 and 19. (Click to see full instructions)" - CSPU5_U3 - Conditionals - Simple OR_instruction: "Write an if statement that - uses OR to display \"It's the weekend!\" if the user enters a weekend day - at the prompt. (Click to see full instructions)" - CSPU5_U3 - Design Mode - Console Log_instruction: "Update the ID names and - `console.log` messages to match the correct button. (Click to see full instructions.)" - CSPU5_U3 - Design Mode - Layers and Delete_instruction: "Fix the layout of - the bullseye game. (Click to see full instructions)" - CSPU5_U3 - Design Mode - Multi Screens 2_instruction: "Make a 2 screen app - which can switch back and forth between a black screen and a white screen - using buttons. (Click to see detailed instructions.)" - CSPU5_U3 - Design Mode - Multi Screens_instruction: "Make a 2 screen app with - a black screen and a white screen. (Click to see detailed instructions)" - CSPU5_U3 - Design Mode - WTF Console Log_instruction: "Add a 3 console.log - messages and test them out. (Click to see full instructions.)" - CSPU5_U3 - Design Mode -Recreate Beyond Buttons_instruction: "Recreate the - game from the \"Chaser Game\" with a Welcome Screen and Game Over Screen. - (Click to see full instructions.)" - CSPU5_U3 - Design Mode 1_instruction: "Add a large red button to your screen - using Design Mode. (Click for full instructions.)" - CSPU5_U3 - Dice - Dropdown and Score_instruction: "Add guess and score to the - Dice Game (Click to see full instructions)" - CSPU5_U3 - Dice - Dropdown with Strings_instruction: "Add a dropdown for difficulty - level that prints the difficulty level in the console. (Click to see full - instructions)" - CSPU5_U3 - Dice - If_instruction: "Show different die images for the random - number generated. (Click to see full instructions)" - CSPU5_U3 - Dice - Nested_instruction: "Use nested if statements to make the - scoring different for the different game levels. (Click to see full instructions)" - CSPU5_U3 - High Low - Debug_instruction: "Debug the order of the conditionals - so that it will actually tell the user when their guess is close. (Click to - see full instructions)" - CSPU5_U3 - High Low - Dropdown_instruction: "Add a dropdown for their guess - instead of promptNum (Click to see full instructions)" - CSPU5_U3 - High Low - Else if_instruction: "Add an else-if statement in order - to tell the user if their guess is high or low instead of just wrong. (Click - to see full instructions)" - CSPU5_U3 - High Low - Else_instruction: "Add an else statement so that the - program will tell the user when they are right and when they are wrong. (Click - to see full instructions)\r\n" - CSPU5_U3 - High Low - If_instruction: "Add code to the if statement that indicates - the user guessed the secret number. (Click to see full instructions)" - CSPU5_U3 - Keys - Add Image URLs_instruction: "Add image URLs to your array. - Replace the text area with an image and setText with setImageURL. Then test - your app! (Click to see full instructions)" - CSPU5_U3 - Keys - Buttons and Keys_instruction: "Have the program respond the - same way for both clicking images on the screen and hitting the up and down - keys on the keyboard. (Click to see full instructions)" - CSPU5_U3 - Keys - Demo App_instruction: "Play with the image scroller. Press - the left and right arrows to progress through the images." - CSPU5_U3 - Keys - Final Image Scroller_instruction: "Update the image scroller - to respond to buttons and key presses. (Click to see full instructions)" - CSPU5_U3 - Keys - Functions_instruction: "Write doUpArrow and doDownArrow functions - and call the functions instead of duplicating the code. (Click to see full - instructions)" - CSPU5_U3 - Keys - Key Up and Down_instruction: "Try out the keyup and keydown - events to see how they are different from keypress. (Click to see full instructions)" - CSPU5_U3 - Keys - Multiple Keys_instruction: "Play a different sound when the - down arrow is pressed. (Click to see full instructions)" - CSPU5_U3 - Loops - Complex Condition_instruction: "Change the boolean expression - for the while loop so that it will stop when both dice are greater than or - equal to 5. (Click to see full instructions)" - CSPU5_U3 - Loops - 1_instruction: "Change the condition for the while loop - to check if the variable num is less than 90. (Click to see full instructions)" - CSPU5_U3 - Loops - 10_instruction: "Write a program that simulates the rolling - of two dice. Roll the dice repeatedly until the sum of the dice is either - 7 or 11." - CSPU5_U3 - Loops - 11_instruction: "Fix the condition so that it keeps rolling - the die as long as the value is not a 2 or a 3 instead of rolling infinitely. - (Click to see full instructions)" - CSPU5_U3 - Loops - 12_instruction: "Change the code so that it prints the string - \"Hi\" 5 times. (Click to see full instructions)" - CSPU5_U3 - Loops - 14_instruction: "Change the loop condition to prevent the - infinite loop and stop counting once the count is past 30. (Click to see full - instructions)" - CSPU5_U3 - Loops - 15_instruction: "Count the number of times the sum of the - dice is 12. (Click to see full instructions)" - CSPU5_U3 - Loops - 2_instruction: "Try creating an infinite loop using !=, - > and <. (Click to see full instructions)" - CSPU5_U3 - Loops - 3_instruction: "Change the if statement to a while loop - so the program will run until it rolls a 6. (Click to see full instructions)" - CSPU5_U3 - Loops - 4_instruction: " Use the Debug Commands to make a list of - all the values rolled before a 6. (Click to see full instructions)" - CSPU5_U3 - Loops - 5_instruction: "Add code inside the while loop which will - update the variable num so that the condition will eventually become false. - (Click to see full instructions)" - CSPU5_U3 - Loops - 6_instruction: "Fix the problem so the loop will run at - least once. Change the initial value of num to a dummy value such as -1. (Click - to see full instructions)" - CSPU5_U3 - Loops - 7_instruction: "Without adding any lines of code, reorder - the code so that it prints all the values of num. (Click to see full instructions)" - CSPU5_U3 - Loops - 8_instruction: "Debug which number is not getting printed - and add a write statement to display that value. (Click to see full instructions)" - CSPU5_U3 - Loops - 9_instruction: " Modify the condition so that it keeps rolling - as long as both are less than 3. (Click to see full instructions)" - CSPU5_U3 - Loops - minus = operator_instruction: "Update the code to use the - -= operator to count from 30 down to 0 by 3's. (Click to see full instructions)" - CSPU5_U3 - Loops - Minus Minus_instruction: "Change the code to count down - from 10 to 1. (Click to see full instructions)" - CSPU5_U3 - Loops - plus and minus = operator_instruction: "Update the code - to use the += operator. (Click to see full instructions)" - CSPU5_U3 - Loops - Plus Plus_instruction: "Change the code to use count++ instead - of count = count + 1. (Click to see full instructions)" - CSPU5_U3 - Loops - Typing in Console_instruction: "Use console to check the - ending value of num. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Add 5_instruction: "Add 5 to all the values in - an array (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Counting Times_instruction: "Count the number - of times 5 appears in an array. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Divid by 2_instruction: "Divide every value in - the array by 2. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Find Min_instruction: "Complete the findMinVal - function to find and display the smallest value in an array (Click to see - full instructions)" - CSPU5_U3 - Loops And Arrays - General Search Param_instruction: "Add a second - parameter to the search function for the value to search for. (Click to see - full instructions)" - CSPU5_U3 - Loops And Arrays - Intro For Loop_instruction: "Add a for loop with - a console.log inside and test out the 3 pieces of the for loop. (Click to - see full instructions)" - CSPU5_U3 - Loops And Arrays - Linear Search_instruction: "Visit every element - in the array and display \"true\" if the value is a 5, and \"false\" otherwise. - (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Loop Array If_instruction: "Use an if statement - to only display the values in the array that are greater than 5. (Click to - see full instructions)" - CSPU5_U3 - Loops And Arrays - Make it a Function - add list parameter_instruction: "Create - a function that takes a list parameter and prints if the list contains a 5. - (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Make it a Function_instruction: "Move the code - that searches the list for a 5 into a function called \"search\". (Click to - see full instructions)" - CSPU5_U3 - Loops And Arrays - Print Array_instruction: "Use a for loop to print - out all the values in an array. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Printing Single True_instruction: "Process the - array and display a single \"true\" if the array contains a 5 or a single - \"false\" if it does not. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Search with Boolean Var_instruction: "Make a - boolean variable to use as a flag to keep track of whether there is a 5 in - the array. (Click to see full instructions)" - CSPU5_U3 - Movie Bot - Multiple If Sequences_instruction: "Add another set - of if, else if, and else statements inside the question if statement to check - for keywords for movie ratings (G, PG, PG-13, and R). (Click to see full instructions)" - CSPU5_U3 - Movie Bot - Nested Motivation_instruction: "Add a separate set of - if statements to check for a \"?\" in the input. (Click to see full instructions)" - CSPU5_U3 - Movie Bot - toLowerCase_instruction: "Use the toLowerCase command - to change all user input into lowercase letters after they enter it. (Click - to see full instructions)" - CSPU5_U3 - Movie Bot - When Multiple If Statements_instruction: "Add an if - and else-if statement that checks for please and thank you. (Click to see - full instructions)" - CSPU5_U3 - Practice Create Performance Task_instruction: "Design and implement - your practice Create Performance Task. (Click to see full instructions)" - CSPU5_U3 - Return Values - constrainTurtle_instruction: "Use constrain in this - simple app to keep the turtle from driving off the screen. (Click to see - full instructions)" - CSPU5_U3 - Return Values - debuggingConstrain_instruction: "Correct the error - in constrain so that it returns the appropriate value. (Click to see full - instructions)" - CSPU5_U3 - Return Values - debuggingMaxVal_instruction: "Correct the error - in maxVal so that it correctly reports the maximum value. (Click to see full - instructions)" - CSPU5_U3 - Return Values - useMinVal_instruction: "Call minVal within the console.log - statement to calculate the minimum of two values. (Click to see full instructions)" - CSPU5_U3 - Return Values - wrapTurtle_instruction: "Write wrap in this simple - app to let the turtle \"wrap\" to the other side of the screen when it goes - off. (Click to see full instructions)" - CSPU5_U3 - Return Values - writeMaxVal_instruction: "Write the function maxVal - and then use it within the console.log statement to calculate the maximum - of two values. (Click to see full instructions)" - CSPU5_U3 - Simulation - 1_instruction: "Use a while loop to \"flip a coin 10 - times\" and write the values to the screen. (Click to see full instructions)" - CSPU5_U3 - Simulation - 2.1_instruction: "Change your looping condition so - the simulation runs until there are 5 heads flipped. (Click to see full instructions)" - CSPU5_U3 - Simulation - 2.5_instruction: "Run your simulation to get the full - 10,000 heads! How long did it take? (Click to see full instructions)" - CSPU5_U3 - Simulation - 2_instruction: "Keep track of how many heads (1's) - your program generates and print the results to the screen. (Click to see - full instructions)" - CSPU5_U3 - Simulation - 3_instruction: "Add functionality that counts how many - heads in a row are flipped. (Click to see full instructions)\r\n" - CSPU5_U3 - Simulation - 4_instruction: "Update your while loop's condition - so the the coin flips until there are three heads in a row. (Click to see - full instructions)" - CSPU5_U3 - Simulation - 5_instruction: "Change your while loop to run until - you get a streak of 12 heads. How many flips did it take? (Click to see full - instructions)" - CSPU5_U3 - Simulation - 6_instruction: "Keep adding to your simulation. What - do you want to explore next? (Click to see full instructions)" - CSPU5_U3 - User Input - Save getText To Variable_instruction: "Save the age - and name of the user in variables (Click to see full instructions)" - CSPU5_U3 - Variables - Set to Expression with Other Variables_instruction: "Write - an expression that calculates the player's total score and stores it in the - totalScore variable. The calculation is: the player's points times lives - divided by the total time. (click to see full instructions)" - CSPU5_U3 - Variables - Set to Expression_instruction: "Test out the new expressions. - (Click to see full instructions)" - CSPU5_U3 Digital Assistant Design_instruction: "Pick a topic for your Digital - Assistant and create the basic layout with a text input and text area. (Click - to show full instructions)" - CSPU5_U3 Digital Assistant Set Text_instruction: "Have your digital assistant - repeat back what the user types and include a canned response. (Click to see - full instructions)" - CSPU5_U3 Digital Assistant Target_instruction: "Try out a demo of the Digital - Assistant!" - CSPU5_U3 full clicker demo_instruction: "Clicker game - Try it out!" - CSPU5_U3- Variables - Create And Assign_instruction: "On one line add a variable - called \"lives\" and assign it the value 3. Print it to the console. (Click - to see full instructions)" - CSPU5_U3- Variables - Text Mode_instruction: "1. Switch to text mode and type - instructions; 2. drag blocks out into text mode; 3. experiment with code completion" - CSPU5_U3-Design Mode-ID and Event Handler_instruction: "Add an event handler - for the button using the \"Insert and show\" link in the Design Mode Events - tab. (Click to see full instructions)." - CSPU5_U3-Design Mode-Image_instruction: "Recreate the \"Chaser Game\" from - the last lesson using Design Mode. (Click to see full instructions.)" - CSPU5_U313 drag Two Buttons_instruction: "Run a program with two buttons that - have the same id to see the warning message in the console. Change the ids - to make the program run without getting a warning message." - CSPU5_U313 Two Buttons with Ids_instruction: "Predict what will happen. Once - you've made a prediction, run the code to see what happens. (Click to see - full instructions)" - CSPU5_U3L13 - Debug Id Problem_instruction: "Improve the button by choosing - a descriptive and meaningful ID. (Click to see full instructions)" - CSPU5_U3L13 - Debugging 1_instruction: "Debug the program by verifying your - IDs are being referenced properly. (Click to see full instructions)" - CSPU5_U3L13 - Debugging 2_instruction: "Debug the program by properly ordering - your button commands and event handlers. (Click to see full instructions)" - CSPU5_U3L13 - Debugging 3_instruction: "Debug the program by fixing the logical - error within the program. (Click to see full instructions)" - CSPU5_U3L13 - Debugging IDs case sensitive_instruction: "Debug the program - by verifying your IDs are being referenced properly. (Click to see full instructions)" - CSPU5_U3L13 - Project_instruction: "Create your multi-screen app. (Click to - see full instructions.)" - CSPU5_U3L13 - Turtle Driver Project_instruction: "Create a \"turtle driver\" - that includes buttons to move the turtle forward and turn it left and right. - (Click to see full instructions)" - CSPU5_U3L13 - Turtle move with button_instruction: "Add a button that moves - the turtle when clicked. (Click to see full instructions)" - CSPU5_U3L13 eventsDetails_instruction: "Add an event handler to the button - to move the turtle forward. (Click to see full instructions)" - CSPU5_U3L14 - Assigning Random Value_instruction: "Write a program that simulates - the rolling of two dice and reports their individual values as well as the - sum. (click to see full instructions)" - CSPU5_U3L14 - concatenate simple_instruction: "Modify the write statement on - line 3 to combine text and variables together to make the app display a single - line of text that shows the player's lives and score. (click to see full - instructions)" - CSPU5_U3L14 - Mini Calculator embed_instruction: "You will be prompted for - two numbers, one right after the other. See what happens. Enter different - numbers until you get the idea." - CSPU5_U3L14 - moving memory challenge1_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge2_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge3_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge4_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge5_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge6_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - User Input Division calculator_instruction: "Write a program - that acts as a simple calculator. (click to see full instructions)" - CSPU5_U3L14 - Variable ReAssignment pt2_instruction: "Trace the code and predict - what you think will be printed to the console. Then add a console.log statement - at the end of the program to see the last value of someNum to see if your - full prediction is correct. (click to see full Instructions)" - CSPU5_U3L15 - add code to make count down work_instruction: "Write code to - make the down arrow work as expected. (Click to see full instructions)" - CSPU5_U3L15 - Add reset button to UpDown app_instruction: "Add code so that - clicking the start over button will reset the game and send you back to the - main screen. (Click to see full instructions)" - CSPU5_U3L15 - count upDown bug forget to set text_instruction: "Find the bug - in the program and fix it. (Click to see full instructions)" - CSPU5_U3L15 - count upDown bug logic error wrong update_instruction: "Find - the bug in the program and fix it. (Click to see full instructions)" - CSPU5_U3L15 - count upDown bug var not created globally_instruction: "Find - the bug in the program and fix it. (Click to see full instructions)" - CSPU5_U3L15 - Debug forget to update var on reset in UpDown app_instruction: "Run - the app, and click the up or down button until you get to the gameOverScreen. - Click 'Start Over' and try the app again. Find and fix the issue in the - code. (Click to see full instructions)" - CSPU5_U3L15 - Debug if never triggers in UpDown app_instruction: "Run the app - and use the up and down arrows to try to hit the gameOverScreen. You can't! - Find and fix the issue in the code. (Click to see full instructions)" - CSPU5_U3L15 - Debugging Simple If-statements =v==_instruction: "Run the app, - and click the up button. Then restart and run it again, and click the down - button. Find and fix the issue in the code. (Click to see full instructions)" - CSPU5_U3L15 - DEMO up down count practice app_instruction: "Try out the demo - app (Click to see full instructions)" - CSPU5_U3L15 - global var example count up_instruction: "Look at the code for - this app and see how the code works to update the count variable when the - up arrow is clicked. (Click to see full instructions)." - CSPU5_U3L15 - mini clicker update score_instruction: "Add code to update the - score when the apple is clicked. (Click to see full instructions)" - CSPU5_U3L15 - practice with setText_instruction: "Use setText to complete the - click event handler for the down arrow. (Click to see full instructions)" - CSPU5_U3L15 - Simple If-statements in UpDown App_instruction: "Add an if statement - so that the app changes screens when the count reaches -5. (Click to see full - instructions)" - CSPU5_U3L15 - variable scoping problem debugging_instruction: "See if you can - figure out why the code is no longer working. (Click to see full instructions)" - CSPU5_U3L15 click add lives_instruction: "Add lives to the clicker game that - decrement by 1 when the background image is clicked (Click to see full instructions)" - CSPU5_U3L15 full clicker app_instruction: "Complete your clicker game! (Click - to see full instructions)" - CSPU5_U3L16 - challenge say hi app_instruction: "Write a greeting to the user - when they hit 'enter' in the text input, using the 'change' event. (Click - to see full instructions)" - CSPU5_U3L16 - chaserApp_instruction: "Create your own \"Chaser Game.\" (Click - to see full instructions)" - CSPU5_U3L16 - chooseImages_instruction: "Replace the image in your application - with one of your own. (Click to see full instructions)" - CSPU5_U3L16 - doubleQuotes_instruction: "Save a string inside a variable and - log it to the console. (Click to see full instructions)" - CSPU5_U3L16 - intro getText_instruction: "Add an event handler to the Submit - button so that when the button is clicked it will display the name entered - in the text box to the console. Use getText to get the value out of the text - box. (Click to see full instructions)" - CSPU5_U3L16 - introSetPosition_instruction: "Move the buttons to the bottom - of the screen. (Click to see full instructions)" - CSPU5_U3L16 - introStrings_instruction: "Save a string inside a variable and - log it to the console. (Click to see full instructions)" - CSPU5_U3L16 - newEventTypes_instruction: "Experiment with different event types - and select the one that you think is best. (Click to see full instructions)" - CSPU5_U3L16 - outputWithTextArea_instruction: "Output a message to the 'textArea' - (Click to see full instructions)" - CSPU5_U3L16 - setPosition to fixed location_instruction: "Introducing the setPosition - command! Replace the moveTo in the button-click event handler to use setPosition - to move the button itself to a random location when it's clicked." - CSPU5_U3L16 - setPosition to move button_instruction: "Introducing the setPosition - command! Replace the moveTo in the button-click event handler to use setPosition - to move the button itself to a random location when it's clicked." - CSPU5_U3L16 - singleSetPosition_instruction: "Move the button to the middle - of the screen. (Click to see full instructions)" - CSPU5_U3L16 - text labels_instruction: "Use the textLabel command to replace - the button in your program with a text label. (Click to see full instructions)" - CSPU5_U3L16 - textInput getText write_instruction: "Add an Text Input box for - the name and age. (Click to see full instructions)" - CSPU5_U3L16 - toUpper_instruction: "Make the name of the user appear in uppercase - (Click to see full instructions)" - CSPU5_U3L16 - use images_instruction: "Use the image command to replace the - text label in your program with an image. (Click to see full instructions)" - CSPU5_U3L16 Mad Lib Clear Input_instruction: "Clear the user's previous text - when the Play Again button is clicked (Click to see full instructions) " - CSPU5_U3L16 Mad Lib Demo_instruction: "Mad Libs Demo - Try it out!" - CSPU5_U3L16 Mad Lib getText_instruction: "Before setting the text area with - your Mad Libs outline, get the user's text and incorporate their responses. - (Click to see full instructions) " - CSPU5_U3L16 Mad Lib setText_instruction: "When the Next button is clicked, - set the text area to have the main outline of your How-to Mad Libs (without - the user's input). (Click to see full instructions) " - CSPU5_U3L16 Mad Lib Student Setup_instruction: "Back to Mad Libs: To get started, - set up the two screens for your Mad Libs app (Click to show full instructions)" - CSPU5_U3L16 Mad Lib toUpper_instruction: "Apply the toUpperCase and toLowerCase - string functions to the user's text. (Click to see full instructions) " - CSPU5_U3L18 comparison operators_instruction: "Use console.log to print out - the different boolean expressions below to see what information they return. - (Click to see full instructions)" - CSPU5_U3L19 - fix the var name syntax error v2_instruction: "Fix the error - and get it to print the value of both variables (Click to see full instructions)" - CSPU5_U3L19 - test reassignment of two vars_instruction: "Predict the value - of a and b. Add console.log statements to find out the actual value of a and - b. (Click for full instructions)" - CSPU5_U3L19 - three basic ops of variables_instruction: "Add another variable - called \"lives\" and set the value to 3. Print the value of the variable to - the console. (Click to see full instructions)" - CSPU5_U3L19 - variable reassignment challenge pt2_instruction: "Make a prediction - about the ending values of a, b, and c. Then use console.log to check your - understanding (Click to see full instructions)" - CSPU5_U3L19 - write var and string with same name v2_instruction: "Fix the - code so that the values of both variables print to the console. (Click to - see full instructions)" - CSPU5_U3L23 Chatbot Conditionals 1_instruction: "Add if, else if, and else - statements to detect the movie genres Comedy, Romance, Action, and Horror. - (Click to see full instructions)" - CSPU5_U3L24 Chatbot Basic Conditionals_instruction: "Check out the project - description for instructions. (Click to see full instructions.)" - CSPU5_U3L24 introIncludes_instruction: "Practice using the includes command. - (Click to see full instructions)" - CSPU5_U3L24 Nested Conditionals 1_instruction: "Change all of the boolean expressions - to use includes instead of ==. (Click to see full instructions)" - CSPU5_U3L24 Nested Conditionals 2_instruction: "Nest your movie genre if statements - inside the if statements to check for a ? in the input. " - CSPU5_U3L25 - drag out key event_instruction: "Set up an event handler to respond - to keypress events, and display event.key in the console. Hit keys on the - keyboard to see what happens. (Click to see full instructions)" - CSPU5_U3L25 - play sound when up key_instruction: "Change the code so the sound - will only play when the up arrow is pressed. (Click to see full instructions)" - CSPU5_U3L26 AND operator_instruction: "Update the genre and rating if statements - to give only one movie suggestion at a time. (Click to see full instructions)" - CSPU5_U3L26 OR operator_instruction: "Update the if statement to use an OR - to check for a \"?\" as well as who, what, where, when, why, how in the user - input. (Click to see full instructions)" - drawings!_instruction: "Draw the equilateral triangle - all the sides are the - same!" - ECSPD Binary Odometer_instruction: "This is another resource you could use - with your students." - Eval Booleans 1_instruction: "Boolean operators (like >, <, =) allow us to - compare different values, returning either true or false. Click \"Run\" to - see how this expression evaluates." - Eval Booleans 2_instruction: "Can you set the values so that this expression - evaluates as true?" - Eval Booleans 3_instruction: "The string-length function returns the number - of characters in a string (including spaces!) - make this code evaluate to - true." - Eval Booleans 4_instruction: "Here's an Evaluation Block called AND - it returns - true if both of its parameters are true, otherwise it returns false. Edit - the x variable so that this expression returns true." - Eval Booleans 5_instruction: "This OR block returns true if either of its parameters - is true. Otherwise, if both parameters are false it will return false. Set - the y variable to a value that will cause this expression to return false." - Eval Booleans 6_instruction: "Here's one more boolean block called NOT. This - block flips true to false, or false to true. If you wrap this block of code - in a NOT block, it should return true (because we are asking if the two expressions - do NOT produce equal values)." - Eval Booleans Free Play_instruction: "Free Play: Try out some creations of - your own using Booleans." - Eval Booleans_instruction: "Booleans allow us to compare different values, - returning \"true\" if the are equal, or \"false\" if they are not. What do - you think this code will evaluate to?" - Eval Cond 1_instruction: "The cond block checks the boolean expressions in - the left column, and as soon as it finds one that returns \"true\" it runs - the corresponding code on the right. If none of the expressions evaluate to - \"true,\" it runs the bottom block. Update the \"temperature\" variable so - that this block returns \"It's just right.\"" - Eval Cond 2 (copy 1)_instruction: "This condition returns a different shape - based on the value of the \"sides\" variable - change the value of \"sides\" - so that the conditional returns a triangle." - Eval Cond 2_instruction: "This condition returns a different shape based on - the value of the \"sides\" variable - change the value of \"sides\" so that - the conditional returns a triangle." - Eval Cond 3 (copy 1)_instruction: "Can you write a conditional that checks - the variable \"age\" and returns \"Old enough to vote and drive\" if age > - 17, \"Old enough to drive\" if age is > 15, and \"Can't drive or vote\" if - neither conditions is true. Hint: The first condition to return \"true\" wins - - make sure you put your conditions in the right order." - Eval Cond 3_instruction: "Can you write a conditional that checks the variable - \"age\" and returns \"Old enough to vote and drive\" if age > 17, \"Old enough - to drive\" if age is > 15, and \"Can't drive or vote\" if neither conditions - is true. Hint: The first condition to return \"true\" wins - make sure you - put your conditions in the right order." - Eval Cond 4_instruction: "We can use the string=? function to make conditionals - that respond to text input. Here's a function called green shape that takes - a string for the type of shape. Complete the conditions so that the correct - solid green shape is returned when the function is run with \"circle\", \"triangle\", - \"square\", or \"rectangle\"." - Eval Cond 5_instruction: "Here's a similar function red shape with an additional - variable for size. Complete the conditionals so the correct solid red image - of a given size is drawn for \"circle\", \"triangle\", and \"star\"." - Eval Cond 6_instruction: "Write a function called food-critic, which takes - in the name of a food and produces a String that says how you feel about that - food. For example, (food-critic “pizza”) might evaluate to “delicious”, but - (food-critic “rotten eggs”) might evaluate to “gross!”. Choose at least two - foods to review, but you can you write more if you like! Don’t forget to - add an “else” clause!\r\nOne example - and part of the definition - has already - been done for you!" - Eval Cond 7_instruction: "Free Play: Write a function called green-shape, which - takes in the name of a shape and produces a solid green shape. Your function - should work with at least “circle”, “star” and “rectangle”, but you can add - other shapes if you like. You can choose the size of each shape. Don’t forget - to add an “else” clause!\r\nOne example - and part of the definition - has - already been done for you!\r\n" - Eval Cond 8_instruction: "Free Play: Suppose you want to own a car at 21, or - have your own business by 30. Write a function called life-goals, which takes - in an age and produces a string that describes your life goals by then. Don’t - forget to add an “else” clause!\r\n" - Eval Contracts 1_instruction: "Use the \"star\" function to produce a red star - with a 60 pixel radius" - Eval Contracts 10A_instruction: "Alright let's complete this puzzle with a - Green Square that is 175 pixels in size." - Eval Contracts 11A_instruction: "Can you complete this puzzle to read \"Hello - World\" in the banner?" - Eval Contracts 2_instruction: "Check out the \"rotate\" function - can you - use it to rotate this 90 pixel green square by 45 degrees?" - Eval Contracts 3_instruction: "Try using the \"text\" function to write this - teal text at size 40." - Eval Contracts 4 A_instruction: "The \"scale\" function returns an image that - is scaled either larger or smaller than the input image. Try scaling this - circle by a factor of 10 - how is the resulting image different than if you'd - just made a circle of that size in the first place?" - Eval Contracts 4_instruction: "The scale function returns an image that is - either larger or smaller than the input image. Try scaling this circle by - a factor of 10. How is the returned image different than if you'd just made - a circle of that size in the first place?" - Eval Contracts 8A_instruction: "Can you complete this puzzle? The big-triangle - is 200 pixels in size and purple?" - Eval Contracts A_instruction: "Use the star function to produce a solid red - star with a 60 pixel radius" - Eval Contracts C_instruction: "Check out the rotate function - can you use - it to rotate this 90 pixel green square by 45 degrees?" - Eval Contracts E_instruction: "Try using the text function to write \"Hello, - world!\" in teal at size 40." - Eval Contracts shrink_instruction: "Can you complete this image using the \"shrink\" - function block? The radius is 20. " - Eval Define Funcs 1_instruction: "Here's a new function called green-triangle - that takes a single Number for size and produces a green triangle. Use the - new function to create a 125 pixel green triangle." - Eval Define Funcs 2_instruction: "Let's look inside that green-triangle function - to see how it works. Can you modify it so that the green-triangle function - always draws outlined green triangles?" - Eval Define Funcs 3_instruction: "Here's the start of another new function - called purple-circle with a domain of one Number (the radius) and a range - of Image. The body of the function is broken though - fix it and then make - a purple circle with 150 pixel radius" - Eval Define Funcs 4_instruction: "Create a new function called aqua-star that - has a Domain of a single Number for radius and returns an aqua star of the - given radius. Run your new function with a radius of 75." - Eval Define Funcs 5_instruction: "Let's use that aqua-star function to make - a row of different sized stars. From left to right, the stars should have - radii of 25, 50, and 75." - Eval Define Funcs Test_instruction: "Here's the start of another new function - called purple-circle with a domain of one Number (the radius) and a range - of Image. The body of the function is broken though - fix it and then make - a purple circle with 150 pixel radius" - Eval Defining Vars Free Play 1_instruction: "Free Play: We've provided a function - that fills your screen with my-image. Change my-image to see what patterns - you can make." - Eval Design Recipe .1_instruction: "Here's a Design Recipe for a function - called square-circle with domain Number String and range Image. Click Edit - to write the function definition (you will see two examples provided)." - Eval Design Recipe 1 (copy 1)_instruction: "We're going to write a function - that draws a solid rectangle of any color that is twice wide as it is high. - Start with an example - draw a solid green rectangle that has a height on - 100 pixels." - Eval Design Recipe 1_instruction: "Alright, now given the Contract wide-rect: - Number String -> Image, write an example - draw a solid green rectangle that - has a height of 100 pixels." - Eval Design Recipe 2 (copy 1)_instruction: "Let's do one more example before - writing the function definition - this time draw a solid red rectangle with - a height of 75 pixels." - Eval Design Recipe 2_instruction: "Let's do one more example before writing - the function definition - this time draw a solid red rectangle with a height - of 75 pixels." - Eval Design Recipe 3_instruction: "The Design Recipe for wide-rect already - has a contract and one example. Can you write a second example and then complete - the definition? The wide-rect function should produce a rectangle of given - color that is twice as wide as it is high." - Eval Design Recipe 4_instruction: "Use the Design Recipe to create a function - starburst. When given a number of points and an outer radius, starburst returns - a yellow radial star with given points, and an inner radius that is half the - outer radius." - Eval Design Recipe 5_instruction: "Using the Design Recipe, write a function - striped-flag that takes two colors and produces a flag that is 250 pixels - wide, 150 pixels tall, with three even horizontal stripes of given colors, - in the order color2, color1, color2." - Eval Design Recipe 6_instruction: "Write a function large-polygon that should - output a solid polygon of given sides and color that takes up most of the - window, regardless of the number of sides. To make sure that the polygon doesn't - get too large as you increase the number of sides, side length should be inversely - proportional to side number, with a length of (800/sides)." - Eval Design Recipe Free Play_instruction: "Free Play: Use the Design Recipe - to create some functions of your own design" - Eval Free Play_instruction: "Free Play: Make art with code!" - Eval Strings Images .1_instruction: "So far we've only dealt with a single - type of data, Numbers. Another type of data is a String, which is any combination - of letters, numbers, or other characters wrapped in quotation marks. Run the - String \"Hello, world!\" and see what happens." - Eval Strings Images .2_instruction: "The string-append function takes two Strings - and returns a single combined String. Add a String \"Universe\" to the second - argument of string-append." - Eval Strings Images 1_instruction: "The third type of data we're going to - use is an Image. This star function takes in a Number and two Strings, and - it evaluates to an Image. Use this function to make a solid red star with - radius of 100." - Eval Strings Images 2_instruction: "Free Play: Every Evaluation Block is color-coded - to let you know which data type it returns and which types it needs for its - parameters. The last parameter of the triangle function takes a String that - controls its color - try some different colors to see what works." - Eval Strings Images 3_instruction: "Some functions can only take a specific - set of Strings, such as the second argument of this circle function, which - controls its style. Draw this orange outline circle using the special String - block with a dropdown to make sure you only use valid styles." - Eval Strings Images 4_instruction: "Try using the rectangle block to draw this - solid, red rectangle - it is 175 pixels wide and 100 pixels tall." - Eval Strings Images 5_instruction: "Try using this new Evaluation Block called - overlay to place a 100 pixel white triangle on top of a 200 pixel red circle." - Eval Strings Images 6_instruction: "Use the overlay block to place a 75 pixel - radius yellow star on top of a 150 pixel long blue square." - Eval Strings Images 7_instruction: "The offset block lets you move an image - relative to where it would normally be placed. Use this block to offset the - square by 100 pixels on the y-axis." - Eval Strings Images 8_instruction: "Here's a different kind of star block - - it's called radial-star and it allows you to draw stars with any number - of points! Use it to create a 7 point solid orange star with an inner radius - of 75 pixels and an outer radius of 175 pixels." - Eval Strings Images Free Play_instruction: "Free Play: Explore the blocks available - to create something interesting. Make sure to share your favorite creations." - eventsIntro_instruction: "Need a better playlab/events combo" - Farmer for Authored Hint testing_instruction: "Wow, I found a really deep hole! - I don't know how many shovelfuls of dirt it needs. Can you write a program - that fills it until the ground is even? Hint: Try using the while loop this - time." - Farmer for TTS testing_instruction: "Wow, I found a really deep hole! I don't - know how many shovelfuls of dirt it needs. Can you write a program that fills - it until the ground is even? Hint: Try using the while loop this time." - Finalize Your Chaser Game v.1_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - Food Fight!_instruction: "We've added one last function for you. \r\n\r\nUse - an \"if\" statement to program your game to call the \"level_up\" function - only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor - example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 - to move to the next puzzle. " - Food Fight_instruction: "You can make whatever you want in play lab! This is - an example of a game you can make in play lab." - FoodFight_instruction: "This is an example of a game you can make in play lab." - Frequency Analysis_instruction: "Test" - frozen circle function in circle_instruction: "Now let's create 20 overlapping - circles, turning 18 degrees between each circle." - frozen circle function with parameter_instruction: "Here's a ”Create circle” - block that can make circles of different sizes. Can you use this to create - a small circle of size 5 and a larger circle of size 10?" - frozen circle function_instruction: "Use the new “Create a circle” block to - create 10 overlapping circles. Don't forget to jump forward between circles." - frozen circle_instruction: "A circle is a special shape. Can you figure out - what number to replace the question marks with to draw a circle?" - frozen cross rotate dense_instruction: "Let's repeat it 90 times! How many - times does 90 go into 360? Hint: It's a really small number." - frozen cross rotate_instruction: "Now try repeating it 10 times. How many degrees - do you need to turn between each line?" - frozen cross_instruction: "Wrap a “Repeat” block around these commands to create - a plus sign. Did you notice Elsa can move forward and backward?" - frozen diamond mini snowflake_instruction: "Did you know every snowflake is - a different shape? Let's create a new snowflake by using another “Repeat\" - block to repeat a parallelogram 4 times, turning right by 90 degrees between - each parallelogram." - frozen diamond snowflake_instruction: "Now, let's create a new snowflake by - using the repeat block to repeat a parallelogram 10 times, turning right by - 36 degrees between each one." - frozen diamond_instruction: "Use a repeat around these blocks to create a parallelogram. - It's just like a rectangle but has different angles. This one has 60 degree - and 120 degree angles instead of all 90 degree angles." - frozen freeplay_instruction: "You've officially become a master artist! Create - a winter wonderland." - frozen line_instruction: "Hi! I'm Elsa of Arendelle. Help me create a single - line." - frozen perpendicular_instruction: "Now let's see if we can create two lines - that are at a 90 degree angle to each other. You will need to use the \"Turn\" - block as well as the \"Move\" block." - frozen snowflake branch_instruction: "Try using the ”Create a snowflake branch” - block to create three branches, which starts to look like a snowflake." - frozen snowflake full_instruction: "Now let's repeat it 8 times to make a - beautiful snowflake!" - frozen snowflower_instruction: "Intricate snow patterns can be created with - very simple shapes. Can you make a pattern by repeating 5 circles of size - 5 and 5 circles of size 10?" - frozen square iterative_instruction: "It seems like we're halfway to making - a square. Let's put 4 lines together to create a square." - frozen square loop 3x_instruction: "Let's create three squares, turning after - each square. Be sure to turn by 120 degrees before each new square." - frozen square loop_instruction: "Hi, I’m Anna of Arendelle! Let’s make a square - with the “Repeat” block, which uses fewer blocks. How many times (???) should - the “Repeat” block loop the blocks inside it to make a square?" - frozen square snowflake_instruction: "Can you create a snowflake using the - “Repeat” block to make a square 10 times, and the “Turn” block to turn 36 - degrees between each square?" - 'Game Lab Workshop: Random_instruction': "Pick a shape block and use calls - to randomNumber() in place of one or more of the parameters. Maker sure you - run it a few times so you can see the effect of randomization." - Geometric Pattern_instruction: "Project Idea: Create a pattern using geometric - ideas like shapes. This requires persistence and planning!" - Geometric Sun_instruction: "Project Idea: Create a pattern using geometric - ideas like shapes. This requires persistence and planning!" - 'Grade 4 Example PlayLab Project #1_instruction': "Take a look at this project. Do - you see how it was made?" - 'Grade 4 Example PlayLab Project #2_instruction': "Take a look at this project. Do - you see how it was made?" - grade1_adventurer_loops1_instruction: "Four piles of gold! Collect all four." - grade1_adventurer_loops10_instruction: "Help me get all of the gold from this - cave." - grade1_adventurer_loops2_instruction: "How can Laurel collect all five piles - of gold using only one `E -->` block?" - grade1_adventurer_loops3_instruction: "Can you fix Laurel's path to get all - of this gold?" - grade1_adventurer_loops4_instruction: "Add to the code from the last puzzle - to get all of the gold. " - grade1_adventurer_loops5_instruction: "What should you add to this code to - get all of the gold?" - grade1_adventurer_loops6_instruction: "Write the code to get all of this gold." - grade1_adventurer_loops7_challenge_instruction: "**Challenge: ** The gold goes - all the way down these stairs! Write the code to help me get it all." - grade1_adventurer_loops8_challenge_instruction: "Challenge: Try this staircase - now! It has an extra spike at the end you'll have to climb." - grade1_adventurer_loops9_instruction: "Help me get the gold from this deep - valley." - grade1_adventurer_loopsFP_instruction: "Eureka! Collect as much gold as you - can!" - grade1_adventurer_loopsPre_instruction: "This is Laurel the Adventurer! Can - you move her around and get gold?" - grade1_artist_loops1_instruction: "The Artist is trying to draw a line six - times, but can't get it right. Can you help?" - grade1_artist_loops2_instruction: "Help the artist draw a line 7 times to make - a garden wall." - grade1_artist_loops3_instruction: "Now we need to get the soil ready to plant. - Find the bugs in the code and help the artist prepare the ground. " - grade1_artist_loops4_instruction: "Time to fix the stairs! Repeat this pattern - five times so the artist can reach the top of the bushes." - grade1_artist_loops5_instruction: "Behind the bushes there is a beautiful vine - full of flowers. Can you climb the vine and see where it goes?" - grade1_artist_loops6_instruction: "**Challenge:** It's a hidden garden! Let's - walk around." - grade1_artist_loops7_instruction: "The flowers down here are so pretty. Let's - take a closer look." - grade1_artist_loops7a_instruction: "**Challenge:** Lovely! Let's take a walk - around the garden." - grade1_artist_loops7b_instruction: "Time to head home. Can you fix this ladder - to help the artist get down?" - grade1_artist_loops8_instruction: "Let's take the short way home, over the - pond. Can you help the artist stay on the stones?" - grade1_artist_loops9_instruction: "I still need a story for this puzzle" - grade1_artist_loopsFP_instruction: "Use what you have learned to draw a picture - of what you think the artist saw when he got home." - grade1_maze_sequence1_instruction: "A bug! Fix the code to get me to the pig." - grade1_maze_sequence10_instruction: "Move me around the TNT to get to the pig." - grade1_maze_sequence2_instruction: "Fix the code to get me to the pig!" - grade1_maze_sequence3_instruction: "Add 2 blocks to get the bird to the pig." - grade1_maze_sequence4_instruction: "Now try this puzzle from the start!" - grade1_maze_sequence5_instruction: "Move one way, then another to get me to - the pig!" - grade1_maze_sequence6_instruction: "Figure out what is missing and then add - blocks to get me to the pig!" - grade1_maze_sequence7_instruction: "Your turn! What do you need to do to get - the bird to the pig?" - grade1_maze_sequence8_instruction: "Debug this level by adding blocks to get - me to the pig!" - grade1_maze_sequence9_instruction: "Go around the TNT to get me to the pig! - " - grade1_maze_sequenceA_instruction: "Challenge: Move me around the TNT to get - to the pig." - grade1_maze_sequenceB_instruction: "Fix the bugs to get the bird to the pig." - grade1_maze_sequenceC_instruction: "It's all you! Get the bird to the pig." - grade1_maze_sequenceD_instruction: "Now head any which way to get that pig!" - grade1_playlab_events1_instruction: "This game is called \"Play Lab\". See - if you can figure out what each block does." - grade1_playlab_events1a_instruction: "Make your robot say \"Hello!\" when the - button is clicked." - grade1_playlab_events2_instruction: "This program makes Robin fly. Can you - get her to vanish when you click her?" - grade1_playlab_events2a_instruction: "Edit the code so that when the second - bird is clicked, your program plays a sound!" - grade1_playlab_events3_instruction: "This program makes Robin fly. Can you - make the robot jump when you press the up button?\r\n" - grade1_playlab_events3a_instruction: "When the third bird is clicked, the background - should change to a city. Can you add code to make this happen?" - grade1_playlab_events4_instruction: "Add a block to make Robin vanish when - she collides with the robot." - grade1_playlab_events4a_instruction: "Add code to make something happen when - the fourth bird is clicked. Be creative!" - grade1_playlab_events5_instruction: "Add a block to the 'when run' event - that starts the dragon flying." - grade1_playlab_events5a_instruction: "About My Robot Project! Write code so - that clicking on each bird shows a new fact about your robot." - grade1_playlab_events6_instruction: "Add a block to the 'when actor 1 clicked' - event that makes the dragon return to the middle of the screen." - grade1_playlab_events7_instruction: "Add a block so that when you push the - left arrow button, the knight surges toward the dragon." - grade1_playlab_events8_instruction: "Add a block so that when the knight collides - with the dragon, it plays a sound." - grade1_playlab_events9 RYAN COPY_instruction: "Now, have Robin wait a second, - then come back after she vanishes." - grade1_playlab_events9_instruction: "Now, add a block to keep score each time - the knight hits the dragon." - grade1_playlab_eventsFP_instruction: "Use your imagination. What can you do - to make this game more fun?" - grade1_sequence_pre_instruction: "Play with these blocks to see what they make - the bird do!" - grade1_video_frustrationRainbow_instruction: "This video describes the rainbow - of frustration and introduces persistence." - grade2_CaringForNewPet_0_instruction: "For this puzzle, drag all of the blocks - together and click \"Run\" to watch it go!" - grade2_CaringForNewPet_1_instruction: "Drag an extra `move forward` block out - of the toolbox to finish your code." - grade2_CaringForNewPet_10_instruction: "Get me to the pig!" - grade2_CaringForNewPet_11_instruction: "\"Keep calm and help me find the bad - pig.\"" - grade2_CaringForNewPet_2_instruction: "\"This pig is ruffling my feathers.\"\r\n\r\nThere - is one extra block that is going to cause the bird to crash. Throw it away - by dragging it back to the toolbox." - grade2_CaringForNewPet_2courseC_maze_programming3_instruction: "There is one - extra block that is going to cause the bird to crash. Throw it away by dragging - it back to the toolbox." - grade2_CaringForNewPet_3_instruction: "\"Trace the path and lead me to the - silly pig. Avoid TNT or feathers will fly!\"" - grade2_CaringForNewPet_3D_instruction: "\"Follow this path to get me to the - pig!\"" - grade2_CaringForNewPet_4_instruction: "\"Keep calm and help me find the bad - pig. Otherwise I might get angry!\"" - grade2_CaringForNewPet_5_instruction: "Get me to the pig!" - grade2_CaringForNewPet_6_instruction: "Challenge: Guide me to the green evilness! - (Watch out for TNT)" - grade2_CaringForNewPet_7D_instruction: "Challenge: This code has a lot of bugs. - You'll need to remove blocks and add blocks." - grade2_collector_10_instruction: "You're almost done! Collect as many pieces - of treasure as you can to finish the stage!" - grade2_collector_2_instruction: "Move Laurel to the gold, then use `collect` - to pick it up." - grade2_collector_3_instruction: "Put these blocks in order to collect all of - the gold and solve the puzzle." - grade2_collector_4_instruction: "Sequence matters! The blocks you need are - already in the workspace, but not connected. Order these blocks to solve - the puzzle." - grade2_collector_5_instruction: "These blocks are in the wrong order. Can you - fix them?" - grade2_collector_6_instruction: "Reorder the blocks to collect all of the treasure." - grade2_collector_7_instruction: "Challenge puzzle! Use blocks from the toolbox - to collect all of the treasure." - grade2_collector_8_instruction: "\"Keep up the good work! Help me collect all - of the coins.\"" - grade2_collector_9_instruction: "*\"Let's get all of the coins!\"*" - grade2_collector_9a_instruction: "**Challenge:** Grab all of the coins." - grade2_collector_A_instruction: "Help Laurel collect all of the treasure." - grade2_collector_pre1_instruction: "\"Hi, I'm Laurel. Today I'm searching - for treasure at the dog park!\" \r\n\r\nPlay around with the blocks to see - if you can help Laurel collect some gold." - grade2_MakeDogTag_1_instruction: "Drag blocks onto the screen to have the artist - draw over the grey lines in the picture. (Each line is 100 pixels long)" - grade2_MakeDogTag_10_instruction: "Now, draw anything you like!" - grade2_MakeDogTag_2_instruction: "This spaceship needs a window!\r\n\r\nEach - side of the inner square is 100 pixels and all of the angles are 90 degrees." - grade2_MakeDogTag_3_instruction: "\"Oh no! Starla's pet alien just flew away! - Let's help the spacewoman!\"\r\n\r\nFinish Starla's rocket so she can chase - her pet." - grade2_MakeDogTag_4_instruction: "Finish this tag by drawing a rectangle around - the outside.\r\n(The long sides are 200 pixels each and the short sides are - each 100 pixels)" - grade2_MakeDogTag_5_instruction: "\"Now a tag for Belle!\"\r\n\r\nDraw this - diamond with 200 pixel sides." - grade2_MakeDogTag_6_instruction: "Challenge: This tag is a special one! Can - you figure out how to draw the outline?" - grade2_MakeDogTag_7_instruction: "One more tag. This is a triangle for Pi.\r\n(Each - side is 150 pixels)" - grade2_MakeDogTag_8_instruction: "Now let's connect a bunch of V's together - in a loop." - grade2_MakeDogTag_9_instruction: "Rebuild the code from the last puzzle, but - this time, add a left turn of 30 degrees inside the loop. Now, repeat it 24 - times instead of 8." - grade2_MakeDogTag_BFP_instruction: "\"Hi, I'm an artist. You can write code - to make me draw almost anything.\"\r\n\r\nPlay with the blocks in the toolbox - to see what they do!" - grade2_MakeDogTag_FP_instruction: "Freeplay: What shape will you make the tag - for your pet?" - grade2_maze_debuggingFP_instruction: "\"Now, help me sneak up on the pig any - way you want to!\"" - grade2_maze_debuggingPre_instruction: "Play with these blocks to see what they - make the bird do!" - grade2_maze_intro10_instruction: "Solve this puzzle." - grade2_maze_intro2_instruction: "Welcome to Code Studio! Here you will learn - to use blocks to build programs. Press `Run` to run a program now!" - grade2_maze_intro3_instruction: "The `workspace` is where you will create all - of your programs. Can you guess what this program does? Press the “Run” button - to find out." - grade2_maze_intro4_instruction: "Drag a block from the toolbox into the workspace. - Connect it to the other blocks." - grade2_maze_intro6_instruction: "That’s it! Now we’re ready to try to solve - a few puzzles. " - grade2_maze_intro7_instruction: "This time, try something a bit more challenging." - grade2_maze_intro8_instruction: "This is a challenge puzzle. It is meant to - be hard and will probably take you a couple of tries to solve. If you don’t - solve it after several tries, don’t worry! It will be in the Play Zone at - the end of the stage and you can try it again when you’ve had more practice." - grade2_maze_intro9_instruction: "Solve this puzzle." - grade2_playlab_project_1_instruction: "Now, write a program to make Waddles - move around using the up / down / left /right keys to hit all of the targets!" - grade2_playlab_project_2_instruction: "The `repeat forever` block allows you - to run code over and over forever. Can you attach blocks to move Chomp the - Dino (actor 2) up and down forever?" - grade2_playlab_project_3_instruction: "Can you have Waddles (actor 1) say \"Ouch!\" - and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen you're done, - play the game to make that happen." - grade2_playlab_project_4_instruction: "Can you add a block to score a point - when Waddles runs into Octavia (actor 3)? \r\nPlay the game and move Waddles - with the arrows until you score!" - grade2_playlab_project_5_instruction: "Add blocks to the `when run` event to - change the background and the speed of Waddles.\r\n\r\nPlay the game and move - Waddles with the arrows until you score." - grade2_playlab_project_6_instruction: "Create your own story. When you're - done, click \"Finish\" to share with friends." - grade2_puppy_loops2_instruction: "Can you get to the pig by creating a loop - that uses only one `move forward` block inside of a `repeat`?" - grade2_puppy_loops3_instruction: "\"Get me to the pig!\"\r\n\r\n Solve this - puzzle by creating a loop!" - grade2_puppy_loops4_instruction: "In this puzzle, two `repeat` loops will help - you get to the pig with the fewest number of blocks!" - grade2_puppy_loops5_instruction: "\"Get me to the pig as quickly as possible!\"" - grade2_puppy_loops6_instruction: "\"This pig is ruffling my feathers!\"\r\n\r\nLoops - even work with more than one block inside! Can you loop this sequence?" - grade2_puppy_loops7_instruction: "\"Get me to the pig!\"\r\n\r\nUse what you - learned in other puzzles!" - grade2_PuppyLoops_1_instruction: "Can you get me to the pig using 5 of the - same kind of blocks?" - grade2_PuppyLoops_10_instruction: "My teacher says that I should finish what - I start!\r\n\r\nHelp me finish my pinwheel. Can you figure out what's wrong?" - grade2_PuppyLoops_2_instruction: "Can you get to the pig by creating a loop - that uses only one `move forward` block inside of a `repeat`?" - grade2_PuppyLoops_3_instruction: "Get me to the pig! Solve this puzzle by creating - a loop!" - grade2_PuppyLoops_4_instruction: "In this puzzle, two `repeat` loops will help - you get to the pig with the fewest number of blocks!" - grade2_PuppyLoops_5_instruction: "Can you figure out the fastest way to get - me to the pig?" - grade2_PuppyLoops_6_instruction: "Loops even work with more than one block - inside! Can you loop this sequence to get me to the pig?" - grade2_PuppyLoops_7_instruction: "Use what you learned to get me to the sunflower!" - grade2_PuppyLoops_8_instruction: "This code for the cat's whiskers is wrong. - \r\n\r\nFix this code to draw whiskers that are all the same length." - grade2_PuppyLoops_9_instruction: "Looks like the C in code is drawn backwards!\r\n\r\nCan - you make it look like a C again?" - grade3_AboutMyRobot_1_instruction: "Make your robot say \"Hello!\" when the - button is clicked." - grade3_AboutMyRobot_2_instruction: "Edit the code so that when the second bird - is clicked, your program plays a sound!" - grade3_AboutMyRobot_3_instruction: "When the third bird is clicked, the background - should change to a city. Can you add code to make this happen?" - grade3_AboutMyRobot_4_instruction: "Add code to make something happen when - the fourth bird is clicked. Be creative!" - grade3_AboutMyRobot_5_instruction: "About My Robot Project! Write code so that - clicking on each bird shows a new fact about your robot." - grade3_AboutMyRobot_TeacherIDo_instruction: "Run this puzzle and click on the - robot to see what happens!" - grade3_bee_conditionals_new1a_instruction: "Help the bee collect all of the - nectar. \r\n\r\nYou can only collect nectar from flowers, but you can check - any space to see if there is a flower." - grade3_bee_conditionals_new1b_instruction: "Help the bee collect all of the - nectar. You can only collect nectar from flowers, but you can check any space - to see if there is a flower." - grade3_bee_conditionals_new2_instruction: "Collect all of the nectar using - as few blocks as possible" - grade3_bee_conditionals_new2a_instruction: "Get all of the nectar using as - few blocks as possible." - grade3_bee_conditionals_new2b_instruction: "Collect all of the nectar. You - can only collect nectar from flowers, but you can check any space to see if - there is a flower." - grade3_bee_conditionals_new3a_instruction: "Collect all of the nectar or make - all the honey. You can only collect nectar from flowers and make honey from - honeycombs. Check any space to see if there is a flower or honeycomb." - grade3_bee_conditionals_new3b_instruction: "Collect all of the nectar and make - all of the honey." - grade3_bee_conditionals_new3c_instruction: "Help the bee collect all of the - nectar and make all of the honey! Hint: Try using one loop inside of another - loop." - grade3_bee_Conditionals_new4_instruction: "Now try checking all of these flowers - with \"if\" blocks to see if there is any nectar available." - grade3_bee_conditionals_quantum1_instruction: "Check to see if there's a flower - under the cloud. If there's a flower, get nectar." - grade3_bee_conditionals_quantum2_instruction: "Check underneath every cloud - to see if it is hiding a flower before you get nectar. \r\n" - grade3_bee_conditionals_quantum3_instruction: "Some of these clouds might have - honeycombs under them. Be sure to check if a honeycomb is hiding behind each - cloud!" - grade3_bee_conditionals_quantum4_instruction: "Use the `if/else` block to collect - nectar at flowers and make honey at honeycomb." - grade3_bee_conditionals_quantum5_instruction: "Use the `if/else` block to collect - nectar if there is a flower.\r\nOtherwise, make honey (because there is a - honeycomb)." - grade3_Conditionals_1 BAD_instruction: "Use a loop to collect all of the nectar." - grade3_Conditionals_1_instruction: "I'm a hungry bee! \r\nHelp me collect - all of the nectar from the flowers using the fewest number of blocks." - grade3_Conditionals_10 BAD_instruction: "Gather nectar from the rows of flowers! - Use a nested loop." - grade3_Conditionals_10_instruction: "There's a lot happening here!\r\n\r\nUse - what you've learned to collect all of the nectar and then make the honey." - grade3_Conditionals_11 BAD_instruction: "Assessment: Use a `while` loop to - collect all of the nectar from these flowers." - grade3_Conditionals_11_instruction: "Let's put everything together!\r\n\r\nUse - what you've learned to help me collect nectar only from flowers that have - it, using as few blocks as possible. Don't forget to make honey at the end." - grade3_Conditionals_12_instruction: "This stair step pattern should look familiar. \r\n\r\nCan - you collect nectar only from the flowers that have some, using as few blocks - as possible?" - grade3_Conditionals_13_instruction: "Assessment: Collect all of the nectar. - Be careful not to try to collect nectar from a purple flower if it doesn't - have any." - grade3_Conditionals_2_instruction: "Look at all of that nectar!\r\n\r\nHelp - me collect the nectar and make the honey using as few blocks as you can. " - grade3_Conditionals_3_instruction: "Be careful not to collect nectar from a - purple flower if it doesn't have any. \r\nYou must first check if the nectar - is equal to 1 using the `if nectar` block." - grade3_Conditionals_4_instruction: "Check this flower with an \"if\" block - to see if there is any nectar available." - grade3_Conditionals_5_instruction: "Collect nectar from each flower only if - it has any." - grade3_Conditionals_6_instruction: "This field has red and purple flowers. - Red flowers have a known nectar amount, but purple flower nectar is unknown. - Collect all the nectar." - grade3_Conditionals_7_instruction: "Collect all the nectar from each flower." - grade3_Conditionals_8_instruction: "I wonder what's out there!\r\n\r\nHelp - me fly around the yard and collect nectar only from the flowers that have - some. " - grade3_Conditionals_9_instruction: "Help me find all of the nectar using as - few blocks as possible!" - grade3_Conditionals_TeacherIDo_instruction: "Check this flower with an \"if\" - block to see if there is any nectar available." - grade3_ConditionalsElse_1_instruction: "This cloud is blocking my view! Check - to see if there's a flower under the cloud, and only get nectar if there's - a flower. Be careful, it can change!" - grade3_ConditionalsElse_2_instruction: "More clouds! \r\n\r\nCheck underneath - every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade3_ConditionalsElse_3_instruction: "Now I just want to make honey. Some - of these clouds might have honeycombs under them. Be sure to check each cloud!" - grade3_ConditionalsElse_4_instruction: "Sometimes this cloud covers a flower, - and sometimes it covers a honeycomb! Use the if/else block to collect nectar - if it is a flower, else to make honey (because it is a honeycomb)." - grade3_ConditionalsElse_5_instruction: "There will be either a flower or a - honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block to collect - nectar if there is a flower.\r\nOtherwise, make honey (because there is a - honeycomb)." - grade3_ConditionalsElse_6_instruction: "I am not sure how much nectar this - flower has, but I know it has either 1, 2, or 3 nectar. \r\n\r\nCombine the - conditional blocks (`if` and/or `if/else`) to only get as much nectar as the - flower has. \r\n\r\nRemember, the amount of nectar can change each time you - run the puzzle!" - grade3_ConditionalsElse_7_instruction: "These flowers can have 3, 2, or 1 nectar. - \r\n\r\nComplete the `check purple flower` function and use it to collect - all of the nectar at the flowers." - grade3_ConditionalsElse_8_instruction: "Write the function for `check flower - make honey`. \r\n\r\nYour function should check if the purple flower has 3, - 2, or 1 nectar and get all of the nectar. \r\nThen, move forward and make - honey." - grade3_ConditionalsElse_9_instruction: "**Assessment:** This cloud is either - hiding a flower with one nectar or a honeycomb that needs one honey. \r\n\r\nComplete - the `get nectar or make honey` function, then call it to collect the nectar - or honey. \r\n" - grade3_ConditionalsElse_TeacherIDo_instruction: "There will be either a flower - or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block - to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade3_Debugging_1_instruction: "These blocks are really bugging me. Fix the - error(s) to collect all of the nectar." - grade3_Debugging_5_instruction: "That flower looks tasty! \r\n\r\nFix the error(s) - to collect all of the nectar. You can now use both run and step." - grade3_Debugging_6_instruction: "What a sweet challenge!\r\n\r\nFix the error(s) - to collect all of the nectar." - grade3_Debugging_7_instruction: "Fix the error(s) to collect all of the nectar - and make all of the honey." - grade3_Debugging_9_instruction: "\"Bee\" patient with this one!\r\n\r\nYou - will need to fix a couple of things in this program to collect all of the - nectar and make all of the honey." - grade3_Debugging_TeacherIDo_instruction: "These blocks are really bugging me. - Fix the error(s) to collect all of the nectar and make all of the honey." - grade3_Loops_1_instruction: "Can you help me collect the nectar from these - flowers? " - grade3_Loops_10_instruction: "Such a busy bee!\r\n\r\nHelp bee collect all - of the nectar and make all of the honey with the fewest blocks possible." - grade3_Loops_11_instruction: "The shape of this path is different than the - others. \r\n\r\nCan you collect all of the nectar using as few blocks as possible?" - grade3_Loops_12_instruction: "Can you find the quickest way for the bee to - collect all of the nectar and make all of the honey?" - grade3_Loops_2_instruction: "This time, use a loop to gather all of the nectar." - grade3_Loops_3_instruction: "Use a `repeat` loop to collect all of the nectar." - grade3_Loops_4_instruction: "Now use the `repeat` block to collect all of the - nectar and make all of the honey." - grade3_Loops_5_instruction: "What a beautiful field of flowers! Help the - bee visit each one. Can you find a way to do it with fewer than 7 blocks?" - grade3_Loops_6_instruction: "How many times can loops help you in this puzzle? \r\n\r\nLoops - are your friend! Use a few of them to complete this puzzle with the fewest - blocks possible." - grade3_Loops_7_instruction: "Those flowers look tasty!\r\n\r\nCollect nectar - from each of the flowers using the fewest blocks possible." - grade3_Loops_8_instruction: "Collect all the nectar and make all of the honey - using the fewest blocks possible." - grade3_Loops_9_instruction: "Collect nectar from each flower and make honey - at each honeycomb using the fewest blocks possible." - grade3_Loops_TeacherIDo_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." - grade3_maze_Loop1_instruction: "Assessment: Get me to the sunflower using - only 5 blocks! " - grade3_maze_loops1_instruction: "Get the zombie to the sunflower." - grade3_maze_loops2_instruction: "Get the zombie to the sunflower using the - fewest blocks possible! " - grade3_maze_loops2a_instruction: "Get the zombie to the sunflower using the - fewest number of blocks possible." - grade3_maze_loops3_instruction: "Get the zombie to the sunflower using only - the blocks available." - grade3_maze_loops4_instruction: "Get the zombe to the sunflower using the fewest - number of blocks possible!" - grade3_maze_loops5_instruction: "Get me to the sunflower using the fewest blocks - possible!" - grade3_maze_nestedLoops1_instruction: "Can you get me to the pig using 5 of - the same kind of blocks?" - grade3_maze_nestedLoops2_instruction: "Can you get to the pig by creating a - loop that uses only one `move forward` block inside of a `repeat`?" - grade3_maze_nestedLoops3_instruction: "Get me to the pig! You can only use - one move forward block this time" - grade3_maze_nestedLoops4_instruction: "In this puzzle, two `repeat` loops will - help you get to the pig with the fewest number of blocks!" - grade3_playLab_buildGame_1_instruction: "There is a new block in this lesson, - the `random integer` block. It is used to choose a random number. Write a - program where the robot says a random number between 1 and 100!" - grade3_playLab_buildGame_2_instruction: "We have already created a random integer, - \"j\", which is either 1 or 0. Now, we need to use it to decide whether our - card is red or black. Add a second if statement to the code under `when run` - to complete this code." - grade3_playLab_buildGame_3_instruction: "There are 13 different card values - in a deck of cards, so we'll need to have 13 options. Under the empty `when - run` block, add a line that sets the placeholder \"i\" to a random integer - between 1 and 13." - grade3_playLab_buildGame_4_instruction: "In a deck of cards, a card with value - 1 isn't actually called a \"1\", there's a special name. Write an if statement - that checks if the random number is a 1, then tell the computer that the value - of that card is \"Ace\"." - grade3_playLab_buildGame_5_instruction: "We can just call the cards from 2 - to 10 by their numbers, so add an if statement that checks whether the number - generated is within those numbers, then sets the card value to the number - generated." - grade3_playLab_buildGame_6_instruction: "There are three more cards with special - names in the deck. Add to your code so that a card number 11 is called a \"Jack\", - a 12 is a \"Queen\" and a 13 is a \"King\"" - grade3_playLab_buildGame_7_instruction: "You already know what color your card - is, but what suit is it? Add code to the conditional statement \"if card is - Red\" to choose hearts or diamonds." - grade3_playLab_buildGame_8_instruction: "Add the second part of the code to - choose a suit, copying what you made for a Red card." - grade3_playLab_buildGame_final_instruction: "Final stage for playlab conditionals - level (could hide entire function so that students just work with point scoring)" - grade3_playLab_buildGame_final2_instruction: "Here's all of your code to choose - a card - try adding some other fun features!" - grade3_robotFarmer_ConditionalsIntro4_instruction: "Help the farmer remove - this entire pile using a `while` loop." - grade3_robotFarmer_ConditionalsIntro_1_instruction: "*\"Hi, I'm a farmer. - I need your help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove - to the pile of dirt and use the `remove` block to remove it." - grade3_robotFarmer_ConditionalsIntro_10_instruction: "I'm working late, so - it's dark out, and I can't tell how large the piles are. Now I don't have - all the options I used to have on the while block. Move me along the field, - and if there is a pile, remove it" - grade3_robotFarmer_ConditionalsIntro_10a_instruction: "Flatten all of these - piles using as few blocks as possible. " - grade3_robotFarmer_ConditionalsIntro_11_instruction: "It's still dark outside. - Move me along the field. If there is a pile, remove it, and if there is a - hole, fill it in. Hint: use the dropdown menu of options on the \"if\" block." - grade3_robotFarmer_ConditionalsIntro_11a_instruction: "Flatten all of these - piles using as few blocks as possible. " - grade3_robotFarmer_ConditionalsIntro_2_instruction: "Next, move to the hole - and fill it with six shovelfuls of dirt, using the `fill` block." - grade3_robotFarmer_ConditionalsIntro_3_instruction: "*\"Move to the pile of - dirt and tell me how many shovelfuls to remove using as few blocks as possible.\"*" - grade3_robotFarmer_ConditionalsIntro_4_instruction: "*\"I don't know how much - dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using - a `while` loop." - grade3_robotFarmer_ConditionalsIntro_5_instruction: "Help me remove all of - this dirt. " - grade3_robotFarmer_ConditionalsIntro_6_instruction: "Remove all the piles of - dirt, using as few blocks as possible. The new options in the dropdown menu - on the \"while\" block tell me if I'm standing on a pile or a hole." - grade3_robotFarmer_ConditionalsIntro_7_instruction: "Look at all of those holes! Each - one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop - to easily fill them all!" - grade3_robotFarmer_ConditionalsIntro_8_instruction: "Fill in the hole at the - end of each of these paths." - grade3_robotFarmer_ConditionalsIntro_9_instruction: "**Challenge:** Fill all - of these holes using as few blocks as possible. " - grade3_robotFarmer_ConditionalsIntro_TeacherIDo1_instruction: "Help me fill - in all these holes with 5 shovelfuls of dirt. Hint: you can put a \"repeat\" - block inside the \"while\" block." - grade3_robotFarmer_ConditionalsIntro_TeacherIDo2_instruction: "I'm working - late, so it's dark out, and I can't tell how large the piles are. Now I - don't have all the options I used to have on the while block. Move me along - the field, and if there is a pile, remove it" - grade3_RunningFarm_1_instruction: "Use conditionals to make sure that you pick - all of the corn, but don't disturb the stalks where nothing is growing yet." - grade3_RunningFarm_10_instruction: "Collect all of the corn and lettuce, then - pick the pumpkin." - grade3_RunningFarm_11a_instruction: "Collect all of the corn and lettuce, then - pick the pumpkin." - grade3_RunningFarm_2_instruction: "Help the farmer collect both corn and lettuce - from the field." - grade3_RunningFarm_3_instruction: "*\"Corn, lettuce, AND pumpkins! Help me - harvest them all.\"*" - grade3_RunningFarm_4_instruction: "Help the farmer pick all of the lettuce - in each cluster before moving on to the next bunch." - grade3_RunningFarm_5_instruction: "This field has clusters of corn, lettuce, - and pumpkins all growing together. Can you collect them all?" - grade3_RunningFarm_6_instruction: "Can you figure out how to pick the pumpkin? Make - sure to collect all of the corn along the way!" - grade3_RunningFarm_7_instruction: "**Challenge:** Collect all of the corn and - lettuce, then pick the pumpkin." - grade3_RunningFarm_8_instruction: "Have wheat and potatoes planted randomly - at various growth stages. Now we introduce multiple while loops (stacked) - nested inside a loop. The two while loops in the solution represent different - while loops (while there is potato and while there is wheat)" - grade3_RunningFarm_9_instruction: "Add Weeds element. Weeds start out in random - spots in the field and spread more and more rapidly as time goes on.. This - puzzle is the culminating game-like puzzle. Students should have the event - blocks (up, down, left, right, spacebar) available in the toolbox to use if - they want. The entire field should be planted randomly with mostly wheat, - potatoes, and a few weeds." - grade3_RunningFarm_TeacherIDo_instruction: "Teacher I Do: Show students how - they can use loops and conditionals to plant and harvest 2 rows of crops." - grade3_RunningFarm_TeacherIDo2_instruction: "Teacher I Do: Show students how - to use loops to harvest many crops." - grade4_arist_functions_star0_instruction: "Have you drawn something like this - star before? Practice making it one more time by adding a turn and a repeat - block." - grade4_arist_nested_loop_circles1_instruction: "Assessment: Use a nested loop - to complete the design." - grade4_arist_nested_loop_flags1_instruction: "Loop the given code to create - a windmill." - grade4_arist_nested_loop_polygons1_instruction: "Loop this design 10 times. - \r\n\r\nHow much do you have to turn each time you loop?" - grade4_arist_nested_loop_polygons2_instruction: "Loop this shape 6 times. \r\n\r\nHow - much do you have to turn each time you loop? " - grade4_arist_nested_loop_squares1_instruction: "Can you draw these 10 squares - of this sidewalk using a nested loop? Each square is 30 pixels." - grade4_arist_nested_loop_triangles2_instruction: "Now nest this loop inside - another loop to draw 10 triangles. This is called a \"nested\" loop. " - grade4_arist_nested_loop_triangles3_instruction: "Can you draw a hexagon by - looping the triangle code?" - grade4_arist_nested_loop_triangles4_instruction: "Draw the teeth in the alligator's - mouth!" - grade4_arist_nested_loop_triangles5_instruction: "Create a sun by nesting the - starter code in another loop.\r\n\r\nTo get this cool design with a hollow - center, you'll need to jump forward by the length of the triangle before - turning." - grade4_arist_nested_loop_triangles6_instruction: "Can you draw these 36 triangles - using a nested loop?" - grade4_artist_freeplay_instruction: "You are on your own now! Try out any of - the functions you used in this stage or try this new function that will automatically - give your image a beautiful background color! This creation will be saved - to your Projects dashboard so that you can easily edit it any time!" - grade4_artist_functions1_instruction: "Help the zombie draw glasses using squares - with sides of 100 pixels. \r\nThe bridge between the glasses is 75 pixels - long." - grade4_artist_functions2_instruction: "Functions let you define new blocks! - \r\n\r\nWe've moved the blocks needed for drawing a square into a function - called `draw a square`. This time, use the `draw a square` function to create - the glasses. \r\n\r\nThe squares are 75 pixels apart." - grade4_artist_functions2a_instruction: "Create this image using only the blocks - provided." - grade4_artist_functions3a_instruction: "Create this image using only the blocks - provided." - grade4_artist_functions3b_instruction: "This time, use lines of 8 hexagons - with 25 pixel sides." - grade4_artist_functions_challenge_instruction: "Use the suggested functions - to draw four rows of hexagons. Notice how our even numbered rows are shifted - to the right?" - grade4_artist_functions_challenge2_instruction: "Use the suggested functions - to draw four rows of hexagons. Notice how our even numbered rows are shifted - to the right?" - grade4_artist_functions_freeplay_instruction: "You are on your own now! Try - out any of the functions you used in this stage or try this new function that - will automatically give your image a beautiful background color! This creation - will be saved to your Projects dashboard so that you can easily edit it any - time!" - grade4_artist_functions_stars0_instruction: "You can make this drawing by adding - a repeat block." - grade4_artist_functions_stars1_instruction: "Now that you can draw a star, - try drawing four stars!" - grade4_artist_functions_stars2_instruction: "Draw only those three stars to - finish this puzzle." - grade4_artist_functions_stars3_instruction: "That last one is tough if you - only use loops. Let's try drawing the same picture using this new 'function' - that will help to **draw a star**." - grade4_artist_functions_windows0_instruction: "Make this window by drawing - a square, then turning 90 degrees before drawing another, and so on." - grade4_artist_functions_windows1_instruction: "If you can draw one window, - you can draw three! Try using your choice of a nested loop or a function here. - Don't forget the jump block!" - grade4_artist_functions_windows2_instruction: "Try solving this puzzle by creating - `draw a window` and calling it five times. Watch out for the door!\r\n\r\n- - The top windows are 50 pixels away from each other. \r\n- The bottom windows - are 100 pixels below the top set." - grade4_artist_functionsChallenge0_instruction: "**Challenge:** Create as many - functions as you think you need to make this drawing of 50 pixel squares." - grade4_artist_nested_loop_circles1_instruction: "Assessment: Use a nested loop - to complete the design." - grade4_artist_nested_loop_flags1_instruction: "Loop the given code to create - a windmill." - grade4_artist_nested_loop_polygons1_instruction: "Loop this design 10 times. - \r\n\r\nHow much do you have to turn each time you loop?" - grade4_artist_nested_loop_polygons2_instruction: "Hi, I'm the Artist! Let's - create some drawings together! For starters, try repeating this shape 6 times. - \r\n\r\nHow much do you have to turn each time you loop? " - grade4_artist_nested_loop_squares1_instruction: "Can you draw these 10 squares - of this sidewalk using a nested loop? Each square is 30 pixels." - grade4_artist_nested_loop_triangles1_instruction: "Complete the code to draw - these triangles. The first one is done for you. Hint: 3 triangles in a - 360 degree rotation." - grade4_artist_nested_loop_triangles2_instruction: "Let's make a quick adjustment - to get completely different image! \r\nHint: ? × 10 = 360" - grade4_artist_nested_loop_triangles3_instruction: "Can you draw a hexagon by - looping the triangle code?\r\nHint: 6 × ? = 360" - grade4_artist_nested_loop_triangles4_instruction: "Hi! I'm the Artist. Let's - try some different types of drawings together. Can you help me draw the bottom - teeth in the alligator's mouth?" - grade4_artist_nested_loop_triangles5_instruction: "Create a sun by nesting - the starter code in another loop.\r\n\r\nTo get this cool design with a hollow - center, you'll need to jump forward by the length of the triangle before - turning." - grade4_artist_nested_loop_triangles6_instruction: "Can you draw these 36 triangles - using a nested loop?" - grade4_artist_nestedLoops_challenge_instruction: "Click here to see the full - instructions again!\r\n\r\nHere is the code for an interesting shape. What - happens when you repeat it multiple times, turning between each iteration? Notice - that the turns in this shape add up to 420 degrees, which means that when - your artist is done drawing, it will be facing a different direction than - when you started. That new direction is exactly 60 degrees to the right of - where you began." - grade4_artist_nestedLoops_challenge2_instruction: "Now for a challenge! Feel - free to use trial and error. You are not expected to get the image perfect - the first time. Want to see more hints? Click here!" - grade4_artist_parameters_squares1_instruction: "Click \"edit\" to fill in the - function definition of \"draw a square\" and add a parameter. It should take - a length parameter, just like the triangle. This time, draw 3 squares: 25, - 50 and 75 pixels in length, each 100 pixels apart." - grade4_artist_parameters_triangles1_instruction: "Today, we're going to try - out a different, more powerful function editor. See if you can figure out - how to edit the function 'draw a triangle' to find the bugs." - grade4_artist_parameters_triangles2_instruction: "Do you notice anything different - about these function blocks? Click “Run” to see what happens." - grade4_artist_parameters_triangles2b_instruction: "Can you complete this drawing? - The sides of each triangle are 25 pixels larger than the last. The first - triangle has 25 pixel sides." - grade4_artist_parameters_triangles3_instruction: "Can you complete this drawing? - The sides of each triangle are 25 pixels larger than the last. The first - triangle has 25 pixel sides." - grade4_artist_parameters_triangles4_instruction: "The code for this triangle - function is broken. Can you edit the function to fix it, and then make triangles - of length 25, 50, and 75?" - grade4_artist_parameters_trianglesx_instruction: "Can you complete this drawing? - The sides of each triangle are 25 pixels larger than the last. The first - triangle has 25 pixel sides." - grade4_bee_conditionals_nested_loops_instruction: "Collect all of the nectar. - You can only collect nectar from flowers, but you can check any space to see - if there is a flower." - grade4_bee_conditionals_new1_instruction: "Collect all of the nectar. You can - only collect nectar from flowers, but you can check any space to see if there - is a flower." - grade4_bee_conditionals_new1a_instruction: "Help the bee make all of the honey. - You can only make honey at a honeycomb, but you can check any space to see - if there is a honeycomb." - grade4_bee_conditionals_new2_instruction: "Can you help the bee collect the - nectar from the flowers? You can only collect nectar from flowers, but you - can check any space to see if there is a flower." - grade4_bee_conditionals_new2a_instruction: "Make all of the honey. It's actually - more efficient to check each space for a honey comb, even when you know some - are empty." - grade4_bee_conditionals_new3a_instruction: "Collect all of the nectar or make - all the honey. You can only collect nectar from flowers and make honey from - honeycombs. Check any space to see if there is a flower or honeycomb." - grade4_bee_conditionals_new3b_instruction: "Uh oh! The bee is not sure if he - should collect nectar or make honey. Can you help him out?" - grade4_bee_conditionals_new3c_instruction: "Help the bee collect all of the - nectar and make all of the honey! Hint: Try using one loop inside of another - loop." - grade4_bee_conditionals_quantum1_instruction: "This cloud is blocking my view! - Check to see if there's a flower under the cloud, and only get nectar if - there's a flower. Be careful, it can change!" - grade4_bee_conditionals_quantum2_instruction: "More clouds! \r\n\r\nCheck underneath - every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade4_bee_conditionals_quantum3_instruction: "Now I just want to make honey. - Some of these clouds might have honeycombs under them. The way we've been - going about things won't work here. Be sure to check if a honeycomb is hiding - behind each cloud!" - grade4_bee_conditionals_quantum4_instruction: "Sometimes this cloud covers - a flower, and sometimes it covers a honeycomb! Use the if/else block to collect - nectar if it is a flower, else to make honey (because it is a honeycomb)." - grade4_bee_conditionals_quantum5_instruction: "There will be either a flower - or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block - to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade4_bee_functions_instruction: "Have we met before? I'm the farmer! Please - help me remove this pile of dirt and fill this hole." - grade4_bee_functions1_instruction: "Collect all the nectar from each flower." - grade4_bee_functions10_instruction: "Create a function to collect all of the - nectar from each flower." - grade4_bee_functions11_instruction: "Solve this function by creating a function - to turn, move forward and make all of the honey, then return the bee to where - it started and turn back." - grade4_bee_functions2_instruction: "Functions are blocks of code that perform - a task. Use the \"get 2 nectar\" function to collect the nectar from each - flower." - grade4_bee_functions3_instruction: "Build the `get 5` function to use in this - puzzle." - grade4_bee_functions4_instruction: "Use the `move and get nectar` function - to collect all of the nectar." - grade4_bee_functions5_instruction: "This puzzle will be deleted!" - grade4_bee_functions6_instruction: "Now write the function to collect nectar - from the flowers." - grade4_bee_functions7_instruction: "Create a function and call it to collect - nectar at each flower and make honey at each honeycomb." - grade4_bee_functions8_instruction: "Create your own function that goes down - a path, gets nectar, makes honey, and then returns the bee to the top of the - path. Then collect all the nectar and make all the honey!" - grade4_bee_functions9_instruction: "Create a function that collects all of - the nectar from each flower." - grade4_bee_nestedLoops0_instruction: "Use a loop to collect all of the nectar." - grade4_bee_nestedLoops1_instruction: "Collect all of the nectar from each flower." - grade4_bee_nestedLoops2_instruction: "**Challenge:** Figure out how to get - all of the nectar using only the blocks available." - grade4_bee_nestedLoops2a_instruction: "Collect all of the nectar using as - few blocks as possible." - grade4_bee_nestedLoops3_instruction: "Collect all of the nectar by creating - a nested loop." - grade4_bee_nestedLoops4_instruction: "Collect all of the nectar from each flower - and make honey at the honeycomb. " - grade4_bee_nestedLoops_assess_instruction: "**Assessment:** Collect all of - the nectar and make all of the honey using loops.\r\n\r\nHint: There are several - possible solutions!" - grade4_designProcess_vid_instruction: "Prepare to build a project within some - given parameters." - grade4_farmer_functions1_instruction: "*\"Have we met before? I'm the farmer!\"*\r\n\r\nHelp - the farmer get to the pumpkins and pick them." - grade4_farmer_functions2_instruction: "Take the code you just wrote it and - use it to define a new function. Call the function twice to complete the puzzle." - grade4_farmer_functions3_instruction: "Try using a couple of repeat blocks - within your function definition." - grade4_farmer_functions4_instruction: "Swap out your repeat loops for more - versatile while loops." - grade4_farmer_functions5_instruction: "Things are going to start getting trickier, - but don't give up! You can use the same while loops to check both spaces - in each pass." - grade4_farmer_functions6_instruction: "The paths are a different length. You - can use a different type of while loop to keep the pattern going as long as - you need to." - grade4_frozen_freeplay_instruction: "You've officially become a master artist! - Create a winter wonderland." - grade4_frozen_functions0_instruction: "Can you figure out what number to replace - the question marks with to draw a circle?" - grade4_frozen_functions1_instruction: "Use the new “draw a circle” function - to create 10 overlapping circles. Don't forget to jump forward between circles." - grade4_frozen_functions1a_instruction: "Use the new “Create a circle” block - to create 10 overlapping circles. Don't forget to jump forward between circles." - grade4_frozen_functions2_instruction: "Now let's create 20 overlapping circles, - turning 18 degrees between each circle." - grade4_frozen_functions3_instruction: "Here's a ”Create circle” block that - can make circles of different sizes. Can you use this to create a small circle - of size 5 and a larger circle of size 10?" - grade4_frozen_functions4_instruction: "Intricate snow patterns can be created - with very simple shapes. Can you make a pattern by repeating 5 circles of - size 5 and 5 circles of size 10?" - grade4_frozen_nested_loop_diamonds1_instruction: "Let’s use a repeat block - to create a rhombus. Like a square, all sides are equal length, but the angles - are different. This one has 60 degree and 120 degree angles instead of all - 90 degree angles." - grade4_frozen_nested_loop_diamonds2_instruction: "Did you know every snowflake - is a different shape? Let's create a new snowflake by using another “Repeat\" - block to repeat a parallelogram 4 times, turning right by 90 degrees between - each parallelogram." - grade4_frozen_nested_loop_diamonds3_instruction: "Now, let's create a new - snowflake by using the repeat block to repeat a parallelogram 10 times, turning - right by 36 degrees between each one." - grade4_frozen_nested_loop_rectangle1_instruction: "Hi, I’m Anna of Arendelle! - Let’s use a repeat block to create a rectangle. This one is 200 pixels long - and 100 pixels tall. All of the corners are 90 degree angles." - grade4_frozen_square_instruction: "Hi, I’m Anna of Arendelle! Let’s make a - square with the “Repeat” block, which uses fewer blocks. How many times (???) - should the “Repeat” block loop the blocks inside it to make a square?" - grade4_frozen_square_loop1_instruction: "Hi, I’m Anna of Arendelle! Let’s make - a square with the “Repeat” block, which uses fewer blocks. How many times - (???) should the “Repeat” block loop the blocks inside it to make a square?" - grade4_frozen_square_loop2_instruction: "Let's create three squares, turning - after each square. Be sure to turn by 120 degrees before each new square." - grade4_frozen_square_loop3_instruction: "Can you create a snowflake using the - “Repeat” block to make a square 10 times, and the “Turn” block to turn 36 - degrees between each square?" - grade4_playlab_freeplay_instruction: "It's free play time! Have fun with all - the blocks in your tool box. " - grade4_playLab_proj_example1_instruction: "instructions" - grade4_playLab_proj_example1a_instruction: "Take a look at this project. Do - you see how it was made?" - grade4_playLab_proj_example2a_instruction: "Take a look at this project. Do - you see how it was made?" - grade4_playlab_test_instruction: "Use the right arrow to throw pie.\r\n\r\nIn - our game, how should we score points? Add 1 to your \"points\" variable each - time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" - event to trigger an update to your score. You can increment your variable - by setting \"points = points + 1.\" Get your score up to 10 (going one at - a time!) to pass the level." - grade4_playlab_test2_instruction: "Here's a function called `jump` that causes - your main character to jump up 100 pixels. Run the program and use the jump - function to collect all of the flags by moving the dog with the arrow keys." - grade4_prompt_test_instruction: "This is a test play lab level." - grade4_review_artist1_instruction: "Hi, I'm an artist. You can write code - to make me draw almost anything. Use a few blocks to make me draw over the - grey lines in the picture. (Each line is 100 pixels long)" - grade4_review_artist2_instruction: "This house needs a roof! Draw the triangle. Hint: - all three sides are the same length." - grade4_review_artist3_instruction: "The jump block moves the artist without - drawing. Draw the dashed line using both the `jump forward` and `move forward` - blocks. Each line is 50 pixels long." - grade4_review_bee1_instruction: "Now use the `repeat` block to collect all - of the nectar and make all of the honey." - grade4_review_bee2_instruction: "Collect nectar from each flower and make honey - at each honeycomb using the fewest blocks possible." - grade4_review_bee3_instruction: "Such a busy bee!\r\n\r\nHelp bee collect all - of the nectar and make all of the honey with the fewest blocks possible." - grade4_scaffolded_project1_instruction: "It is amazing how much you have learned! - Let's put them together to make a game, step by step." - grade4_scaffolded_project2_instruction: "Now let's get things moving! Use - event handlers and actions to make your hero move.\r\n\r\nWe've added these - blocks to your tool box to help you.\r\n" - grade4_scaffolded_project3_instruction: "Now that your game has a hero, it's - time to start adding other actors and assigning them behaviors. \r\n\r\nAdd - two or more additional actors to your game and make them move. Do you want - to have an actor patrol back and forth? Try using a these new blocks to bring - these other components of your game to life!" - grade4_scaffolded_project4_instruction: "Just getting the actors moving is - a great step, but we need to program some interactions to make this really - feel like a game. A simple way to do this is to add or remove points when - actors collide with projectiles or each other. Find some interesting ways - to change the score in your game." - grade4_scaffolded_project4a_instruction: "Just getting the actors moving is - a great step, but we need to program some interactions to make this really - feel like a game. A simple way to do this is to add or remove points when - actors collide with projectiles or each other. Find some interesting ways - to change the score in your game." - grade4_scaffolded_project5_instruction: "Now spend some time making sure the - game works the way you want. Try including a way to win or lose your game." - grade4_scaffolded_project6_instruction: "You've finished! Now you can play - your game or share it with your friends and classmates!" - grade5_artist_binary1_instruction: "Binary is a way of representing information - using only two options. Here, we're going to use the options \"off\" (represented - by the number 0) and \"on\" (represented by the number 1). \r\n\r\nWe've - provided you with a grid of \"pixels\" that you can walk through and make - designs by turning on only certain squares. Can you have the artist draw - \"01010101\" in binary in the first row?" - grade5_artist_binary10_instruction: "Click here to see hints." - grade5_artist_binary11_instruction: "Free Play: Here's a blank canvas for - you to draw on. Have fun!" - grade5_artist_binary2_instruction: "Here's a function that takes a binary - string of 1's and 0's and instructs the artist to follow them from left - to right, top to bottom. The artist will fill-in the squares when it sees - a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how - the artist uses binary to draw this pattern." - grade5_artist_binary3_instruction: "Which of these binary strings could you - loop 8 times to draw this image?" - grade5_artist_binary4_instruction: "Can you draw this pattern by looping just - three binary digits (0s and 1s)?" - grade5_artist_binary5_instruction: "Each binary string represents one row of - this picture. Can you rearrange them so it draws a smiley face instead of - a frowny face?" - grade5_artist_binary6_instruction: "Which 6 digit binary string, repeated 11 - times, will draw this image?" - grade5_artist_binary7_instruction: "What is the shortest binary string that - you can repeat to draw this image?" - grade5_artist_binary8_instruction: "Finish this drawing." - grade5_artist_binary9_instruction: "Here's a higher resolution canvas to draw - on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we start to get - creative with the bits?" - grade5_artist_for_loops1_instruction: "Use a `for` loop to draw this triangle - that is 50 pixels wide. If you count from 1 to 3 by 1s, you can use this just - like a `repeat` loop." - grade5_artist_for_loops10_instruction: "Can you figure out how to use all of - the things you've learned to create this image?\r\n\r\nNeed a hint? Click - here." - grade5_artist_for_loops1a_instruction: "Try using a `for loop`to create this - triangular design. Don't worry that the numbers are different than the last - puzzle. As long as you turn by the right number of degrees, the artist will - make the correct shape!" - grade5_artist_for_loops1b_instruction: "Experiment with the `for` loop and - play with the `counter` variable." - grade5_artist_for_loops2_instruction: "Use a `repeat` inside of a `for` loop - to create this stack of triangles that goes from 50 pixels to 100 pixels." - grade5_artist_for_loops3_instruction: "These triangles go from 20 pixel sides - to 200 pixel sides, and each triangle is 20 pixels larger than the last. " - grade5_artist_for_loops4_instruction: "These squares start at 15 pixels long, - the largest is 300 pixels long, and each square is 15 pixels larger than the - last. " - grade5_artist_for_loops5_instruction: "Just one little change to the code from - the last image can create this drawing. Can you figure out what that change - is?\r\n\r\nHint: You need to remove something!" - grade5_artist_for_loops6_instruction: "If you turn a little bit more or less - than you normally would for a shape, it creates a neat effect. Try using some - of the code from the last level, but turning 89 degrees to create this twisted - square spiral." - grade5_artist_for_loops7_instruction: "Make three small changes to the code - from the last level to get this!" - grade5_artist_for_loops7a_instruction: "Take the angle down to 72 degrees to - get a spiraled pentagon." - grade5_artist_for_loops7b_instruction: "Use the counter inside the `set alpha` - block to get this faded center.\r\n(This hexagon pattern was made using a - 60 degree turn.)" - grade5_artist_for_loops8_instruction: "Remember back in a previous stage when - we used a variable to control the number of sides in a shape? We are going - to do the same thing with the `counter` variable now. This pattern starts - with a triangle and adds one side at a time until it draws a decagon (10 sides). - Each side should be 100 pixels long. " - grade5_artist_for_loops9_instruction: "Let's put it all together! Using your - knowledge of `for` loops and the `counter` variable, create this drawing where - each shape has two more sides than the last. Make sure that each side is - 10 times as long as the number of sides in the polygon.\r\n\r\nVery little - of the code has been provided for you." - grade5_artist_for_loopsfreeplay11_instruction: "Free-Play Inspiration: You've - now learned everything you need to know to make a pattern like this! If this - picture inspires you, try to make something similar. Otherwise, create something - all your own.\r\n\r\nNeed a hint? Click here." - grade5_artist_for_loopsfreeplay12_instruction: "Free Play: Try using the `counter` - variable with other drawing elements to make magical images like this one." - grade5_artist_freeplay_instruction: "Create your own project! This creation - will be saved to your Projects dashboard so that you can easily edit it any - time!" - grade5_artist_functionparameters10_instruction: "Free Play Inspiration: You've - now learned everything you need to know to make a pattern like this! If this - picture inspires you, try to make something similar. Otherwise, create something - all your own.\r\n \r\nWant to know how our inspiration pattern was made? " - grade5_artist_functionparameters11_instruction: "Freeplay: Below there are - functions you've written, and more for you to play with. Draw something awesome! - Play with the pen width to see how different your drawings look!" - grade5_artist_functionparameters7_instruction: "This image is similar to the - last. Can you use a `for` loop with your function to make this design?" - grade5_artist_functionparameters8_instruction: "The triangle has 21 pixel sides, - and the sides in each following shape are 7 pixels longer than the last. Use - the `multiplication` block to make this all happen with just one function - call. Be sure to jump 100 pixels between polygons." - grade5_artist_functionparameters9_instruction: "Challenge: Edit `draw a spiral - edge` to use `length` and `sides` parameters, then recreate these shapes." - grade5_artist_functionparameters9a_instruction: "Finish off the `draw a spiral - edge` function to also ask for a minimum length for the center of the spiral." - grade5_artist_functionparameters9b_instruction: "Can you figure out how to - make this drawing using the function that you just created?" - grade5_artist_functionparameters_6_instruction: "Edit this function to add - a parameter for the number of sides in your polygon.\r\n\r\nThe sides of all - the shapes are 100 pixels long." - grade5_artist_parameters_squares1_instruction: "Click \"edit\" to fill in the - function definition of \"draw a square\" and add a parameter. It should take - a length parameter, just like the triangle. This time, draw 3 squares: 25, - 50 and 75 pixels in length, each 100 pixels apart." - grade5_artist_parameters_squares1a_instruction: "This program looks okay from - here, but something isn't working right. See if you can figure out how to - edit the function 'draw a square' to find the bug." - grade5_artist_parameters_squares2_instruction: "Create a function called 'draw - a square' and use it to outline these four boxes. Make sure to add a parameter - for 'length'! Starting from the upper right, the box widths are 50, 100, - 150, and 200." - grade5_artist_parameters_squares2a_instruction: "Edit the function to accept - a parameter called `length`." - grade5_artist_parameters_stars1_instruction: "That last one is tough if you - only use loops. Let's try drawing the same picture using this new 'function' - that will help to **draw a star**." - grade5_artist_parameters_triangles1_instruction: "This program looks okay from - here, but something isn't working right. See if you can figure out how to - edit the function 'draw a square' to find the bug." - grade5_artist_parameters_triangles1a_instruction: "Today, we're going to try - out a different, more powerful function editor. See if you can figure out - how to edit the function 'draw a triangle' to find the bugs." - grade5_artist_parameters_triangles1aa_instruction: "Click \"edit\" to fill - in the function definition of \"draw a triangle\" and add a parameter. It - should take a length parameter, just like the triangle. This time, draw 3 - triangles: 25, 50 and 75 pixels in length, each 100 pixels apart." - grade5_artist_parameters_triangles2_instruction: "This drawing can be easily - created using a new type of function that includes a parameter. The sides - of each triangle are 25 pixels larger than the last. The first triangle has - 25 pixel sides. Replace the '???' with the correct values to draw the picture." - grade5_artist_parameters_triangles2a_instruction: "Do you notice anything different - about these function blocks? Click “Run” to see what happens." - grade5_artist_parameters_triangles3_instruction: "The code for this triangle - function is broken.\r\n\r\nCan you edit the function to fix it, and then make - triangles of length 150, 75, 25?" - grade5_artist_parameters_triangles4_instruction: "The code for this triangle - function is broken. Can you edit the function to fix it, and then make triangles - of length 25, 50, and 75?" - grade5_artist_parameters_trianglesy_instruction: "The code for this triangle - function is broken.\r\n\r\nCan you edit the function to fix it, and then make - triangles of length 150, 75, 25?" - grade5_artist_variables_freeplay10_instruction: "Free Play: Experiment with - the number of sides this shape has. Can you change the algorithm so that the - overall size of the shape stays the same, no matter how many sides it has? - Hint: If you divide your starting length by the number of sides, the length - of each side will get shorter as the number of sides gets higher." - grade5_artist_variables_freeplay14_instruction: "Free Play: Check it out! Now - your algorithm is nested within one more loop. Experiment with changing the - values of your two variables to draw cool patterns.\r\n\r\nFor even more effect, - try playing with color! Use random colors inside loops to see how it changes - your design." - grade5_artist_variables_freeplay15_instruction: "Want a second peek at the - inspiration design or the hints? Click here!\r\n\r\nOtherwise, make a design - all your own!" - grade5_artist_variables_freeplay16_instruction: "Still playing? Here is a - blank canvas where you can create whatever you want!" - grade5_artist_variables_hexagons1_instruction: "Let's try it again! \r\n\r\nCan - you set the `length` variable to 60 to make this cool design with hexagons?" - grade5_artist_variables_letterT11_instruction: "Here’s more complicated code - using the same concepts from the last puzzle - what should you set the \"sides\" - variable to in order to draw this picture made of squares?" - grade5_artist_variables_new1_instruction: "Here is a program that will create - an image. There are a few things that are wrong with it." - grade5_artist_variables_octagons13_instruction: "When a shape has lots of sides, - each side needs to be shorter if you want the whole pattern to fit on the - screen. \r\nLet's recreate the algorithm for this amazing pattern, but instead - of manually setting the `length` variable, let's use a math block with the - `sides` variable inside to make sure that each shape fits correctly. The perimeter - of each polygon is 300 pixels.\r\nNeed some hints? Click here." - grade5_artist_variables_pentagon8_instruction: "Use what you learned in the - last puzzle to create this hexagon using the \"sides\" variable.\r\n\r\nSee - how you could change just one value to draw a triangle, square, pentagon, - or octagon?" - grade5_artist_variables_pentagon9_instruction: "Now, recreate the algorithm - from the last level and create a pentagon with sides of length 150." - grade5_artist_variables_pentagons1_instruction: "Draw this pattern of pentagons - with 100 pixel sides by setting the right value for `length` and dropping - the `length` variable into all of the the correct places. \r\n\r\nSee how - you only have to set the value for `length` once, and the code uses the right - value everywhere?" - grade5_artist_variables_pentagons12_instruction: "Let's set the \"sides\" - variable to 5. The more sides we add to this algorithm, the bigger this whole - pattern gets! Notice that there is another variable called \"length\". We - can now use that wherever we have a \"move forward.\" Set the \"length\" variable - to 75 for this shape." - grade5_artist_variables_rectangle6_instruction: "Now I want to make a rectangle - that is twice as tall as it is wide. We've got a variable called \"width\" - that needs to be set to 100. Can you use the math blocks to complete the code?" - grade5_artist_variables_square7_instruction: "Here’s some code that can draw - any regular polygon. There’s a new variable called sides that is set to 4. - Can you use the sides variable (along with the math block) to turn the right - amount regardless of how many sides there are in the polygon?\r\n\r\nClick - here to go back to the hint!" - grade5_artist_variables_triangles2_instruction: "Instead of using \"move forward - by 150,\" the \"move\" block is now referencing a variable called \"length.\" - Can you set \"length\" to 150 to draw this new triangle?" - grade5_artist_variables_triangles3_instruction: "Drag a number block to both - the `set length` block and the `repeat _ times` block to draw a set of 50 - pixel triangles. " - grade5_bee_for_loops1_instruction: "Use a loop to collect the nectar from each - flower." - grade5_bee_for_loops10_instruction: "What should your increment be to collect - 15, then 12, then 9, 6, 3 nectar?" - grade5_bee_for_loops11_instruction: "**Challenge:** Take what you've learned - about `for` loops and try to solve this problem. " - grade5_bee_for_loops2_instruction: "Add the code necessary to make sure the - bee collects all the nectar. Look at how much code you need for this puzzle! - (We'll learn a simpler way in the next puzzle.)" - grade5_bee_for_loops3_instruction: "Try this puzzle using the `for` loop with - `counter` variable and see how much shorter your code becomes." - grade5_bee_for_loops4_instruction: "Help the bee collect all of the nectar." - grade5_bee_for_loops6_instruction: "You can also use a \"for loop\" to count + CSD Hackathon Pt 1_instruction: "(Click to see full instructions)" + CSD Hackathon Pt 2_instruction: "(Click to see full instructions)" + CSD Hackathon Week 1_instruction: "(Click to see full instructions)" + CSD Hackathon Week 2_instruction: "(Click to see full instructions)" + CSD U3 Background Discuss_instruction: "Here's a program that looks pretty + similar to what you've been writing, but may behave quite differently. You'll + want to stop and discuss with the class before moving on." + CSD U3 Background Experiment_instruction: "Here's a program that looks pretty + similar to what you've been writing, but may behave quite differently. You'll + want to stop and discuss with the class before moving on." + CSD U3 Boolean Modify_instruction: "Modify the code so that all of the console.log + commands print true" + CSD U3 Boolean Predict_instruction: "What do you think this code will do when + it is run? Predict what each console.log() command will print, then run the + program to check your predictions." + CSD U3 Draw Loop Discuss_instruction: "Here's a program that looks pretty + similar to what you've been writing, but may behave quite differently. You'll + want to stop and discuss with the class before moving on." + CSD U3 Draw Loop Experiment_instruction: "Try using some of the other shape + functions you've learned in the draw loop. What happens when you use randomNumber() + to generate some of the inputs?You'll want to stop and discuss with the class + before moving on." + CSD U3 Expressions calculator_instruction: "Add the numbers 1 through 10. Multiply + the numbers 1 through 10. Check your answers with a neighbor." + CSD U3 Frame Rate_instruction: "Slow down Gamelab Gary's animation with frameRate()" + CSD U3 Keypress Boolean_instruction: "Modify the code so that all of the console.log + commands print true" + CSD U3 Keypress Watchers_instruction: "Modify the code so that all of the console.log + commands print true" + CSD U3 Random Animation_instruction: "Use randomNumber() to animate Gary's + mouth." + CSD U3 Random Choice_instruction: "Use the randomNumber() block to generate + either 0 or 1" + CSD U3 Random Color_instruction: "Could you use randomNumber() to pick random + colors as well? Try setting one or more of the channels in the rgb block with + a random number. What should the maximum value be?" + CSD U3 Random Intro_instruction: "What do you think this code will do when + it is run? Make a prediction, then run this code 5 - 10 times, recording the + output each time. Share your results with your neighbor." + CSD U3 Random Min Max_instruction: "Using console.log() write a program that + randomly returns a number in a range you define." + CSD U3 Random Width Height_instruction: "Pick a shape block and use calls to + randomNumber() in place of one or more of the parameters. Maker sure you run + it a few times so you can see the effect of randomization." + CSD U3 Simple Drawing - Animation 2_instruction: "Use randomNumber() on the + x position and width of your cloud ellipses to introduce a bit of animation." + CSD U3 Simple Drawing - Animation_instruction: "Use randomNumber() on the x + position and width of your cloud ellipses to introduce a bit of animation." + CSD U3 Simple Drawing - Background_instruction: "Put all of your code into + a draw() loop and then add set the background to blue with the background() + block." + CSD U3 Simple Drawing - Personal Animation_instruction: "DO This" + CSD U3 Sprites intro sprites_instruction: "Do This" + CSD U3 Variable Arithmetic pt2_instruction: "Predict: What two numbers will + be displayed in the console?" + CSD U3 Variable Arithmetic_instruction: "Change the value \"size\" initialized + to make a larger square." + CSD U3 Variable Incrementation pt2_instruction: "Predict: What two numbers + will be displayed in the console?" + CSD U3 Variable Incrementation_instruction: "Predict: What two numbers will + be displayed in the console?" + CSD U3 Variables CHALLENGE gamelab gary_instruction: "Use variables to animate + Game Lab Gary" + CSD U3 Variables Initialize_instruction: "Predict: What will get displayed + in the console?" + CSD U3 Variables Intro_instruction: "Create your own variable " + CSD U3 Variables Random_instruction: "Predict: What will get displayed in the + console?" + CSD U3 Variables Reassign pt2_instruction: "Create and assign a new variable + in a single line." + CSD U3 Variables Reassign_instruction: "Predict: What will get displayed in + the console?" + CSD U3 Variables Square Random Loop_instruction: "Test your predictions from + the last level." + CSD U3 Variables Square Random_instruction: "Change the value \"size\" initialized + to make a larger square." + CSD U3 Variables Square_instruction: "Change the value \"size\" initialized + to make a larger square." + CSD U3 Variables TEMPLATE square_instruction: "Change the value of petalSize + multiple times. How does it change your drawing?" + CSD U3 Variables create and assign_instruction: "Create and assign size in + a single line of code." + CSD U3 Variables draw loop newVars_instruction: "Extend this project to create + your own random art visualization with variables." + CSD U3 Variables draw loop rgb_instruction: "Assign the variables x1 and y1 + random values inside the draw loop and use them to control where the square + is drawn." + CSD U3 Variables draw loop xy_instruction: "Assign the variables x1 and y1 + random values inside the draw loop and use them to control where the square + is drawn." + CSD U3 Variables eyeBrows_instruction: "Predict what will happen when you move + the assignment of eyeSize inside the draw loop. Then try it out" + CSD U3 Variables make a big square_instruction: "Change the value of size multiple + times. How does it change your drawing?" + CSD U3 Variables make a square_instruction: "Change the value of size multiple + times. How does it change your drawing?" + CSD U3 Variables multiple assignments_instruction: "Change the value of petalSize + multiple times. How does it change your drawing?" + CSD U3 Variables naming rules_instruction: "Change the value of petalSize multiple + times. How does it change your drawing?" + CSD U3 Variables random assignment_instruction: "Change the value of petalSize + multiple times. How does it change your drawing?" + CSD U3 Variables random draw loop_instruction: "Predict what will happen when + you move the assignment of eyeSize inside the draw loop. Then try it out" + CSD U3 Variables random drawing exemplar_instruction: "Check out this example + randomized drawing." + CSD U3 Variables use value rect_instruction: "Predict: What will get displayed + in the console?" + CSD U3 Variables write_instruction: "Use the write block to display the value + of size" + CSD U3 Variables2 expressions in commands_instruction: "Use expressions inside + a drawing command" + CSD U3 Variables2 expressions in variables_instruction: "Assign the value of + each expression to a variable and console.log that variable." + CSD U3 Variables2 expressions_instruction: "Use console.log to display the + results of each expression. Then create your own." + CSD U4 - Events Template_instruction: "Add a large red button to your screen + using Design Mode. (Click for full instructions.)" + CSDU4 - AppLab - 1_instruction: "Read the documentation for penColor() and + penWidth() before using them to draw the blue square." + CSDU4 - AppLab - 2_instruction: "Write a program that acts as a simple calculator. + (click to see full instructions)" + CSDU4 - AppLab - 3_instruction: "Use console to check the ending value of num. + (Click to see full instructions)" + CSDU4 - AppLab - 4_instruction: " Use the Debug Commands to make a list of + all the values rolled before a 6. (Click to see full instructions)" + CSDU4 - Design Mode - 1_instruction: "Add a button that moves the turtle when + clicked. (Click to see full instructions)" + CSDU4 - Design Mode - 10_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + CSDU4 - Design Mode - 11_instruction: "Experiment with different event types + and select the one that you think is best. (Click to see full instructions)" + CSDU4 - Design Mode - 12_instruction: "Use the textLabel command to replace + the button in your program with a text label. (Click to see full instructions)" + CSDU4 - Design Mode - 16_instruction: "Add an event handler for the button + using the \"Insert and show\" link in the Design Mode Events tab. (Click to + see full instructions)." + CSDU4 - Design Mode - 17_instruction: "Update the ID names and `console.log` + messages to match the correct button. (Click to see full instructions.)" + CSDU4 - Design Mode - 18_instruction: "Fix the layout of the bullseye game. + (Click to see full instructions)" + CSDU4 - Design Mode - 2_instruction: "Run a program with two buttons that have + the same id to see the warning message in the console. Change the ids to make + the program run without getting a warning message." + CSDU4 - Design Mode - 24_instruction: "Add an Text Input box for the name and + age. (Click to see full instructions)" + CSDU4 - Design Mode - 25_instruction: "Add an event handler to the Submit button + so that when the button is clicked it will display the name entered in the + text box to the console. Use getText to get the value out of the text box. + (Click to see full instructions)" + CSDU4 - Design Mode - 26_instruction: "Save the age and name of the user in + variables (Click to see full instructions)" + CSDU4 - Design Mode - 27_instruction: "Output a message to the 'textArea' + (Click to see full instructions)" + CSDU4 - Design Mode - 28_instruction: "Write a greeting to the user when they + hit 'enter' in the text input, using the 'change' event. (Click to see + full instructions)" + CSDU4 - Design Mode - 29_instruction: "Add a dropdown for their guess instead + of promptNum (Click to see full instructions)" + CSDU4 - Design Mode - 30_instruction: "Show different die images for the random + number generated. (Click to see full instructions)" + CSDU4 - Design Mode - 31_instruction: "Set up an event handler to respond to + keypress events, and display event.key in the console. Hit keys on the keyboard + to see what happens. (Click to see full instructions)" + CSDU4 - Design Mode - 32_instruction: "Try out the keyup and keydown events + to see how they are different from keypress. (Click to see full instructions)" + CSDU4 - Design Mode - 33_instruction: "Change the code so the sound will only + play when the up arrow is pressed. (Click to see full instructions)" + CSDU4 - Design Mode - 4_instruction: "Improve the button by choosing a descriptive + and meaningful ID. (Click to see full instructions)" + CSDU4 - Design Mode - 5_instruction: "Debug the program by verifying your IDs + are being referenced properly. (Click to see full instructions)" + CSDU4 - Design Mode - 6_instruction: "Debug the program by properly ordering + your button commands and event handlers. (Click to see full instructions)" + CSDU4 - Design Mode - 7_instruction: "Debug the program by fixing the logical + error within the program. (Click to see full instructions)" + CSDU4 - Design Mode - 8_instruction: "Move the button to the middle of the + screen. (Click to see full instructions)" + CSDU4 nameAgeTemplate_instruction: "Add an Text Input box for the name and + age. (Click to see full instructions)" + CSDU6 - Arrays - expressionsAsIndexes_instruction: "Write a program that displays + a randomly chosen color from the array. (Click to see full instructions)" + CSDU6 - Arrays - indexPractice_instruction: "Write the contents of the array + to the screen in numerical order. (Click to see full instructions)" + CSDU6 - Arrays - length_instruction: "Use list.length to determine the length + of each array. (Click to see full instructions)" + CSDU6 - Arrays - lengthMinus1_instruction: "Use list.length - 1 to log the + last item in the array to the console. (Click to see full instructions)" + CSDU6 - for loop - color buttons with for_instruction: "Write the contents + of the array to the screen in numerical order. (Click to see full instructions)" + CSDU6 - for loop - color buttons_instruction: "Write the contents of the array + to the screen in numerical order. (Click to see full instructions)" + CSDU6 - for loop - why for_instruction: "Write the contents of the array to + the screen in numerical order. (Click to see full instructions)" + CSP Data Unit - Counting Multiple Things_instruction: "If you can count one + thing you can count multiple things\r\n\r\nFind out how many people like something + other than dogs and cats\r\n\r\nCount dogs\r\nCount cats\r\nCount total\r\nDo + the math\r\n\r\nblank/ blank toal\r\n\r\nCan also use this to find percents + from this\r\n\r\nx% are dog lovers" + CSP Data Unit -Counting Records - Easy Way_instruction: "ReadRecords with specific + criteria \r\nfind the length of an array\r\n" + CSP Data Unit -Counting Records - Hard Way_instruction: "\r\n1. ReadRecords + for all records\r\n2. Way to loop through and count\r\n" + CSP U4 - JSON Object Intro - Bad Way_instruction: "Trigger both the keyboard + and mouse event and examine the event objects displayed in the console. Why + might an object be the best way to store this information? (Click to see full + instructions)" + CSP U4 - JSON Object Intro - Good Way_instruction: "Create an object with at + least 5 values including at least one string and one number. (Click to see + full instructions) " + CSP U4 - Objects - createObject_instruction: "Create an object with at least + 5 values including at least one string and one number. (Click to see full + instructions) " + CSPU5 Add Screens to Chaser Game_instruction: "Recreate the game from the \"Chaser + Game\" with a Welcome Screen and Game Over Screen. (Click to see full instructions.)" + CSPU5 Add a 2nd Screen_instruction: "Make a 2 screen app with a black screen + and a white screen. (Click to see detailed instructions)" + CSPU5 Add full screen image to bg of chaser game_instruction: "Recreate the + game from the \"Chaser Game\" with a Welcome Screen and Game Over Screen. + (Click to see full instructions.)" + CSPU5 Add game over screen_instruction: "Recreate the game from the \"Chaser + Game\" with a Welcome Screen and Game Over Screen. (Click to see full instructions.)" + CSPU5 Add onEvent from Design Mode_instruction: "Add an event handler for the + button using the \"Insert and show\" link in the Design Mode Events tab. (Click + to see full instructions)." + CSPU5 Add welcome screen to chaser game_instruction: "Recreate the game from + the \"Chaser Game\" with a Welcome Screen and Game Over Screen. (Click to + see full instructions.)" + CSPU5 Adding Screens Template_instruction: "Make a 2 screen app with a black + screen and a white screen. (Click to see detailed instructions)" + CSPU5 Debugging Overlapping Objects and Screen Events_instruction: "Recreate + the \"Chaser Game\" from the last lesson using Design Mode. (Click to see + full instructions.)" + CSPU5 First Time Console.log_instruction: "Add a 3 console.log messages and + test them out. (Click to see full instructions.)" + CSPU5 Layering and Deleting in Design Mode_instruction: "Fix the layout of + the bullseye game. (Click to see full instructions)" + CSPU5 Project - Multi Screen App_instruction: "Create your multi-screen app. + (Click to see full instructions.)" + CSPU5 Use Console.log to update IDs_instruction: "Update the ID names and `console.log` + messages to match the correct button. (Click to see full instructions.)" + CSPU5 Use setScreen for first time_instruction: "Make a 2 screen app which + can switch back and forth between a black screen and a white screen using + buttons. (Click to see detailed instructions.)" + CSPU5_AddImageToChaserGame_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + CSPU5_AddImage_andMakeChaserGame_instruction: "Introducing the setPosition + command! Replace the moveTo in the button-click event handler to use setPosition + to move the button itself to a random location when it's clicked." + CSPU5_AddLabelToChaserGame_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + CSPU5_Debugging predict unexpected behavior - two onEvents to one ID_instruction: "Predict + what will happen. Once you've made a prediction, run the code to see what + happens. (Click to see full instructions)" + CSPU5_FinalizeChaserGame_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + CSPU5_Project - Multi Screen App_instruction: "Create your multi-screen app. + (Click to see full instructions.)" + CSPU5_U3 - Arrays - Demo App_instruction: "Use the \"My Favorite Things\" app. + How might this app be making use of an array? (Click to see full instructions)" + CSPU5_U3 - Arrays - appendItem_instruction: "Create an array of odd numbers + 1-11 by using appendItem. (Click to see full instructions)" + CSPU5_U3 - Arrays - assignment_instruction: "Use indexes to change the values + in this array from 1 to 0. (Click to see full instructions)" + CSPU5_U3 - Arrays - assignment2_instruction: "Calculate the sum of three values + stored in an array. (Click to see full instructions)" + CSPU5_U3 - Arrays - assignment3_instruction: "Increase the value of each value + in the randomly generated array by 1. (Click to see full instructions)" + CSPU5_U3 - Arrays - createFirstArray_instruction: "Create an array of the even + numbers from 0 to 10 and display its contents with console.log. (Click to + see full instructions)" + CSPU5_U3 - Arrays - expressionsAsIndexes_instruction: "Write a program that + displays a randomly chosen color from the array. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings Counting Variable_instruction: "Create a global + variable for the current index and use it to display the first item in the + array. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings Next_instruction: "Write code that allows the + user to move forward through your list by clicking the \"Next\" button. (Click + to see full instructions)" + CSPU5_U3 - Arrays - favThings Prev_instruction: "Write code that allows the + user to move backward through your list by clicking the \"Last\" button. (Click + to see full instructions)" + CSPU5_U3 - Arrays - favThings addItem_instruction: "Write code that allows + a user to add their own favorite things to the list. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings bounds_instruction: "Add if statements to your + event handlers that prevent the global index from going out of bounds. (Click + to see full instructions)" + CSPU5_U3 - Arrays - favThings createArray_instruction: "Create an array of + words describing your favorite things. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings firstOutput_instruction: "Use setText to display + the first item in the array. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings giveIDs_instruction: "Give your UI elements descriptive + and meaningful IDs. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings keepPlaying_instruction: "Make any other improvements + you want! (Click to see full instructions)" + CSPU5_U3 - Arrays - indexPractice_instruction: "Write the contents of the array + to the screen in numerical order. (Click to see full instructions)" + CSPU5_U3 - Arrays - insertingItems_instruction: "Insert items into an array + to form a complete sentence. (Click to see full instructions)" + CSPU5_U3 - Arrays - insertionErrors_instruction: "Run each command that references + indexes that are out of bounds and observe the results. (Click to see full + instructions)" + CSPU5_U3 - Arrays - introIndex_instruction: "Display the first and last element + in the array. Display the number 5 from the array. (Click to see full instructions)" + CSPU5_U3 - Arrays - length_instruction: "Use list.length to determine the length + of each array. (Click to see full instructions)" + CSPU5_U3 - Arrays - lengthMinus1_instruction: "Use list.length - 1 to log the + last item in the array to the console. (Click to see full instructions)" + CSPU5_U3 - Arrays - remove_instruction: "Remove items from an array to form + a complete sentence. (Click to see full instructions)" + CSPU5_U3 - Arrays - stringsInArrays_instruction: "Write a sentence word by + word by adding strings to an array. (Click to see full instructions)" + CSPU5_U3 - Canvas - 200dots_instruction: "Add a loop to your program that draws + 200 dots on your canvas. (Click to see full instructions)" + CSPU5_U3 - Canvas - One Dot sprayPaint_instruction: "Write code that redraws + your image using a dot whose x and y locations use offsetX and offsetY with + a small random value added. (Click to see full instructions)" + CSPU5_U3 - Canvas - appendToArray_instruction: "Create an array to store each + event parameter. Append each event parameter to this array within your event + handler. (Click to see full instructions)" + CSPU5_U3 - Canvas - changeToMouseMove_instruction: "Change your program so + that dots are drawn at the location of the mouse as the user moves the mouse + on the canvas. (Click to see full instructions)" + CSPU5_U3 - Canvas - clickToAdd_instruction: "Change your program so that dots + are added to the canvas when the user clicks on it. (Click to see full instructions)" + CSPU5_U3 - Canvas - delete_instruction: "Create a button that deletes the drawing + by clearing the canvas and removing all stored values. (Click to see full + instructions)" + CSPU5_U3 - Canvas - draw at click point_instruction: "Change your program so + that dots are drawn at the location of the mouse click. (Click to see full + instructions)" + CSPU5_U3 - Canvas - freePlay_instruction: "Extend the functionality of one + of the effects, or create an entirely new one of your own. (Click to see full + instructions)" + CSPU5_U3 - Canvas - introCanvas_instruction: "Add a canvas to your app and + set it to be the active canvas. Then add a large dot to your canvas. (Click + to see full instructions)" + CSPU5_U3 - Canvas - movementFunction fix Orig_instruction: "Modify the \"Original\" + button event handler so that it takes the movement of the mouse into account. + (Click to see full instructions)" + CSPU5_U3 - Canvas - movementFunction_instruction: "Write a function that takes + the movement of the mouse as input and generates a line width as output. (Click + to see full instructions)" + CSPU5_U3 - Canvas - redrawOriginal_instruction: "Write a function that processes + your array, redrawing the dots as they originally appeared. (Click to see + full instructions)" + CSPU5_U3 - Canvas - redrawRandom_instruction: "Set up a button and event handler + for the random function. (Click to see full instructions)" + CSPU5_U3 - Canvas - redrawRandom2_instruction: "Write a function that processes + your array, redrawing every dot with a random size. (Click to see full instructions)" + CSPU5_U3 - Canvas - shiftKey_instruction: "Add an if statement to your event + handler so dots are only drawn when the shift key is pressed. (Click to see + full instructions)" + CSPU5_U3 - Canvas - sketch_instruction: "Write code that redraws your image + using a sketch effect. (Click to see full instructions)" + CSPU5_U3 - Canvas - sprayPaint_instruction: "Update the spray paint code so + that it redraws your image using multiple random dots instead of using a nested + for loop. (Click to see full instructions)" + CSPU5_U3 - Canvas - transparentDots_instruction: "Change the colors of your + dots so they have a fully transparent stroke and partially transparent fill. + (Click to see full instructions)" + CSPU5_U3 - Canvas - usingOffsetXY_instruction: "Add a console.log command inside + the function of your event handler. Use it to display the event parameter. + Click on the screen to see the contents of the event parameter (Click to see + full instructions)" + CSPU5_U3 - Conditional Basics - 6_instruction: "Add a setText after the if + statement to \"Nope. Guess again.\" (Click to see full instructions)" + CSPU5_U3 - Conditionals - Combine AND OR Simple_instruction: "Write an if statement + that uses AND and OR to display \"Sleep in!\" if it's the weekend and the + user is a teenager. (Click to see full instructions." + CSPU5_U3 - Conditionals - Combine AND OR and NOT_instruction: "Write an if + statement that uses AND and OR to display \"Time to go to school!\" if it's + not the weekend and the user is under 18. (Click to see full instructions.)" + CSPU5_U3 - Conditionals - Simple AND_instruction: "Write an if statement that + uses AND to display \"You are a teenager.\" if the user enters an age between + 13 and 19. (Click to see full instructions)" + CSPU5_U3 - Conditionals - Simple OR_instruction: "Write an if statement that + uses OR to display \"It's the weekend!\" if the user enters a weekend day + at the prompt. (Click to see full instructions)" + CSPU5_U3 - Design Mode - Console Log_instruction: "Update the ID names and + `console.log` messages to match the correct button. (Click to see full instructions.)" + CSPU5_U3 - Design Mode - Layers and Delete_instruction: "Fix the layout of + the bullseye game. (Click to see full instructions)" + CSPU5_U3 - Design Mode - Multi Screens 2_instruction: "Make a 2 screen app + which can switch back and forth between a black screen and a white screen + using buttons. (Click to see detailed instructions.)" + CSPU5_U3 - Design Mode - Multi Screens_instruction: "Make a 2 screen app with + a black screen and a white screen. (Click to see detailed instructions)" + CSPU5_U3 - Design Mode - WTF Console Log_instruction: "Add a 3 console.log + messages and test them out. (Click to see full instructions.)" + CSPU5_U3 - Design Mode -Recreate Beyond Buttons_instruction: "Recreate the + game from the \"Chaser Game\" with a Welcome Screen and Game Over Screen. + (Click to see full instructions.)" + CSPU5_U3 - Design Mode 1_instruction: "Add a large red button to your screen + using Design Mode. (Click for full instructions.)" + CSPU5_U3 - Dice - Dropdown and Score_instruction: "Add guess and score to the + Dice Game (Click to see full instructions)" + CSPU5_U3 - Dice - Dropdown with Strings_instruction: "Add a dropdown for difficulty + level that prints the difficulty level in the console. (Click to see full + instructions)" + CSPU5_U3 - Dice - If_instruction: "Show different die images for the random + number generated. (Click to see full instructions)" + CSPU5_U3 - Dice - Nested_instruction: "Use nested if statements to make the + scoring different for the different game levels. (Click to see full instructions)" + CSPU5_U3 - High Low - Debug_instruction: "Debug the order of the conditionals + so that it will actually tell the user when their guess is close. (Click to + see full instructions)" + CSPU5_U3 - High Low - Dropdown_instruction: "Add a dropdown for their guess + instead of promptNum (Click to see full instructions)" + CSPU5_U3 - High Low - Else if_instruction: "Add an else-if statement in order + to tell the user if their guess is high or low instead of just wrong. (Click + to see full instructions)" + CSPU5_U3 - High Low - Else_instruction: "Add an else statement so that the + program will tell the user when they are right and when they are wrong. (Click + to see full instructions)\r\n" + CSPU5_U3 - High Low - If_instruction: "Add code to the if statement that indicates + the user guessed the secret number. (Click to see full instructions)" + CSPU5_U3 - Keys - Add Image URLs_instruction: "Add image URLs to your array. + Replace the text area with an image and setText with setImageURL. Then test + your app! (Click to see full instructions)" + CSPU5_U3 - Keys - Buttons and Keys_instruction: "Have the program respond the + same way for both clicking images on the screen and hitting the up and down + keys on the keyboard. (Click to see full instructions)" + CSPU5_U3 - Keys - Demo App_instruction: "Play with the image scroller. Press + the left and right arrows to progress through the images." + CSPU5_U3 - Keys - Final Image Scroller_instruction: "Update the image scroller + to respond to buttons and key presses. (Click to see full instructions)" + CSPU5_U3 - Keys - Functions_instruction: "Write doUpArrow and doDownArrow functions + and call the functions instead of duplicating the code. (Click to see full + instructions)" + CSPU5_U3 - Keys - Key Up and Down_instruction: "Try out the keyup and keydown + events to see how they are different from keypress. (Click to see full instructions)" + CSPU5_U3 - Keys - Multiple Keys_instruction: "Play a different sound when the + down arrow is pressed. (Click to see full instructions)" + CSPU5_U3 - Loops - Complex Condition_instruction: "Change the boolean expression + for the while loop so that it will stop when both dice are greater than or + equal to 5. (Click to see full instructions)" + CSPU5_U3 - Loops - 1_instruction: "Change the condition for the while loop + to check if the variable num is less than 90. (Click to see full instructions)" + CSPU5_U3 - Loops - 10_instruction: "Write a program that simulates the rolling + of two dice. Roll the dice repeatedly until the sum of the dice is either + 7 or 11." + CSPU5_U3 - Loops - 11_instruction: "Fix the condition so that it keeps rolling + the die as long as the value is not a 2 or a 3 instead of rolling infinitely. + (Click to see full instructions)" + CSPU5_U3 - Loops - 12_instruction: "Change the code so that it prints the string + \"Hi\" 5 times. (Click to see full instructions)" + CSPU5_U3 - Loops - 14_instruction: "Change the loop condition to prevent the + infinite loop and stop counting once the count is past 30. (Click to see full + instructions)" + CSPU5_U3 - Loops - 15_instruction: "Count the number of times the sum of the + dice is 12. (Click to see full instructions)" + CSPU5_U3 - Loops - 2_instruction: "Try creating an infinite loop using !=, + > and <. (Click to see full instructions)" + CSPU5_U3 - Loops - 3_instruction: "Change the if statement to a while loop + so the program will run until it rolls a 6. (Click to see full instructions)" + CSPU5_U3 - Loops - 4_instruction: " Use the Debug Commands to make a list of + all the values rolled before a 6. (Click to see full instructions)" + CSPU5_U3 - Loops - 5_instruction: "Add code inside the while loop which will + update the variable num so that the condition will eventually become false. + (Click to see full instructions)" + CSPU5_U3 - Loops - 6_instruction: "Fix the problem so the loop will run at + least once. Change the initial value of num to a dummy value such as -1. (Click + to see full instructions)" + CSPU5_U3 - Loops - 7_instruction: "Without adding any lines of code, reorder + the code so that it prints all the values of num. (Click to see full instructions)" + CSPU5_U3 - Loops - 8_instruction: "Debug which number is not getting printed + and add a write statement to display that value. (Click to see full instructions)" + CSPU5_U3 - Loops - 9_instruction: " Modify the condition so that it keeps rolling + as long as both are less than 3. (Click to see full instructions)" + CSPU5_U3 - Loops - Minus Minus_instruction: "Change the code to count down + from 10 to 1. (Click to see full instructions)" + CSPU5_U3 - Loops - Plus Plus_instruction: "Change the code to use count++ instead + of count = count + 1. (Click to see full instructions)" + CSPU5_U3 - Loops - Typing in Console_instruction: "Use console to check the + ending value of num. (Click to see full instructions)" + CSPU5_U3 - Loops - minus = operator_instruction: "Update the code to use the + -= operator to count from 30 down to 0 by 3's. (Click to see full instructions)" + CSPU5_U3 - Loops - plus and minus = operator_instruction: "Update the code + to use the += operator. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Add 5_instruction: "Add 5 to all the values in + an array (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Counting Times_instruction: "Count the number + of times 5 appears in an array. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Divid by 2_instruction: "Divide every value in + the array by 2. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Find Min_instruction: "Complete the findMinVal + function to find and display the smallest value in an array (Click to see + full instructions)" + CSPU5_U3 - Loops And Arrays - General Search Param_instruction: "Add a second + parameter to the search function for the value to search for. (Click to see + full instructions)" + CSPU5_U3 - Loops And Arrays - Intro For Loop_instruction: "Add a for loop with + a console.log inside and test out the 3 pieces of the for loop. (Click to + see full instructions)" + CSPU5_U3 - Loops And Arrays - Linear Search_instruction: "Visit every element + in the array and display \"true\" if the value is a 5, and \"false\" otherwise. + (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Loop Array If_instruction: "Use an if statement + to only display the values in the array that are greater than 5. (Click to + see full instructions)" + CSPU5_U3 - Loops And Arrays - Make it a Function - add list parameter_instruction: "Create + a function that takes a list parameter and prints if the list contains a 5. + (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Make it a Function_instruction: "Move the code + that searches the list for a 5 into a function called \"search\". (Click to + see full instructions)" + CSPU5_U3 - Loops And Arrays - Print Array_instruction: "Use a for loop to print + out all the values in an array. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Printing Single True_instruction: "Process the + array and display a single \"true\" if the array contains a 5 or a single + \"false\" if it does not. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Search with Boolean Var_instruction: "Make a + boolean variable to use as a flag to keep track of whether there is a 5 in + the array. (Click to see full instructions)" + CSPU5_U3 - Movie Bot - Multiple If Sequences_instruction: "Add another set + of if, else if, and else statements inside the question if statement to check + for keywords for movie ratings (G, PG, PG-13, and R). (Click to see full instructions)" + CSPU5_U3 - Movie Bot - Nested Motivation_instruction: "Add a separate set of + if statements to check for a \"?\" in the input. (Click to see full instructions)" + CSPU5_U3 - Movie Bot - When Multiple If Statements_instruction: "Add an if + and else-if statement that checks for please and thank you. (Click to see + full instructions)" + CSPU5_U3 - Movie Bot - toLowerCase_instruction: "Use the toLowerCase command + to change all user input into lowercase letters after they enter it. (Click + to see full instructions)" + CSPU5_U3 - Practice Create Performance Task_instruction: "Design and implement + your practice Create Performance Task. (Click to see full instructions)" + CSPU5_U3 - Return Values - constrainTurtle_instruction: "Use constrain in this + simple app to keep the turtle from driving off the screen. (Click to see + full instructions)" + CSPU5_U3 - Return Values - debuggingConstrain_instruction: "Correct the error + in constrain so that it returns the appropriate value. (Click to see full + instructions)" + CSPU5_U3 - Return Values - debuggingMaxVal_instruction: "Correct the error + in maxVal so that it correctly reports the maximum value. (Click to see full + instructions)" + CSPU5_U3 - Return Values - useMinVal_instruction: "Call minVal within the console.log + statement to calculate the minimum of two values. (Click to see full instructions)" + CSPU5_U3 - Return Values - wrapTurtle_instruction: "Write wrap in this simple + app to let the turtle \"wrap\" to the other side of the screen when it goes + off. (Click to see full instructions)" + CSPU5_U3 - Return Values - writeMaxVal_instruction: "Write the function maxVal + and then use it within the console.log statement to calculate the maximum + of two values. (Click to see full instructions)" + CSPU5_U3 - Simulation - 1_instruction: "Use a while loop to \"flip a coin 10 + times\" and write the values to the screen. (Click to see full instructions)" + CSPU5_U3 - Simulation - 2.1_instruction: "Change your looping condition so + the simulation runs until there are 5 heads flipped. (Click to see full instructions)" + CSPU5_U3 - Simulation - 2.5_instruction: "Run your simulation to get the full + 10,000 heads! How long did it take? (Click to see full instructions)" + CSPU5_U3 - Simulation - 2_instruction: "Keep track of how many heads (1's) + your program generates and print the results to the screen. (Click to see + full instructions)" + CSPU5_U3 - Simulation - 3_instruction: "Add functionality that counts how many + heads in a row are flipped. (Click to see full instructions)\r\n" + CSPU5_U3 - Simulation - 4_instruction: "Update your while loop's condition + so the the coin flips until there are three heads in a row. (Click to see + full instructions)" + CSPU5_U3 - Simulation - 5_instruction: "Change your while loop to run until + you get a streak of 12 heads. How many flips did it take? (Click to see full + instructions)" + CSPU5_U3 - Simulation - 6_instruction: "Keep adding to your simulation. What + do you want to explore next? (Click to see full instructions)" + CSPU5_U3 - User Input - Save getText To Variable_instruction: "Save the age + and name of the user in variables (Click to see full instructions)" + CSPU5_U3 - Variables - Set to Expression with Other Variables_instruction: "Write + an expression that calculates the player's total score and stores it in the + totalScore variable. The calculation is: the player's points times lives + divided by the total time. (click to see full instructions)" + CSPU5_U3 - Variables - Set to Expression_instruction: "Test out the new expressions. + (Click to see full instructions)" + CSPU5_U3 Digital Assistant Design_instruction: "Pick a topic for your Digital + Assistant and create the basic layout with a text input and text area. (Click + to show full instructions)" + CSPU5_U3 Digital Assistant Set Text_instruction: "Have your digital assistant + repeat back what the user types and include a canned response. (Click to see + full instructions)" + CSPU5_U3 Digital Assistant Target_instruction: "Try out a demo of the Digital + Assistant!" + CSPU5_U3 full clicker demo_instruction: "Clicker game - Try it out!" + CSPU5_U3- Variables - Create And Assign_instruction: "On one line add a variable + called \"lives\" and assign it the value 3. Print it to the console. (Click + to see full instructions)" + CSPU5_U3- Variables - Text Mode_instruction: "1. Switch to text mode and type + instructions; 2. drag blocks out into text mode; 3. experiment with code completion" + CSPU5_U3-Design Mode-ID and Event Handler_instruction: "Add an event handler + for the button using the \"Insert and show\" link in the Design Mode Events + tab. (Click to see full instructions)." + CSPU5_U3-Design Mode-Image_instruction: "Recreate the \"Chaser Game\" from + the last lesson using Design Mode. (Click to see full instructions.)" + CSPU5_U313 Two Buttons with Ids_instruction: "Predict what will happen. Once + you've made a prediction, run the code to see what happens. (Click to see + full instructions)" + CSPU5_U313 drag Two Buttons_instruction: "Run a program with two buttons that + have the same id to see the warning message in the console. Change the ids + to make the program run without getting a warning message." + CSPU5_U3L13 - Debug Id Problem_instruction: "Improve the button by choosing + a descriptive and meaningful ID. (Click to see full instructions)" + CSPU5_U3L13 - Debugging 1_instruction: "Debug the program by verifying your + IDs are being referenced properly. (Click to see full instructions)" + CSPU5_U3L13 - Debugging 2_instruction: "Debug the program by properly ordering + your button commands and event handlers. (Click to see full instructions)" + CSPU5_U3L13 - Debugging 3_instruction: "Debug the program by fixing the logical + error within the program. (Click to see full instructions)" + CSPU5_U3L13 - Debugging IDs case sensitive_instruction: "Debug the program + by verifying your IDs are being referenced properly. (Click to see full instructions)" + CSPU5_U3L13 - Project_instruction: "Create your multi-screen app. (Click to + see full instructions.)" + CSPU5_U3L13 - Turtle Driver Project_instruction: "Create a \"turtle driver\" + that includes buttons to move the turtle forward and turn it left and right. + (Click to see full instructions)" + CSPU5_U3L13 - Turtle move with button_instruction: "Add a button that moves + the turtle when clicked. (Click to see full instructions)" + CSPU5_U3L13 eventsDetails_instruction: "Add an event handler to the button + to move the turtle forward. (Click to see full instructions)" + CSPU5_U3L14 - Assigning Random Value_instruction: "Write a program that simulates + the rolling of two dice and reports their individual values as well as the + sum. (click to see full instructions)" + CSPU5_U3L14 - Mini Calculator embed_instruction: "You will be prompted for + two numbers, one right after the other. See what happens. Enter different + numbers until you get the idea." + CSPU5_U3L14 - User Input Division calculator_instruction: "Write a program + that acts as a simple calculator. (click to see full instructions)" + CSPU5_U3L14 - Variable ReAssignment pt2_instruction: "Trace the code and predict + what you think will be printed to the console. Then add a console.log statement + at the end of the program to see the last value of someNum to see if your + full prediction is correct. (click to see full Instructions)" + CSPU5_U3L14 - concatenate simple_instruction: "Modify the write statement on + line 3 to combine text and variables together to make the app display a single + line of text that shows the player's lives and score. (click to see full + instructions)" + CSPU5_U3L14 - moving memory challenge1_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge2_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge3_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge4_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge5_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge6_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L15 - Add reset button to UpDown app_instruction: "Add code so that + clicking the start over button will reset the game and send you back to the + main screen. (Click to see full instructions)" + CSPU5_U3L15 - DEMO up down count practice app_instruction: "Try out the demo + app (Click to see full instructions)" + CSPU5_U3L15 - Debug forget to update var on reset in UpDown app_instruction: "Run + the app, and click the up or down button until you get to the gameOverScreen. + Click 'Start Over' and try the app again. Find and fix the issue in the + code. (Click to see full instructions)" + CSPU5_U3L15 - Debug if never triggers in UpDown app_instruction: "Run the app + and use the up and down arrows to try to hit the gameOverScreen. You can't! + Find and fix the issue in the code. (Click to see full instructions)" + CSPU5_U3L15 - Debugging Simple If-statements =v==_instruction: "Run the app, + and click the up button. Then restart and run it again, and click the down + button. Find and fix the issue in the code. (Click to see full instructions)" + CSPU5_U3L15 - Simple If-statements in UpDown App_instruction: "Add an if statement + so that the app changes screens when the count reaches -5. (Click to see full + instructions)" + CSPU5_U3L15 - add code to make count down work_instruction: "Write code to + make the down arrow work as expected. (Click to see full instructions)" + CSPU5_U3L15 - count upDown bug forget to set text_instruction: "Find the bug + in the program and fix it. (Click to see full instructions)" + CSPU5_U3L15 - count upDown bug logic error wrong update_instruction: "Find + the bug in the program and fix it. (Click to see full instructions)" + CSPU5_U3L15 - count upDown bug var not created globally_instruction: "Find + the bug in the program and fix it. (Click to see full instructions)" + CSPU5_U3L15 - global var example count up_instruction: "Look at the code for + this app and see how the code works to update the count variable when the + up arrow is clicked. (Click to see full instructions)." + CSPU5_U3L15 - mini clicker update score_instruction: "Add code to update the + score when the apple is clicked. (Click to see full instructions)" + CSPU5_U3L15 - practice with setText_instruction: "Use setText to complete the + click event handler for the down arrow. (Click to see full instructions)" + CSPU5_U3L15 - variable scoping problem debugging_instruction: "See if you can + figure out why the code is no longer working. (Click to see full instructions)" + CSPU5_U3L15 click add lives_instruction: "Add lives to the clicker game that + decrement by 1 when the background image is clicked (Click to see full instructions)" + CSPU5_U3L15 full clicker app_instruction: "Complete your clicker game! (Click + to see full instructions)" + CSPU5_U3L16 - challenge say hi app_instruction: "Write a greeting to the user + when they hit 'enter' in the text input, using the 'change' event. (Click + to see full instructions)" + CSPU5_U3L16 - chaserApp_instruction: "Create your own \"Chaser Game.\" (Click + to see full instructions)" + CSPU5_U3L16 - chooseImages_instruction: "Replace the image in your application + with one of your own. (Click to see full instructions)" + CSPU5_U3L16 - doubleQuotes_instruction: "Save a string inside a variable and + log it to the console. (Click to see full instructions)" + CSPU5_U3L16 - intro getText_instruction: "Add an event handler to the Submit + button so that when the button is clicked it will display the name entered + in the text box to the console. Use getText to get the value out of the text + box. (Click to see full instructions)" + CSPU5_U3L16 - introSetPosition_instruction: "Move the buttons to the bottom + of the screen. (Click to see full instructions)" + CSPU5_U3L16 - introStrings_instruction: "Save a string inside a variable and + log it to the console. (Click to see full instructions)" + CSPU5_U3L16 - newEventTypes_instruction: "Experiment with different event types + and select the one that you think is best. (Click to see full instructions)" + CSPU5_U3L16 - outputWithTextArea_instruction: "Output a message to the 'textArea' + (Click to see full instructions)" + CSPU5_U3L16 - setPosition to fixed location_instruction: "Introducing the setPosition + command! Replace the moveTo in the button-click event handler to use setPosition + to move the button itself to a random location when it's clicked." + CSPU5_U3L16 - setPosition to move button_instruction: "Introducing the setPosition + command! Replace the moveTo in the button-click event handler to use setPosition + to move the button itself to a random location when it's clicked." + CSPU5_U3L16 - singleSetPosition_instruction: "Move the button to the middle + of the screen. (Click to see full instructions)" + CSPU5_U3L16 - text labels_instruction: "Use the textLabel command to replace + the button in your program with a text label. (Click to see full instructions)" + CSPU5_U3L16 - textInput getText write_instruction: "Add an Text Input box for + the name and age. (Click to see full instructions)" + CSPU5_U3L16 - toUpper_instruction: "Make the name of the user appear in uppercase + (Click to see full instructions)" + CSPU5_U3L16 - use images_instruction: "Use the image command to replace the + text label in your program with an image. (Click to see full instructions)" + CSPU5_U3L16 Mad Lib Clear Input_instruction: "Clear the user's previous text + when the Play Again button is clicked (Click to see full instructions) " + CSPU5_U3L16 Mad Lib Demo_instruction: "Mad Libs Demo - Try it out!" + CSPU5_U3L16 Mad Lib Student Setup_instruction: "Back to Mad Libs: To get started, + set up the two screens for your Mad Libs app (Click to show full instructions)" + CSPU5_U3L16 Mad Lib getText_instruction: "Before setting the text area with + your Mad Libs outline, get the user's text and incorporate their responses. + (Click to see full instructions) " + CSPU5_U3L16 Mad Lib setText_instruction: "When the Next button is clicked, + set the text area to have the main outline of your How-to Mad Libs (without + the user's input). (Click to see full instructions) " + CSPU5_U3L16 Mad Lib toUpper_instruction: "Apply the toUpperCase and toLowerCase + string functions to the user's text. (Click to see full instructions) " + CSPU5_U3L18 comparison operators_instruction: "Use console.log to print out + the different boolean expressions below to see what information they return. + (Click to see full instructions)" + CSPU5_U3L19 - fix the var name syntax error v2_instruction: "Fix the error + and get it to print the value of both variables (Click to see full instructions)" + CSPU5_U3L19 - test reassignment of two vars_instruction: "Predict the value + of a and b. Add console.log statements to find out the actual value of a and + b. (Click for full instructions)" + CSPU5_U3L19 - three basic ops of variables_instruction: "Add another variable + called \"lives\" and set the value to 3. Print the value of the variable to + the console. (Click to see full instructions)" + CSPU5_U3L19 - variable reassignment challenge pt2_instruction: "Make a prediction + about the ending values of a, b, and c. Then use console.log to check your + understanding (Click to see full instructions)" + CSPU5_U3L19 - write var and string with same name v2_instruction: "Fix the + code so that the values of both variables print to the console. (Click to + see full instructions)" + CSPU5_U3L23 Chatbot Conditionals 1_instruction: "Add if, else if, and else + statements to detect the movie genres Comedy, Romance, Action, and Horror. + (Click to see full instructions)" + CSPU5_U3L24 Chatbot Basic Conditionals_instruction: "Check out the project + description for instructions. (Click to see full instructions.)" + CSPU5_U3L24 Nested Conditionals 1_instruction: "Change all of the boolean expressions + to use includes instead of ==. (Click to see full instructions)" + CSPU5_U3L24 Nested Conditionals 2_instruction: "Nest your movie genre if statements + inside the if statements to check for a ? in the input. " + CSPU5_U3L24 introIncludes_instruction: "Practice using the includes command. + (Click to see full instructions)" + CSPU5_U3L25 - drag out key event_instruction: "Set up an event handler to respond + to keypress events, and display event.key in the console. Hit keys on the + keyboard to see what happens. (Click to see full instructions)" + CSPU5_U3L25 - play sound when up key_instruction: "Change the code so the sound + will only play when the up arrow is pressed. (Click to see full instructions)" + CSPU5_U3L26 AND operator_instruction: "Update the genre and rating if statements + to give only one movie suggestion at a time. (Click to see full instructions)" + CSPU5_U3L26 OR operator_instruction: "Update the if statement to use an OR + to check for a \"?\" as well as who, what, where, when, why, how in the user + input. (Click to see full instructions)" + CSPU5_addDescriptiveIDsToTurtleDriver_instruction: "Improve the button by choosing + a descriptive and meaningful ID. (Click to see full instructions)" + CSPU5_basic if - DIY secret number_instruction: "Use console.log to print out + the different boolean expressions below to see what information they return. + (Click to see full instructions)" + CSPU5_basic if - check driving age_instruction: "Use console.log to print out + the different boolean expressions below to see what information they return. + (Click to see full instructions)" + CSPU5_basic if - voting examle_instruction: "Use console.log to print out the + different boolean expressions below to see what information they return. (Click + to see full instructions)" + CSPU5_basic if-else - driving age_instruction: "Use console.log to print out + the different boolean expressions below to see what information they return. + (Click to see full instructions)" + CSPU5_clickerGame_v1_template_instruction: "Create your own \"Chaser App\". + (Click to see full instructions)" + CSPU5_moveTurtleOnButtonClick_instruction: "Add an event handler to the button + to move the turtle forward. (Click to see full instructions)" + CSPU5_playWithEventTypes_instruction: "Debug the program by fixing the logical + error within the program. (Click to see full instructions)" + CSPU5_setPosition to fixed location_instruction: "Introducing the setPosition + command! Replace the moveTo in the button-click event handler to use setPosition + to move the button itself to a random location when it's clicked." + CSPU5_turtleDriver_add2ndButton_instruction: "Debug the program by verifying + your IDs are being referenced properly. (Click to see full instructions)" + Calc Circles of Eval .1_instruction: "You’ll be writing a kind of code called + Evaluation Blocks, because each block of code evaluates to a single value. + Change the ??? in this code so that the block evaluates to 5." + Calc Circles of Eval .2_instruction: "This Evaluation Block is a multiplication + function which takes two numbers and returns the product of those numbers. + Edit this block so that it multiplies 2 * 5" + Calc Circles of Eval .3_instruction: "Here's a function for addition which + takes two numbers and returns their sum. Use this Addition Block to add 3 + + 6." + Calc Circles of Eval .4_instruction: "Here we've nested an Addition Block + inside a Multiplication Block. Complete this code so it multiplies 3 by (4 + + 1)" + Calc Circles of Eval 1 (copy 1)_instruction: "Convert this statement to + of evaluation." + Calc Circles of Eval 1_instruction: "Every mathematical operator (+, -, *, + /, and so on) can be represented by an Evaluation Block in code. Change the + Evaluation Block to match the expression." + Calc Circles of Eval 2 (copy 1)_instruction: "Convert this statement to + of evaluation." + Calc Circles of Eval 2_instruction: "Use a Multiplication Block to complete + this code." + Calc Circles of Eval 3_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval 4_instruction: "This code is missing a couple of Evaluation + Blocks - make sure you put everything in the right order." + Calc Circles of Eval 5_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval 6_instruction: "Complete the Evaluation Blocks to match + this expression." + Calc Circles of Eval 7_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval 8_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval 9_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval Free Play_instruction: "Free Play: Try using the Evaluation + Blocks to write some equations of your own. How does nesting the blocks in + different ways impact their evaluation?" + Calc Define Funcs 1 (copy 1)_instruction: "Let's look at some more algebraic + functions now. Here's a function translated from the simple algebraic function + f(x) = x + 1. What would you expect this function to output if provided an + input of 15?" + Calc Define Funcs 1_instruction: "Let's look at some more traditional algebraic + functions now. Here's a function translated from the simple algebraic function + f(x) = x + 1. What would you expect this function to output if provided an + input of 15?" + Calc Define Funcs 2_instruction: "Write a function f that takes a parameter + x and returns x - 10. Test your function using f(15)." + Calc Define Funcs 3_instruction: "We don't have to call our function f every + time; create a function called times-ten that should take a parameter x and + return x * 10. Once you've created the function, run times-ten(50)." + Calc Define Funcs 4_instruction: "Write a function called half that takes a + number x and returns half that number. Once you've written the function, + use it to calculate half(21)" + Calc Define Funcs 5 - multiply 1_instruction: "Oh no! We lost our multiply + block! We'll have to create a function to multiply for us. To start off, + write a function \"f\" that takes a parameter \"x\" and returns x*5. Test + your function using f(3)." + Calc Design Recipe 1_instruction: "Let's use the Design Recipe to create a + function called cube - this function should take in a Number and return that + number to the power of 3. Make sure to write two example cases! When you're + done, use your new function to calculate cube(7)." + Calc Design Recipe 2_instruction: "Your school is holding a bake sale, and + you need to track the cost of making each cookie, the money paid, and the + total profit. Cookies cost $0.25 each to make, and sell for $1.50/cookie.\r\n\r\nWrite + the function cost, which takes in the number of cookies you intend to sell, + and returns the cost of making those cookies.\r\n\r\nTest your function by + calculating the cost of 42 cookies" + Calc Design Recipe 3_instruction: "Write the function sales which takes in + the number of cookies sold, and produces the amount of money customers spent + to buy those cookies (each cookie is sold at $1.50).\r\n\r\nTest your function + by calculating the sales for 135 cookies" + Calc Design Recipe 4_instruction: "Using the two functions we just wrote, write + the function profit, which takes in the number of cookies you sold, and gives + you back the total profit you make from selling your cookies, accounting for + the cost of baking them.\r\n\r\nTest your function by calculating the total + profit for 15 cookies." + Calc Free Play_instruction: "Free Play: Write functions and algorithms of your + own design!" + Calc Rocket 1 (copy 1)_instruction: "In the last puzzle you wrote a contract + for the function \"rocket-height\" that states it has a range of Number, domain + of Number, and should return the height of the rocket traveling at 15 m/s + after a given number of seconds. Let's write an example case now for the + height of the rocket at 3 seconds.\r\n\r\n\r\n\r\n \r\n\r\n" + Calc Rocket 1_instruction: "In the last puzzle you wrote a contract for the + function rocket-height that states it has a range of Number, domain of Number, + and should return the height of the rocket traveling at 15 m/s after a given + number of seconds. Let's write an example case now for the height of the + rocket at 3 seconds." + Calc Rocket 2_instruction: "Great, let's do one more example before writing + the function - what should the rocket height be after 30 seconds?" + Calc Vars 1.1_instruction: "Here we've set the age variable to 17 years. Can + you write an expression that calculates age in days?" + Calc Vars 1_instruction: "Variables allow us to name values so that we can + easily refer to them repeatedly throughout our programs. Here's a variable + called age. Set its value to your age and click run." + Calc Vars 2 (copy 1)_instruction: "Here we've set the \"age\" variable to + 17 - can you write an expression that calculates \"age\" in months?" + Calc Vars 2.1_instruction: "Here's a new variable called age-in-months. Use + the variable age to set age-in-months." + Calc Vars 2_instruction: "Can you write an expression that calculates age in + months?" + Calc Vars 3 (copy 1)_instruction: "Can you add to this code so that it calculates + how many hours there are in \"age\" years?" + Calc Vars 3_instruction: "Can you add to this code so that it uses the \"age\" + variable to calculate age in hours?" + Calc Vars 4_instruction: "We can also set variables by using other variables. + Let's say you have a brother who is two years younger than you - can you + set a new variable \"brother-age\" using your \"age\" variable?" + Choose Your Own Adventure_instruction: "You can do whatever you want in play + lab! Here's an example of choose your own adventure story in play lab." + Code Studio Puzzle Challenge 1 - Artist_instruction: "Draw the line. It is + 200 pixels long. " + Code Studio Puzzle Challenge 1 Artist1_instruction: "Draw the line. It is 200 + pixels long. " + Code Studio Puzzle Challenge 10 - Bee (copy 1)_instruction: "Move the Bee to + the flower and get all of the nectar." + Code Studio Puzzle Challenge 10 - Bee_instruction: "Move the Bee to the flower + and get all of the nectar." + Code Studio Puzzle Challenge 10b - Bee_instruction: "Move the Bee to the flowers + and get all of the nectar at each." + Code Studio Puzzle Challenge 11 - Artist_instruction: "Draw this line by using + the variable \"length\". Each line segment is 75 pixels long." + Code Studio Puzzle Challenge 11b - Artist_instruction: "Draw a square by using + the variable length provided." + Code Studio Puzzle Challenge 12 - Artist_instruction: "The code provided draws + one triangle. Add to it to draw triangles in a hexagon pattern." + Code Studio Puzzle Challenge 12a - Artist_instruction: "The code provided draws + one triangle. Add to it to draw triangles in a hexagon pattern." + Code Studio Puzzle Challenge 13 - Artist_instruction: "This is just like a + \"for\" loop. Complete the code to draw six lines that grow from 50, 60, 70, + 80, 90, to 100 pixels long. " + Code Studio Puzzle Challenge 14 - Artist_instruction: "This is just like a + \"for\" loop. Complete the loop to draw 4 squares that grow from 80, 100, + 120, to 140 pixels. " + Code Studio Puzzle Challenge 2 - Artist_instruction: "Now add a turn and another + line. The lines are 200 pixels long." + Code Studio Puzzle Challenge 3 - Artist_instruction: "Draw the square. Each + side is 100 pixels long." + Code Studio Puzzle Challenge 4 - Artist_instruction: "Draw the octagon. Each + side is 100 pixels long." + Code Studio Puzzle Challenge 5 - Bee (copy 1)_instruction: "Move the Bee to + the flower and get the nectar." + Code Studio Puzzle Challenge 5 - Bee_instruction: "Flowers contain a specific + amount of nectar. Move the Bee to the flower and collect nectar with the get + nectar block." + Code Studio Puzzle Challenge 6 - Bee_instruction: "Honeycombs can hold a specific + amount of honey. Get the nectar from the flower and make some honey." + Code Studio Puzzle Challenge 7 - Bee_instruction: "Move the Bee to the flower + and get the nectar." + Code Studio Puzzle Challenge 8 - Bee_instruction: "The cloud could be hiding + a flower or a honeycomb. Only get nectar from flowers. Only make honey at + honeycombs." + Code Studio Puzzle Challenge 9 - Bee_instruction: "The cloud could be hiding + a flower or a honeycomb. Only get nectar from flowers. Only make honey at + honeycombs." + Code Studio Puzzle Challenge Artist Screencast (copy 1)_instruction: "Draw + the line. Each segment is 100 pixels long. " + Code Studio Puzzle Challenge Artist Screencast 2_instruction: "Complete the + code to draw the line. Each segment is 100 pixels long. " + Code Studio Puzzle Challenge Artist Screencast_instruction: "Draw the line. + Each segment is 100 pixels long. " + Code Studio Puzzle Challenge Bee Screencast_instruction: "Move the Bee to the + flowers and get all of the nectar." + Code Studio Puzzle Challenge Square - Artist_instruction: "Draw a square by + using the variable length provided." + Code Studio Puzzle Challenge Var - Artist_instruction: "Draw a line by using + a variable \"length\" set to 180." + Collector Demo_instruction: "Look at all this loot! Help me get as many coins + as I can so I can improve my farm. I can only use 9 blocks though!" + Collector Test_instruction: "Collect all the gold!" + Course 2 Bee Loops 1_instruction: "Hi, I'm a bee. Can you help me collect + the nectar from these flowers? " + Course 2 Bee Loops 13_instruction: "Assessment: Use the repeat block to collect + all of the nectar." + Course 2 Bee Loops 2_instruction: "Can you do the same task more easily with + a loop?" + Course 2 Bee Loops 3_instruction: "Now use the new repeat block to collect + all of the nectar and make all of the honey." + Course 2 Bee Loops 3__instruction: "Can you use a loop to collect all that + nectar?" + Course 2 Bee Loops 4_instruction: "What happens if you loop this sequence 3 + times? Don't forget to make the honey at the end!" + Course 2 Maze Loops 1_instruction: "Can you get me to the pig using 5 blocks?" + Course 4 2_instruction: "The bee only wants nectar right now. Remember, not + all objects are flowers, so check to gather nectar only at flowers." + Course 4 Artist 1_instruction: "Help me draw a box. (Each line is 200 pixels + long) " + Course 4 Artist 10_instruction: "Click here to see the full instructions again!\r\n\r\nHere + is the code for an interesting shape. What happens when you repeat it multiple + times, turning between each iteration? Notice that the turns in this shape + add up to 420 degrees, which means that when your artist is done drawing, + it will be facing a different direction than when you started. That new direction + is exactly 60 degrees to the right of where you began." + Course 4 Artist 11_instruction: "Now for a challenge! Feel free to use trial + and error. You are not expected to get the image perfect the first time. Want + to see more hints? Click here!" + Course 4 Artist 12_instruction: "Want a second peek at the inspiration design + or the hints? Click here!\r\n\r\nOtherwise, make a design all your own!" + Course 4 Artist 13_instruction: "Still playing? Here is a blank canvas where + you can design anything you want!" + Course 4 Artist 2_instruction: "Can you use a loop to draw the greyed out square? (Each + side is 300px long)" + Course 4 Artist 20_instruction: "Still playing? Here is a blank canvas where + you can create whatever you want!" + Course 4 Artist 3_instruction: "Try to figure out what happens if you run this + code (or press \"Run\" to test it). Then, repeat it enough times to complete + the drawing." + Course 4 Artist 4_instruction: "How many degrees are in a circle? Fill in + the repeat block with that number to create a circle of colors." + Course 4 Artist 5_instruction: "Draw the other half of this design so it's + symmetrical. The triangles are equilateral and are 50 pixels long. Hint: You + may have to run the code several times to figure out all of the blocks that + need to be added." + Course 4 Artist 6_instruction: "Complete the code to draw these three, equilateral + triangles." + Course 4 Artist 7_instruction: "Now nest this loop inside another loop to draw + 10 triangles. This is called a nested loop. Hint: All 10 triangles complete + a 360 degree rotation. " + Course 4 Artist 8_instruction: "Draw this sun by looping this whole block of + code multiple times." + Course 4 Artist 8a_instruction: "Remember this shape? Now we're going to + let you build it without giving you any blocks to start!" + Course 4 Artist 9_instruction: "Loop this design 10 times and make sure to + turn between each shape that's drawn. \r\n" + Course 4 Artist Binary 1_instruction: "Here's a function that takes a binary + string of 1's and 0's and instructs the artist to follow them from left + to right, top to bottom. The artist will fill-in the squares when it sees + a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how + the artist uses binary to draw this pattern." + Course 4 Artist Binary 1a_instruction: "Here's a function that takes a binary + string of 1's and 0's and instructs the artist to follow them from left + to right, top to bottom. The artist will fill-in the squares when it sees + a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how + the artist uses binary to draw this pattern." + Course 4 Artist Binary 2_instruction: "Which of these binary strings could + you loop 8 times to draw this image?" + Course 4 Artist Binary 3_instruction: "Can you draw this pattern by looping + just three binary digits (0s and 1s)?" + Course 4 Artist Binary 4_instruction: "Each binary string represents one row + of this picture. Can you rearrange them so it draws a smiley face instead + of a frowny face?" + Course 4 Artist Binary 5_instruction: "Which 6 digit binary string, repeated + 11 times, will draw this image?" + Course 4 Artist Binary 6_instruction: "What is the shortest binary string that + you can repeat to draw this image?" + Course 4 Artist Binary 7_instruction: "Finish this drawing." + Course 4 Artist Binary Free Play 2_instruction: "Free Play: Here's a blank + canvas for you to draw on. Have fun!" + Course 4 Artist Binary Free Play 2a_instruction: "Here's a higher resolution + canvas to draw on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we + start to get creative with the bits?" + Course 4 Artist Binary Free Play 2b_instruction: "Click here to see hints." + Course 4 Artist Binary Free Play_instruction: "Free Play: Draw whatever you + like with binary!" + Course 4 Artist Binary pre1_instruction: "Use the blocks below to have the + artist draw \"01010101\" in binary in the first row." + Course 4 Artist Binary ryan_instruction: "Binary is a way of representing information + using only two options. Here, we're going to use the options \"off\" (represented + by the number 0) and \"on\" (represented by the number 1). \r\n\r\nWe've + provided you with a grid of \"pixels\" that you can walk through and make + designs by turning on only certain squares. Can you have the artist draw + \"01010101\" in binary in the first row?" + Course 4 Artist For Functions 10_instruction: "Let's Step it up a little, + can you draw a Star shape using the \"Draw a Square Line\" function? Good + luck!" + Course 4 Artist For Functions 11_instruction: "Let's Step it up a little, + can you draw a Star shape using the \"Draw a Square Line\" function? Good + luck!" + Course 4 Artist For Loops 1_instruction: "Use a repeat block to draw this triangle + that is 50 pixels wide." + Course 4 Artist For Loops 10_instruction: "Free Play Time! Have fun drawing + whatever you like with the blocks you have learned how to use" + Course 4 Artist For Loops 11_instruction: "Remember back in a previous stage + when we used a variable to control the number of sides in a shape? We are + going to do the same thing with the `counter` variable now. This pattern starts + with a triangle and adds one side at a time until it draws a decagon (10 sides). + Each side should be 100 pixels long. " + Course 4 Artist For Loops 11a_instruction: "Let's put it all together! Using + your knowledge of `for` loops and the `counter` variable, create this drawing + where each shape has two more sides than the last. Make sure that each side + is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little + of the code has been provided for you." + Course 4 Artist For Loops 12_instruction: "That looked pretty cool, but now + I'd like to draw each shape next to the last one. This time each side is + 20 pixels. Use a jump block to jump forward 40 pixels after each shape. " + Course 4 Artist For Loops 13_instruction: "Hmmm, those shapes are getting bigger + every time! Didn't we already solve this problem with variables? How can + we use the counter variable to make the sides smaller as there are more of + them? Instead of moving forward by a set amount, try moving forward (100 / + counter) pixels." + Course 4 Artist For Loops 14_instruction: "If you turn a little bit more or + less than you normally would for a shape, it creates a neat effect. Try using + some of the code from the last level, but turning 89 degrees to create this + twisted square spiral." + Course 4 Artist For Loops 15_instruction: "Free Play: Try making some drawings + of your own using \"for loops\". We've added a few useful variables for you + as well." + Course 4 Artist For Loops 2_instruction: "I've put the code for drawing a + triangle inside a for loop that counts from 50 to 100 by 10. NOTE: Make sure + you look at the code before you hit \"Run\"." + Course 4 Artist For Loops 3_instruction: "Use the last puzzle as a reference + to complete this one. The smallest triangle has 20 pixel sides, the largest + has 200 pixel sides, and each triangle is 20 pixels larger than the last. + " + Course 4 Artist For Loops 4_instruction: "How would you modify what you've + learned to draw these squares? They start at 15 pixels long, the largest is + 300 pixels long, and each square is 15 pixels larger than the last. " + Course 4 Artist For Loops 5_instruction: "Good job on the last puzzle! Let's + use that \"counter\" variable block again to draw this cool picture. " + Course 4 Artist For Loops 6_instruction: "Free Play! Try using a for loop to + draw a growing shape pattern of your own design." + Course 4 Artist For Loops 6a_instruction: "Make three small changes to the + code from the last level to get this!" + Course 4 Artist For Loops 7_instruction: "What happens if you remove the \"Repeat + 3\" from this algorithm, keeping the \"move\" and \"turn\" blocks in the for + loop? In this spiraling triangle, each side is 20 pixels longer than the last." + Course 4 Artist For Loops 8_instruction: "Just one little change to the code + from the last image can create this drawing. Can you figure out what that + change is?\r\n\r\nHint: You need to remove something!" + Course 4 Artist For Loops 8a_instruction: "Just one little change to the code + from the last image can create this image. Can you figure out what that change + is?" + Course 4 Artist For Loops 9_instruction: "Can you make a spiral? Move forward + from 1 to 75 pixels, increasing by 1 pixel each time." + Course 4 Artist For Loops Challenge_instruction: "**Challenge:** Can you figure + out how to use all of the things you've learned to create this image of polygons, + all with 40 pixel sides?" + Course 4 Artist For Loops Challenge_a_instruction: "Can you figure out how + to use all of the things you've learned to create this image?\r\n\r\nNeed + a hint? Click here." + Course 4 Artist For Loops inspire_instruction: "Free-Play Inspiration: You've + now learned everything you need to know to make a pattern like this! If this + picture inspires you, try to make something similar. Otherwise, create something + all your own.\r\n\r\nNeed a hint? Click here." + Course 4 Artist Functions 1_instruction: "Can you draw a square that is 100 + pixels in length, using a loop?" + Course 4 Artist Functions 10_instruction: "Which block do you need to add to + get the triangle to sit on top of the square?" + Course 4 Artist Functions 11_instruction: "Check out this code that draws a + cube - can you move it into a function called \"Draw a Cube\"" + Course 4 Artist Functions 12.1_instruction: "Let's create a function called + \"draw an octagon 20\" that draws an octagon where each side is 20 pixels + long." + Course 4 Artist Functions 12_instruction: "Loop square function to draw a line" + Course 4 Artist Functions 13.1_instruction: "Now, let's make a function called + \"jump to upper right\" that moves the artist to the upper-right of the octagon + that you just drew so we can finish this pattern.\r\n\r\nHint: To get yourself + to the upper-right corner, try jumping in a pattern that makes just 3/8 of + the octagon." + Course 4 Artist Functions 13_instruction: "Check it out we have a new function + called \"draw a line of squares\". Feel free to take a look inside the function + block to see how we built it. Click on \"Run\" when your are ready for the + next puzzle." + Course 4 Artist Functions 14.1_instruction: "Now, let's make a function called + \"jump to upper right\" that moves the artist to the top-right of the octagon + that you just drew so we can finish this pattern." + Course 4 Artist Functions 14_instruction: "You're doing great! Let's use + your new \"Draw a line of squares\" function to draw a Square shape. Remember + each square is 40 pixels in length." + Course 4 Artist Functions 15_instruction: "Let's Step it up a little, can + you draw a star shape using the \"draw a line of squares\" function? Good + luck! Hint: you may have to turn 144 degrees" + Course 4 Artist Functions 2_instruction: "Can you draw 3 squares 20 pixels + apart from one another? Hint: each square is 100 pixels in size" + Course 4 Artist Functions 3_instruction: "Using the \"draw a square\" function + block, can you draw this picture? Hint: each square is 120 pixels apart.\r\n" + Course 4 Artist Functions 4_instruction: "Are you ready to create your own + \"Function Block\"? Click on the \"Functions\" block in the tool box, name + it \"draw a triangle\", then create a triangle as you have done before with + the Action and Loops blocks. Then click on the Save and Close in the upper + right hand corner. Hint: Create a triangle that is 100 pixels in length. Good + luck!" + Course 4 Artist Functions 5 OLD_instruction: "Let's try to use our two functions + to draw a house - what needs to be fixed in this code to draw the house properly?" + Course 4 Artist Functions 5_instruction: "Using the \"draw a square\" function + block, can you draw this picture? Hint: each square is 120 pixels apart.\r\n" + Course 4 Artist Functions 6_instruction: "Which block do you need to add to + get the triangle to sit on top of the square?" + Course 4 Artist Functions 7_instruction: "Can you draw a line of squares using + a Square function? Each square is 40 pixel's in length." + Course 4 Artist Functions 8_instruction: "Are you getting the hang of how to + use function blocks? Let's modify this square so that it is 200 pixels in + size. Hint: click on \"edit\" to change the size of the \"draw a square\" + function editor. Remember to click on \"save and close\" to get out of the + function editor. " + Course 4 Artist Functions 9_instruction: "We have given you most of the code + to create a function. However there seems to be something missing. Can you + make this function block complete?" + Course 4 Artist Functions Inspiration_instruction: "Click here to see the hints + again." + Course 4 Artist Functions challenge_instruction: "Click here to see the hints + again." + Course 4 Artist Functions inspire_instruction: "Click here to see the inspiration + picture again." + Course 4 Artist Inspire_instruction: "Want a second peek at the inspiration + design or the hints? Click here!\r\n\r\nOtherwise, make a design all your + own!" + Course 4 Artist Params 1_instruction: "Let's edit a function that draws a + square with 50 pixel sides" + Course 4 Artist Params 10_instruction: "You can call functions from inside + other functions! Using your \"shape\" function as a base, create 3 house shapes + each 20 pixels larger than the last starting at 50 pixels in length. Using + a counter loop might be helpful. " + Course 4 Artist Params 11_instruction: "How about a function called \"pinwheel\" + that takes three parameters - \"sides,\" \"length\" and \"repeat.\" You can + calculate how much to turn after each shape using the same math you used to + figure out the turns for a shape of \"sides\". Can you recreate this picture? + Here's a tip each shape is 100 pixel's in length." + Course 4 Artist Params 12_instruction: "Use your \"pinwheel\" function to draw + each of these shapes. The side length for each image is 50." + Course 4 Artist Params 13_instruction: "Freeplay: Here are the functions you've + written, and some more for you to play with. Draw something awesome!" + Course 4 Artist Params 2_instruction: "That triangle function would be a whole + lot more useful if it could draw triangles of different sizes. I've added + a parameter for line length, but it doesn't do anything yet. Can you update + the function so it uses the \"length\" parameter when it draws each side? + The triangle sizes are 150 pixels, 75 pixels and 25 pixels." + Course 4 Artist Params 3_instruction: "Awesome, can you draw each of these + triangles with that new function? The first is 25 pixels long, the second + is 50, and the third is 75. " + Course 4 Artist Params 4_instruction: "Can you add a new function called square? + It should also take a length parameter, just like the triangle. This time + draw 3 squares 25, 50 and 75 pixels in length,100 pixels apart." + Course 4 Artist Params 5_instruction: "Use both of your new functions to draw + this picture. To make this easier you use a loop with a \"counter\" parameter. + " + Course 4 Artist Params 6_instruction: "Let's edit this \"draw a shape\" function. + It already has a \"length\" parameter. Now, let's edit the function to also + add a \"sides\" parameter. Remember the angle to turn for a given shape is + 360 divided by the sides it has. Hint: lengths for each shape are the triangle + is 100 pixels, the hexagon is 25 pixels and the square is 50 pixels. " + Course 4 Artist Params 7_instruction: "Can you draw these shapes by filling + in the \"???\" The square and triangle are 100 pixels in size while the hexagon + is 75 pixels in size. " + Course 4 Artist Params 8_instruction: "Can you figure out how to draw this + shape? Here's a hint create a new function with 6 sides called a hexagon. + " + Course 4 Artist Params 9_instruction: "Do you remember when we used the counter + loop but removed a loop within? Let's have some fun and use the \"draw a + shape\" function with \"sides\" and \"length\" parameters. Can you re create + these shapes? The square counter should be 5/100/5, the triangle counter should + be 10/100/10 and the hexagon is 2/100/2." + Course 4 Artist Var 9_instruction: "Here's the algorithm to draw a triangle, + modify it so it uses the \"sides\" variable instead. Replace the number 3 + with the \"sides\" variable. Hint: remember to use the \"set sides to\" block." + Course 4 Artist Vars 1_instruction: "Let's draw an equilateral triangle. \r\n\r\nIt + has to be exactly 100 pixels long on each side." + Course 4 Artist Vars 10_instruction: "Here's an algorithm that draws a triangle + out of smaller triangles. Can you modify it so that it uses the \"sides\" + variable to draw each triangle? Look through the code, and every time you + see the number 3, replace it with your \"sides\" variable. Remember to use + the \"set sides\" block." + Course 4 Artist Vars 11_instruction: "Here’s more complicated code using the + same concepts from the last puzzle - what should you set the \"sides\" variable + to in order to draw this picture made of squares?" + Course 4 Artist Vars 12_instruction: "Let's set the \"sides\" variable to + 5. The more sides we add to this algorithm, the bigger this whole pattern + gets! Notice that there is another variable called \"length\". We can now + use that wherever we have a \"move forward.\" Set the \"length\" variable + to 75 for this shape." + Course 4 Artist Vars 13_instruction: "When a shape has lots of sides, each + side needs to be shorter if you want the whole pattern to fit on the screen. + \r\nLet's recreate the algorithm for this amazing pattern, but instead of + manually setting the `length` variable, let's use a math block with the `sides` + variable inside to make sure that each shape fits correctly. The perimeter + of each polygon is 300 pixels.\r\nNeed some hints? Click here." + Course 4 Artist Vars 14_instruction: "Free Play: Check it out! Now your algorithm + is nested within one more loop. Experiment with changing the values of your + two variables to draw cool patterns.\r\n\r\nFor even more effect, try playing + with color! Use random colors inside loops to see how it changes your design." + Course 4 Artist Vars 2_instruction: "Instead of using \"move forward by 150,\" + the \"move\" block is now referencing a variable called \"length.\" Can you + set \"length\" to 150 to draw this new triangle?" + Course 4 Artist Vars 3_instruction: "Here's a loop that draws a square, but + something's missing. Can you fix it so that it uses the variable \"length\" + to figure out how long each side should be? " + Course 4 Artist Vars 4_instruction: "Now I want to make a rectangle that is + twice as tall as it is wide. We've got a variable called \"width\" that needs + to be set to 100. Can you use the math blocks to complete the code?" + Course 4 Artist Vars 5_instruction: "Use the variable \"sides\" to control + how many times this loop gets run." + Course 4 Artist Vars 6_instruction: "Here’s some code that can draw any regular + polygon. There’s a new variable called sides that is set to 4. Can you use + the sides variable (along with the math block) to turn the right amount regardless + of how many sides there are in the polygon?\r\n\r\nClick here to go back to + the hint!" + Course 4 Artist Vars 7_instruction: "Use what you learned in the last puzzle + to create this hexagon using the \"sides\" variable.\r\n\r\nSee how you could + change just one value to draw a triangle, square, pentagon, or octagon?" + Course 4 Artist Vars 8_instruction: "Free Play: Experiment with the number + of sides this shape has. Can you change the algorithm so that the overall + size of the shape stays the same, no matter how many sides it has? Hint: If + you divide your starting length by the number of sides, the length of each + side will get shorter as the number of sides gets higher." + Course 4 Artist Vars 9_instruction: "Modify this algorithm so it uses the \"sides\" + variable instead of a fixed number to draw a triangle. Don't forget to use + the \"set sides to\" block." + Course 4 Bee 1_instruction: "The bee can't tell what's under the cloud! \r\n\r\nUse + the `if` block to check whether there is a flower under the cloud. \r\n\r\nGet + nectar one time, ONLY if there is a flower." + Course 4 Bee 2_instruction: "Use the \"if/else\" block to check each object + to see if it's a flower or a honeycomb . If it's a flower, collect one nectar...otherwise, + make one honey!" + Course 4 Bee 3_instruction: "The unknown object is either a flower or a honeycomb. + This time, use the if/else block to collect one nectar if it is a flower, + else make one honey (because then it would be a honeycomb)." + Course 4 Bee 4_instruction: "This purple flower may have either 3, 2, or 1 + nectar. Here an if/else block is combined with another if/else block to create + an \"if/else-if/else\" statement. Complete the solution to collect the unknown + amount of nectar." + Course 4 Bee 5_instruction: "This purple flower may have either 3, 2, or 1 + nectar. Add an if-else block to create an if, else-if, else block. Complete + the solution to collect the unknown amount of nectar." + Course 4 Bee 6_instruction: "This purple flower may have either 3, 2, or 1 + nectar. Create an if, else-if, else block to collect the unknown amount of + nectar." + Course 4 Bee 7_instruction: "Use everything you have learned so far to collect + all the nectar. The purple flower may have either 3, 2, or 1 nectar." + Course 4 Bee For Loops 1_instruction: "Use a loop to collect the nectar from + each flower." + Course 4 Bee For Loops 10_instruction: "If your loop is counting down, the + increment is subtracted from your counter variable each loop. What should + your increment be to collect 9, then 6, and then 3 nectar?" + Course 4 Bee For Loops 11_instruction: "What's wrong with this loop? See if + you can fix it and make the bee collect all the nectar." + Course 4 Bee For Loops 2_instruction: "Here's a new kind of loop, called the + \"for\" loop. This particular for loop will count from 1 to 5 by 1, and run + the contents of the loop each time it counts. Help the Bee get the nectar." + Course 4 Bee For Loops 3_instruction: "You can solve this puzzle by using a + for loop to count from 1 to 3 by 1. Now let's go get some nectar!" + Course 4 Bee For Loops 4_instruction: "Collect all of the nectar from these + flowers. I wonder if there's an easier way to do this..." + Course 4 Bee For Loops 5_instruction: "Ah, the for loop makes this much easier! + Using the \"counter\" variable from the for loop to loop the \"get nectar\" + block the same number of times as the loop. Whew! That's a lot of loops. + All the code you need it there, take a look at how it is put together then + click on Run and see how it works. " + Course 4 Bee For Loops 6_instruction: "You can also use a for loop to count down. Try gathering this nectar by counting down from 5 to 1 by 1." - grade5_bee_for_loops7_instruction: "Try collecting these flowers using an increment + Course 4 Bee For Loops 7_instruction: "Use your for loop \"counter\" variable + to control how far to move horizontally." + Course 4 Bee For Loops 8_instruction: "Can you use the loop variable to control + movement and nectar collection?" + Course 4 Bee For Loops 9_instruction: "The last number in your for loop is + called the \"increment,\" and each time the loop is run the counter variable + changes by the increment. Try collecting these flowers using an increment of 2." - grade5_bee_for_loops8_instruction: "You've got this! What should your increment - be to collect 3, 6, 9, 12, 15 nectar?" - grade5_bee_for_loops9_instruction: "Use the `counter` variable to navigate - this garden with the fewest number of blocks possible." - grade5_bee_parameters_new8_instruction: "That's a great function you've created! - You are officially on your own now. Collect all the nectar. Make all the honey." - grade5_bee_parameters_new9_instruction: "Bonus Challenge! If you are feeling - ambitious, try this puzzle. It is possible to collect all of the nectar and - make all of the honey using only a For loop, a Repeat loop, a function call, - and a turn. Try it all on your own, or view the hints to build it step-by-step. - Great job with this stage!" - grade5_pixelation_instruction: "Encode an image of anything you like using - binary. The binary language will be represented with '0' and '1' only." - grade5_playlab_freeplay_instruction: "It's free play time! Have fun with all - the blocks in your tool box. " - grade5_playlab_parameters_points1_instruction: "Here's the same game but most - of the code is hidden. We've added a new function called `score_points.`\r\n\r\nAdd - a new parameter called `points` to the `player_score` function. \r\n\r\nThe - `score_points` function should be able to both add and remove points from - `player_score` depending on which actor is hit.\r\nChanging the score by 1 - will add a point, while changing the score by -1 will subtract a point.\r\n\r\nWhen - you're done, click \"Run\" to play. When Dog scores 6 points, you will move - on to the next puzzle. " - grade5_playlab_variables1_instruction: "This time you don't have to write - any code, just hit \"Run\" to play the game! In this game, you're the dog - who is trying to collect more flags than the cat. Use the down arrow to control - the dog. Press \"Finish\" when you're done playing." - grade5_playlab_variables10_instruction: "Edit the the \"patrol\" function to + Course 4 Bee Loops 5 NEW_instruction: "Here are three flowers. Can you find + the pattern of instructions that you need to repeat 3 times to collect the + nectar with the fewest number of blocks?" + Course 4 Bee Loops 5a NEW_instruction: "Now, use loops to help the bee collect + all the nectar on its way to the honeycomb with as few blocks as possible. When + you get there, don't forget to make honey!" + Course 4 Bee Params 1_instruction: "Write a sequence to collect all of the + nectar using `get 3 nectar` which turns, moves to collect the nectar, and + then returns to the original location." + Course 4 Bee Params 2_instruction: "Modify the \"get 3 nectar\" function so + it makes me turn right instead of left to the flowers." + Course 4 Bee Params 3 (copy 1)_instruction: "Now there are flowers on both + sides! Maybe you can use a parameter so that the same function works for flowers + on either side. I've added a parameter called \"direction\" to the function. + If the \"direction\" parameter equals 0 I should turn left, if it's 1 I should + turn right." + Course 4 Bee Params 3_instruction: "Now there are flowers on both sides! We've + added variables called \"left\" and \"right\" for you to use, and added a + parameter called \"direction\" to \"get 3 nectar\". Edit \"get 3 nectar\" + so that the bee turns the correct direction when the variables \"left\" or + \"right\" are passed into the function. " + Course 4 Bee Params 4 (copy 1)_instruction: "Try using your new function to + collect all of the flowers. Remember, 0 = left and 1 = right." + Course 4 Bee Params 4 - Two WhenRun_instruction: "Try using your new function + to collect all of the flowers. Remember to use the left and right variables." + Course 4 Bee Params 4 backup_instruction: "Wouldn't it be nice if we could + collect all of these nectars with the a single function? Try adding a new + parameter to your function called \"nectars\" to control the amount of nectar + to collect. You'll probably want to rename the function too!" + Course 4 Bee Params 4_instruction: "Try using your new function to collect + nectar from all of the flowers. Remember to use the left and right variables." + Course 4 Bee Params 5_instruction: "Let's start from scratch - can you create + a new function called \"get 5 nectar\" with a direction parameter?" + Course 4 Bee Params 6 (copy 1)_instruction: "Try using your new function to + collect all of this nectar." + Course 4 Bee Params 6_instruction: "Wouldn't it be nice if we could collect + all of these nectars with a single function? Try adding a new parameter to + your function called \"nectar units\" to control the amount of nectar to collect. + You'll probably want to rename the function too!" + Course 4 Bee Params 7 (copy 1)_instruction: "Try using your new function to + collect all of this nectar." + Course 4 Bee Params 7_instruction: "Try using your new function to collect + all of this nectar." + Course 4 Bee Params 8 Clone 2_instruction: "Oooh, now there's honey to deal + with too! How could you update your function to either get nectar or make + honey." + Course 4 Bee Params 8 Clone_instruction: "Oooh, now there's honey to deal + with too! How could you update your function to either get nectar or make + honey." + Course 4 Bee Params 8 clone 3_instruction: "Oooh, now there's honey to deal + with too! How could you update your function to either get nectar or make + honey." + Course 4 Bee Params 8 new_instruction: "Oooh, now there's honey to deal with + too! How could you update your function to either get nectar or make honey." + Course 4 Bee Params 8_instruction: "Challenge: Now there's honey to deal with + too! Rewrite your function to use both the number of honey units and the number + of nectar units. How would you use those numbers to decide what you should + do?" + Course 4 Bee Params Ex_instruction: "Try using your new function to collect + all of this nectar." + Course 4 Binary 1_instruction: "Here's a function that takes a binary string + of 1's and 0's and instructs the farmer to turn on the go from left to right, + top to bottom, turning on the squares where the number has a zero. Run the + code provided to see how the farmers uses binary to draw an image." + Course 4 Binary 2_instruction: "What binary string could you loop 8 times to + draw this image? Hint: the number \"1\" fills a hole." + Course 4 Binary 3_instruction: "Can you draw this pattern by looping a single + binary string?" + Course 4 Binary 5 (copy 1)_instruction: "Which binary string, repeated 10 times, + will draw this image?" + Course 4 Binary 5_instruction: "Which binary string, repeated 10 times, will + draw this image?" + Course 4 Binary 6 (copy 1)_instruction: "Which binary string, repeated 10 times, + will draw this image?" + Course 4 Binary 6_instruction: "Which binary string, repeated 10 times, will + draw this image?" + Course 4 Binary 7_instruction: "Which binary string, repeated 10 times, will + draw this image?" + Course 4 Binary 8_instruction: "You can complete the most of this image by + looping a 5 bit binary number - then you'll need one more 4 bit number to + get the bottom right-hand corner." + Course 4 EC 1a_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 1b_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 2a_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 2b_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 2c_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 2d_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 3_instruction: "Use what you learned in the previous level to draw + an image like this. Note: The code becomes more simple if you incorporate + parameters. " + Course 4 EC 3a_instruction: "Extreme Challenge: No rules. No clues. Just the + challenge!" + Course 4 Maze 1_instruction: "Get the angry bird to the pig!" + Course 4 Maze 2_instruction: "Avoid the TNT!" + Course 4 Maze 3_instruction: "Program the angry bird to get to the pig. " + Course 4 Maze 4_instruction: "Try the \"repeat\" block to use fewer blocks + when solving this puzzle..." + Course 4 Maze 5_instruction: "Can you solve this puzzle using the fewest number + of blocks possible?" + Course 4 Maze 6_instruction: "Can you solve this puzzle using the fewest number + of blocks possible?" + Course 4 Play Lab For Loops 2_instruction: "This time, let's try counting + the odd numbers from 1 to 100." + Course 4 Play Lab Params 1_instruction: "Here's a function called `jump` that + causes your main character to jump up 100 pixels. Run the program and use + the jump function to collect all of the flags by moving the dog with the arrow + keys." + Course 4 Play Lab Params 10_instruction: "We've added one last function for + you. \r\n\r\nUse an \"if\" statement to program your game to call the \"level_up\" + function only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor + example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 + to move to the next puzzle. " + Course 4 Play Lab Params 2_instruction: "Now we've got flags that are too + high for our current jump! Let's use both the \"up\" and \"down\" arrows + so that we can have multiple jump heights. \r\n\r\nWe need to add a parameter + to our jump function called \"height\". The up arrow should cause the dog + to jump 200 pixels and the down arrow should make it jump only 100 pixels. + " + Course 4 Play Lab Params 3_instruction: "We have added another parameter to + the jump function so that we can use it with other actors. Each actor is represented + by a number, starting from one. Edit the \"jump\" function so that it uses + the \"actor\" parameter to make the correct character jump. " + Course 4 Play Lab Params 4_instruction: "Here's a function called `patrol`. + \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 pixels." + Course 4 Play Lab Params 5_instruction: "Edit the the \"patrol\" function to add an \"actor\" parameter, so that we can call it for each of the actors on the screen. Remember, the actors correspond to numbers 1, 2, and 3." - grade5_playlab_variables11_instruction: "Add another parameter called \"speed\" + Course 4 Play Lab Params 6_instruction: "Add another parameter called \"speed\" to the \"patrol\" function. Try using a \"set speed\" block with the new \"speed\" parameter to help Penguin get both flags before the other sprites even get one." - grade5_playlab_variables12_instruction: "Let's have some fun! Look at the - code provided to see if you can figure out what each block does. \r\nWhen - you're done, use the arrow keys to control Dog and collect all of the flags.\r\nNOTE: - You don't need to make any changes to the program" - grade5_playlab_variables13_instruction: "Use the `when actor touches` block - to send Dog back to the top-left ONLY if Dog touches any of the other actors." - grade5_playlab_variables14_instruction: "It's free play time! Have fun with - all the blocks in your tool box. " - grade5_playlab_variables1ask_instruction: "This time, when you press 'run', - you will see a 'prompt' asking you for a number. This number will be stored - in a variable used to set the dog's speed.\r\n\r\n\r\nPay attention to how - this program is written!" - grade5_playlab_variables2_instruction: "The race in that last puzzle wasn't + Course 4 Play Lab Params 7_instruction: "Let's have some fun! Look at the + code provided to see if you can figure out what each block does. \r\nWhen + you're done, use the arrow keys to control Dog and collect all of the flags.\r\nNOTE: + You don't need to make any changes to the program" + Course 4 Play Lab Params 8_instruction: "Use the `when actor touches` block + to send Dog back to the top-left ONLY if Dog touches any of the other actors." + Course 4 Play Lab Params 9_instruction: "Here's our game from an earlier stage, + but most of the code is hidden. There’s a new function `score_points.`\r\n\r\nEdit + the function so that a new parameter called `points` can be added to `player_score`. + \r\n\r\nThe variable `player_score` should increase each time Dog tags Cat + with pie, and decrease each time that Cat tags Dog with a sandwich.\r\n\r\nNote: + When you're done, click \"Run\" to play. When Dog scores 6 points, you will + move on to the next puzzle. " + Course 4 Play Lab Vars 1_instruction: "This time you don't have to write any + code, just hit \"Run\" to play the game! In this game, you're the dog who + is trying to collect more flags than the cat. Use the down arrow to control + the dog. Press \"Finish\" when you're done playing." + Course 4 Play Lab Vars 2_instruction: "The race in that last puzzle wasn't very fair! Change the `dog_speed` variable to make sure you can collect more flags than Cat. The first to collect 10 flags wins!" - grade5_playlab_variables3_instruction: "Use the left and right arrows to move, + Course 4 Play Lab Vars 3_instruction: "Use the left and right arrows to move, and the up arrow to jump. See if you can collect all of the flags." - grade5_playlab_variables4_instruction: "Now we're using a variable called - \"height\" to control how high the dog can jump. Update the \"height\" variable - so that the dog can jump high enough to reach all the flags." - grade5_playlab_variables5_instruction: "You've seen now how a variable can - be used to set the height of an actor's jump. How else could you use a variable?\r\n\r\nLet's - build a game! First we'll need a score. Try setting the 'points' variable - to give yourself 10 free points!" - grade5_playlab_variables6_instruction: "Use the right arrow to throw pie.\r\n\r\nIn + Course 4 Play Lab Vars 4_instruction: "Now we're using a variable called \"height\" + to control how high the dog can jump. Update the \"height\" variable so that + the dog can jump high enough to reach all the flags." + Course 4 Play Lab Vars 5_instruction: "Let's build a game! First we'll need + a score. Rebuild the code that you saw in the last level to set the score + to 10. " + Course 4 Play Lab Vars 6 (copy 1)_instruction: "Cool, now we've got our score + variable, but how are we going to make it useful? How about adding to your + score variable each time you hit the enemy with a fireball? Use the \"when + actor 2 touches anything\" event to trigger an update to your score when your + fireballs hit the cat. You can increment the score by setting score = score + + 1. Get your score up to 10 (going one at a time!) to pass the level." + Course 4 Play Lab Vars 6_instruction: "Use the right arrow to throw pie.\r\n\r\nIn our game, how should we score points? Add 1 to your \"points\" variable each time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" event to trigger an update to your score. You can increment your variable by setting \"points = points + 1.\" Get your score up to 10 (going one at a time!) to pass the level." - grade5_playlab_variables6ask_instruction: "This time, you need 100 points to - win! Don't worry though, you can choose how many points you earn each time - you score a hit!\r\nTry adding the `ask` block and changing the number 1 out - for the variable `value`." - grade5_playlab_variables7_instruction: "Nice, now let's make sure this game + Course 4 Play Lab Vars 7_instruction: "Nice, now let's make sure this game isn't too easy to play. Any time Dog (actor 1) gets hit by a sandwich from Cat (actor 2), you should lose a point. Start with 10 points so it's not too hard. Let your score drop down from 10 to 0 to pass the level." - grade5_playlab_variables71_instruction: "Here's our game from an earlier stage, - but most of the code is hidden. There’s a new function `score_points.`\r\n\r\nEdit - the function so that a new parameter called `points` can be added to `player_score`. - \r\n\r\nThe variable `player_score` should increase each time Dog tags Cat - with pie, and decrease each time that Cat tags Dog with a sandwich.\r\n\r\nNote: - When you're done, click \"Run\" to play. When Dog scores 6 points, you will - move on to the next puzzle. " - grade5_playlab_variables81_instruction: "We've added one last function for - you. \r\n\r\nUse an \"if\" statement to program your game to call the \"level_up\" - function only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor + Course 4 Play Lab Vars 8 (copy 1)_instruction: "Alright, one last thing for + this game - let's set it up so the player can win (or lose). Use a forever + loop to check the value of score - if score is ever greater that 20, make + the enemy vanish. If the score is every less than 0, make the player vanish. + Click \"Finish\" when the game works like you'd like it to." + Course 4 Play Lab Vars 8_instruction: "Let's set up this game so the Dog can + win (or lose). Use a forever loop to check the value of score - if score is + ever greater that 20, make the enemy (the Cat) vanish. If the score is ever + less than 0, make the player (the Dog) vanish. Click \"Finish\" when the game + works like you'd like it to." + Course 4 Play Lab Vars 9_instruction: "Free Play time! Here are all of the + variables we've played with so far in this stage, as well as a few more in + case you want them. \r\n\r\nNotice that there are now so many blocks in our + toolbox that they need to be organized! Here, we've put each piece into + an appropriate category. Take some time to explore everything that is available. + When you're done browsing, make a game or story using repeats, variables, + and events. \r\n\r\nHint: scroll down to see all the commands in the workspace." + Course 4 Play Lab Vars_instruction: "Alright, one last thing for this game + - let's set it up so the player can win (or lose). Use a forever loop to + check the value of score - if score is ever greater that 20, make the emeny + vanish. If the score is every less than 0, make the player vanish." + Course 4 Play Labs For Loops 1_instruction: "Let's make the dog speak every + number from 1 to 100. Use a `for` loop and the counter block to speak the + counter variable each time the loop is run." + Course 4 Play Labs For Loops 2_instruction: "This time, help Olive the Cat + count only the odd numbers from 1 to 101." + Course 4 Play Labs For Loops 3_instruction: "If we count by larger numbers, + we count even higher in the same amount of time. Try making Pirate Pegleg + count from 10 up to 1000, adding 10 at a time." + Course 4 Play Labs For Loops 4_instruction: "Changing the increment can be + helpful, but we're still counting linearly (each number is the same distance + from the last) What if I wanted to count exponentially? Without changing the + settings in this for loop, can you count 1, 4, 9 , 16, 25... (counter squared)?" + Course 4 Play Labs For Loops 4a_instruction: "Now, let's blend the variables + from Stage 7 together with your \"counter\" variable to make some magic happen. \r\n\r\nIn + this puzzle, Dog will count from 0 to 1000 by \"increment\". Set the \"increment\" + variable to 10 at the beginning of your code to see what happens." + Course 4 Play Labs For Loops 5_instruction: "In the last stage we counted the + square of each number. Try changing \"counter ^ 2\" to \"counter ^ 3\" to + count the cube of each number (1, 8, 27, 64, 125, 216, 343…)" + Course 4 Play Labs For Loops 5a_instruction: "In this puzzle, Dog will be your + time keeper.\r\n\r\nDog will count from 0 to 30 by \"increment\". The \"increment\" + variable will begin with a value of 1.\r\n\r\nCan you make it so that each + time you click Dog, the increment increases by 2? Click the forward arrow + to run the for loop.\r\n\r\nRun the loop a couple of times, clicking Dog before + each one." + Course 4 Play Labs For Loops 6_instruction: "You may recall that a prime number + is any whole number that is only divisible by itself and 1. Use the \"is_prime\" + function to speak out only the prime numbers from 1 to 100." + Course 4 Play Labs For Loops 6a_instruction: "Dog will still keep time by counting + with our \"for loop\" by \"increment\", but this time, we will add The Wizard + into the mix. Can you change the code so that \"increment\" goes up by two + each time The Wizard is clicked?\r\n\r\nWatch out! The Wizard moves quickly!" + Course 4 Play Labs For Loops 7_instruction: "Could you use a for loop to help + me speak the sequence 1, 4, 7, 10, 13, 16, 19, 22, 25?" + Course 4 Play Labs For Loops 7a_instruction: "Now we're getting somewhere! What + if we start counting how many times we can click The Wizard before Dog gets + to 30? \r\n\r\nFinish adding blocks to The Wizard so that every time he's + clicked the variable \"clicked\" increases by one. You can ignore \"increment\" + for now.\r\n\r\nDog will start counting when you click \"Run\"." + Course 4 Play Labs For Loops 8_instruction: "Now, help the actors move as they + count. \r\n\r\nDog should move and count by adding 2 (counter + 2) each time. Cat + will move and count by multiplying by 2 (counter * 2) each time. Penguin + will move and count to the power of 2 (counter ^ 2) each time. Who will reach + their flag first?" + Course 4 Play Labs For Loops 8a_instruction: "To finish our game, we need to + bring back the \"increment\" variable! Let's tie it to the level of the + game.\r\n\r\n1) Keep track of the number of times The Wizard is clicked.\r\n2) + If The Wizard is clicked at least 10 times before Dog counts to 30, raise + \"increment\" by 1 and start again.\r\n3) If The Wizard does not get clicked + at least 10 times, the game is over." + Course 4 Playlab For Loop Freeplay_instruction: "Freeplay: Use everything you've + learned so far to make a game that includes a `for` loop!" + Course 4 Playlab For Loops 4b_instruction: "Can you change the **increment** + in one of the loops so that the race is a tie?" + Course 4 Playlab For Loops 5b_instruction: "Adjust the interval on these `for` + loops so that the two characters end in the exact same place." + Course 4 Playlab For Loops 6b_instruction: "Edit this `for` loop to create + a game that's fun for you to play! \r\nPress \"Run\" and click Madame Unicorn + as many times as you can. Can you beat our score of 24? " + Course 4 SCF 1_instruction: "Use the suggested functions to draw four rows + of hexagons. Notice how our even numbered rows are shifted to the right?" + Course 4 SCF 1a_instruction: "Can you figure out how to collect all of this + nectar with the fewest blocks possible?" + Course 4 SCF 1b_instruction: "Can you figure out how to collect all of this + honey with the fewest blocks possible?" + Course 4 SCF 2_instruction: "Use what you learned in the previous level to + draw an image like this. Note: The code becomes more simple if you incorporate + parameters. " + Course 4 SCF 3 Fail 1_instruction: "Can you figure out how to..." + Course 4 SCF 3 Fail 2_instruction: "Can you figure out how to..." + Course 4 SCF 3_instruction: "Use what you learned in the previous level to + draw an image like this. Note: The code becomes more simple if you incorporate + parameters. " + Course 4 SCFL 1_instruction: "Solve this puzzle using the fewest number of + blocks possible." + Course 4 SCFL 1a_instruction: "Can you get Skrat to his acorn using as few + blocks as possible?" + Course 4 SCFL 1b_instruction: "Can you get Skrat to his acorn using as few + blocks as possible?" + Course 4 SCFL 2_instruction: "Solve this puzzle using the fewest number of + blocks possible." + Course 4 SCFL 3_instruction: "Can you figure out how to re-create this drawing?" + Course 4 SCFL 4_instruction: "Can you figure out how to re-create this drawing?" + Course 4 SCFL 5_instruction: "Can you figure out how to re-create this drawing?" + Course 4 SCFL 6_instruction: "Can you figure out how to re-create this drawing + with a single loop?" + Course 4 SCFL 7_instruction: "The artist wants to catch some waves! Can you + figure out how to re-create this drawing?" + Course 4 SCFP 1_instruction: "Create a function with parameters that allows + the artist to jump backward and forward by x pixels, and also up and down + by y pixels (using positive and negative numbers)." + Course 4 SCV 1_instruction: "Click here to view the instructions again." + Course 4 SCV 2_instruction: "Click here to view the instructions again." + Course 4 SCV 3_instruction: "Now for a game of tag! Tag Cat to get 2 points. + Tag Penguin to get 3 points. Get exactly 10 points to win!\r\nBut be careful, + when Cat and Penguin tag each other, they take points away.\r\n\r\nAdd the + blocks necessary to make this game work the way it's been explained. How + will you get Dog to move in all directions using the arrow keys? How will + you add points when Dog tags Cat or Penguin? How will you subtract points + when Cat and Penguin touch?" + Course 4 SCV 4_instruction: "Solve this puzzle with the fewest number of blocks + possible." + Course 4 SCV 5_instruction: "Solve this puzzle with the fewest number of blocks + possible." + Course 4 SCV 6_instruction: "Click here to view the instructions again." + Course 4 SCVP 1_instruction: "Create a function with parameters that allows + the artist to jump backward and forward by x pixels, and also up and down + by y pixels (using positive and negative numbers)." + Course 4 Variables Assessment_instruction: "Can you create this image using + a variable for sides? Each line should be 50 pixels long." + Course1BeePuzzle12_instruction: "Get three nectars and then make two honey" + Course1MazeAssessment1_instruction: "This is a test!\r\nMove one way, then + another to get me to the pig" + Course1MazeAssessment2_instruction: "This is a test!\r\nMove one way, then + another to get me to the pig." + Crack Random Substitution_instruction: "Instructions" + Crack a Caesar Cipher_instruction: "Instructions" + ECSPD Binary Odometer_instruction: "This is another resource you could use + with your students." + Eval Booleans 1_instruction: "Boolean operators (like >, <, =) allow us to + compare different values, returning either true or false. Click \"Run\" to + see how this expression evaluates." + Eval Booleans 2_instruction: "Can you set the values so that this expression + evaluates as true?" + Eval Booleans 3_instruction: "The string-length function returns the number + of characters in a string (including spaces!) - make this code evaluate to + true." + Eval Booleans 4_instruction: "Here's an Evaluation Block called AND - it returns + true if both of its parameters are true, otherwise it returns false. Edit + the x variable so that this expression returns true." + Eval Booleans 5_instruction: "This OR block returns true if either of its parameters + is true. Otherwise, if both parameters are false it will return false. Set + the y variable to a value that will cause this expression to return false." + Eval Booleans 6_instruction: "Here's one more boolean block called NOT. This + block flips true to false, or false to true. If you wrap this block of code + in a NOT block, it should return true (because we are asking if the two expressions + do NOT produce equal values)." + Eval Booleans Free Play_instruction: "Free Play: Try out some creations of + your own using Booleans." + Eval Booleans_instruction: "Booleans allow us to compare different values, + returning \"true\" if the are equal, or \"false\" if they are not. What do + you think this code will evaluate to?" + Eval Cond 1_instruction: "The cond block checks the boolean expressions in + the left column, and as soon as it finds one that returns \"true\" it runs + the corresponding code on the right. If none of the expressions evaluate to + \"true,\" it runs the bottom block. Update the \"temperature\" variable so + that this block returns \"It's just right.\"" + Eval Cond 2 (copy 1)_instruction: "This condition returns a different shape + based on the value of the \"sides\" variable - change the value of \"sides\" + so that the conditional returns a triangle." + Eval Cond 2_instruction: "This condition returns a different shape based on + the value of the \"sides\" variable - change the value of \"sides\" so that + the conditional returns a triangle." + Eval Cond 3 (copy 1)_instruction: "Can you write a conditional that checks + the variable \"age\" and returns \"Old enough to vote and drive\" if age > + 17, \"Old enough to drive\" if age is > 15, and \"Can't drive or vote\" if + neither conditions is true. Hint: The first condition to return \"true\" wins + - make sure you put your conditions in the right order." + Eval Cond 3_instruction: "Can you write a conditional that checks the variable + \"age\" and returns \"Old enough to vote and drive\" if age > 17, \"Old enough + to drive\" if age is > 15, and \"Can't drive or vote\" if neither conditions + is true. Hint: The first condition to return \"true\" wins - make sure you + put your conditions in the right order." + Eval Cond 4_instruction: "We can use the string=? function to make conditionals + that respond to text input. Here's a function called green shape that takes + a string for the type of shape. Complete the conditions so that the correct + solid green shape is returned when the function is run with \"circle\", \"triangle\", + \"square\", or \"rectangle\"." + Eval Cond 5_instruction: "Here's a similar function red shape with an additional + variable for size. Complete the conditionals so the correct solid red image + of a given size is drawn for \"circle\", \"triangle\", and \"star\"." + Eval Cond 6_instruction: "Write a function called food-critic, which takes + in the name of a food and produces a String that says how you feel about that + food. For example, (food-critic “pizza”) might evaluate to “delicious”, but + (food-critic “rotten eggs”) might evaluate to “gross!”. Choose at least two + foods to review, but you can you write more if you like! Don’t forget to + add an “else” clause!\r\nOne example - and part of the definition - has already + been done for you!" + Eval Cond 7_instruction: "Free Play: Write a function called green-shape, which + takes in the name of a shape and produces a solid green shape. Your function + should work with at least “circle”, “star” and “rectangle”, but you can add + other shapes if you like. You can choose the size of each shape. Don’t forget + to add an “else” clause!\r\nOne example - and part of the definition - has + already been done for you!\r\n" + Eval Cond 8_instruction: "Free Play: Suppose you want to own a car at 21, or + have your own business by 30. Write a function called life-goals, which takes + in an age and produces a string that describes your life goals by then. Don’t + forget to add an “else” clause!\r\n" + Eval Contracts 1_instruction: "Use the \"star\" function to produce a red star + with a 60 pixel radius" + Eval Contracts 10A_instruction: "Alright let's complete this puzzle with a + Green Square that is 175 pixels in size." + Eval Contracts 11A_instruction: "Can you complete this puzzle to read \"Hello + World\" in the banner?" + Eval Contracts 2_instruction: "Check out the \"rotate\" function - can you + use it to rotate this 90 pixel green square by 45 degrees?" + Eval Contracts 3_instruction: "Try using the \"text\" function to write this + teal text at size 40." + Eval Contracts 4 A_instruction: "The \"scale\" function returns an image that + is scaled either larger or smaller than the input image. Try scaling this + circle by a factor of 10 - how is the resulting image different than if you'd + just made a circle of that size in the first place?" + Eval Contracts 4_instruction: "The scale function returns an image that is + either larger or smaller than the input image. Try scaling this circle by + a factor of 10. How is the returned image different than if you'd just made + a circle of that size in the first place?" + Eval Contracts 8A_instruction: "Can you complete this puzzle? The big-triangle + is 200 pixels in size and purple?" + Eval Contracts A_instruction: "Use the star function to produce a solid red + star with a 60 pixel radius" + Eval Contracts C_instruction: "Check out the rotate function - can you use + it to rotate this 90 pixel green square by 45 degrees?" + Eval Contracts E_instruction: "Try using the text function to write \"Hello, + world!\" in teal at size 40." + Eval Contracts shrink_instruction: "Can you complete this image using the \"shrink\" + function block? The radius is 20. " + Eval Define Funcs 1_instruction: "Here's a new function called green-triangle + that takes a single Number for size and produces a green triangle. Use the + new function to create a 125 pixel green triangle." + Eval Define Funcs 2_instruction: "Let's look inside that green-triangle function + to see how it works. Can you modify it so that the green-triangle function + always draws outlined green triangles?" + Eval Define Funcs 3_instruction: "Here's the start of another new function + called purple-circle with a domain of one Number (the radius) and a range + of Image. The body of the function is broken though - fix it and then make + a purple circle with 150 pixel radius" + Eval Define Funcs 4_instruction: "Create a new function called aqua-star that + has a Domain of a single Number for radius and returns an aqua star of the + given radius. Run your new function with a radius of 75." + Eval Define Funcs 5_instruction: "Let's use that aqua-star function to make + a row of different sized stars. From left to right, the stars should have + radii of 25, 50, and 75." + Eval Define Funcs Test_instruction: "Here's the start of another new function + called purple-circle with a domain of one Number (the radius) and a range + of Image. The body of the function is broken though - fix it and then make + a purple circle with 150 pixel radius" + Eval Defining Vars Free Play 1_instruction: "Free Play: We've provided a function + that fills your screen with my-image. Change my-image to see what patterns + you can make." + Eval Design Recipe .1_instruction: "Here's a Design Recipe for a function + called square-circle with domain Number String and range Image. Click Edit + to write the function definition (you will see two examples provided)." + Eval Design Recipe 1 (copy 1)_instruction: "We're going to write a function + that draws a solid rectangle of any color that is twice wide as it is high. + Start with an example - draw a solid green rectangle that has a height on + 100 pixels." + Eval Design Recipe 1_instruction: "Alright, now given the Contract wide-rect: + Number String -> Image, write an example - draw a solid green rectangle that + has a height of 100 pixels." + Eval Design Recipe 2 (copy 1)_instruction: "Let's do one more example before + writing the function definition - this time draw a solid red rectangle with + a height of 75 pixels." + Eval Design Recipe 2_instruction: "Let's do one more example before writing + the function definition - this time draw a solid red rectangle with a height + of 75 pixels." + Eval Design Recipe 3_instruction: "The Design Recipe for wide-rect already + has a contract and one example. Can you write a second example and then complete + the definition? The wide-rect function should produce a rectangle of given + color that is twice as wide as it is high." + Eval Design Recipe 4_instruction: "Use the Design Recipe to create a function + starburst. When given a number of points and an outer radius, starburst returns + a yellow radial star with given points, and an inner radius that is half the + outer radius." + Eval Design Recipe 5_instruction: "Using the Design Recipe, write a function + striped-flag that takes two colors and produces a flag that is 250 pixels + wide, 150 pixels tall, with three even horizontal stripes of given colors, + in the order color2, color1, color2." + Eval Design Recipe 6_instruction: "Write a function large-polygon that should + output a solid polygon of given sides and color that takes up most of the + window, regardless of the number of sides. To make sure that the polygon doesn't + get too large as you increase the number of sides, side length should be inversely + proportional to side number, with a length of (800/sides)." + Eval Design Recipe Free Play_instruction: "Free Play: Use the Design Recipe + to create some functions of your own design" + Eval Free Play_instruction: "Free Play: Make art with code!" + Eval Strings Images .1_instruction: "So far we've only dealt with a single + type of data, Numbers. Another type of data is a String, which is any combination + of letters, numbers, or other characters wrapped in quotation marks. Run the + String \"Hello, world!\" and see what happens." + Eval Strings Images .2_instruction: "The string-append function takes two Strings + and returns a single combined String. Add a String \"Universe\" to the second + argument of string-append." + Eval Strings Images 1_instruction: "The third type of data we're going to + use is an Image. This star function takes in a Number and two Strings, and + it evaluates to an Image. Use this function to make a solid red star with + radius of 100." + Eval Strings Images 2_instruction: "Free Play: Every Evaluation Block is color-coded + to let you know which data type it returns and which types it needs for its + parameters. The last parameter of the triangle function takes a String that + controls its color - try some different colors to see what works." + Eval Strings Images 3_instruction: "Some functions can only take a specific + set of Strings, such as the second argument of this circle function, which + controls its style. Draw this orange outline circle using the special String + block with a dropdown to make sure you only use valid styles." + Eval Strings Images 4_instruction: "Try using the rectangle block to draw this + solid, red rectangle - it is 175 pixels wide and 100 pixels tall." + Eval Strings Images 5_instruction: "Try using this new Evaluation Block called + overlay to place a 100 pixel white triangle on top of a 200 pixel red circle." + Eval Strings Images 6_instruction: "Use the overlay block to place a 75 pixel + radius yellow star on top of a 150 pixel long blue square." + Eval Strings Images 7_instruction: "The offset block lets you move an image + relative to where it would normally be placed. Use this block to offset the + square by 100 pixels on the y-axis." + Eval Strings Images 8_instruction: "Here's a different kind of star block + - it's called radial-star and it allows you to draw stars with any number + of points! Use it to create a 7 point solid orange star with an inner radius + of 75 pixels and an outer radius of 175 pixels." + Eval Strings Images Free Play_instruction: "Free Play: Explore the blocks available + to create something interesting. Make sure to share your favorite creations." + Farmer for Authored Hint testing_instruction: "Wow, I found a really deep hole! + I don't know how many shovelfuls of dirt it needs. Can you write a program + that fills it until the ground is even? Hint: Try using the while loop this + time." + Farmer for TTS testing_instruction: "Wow, I found a really deep hole! I don't + know how many shovelfuls of dirt it needs. Can you write a program that fills + it until the ground is even? Hint: Try using the while loop this time." + Finalize Your Chaser Game v.1_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + Food Fight!_instruction: "We've added one last function for you. \r\n\r\nUse + an \"if\" statement to program your game to call the \"level_up\" function + only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 to move to the next puzzle. " - grade5_playlab_variables9_instruction: "Here's a function called `patrol`. - \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 pixels." - grade5_playlab_variables_freeplay_instruction: "Free Play time! Here are all - of the variables we've played with so far in this stage, as well as a few - more in case you want them. \r\n\r\nNotice that there are now so many blocks - in our toolbox that they need to be organized! Here, we've put each piece - into an appropriate category. Take some time to explore everything that is - available. When you're done browsing, make a game or story using repeats, - variables, and events. \r\n\r\nHint: scroll down to see all the commands - in the workspace." - grade5_playlab_variables_jump1_instruction: "This puzzle uses a hidden function - that makes the dog jump when the 'up' arrow is pressed. The height of the - jumps can be set at the start of the game using the 'jumpPower' variable. - Try to touch all of the flags!" - grade5_prompt_test_instruction: "Variables aren't always numbers. What if - you wanted to store a word or text? Experiment with the new `ask` block." - gradek_adventurer_loops1_instruction: "Three piles of gold! Collect all three." - gradek_adventurer_loops10_instruction: "Help me get all of the gold from this - cave." - gradek_adventurer_loops2_instruction: "How can Laurel collect all five piles - of gold using only one `[E-->]` block?" - gradek_adventurer_loops3_instruction: "Can you fix Laurel's path to get all - of this gold?" - gradek_adventurer_loops4_instruction: "Use what you learned to get all of the - coins." - gradek_adventurer_loops4a_instruction: "Add to this code to collect all of - the coins." - gradek_adventurer_loops5_instruction: "What should you add to this code to - get all of the gold?" - gradek_adventurer_loops6_instruction: "Write the code to get all of this gold." - gradek_adventurer_loops7_instruction: "Write the code to get all of this gold." - gradek_adventurer_loops7_challenge_instruction: "**Challenge:** The gold goes - all the way up these stairs! Write the code to help me get it all." - gradek_adventurer_loops8_instruction: "Help me get all of the gold from this - deep valley." - gradek_adventurer_loops9_instruction: "Help me get all of the gold from this - cave." - gradek_adventurer_loopsFP_instruction: "Eureka! Collect as much gold as you - can!" - gradek_adventurer_loopsPre_instruction: "This is Laurel the Adventurer. Mover - her around and get as much gold as you can!" - gradek_artist_loops1_instruction: "Help the artist draw this line two times - forward." - gradek_artist_loops2_instruction: "Our artist is trying to draw a line five - times, but can't get it right. Can you help?" - gradek_artist_loops3_instruction: "Now, use a `repeat` loop to draw this line - five times!" - gradek_artist_loops4_instruction: "Draw a line seven steps long. This will - become our horizon." - gradek_artist_loops5_instruction: "Let's put a nice hill in the back." - gradek_artist_loops6_instruction: "Use the `repeat` loop to add waves to the - water." - gradek_artist_loops7_instruction: "We need a ladder up to the boat." - gradek_artist_loops8_instruction: "Challenge: The stairs down to the dock are - broken. Help me fix them." - gradek_artist_loops9_instruction: "Time to head back to land. Help me put down - stones so I don't fall in!" - gradek_artist_loopsA_instruction: "Help me build steps to watch the ship sail - away." - gradek_artist_loopsFP_instruction: "The artist saw something funny in the distance. Draw - what you think he saw." - gradek_artist_loopsPre_instruction: "This is a new type of puzzle called \"Artist\". - Play with the level and draw something fun." - gradek_playlab_events1_instruction: "Make your robot say \"Hello!\" when the - button is clicked." - gradek_playlab_events1a_instruction: "Add a block so that when you click the - \"up\" button, Olive the Cat walks up." - gradek_playlab_events1c_instruction: "Jorge the Dog wants to say \"Hi there.\" Can - you help him?" - gradek_playlab_events2_instruction: "Edit the code so that when the second - bird is clicked, your program plays a sound!" - gradek_playlab_events2a_instruction: "Add a block so that when you click \"down\" - Olive the Cat walks down." - gradek_playlab_events2c_instruction: "Help Jorge the Dog get moving by connecting - the `move left` block to the `when left` event block that is already in the - workspace." - gradek_playlab_events3_instruction: "When the third bird is clicked, the background - should change to a city. Can you add code to make this happen?" - gradek_playlab_events3a_instruction: "When the third bird is clicked, the background - should change to a city. Can you add code to make this happen?" - gradek_playlab_events3b_instruction: "Add a button so that Olive the Cat moves - right when you click the \"right\" button." - gradek_playlab_events3c_instruction: "Now, get Jorge to move right when the - `right` button is clicked." - gradek_playlab_events4_instruction: "Add code to make something happen when - the fourth bird is clicked. Be creative!" - gradek_playlab_events4a_instruction: "Add a block so that Olive the Cat moves - left when you click the \"left\" button." - gradek_playlab_events4c_instruction: "Add events to have Jorge move up and - down when the `up` and `down` buttons are pressed." - gradek_playlab_events5_instruction: "About My Robot Project! Write code so - that clicking on each bird shows a new fact about your robot." - gradek_playlab_events5a_instruction: "About My Robot Project! Write code so - that clicking on each bird shows a new fact about your robot." - gradek_playlab_events5c_instruction: "Make this more interesting by changing - the background and playing a random sound when Jorge is clicked." - gradek_playlab_eventsA_instruction: "Now, have the cat change to a random size - AND have it play a random sound when you click the center button." - gradek_playlab_eventsFP_instruction: "Add anything you want to this game. Can - you make the dinosaur disappear when Jorge runs into him?" - gradek_playlab_eventsPre_instruction: "This is a Play Lab level. Move blocks - to the workspace and see what happens!" - gradeK_sequence_4_instruction: "Try this one yourself from the beginning." - group test_instruction: "Make a game" + Food Fight_instruction: "You can make whatever you want in play lab! This is + an example of a game you can make in play lab." + FoodFight_instruction: "This is an example of a game you can make in play lab." + Frequency Analysis_instruction: "Test" + 'Game Lab Workshop: Random_instruction': "Pick a shape block and use calls + to randomNumber() in place of one or more of the parameters. Maker sure you + run it a few times so you can see the effect of randomization." + Geometric Pattern_instruction: "Project Idea: Create a pattern using geometric + ideas like shapes. This requires persistence and planning!" + Geometric Sun_instruction: "Project Idea: Create a pattern using geometric + ideas like shapes. This requires persistence and planning!" + 'Grade 4 Example PlayLab Project #1_instruction': "Take a look at this project. Do + you see how it was made?" + 'Grade 4 Example PlayLab Project #2_instruction': "Take a look at this project. Do + you see how it was made?" Guess The Number_instruction: "Build whatever you want. This is an example of a number-guessing game!" Harvester Test_instruction: "It's harvest time! But I forgot what crop I planted @@ -5254,8 +2922,6 @@ en: Harvesting_instruction: "Uh oh, I lost my map and can't remember what I planted. Every sprout could grow up to be corn, beans, or pumpkins. Can you write some code to pick all the crops, no matter what they are?" - harvey_pixelation_instruction: "Encode an image of anything you like using - binary. The binary language will be represented with '0' and '1' only." Infinity_catch_instruction: "Can you make Elsa (\"actor 2\") catch up with Anna by using the arrow keys?" Infinity_finale_instruction: "Create anything you like and share it!" @@ -5318,13 +2984,9 @@ en: 'Internet Simulator: Sending Text_instruction': "Work with a partner or in a small team to develop a protocol that allows you to send formatted text. See the worksheet handed out by your teacher for more detailed instructions!" - jessie-test_instruction: "Lots of instructions" Just for Testing_instruction: "Test instructions" K-1 Artist 1 Assessment 1_instruction: "Draw a short line up and a long one to the right!" - K-1 artist 1 level 10_instruction: "Draw the dashed line by using both the - jump and draw blocks" - K-1 artist 1 level 9_instruction: "Draw this using three lines" K-1 Artist Loops 1_instruction: "Draw this line by moving East 4 times." K-1 Artist Loops 2_instruction: "Now, draw the same line using a loop." K-1 Artist Loops 3_instruction: "Can you loop these blocks to draw 6 lines?" @@ -5410,7 +3072,6 @@ en: K-1 Building a Foundation Assessment_instruction: "Build a three level pyramid, there are no other directions, so just play with the pieces until you get it!" - k-1 maze 1_instruction: "Can you make me move West to get to the pig?" K-1 Maze 10_instruction: "Go around the TNT to get me to the pig! " K-1 Maze 11_instruction: "Trace the path and lead me to the silly pig. Avoid TNT or the feathers will fly! Hint: He's South of me." @@ -5426,29 +3087,6 @@ en: K-1 Maze Assessment 12_instruction: "Assessment Level" K-1 Maze Assessment 13_instruction: "Assessment Level" K-1 Maze Assessment 2_instruction: "Assessment -- Get me to the pig!" - K-1 maze debug 1_instruction: "Change the code to get me to the pig!" - K-1 maze debug 10_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 maze debug 11_instruction: "This is a test!\r\nDebug this level by rearranging - and changing blocks to get me to the pig" - K-1 maze debug 2_instruction: "Figure out what is missing and then add blocks - to get me to the pig!" - K-1 maze debug 3_instruction: "Something is not quite right. REMOVE blocks - to get me to the pig!" - K-1 maze debug 4_instruction: "Run through these blocks and fix them! I think - I might be going in the wrong direction." - K-1 maze debug 5_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 maze debug 6_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 maze debug 7_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 maze debug 8_instruction: "Debug this level by rearranging and adding blocks - to get me to the pig!" - K-1 maze debug 9_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 Maze debug Assessment 1_instruction: "Assessment -- Debug this level by - rearranging and adding blocks to get me to the pig!" K-1 Maze Loops 1_instruction: "Get me to the pig!" K-1 Maze Loops 10_instruction: "Get me to the pig! Using the `repeat` loop will make it much easier." @@ -5474,6 +3112,32 @@ en: one way, then another to get me to the pig." K-1 Maze Sequence Assessment 2_instruction: "Move one way, then another to get me to the pig." + K-1 Maze debug Assessment 1_instruction: "Assessment -- Debug this level by + rearranging and adding blocks to get me to the pig!" + K-1 artist 1 level 10_instruction: "Draw the dashed line by using both the + jump and draw blocks" + K-1 artist 1 level 9_instruction: "Draw this using three lines" + K-1 maze debug 1_instruction: "Change the code to get me to the pig!" + K-1 maze debug 10_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" + K-1 maze debug 11_instruction: "This is a test!\r\nDebug this level by rearranging + and changing blocks to get me to the pig" + K-1 maze debug 2_instruction: "Figure out what is missing and then add blocks + to get me to the pig!" + K-1 maze debug 3_instruction: "Something is not quite right. REMOVE blocks + to get me to the pig!" + K-1 maze debug 4_instruction: "Run through these blocks and fix them! I think + I might be going in the wrong direction." + K-1 maze debug 5_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" + K-1 maze debug 6_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" + K-1 maze debug 7_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" + K-1 maze debug 8_instruction: "Debug this level by rearranging and adding blocks + to get me to the pig!" + K-1 maze debug 9_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" K2.0 sequence 1_instruction: "A bug! Fix the code to get me to the pig." K2.0 sequence 10_instruction: "Challenge: Move me around the TNT to get to the pig." @@ -5496,55 +3160,16 @@ en: can!" K2.0 sequence pre_instruction: "Play with these blocks to see if you can get me to the pig!" - Kiki_StarWars_Test_3_instruction: "Text" - Kiki_StarWars_Test_4_instruction: "Text" - Kiki_StarWars_Test_5_instruction: "Text" - kikiTesta_instruction: "Our adventurer wants to collect coins. But she can - only use 4 blocks to get them.\r\n\r\nCan you help her grab as many as she - can using just 4 blocks?" - kikiTesting_instruction: "See all angles of Stevie and Jorge" KTest1_instruction: "Can you make me move South once more to get to the pig?" KTest2_instruction: "Trace the path and lead me to the silly pig. Avoid TNT or the feathers will fly!" + Kiki_StarWars_Test_3_instruction: "Text" + Kiki_StarWars_Test_4_instruction: "Text" + Kiki_StarWars_Test_5_instruction: "Text" LaurelDebugging4Video1_instruction: "Move Laurel around and get as much gold as you can!" - level 'grade3_Loops_10_instruction: "Such a busy bee!\r\n\r\nHelp bee collect - all of the nectar and make all of the honey with the fewest blocks possible." - level 'grade3_Loops_11_instruction: "The shape of this path is different than - the others. \r\n\r\nCan you collect all of the nectar using as few blocks - as possible?" - level 'grade3_Loops_12_instruction: "Can you find the quickest way for the - bee to collect all of the nectar and make all of the honey?" - level 'grade3_Loops_2_instruction: "This time, use a loop to gather all of - the nectar." - level 'grade3_Loops_3_instruction: "Use a `repeat` loop to collect all of the - nectar." - level 'grade3_Loops_4_instruction: "Now use the `repeat` block to collect all - of the nectar and make all of the honey." - level 'grade3_Loops_5_instruction: "What a beautiful field of flowers! Help - the bee visit each one. Can you find a way to do it with fewer than 7 blocks?" - level 'grade3_Loops_6_instruction: "How many times can loops help you in this - puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete this - puzzle with the fewest blocks possible." - level 'grade3_Loops_7_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." - level 'grade3_Loops_8_instruction: "Collect all the nectar and make all of - the honey using the fewest blocks possible." - level 'grade3_Loops_9_instruction: "Collect nectar from each flower and make - honey at each honeycomb using the fewest blocks possible." - level grade3_Loops_2_instruction: "This time, use a loop to gather all of the - nectar." Limited Quantity of Blocks Test_instruction: "Get me to the pig by adding only one block" - love_spring_1_instruction: "Let's celebrate Spring! We have put some seeds - in the ground to prepare for the season's flowers. Can you cover them up - so that the birds don't eat them?" - love_spring_2_instruction: "Our flowers are in full bloom! Now we need the - bee to grab nectar from each one so he can make plenty of honey back at his - hive!" - love_spring_3_instruction: "Figure out how to change this code so that Robin - chooses a number between 1 and 20. \r\n\r\nWhen you're ready, press \"Run\" - and play until you guess Robin's number!" Luigi's Pizza 1_instruction: "Welcome to Luigi's Pizza! To order a pizza, type the name of a topping into the cost function, and we'll return the price of that pizza. Try ordering a pepperoni pizza to start." @@ -5603,162 +3228,77 @@ en: Try getting inside the house by using the door to continue." MC HOC 2016 New Drop_instruction: "In Minecraft, sheep drop wool. Place the `drop` block in `when used`, then walk over and use the sheep to drop an item." - MC HOC 2016 New pn_instruction: "Now let's explore our world! Use the arrows - to walk around and press the space bar or tap the game space to 'use' items. - Try getting inside the house by using the door to continue." MC HOC 2016 New Spawn_instruction: "Now you can fill the world with what you want! Place`spawn` blocks under `when run` to spawn things when the game starts." MC HOC 2016 New Walk_instruction: "Let's explore our world! Move with the arrows, and press the space bar or tap the game board to use items. Use the door to get inside the house." + MC HOC 2016 New pn_instruction: "Now let's explore our world! Use the arrows + to walk around and press the space bar or tap the game space to 'use' items. + Try getting inside the house by using the door to continue." MC HOC 2016 SCORE LEVEL_instruction: "Some games let you keep score. Play tag with these Iron Golems and use the `add 1 to score` block to give yourself a point when you tag them. Reach five points to win!" MC HOC 2016 Village Test_instruction: "Oh no! Zombies have trapped you inside! Code the Iron Golem to chase and attack the zombies!" - Middle School Hackathon Pt 1_instruction: "(Click to see full instructions)" - Middle School Hackathon Pt 2_instruction: "(Click to see full instructions)" - Mike Pair Programming_instruction: "Here are the instructions" - Mike Test Bee Conditionals 1_instruction: "This cloud is blocking my view! - Check to see if there's a flower under the cloud, and only get nectar if - there's a flower. Be careful, it can change!" - Mike Test Bee Conditionals 2_instruction: "Collect all of the nectar. You can - only collect nectar from flowers, but you can check any space to see if there - is a flower." - mike3bit_instruction: "We start you with the 4x2 image Maddie was creating, - but we've left out the last few pixels. Finish off the image by figuring - out which colors are missing and encoding them." - mike3bitbird_instruction: "Here's an example of an image made with 3-bit color. - Try changing it to understand how it works. If you want to reset the image, - press \"Start Over\"." - mike3bitfreeplay_instruction: "Make something awesome and share it with your - classmates! You can copy and paste the value of a pixel to use it repeatedly." - mike3bitmario_instruction: "A careless binary coder typed in ONE extra 0 or - 1 somewhere within this image's data. The extra bit that is causing Mario - to glitch out! \r\n\r\nDelete the extra bit to restore Mario back to normal!" - MikeAssessment1_instruction: "Now do it right!" - MikeStar_instruction: "Draw this." - MikeStarHard_instruction: "Draw this." - MikeStarNested_instruction: "Draw this." - MikeTest1_instruction: "Who knows what you should do?!?!" - MikeTest2_instruction: "Draw something!" - MikeTest3_instruction: "Build Something" - MSM Big Game Empty_instruction: "All variables and functions are currently - empty stubs. Each puzzle progression will be focused on defining and handful - of them, and therefore adding functionality." - MSM Big Game Vars 1 (copy 1)_instruction: "In the Variables toolbox you'll - see several variables that define how your game characters look, move, and - interact" - MSM Big Game Vars 1_instruction: "In the Variables toolbox you'll see several - variables that define how your game characters look, move, and interact" - MSM Big Game Vars Backup_instruction: "In the Variables toolbox you'll see - several variables that define how your game characters look, move, and interact" - MSM Defining Vars 1 (copy 1)_instruction: "Write a program that produces a - 50 pixel solid green triangle." - MSM Defining Vars 1_instruction: "Write a program that produces a 50 pixel - solid green triangle." - MSM Defining Vars 2 (copy 1)_instruction: "If we wanted to make fifty green - triangles, it would be a pain to repeat that block of code 50 times. Let's - create a variable called \"my-shape\" and put the code for a 50 pixel solid - green triangle inside." - MSM Defining Vars 2_instruction: "If we wanted to make fifty green triangles, - it would be a pain to repeat that block of code 50 times. Let's create a - variable called my-shape and put the code for a 50 pixel solid green triangle - inside." - MSM Defining Vars 3 (copy 1)_instruction: "Take your \"my-shape\" variable - and use it with this provided code to draw two identical green triangles." - MSM Defining Vars 3_instruction: "Take your my-shape variable and use it with - this provided code to draw two identical green triangles that are 50 pixels - in size." - MSM Defining Vars 4_instruction: "Edit your my-shape variable so that it draws - 75 pixel solid red stars." - MSM Play Lab Butterfly 1_instruction: "Help Sam stay on the screen so that - you can always see at least a little piece of him. Using the arrow keys, see - how far Sam can go to the left while still staying onscreen. You’ll find that - Sam is onscreen as long as his x-coordinate is greater than -50. Then, fill - in the code to make Sam stay on the screen." - MSM Play Lab Butterfly 2_instruction: "Now make Sam stay on the right side - of the screen. You'll have to experiment to see how far he can go and still - be partially visible on the screen." - MSM Play Lab Butterfly 3_instruction: "Now, combine your work to make Sam stay - on both sides of the screen." - MSM Play Lab Game 2_instruction: "Variables can also be used to control the - speed of players in a game. Set the player speed and the enemy speed and see - how the movement changes. Speed can be between 2 and 12." - NetSim Standalone Automatic DNS_instruction: "In this version of the Internet - Simulator, a Domain Name System (DNS) is provided for you and knows the IP - addresses of all connected computers. Send a message in the form GET [hostname] - to the DNS service at address .15 to get a student's address." - NetSim Standalone Broadcast_instruction: "In this version of the Internet Simulator, - you can connect to up to 5 other people in a room. When you send messages - in the room, everyone receives them. What are some of the challenges of this - system, and how might you solve them?\r\n" - NetSim Standalone Classroom Routers_instruction: "In this version of the Internet - Simulator, everyone connects to a router and has a specific address. To send - messages, you have to address your message to the specific address of the - recipient, and the router will take care of delivering it to the right computer. - If there are other routers created in your class, ask for the address of one - of your classmates and send them a message! View the Log Router to see the - path the messages have taken through the network." - NetSim Standalone Freeplay_instruction: "In this configuration, most of the - options are turned on, and you can play with them. Have fun!" - NetSim Standalone Manual DNS_instruction: "In this version of the simulator - you can't see the other students' addresses. Instead, one of you must act - as a name service, to help share addresses with each other." - NetSim Standalone Packets TCP_instruction: "Messages on the Internet can take - many paths to get to their destination, and sometimes along the way the message - gets dropped. In this version of the Internet Simulator, there is a 10% chance - of a packet being dropped, multiple packets may take different paths to the - destination, and the default max packet size is set to 6 additional characters. - " - NetSim Standalone Routers Addresses_instruction: "For this activity, connect - to a router with the others in your group. Important note: The router will - only properly route messages where the first 4 bits are the To: address and - the second 4 bits are the From: address.\r\n\r\n[TODO: NetSim needs to support - hierarchical addresses. For now, level is set up for 4 bit to and from addresses]" - NetSim Standalone SendAB_instruction: "You and your partner share a single - wire that can only be in state A or state B. You can set the wire to either - state at any time, and you can read the state of the wire at any time. Can - you figure out a way to effectively communicate with just this system?" - NetSim Standalone Sending Numbers Ascii_instruction: "Now that you've transmitted - information represented as decimal numbers, you can map those numbers to text - characters to send text-based information back and forth. With a text-based - protocol, you can easily represent and communicate all kinds of information. - " - NetSim Standalone Sending Numbers_instruction: "You and your partner can now - reliably send messages back and forth without extra coordination! While you're - always sending bits back and forth, you can also represent those bits as decimal - numbers. What kinds of information can you represent with this system? " - NetSim_AddressingMessages_instruction: "In this version of the simulator, you - will connect to a Router instead of directly to another student. Enter an - address in the \"To\" box to send a message to another student." - NetSim_AutomaticDNS_instruction: "In this version of the simulator a DNS service - is provided for you. Send a message in the form GET [hostname] to the DNS - service at address 15 to get a student's address." - NetSim_ManualDNS_instruction: "In this version of the simulator you can't - see the other students' addresses. Instead, one of you must act as a name - service, to help share addresses with each other." - NetSim_SendAB_instruction: "Connect to another student. Each of you can set - the value of the wire between you to \"A\" or \"B\". See if you can send - a complete message!" - NetSim_SendAscii_instruction: "In this version of the simulator, you can send - numbers or ASCII characters to one another, one bit at a time." - NetSim_SendBits_instruction: "Connect to another student. You can now set - your wire to \"0\" or \"1\". Send a message to your partner!" - NetSim_SendingABTest_instruction: "This is Sarah's test of making a netsim - level" - NetSim_SendNumbers_instruction: "In this version of the simulator, you can - view the decimal representations of the binary you are sending." - NetSim_Superuser_instruction: "You have loaded NetSim in superuser mode." - NetSim_Variant1_instruction: "NetSim: Variant 1 allows students to manually - work out the timing of sending bits back and forth." - NetSim_Variant2_instruction: "NetSim: Variant 2: Students connect directly - to one another and send entire packets back and forth, exploring systems of - encoding data." - NetSim_Variant3_instruction: "NetSim: Variant 3: Connects groups of 2-6 students - with a router, and explores issues in routing and DNS" - New Artist Project_instruction: "Draw something awesome! Your code is saved - as a project that you can return to at any time." + MSM Big Game Empty_instruction: "All variables and functions are currently + empty stubs. Each puzzle progression will be focused on defining and handful + of them, and therefore adding functionality." + MSM Big Game Vars 1 (copy 1)_instruction: "In the Variables toolbox you'll + see several variables that define how your game characters look, move, and + interact" + MSM Big Game Vars 1_instruction: "In the Variables toolbox you'll see several + variables that define how your game characters look, move, and interact" + MSM Big Game Vars Backup_instruction: "In the Variables toolbox you'll see + several variables that define how your game characters look, move, and interact" + MSM Defining Vars 1 (copy 1)_instruction: "Write a program that produces a + 50 pixel solid green triangle." + MSM Defining Vars 1_instruction: "Write a program that produces a 50 pixel + solid green triangle." + MSM Defining Vars 2 (copy 1)_instruction: "If we wanted to make fifty green + triangles, it would be a pain to repeat that block of code 50 times. Let's + create a variable called \"my-shape\" and put the code for a 50 pixel solid + green triangle inside." + MSM Defining Vars 2_instruction: "If we wanted to make fifty green triangles, + it would be a pain to repeat that block of code 50 times. Let's create a + variable called my-shape and put the code for a 50 pixel solid green triangle + inside." + MSM Defining Vars 3 (copy 1)_instruction: "Take your \"my-shape\" variable + and use it with this provided code to draw two identical green triangles." + MSM Defining Vars 3_instruction: "Take your my-shape variable and use it with + this provided code to draw two identical green triangles that are 50 pixels + in size." + MSM Defining Vars 4_instruction: "Edit your my-shape variable so that it draws + 75 pixel solid red stars." + MSM Play Lab Butterfly 1_instruction: "Help Sam stay on the screen so that + you can always see at least a little piece of him. Using the arrow keys, see + how far Sam can go to the left while still staying onscreen. You’ll find that + Sam is onscreen as long as his x-coordinate is greater than -50. Then, fill + in the code to make Sam stay on the screen." + MSM Play Lab Butterfly 2_instruction: "Now make Sam stay on the right side + of the screen. You'll have to experiment to see how far he can go and still + be partially visible on the screen." + MSM Play Lab Butterfly 3_instruction: "Now, combine your work to make Sam stay + on both sides of the screen." + MSM Play Lab Game 2_instruction: "Variables can also be used to control the + speed of players in a game. Set the player speed and the enemy speed and see + how the movement changes. Speed can be between 2 and 12." + Middle School Hackathon Pt 1_instruction: "(Click to see full instructions)" + Middle School Hackathon Pt 2_instruction: "(Click to see full instructions)" + Mike Pair Programming_instruction: "Here are the instructions" + Mike Test Bee Conditionals 1_instruction: "This cloud is blocking my view! + Check to see if there's a flower under the cloud, and only get nectar if + there's a flower. Be careful, it can change!" + Mike Test Bee Conditionals 2_instruction: "Collect all of the nectar. You can + only collect nectar from flowers, but you can check any space to see if there + is a flower." + MikeAssessment1_instruction: "Now do it right!" + MikeStar_instruction: "Draw this." + MikeStarHard_instruction: "Draw this." + MikeStarNested_instruction: "Draw this." + MikeTest1_instruction: "Who knows what you should do?!?!" + MikeTest2_instruction: "Draw something!" + MikeTest3_instruction: "Build Something" NEW Course 4 Artist Functions 1_instruction: "Can you draw a square that is 100 pixels in length, using a repeat loop?" NEW Course 4 Artist Functions 10.1_instruction: "Use the functions from the @@ -5800,8 +3340,6 @@ en: only one block?" NEW Course 4 Artist Functions inspire_instruction: "Click here to see the inspiration picture again." - New Course 4 Artist Functions Level 4_instruction: "Use the \"draw a square\" - function to draw this pattern." NEW Course 4 Artist Params 1_instruction: "Let's define this function to draw a square with 50 pixel sides. Click \"edit\" to get started." NEW Course 4 Artist Params 10_instruction: "Create a `draw a hexagon` function @@ -5925,6 +3463,82 @@ en: NEW Course 4 Play Labs For Loops 8a_instruction: "Challenge: How would you use the \"for loop\" to get every actor to go around and say their actor number, then vanish from the screen? " + NetSim Standalone Automatic DNS_instruction: "In this version of the Internet + Simulator, a Domain Name System (DNS) is provided for you and knows the IP + addresses of all connected computers. Send a message in the form GET [hostname] + to the DNS service at address .15 to get a student's address." + NetSim Standalone Broadcast_instruction: "In this version of the Internet Simulator, + you can connect to up to 5 other people in a room. When you send messages + in the room, everyone receives them. What are some of the challenges of this + system, and how might you solve them?\r\n" + NetSim Standalone Classroom Routers_instruction: "In this version of the Internet + Simulator, everyone connects to a router and has a specific address. To send + messages, you have to address your message to the specific address of the + recipient, and the router will take care of delivering it to the right computer. + If there are other routers created in your class, ask for the address of one + of your classmates and send them a message! View the Log Router to see the + path the messages have taken through the network." + NetSim Standalone Freeplay_instruction: "In this configuration, most of the + options are turned on, and you can play with them. Have fun!" + NetSim Standalone Manual DNS_instruction: "In this version of the simulator + you can't see the other students' addresses. Instead, one of you must act + as a name service, to help share addresses with each other." + NetSim Standalone Packets TCP_instruction: "Messages on the Internet can take + many paths to get to their destination, and sometimes along the way the message + gets dropped. In this version of the Internet Simulator, there is a 10% chance + of a packet being dropped, multiple packets may take different paths to the + destination, and the default max packet size is set to 6 additional characters. + " + NetSim Standalone Routers Addresses_instruction: "For this activity, connect + to a router with the others in your group. Important note: The router will + only properly route messages where the first 4 bits are the To: address and + the second 4 bits are the From: address.\r\n\r\n[TODO: NetSim needs to support + hierarchical addresses. For now, level is set up for 4 bit to and from addresses]" + NetSim Standalone SendAB_instruction: "You and your partner share a single + wire that can only be in state A or state B. You can set the wire to either + state at any time, and you can read the state of the wire at any time. Can + you figure out a way to effectively communicate with just this system?" + NetSim Standalone Sending Numbers Ascii_instruction: "Now that you've transmitted + information represented as decimal numbers, you can map those numbers to text + characters to send text-based information back and forth. With a text-based + protocol, you can easily represent and communicate all kinds of information. + " + NetSim Standalone Sending Numbers_instruction: "You and your partner can now + reliably send messages back and forth without extra coordination! While you're + always sending bits back and forth, you can also represent those bits as decimal + numbers. What kinds of information can you represent with this system? " + NetSim_AddressingMessages_instruction: "In this version of the simulator, you + will connect to a Router instead of directly to another student. Enter an + address in the \"To\" box to send a message to another student." + NetSim_AutomaticDNS_instruction: "In this version of the simulator a DNS service + is provided for you. Send a message in the form GET [hostname] to the DNS + service at address 15 to get a student's address." + NetSim_ManualDNS_instruction: "In this version of the simulator you can't + see the other students' addresses. Instead, one of you must act as a name + service, to help share addresses with each other." + NetSim_SendAB_instruction: "Connect to another student. Each of you can set + the value of the wire between you to \"A\" or \"B\". See if you can send + a complete message!" + NetSim_SendAscii_instruction: "In this version of the simulator, you can send + numbers or ASCII characters to one another, one bit at a time." + NetSim_SendBits_instruction: "Connect to another student. You can now set + your wire to \"0\" or \"1\". Send a message to your partner!" + NetSim_SendNumbers_instruction: "In this version of the simulator, you can + view the decimal representations of the binary you are sending." + NetSim_SendingABTest_instruction: "This is Sarah's test of making a netsim + level" + NetSim_Superuser_instruction: "You have loaded NetSim in superuser mode." + NetSim_Variant1_instruction: "NetSim: Variant 1 allows students to manually + work out the timing of sending bits back and forth." + NetSim_Variant2_instruction: "NetSim: Variant 2: Students connect directly + to one another and send entire packets back and forth, exploring systems of + encoding data." + NetSim_Variant3_instruction: "NetSim: Variant 3: Connects groups of 2-6 students + with a router, and explores issues in routing and DNS" + New Artist Project_instruction: "Draw something awesome! Your code is saved + as a project that you can return to at any time." + New Course 4 Artist Functions Level 4_instruction: "Use the \"draw a square\" + function to draw this pattern." Ninjacat Demo B (copy 1)_instruction: "\r\nLet’s begin by exploring a simple videogame, and then figuring out how it works. You can use the arrow keys to move the ninja left, right and jump - try to catch the unicorn and avoid @@ -5937,12 +3551,12 @@ en: and then figuring out how it works. You can use the arrow keys to move the ninja up and down - try to catch the unicorn and avoid the dragon! When you think you've figured out how the game works, click \"Finish\"" + October15 JoL 1_instruction: "Program the artist to design a face for your + jack-o-lantern!" October15 bat_instruction: "Freeplay: Here are some functions to play with. Can you draw a bat?\r\n" October15 ghost 1_instruction: "Give the ghost eyes, using the \"draw a circle\" function." - October15 JoL 1_instruction: "Program the artist to design a face for your - jack-o-lantern!" October15 pumpkin 1_instruction: "Finish this jack-o-lantern by drawing the eyes and nose in any style you would like." October15 stars 1_instruction: "Use loops and the \"random integer\" block @@ -5995,8 +3609,6 @@ en: the door of your house." Overworld Shear Sheep_instruction: "Sheep-shearing time! Use the “shear” command to gather wool from both sheep." - Pattern Bee 1_instruction: "What a strange field of goodies! I wonder if there's - a pattern here..." PDAlg 13-16 Sam Extension Puzzle_instruction: "Add a second parameter to \"onscreen?\" for Sam's y coordinate and update the function so it keeps him safe on all four sides." @@ -6005,16 +3617,16 @@ en: and coupon code and returns the cost of a pizza with that topping. If the coupon code is correct (you get to decide what it is), apply a 30% discount to the pizza." + PDAlg 8-12 Rocket Height Puzzle_instruction: "Let's write a \"rocket-height\" + function with simple acceleration. Write a function that ensures the rocket + is at 15 meters at 1 second, 45 meters at 2 seconds, 95 at 3 seconds, and + 165 at 4 seconds." PDAlg 8-12 ex dr 1_instruction: "The definition in this Design Recipe doesn't match both examples. Test each example to see which is failing, and then fix the definition to match." PDAlg 8-12 ex dr 2_instruction: "This student has created two examples for the function \"apples\" but something's not quite right. How would you direct this student to correct their mistake?" - PDAlg 8-12 Rocket Height Puzzle_instruction: "Let's write a \"rocket-height\" - function with simple acceleration. Write a function that ensures the rocket - is at 15 meters at 1 second, 45 meters at 2 seconds, 95 at 3 seconds, and - 165 at 4 seconds." PDAlg Big Game History_instruction: "Now that you've played through a Big Game level you should see a new entry in your history. Click the Version History button and you should see at least one version. Each time you go back to a @@ -6067,6 +3679,16 @@ en: PDK5 Loops 3_instruction: "Here's another puzzle to practice loops. What happens if you use the repeat block to run the code already provided on the workspace 4 times?" + PS FR test 7-25_instruction: "Here are your instructions for this free response. " + PS Log test - Define and use turnAround_instruction: "Define a function called + turnAround. Call the function and then move the turtle forward. (Click to + see full instructions)" + PS copy 2-3 Bee Conditionals 5_instruction: "Be careful not to collect nectar + from a purple flower if it doesn't have any. \r\nYou must first check if + the nectar is equal to 1 using the `if nectar` block." + PS predictive Applab level test_instruction: "Here are some instructions. " + Pattern Bee 1_instruction: "What a strange field of goodies! I wonder if there's + a pattern here..." Pixelation - Lesson 14 - Fix bit offset v.2_instruction: "Something happened to the bits in this image! Find the error and fix it! Hint: a few extra bits were added. You should only need to remove some bits." @@ -6148,21 +3770,6 @@ en: Play Lab Rocket Free Play_instruction: "Free Play: Experiment with your rocket-height function to make the rocket fly in different ways. Click \"Finish\" when you are done." - playEventsK1_instruction: "This game is called \"Play Lab\". See if you can - figure out what each block does." - playEventsK2_instruction: "Jorge wants to say \"Hi there.\"\r\n\r\nCan you - help?" - playEventsK3_instruction: "Jorge wants to be scratched behind the ears! Can - you make it so that when you click Jorge he is happy?" - playEventsK4_instruction: "Can you make it so that Jorge the dog chases Robin - the bird when you click the up arrow?" - playEventsK5_instruction: "Now add code so that Robin flies away when you click - the forward arrow." - playEventsK6_instruction: "Have Robin talk back to Jorge when you click on - her." - playEventsK7_instruction: "What else can you do in this fun scene?" - playLabDebugVideo1_instruction: "Jorge the Dog wants to say \"Hi there.\" Can - you help him?" Poorva copy U3L2 Using Simple Commands_instruction: "Draw a 1x1 square above and to the left of the turtle's starting position. Click to see full instructions." Poorva-test_instruction: "Here are regular instructions for a level. There @@ -6175,14 +3782,6 @@ en: app. (Click to see full instructions.)" Prompt Test_instruction: "Build whatever you want. This is an example of a number-guessing game!" - PS copy 2-3 Bee Conditionals 5_instruction: "Be careful not to collect nectar - from a purple flower if it doesn't have any. \r\nYou must first check if - the nectar is equal to 1 using the `if nectar` block." - PS FR test 7-25_instruction: "Here are your instructions for this free response. " - PS Log test - Define and use turnAround_instruction: "Define a function called - turnAround. Call the function and then move the turtle forward. (Click to - see full instructions)" - PS predictive Applab level test_instruction: "Here are some instructions. " Quantum Bee - Ryan_instruction: "These clouds are bugging me! Some of the clouds have flowers inside, and some don't. I should check each cloud, and only get nectar from the flowers." @@ -6223,79 +3822,31 @@ en: arrow keys to move Sam around his yard, making note of Sam's coordinates at different locations. Click \"Finish\" when you're ready to move on." Sam the Butterfly 2_instruction: "Sam's mom wants to make sure that she can - always see at least a bit of him, so lets write some functions that help make - sure he doesn't go too far out of the yard. Here's a function called safe-left? - - it should take a Number for its domain that represents Sam's x-coordinates - and return true if he's completely visible on screen. If your function works, - Sam shouldn't be able to leave the yard from the left side." - Sam the Butterfly 3_instruction: "In the last puzzle we kept Sam from leaving - on the left, now let's do the same thing on the right. Complete the safe-right? - function to make sure Sam can't go off the right side of the screen." - Sam the Butterfly 4_instruction: "Huh, we can keep Sam from leaving on the - left, or we can keep him from leaving on the right, but how can we keep him - safe from leaving both directions? Try using the and block to program the - function on-screen? to check if Sam is safe-left? and safe-right?" - Sam the Butterfly 5_instruction: "Free Play: Awesome, we've kept Sam safe - on the left and right! Use this free play stage to experiment with your functions - and further improve onscreen?" - Sam the Butterfly 6_instruction: "We've added a new parameter \"y\" to the - \"on-screen?\" function. Update the function so that it checks that \"safe-left?\" - AND \"safe-right?\" AND \"safe-up?\" are all true. When you've fixed the - function, try going out of the yard from the left, right, and top sides." - Sam the Butterfly 7_instruction: "Only one last direction to worry about! Create - a \"safe-down?\" function and update the \"on-screen?\" function so that it - checks up, down, left, and right." - Sam the Butterfly Complete_instruction: "Only one last direction to worry about! - Create a \"safe-down?\" function and update the \"on-screen?\" function so - that it checks up, down, left, and right." - sample1_instruction: "Our adventurer wants to collect coins. But she can only - use 4 blocks to get them.\r\n\r\nCan you help her grab as many as she can - using just 4 blocks?" - sample10_instruction: "Now you can use loops to draw whatever you like!" - sample10a_instruction: "You have helped the adventurer and her bee! As a reward, - please stay and play around in my magical village. \r\n\r\nYou should have - everything you need to create a game of your own." - sample2_instruction: "Use what you've learned to help bee gather all of this - honey using only the blocks that you have here." - sample2a_instruction: "Use what you've learned to help bee gather all of this - honey using only 4 blocks." - sample3_instruction: "Now you can help bee make all of the honey using just - the blocks in the toolbox." - sample3assessment_instruction: "Can you figure out how to gather all of this - nectar in just one try?" - sample4_instruction: "Our adventurer has found a stash of coins in this cave.\r\n\r\nCan - you help her grab as many as she can using just 7 blocks?" - sample5_instruction: "Help bee make all of the honey." - sample6_instruction: "Challenge: Help bee get all of the nectar." - sample7assessment_instruction: "Can you help bee make all of the honey in just - one try?" - sample8_instruction: "Look at this trove of coins! How many can you get the - adventurer to grab?" - sample9_instruction: "Use loops to help the artist connect all of the dots. - " - sample9a_instruction: "The wizard has found his potions! Use everything you - have learned to help him collect them." - scrat 16 (copy 1)_instruction: "Acorn! Acorn! Acorn! Use an \"if\" block to - get me there with the fewest number of blocks." - scrat 16_instruction: "Acorn! Acorn! Acorn! Use an \"if\" block to get me there - with the fewest number of blocks." - scrat 17 (copy 1)_instruction: "Ok, let's do that again for practice - this - isn't very different, but watch out for the !" - scrat 17_instruction: "Ok, let's do that again for practice - this isn't - very different, but watch out for the wall!" - scrat 18 (copy 1)_instruction: "The \"If-else\" blocks checks a condition, - and then does one thing OR another. To get me to the acorn try to use this - new block." - scrat 18_instruction: "The \"If-else\" blocks checks a condition, and then - does one thing OR another. To get me to the acorn try to use this new block." - scrat 19 (copy 1)_instruction: "One more practice of the \"if-else\" block, - can you get it right on your first try?" - scrat 19_instruction: "One more practice of the \"if-else\" block, can you - get it right on your first try?" - scrat 20_instruction: "Can you add just 3 blocks to help me solve a more complex - maze? If you do it right, I can walk any curvy path no matter the length. - Hurry! The ice is melting!" - skratDebugVideo1_instruction: "Get Skrat to the Acorn." + always see at least a bit of him, so lets write some functions that help make + sure he doesn't go too far out of the yard. Here's a function called safe-left? + - it should take a Number for its domain that represents Sam's x-coordinates + and return true if he's completely visible on screen. If your function works, + Sam shouldn't be able to leave the yard from the left side." + Sam the Butterfly 3_instruction: "In the last puzzle we kept Sam from leaving + on the left, now let's do the same thing on the right. Complete the safe-right? + function to make sure Sam can't go off the right side of the screen." + Sam the Butterfly 4_instruction: "Huh, we can keep Sam from leaving on the + left, or we can keep him from leaving on the right, but how can we keep him + safe from leaving both directions? Try using the and block to program the + function on-screen? to check if Sam is safe-left? and safe-right?" + Sam the Butterfly 5_instruction: "Free Play: Awesome, we've kept Sam safe + on the left and right! Use this free play stage to experiment with your functions + and further improve onscreen?" + Sam the Butterfly 6_instruction: "We've added a new parameter \"y\" to the + \"on-screen?\" function. Update the function so that it checks that \"safe-left?\" + AND \"safe-right?\" AND \"safe-up?\" are all true. When you've fixed the + function, try going out of the yard from the left, right, and top sides." + Sam the Butterfly 7_instruction: "Only one last direction to worry about! Create + a \"safe-down?\" function and update the \"on-screen?\" function so that it + checks up, down, left, and right." + Sam the Butterfly Complete_instruction: "Only one last direction to worry about! + Create a \"safe-down?\" function and update the \"on-screen?\" function so + that it checks up, down, left, and right." SpecialFrozenLevel_instruction: "You've officially become a master artist! Create a winter wonderland." Standalone_Artist_1_instruction: "Welcome to Artist! First off, let's try @@ -6332,11 +3883,7 @@ en: to make a simple square using the turn right block and move forward block. Each side should be 100 pixels long." StepIntro_instruction: "Here's how to use the \"Step\" button." - template test_instruction: "what's up" Test Play Lab_instruction: "This is a test play lab level." - test_sarah_instruction: "hi hi" - testArtistForTestK_instruction: "The Artist is trying to draw a line five times, - but can't get it right. Can you help?" Testing Quantum Farmer_instruction: "Wow, look at that! \r\n\r\nI don't know how many shovelfuls of dirt this hole needs. \r\nCan you write a program that keeps using the `fill` block until the ground is even? " @@ -6368,10 +3915,10 @@ en: U1L8 NetSim numbers with decimal_instruction: "With your partner, develop a protocol or set of rules for communicating a drawing using only bits. See the worksheet handed out by your teacher for more detailed instructions!" + U2 Vigenere_instruction: "Test" U2 frequency caesar_instruction: "Instructions" U2 frequency random sub_instruction: "Instructions" U2 vigenere cipher_instruction: "Instructions" - U2 Vigenere_instruction: "Test" U2L04 - NetSim Routers with Addresses_instruction: "Send messages with your classmates (Click to see full instructions)" U2L05 - NetSim - Packets and Building TCP_instruction: "Develop a Protocol @@ -6405,6 +3952,8 @@ en: U2L7 NetSim Need for Packets_instruction: "Transfer your favicon to a partner across a network in which the larger a packet grows, the more likely it is to be dropped." + U3 - Arrays - Demo App_instruction: "Use the \"My Favorite Things\" app. How + might this app be making use of an array? (Click to see full instructions)" U3 - Arrays - appendItem_instruction: "Create an array of odd numbers 1-11 by using appendItem. (Click to see full instructions)" U3 - Arrays - assignment_instruction: "Use indexes to change the values in @@ -6416,18 +3965,22 @@ en: U3 - Arrays - createFirstArray_instruction: "Create an array of the even numbers from 0 to 10 and display its contents with console.log. (Click to see full instructions)" - U3 - Arrays - Demo App_instruction: "Use the \"My Favorite Things\" app. How - might this app be making use of an array? (Click to see full instructions)" U3 - Arrays - expressionsAsIndexes_instruction: "Write a program that displays a randomly chosen color from the array. (Click to see full instructions)" + U3 - Arrays - favThings Counting Variable_instruction: "Create a global variable + for the current index and use it to display the first item in the array. (Click + to see full instructions)" + U3 - Arrays - favThings Next_instruction: "Write code that allows the user + to move forward through your list by clicking the \"Next\" button. (Click + to see full instructions)" + U3 - Arrays - favThings Prev_instruction: "Write code that allows the user + to move backward through your list by clicking the \"Last\" button. (Click + to see full instructions)" U3 - Arrays - favThings addItem_instruction: "Write code that allows a user to add their own favorite things to the list. (Click to see full instructions)" U3 - Arrays - favThings bounds_instruction: "Add if statements to your event handlers that prevent the global index from going out of bounds. (Click to see full instructions)" - U3 - Arrays - favThings Counting Variable_instruction: "Create a global variable - for the current index and use it to display the first item in the array. (Click - to see full instructions)" U3 - Arrays - favThings createArray_instruction: "Create an array of words describing your favorite things. (Click to see full instructions)" U3 - Arrays - favThings firstOutput_instruction: "Use setText to display the @@ -6436,12 +3989,6 @@ en: and meaningful IDs. (Click to see full instructions)" U3 - Arrays - favThings keepPlaying_instruction: "Make any other improvements you want! (Click to see full instructions)" - U3 - Arrays - favThings Next_instruction: "Write code that allows the user - to move forward through your list by clicking the \"Next\" button. (Click - to see full instructions)" - U3 - Arrays - favThings Prev_instruction: "Write code that allows the user - to move backward through your list by clicking the \"Last\" button. (Click - to see full instructions)" U3 - Arrays - favThings template_instruction: "Give your UI elements descriptive and meaningful IDs. (Click to see full instructions)" U3 - Arrays - globalVariableIndex_instruction: "Give your UI elements descriptive @@ -6465,6 +4012,9 @@ en: adding strings to an array. (Click to see full instructions)" U3 - Canvas - 200dots_instruction: "Add a loop to your program that draws 200 dots on your canvas. (Click to see full instructions)" + U3 - Canvas - One Dot sprayPaint_instruction: "Write code that redraws your + image using a dot whose x and y locations use offsetX and offsetY with a small + random value added. (Click to see full instructions)" U3 - Canvas - appendToArray_instruction: "Create an array to store each event parameter. Append each event parameter to this array within your event handler. (Click to see full instructions)" @@ -6489,9 +4039,6 @@ en: U3 - Canvas - movementFunction_instruction: "Write a function that takes the movement of the mouse as input and generates a line width as output. (Click to see full instructions)" - U3 - Canvas - One Dot sprayPaint_instruction: "Write code that redraws your - image using a dot whose x and y locations use offsetX and offsetY with a small - random value added. (Click to see full instructions)" U3 - Canvas - redrawOriginal_instruction: "Write a function that processes your array, redrawing the dots as they originally appeared. (Click to see full instructions)" @@ -6515,25 +4062,25 @@ en: full instructions)" U3 - Conditional Basics - 6_instruction: "Add a setText after the if statement to \"Nope. Guess again.\" (Click to see full instructions)" - U3 - Conditionals - Combine AND and OR_instruction: "Write an if statement - that uses AND and OR to display \"Time to go to school!\" if it's not the - weekend and the user is under 18. (Click to see full instrucitons." - U3 - Conditionals - Combine AND OR and NOT_instruction: "Write an if statement - that uses AND and OR to display \"Time to go to school!\" if it's not the - weekend and the user is under 18. (Click to see full instructions.)" U3 - Conditionals - Combine AND OR Simple_instruction: "Write an if statement that uses AND and OR to display \"Sleep in!\" if it's the weekend and the user is a teenager. (Click to see full instructions." - U3 - Conditionals - intoOr_instruction: "Add 2 if statements that use the OR - operator. (Click to see full instructions)" - U3 - Conditionals - introAND_instruction: "Add 2 if statements that use the - OR operator. (Click to see full instructions)" + U3 - Conditionals - Combine AND OR and NOT_instruction: "Write an if statement + that uses AND and OR to display \"Time to go to school!\" if it's not the + weekend and the user is under 18. (Click to see full instructions.)" + U3 - Conditionals - Combine AND and OR_instruction: "Write an if statement + that uses AND and OR to display \"Time to go to school!\" if it's not the + weekend and the user is under 18. (Click to see full instrucitons." U3 - Conditionals - Simple AND_instruction: "Write an if statement that uses AND to display \"You are a teenager.\" if the user enters an age between 13 and 19. (Click to see full instructions)" U3 - Conditionals - Simple OR_instruction: "Write an if statement that uses OR to display \"It's the weekend!\" if the user enters a weekend day at the prompt. (Click to see full instructions)" + U3 - Conditionals - intoOr_instruction: "Add 2 if statements that use the OR + operator. (Click to see full instructions)" + U3 - Conditionals - introAND_instruction: "Add 2 if statements that use the + OR operator. (Click to see full instructions)" U3 - Design Mode - Console Log_instruction: "Update the ID names and `console.log` messages to match the correct button. (Click to see full instructions.)" U3 - Design Mode - Layers and Delete_instruction: "Fix the layout of the bullseye @@ -6575,7 +4122,6 @@ en: see full instructions)\r\n" U3 - High Low - If_instruction: "Add code to the if statement that indicates the user guessed the secret number. (Click to see full instructions)" - U3 - images - bee free play_instruction: "Do this" U3 - Keys - Add Image URLs_instruction: "Add image URLs to your array. Replace the text area with an image and setText with setImageURL. Then test your app! (Click to see full instructions)" @@ -6642,16 +4188,16 @@ en: as long as both are less than 3. (Click to see full instructions)" U3 - Loops - Continue_instruction: " Use the Debug Commands to to make a list of all the values rolled before a 6. (Click to see full instructions)" - U3 - Loops - minus = operator_instruction: "Update the code to use the -= operator - to count from 30 down to 0 by 3's. (Click to see full instructions)" U3 - Loops - Minus Minus_instruction: "Change the code to count down from 10 to 1. (Click to see full instructions)" - U3 - Loops - plus and minus = operator_instruction: "Update the code to use - the += operator. (Click to see full instructions)" U3 - Loops - Plus Plus_instruction: "Change the code to use count++ instead of count = count + 1. (Click to see full instructions)" U3 - Loops - Typing in Console_instruction: "Use console to check the ending value of num. (Click to see full instructions)" + U3 - Loops - minus = operator_instruction: "Update the code to use the -= operator + to count from 30 down to 0 by 3's. (Click to see full instructions)" + U3 - Loops - plus and minus = operator_instruction: "Update the code to use + the += operator. (Click to see full instructions)" U3 - Loops And Arrays - Add 5_instruction: "Add 5 to all the values in an array (Click to see full instructions)" U3 - Loops And Arrays - Challenge 1_instruction: "Write a function that finds @@ -6709,11 +4255,11 @@ en: keywords for movie ratings (G, PG, PG-13, and R). (Click to see full instructions)" U3 - Movie Bot - Nested Motivation_instruction: "Add a separate set of if statements to check for a \"?\" in the input. (Click to see full instructions)" + U3 - Movie Bot - When Multiple If Statements_instruction: "Add an if and else-if + statement that checks for please and thank you. (Click to see full instructions)" U3 - Movie Bot - toLowerCase_instruction: "Use the toLowerCase command to change all user input into lowercase letters after they enter it. (Click to see full instructions)" - U3 - Movie Bot - When Multiple If Statements_instruction: "Add an if and else-if - statement that checks for please and thank you. (Click to see full instructions)" U3 - Practice Create Performance Task_instruction: "Design and implement your practice Create Performance Task. (Click to see full instructions)" U3 - Read Record - 1.2_instruction: "Console.log the records returned by a @@ -6781,13 +4327,13 @@ en: U3 - Simple Drawing - Personal Drawing_instruction: "DO This" U3 - Simple Drawing - Rectangle Width and Height_instruction: "Do This" U3 - Simple Drawing - Rectangle_instruction: "Do This" - U3 - Simple Drawing - regular polygon_instruction: "Do this" U3 - Simple Drawing - Road Ellipse_instruction: "Do This" U3 - Simple Drawing - Road Rects and Color_instruction: "Do This" U3 - Simple Drawing - Simple Shape Drawing_instruction: "Do This" U3 - Simple Drawing - Stroke and Stroke Weight_instruction: "Do this" - U3 - Simple Drawing - text_instruction: "Do This" U3 - Simple Drawing - X and Y values_instruction: "Do This" + U3 - Simple Drawing - regular polygon_instruction: "Do this" + U3 - Simple Drawing - text_instruction: "Do This" U3 - Simulation - 1_instruction: "Use a while loop to \"flip a coin 10 times\" and write the values to the screen. (Click to see full instructions)" U3 - Simulation - 2.1_instruction: "Change your looping condition so the simulation @@ -6817,9 +4363,9 @@ en: U3 - Sprites and Mod - Rand Around Mouse_instruction: "Do this" U3 - Sprites and Mod - Rand Shape Color_instruction: "Do This" U3 - Sprites and Mod - Shape Color_instruction: "Do This" - U3 - Sprites and Mod - two sprites_instruction: "Do This" U3 - Sprites and Mod - Wrap Many Squares_instruction: "Do This" U3 - Sprites and Mod - X and Y Prop_instruction: "Do This" + U3 - Sprites and Mod - two sprites_instruction: "Do This" U3 - User Input - Save getText To Variable_instruction: "Save the age and name of the user in variables (Click to see full instructions)" U3 - User Input - Saving After Input_instruction: "Save the age of the user @@ -6858,6 +4404,7 @@ en: full)" U3 - Variables - Set to Expression_instruction: "Test out the new expressions. (Click to see full instructions)" + U3 - images - bee free play_instruction: "Do this" U3 Digital Assistant Design_instruction: "Pick a topic for your Digital Assistant and create the basic layout with a text input and text area. (Click to show full instructions)" @@ -6871,8 +4418,6 @@ en: U3 Digital_instruction: "Choose a specialization topic for your digital assistant. Create a basic digital assistant that takes the user's input and displays back a default response." - U3 full clicker demo_instruction: "Clicker game - Try it out!" - U3 mehal's clone_instruction: "Try out a demo of the Digital Assistant!" U3 Variables consolelog_instruction: "Use the write block to display the value of size" U3 Variables flower example_instruction: "Change the value of petalSize multiple @@ -6887,6 +4432,8 @@ en: multiple times. How does it change your drawing?" U3 Variables write_instruction: "Use the write block to display the value of size" + U3 full clicker demo_instruction: "Clicker game - Try it out!" + U3 mehal's clone_instruction: "Try out a demo of the Digital Assistant!" U3- Variables - Assign Random For Turtle Draw_instruction: "Try writing the same code in text mode." U3- Variables - Changing the Value_instruction: "Update the value of 'turnAmount' @@ -6904,38 +4451,38 @@ en: ID and update the code to match. (Click to see detail instructions)." U3-Design Mode-Image_instruction: "Recreate the \"Chaser Game\" from the last lesson using Design Mode. (Click to see full instructions.)" + U313 Two Buttons with Ids_instruction: "Predict what will happen. Once you've + made a prediction, run the code to see what happens. (Click to see full instructions)" U313 drag Two Buttons_instruction: "Run a program with two buttons that have the same id to see the warning message in the console. Change the ids to make the program run without getting a warning message." U313 eventsDetails_instruction: "Run a program with two buttons that have the same id to see the warning message in the console. Change the ids to make the program run without getting a warning message." - U313 Two Buttons with Ids_instruction: "Predict what will happen. Once you've - made a prediction, run the code to see what happens. (Click to see full instructions)" U3L03 - draw rect function_instruction: "Write a function called drawRectangle().\r\n(Click to see full instructions)" U3L03 - draw step_instruction: "Write the drawStep function. (Click to see full instructions)" + U3L03 Creating Procedures 1_instruction: "Write the turnAround() function and + use it to make the turtle move as depicted. see: U3L03-turnAndDown.gif" + U3L03 Define and use turnAround_instruction: "Define a function called turnAround. + Call the function and then move the turtle forward. (Click to see full instructions)" + U3L03 Draw a T using turnAround_instruction: "Draw a plus sign using the provided + version of turnAround(). (Click to see full instructions)" + U3L03 Three Steps_instruction: "Define a function called drawSide() which draws + three steps and moves the turtle to prepare for the next side (Click to see + full instructions)" U3L03 choose your own drawing_instruction: "Now choose your own! Pick one of the three drawings shown here and attempt to create it on your own, making smart decisions about how to break the problem down into re-usable functions. You will review your work with a peer using \"procedures peer review rubric.\" Check it for the requirements. GIF: U3L3-ProceduresChooseOne.png" - U3L03 Creating Procedures 1_instruction: "Write the turnAround() function and - use it to make the turtle move as depicted. see: U3L03-turnAndDown.gif" - U3L03 Define and use turnAround_instruction: "Define a function called turnAround. - Call the function and then move the turtle forward. (Click to see full instructions)" U3L03 define turnRight and draw a rectangle_instruction: "Define a function called right() that turns the turtle to the right. Then use this function to draw a rectangle, as shown below. (Click to see full instructions)" - U3L03 Draw a T using turnAround_instruction: "Draw a plus sign using the provided - version of turnAround(). (Click to see full instructions)" U3L03 draw diamond_instruction: "Create a function called drawDiamond() that makes use of your previous work to draw the complete diamond. (Click to see full instructions)" - U3L03 Three Steps_instruction: "Define a function called drawSide() which draws - three steps and moves the turtle to prepare for the next side (Click to see - full instructions)" U3L04 - 3 by 3 with functions_instruction: "Make the 3x3 square as efficiently as you can. (Click to see full instructions)" U3L04 - snowflake_instruction: "Create the design by breaking it down into @@ -6981,6 +4528,15 @@ en: draw a smiley face. (Click to see full instructions)" U3L06 Challenge 8 make your own_instruction: "Create a drawing of your own. (Click to see full instructions)" + U3L07 - Free Play Loops and Random_instruction: "Free Play! Use what you learned + from loops and random to make your own little scene. Have fun." + U3L07 - Starry Night Starter Code_instruction: "You are going to use loops + and random numbers to generate an image of starry night sky similar to one + shown here. We have given you some starter code to generate the ground and + sky (just two giant dots), you will add code to this project to make the stars, + grass, and moon. All of the effects are clever applications of turtle dots, + lines, and colors. To get started, follow the series of steps suggested in + the accompanying worksheet. " U3L07 - allSeaGrass_instruction: "Add 50 pieces of seagrass to the image by writing drawAllSeagrass with a loop. (Click to see full instructions)" U3L07 - bubbles_instruction: "Add 200 bubbles to the image by writing drawAllBubbles @@ -6992,8 +4548,6 @@ en: full instructions)" U3L07 - fish_instruction: "Add 15 fish to the image by writing drawAllFish with a loop. (Click to see full instructions)" - U3L07 - Free Play Loops and Random_instruction: "Free Play! Use what you learned - from loops and random to make your own little scene. Have fun." U3L07 - introSquare_instruction: "Use a loop to draw a square. Then add another loop to draw many squares each one rotated some amount. (Click to see full instructions)" @@ -7007,34 +4561,27 @@ en: the number of waves in the grass. (Click to see full instructions)" U3L07 - seaStar_instruction: "Add 5 sea stars to the image by writing drawAllSeaStars with a loop. (Click to see full instructions)" - U3L07 - Starry Night Starter Code_instruction: "You are going to use loops - and random numbers to generate an image of starry night sky similar to one - shown here. We have given you some starter code to generate the ground and - sky (just two giant dots), you will add code to this project to make the stars, - grass, and moon. All of the effects are clever applications of turtle dots, - lines, and colors. To get started, follow the series of steps suggested in - the accompanying worksheet. " U3L07 - sunBeams_instruction: "Add 100 sunbeams to the image by writing drawAllSunbeams with a loop. (Click to see full instructions)" U3L07 - topDownDesign_instruction: "Get comfortable with the structure of this program, then move on to the next exercise. (Click to see full instructions)" + U3L08 - Enchantment Under the Sea_instruction: "You have been provided with + starter code for an “Under the Sea” scene which includes three functions, + one each for the starfish, seagrass, and fish. Create versions of these functions + which accept parameters to allow you to add more variation to your scene. The + student worksheet provides more details and guidance." U3L08 - createTwoParamTriangle_instruction: "Define a function called drawTriangle() that accepts two parameters to set the size and width of the triangle. (Click to see full instructions)" U3L08 - digitalScene_instruction: "Create the functions you were assigned as part of your digital scene. (Click to see full instructions)" - U3L08 - drawSquaresWithParams_instruction: "Write drawSmallSquare() to draw - a 25px square. (Click to see full instructions)" U3L08 - drawSquareWithParam - for video_instruction: "Use drawSquare() to recreate the image of both squares, this time using parameters. (Click to see full instructions)" U3L08 - drawSquareWithParam_instruction: "Use drawSquare() to recreate the image of both squares, this time using parameters. (Click to see full instructions)" - U3L08 - Enchantment Under the Sea_instruction: "You have been provided with - starter code for an “Under the Sea” scene which includes three functions, - one each for the starfish, seagrass, and fish. Create versions of these functions - which accept parameters to allow you to add more variation to your scene. The - student worksheet provides more details and guidance." + U3L08 - drawSquaresWithParams_instruction: "Write drawSmallSquare() to draw + a 25px square. (Click to see full instructions)" U3L08 - fish_instruction: "Add a parameter to drawFish that changes the size of the fish drawn. (Click to see full instructions)" U3L08 - freePlay_instruction: "Keep adding to your image by making more calls @@ -7068,6 +4615,8 @@ en: U3L13 - Button with ID_instruction: "Drag a button out onto the screen and set its text to \"Go forth!\". Run the program to make sure you can see the button." + U3L13 - Debug Id Problem_instruction: "Improve the button by choosing a descriptive + and meaningful ID. (Click to see full instructions)" U3L13 - Debug Id plus logic problem_instruction: "The last problem was an example of syntax error. App Lab did not understand which object it should be listening to for a \"click\" event so it showed an error message in the console to let @@ -7075,8 +4624,6 @@ en: but it's not doing what you want it to do.\r\n\r\nThis program has 2 errors. A (tricky) syntax error and logical error. Find them, fix them, and make the program work as expected." - U3L13 - Debug Id Problem_instruction: "Improve the button by choosing a descriptive - and meaningful ID. (Click to see full instructions)" U3L13 - Debugging 1_instruction: "Debug the program by verifying your IDs are being referenced properly. (Click to see full instructions)" U3L13 - Debugging 2_instruction: "Debug the program by properly ordering your @@ -7095,13 +4642,22 @@ en: U3L14 - Assigning Random Value_instruction: "Write a program that simulates the rolling of two dice and reports their individual values as well as the sum. (click to see full instructions)" + U3L14 - Mini Calculator embed_instruction: "You will be prompted for two numbers, + one right after the other. See what happens. Enter different numbers until + you get the idea." + U3L14 - Unfortunate Events Free Play_instruction: "Follow the \"Unfortunate + Events\" Worksheet and enter your code here to experiment. We've pre-loaded + the code you need to start." + U3L14 - User Input Division calculator_instruction: "Write a program that acts + as a simple calculator. (click to see full instructions)" + U3L14 - Variable ReAssignment pt2_instruction: "Trace the code and predict + what you think will be printed to the console. Then add a console.log statement + at the end of the program to see the last value of someNum to see if your + full prediction is correct. (click to see full Instructions)" U3L14 - concatenate simple_instruction: "Modify the write statement on line 3 to combine text and variables together to make the app display a single line of text that shows the player's lives and score. (click to see full instructions)" - U3L14 - Mini Calculator embed_instruction: "You will be prompted for two numbers, - one right after the other. See what happens. Enter different numbers until - you get the idea." U3L14 - moving memory challenge1_instruction: "Using only the variables provided, assignment (=) and arithmetic (+ - * /) re-assign the values to make the console.log statement display the correct value(s). (Click to see full instructions)" @@ -7120,28 +4676,11 @@ en: U3L14 - moving memory challenge6_instruction: "Using only the variables provided, assignment (=) and arithmetic (+ - * /) re-assign the values to make the console.log statement display the correct value(s). (Click to see full instructions)" - U3L14 - Unfortunate Events Free Play_instruction: "Follow the \"Unfortunate - Events\" Worksheet and enter your code here to experiment. We've pre-loaded - the code you need to start." - U3L14 - User Input Division calculator_instruction: "Write a program that acts - as a simple calculator. (click to see full instructions)" - U3L14 - Variable ReAssignment pt2_instruction: "Trace the code and predict - what you think will be printed to the console. Then add a console.log statement - at the end of the program to see the last value of someNum to see if your - full prediction is correct. (click to see full Instructions)" - U3L15 - add code to make count down work_instruction: "Write code to make the - down arrow work as expected. (Click to see full instructions)" U3L15 - Add reset button to UpDown app_instruction: "Add code so that clicking the start over button will reset the game and send you back to the main screen. (Click to see full instructions)" - U3L15 - clicker update score_instruction: "Add code to update the score when - the apple is clicked. (Click to see full instructions)" - U3L15 - count upDown bug forget to set text_instruction: "Find the bug in the - program and fix it. (Click to see full instructions)" - U3L15 - count upDown bug logic error wrong update_instruction: "Find the bug - in the program and fix it. (Click to see full instructions)" - U3L15 - count upDown bug var not created globally_instruction: "Find the bug - in the program and fix it. (Click to see full instructions)" + U3L15 - DEMO up down count practice app_instruction: "Try out the demo app + (Click to see full instructions)" U3L15 - Debug forget to update var on reset in UpDown app_instruction: "Run the app, and click the up or down button until you get to the gameOverScreen. Click 'Start Over' and try the app again. Find and fix the issue in the @@ -7152,8 +4691,19 @@ en: U3L15 - Debugging Simple If-statements =v==_instruction: "Run the app, and click the up button. Then restart and run it again, and click the down button. Find and fix the issue in the code. (Click to see full instructions)" - U3L15 - DEMO up down count practice app_instruction: "Try out the demo app - (Click to see full instructions)" + U3L15 - Simple If-statements in UpDown App_instruction: "Add an if statement + so that the app changes screens when the count reaches -5. (Click to see full + instructions)" + U3L15 - add code to make count down work_instruction: "Write code to make the + down arrow work as expected. (Click to see full instructions)" + U3L15 - clicker update score_instruction: "Add code to update the score when + the apple is clicked. (Click to see full instructions)" + U3L15 - count upDown bug forget to set text_instruction: "Find the bug in the + program and fix it. (Click to see full instructions)" + U3L15 - count upDown bug logic error wrong update_instruction: "Find the bug + in the program and fix it. (Click to see full instructions)" + U3L15 - count upDown bug var not created globally_instruction: "Find the bug + in the program and fix it. (Click to see full instructions)" U3L15 - global var example count up_instruction: "Look at the code for this app and see how the code works to update the count variable when the up arrow is clicked. (Click to see full instructions)." @@ -7161,9 +4711,6 @@ en: when the apple is clicked. (Click to see full instructions)" U3L15 - practice with setText_instruction: "Use setText to complete the click event handler for the down arrow. (Click to see full instructions)" - U3L15 - Simple If-statements in UpDown App_instruction: "Add an if statement - so that the app changes screens when the count reaches -5. (Click to see full - instructions)" U3L15 - variable scoping problem debugging_instruction: "See if you can figure out why the code is no longer working. (Click to see full instructions)" U3L15 click add lives_instruction: "Add lives to the clicker game that decrement @@ -7246,14 +4793,14 @@ en: U3L16 Mad Lib Clear Input_instruction: "Clear the user's previous text when the Play Again button is clicked (Click to see full instructions) " U3L16 Mad Lib Demo_instruction: "Mad Libs Demo - Try it out!" + U3L16 Mad Lib Student Setup_instruction: "Back to Mad Libs: To get started, + set up the two screens for your Mad Libs app (Click to show full instructions)" U3L16 Mad Lib getText_instruction: "Before setting the text area with your Mad Libs outline, get the user's text and incorporate their responses. (Click to see full instructions) " U3L16 Mad Lib setText_instruction: "When the Next button is clicked, set the text area to have the main outline of your How-to Mad Libs (without the user's input). (Click to see full instructions) " - U3L16 Mad Lib Student Setup_instruction: "Back to Mad Libs: To get started, - set up the two screens for your Mad Libs app (Click to show full instructions)" U3L16 Mad Lib toUpper_instruction: "Apply the toUpperCase and toLowerCase string functions to the user's text. (Click to see full instructions) " U3L17 - getAndSetKeyValue_instruction: "Create an image like app. (Click to @@ -7284,11 +4831,16 @@ en: of the things you might not have used yet. Feel free to explore then and experiment if you want to. Everything else you need should be shown. Have fun!" + U3L19 - DEMO up down count practice app_instruction: "Try out the demo app + (Click to see full instructions)" U3L19 - Debugging with consoleLog_instruction: "Add console.log() statements to find out the value of a and b after the first reassignment statement a = b; (Click to see full instructions)" - U3L19 - DEMO up down count practice app_instruction: "Try out the demo app - (Click to see full instructions)" + U3L19 - Simple If-statements in UpDown App_instruction: "Add an if statement + so that the app changes screens when the count reaches -5. (Click to see full + instructions)" + U3L19 - Target Clicker App_instruction: "Investigate the new elements of the + 'chaser-game'" U3L19 - do concatenate string with var_instruction: "We've given you a piece of code from the previous screen. Try changing the value assigned to foo to see the string change. \r\nDo this: \r\n1. Try changing the value assigned @@ -7304,11 +4856,6 @@ en: is clicked. (Click to see full instructions)." U3L19 - practice with setText_instruction: "Add another button that changes the text to the value of a new variable. (Click to see full instructions)" - U3L19 - Simple If-statements in UpDown App_instruction: "Add an if statement - so that the app changes screens when the count reaches -5. (Click to see full - instructions)" - U3L19 - Target Clicker App_instruction: "Investigate the new elements of the - 'chaser-game'" U3L19 - test reassignment of two vars_instruction: "Predict the value of a and b. Add console.log statements to find out the actual value of a and b. (Click for full instructions)" @@ -7395,8 +4942,6 @@ en: digital assistant's keywords/phrases." U3L24 Chatbot Nested Conditionals_instruction: "Add a chained conditional with at least 3 \"else if\" statements to your personal assistant." - U3L24 introIncludes_instruction: "Practice using the includes command. (Click - to see full instructions)" U3L24 Nested Conditionals 1_instruction: "Change all of the boolean expressions to use includes instead of ==. (Click to see full instructions)" U3L24 Nested Conditionals 2_instruction: "Nest your movie genre if statements @@ -7408,6 +4953,8 @@ en: U3L24 Nested Conditionals Bugs_instruction: "Expose the bugs in this problem by typing inputs into the user-input box. Track which inputs cause unexpected outputs." + U3L24 introIncludes_instruction: "Practice using the includes command. (Click + to see full instructions)" U3L25 - drag out key event_instruction: "Set up an event handler to respond to keypress events, and display event.key in the console. Hit keys on the keyboard to see what happens. (Click to see full instructions)" @@ -7466,22 +5013,8 @@ en: location, facing its original direction. (Click to see full instructions)" U3L2_TurtleSquare_right_instruction: "Draw a square to the front and to the right of the starting location. (Click to show full instructions)" - U4 - add createRecord to contacts App_instruction: "Add code to your contacts - app so that newly-added contacts are saved in a table. (Click to see full - instructions)" U4 - Add Row By Hand_instruction: "Add a new record to your table in the Data Viewer. (Click to see full instructions)" - U4 - Charts - drawChartFromRecords 1_instruction: "Use the drawChartFromRecords - block to create a scatter plot from the table in the database. (Click to see - full instructions)" - U4 - Charts - drawChartFromRecords Options 1_instruction: "Add a title to your - chart and change the colors of your lines using the options parameter of drawChartFromRecords. - (Click to see full instructions)" - U4 - Charts - drawChartFromRecords Options 2_instruction: "Look through the - drawChartFromRecords API and choose some more options to customize. (Click - to see full instructions)" - U4 - Charts - drawChartsFromRecords 1_instruction: "Add screen element, pull - out drawCharts block, run the program!" U4 - Charts - Export Data_instruction: "Export the data from the “ages” table as a CSV file, then remix this app and import the CSV file. (Click to see full instructions)" @@ -7501,6 +5034,17 @@ en: see what happened to the data. (Click to see full instructions)" U4 - Charts - Scatter Chart_instruction: "Create a scatter plot of the “rottenTomatoes” table, using the new table and column names. (Click to see full instructions)" + U4 - Charts - drawChartFromRecords 1_instruction: "Use the drawChartFromRecords + block to create a scatter plot from the table in the database. (Click to see + full instructions)" + U4 - Charts - drawChartFromRecords Options 1_instruction: "Add a title to your + chart and change the colors of your lines using the options parameter of drawChartFromRecords. + (Click to see full instructions)" + U4 - Charts - drawChartFromRecords Options 2_instruction: "Look through the + drawChartFromRecords API and choose some more options to customize. (Click + to see full instructions)" + U4 - Charts - drawChartsFromRecords 1_instruction: "Add screen element, pull + out drawCharts block, run the program!" U4 - CreateRecord - 1_instruction: "Add a createRecord command and run the program. (Click to see full instructions)" U4 - CreateRecord - 2.5_instruction: "Change the table name in createRecord @@ -7516,6 +5060,99 @@ en: U4 - CreateRecord - 5_instruction: "Add a property to the JavaScript object, then run the program. View the data table and see how changing the object affects the data table. (Click to see full instructions)" + U4 - Edit Data Table by Hand_instruction: "View the data table and click edit + next to each row. Add the artists names for each song by hand. (Click to + see full instructions)" + U4 - Exploring Data Tools - Template_instruction: "Use createRecord to add + the song object as a record to a table. (Click to see full instructions)" + U4 - Objects - accessingPropertiesInArray_instruction: "Access the properties + of the objects stored in an array. (Click to see full instructions)" + U4 - Objects - arraysOfObjects_instruction: "Create an array called \"students\" + and add all 5 student objects to the array. (Click to see full instructions)" + U4 - Objects - createContactObject_instruction: "Construct a new object from + the user inputs, and append it to your array. (Click to see full instructions)" + U4 - Objects - createContactsData_instruction: "Add values to the three contact + objects provided in the starter code. (Click to see full instructions)" + U4 - Objects - createDotNotation_instruction: "Create a student Object yourself. + Add properties to your object one at a time using dot notation. (Click to + see full instructions)" + U4 - Objects - createObject_instruction: "Create an object with at least 3 + properties and display it in the Debug Console. (Click to see full instructions) + " + U4 - Objects - dotNotation_instruction: "Use dot notation to display individual + properties of the object. (Click to see full instructions)" + U4 - Objects - eventHandlersToSwitchScreen_instruction: "Attach event handlers + to the \"Add Contact\" and \"Go Back\" buttons that allow the user to switch + screens. (Click to see full instructions)" + U4 - Objects - eventParameter_instruction: "Trigger both the keyboard and mouse + event and examine the event objects displayed in the console. Why might an + object be the best way to store this information? (Click to see full instructions)" + U4 - Objects - exemplarContactsApp_instruction: "Use the Contacts app and then + add a contact of your own. (Click to see full instructions)" + U4 - Objects - loopingArray_instruction: "Loop over your array of students + and print the name of every students. (Click to see full instructions)" + U4 - Objects - loopingArray2_instruction: "Loop over your array of students + and print the name and grade of every student. (Click to see full instructions)" + U4 - Objects - loopingCompoundConditions_instruction: "Loop over the array + of students and display the information of students who are present and in + the 11th grade. (Click to see full instructions)" + U4 - Objects - loopingConditions_instruction: "Loop over your array of student + objects and display the names of every student who is present in class. (Click + to see full instructions)" + U4 - Objects - pullValues_instruction: "Create an event handler for the \"Save + Contact\" button that displays the contents of the 4 text input fields in + the console. (Click to see full instructions)" + U4 - Objects - readStarterCode_instruction: "Familiarize yourself with the + starter code and UI elements provided. (Click to see full instructions)" + U4 - Objects - resetIndexAndShow_instruction: "Add code to your event handler + for the \"Save Contact\" button so that when a new contact is added, the inputs + are cleared, the screen is switched, and the correct contact is shown. (Click + to see full instructions)" + U4 - Objects - showContact1_instruction: "Add code to the showCurrentContact + function to show the name of the contact stored at the currentIndex of your + array. (Click to see full instructions)" + U4 - Objects - showContact2_instruction: "Add the phone number and birthday + text to your text area. (Click to see full instructions)" + U4 - Objects - showContact3_instruction: "Display the image information for + each contact. (Click to see full instructions)" + U4 - Objects - showSampleImage_instruction: "Attach an event handler to the + image URL text input so that the user can confirm their image will work as + expected. (Click to see full instructions)" + U4 - Objects - writeWrap_instruction: "Use the wrap function to prevent currentIndex + from leaving the bounds of your array. (Click to see full instructions)" + U4 - Read Record - 1.2_instruction: "Place a console.log command below the + readRecords command. (Click to see full instructions)\r\n" + U4 - Read Record - 1.3_instruction: "Add a console.log command inside the callback + function. (Click to see full instructions)\r\n" + U4 - Read Record - 1_instruction: "Use console.log to display the records returned + by a call to readRecords. (Click to see full instructions)\r\n" + U4 - Read Record - 2_instruction: "Change the table name so that the records + are read from the new table. (Click to see full instructions)\r\n" + U4 - Read Record - 3_instruction: "Change the name of the table in a readRecords + command to read from a table that does not exist. (Click to see full instructions)\r\n" + U4 - Read Record - 4.1_instruction: "Use indexes and dot notation to reference + values in the response from the database. (Click to see full instructions)\r\n" + U4 - Read Record - 4_instruction: "Print out each record return from the readRecords + call individually. (Click to see full instructions)\r\n" + U4 - Read Record - 5_instruction: "Using a for loop, display the title of each + movie in your database. (Click to see full instructions)\r\n" + U4 - Read Record - part 1 - template_instruction: "Use console.log to display + the records returned by a call to readRecords. (Click to see full instructions)\r\n" + U4 - ReadRecords - Contacts App 1_instruction: "Use readRecords to copy the + data in your database into your \"contacts\" global variable and call showCurrentContact. + (Click to see full instructions)" + U4 - ReadRecords - Contacts App 2_instruction: "Create a function called refreshLocalData. + (Click to see full instructions)" + U4 - ReadRecords - Contacts App 3_instruction: "Add a call to \"refreshLocalData\" + to the callback function of the createRecord you use to add a new contact + to your database. (Click to see full instructions)" + U4 - ReadRecords - Contacts App 4_instruction: "Create a \"Delete\" button. + (Click to see full instructions)" + U4 - ReadRecords - Contacts App 5 make delete work_instruction: "Create an + event handler for the \"Delete\" button you created. (Click to see full instructions)" + U4 - add createRecord to contacts App_instruction: "Add code to your contacts + app so that newly-added contacts are saved in a table. (Click to see full + instructions)" U4 - debug column names are case sensitive_instruction: "Change song.title to song.Title (capital T). And run the program. Check the data table (Click to see full instructions)" @@ -7530,11 +5167,6 @@ en: U4 - deleteRecords 2_instruction: "Using the data viewer, find the id of a a record you want to delete. Use the deleteRecord command to delete it. (Click for full instructions)." - U4 - Edit Data Table by Hand_instruction: "View the data table and click edit - next to each row. Add the artists names for each song by hand. (Click to - see full instructions)" - U4 - Exploring Data Tools - Template_instruction: "Use createRecord to add - the song object as a record to a table. (Click to see full instructions)" U4 - fix contacts by hand in data table_instruction: "Use the data viewer to add rows to the data table. Add the original hard-coded contacts from your app to the database. (Click to see full instructions)" @@ -7542,178 +5174,2546 @@ en: you add are saved to the database. Verify that after restarting your app, the contacts you added no longer show in the app, but still exist in the database. (Click to see full instructions)" - U4 - Objects - accessingPropertiesInArray_instruction: "Access the properties - of the objects stored in an array. (Click to see full instructions)" - U4 - Objects - arraysOfObjects_instruction: "Create an array called \"students\" - and add all 5 student objects to the array. (Click to see full instructions)" - U4 - Objects - createContactObject_instruction: "Construct a new object from - the user inputs, and append it to your array. (Click to see full instructions)" - U4 - Objects - createContactsData_instruction: "Add values to the three contact - objects provided in the starter code. (Click to see full instructions)" - U4 - Objects - createDotNotation_instruction: "Create a student Object yourself. - Add properties to your object one at a time using dot notation. (Click to - see full instructions)" - U4 - Objects - createObject_instruction: "Create an object with at least 3 - properties and display it in the Debug Console. (Click to see full instructions) + U4 vigenere cipher 2_instruction: "Instructions" + U4L02 - Objects - Template1_instruction: "Template" + U4L02 - Objects - createObject_instruction: "Create an object with at least + 5 values including at least one string and one number. (Click to see full + instructions) " + U4L02 - Objects - eventParameter_instruction: "Trigger both the keyboard and + mouse event and examine the event objects displayed in the console. Why might + an object be the best way to store this information? (Click to see full instructions)" + U4L06 Data Storage 1_instruction: "Fill in your name instead of \"Enter Your + Name\", run the app and click the button. Run it multiple times with different + names! Watch the console and use the ‘View Data” button to see how the table + is updated. As you play around make sure you can explain the purpose of each + of the circled parts of the diagram.\r\n\r\n" + U4L06 Data Storage 2_instruction: "The app is a continuation of the previous + one we started. Add a text label to collect the users name and use that as + the data input for the record.\r\n\r\nRun the app and click the button multiple + times and see what happens. Is there a problem you notice? " + U4L06 Data Storage 3_instruction: "We want to improve the user experience. + Once they have submitted their data for storage, it would be nice to clear + the textbox. Update your app to clear the textbox after the data is stored." + U4L06 Data Storage 4_instruction: "Add a label and drop down box, to your app + and save the data to your JSON object and add it to your table. Make sure + to reset the dropdown after the data is stored." + U4L06 Data Storage 5_instruction: "Add a couple radio buttons or checkboxes + to our app. Then find a way to collect the data from those. " + U4L06 Data Storage 6_instruction: " Use one of the getTime() and getUserId() + blocks to collect additional data. " + U4L06 Data Storage 7_instruction: "Add a second screen to the sample app we + have been building to capture an image from a user. Return to screen 1 after + the JSON object has been stored in the table." + U4L15 Read Data 1_instruction: "Run the level and see what happens. Then edit + the code to make it print a different column of information." + U4L15 Read Data 2_instruction: "Student should create a sentence which puts + together all the pieces from a record.\r\n\r\n<> is <> years old + and like <>" + U4L15 Read Data 3_instruction: "Print the sentence using the first JSON object + in the array\r\n\r\n" + U4L15 Read Data 4_instruction: "\r\nUse a random record from the list of records + to display your sentence." + U5 if-else-if movie example_instruction: "Add an else-if statement in order + to tell the user if their guess is high or low instead of just wrong. (Click + to see full instructions)" + U6 - Final Project - Project Level_instruction: "Build your final project here. + (Click to see full instructions)" + U6 - updateRecord - Callback Success Parameter_instruction: "Add an if-else + block inside the callback function for updateRecord. (Click to see full instructions)" + U6 - updateRecord - Contacts - Edit UI_instruction: "Set up the UI elements + needed to edit contacts. (Click to see full instructions)" + U6 - updateRecord - Contacts - Edit event handler_instruction: "Write event + handlers for the Edit Contacts UI elements. (Click to see full instructions)" + U6 - updateRecord - Contacts - Save edited contact_instruction: "Use updateRecord + to store the user's edits in the database. (Click to see full instructions)" + U6 - updateRecord - Default Block_instruction: "Use updateRecord to change + the record for \"Eye of the Tiger.\" (Click to see full instructions)" + U6 - updateRecord - Update Nonexistent Record_instruction: "Force updateRecord + to fail by changing the ID of songToUpdate. (Click to see full instructions)" + Underground Avoiding Lava_instruction: "Lava is hiding beneath some of these + blocks, which you'll need to cover up before moving forward. An \"if\" command + will come in handy here. Add a \"move forward\" command in the correct place + to mine these blocks." + Underground If Statements_instruction: "Now things are getting tricky. Mine + 3 redstone, but don’t fall in the lava. Use an \"If\" command to place cobblestone + over any lava you uncover." + Underground Iron_instruction: "Walking into molten lava is a bad idea. Place + cobblestone to create a bridge, then mine at least two of the iron blocks." + Underground Mine in a Circle_instruction: "Find a way to get 5 diamond and + 7 redstone! Try using a repeat command inside a repeat command to walk in + a square.\r\n" + Underground Mining Coal_instruction: "You’ll find the most valuable resources + underground, but it can get dark. Place at least 2 torches and mine at least + 2 coal." + Underground Test Level_instruction: "Collect all of the minerals!" + Unicorn Tag_instruction: "Take a look at this project. Do you see how it was + made?" + Vigenere_instruction: "Test" + WhileAdventure_instruction: "Our adventurer wants to collect coins. Can you + help her grab as many as she can using only one remove 1 block?" + 'Widget: Black and White Pixelation_instruction': "Now make your own image! + We've started you off with a 10x10 canvas but you can make it whatever size + you want. Happy pixeling!" + 'Widget: Color Pixelation_instruction': "Requirements: The icon must be 16x16 + pixels. You must use the Pixelation Widget to encode the bits of color information. + The image must be encoded with at least 12 bits per pixel." + 'Widget: Text Compression_instruction': "Look for patterns (repeated words + or phrases) in the text. Enter the patterns you see into the dictionary on + the right. As you type entries into the dictionary, the symbol for the entry + is inserted into the text in place of the pattern." + XML Scratchpad_instruction: "Using this test level to grab xml for unit tests" + aE1_instruction: "You chose to make a square napkin! \r\n\r\nTo finish, draw + a square with 20 pixel sides. " + aE2_instruction: "If you place your square loop inside another loop, we call + that a nested loop. What do you need to add as an outer loop to make sure + all 14 napkins line up next to each other?" + aE3_instruction: "We've got to have a tablecloth! \r\n\r\nTake your row of + 14 napkins and sew 14 of those together with another **outer loop** to make + a cover for our table." + aE3alternate_instruction: "Alternate" + aE3alternateB_instruction: "Alternate" + aE4_instruction: "Alternate" + aE5_instruction: "Example of puzzle using highest difficulty level shape." + aE6_instruction: "How many times do you need to loop this to draw half of + a circle? " + aE7_instruction: "If you create another loop like this one, but turn left instead + of right, what happens? \r\n\r\nCan you repeat all of that to draw this wave?" + aE8_instruction: "Now let's loop that whole thing four times to create this + picture frame. Watch out for the corners - you can't just turn 90 degrees! + \r\n\r\nIf looping a 3 degree turn 60 times makes a half circle, which of + these blocks of code will make an additional quarter circle for the corners?" + aEfreeplay_instruction: "Free Play!" + allthethings data blocks test_instruction: "Please sign in to test applab levels + (By design, applab levels only work if signed in. Normally, we make people + sign in, but this is only enforceable for a whole script and would be annoying + to do for the allthethings script)." + allthethings design mode elements_instruction: "Please sign in to test applab + levels (By design, applab levels only work if signed in. Normally, we make + people sign in, but this is only enforceable for a whole script and would + be annoying to do for the allthethings script)." + allthethings level dataTables_instruction: "Please sign in to test applab levels + (By design, applab levels only work if signed in. Normally, we make people + sign in, but this is only enforceable for a whole script and would be annoying + to do for the allthethings script)." + allthethings_U3 - Simple Drawing - Rectangle Width and Height_instruction: "Do + This" + allthethings_moviebot_instruction: "This level cloned from \"U3 Digital Assistant + Target\"" + allthethings_template_backed1_instruction: "Backed by a template #1. Please + sign in to test applab levels (By design, applab levels only work if signed + in. Normally, we make people sign in, but this is only enforceable for a whole + script and would be annoying to do for the allthethings script). " + allthethings_template_backed2_instruction: "Backed by a template #2. Please + sign in to test applab levels (By design, applab levels only work if signed + in. Normally, we make people sign in, but this is only enforceable for a whole + script and would be annoying to do for the allthethings script)." + artistDebugVideo1_instruction: "Use the `repeat` loop to add waves to the water." + artistFunctionsVideo1_instruction: "Follow the instructions to make your own + function." + artistLoopsK1_instruction: "This is a new type of puzzle called \"Artist\". + Play with the level and draw something fun." + artistLoopsK2_instruction: "Now, use a `repeat` loop to draw this line five + times!" + artistLoopsK2gradek_artist_loops3_instruction: "Now, use a `repeat` loop to + draw this line five times!" + artistLoopsK3_instruction: "Draw a line eight steps long. This will become + the land for our kingdom!" + artistLoopsK4_instruction: "Now we need a castle with a draw bridge. Fix the + code so that the bridge lays straight instead of falling down." + artistLoopsK5_instruction: "Now we need to fix the top of the castle. Can you + loop the code three times?" + artistLoopsK6_instruction: "Someone is stuck in the tower! Fix the stairs + to set them free. " + artistLoopsK7_instruction: "This tower is lovely, what is downstairs? Build + another staircase to find out! " + artistLoopsK8_instruction: "Wow! There's a garden over there! Help fix these + stairs so I can get to it." + artistLoopsK9_instruction: "**Challenge:** Lovely! Let's take a walk around + the garden." + artistLoopsKA_instruction: "These stones are in the wrong place. Help me move + them so I don't fall in!" + artistLoopsKB_instruction: "Look! It's a theater. Help me set up the chairs + so we can all see the stage. " + artistLoopsKFP_instruction: "Picture time! Use what you have learned to draw + a picture of what you think the Artist saw on stage." + beeDebugVideo1_instruction: "Use a `repeat` loop to collect all of the nectar." + birdsDebugVideo1_instruction: "Trace the path and lead me to the silly pig. + Avoid TNT or feathers will fly!" + brendan hackathon level_instruction: "these are the instructions for my level. you + should do this level and have a good time." + collector example_instruction: "Put these blocks in order to collect all of + the gold and solve the puzzle." + collectorDebugVideo2_instruction: "Put these blocks in order to collect all + of the gold and solve the puzzle." + collectorSkinVideo1_instruction: "Collect all four piles to pass this level." + collectorSkinVideo2_instruction: "Collect one pile of gold to pass this level." + course2_playlab_stage17_1_instruction: "Can you make Jorge the Dog (actor 1) + say \"Hi\"?" + course2_playlab_stage17_10_instruction: "Add blocks to the `when run` event + to change the background and the speed of Waddles.\r\n\r\nPlay the game and + move Waddles with the arrows until you score." + course2_playlab_stage17_11_instruction: "Create your own story. When you're + done, click Finish to let friends try your story on their phones." + course2_playlab_stage17_2_instruction: "Can you make Jorge (actor 1) say something, + then have Olive the Cat (actor 2) say something?" + course2_playlab_stage17_3_instruction: "Can you write a program to make Jorge + (actor 1) move toward Olive the Cat?" + course2_playlab_stage17_4_instruction: "Can you write a program that makes + Jorge (actor 1) move to Olive the Cat, and have Olive say \"Hello\" when Jorge + reaches her?" + course2_playlab_stage17_5_instruction: "Can you write a program to make Octavia + say \"Hi\" when she is clicked?" + course2_playlab_stage17_6_instruction: "Now, write a program to make Waddles + move around using the up / down / left /right keys to hit all of the targets!" + course2_playlab_stage17_7_instruction: "The `repeat forever` block allows you + to run code over and over forever. Can you attach blocks to move Chomp the + Dino (actor 2) up and down forever?" + course2_playlab_stage17_8_instruction: "Can you have Waddles (actor 1) say + \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen you're + done, play the game to make that happen." + course2_playlab_stage17_9_instruction: "Can you add a block to score a point + when Waddles runs into Octavia (actor 3)? \r\nPlay the game and move Waddles + with the arrows until you score!" + course3_playlab_stage16_1_instruction: "Can you make this dog say \"hello world\"?" + course3_playlab_stage16_2_instruction: "Can you make the dog say something + and then have the cat say something afterwards?" + course3_playlab_stage16_3_instruction: "Can you write a program to make this + dog move to the cat?" + course3_playlab_stage16_4_instruction: "Can you write a program that makes + the dog move to the cat, and have the cat say \"hello\" when the dog reaches + him?" + course3_playlab_stage16_5_instruction: "Can you add a block to make the octopus + happy?" + course3_playlab_stage16_6_instruction: "Create your own story. When you're + done, click Finish to let friends try your story on their phones." + course3_playlab_stage17_1_instruction: "Can you write a program to make the + octopus say \"hello\" when it is clicked?" + course3_playlab_stage17_2_instruction: "Can you write a program to make Waddles + move around using the up / down / left /right keys to hit all of the targets?" + course3_playlab_stage17_3_instruction: "The \"repeat forever\" block allows + you to run code continuously. Can you attach blocks to move this dinosaur + up and down repeatedly?" + course3_playlab_stage17_4_instruction: "Can you have Waddles say \"Ouch!\" + and play a \"hit\" sound if he runs into the dinosaur, and then move him with + the arrows to make that happen?" + course3_playlab_stage17_5_instruction: "Can you add a block to score a point + when Waddles runs into the octopus, and then move him with the arrows until + you score?" + course3_playlab_stage17_6_instruction: "Can you add blocks to change the background + and the speed of Waddles, and then move him with the arrows until you score?" + course3_playlab_stage17_7_instruction: "Create your own story. When you're + done, click Finish to let friends try your story on their phones." + courseA_artist_loops1_instruction: "This is a new type of puzzle called \"Artist\". + Play with the level and draw something fun." + courseA_artist_loops10_instruction: "Help me put down stones so I don't fall + in!" + courseA_artist_loops11_instruction: "Help me build steps to watch the ship + sail away." + courseA_artist_loops12_instruction: "The artist saw something funny in the + distance. Draw what you think he saw." + courseA_artist_loops2_instruction: "Help the artist draw this line two times + forward." + courseA_artist_loops3_instruction: "Draw a line forward five times." + courseA_artist_loops4_instruction: "Now, use a `repeat` loop to draw this line + five times!" + courseA_artist_loops5_instruction: "Draw a line seven steps long. This will + become our horizon." + courseA_artist_loops6_instruction: "Let's put a nice hill in the back." + courseA_artist_loops7_instruction: "Use the `repeat` loop to add waves to the + water." + courseA_artist_loops8_instruction: "We need a ladder up to the boat." + courseA_artist_loops9_instruction: "Challenge: Fix the stairs." + courseA_collector_loops1_instruction: "Move Laurel around and get as much treasure + as you can!" + courseA_collector_loops10_instruction: "Help Laurel get all of the treasure + from this deep valley." + courseA_collector_loops11_instruction: "Help Laurel get all of the treasure + from this cave." + courseA_collector_loops12_instruction: "Eureka! Collect as much treasure as + you can!" + courseA_collector_loops2_instruction: "Collect all three piles to pass this + level." + courseA_collector_loops3_instruction: "How can Laurel collect all five piles + of treasure using only one `[E-->]` block?" + courseA_collector_loops4_instruction: "Fix Laurel's path to get all of this + treasure." + courseA_collector_loops5_instruction: "Use what you learned to get all of the + treasure." + courseA_collector_loops6_instruction: "Add blocks to this code to collect all + of the treasure." + courseA_collector_loops7_instruction: "What should you add to this code to + get all of the treasure?" + courseA_collector_loops8_instruction: "Write the code to get all of this treasure." + courseA_collector_loops9_instruction: "**Challenge:** The treasure goes all + the way up these stairs! Write the code to help Laurel get it all." + courseA_maze_seq1_instruction: "Get the bird to the bad pig!" + courseA_maze_seq10_instruction: "Challenge: Go around the TNT to get the bird + to the pig! " + courseA_maze_seq11_instruction: "Move one way, then another to get the bird + to the pig." + courseA_maze_seq12_instruction: "Get that pig! " + courseA_maze_seq13_instruction: "Get the pig any way you can!" + courseA_maze_seq2_instruction: "Fix the code to get the bird to the pig." + courseA_maze_seq3_instruction: "Fix the code to get the bird to the pig!" + courseA_maze_seq4_instruction: "REMOVE a block to get the bird to the pig!" + courseA_maze_seq5_instruction: "Try this one yourself from the beginning." + courseA_maze_seq6_instruction: "Move one way, then another to get the bird + to the pig!" + courseA_maze_seq7_instruction: "Figure out what is missing and then add blocks + to get the bird to the pig!" + courseA_maze_seq8_instruction: "Solve this level and get the bird to the pig!" + courseA_maze_seq9_instruction: "Debug this level by adding blocks to get the + bird to the pig!" + courseA_playLab_events1_instruction: "This is a Play Lab level. Move blocks + to the workspace and see what happens!" + courseA_playLab_events2_instruction: "Jorge the Dog wants to say \"Hi there.\" Can + you help him?" + courseA_playLab_events3_instruction: "Connect the `move left` block to the + `when left` event block that is already in the workspace." + courseA_playLab_events4_instruction: "Now, get Jorge to move right when the + `right` button is clicked." + courseA_playLab_events5_instruction: "Add events to have Jorge move up and + down when the `up` and `down` buttons are pressed." + courseA_playLab_events6_instruction: "Make this more interesting by changing + the background and playing a random sound when Jorge is clicked." + courseA_playLab_events7_instruction: "Add anything you want to this game. Can + you make the dinosaur disappear when Jorge runs into him?" + courseA_video_events_instruction: "Need a better playlab/events combo" + courseB_artist_loops1_instruction: "This is a new type of puzzle called \"Artist\". + Play with the level and draw something fun." + courseB_artist_loops10_instruction: "Use what you have learned to draw a picture + of what you think the artist saw when he got home." + courseB_artist_loops2_instruction: "The Artist is trying to draw a line six + times, but can't get it right. Can you help?" + courseB_artist_loops3_instruction: "Help the artist draw a line 7 times to + make a garden wall." + courseB_artist_loops4_instruction: "Now we need to get the soil ready to plant. + Find the bugs in the code and help the artist prepare the ground. " + courseB_artist_loops5_instruction: "Time to fix the stairs! Repeat this pattern + five times so the artist can reach the top of the bushes." + courseB_artist_loops6_instruction: "Climb the vine and see where it goes?" + courseB_artist_loops7_instruction: "**Challenge:** It's a hidden garden! + Let's walk around." + courseB_artist_loops8_instruction: "Time to head home. Can you fix this ladder + to help the artist get down?" + courseB_artist_loops9_instruction: "Let's take the short way home, over the + pond. Can you help the artist stay on the stones?" + courseB_collector_loops1_instruction: "This is Laurel the Adventurer! Can + you move her around and get treasure?" + courseB_collector_loops10_instruction: "Help Laurel get all of the treasure + from this cave." + courseB_collector_loops11_instruction: "Eureka! Collect as much treasure as + you can!" + courseB_collector_loops2_instruction: "Collect all four piles to pass this + level." + courseB_collector_loops3_instruction: "How can Laurel collect all five piles + of treasure using only one `E -->` block?" + courseB_collector_loops3_predict1_instruction: "How can Laurel collect all + five piles of gold using only one `E -->` block?" + courseB_collector_loops4_instruction: "Fix Laurel's path to get all of this + treasure!" + courseB_collector_loops5_instruction: "Add to the code from the last puzzle + to get all of the treasure. " + courseB_collector_loops6_instruction: "Figure out the code to help Laurel get + all of the treasure!" + courseB_collector_loops7_instruction: "Write the code to get all of this treasure." + courseB_collector_loops8_instruction: "**Challenge: ** The treasure goes all + the way down these stairs! Write the code to help Laurel get it all." + courseB_collector_loops9_instruction: "*\"Help me get the treasure from this + deep valley.\"*" + courseB_collector_prog1_instruction: "This is Laurel the Adventurer! Can you + move her around and get gold?" + courseB_collector_prog2_instruction: "Four piles of gold! Collect all four." + courseB_collector_prog3_instruction: "How can Laurel collect all five piles + of gold using only one `E -->` block?" + courseB_maze_seq1_instruction: "Play with these blocks to see what they make + the bird do!" + courseB_maze_seq10_instruction: "Fix the bugs to get the bird to the pig." + courseB_maze_seq11_instruction: "It's all you! Get the bird to the pig." + courseB_maze_seq12_instruction: "Now get that pig any way you can!" + courseB_maze_seq2_instruction: "*\"A bug! Fix the code to get me to the pig.\"*" + courseB_maze_seq3_instruction: "*\"Fix the code to get me to the pig!\"*" + courseB_maze_seq4_instruction: "Add 2 blocks to get the bird to the pig." + courseB_maze_seq5_instruction: "Now try this puzzle from the start!" + courseB_maze_seq6_instruction: "Move one way, then another to get the bird + to the pig!" + courseB_maze_seq7_instruction: "Figure out what is missing and then add blocks + to get the bird to the pig!" + courseB_maze_seq8_instruction: "Your turn! What do you need to do to get the + bird to the pig?" + courseB_maze_seq9_instruction: "Challenge: Move around the TNT to get the bird + to the pig." + courseB_maze_seqCold_instruction: "Challenge: Debug this level by adding blocks + to get the bird to the pig!" + courseB_maze_seqOld_instruction: "Go around the TNT to get the bird to the + pig! " + courseB_playLab_events1_instruction: "See if you can figure out what each block + does." + courseB_playlab_events2_instruction: "Have Daisy the Dragon say something when + you click \"Run\"." + courseB_playlab_events3_instruction: "Use an event to make Daisy the Dragon + switch to a random mood when you click on her." + courseB_playlab_events4_instruction: "Knight time! Add an event so that the + knight moves toward the dragon when the left arrow is clicked." + courseB_playlab_events5_instruction: "Now add an event so that the knight runs + away from the dragon when you press the right arrow." + courseB_playlab_events6_instruction: "Help your knight get all of the flags!\r\n\r\nTo + do this, you'll need to add events to help the knight move up and down." + courseB_playlab_events7_instruction: "Make this game fun by setting the knight + to vanish when he runs into the dragon! Play a sound when they collide to + make it feel more real." + courseB_playlab_events8_instruction: "Use your imagination. What can you do + to make this game more fun?" + courseB_playlab_eventsFP_instruction: "Use your imagination. What can you do + to make this game more fun?" + courseB_playlab_eventsToolbox_instruction: "Finish by playing a sound and making + the knight vanish when he runs into the dragon!" + courseC_PlayLab_events1_instruction: "Make Jorge the Dog (actor 1) say \"Hi + there.\"" + courseC_PlayLab_events2_instruction: "Can you make Jorge (actor 1) say something, + then have Olive the Cat (actor 2) say something afterward?" + courseC_PlayLab_events3_instruction: "Can you write a program to make Jorge + (actor 1) move toward Olive the Cat?" + courseC_PlayLab_events4_instruction: "Can you write a program that makes Jorge + (actor 1) move to Olive the Cat, and have Olive say \"Hi there.\" when Jorge + reaches her?" + courseC_PlayLab_events5_instruction: "Can you write a program to make Octavia + say \"What's new?\" when she is clicked?" + courseC_PlayLab_events6_instruction: "Now, write a program to make Waddles + move around using the up / down / left / right keys to hit all of the targets!" + courseC_PlayLab_events7_instruction: "The `repeat forever` block allows you + to run code over and over forever. Use this block to move Chomp the Dino + (actor 2) up and down by 400 pixels forever." + courseC_PlayLab_events8_instruction: "Can you have Waddles (actor 1) say \"Ouch!\" + and play a \"hit\" sound if he runs into Chomp? \r\nWhen you're done, play + the game to make that happen." + courseC_PlayLab_events9_instruction: "Can you add a block to score a point + when Waddles (actor1) runs into Octavia (actor 3)? \r\nPlay the game and move + Waddles with the arrows until you score!" + courseC_PlayLab_eventsA_instruction: "Add blocks to the `when run` event to + change the background scene and the speed of Waddles.\r\n\r\nPlay the game + and move Waddles with the arrows until you score." + courseC_PlayLab_eventsFP_instruction: "Create your own story. When you're + done, click \"Finish\" to share with friends." + courseC_artist_prog1_instruction: "Play with the blocks in the toolbox to see + what they do!" + courseC_artist_prog2_instruction: "Drag blocks onto the screen to have the + artist draw over the grey lines in the picture. (Each line is 100 pixels long)" + courseC_artist_prog3_instruction: "Each side of the inner square is 100 pixels + and all of the angles are 90 degrees." + courseC_artist_prog4_instruction: "Finish Starla's rocket so she can chase + her pet." + courseC_artist_prog5_instruction: "Finish this tag by drawing a rectangle around + the outside.\r\n(The long sides are 200 pixels each and the short sides are + each 100 pixels)" + courseC_artist_prog6_instruction: "Draw this diamond with 200 pixel sides." + courseC_artist_prog7_instruction: "**Challenge:** This tag is a special one! Can + you figure out how to draw the outline?" + courseC_artist_prog8_instruction: "One more tag. This is a triangle for Pi.\r\n(Each + side is 150 pixels)" + courseC_collector_prog1_instruction: "Play around with the blocks to see if + you can help Laurel collect some treasure." + courseC_collector_prog2_instruction: "Move Laurel to the treasure, then use + `collect` to pick it up." + courseC_collector_prog3_instruction: "Order these blocks to collect the treasure + and solve the puzzle." + courseC_collector_prog4_instruction: "Put these blocks in order to collect + all of the treasure and solve the puzzle." + courseC_collector_prog5_instruction: "These blocks are in the wrong order. + Can you fix them?" + courseC_collector_prog6_instruction: "Reorder the blocks to collect all of + the treasure." + courseC_collector_prog7_instruction: "Use blocks from the toolbox to collect + all of the treasure." + courseC_collector_prog8_instruction: "*\"Keep up the good work! Help me collect + all of the treasure.\"*" + courseC_collector_prog9_instruction: "*\"Let's get all of the treasure!\"*" + courseC_collector_progA_instruction: "Help Laurel collect all of the treasure." + courseC_collector_progB_instruction: "Collect as many coins as you can to finish + the stage!" + courseC_harvester_loops1_instruction: "Use loops to pick all of the pumpkins." + courseC_harvester_loops10_instruction: "Collect all of the corn and all of + the pumpkins." + courseC_harvester_loops11_instruction: "Collect all of the corn and all of + the pumpkins." + courseC_harvester_loops2_instruction: "Can you combine two different loops + to move toward the pumpkins, then collect them all?" + courseC_harvester_loops3_instruction: "Collect all of the pumpkins." + courseC_harvester_loops4_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_harvester_loops5_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_harvester_loops6_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_harvester_loops7_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_harvester_loops8_instruction: "**Challenge:** Collect all of the corn + and all of the pumpkins." + courseC_harvester_loops9_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_maze_debugging1_instruction: "Fix the code to help get Skrat get to + the acorn." + courseC_maze_debugging10_instruction: "Debug this level by rearranging and + changing blocks to get me to the pig!" + courseC_maze_debugging2_instruction: "Use your debugging skills to get Skrat + to the acorn." + courseC_maze_debugging3_instruction: "Remove blocks to get Skrat to the acorn!" + courseC_maze_debugging4_instruction: "Someone has their directions mixed up! + Can you help?" + courseC_maze_debugging5_instruction: "Debug this level by rearranging and changing + blocks." + courseC_maze_debugging6_instruction: "Figure out what is wrong and get Skrat + to the acorn." + courseC_maze_debugging7_instruction: "**Challenge:** Debug this level by rearranging, + adding, and deleting blocks." + courseC_maze_debugging8_instruction: "Debug this level to get Skrat to the + acorn." + courseC_maze_debugging9_instruction: "Debug this level to get Skrat to the + acorn." + courseC_maze_loops1_instruction: "Can you get the bird to the pig using 5 of + the same kind of blocks?" + courseC_maze_loops10_instruction: "You are doing great! Keep it up!" + courseC_maze_loops11_instruction: "You are almost there! This time, choose + any path you like!" + courseC_maze_loops2_instruction: "Can you get the bird to the pig by creating + a loop that uses only one `move forward` block inside of a `repeat`?" + courseC_maze_loops3_instruction: "Solve this puzzle by creating a loop!" + courseC_maze_loops4_instruction: "In this puzzle, two `repeat` loops will help + you get the bird to the pig with the fewest number of blocks!" + courseC_maze_loops5_instruction: "*\"Get me to the pig as quickly as possible!\"*" + courseC_maze_loops6_instruction: "Loops even work with more than one block + inside! Can you loop this sequence?" + courseC_maze_loops7_instruction: "Use what you learned in other puzzles!" + courseC_maze_loops8_instruction: "Challenge: Combine ideas from the last few + puzzles to complete this level." + courseC_maze_loops9_instruction: "You are doing great! Keep it up!" + courseC_maze_programming1_instruction: "For this puzzle, drag all of the blocks + together and click \"Run\" to watch it go!" + courseC_maze_programming2_instruction: "Drag an extra `move forward` block + out of the toolbox to finish your code." + courseC_maze_programming3_instruction: "There is one extra block that is going + to cause the bird to crash. Throw it away by dragging it back to the toolbox." + courseC_maze_programming4_instruction: "Avoid TNT or feathers will fly!" + courseC_maze_programming5_instruction: "Avoid the TNT." + courseC_maze_programming6_instruction: "\"Keep calm and help me find the bad + pig. Otherwise I might get angry!\"" + courseC_maze_programming7_instruction: "**Challenge:** This code has a lot + of bugs. You'll need to remove some blocks and add others." + courseC_maze_programming8_instruction: "*\"Keep calm and help me find the bad + pig.\"*" + courseC_maze_programming8_predict1_instruction: "*\"Keep calm and help me find + the bad pig.\"*" + courseC_maze_programming9_instruction: "*\"Now, help me sneak up on the pig + any way you want to!\"*" + courseC_puppy_loops10_instruction: "You are doing great! Keep it up!" + courseC_puppy_loops11_instruction: "You are almost there! This time, choose + any path you like!" + courseC_puppy_loops8_instruction: "Challenge: Combine ideas from the last few + puzzles to complete this level." + courseC_puppy_loops8courseC_maze_loops8_instruction: "Challenge: Combine ideas + from the last few puzzles to complete this level." + courseC_puppy_loops9_instruction: "You are doing great! Keep it up!" + courseD_artist_binary1_instruction: "Use the blocks below to have the artist + draw \"01010101\" in binary in the first row." + courseD_artist_binary2_instruction: "Run this code to see how the artist uses + binary to draw this pattern." + courseD_artist_binary3_instruction: "Which of the binary strings below could + you loop 8 times to draw this image?" + courseD_artist_binary4_instruction: "Can you draw this pattern by looping just + three binary digits (0s and 1s)?" + courseD_artist_binary5_instruction: "Each binary string below represents one + row of this picture. \r\n\r\nCan you rearrange them so it draws a smiley face + instead of a frown?" + courseD_artist_binary6_instruction: "Which 6 digit binary string, repeated + 11 times, will draw this image?" + courseD_artist_binary7_instruction: "What is the shortest binary string that + you can repeat to draw this image?" + courseD_artist_binary8_instruction: "Finish the code to create this drawing." + courseD_artist_binary8_predict1_instruction: "Finish the code to create this + drawing." + courseD_artist_binaryFP_instruction: "Here's a higher resolution canvas to + draw on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we start to + get creative with the bits!" + courseD_artist_functions10_instruction: "This time, use lines of 8 hexagons + with 25 pixel sides." + courseD_artist_functions2_instruction: "This time, use the `draw a square` + function to create the glasses. \r\n" + courseD_artist_functions3_instruction: "You can make this drawing by adding + a repeat block." + courseD_artist_functions4_instruction: "Now that you can draw a star, try drawing + four stars!" + courseD_artist_functions5_instruction: "Draw only those three stars to finish + this puzzle." + courseD_artist_functions6_instruction: "Make this window by drawing a square, + then turning 90 degrees before drawing another, and so on." + courseD_artist_functions7_instruction: "Try solving this puzzle by creating + `draw a window` and calling it five times. Watch out for the door!" + courseD_artist_functions8_instruction: "Challenge: Create as many functions + as you think you need to make this drawing of 50 pixel squares." + courseD_artist_functions9_instruction: "Create this image using only the blocks + provided." + courseD_artist_nestedLoops1_instruction: "Draw a triangle to kickstart this + stage. \r\n(Each side is 100 pixels long and you'll need to turn 120 degrees + for each exterior angle.)" + courseD_artist_nestedLoops10_instruction: "Take the squares from before, but + this time only make 7 of them, and lay them out in a row." + courseD_artist_nestedLoops1a_instruction: "Now loop the triangle 6 times. " + courseD_artist_nestedLoops2_instruction: "This time, complete the puzzle with + the fewest number of blocks possible." + courseD_artist_nestedLoops3_instruction: "Use your new skills to quickly draw + the last row of windows for this building.\r\n\r\nThe windows are 20 pixel + squares, each 20 pixels apart." + courseD_artist_nestedLoops4_instruction: "Great! Do the same thing with these + circles.\r\n" + courseD_artist_nestedLoops5_instruction: "What happens if you also turn 90 + degrees between circles?" + courseD_artist_nestedLoops6_instruction: "Edit blocks within your existing + code to make this image." + courseD_artist_nestedLoops7_instruction: "Use what you've learned to make + this drawing.\r\n" + courseD_artist_nestedLoops8_instruction: "Using what you have learned in the + last couple of puzzles, build this image from the beginning." + courseD_artist_nestedLoops9_instruction: "**Challenge:** Can you figure out + how to make a picture like this?" + courseD_artist_nestedLoops9_predict1_instruction: "**Challenge:** Can you figure + out how to make a picture like this?" + courseD_artist_nestedLoopsFP_instruction: "Now it's your turn. Take the skills + you have learned and make something that you love!" + courseD_artist_nestedLoopsPre1_instruction: "Create a triangle to kickstart + this stage." + courseD_artist_ramp11_instruction: "Now make a square using Artist!" + courseD_artist_ramp12_instruction: "Use what you've learned to draw this triangle + inside of a square." + courseD_bee_conditionals1_instruction: "Check to see if there's a flower under + the cloud. If there's a flower, get nectar." + courseD_bee_conditionals10_instruction: "Collect all of the nectar and make + all of the honey." + courseD_bee_conditionals1_predict1_instruction: "Check to see if there's a + flower under the cloud. If there's a flower, get nectar." + courseD_bee_conditionals2_instruction: "Check underneath every cloud to see + if it is hiding a flower before you get nectar. \r\n" + courseD_bee_conditionals3_instruction: "Help the bee collect all of the nectar. + \r\n\r\nYou can only collect nectar from flowers, but you can check any space + to see if there is a flower." + courseD_bee_conditionals4_instruction: "Get all of the nectar using as few + blocks as possible." + courseD_bee_conditionals5_instruction: "Collect all of the nectar using as + few blocks as possible" + courseD_bee_conditionals6_instruction: "Some of these clouds might have honeycombs + under them. Be sure to check if a honeycomb is hiding behind each cloud!" + courseD_bee_conditionals7_instruction: "Use the `if/else` block to collect + nectar at flowers and make honey at honeycomb." + courseD_bee_conditionals7_predict2_instruction: "Use the `if/else` block to + collect nectar at flowers and make honey at honeycomb." + courseD_bee_conditionals8_instruction: "Collect nectar if there is a flower.\r\nOtherwise, + make honey (because there is a honeycomb)." + courseD_bee_conditionals9_instruction: "Collect all of the nectar or make all + the honey." + courseD_bee_debugging1_instruction: "Fix the error(s) to collect all of the + nectar." + courseD_bee_debugging2_instruction: "Fix the error(s) to collect all of the + nectar." + courseD_bee_debugging3_instruction: "Fix the error(s) to collect all of the + nectar and make all of the honey." + courseD_bee_debugging4_instruction: "Fix the error(s) to make all of the honey." + courseD_bee_debugging5_instruction: "Challenge: All of the commands that you + need are already here...now use your debugging skills to figure out how to + solve this puzzle." + courseD_bee_debugging6_instruction: "Challenge: Fix the errors to collect + all of the nectar and make all of the honey." + courseD_bee_debugging9_instruction: "Help the bee fix the code to get all the + nectar." + courseD_bee_nestedLoops1_instruction: "Help the bee collect all of the nectar." + courseD_bee_nestedLoops2_instruction: "This time, help the bee collect all + of the nectar using as few blocks as possible." + courseD_bee_nestedLoops2_predict1_instruction: "This time, help the bee collect + all of the nectar using as few blocks as possible." + courseD_bee_nestedLoops3_instruction: "Collect all of the nectar from each + flower." + courseD_bee_nestedLoops5_instruction: "Collect all of the nectar from each + flower and make honey at the honeycomb. " + courseD_bee_nestedLoops6_instruction: "Make all of the nectar." + courseD_bee_nestedLoops7_instruction: "Challenge: Figure out how to get all + of the nectar using only the blocks available." + courseD_bee_nestedLoops8_instruction: "Collect all of the nectar from each + flower and make honey at the honeycomb. " + courseD_bee_nestedLoops9_instruction: "Make all of the honey." + courseD_bee_nestedLoops9_predict2_instruction: "Make all of the honey." + courseD_collector_ramp10_instruction: "Help Laurel collect all of the treasure." + courseD_collector_ramp8_instruction: "Help Laurel collect all of the treasure." + courseD_collector_ramp9_instruction: "Help Laurel collect all of the treasure." + courseD_debugging_1_instruction: "Fix the error(s) to collect all of the nectar." + courseD_debugging_2_instruction: "Fix the error(s) to collect all of the nectar." + courseD_debugging_3_instruction: "Fix the error(s) to collect all of the nectar + and make all of the honey." + courseD_debugging_4_instruction: "Fix the error(s) to make all of the honey." + courseD_debugging_5_instruction: "Challenge: All of the commands that you need + are already here...now use your debugging skills to figure out how to solve + this puzzle." + courseD_debugging_6_instruction: "Challenge: Fix the errors to collect all + of the nectar and make all of the honey." + courseD_farmer_condLoops1_instruction: "Use conditionals to make sure that + you pick all of the corn, but don't disturb the stalks where nothing is growing + yet." + courseD_farmer_condLoops2_instruction: "Help the farmer collect both corn and + lettuce from the field." + courseD_farmer_condLoops3_instruction: "*\"Corn, lettuce, AND pumpkins! Help + me harvest them all.\"*" + courseD_farmer_condLoops4_instruction: "Help the farmer pick all of the lettuce + in each cluster before moving on to the next bunch." + courseD_farmer_condLoops5_instruction: "This field has clusters of corn, lettuce, + and pumpkins all growing together. Can you collect them all?" + courseD_farmer_condLoops6_instruction: "Can you figure out how to pick the + pumpkin? Make sure to collect all of the corn along the way!" + courseD_farmer_condLoops7_instruction: "Challenge: Collect all of the corn + and lettuce, then pick the pumpkin." + courseD_farmer_condLoops8_instruction: "Collect all of the corn and lettuce, + then pick the pumpkin." + courseD_farmer_condLoops9_instruction: "Collect all of the corn and lettuce, + then pick the pumpkin." + courseD_farmer_condLoops9_predict1_instruction: "Collect all of the corn and + lettuce, then pick the pumpkin." + courseD_farmer_conditionals1_instruction: "Move to the pile of dirt and use + the `remove` block to remove it." + courseD_farmer_conditionals10_instruction: "Flatten all of these piles using + as few blocks as possible. " + courseD_farmer_conditionals2_instruction: "Move to the hole and fill it with + six shovelfuls of dirt, using the `fill` block." + courseD_farmer_conditionals3_instruction: "Use as few blocks as possible to + solve this puzzle." + courseD_farmer_conditionals4_instruction: "Help the farmer remove this entire + pile using a `while` loop." + courseD_farmer_conditionals5_instruction: "Help me remove all of this dirt. + " + courseD_farmer_conditionals6_instruction: "Use the `while` loop to easily fill + all of the holes." + courseD_farmer_conditionals7_instruction: "Fill in the hole at the end of each + of these paths." + courseD_farmer_conditionals8_instruction: "Challenge: Fill all of these holes + using as few blocks as possible. " + courseD_farmer_conditionals9_instruction: "Flatten all of these piles using + as few blocks as possible. " + courseD_farmer_while1_instruction: "Move to the pile of dirt and use the `remove` + block to remove it." + courseD_farmer_while10_instruction: "Flatten all of these piles using as few + blocks as possible. " + courseD_farmer_while10_predict2_instruction: "Flatten all of these piles using + as few blocks as possible. " + courseD_farmer_while2_instruction: "Move to the hole and fill it with six shovelfuls + of dirt, using the `fill` block." + courseD_farmer_while3_instruction: "Use as few blocks as possible to solve + this puzzle." + courseD_farmer_while4_instruction: "Help the farmer remove this entire pile + using a `while` loop." + courseD_farmer_while4_predict1_instruction: "Help the farmer remove this entire + pile using a `while` loop." + courseD_farmer_while5_instruction: "Help me remove all of this dirt. " + courseD_farmer_while6_instruction: "Use the `while` loop to easily fill all + of the holes." + courseD_farmer_while7_instruction: "Fill in the hole at the end of each of + these paths." + courseD_farmer_while8_instruction: "Challenge: Fill all of these holes using + as few blocks as possible. " + courseD_farmer_while9_instruction: "Flatten all of these piles using as few + blocks as possible. " + courseD_maze_nestedLoops3_instruction: "Get the zombie to the sunflower using + the fewest number of blocks possible." + courseD_maze_nestedLoops4_instruction: "Get the zombie to the sunflower using + the fewest blocks possible! " + courseD_maze_nestedLoops5_instruction: "Get the zombie to the sunflower using + the fewest number of blocks possible!" + courseD_maze_nestedLoops6_instruction: "Get the zombie to the sunflower using + only the blocks available." + courseD_maze_ramp1_instruction: "For this puzzle, drag all of the blocks together + and click \"Run\" to watch it go!" + courseD_maze_ramp2_instruction: "Drag an extra `move forward` block out of + the toolbox to finish your code." + courseD_maze_ramp3_instruction: "There is one extra block that is going to + cause the bird to crash. Throw it away by dragging it back to the toolbox." + courseD_maze_ramp4_instruction: "Avoid TNT or feathers will fly!" + courseD_maze_ramp5_instruction: "Avoid the TNT." + courseD_maze_ramp6_instruction: "\"Keep calm and help me find the bad pig. + Otherwise I might get angry!\"" + courseD_maze_ramp7_instruction: "**Challenge:** Get the bird to the pig!" + courseD_maze_until1_instruction: "Get the angry bird to the pig." + courseD_maze_until10_instruction: "Help the zombie get to the sunflower." + courseD_maze_until10_predict2_instruction: "Help the zombie get to the sunflower." + courseD_maze_until2_instruction: "Now, use the `repeat until` loop to do the + same thing without specifying how many times to move forward and turn." + courseD_maze_until3_instruction: "Get the bird to the pig." + courseD_maze_until4_instruction: "Can you get the zombie to the sunflower using + only the blocks that are available?" + courseD_maze_until5_instruction: "Use the `if` block to help the zombie decide + when to turn, then get the zombie to the sunflower." + courseD_maze_until6_instruction: "Help the zombie get to the sunflower." + courseD_maze_until7_instruction: "Help the zombie get to the sunflower." + courseD_maze_until8_instruction: "Help the zombie get to the sunflower." + courseD_maze_until9_instruction: "**Challenge:** Avoid the chompers and help + the zombie get to the sunflower." + courseD_playLab_cond1_instruction: "Get Pegleg to the dragon to solve this + puzzle." + courseD_playLab_cond2_instruction: "Give Pegleg a point every time he makes + it to the dragon. " + courseD_playLab_cond3_instruction: "1) Make the dragon change between random + emotions every second. \r\n2) Make it so when Pegleg gets to the dragon, + he gets 2 points if the dragon is happy and 1 otherwise." + courseD_playLab_cond4_instruction: "Add some code so that the ninja (actor + 3) starts chasing Pegleg as soon as the game begins. End the game as a loss + if the ninja catches him." + courseD_playLab_cond5_instruction: "Add a `repeat forever` loop that continuously + checks if the score is greater than 5, then ends the game as a win when it + is." + courseD_playLab_cond6_instruction: "1) Slow the ninja down before you set + him to chase the pirate. \r\n\r\n2) If the pirate is greater than 225 pixels + down, set the ninja to **flee** the pirate. Otherwise, set the ninja to **chase** + the pirate. \r\n\r\n3) If the pirate is in the safe zone, wait one second, + then deduct a point as long as he stays beneath the octopus line." + courseD_playLab_cond6cloneForTest_instruction: "Testing" + courseD_playLab_condFP_instruction: "Now, build your own game to show off to + your friends!" + courseE_artist_concept1_instruction: "Recreate this image. " + courseE_artist_concept4_instruction: "Recreate this drawing using 13 blocks + or fewer." + courseE_artist_functions1_instruction: "Help the zombie draw glasses using + squares with sides of 100 pixels. \r\nThe bridge between the glasses is 75 + pixels long." + courseE_artist_functions10_instruction: "This time, use lines of 8 hexagons + with 25 pixel sides." + courseE_artist_functions2_instruction: "This time, use the `draw a square` + function to create the glasses. \r\n" + courseE_artist_functions3_instruction: "You can make this drawing by adding + a repeat block." + courseE_artist_functions4_instruction: "Now that you can draw a star, try drawing + four stars!" + courseE_artist_functions5_instruction: "Draw only those three stars to finish + this puzzle." + courseE_artist_functions6_instruction: "Make this window by drawing a square, + then turning 90 degrees before drawing another, and so on." + courseE_artist_functions7_instruction: "Try solving this puzzle by creating + `draw a window` and calling it five times. Watch out for the door!" + courseE_artist_functions8_instruction: "Challenge: Create as many functions + as you think you need to make this drawing of 50 pixel squares." + courseE_artist_functions9_instruction: "Create this image using only the blocks + provided." + courseE_artist_ramp11_instruction: "Now make a square using Artist!" + courseE_artist_ramp12_instruction: "Use what you've learned to draw this triangle + inside of a square." + courseE_bee_concept1_instruction: "Collect all of the nectar from each flower." + courseE_bee_concept2_instruction: "Help the bee make all of the honey. You + can only make honey at a honeycomb, but you can check any space to see if + there is a honeycomb." + courseE_bee_concept3_instruction: "Collect all of the nectar using as few + blocks as possible." + courseE_bee_concept4_instruction: "Uh oh! The bee is not sure if he should + collect nectar or make honey. Can you help him out?" + courseE_bee_concept5_instruction: "Help the bee collect the nectar from the + flowers?" + courseE_bee_functions1_instruction: "Collect all the nectar from each flower." + courseE_bee_functions10_instruction: "Solve this function by creating a function + to turn, move forward and make all of the honey, then return the bee to where + it started and turn back." + courseE_bee_functions2_instruction: "Use the `get 2 nectar` function to collect + the nectar from each flower." + courseE_bee_functions3_instruction: "Build the `get 5` function to use in this + puzzle." + courseE_bee_functions4_instruction: "Use the `move and get nectar` function + to collect all of the nectar." + courseE_bee_functions5_instruction: "Now write the function to collect nectar + from the flowers." + courseE_bee_functions6_instruction: "Create a function and call it to collect + nectar at each flower and make honey at each honeycomb." + courseE_bee_functions7_instruction: "Create your own function that goes down + a path, gets nectar, makes honey, and then returns the bee to the top of the + path. Collect all the nectar and make all the honey!" + courseE_bee_functions8_instruction: "Create a function that collects all of + the nectar from each flower." + courseE_bee_functions9_instruction: "Create a function to collect all of the + nectar from each flower." + courseE_collector_ramp10_instruction: "Help Laurel collect all of the treasure." + courseE_collector_ramp8_instruction: "Help Laurel collect all of the treasure." + courseE_collector_ramp9_instruction: "Help Laurel collect all of the treasure." + courseE_farmer_concept1_instruction: "Can you write a program that fills these + holes until the ground is even?" + courseE_farmer_concept2_instruction: "Collect all of the pumpkins." + courseE_farmer_concept3_instruction: "Fill in the hole at the end of each of + these paths." + courseE_farmer_concept4_instruction: "Now let's go one level deeper! We've + nested that whole block of code into another loop, but you need to get the + artist back in place to draw the next line. Which of these code blocks can + you place at the end of the outermost loop to draw the whole grid?" + courseE_farmer_functions1_instruction: "Help the farmer get to the pumpkin + and pick it." + courseE_farmer_functions10_instruction: "No one knows what these sprouts will + become. Use `if` statements to write the code to check and harvest each one. " + courseE_farmer_functions10b_instruction: "Figure out which function to use + and which one to delete, then solve this puzzle!" + courseE_farmer_functions1a_instruction: "Now help the farmer pick the corn, + lettuce, **and** pumpkin." + courseE_farmer_functions2_instruction: "Now, there will be a different number + of pumpkins each time you run the program. \r\n\r\nUse the `while` block + to pick only as many pumpkins as you need." + courseE_farmer_functions2a_instruction: "We're going to check lots of squares + for crops in the next few puzzles. Let's move everything into a function + to make it easier." + courseE_farmer_functions2aALT_instruction: "We're going to check lots of squares + for crops in the next few puzzles. Let's move everything into a function + to make it easier." + courseE_farmer_functions2b_instruction: "Help the farmer pick the corn, lettuce, + and pumpkin." + courseE_farmer_functions3_instruction: "What happens when the paths to the + pumpkins are all different lengths? \r\n\r\nGet them all with as few blocks + as possible." + courseE_farmer_functions3b_instruction: "Now help the farmer pick the corn, + lettuce, **and** pumpkin." + courseE_farmer_functions3c_instruction: "Which set of blocks helps the farmer + check for produce and pick it when it is available? Drag that code into a + function, then call your function from inside the `while path ahead` loops + (after the `move forward` block)." + courseE_farmer_functions4_instruction: "Great! Now you have code that will + work to get pumpkins from any size path.\r\n\r\nLet's drag that code into + a function so we can use it in lots of ways...but first use it to solve this + puzzle again." + courseE_farmer_functions4b_instruction: "Use your new function to solve this + puzzle." + courseE_farmer_functions5_instruction: "How can you change your program to + get this function to work for each of these paths?" + courseE_farmer_functions5a_instruction: "How can you change your program to + get this function to work for each of these paths?" + courseE_farmer_functions5b_instruction: "The crops are now growing in clusters. Add + some new `while` loops to your function to make sure you get all of the produce." + courseE_farmer_functions5c_instruction: "Your function will come in handy here." + courseE_farmer_functions6_instruction: "*\"Lettuce try something new!\"*\r\n\r\nHere's + some code to collect all of the lettuce. Move it into a function so we can + use it later." + courseE_farmer_functions6b_instruction: "Pick all of the produce." + courseE_farmer_functions6c_instruction: "What do you need to add this program + to collect all of the produce?" + courseE_farmer_functions7_instruction: "Use your functions to solve this puzzle." + courseE_farmer_functions7b_instruction: "Make a second function that lets the + farmer get all of the produce down a path, then brings her back to where she + began." + courseE_farmer_functions8_instruction: "**Challenge:** Solve this puzzle with + as few blocks as possible." + courseE_farmer_functions8b_instruction: "**Challenge:** Get the farmer to the + pumpkin and collect all of the lettuce and corn along the way. " + courseE_farmer_functions9_instruction: "Use conditionals to simplify your program." + courseE_maze_ramp1_instruction: "For this puzzle, drag all of the blocks together + and click \"Run\" to watch it go!" + courseE_maze_ramp2_instruction: "Drag an extra `move forward` block out of + the toolbox to finish your code." + courseE_maze_ramp3_instruction: "There is one extra block that is going to + cause the bird to crash. Throw it away by dragging it back to the toolbox." + courseE_maze_ramp4_instruction: "Avoid TNT or feathers will fly!" + courseE_maze_ramp5_instruction: "Avoid the TNT." + courseE_maze_ramp6_instruction: "\"Keep calm and help me find the bad pig. + Otherwise I might get angry!\"" + courseE_maze_ramp7_instruction: "**Challenge:** Get the bird to the pig!" + courseE_playLab_exampleProject2_instruction: "Here's all of your code to choose + a card - try adding some other fun features!" + courseE_playLab_scaffold1_instruction: "Choose a background and map, and pick + an actor to be your game's hero." + courseE_playLab_scaffold2_instruction: "Use event handlers and actions to make + your hero move.\r\n" + courseE_playLab_scaffold3_instruction: "Add two or more additional actors to + your game and make them move." + courseE_playLab_scaffold4_instruction: "Find some interesting ways to change + the score in your game." + courseE_playLab_scaffold5_instruction: "Now spend some time making sure the + game works the way you want. Try including a way to win or lose your game." + courseE_playLab_scaffold6_instruction: "You've finished! Now you can play + your game or share it with your friends and classmates!" + courseE_video_createFunctions_instruction: "We don't have a video for creating + functions, yet. This is a placeholder." + courseF_artist_for1_instruction: "Experiment with the `for` loop and play with + the `counter` variable." + courseF_artist_for10_instruction: "Free Play: Try using the `counter` variable + with other drawing elements to make magical images like this one." + courseF_artist_for2_instruction: "Create this stack of triangles that goes + from 50 pixel to 100 pixel sides." + courseF_artist_for3_instruction: "These triangles go from 20 pixel sides to + 200 pixel sides, and each triangle is 20 pixels larger than the last. " + courseF_artist_for4_instruction: "These squares start at 15 pixels long. The + largest is 300 pixels long, and each square is 15 pixels larger than the last. + " + courseF_artist_for5_instruction: "Just one little change to the code from the + last image can create this drawing. Can you figure out what that change is?" + courseF_artist_for6_instruction: "Try using some of the code from the last + level, but turning 89 degrees to create this twisted square spiral." + courseF_artist_for7_instruction: "Make three small changes to the code from + the last level to get this!" + courseF_artist_for8_instruction: "Take the angle down to 72 degrees to get + a spiraled pentagon." + courseF_artist_for9_instruction: "Use the counter inside the `set alpha` block + to get this faded center." + courseF_artist_fwp1_instruction: "Edit the function 'draw a square' to find + bugs." + courseF_artist_fwp2_instruction: "Edit the function to accept a parameter called + `length`." + courseF_artist_fwp2_predict1_instruction: "Edit the function to accept a parameter + called `length`." + courseF_artist_fwp3_instruction: "Create a function called 'draw a square' + and use it to outline these four boxes using parameters." + courseF_artist_fwp4_instruction: "Edit this function to add a parameter for + the number of sides in your polygon." + courseF_artist_fwp5_instruction: "Use the function from the last puzzle to + draw this series of shapes. " + courseF_artist_fwp6_instruction: "Challenge: Edit `draw a spiral edge` to use + `length` and `sides` parameters, then recreate these shapes." + courseF_artist_fwp7_instruction: "Finish off the `draw a spiral edge` function + to also ask for a minimum length for the center of the spiral." + courseF_artist_fwp8_instruction: "Can you figure out how to make this drawing + using the function that you just created?" + courseF_artist_fwp9_instruction: "Freeplay: Draw something awesome! Play with + the pen width to see how different your drawings look!" + courseF_artist_variables1_instruction: "Let's draw an equilateral triangle + that is exactly 50 pixels long on each side." + courseF_artist_variables10_instruction: "Here's your code from the last puzzle. Try + editing the variable in other ways. " + courseF_artist_variables2_instruction: "Now draw three of those triangles right + next to each other. " + courseF_artist_variables3_instruction: "Move the length of 50 into a variable + so we can use it in the next few puzzles." + courseF_artist_variables4_instruction: "Now, use the `length` variable to have + the artist jump forward and down by `length` pixels between triangles." + courseF_artist_variables5_instruction: "Add another set of loops at the end + of your code to add three more triangles. This time, move forward and up!" + courseF_artist_variables6_instruction: "Now make the triangles to be 60 pixels + wide, with 60 pixel jumps. " + courseF_artist_variables6a_instruction: "Build this design where the squares + have 80 pixel sides and the artist jumps 80 pixels over and down between each + one." + courseF_artist_variables7_instruction: "Draw a triangle with 150 pixels sides. + " + courseF_artist_variables8_instruction: "Rebuild the triangle code from the + last puzzle, but this time use the `set length to` block to reset the `length` + variable to `length`+10 at the end of each loop iteration." + courseF_artist_variables9_instruction: "See what happens when you repeat the + code from the last puzzle 30 times instead of only 3! Feel free to make your + lines any color or pattern for some extra zest." + courseF_artist_variablesFP_instruction: "**Freeplay:** Take what you've learned + and make your own drawing. " + courseF_artist_variables_10_instruction: "Here's your code from the last puzzle. Try + editing the variable in other ways. " + courseF_artist_variables_2_instruction: "Now use another loop to draw three + of those triangles right next to each other. \r\nYou can nest the code from + your last puzzle inside.\r\n" + courseF_artist_variables_5_instruction: "Add another set of loops at the end + of your code to add three more triangles. This time, move forward and up!" + courseF_artist_variables_6_instruction: "OOPS! We actually need the triangles + to be 60 pixels wide, with 60 pixel jumps. \r\nAren't you glad you're using + a variable?" + courseF_artist_variables_6a_instruction: "Build this design where the squares + have 80 pixel sides and the artist jumps 80 pixels over and down between each + one." + courseF_artist_variables_9_instruction: "See what happens when you repeat the + code from the last puzzle 30 times instead of only 3!\r\n\r\nFeel free to + make your lines any color or pattern for some extra zest." + courseF_artist_variables_FP_instruction: "**Freeplay:** Take what you've learned + and make your own drawing. \r\n\r\nHow can you use variables with squares, + pentagons, or hexagons?" + courseF_bee_for1_instruction: "Collect the nectar from each flower using the + fewest blocks possible." + courseF_bee_for10_instruction: "**Challenge:** Take what you've learned about + `for` loops and try to solve this problem. " + courseF_bee_for11_instruction: "What should your increment be to collect 15, + then 12, then 9, 6, 3 nectar?" + courseF_bee_for2_instruction: "Write the code to help the bee collect all of + the nectar.\r\n" + courseF_bee_for3_instruction: "Try this puzzle using the `for` loop and the + `counter` variable to see how much shorter your code becomes." + courseF_bee_for4_instruction: "Help the bee collect all of the nectar." + courseF_bee_for5_instruction: "Use the `counter` variable twice to solve this + puzzle." + courseF_bee_for6_instruction: "Try gathering this nectar by counting down from + 5 to 1 by 1." + courseF_bee_for7_instruction: "Try collecting these flowers using an increment + of 2." + courseF_bee_for8_instruction: "You've got this! What should your increment + be to collect 3, 6, 9, 12, 15 nectar?" + courseF_bee_for9_instruction: "Use the `counter` variable to navigate this + garden with the fewest number of blocks possible." + courseF_bee_fwp2_instruction: "Pull this code into a function, then call the + function to check this row for nectar." + courseF_bee_fwp3_instruction: "Let's see if the function makes collecting + these three rows of nectar any easier." + courseF_bee_fwp4_instruction: "Add a `length` parameter to the function so + that it will still work when the row is a different length." + courseF_bee_fwp5_instruction: "Use this function to collect the nectar." + courseF_bee_fwp6_instruction: "Build a short and sweet solution to this puzzle." + courseF_bee_fwp7_instruction: "**Challenge:** Modify your function to make + honey as well." + courseF_bee_fwp8_instruction: "Use your new function to solve this spiral." + courseF_bee_fwp9_instruction: "Use your new function to solve this puzzle." + courseF_bee_fwp9_predict1_instruction: "Use your new function to solve this + puzzle." + courseF_playlab_variables0_instruction: "This is Pirate Pegleg. He's awfully + hard to understand these days!" + courseF_playlab_variables1_instruction: "This is Pirate Pegleg. He's awfully + hard to understand these days!" + courseF_playlab_variables1a_instruction: "Variables can be used to store text + that you want to use later. Have Kiki, the soccer player, scream \"Goal!\" + by assigning that text to the `shout` variable." + courseF_playlab_variables2_instruction: "Now, decode Pirate Pegleg's speech + by changing the value of the variables in just two places! \r\n" + courseF_playlab_variables2a_instruction: "Now, decode Pirate Pegleg's speech + by changing the value of the variables in just two places! \r\n" + courseF_playlab_variables2b_instruction: "Insert the variable `color` into + the middle of a sentence by putting it into the empty slot in the `join` block." + courseF_playlab_variables3_instruction: "The `ask` block will automatically + store whatever the user answers into the variable of your choice." + courseF_playlab_variables3b_instruction: "Help Kiki have a conversation with + Brian by using the variable `A1` in all of the places where age `12` should + be used. " + courseF_playlab_variables4_instruction: "Can you find the correct variable + in the toolbox to fill in the slot?" + courseF_playlab_variables4b_instruction: "Put the variables in the correct + places to create this conversation." + courseF_playlab_variables5_instruction: "Can you find the correct variable + in the toolbox to fill in the slot?" + courseF_playlab_variables5b_instruction: "Put all of the variables in the correct + place so that Pegleg's story makes sense." + courseF_playlab_variables6b_instruction: "We have provided some starter questions + and variables for you. Join them together and put them in the title screen + to make a fun story." + courseF_playlab_variables7b_instruction: "Create some questions and weave the + answers together into your very own story." + courseF_playlab_variables8b_instruction: "Use what you've learned to create + an improv scene between the actors." + course_playlab_variables1_instruction: "This is Pirate Pegleg. He's awfully + hard to understand these days!" + course_playlab_variables2_instruction: "Now, decode Pirate Pegleg's speech + by changing the value of the variables in just two places! \r\n" + course_playlab_variables3_instruction: "Now, decode Pirate Pegleg's speech + by changing the value of the variables in just two places! \r\n" + coursef_explore_CYOA_Witch_instruction: "You can do whatever you want in play + lab! Here's an example of choose your own adventure story in play lab." + coursef_explore_playlab2_instruction: "You can do whatever you want in play + lab! Here's an example of story in play lab." + coursef_explore_playlab_cat_game_instruction: "You can do whatever you want + in play lab! Here's an example of game you can make." + drawings!_instruction: "Draw the equilateral triangle - all the sides are the + same!" + eventsIntro_instruction: "Need a better playlab/events combo" + frozen circle function in circle_instruction: "Now let's create 20 overlapping + circles, turning 18 degrees between each circle." + frozen circle function with parameter_instruction: "Here's a ”Create circle” + block that can make circles of different sizes. Can you use this to create + a small circle of size 5 and a larger circle of size 10?" + frozen circle function_instruction: "Use the new “Create a circle” block to + create 10 overlapping circles. Don't forget to jump forward between circles." + frozen circle_instruction: "A circle is a special shape. Can you figure out + what number to replace the question marks with to draw a circle?" + frozen cross rotate dense_instruction: "Let's repeat it 90 times! How many + times does 90 go into 360? Hint: It's a really small number." + frozen cross rotate_instruction: "Now try repeating it 10 times. How many degrees + do you need to turn between each line?" + frozen cross_instruction: "Wrap a “Repeat” block around these commands to create + a plus sign. Did you notice Elsa can move forward and backward?" + frozen diamond mini snowflake_instruction: "Did you know every snowflake is + a different shape? Let's create a new snowflake by using another “Repeat\" + block to repeat a parallelogram 4 times, turning right by 90 degrees between + each parallelogram." + frozen diamond snowflake_instruction: "Now, let's create a new snowflake by + using the repeat block to repeat a parallelogram 10 times, turning right by + 36 degrees between each one." + frozen diamond_instruction: "Use a repeat around these blocks to create a parallelogram. + It's just like a rectangle but has different angles. This one has 60 degree + and 120 degree angles instead of all 90 degree angles." + frozen freeplay_instruction: "You've officially become a master artist! Create + a winter wonderland." + frozen line_instruction: "Hi! I'm Elsa of Arendelle. Help me create a single + line." + frozen perpendicular_instruction: "Now let's see if we can create two lines + that are at a 90 degree angle to each other. You will need to use the \"Turn\" + block as well as the \"Move\" block." + frozen snowflake branch_instruction: "Try using the ”Create a snowflake branch” + block to create three branches, which starts to look like a snowflake." + frozen snowflake full_instruction: "Now let's repeat it 8 times to make a + beautiful snowflake!" + frozen snowflower_instruction: "Intricate snow patterns can be created with + very simple shapes. Can you make a pattern by repeating 5 circles of size + 5 and 5 circles of size 10?" + frozen square iterative_instruction: "It seems like we're halfway to making + a square. Let's put 4 lines together to create a square." + frozen square loop 3x_instruction: "Let's create three squares, turning after + each square. Be sure to turn by 120 degrees before each new square." + frozen square loop_instruction: "Hi, I’m Anna of Arendelle! Let’s make a square + with the “Repeat” block, which uses fewer blocks. How many times (???) should + the “Repeat” block loop the blocks inside it to make a square?" + frozen square snowflake_instruction: "Can you create a snowflake using the + “Repeat” block to make a square 10 times, and the “Turn” block to turn 36 + degrees between each square?" + grade1_adventurer_loops1_instruction: "Four piles of gold! Collect all four." + grade1_adventurer_loops10_instruction: "Help me get all of the gold from this + cave." + grade1_adventurer_loops2_instruction: "How can Laurel collect all five piles + of gold using only one `E -->` block?" + grade1_adventurer_loops3_instruction: "Can you fix Laurel's path to get all + of this gold?" + grade1_adventurer_loops4_instruction: "Add to the code from the last puzzle + to get all of the gold. " + grade1_adventurer_loops5_instruction: "What should you add to this code to + get all of the gold?" + grade1_adventurer_loops6_instruction: "Write the code to get all of this gold." + grade1_adventurer_loops7_challenge_instruction: "**Challenge: ** The gold goes + all the way down these stairs! Write the code to help me get it all." + grade1_adventurer_loops8_challenge_instruction: "Challenge: Try this staircase + now! It has an extra spike at the end you'll have to climb." + grade1_adventurer_loops9_instruction: "Help me get the gold from this deep + valley." + grade1_adventurer_loopsFP_instruction: "Eureka! Collect as much gold as you + can!" + grade1_adventurer_loopsPre_instruction: "This is Laurel the Adventurer! Can + you move her around and get gold?" + grade1_artist_loops1_instruction: "The Artist is trying to draw a line six + times, but can't get it right. Can you help?" + grade1_artist_loops2_instruction: "Help the artist draw a line 7 times to make + a garden wall." + grade1_artist_loops3_instruction: "Now we need to get the soil ready to plant. + Find the bugs in the code and help the artist prepare the ground. " + grade1_artist_loops4_instruction: "Time to fix the stairs! Repeat this pattern + five times so the artist can reach the top of the bushes." + grade1_artist_loops5_instruction: "Behind the bushes there is a beautiful vine + full of flowers. Can you climb the vine and see where it goes?" + grade1_artist_loops6_instruction: "**Challenge:** It's a hidden garden! Let's + walk around." + grade1_artist_loops7_instruction: "The flowers down here are so pretty. Let's + take a closer look." + grade1_artist_loops7a_instruction: "**Challenge:** Lovely! Let's take a walk + around the garden." + grade1_artist_loops7b_instruction: "Time to head home. Can you fix this ladder + to help the artist get down?" + grade1_artist_loops8_instruction: "Let's take the short way home, over the + pond. Can you help the artist stay on the stones?" + grade1_artist_loops9_instruction: "I still need a story for this puzzle" + grade1_artist_loopsFP_instruction: "Use what you have learned to draw a picture + of what you think the artist saw when he got home." + grade1_maze_sequence1_instruction: "A bug! Fix the code to get me to the pig." + grade1_maze_sequence10_instruction: "Move me around the TNT to get to the pig." + grade1_maze_sequence2_instruction: "Fix the code to get me to the pig!" + grade1_maze_sequence3_instruction: "Add 2 blocks to get the bird to the pig." + grade1_maze_sequence4_instruction: "Now try this puzzle from the start!" + grade1_maze_sequence5_instruction: "Move one way, then another to get me to + the pig!" + grade1_maze_sequence6_instruction: "Figure out what is missing and then add + blocks to get me to the pig!" + grade1_maze_sequence7_instruction: "Your turn! What do you need to do to get + the bird to the pig?" + grade1_maze_sequence8_instruction: "Debug this level by adding blocks to get + me to the pig!" + grade1_maze_sequence9_instruction: "Go around the TNT to get me to the pig! + " + grade1_maze_sequenceA_instruction: "Challenge: Move me around the TNT to get + to the pig." + grade1_maze_sequenceB_instruction: "Fix the bugs to get the bird to the pig." + grade1_maze_sequenceC_instruction: "It's all you! Get the bird to the pig." + grade1_maze_sequenceD_instruction: "Now head any which way to get that pig!" + grade1_playlab_events1_instruction: "This game is called \"Play Lab\". See + if you can figure out what each block does." + grade1_playlab_events1a_instruction: "Make your robot say \"Hello!\" when the + button is clicked." + grade1_playlab_events2_instruction: "This program makes Robin fly. Can you + get her to vanish when you click her?" + grade1_playlab_events2a_instruction: "Edit the code so that when the second + bird is clicked, your program plays a sound!" + grade1_playlab_events3_instruction: "This program makes Robin fly. Can you + make the robot jump when you press the up button?\r\n" + grade1_playlab_events3a_instruction: "When the third bird is clicked, the background + should change to a city. Can you add code to make this happen?" + grade1_playlab_events4_instruction: "Add a block to make Robin vanish when + she collides with the robot." + grade1_playlab_events4a_instruction: "Add code to make something happen when + the fourth bird is clicked. Be creative!" + grade1_playlab_events5_instruction: "Add a block to the 'when run' event + that starts the dragon flying." + grade1_playlab_events5a_instruction: "About My Robot Project! Write code so + that clicking on each bird shows a new fact about your robot." + grade1_playlab_events6_instruction: "Add a block to the 'when actor 1 clicked' + event that makes the dragon return to the middle of the screen." + grade1_playlab_events7_instruction: "Add a block so that when you push the + left arrow button, the knight surges toward the dragon." + grade1_playlab_events8_instruction: "Add a block so that when the knight collides + with the dragon, it plays a sound." + grade1_playlab_events9 RYAN COPY_instruction: "Now, have Robin wait a second, + then come back after she vanishes." + grade1_playlab_events9_instruction: "Now, add a block to keep score each time + the knight hits the dragon." + grade1_playlab_eventsFP_instruction: "Use your imagination. What can you do + to make this game more fun?" + grade1_sequence_pre_instruction: "Play with these blocks to see what they make + the bird do!" + grade1_video_frustrationRainbow_instruction: "This video describes the rainbow + of frustration and introduces persistence." + grade2_CaringForNewPet_0_instruction: "For this puzzle, drag all of the blocks + together and click \"Run\" to watch it go!" + grade2_CaringForNewPet_1_instruction: "Drag an extra `move forward` block out + of the toolbox to finish your code." + grade2_CaringForNewPet_10_instruction: "Get me to the pig!" + grade2_CaringForNewPet_11_instruction: "\"Keep calm and help me find the bad + pig.\"" + grade2_CaringForNewPet_2_instruction: "\"This pig is ruffling my feathers.\"\r\n\r\nThere + is one extra block that is going to cause the bird to crash. Throw it away + by dragging it back to the toolbox." + grade2_CaringForNewPet_2courseC_maze_programming3_instruction: "There is one + extra block that is going to cause the bird to crash. Throw it away by dragging + it back to the toolbox." + grade2_CaringForNewPet_3_instruction: "\"Trace the path and lead me to the + silly pig. Avoid TNT or feathers will fly!\"" + grade2_CaringForNewPet_3D_instruction: "\"Follow this path to get me to the + pig!\"" + grade2_CaringForNewPet_4_instruction: "\"Keep calm and help me find the bad + pig. Otherwise I might get angry!\"" + grade2_CaringForNewPet_5_instruction: "Get me to the pig!" + grade2_CaringForNewPet_6_instruction: "Challenge: Guide me to the green evilness! + (Watch out for TNT)" + grade2_CaringForNewPet_7D_instruction: "Challenge: This code has a lot of bugs. + You'll need to remove blocks and add blocks." + grade2_MakeDogTag_1_instruction: "Drag blocks onto the screen to have the artist + draw over the grey lines in the picture. (Each line is 100 pixels long)" + grade2_MakeDogTag_10_instruction: "Now, draw anything you like!" + grade2_MakeDogTag_2_instruction: "This spaceship needs a window!\r\n\r\nEach + side of the inner square is 100 pixels and all of the angles are 90 degrees." + grade2_MakeDogTag_3_instruction: "\"Oh no! Starla's pet alien just flew away! + Let's help the spacewoman!\"\r\n\r\nFinish Starla's rocket so she can chase + her pet." + grade2_MakeDogTag_4_instruction: "Finish this tag by drawing a rectangle around + the outside.\r\n(The long sides are 200 pixels each and the short sides are + each 100 pixels)" + grade2_MakeDogTag_5_instruction: "\"Now a tag for Belle!\"\r\n\r\nDraw this + diamond with 200 pixel sides." + grade2_MakeDogTag_6_instruction: "Challenge: This tag is a special one! Can + you figure out how to draw the outline?" + grade2_MakeDogTag_7_instruction: "One more tag. This is a triangle for Pi.\r\n(Each + side is 150 pixels)" + grade2_MakeDogTag_8_instruction: "Now let's connect a bunch of V's together + in a loop." + grade2_MakeDogTag_9_instruction: "Rebuild the code from the last puzzle, but + this time, add a left turn of 30 degrees inside the loop. Now, repeat it 24 + times instead of 8." + grade2_MakeDogTag_BFP_instruction: "\"Hi, I'm an artist. You can write code + to make me draw almost anything.\"\r\n\r\nPlay with the blocks in the toolbox + to see what they do!" + grade2_MakeDogTag_FP_instruction: "Freeplay: What shape will you make the tag + for your pet?" + grade2_PuppyLoops_1_instruction: "Can you get me to the pig using 5 of the + same kind of blocks?" + grade2_PuppyLoops_10_instruction: "My teacher says that I should finish what + I start!\r\n\r\nHelp me finish my pinwheel. Can you figure out what's wrong?" + grade2_PuppyLoops_2_instruction: "Can you get to the pig by creating a loop + that uses only one `move forward` block inside of a `repeat`?" + grade2_PuppyLoops_3_instruction: "Get me to the pig! Solve this puzzle by creating + a loop!" + grade2_PuppyLoops_4_instruction: "In this puzzle, two `repeat` loops will help + you get to the pig with the fewest number of blocks!" + grade2_PuppyLoops_5_instruction: "Can you figure out the fastest way to get + me to the pig?" + grade2_PuppyLoops_6_instruction: "Loops even work with more than one block + inside! Can you loop this sequence to get me to the pig?" + grade2_PuppyLoops_7_instruction: "Use what you learned to get me to the sunflower!" + grade2_PuppyLoops_8_instruction: "This code for the cat's whiskers is wrong. + \r\n\r\nFix this code to draw whiskers that are all the same length." + grade2_PuppyLoops_9_instruction: "Looks like the C in code is drawn backwards!\r\n\r\nCan + you make it look like a C again?" + grade2_collector_10_instruction: "You're almost done! Collect as many pieces + of treasure as you can to finish the stage!" + grade2_collector_2_instruction: "Move Laurel to the gold, then use `collect` + to pick it up." + grade2_collector_3_instruction: "Put these blocks in order to collect all of + the gold and solve the puzzle." + grade2_collector_4_instruction: "Sequence matters! The blocks you need are + already in the workspace, but not connected. Order these blocks to solve + the puzzle." + grade2_collector_5_instruction: "These blocks are in the wrong order. Can you + fix them?" + grade2_collector_6_instruction: "Reorder the blocks to collect all of the treasure." + grade2_collector_7_instruction: "Challenge puzzle! Use blocks from the toolbox + to collect all of the treasure." + grade2_collector_8_instruction: "\"Keep up the good work! Help me collect all + of the coins.\"" + grade2_collector_9_instruction: "*\"Let's get all of the coins!\"*" + grade2_collector_9a_instruction: "**Challenge:** Grab all of the coins." + grade2_collector_A_instruction: "Help Laurel collect all of the treasure." + grade2_collector_pre1_instruction: "\"Hi, I'm Laurel. Today I'm searching + for treasure at the dog park!\" \r\n\r\nPlay around with the blocks to see + if you can help Laurel collect some gold." + grade2_maze_debuggingFP_instruction: "\"Now, help me sneak up on the pig any + way you want to!\"" + grade2_maze_debuggingPre_instruction: "Play with these blocks to see what they + make the bird do!" + grade2_maze_intro10_instruction: "Solve this puzzle." + grade2_maze_intro2_instruction: "Welcome to Code Studio! Here you will learn + to use blocks to build programs. Press `Run` to run a program now!" + grade2_maze_intro3_instruction: "The `workspace` is where you will create all + of your programs. Can you guess what this program does? Press the “Run” button + to find out." + grade2_maze_intro4_instruction: "Drag a block from the toolbox into the workspace. + Connect it to the other blocks." + grade2_maze_intro6_instruction: "That’s it! Now we’re ready to try to solve + a few puzzles. " + grade2_maze_intro7_instruction: "This time, try something a bit more challenging." + grade2_maze_intro8_instruction: "This is a challenge puzzle. It is meant to + be hard and will probably take you a couple of tries to solve. If you don’t + solve it after several tries, don’t worry! It will be in the Play Zone at + the end of the stage and you can try it again when you’ve had more practice." + grade2_maze_intro9_instruction: "Solve this puzzle." + grade2_playlab_project_1_instruction: "Now, write a program to make Waddles + move around using the up / down / left /right keys to hit all of the targets!" + grade2_playlab_project_2_instruction: "The `repeat forever` block allows you + to run code over and over forever. Can you attach blocks to move Chomp the + Dino (actor 2) up and down forever?" + grade2_playlab_project_3_instruction: "Can you have Waddles (actor 1) say \"Ouch!\" + and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen you're done, + play the game to make that happen." + grade2_playlab_project_4_instruction: "Can you add a block to score a point + when Waddles runs into Octavia (actor 3)? \r\nPlay the game and move Waddles + with the arrows until you score!" + grade2_playlab_project_5_instruction: "Add blocks to the `when run` event to + change the background and the speed of Waddles.\r\n\r\nPlay the game and move + Waddles with the arrows until you score." + grade2_playlab_project_6_instruction: "Create your own story. When you're + done, click \"Finish\" to share with friends." + grade2_puppy_loops2_instruction: "Can you get to the pig by creating a loop + that uses only one `move forward` block inside of a `repeat`?" + grade2_puppy_loops3_instruction: "\"Get me to the pig!\"\r\n\r\n Solve this + puzzle by creating a loop!" + grade2_puppy_loops4_instruction: "In this puzzle, two `repeat` loops will help + you get to the pig with the fewest number of blocks!" + grade2_puppy_loops5_instruction: "\"Get me to the pig as quickly as possible!\"" + grade2_puppy_loops6_instruction: "\"This pig is ruffling my feathers!\"\r\n\r\nLoops + even work with more than one block inside! Can you loop this sequence?" + grade2_puppy_loops7_instruction: "\"Get me to the pig!\"\r\n\r\nUse what you + learned in other puzzles!" + grade3_AboutMyRobot_1_instruction: "Make your robot say \"Hello!\" when the + button is clicked." + grade3_AboutMyRobot_2_instruction: "Edit the code so that when the second bird + is clicked, your program plays a sound!" + grade3_AboutMyRobot_3_instruction: "When the third bird is clicked, the background + should change to a city. Can you add code to make this happen?" + grade3_AboutMyRobot_4_instruction: "Add code to make something happen when + the fourth bird is clicked. Be creative!" + grade3_AboutMyRobot_5_instruction: "About My Robot Project! Write code so that + clicking on each bird shows a new fact about your robot." + grade3_AboutMyRobot_TeacherIDo_instruction: "Run this puzzle and click on the + robot to see what happens!" + grade3_ConditionalsElse_1_instruction: "This cloud is blocking my view! Check + to see if there's a flower under the cloud, and only get nectar if there's + a flower. Be careful, it can change!" + grade3_ConditionalsElse_2_instruction: "More clouds! \r\n\r\nCheck underneath + every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade3_ConditionalsElse_3_instruction: "Now I just want to make honey. Some + of these clouds might have honeycombs under them. Be sure to check each cloud!" + grade3_ConditionalsElse_4_instruction: "Sometimes this cloud covers a flower, + and sometimes it covers a honeycomb! Use the if/else block to collect nectar + if it is a flower, else to make honey (because it is a honeycomb)." + grade3_ConditionalsElse_5_instruction: "There will be either a flower or a + honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block to collect + nectar if there is a flower.\r\nOtherwise, make honey (because there is a + honeycomb)." + grade3_ConditionalsElse_6_instruction: "I am not sure how much nectar this + flower has, but I know it has either 1, 2, or 3 nectar. \r\n\r\nCombine the + conditional blocks (`if` and/or `if/else`) to only get as much nectar as the + flower has. \r\n\r\nRemember, the amount of nectar can change each time you + run the puzzle!" + grade3_ConditionalsElse_7_instruction: "These flowers can have 3, 2, or 1 nectar. + \r\n\r\nComplete the `check purple flower` function and use it to collect + all of the nectar at the flowers." + grade3_ConditionalsElse_8_instruction: "Write the function for `check flower + make honey`. \r\n\r\nYour function should check if the purple flower has 3, + 2, or 1 nectar and get all of the nectar. \r\nThen, move forward and make + honey." + grade3_ConditionalsElse_9_instruction: "**Assessment:** This cloud is either + hiding a flower with one nectar or a honeycomb that needs one honey. \r\n\r\nComplete + the `get nectar or make honey` function, then call it to collect the nectar + or honey. \r\n" + grade3_ConditionalsElse_TeacherIDo_instruction: "There will be either a flower + or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block + to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade3_Conditionals_1 BAD_instruction: "Use a loop to collect all of the nectar." + grade3_Conditionals_1_instruction: "I'm a hungry bee! \r\nHelp me collect + all of the nectar from the flowers using the fewest number of blocks." + grade3_Conditionals_10 BAD_instruction: "Gather nectar from the rows of flowers! + Use a nested loop." + grade3_Conditionals_10_instruction: "There's a lot happening here!\r\n\r\nUse + what you've learned to collect all of the nectar and then make the honey." + grade3_Conditionals_11 BAD_instruction: "Assessment: Use a `while` loop to + collect all of the nectar from these flowers." + grade3_Conditionals_11_instruction: "Let's put everything together!\r\n\r\nUse + what you've learned to help me collect nectar only from flowers that have + it, using as few blocks as possible. Don't forget to make honey at the end." + grade3_Conditionals_12_instruction: "This stair step pattern should look familiar. \r\n\r\nCan + you collect nectar only from the flowers that have some, using as few blocks + as possible?" + grade3_Conditionals_13_instruction: "Assessment: Collect all of the nectar. + Be careful not to try to collect nectar from a purple flower if it doesn't + have any." + grade3_Conditionals_2_instruction: "Look at all of that nectar!\r\n\r\nHelp + me collect the nectar and make the honey using as few blocks as you can. " + grade3_Conditionals_3_instruction: "Be careful not to collect nectar from a + purple flower if it doesn't have any. \r\nYou must first check if the nectar + is equal to 1 using the `if nectar` block." + grade3_Conditionals_4_instruction: "Check this flower with an \"if\" block + to see if there is any nectar available." + grade3_Conditionals_5_instruction: "Collect nectar from each flower only if + it has any." + grade3_Conditionals_6_instruction: "This field has red and purple flowers. + Red flowers have a known nectar amount, but purple flower nectar is unknown. + Collect all the nectar." + grade3_Conditionals_7_instruction: "Collect all the nectar from each flower." + grade3_Conditionals_8_instruction: "I wonder what's out there!\r\n\r\nHelp + me fly around the yard and collect nectar only from the flowers that have + some. " + grade3_Conditionals_9_instruction: "Help me find all of the nectar using as + few blocks as possible!" + grade3_Conditionals_TeacherIDo_instruction: "Check this flower with an \"if\" + block to see if there is any nectar available." + grade3_Debugging_1_instruction: "These blocks are really bugging me. Fix the + error(s) to collect all of the nectar." + grade3_Debugging_5_instruction: "That flower looks tasty! \r\n\r\nFix the error(s) + to collect all of the nectar. You can now use both run and step." + grade3_Debugging_6_instruction: "What a sweet challenge!\r\n\r\nFix the error(s) + to collect all of the nectar." + grade3_Debugging_7_instruction: "Fix the error(s) to collect all of the nectar + and make all of the honey." + grade3_Debugging_9_instruction: "\"Bee\" patient with this one!\r\n\r\nYou + will need to fix a couple of things in this program to collect all of the + nectar and make all of the honey." + grade3_Debugging_TeacherIDo_instruction: "These blocks are really bugging me. + Fix the error(s) to collect all of the nectar and make all of the honey." + grade3_Loops_1_instruction: "Can you help me collect the nectar from these + flowers? " + grade3_Loops_10_instruction: "Such a busy bee!\r\n\r\nHelp bee collect all + of the nectar and make all of the honey with the fewest blocks possible." + grade3_Loops_11_instruction: "The shape of this path is different than the + others. \r\n\r\nCan you collect all of the nectar using as few blocks as possible?" + grade3_Loops_12_instruction: "Can you find the quickest way for the bee to + collect all of the nectar and make all of the honey?" + grade3_Loops_2_instruction: "This time, use a loop to gather all of the nectar." + grade3_Loops_3_instruction: "Use a `repeat` loop to collect all of the nectar." + grade3_Loops_4_instruction: "Now use the `repeat` block to collect all of the + nectar and make all of the honey." + grade3_Loops_5_instruction: "What a beautiful field of flowers! Help the + bee visit each one. Can you find a way to do it with fewer than 7 blocks?" + grade3_Loops_6_instruction: "How many times can loops help you in this puzzle? \r\n\r\nLoops + are your friend! Use a few of them to complete this puzzle with the fewest + blocks possible." + grade3_Loops_7_instruction: "Those flowers look tasty!\r\n\r\nCollect nectar + from each of the flowers using the fewest blocks possible." + grade3_Loops_8_instruction: "Collect all the nectar and make all of the honey + using the fewest blocks possible." + grade3_Loops_9_instruction: "Collect nectar from each flower and make honey + at each honeycomb using the fewest blocks possible." + grade3_Loops_TeacherIDo_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + grade3_RunningFarm_1_instruction: "Use conditionals to make sure that you pick + all of the corn, but don't disturb the stalks where nothing is growing yet." + grade3_RunningFarm_10_instruction: "Collect all of the corn and lettuce, then + pick the pumpkin." + grade3_RunningFarm_11a_instruction: "Collect all of the corn and lettuce, then + pick the pumpkin." + grade3_RunningFarm_2_instruction: "Help the farmer collect both corn and lettuce + from the field." + grade3_RunningFarm_3_instruction: "*\"Corn, lettuce, AND pumpkins! Help me + harvest them all.\"*" + grade3_RunningFarm_4_instruction: "Help the farmer pick all of the lettuce + in each cluster before moving on to the next bunch." + grade3_RunningFarm_5_instruction: "This field has clusters of corn, lettuce, + and pumpkins all growing together. Can you collect them all?" + grade3_RunningFarm_6_instruction: "Can you figure out how to pick the pumpkin? Make + sure to collect all of the corn along the way!" + grade3_RunningFarm_7_instruction: "**Challenge:** Collect all of the corn and + lettuce, then pick the pumpkin." + grade3_RunningFarm_8_instruction: "Have wheat and potatoes planted randomly + at various growth stages. Now we introduce multiple while loops (stacked) + nested inside a loop. The two while loops in the solution represent different + while loops (while there is potato and while there is wheat)" + grade3_RunningFarm_9_instruction: "Add Weeds element. Weeds start out in random + spots in the field and spread more and more rapidly as time goes on.. This + puzzle is the culminating game-like puzzle. Students should have the event + blocks (up, down, left, right, spacebar) available in the toolbox to use if + they want. The entire field should be planted randomly with mostly wheat, + potatoes, and a few weeds." + grade3_RunningFarm_TeacherIDo_instruction: "Teacher I Do: Show students how + they can use loops and conditionals to plant and harvest 2 rows of crops." + grade3_RunningFarm_TeacherIDo2_instruction: "Teacher I Do: Show students how + to use loops to harvest many crops." + grade3_bee_Conditionals_new4_instruction: "Now try checking all of these flowers + with \"if\" blocks to see if there is any nectar available." + grade3_bee_conditionals_new1a_instruction: "Help the bee collect all of the + nectar. \r\n\r\nYou can only collect nectar from flowers, but you can check + any space to see if there is a flower." + grade3_bee_conditionals_new1b_instruction: "Help the bee collect all of the + nectar. You can only collect nectar from flowers, but you can check any space + to see if there is a flower." + grade3_bee_conditionals_new2_instruction: "Collect all of the nectar using + as few blocks as possible" + grade3_bee_conditionals_new2a_instruction: "Get all of the nectar using as + few blocks as possible." + grade3_bee_conditionals_new2b_instruction: "Collect all of the nectar. You + can only collect nectar from flowers, but you can check any space to see if + there is a flower." + grade3_bee_conditionals_new3a_instruction: "Collect all of the nectar or make + all the honey. You can only collect nectar from flowers and make honey from + honeycombs. Check any space to see if there is a flower or honeycomb." + grade3_bee_conditionals_new3b_instruction: "Collect all of the nectar and make + all of the honey." + grade3_bee_conditionals_new3c_instruction: "Help the bee collect all of the + nectar and make all of the honey! Hint: Try using one loop inside of another + loop." + grade3_bee_conditionals_quantum1_instruction: "Check to see if there's a flower + under the cloud. If there's a flower, get nectar." + grade3_bee_conditionals_quantum2_instruction: "Check underneath every cloud + to see if it is hiding a flower before you get nectar. \r\n" + grade3_bee_conditionals_quantum3_instruction: "Some of these clouds might have + honeycombs under them. Be sure to check if a honeycomb is hiding behind each + cloud!" + grade3_bee_conditionals_quantum4_instruction: "Use the `if/else` block to collect + nectar at flowers and make honey at honeycomb." + grade3_bee_conditionals_quantum5_instruction: "Use the `if/else` block to collect + nectar if there is a flower.\r\nOtherwise, make honey (because there is a + honeycomb)." + grade3_maze_Loop1_instruction: "Assessment: Get me to the sunflower using + only 5 blocks! " + grade3_maze_loops1_instruction: "Get the zombie to the sunflower." + grade3_maze_loops2_instruction: "Get the zombie to the sunflower using the + fewest blocks possible! " + grade3_maze_loops2a_instruction: "Get the zombie to the sunflower using the + fewest number of blocks possible." + grade3_maze_loops3_instruction: "Get the zombie to the sunflower using only + the blocks available." + grade3_maze_loops4_instruction: "Get the zombe to the sunflower using the fewest + number of blocks possible!" + grade3_maze_loops5_instruction: "Get me to the sunflower using the fewest blocks + possible!" + grade3_maze_nestedLoops1_instruction: "Can you get me to the pig using 5 of + the same kind of blocks?" + grade3_maze_nestedLoops2_instruction: "Can you get to the pig by creating a + loop that uses only one `move forward` block inside of a `repeat`?" + grade3_maze_nestedLoops3_instruction: "Get me to the pig! You can only use + one move forward block this time" + grade3_maze_nestedLoops4_instruction: "In this puzzle, two `repeat` loops will + help you get to the pig with the fewest number of blocks!" + grade3_playLab_buildGame_1_instruction: "There is a new block in this lesson, + the `random integer` block. It is used to choose a random number. Write a + program where the robot says a random number between 1 and 100!" + grade3_playLab_buildGame_2_instruction: "We have already created a random integer, + \"j\", which is either 1 or 0. Now, we need to use it to decide whether our + card is red or black. Add a second if statement to the code under `when run` + to complete this code." + grade3_playLab_buildGame_3_instruction: "There are 13 different card values + in a deck of cards, so we'll need to have 13 options. Under the empty `when + run` block, add a line that sets the placeholder \"i\" to a random integer + between 1 and 13." + grade3_playLab_buildGame_4_instruction: "In a deck of cards, a card with value + 1 isn't actually called a \"1\", there's a special name. Write an if statement + that checks if the random number is a 1, then tell the computer that the value + of that card is \"Ace\"." + grade3_playLab_buildGame_5_instruction: "We can just call the cards from 2 + to 10 by their numbers, so add an if statement that checks whether the number + generated is within those numbers, then sets the card value to the number + generated." + grade3_playLab_buildGame_6_instruction: "There are three more cards with special + names in the deck. Add to your code so that a card number 11 is called a \"Jack\", + a 12 is a \"Queen\" and a 13 is a \"King\"" + grade3_playLab_buildGame_7_instruction: "You already know what color your card + is, but what suit is it? Add code to the conditional statement \"if card is + Red\" to choose hearts or diamonds." + grade3_playLab_buildGame_8_instruction: "Add the second part of the code to + choose a suit, copying what you made for a Red card." + grade3_playLab_buildGame_final_instruction: "Final stage for playlab conditionals + level (could hide entire function so that students just work with point scoring)" + grade3_playLab_buildGame_final2_instruction: "Here's all of your code to choose + a card - try adding some other fun features!" + grade3_robotFarmer_ConditionalsIntro4_instruction: "Help the farmer remove + this entire pile using a `while` loop." + grade3_robotFarmer_ConditionalsIntro_1_instruction: "*\"Hi, I'm a farmer. + I need your help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove + to the pile of dirt and use the `remove` block to remove it." + grade3_robotFarmer_ConditionalsIntro_10_instruction: "I'm working late, so + it's dark out, and I can't tell how large the piles are. Now I don't have + all the options I used to have on the while block. Move me along the field, + and if there is a pile, remove it" + grade3_robotFarmer_ConditionalsIntro_10a_instruction: "Flatten all of these + piles using as few blocks as possible. " + grade3_robotFarmer_ConditionalsIntro_11_instruction: "It's still dark outside. + Move me along the field. If there is a pile, remove it, and if there is a + hole, fill it in. Hint: use the dropdown menu of options on the \"if\" block." + grade3_robotFarmer_ConditionalsIntro_11a_instruction: "Flatten all of these + piles using as few blocks as possible. " + grade3_robotFarmer_ConditionalsIntro_2_instruction: "Next, move to the hole + and fill it with six shovelfuls of dirt, using the `fill` block." + grade3_robotFarmer_ConditionalsIntro_3_instruction: "*\"Move to the pile of + dirt and tell me how many shovelfuls to remove using as few blocks as possible.\"*" + grade3_robotFarmer_ConditionalsIntro_4_instruction: "*\"I don't know how much + dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using + a `while` loop." + grade3_robotFarmer_ConditionalsIntro_5_instruction: "Help me remove all of + this dirt. " + grade3_robotFarmer_ConditionalsIntro_6_instruction: "Remove all the piles of + dirt, using as few blocks as possible. The new options in the dropdown menu + on the \"while\" block tell me if I'm standing on a pile or a hole." + grade3_robotFarmer_ConditionalsIntro_7_instruction: "Look at all of those holes! Each + one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop + to easily fill them all!" + grade3_robotFarmer_ConditionalsIntro_8_instruction: "Fill in the hole at the + end of each of these paths." + grade3_robotFarmer_ConditionalsIntro_9_instruction: "**Challenge:** Fill all + of these holes using as few blocks as possible. " + grade3_robotFarmer_ConditionalsIntro_TeacherIDo1_instruction: "Help me fill + in all these holes with 5 shovelfuls of dirt. Hint: you can put a \"repeat\" + block inside the \"while\" block." + grade3_robotFarmer_ConditionalsIntro_TeacherIDo2_instruction: "I'm working + late, so it's dark out, and I can't tell how large the piles are. Now I + don't have all the options I used to have on the while block. Move me along + the field, and if there is a pile, remove it" + grade4_arist_functions_star0_instruction: "Have you drawn something like this + star before? Practice making it one more time by adding a turn and a repeat + block." + grade4_arist_nested_loop_circles1_instruction: "Assessment: Use a nested loop + to complete the design." + grade4_arist_nested_loop_flags1_instruction: "Loop the given code to create + a windmill." + grade4_arist_nested_loop_polygons1_instruction: "Loop this design 10 times. + \r\n\r\nHow much do you have to turn each time you loop?" + grade4_arist_nested_loop_polygons2_instruction: "Loop this shape 6 times. \r\n\r\nHow + much do you have to turn each time you loop? " + grade4_arist_nested_loop_squares1_instruction: "Can you draw these 10 squares + of this sidewalk using a nested loop? Each square is 30 pixels." + grade4_arist_nested_loop_triangles2_instruction: "Now nest this loop inside + another loop to draw 10 triangles. This is called a \"nested\" loop. " + grade4_arist_nested_loop_triangles3_instruction: "Can you draw a hexagon by + looping the triangle code?" + grade4_arist_nested_loop_triangles4_instruction: "Draw the teeth in the alligator's + mouth!" + grade4_arist_nested_loop_triangles5_instruction: "Create a sun by nesting the + starter code in another loop.\r\n\r\nTo get this cool design with a hollow + center, you'll need to jump forward by the length of the triangle before + turning." + grade4_arist_nested_loop_triangles6_instruction: "Can you draw these 36 triangles + using a nested loop?" + grade4_artist_freeplay_instruction: "You are on your own now! Try out any of + the functions you used in this stage or try this new function that will automatically + give your image a beautiful background color! This creation will be saved + to your Projects dashboard so that you can easily edit it any time!" + grade4_artist_functions1_instruction: "Help the zombie draw glasses using squares + with sides of 100 pixels. \r\nThe bridge between the glasses is 75 pixels + long." + grade4_artist_functions2_instruction: "Functions let you define new blocks! + \r\n\r\nWe've moved the blocks needed for drawing a square into a function + called `draw a square`. This time, use the `draw a square` function to create + the glasses. \r\n\r\nThe squares are 75 pixels apart." + grade4_artist_functions2a_instruction: "Create this image using only the blocks + provided." + grade4_artist_functions3a_instruction: "Create this image using only the blocks + provided." + grade4_artist_functions3b_instruction: "This time, use lines of 8 hexagons + with 25 pixel sides." + grade4_artist_functionsChallenge0_instruction: "**Challenge:** Create as many + functions as you think you need to make this drawing of 50 pixel squares." + grade4_artist_functions_challenge_instruction: "Use the suggested functions + to draw four rows of hexagons. Notice how our even numbered rows are shifted + to the right?" + grade4_artist_functions_challenge2_instruction: "Use the suggested functions + to draw four rows of hexagons. Notice how our even numbered rows are shifted + to the right?" + grade4_artist_functions_freeplay_instruction: "You are on your own now! Try + out any of the functions you used in this stage or try this new function that + will automatically give your image a beautiful background color! This creation + will be saved to your Projects dashboard so that you can easily edit it any + time!" + grade4_artist_functions_stars0_instruction: "You can make this drawing by adding + a repeat block." + grade4_artist_functions_stars1_instruction: "Now that you can draw a star, + try drawing four stars!" + grade4_artist_functions_stars2_instruction: "Draw only those three stars to + finish this puzzle." + grade4_artist_functions_stars3_instruction: "That last one is tough if you + only use loops. Let's try drawing the same picture using this new 'function' + that will help to **draw a star**." + grade4_artist_functions_windows0_instruction: "Make this window by drawing + a square, then turning 90 degrees before drawing another, and so on." + grade4_artist_functions_windows1_instruction: "If you can draw one window, + you can draw three! Try using your choice of a nested loop or a function here. + Don't forget the jump block!" + grade4_artist_functions_windows2_instruction: "Try solving this puzzle by creating + `draw a window` and calling it five times. Watch out for the door!\r\n\r\n- + The top windows are 50 pixels away from each other. \r\n- The bottom windows + are 100 pixels below the top set." + grade4_artist_nestedLoops_challenge_instruction: "Click here to see the full + instructions again!\r\n\r\nHere is the code for an interesting shape. What + happens when you repeat it multiple times, turning between each iteration? Notice + that the turns in this shape add up to 420 degrees, which means that when + your artist is done drawing, it will be facing a different direction than + when you started. That new direction is exactly 60 degrees to the right of + where you began." + grade4_artist_nestedLoops_challenge2_instruction: "Now for a challenge! Feel + free to use trial and error. You are not expected to get the image perfect + the first time. Want to see more hints? Click here!" + grade4_artist_nested_loop_circles1_instruction: "Assessment: Use a nested loop + to complete the design." + grade4_artist_nested_loop_flags1_instruction: "Loop the given code to create + a windmill." + grade4_artist_nested_loop_polygons1_instruction: "Loop this design 10 times. + \r\n\r\nHow much do you have to turn each time you loop?" + grade4_artist_nested_loop_polygons2_instruction: "Hi, I'm the Artist! Let's + create some drawings together! For starters, try repeating this shape 6 times. + \r\n\r\nHow much do you have to turn each time you loop? " + grade4_artist_nested_loop_squares1_instruction: "Can you draw these 10 squares + of this sidewalk using a nested loop? Each square is 30 pixels." + grade4_artist_nested_loop_triangles1_instruction: "Complete the code to draw + these triangles. The first one is done for you. Hint: 3 triangles in a + 360 degree rotation." + grade4_artist_nested_loop_triangles2_instruction: "Let's make a quick adjustment + to get completely different image! \r\nHint: ? × 10 = 360" + grade4_artist_nested_loop_triangles3_instruction: "Can you draw a hexagon by + looping the triangle code?\r\nHint: 6 × ? = 360" + grade4_artist_nested_loop_triangles4_instruction: "Hi! I'm the Artist. Let's + try some different types of drawings together. Can you help me draw the bottom + teeth in the alligator's mouth?" + grade4_artist_nested_loop_triangles5_instruction: "Create a sun by nesting + the starter code in another loop.\r\n\r\nTo get this cool design with a hollow + center, you'll need to jump forward by the length of the triangle before + turning." + grade4_artist_nested_loop_triangles6_instruction: "Can you draw these 36 triangles + using a nested loop?" + grade4_artist_parameters_squares1_instruction: "Click \"edit\" to fill in the + function definition of \"draw a square\" and add a parameter. It should take + a length parameter, just like the triangle. This time, draw 3 squares: 25, + 50 and 75 pixels in length, each 100 pixels apart." + grade4_artist_parameters_triangles1_instruction: "Today, we're going to try + out a different, more powerful function editor. See if you can figure out + how to edit the function 'draw a triangle' to find the bugs." + grade4_artist_parameters_triangles2_instruction: "Do you notice anything different + about these function blocks? Click “Run” to see what happens." + grade4_artist_parameters_triangles2b_instruction: "Can you complete this drawing? + The sides of each triangle are 25 pixels larger than the last. The first + triangle has 25 pixel sides." + grade4_artist_parameters_triangles3_instruction: "Can you complete this drawing? + The sides of each triangle are 25 pixels larger than the last. The first + triangle has 25 pixel sides." + grade4_artist_parameters_triangles4_instruction: "The code for this triangle + function is broken. Can you edit the function to fix it, and then make triangles + of length 25, 50, and 75?" + grade4_artist_parameters_trianglesx_instruction: "Can you complete this drawing? + The sides of each triangle are 25 pixels larger than the last. The first + triangle has 25 pixel sides." + grade4_bee_conditionals_nested_loops_instruction: "Collect all of the nectar. + You can only collect nectar from flowers, but you can check any space to see + if there is a flower." + grade4_bee_conditionals_new1_instruction: "Collect all of the nectar. You can + only collect nectar from flowers, but you can check any space to see if there + is a flower." + grade4_bee_conditionals_new1a_instruction: "Help the bee make all of the honey. + You can only make honey at a honeycomb, but you can check any space to see + if there is a honeycomb." + grade4_bee_conditionals_new2_instruction: "Can you help the bee collect the + nectar from the flowers? You can only collect nectar from flowers, but you + can check any space to see if there is a flower." + grade4_bee_conditionals_new2a_instruction: "Make all of the honey. It's actually + more efficient to check each space for a honey comb, even when you know some + are empty." + grade4_bee_conditionals_new3a_instruction: "Collect all of the nectar or make + all the honey. You can only collect nectar from flowers and make honey from + honeycombs. Check any space to see if there is a flower or honeycomb." + grade4_bee_conditionals_new3b_instruction: "Uh oh! The bee is not sure if he + should collect nectar or make honey. Can you help him out?" + grade4_bee_conditionals_new3c_instruction: "Help the bee collect all of the + nectar and make all of the honey! Hint: Try using one loop inside of another + loop." + grade4_bee_conditionals_quantum1_instruction: "This cloud is blocking my view! + Check to see if there's a flower under the cloud, and only get nectar if + there's a flower. Be careful, it can change!" + grade4_bee_conditionals_quantum2_instruction: "More clouds! \r\n\r\nCheck underneath + every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade4_bee_conditionals_quantum3_instruction: "Now I just want to make honey. + Some of these clouds might have honeycombs under them. The way we've been + going about things won't work here. Be sure to check if a honeycomb is hiding + behind each cloud!" + grade4_bee_conditionals_quantum4_instruction: "Sometimes this cloud covers + a flower, and sometimes it covers a honeycomb! Use the if/else block to collect + nectar if it is a flower, else to make honey (because it is a honeycomb)." + grade4_bee_conditionals_quantum5_instruction: "There will be either a flower + or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block + to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade4_bee_functions_instruction: "Have we met before? I'm the farmer! Please + help me remove this pile of dirt and fill this hole." + grade4_bee_functions1_instruction: "Collect all the nectar from each flower." + grade4_bee_functions10_instruction: "Create a function to collect all of the + nectar from each flower." + grade4_bee_functions11_instruction: "Solve this function by creating a function + to turn, move forward and make all of the honey, then return the bee to where + it started and turn back." + grade4_bee_functions2_instruction: "Functions are blocks of code that perform + a task. Use the \"get 2 nectar\" function to collect the nectar from each + flower." + grade4_bee_functions3_instruction: "Build the `get 5` function to use in this + puzzle." + grade4_bee_functions4_instruction: "Use the `move and get nectar` function + to collect all of the nectar." + grade4_bee_functions5_instruction: "This puzzle will be deleted!" + grade4_bee_functions6_instruction: "Now write the function to collect nectar + from the flowers." + grade4_bee_functions7_instruction: "Create a function and call it to collect + nectar at each flower and make honey at each honeycomb." + grade4_bee_functions8_instruction: "Create your own function that goes down + a path, gets nectar, makes honey, and then returns the bee to the top of the + path. Then collect all the nectar and make all the honey!" + grade4_bee_functions9_instruction: "Create a function that collects all of + the nectar from each flower." + grade4_bee_nestedLoops0_instruction: "Use a loop to collect all of the nectar." + grade4_bee_nestedLoops1_instruction: "Collect all of the nectar from each flower." + grade4_bee_nestedLoops2_instruction: "**Challenge:** Figure out how to get + all of the nectar using only the blocks available." + grade4_bee_nestedLoops2a_instruction: "Collect all of the nectar using as + few blocks as possible." + grade4_bee_nestedLoops3_instruction: "Collect all of the nectar by creating + a nested loop." + grade4_bee_nestedLoops4_instruction: "Collect all of the nectar from each flower + and make honey at the honeycomb. " + grade4_bee_nestedLoops_assess_instruction: "**Assessment:** Collect all of + the nectar and make all of the honey using loops.\r\n\r\nHint: There are several + possible solutions!" + grade4_designProcess_vid_instruction: "Prepare to build a project within some + given parameters." + grade4_farmer_functions1_instruction: "*\"Have we met before? I'm the farmer!\"*\r\n\r\nHelp + the farmer get to the pumpkins and pick them." + grade4_farmer_functions2_instruction: "Take the code you just wrote it and + use it to define a new function. Call the function twice to complete the puzzle." + grade4_farmer_functions3_instruction: "Try using a couple of repeat blocks + within your function definition." + grade4_farmer_functions4_instruction: "Swap out your repeat loops for more + versatile while loops." + grade4_farmer_functions5_instruction: "Things are going to start getting trickier, + but don't give up! You can use the same while loops to check both spaces + in each pass." + grade4_farmer_functions6_instruction: "The paths are a different length. You + can use a different type of while loop to keep the pattern going as long as + you need to." + grade4_frozen_freeplay_instruction: "You've officially become a master artist! + Create a winter wonderland." + grade4_frozen_functions0_instruction: "Can you figure out what number to replace + the question marks with to draw a circle?" + grade4_frozen_functions1_instruction: "Use the new “draw a circle” function + to create 10 overlapping circles. Don't forget to jump forward between circles." + grade4_frozen_functions1a_instruction: "Use the new “Create a circle” block + to create 10 overlapping circles. Don't forget to jump forward between circles." + grade4_frozen_functions2_instruction: "Now let's create 20 overlapping circles, + turning 18 degrees between each circle." + grade4_frozen_functions3_instruction: "Here's a ”Create circle” block that + can make circles of different sizes. Can you use this to create a small circle + of size 5 and a larger circle of size 10?" + grade4_frozen_functions4_instruction: "Intricate snow patterns can be created + with very simple shapes. Can you make a pattern by repeating 5 circles of + size 5 and 5 circles of size 10?" + grade4_frozen_nested_loop_diamonds1_instruction: "Let’s use a repeat block + to create a rhombus. Like a square, all sides are equal length, but the angles + are different. This one has 60 degree and 120 degree angles instead of all + 90 degree angles." + grade4_frozen_nested_loop_diamonds2_instruction: "Did you know every snowflake + is a different shape? Let's create a new snowflake by using another “Repeat\" + block to repeat a parallelogram 4 times, turning right by 90 degrees between + each parallelogram." + grade4_frozen_nested_loop_diamonds3_instruction: "Now, let's create a new + snowflake by using the repeat block to repeat a parallelogram 10 times, turning + right by 36 degrees between each one." + grade4_frozen_nested_loop_rectangle1_instruction: "Hi, I’m Anna of Arendelle! + Let’s use a repeat block to create a rectangle. This one is 200 pixels long + and 100 pixels tall. All of the corners are 90 degree angles." + grade4_frozen_square_instruction: "Hi, I’m Anna of Arendelle! Let’s make a + square with the “Repeat” block, which uses fewer blocks. How many times (???) + should the “Repeat” block loop the blocks inside it to make a square?" + grade4_frozen_square_loop1_instruction: "Hi, I’m Anna of Arendelle! Let’s make + a square with the “Repeat” block, which uses fewer blocks. How many times + (???) should the “Repeat” block loop the blocks inside it to make a square?" + grade4_frozen_square_loop2_instruction: "Let's create three squares, turning + after each square. Be sure to turn by 120 degrees before each new square." + grade4_frozen_square_loop3_instruction: "Can you create a snowflake using the + “Repeat” block to make a square 10 times, and the “Turn” block to turn 36 + degrees between each square?" + grade4_playLab_proj_example1_instruction: "instructions" + grade4_playLab_proj_example1a_instruction: "Take a look at this project. Do + you see how it was made?" + grade4_playLab_proj_example2a_instruction: "Take a look at this project. Do + you see how it was made?" + grade4_playlab_freeplay_instruction: "It's free play time! Have fun with all + the blocks in your tool box. " + grade4_playlab_test_instruction: "Use the right arrow to throw pie.\r\n\r\nIn + our game, how should we score points? Add 1 to your \"points\" variable each + time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" + event to trigger an update to your score. You can increment your variable + by setting \"points = points + 1.\" Get your score up to 10 (going one at + a time!) to pass the level." + grade4_playlab_test2_instruction: "Here's a function called `jump` that causes + your main character to jump up 100 pixels. Run the program and use the jump + function to collect all of the flags by moving the dog with the arrow keys." + grade4_prompt_test_instruction: "This is a test play lab level." + grade4_review_artist1_instruction: "Hi, I'm an artist. You can write code + to make me draw almost anything. Use a few blocks to make me draw over the + grey lines in the picture. (Each line is 100 pixels long)" + grade4_review_artist2_instruction: "This house needs a roof! Draw the triangle. Hint: + all three sides are the same length." + grade4_review_artist3_instruction: "The jump block moves the artist without + drawing. Draw the dashed line using both the `jump forward` and `move forward` + blocks. Each line is 50 pixels long." + grade4_review_bee1_instruction: "Now use the `repeat` block to collect all + of the nectar and make all of the honey." + grade4_review_bee2_instruction: "Collect nectar from each flower and make honey + at each honeycomb using the fewest blocks possible." + grade4_review_bee3_instruction: "Such a busy bee!\r\n\r\nHelp bee collect all + of the nectar and make all of the honey with the fewest blocks possible." + grade4_scaffolded_project1_instruction: "It is amazing how much you have learned! + Let's put them together to make a game, step by step." + grade4_scaffolded_project2_instruction: "Now let's get things moving! Use + event handlers and actions to make your hero move.\r\n\r\nWe've added these + blocks to your tool box to help you.\r\n" + grade4_scaffolded_project3_instruction: "Now that your game has a hero, it's + time to start adding other actors and assigning them behaviors. \r\n\r\nAdd + two or more additional actors to your game and make them move. Do you want + to have an actor patrol back and forth? Try using a these new blocks to bring + these other components of your game to life!" + grade4_scaffolded_project4_instruction: "Just getting the actors moving is + a great step, but we need to program some interactions to make this really + feel like a game. A simple way to do this is to add or remove points when + actors collide with projectiles or each other. Find some interesting ways + to change the score in your game." + grade4_scaffolded_project4a_instruction: "Just getting the actors moving is + a great step, but we need to program some interactions to make this really + feel like a game. A simple way to do this is to add or remove points when + actors collide with projectiles or each other. Find some interesting ways + to change the score in your game." + grade4_scaffolded_project5_instruction: "Now spend some time making sure the + game works the way you want. Try including a way to win or lose your game." + grade4_scaffolded_project6_instruction: "You've finished! Now you can play + your game or share it with your friends and classmates!" + grade5_artist_binary1_instruction: "Binary is a way of representing information + using only two options. Here, we're going to use the options \"off\" (represented + by the number 0) and \"on\" (represented by the number 1). \r\n\r\nWe've + provided you with a grid of \"pixels\" that you can walk through and make + designs by turning on only certain squares. Can you have the artist draw + \"01010101\" in binary in the first row?" + grade5_artist_binary10_instruction: "Click here to see hints." + grade5_artist_binary11_instruction: "Free Play: Here's a blank canvas for + you to draw on. Have fun!" + grade5_artist_binary2_instruction: "Here's a function that takes a binary + string of 1's and 0's and instructs the artist to follow them from left + to right, top to bottom. The artist will fill-in the squares when it sees + a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how + the artist uses binary to draw this pattern." + grade5_artist_binary3_instruction: "Which of these binary strings could you + loop 8 times to draw this image?" + grade5_artist_binary4_instruction: "Can you draw this pattern by looping just + three binary digits (0s and 1s)?" + grade5_artist_binary5_instruction: "Each binary string represents one row of + this picture. Can you rearrange them so it draws a smiley face instead of + a frowny face?" + grade5_artist_binary6_instruction: "Which 6 digit binary string, repeated 11 + times, will draw this image?" + grade5_artist_binary7_instruction: "What is the shortest binary string that + you can repeat to draw this image?" + grade5_artist_binary8_instruction: "Finish this drawing." + grade5_artist_binary9_instruction: "Here's a higher resolution canvas to draw + on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we start to get + creative with the bits?" + grade5_artist_for_loops1_instruction: "Use a `for` loop to draw this triangle + that is 50 pixels wide. If you count from 1 to 3 by 1s, you can use this just + like a `repeat` loop." + grade5_artist_for_loops10_instruction: "Can you figure out how to use all of + the things you've learned to create this image?\r\n\r\nNeed a hint? Click + here." + grade5_artist_for_loops1a_instruction: "Try using a `for loop`to create this + triangular design. Don't worry that the numbers are different than the last + puzzle. As long as you turn by the right number of degrees, the artist will + make the correct shape!" + grade5_artist_for_loops1b_instruction: "Experiment with the `for` loop and + play with the `counter` variable." + grade5_artist_for_loops2_instruction: "Use a `repeat` inside of a `for` loop + to create this stack of triangles that goes from 50 pixels to 100 pixels." + grade5_artist_for_loops3_instruction: "These triangles go from 20 pixel sides + to 200 pixel sides, and each triangle is 20 pixels larger than the last. " + grade5_artist_for_loops4_instruction: "These squares start at 15 pixels long, + the largest is 300 pixels long, and each square is 15 pixels larger than the + last. " + grade5_artist_for_loops5_instruction: "Just one little change to the code from + the last image can create this drawing. Can you figure out what that change + is?\r\n\r\nHint: You need to remove something!" + grade5_artist_for_loops6_instruction: "If you turn a little bit more or less + than you normally would for a shape, it creates a neat effect. Try using some + of the code from the last level, but turning 89 degrees to create this twisted + square spiral." + grade5_artist_for_loops7_instruction: "Make three small changes to the code + from the last level to get this!" + grade5_artist_for_loops7a_instruction: "Take the angle down to 72 degrees to + get a spiraled pentagon." + grade5_artist_for_loops7b_instruction: "Use the counter inside the `set alpha` + block to get this faded center.\r\n(This hexagon pattern was made using a + 60 degree turn.)" + grade5_artist_for_loops8_instruction: "Remember back in a previous stage when + we used a variable to control the number of sides in a shape? We are going + to do the same thing with the `counter` variable now. This pattern starts + with a triangle and adds one side at a time until it draws a decagon (10 sides). + Each side should be 100 pixels long. " + grade5_artist_for_loops9_instruction: "Let's put it all together! Using your + knowledge of `for` loops and the `counter` variable, create this drawing where + each shape has two more sides than the last. Make sure that each side is + 10 times as long as the number of sides in the polygon.\r\n\r\nVery little + of the code has been provided for you." + grade5_artist_for_loopsfreeplay11_instruction: "Free-Play Inspiration: You've + now learned everything you need to know to make a pattern like this! If this + picture inspires you, try to make something similar. Otherwise, create something + all your own.\r\n\r\nNeed a hint? Click here." + grade5_artist_for_loopsfreeplay12_instruction: "Free Play: Try using the `counter` + variable with other drawing elements to make magical images like this one." + grade5_artist_freeplay_instruction: "Create your own project! This creation + will be saved to your Projects dashboard so that you can easily edit it any + time!" + grade5_artist_functionparameters10_instruction: "Free Play Inspiration: You've + now learned everything you need to know to make a pattern like this! If this + picture inspires you, try to make something similar. Otherwise, create something + all your own.\r\n \r\nWant to know how our inspiration pattern was made? " + grade5_artist_functionparameters11_instruction: "Freeplay: Below there are + functions you've written, and more for you to play with. Draw something awesome! + Play with the pen width to see how different your drawings look!" + grade5_artist_functionparameters7_instruction: "This image is similar to the + last. Can you use a `for` loop with your function to make this design?" + grade5_artist_functionparameters8_instruction: "The triangle has 21 pixel sides, + and the sides in each following shape are 7 pixels longer than the last. Use + the `multiplication` block to make this all happen with just one function + call. Be sure to jump 100 pixels between polygons." + grade5_artist_functionparameters9_instruction: "Challenge: Edit `draw a spiral + edge` to use `length` and `sides` parameters, then recreate these shapes." + grade5_artist_functionparameters9a_instruction: "Finish off the `draw a spiral + edge` function to also ask for a minimum length for the center of the spiral." + grade5_artist_functionparameters9b_instruction: "Can you figure out how to + make this drawing using the function that you just created?" + grade5_artist_functionparameters_6_instruction: "Edit this function to add + a parameter for the number of sides in your polygon.\r\n\r\nThe sides of all + the shapes are 100 pixels long." + grade5_artist_parameters_squares1_instruction: "Click \"edit\" to fill in the + function definition of \"draw a square\" and add a parameter. It should take + a length parameter, just like the triangle. This time, draw 3 squares: 25, + 50 and 75 pixels in length, each 100 pixels apart." + grade5_artist_parameters_squares1a_instruction: "This program looks okay from + here, but something isn't working right. See if you can figure out how to + edit the function 'draw a square' to find the bug." + grade5_artist_parameters_squares2_instruction: "Create a function called 'draw + a square' and use it to outline these four boxes. Make sure to add a parameter + for 'length'! Starting from the upper right, the box widths are 50, 100, + 150, and 200." + grade5_artist_parameters_squares2a_instruction: "Edit the function to accept + a parameter called `length`." + grade5_artist_parameters_stars1_instruction: "That last one is tough if you + only use loops. Let's try drawing the same picture using this new 'function' + that will help to **draw a star**." + grade5_artist_parameters_triangles1_instruction: "This program looks okay from + here, but something isn't working right. See if you can figure out how to + edit the function 'draw a square' to find the bug." + grade5_artist_parameters_triangles1a_instruction: "Today, we're going to try + out a different, more powerful function editor. See if you can figure out + how to edit the function 'draw a triangle' to find the bugs." + grade5_artist_parameters_triangles1aa_instruction: "Click \"edit\" to fill + in the function definition of \"draw a triangle\" and add a parameter. It + should take a length parameter, just like the triangle. This time, draw 3 + triangles: 25, 50 and 75 pixels in length, each 100 pixels apart." + grade5_artist_parameters_triangles2_instruction: "This drawing can be easily + created using a new type of function that includes a parameter. The sides + of each triangle are 25 pixels larger than the last. The first triangle has + 25 pixel sides. Replace the '???' with the correct values to draw the picture." + grade5_artist_parameters_triangles2a_instruction: "Do you notice anything different + about these function blocks? Click “Run” to see what happens." + grade5_artist_parameters_triangles3_instruction: "The code for this triangle + function is broken.\r\n\r\nCan you edit the function to fix it, and then make + triangles of length 150, 75, 25?" + grade5_artist_parameters_triangles4_instruction: "The code for this triangle + function is broken. Can you edit the function to fix it, and then make triangles + of length 25, 50, and 75?" + grade5_artist_parameters_trianglesy_instruction: "The code for this triangle + function is broken.\r\n\r\nCan you edit the function to fix it, and then make + triangles of length 150, 75, 25?" + grade5_artist_variables_freeplay10_instruction: "Free Play: Experiment with + the number of sides this shape has. Can you change the algorithm so that the + overall size of the shape stays the same, no matter how many sides it has? + Hint: If you divide your starting length by the number of sides, the length + of each side will get shorter as the number of sides gets higher." + grade5_artist_variables_freeplay14_instruction: "Free Play: Check it out! Now + your algorithm is nested within one more loop. Experiment with changing the + values of your two variables to draw cool patterns.\r\n\r\nFor even more effect, + try playing with color! Use random colors inside loops to see how it changes + your design." + grade5_artist_variables_freeplay15_instruction: "Want a second peek at the + inspiration design or the hints? Click here!\r\n\r\nOtherwise, make a design + all your own!" + grade5_artist_variables_freeplay16_instruction: "Still playing? Here is a + blank canvas where you can create whatever you want!" + grade5_artist_variables_hexagons1_instruction: "Let's try it again! \r\n\r\nCan + you set the `length` variable to 60 to make this cool design with hexagons?" + grade5_artist_variables_letterT11_instruction: "Here’s more complicated code + using the same concepts from the last puzzle - what should you set the \"sides\" + variable to in order to draw this picture made of squares?" + grade5_artist_variables_new1_instruction: "Here is a program that will create + an image. There are a few things that are wrong with it." + grade5_artist_variables_octagons13_instruction: "When a shape has lots of sides, + each side needs to be shorter if you want the whole pattern to fit on the + screen. \r\nLet's recreate the algorithm for this amazing pattern, but instead + of manually setting the `length` variable, let's use a math block with the + `sides` variable inside to make sure that each shape fits correctly. The perimeter + of each polygon is 300 pixels.\r\nNeed some hints? Click here." + grade5_artist_variables_pentagon8_instruction: "Use what you learned in the + last puzzle to create this hexagon using the \"sides\" variable.\r\n\r\nSee + how you could change just one value to draw a triangle, square, pentagon, + or octagon?" + grade5_artist_variables_pentagon9_instruction: "Now, recreate the algorithm + from the last level and create a pentagon with sides of length 150." + grade5_artist_variables_pentagons1_instruction: "Draw this pattern of pentagons + with 100 pixel sides by setting the right value for `length` and dropping + the `length` variable into all of the the correct places. \r\n\r\nSee how + you only have to set the value for `length` once, and the code uses the right + value everywhere?" + grade5_artist_variables_pentagons12_instruction: "Let's set the \"sides\" + variable to 5. The more sides we add to this algorithm, the bigger this whole + pattern gets! Notice that there is another variable called \"length\". We + can now use that wherever we have a \"move forward.\" Set the \"length\" variable + to 75 for this shape." + grade5_artist_variables_rectangle6_instruction: "Now I want to make a rectangle + that is twice as tall as it is wide. We've got a variable called \"width\" + that needs to be set to 100. Can you use the math blocks to complete the code?" + grade5_artist_variables_square7_instruction: "Here’s some code that can draw + any regular polygon. There’s a new variable called sides that is set to 4. + Can you use the sides variable (along with the math block) to turn the right + amount regardless of how many sides there are in the polygon?\r\n\r\nClick + here to go back to the hint!" + grade5_artist_variables_triangles2_instruction: "Instead of using \"move forward + by 150,\" the \"move\" block is now referencing a variable called \"length.\" + Can you set \"length\" to 150 to draw this new triangle?" + grade5_artist_variables_triangles3_instruction: "Drag a number block to both + the `set length` block and the `repeat _ times` block to draw a set of 50 + pixel triangles. " + grade5_bee_for_loops1_instruction: "Use a loop to collect the nectar from each + flower." + grade5_bee_for_loops10_instruction: "What should your increment be to collect + 15, then 12, then 9, 6, 3 nectar?" + grade5_bee_for_loops11_instruction: "**Challenge:** Take what you've learned + about `for` loops and try to solve this problem. " + grade5_bee_for_loops2_instruction: "Add the code necessary to make sure the + bee collects all the nectar. Look at how much code you need for this puzzle! + (We'll learn a simpler way in the next puzzle.)" + grade5_bee_for_loops3_instruction: "Try this puzzle using the `for` loop with + `counter` variable and see how much shorter your code becomes." + grade5_bee_for_loops4_instruction: "Help the bee collect all of the nectar." + grade5_bee_for_loops6_instruction: "You can also use a \"for loop\" to count + down. Try gathering this nectar by counting down from 5 to 1 by 1." + grade5_bee_for_loops7_instruction: "Try collecting these flowers using an increment + of 2." + grade5_bee_for_loops8_instruction: "You've got this! What should your increment + be to collect 3, 6, 9, 12, 15 nectar?" + grade5_bee_for_loops9_instruction: "Use the `counter` variable to navigate + this garden with the fewest number of blocks possible." + grade5_bee_parameters_new8_instruction: "That's a great function you've created! + You are officially on your own now. Collect all the nectar. Make all the honey." + grade5_bee_parameters_new9_instruction: "Bonus Challenge! If you are feeling + ambitious, try this puzzle. It is possible to collect all of the nectar and + make all of the honey using only a For loop, a Repeat loop, a function call, + and a turn. Try it all on your own, or view the hints to build it step-by-step. + Great job with this stage!" + grade5_pixelation_instruction: "Encode an image of anything you like using + binary. The binary language will be represented with '0' and '1' only." + grade5_playlab_freeplay_instruction: "It's free play time! Have fun with all + the blocks in your tool box. " + grade5_playlab_parameters_points1_instruction: "Here's the same game but most + of the code is hidden. We've added a new function called `score_points.`\r\n\r\nAdd + a new parameter called `points` to the `player_score` function. \r\n\r\nThe + `score_points` function should be able to both add and remove points from + `player_score` depending on which actor is hit.\r\nChanging the score by 1 + will add a point, while changing the score by -1 will subtract a point.\r\n\r\nWhen + you're done, click \"Run\" to play. When Dog scores 6 points, you will move + on to the next puzzle. " + grade5_playlab_variables1_instruction: "This time you don't have to write + any code, just hit \"Run\" to play the game! In this game, you're the dog + who is trying to collect more flags than the cat. Use the down arrow to control + the dog. Press \"Finish\" when you're done playing." + grade5_playlab_variables10_instruction: "Edit the the \"patrol\" function to + add an \"actor\" parameter, so that we can call it for each of the actors + on the screen. Remember, the actors correspond to numbers 1, 2, and 3." + grade5_playlab_variables11_instruction: "Add another parameter called \"speed\" + to the \"patrol\" function. Try using a \"set speed\" block with the new \"speed\" + parameter to help Penguin get both flags before the other sprites even get + one." + grade5_playlab_variables12_instruction: "Let's have some fun! Look at the + code provided to see if you can figure out what each block does. \r\nWhen + you're done, use the arrow keys to control Dog and collect all of the flags.\r\nNOTE: + You don't need to make any changes to the program" + grade5_playlab_variables13_instruction: "Use the `when actor touches` block + to send Dog back to the top-left ONLY if Dog touches any of the other actors." + grade5_playlab_variables14_instruction: "It's free play time! Have fun with + all the blocks in your tool box. " + grade5_playlab_variables1ask_instruction: "This time, when you press 'run', + you will see a 'prompt' asking you for a number. This number will be stored + in a variable used to set the dog's speed.\r\n\r\n\r\nPay attention to how + this program is written!" + grade5_playlab_variables2_instruction: "The race in that last puzzle wasn't + very fair! Change the `dog_speed` variable to make sure you can collect more + flags than Cat. The first to collect 10 flags wins!" + grade5_playlab_variables3_instruction: "Use the left and right arrows to move, + and the up arrow to jump. See if you can collect all of the flags." + grade5_playlab_variables4_instruction: "Now we're using a variable called + \"height\" to control how high the dog can jump. Update the \"height\" variable + so that the dog can jump high enough to reach all the flags." + grade5_playlab_variables5_instruction: "You've seen now how a variable can + be used to set the height of an actor's jump. How else could you use a variable?\r\n\r\nLet's + build a game! First we'll need a score. Try setting the 'points' variable + to give yourself 10 free points!" + grade5_playlab_variables6_instruction: "Use the right arrow to throw pie.\r\n\r\nIn + our game, how should we score points? Add 1 to your \"points\" variable each + time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" + event to trigger an update to your score. You can increment your variable + by setting \"points = points + 1.\" Get your score up to 10 (going one at + a time!) to pass the level." + grade5_playlab_variables6ask_instruction: "This time, you need 100 points to + win! Don't worry though, you can choose how many points you earn each time + you score a hit!\r\nTry adding the `ask` block and changing the number 1 out + for the variable `value`." + grade5_playlab_variables7_instruction: "Nice, now let's make sure this game + isn't too easy to play. Any time Dog (actor 1) gets hit by a sandwich from + Cat (actor 2), you should lose a point. Start with 10 points so it's not + too hard. Let your score drop down from 10 to 0 to pass the level." + grade5_playlab_variables71_instruction: "Here's our game from an earlier stage, + but most of the code is hidden. There’s a new function `score_points.`\r\n\r\nEdit + the function so that a new parameter called `points` can be added to `player_score`. + \r\n\r\nThe variable `player_score` should increase each time Dog tags Cat + with pie, and decrease each time that Cat tags Dog with a sandwich.\r\n\r\nNote: + When you're done, click \"Run\" to play. When Dog scores 6 points, you will + move on to the next puzzle. " + grade5_playlab_variables81_instruction: "We've added one last function for + you. \r\n\r\nUse an \"if\" statement to program your game to call the \"level_up\" + function only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor + example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 + to move to the next puzzle. " + grade5_playlab_variables9_instruction: "Here's a function called `patrol`. + \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 pixels." + grade5_playlab_variables_freeplay_instruction: "Free Play time! Here are all + of the variables we've played with so far in this stage, as well as a few + more in case you want them. \r\n\r\nNotice that there are now so many blocks + in our toolbox that they need to be organized! Here, we've put each piece + into an appropriate category. Take some time to explore everything that is + available. When you're done browsing, make a game or story using repeats, + variables, and events. \r\n\r\nHint: scroll down to see all the commands + in the workspace." + grade5_playlab_variables_jump1_instruction: "This puzzle uses a hidden function + that makes the dog jump when the 'up' arrow is pressed. The height of the + jumps can be set at the start of the game using the 'jumpPower' variable. + Try to touch all of the flags!" + grade5_prompt_test_instruction: "Variables aren't always numbers. What if + you wanted to store a word or text? Experiment with the new `ask` block." + gradeK_sequence_4_instruction: "Try this one yourself from the beginning." + gradek_adventurer_loops1_instruction: "Three piles of gold! Collect all three." + gradek_adventurer_loops10_instruction: "Help me get all of the gold from this + cave." + gradek_adventurer_loops2_instruction: "How can Laurel collect all five piles + of gold using only one `[E-->]` block?" + gradek_adventurer_loops3_instruction: "Can you fix Laurel's path to get all + of this gold?" + gradek_adventurer_loops4_instruction: "Use what you learned to get all of the + coins." + gradek_adventurer_loops4a_instruction: "Add to this code to collect all of + the coins." + gradek_adventurer_loops5_instruction: "What should you add to this code to + get all of the gold?" + gradek_adventurer_loops6_instruction: "Write the code to get all of this gold." + gradek_adventurer_loops7_instruction: "Write the code to get all of this gold." + gradek_adventurer_loops7_challenge_instruction: "**Challenge:** The gold goes + all the way up these stairs! Write the code to help me get it all." + gradek_adventurer_loops8_instruction: "Help me get all of the gold from this + deep valley." + gradek_adventurer_loops9_instruction: "Help me get all of the gold from this + cave." + gradek_adventurer_loopsFP_instruction: "Eureka! Collect as much gold as you + can!" + gradek_adventurer_loopsPre_instruction: "This is Laurel the Adventurer. Mover + her around and get as much gold as you can!" + gradek_artist_loops1_instruction: "Help the artist draw this line two times + forward." + gradek_artist_loops2_instruction: "Our artist is trying to draw a line five + times, but can't get it right. Can you help?" + gradek_artist_loops3_instruction: "Now, use a `repeat` loop to draw this line + five times!" + gradek_artist_loops4_instruction: "Draw a line seven steps long. This will + become our horizon." + gradek_artist_loops5_instruction: "Let's put a nice hill in the back." + gradek_artist_loops6_instruction: "Use the `repeat` loop to add waves to the + water." + gradek_artist_loops7_instruction: "We need a ladder up to the boat." + gradek_artist_loops8_instruction: "Challenge: The stairs down to the dock are + broken. Help me fix them." + gradek_artist_loops9_instruction: "Time to head back to land. Help me put down + stones so I don't fall in!" + gradek_artist_loopsA_instruction: "Help me build steps to watch the ship sail + away." + gradek_artist_loopsFP_instruction: "The artist saw something funny in the distance. Draw + what you think he saw." + gradek_artist_loopsPre_instruction: "This is a new type of puzzle called \"Artist\". + Play with the level and draw something fun." + gradek_playlab_events1_instruction: "Make your robot say \"Hello!\" when the + button is clicked." + gradek_playlab_events1a_instruction: "Add a block so that when you click the + \"up\" button, Olive the Cat walks up." + gradek_playlab_events1c_instruction: "Jorge the Dog wants to say \"Hi there.\" Can + you help him?" + gradek_playlab_events2_instruction: "Edit the code so that when the second + bird is clicked, your program plays a sound!" + gradek_playlab_events2a_instruction: "Add a block so that when you click \"down\" + Olive the Cat walks down." + gradek_playlab_events2c_instruction: "Help Jorge the Dog get moving by connecting + the `move left` block to the `when left` event block that is already in the + workspace." + gradek_playlab_events3_instruction: "When the third bird is clicked, the background + should change to a city. Can you add code to make this happen?" + gradek_playlab_events3a_instruction: "When the third bird is clicked, the background + should change to a city. Can you add code to make this happen?" + gradek_playlab_events3b_instruction: "Add a button so that Olive the Cat moves + right when you click the \"right\" button." + gradek_playlab_events3c_instruction: "Now, get Jorge to move right when the + `right` button is clicked." + gradek_playlab_events4_instruction: "Add code to make something happen when + the fourth bird is clicked. Be creative!" + gradek_playlab_events4a_instruction: "Add a block so that Olive the Cat moves + left when you click the \"left\" button." + gradek_playlab_events4c_instruction: "Add events to have Jorge move up and + down when the `up` and `down` buttons are pressed." + gradek_playlab_events5_instruction: "About My Robot Project! Write code so + that clicking on each bird shows a new fact about your robot." + gradek_playlab_events5a_instruction: "About My Robot Project! Write code so + that clicking on each bird shows a new fact about your robot." + gradek_playlab_events5c_instruction: "Make this more interesting by changing + the background and playing a random sound when Jorge is clicked." + gradek_playlab_eventsA_instruction: "Now, have the cat change to a random size + AND have it play a random sound when you click the center button." + gradek_playlab_eventsFP_instruction: "Add anything you want to this game. Can + you make the dinosaur disappear when Jorge runs into him?" + gradek_playlab_eventsPre_instruction: "This is a Play Lab level. Move blocks + to the workspace and see what happens!" + group test_instruction: "Make a game" + harvey_pixelation_instruction: "Encode an image of anything you like using + binary. The binary language will be represented with '0' and '1' only." + jessie-test_instruction: "Lots of instructions" + k-1 maze 1_instruction: "Can you make me move West to get to the pig?" + kikiTesta_instruction: "Our adventurer wants to collect coins. But she can + only use 4 blocks to get them.\r\n\r\nCan you help her grab as many as she + can using just 4 blocks?" + kikiTesting_instruction: "See all angles of Stevie and Jorge" + level 'grade3_Loops_10_instruction: "Such a busy bee!\r\n\r\nHelp bee collect + all of the nectar and make all of the honey with the fewest blocks possible." + level 'grade3_Loops_11_instruction: "The shape of this path is different than + the others. \r\n\r\nCan you collect all of the nectar using as few blocks + as possible?" + level 'grade3_Loops_12_instruction: "Can you find the quickest way for the + bee to collect all of the nectar and make all of the honey?" + level 'grade3_Loops_2_instruction: "This time, use a loop to gather all of + the nectar." + level 'grade3_Loops_3_instruction: "Use a `repeat` loop to collect all of the + nectar." + level 'grade3_Loops_4_instruction: "Now use the `repeat` block to collect all + of the nectar and make all of the honey." + level 'grade3_Loops_5_instruction: "What a beautiful field of flowers! Help + the bee visit each one. Can you find a way to do it with fewer than 7 blocks?" + level 'grade3_Loops_6_instruction: "How many times can loops help you in this + puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete this + puzzle with the fewest blocks possible." + level 'grade3_Loops_7_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + level 'grade3_Loops_8_instruction: "Collect all the nectar and make all of + the honey using the fewest blocks possible." + level 'grade3_Loops_9_instruction: "Collect nectar from each flower and make + honey at each honeycomb using the fewest blocks possible." + level grade3_Loops_2_instruction: "This time, use a loop to gather all of the + nectar." + love_spring_1_instruction: "Let's celebrate Spring! We have put some seeds + in the ground to prepare for the season's flowers. Can you cover them up + so that the birds don't eat them?" + love_spring_2_instruction: "Our flowers are in full bloom! Now we need the + bee to grab nectar from each one so he can make plenty of honey back at his + hive!" + love_spring_3_instruction: "Figure out how to change this code so that Robin + chooses a number between 1 and 20. \r\n\r\nWhen you're ready, press \"Run\" + and play until you guess Robin's number!" + mike3bit_instruction: "We start you with the 4x2 image Maddie was creating, + but we've left out the last few pixels. Finish off the image by figuring + out which colors are missing and encoding them." + mike3bitbird_instruction: "Here's an example of an image made with 3-bit color. + Try changing it to understand how it works. If you want to reset the image, + press \"Start Over\"." + mike3bitfreeplay_instruction: "Make something awesome and share it with your + classmates! You can copy and paste the value of a pixel to use it repeatedly." + mike3bitmario_instruction: "A careless binary coder typed in ONE extra 0 or + 1 somewhere within this image's data. The extra bit that is causing Mario + to glitch out! \r\n\r\nDelete the extra bit to restore Mario back to normal!" + playEventsK1_instruction: "This game is called \"Play Lab\". See if you can + figure out what each block does." + playEventsK2_instruction: "Jorge wants to say \"Hi there.\"\r\n\r\nCan you + help?" + playEventsK3_instruction: "Jorge wants to be scratched behind the ears! Can + you make it so that when you click Jorge he is happy?" + playEventsK4_instruction: "Can you make it so that Jorge the dog chases Robin + the bird when you click the up arrow?" + playEventsK5_instruction: "Now add code so that Robin flies away when you click + the forward arrow." + playEventsK6_instruction: "Have Robin talk back to Jorge when you click on + her." + playEventsK7_instruction: "What else can you do in this fun scene?" + playLabDebugVideo1_instruction: "Jorge the Dog wants to say \"Hi there.\" Can + you help him?" + sample1_instruction: "Our adventurer wants to collect coins. But she can only + use 4 blocks to get them.\r\n\r\nCan you help her grab as many as she can + using just 4 blocks?" + sample10_instruction: "Now you can use loops to draw whatever you like!" + sample10a_instruction: "You have helped the adventurer and her bee! As a reward, + please stay and play around in my magical village. \r\n\r\nYou should have + everything you need to create a game of your own." + sample2_instruction: "Use what you've learned to help bee gather all of this + honey using only the blocks that you have here." + sample2a_instruction: "Use what you've learned to help bee gather all of this + honey using only 4 blocks." + sample3_instruction: "Now you can help bee make all of the honey using just + the blocks in the toolbox." + sample3assessment_instruction: "Can you figure out how to gather all of this + nectar in just one try?" + sample4_instruction: "Our adventurer has found a stash of coins in this cave.\r\n\r\nCan + you help her grab as many as she can using just 7 blocks?" + sample5_instruction: "Help bee make all of the honey." + sample6_instruction: "Challenge: Help bee get all of the nectar." + sample7assessment_instruction: "Can you help bee make all of the honey in just + one try?" + sample8_instruction: "Look at this trove of coins! How many can you get the + adventurer to grab?" + sample9_instruction: "Use loops to help the artist connect all of the dots. " - U4 - Objects - dotNotation_instruction: "Use dot notation to display individual - properties of the object. (Click to see full instructions)" - U4 - Objects - eventHandlersToSwitchScreen_instruction: "Attach event handlers - to the \"Add Contact\" and \"Go Back\" buttons that allow the user to switch - screens. (Click to see full instructions)" - U4 - Objects - eventParameter_instruction: "Trigger both the keyboard and mouse - event and examine the event objects displayed in the console. Why might an - object be the best way to store this information? (Click to see full instructions)" - U4 - Objects - exemplarContactsApp_instruction: "Use the Contacts app and then - add a contact of your own. (Click to see full instructions)" - U4 - Objects - loopingArray_instruction: "Loop over your array of students - and print the name of every students. (Click to see full instructions)" - U4 - Objects - loopingArray2_instruction: "Loop over your array of students - and print the name and grade of every student. (Click to see full instructions)" - U4 - Objects - loopingCompoundConditions_instruction: "Loop over the array - of students and display the information of students who are present and in - the 11th grade. (Click to see full instructions)" - U4 - Objects - loopingConditions_instruction: "Loop over your array of student - objects and display the names of every student who is present in class. (Click - to see full instructions)" - U4 - Objects - pullValues_instruction: "Create an event handler for the \"Save - Contact\" button that displays the contents of the 4 text input fields in - the console. (Click to see full instructions)" - U4 - Objects - readStarterCode_instruction: "Familiarize yourself with the - starter code and UI elements provided. (Click to see full instructions)" - U4 - Objects - resetIndexAndShow_instruction: "Add code to your event handler - for the \"Save Contact\" button so that when a new contact is added, the inputs - are cleared, the screen is switched, and the correct contact is shown. (Click - to see full instructions)" - U4 - Objects - showContact1_instruction: "Add code to the showCurrentContact - function to show the name of the contact stored at the currentIndex of your - array. (Click to see full instructions)" - U4 - Objects - showContact2_instruction: "Add the phone number and birthday - text to your text area. (Click to see full instructions)" - U4 - Objects - showContact3_instruction: "Display the image information for - each contact. (Click to see full instructions)" - U4 - Objects - showSampleImage_instruction: "Attach an event handler to the - image URL text input so that the user can confirm their image will work as - expected. (Click to see full instructions)" - U4 - Objects - writeWrap_instruction: "Use the wrap function to prevent currentIndex - from leaving the bounds of your array. (Click to see full instructions)" - U4 - Read Record - 1.2_instruction: "Place a console.log command below the - readRecords command. (Click to see full instructions)\r\n" - U4 - Read Record - 1.3_instruction: "Add a console.log command inside the callback - function. (Click to see full instructions)\r\n" - U4 - Read Record - 1_instruction: "Use console.log to display the records returned - by a call to readRecords. (Click to see full instructions)\r\n" - U4 - Read Record - 2_instruction: "Change the table name so that the records - are read from the new table. (Click to see full instructions)\r\n" - U4 - Read Record - 3_instruction: "Change the name of the table in a readRecords - command to read from a table that does not exist. (Click to see full instructions)\r\n" - U4 - Read Record - 4.1_instruction: "Use indexes and dot notation to reference - values in the response from the database. (Click to see full instructions)\r\n" - U4 - Read Record - 4_instruction: "Print out each record return from the readRecords - call individually. (Click to see full instructions)\r\n" - U4 - Read Record - 5_instruction: "Using a for loop, display the title of each - movie in your database. (Click to see full instructions)\r\n" - U4 - Read Record - part 1 - template_instruction: "Use console.log to display - the records returned by a call to readRecords. (Click to see full instructions)\r\n" - U4 - ReadRecords - Contacts App 1_instruction: "Use readRecords to copy the - data in your database into your \"contacts\" global variable and call showCurrentContact. - (Click to see full instructions)" - U4 - ReadRecords - Contacts App 2_instruction: "Create a function called refreshLocalData. - (Click to see full instructions)" - U4 - ReadRecords - Contacts App 3_instruction: "Add a call to \"refreshLocalData\" - to the callback function of the createRecord you use to add a new contact - to your database. (Click to see full instructions)" - U4 - ReadRecords - Contacts App 4_instruction: "Create a \"Delete\" button. - (Click to see full instructions)" - U4 - ReadRecords - Contacts App 5 make delete work_instruction: "Create an - event handler for the \"Delete\" button you created. (Click to see full instructions)" - U4 vigenere cipher 2_instruction: "Instructions" - U4L02 - Objects - createObject_instruction: "Create an object with at least - 5 values including at least one string and one number. (Click to see full - instructions) " - U4L02 - Objects - eventParameter_instruction: "Trigger both the keyboard and - mouse event and examine the event objects displayed in the console. Why might - an object be the best way to store this information? (Click to see full instructions)" - U4L02 - Objects - Template1_instruction: "Template" - U4L06 Data Storage 1_instruction: "Fill in your name instead of \"Enter Your - Name\", run the app and click the button. Run it multiple times with different - names! Watch the console and use the ‘View Data” button to see how the table - is updated. As you play around make sure you can explain the purpose of each - of the circled parts of the diagram.\r\n\r\n" - U4L06 Data Storage 2_instruction: "The app is a continuation of the previous - one we started. Add a text label to collect the users name and use that as - the data input for the record.\r\n\r\nRun the app and click the button multiple - times and see what happens. Is there a problem you notice? " - U4L06 Data Storage 3_instruction: "We want to improve the user experience. - Once they have submitted their data for storage, it would be nice to clear - the textbox. Update your app to clear the textbox after the data is stored." - U4L06 Data Storage 4_instruction: "Add a label and drop down box, to your app - and save the data to your JSON object and add it to your table. Make sure - to reset the dropdown after the data is stored." - U4L06 Data Storage 5_instruction: "Add a couple radio buttons or checkboxes - to our app. Then find a way to collect the data from those. " - U4L06 Data Storage 6_instruction: " Use one of the getTime() and getUserId() - blocks to collect additional data. " - U4L06 Data Storage 7_instruction: "Add a second screen to the sample app we - have been building to capture an image from a user. Return to screen 1 after - the JSON object has been stored in the table." - U4L15 Read Data 1_instruction: "Run the level and see what happens. Then edit - the code to make it print a different column of information." - U4L15 Read Data 2_instruction: "Student should create a sentence which puts - together all the pieces from a record.\r\n\r\n<> is <> years old - and like <>" - U4L15 Read Data 3_instruction: "Print the sentence using the first JSON object - in the array\r\n\r\n" - U4L15 Read Data 4_instruction: "\r\nUse a random record from the list of records - to display your sentence." - U5 if-else-if movie example_instruction: "Add an else-if statement in order - to tell the user if their guess is high or low instead of just wrong. (Click - to see full instructions)" - U6 - Final Project - Project Level_instruction: "Build your final project here. - (Click to see full instructions)" - U6 - updateRecord - Callback Success Parameter_instruction: "Add an if-else - block inside the callback function for updateRecord. (Click to see full instructions)" - U6 - updateRecord - Contacts - Edit event handler_instruction: "Write event - handlers for the Edit Contacts UI elements. (Click to see full instructions)" - U6 - updateRecord - Contacts - Edit UI_instruction: "Set up the UI elements - needed to edit contacts. (Click to see full instructions)" - U6 - updateRecord - Contacts - Save edited contact_instruction: "Use updateRecord - to store the user's edits in the database. (Click to see full instructions)" - U6 - updateRecord - Default Block_instruction: "Use updateRecord to change - the record for \"Eye of the Tiger.\" (Click to see full instructions)" - U6 - updateRecord - Update Nonexistent Record_instruction: "Force updateRecord - to fail by changing the ID of songToUpdate. (Click to see full instructions)" - Underground Avoiding Lava_instruction: "Lava is hiding beneath some of these - blocks, which you'll need to cover up before moving forward. An \"if\" command - will come in handy here. Add a \"move forward\" command in the correct place - to mine these blocks." - Underground If Statements_instruction: "Now things are getting tricky. Mine - 3 redstone, but don’t fall in the lava. Use an \"If\" command to place cobblestone - over any lava you uncover." - Underground Iron_instruction: "Walking into molten lava is a bad idea. Place - cobblestone to create a bridge, then mine at least two of the iron blocks." - Underground Mine in a Circle_instruction: "Find a way to get 5 diamond and - 7 redstone! Try using a repeat command inside a repeat command to walk in - a square.\r\n" - Underground Mining Coal_instruction: "You’ll find the most valuable resources - underground, but it can get dark. Place at least 2 torches and mine at least - 2 coal." - Underground Test Level_instruction: "Collect all of the minerals!" - Unicorn Tag_instruction: "Take a look at this project. Do you see how it was - made?" - Vigenere_instruction: "Test" + sample9a_instruction: "The wizard has found his potions! Use everything you + have learned to help him collect them." + scrat 16 (copy 1)_instruction: "Acorn! Acorn! Acorn! Use an \"if\" block to + get me there with the fewest number of blocks." + scrat 16_instruction: "Acorn! Acorn! Acorn! Use an \"if\" block to get me there + with the fewest number of blocks." + scrat 17 (copy 1)_instruction: "Ok, let's do that again for practice - this + isn't very different, but watch out for the !" + scrat 17_instruction: "Ok, let's do that again for practice - this isn't + very different, but watch out for the wall!" + scrat 18 (copy 1)_instruction: "The \"If-else\" blocks checks a condition, + and then does one thing OR another. To get me to the acorn try to use this + new block." + scrat 18_instruction: "The \"If-else\" blocks checks a condition, and then + does one thing OR another. To get me to the acorn try to use this new block." + scrat 19 (copy 1)_instruction: "One more practice of the \"if-else\" block, + can you get it right on your first try?" + scrat 19_instruction: "One more practice of the \"if-else\" block, can you + get it right on your first try?" + scrat 20_instruction: "Can you add just 3 blocks to help me solve a more complex + maze? If you do it right, I can walk any curvy path no matter the length. + Hurry! The ice is melting!" + skratDebugVideo1_instruction: "Get Skrat to the Acorn." + template test_instruction: "what's up" + testArtistForTestK_instruction: "The Artist is trying to draw a line five times, + but can't get it right. Can you help?" + test_sarah_instruction: "hi hi" weird_playLab_instruction: "About My Robot Project! Write code so that clicking on each bird shows a new fact about your robot." - WhileAdventure_instruction: "Our adventurer wants to collect coins. Can you - help her grab as many as she can using only one remove 1 block?" - 'Widget: Black and White Pixelation_instruction': "Now make your own image! - We've started you off with a 10x10 canvas but you can make it whatever size - you want. Happy pixeling!" - 'Widget: Color Pixelation_instruction': "Requirements: The icon must be 16x16 - pixels. You must use the Pixelation Widget to encode the bits of color information. - The image must be encoded with at least 12 bits per pixel." - 'Widget: Text Compression_instruction': "Look for patterns (repeated words - or phrases) in the text. Enter the patterns you see into the dictionary on - the right. As you type entries into the dictionary, the symbol for the entry - is inserted into the text in place of the pattern." - XML Scratchpad_instruction: "Using this test level to grab xml for unit tests" diff --git a/dashboard/config/locales/markdown_instructions.en.yml b/dashboard/config/locales/markdown_instructions.en.yml index 8007ba4be9e37..095083314d0ab 100644 --- a/dashboard/config/locales/markdown_instructions.en.yml +++ b/dashboard/config/locales/markdown_instructions.en.yml @@ -455,62 +455,6 @@ en: 4-5 While Loops 4_markdown_instruction: "Wow, look at that! \r\n\r\nI don't know how many shovelfuls of dirt this hole needs. \r\nCan you write a program that keeps using the `fill` block until the ground is even? " - aE1_markdown_instruction: "\r\n\r\n
\r\nFirst, - we need napkins!\r\n\r\nChoose your favorite shape:\r\n - Square (Easy)\r\n - - Triangle (Medium)\r\n - Pentagon (Hard)\r\n\r\n
\r\n
\r\n\r\n" - aE2_markdown_instruction: "\r\n\r\n
Now we need enough for everyone!\r\n

\r\n\r\nLet's - take the shape we just made and line up a row of 14 napkins. \r\n
\r\nIf - you place one loop inside another loop, we call that a nested loop. \r\n\r\nHow - can you loop all of the code from your last stage to make sure all 14 napkins - line up next to each other?
\r\n" - aE3_markdown_instruction: "\r\n\r\n
\r\nWe've - got to have a tablecloth!

\r\n\r\nTake your row of 14 napkins and - sew 14 of those together with another **outer loop** to make a cover for our - table.\r\n
\r\n\r\n" - aE3alternate_markdown_instruction: "\r\n
\r\nThis alternate shows what the image would - look like if the user chose pentagon napkins and modified line weight/color.\r\n
\r\n\r\n" - aE3alternateB_markdown_instruction: "\r\n
\r\nThis alternate shows what the image would - look like if the user chose triangle napkins and got bold with the code.\r\n
\r\n\r\n" - aE4_markdown_instruction: "\r\n
\r\nOh No! Our napkins are too small! \r\n

\r\nWe - need to have the napkins twice as big and still keep the tablecloth the same - size. What numbers can you change to make that happen?\r\n

\r\n(as - shown in triangles)\r\n
\r\n\r\n" - aE5_markdown_instruction: "\r\n
\r\nLet's pull the look together with some window - decorations!\r\n

\r\nHere is your original code for drawing a line - of napkins. Piece 4 lines together to make a pattern that goes around your - window frame.\r\n
\r\n\r\n" - aE6_markdown_instruction: "
\r\nThe guests are going to need something to sit on!\r\n

\r\nThe - artist has an idea to make some fun chairs. How many times do you need to - loop this to draw half of a circle?\r\n
" - aE7_markdown_instruction: "
\r\nHow about some streamers?\r\n

\r\nIf you create another - loop like this one, but turn left instead of right, what happens? \r\n\r\nCan - you repeat all of that to draw this wave?\r\n
" - aE8_markdown_instruction: "
\r\nThe artist wants to give picture frames as party favors!\r\n

\r\nLet's - loop the code from our streamers four times to create this frame. \r\n

We've - added a special block called `curvy corner` to give you fancy round corners!\r\n
" - aEfreeplay_markdown_instruction: "
\r\nFree Play:\r\nFor a final touch, we need - some ornaments to hang around the house.\r\n

\r\nCan you design a - decoration to spice up the party?\r\n
\r\n
\r\n

\r\n
\r\nNeed - Ideas?\r\n
\r\n
\r\nTry making a tablecloth full of diamond - napkins! \r\n \r\n
\r\n
\r\nMake an ornament! \r\n \r\n
\r\n\r\n
Make something completely new! \r\n \r\n
\r\n\r\n\r\n
\r\n

\r\n\r\n" AlgPD DR Free Play_markdown_instruction: "Using a word problem from your existing curriculum or elswhere, complete the Design Recipe and program a function. Use a Design Recipe form from your workbook or download a copy [here]('https://code.org/curriculum/algebra/docs/worksheets/design_recipe.pdf')." @@ -533,70 +477,10 @@ en: what you should do - you can come back to watch this as many times as you need to get it right.\r\n" - allthethings data blocks test_markdown_instruction: "Please sign in to test - applab levels (By design, applab levels only work if signed in. Normally, - we make people sign in, but this is only enforceable for a whole script and - would be annoying to do for the allthethings script)." - allthethings design mode elements_markdown_instruction: "Please sign in to - test applab levels (By design, applab levels only work if signed in. Normally, - we make people sign in, but this is only enforceable for a whole script and - would be annoying to do for the allthethings script).\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\nEnd - of instructions that are long." - allthethings level dataTables_markdown_instruction: "Please sign in to test - applab levels (By design, applab levels only work if signed in. Normally, - we make people sign in, but this is only enforceable for a whole script and - would be annoying to do for the allthethings script)." - allthethings_embed_video_markdown_instruction: "Siri is a digital assistant - built into Apple's iOS devices, including iPhones and iPads. Watch the advertisement - for Siri, below. \n\n\n\n
\n__Reflect on the prompts - below:__ \n\n- What types of information does Siri respond to in the video?\n- - What do you think Siri is paying attention to in order to create these answers?\n" - allthethings_moviebot_markdown_instruction: "#Please sign in to test applab - levels (By design, applab levels only work if signed in. Normally, we make - people sign in, but this is only enforceable for a whole script and would - be annoying to do for the allthethings script).\n# Introduction to the Digital - Assistant\r\n\r\n__While digital assistants may seem like magic, they are - just elaborate computer programs that parse, or process, text__ looking for - combinations of words to make decisions about what to reply.\r\n\r\nOver the - next few lessons, __you're going to build up your own digital assistant that - responds \"intelligently\" to a user's question__, by making a decision about - what to reply based on the contents.\r\n\r\nYou'll now __explore a demo digital - assistant__, Movie Bot, that represents the kind of program that you'll build - up to. Try out some of the prompts below and also try your own. You'll quickly - find the limits of what this program can and can't do.\r\n\r\n# Do this\r\n__Run - Movie Bot. In the _'enter your question here'_ input, type each of the following - prompts and hit 'enter' __\r\n- 'help'\r\n- 'What is the best PG comedy - movie ever?'\r\n- 'What PG comedy movie should I watch next?'\r\n- 'Could - you please tell me the best romance movie?'\r\n- 'I waNT To WatCH a MovIE!!!'\r\n- - 'What is the capital of Kentucky?'\r\n- Play around! Ask more questions - of Movie Bot and make a prediction about what logic it's using to reply\r\n" - allthethings_template_backed1_markdown_instruction: "Backed by a template #1. - Please sign in to test applab levels (By design, applab levels only work if - signed in. Normally, we make people sign in, but this is only enforceable - for a whole script and would be annoying to do for the allthethings script). - " - allthethings_template_backed2_markdown_instruction: "Backed by a template #2. - Please sign in to test applab levels (By design, applab levels only work if - signed in. Normally, we make people sign in, but this is only enforceable - for a whole script and would be annoying to do for the allthethings script)." - allthethings_U3 - Simple Drawing - Rectangle Width and Height_markdown_instruction: "# - Drawing Rules\r\n\r\nSo what did you discover on the last level?\r\n\r\n* - What do each of the 4 openings control?\r\n\r\n\t* First Opening - controls - the **location of the rectangle from left to right** - we call this the **x - position**\r\n * Second Opening - controls the **location of the rectangle - from top to bottom** - we call this the **y position**\r\n * Third Opening - - controls the **width** of the rectangle\r\n * Fourth Opening - controls - the **height** of the rectangle\r\n\r\n* What is the size of the drawing area?\r\n\r\n\t* - Width - 400\r\n * Height - 400\r\n\r\n* So where is (0,0) or x = 0 and - y = 0?\r\n\r\n\t* The **upper left corner of the grid!**\r\n\r\n# Do This\r\n\r\nWe - have provided you with code for a rectangle that draws in the upper left corner - when you run the program. Using your new knowledge of the workspace and the - inputs for a rectangle:\r\n\r\n* **Change the width and height of the rectangle - so that it fills the whole drawing area**\r\n* **HINT:** Remember that the - rectangle block is `rect(x, y, width, height)` in that order" App Lab test_markdown_instruction: "Innovation Project" + AppLab_test02_markdown_instruction: "#This is the title \r\n\r\n- bullet 1 + \r\n- do this\r\n- then this\r\n\r\n![](https://images.code.org/982f9167cf54c24251922fbd0a7f60b3-image-1436470853351.png)" Applab allthethings onRecordEvent_markdown_instruction: "Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and @@ -605,73 +489,11 @@ en: Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and would be annoying to do for the allthethings script)." - AppLab_test02_markdown_instruction: "#This is the title \r\n\r\n- bullet 1 - \r\n- do this\r\n- then this\r\n\r\n![](https://images.code.org/982f9167cf54c24251922fbd0a7f60b3-image-1436470853351.png)" Artist Inspiration_markdown_instruction: "\r\n\r\n**Free-Play Inspiration:** You've now learned everything you need to know to make a pattern like this! \r\n\r\nIf this picture inspires you, try to make something similar. Otherwise, create something all your own.\r\n\r\nNotice: We've used the `set alpha` block to make the \"petals\" fade toward the outside." - artistDebugVideo1_markdown_instruction: "
\r\nUse the `repeat` loop to add waves to the - water.
\r\n
\r\n\r\n\r\n" - artistLoopsK2_markdown_instruction: "
\r\nNow, use a `repeat` loop to draw this line - five times!

\r\n
\r\n\r\n\r\n" - artistLoopsK2gradek_artist_loops3_markdown_instruction: "
\r\nNow, use a `repeat` - loop to draw this line five times!

\r\n
\r\n\r\n\r\n" - artistLoopsK3_markdown_instruction: "
\r\nDraw a line eight steps long. This will - become the land for our kingdom!

\r\n
\r\n\r\n\r\n" - artistLoopsK4_markdown_instruction: "
\r\nNow we need a castle with a draw bridge. Fix - the code so that the bridge lays straight instead of falling down.

\r\n
\r\n\r\n\r\n" - artistLoopsK5_markdown_instruction: "
\r\nNow we need to fix the top of the castle. - Can you loop the code three times?

\r\n
\r\n\r\n\r\n" - artistLoopsK6_markdown_instruction: "
\r\nSomeone is stuck in the tower! Fix the - stairs to set them free.

\r\n
\r\n\r\n\r\n" - artistLoopsK7_markdown_instruction: "
\r\nThis tower is lovely, what is downstairs? - Build another staircase to find out!

\r\n
\r\n\r\n\r\n" - artistLoopsK8_markdown_instruction: "
\r\nWow! There's a garden over there! Help - fix these stairs so I can get to it.

\r\n
\r\n\r\n\r\n" - artistLoopsK9_markdown_instruction: "
\r\n**Challenge:** Lovely! Let's take a walk - around the garden.

\r\n
\r\n\r\n\r\n" - artistLoopsKA_markdown_instruction: "
\r\nThese stones are in the wrong place. Help - me move them so I don't fall in!

\r\n
\r\n\r\n\r\n" - artistLoopsKB_markdown_instruction: "
\r\nLook! It's a theater. Help me set up - the chairs so we can all see the stage.

\r\n
\r\n\r\n\r\n" - artistLoopsKFP_markdown_instruction: "Picture time! Use what you have learned - to draw a picture of what you think the Artist saw on stage.\r\n\r\n
\r\n

Ideas

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n

A Singing Snail



\r\n		\r\n
\r\n

A Big City



\r\n		\r\n
\r\n

A Concert



\r\n		\r\n
\r\n

A Birthday Cake



\r\n
\r\n" - beeDebugVideo1_markdown_instruction: "Collect all of the nectar." Bergeron Robot Maze1_markdown_instruction: "Can you help me catch the naughty pig? \r\n\r\nStack a couple of `move forward` blocks below the `when run` block and press \"Run\". " @@ -781,14652 +603,12374 @@ en: how different your drawings look!\r\n\r\n" Brand Book Example_markdown_instruction: "# Brand Book\r\n\r\nCheck out the example of a brand book\r\n\r\n" - Calc Circles of Eval .1_markdown_instruction: "You’ll be writing a kind of - code called Evaluation Blocks, because each block of code evaluates to a single - value. Change the ??? in this code so that the block evaluates to 5." - Calc Circles of Eval .2_markdown_instruction: "This Evaluation Block is a multiplication - function which takes two numbers and returns the product of those numbers. - Edit this block so that it multiplies 2 * 5" - Calc Circles of Eval .3_markdown_instruction: "Here's a function for addition - which takes two numbers and returns their sum. Use this Addition Block to - add 3 + 6." - Calc Circles of Eval .4_markdown_instruction: "Here we've nested an Addition - Block inside a Multiplication Block. Complete this code so it multiplies 3 - by (4 + 1)" - Calc Circles of Eval 2_markdown_instruction: "Use a Multiplication Block to - complete this code." - Calc Circles of Eval 3_markdown_instruction: "Complete the Evaluation Blocks - to match this statement." - Calc Circles of Eval 4_markdown_instruction: "This code is missing a couple - of Evaluation Blocks - make sure you put everything in the right order." - Calc Circles of Eval 7_markdown_instruction: "Complete the Evaluation Blocks - to match this statement." - Calc Circles of Eval 8_markdown_instruction: "Complete the Evaluation Blocks - to match this statement." - Calc Circles of Eval 9_markdown_instruction: "Complete the Evaluation Blocks - to match this statement." - Calc Circles of Eval Free Play_markdown_instruction: "Free Play: Try using - the Evaluation Blocks to write some equations of your own. How does nesting - the blocks in different ways impact their evaluation?" - Calc Define Funcs 1_markdown_instruction: "Let's look at some more traditional - algebraic functions now. Here's a function translated from the simple algebraic - function `f(x) = x + 1`. What would you expect this function to output if - provided an input of 15?" - Calc Define Funcs 2_markdown_instruction: "Write a function `f` that takes - a parameter `x` and returns `x - 10`. Test your function using `f(15)`." - Calc Define Funcs 3_markdown_instruction: "We don't have to call our function - `f` every time; create a function called `times-ten` that should take a parameter - `x` and return `x * 10`. Once you've created the function, run `times-ten(50)`." - Calc Define Funcs 4_markdown_instruction: "Write a function called `half` that - takes a number `x` and returns half that number. Once you've written the - function, use it to calculate `half(21)`" - Calc Design Recipe 1_markdown_instruction: "Let's use the Design Recipe to - create a function called `cube` - this function should take in a Number and - return that number to the power of 3. Make sure to write two example cases! - When you're done, use your new function to calculate `cube(7)`." - Calc Design Recipe 2_markdown_instruction: "Your school is holding a bake sale, - and you need to track the cost of making each cookie, the money paid, and - the total profit. Cookies cost $0.25 each to make, and sell for $1.50/cookie.\r\nWrite - the function `cost`, which takes in the number of cookies you intend to sell, - and returns the cost of making those cookies.\r\n\r\n_Test your function by - calculating the cost of 42 cookies_" - Calc Design Recipe 3_markdown_instruction: "Write the function `sales` which - takes in the number of cookies sold, and produces the amount of money customers - spent to buy those cookies (each cookie is sold at $1.50).\r\n\r\n_Test your - function by calculating the sales for 135 cookies_" - Calc Design Recipe 4_markdown_instruction: "Using the two functions we just - wrote, write the function `profit`, which takes in the number of cookies you - sold, and gives you back the total profit you make from selling your cookies, - accounting for the cost of baking them.\r\n\r\n_Test your function by calculating - the total profit for 15 cookies_" - Calc Rocket 1_markdown_instruction: "In the last puzzle you wrote a contract - for the function `rocket-height` that states it has a range of Number, domain - of Number, and should return the height of the rocket traveling at 15 m/s - after a given number of seconds. Let's write an example case now for the - height of the rocket at 3 seconds." - Calc Rocket 2_markdown_instruction: "Great, let's do one more example before - writing the function - what should the rocket height be after 30 seconds?" - Calc Vars 1.1_markdown_instruction: "Here we've set the `age` variable to - 17 years. Can you write an expression that calculates `age` in days?" - Calc Vars 1_markdown_instruction: "Variables allow us to name values so that - we can easily refer to them repeatedly throughout our programs. Here's a - variable called `age`. Set its value to your age and click run." - Calc Vars 2.1_markdown_instruction: "Here's a new variable called `age-in-months`. - Use the variable `age` to set `age-in-months`." - Calc Vars 2_markdown_instruction: "Can you write an expression that calculates - `age` in months?" - 'Challenge: Buzzer and LED_markdown_instruction': "# Challenge\r\n\r\nCheck - with your teacher before starting the challenge.\r\n\r\nNow that you know - how to use the LED and buzzer, try creating an app that can play a variety - of different sounds and which uses the LED. You could make a keyboard or synthesizer - that plays various sounds when you click different buttons." - 'Challenge: Input and UI_markdown_instruction': "# Stop\r\n\r\nYou have reached - the end of the lesson. Check in with your teacher to see if you should work - on the challenge level before you start. This is an extra challenge to practice - your skills if you have time. If you don't have time for it no big deal!\r\n\r\n# - Challenge\r\n\r\nGo to - Full Game Lab and try to make your own profile creator like the example - program on this level." - 'Challenge: Lights Picker_markdown_instruction': "# Challenge: More Patterns\r\n\r\nAdd - some more patterns to your app. Find a partner and add their pattern as an - option. Make sure to put each pattern into its own function." - 'Challenge: List of Notes_markdown_instruction': "# Challenge: \r\n\r\nCheck - with your teacher before starting the challenge.\r\n\r\n**Starter Code:** - An array with the name of the 30 buttons on the screen (not including the - New Pattern button) is provided for you. \r\n\r\n**Write Code:** Each time - the New Pattern button is clicked at least one random button from the list - is set to a random color.\r\n" - 'Challenge: Random Button Colors_markdown_instruction': "# Challenge: Random - Button Colors\r\n\r\nCheck with your teacher before starting the challenge.\r\n\r\n**Starter - Code:** An array with the name of the 30 buttons on the screen (not including - the New Pattern button) is provided for you. \r\n\r\n**Write Code:** Each - time the New Pattern button is clicked at least one random button from the - list is set to a random color.\r\n" - 'Challenge: Sunset with Counters_markdown_instruction': "# Challenge: Nightfall\r\n\r\nThink - you've got drawing with counters down? Try this challenge.\r\n\r\nThe color - block can take a 4th input that controls the opacity of the color. You can - click the arrows on the side of the color block to expand this 4th input.\r\n\r\n![](https://images.code.org/7844f8cb46eade7cec452b7a4d98124b-image-1484964689007.10.08 - PM.png)\r\n\r\n# Do This\r\n\r\nThis is your same sunset animation from before. - Can you make the scene slowly change to night?\r\n\r\n![](https://images.code.org/b055142110b0d0ed092d6496447aad6e-image-1463079830043.gif)\r\n\r\n" - Classroom Assessment Techniques_markdown_instruction: "The following link is - a resource that presents the process of designing and using classroom assessment - techniques:" - Classroom Management Tips for School Computer Labs_markdown_instruction: "## - Strategies for Managing a Computer Lab\r\n\r\n\r\nIf you're new to teaching - a computer lab, consider implementing some of the 7 tips for establishing - strong instructional routines, outlined in this article by Angela Watson. - \r\n\r\n

" - 'Collaborative Learning and Group Work: Description and Strategies_markdown_instruction': "The - following link to Cornell University Center for Teaching Excellence provides - a brief description of group learning along with a handful of specific techniques - for designing and implementing group work activities: " - collector example_markdown_instruction: "Collect all the gold using the `collect` - block:\r\n\r\n\r\n " - collectorDebugVideo2_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe - blocks you need are already in the workspace, but not connected. \r\n\r\nPut - these blocks in order to collect all of the gold and solve the puzzle." - collectorSkinVideo1_markdown_instruction: "Move Laurel to the gold, then use - `collect` to pick it up.\r\n\r\nCollect one pile of gold to pass this level." - collectorSkinVideo2_markdown_instruction: "Move Laurel to the gold, then use - `collect` to pick it up.\r\n\r\nCollect one pile of gold to pass this level." - Color Blindness Filter_markdown_instruction: "# Color Blindness Filter\r\n\r\n\r\n\r\n" - Color Contrast Checker_markdown_instruction: "# Color Contrast\r\n\r\nPeople - need to be able to see and read the content on your web page for it to be - useful. Some people might have bad eye sight, others are color blind. How - do you design with these differences in mind? \r\n\r\nOne of the easiest ways - to insure that many people will be able to read the content on your website - is to make sure their is enough contrast between the different colors you - are using together on your site.\r\n\r\nhttp://gomedia.com/zine/tutorials/rule-three-contrast-contrast-contrast/\r\n\r\n\r\n# - Do This\r\n\r\n* Use the color contrast checker to see the difference in contrast - of the different colors you are using together on your site." - Considerations for the 1-to-1 Classroom_markdown_instruction: "## 1-1 Classroom\r\n\r\nIf - you're new to managing a classroom with computers, check out this article - in Education Week, which outlines some important considerations.\r\n\r\n

" - Course 4 Artist 1_markdown_instruction: "Help me draw a box. \r\n(Each line - is 200 pixels long) \r\n\r\n

\r\n\r\n" - Course 4 Artist 10_markdown_instruction: "\r\n\r\n**Play time:** Here - is the code for an interesting shape. \r\n\r\nWhat happens when you repeat - it multiple times, turning between each iteration? \r\n\r\nNotice that the - turns in this shape add up to *420 degrees*, which means that when your artist - is done drawing, it will be facing a different direction than when you started. That - new direction is exactly *60 degrees* to the *right* of where you began.\r\n\r\n
\r\n\r\n

\r\n
\r\nRepeat - 4\r\n
\r\nIf you want to come full circle in just 4 repetitions, - you need the artist to turn a total of **360 degrees/4 = 90 degrees** each - time. You can do that by adding an extra `turn right by 30 degrees` block - to the outer loop (since **60+30 = 90**.) \r\n
\r\n\r\n

\r\n
\r\n

\r\n\r\n

\r\n
\r\nRepeat - 6\r\n
\r\nWhen you repeat the shape as-is 6 times, you get - a total rotation of **6x60 degrees** which is a full **360 degree** cycle. \r\n\r\n
\r\n

\r\n\r\n

\r\n
\r\nRepeat - 12\r\n
\r\nIf you want to repeat the image 12 times, you - need the artist to turn a total of **360 degrees/12 = 30 degrees** each iteration. That - means you will need to adjust the artist back a bit with `turn left by 30 - degrees` before you repeat the shape again.

\r\n\r\n
\r\n

\r\n\r\nNow - it's your turn! Can you recreate each image by repeating the starting shape? " - Course 4 Artist 11_markdown_instruction: "\r\n\r\nNow for a challenge! \r\n\r\nHere is a design that - uses only blocks that you have already been shown. Can you figure out how - to recreate it? Feel free to use trial and error. You are not expected to - get it perfect the first time.\r\n\r\nThe repeated shape is almost identical - to the one from the last puzzle, except that the length used in the first - loop is a little smaller. " - Course 4 Artist 12_markdown_instruction: "\r\n\r\nFree Play Inspiration: You've now learned everything - you need to know to make a pattern like this! If this picture inspires you, - try to make something similar. Otherwise, create something all your own. \r\n\r\n
\r\n" - Course 4 Artist 13_markdown_instruction: "Still playing? Here is a blank canvas - where you can design anything you want!" - Course 4 Artist 2_markdown_instruction: "Can you use a loop to draw the greyed - out square? \r\n(Each side is 300px long)" - Course 4 Artist 20_markdown_instruction: "Still playing? \r\n\r\nHere is a - blank canvas where you can create whatever you want!" - Course 4 Artist 3_markdown_instruction: "Try to figure out what happens if - you run this code (or press \"Run\" to test it). \r\n\r\nThen, repeat it - enough times to complete the drawing." - Course 4 Artist 4_markdown_instruction: "How many degrees are in a circle? \r\nFill - in the repeat block with that number to create a circle of colors." - Course 4 Artist 5_markdown_instruction: "Draw the other half of this design - so it's symmetrical. \r\nThe triangles are equilateral and are 50 pixels - long. \r\n\r\nYou may have to run the code several times to figure out all - of the blocks that need to be added." - Course 4 Artist 6_markdown_instruction: "Complete the code to draw these three, - equilateral triangles." - Course 4 Artist 7_markdown_instruction: "Now nest this loop inside another - loop to draw 10 triangles. " - Course 4 Artist 8_markdown_instruction: "Draw this sun by looping this whole - block of code multiple times." - Course 4 Artist 8a_markdown_instruction: "Remember this shape? Now we're - going to let you build it without giving you any blocks to start!" - Course 4 Artist 9_markdown_instruction: "Loop this design 10 times and make - sure to turn between each shape that's drawn. " - Course 4 Artist Binary 1_markdown_instruction: "Here's a function that takes - a binary string of 1's and 0's and instructs the artist to follow them from - left to right, top to bottom. \r\n\r\nThe artist will fill-in the squares - when it sees a 1 and ignore the square when it sees a 0. \r\n\r\n**Run this - code to see how the artist uses binary to draw this pattern.**" - Course 4 Artist Binary 1a_markdown_instruction: "Here's a function that takes - a binary string of 1's and 0's and instructs the artist to follow them from - left to right, top to bottom. The artist will fill-in the squares when it - sees a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to - see how the artist uses binary to draw this pattern." - Course 4 Artist Binary Free Play 2b_markdown_instruction: "\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own. - \r\n
\r\n" - Course 4 Artist Binary pre1_markdown_instruction: "Binary is a way of representing - information using only two options. In this case, off and on.\r\n
\r\nHere, - we're going to use the number 0 as code for \"off\" and the number - 1 as code for \"on\".\r\n
\r\nWe've provided you with a grid of - \"pixels\" that you can walk through and make designs by turning on only certain - squares.\r\n\r\nUse the blocks below to have the artist draw \"01010101\" - in binary in the first row." - Course 4 Artist Binary ryan_markdown_instruction: "Binary is a way of representing - information using only two options. Here, we're going to use the options - \"off\" (represented by the number 0) and \"on\" (represented by the number - 1). \r\n\r\nWe've provided you with a grid of \"pixels\" that you can walk - through and make designs by turning on only certain squares. Can you have - the artist draw \"01010101\" in binary in the first row?" - Course 4 Artist For Loops 1_markdown_instruction: "Use a repeat block to draw - this triangle that is 50 pixels wide.\r\n\r\n" - Course 4 Artist For Loops 10_markdown_instruction: "Free Play Time! Have fun - drawing whatever you like with the blocks you have learned how to use." - Course 4 Artist For Loops 11_markdown_instruction: "Remember back in a previous - stage when we used a variable to control the number of sides in a shape? We - are going to do the same thing with the `counter` variable now. \r\n\r\nThis - pattern starts with a triangle and adds one side at a time until it draws - a decagon (10 sides). Each side should be 100 pixels long. \r\n\r\nHow will - you use the `counter` variable from the `for` loop to recreate this drawing?" - Course 4 Artist For Loops 11a_markdown_instruction: "Let's put it all together! \r\n\r\nUsing - your knowledge of `for` loops and the `counter` variable, create this drawing - where each shape has two more sides than the last. Make sure that each side - is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little - of the code has been provided for you." - Course 4 Artist For Loops 12_markdown_instruction: "That looked pretty cool, - but now I'd like to draw each shape next to the last one. This time each - side is 20 pixels. Use a jump block to jump forward 40 pixels after each shape." - Course 4 Artist For Loops 13_markdown_instruction: "Hmmm, those shapes are - getting bigger every time! Didn't we already solve this problem with variables? - How can we use the counter variable to make the sides smaller as there are - more of them? Instead of moving forward by a set amount, try moving forward - (100 / counter) pixels." - Course 4 Artist For Loops 14_markdown_instruction: "If you turn a little bit - more or less than you normally would for a shape, it creates a neat effect. - \r\n\r\nTry using some of the code from the last level, but turning 89 degrees - to create this twisted square spiral." - Course 4 Artist For Loops 15_markdown_instruction: "**Free Play:** Try making - some drawings of your own using `for loops`. We've added a few useful variables - for you as well." - Course 4 Artist For Loops 2_markdown_instruction: "I've put the code for drawing - a triangle inside a `for loop` that counts from 50 to 100 by 10. \r\n\r\n
\r\nNOTE: - Make sure you look at the code *before* you hit \"Run\"." - Course 4 Artist For Loops 3_markdown_instruction: "Use the last puzzle as a - reference to complete this one. The smallest triangle has 20 pixel sides, - the largest has 200 pixel sides, and each triangle is 20 pixels larger than - the last." - Course 4 Artist For Loops 4_markdown_instruction: "How would you modify what - you've learned to draw these squares? They start at 15 pixels long, the largest - is 300 pixels long, and each square is 15 pixels larger than the last. " - Course 4 Artist For Loops 5_markdown_instruction: "Good job on the last puzzle! - Let's use that \"counter\" variable block again to draw this cool picture. - \r\n\r\n" - Course 4 Artist For Loops 6_markdown_instruction: "Free Play! Try using a for - loop to draw a growing shape pattern of your own design." - Course 4 Artist For Loops 6a_markdown_instruction: "Make three small changes - to the code from the last level to get this!" - Course 4 Artist For Loops 7_markdown_instruction: "What happens if you remove - the \"Repeat 3\" from this algorithm, keeping the \"move\" and \"turn\" blocks - in the for loop? \r\n\r\n
\r\nIn this spiraling triangle, each side is - 20 pixels longer than the last.\r\n\r\n" - Course 4 Artist For Loops 8_markdown_instruction: "Just one little change to - the code from the last image can create this drawing. Can you figure out what - that change is?\r\n\r\nHint: You need to remove something! " - Course 4 Artist For Loops 8a_markdown_instruction: "Just one little change - to the code from the last image can create this image. Can you figure out - what that change is?" - Course 4 Artist For Loops 9_markdown_instruction: "Can you make a spiral? Move - forward from 1 to 75 pixels, increasing by 1 pixel each time.\r\n\r\n" - Course 4 Artist For Loops Challenge_markdown_instruction: "**Challenge:** Can - you figure out how to use all of the things you've learned to create this - image of polygons, all with 40 pixel sides?\r\n\r\nRemember, in order to create - a spiral, you cannot close the polygon. This means that each shape will need - to have one fewer sides than usual." - Course 4 Artist For Loops Challenge_a_markdown_instruction: "**Challenge:** - Can you figure out how to use all of the things you've learned to create - this image of polygons, all with 40 pixel sides?" - Course 4 Artist For Loops inspire_markdown_instruction: "

\r\n \r\n

\r\n**Free-Play Inspiration:** You've now - learned everything you need to know to make a pattern like this! If this picture - inspires you, try to make something similar. Otherwise, create something all - your own." - Course 4 Artist Functions 12.1_markdown_instruction: "Let's create a function - called `draw an octagon 20` that draws an octagon where each side is 20 pixels - long." - Course 4 Artist Functions 13.1_markdown_instruction: "Now, let's make a function - called `jump to upper right` that moves the artist to the upper-right of the - octagon that you just drew so we can finish this pattern. \r\n
\r\n*Hint: To - get yourself to the upper-right corner, try jumping in a pattern that makes - just 3/8 of the octagon.* " - Course 4 Artist Functions 14.1_markdown_instruction: "Now, let's make a function - called `jump to upper right` that moves the artist to the top-right of the - octagon that you just drew so we can finish this pattern. " - Course 4 Artist Functions challenge_markdown_instruction: "\r\n\r\n**Challenge Level:** Use what you've learned in - this stage and others to figure out how to make the drawing above. " - Course 4 Artist Functions Inspiration_markdown_instruction: "\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own. - " - Course 4 Artist Functions inspire_markdown_instruction: "\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own. \r\n
\r\n\r\n

\r\n
\r\nHints\r\n\t

\r\n\t
\r\n\t
\r\n\tHint - #1\r\n \t
\r\n \tUse a `for loop`, then use its counter - variable inside of a nested `repeat` loop. \r\n \t

\r\n
\r\n\t
\r\n \r\n
\r\n\t
\r\n\tHint - #2\r\n \t
\r\n \tEach iteration, you should `draw - a square` then jump forward.\r\n \t

\r\n
\r\n\t
\r\n \r\n
\r\n\t
\r\n\tHint - #3\r\n \t
\r\n \tYou will need to turn left by 90 - degrees outside of your `repeat`, but still inside the `for loop`.\r\n \t

\r\n
\r\n\t
\r\n \r\n
\r\n\t
\r\n\tSolution\r\n \t
\r\n \t
\r\n \t\r\n \t

\r\n
\r\n\t
\r\n
\r\n

\r\n\r\n
\r\nWhat - happens if you make the squares a little bigger or smaller? How about if - you turn right instead of left?" - Course 4 Artist Inspire_markdown_instruction: "\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! If this picture inspires you, - try to make something similar. Otherwise, create something all your own. " - Course 4 Artist Vars 1_markdown_instruction: "Let's draw an equilateral triangle. - \r\n\r\nIt has to be exactly 100 pixels long on each side.\r\n\r\n
\r\n" - Course 4 Artist Vars 10_markdown_instruction: "Here's an algorithm that draws - a triangle out of smaller triangles. Can you modify it so that it uses the - `sides` variable to draw each triangle? \r\n\r\n
\r\nLook through the - code, and every time you see the number 3, replace it with your `sides` variable. - Remember to use the `set sides` block." - Course 4 Artist Vars 11_markdown_instruction: "Here’s some more complicated - code using the same concepts from the last puzzle - what should you set the - `sides` variable to in order to draw this picture made of squares?\r\n\r\n

\r\n\tJust for fun: Try using a few different numbers - to see what happens to the pattern!\r\n

" - Course 4 Artist Vars 12_markdown_instruction: "Let's set the `sides` variable - to 5. The more sides we add to this algorithm, the bigger this whole pattern - gets! \r\n\r\n
\r\nNotice that there is another variable called `length`. - \r\nWe can now use that variable wherever we have a `move forward` block. - \r\n\r\nSet the `length` variable to 75 for this shape." - Course 4 Artist Vars 13_markdown_instruction: "When a shape has lots of sides, - each side needs to be shorter if you want the whole pattern to fit on the - screen. \r\n\r\nLet's recreate the algorithm for this amazing pattern, but - instead of manually setting the `length` variable, let's use a math block - with the `sides` variable inside to make sure that each shape fits correctly. \r\n\r\nThe - perimeter of each polygon is 300 pixels." - Course 4 Artist Vars 14_markdown_instruction: "**Free Play**: Check it out! - Now your algorithm is nested within one more loop. Experiment with changing - the values of your two variables to draw cool patterns.\r\n\r\nFor even more - effect, try playing with color! Use random colors inside loops to see how - it changes your design." - Course 4 Artist Vars 2_markdown_instruction: "Instead of using `move forward - by 150`, the `move` block is now referencing a variable called `length`. Can - you set `length` to 150 to draw this new triangle?" - Course 4 Artist Vars 3_markdown_instruction: "Here's a loop that draws a square, - but something's missing. Can you fix it so that it uses the variable \"length\" - to figure out how long each side should be? " - Course 4 Artist Vars 4_markdown_instruction: "Now I want to make a rectangle - that is twice as tall as it is wide. We've got a variable called `width` - that needs to be set to 100. Can you use the math blocks to complete the code?" - Course 4 Artist Vars 6_markdown_instruction: "Here’s some code that can draw - any regular polygon. \r\n\r\nThere’s a new variable called `sides` that is - set to 4. \r\n\r\nCan you use the `sides` variable (along with the math block) - to turn the right amount regardless of how many sides are in the polygon?" - Course 4 Artist Vars 7_markdown_instruction: "Use what you learned in the last - puzzle to create this hexagon using the `sides` variable.\r\n\r\nSee how you - could change just one value to draw a triangle, square, pentagon, or octagon?" - Course 4 Artist Vars 8_markdown_instruction: "**Free Play:** Experiment with - the number of sides this shape has. Can you change the algorithm so that the - overall size of the shape stays the same, no matter how many sides it has? - " - Course 4 Artist Vars 9_markdown_instruction: "Modify this algorithm so it uses - the `sides` variable instead of a fixed number to draw a triangle. Don't - forget to use the `set sides to` block." - Course 4 Bee 1_markdown_instruction: "The bee can't tell what's under the - cloud! \r\n\r\nUse the `if` block to check whether there is a flower under - the cloud. \r\n\r\nGet nectar one time, **ONLY** if there is a flower." - Course 4 Bee 2_markdown_instruction: "Use the `if/else` block to check each - object to see if it's a flower or a honeycomb. \r\n\r\nIf it's a flower, - collect one nectar...otherwise, make one honey!" - Course 4 Bee 3_markdown_instruction: "The unknown object is either a flower - or a honeycomb. \r\n\r\nThis time, use the `if/else` block to collect one - nectar **if** it is a flower, **else** make one honey (because then it would - be a honeycomb)." - Course 4 Bee 4_markdown_instruction: "This purple flower may have either 3, - 2, or 1 nectar. \r\n\r\nHere an `if/else` block is combined with another `if/else` - block to create an `if/else-if/else` statement. \r\n\r\nComplete the solution - to collect the unknown amount of nectar." - Course 4 Bee 5_markdown_instruction: "This purple flower may have either 3, - 2, or 1 nectar. Add an `if-else` block to create an `if, else-if, else` block. - Complete the solution to collect the unknown amount of nectar." - Course 4 Bee 6_markdown_instruction: "This purple flower may have either 3, - 2, or 1 nectar. Create an `if, else-if, else` block to collect the unknown - amount of nectar." - Course 4 Bee 7_markdown_instruction: "Use everything you have learned so far - to collect all the nectar. The purple flower may have either 3, 2, or 1 nectar." - Course 4 Bee For Loops 11_markdown_instruction: "What's wrong with this loop? - See if you can fix it and make the bee collect all the nectar." - Course 4 Bee Params 1_markdown_instruction: "Write a sequence to collect all - of the nectar using `get 3 nectar` which turns, moves to collect the nectar, - and then returns to the original location." - Course 4 Bee Params 2_markdown_instruction: "Modify the `get 3 nectar` function - so it makes me turn right instead of left to the flowers." - Course 4 Bee Params 3_markdown_instruction: "Now there are flowers on both - sides! \r\n\r\nWe've added variables called `left` and `right` for you to - use, and now there is a parameter called `direction` inside `get 3 nectar`. - \r\n\r\n**Edit `get 3 nectar` so that the bee turns the correct direction - when the variables `left` or `right` are passed into the function.**" - Course 4 Bee Params 5_markdown_instruction: "Let's start from scratch - can - you create a new function called `get 5 nectar` with a direction parameter?" - Course 4 Bee Params 6_markdown_instruction: "Wouldn't it be nice if we could - collect all of these nectars with a single function? \r\n\r\n
\r\nTry - adding a new parameter to your function called `nectar units` to control the - amount of nectar to collect. You'll probably want to rename the function - too!" - Course 4 Bee Params 7_markdown_instruction: "Try using your new function to - collect all of this nectar.\r\n\r\n
\r\n" - Course 4 Bee Params 8_markdown_instruction: "**Challenge:** Now there's honey - to deal with too! \r\n\r\nRewrite your function to use both the number of - honey units and the number of nectar units. How would you use those numbers - to decide what you should do?" - Course 4 EC 1a_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 1b_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 2a_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 2b_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 2c_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 2d_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 3_markdown_instruction: "**Functions Super Challenge:** Use what - you learned in the previous level to draw an image like this.\r\n\r\n*Note: - The code becomes more simple if you incorporate parameters.*\r\n\r\n
\r\n\r\n
\r\n\r\n\r\n" - Course 4 EC 3a_markdown_instruction: "**Extreme Challenge:** No rules. No clues. - Just the challenge!\r\n\r\n
\r\n\r\n
\r\n\r\n\r\n" - Course 4 Maze 4_markdown_instruction: "Try the `repeat` block to use fewer - blocks when solving this puzzle..." - Course 4 Play Lab Params 1_markdown_instruction: "Here's a function called - `jump` that causes your main character to jump up 100 pixels. \r\n\r\nRun - the program and use the jump function to collect all of the flags by moving - the dog with the arrow keys." - Course 4 Play Lab Params 10_markdown_instruction: "We've added one last function - for you.\r\n
\r\n\r\n

\r\nUse an `if` statement to program your game - to call the `level_up` function only when `player_score` becomes greater than - a certain number.

\r\n

\r\nFor example: `player_score` > 6\r\n\r\n\r\n
\r\nPlay - the game, and make it to level 3 to move to the next puzzle." - Course 4 Play Lab Params 2_markdown_instruction: "Now we've got flags that - are too high for our current jump! Let's use both the \"up\" and \"down\" - arrows so that we can have multiple jump heights. \r\n\r\nWe need to add - a parameter to our jump function called `height`. \r\n- The up arrow should - cause the dog to jump 200 pixels \r\n- The down arrow should make it jump - only 100 pixels. \r\n" - Course 4 Play Lab Params 3_markdown_instruction: "We have added another parameter - to the jump function so that we can use it with other actors. Each actor is - represented by a number, starting from one. \r\n\r\n
\r\nEdit the `jump` - function so that it uses the `actor` parameter to make the correct character - jump. " - Course 4 Play Lab Params 4_markdown_instruction: "Here's a function called - `patrol`. \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 - pixels." - Course 4 Play Lab Params 5_markdown_instruction: "Edit the the `patrol` function - to add an `actor` parameter, so that we can call it for each of the actors - on the screen. Remember, the actors correspond to numbers 1, 2, and 3." - Course 4 Play Lab Params 6_markdown_instruction: "Add another parameter called - `speed` to the `patrol` function. Try using a `set speed` block with the new - `speed` parameter to help Penguin get both flags before the other sprites - even get one." - Course 4 Play Lab Params 7_markdown_instruction: "Let's have some fun! Look - at the code provided to see if you can figure out what each block does. \r\n\r\nWhen - you're done, use the arrow keys to control Dog and collect all of the flags.\r\n\r\n**NOTE:** - You don't need to make any changes to the program" - Course 4 Play Lab Params 8_markdown_instruction: "Use the `when actor touches` - block to send Dog back to the top-left ONLY if Dog touches any of the other - actors." - Course 4 Play Lab Params 9_markdown_instruction: "Here's our game from an - earlier stage but most of the code is hidden. We've added a new function - called `score_points.`\r\n
\r\n
\r\n
\r\n

\r\nEdit the function - so that a new parameter called `points` is added to `player_score`. \r\n
\r\nThe - variable `player_score` should increase each time Dog tags Cat with pie, and - decrease each time that Cat tags Dog with a sandwich.\r\n

\r\n
\r\n
\r\n*Note: - When you're done, click \"Run\" to play. When Dog scores 6 points, you will - move on to the next puzzle.*" - Course 4 Play Lab Vars 1_markdown_instruction: "This time you don't have to - write any code, just hit `Run` to play the game! \r\n\r\n
\r\nIn this - game, you're the dog who is trying to collect more flags than the cat. Use - the down arrow to control the dog. Press `Finish` when you're done playing." - Course 4 Play Lab Vars 2_markdown_instruction: "The race in that last puzzle - wasn't very fair! Change the `dog_speed` variable to make sure you can collect - more flags than Cat. The first to collect 10 flags wins!" - Course 4 Play Lab Vars 3_markdown_instruction: "Here's a new kind of game! - \r\n\r\nYou don't need to change anything on this level.\r\n\r\n**Directions:** - Use the left and right arrows to move, and the up arrow to jump. See if you - can collect all of the flags." - Course 4 Play Lab Vars 4_markdown_instruction: "Now we're using a variable - called `height` to control how high the dog can jump. Update the `height` - variable so that the dog can jump high enough to reach all the flags. \r\n" - Course 4 Play Lab Vars 6_markdown_instruction: "
\r\nIn our game, how - should we score points? \r\n
\r\n
\r\n\r\n1. Add 1 to your `points` - variable each time Dog hits Cat with a piece of pie.

\r\n2. - Use the `when actor 2 touches anything` event to trigger an update to your - score. You can increment your variable by setting `points = points + 1.`

- \r\n3. Get your score up to 10 to pass the level.\r\n\r\n

\r\n

\r\n**Note:** - Use the right arrow to throw pie!\r\n

" - Course 4 Play Lab Vars 7_markdown_instruction: "Nice, now let's make sure - this game isn't too easy to play! \r\n\r\nAny time Dog (actor 1) gets hit - by a sandwich from Cat (actor 2), you should lose a point. \r\n\r\nStart with - 10 points so it's not too hard. Let your score drop down from 10 to 0 to - pass the level." - Course 4 Play Lab Vars 9_markdown_instruction: "Free Play time! Here are all - of the variables we've played with so far in this stage, as well as a few - more in case you want them. \r\n\r\nNotice that there are now so many blocks - in our toolbox that they need to be organized! Here, we've put each piece - into an appropriate category. Take some time to explore everything that is - available. When you're done browsing, make a game or story using repeats, - variables, and events. \r\n\r\n*Hint: scroll down to see all the commands - in the workspace.*" - Course 4 Play Labs For Loops 1_markdown_instruction: "Let's make the dog speak - every number from 1 to 100. Use a `for` loop and the counter block to speak - the counter variable each time the loop is run." - Course 4 Play Labs For Loops 4_markdown_instruction: "Changing the increment - can be helpful, but we're still counting linearly (each number is the same - distance from the last) What if I wanted to count exponentially? \r\n\r\n
\r\nWithout - changing the settings in this for loop, can you count 1, 4, 9, 16, 25... (counter - squared)?" - Course 4 Play Labs For Loops 4a_markdown_instruction: "Now, let's blend the - variables from Stage 7 together with your `counter` variable to make some - magic happen. \r\n\r\nIn this puzzle, Dog will count from **0** to **1000** - by `increment`. Set the `increment` variable to **10** at the beginning of - your code to see what happens." - Course 4 Play Labs For Loops 5_markdown_instruction: "In the last stage we - counted the square of each number. Try changing `counter ^ 2` to `counter - ^ 3` to count the cube of each number (1, 8, 27, 64, 125, 216, 343…)" - Course 4 Play Labs For Loops 5a_markdown_instruction: "In this puzzle, Dog - will be your time keeper.\r\n\r\nDog will count from **0** to **30** by `increment`. The - `increment` variable will begin with a value of **1**.\r\n\r\nCan you make - it so that each time you click Dog, `increment` increases by **2**? Click - the forward arrow to run the `for loop`. \r\n\r\n**Note:** Run the loop a - couple of times, clicking Dog before each one." - Course 4 Play Labs For Loops 6a_markdown_instruction: "Now that we've seen - how to control our `for loop` using variables inside of our program, let's - make a game!\r\n\r\nDog will still keep time by counting with our `for loop` - by `increment`, but this time we will add The Wizard into the mix. Can you - change the code so that `increment` goes up by two each time The Wizard is - clicked?\r\n\r\nWatch out! The Wizard moves quickly!" - Course 4 Play Labs For Loops 7a_markdown_instruction: "Now we're getting somewhere! What - if we start counting how many times we can click The Wizard before Dog gets - to 30? \r\n\r\nFinish adding blocks to The Wizard so that every time he's - clicked the variable `clicked` increases by one. You can ignore `increment` - for now.\r\n\r\n**Note:** Dog will start counting when you click `Run`." - Course 4 Play Labs For Loops 8_markdown_instruction: "Now, help the actors - move as they count. \r\n\r\nDog should move and count by adding 2 (`counter - + 2`) each time. Cat will move and count by multiplying by 2 (`counter *2`) each - time. Penguin will move and count to the power of 2 (`counter ^ 2`) each time. Who - will reach their flag first?" - Course 4 Play Labs For Loops 8a_markdown_instruction: "To finish our game, - we need to bring back the `increment` variable! Let's tie it to the level - of the game.\r\n\r\n1) Keep track of the number of times The Wizard is clicked. \r\n2) - If The Wizard is clicked at least 10 times before Dog counts to 30, raise - `increment` by 1 and start again. \r\n3) If The Wizard does not get clicked - at least 10 times, the game is over. " - Course 4 Playlab For Loop Freeplay_markdown_instruction: "**Freeplay:** Use - everything you've learned so far to make a game that includes a `for` loop!" - Course 4 Playlab For Loops 4b_markdown_instruction: "Now, these two characters - are going to race! \r\n\r\nEach of them will move `counter` steps at a time, - but their counters will have different values because of the `for` loops. \r\n\r\nCan - you change the **increment** in one of the loops so that the race is a tie?" - Course 4 Playlab For Loops 5b_markdown_instruction: "Adjust the interval on - these `for` loops so that the two characters end in the exact same place." - Course 4 Playlab For Loops 6b_markdown_instruction: "Now we're going to use - `for` loops in a whole different way!\r\n\r\nThis game gets hard quickly because - the time between disappearances shrinks fast!\r\n\r\n
\r\n\r\n**Edit this - `for` loop to create a game that's fun for you to play!** \r\n\r\n
\r\n\r\nPress - \"Run\" and click Madame Unicorn as many times as you can. Can you beat our - score of 24? " - Course 4 SCF 1_markdown_instruction: "**Functions Super Challenge:** Use the - suggested functions to draw four rows of hexagons. Notice how our even numbered - rows are shifted to the right?" - Course 4 SCF 1a_markdown_instruction: "**Functions Super Challenge:** Can you - figure out how to collect all of this nectar with the fewest blocks possible?\r\n" - Course 4 SCF 1b_markdown_instruction: "**Functions Super Challenge:** Can you - figure out how to collect all of this honey with the fewest blocks possible?\r\n\r\n" - Course 4 SCF 2_markdown_instruction: "**Functions Super Challenge:** Use what - you learned in the previous level to draw an image like this.\r\n\r\n*Note: - The code becomes more simple if you incorporate parameters.* " - Course 4 SCF 3 Fail 1_markdown_instruction: "**Functions Super Challenge #1:** - \r\n\r\n" - Course 4 SCF 3 Fail 2_markdown_instruction: "**Functions Super Challenge #1:** - \r\n\r\n" - Course 4 SCF 3_markdown_instruction: "**Functions Super Challenge:** Use what - you learned in the previous level to draw an image like this.\r\n\r\n*Note: - The code becomes more simple if you incorporate parameters.*\r\n\r\n
\r\n\r\n
" - Course 4 SCFL 1_markdown_instruction: "**For-Loops Super Challenge:** Solve - this puzzle with the fewest number of blocks possible." - Course 4 SCFL 1a_markdown_instruction: "**For Loops Super Challenge:** Can - you get Skrat to his acorn using as few blocks as possible?\r\n\r\n" - Course 4 SCFL 1b_markdown_instruction: "**For Loops Super Challenge:** Can - you get Skrat to his acorn using as few blocks as possible?\r\n" - Course 4 SCFL 2_markdown_instruction: "**For-Loops Super Challenge:** Solve - this puzzle with the fewest number of blocks possible. \r\n
\r\n" - Course 4 SCFL 3_markdown_instruction: "**For-Loops Super Challenge:** Can you - figure out how to re-create this drawing? \r\n\r\n\r\n" - Course 4 SCFL 4_markdown_instruction: "**For-Loops Super Challenge:** Can you - figure out how to re-create this drawing? \r\n\r\n" - Course 4 SCFL 5_markdown_instruction: "**For-Loops Super Challenge #5:** Can - you figure out how to re-create this drawing? \r\n\r\n\r\n\r\n

\r\n
\r\nHints\r\n\t

\r\n\t
\r\n\t
\r\n\tHint - #1\r\n \t
\r\n \tThe color change happens using the - `set color with red, green, blue` block. Red is always the value of `counter`, - green is always `255 - counter`, and blue remains constant at 255 exactly.\r\n \t

\r\n
\r\n\t
\r\n \r\n
\r\n\t
\r\n\tHint - #2\r\n \t
\r\n \tEach shape is a square with sides - that are `counter` pixels long, starting with 5px, and increasing by 5px all - the way up to 200px.\r\n \t

\r\n
\r\n\t
\r\n \r\n
\r\n\t
\r\n\tHint - #3\r\n \t
\r\n \tThe artist turns 15 degrees between - each square.\r\n \t

\r\n
\r\n\t
\r\n \r\n
\r\n\t
\r\n\tSolution\r\n \t
\r\n \t
\r\n \t\r\n \t

\r\n
\r\n\t
\r\n
\r\n

" - Course 4 SCFL 6_markdown_instruction: "**For-Loops Super Challenge:** Can you - figure out how to re-create this drawing with a single loop? \r\n\r\n" - Course 4 SCFL 7_markdown_instruction: "**For-Loops Super Challenge:** The artist - wants to catch some waves! Can you figure out how to re-create this drawing? - \r\n\r\n" - Course 4 SCFP 1_markdown_instruction: "Create a function with parameters that - allows the artist to jump backward and forward by x pixels, and also up and - down by y pixels (using positive and negative numbers)." - Course 4 SCV 1_markdown_instruction: "\r\n\r\n**Variables Super Challenge:** You've now learned - everything you need to know to make a pattern like this! This puzzle is meant - to be difficult. Can you stick with it until you figure out the solution?" - Course 4 SCV 2_markdown_instruction: "\r\n\r\n**Variables Super Challenge:** You've now learned - everything you need to know to make a pattern like this! This puzzle is meant - to be difficult. Can you stick with it until you figure out the solution?" - Course 4 SCV 3_markdown_instruction: "**Variables Super Challenge:** You've - now learned everything you need to know to solve this puzzle! This game is - meant to be difficult. Can you stick with it until you figure out the solution?\r\n\r\n
\r\n\r\nNow - for a game of tag! Tag Cat to get 2 points. Tag Penguin to get 3 points. Get - exactly 10 points to win!\r\nBut be careful, when Cat and Penguin tag each - other, they take points away.\r\n\r\n\r\nAdd the blocks necessary - to make this game work the way it's been explained. \r\n- How will you get - Dog to move in all directions using the arrow keys? \r\n- How will you add - points when Dog tags Cat or Penguin? \r\n- How will you subtract points when - Cat and Penguin touch?\r\n\r\n\r\n
\r\n\r\n" - Course 4 SCV 4_markdown_instruction: "**Variables Super Challenge:** Solve - this puzzle with the fewest number of blocks possible.\r\n" - Course 4 SCV 5_markdown_instruction: "**Variables Super Challenge:** Solve - this puzzle with the fewest number of blocks possible.\r\n\r\n" - Course 4 SCV 6_markdown_instruction: "\r\n\r\n**Variables Super Challenge:** You've now learned - everything you need to know to make a pattern like this! This puzzle is meant - to be difficult. Can you stick with it until you figure out the solution? " - Course 4 SCVP 1_markdown_instruction: "Create a function with parameters that - allows the artist to jump backward and forward by x pixels, and also up and - down by y pixels (using positive and negative numbers)." - Course 4 Variables Assessment_markdown_instruction: "Can you create this image - using a variable for `sides`? Each line should be 50 pixels long." - course2_playlab_stage17_11_markdown_instruction: "Create your own story. When - you're done, click Finish to let friends try your story on their phones.\r\n
\r\n\r\n
\r\n
\r\nNeed - some ideas?\r\n\t
\r\n\t
\r\n\t\t
    \r\n \t
  • Who's - there? - Make characters appear with random images, so no one knows - who's showing up next.
    • \r\n
  • Going on an Adventure - - Change the background, then have the characters talk about where they are - now.
    • \r\n
  • Pinball - Make one character - move using the arrow keys (use `when up arrow`, `when down arrow` blocks), - then play random sounds when it collides with other characters on the screen. -
    • \r\n
\r\n\t
\r\n
\r\n
\r\n" - course_playlab_variables1_markdown_instruction: "This is Pirate Pegleg. He's - awfully hard to understand these days! \r\n\r\nDecode his speech by changing - these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" - should be \"e\"\r\n\r\n" - course_playlab_variables2_markdown_instruction: "Now, decode Pirate Pegleg's - speech by changing the value of the variables in just two places! \r\n- - \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" - course_playlab_variables3_markdown_instruction: "Now, decode Pirate Pegleg's - speech by changing the value of the variables in just two places! \r\n- - \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" - courseA_artist_loops10_markdown_instruction: "
\r\nTime to head back to land. Help - me put down stones so I don't fall in!

\r\n
\r\n\r\n\r\n" - courseA_artist_loops11_markdown_instruction: "
\r\nHelp me build steps to watch - the ship sail away.
\r\n
\r\n\r\n\r\n" - courseA_artist_loops12_markdown_instruction: "The artist saw something funny - in the distance. Draw what you think he saw.\r\n\r\n
\r\n

Ideas

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n

A Singing Snail



\r\n		\r\n
\r\n

A Big City



\r\n		\r\n
\r\n

A Concert



\r\n		\r\n
\r\n

A Birthday Cake



\r\n
\r\n" - courseA_artist_loops2_markdown_instruction: "Help the artist draw this line - two times forward.\r\n\r\n![](https://images.code.org/7ddc7b43ef27197559c7defb0af56d03-image-1470776934855.gif)" - courseA_artist_loops3_markdown_instruction: "Our artist is trying to draw a - line five times, but can't get it right. Can you help?\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" - courseA_artist_loops4_markdown_instruction: "Now, use a `repeat` loop to draw - this line five times!\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" - courseA_artist_loops5_markdown_instruction: "
\r\nDraw a line seven steps long. This will - become our horizon.

\r\n
\r\n\r\n\r\n" - courseA_artist_loops6_markdown_instruction: "
\r\nLet's put a nice hill in the back.

\r\n
\r\n\r\n\r\n" - courseA_artist_loops7_markdown_instruction: "
\r\nUse the `repeat` loop to add waves to the - water.
\r\n
\r\n\r\n\r\n" - courseA_artist_loops8_markdown_instruction: "
\r\nWe need a ladder up to the boat.
\r\n
\r\n" - courseA_artist_loops9_markdown_instruction: "
\r\n**Challenge:** The stairs down to the dock - are broken. Help me fix them.
\r\n
\r\n\r\n\r\n" - courseA_collector_loops1_markdown_instruction: "**Free Play:** This is Laurel - the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag - blocks into the workspace and try to figure out how to get treasure. Get - at least one item to pass this level." - courseA_collector_loops2_markdown_instruction: "Move Laurel to the treasure, - then use `collect` to pick it up.\r\n\r\nCollect all three piles to pass this - level." - courseA_maze_seq1_markdown_instruction: "*\"Play with these blocks and try - to get me to the bad pig!\"*" - courseA_maze_seq10_markdown_instruction: "**Challenge:** Go around the TNT - to get the bird to the pig!\r\n\r\n" - courseA_maze_seq11_markdown_instruction: "Time for a shorter puzzle! Move - one way, then another to get the bird to the pig.\r\n\r\n\r\n" - courseA_maze_seq12_markdown_instruction: "Get that pig!\r\n\r\n\r\n" - courseA_maze_seq2_markdown_instruction: "*\"A bug! Fix the code to get me to - the pig.\"*\r\n \r\n" - courseA_maze_seq3_markdown_instruction: "*\"Fix the code to get me to the pig!\"*\r\n\r\n" - courseA_maze_seq4_markdown_instruction: "*\"Something is not quite right.\"* - \r\n\r\nREMOVE a block to get the bird to the pig!\r\n\r\n" - courseA_maze_seq5_markdown_instruction: "Try this one yourself from the beginning.\r\n\r\n" - courseA_maze_seq6_markdown_instruction: "Move one way, then another to get - the bird to the pig!\r\n\r\n" - courseA_maze_seq7_markdown_instruction: "Figure out what is missing and then - add blocks to get the bird to the pig!\r\n\r\n" - courseA_maze_seq8_markdown_instruction: "Solve this level and get the bird - to the pig!\r\n\r\n" - courseA_maze_seq9_markdown_instruction: "**Challenge:** Debug this level by - adding blocks to get the bird to the pig!\r\n\r\n" - courseA_playLab_events3_markdown_instruction: "Help Jorge the Dog get moving - by connecting the ![](https://images.code.org/b3d6215901969328333d6393f8101c5b-image-1478142333199.png) - block to the ![](https://images.code.org/4f2130b2a3053695414a02c3d39ef864-image-1478143461271.png) - event block that is already in the workspace." - courseA_playLab_events4_markdown_instruction: "Now, get Jorge to move right - when the ![](https://images.code.org/b99365eb23280f158e6ef570fe1c8a76-image-1478145132820.png) - button is clicked." - courseA_playLab_events5_markdown_instruction: "Add events to have Jorge move - up and down when the ![](https://images.code.org/379493b95d158b273f1424538b1c635a-image-1478145402316.png) - and ![](https://images.code.org/f490d78efd81c21ab74286aefe7af097-image-1478145385132.png) - buttons are pressed." - courseB_artist_loops10_markdown_instruction: "Use what you have learned to - draw a picture of what you think the artist saw when he got home.\r\n\r\n
\r\n

Ideas

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n

A Singing Snail



\r\n		\r\n
\r\n

A Big City



\r\n		\r\n
\r\n

A Concert



\r\n		\r\n
\r\n

A Birthday Cake



\r\n
\r\n" - courseB_artist_loops6_markdown_instruction: "Behind the bushes there is a beautiful - vine full of flowers. Can you climb the vine and see where it goes?" - courseB_artist_loops7_markdown_instruction: "**Challenge:** It's a hidden - garden! Let's walk around." - courseB_collector_loops1_markdown_instruction: "**Free Play:** This is Laurel - the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag - blocks into the workspace and try to figure out how to get treasure. Get - at least one item to pass this level." - courseB_collector_loops2_markdown_instruction: "Move Laurel to the treasure, - then use `collect` to pick it up.\r\n\r\nCollect all four piles to pass this - level." - courseB_collector_loops3_markdown_instruction: "How can Laurel collect all - five piles of treasure using only one `E -->` block?" - courseB_collector_loops3_predict1_markdown_instruction: "How can Laurel collect - all five piles of gold using only one `E -->` block?" - courseB_collector_prog3_markdown_instruction: "How can Laurel collect all five - piles of gold using only one `E -->` block?" - courseB_maze_seq9_markdown_instruction: "**Challenge:** Move around the TNT - to get the bird to the pig." - courseB_maze_seqCold_markdown_instruction: "**Challenge:** Debug this level - by adding blocks to get the bird to the pig!" - courseB_playLab_events1_markdown_instruction: "This game is called \"Play Lab\". \r\n\r\n
\r\nSee - if you can figure out what each block does." - courseB_playlab_events3_markdown_instruction: "Use an event to make Daisy the - Dragon switch to a random ![](https://images.code.org/c365e065614fea592612264f33624c09-image-1475698889081.17.53.png) - mood when you click on her.\r\n\r\n" - courseB_playlab_events4_markdown_instruction: "Knight time! \r\n\r\nAdd an - event so that the knight moves toward the dragon when the left arrow is clicked." - courseB_playlab_events6_markdown_instruction: "Help your knight get all of - the flags!\r\n\r\nTo do this, you'll need to add events to help the knight - move up and down." - courseB_playlab_events7_markdown_instruction: "Make this game fun by setting - the knight to vanish when he runs into the dragon! \r\n\r\nPlay a sound when - they collide to make it feel more real." - courseC_artist_prog1_markdown_instruction: "*\"Hi, I'm an artist. You can - write code to make me draw almost anything.\"*\r\n\r\nPlay with the blocks - in the toolbox to see what they do!" - courseC_artist_prog2_markdown_instruction: "*\"Let's make a cage for my pet - monster!\"*\r\n\r\nDrag blocks onto the screen to have the artist draw over - the grey lines in the picture. \r\n(Each line is 100 pixels long)" - courseC_artist_prog3_markdown_instruction: "*\"This spaceship needs a window!\"*\r\n\r\nEach - side of the inner square is 100 pixels and all of the angles are 90 degrees." - courseC_artist_prog4_markdown_instruction: "*\"Oh no! Starla's pet alien - just flew away! Let's help the spacewoman!\"*\r\n\r\nFinish Starla's rocket - so she can chase her pet. \r\n(Each side of the triangle is 100 pixels long - and has 120 degree outer angles.)" - courseC_artist_prog5_markdown_instruction: "*\"Maybe we should make a tag for - each of our pets in case they get lost!\"*\r\n\r\nFinish this tag by drawing - a rectangle around the outside. \r\n(The long sides are 200 pixels each and - the short sides are each 100 pixels)" - courseC_artist_prog6_markdown_instruction: "*\"Now a tag for Belle!\"*\r\n\r\nDraw - this diamond with 200 pixel sides." - courseC_artist_prog7_markdown_instruction: "**Challenge:** This tag is a special - one! \r\n\r\nCan you figure out how to draw the outline? \r\n(The long side - is 150 pixels and each of the short sides are 75 pixels.)" - courseC_artist_prog8_markdown_instruction: "One more tag. This is a triangle - for Pi. \r\n(Each side is 150 pixels)" - courseC_collector_prog1_markdown_instruction: "**Free Play:** This is Laurel - the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag - blocks into the workspace and try to figure out how to get treasure. Get - at least one item to pass this level." - courseC_collector_prog2_markdown_instruction: "Move Laurel to the treasure, - then use `collect` to pick it up." - courseC_collector_prog3_markdown_instruction: "*\"Sequence matters!\"* \r\n\r\nThe - blocks you need are already in the workspace, but not connected. \r\nOrder - these blocks to collect the treasure and solve the puzzle." - courseC_collector_prog4_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe - blocks you need are already in the workspace, but not connected. \r\n\r\nPut - these blocks in order to collect all of the treasure and solve the puzzle." - courseC_collector_prog5_markdown_instruction: "*\"Help me collect each bit - of treasure!\"*\r\n\r\nThese blocks are in the wrong order. Can you fix them?" - courseC_collector_prog6_markdown_instruction: "*\"Help me collect all of the - treasure!\"*\r\n\r\nThese blocks are in the wrong order. Reorder them to collect - all of the treasure." - courseC_collector_prog7_markdown_instruction: "**Challenge:** *\"What is going - on here?\"*\r\n\r\nEven if we put these in the right order, there will still - be some missing. \r\nUse blocks from the toolbox to collect all of the treasure." - courseC_collector_prog8_markdown_instruction: "*\"Keep up the good work! Help - me collect all of the treasure.\"*" - courseC_collector_prog9_markdown_instruction: "*\"Let's get all of the treasure!\"*" - courseC_collector_progA_markdown_instruction: "Help Laurel collect all of the - treasure." - courseC_collector_progB_markdown_instruction: "You're almost done! \r\n\r\nCollect - as many coins as you can to finish the stage!" - courseC_harvester_loops1_markdown_instruction: "Loops can be used to repeat - more than moves. \r\n\r\nUse loops to collect all of the pumpkins." - courseC_harvester_loops10_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops11_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops2_markdown_instruction: "Can you combine two different - loops to move toward the pumpkins, then collect them all?" - courseC_harvester_loops3_markdown_instruction: "Collect all of the pumpkins." - courseC_harvester_loops4_markdown_instruction: "Now there is corn growing, - too!\r\n\r\nCollect all of the corn and all of the pumpkins." - courseC_harvester_loops5_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops6_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops7_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops8_markdown_instruction: "**Challenge:** Collect all - of the corn and all of the pumpkins.\r\n\r\nYou can complete this challenge - any way you want, but it will either take a lot of work or a lot of thinking!" - courseC_harvester_loops9_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_maze_debugging1_markdown_instruction: "This code isn't quite right! \r\n\r\nFix - the code to help get Skrat get to the acorn." - courseC_maze_debugging3_markdown_instruction: "Something is not quite right. - \r\n\r\nRemove blocks to get Skrat to the acorn!" - courseC_maze_loops2_markdown_instruction: "Suddenly, a magical block appears! \r\nWith - the `repeat` block, you can loop code over and over.\r\n\r\nCan you get the - bird to the pig by creating a loop that uses only one `move forward` block - inside of a `repeat`?" - courseC_maze_loops2_predict1_markdown_instruction: "Suddenly, a magical block - appears! \r\nWith the `repeat` block, you can loop code over and over.\r\n\r\nCan - you get the bird to the pig by creating a loop that uses only one `move forward` - block inside of a `repeat`?" - courseC_maze_loops3_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nSolve - this puzzle by creating a loop!" - courseC_maze_loops4_markdown_instruction: "In this puzzle, two `repeat` loops - will help you get the bird to the pig with the fewest number of blocks!" - courseC_maze_loops5_markdown_instruction: "*\"Get me to the pig as quickly - as possible!\"*" - courseC_maze_loops6_markdown_instruction: "*\"This pig is ruffling my feathers!\"*\r\n\r\nLoops - even work with more than one block inside! Can you loop this sequence?" - courseC_maze_loops7_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nUse - what you learned in other puzzles!" - courseC_maze_loops8_markdown_instruction: "**Challenge:** Combine ideas from - the last few puzzles to complete this level." - courseC_maze_programming1_markdown_instruction: "For this puzzle, drag all - of the blocks together and click \"Run\" to watch it go!" - courseC_maze_programming2_markdown_instruction: "Drag an extra `move forward` - block out of the toolbox to finish your code." - courseC_maze_programming3_markdown_instruction: "*\"This pig is ruffling my - feathers.\"*\r\n\r\nThere is one extra block that is going to cause the bird - to crash. \r\nThrow it away by dragging it back to the toolbox." - courseC_maze_programming4_markdown_instruction: "*\"Trace the path and lead - me to the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" - courseC_maze_programming5_markdown_instruction: "*\"Follow this path to get - me to the pig!\"*\r\n\r\nAvoid the TNT." - courseC_maze_programming6_markdown_instruction: "*\"Keep calm and help me find - the bad pig. Otherwise I might get angry!\"*\r\n\r\nGet the bird to the pig - and avoid the TNT." - courseC_maze_programming7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** - This code has a lot of bugs. You'll need to remove some blocks and add others." - courseC_maze_programming8_markdown_instruction: "*\"Keep calm and help me find - the bad pig.\"*" - courseC_maze_programming8_predict1_markdown_instruction: "*\"Keep calm and - help me find the bad pig.\"*" - courseC_maze_programming9_markdown_instruction: "*\"Now, help me sneak up on - the pig any way you want to!\"*" - courseC_PlayLab_events8_markdown_instruction: "Can you have Waddles (actor - 1) say \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen - you're done, play the game to make that happen.\r\n\r\n![](https://images.code.org/a634f249021651f60a1acf37bf78d07d-image-1475342557950.gif)" - courseC_puppy_loops8_markdown_instruction: "**Challenge:** Combine ideas from - the last few puzzles to complete this level." - courseC_puppy_loops8courseC_maze_loops8_markdown_instruction: "**Challenge:** - Combine ideas from the last few puzzles to complete this level." - courseD_artist_binary1_markdown_instruction: "We've provided you with a grid - of \"pixels\" that you can walk through and make designs by turning on only - certain squares.\r\n\r\nUse the blocks below to have the artist draw \"01010101\" - in binary in the first row." - courseD_artist_binary2_markdown_instruction: "Here's a function that takes - a binary string of 1's and 0's and instructs the artist to follow them from - left to right, top to bottom. \r\n
\r\nThe artist will fill-in the squares - when it sees a 1 and ignore the square when it sees a 0. \r\n
\r\n**Run - this code to see how the artist uses binary to draw this pattern.**" - courseD_artist_functions10_markdown_instruction: "This time, use lines of 8 - hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the 6 - times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - courseD_artist_functions2_markdown_instruction: "Functions let you define new - blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a - function called `draw a square`. This time, use the `draw a square` function - to create the glasses. \r\n
\r\n\r\nThe squares are 75 pixels apart." - courseD_artist_functions3_markdown_instruction: "We will come back to functions - shortly. Let's take a break to practice making this star. \r\n\r\nYou can - make this drawing by adding a repeat block." - courseD_artist_functions4_markdown_instruction: "Now that you can draw a star, - try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels long\r\n- - Turn 45 degrees between branches\r\n- Jump 100 pixels between each star" - courseD_artist_functions5_markdown_instruction: "When is drawing three stars - harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw - only those three stars to finish this puzzle." - courseD_artist_functions6_markdown_instruction: "You are doing great! \r\n\r\nMake - this window by drawing a square, then turning 90 degrees before drawing another, - and so on." - courseD_artist_functions7_markdown_instruction: "Let's take the code for the - window and add it to function `draw a window`. Now, we can call the function - any time we need to draw a window without having to write the code again. - \r\n\r\n\r\n
\r\n\r\nTry solving this puzzle by creating `draw - a window` and calling it five times. Watch out for the door!\r\n\r\n- The - top windows are 50 pixels away from each other. \r\n- The bottom windows - are 100 pixels below the top set." - courseD_artist_functions8_markdown_instruction: "**Challenge:** Create as many - functions as you think you need to make this drawing of 50 pixel squares." - courseD_artist_functions9_markdown_instruction: "Create this image using only - the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - courseD_artist_nestedLoops1a_markdown_instruction: "Now loop the triangle 6 - times. \r\n\r\nAfter each triangle, you'll need to turn 60 degrees before - drawing the next. " - courseD_artist_nestedLoops2_markdown_instruction: "This time, complete the - puzzle with the fewest number of blocks possible.\r\n\r\nAfter each triangle, - you'll need to turn 60 degrees before drawing the next.\r\nSee how much easier - this is with **nested loops**?" - courseD_artist_nestedLoops4_markdown_instruction: "Great! Do the same thing - with these circles. \r\n\r\n- Each circle is made by moving 1 pixel before - turning 1 degree, 360 times.\r\n- Each circle begins just 50 pixels from where - the last one ended" - courseD_artist_nestedLoops5_markdown_instruction: "What happens if you also - turn 90 degrees between circles?\r\n\r\n(To get this image, you still need - to jump 50 pixels between circles)" - courseD_artist_nestedLoops7_markdown_instruction: "Use what you've learned - to make this drawing.\r\n\r\n- The squares each have 100 pixel sides and 90 - degree angles\r\n- You will need to turn 60 degrees between each square" - courseD_artist_nestedLoops8_markdown_instruction: "Using what you have learned - in the last couple of puzzles, build this image from the beginning.\r\n\r\n- - Each hexagon has 50 pixel sides and 60 degree angles" - courseD_artist_nestedLoops9_markdown_instruction: "**Challenge:** Can you figure - out how to make a picture like this?\r\n\r\n- Both shapes have 50 pixel sides" - courseD_artist_nestedLoops9_predict1_markdown_instruction: "**Challenge:** - Can you figure out how to make a picture like this?\r\n\r\n- Both shapes have - 50 pixel sides" - courseD_artist_nestedLoopsFP_markdown_instruction: "Now it's your turn. Take - the skills you have learned and make something that you love!\r\n\r\nNeed - an idea? Try to make one of these:\r\n\r\n\r\n" - courseD_artist_ramp11_markdown_instruction: "Great! Now let's make a square - using Artist! The blocks are a little different, but the idea is the same.\r\n
\r\nEach - side of the square has a length of 200 pixels, and you will need to turn 90 - degrees to make each angle." - courseD_artist_ramp12_markdown_instruction: "Use what you've learned to draw - this triangle inside of a square.\r\n
\r\nThe sides are each 200 pixels - long. You will need to turn 90 degrees to make the square and 120 degrees - to make the triangle." - courseD_bee_conditionals1_markdown_instruction: "*\"This cloud is blocking - my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. If there's - a flower, get nectar." - courseD_bee_conditionals10_markdown_instruction: "Conditionals can be helpful, - even when you know exactly what is in each spot!\r\n\r\nCollect all of the - nectar and make all of the honey." - courseD_bee_conditionals1_predict1_markdown_instruction: "*\"This cloud is - blocking my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. - If there's a flower, get nectar." - courseD_bee_conditionals2_markdown_instruction: "More clouds! \r\n\r\nCheck - underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - courseD_bee_conditionals3_markdown_instruction: "You can only collect nectar - from flowers, but you can check any space to see if there is a flower." - courseD_bee_conditionals4_markdown_instruction: "In this puzzle, we know that - every flower has exactly one nectar, but the flowers aren't spaced evenly.\r\n\r\nGet - all of the nectar using as few blocks as possible." - courseD_bee_conditionals6_markdown_instruction: "*\"Now I just want to make - honey.\"*\r\n\r\nSome of these clouds might have honeycombs under them. Be - sure to check if a honeycomb is hiding behind each cloud!" - courseD_bee_conditionals7_markdown_instruction: "Sometimes a cloud covers a - flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block to - collect nectar at flowers and make honey at honeycomb." - courseD_bee_conditionals7_predict2_markdown_instruction: "Sometimes a cloud - covers a flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` - block to collect nectar at flowers and make honey at honeycomb." - courseD_bee_conditionals8_markdown_instruction: "**Challenge:** There will - be either a flower or a honeycomb under each of those clouds!\r\n\r\nCollect - nectar if there is a flower.\r\nOtherwise, make honey (because there is a - honeycomb)." - courseD_bee_conditionals9_markdown_instruction: "Collect all of the nectar - or make all the honey. You can only collect nectar from flowers and make honey - from honeycombs. Check any space to see if there is a flower or honeycomb." - courseD_bee_debugging1_markdown_instruction: "*\"These blocks are really bugging - me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." - courseD_bee_debugging2_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix - the error(s) to collect all of the nectar." - courseD_bee_debugging3_markdown_instruction: "*\"These blocks are really bugging - me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of - the honey." - courseD_bee_debugging4_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix - the error(s) to make all of the honey." - courseD_bee_debugging5_markdown_instruction: "**Challenge:** *\"This puzzle - is making me loopy!\"*\r\n\r\nAll of the commands that you need are already - here...now use your debugging skills to figure out how to solve this puzzle." - courseD_bee_debugging6_markdown_instruction: "**Challenge:** Fix the errors - to collect all of the nectar and make all of the honey." - courseD_bee_debugging7_markdown_instruction: "*\"Such a sticky situation!\"*\r\n\r\nHelp - the bee find his mistakes." - courseD_bee_debugging8_markdown_instruction: "*\"So many lovely flowers!\"*\r\n\r\nHelp - the bee fix the code to get all the nectar." - courseD_bee_debugging9_markdown_instruction: "*\"It's nectar-topia!\"*\r\n\r\nHelp - the bee fix the code to get all the nectar." - courseD_bee_nestedLoops1_markdown_instruction: "*\"This is going to **BEE** - great!\"**\r\n\r\nHelp the bee collect all of the nectar." - courseD_bee_nestedLoops2_markdown_instruction: "This time, help the bee collect - all of the nectar using as few blocks as possible." - courseD_bee_nestedLoops2_predict1_markdown_instruction: "This time, help the - bee collect all of the nectar using as few blocks as possible." - courseD_bee_nestedLoops3_markdown_instruction: "*\"Can you BEE-lieve all of - these flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " - courseD_bee_nestedLoops5_markdown_instruction: "Collect all of the nectar from - each flower and make honey at the honeycomb. " - courseD_bee_nestedLoops6_markdown_instruction: "Make all of the nectar." - courseD_bee_nestedLoops7_markdown_instruction: "**Challenge:** Figure out how - to get all of the nectar using only the blocks available." - courseD_bee_nestedLoops8_markdown_instruction: "Collect all of the nectar from - each flower and make honey at the honeycomb. " - courseD_bee_nestedLoops9_markdown_instruction: "Make all of the honey." - courseD_bee_nestedLoops9_predict2_markdown_instruction: "Make all of the honey." - courseD_collector_ramp10_markdown_instruction: "Take the same path as before, - but this time collect all of the treasure as you find it.\r\n" - courseD_collector_ramp8_markdown_instruction: "This puzzle is a lot like the - last one, but now it stars Laurel the Adventurer!\r\n
\r\n\r\nTake the - same path as before, but this time, use a repeat loop to collect treasure - when you get to it.\r\n" - courseD_collector_ramp9_markdown_instruction: "Take the same path as before, - but this time collect all of the treasure as you find it.\r\n" - courseD_debugging_1_markdown_instruction: "*\"These blocks are really bugging - me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." - courseD_debugging_2_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix - the error(s) to collect all of the nectar." - courseD_debugging_3_markdown_instruction: "*\"These blocks are really bugging - me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of - the honey." - courseD_debugging_4_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix - the error(s) to make all of the honey." - courseD_debugging_5_markdown_instruction: "**Challenge:** *\"This puzzle is - making me loopy!\"*\r\n\r\nAll of the commands that you need are already here...now - use your debugging skills to figure out how to solve this puzzle." - courseD_debugging_6_markdown_instruction: "**Challenge:** Fix the errors to - collect all of the nectar and make all of the honey." - courseD_farmer_conditionals1_markdown_instruction: "*\"Hi, I'm a farmer. I - need your help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove - to the pile of dirt and use the `remove` block to remove it." - courseD_farmer_conditionals3_markdown_instruction: "*\"Move to the pile of - dirt and tell me how many shovelfuls to remove.\"*\r\n\r\nUse as few blocks - as possible to solve this puzzle." - courseD_farmer_conditionals4_markdown_instruction: "*\"I don't know how much - dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using - a `while` loop." - courseD_farmer_conditionals6_markdown_instruction: "Look at all of those holes! Each - one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop - to easily fill them all!" - courseD_farmer_conditionals8_markdown_instruction: "**Challenge:** Fill all - of these holes using as few blocks as possible. " - courseD_farmer_condLoops1_markdown_instruction: "*\"Corn you help me harvest - today?\"*\r\n\r\nUse conditionals to make sure that you pick all of the corn, - but don't disturb the stalks where nothing is growing yet." - courseD_farmer_condLoops2_markdown_instruction: "*\"Lettuce collect both crops - from this row!\"*\r\n\r\nHelp the farmer collect both corn and lettuce from - the field." - courseD_farmer_condLoops4_markdown_instruction: "*\"Gosh! Now the crops are - growing in clusters!\"* \r\n\r\nHelp the farmer pick all of the lettuce in - each cluster before moving on to the next bunch." - courseD_farmer_condLoops5_markdown_instruction: "*\"What a bountiful crop!\"*\r\n\r\nThis - field has clusters of corn, lettuce, and pumpkins all growing together. Can - you collect them all?" - courseD_farmer_condLoops6_markdown_instruction: "*\"Let's take this one step - further!\"*\r\n\r\nCan you figure out how to pick the pumpkin? Make sure - to collect all of the corn along the way!" - courseD_farmer_condLoops7_markdown_instruction: "**Challenge:** Collect all - of the corn and lettuce, then pick the pumpkin." - courseD_farmer_condLoops8_markdown_instruction: "Collect all of the corn and - lettuce, then pick the pumpkin." - courseD_farmer_condLoops9_markdown_instruction: "Collect all of the corn and - lettuce, then pick the pumpkin." - courseD_farmer_condLoops9_predict1_markdown_instruction: "Collect all of the - corn and lettuce, then pick the pumpkin." - courseD_farmer_while1_markdown_instruction: "*\"Hi, I'm a farmer. I need your - help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove - to the pile of dirt and use the `remove` block to remove it." - courseD_farmer_while3_markdown_instruction: "*\"Move to the pile of dirt and - tell me how many shovelfuls to remove.\"*\r\n\r\nUse as few blocks as possible - to solve this puzzle." - courseD_farmer_while4_markdown_instruction: "*\"I don't know how much dirt - is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using a - `while` loop." - courseD_farmer_while4_predict1_markdown_instruction: "*\"I don't know how - much dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile - using a `while` loop." - courseD_farmer_while6_markdown_instruction: "Look at all of those holes! Each - one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop - to easily fill them all!" - courseD_farmer_while8_markdown_instruction: "**Challenge:** Fill all of these - holes using as few blocks as possible. " - courseD_maze_nestedLoops3_markdown_instruction: "*\"Zombie hungry!\"*\r\n\r\nGet - the zombie to the sunflower using the fewest number of blocks possible." - courseD_maze_nestedLoops4_markdown_instruction: "Get the zombie to the sunflower - using the fewest blocks possible! " - courseD_maze_nestedLoops6_markdown_instruction: "*\"Must eat sunflower!\"*\r\n\r\nGet - the zombie to the sunflower using only the blocks available." - courseD_maze_ramp1_markdown_instruction: "For this puzzle, drag all of the - blocks together and click \"Run\" to watch it go!" - courseD_maze_ramp2_markdown_instruction: "Drag an extra `move forward` block - out of the toolbox to finish your code." - courseD_maze_ramp3_markdown_instruction: "*\"This pig is ruffling my feathers.\"*\r\n\r\nThere - is one extra block that is going to cause the bird to crash. \r\nThrow it - away by dragging it back to the toolbox." - courseD_maze_ramp4_markdown_instruction: "*\"Trace the path and lead me to - the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" - courseD_maze_ramp5_markdown_instruction: "*\"Follow this path to get me to - the pig!\"*\r\n\r\nAvoid the TNT." - courseD_maze_ramp6_markdown_instruction: "*\"Keep calm and help me find the - bad pig. Otherwise I might get angry!\"*\r\n\r\nWhen you have several blocks - in a row, try moving them inside of a `repeat` loop. This will do the same - thing with less code!" - courseD_maze_ramp7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** - Use what you've learned to get the bird to the pig!" - courseD_maze_until10_markdown_instruction: "Help the zombie get to the sunflower." - courseD_maze_until10_predict2_markdown_instruction: "Help the zombie get to - the sunflower." - courseD_maze_until2_markdown_instruction: "Now, use the `repeat until` loop - to do the same thing without specifying how many times to move forward and - turn." - courseD_maze_until4_markdown_instruction: "*\"Dear person. Me zombie. Me hungry. - Must... get... to sunflower...\"*\r\n\r\nCan you get the zombie to the sunflower - using only the blocks that are available?" - courseD_maze_until5_markdown_instruction: "Use the `if` block to help the zombie - decide when to turn, then get the zombie to the sunflower." - courseD_maze_until6_markdown_instruction: "Help the zombie get to the sunflower." - courseD_maze_until7_markdown_instruction: "Help the zombie get to the sunflower." - courseD_maze_until8_markdown_instruction: "Help the zombie get to the sunflower." - courseD_maze_until9_markdown_instruction: "**Challenge:** Avoid the chompers - and help the zombie get to the sunflower." - courseD_playLab_cond1_markdown_instruction: "To start our game, Pirate Pegleg - (actor 1) needs to be able to get around in all directions. Connect the - blocks to the correct events to get Pegleg moving.\r\n\r\nGet Pegleg to the - dragon to solve this puzzle." - courseD_playLab_cond2_markdown_instruction: "Time to add points! Give Pegleg - (actor 1) a point when he makes it to the dragon. " - courseD_playLab_cond3_markdown_instruction: "It's time to use what we've - learned about conditionals to make this game amazing. This challenge has two - parts:\r\n\r\n 1) Use a `repeat forever` loop to make the dragon (actor 2) - change between random emotions every second. \r\n \r\n 2) Add code so that - when Pegleg gets to the dragon, he gets two points *if* the dragon is happy. - Otherwise, he should get only one point added to his score." - courseD_playLab_cond4_markdown_instruction: "This is about to get interesting!\r\n\r\nAdd - some code so that the ninja (actor 3) starts chasing Pegleg as soon as the - game begins. End the game as a loss if the ninja catches him." - courseD_playLab_cond5_markdown_instruction: "Now we need a way to win.\r\n\r\nAdd - a `repeat forever` loop that continuously checks **if** the score is greater - than 5, then ends the game as a **win** when it is." - courseD_playLab_cond6_markdown_instruction: "Wow, this game is hard to win!\r\n\r\nLet's - customize this game to make it more fun. This challenge has three parts:\r\n
\r\n\r\n1) Slow - the ninja down before you set him to chase the pirate. \r\n\r\n2) Use a - `repeat forever` loop to check to see if the pirate is in the \"safe zone\" - beneath the line of octopuses (greater than 225 pixels down). If he is, set - the ninja to **flee** the pirate. Otherwise, set the ninja to **chase** the - pirate. \r\n\r\n3) We don't want the pirate to stay in the \"safe zone\" - too long! Add code to the `if` statement above so that if the pirate is in - the safe zone, the program will wait one second, then deduct a point as long - as he stays beneath the octopus line." - courseD_playLab_cond6cloneForTest_markdown_instruction: "Can we make this work?" - courseE_artist_concept1_markdown_instruction: "Recreate this image. \r\n\r\n- - The hexagons have sides of 50 pixels\r\n- The hexagons are 100 pixels apart\r\n- - The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." - courseE_artist_concept4_markdown_instruction: "Recreate this drawing using - 13 blocks or fewer." - courseE_artist_functions1_markdown_instruction: "*\"Me zombie artist. Me love - drawing!\"*\r\n\r\nHelp the zombie draw glasses using squares with sides of - 100 pixels. \r\nThe bridge between the glasses is 75 pixels long.\r\n\r\n" - courseE_artist_functions10_markdown_instruction: "This time, use lines of 8 - hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the side - 6 times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - courseE_artist_functions2_markdown_instruction: "Functions let you define new - blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a - function called `draw a square`. This time, use the `draw a square` function - to create the glasses. \r\n
\r\n\r\nThe squares are 75 pixels apart." - courseE_artist_functions3_markdown_instruction: "We will come back to functions - shortly. Let's take a break to practice making this star. \r\n\r\nYou can - make this drawing by adding a repeat block." - courseE_artist_functions4_markdown_instruction: "Now that you can draw a star, - try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels long\r\n- - Turn 45 degrees between branches\r\n- Jump 100 pixels between each star" - courseE_artist_functions5_markdown_instruction: "When is drawing three stars - harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw - only those three stars to finish this puzzle." - courseE_artist_functions6_markdown_instruction: "You are doing great! \r\n\r\nMake - this window by drawing a square, then turning 90 degrees before drawing another, - and so on." - courseE_artist_functions7_markdown_instruction: "Let's take the code for the - window and add it to function `draw a window`. Now, we can call the function - any time we need to draw a window without having to write the code again. - \r\n\r\n\r\n
\r\n\r\nTry solving this puzzle by creating `draw - a window` and calling it five times. Watch out for the door!\r\n\r\n- The - top windows are 50 pixels away from each other. \r\n- The bottom windows - are 100 pixels below the top set." - courseE_artist_functions8_markdown_instruction: "**Challenge:** Did you know - that you can call functions from *inside* other functions?!\r\n\r\nCreate - as many functions as you think you need to make this drawing of 50 pixel squares." - courseE_artist_functions9_markdown_instruction: "Create this image using only - the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - courseE_artist_functions_predict1_markdown_instruction: "Here is a puzzle that - uses a function that we have defined. \r\n" - courseE_artist_ramp11_markdown_instruction: "Great! Now let's make a square - using Artist! The blocks are a little different, but the idea is the same.\r\n
\r\nEach - side of the square has a length of 200 pixels, and you will need to turn 90 - degrees to make each angle." - courseE_artist_ramp12_markdown_instruction: "Use what you've learned to draw - this triangle inside of a square.\r\n
\r\nThe sides are each 200 pixels - long. You will need to turn 90 degrees to make the square and 120 degrees - to make the triangle." - courseE_bee_concept1_markdown_instruction: "*\"Can you BEE-lieve all of these - flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " - courseE_bee_concept5_markdown_instruction: "Can you help the bee collect the - nectar from the flowers? \r\n\r\nYou can only collect nectar from flowers, - but you can check any space to see if there is a flower." - courseE_bee_functions10_markdown_instruction: "*\"Show me the HONEY!\"*\r\n\r\nSolve - this function by creating a function to turn, move forward and make all of - the honey, then return the bee to where it started and turn back." - courseE_bee_functions2_markdown_instruction: "Functions are blocks of code - that perform a task. \r\n\r\nUse the `get 2 nectar` function to collect the - nectar from each flower." - courseE_bee_functions3_markdown_instruction: "Build the `get 5` function to - use in this puzzle." - courseE_bee_functions4_markdown_instruction: "The `move and get nectar` function - turns the bee, collects nectar, and then returns the bee to where it started. \r\n\r\nUse - the `move and get nectar` function to collect all of the nectar." - courseE_bee_functions8_markdown_instruction: "**Challenge:** These flowers - can have a different amount of nectar each time you run the puzzle. \r\n\r\nCreate - a function that collects all of the nectar from each flower." - courseE_collector_ramp10_markdown_instruction: "Take the same path as before, - but this time collect all of the treasure as you find it.\r\n" - courseE_collector_ramp8_markdown_instruction: "This puzzle is a lot like the - last one, but now it stars Laurel the Adventurer!\r\n
\r\n\r\nTake the - same path as before, but this time, use a repeat loop to collect treasure - when you get to it.\r\n" - courseE_collector_ramp9_markdown_instruction: "Take the same path as before, - but this time collect all of the treasure as you find it.\r\n" - courseE_farmer_concept4_markdown_instruction: "Now let's go one level deeper! - We've nested that whole block of code into another loop, but you need to - get the artist back in place to draw the next line. Which of these code blocks - can you place at the end of the outermost loop to draw the whole grid?" - courseE_farmer_functions1_markdown_instruction: "*\"Have we met before? I'm - the farmer!\"*\r\n\r\nHelp the farmer get to the pumpkin and pick it." - courseE_farmer_functions10b_markdown_instruction: "Figure out which function - to use and which one to delete, then solve this puzzle!" - courseE_farmer_functions11_predict_markdown_instruction: "Figure out which - function to use and which one to delete, then solve this puzzle!" - courseE_farmer_functions1a_markdown_instruction: "*\"Oooh, veggies are cropping - up everywhere!\"*\r\n\r\nNow help the farmer pick the corn, lettuce, **and** - pumpkin." - courseE_farmer_functions2a_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nWe're - going to check lots of squares for crops in the next few puzzles. Let's - move everything into a function to make it easier." - courseE_farmer_functions2aALT_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nWe're - going to check lots of squares for crops in the next few puzzles. Let's - move everything into a function to make it easier." - courseE_farmer_functions2b_markdown_instruction: "Help the farmer pick the - corn, lettuce, and pumpkin." - courseE_farmer_functions3b_markdown_instruction: "*\"Oooh, veggies are cropping - up everywhere!\"*\r\n\r\nNow help the farmer pick the corn, lettuce, **and** - pumpkin." - courseE_farmer_functions3c_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nIt - seems silly to write that much code twice. Which set of blocks helps the - farmer check for produce and pick it when it is available? Drag that code - into a function, then call your function from inside the `while path ahead` - loops (after the `move forward` block)." - courseE_farmer_functions4b_markdown_instruction: "Use your new function to - solve this puzzle." - courseE_farmer_functions5b_markdown_instruction: "*\"They're multiplying!\"*\r\n\r\nThe - crops are now growing in clusters. Add some new `while` loops to your function - to make sure you get all of the produce." - courseE_farmer_functions5c_markdown_instruction: "Your function will come in - handy here." - courseE_farmer_functions6b_markdown_instruction: "Pick all of the produce." - courseE_farmer_functions6c_markdown_instruction: "What do you need to add this - program to collect all of the produce?" - courseE_farmer_functions7b_markdown_instruction: "Make a second function that - lets the farmer get all of the produce down a path, then brings her back to - where she began." - courseE_farmer_functions8b_markdown_instruction: "**Challenge:** Get the farmer - to the pumpkin and collect all of the lettuce and corn along the way. " - courseE_farmer_functions9b_markdown_instruction: "Collect all of the produce - to finish this stage." - courseE_maze_ramp1_markdown_instruction: "For this puzzle, drag all of the - blocks together and click \"Run\" to watch it go!" - courseE_maze_ramp2_markdown_instruction: "Drag an extra `move forward` block - out of the toolbox to finish your code." - courseE_maze_ramp3_markdown_instruction: "*\"This pig is ruffling my feathers.\"*\r\n\r\nThere - is one extra block that is going to cause the bird to crash. \r\nThrow it - away by dragging it back to the toolbox." - courseE_maze_ramp4_markdown_instruction: "*\"Trace the path and lead me to - the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" - courseE_maze_ramp5_markdown_instruction: "*\"Follow this path to get me to - the pig!\"*\r\n\r\nAvoid the TNT." - courseE_maze_ramp6_markdown_instruction: "*\"Keep calm and help me find the - bad pig. Otherwise I might get angry!\"*\r\n\r\nWhen you have several blocks - in a row, try moving them inside of a `repeat` loop. This will do the same - thing with less code!" - courseE_maze_ramp7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** - Use what you've learned to get the bird to the pig!" - courseE_playLab_scaffold1_markdown_instruction: "It is amazing how much you - have learned! Let's put it together to make a game, step by step. \r\n\r\nWe've - put these blocks in your tool box. Choose a random background, then pick an - actor to be your game's hero.\r\n\r\n![](https://images.code.org/745931ce34b3c47de19c36009e4a9c48-image-1471464938470.14.47 - PM.png)" - courseE_playLab_scaffold2_markdown_instruction: "Now let's get things moving! - \r\n\r\nUse event handlers and actions to make your hero move. Get the targets - to complete this puzzle.\r\n\r\n
\r\n\r\nWe've added these blocks to - your tool box to help you.\r\n\r\n![](https://images.code.org/6216c0559cfae16005ffb53e6532473b-image-1471472994205.23.54%20PM.png)" - courseE_playLab_scaffold3_markdown_instruction: "Now that your game has a hero, - add two or more additional actors to your game and make them move. \r\n\r\nDo - you want to have an actor patrol back and forth or chase your main character? - \r\nTry using a these new blocks to bring your game to life!\r\n\r\n" - courseE_playLab_scaffold4_markdown_instruction: "Getting the actors moving - is a great step, but we need to do more to make this feel like a real game. - A simple way to do this is to add or remove points when actors collide with - things. Find some interesting ways to change the score in your game.\r\n
\r\n\r\n*Don't - expect to get this right on the first try. Keep testing your game as you code. - You'll not only want a game that works, but one that is fun to play!*\r\n
\r\nWe've - added these blocks to your toolbox:\r\n\r\n![](https://images.code.org/ad0df96aa91c89e3d903dce2fe19517f-image-1472070105051.20.55 - PM.png)" - courseE_playLab_scaffold5_markdown_instruction: "Great job! You have all the - basic components of a working game. Now spend some time making sure the game - works the way you want. Try including a way to win or lose your game.\r\n
\r\n*Don't - forget: Keep testing your game as you code. You'll not only want a game that - works, but one that is fun to play!*\r\n
\r\nYour toolbox has been re-organized - to make it easier to find what you need. We've also added these blocks:\r\n\r\n![](https://images.code.org/59b92b4c288bd5fc0c3be355c968f3d1-image-1472074578380.27.57 - PM.png)" - courseE_playLab_scaffold6_markdown_instruction: "You've finished! Now you - can play your game or share it with your friends and classmates!" - courseF_artist_for1_markdown_instruction: "**Free Play:** Experiment with the - `for` loop and the `counter` variable. \r\n\r\nDrag out a few blocks and - see what happens. \r\n" - courseF_artist_for10_markdown_instruction: "**Free Play:** Try using the `counter` - variable with other drawing elements to make magical images like this one.\r\n\r\n" - courseF_artist_for2_markdown_instruction: "Use a `repeat` loops inside of a - `for` loop to create this stack of triangles that goes from 50 pixel to 100 - pixel sides." - courseF_artist_for3_markdown_instruction: "Create these triangles that go from - 20 pixel sides to 200 pixel sides, where each triangle is 20 pixels larger - than the last." - courseF_artist_for5_markdown_instruction: "Just one little change to the code - from the last image can create this drawing. Can you figure out what that - change is?\r\n
\r\nHint: You need to remove something!" - courseF_artist_for6_markdown_instruction: "If you turn a little bit more or - less than you normally would for a shape, it creates a neat effect.\r\n\r\nTry - using some of the code from the last level, but turning 89 degrees to create - this twisted square spiral." - courseF_artist_for7_markdown_instruction: "Make three small changes to the - code from the last level to get this! " - courseF_artist_for9_markdown_instruction: "Use the counter inside the `set - alpha` block to get this faded center. \r\n(This hexagon pattern was made - using a 60 degree turn.)" - courseF_artist_fwp1_markdown_instruction: "Today, we're going to try out a - powerful function editor. See if you can figure out how to edit the `draw - a square` function to find the bugs." - courseF_artist_fwp2_markdown_instruction: "Edit the function to accept a parameter - called `length`. \r\n\r\nThe sides of each square should be 25 pixels larger - than the last. The first square has 25 pixel sides. Replace the '???' with - the correct values to draw the picture." - courseF_artist_fwp2_predict1_markdown_instruction: "Edit the function to accept - a parameter called `length`. \r\n\r\nThe sides of each square should be 25 - pixels larger than the last. The first square has 25 pixel sides. Replace - the '???' with the correct values to draw the picture." - courseF_artist_fwp3_markdown_instruction: "Now try creating the function from - scratch! \r\n\r\nCreate a function called `draw a square` and use it to outline - these four boxes. \r\nMake sure to add a parameter for `length`!\r\n\r\n
\r\nStarting - from the upper right, the box widths are 50, 100, 150, and 200." - courseF_artist_fwp4_markdown_instruction: "Great job! Now edit this function - to add a parameter for the number of sides in your polygon.\r\n\r\nThe sides - of all the shapes are 100 pixels long." - courseF_artist_fwp5_markdown_instruction: "Use the function from the last puzzle - to draw this series of shapes. \r\n\r\n\r\nThe triangle has 21 pixel sides, - and the sides in each following shape are 7 pixels longer than the last. \r\nUse - the `multiplication`block to make this all happen with just one function call.\r\n
\r\nThe - `multipication` block looks like this ![](https://images.code.org/55e293447c6b26bbbcf29cda2036706b-image-1481322763779.png)\r\n\r\n" - courseF_artist_fwp6_markdown_instruction: "**Challenge:** Edit `draw a spiral - edge` to use `length` and `sides` parameters, then recreate these shapes.\r\n\r\n- - The square goes from 3 pixels to 90 pixels.\r\n- The hexagon goes from 3 pixels - to 100 pixels.\r\n- The triangle goes from 3 pixels to 105 pixels." - courseF_artist_fwp7_markdown_instruction: "Finish off the `draw a spiral edge` - function to also ask for a minimum length for the center of the spiral.\r\n\r\n- - The smallest side in the center of this square is 50 pixels long\r\n- The - longest side at the outside of this spiral is 200 pixels long\r\n" - courseF_artist_fwp8_markdown_instruction: "Can you figure out how to make this - drawing using the function that you just created?\r\n\r\n- The red spiral - goes from 50 to 200 pixels\r\n- The blue spiral goes from 25 to 125 pixels\r\n- - The green spiral goes from 100 to 300 pixels\r\n" - courseF_artist_fwp9_markdown_instruction: "**Freeplay:** Below there are functions - you've written, and more for you to play with. Play with the pen width to - see how different your drawings look!" - courseF_artist_variables10_markdown_instruction: "Here's your code from the - last puzzle. Try editing the variable in other ways. \r\n- What happens - if you start out with `length` less than 150? \r\n- What if you multiply - your variable by 1.25 each time through?\r\n- What will your code do if you - turn 119 degrees?" - courseF_artist_variables2_markdown_instruction: "Now use another loop to draw - three of those triangles right next to each other. \r\n\r\nYou can nest - the code from your last puzzle inside." - courseF_artist_variables3_markdown_instruction: "Before things get tricky, - can you move the length of 50 into a variable so we can use it in the next - few puzzles? \r\n
\r\n\r\n" - courseF_artist_variables4_markdown_instruction: "Now, use the `length` variable - to have the artist jump forward and down by `length` pixels between triangles." - courseF_artist_variables6_markdown_instruction: "**OOPS!** \r\n\r\nWe actually - need the triangles to be 60 pixels wide, with 60 pixel jumps. \r\n\r\nAren't - you glad you're using a variable?" - courseF_artist_variables6a_markdown_instruction: "Use what you've learned - to build this design where the squares have 80 pixel sides and the artist - jumps 80 pixels over and down between each one." - courseF_artist_variables7_markdown_instruction: "Let's start this section - by drawing a triangle with 150 pixels sides. \r\n\r\nBe sure to use the `length` - variable and a repeat loop." - courseF_artist_variables8_markdown_instruction: "Rebuild the triangle code - from the last puzzle, but this time use the `set length to` block to reset - the `length` variable to `length`+10 at the end of each loop iteration.\r\n\r\n![](https://images.code.org/6525bebee31ee15b84a48761b2866f53-image-1477531948829.31.37.png)\r\n\r\nThe - length of the first side of the triangle is 150 pixels." - courseF_artist_variables9_markdown_instruction: "Time to make some art! \r\n\r\nSee - what happens when you repeat the code from the last puzzle **30** times instead - of only 3!\r\n\r\nFeel free to make your lines any color or pattern for some - extra zest." - courseF_artist_variables_10_markdown_instruction: "Here's your code from the - last puzzle. Try editing the variable in other ways. \r\n- What happens - if you start out with `length` less than 150? \r\n- What if you multiply - your variable by 1.25 each time through?\r\n- What will your code do if you - turn 119 degrees?" - courseF_artist_variables_2_markdown_instruction: "Now use another loop to draw - three of those triangles right next to each other. \r\n\r\nYou can nest - the code from your last puzzle inside." - courseF_artist_variables_3_markdown_instruction: "Before things get tricky, - can you move the length of 50 into a variable so we can use it in the next - few puzzles? \r\n
\r\n\r\n" - courseF_artist_variables_4_markdown_instruction: "Now, use the `length` variable - to have the artist jump forward and down by `length` pixels between triangles." - courseF_artist_variables_5_markdown_instruction: "Add another set of loops - at the end of your code to add three more triangles. This time, move forward - and up!" - courseF_artist_variables_6_markdown_instruction: "OOPS! We actually need the - triangles to be 60 pixels wide, with 60 pixel jumps. \r\nAren't you glad - you're using a variable?" - courseF_artist_variables_6a_markdown_instruction: "Use what you've learned - to build this design where the squares have 80 pixel sides and the artist - jumps 80 pixels over and down between each one." - courseF_artist_variables_7_markdown_instruction: "Let's start this section - by drawing a triangle with 150 pixels sides. \r\n\r\nBe sure to use the `length` - variable and a repeat loop." - courseF_artist_variables_8_markdown_instruction: "Rebuild the triangle code - from the last puzzle, but this time use the `set length to` block to reset - the `length` variable to `length`+10 at the end of each loop iteration.\r\n\r\n![](https://images.code.org/6525bebee31ee15b84a48761b2866f53-image-1477531948829.31.37.png)" - courseF_artist_variables_9_markdown_instruction: "Time to make some art! \r\nSee - what happens when you repeat the code from the last puzzle 30 times instead - of only 3!\r\n\r\nFeel free to make your lines any color or pattern for some - extra zest." - courseF_artist_variables_FP_markdown_instruction: "**Freeplay:** Take what - you've learned and make your own drawing. \r\n\r\nHow can you use variables - with squares, pentagons, or hexagons?" - courseF_artist_variablesFP_markdown_instruction: "**Freeplay:** Take what you've - learned and make your own drawing. \r\n\r\nHow can you use variables with - squares, pentagons, or hexagons?" - courseF_bee_for10_markdown_instruction: "**Challenge:** Take what you've learned - about `for` loops and try to solve this problem. \r\n\r\nRemember: You may - have to run through solutions multiple times before you figure out all of - the steps.\r\n" - courseF_bee_for11_markdown_instruction: "If your loop is counting down, the - increment is **subtracted** from your counter variable each time through. - \r\n\r\nWhat should your increment be to collect 15, then 12, then 9, 6, 3 - nectar?" - courseF_bee_for2_markdown_instruction: "Write the code to help the bee collect - all of the nectar.\r\n\r\nYou will need lots of blocks for this challenge, - but we'll learn an easier way in the next puzzle." - courseF_bee_for3_markdown_instruction: "Ah, the `for` loop makes this much - easier! \r\n\r\nTry this puzzle using the `for` loop and the `counter` variable - to see how much shorter your code becomes." - courseF_bee_for6_markdown_instruction: "You can also use a `for` loop to count - down. \r\n\r\nTry gathering this nectar by counting down from **5** to **1** - by **1**." - courseF_bee_for7_markdown_instruction: "The last number in your `for` loop - is called the **\"increment\"**. Each time the loop is run, the counter variable - changes by the value of the **increment**.\r\n\r\nTry collecting these flowers - using an **increment** of 2." - courseF_bee_for8_markdown_instruction: "You've got this! \r\n\r\nWhat should - your **increment** be to collect 3, 6, 9, 12, 15 nectar?\r\n\r\n" - courseF_bee_for9_markdown_instruction: "Now, let's combine the `counter` variable - with a `math` block! \r\n\r\nHow can you use the `counter` variable to navigate - this garden with the fewest number of blocks possible?" - courseF_bee_fwp1_markdown_instruction: "Check beneath the clouds to see if - the flowers have any nectar." - courseF_bee_fwp2_markdown_instruction: "Here's some code that solves the last - puzzle. \r\nLet's pull it into a function, then call the function to check - this row for nectar. \r\n
\r\nThis may seem like a strange step now, - but it will be really helpful soon!" - courseF_bee_fwp3_markdown_instruction: "Time to put the function to the test! - \r\n\r\nLet's see if it makes collecting these three rows of nectar any easier." - courseF_bee_fwp4_markdown_instruction: "*\"How is your function holding up?\"* \r\n\r\nWe - need to make some adjustments here. Click \"edit\" to add a `length` parameter - to the function so that it will still work when the row is a different length." - courseF_bee_fwp5_markdown_instruction: "*\"You're doing great so far!\"*\r\n\r\nLet's - use this function to collect the nectar." - courseF_bee_fwp6_markdown_instruction: "You can make code shorter and more - efficient when you combine functions with other programming elements. \r\n
\r\nWhat - blocks can you use with your function to build a short and sweet solution - to this puzzle?" - courseF_bee_fwp7_markdown_instruction: "**Challenge:** Something looks a little - different. Modify your function to make honey as well." - courseF_playlab_variables0_markdown_instruction: "This is Pirate Pegleg. He's - awfully hard to understand these days! \r\n\r\nDecode his speech by changing - these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" - should be \"e\"\r\n\r\n" - courseF_playlab_variables1_markdown_instruction: "This is Pirate Pegleg. He's - awfully hard to understand these days! \r\n\r\nDecode his speech by changing - these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" - should be \"e\"\r\n\r\n" - courseF_playlab_variables1a_markdown_instruction: "Variables can be used to - store text that you want to use later. \r\n\r\nHave Kiki, the soccer player, scream - \"Goal!\" by assigning that text to the `shout` variable." - courseF_playlab_variables2_markdown_instruction: "Now, decode Pirate Pegleg's - speech by changing the value of the variables in just two places! \r\n- - \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" - courseF_playlab_variables2a_markdown_instruction: "Now, decode Pirate Pegleg's - speech by changing the value of the variables in just two places! \r\n- - \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" - courseF_playlab_variables2b_markdown_instruction: "We can make sentences more - interesting by mixing pieces of text with variables.\r\n\r\nInsert the variable - `color` into the middle of a sentence by putting it into the empty slot in - the `join` block." - courseF_playlab_variables3_markdown_instruction: "Great! Now that you understand - how to have a character use a variable to speak, we can introduce the `ask` - block. \r\n\r\nThe `ask` block will automatically store whatever the user - answers into the variable of your choice. \r\n\r\nRun this program and enter - something for Pegleg to say.\r\n\r\n" - courseF_playlab_variables3b_markdown_instruction: "Help Kiki have a conversation - with Brian by using the variable `A1` in all of the places where age `12` - should be used. " - courseF_playlab_variables4_markdown_instruction: "Now we're going to join - a variable to the beginning of Pegleg's next sentence using the `create text - with` block. \r\n\r\nCan you find the correct variable in the toolbox to fill - in the slot?\r\n\r\n" - courseF_playlab_variables4b_markdown_instruction: "Now, Pirate Pegleg has some - questions for Brian.\r\n\r\nThis code uses an `ask` block, so you can type - Brian's answers after you click \"Run\". \r\n\r\nPut the variables in the - correct places to create this conversation." - courseF_playlab_variables5_markdown_instruction: "Now we're going to add a - variable into the middle of Pegleg's sentence using more than one `create - text with` block. \r\n\r\nHere is how you link `create text with` blocks together - to form longer sentences:\r\n\r\n![](https://images.code.org/1c9bdc9e73d60b5ed053c3c4e9e1dcd4-image-1476993588379.gif)" - courseF_playlab_variables5b_markdown_instruction: "Pirate Pegleg is going to - ask **you** some questions.\r\n\r\nPut all of the variables in the correct - place so that his story makes sense." - courseF_playlab_variables6b_markdown_instruction: "You cannot fit much text - in an actor's speech bubble. Let's try building some text using the `show - title screen` block.\r\n\r\nWe have provided some starter questions and variables - for you. Join them together and put them in the title screen to make a fun - story." - courseF_playlab_variables7b_markdown_instruction: "Time to make your own project! \r\n\r\nCreate - some questions and weave the answers together into your very own story." - courseF_playlab_variables8b_markdown_instruction: "Use what you've learned - to create an improv scene between the actors.\r\n\r\n**Improv:** *A scene - that actors make up on stage using information from the audience.*" - Crack a Caesar Cipher_markdown_instruction: "# Crack a Caesar cipher!\r\n\r\nThis - tool lets you play with text and do Caesar ciphers. You can use this to either - encrypt a message or decrypt it.\r\n\r\n# Do this\r\n- Load a **Sample message** - from the message dropdown. This will load a message that has been encrypted - with a Caesar cipher.\r\n\r\n![](https://images.code.org/347139486c8c729bf3c6e72ce67da878-image-1476286380409.gif)\r\n\r\n- - Using the buttons in the Caesar substitution tab, you can shift the alphabet - forwards or backwards to try to unscramble the message.\r\n\r\n![](https://images.code.org/ef9ebc16d2f1442dc46fba9bd48b5d43-image-1476285966821.gif)\r\n\r\nSee - how long it takes you to crack the cipher! Is this a good method of encrypting - secret data?\r\n\r\n\r\n\r\n" - Crack Random Substitution_markdown_instruction: "# Break a random substitution - cipher!\r\n\r\nThis version of the tool gives you more information about the - encrypted text and more options for how to try out different substitutions.\r\n\r\n### - Different ways to analyze text\r\n- Play with some of the sorting options - available in the Random substitution cipher tab to get different views on - the letter frequencies in the input text as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\n### - Different ways to substitute\r\n- To substitute a letter you can drag a blue - letter of the alphabet directly underneath the orange letter you want changed - in the original ciphertext.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n### - Play. Always play.\r\n- There are other ways to analyze and substitute characters - that you can find by clicking on the buttons and trying out whatever you like.\r\n- - Remember: you can't break it :)\r\n\r\nSee how long it takes you to crack - the cipher! Is this a good method of encrypting secret data?\r\n\r\n" - CSD - for loop - on off_markdown_instruction: "# For Loops with Color LEDs\r\n\r\nFor - loops can make doing something to all the `colorLed`s easier. \r\n\r\n**Starter - Program:** There are two buttons one to turn all the `colorLeds` on and one - to turn them all off. \r\n\r\nCan you fill in the functions for each of these - task using a for loop to write your algorithm." - CSD - Predict - Array Length List Printing_markdown_instruction: "# For Loop - - Using List Length in For Loop\r\n\r\nOne of the most common ways that for - loops are used is with lists. In this example the condition is dependent on - list. \r\n\r\nWhat will this print in the console?" - CSD - Predict List Accessing_markdown_instruction: "# Predict\r\n\r\nThe code - below has 4 things it will log to the console. What do you think will print - in the console as a result of this code?\r\n" - CSD For Loops - Check For Understanding_markdown_instruction: "# Check In\r\n\r\nIn - the box below explain the 3 different parts of the for loop. Why is each important?\r\n" - CSD Hackathon Pt 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe - blocks you've been provided are those that a student in CS Discoveries would - likely have available after a week or so of using Game Lab. No sprites yet, - but you've **just been introduced to some powerful programming constructs - like generating random numbers, storing values in a variable, and looping.** - You'll also be pretty familiar with the drawing commands at this point.\r\n\r\n# - Do This\r\n\r\n* Using only the tools provided to you, **make something awesome!!**\r\n* - The likely project at this point would be an **animated card** but feel free - to go other directions if you like.\r\n* **Avoid complex variable arithmetic** - if you can. You \"don't know it\" yet.\r\n* **Avoid referencing the iterator - in your for loops**. At this point it's just a repeat loop." - CSD Hackathon Pt 2_markdown_instruction: "# MS Hackathon: Sprites and Interactivity\r\n\r\nYou - now can **create sprites, add images, manipulate their properties, and perform - simple variable arithmetic to update their values (e.g. `sprite.scale = sprite.scale - + 1;`)**. You've also been introduced to conditional statements and know - how to use them to get some interactive behavior with the mouse and keyboard.\r\n\r\n# - Do This\r\n\r\n* Using only the tools provided to you **make something awesome!**\r\n* - The likely target project here might be a **simple game** or **interactive - visualization**.\r\n* You don't yet know about **groups, loops, collisions**, - or more magical properties like **velocity or rotationSpeed**\r\n\r\n**These - commands are not in the block palette but feel free to use**\r\n\r\n* `mySprite.mouseActive - = true;` will make your sprite track mouse events\r\n* `mySprite.mouseIsOver` - and `mySprite.mouseIsPressed` are booleans you can now use to sense mouse-to-sprite - interactions.\r\n\r\n**To add sprites to images follow the pattern below**\r\n\r\n```\r\nvar - spriteImage, sprite;\r\n\r\n//You'll need to create a preload function to - load the image.\r\nfunction preload(){\t\t\t\r\n spriteImage = loadImage(\"imageURL\");\r\n}\r\n\r\n//Create - your sprite and add the image\r\nfunction setup(){\r\n sprite = createSprite(200,200,10,10);\r\n sprite.addImage(\"someName\", - spriteImage);\r\n}\r\n\r\n//Draw your sprites.\r\nfunction draw(){\r\n\tbackground(255,255,255);\r\n\tdrawSprites();\r\n}\r\n```" - CSD Hackathon Week 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe - blocks you've been provided are those that a student in CS Discoveries would - likely have available after a week or so of using Game Lab. No sprites yet, - but you've **just been introduced to some powerful programming constructs - like generating random numbers, storing values in a variable, and looping.** - You'll also be pretty familiar with the drawing commands at this point.\r\n\r\n# - Do This\r\n\r\n* Using only the tools provided to you, **make something awesome!!**\r\n* - The likely project at this point would be an **animated card** but feel free - to go other directions if you like.\r\n* **Avoid complex variable arithmetic** - if you can. You \"don't know it\" yet.\r\n* **Avoid referencing the iterator - in your for loops**. At this point it's just a repeat loop." - CSD Hackathon Week 2_markdown_instruction: "# MS Hackathon: Sprites and Interactivity\r\n\r\nYou - now can **create sprites, add images, manipulate their properties, and perform - simple variable arithmetic to update their values (e.g. `sprite.scale = sprite.scale - + 1;`)**. You've also been introduced to conditional statements and know - how to use them to get some interactive behavior with the mouse and keyboard.\r\n\r\n# - Do This\r\n\r\n* Using only the tools provided to you **make something awesome!**\r\n* - The likely target project here might be a **simple game** or **interactive - visualization**.\r\n* You don't yet know about **groups, loops, collisions**, - or more magical properties like **velocity or rotationSpeed**\r\n\r\n**These - commands are not in the block palette but feel free to use**\r\n\r\n* `mySprite.mouseActive - = true;` will make your sprite track mouse events\r\n* `mySprite.mouseIsOver` - and `mySprite.mouseIsPressed` are booleans you can now use to sense mouse-to-sprite - interactions.\r\n\r\n**To add sprites to images follow the pattern below**\r\n\r\n```\r\nvar - spriteImage, sprite;\r\n\r\n//You'll need to create a preload function to - load the image.\r\nfunction preload(){\t\t\t\r\n spriteImage = loadImage(\"imageURL\");\r\n}\r\n\r\n//Create - your sprite and add the image\r\nfunction setup(){\r\n sprite = createSprite(200,200,10,10);\r\n sprite.addImage(\"someName\", - spriteImage);\r\n}\r\n\r\n//Draw your sprites.\r\nfunction draw(){\r\n\tbackground(255,255,255);\r\n\tdrawSprites();\r\n}\r\n```" - CSD U1 - Image Filter Demo show Binary_markdown_instruction: "# Oh Noes\r\nThis - tree should be green, but it's blue instead. Can you use the filter blocks - to change all of the blue pixels to green?" - CSD U1 - Image Filter Demo_markdown_instruction: "# Oh Noes\r\nThis tree should - be green, but it's blue instead. Can you use the filter blocks to change - all of the blue pixels to green?" - CSD U1 - PixFilter 1x1 Filter_markdown_instruction: "# Filtering Images\r\nIf - you've ever used Instragram you've probably encountered an image filter. - Image filters read in each pixel, process it in some way, and the return the - filtered pixel. In this tool we're going to start by filtering just a single - pixel before moving on to a full image.\r\n\r\nYou’ll notice there are three - drop downs under the picture. A red replace, a green replace, and a blue replace. - Next to it are drop downs for the colors. How many bits are we working with? - Yes, we’re working with 3. We also learned that the bits control the colors. - First bit controls R, second bit controls G, third bit controls B.\r\n\r\n\r\n# - Do This\r\nTry changing the color drop downs next to replace. Based on how - the bits change, can you formulate what replace is doing? Talk to your partner - and see if you can figure it out.\r\n\r\n" - CSD U1 - PixFilter 1x1 intro_markdown_instruction: "# 3 Bit Colors\r\nEach - pixel is a square on a screen that emits light. Each pixel can have a certain - number of bits assigned to it, and bits per pixel determine the colors that - can be rendered.\r\n\r\nIn this tool we're using 3 bits to define the one - large black pixel. The first bit affects the red tint. The second bit affects - the green tint. The third bit affects the blue tint.\r\n\r\n# Do This\r\n\r\n* - Click the \"Run\" button to start the widget\r\n* Click on the light bulbs - to turn on or off each color and see what happens to your pixel\r\n* See how - many different colors you can create with just three bits\r\n* Write down - the binary associated with each color you come up with\r\n" - CSD U1 - PixFilter Filter Intro_markdown_instruction: "# Filtering Pixels\r\nIf - you've ever used Instagram you've probably encountered an image filter. - Image filters read in each pixel, process it in some way, and the return the - filtered pixel. In this tool we're going to start by filtering just a single - pixel before moving on to a full image.\r\n\r\n# Do This\r\n\r\n* Try changing - the color drop downs in the Filter section\r\n* Click on the top row of lightbulbs - in the Diagram section to see how the filter will convert the input (top bulbs) - to the output (bottom bulbs)\r\n* Look at how the numbers in the Binary section - reflect changes to the colors\r\n* Based on how the bits change, can you formulate - what replace is doing? Talk to your partner and see if you can figure it out.\r\n* - Complete the Level 2 table in your Activity Guide\r\n\r\n" - CSD U1 - PixFilter Filter Revisit_markdown_instruction: "# Combining Filters\r\nNow - that you've played with filtering a single color channel, it's time to see - what happens if we filter more than one color.\r\n\r\n# Do This\r\n\r\n* Using - the color dropdowns in the filter section, build a filter that changes the - value of more than one color channel\r\n* Click on the top row of lightbulbs - in the Diagram section to see how the filter will convert the input (top bulbs) - to the output (bottom bulbs)\r\n* Look at how the numbers in the Binary section - reflect changes to the colors\r\n* Complete the Level 4 table in your Activity - Guide\r\n\r\n" - CSD U1 - PixFilter FreePlay_markdown_instruction: "# Free Play\r\n\r\nDo as - you will, make something awesome" - CSD U1 - PixFilter Full_markdown_instruction: "# Instructions Go Here" - CSD U1 - PixFilter Mario_markdown_instruction: "# Combining Filters\r\n\r\nSometimes - you'll need to filter more than one pixel to get the color change that you - want.\r\n\r\n# Do This\r\nCheck out Mario, he's lookin' pretty good in his - red hat and overalls. Your job it to set up the filter so he looks like Luigi, - with a green hat and overalls.\r\n\r\n* First, determine which bit(s) needs - to change in order to the change you want\r\n* Once you've figured out which - bit needs changing, set the filter dropdown appropriately\r\n* After you've - got the filter working so that, try to come up with other filters that change - *only* his hat and overalls - how many different clothing colors can you come - up with?\r\n\r\n_How many tries did it take you to find the right filter?_\r\n\r\n\r\n\r\n" - CSD U1 - PixFilter Mushroom_markdown_instruction: "# Filtering Images\r\nNow - that we've seen how a single pixel can be filtered to change its color, let's - try applying a filter to an image made of multiple pixels. The filter you - create will be applied to each pixel in the image - and you still have the - light bulbs available to experiment with how your filter will work with individual - colors.\r\n\r\n\r\n# Do This\r\nHere's a picture of a red mushroom - you're - going to try and turn it into a yellow mushroom.\r\n\r\n* First, determine - which bit needs to change in order to turn red into yellow\r\n* Once you've - figured out which bit needs changing, use the filter dropdowns to make all - of the red areas turn yellow\r\n* After you've got the filter working so - that the red has turned yellow, see if you can come up with filters that turn - the mushroom other colors\r\n\r\n_How many tries did it take you to find the - right filter?_\r\n\r\n\r\n\r\n" - CSD U1 - PixFilter UnFilter_markdown_instruction: "# UnFiltering\r\n\r\nBit - filters can be used to _undo_ filtering as well. Here's an image of a bird - that's been filtered from it's original colors. Can you get it back to normal?\r\n\r\n# - Do This\r\n\r\n\r\nHere's what our bird should look - like. Use the filter to get him back to normal.\r\n\r\n* Decide which colors - (and so which bits) you need to change. You might need to write your thoughts - with pencil and paper.\r\n* Once you know which bits need changing, set the - filter dropdown appropriately to test your answer\r\n* After you've fixed - the image, write down both your process and your final filter in the Level - 6 section of your Activity Guide\r\n\r\n_How many tries did it take you to - find the right filter?_\r\n" - CSD U1 - Single Pixel_markdown_instruction: "# 3 Bit Colors\r\nEach pixel is - a square on a screen that emits light. Each pixel can have a certain number - of bits assigned to it, and bits per pixel determine the colors that can be - rendered.\r\n\r\nIn this tool we're using 3 bits to define the one large - blue pixel pixel. The first bit affects the red tint. The second bit affects - the green tint. The third bit affects the blue tint.\r\n\r\n# Do This\r\n\r\n* - Click on the light bulbs to turn on or off each color and see what happens - to your pixel\r\n* See how many different colors you can create with just - three bits\r\n" - CSD U2 layout style body_markdown_instruction: "
\r\n
\r\n**What - is a CSS rule-set?**\r\nBlah blah answer\r\n
\r\n
\r\n**What - is a selector?**\r\nblah blah answer\r\n
\r\n
\r\n**What - is a declaration block?**\r\nblah blah answer\r\n
\r\n
\r\n**what - is a property-value pair?**\r\nblah blah answer\r\n
\r\n
\r\n**How - do I create a new rule-set?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n# The Body Element\r\n\r\n* Find the `body` - rule-set in \"style.css\"\r\n* Discuss with a partner what you think will - happen if you add `text-align`, `color`, or other text properties to the `body` - rule set.\r\n* Try out some different properties to check your guesses." - CSD U2 layout style textalign_markdown_instruction: "
\r\n
\r\n**What - is a CSS rule-set?**\r\nBlah blah answer\r\n
\r\n
\r\n**What - is a selector?**\r\nblah blah answer\r\n
\r\n
\r\n**What - is a declaration block?**\r\nblah blah answer\r\n
\r\n
\r\n**what - is a property-value pair?**\r\nblah blah answer\r\n
\r\n
\r\n**How - do I create a new rule-set?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n# Text Align\r\n\r\n* Find the `text-align` - property in \"style.css\" in the `p` rule-set.\r\n* Change the text-align - value to `center` or `right`.\r\n* Add a `text-align` rule in the `body` rule - set" - CSD U2 add file_markdown_instruction: "
\r\n
\r\n**What - is a style sheet?**\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n
\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n
\r\n
\r\n**How - do I create a new style sheet?**\r\nTo create a new style sheet, - click on the \"Add CSS\" button above the code area.\r\n
\r\n
\r\n**What - should I name my style sheet?**\r\nYou can name your style sheet - anything, but it's better to choose a relevant name, such as \"style.css\" - or \"aboutmestyles.css\" so that it's clear what the file is. Your file - should always end in the \".css\" extension.\r\n
\r\n
\r\n**How - do I rename a file?**\r\nTo rename a file, you can right click (or - control click) on the file name and choose the \"Rename\" option. This will - allow you to type in a new file name. Clicking on a file name after it is - already highlighted will also allow you to rename the file.\r\n
\r\n
\r\n**How - do I add a style sheet to a web page?**\r\nTo add a style sheet - to a web page, open up the code for the web page. Inside the head tag, add - the following code ``. Then change - \"style.css\" to the name of your style sheet.\r\n
\r\n
\r\n# - Adding a Style Sheet\r\n\r\nThis is your About Me page from before. In the - next level, you'll have a chance to add some different styles to it, but - first, you need to add a style sheet, name it, and link it to your html page.\r\n\r\n1. - Create a new style sheet for your project.\r\n2. Rename the style sheet file.\r\n3. - Add your style sheet to your HTML page.\r\n\r\n" - CSD U2 classes modify_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nFor the code to work, you need to both - create a winter class and add elements to the class.\r\n\r\nThe class is created - in the style sheet, with the following code.\r\n\r\n
.winter {\r\n  color:
-        rgb(195,230,255);\r\n}
\r\n\r\nThis code creates a class called `winter` - and makes everything in the class our winter blue, which has the RGB values - of (195,230,255).\r\n\r\nThe code that adds a `h5` element to the winter class - is `
`. The `class=winter` inside the opening tag adds - everything inside the tag to the class.\r\n
\r\n
\r\n**What - rules can be added to a class rule-set?**\r\nA class rule-set can - have the same rules as any other type of selector. If a rule does not apply - to the content of the class (for example, using `font-size` on an element - with no text), then the computer will ignore that rule, but still use the - rules that work.\r\n
\r\n
\r\n**Why does the selector - have a period in front of it?**\r\nIn CSS, a period in front of - a selector means that the selector is the name of a class. If there is no - period, it means that the selector is the name of an HTML tag.\r\n
\r\n
\r\n**Why - would a web developer use classes?**\r\nA web developer uses classes - when some elements should be styled differently than others, even if they - are the same tag. Classes can also be used to give elements that have different - tags the same style.\r\n
\r\n
\r\n**I got different - RGB values, but mine are right, too.**\r\nBecause RGB creates millions - of different colors, some are so similar that people have a hard time telling - them apart. That means that there are multiple RGB values that are close - enough to work for our winter color.\r\n\r\n
\r\n
\r\n# Adding - Rules\r\n\r\nYour winter words should all have the same color and font.\r\n\r\n* - Find the CSS rule-set in the style sheet that gives the winter words their - style.\r\n* Add a rule that changes the font of the winter words. It can - be any font, but it will need to be different from that of the other three - seasons.\r\n* Add any other rules you'd like for your winter words." - CSD U2 classes sample_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nFor the code to work, you need to both - create a winter class and add elements to the class.\r\n\r\nThe class is created - in the style sheet, with the following code.\r\n\r\n
.winter {\r\n  color:
-        rgb(195,230,255);\r\n}
\r\n\r\nThis code creates a class called `winter` - and makes everything in the class our winter blue, which has the RGB values - of (195,230,255).\r\n\r\nThe code that adds a `h5` element to the winter class - is `
`. The `class=winter` inside the opening tag adds - everything inside the tag to the class.\r\n
\r\n
\r\n**Why - does the selector have a period in front of it?**\r\nIn CSS, a period - in front of a selector means that the selector is the name of a class. If - there is no period, it means that the selector is the name of an HTML tag.\r\n
\r\n
\r\n**Why - would a web developer use classes?**\r\nA web developer uses classes - when some elements should be styled differently than others, even if they - are the same tag. Classes can also be used to give elements that have different - tags the same style.\r\n
\r\n
\r\n**I got different - RGB values, but mine are right, too.**\r\nBecause RGB creates millions - of different colors, some are so similar that people have a hard time telling - them apart. That means that there are multiple RGB values that are close - enough to work for our winter color.\r\n\r\n
\r\n
\r\n# Classes\r\n\r\nIn - this page, the web developer has used classes to give some of the words our - winter color.\r\n\r\n* Look at the HTML code for the winter words. Why is - \"snowy\" the only winter word without the winter color?\r\n* Add code to - the HTML that will give \"snowy\" the same winter blue as the other words.\r\n* - Look inside the style sheet to find the rule that makes all the words in the - winter class blue, and check whether your RGB numbers are close to the ones - in the style sheet. \r\n* Discuss with your partner how the code works." - CSD U2 classes spring_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nFor the code to work, you need to both - create a spring class and add elements to the class.\r\n\r\nThe spring class - is already created in the style sheet, but it doesn't have any rules.\r\n\r\n
.spring
-        {\r\n  color: rgb(195,230,255);\r\n}
\r\n\r\nLook at the rules in the - `winter` class for clues to how to make rules for the summer class.\r\n\r\nYou - will also need to add some elements to the spring class inside your HTML file.\r\n\r\nThe - code in the HTML file that adds a `h5` element to the winter class is `
`. Use this pattern to add elements to the spring class, - too.\r\n
\r\n
\r\n**What rules can be added to a - class rule-set?**\r\nA class rule-set can have the same rules as - any other type of selector. If a rule does not apply to the content of the - class (for example, using `font-size` on an element with no text), then the - computer will ignore that rule, but still use the rules that work.\r\n
\r\n
\r\n**Why - does the selector have a period in front of it?**\r\nIn CSS, a period - in front of a selector means that the selector is the name of a class. If - there is no period, it means that the selector is the name of an HTML tag.\r\n
\r\n
\r\n**Why - would a web developer use classes?**\r\nA web developer uses classes - when some elements should be styled differently than others, even if they - are the same tag. Classes can also be used to give elements that have different - tags the same style.\r\n
\r\n
\r\n# Spring Class\r\n\r\nNow - that your winter class is ready, you can start on the other seasons.\r\n\r\n* - Find the empty CSS rule-set in the style sheet that gives the spring words - their style.\r\n* Add two rules, one to give the text your spring color for - earlier in the lesson, and another to give the text a different font, font - size, or decoration.\r\n* Add the spring class to the spring elements in the - HTML page." - CSD U2 classes summer_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nFor the code for the winter class to work, - it needs to both create a winter class and add elements to the class.\r\n\r\nThe - class is created in the style sheet, with the following code.\r\n\r\n
.winter
-        {\r\n  color: rgb(195,230,255);\r\n}
\r\n\r\nThis code creates a class - called `winter` and makes everything in the class our winter blue, which has - the RGB values of (195,230,255).\r\n\r\nThe code that adds a `h5` element - to the winter class is `
`. The `class=winter` inside - the opening tag adds everything inside the tag to the class.\r\n
\r\n
\r\n**How - do I create a new rule-set?**\r\nYou can create a new rule-set by - following the pattern that the `winter` and `spring` classes used in the style - sheet.\r\n
.winter {\r\n  color: rgb(195,230,255);\r\n}
\r\n\r\nThe - selector name and the color values will be different, but the following pattern - is always the same.\r\n\r\n
.classname {\r\n  property1: value1;\r\n  property2:
-        value2;\r\n}
\r\n\r\n
\r\n
\r\n**Why does the - selector have a period in front of it?**\r\nIn CSS, a period in - front of a selector means that the selector is the name of a class. If there - is no period, it means that the selector is the name of an HTML tag.\r\n
\r\n
\r\n**Why - would a web developer use classes?**\r\nA web developer uses classes - when some elements should be styled differently than others, even if they - are the same tag. Classes can also be used to give elements that have different - tags the same style.\r\n
\r\n
\r\n# Summer and Autumn Classes\r\n\r\n* - Inside the style sheet, create a new rule-set for a \"summer\" class.\r\n* - Add a rule to set the text in the summer class to your summer RGB color.\r\n* - Add the summer class to the summer elements in the HTML page.\r\n* Do the - same for the autumn class." - CSD U2 layout style bgcolor_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nHere is the code that is making the background - of the page blue:\r\n\r\n
body {\r\n  background-color: lightblue;\r\n}
\r\n\r\n* - `body` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the body element is the entire - page.\r\n* `background-color: lightblue;` is the rule that makes the entire - page light blue.\r\n * `background-color` is the _property_. It explains - what the rule is about, in this case the color of the background.\r\n * `lightblue` - is the _value_. It explains how the rule should be applied, in this case - making the background light blue.\r\n
\r\n
\r\n**What - colors can I use in CSS?**\r\nCSS includes most common color names - (red, blue, green, etc.), and many uncommon ones. You can see a full list - of CSS color names at W3Schools - - HTML Color Names. You can still use colors that are not included in - the named list, but you will need to use their RGB values. You can read more - about using colors in CSS at W3Schools - - CSS Legal Color Values\r\n
\r\n
\r\n**What - does the `background-color` property do?**\r\nThe `background-color` - property determines the color of the background of an element. You can read - more about the property at W3Schools - - CSS background-color Property\r\n
\r\n
\r\n**What - if an element inside the page has a different background color from the body?**\r\nYou - can see the answer to this question by adding a `background-color` rule to - the `p` tag. The paragraphs will have the background color in the rule for - the `p` tag, and the rest of the page will follow the rule for the `body` - tag.\r\n
\r\n
\r\n**What is a style sheet?**\r\nA - style sheet is a document that controls how a web page will appear. External - style sheets are separate files that are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n
\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n
\r\n
\r\n#Background - Color\r\n\r\n* Find the code in the style sheet that is making the background - of the entire page light blue.\r\n* Change the code to make the page a different - color.\r\n* Try to change the background color of just the paragraphs." - CSD U2 layout style body_markdown_instruction: "
\r\n\r\n
\r\n**What - does the `body` selector do?**\r\nBecause the content of the web - page is all inside the `body` tag, the body selector gives style rules for - everything on the web page.\r\n
\r\n
\r\n**What - does the `color` property do?**\r\nThe `color` property specifies - the color of the text. If there’s no text, it won’t do anything. Read more - at W3Schools - - CSS color Property\r\n
\r\n
\r\n**What does - the `text-align` property do?**\r\nThe `text-align` property aligns - the text to the left, right, or center. You can read more at W3Schools - - CSS text-align Property\r\n
\r\n
\r\n**What - does the `text-decoration` property do?**\r\nThe `text-decoration` - property puts a line over, under, or through a piece of text. You can read - more about the property at W3Schools - - CSS text-decoration Property\r\n
\r\n
\r\n**What - does the `font-family` property do?**\r\nThe `font-family` property - changes the font of the text. It gives a general description of the type - of font that should be used, but each browser might display the font slightly - differently. Read more at W3chools - - CSS font-family Property\r\n
\r\n
\r\n**What - does the `font-size` property do?**\r\nThe `font-size` property - changes the size of the text. You can use general terms, such as `small`, - `medium`, and `large`, or you can specify the exact size in pixels, such as - `20px`. Read more at W3Schools - - CSS font-size Property\r\n
\r\n
\r\n**What - is a stylesheet?**\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n
\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n
\r\n
\r\n# - The Body Element\r\n\r\n* Find the `body` rule-set in the style sheet.\r\n* - Discuss with a partner what you think will happen if you add `text-align`, - `color`, or other text properties to the `body` rule set.\r\n* Try out some - different properties to check your guesses." - CSD U2 layout style border_markdown_instruction: "
\r\n
\r\n**What - colors can I use in CSS?**\r\nCSS includes most common color names - (red, blue, green, etc.), and many uncommon ones. You can see a full list - of CSS color names at W3Schools - - HTML Color Names. You can still use colors that are not included in - the named list, but you will need to use their RGB values. You can read more - about using colors in CSS at W3Schools - - CSS Legal Color Values\r\n
\r\n
\r\n**How - does the code work?**\r\nHere is the code that is making the image - borders:\r\n\r\n
img {\r\n  border-color: saddlebrown;\r\n  border-width:
-        4px;\r\n  border-style: solid;\r\n  border-radius: 10px;\r\n}
\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `border-color: - saddlebrown;`,`border-width: 4px;`,`border-style: solid;`, and `border-radius: - 10px;` are the rules that make the border.\r\n
\r\n
\r\n**What - does the `border-style` property do?**\r\nThe `border-style` property - determines what kind of border (solid, dotted, etc.) the element has. You - can read more about this property at W3Schools - - CSS border-style Property\r\n
\r\n
\r\n**What - does the `border-radius` property do?**\r\nThe `border-radius` property - determines the radius of the curves at the corners of the element. A bigger - radius makes a bigger, softer curve, and a smaller radius makes a smaller, - sharper curve. A radius of zero makes a regular corner. You can read more - about this property at W3Schools - - CSS3 border-radius property\r\n
\r\n
\r\n**What - does the `float` property do?**\r\nThe `float` property makes an - element \"float\", meaning that the elements that come after it all flow around - it. If the `float` value is `left`, the element will float to the left, and - the elements after it will show up on its right. If the `float` value is - `right`, the element will float to the right, and the elements after it will - show up on its left. You can read more about this property at W3Schools - - CSS float Property\r\n
\r\n
\r\n\r\n# Borders\r\n\r\n* - Find the rules in the style sheet that set image borders color and width.\r\n* - Change the color and width of your borders.\r\n* Try out some different border - styles.\r\n * Choose from `dotted`, `dashed`, `solid`, and `double`\r\n* - Put a border on another type of page element, such as one of the headers or - the paragraphs." - CSD U2 layout style borderradius_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nHere is the code that is making the image - borders:\r\n\r\n
img {\r\n  border-color: saddlebrown;\r\n  border-width:
-        4px;\r\n  border-style: solid;\r\n  border-radius: 10px;\r\n}
\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `border-color: - saddlebrown;`,`border-width: 4px;`,`border-style: solid;`, and `border-radius: - 10px;` are the rules that make the border.\r\n
\r\n
\r\n**What - does the `border-style` property do?**\r\nThe `border-style` property - determines what kind of border (solid, dotted, etc.) the element has. You - can read more about this property at W3Schools - - CSS border-style Property\r\n
\r\n
\r\n**What - does the `border-radius` property do?**\r\nThe `border-radius` property - determines the radius of the curves at the corners of the element. A bigger - radius makes a bigger, softer curve, and a smaller radius makes a smaller, - sharper curve. A radius of zero makes a regular corner. You can read more - about this property at W3Schools - - CSS3 border-radius property\r\n
\r\n
\r\n**What - does the `float` property do?**\r\nThe `float` property makes an - element \"float\", meaning that the elements that come after it all flow around - it. If the `float` value is `left`, the element will float to the left, and - the elements after it will show up on its right. If the `float` value is - `right`, the element will float to the right, and the elements after it will - show up on its left. You can read more about this property at W3Schools - - CSS float Property\r\n
\r\n
\r\n\r\n# Border Radius\r\n\r\n* - Look at the `border-radius` property inside your `img` rule-set\r\n* Discuss - with your partner what you think the property does.\r\n* Try different values - for border radius and decide which one you like the best." - CSD U2 layout style float_markdown_instruction: "
\r\n\r\n
\r\n**How - does the code work?**\r\nHere is the code that is making the image - float on the left hand side of the page:\r\n\r\n
img {\r\n  float: left;\r\n}
\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `float: - left;` is the rule that makes the image float to the left.\r\n
\r\n
\r\n**What - does the `float` property do?**\r\nThe `float` property makes an - element \"float\", meaning that the elements that come after it all flow around - it. If the `float` value is `left`, the element will float to the left, and - the elements after it will show up on its right. If the `float` value is - `right`, the element will float to the right, and the elements after it will - show up on its left. You can read more about this property at W3Schools - - CSS float Property\r\n
\r\n
\r\n\r\n# Float\r\n\r\n* Look - at the `float` property inside your `img` rule-set\r\n* Discuss with your - partner what you think the property does.\r\n* Change the value from `left` - to `right`." - CSD U2 layout style freeplay_markdown_instruction: "# About Me Page\r\n\r\nTry - out these some new CSS properties on your About Me page.\r\n\r\n* Add styling - of your choice to your About Me Page. Be sure to use at least 3 new CSS properties.\r\n\r\n# - Checklist\r\n\r\n* At least 3 of the following CSS Properties are used:\r\n\r\n - * `background-color`\r\n * `height`\r\n * `width`\r\n * `border-style`\r\n - * `border-radius`\r\n * `border-width`\r\n * `float`\r\n * `margin`\r\n\r\n\r\nIf - you’ve used at least 3 of the properties from the checklist, you can explore - some additional CSS properties to add to your About Me page." - CSD U2 layout style margin_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nHere is the code that is putting extra - space around the images:\r\n\r\n
img {\r\n\tmargin: 10px;\r\n}
\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `margin: - 10px;` is the rule that puts 10 pixels of space around the image.\r\n
\r\n
\r\n**What - does the `margin` property do?**\r\nThe `margin` property determines - how much space will be around the image. Most of the time, you will define - in the margin in pixels. You can read more about this property at W3Schools - - CSS margin Property\r\n
\r\n
\r\n**What does - `px` mean / What is a pixel?**\r\nPixel, which is abbreviated `px`, - is how elements are measured in CSS. It’s the size of a single point of light - on the screen.\r\n
\r\n
\r\n# Margin\r\n\r\nMargins specify - how much space should be around an element.\r\n\r\n* Find the `margin` property - in the `img` rule-set.\r\n* Change the margin to be larger, and discuss the - effect with a partner.\r\n* Choose another element type and give it a margin, - too." - CSD U2 layout style sample_markdown_instruction: "
\r\n\r\n
\r\n**What - does the `body` selector do?**\r\nBecause the content of the web - page is all inside the `body` tag, the body selector gives style rules for - everything on the web page.\r\n
\r\n
\r\n**What - does the `border-style` property do?**\r\nThe `border-style` property - determines what kind of border (solid, dotted, dashed, etc.) the element has. You - can read more about this property at W3Schools - - CSS border-style Property\r\n
\r\n
\r\n**What - does the `border-radius` property do?**\r\nThe `border-radius` property - determines the radius of the curves at the corners of the element. A bigger - radius makes a bigger, softer curve, and a smaller radius makes a smaller, - sharper curve. A radius of zero makes a regular corner. You can read more - about this property at W3Schools - - CSS3 border-radius property\r\n
\r\n
\r\n**What - does the `float` property do?**\r\nThe `float` property makes an - element \"float\", meaning that the elements that come after it all flow around - it. If the `float` value is `left`, the element will float to the left, and - the elements after it will show up on its right. If the `float` value is - `right`, the element will float to the right, and the elements after it will - show up on its left. You can read more about this property at W3Schools - - CSS float Property\r\n
\r\n
\r\n# Layout and Style\r\n\r\n* - Look through web page below for new styles.\r\n* Open the style sheet\r\n* - With your partner, discuss which parts of the CSS code you think are making - the page appear different.\r\n * What makes the entire page blue?\r\n * How - are the images positioned to the left of all the other elements?\r\n * What - made the image corners rounded?\r\n\r\nIn the next few puzzles, you'll be - changing and adding new styles on this page." - CSD U2 layout style width_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nHere is the code that is making the image - its current size:\r\n\r\n
img {\r\n\twidth: 250px;\r\n}
\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `width: - 250px` is the rule that makes the image 250 pixels wide. It also changes - the height so that the image does not stretch.\r\n
\r\n
\r\n**What - does the `width` property do?**\r\nThe `width` property determines - how wide the element will be. Most of the time, you will define in the width - in pixels, which makes the element take up an exact amount of space on the - screen. Defining the width will also change the height so that the image - does not stretch, unless you have also defined the height. You can read more - about this property at W3Schools - - CSS width Property\r\n
\r\n
\r\n**What does - the `height` property do?**\r\nThe `height` property determines - how tall the element will be. Most of the time, you will define in the height - in pixels, which makes the element take up an exact amount of space on the - screen. Defining the height will also change the width so that the image - does not stretch, unless you have also defined the width. You can read more - about this property at W3Schools - - CSS width Property\r\n
\r\n
\r\n**What does - `px` mean / What is a pixel?**\r\nPixel, which is abbreviated `px`, - is how elements are measured in CSS. It’s the size of a single point of light - on the screen.\r\n
\r\n
\r\n**Why does using a width - and height rule at the same time sometimes stretch out the image?**\r\nWhen - the width of an images changes, the height must change by the same percentage, - otherwise the image will stretch. For example, if you double the width of - an image, you must also double the height, or the image will be stretched - horizonally. When you only define the width or the height, the computer will - automatically change the other property so that the image looks the same.\r\n
\r\n
\r\n\r\n# - Width and Height\r\n\r\n* Find the property in the style sheet that controls - the width of the images.\r\n* Change the width of the images to be larger - or smaller.\r\n* Create a new rule with a `height` property to control the - height of the images.\r\n* Use the `width` property in the `p` rule-set to - change the width of your paragraphs." - CSD U2 RGB intro_markdown_instruction: "# RGB Colors\r\n\r\nAll colors, whether - they have names or not, can be described by the level of red, green, and blue - light it takes to make them. This is called an RGB value (short for Red-Green-Blue). You - can use the widget on your left to try out different RGB values and see what - colors they make.\r\n\r\n* **Click \"Run\" to start the widget on the left,** - and use the sliders to adjust the levels of red, green, and blue light.\r\n* - For each of the colors below, match it to its RGB value.\r\n\r\nA) red: 216, - green: 191, blue: 216 - rgb(216,191,216)\r\n\r\nB) red: 255, green: 239, blue: - 213 - rgb(255,239,213)\r\n\r\nC) red: 255, green: 140, blue: 105 - rgb(255,140,105)\r\n\r\nD) - red: 123, green: 104, blue: 238 - rgb(123,104,238)\r\n\r\nE) red: 107, green: - 142, blue: 35 - rgb(107,142,35)\r\n\r\n\r\n
\r\n
\r\n
\r\n**Why do red and green make yellow?**\r\n

When - you mix paint, red and green make brown, but RGB color mixing uses light instead - of paint, so the colors mix differently. RGB uses _additive color mixing_. In - additive color mixing, red and green make yellow, red and blue make magenta, - and blue and green make cyan. When you mix the three primary colors together - (red, green, and blue), they make white. You can read more at Wikipedia - - Additive Color\r\n

\r\n
\r\n**How many - colors can I make with RGB color mixing?**\r\n

\r\nYou can make - make over sixteen million different colors with RGB color mixing.\r\n

\r\n
" - CSD U2 RGB others_markdown_instruction: "# Spring and Autumn Colors\r\n\r\nChoose - RGB values for spring and autumn colors.\r\n\r\n* Click \"Run\" to start the - widget.\r\n* Adjust the levels until you find a spring color you like, then - write down the values on your activity guide.\r\n* Do the same for an autumn - color. You will need the RGB values for the next activity.\r\n\r\n\r\n
\r\n
\r\n
**Where can I see - the whole range of color types?**\r\nYou can find many options for - colors at W3Schools - - HTML Color Picker
\r\n
\r\n**Why do red and - green make yellow?**\r\n

When you mix paint, red and green make - brown, but RGB color mixing uses light instead of paint, so the colors mix - differently. RGB uses _additive color mixing_. In additive color mixing, - red and green make yellow, red and blue make magenta, and blue and green make - cyan. When you mix the three primary colors together (red, green, and blue), - they make white. You can read more at Wikipedia - - Additive Color

\r\n
\r\n**How many colors - can I make with RGB color mixing?**\r\n

You can make make over - sixteen million different colors with RGB color mixing.

\r\n
" - CSD U2 RGB summer_markdown_instruction: "# Summer Color\r\n\r\nFind the RGB - values for a summery yellow color.\r\n\r\n* Click \"Run\" to start the widget.\r\n* - Adjust the levels until you match the summery yellow at the bottom of the - widget.\r\n* Write the RGB values on your activity guide. You will need them - in the next activity.\r\n\r\n\r\n
\r\n
\r\n**Why - do red and green make yellow?**\r\n

When you mix paint, red and - green make brown, but RGB color mixing uses light instead of paint, so the - colors mix differently. RGB uses _additive color mixing_. In additive color - mixing, red and green make yellow, red and blue make magenta, and blue and - green make cyan. When you mix the three primary colors together (red, green, - and blue), they make white. You can read more at Wikipedia - - Additive Color

\r\n
\r\n**How many colors - can I make with RGB color mixing?**\r\n

You can make make over - sixteen million different colors with RGB color mixing.

\r\n
" - CSD U2 RGB winter_markdown_instruction: "# Winter Color\r\n\r\nIn the next - few levels, you'll be finding seasonal colors for a website. Here, you'll - need to find the RGB values for a wintery blue color.\r\n\r\n* Click \"Run\" - to start the widget.\r\n* Adjust the levels until you match the wintery blue - color at the bottom of the widget.\r\n* Write the RGB values on your activity - guide. You will need them in the next activity.\r\n\r\n\r\n
\r\n
\r\n
**How do I make a color lighter?**\r\n

To - make a color lighter, you need to add more light (increase the level of the - slider). If you have already added the maximum amount of blue light, you - will need to add more red and green light to make your blue lighter.

\r\n
\r\n**Why - do red and green make yellow?**\r\n

When you mix paint, red and - green make brown, but RGB color mixing uses light instead of paint, so the - colors mix differently. RGB uses _additive color mixing_. In additive color - mixing, red and green make yellow, red and blue make magenta, and blue and - green make cyan. When you mix the three primary colors together (red, green, - and blue), they make white. You can read more at Wikipedia - - Additive Color

\r\n
\r\n**How many colors - can I make with RGB color mixing?**\r\n

You can make make over - sixteen million different colors with RGB color mixing.

\r\n
" - CSD U2 style background_markdown_instruction: "
\r\n
\r\n**What - is a CSS rule-set?**\r\nBlah blah answer\r\n
\r\n
\r\n**What - is a selector?**\r\nblah blah answer\r\n
\r\n
\r\n**What - is a declaration block?**\r\nblah blah answer\r\n
\r\n
\r\n**what - is a property-value pair?**\r\nblah blah answer\r\n
\r\n
\r\n**How - do I create a new rule-set?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n# Text Alignment\r\n\r\n* Find the \"text-align\" - property in the paragraph tag.\r\n* Change the paragraph alignment.\r\n * - Choose from \"left\", \"right\", and \"center\"" - CSD U2 text style bgcolor_markdown_instruction: "
\r\n
\r\n**What - colors can I choose?**\r\nBlah blah answer\r\n
\r\n
\r\n**How - does the code work?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nblah blah - answer\r\n
\r\n
\r\n**Why is the \"style.css\" file - in a different language?**\r\nblah blah answer\r\n
\r\n
\r\n#Background - Color\r\n\r\n* Find the code in \"style.css\" that is making the background - of the entire page light blue.\r\n* Change the code to make the page a different - color.\r\n* Try to change the background color of just the paragraphs." - CSD U2 text style decoration_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nHere is the code that makes the `h1` elements - underlined:\r\n\r\n
h1 {\r\n  text-decoration: underline;\r\n}
\r\n\r\n* - `h1` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces. The `p` stands for paragraph.\r\n* `text-decoration: - underline;` is the rule that makes the text inside the `h1` tag underlined.\r\n - * `text-decoration` is the _property_. It explains what the rule is about, - in this case where the line goes.\r\n * `underline` is the _value_. It explains - how the rule should be applied, in this case making the test underlined.\r\n
\r\n
\r\n**What - are the possible values for text decoration?**\r\nYou can choose - between \"underline\", \"overline\", and \"line-through\". You can read more - about the text-decoration property at W3Schools - - CSS text-decoration Property\r\n
\r\n
\r\n**Why - do I need all the punctuation?**\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the stylesheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n
\r\n
\r\n**What - is a stylesheet?**\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n
\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n
\r\n
\r\n# - Underlining\r\n\r\n* Find the code in the style sheet that makes the h1 tag - underlined.\r\n* Change the text decoration and see which one you like.\r\n * - Choose from \"underline\", \"overline\", and \"line-through\"\r\n* Add a text - decoration rule for the paragraph or h3 tag." - CSD U2 text style font family_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nHere is the code that is controlling the - paragraph font:\r\n\r\n
p {\r\n  font-family: cursive;\r\n}
\r\n\r\n* - `p` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces. The `p` stands for paragraph.\r\n* `font-family: - cursive;` is the rule that makes the text inside the `p` tags a particular - font.\r\n * `font-family` is the _property_. It explains what the rule is - about, in this case the font.\r\n * `cursive` is the _value_. It explains - how the rule should be applied, in this case making the text cursive.\r\n
\r\n
\r\n**What - are the possible values for font family?**\r\nYou can choose between - \"serif\", \"sans-serif\", \"cursive\", \"fantasy\", and \"monospace\". You - can also try more specific fonts as described in W3Schools - - CSS Web Safe Font Combinations\r\n
\r\n
\r\n**Why - do I need all the punctuation?**\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the stylesheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n
\r\n
\r\n**What - is a stylesheet?**\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n
\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n
\r\n
\r\n#Changing - the Font\r\n\r\n* Find the CSS rule-set in the style sheet that determines - the style for the paragraph tag.\r\n* Change the font family and choose which - one you like the best.\r\n * Choose from \"serif\", \"sans-serif\", \"cursive\", - \"fantasy\", and \"monospace\"\r\n* Add a font family rule for the h1 or h3 - tags." - CSD U2 text style freeplay_markdown_instruction: "# About Me Page\r\n\r\nNow - you can style the text on your About Me page!\r\n\r\n* Open your style sheet - and add styling of your choice to your About Me Page. Be sure to use at least - 3 different CSS properties.\r\n\r\n# Checklist\r\n\r\n* At least 3 of the - following CSS Properties are used:\r\n * `font-size`\r\n * `font-family`\r\n - * `color`\r\n * `text-decoration`\r\n * `text-align`\r\n\r\nIf you’ve used - at least 3 of the properties from the checklist, you can explore some additional - text properties to add to your About Me page." - CSD U2 text style h1_markdown_instruction: "
\r\n
\r\n**What - colors can I use in CSS?**\r\nCSS includes most common color names - (red, blue, green, etc.), and many uncommon ones. You can see a full list - of CSS color names at W3Schools - - HTML Color Names. You can still use colors that are not included in - the named list, but you will need to use their RGB values. You can read more - about using colors in CSS at W3Schools - - CSS Legal Color Values\r\n
\r\n**How does - the code work?**\r\nHere is the code that is making the `h1` header - red:\r\n\r\n
h1 {\r\n  color: red;\r\n}
\r\n\r\n* `h1` is the _selector_. It - specifies which elements will have to follow the rules inside the curly braces.\r\n* - `color: red;` is the rule that makes the text inside the `h1` tags red.\r\n - * `color` is the _property_. It explains what the rule is about, in this - case the text color.\r\n * `red` is the _value_. It explains how the rule - should be applied, in this case making the text red.\r\n
\r\n
\r\n**Why - do I need all the punctuation?**\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the style sheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n
\r\n
\r\n**What - is a style sheet?**\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n}\r\n
\r\n\r\nIn - this example, `h2` is the selector, `color` and `font-family` are properties, - and `blue` and `cursive` are the values for those properties.\r\n
\r\n
\r\n# - CSS and Text Color\r\n\r\nThis HTML file uses a style sheet (\"style.css\") - to give the page a particular style. The style sheet contain information - about what each of the HTML elements should look like.\r\n\r\n* Find the code - in the style sheet (click on \"style.css\" in the files area) that is making - the h1 header red.\r\n* Change the code for the color of the h1 header from - `red` to a different color." - CSD U2 text style h3_markdown_instruction: "
\r\n
\r\n**What - colors can I use in CSS?**\r\nCSS includes most common color names - (red, blue, green, etc.), and many uncommon ones. You can see a full list - of CSS color names at W3Schools - - HTML Color Names. You can still use colors that are not included in - the named list, but you will need to use their RGB values. You can read more - about using colors in CSS at W3Schools - - CSS Legal Color Values\r\n
\r\n
\r\n**How - does the code work?**\r\nHere is the code that is making the `h1` - header red:\r\n\r\n
h1 {\r\n  color: red;\r\n}
\r\n\r\n* `h1` is - the _selector_. It specifies which elements will have to follow the rules - inside the curly braces.\r\n* `color: red;` is the rule that makes the text - inside the `h1` tags red.\r\n * `color` is the _property_. It explains what - the rule is about, in this case the text color.\r\n * `red` is the _value_. It - explains how the rule should be applied, in this case making the text red.\r\n
\r\n
\r\n**How - do I make a new rule-set?**\r\nTo make a new rule set, you'll need - a selector and a list of rules. The selector is the name of the tag you want - the rules to be applied to. The rules are a list of property and value pairs. You'll - also need to pay careful attention to the punctuation in the rule set. Look - at the code below for an example of how the code should look. You'll need - to change the specifics for your page.\r\n\r\n
h1 {\r\n  color: red;\r\n}
\r\n\r\n\r\n* - `h1` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces.\r\n* `color: red;` is the rule that makes the - text inside the `h1` tags red.\r\n * `color` is the _property_. It explains - what the rule is about, in this case the text color.\r\n * `red` is the _value_. It - explains how the rule should be applied, in this case making the text red.\r\n
\r\n
\r\n**Why - do I need all the punctuation?**\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the style sheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n
\r\n
\r\n**What - is a style sheet?**\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n
\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n
\r\n
\r\n#Making - a new CSS rule-set\r\n\r\nThe block of code that gives rules for a particular - tag is called a _rule-set_. You can make a new rule set by copying the pattern - you see in the rule-set for the `h1` tag.\r\n\r\n* Find the CSS rule-set in - the style sheet that determines the styles for the h1 tag.\r\n* Using the - same pattern, write a new CSS rule-set that will determine the styles for - the h3 tag.\r\n* Add code to make the text in all h3 tags a different color." - CSD U2 text style sample_markdown_instruction: "
\r\n
\r\n**What - is a style sheet?**\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n
\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n
\r\n
\r\n**Why - is the \"style.css\" file in a different language?**\r\nWeb developers - intentionally separate content and style to make their code easier to maintain. - HTML is the language used to structure the content of a web page. CSS is a - language that adds style to a web page. \r\n
\r\n
\r\n**What - does `px` mean / What is a pixel?**\r\nPixel, which is abbreviated - `px`, is how elements are measured in CSS. It’s the size of a single point - of light on the screen.\r\n
\r\n
\r\n**What does - the `text-decoration` property do?**\r\nThe `text-decoration` property - puts a line over, under, or through a piece of text. You can read more about - the property at W3Schools - - CSS text-decoration Property\r\n
\r\n
\r\n**What - does the `text-align` property do?**\r\nThe `text-align` property - aligns the text to the left, right, or center. You can read more at W3Schools - - CSS text-align Property\r\n
\r\n
\r\n**What - does the `font-family` property do?**\r\nThe `font-family` property - changes the font of the text. It gives a general description of the type - of font that should be used, but each browser might display the font slightly - differently. Read more at W3chools - - CSS font-family Property\r\n
\r\n
\r\n#CSS and Style sheets\r\n\r\n* - Look at the web page below and find some different types of text stylings - that you don't know how to code yet.\r\n* Click on the style sheet (\"style.css\" - in the files area) and look at the code inside the file.\r\n* With your partner, - discuss which parts of the code you think are making the text appear differently - than before.\r\n\r\nIn the next few lessons, you'll be changing and adding - new styles on this page.\r\n\r\n" - CSD U2 text style size_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nHere is the code that is controlling the - paragraph text size:\r\n\r\n
p {\r\n  font-size: 14px;\r\n}
\r\n\r\n* - `p` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces. The `p` stands for paragraph.\r\n* `font-size: - 14px;` is the rule that makes the text inside the `p` tags a particular size.\r\n - * `font-size` is the _property_. It explains what the rule is about, in this - case the text size.\r\n * `14px` is the _value_. It explains how the rule - should be applied, in this case making the text 14 pixels big.\r\n
\r\n
\r\n**What - does `px` mean / What is a pixel?**\r\nPixel, which is abbreviated - `px`, is how elements are measured in CSS. It’s the size of a single point - of light on the screen.\r\n
\r\n
\r\n**Why do I - need all the punctuation?**\r\nThe punctuation, such as the curly - braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand - the rules in the style sheet. The curly braces hold all the rules for a particular - selector. Each rule should end in a semicolon, and the properties and values - are always separated by a colon.\r\n
\r\n
\r\n**What - is a style sheet?**\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n
\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n
\r\n
\r\n\r\n# - Changing text size\r\n\r\nYou can control other things besides colors by using - other properties.\r\n\r\n* Find the CSS rule-set in the style sheet that determines - the style for the paragraph tag.\r\n* Change the text size of the paragraphs - to be bigger.\r\n* Add a new rule to your rule-set for your h3 tag to make - the text bigger or smaller." - CSD U2 text style text align_markdown_instruction: "
\r\n
\r\n**How - does the code work?**\r\nHere is the code that is controlling the - paragraph text alignment:\r\n\r\n
p {\r\n  text-align: left;\r\n}
\r\n\r\n* - `p` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces. The `p` stands for paragraph.\r\n* `text-align: - left;` is the rule that makes the text inside the `p` tags align to the left - side of the paragraph.\r\n * `text-align` is the _property_. It explains - what the rule is about, in this case the text alignment.\r\n * `left` is the - _value_. It explains how the rule should be applied, in this case making - the text align to the left side of the paragraph.\r\n
\r\n
\r\n**Why - doesn't `text-align: left;` do anything?**\r\nMost properties have - default values. The default values are the styles that an element will have - automatically, before you add your style sheet. The default value for `text-align` - is `left`, so it doesn't change from how it already looked.\r\n
\r\n
\r\n**What - are the possible values for text align?**\r\nYou can choose between - \"left\", \"right\", and \"center\". You can read more about the text-align - property at W3Schools - - CSS text-align Property\r\n
\r\n
\r\n**Why - do I need all the punctuation?**\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the style sheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n
\r\n
\r\n**What - is a style sheet?**\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n
\r\n
\r\n**What - is CSS?**\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n
h2
-        {\r\n   color: blue;\r\n   font-family: cursive;\r\n
\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n
\r\n\r\n
\r\n# - Text Alignment\r\n\r\nThe `text-align` property sets the horizontal (side - to side) position of the text within each line.\r\n\r\n* Find the \"text-align\" - property in the paragraph tag.\r\n* Change the paragraph alignment.\r\n * - Choose from \"left\", \"right\", and \"center\"" - CSD U3 - Booleans Video_markdown_instruction: "# Boolean Expressions Video" - CSD U3 - complex - compound conditionals_markdown_instruction: "# Possible - Solution #2 - Compound Conditionals\r\n\r\nAnother way that you might have - phrased the challenge problem is:\r\n\r\n\tIf the up arrow was pressed AND - the sprite hasn't gone off the top of the screen, move up.\r\n\r\nThis structure - of asking both questions at the same time is accomplished using a **compound - conditional**. Compound conditionals use the boolean operators `AND` and `OR` - to ask multiple questions at once. `AND` only returns true if _both_ of the - questions it's asking are true, while `OR` will return true if _either_ of - its questions are true. In JavaScript (and many other languages) `AND` is - represented by two ampersands (`&&`) while `OR` is represented by two pipes - (`||`) - their blocks look like this: \r\n\r\n![](https://images.code.org/c7ab68cb4091472f05d7c862a52730c6-image-1466785066210.48.02.png)\r\n\r\nWe - could pseudocode this solution as \r\n\r\n\tIf the up arrow was pressed AND - sprite.y > 0\t// Both Questions\r\n \tmove up\t\t\t\t\t\t\t\t\t // Only - runs if both questions were true\r\n\r\n\r\n# Do This\r\n\r\nHere's the same - code from the challenge again, but this time the up arrow uses a compound - conditional. \r\n\r\n* Use the same compound conditional pattern on the other - three arrow keys.\r\n" - CSD U3 - complex - key up and down_markdown_instruction: "# Responding to a - Single Click\r\n\r\nEarlier we learned that `keyWentDown` and `keyWentUp` - can be used to respond to a keypress a single time. The blocks `mouseWentUp` - and `mouseWentDown` allow you to do that for the mouse!\r\n\r\n# Do This\r\n\r\nLet's - make a simple game that counts how many times you've clicked. We've already - provided a variable `clicks` that you can use to track how many times the - user has clicked.\r\n\r\n* Add a conditional that checks if the mouse went - down.\r\n* Inside your conditional, add to the `clicks` variable.\r\n\r\n_Challenge: - Can you add a sprite that responds to `mouseWentDown` as well? Add an image - of your choice and increase the sprite's size each time the mouse is clicked._" - CSD U3 - complex - mouse down_markdown_instruction: "# Mouse Clicks\r\n\r\nKeypresses - are great, but sometimes you want users to interact through mouse clicks. - There's a new block called `mouseDown` which, similar to `keyDown`, checks - whether the left or right mouse buttons is being pressed. If you are using - a computer with a mouse or trackpad that has only one button, you'll want - to always use `mouseDown(\"left\")`. \r\n\r\n# Do This\r\nHere's a program - that drops a balloon down the screen - you're going to program the mouse - button to raise the balloon back up while it's clicked.\r\n\r\n* Add an if - else statment that checks for `mouseDown`\r\n* Inside the conditional, move - the balloon up one pixel if the mouse is down otherwise move the balloon down - \r\n\r\n_Hint: You'll need to move the code that drops the balloon for this - to work - you only want it to run if `mouseDown` is `false`_\r\n\r\n_Challenge: - Can you make the balloon drift randomly to the left and right as it raises - and falls?_" - CSD U3 - complex - mouse move_markdown_instruction: "# mouseDidMove\r\n\r\nWe - can also use Boolean expressions to check whether or not the mouse has moved. - The `mouseDidMove` block will return `false` if the mouse is still, but `true` - if the mouse has been moving.\r\n\r\n# Do This\r\nRight now, this program - just displays a salt shaker sprite. You'll need to use `mouseDidMove` so - that you can \"shake\" the salt by moving the mouse back and forth.\r\n\r\n* - Add a conditional that checks if `mouseDidMove`.\r\n* If the conditional is - true, rotate the salt sprite randomly to the left or right.\r\n\r\n_Challenge: - Can you keep track of how many times the `mouseDidMove` shakes the salt, and - then rotate it right side up after 100 shakes?_" - CSD U3 - complex - nested conditional_markdown_instruction: "# Possible Solution - #1 - Nested Conditionals\r\n\r\nThe way you phrase the previous challenge - says a lot about how you might approach solving it. For example, you might - have phrased moving up and staying on screen as:\r\n\r\n\tIf the up arrow - was pressed then check if the sprite hasn't gone off the top of the screen - and move up.\r\n\r\nThis structure of first asking one question, and then - asking a second question if the first was true is accomplished using a **nested - if statement**. Nested if statements put one if statement inside another if - statement. You can think of this as asking a question and then based on the - answer asking another question before making a decision. We could pseudocode - the previous phrase as:\r\n\r\n\tIf the up arrow was pressed\t// First Question\r\n \tIf - my y > 0\t\t\t\t// Second Question\r\n \tmove up\t\t\t\t// Only runs - if both questions were true\r\n\r\n\r\n# Do This\r\n\r\nHere's the same code - from the challenge, with the up arrow using a nested conditional. \r\n\r\n* - Use the same nested conditional pattern on the other 3 arrow keys.\r\n" - CSD U3 - conditionals - arrows and gears_markdown_instruction: "# Gears with - Conditionals\r\n\r\nLet's make the gears spin only when the space key is - being held down.\r\n\r\n# Do This\r\n\r\n* Add an `if` statement.\r\n* Use - `keyDown` as input to the if statement to check when the space key is pressed.\r\n* - Move the code that makes the gears rotate inside the `if`." - CSD U3 - conditionals - first conditional 2_markdown_instruction: "\r\n# Visible\r\n\r\nNow that you have conditionals - and images, sometimes it's useful to hide the image for a while and then - show it again. You can do this using the `visible` property. The visible property - is a little different from other properties you have seen in the past: It - is a Boolean value, either `true` (the sprite is visible) or `false` (the - sprite is **not** visible). By default, visible is set to `true`.\r\n\r\n# - Do This\r\nMake the balloon pop when it hits the edge of the game area!\r\n\r\n* - Add an `if` statement that checks to see if the balloon has hit the edge.\r\n\t* - Use a watcher on `balloon.scale` to help you out\r\n* Create a pop sprite - which uses the \"pop\" visual in the animation tab.\r\n* Set the pop's `visible` - property to `false` to start.\r\n* Inside the if add two statements.\r\n\t* - One that sets the `visible` property to hide the balloon sprite.\r\n * - One that sets the `visible` property to show the pop sprite." - CSD U3 - conditionals - first conditional_markdown_instruction: "\r\n# If Statement\r\n\r\nThe Boolean - expressions we tested on the last level allow us to ask questions. In order - to use the answers we need to use something called an **if statement**. If - statements take a Boolean expression as input and check whether it is true - or false. If the Boolean expression is true, then the computer executes the - code inside the if statement.\r\n\r\nFor example, the code below checks whether - the sprite's width is greater than 100. If it is, it prints \"This is a - wide sprite\" to the console log.\r\n\t\r\n\tif( sprite.width > 100 ){\r\n \tconsole.log(\"This - is a wide sprite\");\r\n }\r\n\r\nIf statements usually go inside your - draw loop because we want to check them each time the loop runs. \r\n\r\n# - Do This\r\n\r\nThe race car program you wrote earlier is loaded here for you.\r\n\r\n* - Add an `if` statement after you update the position of the race car. \r\n* - Move the boolean expression from the console.log statement to the input of - the if statement.\r\n* Inside the `if` statement add a statement to draw text - on the screen to say \"Winner\".\r\n" - CSD U3 - conditionals - transition 2_markdown_instruction: "# More Practice - With Booleans\r\n\r\nLet's use one more Boolean expression to check the condition - of a sprite.\r\n\r\n# Do This\r\nThere is a growing balloon sprite created - for you. Can you create an expression to check when the balloon hits the edge - of the game area?\r\n\r\n* Add a `console.log` statement.\r\n* Add a Boolean - expression inside the `console.log` that checks whether the balloon has hit - the edge of the game area.\r\n* Hint: Use the scale of the balloon. You might - have to do some guess and check testing to find the right scale." - CSD U3 - conditionals - transition_markdown_instruction: "# Booleans\r\n\r\nIn - the past few levels, we have been comparing values of sprites to find out - whether something is true or false. Let's start putting that in the context - of an animation.\r\n\r\n# Do This\r\nThe program draws a race car and a finish - line. We are going to figure out when the race car crosses the finish line. - The sprites have all been set up for you.\r\n\r\n* Add a `console.log` statement - inside the draw loop. [Show me where](#triggercallout=callout)\r\n* Add an - Boolean expression inside the `console.log` that asks \"Is the x position - of the race car less than the x position of the finish line?\" (You can look - at [this level](/s/csd3/stage/8/puzzle/2) to see what the statement might - look like.)\r\n* Look at the output of the program as the car moves. When - does the output change? Why?" - CSD U3 - images - animations_markdown_instruction: "# Animations\r\n\r\nYou - have seen through out this Unit that when you put together a set of images - and play them close together back to back it looks like movement! Well sprites - make that animation easier! You can put together a set of images to create - an animation. There are pre-loaded animations for you in the animations manager. - \r\n\r\nSet the animation with setAnimation.\r\n\r\n# Do This\r\n\r\n* Create - a sprite\r\n* Add the animation." - CSD U3 - images - changing scene_markdown_instruction: "# Images\r\n\r\nUse - the animations tab to finish making all three sprites fish images.\r\n\r\n\r\n\r\n# Do This\r\nYour goal is to finish the underwater - scene so all three sprites are fish like the example on the right. \r\n\r\n* - There is a rectangle sprite already created for you for each fish.\r\n* Run - the code to see how it works.\r\n* Add a `setAnimation` command to change - the look for the remaining two fish. \r\n* Run it to see that your rectangle - is now an image!\r\n" - CSD U3 - images - Embed Project_markdown_instruction: "Example of the Final - Project" - CSD U3 - images - first image_markdown_instruction: "# Images\r\n\r\nUp until - now all of your sprites have been rectangles. No longer! Now you can use pictures - for your sprites instead.\r\n\r\nCheck out the animations tab by clicking - the button above the display area.\r\n\r\nThere - is an image there that have been loaded for you!\r\n\r\nIn order to use that - image you will need to use the `setAnimation` command. You have to create - the sprite before you can set its animation.\r\n\r\n# Do This\r\n\r\nThere - is a rectangle sprite already created for you. All you need to do is change - it to an image.\r\n\r\n* Add a call to `setAnimation` to set the animation - to the image provided\r\n* Run it to see that your rectangle is now an image!" - CSD U3 - images - first sprite with image_markdown_instruction: "# Images\r\n\r\nRectangles - are great, but if you're going to make animations and games that really look - great, you'll need some way to add more interesting images to your sprites.\r\n\r\nOver - on the **Animations Tab** you'll see three images that have been loaded for - you! You can get to the animations tab by clicking the button above the display area.\r\n\r\n\r\n\r\nOnce you have created a - sprite you can **use the `setAnimation()` command to change the look of your - sprite from a rectangle to a picture.** The blocks make this super easy to - do as the names of all the images you have loaded in the animation tab show - up in the `setAnimation()` dropdown. The alien is set up for you as an example.\r\n\r\n# - Do This\r\nChange the sprite to your favorite image from the animations tab.\r\n\r\n* - A sprite that is set to an image has already been created for you.\r\n* Run - the code to see how it works.\r\n* Change the input to the `setAnimation` - command to change the look of the sprite.\r\n* Try out all the different images." - CSD U3 - images - fish free play_markdown_instruction: "# Fish Free Play\r\n\r\nHere - are the swimming fish you have been working on. Continue to improve the animation!\r\n\r\n# - Do This\r\n\r\n* Add another sea creature to the scene.\r\n* Make the sea - creature move.\r\n* Make one of the fish follow the mouse.\r\n* Add more ideas - of your own!" - CSD U3 - images - fish with arrows_markdown_instruction: "# Fish With Arrows\r\n\r\nThe - fish are back. Can you make the fish move left only when the left arrow key - is pressed down?\r\n\r\n# Do This\r\n\r\n* Add an if statement to check when - the left arrow key is pressed down.\r\n* Move the statements for moving the - fish inside the if statement." - CSD U3 - images - kite free play_markdown_instruction: "# Kite Free Play\r\n\r\nHere - is the flying kite you have been working on. Continue to improve the animation!\r\n\r\n# - Do This\r\n\r\n* Add at least 1 other sprite.\r\n* Make the sprite move.\r\n* - Improve the background by adding clouds or other objects.\r\n* Add more ideas - of your own!" - CSD U3 - images - kiteFlying_markdown_instruction: "# Flying Kite\r\n\r\nNow - that you have a kite, make it fly around.\r\n\r\nTo do this we will need to - move the kite and update the end position of the line that is the string. - You have done similar things with variables before but now you will be using - properties.\r\n\r\n# Do This\r\n\r\n* Make the kite move around the top right - corner of the screen randomly.\r\n* Move the code for the string of the kite - to the Draw Animations section since it is now moving!\r\n* Update the end - position of the line so that one end of string stays at the center of the - kite." - CSD U3 - images - nextFrame_markdown_instruction: "# Next Frame\r\n\r\nOn the - last level the animation you used continously looped through the animation - and never stopped. Sometimes we want to control when the animation changes. When - you want to create a sequence but not have it loop you can click the button - in the anmations tab *** show example***. Then in the code you can control - when you move to the next frame using `nextFrame`. \r\n\r\n\r\n# Do This\r\n\r\nThere - is a sprite already created for you and 4 images loaded into the animations - tab. Make the sprite change frames each time the space bar is pressed down.\r\n\r\n* - Create a conditional to respond to the space bar\r\n* Inside the conditional - call `nextFrame` to move the sprite to the next frame" - CSD U3 - images - race images_markdown_instruction: "# Race Cars\r\n\r\nYou - made a racing game in the last lesson. You can now make those rectangles look - like race cars!\r\n\r\n# Do This\r\n\r\n* Use the race car images in the animations - tab to update your racing animation." - CSD U3 - images - random movement_markdown_instruction: "\r\n\r\n# Updating Fish\r\n\r\nThe same thing you did - on the last level will help your fish look more like they are swimming. Update - your scene to make the fish look like they don't swim in a perfectly straight - line. \r\n\r\n# Do This\r\nYour goal is to finish the underwater scene so - all three sprites are fish like the example on the right. \r\n\r\n* Use a - small random rotation to **make your fish wiggle**.\r\n" - CSD U3 - images - review_markdown_instruction: "# Sprites Review\r\n\r\nYou - have learned a lot about sprites already and conditionals. Can you use those - skills to create a square that moves in all 4 directions in response to the - arrow keys?\r\n\r\n# Do This\r\n\r\n* Create a sprite\r\n* Make the sprite - move up, down, left, and right in response to the arrow keys" - CSD U3 - images - scale_markdown_instruction: "# Upload your own image\r\n\r\nSo - the image you uploaded probably was not the size you wanted was it? You can - fix that! There is a property for sprites called `scale`. **Scale controls - the width and the height of the sprite at once.** Using scale is better than using - width and height for images because...\r\n1. It's one property instead of - two.\r\n2. You keep the image ratio and it doesn't distort it.\r\n\r\n**To - make the image smaller you want to use a scale less than 1. To make the image - bigger you want to use a number greater than 1. A scale of 1 would keep it - the same.**\r\n\r\n# Do This\r\n\r\n* Resize your kite using `scale` to better - fit the picture." - CSD U3 - images - setAnimation_markdown_instruction: "# Upload your own image\r\n\r\nYou - can also use the Animation tab to upload your own image.\r\n\r\n# Do This\r\nYou - are going to make a flying kite. The first step is to pick out a kite you - like.\r\n\r\n* Find an image of a kite you want to use. It works best if - it has a clear background.\r\n* Open the animations tab.\r\n* Click \r\n* Click \r\n* Select a file from your computer.\r\n* - Rename your image so it has a name that is easy to remember. To rename it - click the text below the image. \r\n* Set the kite sprite to display your image.\r\n\r\nDon't - worry if your kite image is too big! You'll learn how to fix that in the - next level." - CSD U3 - images - switch the picture_markdown_instruction: "# Switching Images\r\n\r\nYou - don't have to keep the same image the whole time. In fact since your *image* - was moving around the screen it would be cool to have it fact the correct - direction as it moves.\r\n\r\n# Do This\r\n\r\nYour work was copied here as - well\r\n\r\n* Add a call to `setAnimation` inside each if statement to the - correct image" - CSD U3 - images - visible_markdown_instruction: "# Visible\r\n\r\nNow that - you have conditionals and images sometimes it appropriate to hide the image - for a while and then show it again. You can do this using the `visible` property. - The visible property is a little different than some of the other properties - you have seen in the past. It is a boolean value. So visible is either true - or false. By default visible is set to true.\r\n\r\n\r\n# Do This\r\n\r\n* - In response to something set the sprite to visible and invisible.\r\n" - CSD U3 - sprites - motiviation_markdown_instruction: "# How Many Variables?\r\n\r\nIn - the last lesson you learned how to use the **counter pattern** (`x = x + 1`, - `x = x - 0.5`, `x = x - 1`, etc.) to create smooth animations. Using this - pattern in many different ways allows you to create interesting and complex - animations.\r\n\r\nWatch the animation here. With a partner discuss: \r\n\r\n* - How many counter variables would you need to create to make this animation? - What are they used to animate?\r\n* What would you name your variables?\r\n* - What are the challenges of using counter variables in a scene like this?" - CSD U3 - Sprites - Sprite v Rect_markdown_instruction: "# Sprites vs Rect\r\n\r\nCurently - sprites and rectangles seem really similar. It will become clear later on - why sprites are more powerful than basic shapes. Before you get there though - it is important to call out a major difference in the way sprites and rectangles - draw.\r\n\r\n# Do This\r\nCan you will figure out the difference by just trying - this?\r\n\r\n* Create a rectangle with a width and height of 30\r\n* Set the - fill for the rectangle to a different color than gray (So its clear which - is the rectangle)\r\n* Create a sprite and give it the same x and y values - as you gave the rectangle\r\n* Make sure to call `drawSprites` in the draw - loop\r\n* Run the program\r\n* Can you see the difference?" - CSD U3 abstraction accelerateX_markdown_instruction: "# Velocity and the Counter - Pattern\r\n\r\nAs you just saw, using a `sprite.velocityX` property with the - counter pattern will change a sprite's velocity during the program. This - makes the sprite speed up. Do a little practice using this pattern yourself.\r\n\r\n# - Do This\r\n\r\nThis program already makes a car move across the screen, but - it's going very slowly\r\n\r\n* Use the counter pattern with the sprite's - velocityX property to make the car speed up. [Show me where](#triggercallout=code_triggered)" - CSD U3 abstraction accelerateY up_markdown_instruction: "# Rising Bubble\r\n\r\nThis - program makes a bubble rise up the water. Can you make it get faster as it - rises?\r\n\r\n# Do This\r\n\r\n* Use the counter pattern and the sprite's - y velocity to make the bubble move up more quickly." - CSD U3 abstraction accelerateY_markdown_instruction: "# Falling Rock\r\n\r\nThe - rock should speed up as it falls down the screen. Can you use the same counter - pattern with `velocityY` inside the draw loop to make the rock go faster and - faster as it falls?\r\n\r\n# Do This\r\n\r\n* Use the counter pattern with - the sprite's y velocity to make the rock speed up as it falls. [Show me - where](#triggercallout=code_triggered)\r\n\r\n*Challenge: Can you make the - rock spin as it falls?*" - CSD U3 abstraction add coin_markdown_instruction: "# Add a Coin\r\n\r\nIn the - next few levels you'll add to your program to make a simple game. In this - game the player will collect points to increase the score. This is a good - chance to see how different kinds of movement can affect the way a game feels, - and it will also just help you practice programming skills.\r\n\r\n# Do This\r\n\r\nIn - this level you'll just be adding a new coin sprite to the game. You should - be working at the top of your program, outside the draw loop.\r\n\r\n* Use - the `createSprite()` block to create a new sprite. Make sure to give it a - descriptive name like **coin**\r\n* Use the `sprite.x` and `sprite.y` properties - of the sprite to give it a random X and Y position between 0 and 400\r\n* - In the Animation Tab there is already a coin animation. Use the `sprite.setAnimation()` - block to give your sprite this animation.\r\n\r\nTest your code before moving - on. When you run the game you should see a coin sprite appear somewhere randomly - on the screen." - CSD U3 abstraction animation circle_markdown_instruction: "# Animate the Satellite\r\n\r\nNow - you are ready for the final piece of the drawing: making the satellite circle - the moon.\r\n\r\n#Do This\r\n\r\nUse `setSpeed()` and `getDirection()` to - make the satellite circle the moon. " - CSD U3 abstraction animation rotate_markdown_instruction: "# Rotation\r\n\r\nMake - earth rotate using the `rotationSpeed` property." - CSD U3 abstraction animation setSpeed_markdown_instruction: "# Animate Your - Picture\r\n\r\n\r\n\r\nNow - that everything is in the right place, you can make them move using the properties - and methods you have learned.\r\n\r\n# Do This\r\n\r\nUse `rotationSpeed`, - `rotationToDirection`, `getSpeed`, `getDirection`, and `setSpeed` to animate - your scene, as seen in the image to the right. " - CSD U3 abstraction animation setup_markdown_instruction: "# Setting up your - picture\r\n\r\nBefore - you make anything move, you'll need to start all your sprites off in the - right place. The Earth has already been positioned for you.\r\n\r\n# Do This\r\n\r\nCreate - sprites for the moon, spaceship, and satellite. Use `setAnimation` to add - a picture to each one, and use the `x` and `y` properties to put them in the - right place on the screen.\r\n\r\n" - CSD U3 abstraction animation_markdown_instruction: "# Setting up your picture\r\n\r\nBefore - you make anything move, you'll need to start all your sprites off in the - right place. The Earth has already been positioned for you.\r\n\r\n# Do This\r\n\r\nCreate - sprites for the moon, spaceship, and satellite. Use `setAnimation` to add - a picture to each one, and use the `x` and `y` properties to put them in the - right place on the screen.\r\n\r\n" - CSD U3 abstraction bug template_markdown_instruction: "# velocityY\r\n\r\n`velocityY` - is like `velocityX`, but it moves things up and down. Can you use it to make - the dragonfly walk up the screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` to - make the sprite go up the screen.\r\n\r\n*Hint: Should velocity by positive - or negative to move the sprite up the screen?*" - CSD U3 abstraction car rotation_markdown_instruction: "# rotateToDirection\r\n\r\nHere's - the car you just made move. It stayed on the road, but it was not pointing - in the right direction. You can tell the sprite to always point in the direction - that it's moving by adding `car.rotateToDirection = true` outside the draw - loop, right after you create your sprite.\r\n\r\n# Do This\r\n\r\nUse the - `rotateToDirection` property to make your car face the direction it's moving." - CSD U3 abstraction car template_markdown_instruction: "# Moving at an Angle\r\n\r\nIf - you use `velocityX` and `velocityY` at the same time, you can move your sprite - at an angle. See if you can keep the car on the road by using these two properties.\r\n\r\n# - Do This\r\n\r\nUse `velocityX` and `velocityY` to make the car move along - the road." - CSD U3 abstraction change velocityX_markdown_instruction: "# Moving Faster\r\n\r\nRemember - when you used the counter pattern `sprite.x = sprite.x + 1` to change your - sprite's position inside the draw loop? Now you can use the same type of - counter pattern with `sprite.velocityX` to change your sprite's speed as - your program runs. Can you add a line of code in the draw loop to make the - sprite swim faster and faster?\r\n\r\n# Do This\r\n\r\nMake the fish get faster - by adding `fish.velocityX = fish.velocityX + 1` inside the draw loop. [Show - me where](#triggercallout=code_triggered)" - CSD U3 abstraction change velocityXY_markdown_instruction: "# Getting faster - at an angle\r\n\r\nHere's a different car that uses the same counter pattern - we used in the last lesson to make the car go faster, but it changes both - `velocityX` and `velocityY`. ([Show me where](#triggercallout=code_triggered)) It - also prints the speed and direction to the debug console. What do you think - will happen when you run the code?\r\n\r\n# Do This\r\n\r\nDiscuss with your - partner what you think will happen when the code runs, then run it and see - whether you were right. Why do you think the car moves in this way?\r\n\r\n[//]: - #(https://images.code.org/4d1af9cc274f30b9d9263a47f9f64f13-image-1470941637433.png)" - CSD U3 abstraction change velocityY_markdown_instruction: "# Moving Faster\r\n\r\nJust - as you can change `velocityX` inside the draw loop, you can change `velocityY` - to make your sprite move faster up or down. Can you add code into the draw - loop to make the dragonfly go faster?\r\n\r\n# Do This\r\n\r\nUse the `velocityY` - property to make the dragonfly fly faster and faster up the screen. [Show - me where](#triggercallout=code_triggered)" - CSD U3 abstraction circle_markdown_instruction: "# getDirection()\r\n\r\nYou've - been using `getSpeed` and `setSpeedAndDirection` to change the speed of a - sprite in a particular direction. What do you think will happen if you keep - the speed the same, but use `getDirection` and `setSpeedAndDirection` to change - the direction? Look at the code below and predict what it will do. After - you've run it, try changing the direction by different amounts to see what - happens.\r\n\r\n# Do This\r\n* Read the code where the direction is changed - and predict what it will do [Show me where](#triggercallout=code_triggered)\r\n* - Run the program and observe what it does\r\n* Modify the program to make the - car spin in large circles\r\n* Modify the program to make the car move in - the opposite direction\r\n\r\n[//]: #(https://images.code.org/63b04e63fc4bc21700b64ef3d6c6b8b7-image-1471475653020.png)" - CSD U3 abstraction decelerateX_markdown_instruction: "# Slowing Things Down\r\n\r\nNow - that you've had some practice speeding things up, can you use the counter - pattern to slow sprites down? \r\n\r\n# Do This\r\n\r\nThe car is going to - run into the water! You'll need to use the counter pattern to slow it down.\r\n\r\n* - Use the `sprite.velocityX` block with a counter pattern to slow the car down - by 0.25 as it moves across the screen. \r\n* Discuss with your Partner: What - do you think will happen when the car finally stops?\r\n\r\n*Challenge: Add - code that makes the car slow down only if his velocityX is greater than 0*\r\n" - CSD U3 abstraction decelerateY_markdown_instruction: "# Simulating Gravity\r\n\r\nIn - the last level you slowed down the car with the `sprite.velocityX` block and - the counter pattern. It almost looked like the car was getting pulled to the - left.\r\n\r\nIf you use this same pattern with the `sprite.velocityY` block - it will look like your sprite is always being pulled down, which is exactly - what gravity does!\r\n\r\n# Do This\r\n\r\nThe rock is thrown in the air but - it never falls back down.\r\n\r\n* Use the `sprite.velocityY` block with the - counter pattern to make the rock slow down and then fall in the other direction.\r\n* - Experiment with different values in your counter pattern. Do you want the - rock to slow down quickly or gradually? What looks most realistic to you?\r\n* - Discuss with your partner: Why are you setting the rock's initial velocity - outside the draw loop? Why are you changing the sprite's velocity inside - the draw loop?" - CSD U3 abstraction demo pic_markdown_instruction: "# Space Animation\r\n\r\nIn - the next few puzzles, you'll be building the space animation on the left. You - can use your activity guide to help you plan how to make the different type - of movements you see.\r\n\r\n# Do This\r\n\r\n* Click \"Run\" to see the animation.\r\n* - Look at how all the different sprites are moving and update your activity - guide with any ideas you have.\r\n* Discuss with a partner how you might make - this picture." - CSD U3 abstraction dragonfly (OLD)_markdown_instruction: "# velocityY\r\n\r\n`velocityY` - is like `velocityX`, but it moves things up and down. Can you use it to make - the feather float the down screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` - to make the sprite go down the screen.   [Show me where](#triggercallout=code_triggered)" - CSD U3 abstraction dragonfly OLD_markdown_instruction: "# velocityY\r\n\r\n`velocityY` - is like `velocityX`, but it moves things up and down. Can you use it to make - the dragonfly walk up the screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` to - make the sprite go up the screen.   [Show me where](#triggercallout=code_triggered)\r\n\r\n*Hint: - Should velocity be positive or negative to move the sprite up the screen?*" - CSD U3 abstraction drive_markdown_instruction: "# Race Your Car\r\n\r\nNow - that you can steer, you need to control the speed of your car. Use the `setSpeed` - method to make the car go faster when you push the up arrow and slower when - you push the down arrow.\r\n\r\n# Do This\r\n\r\nAdd two conditionals to your - car program. \r\n\r\n* The first should check whether the up arrow is pressed, - and increase the speed of the car. \r\n* The second should check whether the - down arrow is pressed and decrease the speed of the car.\r\n\r\n*Hint: What's - the difference between `keyDown` and `keyWentDown`? Which do you think will - work better for changing the speed of the car?*" - CSD U3 abstraction fish template_markdown_instruction: "# velocityX\r\n\r\nLast - time you made the fish move, you did it by changing its `x` property in the - draw loop. Now, you can use `velocityX` to make your sprites move left or - right by a certain amount each time they are drawn.\r\n\r\n# Do This\r\n\r\nUse - the `velocityX` block to make the sprite go across the screen.\r\n" - CSD U3 abstraction horse_markdown_instruction: "# Horse\r\n\r\nThe horse is - trying to make its escape. Can you use the `velocityX` and `velocityY` blocks - to make the horse jump over the fence?\r\n\r\n\r\n# Do This\r\n\r\n* Set the - starting `velocityX` and `velocityY` values outside the draw loop [Show me - where](#triggercallout=code_triggered1)\r\n* Change your sprite's `velocityY` - using a counter pattern inside the draw loop [Show me where](#triggercallout=code_triggered2)\r\n" - CSD U3 abstraction horse2_markdown_instruction: "# Better Horse\r\n\r\nIf you're - making a game, you'll want the horse to jump according to user input. This - program automatically moves the horse to the right, but the horse should jump - when the user presses the up arrow key. You will need to add three lines - of code to make this work. First, you'll need to check whether the up arrow - key has been pressed, and make the horse move up if it has. \r\n\r\n\r\n# - Do This\r\n\r\n* Inside the `if` block that checks whether the up arrow key - has been pressed, use the `velocityY` block to make the horse move up by 4 - each time. [Show me where](#triggercallout=code_triggered)\r\n\r\n" - CSD U3 abstraction horse3_markdown_instruction: "# Better Horse\r\n\r\nNext, - you'll make the horse fall back down to the ground. You'll need to check - whether the horse is in the air by looking at its y position. If it's in - the air it should fall down, but once it touches the ground it should stop. - The `if/else` block has already been provided for you.\r\n\r\n# Do This\r\n\r\nLook - at the `if/else` block that checks whether the horse's position is less than - 325. [Show me where](#triggercallout=code_triggered1)\r\n\r\n* If the horse's - y position is less than 325, use a counter pattern to change the horse's - velocityY by 0.1 on each tick of the draw loop. \r\n* If the horse's y position - is not less than 325, use the `velocityY` to change its vertical velocity - to zero. [Show me where](#triggercallout=code_triggered2)\r\n\r\n" - CSD U3 abstraction jump_markdown_instruction: "# Jumping\r\n\r\nYou now have - all the blocks you need to make your sprite jump!\r\n\r\nJust as you checked - whether your fish was at the left edge, you'll need to check whether the - frog is on the ground. If it is, it could either jump up or stay still, so - you'll need one more `if` block to check whether the user has pressed the - up arrow ([Show me where](#triggercallout=code_triggered1)).\r\n\r\nYou'll - also need to check whether the frog has reached its highest point, and send - it back down if it has.\r\n\r\n# Do this\r\n\r\n* Find the `if` statement - that checks whether the sprite is on the ground, and look at the `if` statement - inside of it that checks whether the user has pressed the \"up\" arrow key. - [Show me where](#triggercallout=code_triggered1)\r\n\t* Use the `velocityY` - block to make the frog jump up when the user presses the arrow key.\r\n\t* - Use the `velocityY` block to make the frog stop moving otherwise.\r\n* Add - an if statement that does the following [Show me where](#triggercallout=code_triggered2)\r\n * - Checks whether the frog sprite has reached its highest point.\r\n * If so, - use the `velocityY` block to make the sprite fall back down.\r\n\r\n" - CSD U3 abstraction jumper intro_markdown_instruction: "# Horse Jumper\r\n\r\nNow - that you've learned these new blocks, you can start to make a horse jumper - game. Press \"Run\" to play the game on the left. You can use the up arrow - to jump over the tumbleweed. What block will you need to make the tumbleweed - move? How many different ways does the horse move?\r\n\r\n\r\n" - CSD U3 abstraction jumper template_markdown_instruction: "# Horse Jumper\r\n\r\nNow - that you've learned these new blocks, you can start to make a horse jumper - game. Press \"Run\" to play the game on the left. You can use the up arrow - to jump over the tumbleweed. What block will you need to make the tumbleweed - move? How many different ways does the horse move?\r\n\r\n\r\n" - CSD U3 abstraction jumping advanced_markdown_instruction: "# Jumping with the - Counter Pattern\r\n\r\nIn the last level you just set the sprite's velocity - to -5 to make it jump. Eventually the sprite slows down and then starts falling - again. Now you'll build a slightly more realistic jump by using the counter - pattern with the sprite's y velocity.\r\n\r\n# Do This\r\n\r\nInside the - `if` block you should have code that sets the sprite's y velocity to a number.\r\n\r\n* - Replace that line of code with new code, `flyer.velocityY = flyer.velocityY - - 5`\r\n* Discuss with Your Partner: How did this change affect the way the - sprite moves? How does subtracting a different amount change the way your - sprite moves? Do you prefer one or the other type of jump?" - CSD U3 abstraction jumping template_markdown_instruction: "# Jumping\r\n\r\nIncreasing - a sprite's y velocity inside the counter pattern can simulate gravity. By - adding user interactions you can make your sprite appear to jump as well. - For starters you'll make a simple jump and then make it more realistic looking - in the next level.\r\n\r\n# Do This\r\n\r\nA sprite has already been created - for you that falls because its y velocity is increased inside the draw loop. - You'll need to make this sprite appear to jump.\r\n\r\n* Inside the draw - loop add an `if` block\r\n* Use the `keyWentDown` block to make the block - respond to the \"up\" arrow being pressed\r\n* Inside your `if` block set - the sprite's y velocity to -5\r\n\r\nRun the code to make sure it works. - Then experiment with different values. How could you make your sprite jump - higher or lower?" - CSD U3 abstraction jumping_markdown_instruction: "# Jumping\r\n\r\nIncreasing - a sprite's y velocity inside the counter pattern can simulate gravity. By - adding user interactions you can make your sprite appear to jump as well. - For starters you'll make a simple jump, and then make it more realistic looking - in the next level.\r\n\r\n# Do This\r\n\r\nA sprite has already been created - for you that falls because its y velocity is increased inside the draw loop. - You'll need to make this sprite appear to jump.\r\n\r\n* Inside the `if` - block that checks whether the up arrow has been pressed, set the sprite's - y velocity to -5. [Show me where](#triggercallout=callout1)\r\n* Discuss with - a neighbor: Why does this code run the way it does? How would using a number - besides -5 affect the way the code works? How could you jump higher or lower?" - CSD U3 abstraction left right counter 2_markdown_instruction: "# Floating Left\r\n\r\nIn - the last level you got detailed instructions on how to make your sprite start - floating to the right. This time you'll need to make your sprite float to - the left on your own. You should be pretty comfortable with using velocity - and the counter pattern together at this point. If you're having trouble, - talk to a neighbor or review some of the past levels.\r\n\r\n# Do This\r\n\r\n* - Add code to your draw loop that will make the sprite start moving to the left - when the \"left\" arrow is down.\r\n* Make sure you're using velocity and - the counter pattern together.\r\n\r\nOnce your code is working share what - you wrote with a partner. Is your sprite easy to control? Does changing the - amount you add or subtract in the counter patterns you wrote affect the way - the game feels? What kind of game might be fun to make with a player that - moves like this?" - CSD U3 abstraction left right counter_markdown_instruction: "# Floating Right\r\n\r\nYou're - now using the counter pattern with the sprite's Y velocity to simulate gravity - and jumping. If you use the sprite's X velocity in the counter pattern then - you can make your sprite float from side to side as well.\r\n\r\n# Do This\r\n\r\nIn - this level you'll make your sprite start floating to the right when the right - arrow is pressed\r\n\r\n* Add an `if` statement inside your draw loop below - the one you created for the \"up\" arrow\r\n* Use the `keyDown` block to make - the `if` statement respond to when the \"right\" arrow is pressed\r\n* Inside - the `if` block use the counter pattern with the `sprite.velocityX` block to - add 0.1 to the sprite's X velocity\r\n\r\nRun your code to see how it works. - The sprite should start floating to the right when you press the right arrow - and jump when you press \"up\". You'll make the left arrow work in the next - level." - CSD U3 abstraction looping_markdown_instruction: "# Looping\r\n\r\nThe game - will be more fun if the frog can jump more than once. You can make the mushroom - \"loop\" by checking whether it's moved past the left edge and moving it - back to the right edge when it has.\r\n\r\n# Do this\r\n* Find the `if` statement - that checks whether the mushroom has passed the left edge. [Show me where](#triggercallout=code_triggered1)\r\n* - Use the `sprite.x` block to set the mushroom's position back to the right - edge if it has.\r\n\r\n" - CSD U3 abstraction make it your own_markdown_instruction: "# Make It Your Own\r\n\r\nYou - now have the basic mechanics of your game in place, so it's time to make - it your own. What do you want to happen? Should the character get points every - time it collects a coin? Can you add a scoreboard like you learned in the - last lesson? Do you want to make another coin? What about a \"bad coin\" that - takes away points?\r\n\r\n# Do This\r\n\r\nMake at least one improvement to - the game that makes it your own. Be prepared to share your changes and improvements - with your classmate." - CSD U3 abstraction parabola_markdown_instruction: "# Basketball\r\n\r\nHere's - a basketball that's thrown up, then falls back down. Can you use the `velocityX` - block to make it go through the hoop?\r\n\r\n\r\n# Do This\r\n\r\nUse the - `velocityX` block outside the draw loop to make the ball move to the right - by 3 each time. [Show me where](#triggercallout=code_triggered)\r\n\r\n[//]: - #(https://images.code.org/119358fc8705640a24d2138439ea7cc1-image-1472496770816.png)" - CSD U3 abstraction race template_markdown_instruction: "Template for the race - game" - CSD U3 abstraction reset coin_markdown_instruction: "# Reset Coin\r\n\r\nWhen - your character touches the coin you should reset it somewhere on the screen.\r\n\r\n# - Do This\r\n\r\n* Place an `if` block inside of your draw loop\r\n* Use the - `sprite.isTouching()` block as the condition to detect when the character - touches the coin\r\n* Inside the `if` block write code that sets the coin's - X and Y position to random numbers between 0 and 400\r\n\t* *Hint: You've - already written this code elsewhere in your program*\r\n\r\nTest your code - before moving on. When your player touches the coin it should move somewhere - else on the screen." - CSD U3 abstraction rotation accelerate_markdown_instruction: "# Speeding up\r\n\r\nNow - that you've used `rotationSpeed` outside the draw loop to start your sprite - rotating at a certain speed, you can also use `rotationSpeed` inside the draw - loop to change how fast the sprite rotates. Look at the code inside the draw - loop. It uses the counter pattern to make the wheel speed up when the up - arrow is pressed. Can you use a different counter pattern to make the wheel - slow down when the down arrow is pressed?\r\n\r\n# Do This\r\n\r\n* Look at - the code that makes the wheel spin faster when the up arrow is pressed [Show - me where](#triggercallout=code_triggered1)\r\n* Add code that makes the wheel - spin slower when the down arrow is pressed [Show me where](#triggercallout=code_triggered2)" - CSD U3 abstraction rotation control_markdown_instruction: "# Controlling Speed\r\n\r\nYou - used `rotatationSpeed` outside the draw loop to make your sprite rotate when - your program started. You can also use `rotationSpeed` **inside** the draw - loop to change the speed of the sprite during the game. For example, a sprite - can start rotating when the user presses the space bar, and it will keep rotating - until it's told to stop.\r\n\r\n# Do This\r\n\r\n* Look at the `if` statement - inside the draw loop that checks whether the space bar has been pressed. [Show - me where](#triggercallout=code_triggered1)\r\n* Use the `rotationSpeed` block - to make the color wheel start spinning when the user presses the space bar." - CSD U3 abstraction rotation_markdown_instruction: "# rotationSpeed\r\n\r\nYou've - already learned how to make your sprite spin by using the `rotation` block. For - example, when you wanted your sprite to rotate by two degrees each time it - was drawn, you put `sprite.rotation = sprite.rotation + 2` inside the draw - loop.\r\n\r\nNow, you can use `rotationSpeed` to make your sprites rotate - by a certain amount each time they are drawn. If you want your sun to rotate - by two degrees each time it's drawn, you can use `sun.rotationSpeed = 2` - before the draw loop, after you create your sprite.\r\n\r\n# Do This\r\n\r\nMake - the sun rotate by 3 degrees each time using the `rotationSpeed` block. [Show - me where](#triggercallout=callout1)" - CSD U3 abstraction setSpeed accelerate_markdown_instruction: "# Moving faster - and faster\r\n\r\nNow that you've started your car off in the right direction, - you can make it go faster and faster by using a counter pattern inside the - draw loop. Because the sprite does not store its speed as it would a property, - you'll need to use the `getSpeed` block inside the `setSpeedAndDirection` - block to add one to the speed each time. The code `car.setSpeedAndDirection(car.getSpeed() - + 1, -20)` will get the speed of the car, add one to it, and set the new speed - to be the sum. Even though it looks different from using a counter pattern - on a property or variable, the basic pattern of adding one each time is the - same.\r\n\r\n# Do this\r\n\r\nUse the `getSpeed` and `setSpeedAndDirection` - blocks to add one to the speed each time the draw loop is called. [Show me - where](#triggercallout=code_triggered)" - CSD U3 abstraction setSpeed fish_markdown_instruction: "# Save the Fish\r\n\r\nYour fish is in danger! The shark is swimming faster than the fish, - but we can use the counter pattern to make the fish get faster as the program - runs. Can use use the counter pattern inside the draw loop to change the - program to match the animation on the right?\r\n\r\n# Do This\r\nUse `setSpeedAndDirection` - inside the draw loop to increase the speed of the sprite by 1 each time the - draw loop is called.\r\n\r\n[//]: # (https://images.code.org/a87dac6c803751292c6fb11a63623e3f-image-1471466985600.png)\r\n\r\n[//]: - # (https://images.code.org/b63256ffb19a98d9d20f3b3b79364006-image-1471467188241.png)\r\n\r\n[//]: - # (https://images.code.org/c92db34c78faa59c2d8a3f0df7fe92aa-image-1472492951133.gif)" - CSD U3 abstraction setSpeed intro_markdown_instruction: "# getSpeed() and getDirection()\r\n\r\nWhen - you move around the world, you probably don't normally think about your velocityX - and velocityY. You probably just think about how fast you are going in the - direction you are heading. You can figure out a sprite's speed and direction - with math, but it's faster to teach the computer to do those calculations - for you. `getSpeed()` and `getDirection()` are methods that use the information - in `velocityX` and `velocityY` to find your speed and direction.\r\n\r\n# - Do this\r\n\r\n* For each of the three sprites in this animation: Look at - its `velocityX` and `velocityY` and guess what its speed and direction are. \r\n* - Then run the code and see the answers in the debug console.\r\n" - CSD U3 abstraction setSpeed_markdown_instruction: "# setSpeedAndDirection()\r\n\r\nJust - as you can use the `getSpeed` and `getDirection` blocks to see how your sprite - is moving, you can use the `setSpeedAndDirection` block to tell the computer - how you want your sprite to move. This block takes in two numbers, first - the new speed of your sprite, then the angle of its direction.\r\n\r\nBefore, - you did this by setting your `velocityX` and `velocityY` properties, but `setSpeedAndDirection` - lets you input the exact speed and direction of your sprite. The computer - calculates the matching `velocityX` and `velocityY` values and sets them for - you, according to code that another programmer already wrote.\r\n\r\n# Do - this\r\n\r\nUse `setSpeedAndDirection` to make the car stay on the road. You - can see the effect on your sprite's `velocityX` and `velocityY` in the debug - console.\r\n\r\n*Hint: The angle of the road is -20 degrees*\r\n\r\n*Challenge: - Make the car point in the correct direction.*" - CSD U3 abstraction sidescroll intro_markdown_instruction: "# Horse Jumper\r\n\r\nNow - that you've learned these new blocks, you can start to make a horse jumper - game. Press \"Run\" to play the game on the left. You can use the up arrow - to jump over the tumbleweed. What block will you need to make the tumbleweed - move? How many different ways does the horse move?\r\n\r\n\r\n" - CSD U3 abstraction sidescroll_markdown_instruction: "# Side Scroller\r\n\r\nNow - that you can make your sprite jump, you're ready to start a simple side scroller. In - a side scroller game, the main sprite stays at the same x location, and the - background and obstacles slide past it. In this first part of the project, - you'll make a hay bale slide across the screen so that your horse can jump - over it. You can do this by creating the hay bale off the right hand side - of the screen, but setting its velocity so that it moves to the left. Then, - when the hay bale is completely off the left hand side of the screen, move - it back to where it started so it can scroll across the screen again.\r\n\r\n# - Do this\r\n\r\n* Change the line of code where the hay sprite is created to - make it start off the right side of the screen. [Show me where](#triggercallout=code_triggered1)\r\n* - Add a line of code to make the sprite move across the screen toward the left. - [Show me where](#triggercallout=code_triggered2)\r\n* Add an if statement - that does the following [Show me where](#triggercallout=code_triggered3)\r\n * - Checks whether the sprite has gone off the left side of the screen.\r\n * - If so, moves the sprite back to its initial position off the right side of - the screen.\r\n\r\n\r\n_Challenge: Can you make the hay bale come out from - different places on the right hand side of the screen?_\r\n\r\n_Extra fun: - You can choose your own images to use, rather than the horse and hay bale, - and draw a new background._\r\n\r\n[](https://images.code.org/0a265cf4c22f69463200dce05989e8e4-image-1474609853181.png)" - CSD U3 abstraction space animation_markdown_instruction: "# Your choice\r\n\r\n\r\n\r\nNow - that you have everything moving in the correct way, you can add your own sprite. You - can choose between the star and astronaut animations in the animations tab\r\n\r\n# - Do This\r\n\r\n* Add a new sprite to the picture using the star or astronaut - in the animations tab\r\n* Make your sprite move in a new way based on what - you have learned\r\n* Share your picture with a classmate and compare your - animations" - CSD U3 abstraction space comet_markdown_instruction: "# Animate The Comet\r\n\r\n\r\n\r\nNow - that your sprites are in the right place, you can make them move using the - properties and methods you have learned. In this level, you can make the - comet fly across the sky in a curve. If you want to animate another sprite, - you can click on the following links:\r\n\r\n* [Animate the Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* - [Animate the Spaceship](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/14)\r\n* - [Animate the Satellite](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# - Do This\r\n\r\nUse the correct blocks to make the comet fly across the sky - as in the picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/13) - for clues.*" - CSD U3 abstraction space earth_markdown_instruction: "# Animate The Earth\r\n\r\n\r\n\r\nNow - that everything is in the right place, you can make the sprites move using - the properties and methods you have learned. In this level, you can make - the earth rotate. If you want to animate another sprite, you can click on - the following links:\r\n* [Animate the Comet](s/CSDU3-Draft/stage/12/puzzle/13)\r\n* - [Animate the Spaceship](s/CSDU3-Draft/stage/12/puzzle/14)\r\n* [Animate the - Satellite](s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# Do This\r\n\r\nUse the - correct blocks to make the earth rotate as in the picture.\r\n" - CSD U3 abstraction space satellite_markdown_instruction: "# Animate The Satellite\r\n\r\n\r\n\r\nNow - that everything is in the right place, you can make the sprites move using - the properties and methods you have learned. In this level, you can make - the satellite revolve around the moon. If you want to animate another sprite, - you can click on the following links:\r\n\r\n* [Animate the Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* - [Animate the Comet](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/13)\r\n* - [Animate the Spaceship](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/14)\r\n\r\n# - Do This\r\n\r\nUse the correct blocks to make the satellite move as in the - picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) - for clues.*" - CSD U3 abstraction space setup_markdown_instruction: "# Setting up your picture\r\n\r\nBefore - you make anything move, you'll need to start all your sprites off in the - right place. The Earth has already been positioned for you, and all the images - are loaded for you in the animations tab.\r\n\r\n# Do This\r\n\r\n* Create - sprites for the moon, spaceship, and satellite.\r\n* Use `setAnimation` to - add a picture to each sprite.\r\n* Use the `x` and `y` properties to put the - sprites in the right place on the screen.\r\n" - CSD U3 abstraction space spaceship_markdown_instruction: "# Animate The Spaceship\r\n\r\n\r\n\r\nNow - that everything is in the right place, you can make the sprites move using - the properties and methods you have learned. In this level, you can make - the spaceship speed up as it takes off from Earth. If you want to animate - another sprite, you can click on the following links:\r\n\r\n* [Animate the - Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* - [Animate the Comet](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/13)\r\n* - [Animate the Satellite](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# - Do This\r\n\r\nUse the correct blocks to make the spaceship take off as in - the picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/6) - for clues.*" - CSD U3 abstraction space template_markdown_instruction: "![](https://images.code.org/b449da443093a6b7fb872c0b65d4ea39-image-1472234725048.png)\r\n\r\n![](https://images.code.org/87f39110a8cec7a6ca1978989f1d8eaf-image-1472235414354.png)\r\n\r\n![](https://images.code.org/69cb2daab7d1eec824b8bd2d2b117116-image-1472235429548.png)" - CSD U3 abstraction steer_markdown_instruction: "# Steering your car\r\n\r\nNow - you have enough information to control your car with the keyboard using conditionals. Every - time the left arrow key is pressed, the car will turn to the left. Can you - use the `if` block to make the car turn to the right when the right arrow - key is pressed? (Don't worry about speeding up and slowing down. You will - do that on the next level.)\r\n\r\n# Do This\r\n\r\nInside the draw loop:\r\n* - check whether the right arrow key is pressed\r\n* if it's pressed, turn the - car to the right\r\n\r\n*Challenge: Can you modify the code so that the car - turns faster?*" - CSD U3 abstraction teaser_markdown_instruction: "# Space Animation\r\n\r\nLook - at the space animation on the left.\r\n\r\n* What sorts of movements are the - different sprites making? \r\n* Which types of movement do you already know - how to program?\r\n* Is there anything you're not sure how to do? \r\n* Discuss - with a partner how you might make this picture.\r\n\r\n# Do This\r\n\r\n* - Click \"Run\" to see the space animation.\r\n* With your partner, discuss - the different types of movement and how you might code your sprites.\r\n* - Fill out the activity guide with your notes on the different movements." - CSD U3 abstraction tumbleweed_markdown_instruction: "# Mushroom\r\n\r\nNow - you just need something for your sprite to jump over. This program already - has a mushroom just past the right edge of the screen, but it needs to move - toward your frog.\r\n\r\n# Do this\r\n* Use the `velocityX` block to make - the mushroom move left across the screen.\r\n\r\n*Hint: The mushroom should - start moving at the very beginning of the game, and never change, so should - it be inside or outside the draw loop?*\r\n\r\n" - CSD U3 abstraction velocityX control_markdown_instruction: "# Multiple Controls\r\n\r\nAs - you saw in the last level, you can change the sprite's velocity with multiple - `if` statements. In this program, the fish has three different types of movement, - each of which should be controlled by its own `if` statement.\r\n\r\n# Do - This\r\n* Look at the three `if` statements inside the draw loop.\r\n\r\n* - Use a `sprite.velocityX` block inside each `if` statement to make the three - following movements:\r\n * If the user presses the right arrow key, move the - fish to the right.\r\n * If the fish gets to the right hand side of the screen, - move the fish to the left.\r\n * If the fish gets to the left hand side of - the screen, stop the fish." - CSD U3 abstraction velocityX if-statements_markdown_instruction: "# Changing - Velocity with Position\r\n\r\nOne advantage to using the velocity blocks inside - conditionals (`if` blocks) is that your sprite keeps moving, even after the - condition stops being true. For example, you only had to press a key once - to launch your fly man, and he kept flying forever.\r\n\r\nYou can do the - same when you check a sprite's position. In the code below, the fish sprite - moves to the left when it hits the right edge, and to the right when it hits - the left edge. The `if` block only sets the velocity when the sprite hits - the edge, but the sprite keeps moving in the same direction, even when it's - not touching the edge anymore.\r\n\r\n# Do This\r\n\r\n* Look at `if` statements - that check the sprite's position and set its velocity.\r\n* With your partner, - discuss how the sprite knows which way to move when neither of the `if` statements - are true (the sprite is in the middle of the screen)." - CSD U3 abstraction velocityX_markdown_instruction: "# velocityX\r\n\r\nOne - way to move sprites in Game Lab is with the counter pattern. For example `sprite1.x - = sprite1.x + 1` moves a sprite by 1 pixel each frame of the draw loop. This - pattern is so common that sprites have a `velocityX` property that does this - for you.\r\n\r\n# Do This\r\n\r\n* Drag a `sprite.velocityX` block directly - below where your sprite is created.       [Show me - where](#triggercallout=code_triggered)\r\n* Write the name of your sprite - in the block.\r\n* Assign the `velocityX` property a value of 1.\r\n* Run - the code. What happens?\r\n* Re-run the code giving the `velocityX` property - a different value. What's changing?\r\n" - CSD U3 abstraction velocityXY_markdown_instruction: "# Moving at an Angle\r\n\r\nFor - the next several levels you'll use the `sprite.velocityX` and `sprite.velocityY` - blocks to create some interesting sprite movements. As you do so ask yourself - whether you need the code to run just once (outside the draw loop) or on every - frame (inside the draw loop).\r\n\r\n# Do This\r\n\r\nThis car sprite should - move along the diagonal road.\r\n\r\n* Set both the X and Y velocities of - the car to make it move along the road.\r\n* Discuss with a Neighbor: Did - you set the velocity inside or outside the draw loop? Does it make a difference? - Why might one be better than the other?" - CSD U3 abstraction velocityY 2_markdown_instruction: "# velocityY\r\n\r\n`velocityY` - is like `velocityX`, but it moves things up and down. Can you use it to make - the feather float the down screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` - to make the sprite go down the screen.   [Show me where](#triggercallout=code_triggered)" - CSD U3 abstraction velocityY control_markdown_instruction: "# Controlling Speed\r\n\r\nYour - code before the draw loop sets up the beginning of your game. Your code inside - the draw loop controls how the game will change while it's being played. In - this game, the helicopter man starts off at the bottom of the screen, but - when the space key is pressed, he flies up.\r\n\r\n# Do This\r\n\r\n* Use - an `if` statement inside the draw loop to check when the space bar is pressed.\r\n* - Use the `velocityY` block to make the sprite fly up when the user presses - the space bar." - CSD U3 abstraction velocityY_markdown_instruction: "# Moving Down\r\n\r\nHere - is a feather sprite that should be floating down the screen. If `velocityX` - makes a sprite move to the right, can you find the block that will make the - feather move down?\r\n\r\n#Do This\r\n\r\nFind the block that will make the - feather sprite go down the screen, and use it outside the draw loop.   [Show - me where](#triggercallout=code_triggered)" - CSD U3 AnimationsMulti defender animate cake enemies_markdown_instruction: "# - Getting Started: Set Animations\r\n\r\nYou should have already reviewed the - planning guide for this project. A lot of the work to turn this project guide - into a working game has already been started. Based on the project guide you're - going to do the rest of this work.\r\n\r\n# Do This\r\n\r\nBefore we get started - you'll want some better animations for each of your sprites.\r\n\r\n* In - the Animation Tab are animations for each of your sprites. Go look at what - they are.\r\n* In your code give each sprite its appropriate animation. **Use - the ones provided for now** but later you'll be able to go change them.\r\n* - Head to [Level 4](/s/csd3/stage/16/puzzle/4) if you need help remembering - how to do this." - CSD U3 AnimationsMulti defender animate player_markdown_instruction: "# Change - Player Animations\r\n\r\nRight now your player is always facing the same direction. - You can make things look a lot more realistic by switching between animations. - Your player should switch between a left-facing and right-facing animation - depending on which key was last pressed. Remember, you can quickly copy and - edit animations inside the Animation Tab.\r\n\r\n# Do This\r\n\r\n* Inside - the Animation Tab copy the animation of your player sprite.\r\n* Flip each - frame of the new animation so that the sprite is facing in the opposite direction\r\n* - Rename your new animation\r\n* Use the `setAnimation` command inside the `movePlayer` - function so that the player changes the direction it is facing when the \"left\" - and \"right\" arrows are pressed." - CSD U3 AnimationsMulti defender create set enemies_markdown_instruction: "# - Creating Functions\r\n\r\n\r\n\r\nYour program now includes - code in two places to set the enemies on the left side of the screen at a - random y location. You can create functions to reset each of your two enemies - to remove repetitions from your program. This will make your program easier - to read, allow you to change it more easily, and allow you to quickly reset - your sprites at other points in your program if you need to.\r\n\r\n# Do This\r\n\r\n\r\n\r\n* At the bottom of - your program create two new functions, `setEnemy1` and `setEnemy2`.\r\n* Inside - each of these functions place the code that sets the enemies on the left side - of the screen and gives them a random y position\r\n* Wherever the code for - `setEnemy1` and `setEnemy2` appears in your program replace them with a call - to the functions you just created." - CSD U3 AnimationsMulti defender displace enemies_markdown_instruction: "# Displace - Enemies\r\n\r\nIt's time to write code for some more sprite interactions. - Your player sprite should displace the enemy sprites.\r\n\r\n# Do This\r\n\r\nFor - this level you'll be writing code inside the `displaceEnemies` function.\r\n\r\n* - Write code that makes player displace both enemy sprites.\r\n* Test your program - to make sure your player is displacing enemies but they keep moving right - after the player moves away.\r\n\r\n_Hint: You can use `sprite.debug` to see - your sprites' colliders if you need to debug your program_" - CSD U3 AnimationsMulti defender enemies move_markdown_instruction: "# Moving - The Enemies\r\n\r\nIt's time to start writing the code that will move your - sprites. To begin you'll need to get your enemy sprites to a random position - and moving across the screen.\r\n\r\n# Do This\r\n\r\nAt the top of your program, - after you create each enemy sprite, write code that will move it to the correct - position and give it the correct velocity.\r\n\r\n* Use `sprite.x` to set - the x position to 0\r\n* Use `sprite.y` to set the y position should be a - random number between 150 and 250\r\n* Use `sprite.velocityX` to set the x - velocity to 2\r\n\r\nTest your program. Your enemy sprites should now be moving - across the bridge." - CSD U3 AnimationsMulti defender enemies touch cake sprite2_markdown_instruction: "# - Touching the Cake: Second Ladybug\r\n\r\nYour first enemy sprite should now - be resetting when it gets to the cake. Now you'll want the other ladybug - to reset as well.\r\n\r\n# Do This\r\n\r\nInside the `enemiesTouchCake` function - you should have written code that resets enemy1\r\n\r\n* Copy the entire if-statement - you wrote in the last level (Ctrl-C)\r\n* Paste the code inside of the `enemiesTouchCake` - function, just below the last one (Ctrl-V)\r\n* Change the name of the sprite - in that code from `enemy1` to `enemy2`\r\n \r\nTest your code. Now both bugs - should reset when they touch the cake." - CSD U3 AnimationsMulti defender enemies touch cake_markdown_instruction: "# - Touching the Cake\r\n\r\nIf the enemies get all the way across to the cake - you should place them back at the left side of the screen and decrease the - score. To start you'll **write code for only one of your enemies**.\r\n\r\n# - Do This\r\n\r\nInside the `enemiesTouchCake` function you'll need to write - code that checks when a ladybug is touching the cake, resets its position, - and changes the score.\r\n\r\n* Use an `if` and `isTouching` to detect whether - enemy1 has touched the cake.\r\n* Inside your `if` block place code that...\r\n * - Sets enemy1's x position back to 0\r\n * Sets enemy1's y position to a - random number between 150 and 250\r\n * _Hint: You can reuse some code you - already wrote_\r\n * Use the counter pattern to decrease the score by 2\r\n \r\nTest - your code. One of your ladybugs should now reset when it gets across to the - cake, and the score should go down by 2." - CSD U3 AnimationsMulti defender make it your own_markdown_instruction: "# Make - It Your Own\r\n\r\nYou just walked through someone else's plan for creating - a game, so now it's time to make it your own. What additional features or - challenges do you want to create?\r\n\r\n# Do This\r\n\r\nSelect one of the - challenges below to add to the game or come up with a challenge of your own.\r\n\r\n* - Change the visuals of the game so that your player, enemies, or cake look - different\r\n* End the game when the enemies get to the cake and print the - score. For an extra challenge end the game only after 3 enemies get through\r\n* - Randomize the speed of the enemies\r\n* Create a new background that shows - up when players reach a higher score." - CSD U3 AnimationsMulti defender move player_markdown_instruction: "# Moving - Left and Right\r\n\r\nNow that your enemy sprites are moving correctly, it's - time to write the code to move your player. For now you'll just need to get - your character moving left and right and changing its animations.\r\n\r\n# - Do This\r\n\r\nFor this level you'll be writing code inside the `movePlayer` - function.\r\n\r\n* Use an `if` block along with `keyDown` to detect when the - \"right\" arrow is pressed\r\n* Use `sprite.x` and the counter pattern increase - the player's x position by 3\r\n* Use another `if` block to move the player - to the left when the \"left\" arrow is pressed. This time you'll need to - decrease the player's x position.\r\n\r\nTest your game. Your character sprite - should now move left and right when you press the left and right arrows." - CSD U3 AnimationsMulti defender move up down_markdown_instruction: "# Moving - Up and Down\r\n\r\nYou'll want your player sprite to move up and down as - well.\r\n\r\n# Do This\r\n\r\nFor this level you'll still be writing code - inside the `movePlayer` function.\r\n\r\n* Use an `if` block along with `keyDown` - to detect when the \"up\" arrow is pressed\r\n* Use `sprite.y` to increase - the player's y position by 3 using the counter pattern\r\n* Use another `if` - block to move the player down when the \"down\" arrow is pressed\r\n\r\nTest - your code. Your character should now move in all 4 directions." - CSD U3 AnimationsMulti defender template_markdown_instruction: "# Play and - Pause\r\n\r\nYou can use the `sprite.play` and `sprite.pause` commands to - play and pause a sprite's animation. If the animation is already playing - or paused, using these commands twice in a row has no effect. There's one - important exception, however, which is that **play will restart a non-looping - animation if it has finished**. We're going to look at some cool behavior - this lets us create.\r\n\r\n# Do This\r\n\r\n* Use the `sprite.play` command - after each of your `setAnimation` commands. This will restart the walk animations - as long as the keys are pressed." - CSD U3 AnimationsMulti defender touch water_markdown_instruction: "# Touching - the Water\r\n\r\nThe last part of the game that you'll need to write is the - code to reset the sprites when they touch the water. Luckily you should have - already written functions that reset each sprite, so you'll just need a good - way to know when either sprite leaves the bridge. Start by writing the code - for a single enemy and then copy-paste and make small changes to create code - for your second enemy.\r\n\r\n# Do This\r\n\r\nFor this level you'll be writing - code inside the `enemiesTouchWater` function.\r\n\r\n* Use an `if` statement - to check whether enemy1 is off the top of the bridge by checking whether its - y value is below 140. Within your if statement...\r\n * Use your `setEnemy1` - function to reset the sprite\r\n * Add 1 to the score\r\n* Use an if statement - to check whether enemy1 is off the bottom of the bridge by checking whether - its y value is above 260. Within your if statement...\r\n\t* Use your `setEnemy1` - function to reset the sprite\r\n * Add 1 to the score\r\n* Test your program - for the first enemy sprite. Make sure the sprite is resetting and the score - goes up.\r\n* Once it is working copy and paste the code you wrote to create - the same behavior for `enemy2`. You'll need to change the name of the sprite - and the name of the functions you use." - CSD U3 AnimationsMulti introducing multiframe template_markdown_instruction: "# - Using Multiframe Animations\r\n\r\nYou probably noticed in the last game that - the sprites themselves were animated. Have some fun choosing some of the animations - from the library.\r\n\r\n\r\n# Do This\r\n\r\nThis program already includes - several sprites but they don't yet have any animations.\r\n\r\n* Go to the - Animation tab and check out the multi-frame animations already added to your - project. Choose one for each of your characters.\r\n" - CSD U3 AnimationsMulti introducing multiframe_markdown_instruction: "# Using - Multiframe Animations\r\n\r\nIn the sample defender game the sprites themselves - were animated. Before getting started on programming this game take a minute - to get familiar with this new way of animating sprites.\r\n\r\n# Do This\r\n\r\nThis - program already includes several sprites but they don't yet have any animations.\r\n\r\n* - Go to the Animation tab and check out the multi-frame animations already added - to your project. Choose one for each of your characters.\r\n* Remember you - can use `setAnimation` to give your sprites animations you've created in - the Animation Tab\r\n" - CSD U3 AnimationsMulti mirror animation_markdown_instruction: "# Editing Multiframe - Animations\r\n\r\nYour sprites will look a lot more realistic if they turn - around when they're moving. You can switch back and forth between multiframe - animations when the user presses different keys.\r\n\r\n# Do This\r\n\r\nRead - this code and run the program. Make sure you know how the sprite responds - to the arrow keys.\r\n\r\n* In the Animation Tab create a copy of the alien - animation ![](https://images.code.org/aee81f9cd3f63bb8a9c91ac3ab250a87-image-1475699896387.38.09 - PM.png)\r\n* Use the tool to flip your animation. Make sure you flip both - frames. ![](https://images.code.org/3b10b4a612f9a7c640dc7bb18f4c2b91-image-1475699599617.33.03 - PM.png) \r\n* Rename your new animation\r\n* Use your new animation and old - animation so that the alien faces the correct direction when moving. Where - do you think you'll need to set the sprite's animation in your code?" - CSD U3 AnimationsMulti no loop_markdown_instruction: "# Preventing Animations - from Looping\r\n\r\nBy default your animations keep replaying in a loop. You - can have you animation only play once by clicking this button below your animation.\r\n\r\n# - Do This\r\n\r\n* Set both the animations in your project to non-looping.\r\n* - Run the program and confirm your sprite only takes 1 step when it changes - directions" - CSD U3 AnimationsMulti Play Defender_markdown_instruction: "# Defend Your Cake!\r\n\r\nThis - is an example of a defender game that you'll build by the end of this lesson. - Move the alien with arrow keys to keep the ladybugs from getting to your cake. - How high of a score can you get?\r\n\r\n# Do This\r\n\r\nTurn to a classmate - and make a list of the following information.\r\n\r\n* How many sprites are - there in this game. Which are they?\r\n* What variables are needed to make - this game? What do they store?\r\n* If you were to split the code of this - game into functions what do you think they would be? What are the major pieces - of behavior you'd need to create in your code?" - CSD U3 AnimationsMulti play pause_markdown_instruction: "# Play and Pause\r\n\r\nYou - can use the `sprite.play` and `sprite.pause` commands to play and pause a - sprite's animation. If the animation is already playing or paused, using - these commands twice in a row has no effect. There's one important exception, - however, which is that **play will restart a non-looping animation if it has - finished**. We're going to look at some cool behavior this lets us create.\r\n\r\n# - Do This\r\n\r\n* Use the `sprite.play` command after each of your `setAnimation` - commands. This will restart the walk animations as long as the keys are pressed." - CSD U3 AnimationsMulti slow down_markdown_instruction: "# Slow Down\r\n\r\nNice - work! Time to start learning how to control these multiframe animations.\r\n\r\n# - Do This\r\n\r\nYour sprites should be animated but they're moving really - quickly. \r\n\r\n* Head back to the Animation Tab. Underneath each animation - you should see a slider. ![](https://images.code.org/169e11c1f6f55b607937fe9cb7e5e390-image-1476209267457.07.26 - AM.png)\r\n* Use these sliders to slow down your animations so they look more - realistic.\r\n\r\n" - CSD U3 Background Discuss_markdown_instruction: "\r\n\r\n# Animation\r\nUsing the draw loop opens up the potential - to make some neat animations, but it's a bit troublesome that every time - the loop is run it just draws on top of the last drawing. What if we could - make this behave more like a flip book animation?\r\n\r\n# Do This Together\r\n\r\n* - **Run** the provided program together\r\n* **Hypothesize** how does the draw - loop work?\r\n* **Brainstorm** how could we make it so that we only see the - most recently drawn rectangle?" - CSD U3 Background Experiment_markdown_instruction: "# Background\r\nWe could - draw a 400 pixel white square each time the `draw()` loop runs, but there's - actually a built-in command that works even better. The `background()` block - just takes one input, the color of your background, and fills the whole canvas - with that color. The nice thing about using `background()` instead of `rect()` - is that it will fill the screen regardless of how big it is, making your code - more flexible and usable in more scenarios (like when you get a new phone - with a bigger screen).\r\n\r\n# Do This\r\nPlace the `background()` block - inside your `draw()` loop before any other shapes are drawn. Choose a background - color of your choice and then test your code to make sure it only shows a - single rectangle at a time." - CSD U3 Boolean Modify_markdown_instruction: "# Boolean Expressions\r\n\r\nThe - simplest Boolean expressions are questions that the computer can answer with - true or false. These expressions are made using **comparison operators**, - as shown below.\r\n\r\n|Comparison Operator | Boolean Expression | Meaning - |\r\n|:---:|:---:|:---:|\r\n| | `1 < 9` | Is 1 less than 9? | \r\n| | `1 > 9` | Is 1 greater than 9 ? | \r\n| | `1 == 9` | Is 1 equal to 9?| \r\n
\r\n**Note:** - If you saw the statement 3 < 2 in math class, you'd think something was terribly - wrong, but this is not math class. In computer science, the comparison operators - **ask a question** that the computer will answer with `true` or `false`. So - you can read 3 < 2 as **\"Is 3 less than 2?\"** The answer in this case is - no, or `false`. \r\n\r\nAnother way to say this is that the Boolean expression - `3 < 2` **evaluates** to `false`.\r\n\r\n# Do This\r\nCan you modify the values - of the sprite properties so that each of the Boolean expressions evaluates - to `true`?\r\n\r\n- Read through the entire program to see how `sprite1` and - `sprite2` are being created and which properties are compared.\r\n- For each - of the Boolean expressions, identify the sprite properties being compared.\r\n- - Change the code _in the first **13** lines only_ so that each of the `console.log()` - statements print `true`." - CSD U3 Boolean Predict_markdown_instruction: "# Boolean Expressions\r\n\r\nDecision-making - in computers is based on statements called **boolean expressions**. A boolean - expression is **any expression that can only evaluate to either `TRUE` or - `FALSE`**. This can be particularly useful when used to compare the properties - of two sprites. For example, you could figure out which one is larger or placed - higher up. In the next few puzzles, we'll use simple boolean expressions - to compare sprite properties.\r\n\r\n# Predict\r\n\r\nRead the code below. - There are some new symbols in it which you haven't been introduced to. Take - a guess at what they mean and try to answer the following question.\r\n\r\nWhich - result will be printed in the console by this program?\r\n\r\n1.\r\n \r\n true\r\n false\r\n true\r\n2.\r\n - \r\n 200\r\n 10\r\n -20\r\n \r\n3.\r\n \r\n true\r\n error\r\n true\r\n4.\r\n - \r\n false\r\n true\r\n false" - CSD U3 collisions bounce birds_markdown_instruction: "# bounce()\r\n\r\nThe - birds are fighting for space on the wire. Can you change the code so that - the green bird pushes the yellow bird off the wire?\r\n\r\n# Do This\r\n\r\nUse - the `bounce` block to the green bird sprite bounce against the yellow bird - sprite.\r\n" - CSD U3 collisions bounce intro_markdown_instruction: "# bounce()\r\n\r\nYou - can also make sprites bounce when they touch each other, as in the code below. - Read the code and run it with a partner. Can you change the code so that - the green bird pushes the yellow bird off the wire?\r\n\r\n# Do This\r\n\r\nUse - the `bounce` block to make the green bird sprite bounce against the yellow - bird sprite.\r\n" - CSD U3 collisions bounce_markdown_instruction: "# Billiards\r\n\r\nChanging - your sprites' velocities will change the ways that they bounce when they - touch each other. Read the code and run it with a partner, then try out different - intial velocities for your sprites. After each change, discuss with your - partner what you think will happen before you run the code.\r\n\r\n# Do This\r\nDiscuss - with your partner what you think will happen when you run the code, then try - it again with the following changes:\r\n* set the purple ball's velocity - to 0\r\n* set the purple ball's velocity to 4\r\n* switch the purple and - red balls so it says `red_ball.bounce(purple_ball)`\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: - # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" - CSD U3 collisions bounceOff intro_markdown_instruction: "# Basketball\r\n\r\nRun - the code below and see what happens. You want the basketball to bounce, but - the floor should not move! See if you can find a different block that you - can use to make the basketball bounce off the floor.\r\n\r\n# Do This\r\n\r\nReplace - `bounce` with a different block so that the floor sprite does not move, and - the basketball sprite bounces off it.\r\n\r\n[//]: # (https://images.code.org/24355fc6377cfafdce3ce2b3568a33c3-image-1470343728940.png)\r\n\r\n[//]: - # (https://images.code.org/87e4306e0371c7975b8fb2583657ee4a-image-1470343728942.png)" - CSD U3 collisions bounceOff_markdown_instruction: "# Mouse\r\n\r\nThe mouse - should be running back and forth between the two walls. Can you use the `bounceOff` - block to make it move in the right way?\r\n\r\n# Do This\r\n\r\nUse the `bounceOff` - block to make the mouse sprite bounce off the wall sprites.\r\n\r\n[//]: # - (https://images.code.org/e542bc5decf5f57d3184a8d5449776d2-image-1470413949810.png)\r\n\r\n[//]: - # (https://images.code.org/fcd40235d2a4285723eecec1df041edc-image-1470413965009.png)\r\n\r\n[//]: - # (https://images.code.org/c3f6298b05a9eb51772c8c03a06abe54-image-1470414415864.png)\r\n\r\n[//]: - # (https://images.code.org/e89b80c63658eb3607478fe91aceda47-image-1470414741858.png)" - CSD U3 collisions bounciness_markdown_instruction: "# Bounciness\r\n\r\nSo - far, `bounceOff` has made sprites bounce away from other objects as fast as - they bounced into them. In the real world, almost everything slows down just - a little bit when it bounces off something else. You can use the `bounciness` - block to tell your sprite how much to slow down or speed up when it bounces - off something else.\r\n\r\n# Do This\r\n\r\n* Read the code below and press - \"Run\" to see the behavior of the basketball and pool ball.\r\n* Use a `bounciness` - block to set the bounciness of your soccer ball.\r\n* Run the code again to - see how the sprites bounce off the floor.\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: - # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)\r\n\r\n[//]: - # (https://images.code.org/0e4e9c26bed0d31d14f6b3f8f8bb4c27-image-1475786966986.png)" - CSD U3 collisions build isTouching_markdown_instruction: "# Balloon\r\n\r\nThe - code below will change the balloon sprite's animation when the tack touches - it. Use the arrow keys to move the tack until it touches the balloon.\r\n\r\n# - Do This\r\n\r\n* You do not need to change any code on this level.\r\n* Read - the if statements inside the draw loop and discuss with your partner how they - work.\r\n\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: - # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: - # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)" - CSD U3 collisions bumper_markdown_instruction: "# Bumper Cars\r\n\r\nThe bumper - cars are almost ready, but they still don't bump into each other. Can you - choose the right method to make the cars behave like they do in the picture?\r\n\r\n# - Do This\r\n\r\nUse `displace`, `collide`, `bounce`, or `bounceOff` to make - the sprites interact in the right way.\r\n\r\n[//]: # (https://images.code.org/682567536f824cc930ebed5c1b936e5f-image-1470415888369.png)\r\n\r\n[//]: - # (https://images.code.org/8a6915fe703f4fe097094cad1e754a6f-image-1470415888371.png)\r\n\r\n[//]: - # (https://images.code.org/0b9f5ca88dc99fc08d472fdba87d6e32-image-1470417254115.png)\r\n\r\n[//]: - # (https://images.code.org/2085e5de29f7170465b0c7bd5e6b56e9-image-1470417254116.png)" - CSD U3 collisions car intro_markdown_instruction: "# Frog Jump\r\n\r\nLook - at the frog jumping game to the left. It looks like the game from the last - lesson, but the frog moves the mushroom if it hits it. What code do you think - would help the computer to know whether two sprites are touching?\r\n\r\n[//]: - # (https://images.code.org/ee9b677e93213846fe12abb3b34f563c-image-1469742494237.png)\r\n\r\n[//]: - # (https://images.code.org/5f738da1a2b1ef8af124e4470e2babe7-image-1469742830481.png)\r\n\r\n[//]: - # (https://images.code.org/f22e6b1a636337820e53fb37a137b3d1-image-1469742992179.png)" - CSD U3 collisions car_markdown_instruction: "# Improve Your Game\r\n\r\nNow - that you know how to use `isTouching` and `playSound`, you can make some fun - things happen when your sprites run into each other.\r\n\r\n# Do This\r\n\r\nUse - the `if`, `isTouching`, `playsound`, and any other blocks you want to add - effects when your sprites collide. You should have at least two effects.\r\n\r\n_Challenge: - Can you add a score board to the top of the screen? How would your game keep - score, and how would the score be displayed?_" - CSD U3 collisions collide_markdown_instruction: "# Save your treasure\r\n\r\nThe - pirate is trying to steal your treasure! Use the arrow keys to move the pirate - around the screen. Can you change the code so the pirate can't get past - the wall?\r\n\r\n# Do This\r\n\r\nUse the `collide` block to make the pirate - sprite collide into the wall.\r\n\r\n[//]: #(https://images.code.org/04a7b28f7228570602238fed87420aab-image-1470944619236.png)\r\n\r\n[//]: - #(https://images.code.org/8f7ec18621c97ce98d22337a1e21ddab-image-1470944619234.png)\r\n\r\n[//]: - #(https://images.code.org/6b749a05857ea1e88fa46f7e2740c77c-image-1470944619235.png)" - CSD U3 collisions debug isTouching_markdown_instruction: "# Debugging Collisions\r\n\r\nThe - balloon is popping before the tack touches it. When sprites aren't doing - what you expect, you can use the `debug` block to get more information about - why the sprites are behaving that way. Can you find out what's wrong in - the code below?\r\n\r\n# Do This\r\n* Run the code and use the arrow keys - to move the tack to pop the balloon.\r\n* In the code below, change `balloon.debug - = false` to `balloon.debug = true`.\r\n* Add a new `debug` block to the code - and set the tack sprite's debug property to `true`.\r\n* Run the code again, - then discuss with your partner why the balloon is popping early.\r\n\r\n*Challenge: - Can you use the animations tab to resize the balloon picture so it pops at - the correct time?*\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: - # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: - # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)\r\n\r\n[//]: - # (https://images.code.org/2892e65635d7a43d0664bb8ff58eb698-image-1471200175665.png)\r\n\r\n[//]: - # (https://images.code.org/9ffeb3f543033353d073794071316860-image-1471200179449.png)" - CSD U3 collisions debug_markdown_instruction: "# Debug\r\n\r\nSometimes sprites - will behave in ways that are unexpected. There is a special `sprite.debug` - property you can use to better understand why the sprites interact the way - that they do.\r\n\r\n# Do This\r\n\r\nThese two coins are round, so you would - expect them to bounce in a certain way. Something weird is happening though!\r\n\r\n* - Run the code and watch the way that the coins interact.\r\n* Use the `sprite.debug` - block to make debug 'true' for both the sprites and run the code again.\r\n* - Change the gold coin's starting x position to 51 and run the code again.\r\n* - Discuss with a partner: Why do you think the balls are bouncing strangely?" - CSD U3 collisions displace diagonal_markdown_instruction: "# Diagonal Elevator\r\n\r\nLast - time we saw balloon, it pushed the feather all the way off screen. What do - you think will happen when the balloon moves away from the feather while it's - moving it?\r\n\r\n# Do This\r\n\r\nUse the `displace` block to make the balloon - sprite push the feather sprite, and watch what happens when the sprites stop - touching each other.\r\n\r\n[//]: # (https://images.code.org/a6c891b044cea1b6d8649a153e13739b-image-1470316517410.png)\r\n\r\n[//]: - # (https://images.code.org/af2df53196186e50a58f64f6559a53ca-image-1470316589121.png)\r\n\r\n[//]: - # (https://images.code.org/fb739254c4d2f6745977a26e0481162a-image-1470316780326.png)\r\n\r\n[//]: - # (https://images.code.org/341bb1ce73ba812f2bd0afeb01e08aad-image-1470316853020.png)" - CSD U3 collisions displace intro_markdown_instruction: "# Displace\r\n\r\nThe - interaction you've been programming is so common that there's a block designed - to do the interaction for you. `sprite.displace()` that will make one sprite - push the other when they touch. The code underlying this block might look - a lot like what you just wrote, but now you no longer need to worry about - writing those details yourself.\r\n\r\n# Do This\r\n\r\nSomeone tried to use - the `sprite.displace()` block to make the **elephant push the hippo**, but - there is a bug. Can you change the code so that the elephant pushes the hippo - off the screen?\r\n\r\n* Find the line of code where the `sprite.displace()` - block is used and fix the error." - CSD U3 collisions displace x_markdown_instruction: "# Program a Sprite Interaction\r\n\r\nYou - should have discussed with your classmates how you could create the sprite - interaction you saw in the last level. Now it's your turn to program it yourself. - How can you make the giraffe move the monkey off the screen?\r\n\r\n# Do This\r\n\r\nThe - giraffe is already moving across the screen toward the monkey but the sprite - interaction itself hasn't been programmed.\r\n\r\n* Use the plan you developed - with your classmates on the last level to program the sprite interaction yourself.\r\n\r\n[//]: - # (https://images.code.org/2e6b993747a39cd5076dce219037903d-image-1470319674401.png)\r\n\r\n[//]: - # (https://images.code.org/d44d7c1aa87ea7eeceea9e9b023408f9-image-1470319674396.png)" - CSD U3 collisions displace y_markdown_instruction: "# Write Your Own Sprite - Interaction\r\n\r\nIn the last level you should have written code for a sprite - interaction that you developed with your classmates. This time try to write - the program on your own, but you can use the patterns you saw in the last - level.\r\n\r\n# Do This\r\n\r\nThe elephant should **push the hippo off the - screen**. Notice that the elephant moves at a random Y velocity each time - the program runs.\r\n\r\n* Using the patterns from the last level, write code - that makes the elephant push the hippo off the screen." - CSD U3 collisions egg template_markdown_instruction: "# Template Level\r\n\r\n[//]: - # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: - # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: - # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: - # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: - # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: - # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" - CSD U3 collisions egg_markdown_instruction: "# Applesauce\r\n\r\nWhen the apple - hits the blender, the blender should turn on.\r\n\r\n# Do This\r\n\r\nUse - the `isTouching` block to make the blender shake back and forth when the apple - sprite touches the blender sprite. The shaking motion is already coded using - the random block, so you just have to check when the two sprites are touching.\r\n\r\n*Challenge: - Can you make the apple disappear when it touches the blender?*\r\n\r\n[//]: - # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: - # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: - # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: - # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: - # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: - # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" - CSD U3 collisions egg2_markdown_instruction: "# Making Sounds\r\n\r\nYou can - also use code to play a blender sound.\r\n\r\n# Do This\r\n\r\nUse the `playSound` - block from the \"Game Lab\" drawer to play the \"https://docs.code.org/sounds/blender.mp3\" - sound when the apple touches the blender. You will need to paste the address - of the sound into the block, so it looks like this: ![](https://images.code.org/8376df7a92ff8e6ba0a2d6e51c24547e-image-1484091385498.34.57 - PM.png)\r\n\r\n[//]: # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: - # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: - # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: - # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: - # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: - # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)\r\n\r\n[//]: - # (https://images.code.org/8376df7a92ff8e6ba0a2d6e51c24547e-image-1484091385498.34.57 - PM.png)" - CSD U3 collisions flyman add obstacles_markdown_instruction: "# Flyer Game - - Add Obstacle\r\n\r\nThis is the flyer game you built in the last lesson. - For the next several levels you'll be adding an obstacle sprite to the game, - using some of the sprite interactions you just learned. At the end you'll - have a chance to keep adding on ideas of your own.\r\n\r\n\r\n\r\n# Do This\r\n\r\nAdd an - obstacle sprite to the game. You can use whatever image you like from the - animation tab but the example shown here uses a sun. Right now you just need - to add the sprite to your game and give it an animation.\r\n\r\n* Add a new - sprite to your game called \"obstacle\"\r\n* In the animation tab create a - new animation for your obstacle. In the example a sun image was chosen\r\n* - Use the `sprite.setAnimation()` block to give your sprite the image you chose.\r\n* - Run the code and make sure the sprite appears where you want it on the screen. - You may need to set its X, Y, and scale properties to get it to look the way - you want." - CSD U3 collisions flyman bounceOff_markdown_instruction: "# Flyer Game - Interacting - with the Obstacle\r\n\r\nYou don't want your player to be able to move through - the obstacle, so you'll need to use one of the sprite interactions.\r\n\r\n# - Do This\r\n\r\n* Add code to your game that prevents your player from moving - through the obstacle.\r\n* If you use one of the bounce interactions, decide - if you want to reset the bounciness of your character.\r\n* Discuss with a - Neighbor: Which sprite interaction did you decide to use? Is there more than - one sprite interaction that works the way you'd expect?" - CSD U3 collisions flyman change colliders_markdown_instruction: "# Flyer Game - - Change Colliders\r\n\r\nRight now your colliders are all rectangular. Switch - them over to circles to get more interesting and realistic bounces and collisions.\r\n\r\n# - Do This\r\n\r\n* Use the `sprite.setCollider()` block to change the colliders - of your sprites to circles.\r\n* Set your sprites' debug properties to `true` - to make sure your game is working the way you want.\r\n* Play your game to - make sure it's working the way you want." - CSD U3 collisions flyman displace coin_markdown_instruction: "# Flyer Game - - Coin Behind the Obstacle\r\n\r\nRight now your coin is moving to random - locations. That means sometimes it even will appear behind your obstacle, - so your character can't get to it. Using sprite interactions you can fix - this problem.\r\n\r\n# Do This\r\n\r\n* Add code to your game that prevents - the coin from moving behind the obstacle. Don't be afraid to try out ideas - and just see how they work.\r\n* Discuss with a Neighbor: Which sprite interaction - did you decide to use? Is there more than one sprite interaction that works - the way you'd expect?" - CSD U3 collisions flyman make it your own_markdown_instruction: "# Flyer Game - - Make It Your Own\r\n\r\nTime to make this game your own by using what you've - learned about sprite interactions.\r\n\r\n# Do This\r\n\r\nAdd at least one - more aspect to your game that uses sprite interactions. There's some ideas - below or you can choose to add features of your own. Make sure you're ready - to share your ideas with your classmates.\r\n\r\n* Create \"edge\" sprites - to keep your character from bouncing out\r\n* Add platforms to the game for - your character to navigate around\r\n* Add another obstacle to your game\r\n* - Create another idea of your own." - CSD U3 collisions getSpeed_markdown_instruction: "# Dashboard\r\n\r\nHere's - a car that can be controlled with the arrow keys. The dashboard at the bottom - should show the car's speed and direction, even when it is off the screen.\r\n\r\n# - Do This\r\n\r\n* Use the `getDirection()` block to turn the compass needle - to the car's current direction. [Show me where](#triggercallout=code_triggered1)\r\n* - Use the `getSpeed()` block to display the car's current speed on the dashboard, - instead of 0. [Show me where](#triggercallout=code_triggered2)\r\n\r\n*Challenge: - Can you also show the car's current location on the dashboard?*\r\n\r\n[//]: - #(https://images.code.org/b87e51b8ed026ca239cbf629c9a58b26-image-1472571454000.png)\r\n\r\n[//]: - #(https://images.code.org/669fd48b2a28602220c2d07b717c1ace-image-1472571454002.png)\r\n\r\n[//]: - #(https://images.code.org/e3013d8428f54f7fbde63d0a4a8eaafb-image-1472571782304.png)" - CSD U3 collisions horse_markdown_instruction: "# Rainbow Horse\r\n\r\nWhen - the rainbow touches the horse, it should turn into a unicorn.\r\n\r\n# Do - This\r\n\r\nUse the `if`, `isTouching`, and `setAnimation` blocks to change - the horse sprite's image when the rainbow touches it. The unicorn image - is already loaded in the animations tab for you.\r\n\r\n[//]: # (https://images.code.org/4d1d0e36e574117140ecc377d406c1de-image-1470256869920.png)\r\n\r\n[//]: - # (https://images.code.org/b913bc2ee2231b908892472240a70105-image-1470256869922.png)\r\n\r\n[//]: - # (https://images.code.org/558b42903bf40cc26410e651a85de922-image-1470256869923.png)\r\n\r\n[//]: - # (https://images.code.org/1d41d2e5b3b55037911b8f73bdc2ff48-image-1470257277875.png)" - CSD U3 collisions isTouching intro_markdown_instruction: "# isTouching()\r\n\r\nWriting - out the math each time you want to check whether two sprites are touching - can take a while, so a programmer created the `isTouching` block, which can - check whether one sprite is touching another sprite (the *target*). The computer - is still doing the same math as in the previous program, but you don't have - to worry about it because another programmer already did that work.\r\n\r\n# - Do This\r\n\r\nInside the draw loop, drag the `isTouching` block into the - `if` block.    [Show me where](#triggercallout=code_triggered)\r\n\r\n*Hint: - Don't forget to change the \"sprite\" to \"balloon\" and the \"target\" to - \"tack\".*\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: - # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: - # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)" - CSD U3 collisions obstacle_markdown_instruction: "# Mouse Maze\r\n\r\nThe mouse - needs to find its way through the maze to get to the cheese, but right now - it passes through the walls. Can you change the code so that the mouse is - blocked by the walls?\r\n\r\n# Do This\r\n\r\nAdd a `displace`, `collide`, - `bounce`, or `bounceOff` block in the draw loop to make the sprites interact - in the right way.\r\n\r\n[//]: # (https://images.code.org/cefb99d244b9167314128578e477808c-image-1470948228670.png)\r\n\r\n[//]: - # (https://images.code.org/e0cf14ae384355129b32b73ef64ed77e-image-1470948281047.png)" - CSD U3 collisions open_markdown_instruction: "# Your Choice\r\n\r\nYou've - seen sprites do many things when they collide with each other: rotate, disappear, - change animation, or even make a new sprite appear on the screen. Now it's - your turn to choose what the sprites can do. Decide what two animations you - want to use for your sprite, and what you want to happen when they touch each - other, then code your choice. You may also choose to change the position, - speed, and direction of your sprites.\r\n\r\n# Do This\r\n* Decide what your - sprites should look like, and use `setAnimation` to give them that image\r\n* - Change the starting position of your sprites in the `createSprite` block\r\n* - Use `setSpeedAndDirection` or `velocityX` and `velocityY` to make your sprites - move how you want\r\n* Use the `if` block, with `isTouching` and `rotate`, - `visible`, `setAnimation` or any other block to make your sprites react when - they collide." - CSD U3 collisions overlap x_markdown_instruction: "# Turtle Race\r\n\r\nThe - turtle moves forward every time you press the left key. When he touches the - finish line, he should get a trophy. The trophy will appear when `isTouchingX` - is true. Can you add code to make sure it is set to true when the turtle - gets to the finish line?\r\n\r\n# Do This\r\n\r\nAdd code inside the draw - loop to set the values of the variables that have been created for you. Then, - test your program by playing the game.\r\n\r\n\r\n[//]: # (https://images.code.org/af2cffe952997258eb6b5573cfe9a29f-image-1470188585528.png)\r\n\r\n[//]: - # (https://images.code.org/d2eb9684743d45ef1e10ff4602936107-image-1470188590517.png)\r\n\r\n[//]: - # (https://images.code.org/98aee1ed11c7e00cd66718b4c232ab66-image-1470190293465.png)\r\n\r\n[//]: - # (https://images.code.org/fb129d34e3089763f35dfc8980d705ea-image-1470191576501.png)\r\n\r\n[//]: - # (https://images.code.org/3fc6da739dfd31b256618a560c12a076-image-1470191923150.png)" - CSD U3 collisions overlap y_markdown_instruction: "# Fried Egg\r\n\r\nIt's - breakfast time! When the egg hits the pan, it should start to fry. Can you - add code so that isTouchingX is set to true at the right time?\r\n\r\n# Do - This\r\n\r\nSet the values of the variables so that `isTouchingX` is true - when the egg hits the pan.\r\n\r\n[//]: # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: - # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: - # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: - # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: - # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: - # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" - CSD U3 collisions overlap_markdown_instruction: "# IDEK\r\n\r\nThis is Tracey's - idea. Apparently horses turn into unicorns when they go through rainbows? Use - your arrow keys to aim the rainbow at the unicorn, then hit the space bar - to make it fly toward the horse.\r\n\r\n# Do This\r\n\r\nUse two `if` blocks - together to change the sprite's animation when the two sprites touch each - other. Then play the game to test your code.\r\n\r\n[//]: # (https://images.code.org/4d1d0e36e574117140ecc377d406c1de-image-1470256869920.png)\r\n\r\n[//]: - # (https://images.code.org/b913bc2ee2231b908892472240a70105-image-1470256869922.png)\r\n\r\n[//]: - # (https://images.code.org/558b42903bf40cc26410e651a85de922-image-1470256869923.png)\r\n\r\n[//]: - # (https://images.code.org/1d41d2e5b3b55037911b8f73bdc2ff48-image-1470257277875.png)" - CSD U3 collisions pinball_markdown_instruction: "# Panda Game\r\n\r\nPress - \"Run\" to try out the game on the left. You can use the left and right arrow - keys to control the paddle. What types of sprite interactions do you see? Which - ones will use the `isTouching` block? Which interactions have their own blocks?\r\n\r\n# - Do This\r\n\r\nPlay the game a few times and discuss with your partner what - how you would program the different sprite interactions.\r\n" - CSD U3 collisions pinball2_markdown_instruction: "# Panda Game\r\n\r\nHere - is the same game, but missing most of the interactions. All of the missing - interactions should be inside the \"spriteInteractions\" function. ([Show - me where](#triggercallout=code_triggered)) The comments will help you remember - which interactions are missing.\r\n\r\n# Do This\r\n\r\nUse the blocks you - know to program back the missing interactions.\r\n" - CSD U3 collisions pirate_markdown_instruction: "# Hide your treasure\r\n\r\nYour enemies are still after your treasure. Use the arrow keys to move - the person around the screen. Can you change the code so that she can push - the treasure behind the tree?\r\n\r\n# Do This\r\n\r\nUse `displace`, `collide`, - `bounce`, or `bounceOff` to make the sprites interact in the right way.\r\n\r\n[//]: - # (https://images.code.org/732942eef4d0c288bf445a4478aee6ec-image-1470947222110.png)\r\n\r\n[//]: - # (https://images.code.org/1458d90cb97f3bd37508fa0ec3d997f8-image-1470947222109.png)\r\n\r\n[//]: - # (https://images.code.org/56da2ef5cef40080e0d677c86aec3901-image-1470947222108.png)" - CSD U3 collisions predict set velocity code_markdown_instruction: "# Sprite - Interactions\r\n\r\nSo far you've been able to create simple sprite interactions - by using the `sprite.isTouching()` block. For example, you've reset a coin - to a different location on the screen when a character touches it. Now it's - time to start making sprites have more complex interactions.\r\n\r\n# Do This\r\n\r\n* - Run the program and observe the interaction between the two sprites\r\n* Discuss - with a Neighbor: Using only the commands you already know how could you create - this kind of interaction? There's many ways to do it, but here are some blocks - to consider.\r\n\t* `sprite.isTouching()`\r\n * `sprite.velocityX`\r\n * - `sprite.velocityY`\r\n * `sprite.x`\r\n * `sprite.y`\r\n\r\nBe ready - to share your ideas with your classmates." - CSD U3 collisions predict set velocity_markdown_instruction: "# Setting Velocity\r\n\r\nThis - program creates two sprites, one that's standing still in the middle of the - screen and the other that moves towards it. Notice the one important line - of code in this program\r\n\r\n\tif(sprite1.isTouching(sprite2)){\r\n\t\tsprite2.velocityX - = sprite1.velocityX;\r\n }\r\n\r\n# Predict\r\n\r\nWhat do you think will - happen when the two sprites touch? Write your answer and reasonings in the - space below. Then run the code to see for yourself.\r\n\r\n" - CSD U3 collisions scoreboard_markdown_instruction: "# Scoreboard\r\n\r\nYou - can also use `isTouching` to decide whether you should increase the score. In - this game, the score is stored inside the 'score' variable. It is displayed - on the screen using the `text` block. [Show me where](#triggercallout=code_triggered)\r\n\r\n# - Do This\r\n\r\n* Use the `if` and `isTouching` blocks to determine whether - the bunny has caught the carrot. [Show me where](#triggercallout=code_triggered2)\r\n* - If it has, do the following three things:\r\n * use the counter pattern on - the score variable to increase the score.\r\n * reset the carrot's x position - off the right hand side of the screen\r\n * set the carrot's y position to - a random number between 10 and 390" - CSD U3 collisions setCollider_markdown_instruction: "# setCollider\r\n\r\nSprites - interact based on the size and shape of their collider, not the images that - are assigned to them. You can only see the collider when debug mode is turned - on. You can change the shape of the collider using the `sprite.setCollider()` - block, which lets you pick between a \"rectangle\" or a \"circle\". By default - all colliders are \"rectangle\".\r\n\r\n# Do This\r\n\r\n* Find the `sprite.setCollider()` - block for the gold coin, and change it from \"rectangle\" to \"circle\"\r\n* - Add a new `sprite.setCollider()` block for the silver coin, and choose \"circle\" - for the shape of the collider\r\n* Run the code again to see how the sprites - bounce.\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: - # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" - CSD U3 collisions sidescroll2_markdown_instruction: "# Improve Your Game\r\n\r\nNow - that you know how to use `isTouching` and `playSound`, you can make some fun - things happen when your sprites run into each other.\r\n\r\n# Do This\r\n\r\n* - Add at least two effects when your sprites collide.\r\n\r\n*Challenge: Add - a scoreboard to the top of your screen.*\r\n" - CSD U3 collisions sundae_markdown_instruction: "# collide()\r\n\r\nThe `collide` - block is similar to `displace`, but it makes the sprite that uses it stop - when it is touching the other sprite. Can you use this to make the cherry - stop when it gets to the top of the ice cream sundae?\r\n\r\n# Do This\r\n\r\nUse - the `collide` block to make the cherry sprite stop when it runs into the ice - cream sprite.\r\n\r\n[//]: # (https://images.code.org/491fb8bff907a183bd1cf0061689d193-image-1470419927625.png)\r\n\r\n[//]: - # (https://images.code.org/ea2066d640e74284b8c48e382f56bf1b-image-1470419927627.png)" - CSD U3 collisions tennis_markdown_instruction: "# Tennis\r\n\r\nComplete the - tennis game by making sure the ball and the racket interact in the right way. - You can use your up and down arrows to control the racket.\r\n\r\n# Do This\r\n\r\nAdd - a `displace`, `collide`, `bounce`, or `bounceOff` block in the draw loop to - make the sprites interact as they do in the picture.\r\n\r\n_Challenge: Can - you add a scoreboard that will add a point every time the ball is hit, and - subtract one every time it's missed?_\r\n\r\n[//]: # (https://images.code.org/8d8cf039f50114c07a21e73bbc1c8dfe-image-1470418244037.png)\r\n\r\n[//]: - # (https://images.code.org/d05be653ae7e4717353dffd08af9c656-image-1470418244039.png)" - CSD U3 collisions try blocks_markdown_instruction: "# More Collision Blocks\r\n\r\nThree - new types of sprite interactions have been added to the toolbox, `sprite.collide()`, - `sprite.bounce()`, and `sprite.bounceOff()`. How do you think they'll affect - the sprites?\r\n\r\n# Do This\r\n\r\n* Switch out the displace block for the - `sprite.collide()`, `sprite.bounce()`, and `sprite.bounceOff()` blocks. [Show - me where](#triggercallout=code_triggered)\r\n\t* *Hint: If you're having - trouble doing this with blocks then switch over to text mode*\r\n* Discuss - with a neighbor: What is the difference between the four different sprite - interactions? What do you think the purpose of each block is?\r\n\r\n\r\n[//]: - # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: - # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" - CSD U3 collisions turtle_markdown_instruction: "# Debugging Sprite Interactions\r\n\r\nSprite - interactions just run some code when they're called. The interactions are - not \"remembered\" by the game. If you want one sprite to bounce or collide - with another then it needs to be a part of the draw loop. If you forget then - this can lead to unexpected behavior.\r\n\r\n# Do This\r\n\r\nThe turtle can - be moved with the arrow keys. It's not supposed to be able to walk through - the tree, but something is wrong in the code. Can you find and correct the - bug in the code?\r\n\r\n* Run the code and try to make the turtle collide - with the tree.\r\n* Look through the code and discuss with your partner what - the problem is.\r\n* Correct the code, then run it again to make sure it works." - CSD U3 collisions types_markdown_instruction: "# Collision Types\r\n\r\nThere - are four types of collisions that we use in Game Lab. These blocks will cause - a certain type of interaction between the _sprite_ and its _target_.\r\n\r\n## - displace\r\n\r\nThe `displace` block causes the sprite to push the target - as long as they are touching each other. The sprite keeps moving normally.\r\n\r\n## - collide\r\n\r\nThe `collide` block makes the sprite stop when it runs into - the target. If the target is moving, it will push the sprite with it. The - target keeps moving normally.\r\n\r\n## bounce\r\n\r\nThe `bounce` block makes - the sprite and the target bounce when they touch each other. Both the sprite - and the target change how they are moving.\r\n\r\n## bounceOff\r\n\r\nThe - `bounceOff` block makes the sprite bounce off the target. The target keeps - moving normally.\r\n\r\n\r\n\r\n# Do This\r\n\r\nChoose the best block to - model the basketball bouncing off the floor. [Show me where](#triggercallout=code_triggered)\r\n\r\n[//]: - # (https://images.code.org/24355fc6377cfafdce3ce2b3568a33c3-image-1470343728940.png)\r\n\r\n[//]: - # (https://images.code.org/87e4306e0371c7975b8fb2583657ee4a-image-1470343728942.png)" - CSD U3 Complex Movement counter prediction_markdown_instruction: "# Velocity - and the Counter Pattern\r\n\r\nUsing the counter pattern with a sprite's - x and y property makes a sprite move smoothly across the screen. In this program - **the counter pattern is being used with the `sprite.velocityX` property** - instead.\r\n\r\n# Predict\r\n\r\nWhat do you think will happen when the code - is run? Why? Once you're ready you can run the code to find out." - CSD U3 Compound Nested Challenge_markdown_instruction: "# Checking for Multiple - Conditions\r\n\r\nSo far we've looked at a lot of ways to check if a single - condition is true, but often a program needs to check the state of many conditions - simultaneously before making a decision. For this challenge, let's assume - the following scenario:\r\n\r\n- The sprite should move up, down, left, and - right if the corresponding arrow key is pressed.\r\n- The sprite should _not_ - go all the way off the screen in any direction.\r\n\r\n# Do This Together\r\n\r\nBefore - you tackle writing this program, you'll need to figure out how to check multiple - conditions at once.\r\n\r\n* **Brainstorm** with your neighbors ways you might - check for more than one condition.\r\n* **Share** back with the whole class - so you can see other potential approaches.\r\n* **Explore** the toolbox for - blocks that might help (pay extra attention to the Math and Control drawers).\r\n* - **Program** your proposed solution.\r\n* **Test** your program to make sure - it's actually checking all of the conditions you intended.\r\n" - CSD U3 Compound Nested Examples_markdown_instruction: "# Multiple Paths to - the Same Outcome\r\n\r\nYou may have seen several different approaches to - solving the previous challenge - one of the beatiful things about programming - is that it is as much about personal expression as it is about problem solving. - You could have 10 people attempt to create the same program, and each would - be unique and reflective of the person who programmed it!\r\n\r\nThere are - two primary approaches to checking for multiple conditions:\r\n\r\n### Nesting - Conditionals\r\n\r\nIf you think about asking one question first, and then - asking the second question only if the first was true, you could nest your - conditionals, like so:\r\n\r\n```javascript\r\nif (keyDown('up') {\r\n if - (sprite.y > 0) {\r\n sprite.y = sprite.y - 1;\r\n }\r\n}\r\n```\r\n\r\n### - Compound Booleans\r\n\r\nIf you think about asking if both the first and second - question are true at the same time, you could use `&&` (and) to combine booleans, - like so:\r\n\r\n```javascript\r\nif (keyDown('up') && sprite.y < 0) {\r\n\tsprite.y - = sprite.y - 1;\r\n}\r\n```\r\n\r\n# Do This\r\n\r\nThis program uses a nested - conditional to check the up arrow and a compound boolean to check the down - arrow. Use one (or both) techniques to check the left and right arrows as - well." - CSD U3 Conditional Predict_markdown_instruction: "# Prediction\r\n\r\nIn this - program, the animation has different reactions when the user presses different - keys. One reaction is a new kind of behavior you haven't seen before. Look - at the following inputs and match them to their outputs. Once you have made - your prediction you will be able to test it out.\r\n\r\n| Input |\r\n| ------------- - | \r\n| Press the _space_ bar | \r\n| Press the _w_ key | \r\n| Press the - _j_ key |\r\n| Press the _j_ and _k_ keys | \r\n| Press the _k_ key |\r\n\r\n\r\n| - Output |\r\n| ------------------------- |\r\n| blue_sprite rotates clockwise |\r\n| - red_sprite moves up and blue_sprite moves down |\r\n| The sprites don't - change |\r\n| red_sprite rotates counter clockwise |\r\n| red_sprite gets - bigger and blue_sprite gets smaller |\r\n" - CSD U3 Conditional Project_markdown_instruction: "# Get Creative\r\n\r\nAt - this point you have all of the tools necessary to make an interactive animation - or simple game of your own design! This is your chance practice using all - of the blocks you've seen so far, and to experiment with blocks you haven't - used yet.\r\n\r\n# Do This\r\n\r\nDesign an interactive animation of your - own. Your program should -\r\n\r\n- Use conditionals to get keyboard input\r\n- - Use conditionals to react to a sprite's properties\r\n- Allow a user to move - one or more sprites around the screen\r\n- Change multiple sprite properties - through conditionals\r\n\r\n_You might notice some new blocks in the Sprites - drawer, experiment with them and see if you can incorporate them into your - conditionals._" - CSD U3 Counters assigning an expression_markdown_instruction: "# Assignment - and Expressions\r\n\r\nYou know that **variables can hold a single value**. - You also know that **expressions are always evaluated to a single value**. - Why don't we try storing that single value in a variable so that we can use - it many times in our programs.\r\n\r\n# Do This\r\n\r\nThis program generates - a random multiple of 10 (10, 20, 30, 40 etc) and stores it in the variable - `size`\r\n\r\n* **Run the progam** to see how it works\r\n* **Change the numbers - used in the expression on line 3** to see how it affects this simple animation" - CSD U3 Counters counter colors_markdown_instruction: "# Counters in Colors\r\n\r\nThe - counter pattern you've been using is incredibly useful for changing many - different aspects of your images, not just the position of shapes. **Anything - that normally would be drawn with a number can easily be animated with a counter - variable.**\r\n\r\n# Do This\r\n\r\nThe goal of this program is to use two - variables as counters to **transition a circle's color slowly from blue to - red**.\r\n\r\n* **Run the program** to see what happens.\r\n\t* The `red` - value **already counts up by 1**\r\n\t* The `blue` value **doesn't change** - and so the circle becomes purple, not red.\r\n* Use what you know about counters - to **add code that will make the circle transition smoothly to red**\r\n* - **Note:** When the `color` command sees a value outside the range of 0 - 255 - it just rounds. For example, 300 becomes 255 and -100 becomes 0." - CSD U3 Counters counter square movement_markdown_instruction: "# Animating - with Counters\r\n\r\nThe counter pattern can be used to increase the value - of a variable each time the draw loop runs. You can use this to create smooth - motion in your programs. You're going to try out a few ways of using this.\r\n\r\n# - Do This\r\n\r\nThis program uses the counter pattern with a variable called - `xPos`.\r\n\r\n* **Read the program** and make a prediction of how it will - run.\r\n* **Run the program** to check your prediction\r\n* **Change the code** - so that `xPos` changes by different amounts each draw loop. For example instead - of `xPos = xPos + 1` you could try:\r\n\t* `xPos = xPos + 2`\r\n * `xPos - = xPos + 5`\r\n * `xPos = xPos + 0.1`" - CSD U3 Counters counter subtraction_markdown_instruction: "# Counting Down\r\n\r\nSometimes - you won't want to count up, you'll want to count down. You can **subtract** - from a variable's value just as easily as you add. ![](https://images.code.org/8b98effa437da54090926c3451af204d-image-1465325587949.52.49 - PM.png)\r\n\r\n\t// counter pattern, counting down\r\n counter = counter - - 1;\r\n\r\nKeep getting practice using counters to animate, but this time - try counting down.\r\n# Do This\r\n\r\nThis program uses the counter pattern - with a variable called `xPos`.\r\n\r\n* The square currently starts in the - center and **goes off the right side** of the screen\r\n* **Change the program** - so that the square **goes off the left side of the screen** instead.\r\n\r\n" - CSD U3 Counters counters expressions_markdown_instruction: "# Using One Counter - Many Times\r\n\r\nYou've already seen and used commands like `x = x + 1` - often to update the value of `x`. Sometimes though we want to **do some math - with a variable without actually changing that variable's value**. \r\n\r\nThis - program draws a rectangle **100 pixels to the right of `x` without changing - the value of `x`**. Here's the steps your computer goes through to run that - second line of code.\r\n\r\n![](https://images.code.org/8f33bbb0189c5e1b854c5b1786168225-image-1465503000293.09.49 - PM.png)\r\n\r\nUsing this pattern allows you to use a single counter to animate - multiple objects, as you're about to see.\r\n\r\n# Do This\r\n\r\nThis program - creates a counter variable called `xPos` and uses it to animate 3 rectangles.\r\n\r\n* - **Run the program** to see what happens.\r\n* **The red and orange rectangles - move across the screen but the yellow one doesn't yet.**\r\n* **Write code - following the pattern shown above** so that the yellow rectangle will move - across the screen with the others.\r\n* **Hint:** How was the orange rectangle - made to move?\r\n\r\n![](https://images.code.org/822941874e7add509bb80266718efb94-image-1463080462625.gif)" - CSD U3 Counters counters sunset night_markdown_instruction: "# Challenge: Nightfall\r\n\r\nThink - you've got drawing with counters down? Try this challenge.\r\n\r\nThe color - block can take a 4th input that controls the opacity of the color. You can - click the arrows on the side of the color block to expand this 4th input.\r\n\r\n![](https://images.code.org/7844f8cb46eade7cec452b7a4d98124b-image-1484964689007.10.08 - PM.png)\r\n\r\n# Do This\r\n\r\nThis is your same sunset animation from before. - Can you make the scene slowly change to night?\r\n\r\n![](https://images.code.org/b055142110b0d0ed092d6496447aad6e-image-1463079830043.gif)\r\n\r\n" - CSD U3 Counters counters sunset_markdown_instruction: "# Animate a Sunset\r\n\r\nYou - now know a little bit about programming with variables. You've seen that - they can **store a value to use many times in a program**. You've seen how - the **counter pattern can allow you to perform smooth animations**. It's - now time to put everything you've learned together.\r\n\r\n\r\n# Do This\r\n\r\nThis program is - designed to **animate a sunset**. Some starter code is provided that **creates - all the counter variables you'll need to run your animation**. You need to - decide how to use them to animate this image.\r\n\r\n* **Run the program to - see how it works**\r\n* **Add code** that will:\r\n\t* Make the sun go down\r\n * - Change the color of the sky from blue to red\r\n * Make the cloud go across - the screen\r\n \r\n
Need help?\r\n
    \r\n
  • For - help animating the sun go check out level 10
    • \r\n
  • For help animating - the sky go check out level 12
    • \r\n
  • For help animating the cloud go - check out level 13
    • \r\n
\r\n\r\n
" - CSD U3 Counters explaining counters contained 2_markdown_instruction: "# The - Counter Pattern\r\n\r\nThis pattern is one of the most important ones in all - of programming. \r\n\r\n![](https://images.code.org/83af2e40443ab294ba635f2a01a48ac7-image-1465506512065.06.56 - PM.png)\r\n \r\nIt is used to increase the value of a variable by 1. You - might call it the **counter pattern** since it can be used to make a variable - that counts up. You'll use this pattern a lot, especially with the draw loop. - Let's see what that looks like.\r\n\r\n# Do This\r\n\r\nThis program creates - a variable `counter` and then uses the **counter pattern** to make it count - up. When you run the program what do you think you'll see on the screen?\r\n\r\n* - **Read the program** and make a prediction of what the output will be.\r\n* - **Run the program** to check your prediction.\r\n* **Discuss with a neighbor**. - Can you explain what you observed?\r\n\r\n" - CSD U3 Counters explaining counters_markdown_instruction: "# The Counter Pattern\r\n\r\nThis - pattern is one of the most important ones in all of programming. \r\n\r\n![](https://images.code.org/83af2e40443ab294ba635f2a01a48ac7-image-1465506512065.06.56 - PM.png)\r\n \r\nIt is used to increase the value of a variable by 1. You - might call it the **counter pattern** since it can be used to make a variable - that counts up. You'll use this pattern a lot, especially with the draw loop. - Let's see what that looks like.\r\n\r\n# Do This\r\n\r\nThis program creates - a variable `counter` and then uses the **counter pattern** to make it count - up. When you run the program what do you think you'll see on the screen?\r\n\r\n* - **Read the program** and make a prediction of what the output will be.\r\n* - **Run the program** to check your prediction.\r\n* **Discuss with a neighbor**. - Can you explain what you observed?\r\n\r\n" - CSD U3 Counters expressions_markdown_instruction: "# Expressions\r\n\r\nWe're - going to start learning about **expressions** and how to use them in programs. - Here are two expressions, a short one and a longer one.\r\n\r\n`1 + 2`\r\n\r\n`(1000 - - 400) / (3 * 20)`\r\n\r\nThese expressions have two important components:\r\n\r\n* - **values:** numbers, text, or information in your program \r\n* **operators:** - commands telling the computer to perform an action with those value `+`, `-`, - `*`, `/`\r\n\r\nDon't worry if this is a lot of vocabulary all at once. Try - using some expressions first to get a feel for how they work.\r\n\r\n# Do - This: \r\n\r\nThis program draws a rectangle using 4 separate expressions. - \r\n\r\n* **Run the program** to see what happens\r\n* **Change some of the - values and operators in the 4 expressions**. How does it change the rectangle?\r\n* - Move on once you've changed a few expressions. It's fine if your program - didn't run properly." - CSD U3 Counters long expressions_markdown_instruction: "# Expressions Evaluate - to a Single Value\r\n\r\nAs you probably just noticed expressions can be used - in places where you might normally use a number. That's because your computer - can **evaluate or calculate the single number that is the result of the expression**. - When your computer runs the command\r\n\r\n`strokeWeight(10 + 20)`\r\n\r\nIt - will first calculate the value of the expression `10 + 20` to be `30` and - use that value to set the strokeWeight. In fact, **every expression will eventually - be evaluated to a single value**.\r\n\r\n# Do This\r\n\r\nThis program uses - console.log to show the single value of a couple long expressions.\r\n\r\n* - **Run the program** to see that the expressions result in a single value\r\n* - **Create and display the results of some expressions of your own**. It doesn't - matter what they are, just throw in something long and complex and convince - yourself a single value always comes out." - CSD U3 Counters random expressions_markdown_instruction: "# Random Numbers - in Expressions\r\n\r\nYou can **use random numbers inside of expressions** - too. For example, \r\n\r\n`10 * randomNumber(1,5)`\r\n\r\nis a perfectly valid - expression. This is because **`randomNumber` will generate a single random - value** that can then be used in the expression just like a number.\r\n\r\n# - Do This\r\n\r\nThis program displays random multiples of 10 between 10 and - 50.\r\n\r\n* **Run the program** to see how it works\r\n* **Change the program** - so that it displays **random multiples of 10 between 10 and 100**.\r\n* Change - the expression with a random number in it more if you like. Once you're comfortable - with how it works move on." - CSD U3 Counters sunset template_markdown_instruction: "# Animate a Sunset\r\n\r\nYou - now know a little bit about how **expressions can be used to create variables - that count** and you've used these in some simple programs. Try using counter - variables to animate a more complex scene.\r\n\r\n# Do This\r\n\r\nThis program - is designed to **animate a sunset**. Some starter code is provided but you'll - need to fill in the rest.\r\n\r\n* **Run the program to see how it works**\r\n* - **Add code** that will:\r\n\t* Make the sun go down\r\n * Make the cloud - go across the screen\r\n * Change the color of the sky from blue to red\r\n \r\n
Want - a hint?\r\n
    \r\n
  • For help animating the sun go check out level - [[blah]]
    • \r\n
  • For help animating the cloud go check out level [[blah]]
    • \r\n
  • For - help animating the sky go check out level [[blah]]
    • \r\n
\r\n\r\n
\r\n\r\n![](https://images.code.org/d0a1386297fae9f21fc046da62b13248-image-1462997082538.gif)" - CSD U3 Counters variables as counters_markdown_instruction: "# x = x + 1\r\n\r\nThe - following line of code **is the most important one to understand in this lesson**.\r\n\r\n`x - = x + 1;`\r\n\r\nTry it out in a program first, then move on to **learn more - about what this command is doing**.\r\n\r\n# Do This:\r\n\r\n* **Read the - program to get a sense of how it should run**\r\n* **Run the program** and - observe how it works\r\n* **Discuss with a neighbor** what you observe and - why you think it is happening. Once you've talked, move on." - CSD U3 Counters variables in expressions_markdown_instruction: "# Variables - in Expressions\r\n\r\nYou just saw that **the result of an expression can - be stored in a variable**. Get ready though, because we're about to get even - more interesting.\r\n\r\n**Variables can be used in expressions**. All of - these expressions are valid (assuming the variables have been created):\r\n\r\n`age - + 1`\r\n`height / 2`\r\n`(time * speed) + 100`\r\n\r\nIn each case **the variable's - value is used when its label appears**.\r\n\r\n# Do This\r\n\r\nThis program - generates a random multiple of 10 (10, 20, 30, 40 etc) and stores it in the - variable `size`\r\n\r\n* **Run the progam** to see how it works\r\n* **The - variable `size` appears in two expressions on lines 7 and 8.**\r\n* **Change - the values in these expressions** to see how they affect the way your program - works" - CSD U3 Counters watchers_markdown_instruction: "# Debugging: Watchers\r\n\r\nOnce - you have multiple counter variables it can become difficult to keep track - of how your program is running. **If you want to debug your code, it's useful - to be able to see the values of your different variables as they change.**\r\n\r\nYou - can add a **watcher** to a variable at any time by typing `$watch` followed - by the name of your variable into the Debug Console. This example shows how - you would create watchers for the variables `x` and `y`. Notice they've now - **been added to the \"Watch\" window** to the right.\r\n\r\n![](https://images.code.org/c5cddda5572e73e3f082287aa076e4a8-image-1465327628344.25.11 - PM.png)\r\n\r\nWhile your program is running, the values of `x` and `y` in - the \"Watch\" window will update to show their current value.\r\n\r\n# Do - This\r\n\r\nThis program draws a dot that slowly grows in size. You want to - know **the value of `size` when the dot totally covers the screen.**\r\n\r\n* - **Create a watcher** for `size` by running the command `$watch size` in the - Debug Console.\r\n* **Run the program** and observe the value of `size` change - in the \"Watch\" window.\r\n* **Talk to a neighbor**. How large is `size` - when the dot covers the whole screen?" - CSD U3 Direction Animations_markdown_instruction: "# Changing Images as you - Move\r\nRight now your conditionals only do one thing (change your sprite's - x or y), but you can actually put as much code as you want inside a conditional. - A common thing to do in games is to change your character's image depending - on which direction they're walking.\r\n\r\n# Do This\r\nUsing the provided - program and images:\r\n\r\n- Click on the bug image you are using.\r\n- Use - the Duplicate Button in the Animation Tab to make 4 copies of the - bug image you are using.\r\n- Make each copy face a different way and give - it a good descriptive name.\r\n- You should now have 4 images of the bug in - your animation tab, each facing a different way\r\n- Write code that uses - `sprite.setAnimation()` to change the image on your bug sprite when different - arrow keys are pressed\r\n\t- The up arrow should switch to up facing bug - image\r\n\t- The down arrow should switch to down facing bug image\r\n\t- - The left arrow should switch to left facing bug image\r\n\t- The right arrow - should switch to right facing bug image" - CSD U3 Direction Arrows_markdown_instruction: "# Move in All Directions\r\nOnce - you've got your sprite moving in one direction by responding to a `keyDown`, - getting it to move in all four directions should be more of the same. The - basic keyboard control that you're developing here will become the basis - for many of the games you make down the road.\r\n\r\n# Do This\r\nThe bug - sprite you made that responds to the up arrow has been brought to this level. - Add the interaction for the other three arrow keys!\r\n\r\n- Add three if - statements - one for each arrow.\r\n- Each if statement should move the sprite - in the direction of the arrow.\r\n- HINT: As you're working, make sure you - consider both which axis (x or y) your sprite should be moving depending on - the key, and whether or not you should be increasing or decreasing to go in - the desired direction." - CSD U3 Draw Loop Discuss_markdown_instruction: "# Draw()ing\r\nHere's a program - that looks pretty similar to what you've been writing, but may behave quite - differently. You'll want to **stop and discuss** with the class before moving - on.\r\n\r\n# Do This Together\r\nYou will **not write any code** in this level, - and you should be working as a whole class.\r\n* **Read** the provided program - together.\r\n* **Identify** elements that are different than those you have - seen before.\r\n* **Predict** what the provided program will do. **Be specific!**\r\n* - **Run** the program several times and **record** the results.\r\n* **Discuss - with a neighbor.** Was your prediction correct?\r\n* **Hypothesize** what - is happening when this code is run." - CSD U3 Draw Loop Experiment_markdown_instruction: "# Do This\r\nTry using some - of the other shape functions you've learned in the draw loop. What happens - when you use `randomNumber()` to generate some of the inputs?\r\n\r\n# Challenge\r\nExperiment - with adding code before and after the `draw()` loop. Can you figure out what - gets called when?" - CSD U3 Else_markdown_instruction: "# What If My Condition Isn't True?\r\n\r\n\r\n\r\nSometimes we want to tell our - program what to do if a condition is `true`, but also what to do if it's - `false`. Pressing the plus button at the bottom of your conditional block - will give you another section called `else`. This `else` section is a fallback - - it will get called whenever the condition in the `if` before it is `false`.\r\n\r\n# - Do This\r\nThe gears are back again. The last time you worked with them, you - made them spin when the space bar is pressed. Instead of the gears only spinning - when the space key is pressed, we want them to spin one way when the space - key is pressed and spin the other way when it's not pressed.\r\n\r\n\r\n* Click the _plus_ button at the bottom of the - if block to add an else.\r\n* Add commands to make the gears spin opposite - of the direction that they do when the space bar is pressed." - CSD U3 Expressions calculator_markdown_instruction: "# Adding and Multiplying\r\n\r\nYour - computer can calculate the results of many math problems. Try out this example, - where we add and multiply a few numbers. Then extend it yourself to the numbers - 1 - 10.\r\n\r\n# Do This\r\n\r\n* Run the program code once to see how it - works\r\n* Following the examples, write a program that **multiplys the numbers - 1 - 10** and **adds the numbers 1 - 10**\r\n* **When you're done confirm - your results with a neighbor**" - CSD U3 finishing touches_markdown_instruction: "# Finishing Touches\r\n\r\nNow - that you have the basis for your game, it's time to add some finishing touches.\r\n\r\nTo - make your game even better, try making at least two improvements to it. You - can use the list below to help you, or you can come up with your own improvements - that you'd like to make.\r\n\r\n* Find a way to keep your player from going - off the edges of the screen.\r\n* Add a different item for your player to - collect or avoid that are worth different point values.\r\n* Make a variable - to keep track of how many lives your player has, and then end the game when - the lives run out.\r\n* Add sprites that move in the background of your game.\r\n* - Make another background to switch to when the score gets even higher, or when - the game ends.\r\n* Give your game a way to end. Possible events to end your - game could be the score reaching a certain value, or the amount of lives to - keep the game running runs out.\r\n* If your game has platforms, try making - the objects in your game interact with these platforms in some way." - CSD U3 Frame Rate_markdown_instruction: "# Too Fast, Slow Down!\r\n\r\n\r\nThe animation is working, but - it's a bit too fast. We're flipping the pages in our virtual flipbook too - often, so we'll need to slow that down.\r\n\r\nThe frequency that our draw - loop is run is called the **frame rate** - the number of times per second - the screen is refreshed.\r\n\r\nThe default frame rate for Game Lab is 30 - frames per second (or FPS), which is great for a video game, but not so good - for our animation. We can slow down the frame rate using the `Game.frameRate` - block.\r\n\r\n# Do This\r\n\r\n* Use the `Game.frameRate` block at the very - beginning of your program, setting it to a number (frames per second) that - slows the animation down a bit. \r\n* Test it out with different numbers to - see which frame rate you like (the default is 30, and it can't go any higher - than 60)." - CSD U3 Functions Add Change Background tmp_markdown_instruction: "# Change - the Background with the Score\r\n\r\nOnce you've caught 10 coins it's time - to celebrate. You should change the background to be something fun.\r\n\r\n\r\n\r\n# Do This\r\n\r\n* Use - an **if-statement** and two separate functions to draw your backgrounds\r\n* - Then go write your functions outside your draw loop. You get to decide what - a \"simple\" or \"crazy\" background are. Have fun with it!" - CSD U3 Functions Add Change Background_markdown_instruction: "# Change the - Background with the Score\r\n\r\nOnce you've caught 10 coins it's time to - celebrate. You should change the background to be something fun.\r\n\r\n\r\n\r\n# Do This\r\n\r\n* Use - an **if-statement** and two separate functions to draw your backgrounds\r\n* - Then go write your functions outside your draw loop. You get to decide what - a \"simple\" or \"crazy\" background are. Have fun with it!" - CSD U3 Functions Add IsTouching_markdown_instruction: "# Catch the Coin, Increase - the Score\r\n\r\nLet's make that score change now too to complete the game. - You'll need to be able to tell when the bunny is touching the coin and the - reset it.\r\n\r\n# Do This\r\n\r\n* Use an **if-statement** and the **isTouching** - block to increase the score when the bunny catches the coin\r\n* Make sure - you're **calling your function** to reset the coin once it's been caught.\r\n* - Play the game and **randomize the velocity of the coin** to a range that you - think is fun" - CSD U3 Functions Call Draw Loop_markdown_instruction: "# Calling Functions - in the Draw Loop\r\n\r\nYou can call a function inside the draw loop, just - as you would anywhere else in your code.\r\n\r\n# Do This\r\n\r\nA function - that will draw a background has been created for you. A sprite has been created - to move across the background.\r\n\r\n* **Call the function inside the draw - loop** so that the sprite appears on top of the background.\r\n* **Note:** - Don't create functions inside the draw loop. Make them at the bottom of your - code." - CSD U3 Functions Call Function_markdown_instruction: "# Calling Functions\r\n\r\nFunctions - let you build your own blocks and decide what code goes inside of them. This - is the command that lets you create a new function.\r\n\r\n![](https://images.code.org/2493f74065d4e642ca51429b8832e431-image-1474913839061.17.09 - PM.png)\r\n\r\nYou use or \"call\" your function like any other block by using - the name you gave it.\r\n\r\n![](https://images.code.org/61a6eb716e263b580ecd63fab0de7547-image-1474913770359.16.00 - PM.png)\r\n\r\nThe blocks to create and call functions can be found in the - \"Functions\" tab of the palette.\r\n\r\n![](https://images.code.org/a570a05be61297ee9f0d79a02df8db6e-image-1474922721897.44.36 - PM.png)\r\n\r\n# Do This\r\n\r\nThis program has already created 2 functions. - Only one of them is being called.\r\n\r\n* **Call the second function** to - reveal the full image. Use the function that is being called as a guide.\r\n* - **Tip:** Just like with all other blocks, spelling and capitalization is important - here" - CSD U3 Functions Create Function_markdown_instruction: "# Creating Functions - to Organize Code\r\n\r\nIn Game Lab all the action is happening in the draw - loop, but too much complex code makes it really confusing to read. To keep - your draw loop easy to read, begin by writing functions for larger chunks - of code. You can then go write them below. This is a really good example of - using **abstraction** to think about problems at a high level and worry about - details later.\r\n\r\n\r\n\r\n# Do This\r\n\r\nThis program - should draw a daytime scene or a nighttime scene, depending on the location - of the mouse. The draw loop describes what needs to happen but one of the - functions hasn't been written yet.\r\n\r\n* **Write the `drawNight` function** - which has been created but is empty\r\n* Hint: Look at the picture to the - right for how your night image should look. Can you use the `drawDay` function - to help you at all?" - CSD U3 Functions Improve Side Scroller_markdown_instruction: "# Finish Your - Side Scroller\r\n\r\nTime to use functions to finish off you side-scroller!\r\n\r\n# - Do This\r\n\r\n* Change the background of your game depending on the score. - Use functions to move the code for your background out of your draw loop\r\n* - Use functions to make sure you're not repeating code when you reset your - obstacle\r\n\r\n_Challenge: Add another sprite to your game and define how - it will interact with your main character. It might be another obstacle to - avoid or some kind of goal to collect_" - CSD U3 Functions isTouching_markdown_instruction: "# Making Changes to Functions\r\n\r\nA - nice benefit of using functions to remove repeated code is that you can now - easily make changes to multiple places in your code. Just change how you create - the functions, and your program will now use the new code everywhere your - function is called.\r\n\r\n# Do This\r\n\r\nMake changes to the `setFlyman` - function so that he starts at a random Y location between 0 and 400, and moves - at a random speed every time he restarts." - CSD U3 Functions Order Functions_markdown_instruction: "# Reordering Code\r\n\r\nPlacing - code inside functions makes it easy to read and make changes to. Good names - for functions indicate what your program is doing to a reader. You can call - your functions in a different order to quickly make significant changes to - how your program runs.\r\n\r\n# Do This\r\n\r\nThis program has already created - 4 functions that draw parts of a scene. Unfortunately it's not coming out - right.\r\n\r\n* **Read the of the 4 functions** to know what they do\r\n* - **Call the functions** in an order that draws the scene in the way that looks - best to you" - CSD U3 Functions Prediction Order of Create Call_markdown_instruction: "# When - Can Your Define Functions?\r\n\r\nSo far you've only seen functions created - at the bottom of your code. What do you think happens if we create the function - before we call it?\r\n\r\n# Do This\r\n\r\n" - CSD U3 Functions Randomize Sprite_markdown_instruction: "# Making Changes to - Functions\r\n\r\nA nice benefit of using functions to remove repeated code - is that you can now easily make changes to multiple places in your code. Just - change how you create the functions, and your program will now use the new - code everywhere your function is called.\r\n\r\n# Do This\r\n\r\nMake changes - to the `setFlyman` function so that he starts at a random Y location between - 0 and 400, and moves at a random velocity every time he is reset." - CSD U3 Functions Reset Sprite_markdown_instruction: "# Calling Functions Multiple - Times\r\n\r\nYou'll often want to use the same code at many places in your - program. Once you've created a function you can call it as many times as - you like.\r\n\r\n# Do This\r\n\r\nThis code creates a sprite that moves across - the screen once. How can you make it go back across the screen.\r\n\r\n* **Note:** - The function is already called once at the beginning of your program\r\n* - Read the condition of the **if-statement** inside the draw loop. Why do you - think it's there?\r\n* Use this if-statement and the function written for - you to make the sprite move across the screen multiple times." - CSD U3 Functions Template Flyman_markdown_instruction: "# Calling Functions - Multiple Times\r\n\r\nOften times you'll want to use the same code at many - places in your program. Once you've created a function you can call it as - many times as you like.\r\n\r\n# Do This\r\n\r\nThis code creates a sprite - that moves across the screen once. How can you make it go back across the - screen.\r\n\r\n* Read the condition of the **if-statement** inside the draw - loop. Why do you think it's there?\r\n* Use this if-statement and the function - written for you to make the sprite move across the screen multiple times." - CSD U3 Functions Write Reset_markdown_instruction: "# Write Your Own Function\r\n\r\nTime - to practice writing functions of your own. This is a very simple game in which - coins fall from the sky and the bunny tries to catch them. All you need to - do is write the function that sets up the coin.\r\n\r\n# Do This\r\n\r\n* - **Read and run the code** that already exists to make sure you know how it - works\r\n* **Write the code for the `setCoin`** function to make the coin - fall from the sky.\r\n* You can go look at some of the previous levels if - you need help" - CSD U3 Functions Write Your Own_markdown_instruction: "# Write Your Own Function\r\n\r\nTry - writing your own function to add something to the scene!\r\n\r\n# Do This\r\n\r\nThis - is the same program you wrote in the last level.\r\n\r\n* **Create and call** - a function that adds something to the scene. No need to get too complex, but - make sure you get some practice writing a function\r\n* **Share your code** - with a neighbor. Do they think your function's name clearly describes what - it does? Make changes if you need to." - CSD U3 game animations_markdown_instruction: "# Create your Animations\r\n\r\nNext - you will create your animations in the animation tab. Don't forget to make - multiple animations if you want your sprite to change appearance according - to how it's moving.\r\n" - CSD U3 game backgrounds_markdown_instruction: "# Create your Backgrounds\r\n\r\nNext, - you'll create all of the background functions that you need for your game. Some - games only have one background, and others have more than one that's chosen - according to user score or another aspect of gameplay. You'll need to create - a function for each separate background in your game. You'll write the code - to choose the correct background in the next level.\r\n\r\n* [Show me the - block to create a new function](#triggercallout=callout1)\r\n* [Show me the - area in the code to put my function](#triggercallout=callout2)\r\n\r\nAfter - you create your functions, test them by calling them inside the draw loop, - one background per test.\r\n\r\n* [show me the block to call my function](#triggercallout=callout3)" - CSD U3 game choose background_markdown_instruction: "# Choose your Backgrounds\r\n\r\nNow - that you have the backgrounds that you need, you'll write the code to choose - the correct background. You've seen this done in [Stage 15 Level 11](/s/csd3/stage/15/puzzle/11).\r\n\r\nAfter - you've written the code, test it by changing the starting value of your variables - and making sure the correct background shows up.\r\n" - CSD U3 game create sprites_markdown_instruction: "# Create your Sprites\r\n\r\nNext - you will create your sprites and give them starting properties in the \"Create - Sprites\" area of your code. For each sprite your should:\r\n\r\n* Create - the sprite in the correct place on the screen\r\n* Set its animation (or color - and size)\r\n* Set its velocity and rotation speed, if needed\r\n* Set its - collider and bounciness, if needed\r\n\r\nAfter you create each sprite, test - it before making the next one. If your sprite starts off screen, first place - it on the screen to test it, them move it back off screen once you know that - it looks right.\r\n\r\nIf your sprites position will need to be reset later - in your game, it's a good idea to make a function that sets the position - of this sprite that you can use again later.\r\n" - CSD U3 game display boards_markdown_instruction: "# Display Boards\r\n\r\nNow - that your backgrounds are working, you can add your display boards. Most - games have a score board, but you might also want to display information about - player level or lives remaining. Look at [Stage 12 Puzzle 9](/s/csd3/stage/12/puzzle/9) - for an example of how to make a scoreboard.\r\n\r\nFor each display board:\r\n* - Create a function to display the information\r\n* Call the function in the - draw loop\r\n\r\nBe sure to test your boards by changing the starting value - of your variables and making sure the board also changes when you run the - code.\r\n" - CSD U3 game interactions_markdown_instruction: "# Sprite Interactions\r\n\r\nThe - last step is to create the functions that make your sprites interact in the - right ways. You'll need a function for each type of sprite interaction. - You can use the `collectItems` in [Stage 17 Puzzle 17](/s/csd3/stage/17/puzzle/17) - and `displaceEnemies` in [Stage 16 Puzzle 15](/s/csd3/stage/16/puzzle/15) - as examples.\r\n\r\nFor each interaction:\r\n* Create a function in the functions - area of your code\r\n* Call the function inside the draw loop\r\n\r\nAfter - you make each function, run the code to test it before making another.\r\n" - CSD U3 game sprite movement_markdown_instruction: "# Sprite Movement Functions\r\n\r\nNow - you'll make the functions that make the sprite move in different ways as - the game is played. Some examples of functions that you've written are `loopPlatforms` - in [Stage 17 Puzzle 9](/s/csd3/stage/17/puzzle/9) and `playerFall` in [Stage - 17 Puzzle 14](/s/csd3/stage/17/puzzle/14).\r\n\r\nFor each movement:\r\n* - Create a function that will make the sprite move in that way\r\n* Call the - function inside the draw loop\r\n" - CSD U3 game user controls_markdown_instruction: "# User Controls\r\n\r\nNext, - you'll want to make sure your user controls are working. Create a function - that makes your sprites respond to user controls as defined in your project - guide. You can use the function in in [Stage 16 Puzzle 13](/s/csd3/stage/16/puzzle/13) - as an example.\r\n" - CSD U3 game variables_markdown_instruction: "# Create your Variables\r\n\r\nFirst, - you'll need to create all of your variables and put them in the variables - area of your code.\r\n* [Show me the block](#triggercallout=callout1)\r\n* - [Show me the area in the code](#triggercallout=callout2)\r\n\r\nDon't forget, - each variable needs a label (name) and a starting value. You can change the - value of the variable later in your code." - CSD U3 If Else_markdown_instruction: "# When to Provide a Fallback\r\n\r\nThe - else clause is useful as a fallback to the main condition that you're checking - - that is, if you _care_ what happens when your primary condition is `false`, - you should provide an else clause to take care of it.\r\n\r\n\r\n\r\n# Do This\r\nClick \"Run\" to see the swarm - of bees created for you and a flower on the left side of the screen. Make - the swarm of bees **appear when the mouse is near the flower** (on the left - side of the screen) and **disappear when the mouse is away from the flower** - (on the right side of the screen). Look at the example on the right.\r\n\r\n* - Add an `if else` statement after you update the position of the bees.\r\n* - In the input of the if use a boolean to check if the x position of the mouse - is on the side of the screen with the flower.\r\n* Set the `visible` property - of each bee inside both the if and else statements appropriately to make the - bees only show near the flower." - CSD U3 Interactive Card Background_markdown_instruction: "# Laying Out Your - Background\r\nBefore beginning this project, you should have already completed - the Interactive Card Planning activity, and you'll want to have that paper - with you as you develop your program. Preparation is one of the **most important** - elements of successfully creating a program!\r\n\r\n# Do This\r\nRefer to - your planning activity sheet to help you lay out the shapes that will become - the background to your card.\r\n\r\n* First, figure out what the lowest layer - in your image is (this should use the `background()` block) and add it to - the very top of the `draw()` loop\r\n* Next, layer each additional drawing - block in the order you want them to appear in the stack\r\n* Finally, add - a comment to the top of this section of code to describe what it does, and - if you have any particularly complicated chunks of code within (such as code - to draw a tree or a house), add a descriptive comment to that as well\r\n\r\n**Challenge:** - Can you use variables or `randomNumber()` to add some subtle animation to - your background layer?" - CSD U3 Interactive Card Exemplar_markdown_instruction: "# Example Project\r\n\r\nRun - the program a few times and answer the following questions:\r\n\r\n1) Which - elements appear to use drawing commands?\r\n\r\n2) Which elements appear to - be Sprites?\r\n\r\n3) For each Sprite, which properties are being updated?\r\n\r\n4) - Where do you see conditionals being used?\r\n\r\n5) Are there elements that - you don’t understand?" - CSD U3 Interactive Card Final_markdown_instruction: "# Finishing Touches\r\nNow's - your chance to put some finishing touches on your card. We've included some - new blocks that you haven't seen before, so take some time to look around - and try out some new blocks.\r\n\r\n# Do This\r\nConsider adding any of the - following to finish up your card:\r\n\r\n* Text (add it after the `drawSprites()` - block if you want it on top of everything)\r\n* Additional images for your - Sprites\r\n* Subtle animation in the background\r\n* Sound effects (can you - figure out how to do this?)\r\n* More ways for a user to interact with your - card" - CSD U3 Interactive Card Other Conditionals_markdown_instruction: "# Other Conditionals\r\nThe - _surprise_ in your card comes from conditionals that don't directly respond - to user input, but to some other element of your card. This could be triggered - by a variable that gets updated as the user interacts with your card, or a - Sprite moving into a certain part of the screen.\r\n\r\n# Do This\r\nFor each - of the remaining items on your interactions table:\r\n\r\n* Add an `if` block - (or `if-else` block if you need a fallback action) inside the `draw()` loop\r\n* - Add the appropriate boolean comparison block to the condition (eg. `<`, `>`, - or `==`)\r\n* Add the necessary actions inside the `if` block\r\n\r\n**Challenge:** - Can you create more sophisticated conditionals by nesting them or using compound - booleans?" - CSD U3 Interactive Card Sprites_markdown_instruction: "# Adding Sprites\r\nNow - that you have the more static elements of your card layed out, it's time - to add the Sprites. Your Sprites should provide the primary animations and - interactions for your card - so feel free to get creative here and have fun.\r\n\r\n# - Do This\r\nCheck out the Sprites table on the back of your planning sheet. - For each Sprite in your table:\r\n\r\n* Initialize the Sprite at the top of - your program with `createSprite()`.\r\n* Find or create the image(s) for the - Sprite and set it with `setAnimation()`.\r\n* Inside the `draw()` loop update - any Sprite properties that we will be constantly animating (we'll deal with - conditionals in a minute)." - CSD U3 Interactive Card User Input_markdown_instruction: "# User Input\r\nYou've - got a background, you've got Sprites, now it's time to give your user something - to do!\r\n\r\n# Do This\r\nOn the interactions table from your planning sheet, - find all of the interactions that rely on user input (key presses and mouse - movements). For each of those interactions:\r\n\r\n* Add an `if` block (or - `if-else` block if you need a fallback action) inside the `draw()` loop.\r\n* - Add the appropriate input block for your condition (such as `keyDown()` or - `mouseDown()`).\r\n* Add the necessary actions inside the `if` block.\r\n\r\n**Challenge:** - Can you create more sophisticated conditionals by nesting them or using compound - booleans?" - CSD U3 Keypress Boolean Predict_markdown_instruction: "# Make a Prediction: - keyDown()\r\nThe `keyDown()` block is the first of a new set of blocks that - will let us get input from the user. This is the first step on our road to - actually making games! See if you can figure out how the `keyDown()` block - works.\r\n\r\nWhat do you think will happen when you run the program and press - the \"up\" arrow? Write your prediction below and then run the program to - see if your prediction was accurate." - CSD U3 Keypress Boolean_markdown_instruction: "# keyDown()\r\nThe `keyDown()` - block is the first of a new set of blocks that will let us get input from - the user. This is the first step on our road to actually making games! See - if you can figure out how the `keyDown()` block works.\r\n\r\n# Do This\r\n\r\nYou - will **not write any code** in this program.\r\n\r\n* Read the program and - see if you can guess what will happen.\r\n* Run the program.\r\n* While the - program is running, press the up arrow on your keyboard.\r\n* Observe what - happens." - CSD U3 Keypress Watchers Predict_markdown_instruction: "# Make a Prediction: - User Input\r\n\r\nSo far you've used `keyDown` as a way to let users control - your programs, but that's just one of many ways to take input. In fact, just - one of many ways _to detect keypresses_! Depending on how you want to react - to a keypress, there are a few other blocks you might want to use.\r\n\r\nRead - the program and predict below what will happen when you press each of the - up, down, left, and right arrows.\r\n\r\nAfter making your prediction, run - the code and write down or share with your neighbor your observations.\r\n\r\n* - What seems to be the difference between `keyDown()`, `keyWentDown()`, and - `keyWentUp()`?\r\n* What do you think the exclamation mark (`!`) on line 10 - does?\r\n* How might you use the different keypress blocks in a game?" - CSD U3 Keypress Watchers_markdown_instruction: "# More Ways to Get User Input\r\n\r\nSo - far you've used `keyDown` as a way to let users control your programs, but - that's just one of many ways to take input. In fact, just one of many ways - _to detect keypresses_! Depending on how you want to react to a keypress, - there are a few other blocks you might want to use.\r\n\r\n# Do This\r\n\r\nYou - will **not write any code** in this program.\r\n\r\n* Read the program and - see if you can guess what will happen.\r\n* While the program is running, - press the arrow keys and observe how the screen responds.\r\n* Write down - or share with your neighbor your observations.\r\n\t* What seems to be the - difference between `keyDown()`, `keyWentDown()`, and `keyWentUp()`?\r\n * - What do you think the exclamation mark (`!`) on line 10 does?\r\n * How - might you use the different keypress blocks in a game?" - CSD U3 platform background1_markdown_instruction: "# Background\r\n\r\nThe - first thing that you will create for your game is the background. The sample - game had two different backgrounds that were chosen according to the user's - score. The first background has already been created for you. Look at the - `background1` function in the code below to see how it works. [Show me where](#triggercallout=code_triggered1)\r\n\r\nIn - order for the background function to do something, you have to call it inside - the draw loop. [Show me where](#triggercallout=code_triggered2)\r\n\r\nThere - is also an empty function named `background2`. [Show me where](#triggercallout=code_triggered3) You - will need to fill that function with new code to make a different background, - then test the code by calling the function inside the draw loop.\r\n\r\n# - Do this\r\n\r\n* Read the code for `background1`\r\n* Fill the `background2` - function with new code for a second background.\r\n* Test your `background2` - function by calling it inside the draw loop.\r\n\r\n_Hint: It's much easier - to copy, paste, and make small changes to your code in text mode._" - CSD U3 platform background2_markdown_instruction: "# Choosing your Background\r\n\r\nNow - that you have your score variable, you can use it to choose the right background - for your game. You can see an example of changing your background according - to your score in [Stage 15 Level 11](/s/csd3/stage/15/puzzle/11)\r\n\r\n# - Do This\r\n\r\n\r\n* Inside the draw loop, use an `if` statement and your - two background functions to draw your background according to your score level.\r\n* - Test your code by changing the start score to 100, then running to code to - see whether the background changes.\r\n\r\n_Challenge: If you have a third - background, you can click the plus sign at the bottom of the `if` block. Another - space will appear for your third background function, as well as a place to - check the score again._\r\n" - CSD U3 platform challenge_markdown_instruction: "# Improve Your Game\r\n\r\nImprove - your game by adding in two or more of the features you saw in the last two - examples. You can use the list below to help you.\r\n\r\n* Choose new animations - for your player, platform, and items.\r\n* Prevent your player from going - off the side of the screen.\r\n* Add a different type of item for the player - to collect or avoid.\r\n* Add a variable that keeps track of how many lives - the player has, and end the game if the player runs out.\r\n* Make your player's - animation change direction when the player changes direction.\r\n* Change - the player to only jump when it is on a platform.\r\n* Add another background - and make it appear when the score gets even higher.\r\n* Make your items interact - with the platforms in some way." - CSD U3 platform challenge1_markdown_instruction: "# Collect Items\r\n\r\nLast, - you'll want your player to collect the items falling from the top of the - screen.\r\n\r\n# Do This\r\n\r\n* Create a `collectItems` function and add - it to the \"functions\" area of your code.\r\n* Use the `if` and `isTouching` - blocks to change the x and y position of the items when the player touches - them. You can look at the `loopItem` function for clues in how to reset the - item position.\r\n* Inside your `if` statement, add a counter pattern that - will increase the score every time the player touches an item. Look at [Stage - 12 Puzzle 8](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) - for an example.\r\n* Call the function inside the draw loop, in the \"update - sprites\" area of your code.\r\n* Run the code to test your function." - CSD U3 platform draw loop_markdown_instruction: "# Draw Loop\r\n\r\nOnce you - have functions that can draw what you want, you can put them inside a draw - loop.\r\n\r\n# Do This\r\n\r\n* Add the `function draw() {}` (draw loop) block - into the workspace.\r\n* Inside the draw loop, use an `if` block to choose - the correct background function to use [Remind me how](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/13/puzzle/10)\r\n* - After the if statement, use the function you wrote to display the current - information\r\n* Test your code by changing the starting value of your variables - and running it to see whether the correct information and background are drawn." - CSD U3 platform items_markdown_instruction: "# Create your Items\r\n\r\nNext, - you need to add in the items that fall from the top of the screen. In [Stage - 11 Puzzle 6](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/6), - you modeled falling using the counter pattern on `velocityY`. You can use - the same pattern to make your items fall from the sky. In our sample game, - our carrots rotated and bounced off the platforms, but you can choose to add - any other type of interaction that you like in the next level.\r\n\r\n# Do - This\r\n\r\n* Create an item sprite with the label and starting position that - you put on your worksheet.\r\n* Give the sprite the starting properties you - wrote on your worksheet.\r\n* Run the code to test your sprite.\r\n* Create - a function that checks whether the sprite is off the bottom of the screen, - and loops it back to the top of the screen if it is. (Look at [Stage 11 Bubble - 16](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/16) - to see an example of code that loops a sprite.)\r\n* Run the code to test - your sprite." - CSD U3 platform items1_markdown_instruction: "# Create an Item\r\n\r\n\r\n\r\nNext, you need to add the items that fall from - the top of the screen. These move just like the platforms, but faster. In - order to make the game more interesting, the items start at a random location - above the screen. For the sample game, the item's x position is a random - number between 50 and 350, and the y position is a random number between -30 - and -60.\r\n\r\n# Do This\r\n\r\n* Use the `createSprite` block to make an - item sprite in the \"create sprites\" section of your code.\r\n* Use the `randomNumber` - block inside your `createSprite` block to start the item at a random x and - y position.\r\n* Use `setAnimation` and `velocityY` to give your sprite the - correct image and make it fall from the top of the screen.\r\n* Run the code - to test your sprite." - CSD U3 platform items2_markdown_instruction: "# Loop your Item\r\n\r\n\r\nNow that your item is falling, you can add code - to loop it back to the top. This is similar to what you did for the platform - sprite, but the item sprite will loop back to a random x and y location when - it goes to the top of the screen.\r\n\r\n# Do This\r\n\r\n* Create a `loopItems` - function that uses an `if` block to check whether the item sprite is off the - bottom of the screen, then sends the item back to a random x and y position, - just as it did when you first created the sprite.\r\n* Call the function inside - the draw loop\r\n* Run the code to test your sprite." - CSD U3 platform items3_markdown_instruction: "# Make your Second Item\r\n\r\n\r\n\r\nNext, you'll copy and paste the code for your - first item to create a second item. Remember that this is a lot easier in - **text mode**, so be sure to try it out if you haven't already.\r\n\r\nYou'll - need to copy two parts of your code: the part at the beginning where you made - the item, and the part in your `loopItem` function, where you looped the item - back to the top of the screen.\r\n\r\n# Do This\r\n\r\n* Copy the code you - used to create the first item sprite (`createSprite`, `setAnimation`, and - `velocityY`), and paste it directly beneath the original code.\r\n* Change - the names of the sprite in the new lines. For example, if you named your - original sprite \"star\", you could name this one \"star2\".\r\n* Inside your - `loopItems` function, copy the if statement, then paste it directly underneath - the original code, inside the function.\r\n* Change the sprite name in the - new lines of code.\r\n* Run your code to test it.\r\n" - CSD U3 platform platform1_markdown_instruction: "# Create a Platform Sprite\r\n\r\n \r\n\r\nNow that you have your background and your - variables, it's time to create your sprites. Usually, it will be easiest - to start with the sprites that are part of the environment, such as your platforms. The - sample game had two platform sprites, but you'll make just one first, then - test it before copying and pasting the code to make the second.\r\n\r\n# Do - This\r\n\r\n* Look at your worksheet and choose a platform sprite to create.\r\n* - In the \"Create sprites\" area at the top of your code, create your new sprite - with the `createSprite` block, giving it the correct position and label (name). - ([Show me the block](#triggercallout=callout))\r\n* Use the `setAnimation` - and `velocityY` blocks to give your sprite the correct image and downward - velocity.\r\n* Test the sprite to make sure that it's moving in the correct - way. You might need to adjust its velocity.\r\n\r\n_Hint: The sprite will - go off the screen and not come back. You'll make it loop back around in - the next level._\r\n" - CSD U3 platform platform2_markdown_instruction: "# Loop the Platform Sprite\r\n\r\n\r\n\r\nRight now, your platform sprite moves down, - but it doesn't loop back up to the top of the screen. You can look at [Stage - 11 Bubble 12](/s/csd3/stage/11/puzzle/12) to see an example of a sprite looping - around a screen.\r\n\r\n# Do This\r\n\r\n* Use the `function` block to create - a `loopPlatforms` function at the bottom of your code.\r\n* Use the `if` block - inside the function to check whether the platform has gone off the bottom - of screen and, if it has, move it back to the top of the screen.\r\n* Call - the function inside the draw loop, in the \"update sprites\" area.\r\n* Run - the code to test your sprite.\r\n\r\n_Hint: What will platform.y be when the - sprite moves off the bottom of the screen? What should platform.y be when - you put it back at the top of the screen?_\r\n" - CSD U3 platform platform3_markdown_instruction: "# Make your Second Platform\r\n\r\n\r\n\r\nMaking a second platform will be easier than - making the first, because you can copy and paste a lot of the code, then make - a few small changes. This is a lot easier in *text mode*, so be sure to try - it out if you haven't already.\r\n\r\nYou'll need to copy two parts of your - code: the part at the beginning where you made the platform, and the part - in your `loopPlatforms` function, where you looped the platform back to the - top of the screen.\r\n\r\n# Do This\r\n\r\n* Copy the code you used to create - the first platform sprite (`createSprite`, `setAnimation`, and `velocityY`), - and paste it directly beneath the original code.\r\n* Change the names of - the sprite in the new lines. For example, if you named your original sprite - \"platform\", you could name this one \"platform2\".\r\n* Change the starting - position of your new platform sprite.\r\n* Inside your `loopPlatforms` function, - copy the if statement, then paste it directly underneath the original code, - inside the function.\r\n* Change the sprite name in the new lines of code.\r\n* - Run your code to test it.\r\n\r\n_Challenge: You can make your platforms appear - at random x positions when they loop back to the top of the screen._\r\n" - CSD U3 platform player1_markdown_instruction: "# Create your Player\r\n\r\n\r\n\r\nNow you can create your player sprite. Just - like the item sprites, the player sprite will fall from the top of the screen. Unlike - the items, your player sprite will get faster as it falls, just like real - falling objects. This is what allows it to jump up, and fall back down.\r\n\r\n# - Do This\r\n\r\n* Use the `createSprite` block to make a player sprite with - the label and starting position that you put on your worksheet.\r\n* Use `setAnimation` - to give it the correct image.\r\n* Create a `playerFall` function that makes - the sprite fall from the top of the screen. The code inside the function - should use `velocityY` in a counter pattern, just as when you made the falling - rock in [Stage 13 Puzzle 4](/s/csd3/stage/13/puzzle/4).\r\n* Call the `playerFall` - function inside the draw loop.\r\n* Run the code to test your sprite." - CSD U3 platform player2_markdown_instruction: "# User Controls\r\n\r\nNext, - you should add user controls so that you can move your player around. Your - player needs to move to the left when the left arrow key is pressed, to the - right when the right arrow key is pressed, and jump when the space bar is - pressed.\r\n\r\n# Do This\r\n\r\n* Create a new `controlPlayer` function in - the \"functions\" area of your code.\r\n* Inside the `controlPlayer` function, - use the `if`, `keyDown`, and `sprite.x` blocks to make your player move to - the left and right according to the arrow keys. Look at Stage 8 Puzzle 15 for examples.\r\n* Inside the `controlPlayer` - function, use the `if`, `keyDown`, and `velocityY` blocks to make your player - jump when the up arrow is pressed. Look at Stage 11 Puzzle 10 for an example.\r\n* Call the `controlPlayer` - function inside the draw loop.\r\n* Run the game and test your code.\r\n" - CSD U3 platform player2b_markdown_instruction: "# Add Reset\r\n\r\nNow that - your player is falling, you can add code to reset him when he gets to the - top.\r\n\r\n# Do This\r\n\r\n* Create a function that checks whether the player - sprite is off the bottom of the screen, and decreases the number of lives - by one if it is.\r\n* Use the function inside the draw loop.\r\n* Run the - code to test your function.\r\n* Once you have decreased the lives, you need - to check whether the player has run out. Add code to your function that checks - to see whether the player's lives equals 0. If they do equal zero, use the - `text` block to write \"GAME OVER\" in the middle of the screen. Otherwise, - reset the sprite to the top of the screen.\r\n" - CSD U3 platform player3_markdown_instruction: "# Player Interactions\r\n\r\nThe - last part of making your game is programming the player interactions with - the other sprites. First, your player needs to land on the platforms.\r\n\r\n# - Do This\r\n\r\n* Create a `playerLands` function and add it to the \"functions\" - area of your code.\r\n* Inside the function, use the `collide` block so that - your player can land on both the platforms.\r\n* Call the function inside - the draw loop.\r\n* Run the code to test your function.\r\n" - CSD U3 platform player4_markdown_instruction: "# Collect Items\r\n\r\nLast, - you'll want your player to collect the items falling from the top of the - screen.\r\n\r\n# Do This\r\n\r\n* Create a `collectItems` function and add - it to the \"functions\" area of your code.\r\n* Use the `if` and `isTouching` - blocks to change the x and y position of the items when the player touches - them. You can look at the `loopItem` function for clues in how to reset the - item position.\r\n* Inside your `if` statement, add a counter pattern that - will increase the score every time the player touches an item. Look at [Stage - 12 Puzzle 9](/s/csd3/stage/12/puzzle/9) for an example.\r\n* Call the function - inside the draw loop, in the \"update sprites\" area of your code.\r\n* Run - the code to test your function." - CSD U3 platform sample_markdown_instruction: "# Platform Jumper\r\n\r\nThe - game on the left is an example of a platform jumper. Press \"Run\" to play - it. You can make the bunny bump with the space bar, and move it to the left - and right with the arrow keys. You score by collecting carrots, and if you - score high enough, the background will change.\r\n\r\nYou have three lives, - so if you fall to the bottom of the screen three times, the game will be over.\r\n\r\nYou - already know how to use all the blocks you need to make a game just like this - one, and you'll be making your own platform jumper in this lesson." - CSD U3 platform sample1_markdown_instruction: "# Platform Jumper\r\n\r\nThe - game on the left is an example of a platform jumper. Press \"Run\" to play - it. You can make the alien jump with the up arrow, and move it to the left - and right with the arrow keys. You score by collecting stars, and if you - score high enough, the background will change.\r\n\r\nYou already know how - to use all the blocks you need to make a game just like this one, and you'll - be making your own platform jumper in this lesson.\r\n\r\nYou can see other - examples of platform jumpers in the next two levels." - CSD U3 platform sample2_markdown_instruction: "# Plane Jumper\r\n\r\nHere's - another example of a platform jumper, but it has a few more features. You - can use it to get ideas to improve your own game. For example, there is a - coin sprite that gives the player an extra life.\r\n\r\nChoose one or more - of the following changes and add them to your game.\r\n* Choose new animations - for your player, platform, and items.\r\n* Make it impossible for your player - to go off the left or right of the screen.\r\n* Add a different type of item - for the player to collect or avoid.\r\n* Add a variable that keeps track of - how many lives the player has, and end the game if the player runs out.\r\n\r\n" - CSD U3 platform sample3_markdown_instruction: "# Bunny Jumper\r\n\r\nHere's - another example of a jumper. In this one, the items get faster when they - fall, and bounce off the platforms.\r\n\r\nChoose one or more of the following - changes and add them to your game.\r\n* Make your player's animation change - direction when the player changes direction.\r\n* Add another background and - make it appear when the score gets even higher.\r\n* Make your items interact - with the platforms in some way.\r\n\r\n" - CSD U3 platform scoreboard_markdown_instruction: "# Make the Scoreboard\r\n\r\n\r\n\r\nYou'll also need a scoreboard so the player - can keep track of the score. There's already a `showScore` function written, - but it only shows the text \"Score\" and not the actual score. ([Show me where](#triggercallout=code_triggered)) You - can see an example of a working scoreboard in [Stage 12 Puzzle 9](/s/csd3/stage/12/puzzle/9).\r\n\r\n# - Do this\r\n\r\n* Read the code in the `showScore` function.\r\n* Call the - function inside the draw loop, right after you draw the backgrounds.\r\n* - Use the `text` block to display the score at the top of the screen." - CSD U3 platform variable1_markdown_instruction: "# Score Variable\r\n\r\nNow - that you've created your backgrounds, you'll need to choose when each background - is drawn. For that, you'll need a score variable to hold information about - your player's score.\r\n\r\nYou should always give your variables a starting - value at the very beginning of the program. That way, they are available - for any code that comes after.\r\n\r\n# Do This\r\n\r\n* Create a score variable - at the beginning of your game program. [Show me the block](#triggercallout=callout)\r\n* - Set the score equal to 0." - CSD U3 platform variables_markdown_instruction: "# Variables and Display\r\n\r\nIn - our sample game, we kept track of the score and the number of lives left, - then displayed them at the top of the screen. For your game, you'll need - to create a variable for each piece of information you want to keep track - of during the game. Once you have your variables, you can create a function - to display information at the top of the screen for the player.\r\n\r\n# Do - This\r\n\r\n* Create the variables that you listed on your planning sheet - and give them starting values.\r\n* Use the `text` block to display information - about the variables on the screen. You can use `textSize` and `fill` to change - the way the text looks.\r\n* Make a new function and put the code that displays - the information inside of it.\r\n\r\n_Hint: You can look at [Stage 12 Bubble - 8](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) to - see a working scoreboard. Scroll down in the code until you see the comment - \"draw score\"_" - CSD U3 Property Conditional Multi_markdown_instruction: "# Get Creative\r\n\r\nNow - that you've seen how we can use conditionals both to take input from the - keyboard and to react to changes is sprite properties, it's time to come - up with a cool use of conditionals on your own. You'll want to brainstorm - with a partner to come up with the sprite properties you want to change, and - the conditions that will decide when they get changed.\r\n\r\n# Do This\r\n- - Decide which sprite properties will be controlled by conditionals eg:\r\n\t- - Position (x and y)\r\n - Rotation\r\n - Color\r\n - Size (width, - height, or scale)\r\n - etc\r\n- For each sprite property, decide on a - conditional that will impact it:\r\n\t- Keyboard input (`keyDown()`, `keyWentDown()`, - etc)\r\n - Sprite position\r\n - Mouse position\r\n - Other variables - or properties\r\n- One at a time, write and test each conditional\r\n\r\n**Challenge** - - Can you make a single conditional impact multiple properties?\r\n" - CSD U3 Property Conditional_markdown_instruction: "# Doing More With Conditionals\r\nUsing - conditionals to figure out which key was pressed is pretty useful, but we - can also use conditionals with any value in our program, including sprite - properties!\r\n\r\nWith your neighbor, discuss the kinds of boolean questions - you could use with the following sprite properties:\r\n\r\n- `sprite.x` and - `sprite.y`\r\n- `sprite.width` and `sprite.height`\r\n- `sprite.shapeColor`\r\n- - `sprite.visibility`\r\n\r\n# Do This\r\nHere's a program similar to one you - just made, it uses `keyDown()` to move the sprite around the screen when you - click the arrow keys. You're going to add some additional conditionals to - this program to do the following:\r\n\r\n- Change the color of the sprite - if it goes into the top quarter of the screen\r\n- Rotate the sprite if it - goes into the left quarter of the screen\r\n- Make the sprite invisible if - it goes into the bottom quarter of the screen\r\n- Make the sprite larger - if it goes into the right quarter of the screen\r\n\r\n_BTW, if you're looking - for the `keyDown()` block, you'll notice that it's now in the 'Game Lab' - category._ \r\n" - CSD U3 Random Animation_markdown_instruction: "\r\n# Animation\r\n\r\nLook at this face - made from some simple shapes. We put it in the `draw()` loop so that we could - animate it, but it doesn't seem to be doing anything. We want the mouth to - move like the image on the right, so that it looks like it's talking\r\n\r\n# - Do This\r\n* Find the code that draws the mouth and replace the width and - height with calls to `randomNumber()`\r\n* Experiment with different ranges - of random numbers to get the kind of animation you're looking for.\r\n\r\nHint: - Don't worry if it's going too fast. You'll slow it down on the next level." - CSD U3 Random Choice_markdown_instruction: "# Making Random Choices\r\n\r\nYou - probably noticed that the code from the last puzzle did a few things.\r\n* - Always produced a whole number (also called an **integer**).\r\n* The lowest - number that could be produced was 0, which is the first **input** we passed - to the `randomNumber` block.\r\n* The highest number that could be produced - was 10, which is the second **input** to the block.\r\n\r\nLet's create a - program that can randomly make decisions for us. We'll use a **binary** representation - where `0` means `false` and `1` means `true`.\r\n\r\n# Do This\r\n\r\n* Write - a program that randomly writes out either 0 or 1 using `console.log()`.\r\n* - Have your partner ask some true/false or yes/no questions and use your program - to randomly answer." - CSD U3 Random Color_markdown_instruction: "# Randomized Colors\r\n\r\nCould - you use `randomNumber()` to pick random colors as well? Back in unit 2 you - learned that colors can be composed of Red, Green, and Blue channel values - - each of which is represented by a number value. What's the maximum and - minimum that those channels can be set to?\r\n\r\n# Do This\r\n\r\nUsing the - `color()` function, set the `fill` or `stroke` of your shape to a random color.\r\n\r\n# - Challenge\r\n\r\nCan you generate random colors that are limited to a narrow - range of colors, such as a random shade or purple, or a random shade of teal?" - CSD U3 Random FreeResponse_markdown_instruction: "# Randomness\r\n\r\nSometimes - you will want your programs to run a bit differently every time, and a simple - way to do this is to generate **random numbers**. The `randomNumber()` block - allows you to write programs with a little bit of randomization in them, which - is also helpful when you you want images that look more natural - for example - drawing a lots of stars in the sky in random positions, instead of selecting - the x and y for each star.\r\n\r\n# console.log() \r\nThe `console.log()` - block is a useful tool for testing and debugging - anything that you place - into `console.log()` block's input will be printed to the debug console, - which you can find below your code.\r\n\r\n# Do This\r\n\r\nYou will **not - write any code** in this level.\r\n\r\n* Read the program provided\r\n* **Predict** - what the provided program will do and write your prediction in the box below. - **Be specific!**\r\n* Run the program several times and **record** the results.\r\n* - **Discuss the results with a neighbor**. Was your prediction correct?" - CSD U3 Random Intro_markdown_instruction: "# Randomness\r\n\r\nSometimes you - will want your programs to run a bit differently every time, and a simple - way to do this is to generate **random numbers**. The `randomNumber()` block - allows you to write programs with a little bit of randomization in them, which - is also helpful when you you want images that look more natural - for example - drawing a lots of stars in the sky in random positions, instead of selecting - the x and y for each star.\r\n\r\n# console.log() \r\nThe `console.log()` - block is a useful tool for testing and debugging - anything that you place - into `console.log()` block's input will be printed to the debug console, - which you can find below your code.\r\n\r\n# Do This\r\n\r\nYou will **not - write any code** in this level.\r\n\r\n* Read the program provided\r\n* **Predict** - what the provided program will do. **Be specific!**\r\n* Run the program several - times and **record** the results.\r\n* **Discuss the results with a neighbor**. - Was your prediction correct?" - CSD U3 Random Min Max_markdown_instruction: "# Changing the minimum\r\n\r\nSo - far we've only generated numbers from 0 up to some other value, but what - if we wanted a different minimum? For example, if we want to use `randomNumber()` - to create circles that have a radius somewhere between 50 and 100 pixels, - how might we do it?\r\n\r\nThe first input (also called an **argument**) of - the `randomNumber()` block defines the lowest number that will be randomly - generated. In the previous levels we always used 0, but you could use any - integer as the lower bound (even negative numbers!)\r\n\r\n# Do This\r\n\r\nUsing - `console.log()` write a program that randomly returns a number in a range - you define. Try coming up with an interesting range of numbers for your program, - for example:\r\n* Randomly generate a month number\r\n* Randomly generate - a temperature below boiling but above freezing\r\n* Randomly generate a year - you were alive in\r\n\r\nCan you come up with a range that includes negative - numbers? What about both positive and negative ones?" - CSD U3 Random Width Height_markdown_instruction: "# Randomized Shapes\r\n\r\nLet's - see how we can use randomization in our drawings. Each of the inputs from - the shape blocks you've seen can be replaced with calls to `randomNumber()`. - Try drawing some images that are slightly randomized each time. You might - try changing the position randomly by using `randomNumber()` in place of the - x or y inputs, or you could change the size of the shape itself by randomizing - the length or width inputs.\r\n\r\n# Do This\r\n\r\nPick a shape command (`ellipse()`, - `rect()` or `regularPolygon()`) and use `randomNumber()` in place of one or - more of the inputs. Make sure you run it a few times so you can see the effect - of randomization.\r\n\r\n_Notice that the `console.log()` block is now in - the Variables drawer and the `randomNumber()` block is in the Math drawer._" - CSD U3 Simple Drawing - Animation 2_markdown_instruction: "# Rays of Sunshine\r\n\r\nLet's - add a little bit more animation to the scene. The `line()` block takes in - two pairs of x,y coordinates and draws a line between them.\r\n\r\nDraw 5 - yellow lines that all start from the center of the sun and move out to a random - point around the top half.\r\n\r\n# Do This\r\n\r\n* Create 5 lines, each - of which should start at the center of the sun and go out to a random point. - You can pick your own random ranges, but you might try:\r\n * `randomNumber(115,135), - randomNumber(10,20)`\r\n * `randomNumber(145,165), randomNumber(20,30)`\r\n * - `randomNumber(85, 105), randomNumber(20,30)`\r\n * `randomNumber(165,185), - randomNumber(40,50)`\r\n * `randomNumber(65, 85 ), randomNumber(40,50)`\r\n* - Don't forget to set the `strokeColor()` before you draw your lines and to - reset to `noStroke()` afterwards." - CSD U3 Simple Drawing - Animation_markdown_instruction: "# Clouds in the Wind\r\n\r\nNow - that our image is in the draw loop, let's make use of that feature to add - a little bit of animation. We're going to make our clouds look as though - they're shifting in the breeze by randomizing their position and size a little - bit each time the `draw()` loop is run.\r\n\r\n# Do This\r\n\r\n* Replace - the x input of each cloud ellipse with a call to `randomNumber`\r\n * `randomNumber` - should vary the x position by + or - 5 pixels. So if your x position was 50, - replace it with `randomNumber(45,55)`\r\n* Replace the width input of each - cloud ellipse with a call to `randomNumber`\r\n * `randomNumber` should vary - the width by + 5 pixels. So if your width was 50, replace it with `randomNumber(50,55)`\r\n* - Change the **frame rate** to something slower (try 5 or 10 FPS)" - CSD U3 Simple Drawing - Background_markdown_instruction: "# Draw()ing your - street image\r\n\r\nHere's the street image you started working on in the - last lesson. We're going to get it ready to add some animation.\r\n\r\nFor - the animation to work you'll need to wrap all of your current code in the - `draw()` loop, adding a call to `background()` at the top of the loop.\r\n\r\n# - Do This\r\n\r\n* Add a `draw()` block and move all of your current code inside - it\r\n* Replace the rectangle that draws your background with a call to the - `background()` block" - CSD U3 Simple Drawing - Personal Animation_markdown_instruction: "# Your Own - Animation\r\n\r\nHere's the drawing you planned and started in the last lesson - - let's animate it!\r\n\r\n# Do This\r\n\r\n* Move all of your code into - a `draw()` loop\r\n* Use `randomNumber()` in the inputs of some of your shapes\r\n* - Set the speed of your animation using the `Game.frameRate` block\r\n" - CSD U3 Sprites animating with sprites_markdown_instruction: "# Animating with - Sprites\r\n\r\n**Sprite properties can be used in the counter pattern too**.\r\n\r\n\t// - Counter Pattern with variables\r\n x = x + 1;\r\n \r\n // Counter - Pattern with sprite properties\r\n mySprite.x = mySprite.x + 1\r\n\r\nIf - you call ![](https://images.code.org/16810be94cc61ea828e0acce5b642468-image-1466009389700.19.16 - AM.png) inside the draw loop then you can use this counter pattern to animate - sprites as well.\r\n\r\n# Do This\r\n\r\n\r\n\r\n\r\nThis program creates 2 sprites - and then animates one of them to move across the screen using the counter - pattern.\r\n\r\n* Inside the draw loop **add code that uses the counter pattern - to make the orange sprite move across the screen**.\r\n* Hint: How can you - use the counter pattern here? Look at the code for the redSprite if you need - help.\r\n* Your animation should look like the example at the right." - CSD U3 Sprites createSprite params_markdown_instruction: "# createSprite() - with parameters\r\n\r\nWhen you create a variable you often want to set its - value right away. That's why the command `var x =` exists, to let you perform - both commands at once.\r\n\r\nIt's very common to want to set the x and y - of your sprite in a single command. To help, the createSprite command accepts - 2 parameters or values that set these properties right away. Instead of writing - \r\n\r\n \tvar mySprite = createSprite();\r\n \tmySprite.x = 100;\r\n \tmySprite.y - = 200; \r\n\r\nyou can just write the command\r\n\r\n\tvar mySprite = createSprite(100, - 200);\r\n\r\nThis code does exactly the same thing, but it's much easier - to write. \r\n\r\n# Do This\r\n\r\n\r\n\r\nThis is your code from - earlier. Note that a new, larger version of `createSprite` is now available.\r\n\r\n\r\n\r\n* Update your code to use this new - version of `createSprite`\r\n* Your program should only be **9 total lines**\r\n* - You're still trying to make your image look as close as possible to the image - at the right." - CSD U3 Sprites debug background_markdown_instruction: "# Debug: Ordering in - the Draw Loop\r\n\r\nAs you start animating with sprites you'll have more - complex code in your draw loop. It's important to stay organized if you don't - want your code to be confusing.\r\n\r\nHere's the way you should structure - your draw loop when animating with sprites:\r\n\r\n\tfunction draw(){\r\n \t// - Draw Background\r\n \r\n \t// Update Sprite Properties\r\n \r\n // - Draw Animations\r\n \r\n }\r\n \r\nThis strategy will work for most - cases but not all.\r\n\r\n# Do This\r\n\r\n\r\n\r\nThis program is supposed to animate - a sprite moving across the screen, but **there's a problem that's preventing - it from running properly**.\r\n\r\n* **Run the program** to see how it works.\r\n* - **Debug the program** to find the error that prevents it from working properly.\r\n* - Your animation should look like the example at the right.\r\n* Hint: Order - matters a lot when drawing.\r\n" - CSD U3 Sprites debug dot notation_markdown_instruction: "# Debugging: Dot Notation\r\n\r\n**Dot - Notation:** Sprites all have the same properties, which is really useful. - It means that once you know the label of a sprite, you know the labels of - its properties. All you need to do is combine the name of your sprite and - the name of your property with a period or \"dot\" in between. This is also - referred to as **dot notation**. For example, a sprite called `bob` will have - the properties `bob.x`, `bob.y`, and so on.\r\n\r\nWhen using dot notation - it's important that **you spell the label of your sprite and your property - correctly.** Just like with variables, keep an eye out for:\r\n\r\nRule | - Example\r\n---|---\r\nCorrect capitalization|`sprite.x` is not `sprite.X`\r\nCorrect - spelling|`sprite.y` is not `sprte.y`\r\nWhether the label you're trying to - use actually exists|`sprite.xlocation` does not exist\r\nThe sprite's label - comes before the property's label|`x.sprite` will not work\r\n\r\n# Do This\r\n\r\n\r\n\r\nThis program tries to - use dot notation to change the properties of two sprites. Unfortunately, errors - are preventing the program from running correctly.\r\n\r\n* **Use dot notation - correctly** to fix the errors in this program\r\n* When your program works - correctly, it should draw the image to the right" - CSD U3 Sprites debug watchers_markdown_instruction: "# Debug: Watchers\r\n\r\nYou - can place watchers on a sprite property just like you would a regular variable.\r\n\r\n![](https://images.code.org/291b83de4b7d540017df382944474c16-image-1466017776084.09.27 - PM.png)\r\n\r\n# Do This\r\n\r\n\r\n\r\nThis program is supposed to animate - a sprite moving across the screen but **there's a problem that's preventing - it from running properly**.\r\n\r\n* **Run the program** to see how it works.\r\n* - **Add a watcher** if you like to help you check individual properties.\r\n* - **Debug the program** to find the error that prevents it from working properly.\r\n* - Your animation should look like the example at the right.\r\n* Hint: Read - the code carefully. Is there a logical error?" - CSD U3 Sprites intro sprites_markdown_instruction: "# Sprites\r\n\r\n**Sprites** - make it easier to keep track of all of those values that you've been using - separate variables for. You are going to start creating animations with **sprites**. - A sprite is like a character in your animations, and each sprite keeps track - of its own x and y coordinates (and lots of other values too). Your program - will control how your sprites move and appear on the screen.\r\n\r\n**Creating - Sprites:** The block creates a new sprite and gives it - any label you like. This label is how you'll refer to your sprite in your - code.\r\n\r\n**Drawing Sprites:** Sprites only appear on the screen when you - draw them there. Whenever you call the ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 - AM.png) command, all the sprites you've created will be drawn on the screen.\r\n\r\n# - Do This\r\n\r\nThis program includes comments that let you know where to place - code but otherwise is blank\r\n\r\n* Beneath the \"Creating Sprites\" comment - drag in a block and give your new sprite any label - you like.\r\n* Beneath the \"Drawing\" comment drag in a ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 - AM.png) command\r\n* **Run the code** to draw your first sprite on the screen." - CSD U3 Sprites make template_markdown_instruction: "# Make Your Own Sprite\r\n\r\nYou - now know how to create a sprite, set its properties with dot notation, and - draw sprites using `drawSprites`. It's time to put all these pieces together - on your own.\r\n\r\n# Do This\r\n\r\n\r\n\r\nThis program creates a - red sprite in the bottom right hand corner of the screen.\r\n\r\n* **Write - code** that creates a new separate sprite in the top left corner of the screen.\r\n* - Be careful with your dot notation, and use the code for the first sprite as - a guide.\r\n* Try to make your image look as close as possible to the image - at the right." - CSD U3 Sprites make your own sprite_markdown_instruction: "# Make Your Own - Sprite\r\n\r\nYou now know how to create a sprite, set its properties with - dot notation, and draw sprites using `drawSprites`. It's time to put all - these pieces together on your own.\r\n\r\n# Do This\r\n\r\n\r\n\r\nThis program creates a - red sprite in the bottom right hand corner of the screen.\r\n\r\n* **Write - code** that creates a new separate sprite in the top left corner of the screen.\r\n* - Be careful with your dot notation, and use the code for the first sprite as - a guide.\r\n* Try to make your image look as close as possible to the image - at the right." - CSD U3 Sprites motivation_markdown_instruction: "# How Many Counter Variables?\r\n\r\nYou - can use counter variables (`x = x + 1` , `x = x - 1` , `x = x + 0.5`, etc.) - to animate a scene. What happens when scenes start to get larger and more - complicated? \r\n\r\nWatch this animation. With a partner: \r\n\r\n* Decide - how many counter variables you would need to create this scene\r\n* Decide - what you would name your counter variables\r\n* **Draw a Labels-Values-Connectors** - diagram of your variables at the first frame of this scene. Don't worry about - getting the values exactly correct.\r\n* Share your answer with another group - **and be ready to share your ideas with the class**" - CSD U3 Sprites race create sprites_markdown_instruction: "# Putting it All - Together\r\n\r\nLet's put all of this together in a fun way. You're going - to make three sprites \"race\" across the screen by combining the counter - pattern, random numbers, and sprite properties.\r\n\r\n# Do This\r\n\r\n\r\n\r\nTo begin with, make three - different sprites and put them in a row on the left side of your screen.\r\n\r\n* - **Create three sprites** and give them labels.\r\n* **Add code to the \"Draw - Background\" section of the draw loop that draws the background**.\r\n* **Add - code to the \"Draw Animations\" section of the draw loop that draws your sprites**.\r\n* - Your picture should look like the example at the right." - CSD U3 Sprites race finish_markdown_instruction: "# Make It Your Own\r\n\r\nKeep - adding to this project and make it your own. Do you want to add a finish line? - Do you want to make one racer a little bit faster than the others? Maybe you - could add some text and give your race a name. There's a ton of ways you - can make this animation a lot more interesting and exciting!\r\n\r\n\r\n# Do This\r\n\r\n* **Keep adding your - own touches to your race** using what you already know about drawing, sprites, - and animation." - CSD U3 Sprites race movement_markdown_instruction: "# Get Those Sprites Moving!\r\n\r\nNow - that you have three sprites on the screen, it's time to make them \"race\" - across the screen. For now, the race will just be a tie, so focus mainly on - **making sure your code is organized** and that **you use sprite properties - with the counter pattern correctly**.\r\n\r\n# Do This\r\n\r\n\r\n\r\n* **Add code to the \"Update Properties\" - section** that makes the sprites move across the screen together.\r\n* Your - animation should look like the example at the right." - CSD U3 Sprites race random_markdown_instruction: "# Random Movement\r\n\r\nRight - now your race isn't very interesting. Let's make one small change to make - it a lot more exciting. Instead of your sprites moving the same amount forward - every frame, **they will now move a random amount**. This will make use of - what we'll call the **random counter pattern**. Here's what the code might - look like.\r\n\r\n\t// Random Counter Pattern\r\n mySprite.x = mySprite.x - + randomNumber(0,2);\r\n \r\nInstead of adding the same amount every time - it will move forward by some random amount between 0 and 2.\r\n\r\n# Do This\r\n\r\n\r\n\r\n* **Use the random counter pattern** - to make your sprites move forward by a random amount in each frame.\r\n* **Run - the program** to make sure your sprites now move a random amount. Is your - race predictable anymore?\r\n* Your animation should look similar to the example - at the right." - CSD U3 Sprites setting properties_markdown_instruction: "# Properties\r\n\r\n\r\n\r\n**Properties:** When you create a sprite - it will automatically be given many special variables called properties. Properties - keep track of information about the sprite, which is used when you draw it - on the screen. For example, these two properties keep track of a sprite's - x and y position on the screen.\r\n\r\n**Changing Properties:** Properties - are just variables, so you can change their values using `=` just like any - other variable. Here's an example of how you might change the `x` property - of a sprite called `myFavoriteSprite`.\r\n\r\n![](https://images.code.org/6976d707cba95e92369831729cdb7435-image-1466085767357.02.35 - AM.png)\r\n\r\n\r\n\r\n# Do This\r\n\r\nThis program - creates a new sprite, gives it a label, and then sets its `x` and `y` properties.\r\n\r\n* - **Read the code**. Notice that the label given to the sprite is used in the - sprite's property.\r\n* **Change the values given to the `x` and `y` properties** - to move the sprite to the bottom right corner of the screen." - CSD U3 Sprites shapeColor_markdown_instruction: "# shapeColor\r\n\r\n**shapeColor:** - Another useful property is ![](https://images.code.org/538b61640803ec3b333d7cb2d9a162f5-image-1466050497196.14.46 - PM.png) which can be used to change the color of the sprite. It can be assigned - values in different ways. For example, you could use the name of a color\r\n\r\n\r\n\r\nor you can use the rgb block\r\n\r\n\r\n\r\nTo make it easier to program with blocks, - **when you drag a sprite property onto its own line it will automatically - be placed inside an \"=\" block.**\r\n\r\n\r\n\r\n# Do This\r\n\r\nThis program - creates two sprites and places them on the screen. Currently they are still - gray.\r\n\r\n* Beneath the \"Setting Properties\" comment add code to **set - the shapeColor of these two sprites**\r\n\t* Make sure you use dot notation - correctly. Use the code already written as a guide.\r\n * Try assigning - one sprite a **named color** and another sprite a color using the **rgb block**.\r\n* - Your finished work should look something like the image to the right." - CSD U3 Sprites sprites vs rects_markdown_instruction: "# Sprites vs. Rectangles\r\n\r\nSprites - may seem a lot like fancy rectangles right now. In time you'll see that sprites - are **much more powerful**. But for now, there's one key difference you need - to know about.\r\n\r\nSprites have an `x` and a `y` location just like a rectangle. - The key difference is that **a sprite's `x` and `y` are in the middle of - the sprite, not the top left corner**. \r\n\r\n\r\n# Do This\r\n\r\n\r\n\r\nThis program creates a - red sprite and a green rectangle that are the same size and have the same - `x` and `y`. **The sprite does not cover the rectangle since its `x` and `y` - are at its center**.\r\n\r\n* Change the `x` and `y` properties of the sprite - so that it entirely covers the green rectangle.\r\n* When your program works - correctly, it should draw the image to the right." - CSD U3 Sprites Template race_markdown_instruction: "# Putting it All Together\r\n\r\nLet's - put all of this together in a fun way. We're going to make three sprites - \"race\" across the screen by combining the counter pattern, random numbers, - and sprite properties.\r\n\r\n# Do This\r\n\r\n\r\n\r\nTo begin with make three - different sprites and put them in a row on the left side of your screen.\r\n\r\n* - **Create three sprites** and give them labels\r\n* **Add code to the \"Drawing\" - section of the draw loop that draws the background and your sprites**\r\n* - Your animation should look like the example at the right.\r\n\r\n" - CSD U3 Sprites width and height_markdown_instruction: "# Setting Properties\r\n\r\nYou - are going to start programming with **sprites**. A sprite is made up of many - pieces of information called **properties**. The ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 - AM.png) command can be called whenever you like. It uses the properties of - your sprites to draw them all at once.\r\n\r\nSprites have **lots and lots - of properties** but to get started let's just look at three.\r\n\r\n![](https://images.code.org/4d0f35bc60aa9d1c80e6dda4db16abc4-image-1466004005360.19.30 - AM.png)\r\n\r\n\r\n# Do This\r\n\r\nThis program - creates a sprite and gives it the label `mySprite`. Then it sets the properties - `shapeColor`, `x`, and `y` of the sprite. When `drawSprites` is called, this - information is used to draw the sprite in the correct location and color.\r\n\r\n* - **Change the values given to each property** so that:\r\n\t* The sprite is - now in the bottom right corner of the screen\r\n * The sprite is \"orange\" - rather than \"red\"" - CSD U3 Sprites width height_markdown_instruction: "# Width and Height\r\n\r\nWhen - you create a sprite, it is automatically set up with all its properties having - default values. If you know the names of these properties, you can use dot - notation to change them. This will change the way your sprite looks when you - draw it.\r\n\r\nHere are two new properties:\r\n\r\n![](https://images.code.org/158421dbb4f9640ee852d994d2b4a7d6-image-1466006293357.40.26 - AM.png)\r\n\r\nBy default each sprite starts with a width and height of 100.\r\n\r\n# - Do This\r\n\r\nThis program creates a sprite and sets its `x`, `y`, and `shapeColor` - properties.\r\n\r\n* Use the new `width` and `height` properties to make the - sprite fill up most of the screen.\r\n* Make sure you're using dot notation - correctly.\r\n* **Note:** If you drag the property block onto a new line it - will change to include the `=` command automatically.\r\n\r\n![](https://images.code.org/77d0a16f19a2a7b2c2f1f6b88cda17b3-image-1466006474149.41.53 - AM.png)" - CSD U3 UP_ARROW_markdown_instruction: "# Moving Sprites\r\n\r\nYou saw on the - last level that `keyDown` returns `true` while you are holding a key down - and `false` when the key is not pressed down.\r\n\r\nWe can use `keyDown` - as an input to an `if` statement to change our animations based on key presses!\r\n\r\nThe - input for the `keyDown` command is the name of key you want to check in quotes. - Some examples are \"x\", \"up\" and \"space\".\r\n\r\n# Do This\r\nYou have - been provided with the start of a bug sprite. You need to pick the bug picture - you want to use from the animation tab.\r\n\r\n* Set the animation of the - sprite to your favorite bug.\r\n* Add an `if` statement inside your draw loop\r\n* - Add a call to `keyDown` as the input to the `if` statement to check if the - **up** arrow was pressed\r\n* Add code inside the conditional to move the - sprite up if the up arrow is down.\r\n\r\n_Do you need to change sprite's - x or y property to move it up?_" - CSD U3 Variable Arithmetic pt2_markdown_instruction: "# Variable Arithmetic - Pt2\r\n\r\nAs we saw in the last level, **you can add, subtract, multiply, - or divide** your variable **without changing its value**. The only time a - variable's value will change is when you use the `=` or **gets** command.\r\n\r\nTry - another example highlighting another common misconception.\r\n\r\n# Do This\r\n\r\n* - Read the program provided\r\n* **Predict:** What two numbers will get displayed? - Why? **Explain your reasoning to a neighbor**.\r\n* Run the program. Were - you surpised by what happened? **Compare notes with a neighbor**." - CSD U3 Variable Arithmetic_markdown_instruction: "# Variable Arithmetic\r\n\r\nYou - can use the values stored in a variable to perform **addition, subtraction, - multiplication, and division**. Let's have a look at some common misconceptions.\r\n\r\n# - Do This\r\n\r\n* Read the program provided\r\n* **Predict:** what will displayed - when you run the program? Why? **Explain your reasoning to a neighbor**.\r\n* - Run the program. Were you surpised by what happened? **Compare notes with - a neighbor**." - CSD U3 Variable Incrementation pt2_markdown_instruction: "# Variable Reassignment\r\n\r\nThis - example is starting to get a little more complex. Work through it with a partner. - Why do you get the output you do?\r\n\r\n# Do This\r\n\r\n* Read the program - provided\r\n* **Predict:** What two numbers will get displayed? Why? **Explain - your reasoning to a neighbor**.\r\n* Run the program. Were you surpised by - what happened? **Compare notes with a neighbor**." - CSD U3 Variable Incrementation_markdown_instruction: "# Variable Incrementation\r\n\r\nTo - **increment** something means to add something to a value. In programming - if you want to increase or increment the value in a variable you need to use - the **gets** command to store the new value.\r\n\r\nAs you work through this - example try to discuss with your partner, **What's the difference between - the left side and the right side of the `=` command?**\r\n\r\n# Do This\r\n\r\n* - Read the program provided\r\n* **Predict:** What two numbers will get displayed? - Why? **Explain your reasoning to a neighbor**.\r\n* Run the program. Were - you surpised by what happened? **Compare notes with a neighbor**." - CSD U3 Variables CHALLENGE gamelab gary_markdown_instruction: "# Challenge: - Variables and Game Lab Gary\r\n\r\n* You've been provided code that draws - a simple version of Game Lab Gary\r\n* **Use variables to animate Gary**. - How can you extend them?\r\n* [[Question that leads towards incrementation]]" - CSD U3 Variables create and assign_markdown_instruction: "# Create and Assign\r\n\r\nWhen - you create a new variable you will often want to assign it a value right away. - You can **create and assign a value** to a variable in a single command as - shown below.\r\n\r\n![](https://images.code.org/2110bcf19415401434a876503ddecab5-image-1462472203840.16.37 - PM.png)\r\n\r\n# Do This\r\n\r\nThis program needs you to **create and assign - a value to the variable `size`** in order to draw a square.\r\n\r\n* Use the - block shown above to create the rectangle and assign it a value in a single - line of code.\r\n\r\n" - CSD U3 Variables draw loop newVars_markdown_instruction: "# Keep going!\r\n\r\n**Keep - using the patterns we just explored to build your own visualization**\r\n\r\n# - Do This\r\n\r\n* Extend your project to create a **personal randomized piece - of art**\r\n* Some techniques you might try:\r\n\t* Use **new shapes** like - `rect`, `regularPolygon`, or `line`\r\n * Use **variables in unexpected - ways**, (e.g. `red` also controls the size of your ellipse)\r\n * Create - **new variables** to control new parts of your program\r\n * Pick **new - ranges** for your random values\r\n * Switch which variables are assigned - values **inside or outside the draw loop**" - CSD U3 Variables draw loop rgb_markdown_instruction: "# Using variables in - the draw loop\r\n\r\nNow try randomizing the `red`, `green`, and `blue` variables. - Try setting their values to random numbers **before the draw loop** or **inside - the draw loop** like you did with `x1` and `y1` in the previous level. \r\n\r\n# - Do This\r\n\r\n* Randomize the values of `red`, `green`, and `blue`, changing - some **before the draw loop** and some **inside the draw loop**\r\n* Find - a visual effect you really like and share with a neighbor before moving on" - CSD U3 Variables draw loop xy_markdown_instruction: "# Using variables in the - draw loop\r\n\r\nAs you saw in the last example, **you can update a value - repeatedly within the draw loop**. Using this allows you to redraw an image - with random changes every time. By storing these random values in a variable - you can **use the same random value multiple times**.\r\n\r\n# Do This\r\n\r\n* - Add to the starter code provided so that the variables `x1` and `y1` are updated - randomly in the draw loop.\r\n* Use these values to redraw the ellipses at - random locations." - CSD U3 Variables eyeBrows_markdown_instruction: "# Create Your Own\r\n\r\nThe - pattern you just saw is very common. The steps were:\r\n\r\n* **Create** a - variable **outside** the draw loop\r\n* **Assign** the variable a new value - **inside** the draw loop\r\n* **Use** the new value **inside** the draw loop - to draw the current frame\r\n\r\nLet's see if you can put together everything - you've done so far to use this pattern yourself.\r\n\r\n# Do This\r\n\r\nYou - will be adding **eyebrows that move up and down together** to your smiley - face.\r\n\r\n* **Create** a variable **outside** the draw loop with a good - label. Remember this variable will control **the height of the eyebrows**\r\n* - **Assign** your variable a new random value **inside** your draw loop\r\n* - **Use** your value inside the draw loop to create **two new ellipses**. The - value in your variable should control the height\r\n\r\n**Hints and Tips:**\r\n\r\n* - The x values of your eyes can help you line up your eyebrows. \r\n* Don't - be afraid to work **iteratively** here (that means try something and keep - improving). It's ok to have something not work the first time.\r\n* Talk - with a neighbor if you're having trouble, or go check your work from earlier - in the lesson.\r\n\r\n![](https://images.code.org/05e5ea214c8ccc37fc8dd4223569602a-image-1462474590368.gif)" - CSD U3 Variables Initialize_markdown_instruction: "# Using a Variable's Value\r\n\r\nThis - program creates a variable called `size`. You will need to **assign it a value**. - It will then be used to set the size of a square on the screen.\r\n\r\n# Do - This\r\n\r\n* **Assign the variable `size` a value** and run the program to - see how its value is used\r\n* **Change the value** and rerun the program - to see how it affects the output of your program." - CSD U3 Variables Intro_markdown_instruction: "# Your first variable\r\n\r\nThe - `var` command **creates a new variable**. You only need to use it once with - each variable you create.\r\n\r\n# Do This\r\n\r\n* Create a new variable - with a **name of your choosing**, as shown in the starter code." - CSD U3 Variables make a big square_markdown_instruction: "# Replacing Labels - with Values \r\n\r\nThe last command in the program you just ran is:\r\n\r\n\tconsole.log(size);\r\n\r\nBut - the output you saw was\r\n\r\n\t10\r\n \r\nThe reason is that **variables - are replaced with their values before running almost all commands.** The only - exceptions are the commands `var size` and `size = `.\r\n\r\n# Do This\r\n\r\nThis - program is very similar to the one you just ran, except now you'll be using - a variable to draw. **Can you fill the entire screen?**\r\n\r\n* **Predict** - what this program will do.\r\n\t* Does it generate an error? What will it - draw?\r\n* **Run** the program and check your prediction.\r\n* **Change the - value** assigned on line 2 so that **the rectangle drawn fills the whole screen**.\r\n\r\n" - CSD U3 Variables make a square_markdown_instruction: "# Drawing with Variables\r\n\r\nA - **variable** is a named piece of information in a program. You can think of - it as a **label** that identifies a **value** that we wish to use and update - many times in our programs. In the previous lesson, you learned two important - commands with variables.\r\n\r\n\tvar size; // Creates a new label - (or variable) called size\r\n size = 10; // size \"gets\" 10. The - label score is now connected to the value 10\r\n \r\nOnce these connections - have been formed, we can use them to make much more interesting drawings and - animations.\r\n\r\n# Do This\r\n\r\nThis program creates a variable called - `size` and assigns it the value `10`. These two commands are familiar, but - line 3 should look new to you. What do you think will happen?\r\n\r\n* **Predict** - what this program will do.\r\n\t* Does it generate an error? Output some text? - Output a value? Why do you think so?\r\n* **Run** the program and check your - prediction.\r\n* **Change the value** that size \"gets\" on line 2 and re-run - your program. Notice anything?" - CSD U3 Variables multiple assignments_markdown_instruction: "# Multiple Assignments\r\n\r\nA - variable contains a single piece of information called its **value**. To tell - variables apart each one has a **label** or name. In your last program, the - variable had the label `size` and originally had a value of `10`. **Here's - how each command you just saw works**\r\n\r\n![](https://images.code.org/a8d2c5a88a8fbb8284a18bcb7464cb9b-image-1462301535506.51.32 - PM.png) **Create a new variable** with the label `size`\r\n\r\n![](https://images.code.org/d2a2578e6d0190f7db69872c1ad64572-image-1462301539050.51.43 - PM.png) **Assign the value `10`** to the variable `size`\r\n\r\n![](https://images.code.org/84b01d13b210c8cca8a71934b77acc56-image-1462301542169.51.53 - PM.png) **Use the value in `size`** as the width and height of the rectangle. - (Since they're the same we end up with a square)\r\n\r\n# Do This\r\n\r\nThis - program is similar to the first but it assigns multiple values to `size` before - drawing the rectangle.\r\n\r\n* **Run the program once** to see how it works\r\n* - **One at a time change the values assigned to `size` in lines 2-4 and rerun - the program** \r\n* **Discuss / Reflect:**\r\n\t* Which lines is changing - the rectangle drawn? How can you tell?\r\n * Can you explain what you're - seeing?" - CSD U3 Variables naming rules_markdown_instruction: "# Choosing Labels\r\n\r\nGood - labels **indicate how the variable will be used in the program**. The label - `size` is a good choice for a variable that controls the size of something. - You could always choose `potato` or `s`, but confusing or unclear names make - your program hard to read for you and others.\r\n\r\nThere are a **few rules** - when choosing labels:\r\n\r\n* Labels **cannot include spaces**. For example, - `size of rectangle` would generate an error.\r\n* Labels with multiple words - can be easier to read in **camelCase**. CamelCase looks like `sizeOfRectangle` - or `aReallyLongLabelName`\r\n* Labels **cannot begin with a number**. `4sides` - and `2morrow` will generate errors.\r\n* Be very careful with **spelling**.\r\n* - Labels are **case-sensitive**. `size` is not the same as `Size` or `SIZE`.\r\n\r\n\r\n \r\n\r\n# Do This\r\n\r\nThis - program has multiple errors caused by bad label names.\r\n\r\n* **Correct - the errors by picking new names that follow the rules listed above.**\r\n* - **Note:** The errors prevent the program from being viewed in block mode.\r\n* - If your program works it should draw the image on the right.\r\n\r\n" - CSD U3 Variables random assignment_markdown_instruction: "# Random Assignment\r\n\r\nVariables - are really helpful when you want to **store a number that you'll use many - times in your program**. For example, if you generate a random number you - could store it in a variable so that you can use that same random number as - many times as you wish, like this.\r\n\r\n\tvar randomSize; // - Create variable randomSize\r\n randomSize = randomNumber(10,100); // randomSize - \"gets\" a randomly generated number between 10 and 100\r\n\r\n# Do This\r\n\r\nThis - program **assigns a random number** to `eyeSize` on line 1. It's already - being used to change the size of one of the eyes on the smiley face, but not - the other. **Can you get both eyes to always be the same random size?**\r\n\r\n* - **Run the program** to see how it works\r\n* **Change the program** so that - both eyes are always the same random size. Check line 12 if you need some - help.\r\n\r\nNote: Read the documentation about the `arc` command if you want - to know more about how the mouth on the smiley was made." - CSD U3 Variables random draw loop_markdown_instruction: "# Variables and the - Draw Loop\r\n\r\nYou already know that draw loop **runs over and over again - so long as your program is running**. If you assign a value to a variable - outside the draw loop it will not change while the draw loop runs. If your - assignment happens **inside the draw loop the variable will be constantly - updated, once for each time the loop runs**. \r\n\r\n# Do This\r\n\r\nThis - program draws a smiley face with randomly sized eyes. You are going to **move - the assignment of `eyeSize` inside of the draw loop, but first...**\r\n\r\n* - **Run the program** without making changes to remind yourself how it works\r\n* - **Predict what will happen** when you move the assignment statement inside - the draw loop\r\n* **Move the assignment inside the draw loop** and run your - program\r\n* **Discuss / Reflect:**\r\n\t* Was your prediction correct?\r\n * - Can you explain what you see?\r\n * Try changing the range of random values - to get a different effect." - CSD U3 Variables random drawing exemplar_markdown_instruction: "# Exemplar: - Random Drawing\r\n\r\nTo practice using **variables with the draw loop** you - will be building your own **randomized art project**. Check out the exemplar - to see one possible outcome. Then move on to get started building your own." - CSD U3 Variables Random_markdown_instruction: "# Variables random values\r\n\r\nYou - can use a variable to store a **randomly generated number**.\r\n\r\n# Do This\r\n\r\n* - In the starter code a variable is **initialized with a random number** and - then **displayed twice**\r\n* **Predict:** Will the value displayed change - between the two `console.log` statements?\r\n* Run the program. Was your prediction - correct? Were you surprised?\r\n* **Compare notes with a neighbor**" - CSD U3 Variables Reassign Predict_markdown_instruction: "# Make a Prediction\n\nThis - program **creates a variable** and then sets its value twice in a row. **What - value will be displayed when the console.log() statement runs?**\n\n![](https://images.code.org/0375d4215c5cc4b937c9333390deb81c-image-1460404063955.47.09 - PM.png)\n\n**Once you've submitted your answer be prepared to discuss your - reasoning with your classmates.**\n" - CSD U3 Variables Reassign pt2_markdown_instruction: "# Creating and assigning - in one line\r\n\r\nYou can use `var` and `=` in a single line to **assign - a value to a variable as soon as it is created**, for example: `var size = - 10;`\r\n\r\n# Do This\r\n\r\n* **Create a new variable and assign it a value** - in a single line." - CSD U3 Variables Reassign_markdown_instruction: "# Assiging a Variable\r\n\r\nVariables - **store a single piece of information that can change throughout your program**. - The `=` command gives a variable a new value.\r\n\r\nYou read the command - `size = 10;` as \"size gets the value 10\". You can also say \"size gets 10\".\r\n\r\n# - Do This\r\n\r\n**Use the `=` command** to assign a value to the variable `numberOfDogs`" - CSD U3 Variables Square Random Loop_markdown_instruction: "# Random Values - and the Draw Loop\r\n\r\nIn the last level you should have **made a prediction** - about the difference between two programs. They are both available here, with - the second one commented out.\r\n\r\n# Do This\r\n\r\n* Run the first program\r\n* - **Comment out** the first program and **uncomment** the second program\r\n* - Run the second program\r\n* **Compare what you observed to your prediction. - Discuss the results with a neighbor**" - CSD U3 Variables Square Random_markdown_instruction: "# Variables and Random - Drawing\r\n\r\nVariables can be used to **store a randomly generated value** - that you want to use many times in your program.\r\n\r\n# Do This\r\n\r\n* - Assign size a **random number between 1 and 200**.\r\n* **Run the program - multiple times**\r\n* **Discuss with a neighbor:** Can you explain why the - program always drawing a square?" - CSD U3 Variables Square_markdown_instruction: "# Variables and Drawing\r\n\r\nVariables - allow you to **use the same value multiple times in your program**. If a value - will always be used many times in a program it is really useful to place that - value in a variabnle. This lets you **quickly change the same value at many - places in your program**. It also can make move obvious **how that value is - used**.\r\n\r\n# Do This\r\n\r\n* Change the value that `size` is initialized - to so that the program draws a **larger square**" - CSD U3 Variables TEMPLATE square_markdown_instruction: "# Drawing with Variables\r\n\r\n**Get - excited because you're about to see your first variable used in a program!** - This program uses a variable in three separate ways.\r\n\r\n* `var size;` - Creates a new variable with the label size\r\n* `size = 50;` Assigns the value - 50 to size\r\n* `rect(200, 200, size, size);` Uses the value in size to draw - a rectangle with equal width and height.\r\n\r\n# Do This\r\n\r\n* Run the - program once to see how it works\r\n* **Change the value assigned to size - in line 2** and rerun the program to see what changed." - CSD U3 Variables use value rect_markdown_instruction: "# Using a Variable's - Value\r\n\r\nThis program creates a variable called `size`. You will need - to **assign it a value**. It will then be used to set the size of a square - on the screen.\r\n\r\n# Do This\r\n\r\n* **Assign the variable `size` a value** - and run the program to see how its value is used\r\n* **Change the value** - and rerun the program to see how it affects the output of your program." - CSD U3 Variables write_markdown_instruction: "# Displaying a Variable's Value\r\n\r\nOften - you want to see the exact value contained in a variable, especially if it - was randomly generated. Both `console.log` and `text` can be used with variables - to specifically see their values. This is an important skill when **debugging** - your programs.\r\n\r\n# Do This\r\n\r\nThis program uses a variable `size` - to draw a square with a randomly generated value.\r\n\r\n* **Use the `text` - command** to display the value of `size` on the screen.\r\n* **Use the `console.log` - command** to display the value of `size` in the debug console." - CSD U3 Variables2 expressions in commands_markdown_instruction: "# Expressions - inside commands\r\n\r\n**When your computer sees an expression in a program - it will calculate its value before using it**. This means you can even use - expressions in unexpected places, like inside drawing commands.\r\n\r\n\tstrokeWeight(4 - * 5);\r\n rect(10 + 10, 5 * 50, 30, 30);\r\n \r\nNotice that the commas - still separate each expression. This is just further evidence that **even - though an expression may have multiple parts, it will eventually get treated - as a single value.**\r\n\r\n# Do This\r\n\r\nTry writing more complex expressions - inside of the drawing commands provided." - CSD U3 Variables2 expressions in variables_markdown_instruction: "# Do This\r\n\r\n* - Use the `=` (assignment operator) to store the value of each expression in - a variable\r\n* Use `console.log` to display each value\r\n* Repeat the pattern - with some expressions of your own. What do you want to calculate?" - CSD U3 Variables2 expressions_markdown_instruction: "# Do This\r\n\r\n* Place - each expression inside of a `console.log` command to display their results\r\n* - What other expressions can you make? Try writing 3 of your own.\r\n" - CSD U4 - Design Mode Input Widgets_markdown_instruction: "# Input Elements\r\n\r\n\r\nButtons are a great way to navigate - around your app, and text labels are the primary way to display content in - your app. When it comes to taking input from your users, sometimes you need - a place for them to type or boxes to check. The **Text Input**, **Dropdown**, - **Radio Button**, and **Checkbox** elements all provide ways for your users - to input information to your app.\r\n\r\n# Do This\r\n\r\nChoose at least - two of the input elements, and for each one:\r\n\r\n* Drag it out and position - it on the screen\r\n* Change the id to something meaningful\r\n* Read through - the properties and experiment with them\r\n* Add a label element next to each - that describes what they do (don't forget to give it an id too!)\r\n\r\n" - CSD U4 - Design Mode Project_markdown_instruction: "# Mocking Up Your App\r\n\r\nNow - that you have some practice laying out elements in App Lab you can start working - on mocking your own app. With your group divvy up the screens so that everyone - is working on a different screen. Because you'll be dividing the work up - you'll want to do some planning ahead of time to deicde on a common look - and feel for your pages. For example, you'll want to agree on things such - as:\r\n\r\n* Where do navigation buttons go?\r\n* What colors will you use - for backgrounds, text, and buttons\r\n* What's the general style and layout?\r\n\r\n# - Do This\r\n\r\n* Decide on a _namespace_ for your page, this will be something - you add to the beginning of every id so that your element ids don't conflict - with others when you merge everyone's screens together\r\n\t* For example, - if you are making the home page, you might use \"home_\" as your namespace - - leading to ids such as:\r\n \t* \"home_title\"\r\n * \"home_loginButton\"\r\n * - \"home_logo\"\r\n* Use the built-in elements to lay out your app screen\r\n* - For any components of your app that can't be recreated with the built in - elements you can either:\r\n\t* Redesign to utilize built in elements\r\n * - Find an image to use in place of your element\r\n * Draw the element using - your preferred image editor\r\n* Share your design regularly with your teammates - to ensure consistent style" - CSD U4 - Design Mode Text_markdown_instruction: "# Adding Text\r\n\r\nThe label element lets you add any - text you'd like to your app. Just drag out a label block and set its \"text\" - property. \r\n\r\n# Do This\r\nUse a label element to create a title for this - app.\r\n\r\n* Drag out a label and place it on the top of the screen\r\n* - Change the id to \"titleLabel\"\r\n* Change the text to \"My App\"\r\n* Increase - the font size\r\n* Choose a color you like for the title\r\n\r\n" - CSD U5 black white images pixelation_markdown_instruction: "# Do This\r\n\r\nUse - the pixelation widget to draw something a smiley face" - CSD U5 collection UPS_markdown_instruction: "\r\n### Plan a Route\r\n\r\nRoutz is a - company that helps people navigate traffic. It has maps of locations all around - the world and knows real-time information about traffic conditions. When you - type in a destination you want to go, it will give you the best route it can - find.\r\n\r\nRoutz wants to improve its data to provide even better directions. - Your job is to help the company decide what data it could collect to improve - those directions.\r\n\r\n**What data should Routz collect to improve its recommendations - AND where could it get that data?**\r\n\r\n" - CSD U5 collection videos_markdown_instruction: "\r\n\r\n### Make a Recommendation\r\n\r\nMeScreen - is a website where users can watch videos uploaded from all over the world. - It has millions of videos and users and new ones every day.\r\n\r\nMeScreen - recommends a Top Video to each of its users every day. You job is to collect - information about your users and your videos to make the best recommendation - you can.\r\n\r\n**What kinds of information should you collect AND how could - you get it?**" - CSD U5 color image_markdown_instruction: "# Paint by Numbers\r\n\r\nLook at - the binary code below. Use the patterns of ones and zeros to create the picture - the code represents. To paint each square, click on the color you want to - use, then click on the square.\r\n\r\n\r\n`011 011 011 011 011 011 011 011 - 110 110`\r\n\r\n`011 011 111 111 111 011 011 011 110 110`\r\n\r\n`011 111 - 111 111 111 111 011 011 011 011`\r\n\r\n`011 011 111 111 111 011 011 011 011 - 011`\r\n\r\n`011 011 011 011 011 011 011 010 011 011`\r\n\r\n`011 011 011 - 011 011 011 010 010 010 011`\r\n\r\n`011 011 011 011 011 011 010 010 010 011`\r\n\r\n`011 - 011 011 011 011 011 011 000 011 011`\r\n\r\n`001 001 001 010 010 010 010 000 - 010 010`\r\n\r\n`001 001 001 001 010 010 010 010 010 010`" - 'CSD: Boolean Expressions_markdown_instruction': "# Boolean Expressions Video" - 'CSD: Cake Defender Exemplar_markdown_instruction': "# Defend Your Cake!\r\n\r\nThis - is an example of a defender game that you'll build by the end of this lesson. - Move the alien with arrow keys to keep the ladybugs from getting to your cake. - How high of a score can you get?\r\n\r\n# Do This\r\n\r\nTurn to a classmate - and make a list of the following information.\r\n\r\n* How many sprites are - there in this game. Which are they?\r\n* What variables are needed to make - this game? What do they store?\r\n* If you were to split the code of this - game into functions what do you think they would be? What are the major pieces - of behavior you'd need to create in your code?" - 'CSD: Platform Jumper Exemplar_markdown_instruction': "# Platform Jumper\r\n\r\nThe - game on the left is an example of a platform jumper. Press \"Run\" to play - it. You can make the alien jump with the up arrow, and move it to the left - and right with the arrow keys. You score by collecting stars, and if you - score high enough, the background will change.\r\n\r\nYou already know how - to use all the blocks you need to make a game just like this one, and you'll - be making your own platform jumper in this lesson.\r\n\r\nYou can see other - examples of platform jumpers in the next two levels." - 'CSD: Slider Example_markdown_instruction': "# RGB Slider\r\n\r\nOver the next - couple levels you are going to learn about using sliders to get user input. - You will be creating this slider which controls the color of a button. You - will return to this project in later lessons to control lights!" - CSDU2 - 2nd Validator issue_markdown_instruction: "# Add head and title tags\r\n\r\nYou - should have ended up on this level because of one of the following errors:\r\n\r\n* - Element head is missing a required instance of child element title.\r\n* Element - title must not be empty.\r\n\r\nBoth of these error messages point out that - **every web page needs a title**. The title is more than just putting a header - on your page. A computer won't be able to easily go through the content of - your web page to find your header (it could be in lots of different types - of tags). So instead **every web page includes a title element marked by a - <title> tag.** This title does not show up anywhere on your page so - it is not part of the content of your page.\r\n\r\nSince the title is not - part of web page content it goes in a special area at the top. This area is - for all information about your web page that is not content. This information - is often called **metadata**. **Metadata goes in the head element marked - by a <head> tag.** The title element is a child element of the head - element so the title element goes inside the head element.\r\n\r\nExample:\r\n\r\n
\r\n<head>\r\n   <title>
-        My Awesome Website </title>\r\n</head>\r\n
\r\n\r\n# Do This\r\n\r\n* - Add a <head> element above the first content in your page\r\n* Add a - <title> element inside the <head> element. Makes sure to give - your page a descriptive title.\r\n* Once you have done this return to the - validator level" - CSDU2 - About Me Page start_markdown_instruction: "# About Me Page\r\n\r\nYou - are going to make another page for your portfolio. This one will be your About - Me page. The project has been loaded with 6 different images. Two pictures - are associated with each question below.\r\n\r\n* Do you prefer chocolate - or vanilla ice cream?\r\n* Are you a dog or a cat person?\r\n* Do you prefer - watching a movie or reading a book?\r\n\r\nCreate a website that tells your - user more about you by answering the 3 questions and showing pictures for - each answer.\r\n\r\n# Checklist\r\n\r\n* At least three images\r\n* A large - header with the name of the page\r\n* Descriptions of your image choices for - each category inside a paragraph element\r\n* HTML document uses the correct - structure. (Doctype, html, head, and body)" - CSDU2 - About Me Page Styling_markdown_instruction: "# About Me Page\r\n\r\nThere - are many CSS properties and values that can be applied to HTML elements in - order to change their style. Use the checklist below to add style to the text, - image, and body elements. Remember to think about how your styling choices - will impact users view of the web page.\r\n\r\n# Do This\r\n\r\n* Add `` - and `` elements to your page\r\n* Add a `` element to your page - inside the `<head>` element\r\n* Add a `<style>` element to your page\r\n* - Add styling of your choice to your About Me Page. Be sure to use at least - 5 different CSS properties.\r\n\r\n# Checklist\r\n\r\n* All content contained - in body element\r\n* All style contained in head element\r\n* At least 5 of - the following CSS Properties are used:\r\n\r\n| Color Properties | Text Properties - | Images Properties |\r\n| --------------- | --------------- |----------------- |\r\n| - `color` <br> `background-color` | `text-align` <br> `text-decoration` <br> - `font-family` <br> `font-size` | `height` <br> `width` <br> `border-width` - <br> `border-color` <br> `border-style` |\r\n\r\nIf you’ve used at least 5 - of the properties from the checklist, you can explore some additional text - and image CSS properties to add to your About Me page." - CSDU2 - Add doctype and html_markdown_instruction: "# Doctype and HTML tag\r\n\r\nWhen - a web browswer is trying to read your document it looks for alerts which tell - it which language you are using. In order to let the web browser know that - this is an html document you need to do two things:\r\n\r\n1. Add <!DOCTYPE - html> at the very top of your html file. <!DOCTYPE html> is always - the first thing in an html document because it notifies the computer that - this is an html document and to interpret it as such. <!DOCTYPE html> - is not technically a tag but instead an instruction to the web browser. \r\n\r\n2. - Wrap all the content of the file in an HTML element using the <html> - tag. The <html> tag notifies the computer where the html starts and - ends. The <html> tag is the container for all other HTML elements (except - for the <!DOCTYPE html> tag). So you need an opening and closing <html> - tag.\r\n\r\n# Do This\r\nThis is your Hobbies page from the last lesson.\r\n\r\n* - Add <!DOCTYPE html> at the top of your index.html file\r\n* Add <html> - right underneath <!DOCTYPE html> and add a closing </html> tag - at the end of index.html" - CSDU2 - add header to content_markdown_instruction: "# Adding Content Part - 2\r\n\r\nLet's add some headers to the document.\r\n\r\n# Do This\r\n\r\n* - Add a \"Favorite Animal\" title above your paragraph about your favorite animal.\r\n* - Add a \"Favorite Way to Travel\" title above your paragraph about your favorite - way to travel (car, plane, train, etc.)." - CSDU2 - Adding Personal Cause_markdown_instruction: "# Personal Cause\r\n\r\n**Circulate:** - As students are working on their research and website, check to make sure - that thay are using appropriately licensed media and proving accurate attribution. - Spot check by asking for the license details of specific images.\r\n\r\n\r\n# - Do This\r\n\r\n* Finish your personal website" - CSDU2 - body tags_markdown_instruction: "# Body Element\r\n\r\nAs mentioned - on the last level the `<body>`element can be useful for more than breaking - up your code. What if you wanted to put a background color on the whole page? - Since the `<body>` element contains all the content of the web page, styling - its `background-color` property will give the whole page a background color.\r\n\r\n# - Do This\r\n\r\n* Use a selector for the `<body>` element to set the `background-color` - of the page to something other than white" - CSDU2 - Classes on ESS_markdown_instruction: "# Classes in External Style Sheets\r\nYou - may have also noticed these issues appearing.\r\n\r\n\t1.\tThe styling of - the `<img>` elements on one page should be different than the other\r\n\t2.\tFor - the `<h1>` headers, on one page we want to style them and on the other we - don't.\r\n\r\nLuckily you know classes and we can fix these with classes!\r\n\r\n# - Do This\r\n\r\n* Put the image on the home page in the \"home-image\" class\r\n* - Find the old style rule for images on the home page (width: 600px) and change - the selector so it will style the \"home-image\" class instead\r\n* Put all - the images on the technology page in the \"tech-images\" class\r\n* Find the - old style rule for images on the technology page (width: 100px) and change - the selector so it will style the \"tech-images\" class instead\r\n* Find - the h1 element on the technology page and put it in the class \"page-header\"\r\n* - Change the secltor for the style rule for h1 elements to be just a style rule - for the page-header class" - CSDU2 - Classes_markdown_instruction: "# Classes\r\n\r\nSometimes you only - want to style one specific element of a certain type instead of all elements - of one type. **Classes are HTML attributes that can be added to any HTML element - to group it with other elements. Classes allow for the group of elements to - have their own unique style.** This applies to elements on the same page or - on separate pages.\r\n\r\nTo style using classes:\r\n\r\n1. First you need - to mark the elements in html that will be in that class. \r\n2. Second you - need to write a style rule for that class. To write a rule for a class of - elements, the selector for the rule is a `.` before the class name. \r\n\r\nFor - example the code below would style the fancy class which has been set up for - a paragraph element:\r\n\r\n| HTML file | CSS File | Result |\r\n| --------- - | -------- | ------ |\r\n| <pre> <p class=\"fancy\">Good Day</p></pre> - |<pre>.fancy {<br> color: darkblue;<br> font-family: cursive;<br>} </pre>|<img - src=\"https://images.code.org/05110876c62dafe72a7d0ddf34f7ae07-image-1475009963479.58.30 - PM.png\" alt=\"result image\"> | \r\n\r\n# Do This\r\n\r\nThere are lots of - different `<h5>` elements on the page. We want to style them differently depending - on what season they are associated with.\r\n\r\n* For each season put all - the `<h5>` elements for that season in a class specific to that season. For - example all the winter `<h5>` elements would be in the class \"winter\".\r\n* - Style each class of `<h5>` elements with a different `color`" - CSDU2 - Copy Code_markdown_instruction: "# Adding HTML and CSS\r\n\r\nNow that - you have the files set up bring over your code for your Guinness Book of World - Records page.\r\n\r\n## Copy Code\r\n* Go to <a href=\"https://studio.code.org/s/csd2/stage/7/puzzle/8\" - target=\"_blank\">this level</a> and copy all the code from the HTML file. - Paste the code into the HTML file you just created.\r\n* Copy the CSS code - from the style sheet at <a href=\"https://studio.code.org/s/csd2/stage/7/puzzle/8\" - target=\"_blank\">this level</a> and copy it into the CSS file you just created." - CSDU2 - Debug images_markdown_instruction: "# Debug\r\n\r\n\r\n\r\n# Do This\r\n* - Look through at the src attribute and determine the cause. \r\n* Your goal - is to have an HTML page that displays 5 images. \r\n* Notice that the “alt” - attribute serves as a placeholder in case the image doesn’t load\r\n* It’s - also helpful to know what the picture should be about in case there’s a problem - with the file path" - CSDU2 - Debugging 1_markdown_instruction: "# Debugging\r\n\r\nComputer code - is written by humans and humans make mistakes. All computer scientists make - mistakes. So part of being a good computer scientists is about being able - to find your mistakes and fix them. In computer science we call mistakes **bugs**. - Bugs can be anything in code which causes it not to work as planned. The process - of finding and fixing those bugs is called **debugging**. Debugging is a - problem solving process so use your problem solving steps as you try to debug. - Over the next couple levels you are going to work on your debugging skills.\r\n\r\n<img - src=\"https://images.code.org/ed7cb1f2e093b9c36b82bfbf9bbcd76b-image-1474383288840.54.26 - AM.png\" style=\"float:right;border:black solid 5px;width:200px\">\r\n\r\nThe - desired web page is on the right. There are two issues with the starter web - page:\r\n\r\n1. The header won't show up as an h1 header.\r\n2. The list - doesn't seem to be formatting correctly.\r\n\r\n# Do This\r\n\r\n* Find and - fix all bugs in the starting HTML\r\n* Check that the final result matches - the image on the right." - CSDU2 - Debugging 2_markdown_instruction: "# Debugging\r\n<img src=\"https://images.code.org/61190513dba270c731251df168b98f80-image-1474383960371.02.38 - AM.png\" style=\"float:right;border:5px black solid;width:250px\">\r\n\r\nMore - debugging practice! This page is a little more challenging to debug than - the last one.\r\n\r\n# Do This\r\n\r\nFix the HTML so that the web page makes - the example on the right.\r\n\r\n* Find and fix all bugs in the starting HTML\r\n* - You will know you have found all the bugs when your page matches the one on - the right." - CSDU2 - Debugging 3_markdown_instruction: "# Debugging\r\n\r\nThis page has - images in it. Images make finding bugs a little more tricky. Can you debug - this page?\r\n\r\nAs you are debugging you may notice a new set of symbols - that look something like this:\r\n<pre>\r\n<!-- this is a comment -->\r\n</pre>\r\n\r\nThis - is a **comment**. Comments are written by computer scientists creating web - pages for themselves and other humans who might look at their HTML file. Comments - explain the different parts of the code and what it should create. Comments - might be able to help you debug.\r\n\r\n# Do This\r\n\r\n* Find and fix all - bugs in the starting HTML\r\n* You know you’ve found all of the bugs when - your page matches the <a href=\"https://thimbleprojects.org/danimcavoy/103295/\" - target=\"_blank\"> Target Page</a>." - CSDU2 - Debugging 4_markdown_instruction: "# Debugging\r\n\r\nSometimes bugs - in code aren't obvious in how the page displays. Remember that you want your - web page to display on any browswer so even though it displays nicely in one - place may not mean that it works everywhere. \r\n\r\n# Do This\r\n\r\n* Find - and fix all bugs in the starting HTML\r\n* You know you’ve found all of the - bugs when your page match’s the <a href=\"https://thimbleprojects.org/danimcavoy/103456\" - target=\"_blank\"> Target Page</a>" - CSDU2 - Developing Brand Style_markdown_instruction: "# Developing Brand Style\r\n\r\nAlright - now its time to start writing the style rules for your brand!\r\n\r\nYou will - notice that all the different basic elements you could have used on your web - pages are included on this page and you are given a style rule for each to - start with.\r\n\r\nIn addition there is a style rule for two classes: header - and content. You will be setting up these classes on all the pages of your - website using divs. The header class contains the title of the website as - well as the navigation to get around it. The content class contains everything - else.\r\n\r\n# Do This\r\n\r\n* Look up your colors RGB values from your <a - href=\"https://studio.code.org/s/csd2/stage/10/puzzle/4\" target=\"_blank\"> - Color Choice Level </a> and copy the RGB values into the block comment to - make it easier to style your page\r\n* Create style rules for all the basic - elements of a web page that might be included on your website\r\n* Create - style rules for the header and content classes. Consider having background - colors and borders on these sections to make them stand out from the background." - CSDU2 - Div_markdown_instruction: "# Div Element\r\n\r\nHTML elements allow - you to group together content on your web page that is connected. However - sometimes you want to group together multiple HTML elements into one connected - chunk and give it a style. To connect a set of HTML elements inside one element - you can use the `<div>` element.\r\n\r\nFor your Personal Website you are - going to start out by using this to group together the header section you - want to go on every page of your website. This will include the title of your - website as well as any navigation. Once you do this you can put a background - color on the whole div to make it look like one connected block.\r\n\r\n<pre>\r\n<div>\r\n <h1> - Title of Website </h1>\r\n <a href=\"index.html\"> Home </a>\r\n <a - href=\"page1.html\"> Page 1 </a>\r\n <a href=\"page2.html\"> - Page 1 </a>\r\n <a href=\"page3.html\"> Page 1</a>\r\n</div>\r\n</pre>\r\n\r\n# - Do This\r\n\r\n* Put all the navigation hyperlinks and page title in `<div>` - element\r\n* Add a `background-color` for the `<div>` element" - CSDU2 - External Style Sheets_markdown_instruction: "# External Style Sheet\r\n\r\nNow - that you have your colors and fonts, you can begin to think more about the - style rules of your brand. This is a simple template page that contains the - features your website might contain. You will use this page to play around - with the style rules until you find the right set of style rules for your - brand. These style rules will be common across all the pages on your website. - They will promote your own personal brand. Since they will be common across - all the web pages it would be nice if they could all be written in one place - instead of duplicating them on every page.\r\n\r\nYou can get clearer separation - of content and style by putting content and style in separate files. The new - file for CSS will be called an **external style sheet**. Most of the time - the file name will be **style.css**. Since the file ends in .css the web browswer - already knows that this is CSS code so we no longer need the `<style>` element - around it. \r\n\r\n# Do This\r\n\r\n* Add a new CSS file called style.css\r\n* - Copy all the CSS from inside the `<style>` element from the .html file to - the .css file\r\n* Delete the `<style>` element from the .html file" - CSDU2 - Finalize Personal Website_markdown_instruction: "# Consistent Style\r\n\r\nYour - site’s pages might look crazy since you pulled together the style of all the - pages in the last level. It is time to work on that. It will be up to you - to determine the style rules for your page. Remember best practice is to - only have one rule per html element. If you want to keep two different styles - for certain elements remember you can use classes. In addition you should - have taken time to plan out your consistent style design for website.\r\n\r\n# - Do This\r\n\r\n* Work on creating a consistent style for your website using - the external style sheet and style rules.\r\n* Use classes to make parts of - your website stand out." - CSDU2 - Finish Recipe_markdown_instruction: "# Finishing Recipe Page\r\n\r\nNow - its time to finish off your Recipe Page.\r\n\r\n* Add any more information - to your recipe page you think would be helpful such as how long it takes to - make or what meal of the day you usually eat it.\r\n* Finalize your Recipe - Page. Use the checklist below to make sure your page is complete. Remember - you can always go back and look at the example page.\r\n\r\n## Checklist\r\n\r\n* - All text contained in an HTML tag (header, paragraph, or list)\r\n* Unordered - list of ingredients\r\n* Ordered list of directions\r\n* Paragraph description - of the dish\r\n* Headers for each section\r\n* Title header at the top of - the page" - CSDU2 - First Debug_markdown_instruction: "# Debug\r\n\r\nMistakes happen when - you are programming. The great thing is that these mistakes help your code - get better and you become a better developer as you learn how to find the - mistakes. Mistakes in code are called **bugs** and the process of fixing the - bugs is called **debugging**. \r\n\r\n# Do This\r\nThe creator of this website - is having trouble so trouble. Debug this page so that it matches the example - on the next level. Your teacher may also be displaying the website at the - front of the room.\r\n\r\nAs you work to debug look specifically at:\r\n\r\n* - header elements\r\n* list elements\r\n* list item elements" - CSDU2 - First-Weblab_markdown_instruction: "# Adding Content\r\n\r\nStart creating - your first web page! Try to create a page with a title and two paragraphs.\r\n\r\n# - Do This\r\n\r\n* Write a sentence about your favorite animal\r\n* On a separate - line write another sentence about your least favorite animal.\r\n* Above both - sentences try adding a title that says \"Animals\"\r\n* Don't forget to click - <img src=\"https://images.code.org/6a35d13b10ed2029a9323c9cb555e39e-image-1477681291001.01.12 - PM.png\" style=\"width:100px\">\r\n* **What do you notice about the structure - of your content?**" - CSDU2 - font properties_markdown_instruction: "# Font Properties\r\nThe way - text looks is called a font. Two properties that control font are `font-family` - and `font-size`.\r\n\r\n## font-family\r\nThere are 5 fonts that will look - the same across any browser:\r\n\r\n* serif\r\n* sans-serif\r\n* monospace\r\n* - cursive\r\n* fantasy\r\n\r\nWe will focus on using those font families to - start. To read more about font families you can go to <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\"> - W3 Schools - CSS font-family</a>\r\n\r\n## font-size\r\nThere are many values - that can be used to determine font-size. Pixels are the easiest to use. A - pixel is one tiny square on the screen. So when a font is 14px that means - its 14 pixels tall.\r\n\r\nFor more details on font properties go to <a href=\"http://www.w3schools.com/cssref/pr_font_font-size.asp\">W3 - Schools - font-size</a>.\r\n\r\n# Do This\r\n\r\n* Add a font-family property - to h1 style to make the font cursive\r\n* Make the text in all the paragraph - elements larger." - CSDU2 - Footer_markdown_instruction: "# Recreating Page\r\n\r\nAt the beginning - of class you looked at a web page and figured out which elements were styled - similarly. Using those guesses and the classes in the starter code can you - recreate the original page?\r\n\r\n# Do This\r\n* Look at the class style - rules to see what they do. Don't worry if you don't know every property - yet. Just use the ones you do know.\r\n* Put elements in the appropriate classes - to recreate the <a href=\"https://studio.code.org/s/csd2/stage/9/puzzle/2\" - target=\"_blank\"> original page </a>" - CSDU2 - head and body tag intro_markdown_instruction: "<div style=\"float: - right; height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**Why - do I need to structure the HTML document this way?**</summary>\r\nAlthough - many modern web browsers can make good assumptions about what language you - are writing in and where to find different information in your document, you - don't want to leave the display of you web page up to chance. To guarantee - the best results for displaying your web page on all computers you need to - assist the computer in figuring out where to find information. <br> <br>\r\n\r\nAs - you go forward you are going to need two different sections in your HTML file. - They will serve different purposes.\r\n<br><br>\r\n1. Content of the page<br>\r\n2. - Information about the page<br>\r\n<br>\r\nBy breaking up a web page this way - it is clear where to find the code that is creating the physical output on - the web page and which code is just information for the computer about the - page.<br><br>\r\n\r\nIn creating web pages we differentiate between these - two areas using the <head> and <body> elements. The <head> - element contains all the information about the page. The <body> element - contains all the content for a web page.\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What - is a head element?**</summary>\r\nThe <head> element contains all the - information about the page. This is extra information that is helpful for - the computer in displaying your web page but is not the physical content of - the web page. \r\n\r\nThe <head> element usually comes above the body - element but inside the <html> element. For right now it will be blank - but later we will learn important things that are added to the head.\r\n</details>\r\n\r\n<details>\r\n<summary>**How - is the head element different than the header elements? **</summary>\r\nThe - header elements (<h1> to <h6>) are used to display headers directly - on your web page for your user to see. The head tag marks the information - that is not user facing in your HTML document. \r\n</details>\r\n\r\n<details>\r\n<summary>**What - is the body element? **</summary>\r\n\r\n The <body> element contains - all the content for a web page. The HTML elements for your headers, paragraphs, - and lists should all go inside the <body> element.\r\n\r\n</details>\r\n</div>\r\n\r\n# - Head and Body\r\n\r\nFormat your HTML document with two sections using the - <head> and <body> elements as shown in the image below. From this - point forward anything you add to an HTML document should go inside either - the <head> or the <body> elements. Put all the content and structure - you have created so far inside the <body> element.\r\n\r\n<img src=\"https://images.code.org/2513d8f7c31e76c2ee5427e512a54a1c-image-1481559174341.png\" - style=\"width:300px\">" - CSDU2 - head body_markdown_instruction: "# Head and Body\r\n\r\nThere are now - two different sections of code in our HTML file:\r\n\r\n1. Content of the - page\r\n2. Information about the page (for right now just how to style it).\r\n\r\nIn - creating web pages we differentiate between these two areas using the <head> - and <body> elements. These elements are important for creating maintainable - code but will also be useful for other things as well. The <head> element - contains all the information about the page, also sometimes called **metadata**. The - <body> element contains all the content for a web page.\r\n\r\nOutline - of the structure of your web page:\r\n\r\n<pre>\r\n<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<style>\r\n \t\t<!--Styling - Goes Here-->\r\n\t\t</style>\r\n\t</head>\r\n\r\n\t<body>\r\n\t\t<!--Content - Goes Here-->\r\n\t</body>\r\n \r\n</html>\r\n</pre>\r\n\r\n\r\n# - Do This\r\n\r\n* Add a <head> element surrounding the styling for the - web page.\r\n* Add a <body> element surrounding the content for the - web page." - CSDU2 - Header of Page_markdown_instruction: "# Header Area\r\n\r\nWebsites - usually have the same navigation bar across all of their pages so you can - get back and forth between things on the site. To do this you need to add - the navigation links to all the pages on your website.\r\n\r\n# Do This\r\n\r\n* - Copy the navigation links section onto all the web pages.\r\n* Copy any styles - you need into the style sheets for those pages." - CSDU2 - Headers_markdown_instruction: "<div style=\"float: right; height: 250px; - width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - are headers?**</summary>\r\nHeaders are the different sized section titles - throughout a web page. Headers add structure to your web page by breaking - it up so its easier for a user to read.\r\n</details>\r\n<details>\r\n<summary>**How - do I create a header?**</summary>\r\nYou can make something a header element - by surrounding it by header tags. For example:\r\n<pre> <h1> Header - Text </h1> </pre> <br> <br>\r\n\r\nNotice how there is a the opening - tag (<h1>) and closing tag (</h1>). The closing tag is the same - as the opening tag except it has `/` after the opening angle bracket. The - text you want to show as the header goes in the middle of the two tags.\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example: \r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is. HTML tags - add structure to the content of a web page.\r\n</details>\r\n<details>\r\n<summary>**Why - do you need an opening and closing tag?**</summary>\r\nYou need both an opening - and closing tag for many HTML elements because it marks where that structure - starts and stops. You don't want all the text on your web page to be a title.\r\n</details>\r\n</div>\r\n\r\n# - Headers\r\n\r\nYou may have noticed on the last level that everything you - type into the editor is getting smashed together. In order to differentiate - between these different parts we use HTML elements to mark the different parts - of a web page. In your investigation with the inspector did you come across - something that made headers?\r\n\r\n# Do This\r\n\r\n* Make your header \"Animals\" - stand out using the `<h1>` header element." - CSDU2 - Hobbies Valid Update_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - is Doctype and how do I use it? **</summary>\r\n<!DOCTYPE html> is always - the first thing in an html document because it notifies the computer that - this is an html document and to interpret it as such. <!DOCTYPE html> - is not technically a tag but instead an instruction to the web browser. <br> - <br>\r\n\r\nAdd <!DOCTYPE html> at the very top of your html file. \r\n</details>\r\n\r\n<details>\r\n<summary>**What - is the <html> element and how do I use it? **</summary>\r\n\r\nThe <html> - tag notifies the computer where the html starts and ends. The <html> - tag is the container for all other HTML elements (The <!DOCTYPE html> - tag does NOT go inside the html element). You will need an opening and closing - <html> tag. This will also make your preview of your website update - automatically if there are no issues with your code! <br> <br>\r\n \r\nWrap - all the content of the file in an HTML element using the <html> tag.\r\n\r\n</details>\r\n<details>\r\n<summary>**Why - do I need to structure the HTML document this way?**</summary>\r\nAlthough - many modern web browsers can make good assumptions about what language you - are writing in and where to find different information in your document, you - don't want to leave the display of you web page up to chance. To guarantee - the best results for displaying your web page on all computers you need to - assist the computer in figuring out where to find information. <br> <br>\r\n\r\nAs - you go forward you are going to need two different sections in your HTML file. - They will serve different purposes.\r\n<br><br>\r\n1. Content of the page<br>\r\n2. - Information about the page<br>\r\n<br>\r\nBy breaking up a web page this way - it is clear where to find the code that is creating the physical output on - the web page and which code is just information for the computer about the - page.<br><br>\r\n\r\nIn creating web pages we differentiate between these - two areas using the <head> and <body> elements. The <head> - element contains all the information about the page. The <body> element - contains all the content for a web page.\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What - is a head element?**</summary>\r\nThe <head> element contains all the - information about the page. This is extra information that is helpful for - the computer in displaying your web page but is not the physical content of - the web page. \r\n\r\nThe <head> element usually comes above the body - element but inside the <html> element. For right now it will be blank - but later we will learn important things that are added to the head.\r\n</details>\r\n\r\n<details>\r\n<summary>**How - is the head element different than the header elements? **</summary>\r\nThe - header elements (<h1> to <h6>) are used to display headers directly - on your web page for your user to see. The head tag marks the information - that is not user facing in your HTML document. \r\n</details>\r\n\r\n<details>\r\n<summary>**What - is the body element? **</summary>\r\n\r\n The <body> element contains - all the content for a web page. The HTML elements for your headers, paragraphs, - and lists should all go inside the <body> element.\r\n\r\n</details>\r\n\r\n</div>\r\n\r\n# - Update Hobbies Page\r\n\r\n<!DOCTYPE html>, <html>, <head>, - and <body> are important to add to your web page. Practice adding them - to update your Hobbies page. In all future levels they will be included for - you so you won't need to add themselves." - CSDU2 - HobbiesPage_markdown_instruction: "# Hobbies Page\r\n\r\nIn this level, - you’ll use what you’ve learned to create your Hobbies page. Get creative with - your Hobbies Page but make sure it meets the basic requirements in the Checklist - first.\r\n\r\n# Checklist\r\n\r\n* 1 title with large header size\r\n* At - least 3 medium headers with each hobby name\r\n* At least 3 small headers - with the amount of time you’ve been doing each hobby\r\n* At least a 2 to - 3 sentence description of each hobby under the hobby’s time inside paragraph - tags" - CSDU2 - HobbiesPageExample_markdown_instruction: "# Example Hobbies Page\r\n\r\nTO - DO: Make this an embed level\r\n\r\nOn the next level you are going to work - on creating your own Hobbies Page. This is an example of the type of page - you are working to create. Come back to this level for reference as needed - while creating your page." - CSDU2 - image properties_markdown_instruction: "# Image Properties\r\n\r\nImages - elements also have properties that can change their style.\r\n\r\n## Size\r\nOne - of the image properties is size. You can control size of an image using the - `width` and `height` properties. The size is determined by the number of pixels - tall and wide an image is. Pixels is abbreviated to `px`. For example to - make all the images 100 pixels wide you would use:\r\n\r\n<pre>\r\nimg {\r\n\twidth: - 100px;\r\n}\r\n</pre>\r\n\r\nAlthough you can control both width and height - it is best practice to only set either width and height since setting both - can distort the image.\r\n\r\n\r\n\r\n## Borders\r\nBorders are a common property - for many elements including images. Borders consist of three properties: `border-style`, - `border-width` and `border-color`.\r\n\r\n<pre>\r\nimg {\r\n border-style: - dashed;\r\n border-width: 5px;\r\n border-color: blue;\r\n}\r\n</pre>\r\n\r\nFor - more information about borders go to <a href=\"http://www.w3schools.com/css/css_border.asp\"> - W3 Schools - Border Properties</a>.\r\n\r\n# Do This\r\n\r\n* Add a rule to - style img elements\r\n* Use the rule to set the width of all images to 200 - pixels\r\n* Add borders to all images. Be creative and try different border - styles and colors." - CSDU2 - Inspector Warm Up_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**<span> - How do I use the Inspector Tool? </span>**</summary>\r\nThe Inspector Tool - is a great way to figure out what unfamiliar code in Web Lab. To turn on the - Inspector Tool click the <img src=\"https://images.code.org/188579d7c6e7645d0d2edd203a33bd63-image-1480361561351.31.56 - PM.png\" style=\"width:100px\">. You will know that the Inspector Tool is - on because the button will turn white and say Inspector: On. Once you turn - on the Inspector Tool you can hover over any element in the preview area and - Web Lab will highlight the associated code.\r\n</details>\r\n\r\n</div>\r\n\r\n# - Language Detective\r\n\r\nUse the Inspector Tool to check out the code for - this website someone created on Web Lab! Focus on the index.html file open - for now.\r\n\r\nTry to answer the following questions:\r\n\r\n* In what ways - is this language similar to or different from the languages your groups invented - in the last lesson?\r\n* What are the rules of this language?\r\n* How does - this language add structure to the website?\r\n\r\n**Wait for instructions - from your teacher before going on to the next level.**" - CSDU2 - Internet Speed Test_markdown_instruction: "# Peer Review\r\n\r\nToday - you are going to have other people look at your website and give feedback - on it.\r\n\r\n# Do This\r\n\r\n* Leave this open on your screen so your peer - reviewers can look at your work" - CSDU2 - Intro to CSS_markdown_instruction: "# Style Element\r\n\r\nUp until - now you have only been able to add content to your page. In Web Developers - intentionally separate content and style to make their code easier to maintain. HTML - is the language used to add content to a web page. CSS is a language that - adds style to a web page. \r\n\r\nIn CSS style rules are used to style certain - elements of HTML. Style rules explicitly call out certain properties of the - element to be styled. To add CSS style rules to an HTML page, you need to - first add an HTML `<style>` element. This signals to the web browser that - all the stuff inside the `<style>` element is CSS styling instructions. \r\n\r\n\r\n# - Do This\r\n\r\n* Add the `<style>` element right below the opening `<html>` - tag. \r\n\r\nWe will add CSS to change the look of the page on the next level!" - CSDU2 - Intro to Validator_markdown_instruction: "# Validator\r\n\r\nThe validator - is a tool that allows you to check if a page is following good HTML fundamentals - and will work consistently across many different computers and web browsers.\r\n\r\n# - Do This\r\n\r\nUse the validator to check if the web page on this level meets - the requirements for consistent web pages. To use the validator, it’s important - to work on it one error at a time.\r\n\r\n1. Open up the <a href=\"https://validator.w3.org/\" - target=\"_blank\">W3 validator</a>.\r\n2. Click **\"Validate by Direct Input\"**\r\n3.** - Copy and paste the contents of index.html** file into the box.\r\n4. Click - **“Check”**\r\n5. If there is an error message click the top error below:\r\n\r\n\t* - <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> Unable to Determine - Parse Mode! </a>\r\n\t* <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> - No DOCTYPE found, and unknown root element. Aborting validation. </a>\r\n * - <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/5\"> Element head - is missing a required instance of child element title. </a>\r\n * <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/5\"> - Element title must not be empty.</a>\r\n * <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> - Start tag seen without seeing a doctype first. Expected e.g. <!DOCTYPE html>.</a>\r\n\r\n\tOnce - you fix the error start again at step 1.\r\n\r\n6. If there are no error messages - <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/6\">click here </a> - to head to the next set of levels!" - CSDU2 - Link and Nav_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - are hyperlinks?**</summary>\r\nHyperlinks can connect to local web pages or - external web pages. To add navigation to your website you will need to add - hyperlinks which connect your individual web pages. You can **add hyperlinks - to your web page using the `<a>` element**. The text you want to display - as the hyperlink goes between the opening and closing hyperlink tags. The - `<a>` element has an attribute `href` which is the location to link to. The - location of a local page is just the file path for that page. <br> <br>\r\n\r\nFor - example to link to the unique houses page you would add the following code - inside your `<body>` element. <br><br>\r\n\r\n<pre>\r\n<a href=”houses.html”> - Unique Houses </a>\r\n</pre>\r\n\r\n</details>\r\n<details>\r\n<summary>**How - do I add a hyperlink?**</summary>\r\nYou can **add hyperlinks to your web - page using the `<a>` element**. The text you want to display as the hyperlink - goes between the opening and closing hyperlink tags. The `<a>` element has - an attribute `href` which is the location to link to. The location of a local - page is just the file path for that page. <br> <br>\r\n\r\nFor example to - link to the unique houses page you would add the following code inside your - `<body>` element. <br><br>\r\n\r\n<pre>\r\n<a href=”houses.html”> Unique - Houses </a>\r\n</pre>\r\n\r\n</details>\r\n</div>\r\n\r\n# Hyperlink - Element\r\n\r\n* In the index.html file, find the line of code that says that - says `<a href=\"houses.html\">Odd Houses</a>`. This is a link that will take - you to the Odd Houses page at `houses.html`.\r\n* Discuss with a partner how - the code works.\r\n * Where does the file name go?\r\n * Where does the label - of the link go?\r\n* Below the hyperlink to the Odd Houses page add two new - hyperlinks (`<a>`) to the following pages:\r\n * Crazy Signs Page\r\n * - Guinness Book of World Records Page\r\n* Test it out to see if clicking the - links take you to the other pages of your site." - CSDU2 - Link Tag_markdown_instruction: "# Link Element\r\n\r\nIn the last level - you moved your style out into an external style sheet. You may have noticed - though that the style was no longer appearing on the page. To get the style - to apply to the web page we need to connect the html and css files.\r\n\r\n**To - link sheets you will need to add a `<link>` element.** The `<link>` element - goes inside the `<head>` element since it is information about the page and - not content of the page. You can link a stylesheet to multiple pages if you - want them all to have the same style.\r\n\r\n`<link>` element has two main - attributes: `rel` and `href`.\r\n\r\n* As you learned before for images the - `href` attribute is the file path, in this case just the same of the CSS file. \r\n* - The `rel` attribute indicates the relationship that the linked file has to - the current file, in this case its a stylesheet.\r\n\r\nFor example:\r\n<pre>\r\n<head>\r\n <link - rel=\"stylesheet\" href=\"styles.css\">\r\n</head>\r\n</pre>\r\n\r\n# - Do This\r\n\r\n* For the index.html link the css file using the `<link>` element - in the `<head>` element" - CSDU2 - Local Images_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - do I add images?**</summary>\r\nThe `<img>` tag allows you to show images - on your web page. <br><br>\r\n\r\nExample:\r\n<pre><img src=\"dog.png\" - alt=\"dog jumping\"/></pre><br><br>\r\n\r\nIn order to tell the browser - which file to use, extra information, called an **attribute**, is added to - the <img> tag inside the brackets. The attribute `src` stands for **s**ou**rc**e - and tell the name of the image. Image files names include extensions which - tell the computer which type of image they are working with. Common extensions - are .jpg, .jpeg, .png. <br><br>\r\n\r\nIn addition to have the src attribute, - image elements also have the `alt` attribute which describe the image. This - is important in case the image doesn’t load or for people who have trouble - with their eyesight. <br><br>\r\n\r\nAn `<img>` tag is an example of a **void - element** because it starts and closes in one tag. To mark this we put the - `/` which usually goes in the close tag at the end of the image tag.\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is a void tag?**</summary>\r\nAn `<img>` tag is an example of a **void element** - because it starts and closes in one tag. To mark this we put the `/` which - usually goes in the close tag at the end of the image tag. Void tags do not - need a closing tag because there is no text content which must be wrapped - in tags. The content that shows on the screen is specified through the tags - attributes.\r\n</details>\r\n<details>\r\n<summary>**Why does an image tag - not have a closing tag?**</summary>\r\nAn image tag is a void tag and void - tags do not need a closing tag because there is no text content which must - be wrapped in tags. The content that shows on the screen is specified through - the tags attributes.\r\n</details>\r\n<details>\r\n<summary>**What is an attribute?**</summary>\r\nAttributes - are extra information included in a tag. Attributes have names and values. - The name tells what type of information is being provided and then the value - gives the specific information for that tag. \r\n\r\nFor example <img> - tags have two attributes, src and alt. src specifies the name of the image - file and alt tells the browser in readable text what the image is.\r\n</details>\r\n</div>\r\n\r\n# - Images\r\n\r\nA Dog vs Cat web page has been started for you. The dog image - has already been added to the below web page. Use an image tag to add the - cat.jpeg image to the page below the cat header." - CSDU2 - Matching Class Style Checker_markdown_instruction: "# Check your matching - answers\r\n\r\nTest out your guesses from the matching activity by applying - the class styling to the elements and see if it produces the same result. - The results from the slide show are shown below.\r\n\r\n| Question 1 | Question - 2 | Question 3 | Question 4 | Question 5 |\r\n| ---------- | --------- | - ---------- | ---------- | ---------- |\r\n| <img src=\"https://images.code.org/702e804602dbf28874f516f1578fd883-image-1475259238611.54.05 - PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/7f6a2c9561213f6b5c8c9285f94ae850-image-1475259241204.25.16 - PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/291f01b170f9242a26f04f8eb8296471-image-1475259238611.52.46 - PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/81c9db1d1258f0fd709ba4508806388c-image-1475259238611.53.08 - PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/43df26d786235bf2402854b56c8bbcf5-image-1475259238610.50.22 - PM.png\" style=\"width:250px\"> |" - CSDU2 - Missing Home Link_markdown_instruction: "# Missing Home Link\r\n\r\nCopying - your hyperlinks to all your pages allowed you to get to most of the pages - on your website from any other page. One hyperlink is missing - the one to - get you to your home page (index.html).\r\n\r\n**Add a hyperlink to your home - page from all the pages, even your home page itself.** Adding it to your home - page will keep your navigation header consistent on all pages." - CSDU2 - Multi Site First_markdown_instruction: "# Making a Multi-page Site\r\n\r\nA - web site should include more than one web page, and they should connect to - each other. The first multi-page site you make will be a site of Odd Stuff. Most - of the site is already here, but you will need to add your Guinness Book of - World Records page.\r\n\r\n* In the list of project files, find index.html - and click on it. **index.html is used in Web Lab to mark the home page of - a website**, the first page that your visitors will see.\r\n* Click on some - of the other HTML files. These are also web pages, but they have different - names. **Every file needs a unique name that will help you know what it is.**\r\n* - Look around through all the files provided. Can you figure out which style - sheets go with which web pages?" - CSDU2 - Nav add to Personal Site_markdown_instruction: "# Navigation on Personal - Website\r\n\r\nNow that you have all the files for your website, connect them - together!\r\n\r\n# Do This\r\n\r\n* Add hyperlinks at the top of your index.html - file for every page on your site (including the index.html page).\r\n* In - your style sheet, create a rule-set for the `a` tag that gives it the style - that you want.\r\n* Copy the hyperlinks and put them in every page.\r\n\r\n\r\n* - Add the `a` rule-set to every style sheet, or combine your style sheets to - make your entire page have the same look and feel!\r\n\r\nOnce your website - is set up and connected, feel free to make improvements to any pages on your - website.\r\n\r\nBefore leaving this level:\r\n* Take a screenshot of your - home page and save it somewhere on your computer so you can find it later - (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Check List\r\n\r\n* All of your web pages are individual - HTML files in this Portfolio Project" - CSDU2 - Nav on Personal Website_markdown_instruction: "# Multi-Page Personal - Website\r\n\r\nNow that you know how to set up a website, go ahead and set - up your own personal website.\r\n\r\n# Do This\r\nYour personal website is - back. So far you have just your personal home page.\r\n\r\n* Add html files - for each of the Hobbies Page, Recipe Page, and About Me page\r\n* Copy the - code from the following levels <a href=\"https://studio.code.org/s/csd2/stage/4/puzzle/14\" - target=\"_blank\">Hobbies Page</a>, <a href=\"https://studio.code.org/s/csd2/stage/4/puzzle/17\" - target=\"_blank\">Recipe Page</a>, and <a href=\"https://studio.code.org/s/csd2/stage/8/puzzle/12\" - target=\"_blank\">About Me page</a> into the files you created.\r\n* Add a - CSS file for your <a href=\"https://studio.code.org/s/csd2/stage/8/puzzle/12\" - target=\"_blank\">\"About Me\" page style sheet</a>." - CSDU2 - New Class Files_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**Why - is the style sheet not working? **</summary>\r\nCheck in the HTML of the records - page to make sure that your link (`<link rel=\"stylesheet\" href=\"nameofstylesheet.css\">`) - is linking to the correct CSS file.\r\n</details>\r\n</div>\r\n# Making a - Multi-page Site\r\n\r\nYou may notice that your styles for your Guinness Book - of World Records don't seem to be working. Can you figure out why? \r\n\r\n**Hint:** - When you brought over your code you had to change the name of the style sheet - from \"style.css\" to something else." - CSDU2 - New Html Files_markdown_instruction: "# Adding HTML and CSS\r\n\r\nYou - will need to add your Guinness Book of World Records page. First create an - HTML and CSS file. On the next level you will bring over the code.\r\n\r\n## - Adding File\r\n* Add a new HTML file by clicking the \"Add HTML\" button.\r\n* - Rename the file, either by right clicking it and choosing \"Rename\", or by - clicking on it when it's already highlighted. **Make sure the name is unique, - descriptive and ends in \".html\"**.\r\n* Create a new CSS file and rename - it, too." - CSDU2 - ordered Lists_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - are the two types of lists?**</summary>\r\n There are two types of lists in - HTML, ordered and unordered lists.\r\n</details>\r\n<details>\r\n<summary>**What - is an unordered list?**</summary>\r\nAn unordered list is just a set of bulleted - items.\r\n</details>\r\n<details>\r\n<summary>**How do I make an unordered - list?**</summary>\r\n\r\nAn unordered list element has the tag <ul> - . Notice that this is an abbreviation for <strong>U</strong>nordered <strong>L</strong>ist. - Each item on the list is marked by a list item element <li>. Notice - that this is also an abbreviation for <strong>L</strong>ist <strong>I</strong>tem. The - list item element is a child element which means that you don't use it on - its own. It is contained inside a list element. It can be helpful to indent - your <li> tags so its clear that is contained in the <ul> tags.\r\n\r\n<table - border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> - <ul> <br> <li>Red </li> <br> <li>Green </li> - <br> <li>Blue</li> <br> </ul> </pre></td>\r\n<td><img - src=\"https://images.code.org/25d4dfc9b6c448d0da305df66aa1dfb7-image-1473444368948.05.32 - PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is an ordered list?**</summary>\r\nAn ordered list is a set of bulleted items - which are numbered.\r\n</details>\r\n\r\n<details>\r\n<summary>**How do I - make an ordered list?**</summary>\r\n\r\nAn ordered list element has the tag - <ol> . Notice that this is an abbreviation for <strong>O</strong>rdered - <strong>L</strong>ist. Each item on the list is marked by a list item element - <li>. Notice that this is also an abbreviation for <strong>L</strong>ist - <strong>I</strong>tem. The list item element is a child element which means - that you don't use it on its own. It is contained inside a list element. - It can be helpful to indent your <li> tags so its clear that is contained - in the <ul> tag.\r\n\r\n<table border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> - <ol> <br> <li>Step 1 </li> <br> <li>Step 2 </li> - <br> <li>Step 3 </li> <br> </ol> </pre></td>\r\n<td><img - src=\"https://images.code.org/3ef357cfad8ac98a8b30beb229ebcb78-image-1473446360428.39.04 - PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is. HTML tags - add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# - Ordered Lists\r\n\r\nCreate an ordered list for each step in your recipe under - the Directions header" - CSDU2 - p tags_markdown_instruction: "# Background Color\r\n\r\nAnother common - CSS property used to style pages is `background-color`. This property will - set the background color of a specific element. You can use any of the CSS - colors for background color.\r\n\r\nFor example the code below will set the - text color of all h1 elements to blue and the background color to red.\r\n\r\n<pre>\r\nh1 - {\r\n\tcolor: blue;\r\n\tbackground-color: red;\r\n}\r\n</pre>\r\n\r\n# Do - This\r\nTry out the `background-color` property with paragraphs.\r\n\r\n* - Give all the paragraphs (`<p>`) elements a background color of your choice." - CSDU2 - Paragraphs 2_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - is a paragraph element?**</summary>\r\nParagraphs are marked by opening(`<p>`) - and closing(`</p>`) tags as well. Paragraphs in HTML can be any length of - text from one word to a bunch of sentences. All of your text in your web page - should be contained in an HTML element (headers or paragraphs). Paragraphs - group together sets of sentences and put some space between that group of - text and the next group of text.\r\n</details>\r\n<details>\r\n<summary>**How - do I create multiple paragraphs?**</summary>\r\nParagraphs are marked by opening(`<p>`) - and closing(`</p>`) tags as well. To create more than one paragraph you will - want multiple sets of opening and closing `<p>` tags. For example\r\n<pre>\r\n\t<p>\r\n \tThis - is a paragraph.\r\n </p>\r\n\t<p>\r\n \tThis is another - paragraph.\r\n </p>\r\n</pre>\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example: \r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is.\r\n</details>\r\n</div>\r\n\r\n# - Paragraphs\r\n\r\nNow that you have a header try to separate the two sentences - like the example below using the paragraph element.\r\n\r\n<img src=\"https://images.code.org/12f8d4230fcd2144a5880815c8375149-image-1480364278934.12.18 - PM.png\" style=\"width:300px\">" - CSDU2 - Paragraphs 3_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - do I make different sized headers?**</summary>\r\nHeaders come in 6 different - sizes. So far you have primarily used the biggest one <h1>. The number - 1 in the HTML tag designates that this is the biggest header. The smallest - header is <h6>. You can also try the <h2>, <h3>, <h4>, - and <h5> tags which get smaller as the number gets larger.\r\n</h1>\r\n</details>\r\n<details>\r\n<summary>**What - are headers?**</summary>\r\nHeaders are the different sized section titles - throughout a web page. Headers add structure to your web page by breaking - it up so its easier for a user to read.\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example: \r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is.\r\n</details>\r\n</div>\r\n\r\n# - Header Sizes\r\nAdd the names of your favorite animals above the sentence - they go with. Make the names of the animals smaller headers than the \"Animals\" - title for the page. See the example below.\r\n\r\n<img src=\"https://images.code.org/1462f452bd2d983902f47e275da9fa90-image-1481137414337.03.11 - PM.png\" style=\"width:250px\">" - CSDU2 - Priority of CSS Rules_markdown_instruction: "# Priority of CSS Rules\r\n\r\nOn - the last level you moved all the style rules to one style.css file that is - linked to both web pages on the website. You may have noticed that the way - some of the styling of the elements on the two pages changed. Over the next - couple levels you will be working to fix this.\r\n\r\n## Multiple Rules for - One Element\r\n\r\nBy copying the style rules from two different pages into - one style sheet we created a couple cases where we have two style rules for - one element. Style rules are applied from top to bottom so when there are - multiple style-rules for the same properties of one element the one closer - to the bottom is the one that will appear.\r\n\r\nFor example if you had the - following style rules.\r\n\r\n<pre>\r\np{\r\n background-color: blue;\r\n}\r\np{\r\n background-color: - red;\r\n}\r\n</pre>\r\n\r\nThe pargraph elements would have a red background.\r\n\r\nTo - fix this issue the best thing to do is have one rule for each type of element.\r\n\r\n# - Do This\r\n\r\n* There are two style rules for `<div>` elements. They are - both the same. Delete one of them.\r\n* There are two style rules for `<body>` - elements. They are **different** but both just control the `background-color` - decide which of the two you would like to keep and get rid of the other one.\r\n* - Leave the duplicate `<img>` element style rules for now we will deal with - them on the next level." - CSDU2 - PW - Class Style Personal Site_markdown_instruction: "# Free Play Styling\r\n\r\nYour - turn to decide what you want to style! Play with the classes styling and RGB - colors to improve your personal website.\r\n\r\n* Make sure you have completed - the checklist below \r\n* Take a screenshot of your home page and save it - somewhere on your computer so you can find it later (*Need help with how to - screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Checklist\r\n\r\n* On your hobby page, give each hobby its - own text color using RGB values.\r\n* On your recipe page, give all the parts - of the ingredients list the same background color, including the title.\r\n* - Use classes to style at least 2 other elements of your personal website" - CSDU2 - PW - Classes on Recipe_markdown_instruction: "# Classes on Recipe Page\r\n\r\nIn - the next few levels, as a little more practice with style, you will style - some of the elements on your recipe page in order to give the appearance of - a notecard. You will want to make the background of the ingredients list and - the directions lists look like notecards.\r\n\r\n# Do This\r\n\r\n* In the - recipe page add the ordered list for directions to the \"notecard\" class\r\n* - In the recipe page add the unordered list for the ingredients to the \"notecard\" - class\r\n* Add a style rule for the notecard class but don't put anything - in it. You will start working on it on the next level." - CSDU2 - PW - Consistent Personal Site Style_markdown_instruction: "# Consistent - Style\r\n\r\nYour site’s pages might look crazy since you pulled together - the style of all the pages in the last level. It is time to work on that by - creating classes for style exceptions.\r\n\r\n# Do This\r\n\r\n* Identify - the exceptions to the style rules such as the note card styling\r\n* Use classes - to separate the styling of those unique elements\r\n* Move the styling for - those classes into your style.css file\r\n* Get ride of all `<style>` elements - and the style rules inside them\r\n* Your website should now have a consistent - look!" - CSDU2 - PW - Divs to break up the page_markdown_instruction: "# Header and - Content Divs\r\n\r\nGrouping together the different sections of a web page - will make styling the web page easier. It also helps make clear to the user - where to look for different content. You saw an example of this earlier in - the levels.\r\n\r\n# Do This\r\n\r\n* Put all the elements for the navigation - of the website and the title of the website in div if it not already\r\n* - Set the class of that div to be \"header\"\r\n* Put all the rest of the elements - on the page in a different div \r\n* Set the class for the second div to be - \"content\"\r\n* These will get styled on the next level!" - CSDU2 - PW - ESS Final touches_markdown_instruction: "# Finalizing Styling\r\n\r\nYou - should have completed styling your page with an external style sheet. Now - it is time to finish up anything you still want to work on.\r\n\r\n# Do This\r\n\r\n* - Go over the checklist below to make sure you have completed everything\r\n* - Work on continuing to improve your website!\r\n* Take a screenshot of your - home page and save it somewhere on your computer so you can find it later - (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Checklist\r\n\r\n* Picked and used a font pair consistently - across your website\r\n* Pick and used a color set of no more than 4 primary - colors across your website. It is okay if you use different shades of those - colors as well.\r\n* All style rules are in an external style sheet named - style.css\r\n* The style.css file is linked to all pages on the website\r\n* - Each page has:\r\n\t* Header div with the title of the website, the logo for - your website, and the navigation bar\r\n * Content div with the main content - of the web page\r\n * The logo as the favicon for that page\r\n* Clicking - the logo on any page will take you back to the home page" - CSDU2 - PW - External Style Sheets_markdown_instruction: "# External Style - Sheet\r\n\r\nAlright you just learned how to add an external style sheet to - create consistent style across a website. When there are specific things you - want to style differently you have practiced using classes. It is time to - use these in your Personal Website. To start, get all the style into one external - style sheet linked to each web page.\r\n\r\nYou can mark the different sections - of the .css file with comments. Comments in CSS use different notation than - comments in HTML. Comments in CSS look like this: `/* This is a comment */`\r\n\r\n# - Do This\r\n\r\n* Create a CSS file and name it style.css\r\n* Cut/Paste the - CSS code from your <a href=\"\" target=\"_blank\">style tester level</a> to - style.css\r\n* Link the stylesheet to each document in a project." - CSDU2 - PW - Favicon_markdown_instruction: "# Favicon\r\n\r\nSince you have - a logo for your website it would also be cool to have it be small image associated - your website. The small image associate with your website is called a **favicons**. - Favicon is short for favorite icon. It displays in the tab for a website, - when a website is bookmarked, and sometimes in the browsers address bar.\r\n\r\nFor - example when you open a tab for Code.org it might look like this. The icon - on the left is the favicon.\r\n\r\n<img src=\"https://images.code.org/9db8bd43bf27355cd6ed799358775140-image-1475697356699.55.40 - PM.png\">\r\n\r\nFavicons are metadata for the website since they are used - by the web browser and not content on the web page itself. Therefor they are - included in the `<head>` element. To add the favicon you use the `<link>` - element. The `href` still is the file path but the `rel` is \"shortcut icon\".\r\n\r\nFor - Example:\r\n\r\n<pre>\r\n<head>\r\n\t<link rel=\"shortcut icon\" - href=\"logo.png\" />\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* - Set your icon to be the favicon for your website. You need to add it to every - page for it show up on each page." - CSDU2 - PW - Final Classes Style_markdown_instruction: "# Note Card Styling\r\n\r\nNow - that you have the background of the note cards, you can finish up the styling - of the note card. \r\n\r\nBefore you start styling it is important to know - something about borders. So far you have controlled all four-sides of a border - at the same time. Sometimes you want to style just one border edge at a time. - To do this we just add the name of the side to the property. For example:\r\n\r\n<pre>\r\np - {\r\n\tborder-top-color: green;\r\n\tborder-bottom-style: solid;\r\n\tborder-right-width: - 20px;\r\n}\r\n</pre>\r\n\r\n# Do This\r\n<img src=\"https://images.code.org/b38ebda06d6ce76bd59aa93fa050290c-image-1475159743251.30.18 - AM.png\" style=\"width:400px;float:right\">\r\n\r\nStyle the note card so - it looks similar to the image on the right.\r\n\r\n* Make the writing on the - note card look like handwriting by using the font-family property and coloring - it different than the rest of the text on the page\r\n* Make all note cards - have a fixed width by setting the width of the notecard class to 500 pixels\r\n* - Make the note card pop and look 3D using border properties.\r\n\t* Set the - border color to the same color as the background of the card.\r\n * Set - the style to `outset`\r\n * Set the width to a small number of pixels\r\n* - Style the bottom border of all li elements to be black, solid, and 1 pixel.\r\n* - Style the bottom border of all h3 elements to be red, solid, and 1 pixel." - CSDU2 - PW - Image as A Link_markdown_instruction: "# Image as a Link\r\n\r\nNow - that you have a logo lets add it to your website. It will go on every individual - page in your header with your navigation and website title. Often clicking - on the logo of a website will take you back to the home page of a website. - So we will set that up as well.\r\n\r\nTo make an image also a link we just - wrap the `<img>` element in a `<a>` element.\r\n\r\n<pre>\r\n<a href=\"index.html\"> - <img src=\"logo.png\" alt=\"logo\"> </a>\r\n</pre>\r\n\r\n# Do - This\r\n\r\n* Upload your logo to your project.\r\n* Insert the logo using - an `<img>` element in the header div of each page\r\n* Make the image a link - by surronding the `<img>` element in an `<a>` element that directs to the - index.html page" - CSDU2 - PW - Pre Publishing 2_markdown_instruction: "# HTML Tags Check\r\n\r\nThe - next check should be for bugs or issues with your HTML. \r\n\r\n# Do This\r\n\r\n* - Make sure you are viewing your index.html file on Web Lab\r\n* Open your Web - Development Practices to page 2\r\n* Read through the list of basic HTML tags - you have seen\r\n* Check through your page to make sure you are using the - tags correctly and not missing tags" - CSDU2 - PW - Pre Publishing 3_markdown_instruction: "# Bugs Check\r\n\r\nThe - next check should be for general bugs.\r\n\r\n# Do This\r\n\r\n* Open your - Web Development Practices to page 3\r\n* Read through the list of bugs you - have seen\r\n* Check through your page to make sure none of those bugs are - appearing in your current website" - CSDU2 - PW - Pre Publishing 4_markdown_instruction: "# CSS Properties Check\r\n\r\nThe - next check should be for styles you still want to add or fix.\r\n\r\n# Do - This\r\n\r\n* Make sure you are viewing your style.css file on Web Lab\r\n* - Open your Web Development Practices to page 4\r\n* Read through the list of - basic CSS properties you have seen\r\n* Think about if there are styles you - still want to add or improve" - CSDU2 - PW - Pre Publishing 5_markdown_instruction: "# Personally Identifiable - Information Check\r\n\r\nEarlier in this lesson you made a list of information - you would not want to give away on your website. Use that list to check your - site. This is the most important step before publishing your website for all - to see.\r\n\r\n# Do This\r\n\r\n* Open your Web Development Practices to page - 5\r\n* Read through your list of rules for protecting your PII\r\n* Be a sleuth - on your own page and make sure people can not find out that important information - you want to protect.\r\n* Remove the information you don't want people to - know. This doesn’t have to mean stripping all of the personal importance out - of your site, it can be as simple as cropping an image to remove faces or - replacing your school’s name with “my school”." - CSDU2 - PW - Pre Publishing 6_markdown_instruction: "# Publishing!\r\n\r\nIt - is time to share your website!\r\n\r\n# Do This\r\n\r\n* Check your website - one more time to make sure you are ready to share it with others\r\n* Notice - the \"Share\" button has appeared at the top of the screen.\r\n* Click the - share button and copy the URL for your website.\r\n* Send that URL to friends - and family as instructed by your teacher.\r\n\r\nIf you made changes to your - home page during class make sure to take a screenshot of your home page and - save it somewhere on your computer so you can find it later (*Need help with - how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)" - CSDU2 - PW - Pre Publishing Access_markdown_instruction: "# Accessibility Check\r\n\r\nThe - next check should be for accessibility issues.\r\n\r\n# Do This\r\n\r\n* Open - your Web Development Practices to page 5\r\n* Read through the list of accessibility - issues you had identified\r\n* Make sure you fixed all the issues you had - listed\r\n* Check for any new content you have added for accessibility issues" - CSDU2 - PW - Pre Publishing Check_markdown_instruction: "# High Quality Features - Check\r\n\r\nUse your Web Development Practices - Project Guide to review - your website for publishing. First you will look at the list of features you - said you thought made something a high quality website to make sure you are - doing those things.\r\n\r\n# Do This\r\n\r\n* Open your Web Development Practices - to page 1\r\n* Read through the feature list\r\n* Pick a couple features you - might want to improve after reading the list" - CSDU2 - PW - Publish It_markdown_instruction: "# Publish It\r\n\r\n\r\n# Do - This\r\n\r\n* Publish it" - CSDU2 - PW - RGB color_markdown_instruction: "# RGB Color\r\n\r\nIn order to - get a nice “fake” notecard color, you will have to break out from the named - color values given in Web Lab. \r\nInstead, you will be using the RGB function, - which takes three values, the amount of red, green and blue you want in your - color. Each component of the color (red, green, blue) can have a value of - 0 to 255. Where 0 means the component color is not present or dark and 255 - means it is full present or bright.\r\n\r\nFor example:\r\n\r\n<pre>\r\n\r\nh1 - {\r\n\tcolor: rgb(120, 0, 255);\r\n}\r\n</pre>\r\n\r\nTo explore RGB colors - go to <a href=\"http://www.w3schools.com/colors/colors_rgb.asp\">W3 Schools - - RGB Colors </a>. There is a tool for you to play around with different RGB - values.\r\n\r\n# Do This\r\n\r\n* Play with the <a href=\"http://www.w3schools.com/colors/colors_rgb.asp\">W3 - Schools - RGB Colors </a> tool and find a color similar to this color: <img - src=\"https://images.code.org/2de78dc9667e9e6c77dc5e28b1de6b0d-image-1475095252137.40.30 - PM.png\" style=\"width:50px\">\r\n\r\n* Set the `background-color` of the - notecard class to the yellow you just created.\r\n\r\n*Hint: Yellow is a **bright** - color with **equal amounts of red and green**. *" - CSDU2 - PW - Title for Your Site_markdown_instruction: "# Website Title\r\n\r\nin - head element need to add title element with your title\r\n\r\nshows up in - the name of the tab\r\n\r\n# Do This\r\n\r\n* Stuff" - CSDU2 - PW - Validate Your Website_markdown_instruction: "# Validator\r\n\r\nThe - HTML is designed to display the same way on all computers, but sometimes you’ll - notice that different web browsers, or even different versions of the same - browser, display a website differently. Often this is because you either missed - a rule of HTML, or didn’t describe your content specifically enough. Fortunately - there’s a tool called the Validator that can check your code for errors!\r\n\r\n# - Do This\r\n\r\n* Open up the <a href=\"https://validator.w3.org/#validate_by_input\" - target=\"_blank\">Validator - Website</a>\r\n* For each html file in your - project\r\n\t* Copy the html into the box\r\n * Click check to see if there - are an error\r\n\t* Make a list of all unique errors.\r\n * For each error, - write in your own words what you think it means\r\n * For each error, search - to find a potential solution." - CSDU2 - Recipe Page Start_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is. HTML tags - add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# - Recipe Page\r\n\r\nYou are going to start a new web page. This will be a favorite - recipe page. It will take a couple levels to build the page. Use your knowledge - from earlier in class to start getting it set up.\r\n\r\n# Do This\r\n\r\n* - Take out your recipe you picked.\r\n* Using a large header tag, put the name - of the recipe at the top of the page.\r\n* Create three smaller headers: Description, - Ingredients, and Instructions.\r\n* Add a paragraph element under the \"Description\" - describing the dish the recipe creates." - CSDU2 - Recipe Valid Update_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - do I alert the web browser what language I'm writing in?**</summary>\r\n\r\nYou - will need to add two things to your HTML document, Doctype and an html element. - \r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**Why do I need to add these - elements?**</summary>\r\n\r\nWhen a web browser is trying to read your document - it looks for alerts which tell it which language you are using. In order to - let the web browser know that this is an html document you need to tell it - what type of document it is deal with (Doctype) and where to find the code - (inside the html element).\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What - is DOCTYPE and how do I use it? **</summary>\r\n<!DOCTYPE html> is always - the first thing in an html document because it notifies the computer that - this is an html document and to interpret it as such. <!DOCTYPE html> - is not technically a tag but instead an instruction to the web browser. <br> - <br>\r\n\r\nAdd <!DOCTYPE html> at the very top of your html file. \r\n</details>\r\n\r\n<details>\r\n<summary>**What - is the HTML element and how do I use it? **</summary>\r\n\r\nThe <html> - tag notifies the computer where the html starts and ends. The <html> - tag is the container for all other HTML elements (The <!DOCTYPE html> - tag does NOT go inside the html element). You will need an opening and closing - <html> tag. This will also make your preview of your website update - automatically if there are no issues with your code! <br> <br>\r\n \r\nWrap - all the content of the file in an HTML element using the <html> tag.\r\n\r\n</details>\r\n\r\n</div>\r\n\r\n# - Doctype and HTML tag\r\n\r\nThis is your Recipe page from the last lesson. - Update it with elements that alert your browser which language the document - was written in by adding DOCTYPE and <html> elements.\r\n\r\n![](https://images.code.org/f75e718b8e40870e7b6d87c0efdfc0ae-image-1481320053480.png)" - CSDU2 - Selector and Property_markdown_instruction: "# CSS Style Rules\r\n\r\nStyle - rules consists of two main parts: the selector and the property. All style - rules go inside the `<style>` element.\r\n\r\n# Selector\r\nThe selectors - can be any part of the web page you want to style. One way you can identify - parts of the web page is using the names of the element. Selecting an element - will make all elements of that type have the given styling. The selector name - for HTML elements is the name of the tag with the brackets removed. In the - below example the selector is `h1` and it will style all the h1 tags with - the properties inside the `{ }`.\r\n\r\n# Property\r\nThe property describes - which style component of the selected element to change. There are lots of - different style properties you can change about your web page. Not all properties - can be used for all elements.\r\n\r\nThe first property we will use is the - `color` property. The **`color` property sets the color of text** and works - for any text elements including paragraphs, lists and headers. There are tons - of colors you can choose. Luckily Web Lab pops up a list as you type. You - can also look at the full list of colors at <a href=\"http://www.w3schools.com/cssref/css_colors.asp\">W3 - Schools - CSS Colors</a>.\r\n\r\nExample:\r\n\r\nThe below style will make - all the h1 headers on the page have blue text.\r\n\r\n<pre>\r\n <style>\r\n h1{\r\n color:blue;\r\n }\r\n </style>\r\n</pre>\r\n\r\n# - Do This\r\n\r\n* Add a style rule for h1 headers so the text is green.\r\n* - Add another rule that defines the color of h3 headers. Pick any color you - would like." - CSDU2 - SEO 1_markdown_instruction: "# Personal Website: Search Engine Optimization\r\n\r\nYou - are going to update your website to optimize for finding it on a search engine. - It is important to know that your website it might not be easy to find on - a search engine. This might be partially a result of improvements you could - make to your website. However since your website is hosted by Code.org and - does not have a descriptive URL it might be harder to find.\r\n\r\n# Do This\r\n\r\n* - Run your website through the <a href=\"http://www.seocentro.com/tools/seo/seo-analyzer.html\" - target=\"_blank\"> SEO </a>\r\n* Write down the issues it highlights with - your website\r\n* We will learn how to fix some of those issues in the next - couple levels however some may be things you want to investigate on your own - later such as Social Media presence." - CSDU2 - SEO 2_markdown_instruction: "# Search Engine Optimization: Title\r\n\r\nOne - piece of metadata that should be included in every web page you create is - the website title. Although you may put an `<h1>` element on your page content - with the title of your website, the computer does not necessarily know that - is the title as there may be multiple `<h1>` tags on your page. To make clear - to the computer what the title is the `<title>` element is added as metadata - in the `<head>` element. Every page on your website needs it own title.\r\n\r\nExample:\r\n<pre>\r\n<head>\r\n\t<title> - My Website Title</title>\r\n</head>\r\n</pre>\r\n\r\nThis `<title>` - element is not displayed anywhere on the page but the browser may use it to - put a name in the tab of your web browser or display it when someone searches - for your website. In fact titles are very important to search engines because - titles are often a primary piece of information looked at by users to decide - which websites fulfill their needs.\r\n\r\n*Sometimes search engines will - still generate their own title for your page based on the user search and - what the algorithm of the search engine thinks is best for supporting what - the user is looking for.*\r\n\r\n## Guidelines for Creating Good Titles\r\n\r\nSince - titles are so important you will want to make sure you have good titles for - all the pages of your website. Here are a couple practices for making good - titles. \r\n\r\nMake your title:\r\n* **Descriptive:** Make sure your title - explains what someone will find on that page.\r\n* **Concise:** Keep your - title short. 5 words or less.\r\n* **Individual:** Don't use the same title - for multiple pages.\r\n\r\n# Do This\r\n\r\n* Add a `<title>` element to each - web page on your website" - CSDU2 - SEO 3_markdown_instruction: "# Search Engine Optimization: Description\r\n\r\nAnother - important piece of meta data used by search engines is the description. The - description is added using the `<meta>` element. It has two attributes, the - name and the content. The content is where the actual description goes. **Every - page should have its own description.**\r\n\r\n<pre>\r\n<head> \r\n\t<meta - name=\"description\" content=\"Your meta description goes here \" />\r\n</head>\r\n</pre>\r\n\r\nJust - like the title tag this will not show up physically on the page but will be - used by search engines to display information about your page. Sometimes the - description will also be used when you share the link on social media platforms. - \r\n\r\n*Just like titles the search engine might decide it knows best and - generate a description for the page that is different than the one you provided.*\r\n\r\n## - What goes in a description?\r\n\r\nA good description will follow these guidelines:\r\n\r\n* - **Descriptive:** Unique description of what someone will find on this page\r\n* - **Keywords:** Uses keywords in full sentence descriptions which someone might - use to search for your page\r\n* **Short:** Less than 150 characters\r\n* - **Avoid Special Characters:** Don't use special characters such as ‘”<>{}[]()\r\n* - **Enticing:** It makes someone want to look at your web page.\r\n\r\n# Do - This\r\n\r\n* Add descriptions to each web page on your website using the - `<meta>` tag \r\n* Test it out!\r\n\t* Open <a href=\"http://www.seocentro.com/tools/seo/seo-analyzer.html\" - target=\"_blank\"> SEO </a>\r\n * Re-load the results for your page to - use the most updated version\r\n * Under the <img src=\"https://images.code.org/01e0d19ff0278ba750efc3b3824b31b0-image-1477075078800.37.19 - PM.png\" style=\"width:80px\"> section there is a preview of the Google Search - results.\r\n \r\n*Remember that the search engine might still decide to - use something else as your description. Its not a big deal and its still important - to have a description.*" - CSDU2 - SEO 4_markdown_instruction: "# Search Engine Optimization: Keywords\r\n\r\n\r\n\r\n\r\n# - Do This\r\n\r\n* Meta name =”keywords” content=”blah” (http://searchengineland.com/meta-keywords-tag-101-how-to-legally-hide-words-on-your-pages-for-search-engines-12099)" - CSDU2 - SEO 5_markdown_instruction: "# Search Engine Optimization: Viewport\r\n\r\nYour - website can be used on many different devices. Those devices have different - screen sizes. Viewport tells the browser how to load your website depending - on the size of the browser. To get the browser to display your web page at - the width of the device you can use the `<meta>` element with the attributes - below. The `<meta>` element should go inside the `<head>` element with all - the other meta data.\r\n\r\n<pre>\r\n<meta name=\"viewport\" content=\"width=device-width, - initial-scale=1\">\r\n</pre>\r\n\r\n# Do This\r\n\r\n* Set the viewport - of your website using the above code." - CSDU2 - SEO Final_markdown_instruction: "# Search Engine Optimization: Final\r\n\r\nIn - the past levels you added metadata to your website to improve your search - engine optimization. Go back to your list of issues the Search Engine Optimizer - identified and see if there are any others you can solve.\r\n\r\n# Do This\r\n\r\n* - Check to make sure you have completed the checklist below\r\n* Continue to - optimize your site for better search engine results\r\n* Take a screenshot - of your home page and save it somewhere on your computer so you can find it - later (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Checklist\r\n\r\n* Every web page has metadata for title, - description and viewport to improve search engine optimization." - CSDU2 - Separate Content and Style_markdown_instruction: "# Separate Content - and Style\r\n\r\nSoon you will get to apply your new brand style rules to - your website. Before you do that, though, let's investigate how to style - a multi-page website.\r\n\r\nAs already mentioned, from this point forward - we will be using external style sheets instead of styling inside the HTML - file because this keeps all the styling for the website in one place. However, - in order to do this you are going to have to pay extra close attention as - you remove your old styling. Even though you want consistent style on your - website, you will have exceptions to the style rules in certain cases. Exceptions - to the style rules might include the note card styling, which you worked on - in the last lesson. We would not want every list to have the note card styling, - just those specific ones on the recipe page.\r\n\r\nYou will never want to - have duplicate rules for the same selector. So there should not be two stylings - with `p` as the selector. Instead you need to leverage the ability to make - classes in order to have multiple styles for `<p>` elements. \r\n\r\nTo practice - this, we have a website with an external style sheet that also still has styling. - You will need to figure out how to keep the unique elements of the individual - web pages while getting a more consistent style across the pages.\r\n\r\nUnique - Elements You Want to Keep:\r\n\r\n\t1.\tThe styling of the `<img>` elements - on one page should be different than the other\r\n\t2.\tFor the `<h1>` headers, - on one page we want to style them and on the other we don't.\r\n\r\n# Do - This\r\n\r\n* Put the image on the home page in the \"home-image\" class\r\n* - Find the old style rule for images on the home page (width: 600px) and change - the selector so it will style the \"home-image\" class instead\r\n* Put all - the images on the technology page in the \"tech-images\" class\r\n* Find the - old style rule for images on the technology page (width: 100px) and change - the selector so it will style the \"tech-images\" class instead\r\n* Find - the h1 element on the technology page and put it in the class \"page-header\"\r\n* - Change the secltor for the style rule for h1 elements to be just a style rule - for the page-header class\r\n* Copy the three new style rules you created - into your style.css file.\r\n* Delete the `<style>` element and its contents - from both pages." - CSDU2 - SizeOfHeaders_markdown_instruction: "# Size of Headers\r\n\r\nThere - are different sized headers which are marked by the number next to the h in - the header tag. They go from <h1> to <h6> .\r\n\r\n| Example | - Result |\r\n| ------- | ------ |\r\n| <pre><h1> Shoulders </h1> - <br> <h2> Knees </h2> <br> <h3> Toes </h3></pre> | - <img src=\"https://images.code.org/4f252e3dce84a14e1bfdab373d3edbad-image-1473432674187.50.43 - AM.png\" style=\"width:200px\"> |\r\n\r\n# Do This\r\n* Predict what the result - of the code in the index.html file will look like. Pick from one of the 4 - options below.\r\n\r\n| Option 1 | Option 2 | Option 3 | Option 4 |\r\n| -------- - | -------- | -------- | -------- |\r\n| <img src=\"https://images.code.org/a4e973cc13db380ca1e1efeb4263974f-image-1473432905067.53.47 - AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/1c660b4e54a3e835250597cb261d8e17-image-1473432905068.54.08 - AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/22e9ae6a04afd8251b29939a6fa63411-image-1473432905069.54.25 - AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/0eee565202089d44a6bb5633603c45e0-image-1473432905069.54.50 - AM.png\" style=\"width:200px\"> |" - CSDU2 - Starting Personal Home Page_markdown_instruction: "# Starting Your - Home Page\r\n\r\nIn this lesson we are going to start putting together your - personal website! In order to do this you need to create your personal home - page.\r\n\r\n# Do This\r\n\r\nUsing your sketch of your personal home page - and personal web development practice packet as a guide:\r\n* Create as much - of the home page design as you currently know how to.\r\n* Take a screenshot - of your work and save it somewhere on your computer so you can find it later - (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)" - CSDU2 - Style to Personal Site_markdown_instruction: "# Style on Personal Website\r\n\r\nNow - that you have navigation on each page, you need to figure out how you want - to style your website. You have two choices:\r\n\r\n1. Make a style sheet - for each web page on your website\r\n2. Have one style sheet for your whole - website to give it a more consistent feel.\r\n\r\nPick one of the two choices - and style your website appropriately. Make sure to link the style sheet to - the page(s) you want it to apply to. Also make sure that the `a` rule-set - you created on the last level is applied to all your `a` tags.\r\n\r\nOnce - your website is set up and connected, feel free to make improvements to any - pages on your website.\r\n\r\nBefore leaving this level:\r\n* Take a screenshot - of your home page and save it somewhere on your computer so you can find it - later (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Check List\r\n\r\n* All of your web pages are individual - HTML files in this Portfolio Project\r\n* Navigation to all the pages exists - at the top of each individual page\r\n* Style has been applied to all pages - on the website" - CSDU2 - Sub Folders_markdown_instruction: "# Images\r\n\r\nWhen you have a - bunch of images in your project its good to put them all in a folder to help - organize your files.\r\n\r\nOnce files are in a folder you need to help the - computer find them by giving both the folder name and the file name. For - example to display the dog.png file in the folder called images we would use:\r\n\r\n<pre> - <img src=\"images/dog.png\" alt=\"dog jumping\" /> </pre>\r\n\r\nThe - folder names comes first follow by the image name. We separate them with a - / .\r\n\r\n# Do This\r\n* Add a folder called pictures\r\n* Move all the image - files into the pictures folder\r\n* Notice how all the pictures no longer - show but the text in the alt attribute does.\r\n* Update the links to the - images so they display again" - CSDU2 - testing something_markdown_instruction: "# Welcome to Web Lab!\r\n\r\nHTML - is a language to express content on the web. HTML stands for Hypertext Markup - Language. This means you are just using special sets of characters to define - the content of a website.\r\n\r\nThe platform you are in is called Web Lab. - It lets you write HTML on one side of the screen and see the results on the - other.\r\n\r\n# Do This\r\n\r\n* Use the Inspector Tool to find where the - HTML code for “Welcome to Web Lab” appears.\r\n* Try to change the text from - \"Welcome to Web Lab\" to something different.\r\n* Try typing something else - on the page and see what happens." - CSDU2 - text properties_markdown_instruction: "# Text Properties\r\n\r\nColor - properties are just one type of property. Another is text properties. Text - properties can be used on an text element (`<p>`, `<h1>` to `<h6>`, `<ul>`, - `<ol>`, `<li>`).\r\n\r\n* text-align - sets the horizontal (side to side) - position of the text within each line\r\n* text-decoration - can add a line - above, below or through the text\r\n\r\nFor more details on text properties - go to <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3 - Schools - Text Decoration</a> or <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3 - Schools - Text Align</a>.\r\n\r\nExample:\r\n\r\nThe below example will make - all the paragraphs be right aligned with a green text color and a line through - all the text.\r\n<pre>\r\np {\r\n\ttext-decoration: line-through;\r\n\tcolor: - green;\r\n text-align: right;\r\n}\r\n</pre>\r\n\r\n# Do This\r\nRead the - W3 resources and figure out how to add the following styles on your page.\r\n\r\n* - Add an underline to all of the smaller headers by using the text-decoration - property.\r\n* Use the “text-align” property on paragraphs to align them on - the page so that each line has the same width." - CSDU2 - title element in head_markdown_instruction: "# Title Element\r\n\r\nOne - piece of metadata that should be included in every web page you create is - the website title. Although you may put an `<h1>` element on your page content - with the title of your website, the computer does not necessarily know that - is the title as there may be multiple `<h1>` tags on your page.\r\n\r\nTo - make clear what the title of a website is for the computer the `<title>` element - is added as metadata in the `<head>` element. This title is not displayed - on the page anywhere as a result of the title tag but the browser may use - it to put a name in the tab of your web browser or when someone searches for - your website.\r\n\r\nExample:\r\n<pre>\r\n<head>\r\n\t<title> - My Website Title</title>\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* - Add a `<title>` element with the name of the web page inside the `<head>` - element" - CSDU2 - Type Anything_markdown_instruction: "# Welcome to Web Lab!\r\n\r\n<img - src=\"https://images.code.org/12ffe6980a25a3664eabe69be487a921-image-1485384422334.jpg\" - style=\"width:700px; float:right\">\r\n\r\nThe platform you are in is called - Web Lab. There are three main parts of the screen in Web Lab.\r\n\r\n\r\n\r\n# - Do This\r\n\r\n* Try typing something in the Code Area\r\n* Press <img src=\"https://images.code.org/6a35d13b10ed2029a9323c9cb555e39e-image-1477681291001.01.12 - PM.png\" style=\"width:100px\"> to see it in the Preview Area!\r\n" - CSDU2 - Unordered Lists_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - are the two types of lists?**</summary>\r\n There are two types of lists in - HTML, ordered and unordered lists.\r\n</details>\r\n<details>\r\n<summary>**What - is an unordered list?**</summary>\r\nAn unordered list is just a set of bulleted - items.\r\n</details>\r\n<details>\r\n<summary>**How do I make an unordered - list?**</summary>\r\n\r\nAn unordered list element has the tag <ul> - . Notice that this is an abbreviation for <strong>U</strong>nordered <strong>L</strong>ist. - Each item on the list is marked by a list item element <li>. Notice - that this is also an abbreviation for <strong>L</strong>ist <strong>I</strong>tem. The - list item element is a child element which means that you don't use it on - its own. It is contained inside a list element. It can be helpful to indent - your <li> tags so its clear that is contained in the <ul> tags.\r\n\r\n<table - border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> - <ul> <br> <li>Red </li> <br> <li>Green </li> - <br> <li>Blue</li> <br> </ul> </pre></td>\r\n<td><img - src=\"https://images.code.org/25d4dfc9b6c448d0da305df66aa1dfb7-image-1473444368948.05.32 - PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is an ordered list?**</summary>\r\nAn ordered list is a set of bulleted items - which are numbered.\r\n</details>\r\n\r\n<details>\r\n<summary>**How do I - make an ordered list?**</summary>\r\n\r\nAn ordered list element has the tag - <ol> . Notice that this is an abbreviation for <strong>O</strong>rdered - <strong>L</strong>ist. Each item on the list is marked by a list item element - <li>. Notice that this is also an abbreviation for <strong>L</strong>ist - <strong>I</strong>tem. The list item element is a child element which means - that you don't use it on its own. It is contained inside a list element. - It can be helpful to indent your <li> tags so its clear that is contained - in the <ol> tag.\r\n\r\n<table border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> - <ol> <br> <li>Step 1 </li> <br> <li>Step 2 </li> - <br> <li>Step 3 </li> <br> </ol> </pre></td>\r\n<td><img - src=\"https://images.code.org/3ef357cfad8ac98a8b30beb229ebcb78-image-1473446360428.39.04 - PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is. HTML tags - add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# - Unordered Lists\r\n\r\nNow that you have the basic layout for your Recipe - page you need two lists. An ingredients list and a directions list. Start - by trying to create the ingredients list. All text on your web page should - go inside one type of HTML element (header, list, or paragraph).\r\n\r\n# - Do This\r\nUnder your ingredients header create an unordered list of ingredients." - CSDU2 - Using Your Colors_markdown_instruction: "# Using Your Font\r\n\r\nThere - are other uses for the `<link>` element. The `<link>` element also used to - import your chosen fonts. Since you will be using a font not from the typical - five font families, the browser needs to have a fall back plan in case it - can't load the font you wanted. To do this a back up font name is given.\r\n\r\nFor - Example:\r\n<pre>\r\nfont-family: 'Cabin', sans-serif;\r\n</pre>\r\n\r\nThe - font you want to use is listed first in `''` and then after a comma a back - up font from the 5 normal font families is give.\r\n\r\n# Do This\r\nSet up - your style rules to use your fonts you picked out.\r\n\r\n* Open the <a href=\"https://studio.code.org/s/csd2/stage/10/puzzle/3\" - target=\"_blank\">level where you chose your fonts. </a>\r\n* Open the link - for each of your chosen fonts.\r\n* For each font:\r\n\t* Click <img src=\"https://images.code.org/91720f2ecae50e22d3287a92e988ee35-image-1475609982999.39.20 - PM.png\" style=\"width:130px\"> at the top right of the page.\r\n * That - will pop up a tab at the bottom. Click on the tab to open it. The pop up will - contain the link tag as well as the style rule for your font-family.\r\n <img - src=\"https://images.code.org/1e8712c56112e85157da093349f4b93d-image-1475610080515.40.26 - PM.png\" style=\"width:330px\">\r\n * Copy the link tag in the `<head>` - element of your index.html file.\r\n <img src=\"https://images.code.org/65fe1b66992e199f7c82c1f59c98cac5-image-1475610080516.40.38 - PM.png\" style=\"width:330px\">\r\n * Copy the style property example into - your style.css file for later use. There is a block comment where you can - copy it for keeping. You can determine where it goes on the next level.\r\n <img - src=\"https://images.code.org/da2f5cdec56681e0e8fa161bdf40d7a0-image-1475610080516.40.43 - PM.png\" style=\"width:330px\">" - CSDU2 - Using Your Font_markdown_instruction: "# Using Your Font\r\n\r\nThere - are other uses for the `<link>` element. The `<link>` element is also used - to import your chosen fonts. Since you will be using a font not from the typical - five font families, the browser needs to have a fall back plan in case it - can't load the font you wanted. To do this a back up font name is given.\r\n\r\nFor - Example:\r\n<pre>\r\nfont-family: 'Cabin', sans-serif;\r\n</pre>\r\n\r\nThe - font you want to use is listed first in `''` and then after a comma a back - up font from the 5 normal font families is give.\r\n\r\n# Do This\r\nSet up - your style rules to use your fonts you picked out.\r\n\r\n* Open the <a href=\"https://studio.code.org/s/csd2/stage/10/puzzle/3\" - target=\"_blank\">level where you chose your fonts. </a>\r\n* Open the link - for each of your chosen fonts.\r\n* For each font:\r\n\t* Click <img src=\"https://images.code.org/91720f2ecae50e22d3287a92e988ee35-image-1475609982999.39.20 - PM.png\" style=\"width:130px\"> at the top right of the page.\r\n * That - will pop up a tab at the bottom. Click on the tab to open it. The pop up will - contain the link tag as well as the style rule for your font-family.\r\n <img - src=\"https://images.code.org/1e8712c56112e85157da093349f4b93d-image-1475610080515.40.26 - PM.png\" style=\"width:330px\">\r\n * Copy the link tag in the `<head>` - element of your index.html file.\r\n <img src=\"https://images.code.org/65fe1b66992e199f7c82c1f59c98cac5-image-1475610080516.40.38 - PM.png\" style=\"width:330px\">\r\n * Copy the style property example into - your style.css file for later use. There is a block comment where you can - copy it for keeping. You can determine where it goes on the next level.\r\n <img - src=\"https://images.code.org/da2f5cdec56681e0e8fa161bdf40d7a0-image-1475610080516.40.43 - PM.png\" style=\"width:330px\">" - CSDU2 - Validator Extension_markdown_instruction: "# Favorite Places\r\n\r\nLets - start a new page. This page will be about your favorite places to spend time. - This could be on your block, in your city or even somewhere you like to go - on vacation.\r\n\r\n# Do This\r\n\r\n* Add <!Doctype>, <html>, - <head>, <title> tags to set up your page correctly from the beginning.\r\n* - Use header and list elements to make a page describing your favorite places.\r\n\r\n# - Checklist\r\n* At least 1 header\r\n* At least 1 list\r\n* Description of - each of your favorite places\r\n* Consistency tags used correctly - <!Doctype>, - <html>, <head>, and <title>" - CSDU2 - website comp_markdown_instruction: "# Comparing Websites\r\n\r\n**Prompt:** - Imagine you have a new puppy at home who has chewed through her old leash. - Decide between which of these two websites you would ultimately decide to - buy your puppy’s new leash. Why?\r\n\r\n* Website 1: <a href=\"https://thimbleprojects.org/nickianselmo/84613/\"> - Uncle Joe's Pet Store</a>\r\n* Website 2: <a href=\"http://www.petsmart.com/\"> - PetSmart</a>\r\n\r\nWrite your answer in the box below. When you are done - wait for directions from your teacher before moving on." - CSDU2 - Welcome-to-Weblab_markdown_instruction: "# Welcome to Web Lab!\r\n\r\nStuff\r\n\r\n# - Do This\r\n\r\n* Thing 1\r\n* Thing 2" - CSDU2 Color Blindness_markdown_instruction: "# Color Blindness Filter\r\n\r\n\r\n\r\n" - CSDU2 IP Add Images_markdown_instruction: "# Adding Your Images\r\n\r\nWith - images and attribution information in hand, it's time to spruce up your new - page.\r\n\r\n# Do This\r\n\r\nUpload your images to Web Lab and, using `<img>` - tags, add them where you'd like them to go. For each image:\r\n\r\n* Add - a descriptive `alt` attribute\r\n* Add attribution underneath the image, including\r\n\t* - Name or screenname of author (if available)\r\n * Title of image (if available)\r\n * - Link to original site (you can make the whole attribution text a link)\r\n * - License image was published under either in text (eg CC-BY) or using a badge - from the [Creative Commons website](https://creativecommons.org/about/downloads/).\r\n\r\nFor - example\r\n\r\n![Sad Dog](https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Longhaired_Dachshund_portrait.jpg/629px-Longhaired_Dachshund_portrait.jpg)\r\n\r\n[Longhaired - Dachshund portrait by Flickr user Soggydan](https://commons.wikimedia.org/wiki/File:Longhaired_Dachshund_portrait.jpg) - ![CC-BY](https://licensebuttons.net/l/by/3.0/88x31.png)" - CSDu2 IP CC Search_markdown_instruction: "# Finding Media\r\n\r\nNow that your - content is in place, it's time to find some good images and other media to - help make your page look better, and potentially strengthen your argument.\r\n\r\nBecuase - the Creative Commons provides such a simple way to know what media you can - and can't use, a lot of search engines have integrated Creative Commons filtering - to ensure they only give you results you can use. The Creative Commons search - page (linked below) is a compilation of CC friendly search engines that you - can use to find media for your page.\r\n\r\n# Do This\r\n\r\nUsing the Creative - Commons Search page, find a handful of pictures that you'll want to use on - your web pages. By default the search is set to the most restrictive settings. - Next to the the text **I want something that I can...** you can uncheck _use - for commercial purposes_. You can also uncheck _modify, adapt, or build upon_ - as long as you don't plan on modifying the images you find (such as adding - text, cropping, or otherwise editing).\r\n\r\n<img src=\"https://images.code.org/41b70c9ad055b42ed9d9749be2e1fdb2-image-1473978771297.31.58.png\" - style=\"max-width: 800px\"/>\r\n\r\nFor each image you plan on using:\r\n\r\n* - Download a copy to your computer (so that you can upload it to your website - in the next step)\r\n* Write down all information you can find about the author, - such as\r\n\t* Name, or screenname\r\n * URL of website (not URL of the - image itself)\r\n * Title of image\r\n" - CSDU2 IP Final Touches_markdown_instruction: "# Finishing Touches\r\n\r\nYou - have the content, you have pretty images, now put the finishing touches on - your page.\r\n\r\n# Do This\r\n\r\nMake sure you page meets the checklist - below then make this page your own and get it ready for publishing. Specifically, - consider the following:\r\n\r\n* **Styling:** Add new style rules to your - CSS file and give your page some flair.\r\n* **Organization**: Does the structure - of your content make it easy for users to find the information you want them - to see?\r\n* **Publishing Review**: Use your Web Development Practices to - review your site for publishing readiness.\r\n\r\nIf you made improvements - to your home page ake sure to take a screenshot of your home page and save - it somewhere on your computer so you can find it later (*Need help with how - to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Checklist\r\n\r\n* There is a separate HTML file for your - cause site with a descriptive name\r\n* The web page has a title, viewpoint, - and description\r\n* The web page is linked to your stylesheet for your website. - \r\n* A first level header with a catchy title for your page\r\n* A second - level header for each separate argument to support your cause\r\n* Paragraphs - of content under each second level header\r\n* A link to the appropriate site - where you need to cite outside sources\r\n* All images you are using are uploaded - into your web lab project\r\n* All images have a descriptive alt attribute\r\n* - All images have attribution underneath the image, including:\r\n\t* Name or - screenname of author (if available)\r\n\t* Title of image (if available)\r\n\t* - Link to original site (you can make the whole attribution text a link)\r\n\t* - License image was published under either in text (eg CC-BY) or using a badge - from the Creative Commons website." - CSDU2 IP Portfolio_markdown_instruction: "# Cause Page\r\n\r\nLet's start - by setting up the page you will be using to create your cause page.\r\n\r\n# - Do This\r\n\r\n* Add a new HTML file to your project for your cause page.\r\n* - Add a title, viewport, and description\r\n* Link the style sheet for your - website to the cause page" - CSDU2 IP Research Content_markdown_instruction: "# Adding Your Content\r\n\r\nYou - should now have found a handful of website that you can use to help make your - case for the cause you've chosen. If not, keep on researching! Otherwise - it's time to start structuring the content of your page.\r\n\r\n## Hyperlinks - to Websites\r\n\r\nEarlier in the unit you learned how to use the `<a>` element - to link between pages on your website. You can also use this element to link - to other websites. To do this the `href` attribute needs to contain the full - URL of the site you wish to link to. For example if I wanted to link to the - Code.org website in my project I would use the following code:\r\n\r\n| Code - | Output|\r\n| ---- | ----- |\r\n| <pre> My favorite coding site is <a - href=\"https://code.org/\" > Code.org </a > ! </pre> | My favorite - coding site is <a href=\"https://code.org/\"> Code.org </a> ! |\r\n\r\n# Do - This\r\n\r\nThe specifics of your page layout will depend on your topics and - goals, but in general you should create the following structure\r\n\r\n* A - first level header with a catchy title for your page\r\n* A second level header - for each separate argument to support your cause\r\n* Paragraphs of content - under each second level header\r\n* A link to the appropriate site where you - need to cite outside sources\r\n* Don't worry about styling right now you - are just getting the content\r\n\r\nAttribution links can take many forms, - for example\r\n\r\n* According to the [ASPCA](http://www.aspca.org/animal-homelessness) - only 10% of animals entering shelters have been spayed or neutered.\r\n* Kill - shelters euthanize 2.7 million animals per year (Source: [ASPCA](http://www.aspca.org/animal-homelessness))." - CSDU2 Make Your Logo_markdown_instruction: "# Create a Logo\r\n\r\nYou will - also need a logo for your brand. Get creative and create something that really - is you. Remember you probably want to use your colors and fonts as you design - your logo. If the tools does not have your exact font find something close.\r\n\r\n# - Do This\r\n\r\n* Use the tool linked below to **create a logo for your brand**\r\n* - **Hint:** The color picker on this site uses a different encoding called hex. - Your color picker gave you those values as well. They are the first encoding - with numbers and letters in it. They start with the # symbol.\r\n* **Save - that logo somewhere on your computer** so you can use it later." - CSDU2 Pick Your Colors_markdown_instruction: "# Pick Your Colors\r\n\r\nAnother - component of creating your brand is picking the colors for your brand. These - should be colors that stand out but also look good together. You want your - users to enjoy looking at your page. You will want to keep your set of colors - small so that the combination is memorable. A set of 4 main colors or less - for your page will be a good place to start. Different shades of those colors - can be used as well.\r\n\r\n# Do This\r\n\r\n* Go to the <a href=\"http://paletton.com/\"> - Paletton </a> website.\r\n* Decide how many primary colors you want for your - brand.\r\n* Set the number of primary colors useing these buttons <img src=\"https://images.code.org/669d2fe15825ea753f804ebb690aab95-image-1475594935612.28.22 - AM.png\" style=\"width:150px\">. The number of dots shows the number of primary - colors.\r\n* Play with dragging around the dots to find the primary colors - you like. The one that takes up the biggest box on the right will be your - primary color.\r\n\r\n<img src=\"https://images.code.org/b5811cea1acf1bf281ab73661db4b7cb-image-1475595405528.gif\" - style=\"width:400px\">\r\n\r\n* Once you have picked your colors click <img - src=\"https://images.code.org/3d30144dbe0cadc9bd083f1967e66b20-image-1475595929655.44.22 - AM.png\" style=\"width:100px\"> which is below the color boxes on the right.\r\n\r\n* - A list like the one below will show up click on **\"as Text\"** below the - Color List header.\r\n\r\n<img src=\"https://images.code.org/d39c3112948cd860148f2228f5b1c45a-image-1475595929655.44.43 - AM.png\" style=\"width:150px\">\r\n\r\n* A page that looks like the one below - will open. **Copy the text from this page into the box below.** This will - give you the RGB values for the colors as well as hex codes which you may - want on the next level.\r\n\r\n<img src=\"https://images.code.org/731d2612a1ccb47a4db8085abe910266-image-1475596945480.02.14 - PM.png\" style=\"width:400px\">" - CSDU2 Pick Your Fonts_markdown_instruction: "# Pick Your Fonts\r\n\r\nPart - of any good brand is having a specific font that is associated with the brand. - Most brands keep to a small set of fonts they use. These fonts however are - unique to the brand and will need to adventure beyond the 5 font families - you have been using.\r\n\r\nPicking a small set of fonts for your website - is also a good practice as when you adventure beyond the 5 font families into - other fonts the browser has to download the font file. Downloading files is - something that can add time to how long it takes to your load your website. - To prevent it from taking too long it is good to stay with just 2 different - fonts.\r\n\r\n# Do This\r\n\r\n* Go to the <a href=\"http://fontpair.co/\" - target=\"_blank\">Font Pair </a> website. The website lists sets of heading - and body font pairs that work nicely together. Each pair is listed like the - image below.\r\n\r\n<img src=\"https://images.code.org/7f34c1986c16fbb50e2acc4f72923b60-image-1475593488897.03.00 - AM.png\" style=\"width:400px\">\r\n\r\n* Pick a font set you like.\r\n* Copy - the heading and body font names.\r\n\r\n<img src=\"https://images.code.org/879b3b41486f728fbb8840469277704e-image-1475594076521.png\" - style=\"width:400px\">\r\n\r\n* Click the link to each font. This should take - you to a google fonts page.\r\n\r\n<img src=\"https://images.code.org/6163e64372d8825a7a8ed6a943cb3701-image-1475594076522.png\" - style=\"width:400px\">\r\n\r\n* Copy the URL for the google fonts page into - the box below so they will be saved for later. An example is below.\r\n\r\n<img - src=\"https://images.code.org/92e66b9ffae4d836175d63d87ab5586c-image-1475594389964.17.58 - AM.png\" style=\"width:400px\">" - CSDU2 RGB Color Matching_markdown_instruction: "# RGB Colors\r\n\r\nAll colors, - whether they have names or not, can be described by the level of red, green, - and blue light it takes to make them. This is called an RGB value (short - for Red-Green-Blue). You can use the widget on your left to try out different - RGB values and see what colors they make.\r\n\r\n* **Click \"Run\" to start - the widget on the left,** and use the sliders to adjust the levels of red, - green, and blue light.\r\n* For each of the colors below, match it to its - RGB value. Type your response in the box below.\r\n\r\nA) red: 216, green: - 191, blue: 216 - rgb(216,191,216)\r\n\r\nB) red: 255, green: 239, blue: 213 - - rgb(255,239,213)\r\n\r\nC) red: 255, green: 140, blue: 105 - rgb(255,140,105)\r\n\r\nD) - red: 123, green: 104, blue: 238 - rgb(123,104,238)\r\n\r\nE) red: 107, green: - 142, blue: 35 - rgb(107,142,35)\r\n" - CSDU4 - AppLab - 1_markdown_instruction: "# Documentation\r\nAs we move forward - you are going to see more and more (and more!) commands added to the toolbox. What - happens if you see a command and don't understand it, or you forget how it - works? Don't worry, this happens to professional programmers all the time! - No one actually memorizes long lists of commands. Most programming environments - have ways to quickly look up documentation about the commands of the language - you're using. **Good news: App Lab has documentation too!**\r\n\r\n![](https://images.code.org/3fe10e1b65edb37306099098161be001-image-1441990727053.gif)\r\n\r\nWhen - you **hover your mouse over a command** in the block palette a bubble pops - up with a quick reminder of what a function does, and what its parameters - are. If you click \"See examples\", you will be taken to more detailed documentation - of the command which includes **code examples** that you can even copy and - paste.\r\n" - CSDU4 - AppLab - 2_markdown_instruction: "# Assigning User Input to Variables\r\n<img - src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" - style=\"width: 350px; float:right\">\r\nThe `promptNum` command appears in - the variables toolbox because it's typically used as a way to get a value - from the user that you want to hold on to while the program runs.\r\n\r\n`promptNum` - is similar to `randomNumber` in that it is a function whose return value *evaluates - to a number*. The difference here is that `promptNum` pops up an input dialog - box and waits for the user to type a number. Once they do and hit \"OK\" - the number they typed is returned and we can store it in a variable to use - in our programs." - CSDU4 - AppLab - 3_markdown_instruction: "# Debug Console: Variable Values\r\n\r\nUp - until now, if we wanted to find out the value of a variable at some point - in the execution of a program, we've used `console.log`. That is still going - to be a great strategy but **the Debug Console can do even more for us!**\r\n\r\n**Check - this out:** We can check the value of a variable in real time (as our program - executes) by typing its name into the prompt within the Debug Console and - hitting \"enter\". **This is another powerful tool for debugging your programs.** - \r\n\r\n![](https://images.code.org/7e7ff7aa041814cfcd69a1c9a028c439-image-1446826780896.gif)" - CSDU4 - AppLab - 4_markdown_instruction: "# Debug Commands\r\n\r\n<img src=\"https://images.code.org/c6322845b96b70c9083a6c62736048e5-image-1446739268136.00.34 - AM.png\" style=\"width: 200px; float: right\">\r\n\r\nCheck out the new **Debug - Commands toolbox** that has appeared next to the Debug Console! These powerful - tools allow us to **pause a program at a certain point** while it’s running - and then execute lines one at a time. \r\n\r\nUsing these tools we can investigate - the state of variables and other elements of the program at any point, mid-execution. - This makes it much easier to see what’s happening while the programming is - actually running!\r\n\r\nIn order to use the debug commands, you first have - to indicate which line you want the program to pause at. This is called adding - a “breakpoint” (see animation below).\r\n\r\n# Do This:\r\n\r\n* **Add a breakpoint** - on the line where the `while` loop starts. (**Just click the line number.**)\r\n* - **Use the <img src=\"https://images.code.org/bd8f1a67242e64e6b3740eac79f881e8-image-1446748421345.33.09 - PM.png\" style=\"width: 75px\"> button** to execute each line one at a time.\r\n* - **NOTE:** If you hit <img src=\"https://images.code.org/6c4712da58e32dae2d04c52d9964fca9-image-1446741498097.37.48 - AM.png\" style=\"width: 75px\"> it will \"continue\" executing the program - normally, unless of course it hits another breakpoint. \r\n\r\n![](https://images.code.org/68f8e185914c8cc127aa9573ae37f687-image-1446835628580.gif)" - CSDU4 - Design Mode - 1_markdown_instruction: "<img src='https://images.code.org/3fad83213ae72073251c4d5abc1f048a-image-1444060521578.png' - style='float: right; width: 250px'> A new group of commands has been added - to the toolbox called **UI Controls** (User Interface Controls) which are - commands that let you interact with, and respond to, the user of your app. - To keep it simple, we'll start with just two commands: \r\n* `onEvent` which - lets you run a function in response to some event occuring (such as a button - click).\r\n* `button` which puts a button on the screen." - CSDU4 - Design Mode - 10_markdown_instruction: "# New Elements and Events: - Moving Buttons with Events\r\n\r\nOver the next few exerises we will be exploring - several new user interface elements and event types. Your code will be pulled - forward as you progress through the exercises.\r\n\r\n**Moving Past Turtle:** - We've been using buttons to move the turtle. For example, in the program - you're about to see a button that moves the turtle to a random location on - the screen. We're going to alter this program ** so that the button itself - moves every time you click it**.\r\n\r\n**Notice** that this means that event - handlers can affect the elements they are attached to, not just other elements! This - is an interesting technique for apps. Now you're going to try it...\r\n\r\n# - Do This:\r\n* **Change the ID** of the button to something descriptive and - meaningful.\r\n* **Modify** your event handler so that **it no longer moves - the turtle** but instead sets the position of the button itself to a random - location on the screen.\r\n\t* TIP: add `setPosition` to the event handler, - and just move the `randomNumber` calls from the turtle.\r\n\t* Recall the - screen is **320 by 450 pixels**.\r\n\r\n**Before** | **After**\r\n---|---\r\n![](https://images.code.org/a4172e43b6707a3170e4eaf54a2a7b1d-image-1444335577799.gif) - | <img src=\"https://images.code.org/4e17b077bd8fbdd43f960d26bb3d252d-image-1444335766972.gif\" - style=\"width: 150px\">\r\n\r\n\r\n" - CSDU4 - Design Mode - 11_markdown_instruction: "# New Elements and Events: - New Event Types\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 - AM.png\" style=\"float: right\">\r\n\r\n**New Events**: You may have noticed - that the `onEvent` block has a pull-down menu for the event **type** (see - right).\r\n\r\n# Do This:\r\n\r\n* **Experiment** with **each of the different - types of mouse events** by selecting from the list. You can also read about - them in the documentation.\r\n\t* click\r\n * mousemove\r\n * movedown\r\n * - mouseup\r\n * mouseover\r\n* **Choose** the mouse event type you like most - and change your event handler to use it.\r\n* **Note:** There are some events - that capture keystroke events. These are interesting, but they do not work - easily with buttons. We'll stick to mouse events for now, and get to keys - later." - CSDU4 - Design Mode - 12_markdown_instruction: "# New Elements and Events: - Text Labels\r\n<img src=\"https://images.code.org/20d50fd324908fc48633e1325cc37603-image-1444662791509.png\" - style=\"float: right\">\r\nThe UI controls toolbox contains an element called - `textLabel`. A text label is what it sounds like: plain text that you can - put in your app. Even though it's just plain text you can still move and - resize it using `setPosition`, and you can attach event handlers to it as - well.\r\n\r\n**NOTE:** resizing a text label does not change the font size - of the text. We'll learn how to do that later. " - CSDU4 - Design Mode - 13_markdown_instruction: "# New Elements and Events: - Images\r\n\r\n<img src=\"https://images.code.org/a84297658be45dc78bc401d387d10436-image-1444663322356.21.25 - AM.png\" style=\"float: right; width: 120px\">\r\nImages make applications - more visually pleasing and interactive. You can add images to your application - using the `image` command. For now, just add an `image` element to your app - (the default image link is the Code.org logo) and don't worry about choosing - a unique image just yet. We'll do that in the very next exercise!" - CSDU4 - Design Mode - 15_markdown_instruction: "# Design Mode\r\n\r\nWelcome - to Design Mode in AppLab! This will allow you to easily create a digital version - of your sketched wireframes by adding UI elements from the toolbox and and - styling them the way you want!\r\n\r\n**Goal:** Add a large red button to - your app using Design Mode.\r\n\r\n# Do This:\r\n\r\n* **Find <img src=\"https://images.code.org/278f146396c80c97d0b5d73f24d48aec-image-1444335461720.png\"> - in the Design Toolbox** and drag out a button and resize it. \r\n\r\n* **Change - the button text** to say \"Click Me\".\r\n\r\n* **Set the color for the button** - to be red.\r\n\r\n<img src=\"https://images.code.org/4cab6a5233cf07df0d8e312932762012-image-1444314797615.gif\" - style=\"width: 500px; float: middle\">\r\n" - CSDU4 - Design Mode - 16_markdown_instruction: "# Activate Your Button\r\nIn - the last lesson you focused on laying out a page of your app in Design Mode. - This is a great, quick way to get the visual side of an app figured out, but - it's not very functional. If you click any of the buttons you added, nothing - happens. Now you're work towards adding some basic functionality by making - the buttons in your app actually _do_ something!\r\n\r\n**Goal:** Add code - using Design Mode to make the button respond to a click.\r\n\r\n# Do This\r\nYour - starter app has two elements, a _label_ with the id `titleLabel` and a _button_ - with the id `changeTitleButton`. To start with, you're going to make the - button log a message to the console when it's clicked.\r\n\r\n* In Design - Mode, **click on the provided button to edit its properties**\r\n* Click on - the **Events** tab\r\n* Insert an `onEvent` from Design Mode by clicking **Insert - and show code** under the **Events Tab**.\r\n* Take a look at the block that - was added to the **Code Mode** tab.\r\n* Run the program, click your button - and **look for the output in the *Debug Console* **below the workspace instead - of the app window. We will discuss the *Debug Console* on the next level." - CSDU4 - Design Mode - 17_markdown_instruction: "# Updating IDs and Debugging - with Console Log\r\n\r\nHere we have a couple buttons with event handlers - and `console.log` statements, but they are all switched around!\r\n\r\nWe - should have given the buttons better ID names so we could tell the difference - based on the ID. **Can you update the ID names and `console.log` messages - to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** - of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to - Code Mode and notice that the **ID pulldowns have been updated to include - the new IDs**. (You still need to select the correct ID from the pulldown - menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" - CSDU4 - Design Mode - 18_markdown_instruction: "# Layering and Deleting\r\n<img - src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" - style=\"width: 200px; float: right\">User interface elements can overlap one - another, so you'll want the ability to change the order or **depth** at which - each one is rendered. \r\n\r\nIf you **scroll to the bottom of the Properties - tab** you'll find buttons which allow you to easily **delete or change the - depth** of an element.\r\n* **Delete an Element** by selecting it (clicking - on it) in the design view and then clicking **Delete** in the properties tab.\r\n* - **Change the depth** of elements by using the double or single arrows.\r\n - * Click the double arrow to send all the way to front or back.\r\n * Click - the single arrow to move up or down one layer.\r\n \r\n# Do This:\r\n\r\nUse - the **delete** and **depth** tools to **create the \"After\" image**\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th - style=\"text-align:center\">Before</th>\r\n <th style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td - align=center><img src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" - style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img - src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" - style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" - CSDU4 - Design Mode - 19_markdown_instruction: "# Second Screen\r\n\r\nMost - apps have more than one screen or page that each have different contents. - With Design Mode you can quickly add new screen to your app.\r\n\r\n# Do This\r\n\r\nYou're - going to add a second screen to your app and add a button to that screen. - Make sure you're using good IDs!\r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 - PM.png\" style=\"width: 50px\"> from the Design Toolbox into your app. You - now have two screens!\r\n* Using Design Mode create a button in your new screen. <img - src=\"https://images.code.org/bbf464e2fc94bacba39407d6842f2336-image-1478300698068.04.35 - PM.png\" style=\"width: 150px\"> \r\n* Set the IDs for your screens and buttons - to something meaningful, for example _\"homeScreen\"_, _\"detailsScreen\"_, - _\"homeButton\"_, and _\"detailsButton\"_\r\n\r\n\r\nYou can always use the - screen dropdown menu at the top of the app window to switch between your screens - <img src=\"https://images.code.org/404e0b3f520a413c8a5e62e74b70bb19-image-1478300388689.58.59 - PM.png\" style=\"width: 150px\"> \r\n\r\n" - CSDU4 - Design Mode - 2_markdown_instruction: "# Buttons and Unique IDs\r\nYou - may have noticed that the button command has two parameters: `button(id, text)`. The - `text` is the text that actually shows up on the button display, and the `id` - (we'll typically write **ID**) is a **unique identifier** for that element - in the app.\r\n\r\nEach element that appears in the app must have a **unique - ID**. In fact, if you try to run a program that has two buttons with same - ID you will get a warning message in the console. Watch:\r\n<img src=\"https://images.code.org/47ec46e0563f63641cc10ef152e9f86e-image-1444074330713.gif\" - style=\"border: solid 1px black; width:500px\">\r\n\r\nNotice that even though - the text on the buttons was different, the IDs were the same, which caused - the error message to show up. To get rid of that error message you will have - to change the ID of the button from the default `id` to something else.\r\n\r\n**Error - messages happen to everyone and they are helpful!**: getting an error or warning - message when you run your program is *not a big deal*. Programmers actually - rely on error messages to tell them where and how to fix their code.\r\nSometimes - error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers - to an id (id) which already exists.` But a warning like this contains helpful - information and clues such as the line the error occured on, or some word - or command it didn't recognize. " - CSDU4 - Design Mode - 20_markdown_instruction: "# Switching Screens\r\n\r\nYou - can set which screen is showing in your app with the `setScreen()` command. - If you're working in blocks you can select which screen you want to switch - to from a dropdown.\r\n\r\n![](https://images.code.org/615fae136488e1e6d1349e4383388e08-image-1478303858022.13.25 - PM.png)\r\n\r\n# Do This\r\n\r\nYou'll use an `onEvent()` block with `setScreen()` - to make the two buttons in your app switch between the two screen.\r\n\r\n* - Drag out two `onEvent()` blocks\r\n* Set the IDs for your `onEvent()` blocks - for each of your two buttons\r\n* Place a `setScreen` block inside each of - the `onEvent` blocks.\r\n* Choose the appropriate screen from the dropdown - of each `setScreen` block.\r\n* Test out your app to make sure your buttons - let you switch back and forth between the two screens" - CSDU4 - Design Mode - 21_markdown_instruction: "# Adding Images\r\nSometimes - the functionality you want to represent in your prototype is too complicated - to do with just the default buttons and fields. If you want to mock up more - advanced interfaces (like a map), the easiest way to do it is with an image\r\n\r\n# - Do This\r\n* Find and download an image of a map you like\r\n* Drag an image - element into your app ![](https://images.code.org/cda02ffe3acc869822a551f5cdbf8606-image-1444667846363.37.14 - AM.png)\r\n* Choose your image ![](https://images.code.org/e5b9571ae54af60a3ae597b787e741ea-image-1444667688762.34.42 - AM.png)\r\n\t* **URLs** can be added directly into the \"picture\" field. \r\n\t* - **Upload images** by clicking \"Choose\".\r\n\t* **Note:** You can always - see all the files you've uploaded by clicking the gear at the top of the - toolbox. ![](https://images.code.org/53b405b771bc11bf5d24c84c878c80dd-image-1444668067826.35.10 - AM.png)\r\n* Make sure to give your image a good ID!\r\n\r\n" - CSDU4 - Design Mode - 22_markdown_instruction: "A new command in the toolbox: - `playsound`! Read the documentation about how to add sounds." - CSDU4 - Design Mode - 23_markdown_instruction: "# Changing Elements on Screen - \r\n\r\nThere's another way to display text in your app besides `console.log` - and `write`. \r\n\r\nThere is a command called `setText` which will **change - the text of a component on screen** given its id. This is a very powerful - technique and one that you will use a lot. Here's what it looks like in action....\r\n\r\n<img - src=\"https://images.code.org/3e5dd320801720d5c62a49146d9ee3d2-image-1446056202170.gif\" - style=\"width: 500px\">\r\n\r\nLet's do a **very simple** example of using - `setText`." - CSDU4 - Design Mode - 24_markdown_instruction: "# Text Input Elements\r\n\r\n<img - src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 - PM.png\" style=\"width: 100px; float:right;\">\r\n\r\nSetting the text of - an element is all well and good, but things are going to get really interesting - when we can get text that a user has entered and do something with it.\r\n\r\n\r\n\r\n# - Do This:\r\n\r\n* **Add two text input elements to this program**, one for - the name and one for the age of the user.\r\n* **Give your text input elements - descriptive and meaningful IDs**.\r\n* **In Design Mode** set their default - text to prompt the user for their name and age.\r\n* **Compare your app to - the example below**.\r\n\r\n<img src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 - PM.png\" style=\"float:left; width:200px;\">\r\n<br>" - CSDU4 - Design Mode - 25_markdown_instruction: "# Getting Text Input\r\n\r\nAs - we saw a user can now type inside of a text input whenever they want, **but - now we'll need a way to access that text**. In order to do that you'll need - to use the `getText` command, which you can now find in the **UI Controls** - tab.\r\n\r\n<img src=\"https://images.code.org/0c6774f2b6d33f8107ec2936102b1a10-image-1445533677192.58.24 - PM.png\" style=\"width: 150px;\">\r\n\r\nYou can use a `getText` command just - like a string within a `console.log` or `write` command. Just like with `setText` - you will refer to the UI element by its ID.\r\n\r\n![](https://images.code.org/c17e419301d0cfeebf7f0ccee13e415f-image-1445892504376.47.54 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **Read the documentation ** for `getText`.\r\n* - **Add an event handler to the Submit button** that fires when your button - is clicked.\r\n* **Inside the event handler** place code that will **log the - name your user input to the console**.\r\n\r\n" - CSDU4 - Design Mode - 26_markdown_instruction: "# Saving Text Input in Variables\r\n\r\nOften - we want to save the information we pull in from the user for later use in - our program. The best way to do this is to save it in a variable.\r\n\r\n# - Do This:\r\n\r\n* **Create two variables inside your event handler** to store - the **age** and **name** of the user.\r\n* **Use `getText()` to update the - values** stored in each of these variables.\r\n* **Change your `console.log` - statements to use your variable instead of `getText`**.\r\n\r\n![](https://images.code.org/ca45dcb01ae2d1956ed2f87efeda0264-image-1445976691215.11.13 - PM.png)" - CSDU4 - Design Mode - 27_markdown_instruction: "# Generating Text Output\r\n\r\nSo - far we've been outputting our messages to the console, but now we'd like - to display them in the app. In order to do so we're going to be using a new - UI element called a **textArea**. You can use `setText()` with a **textArea** - just like you would with a **textLabel**.\r\n\r\n![](https://images.code.org/45e6b6cdb1ca87f53cf1d6bba97cb812-image-1445977693641.24.43 - PM.png)\r\n\r\nIf we want to combine user input with default text we can do - so with **string concatenation** (that's just a fancy phrase for combining - strings of text). Together with a **textArea** we can use this ability to - compose longer messages based on user input.\r\n\r\n# Do This:\r\n\r\n* **Add - a textArea** to your app and give it a descriptive and meaningful ID.\r\n* - **Create a variable inside your event handler** called `userMessage` to hold - the full message that will be sent to the user.\r\n* **Use string concatenation** - to compose a message from the user input.\r\n\t* eg `var userMessage = \"Welcome - \" + userName + \"!\";`\r\n* **Use `setText()`** to place your `userMessage` - inside the `textArea` you created.\r\n\r\n<img src=\"https://images.code.org/193af3e0c993dbf0b7af9c571ec5f56d-image-1445977696957.27.08 - PM.png\", style=\"width:250px;\">" - CSDU4 - Design Mode - 28_markdown_instruction: "# Introducing the *change* - Event\r\nUp until now you've been using the click of a button to trigger - getting the text from an input or text area.\r\n\r\nYou can use a new event - type to get this behavior: The __'change' event__ is triggered when the - user hits 'enter' in a text input after typing.\r\n\r\n\r\n<img src=\"https://images.code.org/7d1725b236471f8e2a0efed5870660da-image-1446071579670.32.36.png\" - style=\"width:350px;\">\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/f8f1f7ae18acbc570a367886bcd6ca88-image-1445976541574.gif\" - style=\"width:250px;\">\r\n- A text input has been created for you that asks - for a user's name, as well as a label for the response\r\n- Attach a \"change\" - event handler to the text input.\r\n- When the \"change\" event triggers, - set the text of \"nameResponse\" to the user's input.\r\n" - CSDU4 - Design Mode - 29_markdown_instruction: "# Dropdown\r\n\r\nOn the last - level we used `promptNum` to get the user's guess. However, we had no way - to limit them to the numbers we wanted. They could have typed 11 even though - we told them not to. A better way to get input with a limited set of options - is the dropdown. The <img src=\"https://images.code.org/3b21b4288a2a155d1e9a3c2cf3a5b09b-image-1446229368079.28.23 - PM.png\" style=\"width: 75px\"> is in your Design Mode Toolbox. You can control - the list of options users can choose and then use `getText` to get the chosen - number.\r\n\r\nWe are going to need an event handler in order to do this. - The event handler will detect when the user has changed the value of the dropdown. - \r\n\r\n# Do This:\r\n\r\n* **Add a dropdown** for their guess instead of - `promptNum`. Make sure to give it a good ID.\r\n\r\n<img src=\"https://images.code.org/fea164f6e53d1ce0c50981565e066d4c-image-1446229598357.gif\" - style=\"width: 350px\">\r\n\r\n* Under properties **find the Options** and - change it to the **numbers 1 to 10**\r\n\r\n<img src=\"https://images.code.org/0cfecbcdcfb95fc30876155ec6a3a021-image-1446229593687.gif\" - style=\"width: 250px\">\r\n\r\n* Add an event handler to detect the `change` - event on your dropdown.<br><br>\r\n<img src=\"https://images.code.org/48cffda5b7ff3a446116a39b4dbcbe8c-image-1446232308751.gif\" - style=\"width: 150px; float: right\">\r\n* Move your `if` statement inside - the event handler so it will check each time the dropdown is changed.<br><br>\r\n* - When the dropdown is changed **use `getText` to find out the user's guess**. - Save the guess using a variable. **Don't forget about scope!**<br><br>\r\n* - Test your app -- it should work like the demo." - CSDU4 - Design Mode - 3_markdown_instruction: "# How Do Events Work?\r\nEvent-driven - apps are made up of elements that can trigger events (such as buttons) and - pieces of code called **event handlers**. Event handlers are commands that - \"watch\" for certain events to occur in your program, and then run some function - when an event occurs.\r\n\r\nWhen you first create an event handler from Design - Mode, puts a `console.log()` block inside to help you test the event, but - you can put just about any code you want inside the event hander.\r\n\r\n# - Do This\r\n\r\nThe toolbox has a new block called `setText` which allows you - to change the text of an element on the screen. You're going to modify the - button event handler so that it changes the title text when clicked.\r\n\r\n* - Drag out a `setText()` block to the _inside_ of the `onEvent()` callback function - (where the `console.log()` block currently is)\r\n* From the block's dropdown, - select \"titleLabel\" (the id of the element you want to change)\r\n* In the - block's second input, replace \"text\" with a new title for the app\r\n* - Run your program and click the button to see it work" - CSDU4 - Design Mode - 30_markdown_instruction: "# Using `if` to Display Images\r\n\r\nWe - are going to set up a dice game. We want to show a picture of a single die - for each random number generated 1 to 6. We've already set up the screen - in Design Mode, with a button to generate the roll and an image to show a - picture of the die.\r\n\r\n**Note:** The flowchart for the desired behavior - is below.\r\n\r\n# Do This:\r\n\r\n* Add an event handler for the Roll! button - so that when the button is clicked it generates a random number from 1 to - 6. \r\n\r\n* Add conditionals (`if`, `else if`, and `else`) to change the - picture of the image (ID: `dice_image`) to display the correct side of the - die depending on the random number generated. You will need to use <img src=\"https://images.code.org/89f2c13ef4ead590475c863a087597f8-image-1446535826599.30.16.png\" - style=\"width:150px\"> with the URLs below to set the images for the die.\r\n\t* - <img src=\"https://code.org/images/dice/1.png\" style=\"width: 50px\"> Dice - 1 Image URL - https://code.org/images/dice/1.png\r\n * <img src=\"https://code.org/images/dice/2.png\" - style=\"width: 50px\"> Dice 2 Image URL - https://code.org/images/dice/2.png\r\n * - <img src=\"https://code.org/images/dice/3.png\" style=\"width: 50px\"> Dice - 3 Image URL - https://code.org/images/dice/3.png\r\n * <img src=\"https://code.org/images/dice/4.png\" - style=\"width: 50px\"> Dice 4 Image URL - https://code.org/images/dice/4.png\r\n * - <img src=\"https://code.org/images/dice/5.png\" style=\"width: 50px\"> Dice - 5 Image URL - https://code.org/images/dice/5.png\r\n * <img src=\"https://code.org/images/dice/6.png\" - style=\"width: 50px\"> Dice 6 Image URL - https://code.org/images/dice/6.png\r\n\r\n<img - src=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" - target=\"_blank\">Open diagram in a new tab</a>\r\n" - CSDU4 - Design Mode - 31_markdown_instruction: "# *keypress*\r\n\r\nIf we want - to add keyboard input to our apps we'll need to learn about how key events - work in App Lab. To start let's take a closer look at the `onEvent` block. - We already know that event handlers call a function. What we'll see now is - that they also **pass a parameter**. The default name for this parameter is - simply `event` but you can change it to be anything you like. \r\n\r\nThe - `event` parameter is a more complex kind of variable (called an \"Object\") - that we'll learn more about later. For now just know that for both mouse - and keyboard events, the event parameter passes more information about the - event. In the case of key events **you can find out the key(s) that were actually - pressed by using `event.key`**.\r\n\r\n# Do This:\r\n\r\n* Drag out an `onEvent` - block.\r\n* Change the ID to `screen1` and the event type to `keypress`. \r\n\r\n<img - src=\"https://images.code.org/537b5bbef3db62c90155528e6753a00a-image-1447175732347.gif\" - style=\"width: 450px\">\r\n\r\n* Once you hit **Run**, **click on the screen - so that the keystrokes will register**.\r\n* **Type different combinations - of keys** and check out the results in the console. Does every key combination - print to the console? Some keys to try:\r\n * Letter keys\r\n * Number - keys\r\n * Shift key\r\n * Hold shift and letter\r\n * Delete key\r\n * - Left and right arrow keys\r\n * Press and hold a key" - CSDU4 - Design Mode - 32_markdown_instruction: "# Using *keyup* and *keydown*\r\n\r\nOn - the last level, we played with the `keypress` event. Let's take a look at - some of the other key events. \r\n\r\nYou are going to get the chance to play - with `keyup` and `keydown` in this level. **Pay attention to the different - values of `event.key` for `keydown` and `keypress`. **\r\n\r\n# Do This:\r\n\r\n* - Switch to the event type to `keydown` or `keyup`. \r\n\r\n<img src=\"https://images.code.org/fa91b1a9e3240eb65ff75b381e76ce69-image-1447213909054.gif\" - style=\"width: 350px\">\r\n\r\n* Try out the event.\r\n\t* Press and hold - a key\r\n * Try the arrow keys\r\n * Shift\r\n * Option\r\n * - Alt\r\n * Others" - CSDU4 - Design Mode - 33_markdown_instruction: "# Play Sound With Keys\r\n\r\nYou - may have noticed from the last couple of levels that the value of `event.key` - is just a string which is the name of the key. As a result we can check which - key was pressed with a simple conditional statement. For example to check - for the press of the **\"a\"** key we could write `if (event.key == \"a\")`.\r\n\r\n# - Do This:\r\nThe **starter code provided** plays the sound whenever ANY key - is pressed.\r\n\r\n* Use `console.log` to **find out the value of `event.key` - when the up arrow is pressed.**\r\n\r\n* **Add an `if` statement** so the - sound only plays when the when the **up arrow** is pressed." - CSDU4 - Design Mode - 4_markdown_instruction: "# IDs\r\nThe `id` (we'll typically - write **ID**) is a **unique identifier** used for each element in the app.\r\n\r\nEach - element that appears in the app must have a **unique ID**. In fact, if you - try to run a program that has two buttons with same ID you will get a warning - message in the console.\r\n\r\n# Do This\r\nWhile each element you drag out - in Design Mode gets a default ID, they aren't really that helpful (like `button1` - and `button2`), so you should get in the habit of creating your own IDs.\r\n\r\n* - Change the ID of your \"click me\" button to something useful (like `redButton`)\r\n* - Drag out a second button\r\n* Make the second button blue and give it an ID - of `blueButton`" - CSDU4 - Design Mode - 5_markdown_instruction: "# Debugging Event-Driven Programs: - IDs\r\n\r\n**Debugging:** As you write more complex event-driven programs, - you'll need to polish your **debugging** skills. Debugging involves locating - and correcting errors within a program. It is a critical (and generally unavoidable) - step when writing code.<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" - style=\"float: right; width: 200px\">\r\n\r\n**Checking IDs:** Your first - debugging task will be to verify that the button IDs match the IDs in the - event-handlers. **Remember that IDs are case-sensitive**." - CSDU4 - Design Mode - 7_markdown_instruction: "**Logical Errors: ** Sometimes - you can write a program that generates no errors but does not work as you - intend. This is the result of **logical errors** in your code. These can be - tricky to catch without knowing what your program is supposed to do in the - first place, and usually are only found with careful testing of your app's - functionality.\r\n<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" - style=\"float: right; width: 150px\">" - CSDU4 - Design Mode - 8_markdown_instruction: "# Moving and Sizing Buttons\r\n\r\nAn - important component of designing intuitive and visually appealing user interfaces - is the location of the elements on the screen. Using the `setPosition` command - (now added to the Toolbox) you can move and set the size of user interface - elements.\r\n\r\n![](https://images.code.org/c3e42223cbcb096f992d758973d09f63-image-1444664597665.42.48 - AM.png)\r\n\r\n**NOTE:**\r\n * If you only want to set the size you can use - the `setSize` function which looks like this:\r\n\r\n ![](https://images.code.org/cb742ecf96c04477db0f8361ad5dcdaf-image-1448924017288.png)\r\n\r\n - * If you *only* want to set the position *without* changing the size of the - element, you can omit the *width* and *height* parameters from the `setPosition` - function. To do that, you need to switch into text mode, like this:\r\n\r\n - <img src='https://images.code.org/5b565ef5b74b5cd657ba15c67be92b0d-image-1448924356253.gif' - style=\"width: 400px\">\r\n\r\n* **Remember:** in an app screen 0,0 is the - top left corner and you specify a location by how many pixels from the left - and how many down from the top of the screen it is. The screen is **320 by - 450 pixels**." - CSDU4 - Design Mode - 9_markdown_instruction: "# How to Organize the Code\r\nAs - your apps get more complex you'll have to think about how to organize your - code so it remains readable and easy for you to locate things when debugging - any problems. We suggest the following convention which breaks the code into - 3 major sections:\r\n* **Top**: code for event handlers.\r\n* **Bottom**: - code for any other other functions you've written. (We don't have any of - these yet.)" - CSDU4 - Design Mode Icons_markdown_instruction: "<img src=\"https://images.code.org/2b405319f597910b1563ae607958171c-image-1475866226306.49.51.png\" - style=\"width: 200px; float:right\">\r\n\r\n# Icons\r\nIcons help users find - the right functionality while also making your app feel more polished.\r\n\r\n# - Do This\r\nAdd a few icons to your app. For each icon:\r\n\r\n* Drag out an - image element\r\n* Next to the \"Picture\" field click \"Choose...\"\r\n* - Click on the \"Icons\" tab and select one\r\n* Make sure to give your image - a good ID! (do we still need to say it?)\r\n\r\n" - CSDU4 Connecting Screens Getting Back_markdown_instruction: "# Navigating Back\r\n\r\nSomeone - using your app can now get to each of the red, green, and blue pages, but - they can't get back to the homepage. You can add buttons and event handlers - of your own to help them do this.\r\n\r\n# Do This\r\n\r\nCreate buttons and - event handlers to help a user navigate back to the \"home\" screen\r\n\r\n* - Use Design Mode to create a button inside each of the \"red\", \"green\", - and \"blue\" screens. Make sure to give them descriptive IDs.\r\n* Back in - your code drag in three `onEvent()` blocks, one for each of the three buttons - you made.\r\n* Inside each `onEvent()` block use the `setScreen()` block that - switches back to your \"home\" screen.\r\n* Test your app. You should now - be able to navigate back to the home screen from each of the other three." - CSDU4 Connecting Screens template_markdown_instruction: "# Navigating\r\n\r\nOnce - you start adding multiple screens to an app, you need to make sure that users - can always get where they want to go. If you forget to provide a link back - home or to a deeper page.\r\n\r\n# Do This\r\n\r\nHere's an app with four - different pages, but only the \"red\" screen is linked so far.\r\n\r\n* Add - event handlers for \"greenButton\" and \"blueButton\" to go to their respective - screens\r\n* From each of the sub pages, add a button with event handler to - navigate back to the home page\r\n* Test your app thoroughly to make sure - all of your buttons work and you can always get back home" - CSDU4 Connecting Screens_markdown_instruction: "# Navigating\r\n\r\nOnce you - start adding multiple screens to an app, you need to make sure that users - can always get where they want to go. In the next two levels you'll learn - how to make sure a user can always get back to the \"homepage\" of your app.\r\n\r\n# - Do This\r\n\r\nHere's an app with four different pages, but only the \"red\" - screen is linked so far. In this level you'll make the other two buttons - take the user to the correct screen.\r\n\r\n* Add two `onEvent()` blocks, - one each for the \"greenButton\" and \"blueButton\"\r\n* Use the `setScreen()` - block to make each button switch to the appropriate screen\r\n* Test your - app to make sure both buttons work. For example, when you click the green - button you should go to the green screen." - CSDU4 Crowdsource App Demo_markdown_instruction: "# Crowdsourcing\r\n\r\nCrowdsourcing - apps allow multiple users to submit content for everyone to use (the _source_ - of content is the _crowd_). This app is very similar to the list app, with - the main difference being that the list app assumes a single user while this - app allows all users to add to the same list and \"like\" submissions.\r\n\r\nThis - example uses a list of crowdsourced information for simplicity, but you could - display any kind of information in many different formats. A crowdsourcing - app could allow users to submit locations for display on a map, images to - go into a gallery, or any number of other types of information.\r\n\r\n# Functionality - Missing from this Prototype\r\n\r\n* User's can't create accounts or profiles\r\n* - Submitted things aren't added to the list\r\n* Clicking on the \"like\" icons - don't change their state" - CSDU4 Decision App Demo_markdown_instruction: "# Decision Maker\r\n\r\nSimilar - to the quiz app, a decision tree app asks the user a series of questions. - The primary difference between the two is that a decision tree doesn't check - for right or wrong answers, but instead attempts to give the user a suggest - or help them make a decision based on their answers.\r\n\r\nThis simple decision - maker asks only three questions, but more advanced ones actually take the - form of a tree as seen below:\r\n\r\n![](https://images.code.org/aeadfca116011949855c169905ff89a3-image-1476823699500.png)\r\n\r\nDepending - on the user's answer to each question, they're given a different page for - the next question. This allows the app to gradually narrow down the decision - one question at a time. This type of app can be really useful to help users - understand complex processes - for example, you might introduce a recycling - program by using a decision tree app to help users figure out which bin to - sort items into - first asking what material it's made out of, then whether - it is clean or not, and so on.\r\n\r\n# Functionality Missing from this Prototype\r\n\r\n* - Question buttons don't direct you to different screens\r\n* The final screen - doesn't give you a recommended decision" - CSDU4 Functionality setText button_markdown_instruction: "# setText on More - than Just Labels\r\n\r\nYou can use `setText()` to change the text of labels, - obviously, but it can also be used to change the text on _any_ element that - has text, including buttons, text input, and text areas.\r\n\r\n# Do This\r\n\r\nThe - starter program has an event handler already set up for the red button, can - you write event handlers for the other three buttons so they behave in the - same way?" - CSDU4 Functionality setText input_markdown_instruction: "# Pre-fill Input Fields - with setText\r\n\r\nYou've set the text of labels, and you've set the text - of buttons, but did you know you can also use `setText()` to pre-fill text - input fields?\r\n\r\n# Do This\r\n\r\nThis app has four buttons, each of which - should fill the \"nameInput\" field with a given name. For each button:\r\n\r\n* - Add an `onEvent` block to run when the button is clicked\r\n* In the button's - event handler, set the text of \"nameInput\" to the appropriate name\r\n\r\nWhen - you've gotten all four buttons to work, add another button that will fill - the input field with your name." - CSDU4 Functionality setText quiz 1_markdown_instruction: "# Making The Quiz - App\r\n<img src=\"https://images.code.org/b87aef1a1fcd238590b2b866f11f47c7-image-1478035551794.15.03.png\" - style=\"float:right; max-width: 200px;\">\r\nLet's look back at the quiz - app example that we talked about earlier in this lesson. Recall that we proposed - a single page that could serve three purposes:\r\n\r\n1. Display the question\r\n2. - Show if the question was answered correctly\r\n3. Show if the question was - answered incorrectly\r\n\r\n# Do This\r\n\r\nWe've already provided the screen - for a single question. Before worrying about any code, you just need to set - this up to ask a question.\r\n\r\n* Change the title to a question that you - want to ask\r\n* Change the text of the two buttons to two potential answers - to your question" - CSDU4 Functionality setText quiz 2_markdown_instruction: "# Answering the Question\r\n\r\nNow - that this screen is asking the question you want it to ask, you'll want to - make it respond to the answer buttons.\r\n\r\n# Do This\r\n\r\nInstead of - using the buttons to change screens as we did in earlier quiz apps, each one - of the answer buttons should change the title to say either \"Correct\" or - \"Incorrect.\" For each of the answer buttons:\r\n\r\n* Add an event handler - to watch the button's ID\r\n* In the event handler, set the title text to - either \"Correct\" or Incorrect\"\r\n\r\n_Challenge: Create a couple more - question screens just like this on and make the \"Next Question\" button navigate - between them._" - CSDU4 Functionality setText quiz 3_markdown_instruction: "# Don't Skip The - Question\r\n\r\nThe way this screen currently works, a user could just click - immediately on \"Next Question\" and not bother answering. Worse still, the - user could click one answer, see that it's wrong, and then click the other. - Let's use `hideElement()` and `showElement()` to prevent that.\r\n\r\n# Do - This\r\n\r\nYou'll need to hide or show all three of the buttons in order - to make this work, so let's focus on one at a time:\r\n\r\n**Next Question**\r\n\r\nThe - \"Next Question\" button should be hidden to start with, and then show up - once the question has been answered.\r\n\r\n* In Design Mode, select the \"Next - Question\" button and check the \"hidden\" checkbox. This will make sure the - button is already hidden when the app starts\r\n* In the event handler for - each of the answer buttons, add code to show the \"Next Question\" button\r\n\r\n**Answer - Buttons**\r\n\r\n* In the event handler for each button, add code to hide - the question buttons\r\n\t* If you want to allow a user to re-answer using - only the answers they haven't tried yet, you could hide just the button that - was clicked" - CSDU4 Functionality setText_markdown_instruction: "# Changing text with setText()\r\n\r\nYou - actually saw `setText()` briefly in the last lesson - it's a function that - allows you to change the text of a design element with code.\r\n\r\n# Do This\r\n\r\nUsing - the provided `onEvent()` block\r\n\r\n* Add a `setText()` block in the event - handler\r\n* From the dropdown in the `setText()` block, select \"title\"\r\n* - Make up a new title for the app and place it in the second parameter of the - `setText()` block\r\n* Run it and test the button" - CSDU4 Functionality visible_markdown_instruction: "# Controlling Visibility\r\n\r\nEarlier - in this lesson, when we were proposing ways to simplify the quiz app, we mentioned - that it was possible to show or hide design elements with code. App Lab has - two functions that let you control the visibility of an element:\r\n\r\n* - `hideElement()` makes the specified element invisible\r\n* `showElement()` - makes the specified element visible\r\n\r\n# Do This\r\n\r\nThe provided app - has an image and two buttons.\r\n\r\n* Attach an event handler to the \"Hide\" - button that hides the image when clicked\r\n* Attach an event handler to the - \"Show\" button that shows the image when clicked" - CSDU4 List App Demo_markdown_instruction: "# List Manager\r\n\r\nThe list manager - app allows user to keep track of the state of information and can be modified - to serve many different purposes, such as checking in / out loaned items, - tracking personal To Dos, or keeping track of where things are in a multi-step - process.\r\n\r\nWhile this example focuses on a single list, more sophisticated - list apps could allow the user to create multiple lists, or even move items - between lists. This app also only keeps track of the name of an item and whether - or not it is \"Done,\" but it could be extended to track and organize any - amount of information about the list times.\r\n\r\n# Functionality Missing - from this Prototype\r\n\r\n* Delete buttons don't actually delete items from - the list\r\n* Add screen doesn't actually add an item to the list" - CSDU4 nameAgeTemplate_markdown_instruction: "# Text Input Elements\r\n\r\nSo - far we've been using `promptNum` as a simple way to get a number as input. - Now that we know a little about strings were are going to create **user interface - elements that users can use to submit text (i.e. strings) instead**. The first - and simplest example is `textInput` which you can find in Design Mode.\r\n\r\n<img - src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 - PM.png\" style=\"width: 100px\">\r\n\r\n# Do This\r\n\r\n* **Add two text - input elements to this program**, one for the name and one for the age of - the user.\r\n* **Give your text input elements descriptive and meaningful - IDs**\r\n* **In Design Mode** set their default text to prompt the user for - their name in age\r\n* **Compare your app to the example below**\r\n\r\n<img - src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 - PM.png\" style=\"float:left; width:200px;\">\r\n<br>" - CSDU4 Project Bug Feature_markdown_instruction: "# Improving and Iterating\r\n\r\nYou've - put your app in front of users, gathered feedback, and identified bugs and - new features - time to do something about it.\r\n\r\n# Do This\r\n\r\nEach - team member is going to implement select features and bug fixes on their own - version of the team's app. Start by selecting a sticky note from the **To - Do** column of your team's chart and moving it to the **Doing** column. For - each sticky you tackle:\r\n\r\n* Make a remix of your app at it's current - state. This ensures that you always keep a working copy of your app as you - try to add new features\r\n* Give your remix a meaningful name, such as \"Pancake - Finder - original\", or \"Pancake Finder - navigation fix\"\r\n* Return here - to work on your app\r\n* Add a comment to the top of your program describing - the feature or bug fix you are implementing\r\n* Work on your iteration until - it works. Try to stay focused on only the single feature or bug that you've - selected.\r\n* When done, move your sticky to the **Done** column, pick a - new one, and start the process over." - CSDU4 Project Functionality_markdown_instruction: "# Add Some Functionality\r\n\r\nUsing - the list you brainstormed with your team, add a single piece of new functionality - to your app.\r\n\r\n# Do This\r\n\r\nBefore adding anything new to a working - app, it's always a good idea to make a backup. Click the \"Remix\" button - in the header, give your remix a good name, and then come back here.\r\n\r\nFor - each piece of functionality you incorporate:\r\n\r\n* Make a remix of your - app at it's current state\r\n* Return here to work on your app\r\n* Add a - comment to the top of your program describing the functionality you are trying - to add\r\n* Work on your app until it works. Try to stay focused on only the - single piece of functionality you've chosen\r\n* When done, pick a new idea - and start the process over\r\n" - CSDU4 Project Import_markdown_instruction: "# Back To Your App\r\n\r\nNow that - you've had some practice with importing screens, it's time to start working - on your team's app.\r\n\r\n# Do This\r\n\r\nEach member of your team is going - to create their own copy of the app, with all of the team members' screens - imported in. This will be your copy of the app, and the copy that you will - start to add code to in the next lesson.\r\n\r\n* Collect all of the sharing - urls for your team's pages\r\n\t* You can find the share url by going back - to the last level of the previous lesson, or by finding the screen in your - [projects directory](/projects)\r\n* Import each of the screens, one at a - time\r\n\t* If you run into an ID error with one of the screens, discuss the - issue with the screen's creator so it can be fixed and imported\r\n* Delete - the default \"screen1\"\r\n* Set the main screen as the default\r\n\r\nDon't - worry about adding any code at this point; we'll get to that in the next - level." - CSDU4 Quiz App Demo_markdown_instruction: "# Quiz Me\r\n\r\nA quiz app can - be used to teach, or help reinforce, information important to your chosen - topic.\r\n\r\nAt its most basic, a quiz app is composed of a screen for each - question with two or more buttons for multiple choice answers. Each button - links to a page that either confirms that you were correct, or gives you information - about why you were were wrong.\r\n\r\nMore advanced quiz apps could include - features such as:\r\n\r\n* Different types of questions (such as matching, - free response, or even interactive games)\r\n* Randomizing the order of questions\r\n* - Changing the questions based on how we'll you're doing\r\n* Providing a - final score\r\n* Incorporating study material\r\n\r\n# Functionality Missing - from this Prototype\r\n\r\n* Questions aren't actually checked for correctness" - CSDU6 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions - as Indexes: Using Variables\r\n\r\n* **Starter code** has been provided which - creates an list of identifiers for icons in the icon library\r\n* **Write - code** that sets the image on the screen to a random icon from the list" - CSDU6 - Arrays - indexPractice_markdown_instruction: "# Index Practice\r\n\r\n<img - src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has - been provided that creates a list called `colors`.\r\n\r\n* Use `setProperty` - and the list of colors to change the `background-color` of the buttons to - create a rainbow. The first button has been done for you." - CSDU6 - Arrays - length_markdown_instruction: "<img src=\"https://images.code.org/f02914c957acffecbadaa3646388d26c-image-1486499703151.33.50 - PM.png\" style=\"width: 200px; float:right\">\r\n\r\n# List Length\r\n\r\n* - **Starter code** has been provided which creates several long arrays.\r\n* - **Use `list.length` and `console.log`** to determine how many items are in - each array. An example of the output is below." - CSDU6 - Arrays - lengthMinus1_markdown_instruction: "# Accessing Last Item - in List\r\n\r\n* **Starter code** has been provided that which creates several - lists.\r\n* **Write Code** to display the final item in each list. Make sure - to use list.length so that your code will work even if the list shrank.\r\n" - CSDU6 - button debug_markdown_instruction: "# Debug\r\n\r\n<[gif needed]>\r\n\r\nThis - program should work like the image on the right - toggle LEDs one by one in - the direction of the button you click. Clicking the left button should cause - LEDs to toggle counter clockwise, while clicking the right button should toggle - LEDs clockwise. Find and fix all of the bugs to get the program working again." - CSDU6 - button on off_markdown_instruction: "# On and Off Buttons\r\n\r\n<[pic - needed]>\r\n\r\nRight a program that works like the image to the right. The - left button should turn on all of the color LEDs, and the right button should - turn them off again." - CSDU6 - button screen buttonL_markdown_instruction: "# Board Events\r\n\r\nThe - `onBoardEvent()` command allows you to start taking input from your Circuit - Playground. This app has two screens, \"red_sreen\" and \"blue_screen\". Using - the provided board event handler, write a program that switches to the blue - screen when the left button on your board is pressed." - CSDU6 - button screen buttonR_markdown_instruction: "# Changing the Input\r\n\r\n<img - src=\"https://images.code.org/cc903e4a0fb57b241b90abe220f027ef-image-1487707484420.04.00.png\" - style=\"float:right; margin-left: 10px; width: 50%\">\r\n\r\nUsing another - `onBoardEvent()` block, make `buttonR` change the screen back to \"red_screen\". - The first input of the `onBoardEvent()` command lets you pick which board - object to watch." - CSDU6 - button switch_markdown_instruction: "# The Toggle Switch\r\n\r\nWhile - the toggle switch is in many ways similar to the left and right buttons, the - reasons you might use it can be different. Unlike the buttons, the toggle - switch stays in whichever position you place it, so it doesn't have a \"press\" - event. In fact, you'll find that none of the events you used with buttons - are present for the toggle switch.\r\n\r\n# Do This\r\n\r\nDrag out an `onBoardEvent()` - block and select `toggleSwitch` from the first dropdown\r\n\r\n* Look at the - options available in the events dropdown. What do you think they do?\r\n* - Write a program that turns on half of the color LEDs at a time, based on the - position of the toggle switch <[pic needed]>\r\n\r\n_Challenge:_ The toggle - switch events will only fire when the switch changes, so when you start the - program you'll need to flip the switch for your code to work. Can you fix - it so that your program starts with the correct set of LEDs lit? Look in \"Circuit\" - drawer for a block that could tell you which position the toggle switch is - in." - CSDU6 - button toggle_markdown_instruction: "# Toggle with a Button\r\n\r\nUsing - `onBoardEvent()`, can you write a program that toggles the red LED when you - click the left button?" - CSDU6 - button tug o war challenge_markdown_instruction: "# Challenge\r\n\r\n_Check - with your teacher before starting this challenge_\r\n\r\nAt this point your - Tug o' War game should have basic functionality, but there are still a few - things missing. Continue fleshing out your game. You can make the game your - own in any way you like, but you might add some of the following features:\r\n\r\n* - Switch to a \"Win\" screen when one player reaches their target\r\n* Add a - \"Reset\" button to start the game over\r\n* Add different difficulty levels - or \"handicaps\" (one user may move two on each click while the other only - moves one)\r\n* Add visuals to make the game look more interesting\r\n* Use - the color LEDs to show the score" - CSDU6 - button tug o war left button_markdown_instruction: "# Making Both Buttons - Work\r\n\r\nIf you were successful in the last level, the slider should move - to the right when the right button is pressed. To get the left button to work - you need to add another event handler, only this time it should **decrease** - the variable _score_ and update the slider on each press." - CSDU6 - button tug o war right button_markdown_instruction: "# Tug o' War\r\n\r\nLet's - start working on a two player Tug o' War game. Each player will be assigned - one of the two hardware buttons (`buttonL` or `buttonR`), and they play the - game by clicking as quickly as possible. Each time one of the buttons is clicked, - it should move the slider \"tug_slider\" in the direction of that button.When - the slider gets to one of the ends (either -10 or 10), that player wins.\r\n\r\n# - Do This\r\n\r\nFirst we'll get the right button working. You've already - been provided an event handler for `buttonR` - when the \"press\" event occurs, - your program should:\r\n\r\n* Increase the variable _score_ by one\r\n* Set - the value of \"tug_slider\" to the new score\r\n\r\nDon't worry about the - other button yet, we'll get to that in the next level." - CSDU6 - button up down predict question_markdown_instruction: "What do you - think will happen when you run this code? What will happen when you press - the left and right buttons?" - CSDU6 - button up down_markdown_instruction: "# Down and Up Events\r\n\r\nAs - you saw in the last level, the \"down\" and \"up\" events allow you to respond - to buttons being pressed down and being released back up, respectively.\r\n\r\n# - Do This\r\n\r\nUsing those events, can you write a program that shows the - label with id \"alert_message\" while the button is pressed down, but hides - it again when the button is released?" - CSDU6 - ch 1 exemplar LEDs_markdown_instruction: "# An Example Using Color - LEDs\r\n\r\nHere's an example app that uses the color LEDs, event handlers, - and a for loop to create an visual color mixer. Run this app and analyze how - you think it was written." - CSDU6 - ch 1 project design_markdown_instruction: "# Set Up Your Screen\r\n\r\nUsing - the project guide, set up the elements of your screen in Design Mode." - CSDU6 - ch 1 project events_markdown_instruction: "# Event Handlers\r\n\r\nSet - up an event handler for each of the elements you plan to use for input. Don't - worry yet about getting the them fully functional, but you might use `console.log()` - statements to help with testing." - CSDU6 - ch 1 project finish_markdown_instruction: "# Add the Finishing Touches\r\n\r\nGo - back to your project guide and check to see that your app is addressing the - goals you set out. This is your chance to add finishing touches, improve functionality, - and get your app ready to be used by other people. When you're are finished, - and have thoroughly tested it, use the share button to share your app out - with others." - CSDU6 - ch 1 project functions_markdown_instruction: "# Functions\r\n\r\nCreate - all of the functions that you identified in your project guide." - CSDU6 - ch 1 project output_markdown_instruction: "# Board Output\r\n\r\nAt - this point you should have the structure of your app mostly fleshed out. Test - your program as is to make sure that everything currently works as expected. - Once you are confident in your program as-is, add the code to send output - to your board." - CSDU6 - for loop - 1_markdown_instruction: "# For Loop - Looping Through A - List\r\n\r\n* Print out all the items in the colors list using a for loop" - CSDU6 - for loop - 10_markdown_instruction: "# For Loop - Looping Through A - List\r\n\r\nYou saw this for loop on the last level:\r\n\r\n<pre>\r\nfor(var - i = 0; i < daysOfWeek.length; i++){\r\n console.log(i);\r\n}\r\n</pre>\r\n\r\nWhich - prints the numbers from 0 to one less than the list length in this case (0 - to 6). Another way of looking at this is that it prints all the index values - in the list! This might be helpful to loop through a list!\r\n\r\n**Starter - Code:** This program writes out each item of the array individually. \r\n\r\n**Write - Code** that uses the for loop from the last level to print out all the items - in the list." - CSDU6 - for loop - 2_markdown_instruction: "# For Loop - Condition\r\n\r\n* - Run the program - how many times does it print?\r\n* Change the 2 to another - positive number less than 5. What happens?" - CSDU6 - for loop - 3_markdown_instruction: "# For Loop - Starting Value\r\n\r\nYou - can change where a for loop starts counting.\r\n\r\n* Run the program what - number does it start counting at?\r\n* Try changing the 5 to a different number\r\n\t* - What happens if you make the number negative?\r\n * What happens if you - make the number bigger than 10 (since the condition is i < 10)?" - CSDU6 - for loop - 4_markdown_instruction: "# For Loop - Incrementor \r\n\r\n* - Run the program what numbers is it printing?\r\n* Try to change the 2 to another - number, what happens?" - CSDU6 - for loop - 6_markdown_instruction: "# For Loop - Condition Practice\r\n\r\nChange - the condition of the for loop so that the word message prints 6 times." - CSDU6 - for loop - 7_markdown_instruction: "# For Loop - Starting Value Practice\r\n\r\nEdit - the starting value and the condition of the loop so that it counts from 50 - to 100.\r\n" - CSDU6 - for loop - 8_markdown_instruction: "# For Loop - Incrementor Practice\r\n\r\nCan - you make the program count from 30 to 60 by 3s? (30,33,36,39......57,60)" - CSDU6 - for loop - 9_markdown_instruction: "# *for* Loop with *if*\r\n\r\nSometimes - we want to find values in an array that meet certain conditions. We can add - an **`if` statement inside the `for` loop** to individually check every value - within the array. To practice this, we will create a `for` loop that will - **display every value in the array greater than 5**.\r\n\r\n# Do This:\r\n** - Starter code** has been been provided that creates an array of random values.\r\n\r\n* - Add a `for` loop that references every index in the array.\r\n\r\n* Add an - `if` statement inside the `for` loop that **displays every value in the array - greater than 5** using `console.log`\r\n\t![](https://images.code.org/969077ff23232e410ce17520b0a71e1e-image-1447390972867.gif)\r\n \r\n* - **Note:** Because the original array is being constructed with random values - it's *possible* that it might not have any values greater than 5. Just run - the program a few times to make sure it works. An example of the possible - output is below.\r\n\r\n![](https://images.code.org/266e23afc3533ebd63b393b2ee8682d8-image-1447796380510.39.26 - PM.png)\r\n" - CSDU6 - for loop - around for loop_markdown_instruction: "# Before and After - For Loop\r\n\r\n* Run this code and check out when the console.log statements - before and after the for loop print." - CSDU6 - for loop - button grid 1_markdown_instruction: "# Random Button Colors\r\n\r\n**Starter - Code:** An array with the name of the 30 buttons on the screen (not including - the New Pattern button) is provided for you. \r\n\r\n**Write Code** that loops - through all the buttons on the screen and gives them each a random color when - the New Pattern Button is clicked." - CSDU6 - for loop - color buttons with for_markdown_instruction: "# Lists\r\n\r\n<img - src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\nTake a look at the code - you wrote in the last level. Can you make it better by using a loop to set - the button colors instead?" - CSDU6 - for loop - color buttons_markdown_instruction: "# Lists\r\n\r\n<img - src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has - been provided that creates a list of colors and a list of the buttons on the - screen. In addition there is code to set each button to a color.\r\n\r\n**Change - the code** so that instead of the name of each button being using in the call - to `setProperty` the list index is used instead. For example:\r\n\r\n<pre>\r\nsetProperty(buttons[0],\"background-color\", - colors[0]);\r\n</pre>" - CSDU6 - for loop - condition with for_markdown_instruction: "# *for* Loop with - *if*\r\n\r\nAnother way to use a for loop is to count the number of occurances - of something in list. \r\n\r\n** Starter Code:** The program generates an - list of 5 random numbers from 1 to 3. \r\n\r\n**Write Code:** Write a program - that prints the number of 2s in the list.\r\n\r\n* You will need to write - an if statement to check if the current value of the list is equal to 2\r\n* - Instead of printing that value inside the if statement like on the last level - you will want to increment a variable that keeps track of the number of 2s.\r\n* - Print out the variable after the for loop runs!" - CSDU6 - for loop - count down_markdown_instruction: "# Counting down\r\n\r\nSo - far all the programs you have written count up. Can you make this program - count down from 10 to 1? Hint: You need to change something about all three - parts of the for loop!" - CSDU6 - for loop - next day_markdown_instruction: "# Accessing Items in a List\r\n\r\n**Starter - Code:** There is a list of days of the week provided as well as a command - to set the label on the screen.\r\n\r\n**Do This:** Can you change the index - value so that the page displays \"Today is: Tuesday\"" - CSDU6 - for loop - predict repeat_markdown_instruction: "# For Loop - Condition - Practice\r\n\r\nChange the condition of the for loop so that the word message - prints 6 times." - CSDU6 - for loop - repeatedCode_markdown_instruction: "# Refactoring To For - Loop\r\n\r\nFor loops are just a way of simplifying repeated code and make - it easier to update in the future.\r\n\r\n* Can you take the repeated code - here and turn it into a for loop?" - CSDU6 - for loop - why for_markdown_instruction: "# Lists\r\n\r\n<img src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\nWhy are loops so great? Well - lets try something out.\r\n\r\n* Add another button to your screen in design - mode.\r\n* Add a color for that button to the end of your list of colors\r\n* - Add the button name for that button to the end of your list of buttons\r\n* - Run your program!\r\n\r\nDid it work? Notice you never changed the for loop - at all!" - CSDU6 - for loop - winning num_markdown_instruction: "# Debug\r\n\r\nThis program - is supposed to generate 3 random winning numbers from 1 to 5. There is a list - of numbers but it seems like there are some bugs with generating the 3 random - numbers when the Draw Numbers button is clicked. Can you debug the program? - Check to make sure you can get every number in every slot of the winning numbers - area. " - CSDU6 - for loops - lights picker_markdown_instruction: "# Challenge: More - Patterns\r\n\r\nYour work on the color light patterns is back:\r\n\r\n* Consider - using the all lights on and all lights off functions you made on the last - level here.\r\n* Can you edit the patterns you created to use for loops where - appropriate?\r\n* Can you add more patterns that use for loops?" - CSDU6 - lists - lists 1_markdown_instruction: "# Lists\r\n\r\nLet's practice - adding items and printing out lists.\r\n\r\n* Add a `console.log()` command - to print out the lettersList\r\n* Add the letter \"c\" to the letters list - so it prints [a,b,c,d]" - CSDU6 - lists - lists 2_markdown_instruction: "# Create Your Own Lists\r\n\r\n**Write - code:** to create _one or more_ of the following lists:\r\n\r\n* The numbers - from 1 to 10\r\n* A list of the names of 5 different shapes\r\n* The names - of the months of the year" - CSDU6 - lists - lists 3 - out of bounds_markdown_instruction: "# Accessing - Items in a List\r\n\r\n**Starter Code:** There is a list of days of the week - provided as well as well as a console.log statement to access the spot that - holds \"Friday\" in the list. \r\n\r\n**Do This:** Can you add three more - console.log statements that access the spots that hold:\r\n\r\n* Thursday\r\n* - Monday\r\n* Sunday" - CSDU6 - lists - lists 3_markdown_instruction: "# Accessing Items in a List\r\n\r\n**Starter - Code:** There is a list of days of the week provided as well as a command - to set the label on the screen.\r\n\r\n**Do This:** Can you change the index - value so that the page displays \"Today is: Tuesday\"" - CSDU6 - lists - lists 5_markdown_instruction: "# Debug\r\n\r\nThis program - is supposed to generate 3 random winning numbers from 1 to 5. There is a list - of numbers but it seems like there are some bugs with generating the 3 random - numbers when the Draw Numbers button is clicked. Can you debug the program? - Check to make sure you can get every number in every slot of the winning numbers - area. " - CSDU6 - sensor love tester demo_markdown_instruction: "# \"Love\" Tester\r\n\r\nThe - \"Love\" Tester is a classic carnival game. It works by having a user place - their palm flat on a sensor or hold a metal handle. The tester then displays - how in love that person is. The simplest version of these machines simply - measure the temperature of the user’s hand and equate more love with a higher - temperature.\r\n\r\nTest out this \"Love\" Tester by holding your thumb down - on your Circuit Playground's temperature sensor. Compare your results with - those of your neighbors - do all of the boards respond in the same way?" - CSDU6 - sensor theremin demo_markdown_instruction: "# Light Theremin\r\n\r\nA - theremin is an instrument that can be played without the musician actually - touching it! Traditional theremins use magnetic fields for user interaction, - but a simpler version can be made by detecting and reacting to light.\r\n\r\nTest - out this theremin by waving your hand over the light sensor on your Circuit - Playground. How does the tone change as the amount of light detected changes?" - CSDU6 - sensor vu meter demo_markdown_instruction: "# VU Meter\r\n\r\nMany - stereo systems feature a row of LEDs that light up as the music plays. This - display is called a Volume Unit (VU) Meter, and it allows the user to see - how loud the music is as it plays.\r\n\r\nTest out this VU Meter by speaking - or otherwise making noise near the Circuit Playground. How do the lights and - display change as the volume of ambient noise changes?" - CSDU6 - sensors challenge_markdown_instruction: "# Challenge\r\n\r\n_Check - with your teacher before pursuing this challenge_\r\n\r\nNow that you've - practiced taking input from the various analog sensors and changing their - scale to meet your needs, can you come up with an interesting use for sensor - data? It's easy to display the raw numbers coming out of a sensor, but far - more interesting to present that data in different ways.\r\n\r\nConsider the - following ways you might communicate sensor data:\r\n\r\n* Use the board outputs\r\n* - Change the width, height, or position of a UI element\r\n* Use conditionals - to display different images based on sensor values" - CSDU6 - sensors experiment_markdown_instruction: "<iframe width=\"370\" height=\"620\" - style=\"float:left; margin-right: 25px; border: 0px;\" src=\"https://studio.code.org/projects/applab/iCWa6Gsb-W4StwmqFX5TkA/embed\"></iframe>\r\n\r\n# - Sensor Experiment\r\n\r\nRun the program to the left and experiment with your - board. Try interacting with your board in many different ways to figure out - what each sensor might be. Once you've completed the experiment, answer the - following questions for each sensor in the text box below.\r\n\r\n* What does - this sensor measure?\r\n* What is it's maximum value?\r\n* What is it's - minimum value?" - CSDU6 - sensors light_markdown_instruction: "# Light Sensor Updates\r\n\r\nThis - app is very similar to the last, but we've added a button with the ID \"update_button\". - Write a program that displays the current value of the light sensor every - time the update button is clicked." - CSDU6 - sensors love tester 1_markdown_instruction: "# \"Love\" Tester: Collecting - and Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat - scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an - event handler to continually collect data from your chosen sensor and use - `console.log()` to track how it changes to user interaction. If necessary, - change the scale of your input to meet your needs.\r\n\r\n_Tip: Consider which - type of data is easiest to use from the temperature sensor - the raw value, - temperature in C, or temperature in F._" - CSDU6 - sensors love tester 2_markdown_instruction: "# \"Love\" Tester: Displaying - Output\r\n\r\nHow will your collected data be displayed?\r\nDoes your data - need to be transformed or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace - your call to `console.log()` with the kind of output you need for your project.\r\n\r\n_Tip: - You may want a conditional to determine which output to display depending - on input._" - CSDU6 - sensors love tester 3_markdown_instruction: "# \"Love\" Tester: Finishing - it Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# - Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning - guide to make sure that the app meets your initial goals." - CSDU6 - sensors predict question_markdown_instruction: "# Make a Prediction\r\n\r\nRead - the code in this program and make a prediction below. What do you think this - program will do when you run it? How is the user intended to interact with - the board?" - CSDU6 - sensors rgb part 1_markdown_instruction: "# Displaying Sensor Readings - in Color\r\n\r\nIn the previous prediction level you saw how the `setScale()` - method can convert the full range of sensor readings (0-1023) into a range - that can be used for RGB values (0-255). Let's build on that idea to make - an app that can communcate the current value of all three analog sensors with - a single color.\r\n\r\n# Do This\r\n\r\nTo start, we just need to set the - sensor scales correctly - don't worry about actually setting the color of - the background yet.\r\n\r\n<img src=\"https://images.code.org/39de88e19682e905a1e08d5f12398f35-image-1488995498849.png\" - style=\"float: right; width: 300px; margin-left: 20px;\"/>\r\n\r\n* Using - the `sensor.setScale()` block, set each of the three analog sensors to the - right scale for an RGB color channel.\r\n* Create a variable for each of the - three colors and assign each one to the `.value` of a different sensor.\r\n* - Use `console.log()` to test that your variables are in the correct range.\r\n\r\n_Hint: - Order matters. You need to set the scale of a sensor before checking it's - value_" - CSDU6 - sensors rgb part 2_markdown_instruction: "# Putting Color on the Screen\r\n\r\nNow - that your sensor data is in a scale that works for RGB, you can go about setting - the screen color.\r\n\r\n# Do This\r\n\r\n* Add a `setProperty()` block and - set it to change the \"background-color\" property of \"screen1\".\r\n* Add - an `rgb()` block to the last parameter of `setProperty()`.\r\n* Use the three - color variables you created as inputs to the `rgb()` block." - CSDU6 - sensors rgb part 3_markdown_instruction: "# Continuous Updates\r\n\r\nThis - sensor-to-color app isn't super useful if it only sets the color once when - you start the app. You can use the sensors' \"data\" event to make your app - continually update the background color every time the value changes.\r\n\r\nMove - your `setScale()` blocks into a an event handler for one of the sensors to - make the app update continually." - CSDU6 - sensors sound_markdown_instruction: "# Reading the Sound Sensor\r\n\r\nIn - this app we've already added a text label with the id \"sound_value\". Using - the `soundSensor.value` block. display the value of the sound sensor." - CSDU6 - sensors temp f c_markdown_instruction: "# Temperatures in Fahrenheit - and Celsius\r\n\r\nWhile the sound, light, and temperature all behave in the - same fashion (converting an analog input to a 10 bit number), the temperature - sensor is often used a bit differently. Typically if you are using a temperature - sensor, you want to get a temperature in Fahrenheit or Celsius, not just a - number in a range. To help with this, the temperature sensor how two special - blocks, `tempSensor.F` and `tempSensor.C`.\r\n\r\n# Do This\r\n\r\nUsing an - event handler, write a program that continuously updates the labels \"temp_c\" - and \"temp_f\" with the appropriate temperature readings." - CSDU6 - sensors temp_markdown_instruction: "# Make a Thermometer App\r\n\r\nSimilar - to the sensors you saw in the previous levels, you can get the raw value of - the temperature sensor using `tempSensor.value`. For the temperature sensor, - however, there are some more interesting properties available. `tempSensor.F` - and `tempSensor.C` will convert the raw input value to either Fahrenheit or - Celsius.\r\n\r\n# Do This\r\n\r\nMake a simple thermometer app that reads - in values from the temperature sensor. Your app can display the temperature - in either Fahrenheit or Celsius (or both!)\r\n\r\n_Challenge: can you make - your app continually update the temperature readings?_" - CSDU6 - sensors theremin 1_markdown_instruction: "# Light Theremin: Collecting - and Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat - scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an - event handler to continually collect data from your chosen sensor and use - `console.log()` to track how it changes to user interaction. If necessary, - change the scale of your input to meet your needs." - CSDU6 - sensors theremin 2_markdown_instruction: "# Light Theremin: Displaying - Output\r\n\r\nHow will your collected data be displayed?\r\nDoes your data - need to be transformed or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace - your call to `console.log()` with the kind of output you need for your project." - CSDU6 - sensors theremin 3_markdown_instruction: "# Light Theremin: Finishing - it Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# - Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning - guide to make sure that the app meets your initial goals." - CSDU6 - sensors vu meter 1_markdown_instruction: "# VU Meter: Collecting and - Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat - scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an - event handler to continually collect data from your chosen sensor and use - `console.log()` to track how it changes to user interaction. If necessary, - change the scale of your input to meet your needs.\r\n\r\n_Tip: If you are - going to use the 10 color LEDs for output, how should you set the scale of - your sensor?_" - CSDU6 - sensors vu meter 2_markdown_instruction: "# VU Meter: Displaying Output\r\n\r\nHow - will your collected data be displayed?\r\nDoes your data need to be transformed - or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace your - call to `console.log()` with the kind of output you need for your project.\r\n\r\n_Tip: - You may want to use a conditional to determine which LEDs to turn on, and - which one's to turn off_" - CSDU6 - sensors vu meter 3_markdown_instruction: "# VU Meter: Finishing it - Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# - Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning - guide to make sure that the app meets your initial goals." - CSDU6 - timed loop challenge_markdown_instruction: "# Challenge\r\n\r\n_Ask - your teacher before embarking on this challenge_\r\n\r\nUsing your new _timed - loop_ skills, create an interesting program of your own design. Consider using - multiple loops running at different speeds, or combining _timed loops_ with - the `blink()` and `play()` helpers you saw in the previous level.\r\n\r\nYou - can either start from scratch here, or remix any of the earlier levels in - this lesson." - CSDU6 - timed loop console.log()_markdown_instruction: "# Starting From Scratch\r\n\r\nNow - that you've got some practice with `timedLoop()`, let's see if you can set - one up from scratch.\r\n\r\n# Do This\r\n\r\n* Get a `timedLoop()` block from - the _Control_ drawer in your toolbox\r\n* Change the _ms_ input so that the - loop runs twice a second\r\n* Inside the loop, write the console with `console.log()`" - CSDU6 - timed loop for LEDs_markdown_instruction: "# Turn on Each RGB LED and - Exit\r\n\r\nUsing a _timed loop_ in place of a _for loop_ loop requires that - you set up a counter variable, increment it each time the loop is run, and - use a conditional to determine when to exit the loop. Set up a _timed loop_ - to turn on each of the color LEDs one at a time and then exit. Refer back - to the previous page for examples." - CSDU6 - timed loop helpers_markdown_instruction: "# Timed Loop Alternatives\r\n\r\nBlinking - lights and playing notes are common enough activities that we've provided - some helpers to do them more easily.\r\n\r\n# Do This\r\n\r\nRun this code - to see how the helpers work, and then **discuss** with a neighbor how you - might do this with a _timed loop_." - CSDU6 - timed loop question timed_markdown_instruction: "What do you think - will happen when you run this code?" - CSDU6 - timed loop random blink_markdown_instruction: "# Timed Blinking\r\n\r\nThe - provided code toggles a randomly selected color LED once. Place that line - inside a timed loop to make a randomized pattern of blinking lights." - CSDU6 - timed loop random sound exit_markdown_instruction: "# Ending The Song - and Light Show\r\n\r\nHere's the randomized light and music app you created - earlier. Using the `stopTimedLoop()` command, can you make the program stop - at some point? You can choose one of the following ways to stop:\r\n\r\n* - Use a _counter_ variable and stop the loop after the counter has reached a - certain point (like a _for loop_)\r\n* Add a button and event handler to call - `stopTimedLoop()` when clicked.\r\n\r\n_Make sure you also turn off all of - the LEDs when the show is over!_" - CSDU6 - timed loop random sound_markdown_instruction: "# Disco Dance Party\r\n\r\nAdding - some sound to your blinking lights would really kick this program up a notch.\r\n\r\n# - Do This\r\n\r\n* At the top of the program, create an list of notes, such - as `var notes = ['C4', 'D4', 'E4']`\r\n* Inside the timed loop, randomly - select one of the notes to play with `buzzer.note()`\r\n\r\n_Challenge: By - default the lights are all blinking white - can you set them to random colors?_" - CSDU6 - timed loop smiley event_markdown_instruction: "# What Happens Between - Repetitions\r\n\r\nWhen the `timedLoop()` is waiting for the next repetition, - the rest of your program is free to do whatever else it needs to do, including - respond to events.\r\n\r\nAdd an event handler for the \"smiley\" image. You - can make the event do whatever you like - just test it to make sure that your - event responds each time the image is moved.\r\n\r\n**Heads Up**: Make sure - to put your event handler **outside** of the loop, otherwise a new event handler - will be added _every time your loop is run!_ \r\n\r\n_Challenge: At this point - you've got the start of a simple clicker gamer. Consider keeping track of - score, or adding additional event handlers._" - CSDU6 - timed loop smiley rand y_markdown_instruction: "# Infinite Loop\r\n\r\nThe - `timedLoop()` is really useful not only for looping code at a slower speed, - but also if you want to a loop to run infinitely. The provided program moves - the image \"smiley\" to a random x position every second, can you make the - image also move to a random y?" - CSDU6 - UI and Inputs - Debug Screens and IDs_markdown_instruction: "# Debug - The Program\r\n\r\nIn Unit 4 you learned how to set up the UI of an app, give - elements meaningful IDs, and switch between screens using button clicks. The - programmer that created this app did not use good IDs and that caused their - code to be buggy. Can you fix their code?\r\n\r\n* Go into Design Mode and - give everything meaningful IDs\r\n* Set up the event handlers so that the - buttons transition to the correct screen (see diagram below)\r\n\r\n![](https://images.code.org/f9c9a9b5cbcb6e1cd59b1349625b7e9d-image-1485898200882.png)" - CSDU6 - UI and Inputs - dropdown setText_markdown_instruction: "# setText and - getText\r\n\r\nOften you will want to get the text of a UI Element and use - it to set the text of another element on the screen. Can you get the text - from the dropdown when the user picks a new input and use it to set the text - of the choiceDisplay label." - CSDU6 - UI and Inputs - event type testing_markdown_instruction: "# Event Testing: - \r\n\r\nSo far you have only used the 'click' event type. However there - are lots of other event types. You are going to test out a couple different - event types for 4 different UI elements (Button, Dropdown, Slider, Text Input).\r\n\r\n**Starter - Code:** The starting code is set up to react to the *click* event for the - *button*. When that event fires a message will be logged to the console.\r\n\r\nOne - at a time, **change either the ID or event type**. Run the program and write - down you observations of when this event fires. Keep going until you have - tried all the combinations of events in the table." - CSDU6 - UI and Inputs - function_markdown_instruction: "# setColor Function\r\n\r\nAt - this point you probably have the same code inside each of your event handlers. - Remember that when you have repeated code it is good to put it into a function. - Can you use functions to get rid of the repeated code?" - CSDU6 - UI and Inputs - get set with text input_markdown_instruction: "# setText - and getText\r\n\r\nYou've seen how to use getText and setText already. Can - you make this app get the text the user typed once they hit enter and show - it in the text area at the bottom?" - CSDU6 - UI and Inputs - getNumber practice_markdown_instruction: "# getNumber\r\n\r\n**Starter - Code:** The program tries to update the valueDisplay whenever the slider value - changes but it always sets the value to 10.\r\n\r\nCan you use `getNumber()` - to get the value of the slider and update the valueDisplay as it changes?" - CSDU6 - UI and Inputs - getNumber_markdown_instruction: "# getNumber\r\n\r\n**Starter - Code:** This program creates a simple calculator but **there is something - wrong with it. Try putting in 2 + 2.**\r\n\r\nWe can fix this by using `getNumber()` - instead of `getText()`. Can you fix the program by changing `getText()` to - `getNumber()`?" - CSDU6 - UI and Inputs - getText_markdown_instruction: "# getText\r\n\r\nTry - to set up an event handler that gets the text from the dropdown whenever a - user selects a new item from the dropdown. You will need to use the getter - `getText()`. Whenever you use a getter you should save it in a variable. Use - `console.log()` to make sure it is working." - CSDU6 - UI and Inputs - hide show_markdown_instruction: "# Hide and Show\r\n\r\nIt - is a little weird that both buttons are on the screen at the same time. You - don't need the stop alarm button until the alarm is on. Can you make the - buttons only show when they are needed?\r\n\r\n* You will want the stop alarm - button to be hidden when the program starts. You can do this in design mode.\r\n\r\nHint: - When you click the trigger alarm button, you should change the text, hide - the trigger alarm button, _and_ show the stop alarm button." - CSDU6 - UI and Inputs - set slider range_markdown_instruction: "# Set Slider - Range\r\n\r\nSliders represent a range of numbers. In order to set that range - you need to set the minimum value and maximum value for each slider. Do you - remember what the range of values is you can give for each value in a RGB - color?" - CSDU6 - UI and Inputs - setProperty first level_markdown_instruction: "# setProperty\r\n\r\n**Starter - Code:** There is one call to `setProperty()` which sets the text-color to - blue when you run the program.\r\n\r\nCan you add more calls to `setProperty()` - that change other things about the text when you run the program? Try to change - at least 3 more things.\r\n" - CSDU6 - UI and Inputs - setProperty Image_markdown_instruction: "# setProperty - image\r\n\r\n**Note:** This level starts in Design Mode.\r\n\r\nThere is an - image element set up for you but it does not show when you leave Design Mode - because it has not been told what image to display. \r\n\r\n* Use the `setProperty()` - command to set the image of the UI Image Element on the screen.\r\n" - CSDU6 - UI and Inputs - setProperty_markdown_instruction: "# setProperty background-color\r\n\r\nChange - the `background-color` of a button to a new random color each time it is clicked - using `setProperty()`." - CSDU6 - UI and Inputs - setScreen_markdown_instruction: "# setScreen\r\n\r\nLets - start with a setter you have used before `setScreen()`. \r\n\r\n* Make the - About Me button on the Home page go to the About Me page.\r\n* Make the Back - button on the About Me go to the Home page." - CSDU6 - UI and Inputs - setText_markdown_instruction: "# setText\r\n\r\nWe - are going to start making an alarm app. We have already set up an event handler - for the \"triggerAlarmButton\" which will change the \"statusLabel\" text - to ON when clicked. Can you make the stop alarm button change the text to - OFF when clicked?" - CSDU6 - UI and Inputs - slider UI_markdown_instruction: "# RGB Sliders\r\n\r\n<img - src=\"https://images.code.org/f3fb468a73aa35b69d7e64deee34c7c3-image-1486080850211.12.39 - PM.png\" style=\"width:200px;float:right\">\r\n\r\nFirst step to creating - the RGB Sliders app is to set up the UI elements and event handers for the - sliders. \r\n\r\n* Can you get the screen to look similar to the one below? - Hint: The color box is a button with no text.\r\n* Can you set up 3 event - handlers that listen for when someone has finished moving the slider to a - new location? Hint: Think back to your event investigation. Which event type - do you want?" - CSDU6 AppLab Input 1_markdown_instruction: "# Input in App Lab\r\n\r\n_You - don't need to make any changes to the code here_\r\n\r\nTake a minute to - read through the code and run the program. Discuss with a partner:\r\n\r\n1. - What is the source of input?\r\n2. Where and how does the program check for - input?\r\n3. What does the program do when it gets the right input?\r\n3. - What is the program doing when there is no input?" - CSDU6 buzzer alarm_markdown_instruction: "# Noisy Alarm\r\n\r\nBack to the - Alarm now - now with the buzzer we can make this thing really sound like an - alarm. Using `buzzer.frequency()` and `buzzer.stop()` make your alarm play - a sound when it goes off." - CSDU6 buzzer freq_markdown_instruction: "# Playing Sounds\r\n\r\nThe `buzzer.frequency()` - command takes two inputs - the first is the _frequency_ of the sound to be - played (higher numbers = higher sounds), and the second is the _duration_ - of the sound (how long it should be played)\r\n\r\n# Do This\r\n\r\nThe provided - app has three buttons with event handlers. Add a `buzzer.frequency()` command - to each of the event handlers so that the buzzer plays the appropriate sound - (a low, medium, or high note)." - CSDU6 buzzer stop_markdown_instruction: "# Playing Longer Sounds\r\n\r\n<img - src=\"https://images.code.org/e5513675e74233d4fe55a0826376b83f-image-1487622642991.gif\" - style=\"float: right; margin: 10px;\">\r\n\r\nThe _duration_ input of the - `buzzer.frequency()` command is an _optional_ input - meaning that you don't - need to use it. You can remove an optional input by clicking the left arrow - next to it.\r\n\r\nBy removing the duration, you are telling the buzzer to - buzz continuously. You'll notice that there's a new block in the toolbox - called `buzzer.stop()` to use in this case.\r\n\r\n# Do This\r\n\r\nHere's - an app with two buttons, a Start and a Stop. Make these buttons Start and - Stop the buzzer\r\n\r\n* Add an event handler for each button\r\n* When the - Start button is clicked, make the buzzer play continuously\r\n* When the Stop - button is clicked, stop the buzzer from playing\r\n\r\n" - CSDU6 Circuit Playground Test_markdown_instruction: "# Test Your Board\r\n\r\nThis - level is just a quick test to make sure your board is working. To run this - test, do the following:\r\n\r\n1. Plug your board into your computer with - a USB cable\r\n2. Click \"Run\"\r\n3. Wait a few seconds for either a Success - or Error screen to pop up\r\n4. If your test was successful, move on to the - next level. If not, try some of the troubleshooting steps\r\n\r\n## Troubleshooting\r\n\r\nThere - are a number of things that could prevent your test from passing.\r\n\r\n1. - Try refreshing the page and running the test again (you should refresh the - page for each of the following ideas as well)\r\n2. Try connecting your board - to a different USB port\r\n3. Try a different USB cable. Some USB cables can - only be used for charging, so make sure your cable supports data transfer!\r\n4. - Try a different board\r\n5. Go to [studio.code.org/maker/setup](/maker/setup) - to run a more detailed test" - CSDU6 GameLab Input 1_markdown_instruction: "# Input in Game Lab\r\n\r\n_You - don't need to make any changes to the code here_\r\n\r\nTake a minute to - read through the code and run the program. Discuss with a partner:\r\n\r\n1. - What is the source of input?\r\n2. Where and how does the program check for - input?\r\n3. What does the program do when it gets the right input?\r\n3. - What is the program doing when there is no input?" - CSDU6 LED alarm silent_markdown_instruction: "# Silent Alarm\r\n\r\nHere's - the alarm app that you started in the last lesson. Right now it doesn't do - much, so let's see if we can make it more useful by hooking it up to your - board. When the alarm is triggered, turn on the red LED. When the alarm is - stopped, turn the LED off again.\r\n\r\n# Do This\r\n\r\nAdd `led.on()` and - `led.off()` blocks to the events that trigger and disable the alarm.\r\n\r\n_Notice - that the LED blocks have been moved to a new drawer called Circuit_" - CSDU6 LED basics led.off()_markdown_instruction: "# Turn that LED Off\r\n\r\nJust - as you can turn your red LED on using `led.on()`, you can turn it back off - again with `led.off()`. You'll need to add a second button with an event - handler that calls `led.off()`.\r\n\r\n# Do this\r\n\r\nAdd a second button - and use its \"click\" event to turn off the LED\r\n\r\n* Drag out a new button - in Design Mode and give it a good ID\r\n* Insert an event handler for your - newly created button\r\n* Drag an `led.off()` command into your new event - handler\r\n\r\nNow you should have two buttons, one that turns the LED on, - and another that turns it off.\r\n\r\n_Challenge: Can you come up with other - ways to turn on and off the LED? Could you do it with a single button?_" - CSDU6 LED basics led.on_markdown_instruction: "# Turn on that LED\r\n\r\nThe - red LED on your board is represented in code by an object called `led`. Similar - to the sprite objects in Game Lab, you can use _dot notation_ to control the - LED. Try using the command `led.on()` to make your red LED light up when the - program is run.\r\n\r\n# Do this\r\n\r\n* Drag out the `led.on()` block and - place it underneath the comment\r\n* Run the program\r\n* Bask in the warm - red glow of your LED!" - CSDU6 LED basics onEvent_markdown_instruction: "# Turn on that LED - with a - Button!\r\n\r\nAs exciting as an always-on red LED is, an LED that you can - turn on with the click of a button seems much more useful. If you add a button - to your screen in Design Mode, then you can use move your `led.on()` command - into an `onEvent()` block.\r\n\r\n# Do this\r\n\r\nAdd a button and use its - \"click\" event to turn on the LED\r\n\r\n* Drag out a new button in Design - Mode and give it a good ID\r\n* Insert an event handler for your newly created - button\r\n* Move the code that turns your LED on _inside_ the button's event - handler\r\n\r\nIf everything worked out, you should see that your LED starts - out off, but turns on when you click the button!" - CSDU6 light sensor alarm_markdown_instruction: "# Auto Alarm\r\n\r\nLet's - revisit the alarm app one last time. When we last updated this app we made - it turn on or off the buzzer in addition to the LED, but it still needs to - be manually triggered. Now that we know how to use sensor events, you can - make the alarm trigger automatically!\r\n\r\n# Do This\r\n\r\nUsing the an - event handler for the light sensor, make the alarm turn on when it sees light. - You can test the alarm by placing an object like a piece of paper over the - board - if someone tries to take the piece of paper your alarm should start - buzzing.\r\n\r\n_Challenge: Can you make both the buttons and the sensor play - nicely together?_" - CSDU6- predict event types_markdown_instruction: "# Predict: Event Type\r\n\r\nSo - far you have really only used the click event type with buttons. There are - many different event types you can use in App Lab. Look at the code and predict - when each of the messages will print to the console log." - CSDU6L06 - lists and colorLeds - blink_markdown_instruction: "# Blink\r\n\r\nMake - lights blink \r\n\r\n" - CSDU6L06 - lists and colorLeds - create light pattern_markdown_instruction: "# - Light Pattern\r\n\r\nFind a partner and bring your light patterns together.\r\n\r\nSet - up the app so the user can use what light pattern they want to see. You should - put each of your light displays in a function to make this easier" - CSDU6L06 - lists and colorLeds - debug_markdown_instruction: "<img src=\"https://images.code.org/a2b5050f76bdb262713ce52f0356fb04-image-1486151096632.JPG\" - style=\"width:250px; float:right\">\r\n# Debug: colorLeds\r\n\r\nCan you debug - the index values so that the rainbow shows up on the board like in the picture?\r\n\r\n" - CSDU6L06 - lists and colorLeds - intensity_markdown_instruction: "# Changing - Brightness\r\n\r\nSometimes you want to do more than just turn a light on - or off, you might want to set a specific brightness. The `intensity()` command - lets you set an LED's brightness (or _intensity_) from 0 - 100. Under the - hood, this works just like `buzzer.frequency()` by rapidly turning the LED - on and off to make it seem dimmer.\r\n\r\n# Do This\r\n\r\nThe provided program - has a slider that goes from 0 to 100 with an event handler. In the event handler, - set intensity of your color LEDs to the value of the slider." - CSDU6L06 - lists and colorLeds - Light Display_markdown_instruction: "# Blink\r\n\r\nMake - lights blink \r\n\r\n" - CSDU6L06 - lists and colorLeds - light pattern off_markdown_instruction: "# - Turning It Off\r\n\r\nWhen you start this app your lights are off, but as - soon as choose a pattern, there's no way to turn the lights back off!\r\n\r\n# - Do This\r\n\r\nCreate a function that turns all of the LEDs off, and then - add a \"Off\" button to your app and make it turn off all of the color LEDs." - CSDU6L06 - lists and colorLeds - pulse_markdown_instruction: "# Pulse\r\n\r\nMake - lights pulse\r\n\r\n" - CSDU6L06 - lists and colorLeds - set color_markdown_instruction: "# Adding - Some Color\r\n\r\nYou probably noticed when you used `colorLeds[0].on()` in - the last level, the LEDs turned on as white. If you don't specify a color, - `on()` will turn on all three parts of the LED (red, green, and blue) to produce - white. You'll see a new command in the toolbox called `colorLeds[0].color()` - which lets you specify a color, either as a string like \"blue\" or an RGB - value using color `color()` command.\r\n\r\n# Do This\r\n\r\nUse the `.color()` - command to set each of the color LEDs to a different color." - CSDU6L06 - lists and colorLeds - song list_markdown_instruction: "<img src=\"//curriculum.code.org/images/circuitplayground/colorLedonoff.gif\" - style=\"float: right; margin: 10px;\">\r\n\r\n# colorLeds\r\n\r\nThe color - LEDs can use the same basic commands that you used with the red LED, such - as `on()` and `off()`. Using the provided buttons, write a program that turns - on and off the bottom two color LEDs (the one's furthest away from the USB - cable.\r\n\r\n# Do This\r\n\r\nAdd event handlers to the provided buttons - \"on_button\" and \"off_button\" that turn on and off the bottom two color - LEDs. Which positions in the `colorLeds` list are those two LEDs?\r\n\r\n" - CSDU6L06 - lists and colorLeds - toggle_markdown_instruction: "# Toggle\r\n\r\nThe - `.toggle()` command works like a light switch - whenever you call it on an - LED, the light will turn on if it was off, or off if it was on. This can be - a really useful alternative to using both on and off.\r\n\r\n# Do This\r\n\r\nChoose - a few LEDs and write a program that toggles them on and off when you click - the Toggle button.\r\n" - CSDU6L06 - lists and colorLeds -solo light pattern_markdown_instruction: "# - Light Patterns\r\n\r\nThis app already has one light pattern program, which - can be activated by clicking a button. Notice that we put this pattern into - a function to make the code cleaner and clearer.\r\n\r\n# Do This\r\n\r\nCreate - a light pattern function of your own - maybe the colors of your favorite holiday, - college, sports team, or try to create an image with the lights.\r\n\r\nAfter - you've created your new function, add a button and event handler so that - you can switch between the two light patterns." - CSP Data Unit - Counting Multiple Things_markdown_instruction: "If you can - count one thing you can count multiple things\r\n\r\nFind out how many people - like something other than dogs and cats\r\n\r\nCount dogs\r\nCount cats\r\nCount - total\r\nDo the math\r\n\r\nblank/ blank total\r\n\r\nCan also use this to - find percents from this\r\n\r\nx% are dog lovers" - CSP Data Unit -Counting Records - Easy Way_markdown_instruction: "ReadRecords - with specific criteria \r\nfind the length of an array\r\n" - CSP Data Unit -Counting Records - Hard Way_markdown_instruction: "\r\n1. ReadRecords - for all records\r\n2. Way to loop through and count" - CSP U4 - CreateRecord with JSON_markdown_instruction: "Good news! we can also - store objects in the easy way!\r\nStarting code is some kind of pre-composed - object. And call to createRecord that shows using the javascript object as - the the thing being stored.\r\nTest.\r\nInvestigate.\r\nAdd a field to the - object and run again, see what’s there." - CSP U4 - Export Table_markdown_instruction: "# You can export the table too!\r\n\r\nMake - a table and then export it to share it with a friend!" - CSP U4 - First Create Record Experience_markdown_instruction: "So how can we - use this? We can use it to compose a bunch of things we want to store at - once. In Data we call this a “record”. Let’s look at how we create records….new - level:\r\n\r\nJust drag out createRecord and play with it (non-project level) - — not triggered by a button. \r\n\r\nCreateRecord should populate with a default - JSON object (which you can set in level builder when defining params for the - blocks in the palette.) Have it be the string version of of JSON object.\r\nJust - Hit run several times.\r\nView Data.\r\nInvestigate problems.\r\n\r\n\r\n" - CSP U4 - Import Table_markdown_instruction: "You can create a new table by - importing a CSV file. CSV stands for comma separated values and is a standard - way to move data between different applications. CSV files usually have multiple - columns with the first row containing the label for each column. AppLab will - use this first row to create the column names in the table. \r\n\r\nIn AppLab - you can create a new table in an app by clicking the “View Data” button(a - new browser tab opens) and type in a new, descriptive table name (the table - name does not have to match the app name, and an app can have more than one - table), then click the “Add” button next to the table name(another new browser - tab opens). Click the “Import” button, then the “Choose File” button and select - the RottenTomatoes2015.csv file (see below). Finally click the “Overwrite - & Import” button. Note the unique “Id” field created for each record." - CSP U4 - JSON Object Intro - Bad Way_markdown_instruction: "# We've Seen Objects - Before\r\n\r\nWe're going to see how we can use objects to organize data - in our own apps, but this actually isn't the first time we've used objects - in our programs. **The object that we've used most frequently is the event - parameter of our event handlers**. This single object contains many pieces - of information about the event which can be accessed to determine how to respond - to the event. For example `event.key` contains the key that was pressed for - key events, and `event.offsetX` and `event.offsetY` contain the location of - the mouse for mouse events.\r\n\r\nBefore we move on to creating objects of - our own, let's take another look at this event parameter (or as we'll call - it now event object) and recall how they were used.\r\n\r\n# Do This\r\n\r\n**Starter - code** is provided which creates event handlers for both a \"click\" and \"keydown\" - event and displays the contents of the event object they create.\r\n\r\n* - **Run the program** and trigger both a keyboard event and a mouse event.\r\n* - **Examine the objects displayed in the Debug Console** to recall the different - pieces of information they contain.\r\n* **Reflect: ** Why wouldn't we want - this information stored in many variables? Why wouldn't we want this information - stored in an array?" - CSP U4 - JSON Object Intro - Good Way_markdown_instruction: "# Creating Your - Own Objects\r\n\r\n**Objects are unordered collections of name value pairs**. - Like an array they can hold many pieces of information, but where arrays use - a numeric index to reference specific pieces of information, objects use a - descriptive name. We lose the \"ordered\" nature of our data, but we gain - the ability to describe the purpose of each piece of data within a collection.\r\n\r\nConsider - the event objects you just looked at. An array can just as easily store all - the information they contain, but it would be difficult to determine what - any of the values represent.\r\n\r\n**The syntax for creating objects of your - own is shown below**\r\n\r\n* Curly braces are placed around the contents - of an object `{}`\r\n* Names are separated from values with a colon `:`\r\n* - Name value pairs are separated by commas `,`\r\n* Names must be strings. If - they are not they will be coerced to strings, possibly creating unpredictable - behavior.\r\n* **Example:** `var user = {\"userName\":\"Ada\", \"password\":\"csIsAwesome\", - \"yearBorn\":1815};`\r\n\r\n# Do This\r\n\r\n**Starter code** is provided - which creates an empty object and displays its value.\r\n\r\n* Modify the - code **using the syntax above** to create an object of your own. Your object - should contain **at least 5 pieces of information including both strings and - numbers**.\r\n* **Run the program** and confirm all values in your object - appear as you expected." - CSP U4 - Objects - createObject_markdown_instruction: "# Creating Your Own - Objects\r\n\r\n**Objects are unordered collections of name value pairs**. - Like an array they can hold many pieces of information, but where arrays use - a numeric index to reference specific pieces of information, objects use a - descriptive name. We lose the \"ordered\" nature of our data, but we gain - the ability to describe the purpose of each piece of data within a collection.\r\n\r\nConsider - the event objects you just looked at. An array can just as easily store all - the information they contain, but it would be difficult to determine what - any of the values represent.\r\n\r\n**The syntax for creating objects of your - own is shown below**\r\n\r\n* Curly braces are placed around the contents - of an object `{}`\r\n* Names are separated from values with a colon `:`\r\n* - Name value pairs are separated by commas `,`\r\n* Names must be strings. If - they are not they will be coerced to strings, possibly creating unpredictable - behavior.\r\n* **Example:** `var user = {\"userName\":\"Ada\", \"password\":\"csIsAwesome\", - \"yearBorn\":1815};`\r\n\r\n# Do This\r\n\r\n**Starter code** is provided - which creates an empty object and displays its value.\r\n\r\n* Modify the - code **using the syntax above** to create an object of your own. Your object - should contain **at least 5 pieces of information including both strings and - numbers**.\r\n* **Run the program** and confirm all values in your object - appear as you expected." - CSP_U2_Shakespeare_Question_markdown_instruction: "Respond to this prompt or - to another as directed by your teacher.\r\n\r\nShakespeare’s complete works - have approximately 3.5 million characters. Which is bigger in file size: - Shakespeare’s complete works stored in plain ASCII text or a 4 minute song - on mp3? How much bigger?" - CSPPD course goals_markdown_instruction: "***Now that you've learned more - about the CSP curriculum, let's consider your goals***\n<br>\n<br>\n\n__What - are your goals for your CSP class?__ *These goals will change over time, and - we'll revisit this your response as we go through the course so we can check - in on how we're progressing towards those goals.*\n\n*NOTE: remember you - can change the size of the text box by clicking and dragging the bottom-right - corner of the box.*\n" - CSPPD impact in program_markdown_instruction: "\n#### What connections do you - think might exist between the ideas covered in the videos you just watched - and the units of CSP that you learned about earlier?\n" - CSPPD materials question1_markdown_instruction: "We just talked about the types - of materials available through the Code.org CSP curriculum, including teacher - lesson plans, widgets, widget tutorial videos, concept videos, teaching tips - videos, and student-facing activities. Which of these materials are you most - excited to have access to? Which are you most uncertain about? " - CSPPD PD goals_markdown_instruction: "***Now that you've learned more about - the CSP Professional Development, let's consider your goals***\n\n<br>\n__What - are your personal goals for your CSP PD experience (what do you hope to accomplish, - how do you hope to grow)?__ *NOTE: These goals might change over time, and - we'll revisit your responses as we go through the course so we can check - in on how we're progressing towards those goals.*\n" - CSPPD program overlap_markdown_instruction: "#### Now that you've read more - about the CSP program, what relationship do you see between the curriculum - and Professional Development? What aspects of the two pieces of the program - seem most important or interesting to you?\n" - CSPPD strategies_markdown_instruction: "\nThis space is your __digital journal - for documenting strategies__ you've picked up during Professional Development - and while teaching the course. We'll revisit this often during PD, and you - should refer back to it while planning lessons to remind yourself of strategies - you want to try in class. \n\n\n" - CSPPD2 PT activity_markdown_instruction: "# Practice PT > Encoding a Complex - Thing\r\n<img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/FBlNhEkvsTFskXJ/Screen%20Shot%202015-07-18%20at%205.46.24%20PM.png\" - class=\"level-image\">\r\n\r\n## Doing the Project\r\nTo wrap up our work - in this unit, we're going to spend an hour doing the practice performance - task. After you've read the lesson, spend some time looking over the student-facing - worksheet and think about what you would like to encode. This is really open - ended, and there's no 'right' thing to choose, but to get the juices going, - here are a few example topics: \r\n\r\n- A piece of music (the notes that - are played, the instruments that play them, etc)\r\n- A food (the smells, - tastes, appearance, etc) \r\n- A place (the sounds, the smells, what natural - things are in the space, what man-made things are in the space, etc)\r\n\r\n> - Once you've selected your topic, start working through your protocol for - encoding the \"complex thing.\" Use the <a href =\"https://docs.google.com/document/d/1IPDnC6tKN7yRzog9t7weKISnjXvykTQe3QEpu43uM7c/edit\" - target =\"_blank\">student activity guide</a> and the <a href=\"https://docs.google.com/document/d/1rkVbwb8nJBlnF9t3hkyIyckM6gJGEjcUwyQiyV-Jlu4/edit\" - target =\"_blank\">lesson plan</a> to work through this.\r\n\r\n**See how - far you can get through the activity in one hour, but please do limit yourself - to 60 minutes.** Don't worry about getting through the entire thing in that - time, but be ready to share your thoughts about the process along with whatever - you come up with! \r\n\r\nUse the text box below to record your protocol. - You'll have space on the next page to share your final product. " - CSPPD2 share protocol_markdown_instruction: "# Chunk 3: Encoding and Sending - Text > Creating a Text Message Protocol\r\n\r\n<img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/FCmh8I2x5GTQ3tu/Screen%20Shot%202015-07-18%20at%2012.53.45%20PM.png\" - class=\"level-image\">\r\n\r\n## Creating a Text Message Protocol\r\n\r\nOn - the right you'll find the student-facing worksheet from lesson 10, which - builds on students' prior work with protocols and has them develop a text - messaging protocol that can handle the letters a-z as well as common punctuation. - \r\n\r\n>Read over the [lesson plan](https://docs.google.com/document/d/1lAHRLpxu05-gSbNF6LX8vUIoDMHEonrmL3bk-Sh1viA/edit) - and **work through developing a protocol yourself.** Use the text box below - to record your protocol.\r\n\r\n*Having trouble viewing the activity? [Click - here](https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/jogZFA5WQK3rYne/text%20protocol.pdf) - to open it directly.* \r\n\r\n" - CSPPD3-u2 pick a challenge_markdown_instruction: "# Challenge Overview > What's - your Challenge?\r\n\r\nNow that you've selected a lesson, head to the forum - and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### - <a href=\"http://forum.code.org/t/unit-2-online-pd-challenge-selection/2222\" - target=_blank>Forums <i class=\"fa fa-external-link-square\" /></a>\r\n\r\nEnter - the lesson you selected for your challenge below:" - CSPPD3-u2 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a dirct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - CSPPD3-u3 pick a challenge_markdown_instruction: "# Challenge Overview > What's - your Challenge? \r\n\r\n## Enter the lesson you selected for your challenge - in the text box below.\r\n\r\n- 2 - 5: Turtle Drawing\r\n- 6 - 7: Functions - and Simple Loops\r\n- 14-15: Variables \r\n- 16: Strings\r\n- 18: Programming - Flow and Conditionals\r\n\r\nNow that you've selected a lesson, head to the - forum and **share which lesson you plan to complete** for your challenge. - \r\n\r\n#### <a href=\"http://forum.code.org/t/unit-3-challenge-selection/2470\" - target=_blank>Forums <i class=\"fa fa-external-link-square\" /></a>" - CSPPD3-u3 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - CSPPD3-u4 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - CSPPD3-u5 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - cspu3_assess1_filltable_markdown_instruction: "Use Top-Down Design strategy - to fill in the table below. The first line is given to you. You may use as - many or as few rows in the table as you see fit.\r\n\r\n_NOTE: Use a new line - for each entry to the table. Write each line in the format of \"Function Name - : Description\"_\r\n\r\n**Top-Down Design Strategy:**\r\n\r\n* Look at the - big picture…\r\n* Identify a sub-task…\r\n* Break down that sub-task into - smaller sub-task(s)...\r\n* Keep going until you’re down to the commands you - already have access to.\r\n\r\n| Function Name | Description / Justification - |\r\n|-----------------|-----------------------------|\r\n| drawSnowflake() - | Draw a 6 pointed snowflake |\r\n| (Your answer) | (Your answer) |\r\n\r\n\r\n" - cspu3_assess1_freeresponse_markdown_instruction: "Explain how abstraction allows - for the creation of increasingly complex systems. Reference top-down design - strategy in your response." - CSPU5 Add a 2nd Screen_markdown_instruction: "# Design Mode: Adding a Screen\r\n\r\n<img - src=\"https://images.code.org/3aab64d77293bda1759586e2cff5c6cc-image-1477366229125.png\" - style=\"width: 150px; float: right\">\r\n\r\n**Now you try it:** Add a new - screen and a button to the app we've started here.\r\n\r\n**NOTE:** We've - created one screen for you - the Hello Screen. You need to add a new screen - - the new screen should look something like the example shown to the right.\r\n\r\nHere - are the steps:\r\n\r\n* **Add a new screen**\r\n * Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 - PM.png\" style=\"width: 50px\"> from the Design Toolbox.\r\n * Or choose *New - Screen...* from the pulldown menu at the top of the app display.\r\n \r\n* - **Set the background color**\r\n * It doesn't have to be orange like the - example\r\n \r\n* **Add a Button**\r\n * A simple button is fine. You can - embelish with an icon if you want.\r\n * Optional: You can also add a text - label saying \"Goodbye!\"\r\n\r\n**Click Run...but...you won't see much**\r\n\r\n* - Because we haven't added code yet **all you'll see is the (default) Hello - screen**\r\n* You won't have any way to see the orange screen when the app - is running.\r\n\r\n**Click Finish** to move on to the next level where we'll - add code\r\n\r\n * Note: you can continue to work on your design on the next - level too\r\n\r\n" - CSPU5 Add full screen image to bg of chaser game_markdown_instruction: "# Add - a Full Screen Image to act as Background to Game\r\n\r\n<img src=\"https://images.code.org/9898664ee57768dd6e332bfab804c2a6-image-1477324830263.png\" - style=\"float: right\">\r\n\r\nWe want to be able to detect when the user - *misses* clicking on the target. Since we know the screen itself registers - every click no matter what, the only way to determine that the user missed - the target is to **add an image that takes up the full screen**. \r\n\r\nIn - other words we're trying to determine which of two images was clicked - the - target, or the background - which is do-able since we know when images overlap - only one will have a click event triggered. \r\n\r\n * When the target is - clicked, it jumps to a new location\r\n * When the background image is clicked - we will (eventually) switch to a new screen.\r\n\r\n**Following the Event-Driven - Pattern...**\r\n\r\n* **Design mode: Add a new image to the game** \r\n * - and stretch it to fill the whole screen.\r\n * Change the layering order - (if necessary) so that the target image is in front of the full screen image.\r\n * - (See example at right which shows an image that is stretched to the full size - of the screen sitting behind the target image).\r\n\r\n* **Add an onEvent - handler** for the full screen image with a simple console.log message\r\n * - **TIP**: this is basically done for you if you add onEvent from Design Mode\r\n\r\n* - **Run. Test. Debug.**\r\n \r\nMake sure that with each click one of two things - is happening.\r\n * When the target is clicked, it jumps to a new location - (and optionally print a message to the console).\r\n * When the background - image is clicked it should display a message to the console.\r\n * (See example - console output at right)." - CSPU5 Add game over screen_markdown_instruction: "# Add a \"game over\" screen - and finalize the game\r\n\r\n* **Add a new Screen** with a \"game over\" message - and **add a button** to start over. \r\n\r\n* **Add an event handler** for - the \"Start Over\" Button to send the user back to the Welcome Screen.\r\n\r\n* - **Add `setScreen` to the event handling function for the background image**\r\n - * When the background image is clicked, the user should be sent to the \"game - over\" screen you just created.\r\n\r\n<img src=\"https://images.code.org/bb3c0973ee0d83d3540f5ffed797e442-image-1477405500619.gif\" - style=\"float: right; width: 150px\">\r\n\r\n# Run. Test. Debug.\r\n\r\nYou - should now have a 3-screen app with:\r\n\r\n* A welcome screen\r\n* A game - play screen\r\n* A \"game over\" screen\r\n\r\n**Avoid dead-ends** -- the - user should be able to get between all the screens appropriately, and play - the game.\r\n\r\nIf it's not working:\r\n\r\n* Retrace your steps\r\n* See - if you can figure out where things are going wrong\r\n* Add extra `console.log` - statements. \r\n* Ask a friend to help you out.\r\n\r\n**Stick with it until - you get it!**\r\n\r\n" - CSPU5 Add onEvent from Design Mode_markdown_instruction: "# Add onEvent from - Design Mode!\r\n<img src=\"https://images.code.org/9ff41c3ea30ece355e91eaca5cdc1e36-image-1444417748945.gif\" style=\"width: - 250px; float: right\">\r\n\r\nDesign Mode has a shortcut for you to add `onEvent` - to your code for specific UI Element. It's quite handy.\r\n\r\n**You try - it:** Add an event handler to a button from Design Mode\r\n\r\n**Design Mode**\r\n * - A Red button has already been added to the app.\r\n * In Design Mode click - on the button to select it\r\n * Click the **EVENTS tab** and then click - the link that says **Insert and Show Code**\r\n * You may change the ID if - you like\r\n\r\nThis will insert an `onEvent` block with the ID and \"click\" - filled in already.\r\n\r\nIt also inserts a line of code with a command we - haven't seen yet: `console.log`.\r\n\r\n**Run. Test. Debug**\r\n* Run the - program and click on the button to see what happens\r\n * **Hint:** look - at the **Debug Console** area below the coding workspace.\r\n* If nothing - happens, retrace your steps and try again.\r\n\r\nOnce you see a message displayed - in the Debug Console click finish to move on." - CSPU5 Add Screens to Chaser Game_markdown_instruction: "# Improved Chaser Game\r\n\r\nNow - lets improve the \"Chaser Game\". This is where you get to use your creativity. - Make it look nice!\r\n\r\nIn addition you will notice a new command in the - toolbox: `playsound`! Read the documentation about how to add sounds.\r\n\r\n**Note:** - Your code from before has been provided for you.\r\n\r\n# Do This:\r\n\r\n* - **Create a Welcome Screen** that explains the rules of the game. Include a - \"Start Game\" button.\r\n\r\n* Update the your code so that the **image jumps - to a new location when it is clicked**. \r\n\r\n* **Play a sound** each time - the image is clicked.\r\n\r\n* **Add a Game Over Screen** with a lose message - and button to start over. The Start Over Button should direct back to the - Welcome Screen.\r\n\r\n* **Make the user lose**, by sending them to the Game - Over Screen, when the background is clicked.\r\n\r\n\r\n" - CSPU5 Add welcome screen to chaser game_markdown_instruction: "# Add A Welcome - Screen\r\n\r\n<div style=\"float: right; width: 150px\">\r\n\r\n\r\n<img src=\"https://images.code.org/558ae19d0fb8af8c6ec573e5d7ac4e29-image-1477369385328.png\" - style=\"float: right; width: 150px\"><br>\r\n<em>This is an example showing - the elements of a welcome screen. Yours <strong> should not </strong> look - exactly like this. Yours should be appropriate for your game.</em>\r\n\r\n</div>\r\n\r\nLet's - improve your \"Chaser Game\" by **adding a welcome screen that shows when - the app starts up, and that with a button to start.**\r\n\r\n* NOTE: we've - imported the chaser game that you made in the last lesson. That's the starting - point for this. You can continue with this lesson if you don't have it. - But you'll need to make a screen for game play along the way.\r\n\r\nFollowing - the Event Driven Programming pattern:\r\n\r\n1. **Design Mode** \r\n * Add - a New Screen to the App\r\n * Make this new screen the **default screen**\r\n * - Add a new Button to the screen that says \"Start\"\r\n * Add text welcoming - the user to the game.\r\n * Give the button and the screen meaningful IDs\r\n\r\n2. - **Add an onEvent Handler for the Button**\r\n * Insert a new onEvent block - (easy way from Design Mode) for the \"start\" button\r\n\r\n3. **Add code - to the event handling function**\r\n * When the \"start\" button is clicked - it should `setScreen` to the screen that plays the game.\r\n \r\n4. **Run. - Test. Debug.**\r\n\r\n Make sure that:\r\n \r\n * When app starts up, your - new welcome screen shows first\r\n * When you click the \"start\" button it - takes you to the game play screen\r\n * Note: right now there's no way to - get back to the welcome screen - it's okay, we'll add that later.\r\n\r\n" - CSPU5 Adding Screens Template_markdown_instruction: "# Second Screen\r\n\r\nUp - until now our apps have only been able to have one view. With Design Mode - we can now make multiple screens and switch between them!\r\n\r\n**Goal:** - Make a 2 screen app with a black screen and a white screen. \r\n\r\n<img src=\"https://images.code.org/e35a6f494cf6f0c57c66a1aef651cdb0-image-1444353622241.gif\" - style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\n\r\nSwitch to Design - Mode and **add a second screen**. There are two ways to add a second screen: - \r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 - PM.png\" style=\"width: 50px\"> from the Design Toolbox. Check out the screen - dropdown menu at the top right of the app window. You should now have two - screens! <img src=\"https://images.code.org/b48d978335701888b744702f25f11b28-image-1444353746012.17.07 - PM.png\" style=\"width: 75px\"> \r\n* From the screen dropdown menu at the - top right of the app window click *New Screen*. \r\n\r\nMake screen1 white - and screen2 black. **Set the background color for a screen in the Properties - tab**. Make sure to rename the screens with appropriate IDs." - CSPU5 console.log debug when mouse events happen_markdown_instruction: "# Which - comes first?\r\n\r\nAnother useful thing to do with `console.log` statements - is to use them to figure out the order in which events are triggered. In the - code below one button has 3 different event listeners, that will respond to - the events: `\"mousedown\"`, `\"mouseup\"`, and `\"click\"`\r\n\r\nThe question - is, if you click the button:\r\n\r\n* Will all 3 of these events trigger? - \r\n* Will any of them trigger? Which one(s)?\r\n* What order will these - events be triggered in?\r\n\r\n**You try it**:\r\n1. Study the code and **make - Prediction**\r\n2. **Run** the program\r\n3. **Were you right?** What's unexpected?\r\n4. - **Keep testing** until you see what's happening.\r\n\r\n" - CSPU5 console.log in event v. global_markdown_instruction: "# Predict what - will happen\r\n\r\nWe've added some `console.log` statements *both* in event - handlers as well as just out in the open, between event handler definitions. - \r\n\r\n* **Study the code first**\r\n * We've added some white space between - lines to make it more readable.\r\n\r\n* **Predict:** What do you think will - happen when you click Run? What will display? Will it:\r\n * Print all 5 - messages?\r\n * Print only a few? Which ones?\r\n * Halt with an error message?\r\n - \r\n* *After* you've made some kind of prediction, **hit Run**.\r\n * If - the program runs, then try to use it - click on the buttons and such.\r\n\r\n* - Were you right? Anything unexpected?\r\n * Reset and Run the program again - a few times until you understand what's happening.\r\n \r\n<details><summary>What's - happening? [click to expand]</summary>\r\n<li> As soon as you hit Run messages - \"1\", \"3\" and \"5\" will display immediately. Those statements are out - in the \"open\" rather than part of an event handling function - the computer - can run them right away.</li>\r\n<li>Messages \"1\", \"3\" and \"5\" will - only print once each time you run the program not matter what else you do</li>\r\n<li>Messages - \"2\" and \"4\" will be displayed when the the buttons are clicked.</li>\r\n<li>In - case you're wondering: <strong>This is bad code</strong>. It's hard to - read because of where the statements fall. Typically if some code needs to - run when the program starts up, you'd group it all together at the top of - the program. Scattering it about in and between event handlers and other - functions is a recipe for a lot of buggy code that will be hard for you to - work out.</li></details>" - CSPU5 Debugging Overlapping Objects and Screen Events_markdown_instruction: "# - Use console.log to Test Overlapping Objects and the Screen\r\n\r\nThere are - two goals here:\r\n\r\n1. Practice inserting your own console.log statements.\r\n2. - Investigate how the screen captures events (it's different).\r\n\r\n## Do - This:\r\n<img src=\"https://images.code.org/4100fcc7062f97ce8440003b3a17cd25-image-1477363054051.png\" - style=\"float: right\">\r\n\r\n* **Add `console.log` statements to each of - the 3 event handlers** we started you out with.\r\n * Make the text that gets - printed *be descriptive* so that you know exactly what is happening when.\r\n\r\n* - **Run** the program and try clicking where the diagram (at right) shows.\r\n * - Click on each button\r\n * Click where the buttons overlap\r\n * Click on - the screen (i.e. the background)\r\n\r\n**Investigate until you can answer - these questions:**\r\n1. When you click on a location where two objects are - overlapping, which event(s) fire(s)?\r\n2. When you click on an non-overlapping - part of some object what gets triggered?\r\n3. When does a \"click\" on the - \"screen\" get triggered?\r\n\r\n\r\n<details><summary>Answers: [click here]</summary>\r\n<br><br>\r\n1. - When you click on a location where two objects are overlapping, which event(s) - fire(s)?\r\n<br>\r\n<li><em> The event-handler for object that is on top gets - triggered. The object that is underneath is essentially blocked from being - clicked in the overlapping portion</em></li>\r\n<br><br>\r\n2. When you click - on an non-overlapping part of some object what gets triggered?\r\n<li><em>The - event-handler for the object gets triggered as you might expect</em></li>\r\n<br><br>\r\n3. - When does a \"click\" on the \"screen\" get triggered?\r\n<li><em>Always. - Events that occur on the screen cannot be blocked by other objects. If you - set up an event listener for the screen it will capture EVERY event of that - type, no matter what other UI elements are on the screen. This behavior of - the screen is done on purpose and is useful for certain kinds of things.</em></li>\r\n\r\n\r\n</details>\r\n\r\n" - CSPU5 First Time Console.log_markdown_instruction: "# Exploring console.log\r\n\r\n<img - src=\"https://images.code.org/cdc253db1b9a3685eaf5ea4b6bc30766-image-1444337429645.png\" - style=\"width: 250px; float: right; border: solid 1px black; margin-right: - 10px\">\r\n\r\nIn the last level, we saw a new command: `console.log`. You - should have noticed that it prints out text in the Debug Console below the - code workspace.\r\n\r\nThe Debug Console area is an important tool for programmers. You've - seen it display error messages, but you can also have your program display - messages there. \r\n\r\nYou can find `console.log` in the **Variables** code - toolbox, and it is the command you use to send messages to the console -- - it's just about the simplest thing you can do to make your code generate - output.\r\n\r\n**You try it:** Add a console.log statement to say your name\r\n\r\n* - Drag out a `console.log` statement into the workspace and add it below the - 2 statements there.\r\n\r\n* Following the lead of the first two lines - update - the code so that it says your name.\r\n\r\n* The output should look something - like this: \r\n\r\n![](https://images.code.org/64c82c1bf7ecb859d84192e5bffb3488-image-1477338603375.png)" - CSPU5 Layering and Deleting in Design Mode_markdown_instruction: "# Design - Mode: Layering and Deleting\r\n<img src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" - style=\"width: 150px; float: right\">User interface elements can overlap one - another, so you'll want the ability to change the order or **depth** at which - each one is shown. \r\n\r\n**You Try it:** Use the **depth** and **delete** - tools to **create the \"After\" image** (shown below).\r\n\r\n* **Scroll to - the bottom of the Properties tab** you'll find buttons which allow you to - easily **change the depth** of an element.\r\n* **Change the depth** of elements - by using the double or single arrows.\r\n * Click the double arrow to send - all the way to front or back.\r\n * Click the single arrow to move up or down - one layer.\r\n \r\n* **Delete an Element** by selecting it (clicking on it) - in the design view and then clicking the **Red Delete button** in the properties - tab.\r\n\r\n\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th style=\"text-align:center\">Before</th>\r\n <th - style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td align=center><img - src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" - style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img - src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" - style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" - CSPU5 Project - Multi Screen App_markdown_instruction: "# Multi Screen App\r\nYou - will be creating your own multi-screen app to practice designing user interfaces - and writing event-driven programs. \r\n\r\n**Look at the Project Guide and - Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* - Your app will have at least **4 screens**.\r\n* Your app should include **text, - images, buttons, and sound**.\r\n* There should be **no “getting stuck” on - any screen.** It should always be possible to navigate from a screen in your - app to some other screen. \r\n* Your program code should follow **good style**.\r\n* - Your user interface should be **intuitive to use**." - CSPU5 Use Console.log to update IDs_markdown_instruction: "# Updating IDs and - Debugging with Console Log\r\n\r\nIn the last level you tested out the new - command: `console.log`. In this level we have a couple buttons with event - handlers and `console.log` statements, but they are switched around!\r\n\r\nWe - should have given the buttons better ID names so we could tell the difference - based on the ID. **Can you update the ID names and `console.log` messages - to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** - of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to - Code Mode and notice that the **ID pulldowns have been updated to include - the new IDs**. (You still need to select the correct ID from the pulldown - menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" - CSPU5 Use setScreen for first time_markdown_instruction: "# Adding Code: Switching - Screens with *setScreen*\r\n\r\n<img src=\"https://images.code.org/9232bd923268d36158d63829145c9879-image-1477367827365.gif\" - style=\"float: right; width: 150px\">\r\n\r\n**You Try it:** Add event handlers - to the buttons that use `setScreen` to switch to the other screen. \r\n\r\nThe - result should be two-screen app which can switch back and forth between the - \"hello\" and \"go back\" screens. See example at right.\r\n\r\n* **Add an - onEvent handler** for the smiley face image/button to respond to a \"click\"\r\n - * Do it the easy way by inserting from design mode, or just drag an `onEvent` - block into the code workspace.\r\n\r\n* **Add `setScreen` into the event handling - function**\r\n * Make it switch to the other screen when the smiley face is - clicked.\r\n\r\n**Run. Test. Debug**\r\n\r\n* Test to see if the clicking - the smiley face switches screens\r\n* If it doesn't work, retrace your steps - and try again.\r\n\r\nIf it works, then **repeat these steps for the \"go - back\" button.**\r\n\r\n* The result should look something like the example - on the right. \r\n" - CSPU5_addDescriptiveIDsToTurtleDriver_markdown_instruction: "# Descriptive - IDs\r\n\r\n**You try it** - give your buttons **descriptive and meaningful - IDs** rather than the default `button1`, `button2` and so forth.\r\n\r\nAfter - you change the ID in Design Mode remember to:\r\n\r\n* **Change the event - handler code** so that it correctly references the new IDs of the buttons\r\n* - **Run - Test - Debug ** the program to make sure it works, and debug any problems.\r\n\r\n<details><summary><strong>Reminder:</strong> - Rules About IDs [click to expand]</summary>\r\n\r\nIn making descriptive and - meaningful IDs there **are some rules about IDs** you need to know. IDs...\r\n\r\n<li> - are case sensitive</li>\r\n<li> cannot contain spaces.\r\n<li> *must* begin - with a letter (A-Z or a-z) and may be followed by any number of digits and - letters.\r\n<li> can contain hyphens (\"-\"), underscores (\"_\"), colons - (\":\"), or periods (\".\").\r\n\r\n</details>\r\n" - CSPU5_AddImage_andMakeChaserGame_markdown_instruction: "# Now you do it: Add - an image\r\n\r\n[lice cap]\r\n\r\n* add an image from icon, or from something - you upload.\r\n\r\n* We'll make the image respond to events on the next level\r\n\r\n* - Click continue\r\n\r\n" - CSPU5_AddImageToChaserGame_markdown_instruction: "# Now you do it: Add an image\r\n\r\n[lice - cap]\r\n\r\n* add an image from icon, or from something you upload.\r\n\r\n* - We'll make the image respond to events on the next level\r\n\r\n* Click continue\r\n\r\n" - CSPU5_AddLabelToChaserGame_markdown_instruction: "# Design Mode: Add a label\r\n\r\n<img - src=\"https://images.code.org/092af4a9c90ad36fa44c636f1227e4d9-image-1476893390336.gif\" - style=\"float: right\">\r\n\r\nWell, now we have the beginnings of a little - game! Time to go back to design mode to start embelishing our program.\r\n\r\n**You - try it:** - Add a text label that says \"Try to Catch the Button!\"\r\n\r\n\r\n\r\n* - Switch back to design mode\r\n* Drag a label on the screen <img src=\"https://images.code.org/c74c0e7fed308af92740d31cbd1098a9-image-1476892918698.png\">\r\n* - Set the text to be something like \"Try to Catch the Button!\"\r\n* Set any - other properties or styles of the text label that you want.\r\n\r\n\r\n" - cspu5_assess1_shortresponse_markdown_instruction: "**Short Response:** \r\n\r\nTwo - students, Kaleb and Hunter, are arguing in class about an App Lab project. - Kaleb states, “Huh, a button and an image are basically the same thing!”. Hunter - replies, “That doesn’t make any sense at all!”.\r\n\tExplain what Kaleb may - have meant by that statement." - cspu5_assess2_flowChart_markdown_instruction: "The human question below has - a yes/no answer. Create a flowchart that shows the logical progression of - the questions that need to be answered to arrive at yes or no. Your diagram - should consider the day of the week, time of day, and account for both possible - outcomes.\r\n\r\n| Question | Question |\r\n|----------------------------------|----------|\r\n| - Should I be at school right now? | (Input your flowchart here) |" - cspu5_assess2_match_markdown_instruction: "The following statements are true - about event handlers, if-statements, or both in App Lab. Place the letter - next to each statement into the appropriate area of the table below.\r\n\r\n**Statements:**\r\n\r\n* - A. Runs code in response to a user action\r\n* B. Runs code in response to - statement being evaluated to True\r\n* C. Evaluated sequentially once execution - is “inside” the statement\r\n* D. Can be triggered at any time\r\n* E. Used - to run a block of code\r\n\r\n_Note: Make a new line for each box._\r\n\r\n Event - Handlers: x, x\r\n if Statements: x, x\r\n Both: x, x\r\n" - cspu5_assess2_pseudocode2_markdown_instruction: "A _pseudocode_ program is - started below that asks the user for input and stores the value in a variable. Continue - writing pseudocode to accomplish this task: \r\n\r\nIf the hour is within - the school day (8 to 15) then display “Nice to see you!”, Otherwise, display - “It’s time to go home!\r\n\r\n DISPLAY (“Enter the hour of day (0-23)”)\r\n hour - <- INPUT ()" - cspu5_assess2_shortAnswer_markdown_instruction: "**Short answer:** When might - a programmer create a global variable instead of a local variable?" - cspu5_assess2_shortAnswer2_markdown_instruction: "**Short Answer:**\r\n\r\nIn - the previous class periods, you developed a digital assistant that is able - to “intelligently” respond to a limited set of questions and statements. Assume - you have created a much more robust digital assistant with capabilities similar - to those of Siri. Describe two possible user inputs: one question that a - digital assistant could “intelligently” answer easily, and another that it - could not. Explain what makes the first easy and the second difficult for - a digital assistant. (Consider the code used to develop your digital assistant.)" - cspu5_assess2_trueFalse_markdown_instruction: "For each expression below, circle - whether it evaluates to true or false. The variable temperature is initialized - as shown.\r\n\r\n var temperature = 30;\r\n\r\nExpressions:\r\n\r\n* (temperature - > 0) && (temperature < 32)\r\n* (temperature > 0) || (temperature < 32)\r\n* - (temperature != 0) && (temperature < 32)\r\n* (temperature == 0) || (temperature - > 32)\r\n* (temperature < 0) || (temperature > 32)\r\n\r\n_Note: Write \"true\" - or \"false\" on a new line for each expression._" - cspu5_assess3_shortAnswer_markdown_instruction: "**Short Answer:** Computer - models and simulations are used to formulate, refine, and test hypotheses. Describe - a scenario that could be modeled by a computer and explain one benefit and - one drawback of doing the simulation on a computer instead of real world. - \r\n" - cspu5_assess4_challenge_markdown_instruction: "**Challenge Question:** Imagine - a list that represents the height in feet of equidistant points along a mountainous - path. Here is an example of the data with a diagram that reflects the data. - For example: \r\n\r\n![](https://images.code.org/8046cbdb63d7e7d68eb133c58362b099-image-1477862090668.png)\r\n\r\nA - programmer wants to write a procedure that calculates the net elevation - total - number of feet a traveler goes up and down. For example, looking at the first - 3 segments of travel, the net elevation is 7 feet (up 3, up 1, down 3). \r\n\r\nWrite - procedure (in either JavaScript or pseudocode) called processPath(data) that:\r\n\r\n* - Accepts a list of elevation data as a parameter\r\n* For every value in the - list\r\n\t* Compute the absolute difference between that value and the value - next to it on the path\r\n\t* Add the difference to a running total\r\n* Return - the total elevation traveled\r\n\r\nIn writing your procedure you should assume - that you can call a function called _absDiff(a,b)_.\r\n\r\n![](https://images.code.org/0a7b91a830319d5d690ddf2efa264395-image-1477862205239.png)\r\n\r\nWrite - the full procedure below." - cspu5_assess4_scoreToGrade_markdown_instruction: "**Short Answer:** Jimmy wrote - the procedure scoreToGrade which accepts as a parameter score - a quiz score - in the range 0-100. The procedure is supposed to return a letter grade. He - feels confident his program is correct because he has tested it using the - scores 3, 29, and 67. Sally believes the program is incorrect because she - tested the values 73 and 86. The code is syntactically correct, and the programs - runs without generating an error, but the results are sometimes wrong. Why - does the procedure return the correct values for Jimmy’s tests but not Sally’s? - \r\n\r\n PROCEDURE scoreToGrade (percent)\r\n {\r\n IF (percent - < 60)\r\n {\r\n RETURN (\"F\")\r\n }\r\n ELSE - IF (percent >= 60)\r\n {\r\n \tRETURN (\"D\")\r\n }\r\n ELSE - IF (percent >= 70)\r\n {\r\n RETURN (\"C\")\r\n }\r\n ELSE - IF (percent >= 80)\r\n {\r\n RETURN (\"B\")\r\n }\r\n ELSE\r\n {\r\n \tRETURN - (\"A\")\r\n }\r\n }" - cspu5_assess4_shortAnswerShopping_markdown_instruction: "**Short Answer:** - Cecelia would like to write an app to help manage a trip to the grocery store. The - app will maintain a shopping list (a list of words) of all the items to buy. Describe - how Cecelia might use a second list in the app. What else might be tracked? - Describe how the list would be used and updated in the app.\r\n" - CSPU5_basic if - check driving age_markdown_instruction: "# You try it\r\n\r\nThis - is only *slightly* different from the voting example you just saw.\r\n\r\n* - **Add an if-statement** to the code to check the `age` to see if the person - is old enough to drive. (In most states you need to be 16 or older).\r\n* - **Display a message if the person is old enough drive.**\r\n\r\nYou can add - an if-statement by dragging it out from the toolbox. We've provided the - console.log message you should use. Just drag it inside the if-statement. This - animation shows most of what you have to do.\r\n\r\n![](https://images.code.org/4ef3562d035ffacf292daac508fea34f-image-1479746969387.gif)" - CSPU5_basic if - DIY secret number_markdown_instruction: "# Do it yourself - - What's the secret number?\r\n\r\nInsert lines of code between the \"Welcome\" - and \"Goodbye\" that do the following:\r\n\r\n1. use `promptNum` to ask the - user to enter the \"secret number\"\r\n2. add an `if` statement to check if - the number is the secret (you can make up your own secret number)\r\n3. use - `console.log` to display a message if the user guessed correctly\r\n\r\n**NOTE:** - Don't go overboard here adding messages. Just get practice adding a prompt - and an if-statement on your own. Make sure it works and move on.\r\n" - CSPU5_basic if - voting examle_markdown_instruction: "# Recreate the voting - example\r\n\r\n* Replace `condition` with a Boolean expression to check if - the person is 18 or older.\r\n* Run the program a few times, entering different - ages at the prompt\r\n* Make sure you generate the two outputs that are possible - from this code.\r\n\r\n" - CSPU5_basic if-else - driving age_markdown_instruction: "# You try it\r\n\r\nLet's - modify the driving age example to add an `else` clause.\r\n\r\n* **Add an - `else` ** to the if-statement.\r\n* **Add a console.log** message inside the - else clause that says something like \"sorry you can't drive yet\".\r\n\r\nYou - can add an else-statement by clicking on the `+` attached to the if statement. We've - provided some starting code.\r\n\r\n**BONUS** - if they are not old enough - to drive you could do the math and tell them how many years they have to wait." - CSPU5_Debugging predict unexpected behavior - two onEvents to one ID_markdown_instruction: "# - Debugging Unexpected Behavior\r\n\r\n## Predict - Observe - Reflect\r\n\r\nTo - understand a new piece of code good programmers often try to **first make - a prediction about what will happen before running the program**. \r\n\r\nBy - forcing yourself to make a prediction (it doesn't matter if you're right - or not) you are immediately alerted to any **unusual or unexpected behavior** - and you can ask yourself, *\"Huh? why did it do that? Was that supposed to - happen?\"* It might not be an error, but you gain invaluable insight and - actually **learn faster**.\r\n\r\n**Predict:** For the code that is here, - what will happen when the \"Click Me\" button is clicked? \r\n\r\n * **Study - the code** - This program has **two event handlers** listening for events - on the same button?\r\n * **Force yourself to make a prediction!** - \"I don't - know\" is not a prediction!. \r\n\r\nHere are some options to think about:\r\n\r\n* - There will be an error in the console immediately after hitting run\r\n* There - will be an error in the console but not until you hit the button\r\n* Program - does nothing\r\n* turtle only moves forward\r\n* turtle only turns left\r\n* - turtle move forward *then* turn left \r\n* turtle turn left *then* move forward?\r\n* - something else? \r\n\r\n**Observe:** Once you've made a prediction, close - these instructions and **run the program** to observe what happens.\r\n\r\n**Reflect:** - Was your prediction correct? If not what about your mental model might need - to change? Talk about it with a classmate and experiment with the code to - make sure you understand what is happening." - CSPU5_FinalizeChaserGame_markdown_instruction: "# Add an Image and Make a Chaser - Game!\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" - style=\"float: right\">\r\n\r\n**Now You Try it** - add an image to your app - and modify the code so that the image jumps around the screen rather than - the button. Your little game should have:\r\n\r\n* **Text** on the top of - the screen with a title or instructions for what to do.\r\n* **An image** - that \"runs away\" (moves randomly) based on some mouse event.\r\n\r\n**Tips:**\r\n - * **Hint** - the easy way to do this is to simply change the IDs in `onEvent` - and `setPosition` to respond to the image instead of the button.\r\n * Remove - the button from the app after the image is working. We don't need it anymore.\r\n - * Change the label text so that the instructions make sense for your game.\r\n - * The game is even more fun if you use the `mouseover` event instead of `click`\r\n\r\n**Optional - Extensions**:\r\n * Make the background interesting\r\n * Add another image - that runs away.\r\n * See what happens with the commands `hideElement` and - `showElement`\r\n * Have two UI elements where interacting with one controls - or does something to the other.\r\n\r\n**Finalize your \"Chaser Game\"** and - click Finish.\r\n\r\n" - CSPU5_moveTurtleOnButtonClick_markdown_instruction: "# onEvent\r\n\r\n**You - try it!** - Make the turtle move forward when the button is clicked.\r\n\r\n* - **Add an `onEvent` block** \r\n* Set the **id** of your button\r\n* Add `moveForward` - to the function definition\r\n\r\n* **Run the program** to make sure it works.\r\n* - **Try changing the event type** to something like *\"mouseover\"* and see - what happens. Not all event types will work with buttons but it's fun to - play a little bit.\r\n\r\nOnce you've got the program responding to some - event, congratulations! You've just made your first interactive app. \r\n\r\n**Click - Finish** to move on to the next problem.\r\n\r\n" - CSPU5_playWithEventTypes_markdown_instruction: "\r\n# Play with different event - types\r\n\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 - AM.png\" style=\"float: right\">\r\nIf you haven't yet, you should experiment - with different event types with your `onEvent` blocks. The ones that will - work best here are mouse-related ones such as:\r\n * click\r\n * mousemove\r\n * - movedown\r\n * mouseup\r\n * mouseover\r\n\r\n*There are some events that - capture keystrokes from the keyboard. These are interesting, but they do not - work easily with buttons. We'll stick to mouse events for now, and get to - keys later.*\r\n\r\n**Be sure** to experiment with each of the ones that start - with \"mouse...\".\r\n\r\nOnce you've have played a little bit, click Finish - to move on.\r\n\r\n" - CSPU5_predict_applab_onEventWithWrongID_markdown_instruction: "# Debugging - Event-Driven Programs: IDs\r\n\r\n**You Try it: Checking IDs** -- Your first - debugging task will be to verify that the button IDs match the event-handlers. You'll - also see error messages in the **\"Debug Console\"**\r\n\r\n![](https://images.code.org/6bb61c1ab1af5c0ce84a8cc4dc9b95cd-image-1476970435861.png)\r\n\r\n1. - **Run the program** and inspect the error messages in the Debug Console.\r\n * - **NOTE:** an error message *only* indicates where the computer ran into trouble. It - doesn't tell you the root cause of the problem, necessarily.\r\n2. **Investigate** - -- Use the **error message as a clue** to investigate the possible problem.\r\n3. - **Fix it** -- Make a change that you think will fix the problem.\r\n4. **Run - the program** and verify that not only are there no error messages but the - program works as intended (turtle moves forward on button click).\r\n5. **Didn't - work?** - repeat the steps above. And stick with it! You'll get it eventually.\r\n\r\n**Remember:** - You can see the ID of a UI element by just hovering your mouse over it.\r\n<details><summary>Hint? - [click here]</summary>\r\n\r\n<li>In this case the ID of the button does not - match the ID in the onEvent command</li>\r\n<li>The error message is saying: - \"you're telling me to listen to events on a UI Element with id 'button1' - and no such thing exists!\" </li><br>\r\nThere are two ways to fix this:<br>\r\n<li>Change - the ID in the event handler code to match the button ID in design mode.</li>\r\n<li>...or - Change the button ID in design mode to match the event handler</li></details>\r\n\r\n" - CSPU5_Project - Multi Screen App_markdown_instruction: "# Multi Screen App\r\nYou - will be creating your own multi-screen app to practice designing user interfaces - and writing event-driven programs. \r\n\r\n**Look at the Project Guide and - Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* - Your app will have at least **4 screens**.\r\n* Your app should include **text, - images, buttons, and sound**.\r\n* There should be **no “getting stuck” on - any screen.** It should always be possible to navigate from a screen in your - app to some other screen. \r\n* Your program code should follow **good style**.\r\n* - Your user interface should be **intuitive to use**." - CSPU5_setPosition to fixed location_markdown_instruction: "# Using setPosition\r\n\r\n<img - src=\"https://images.code.org/b664824ffeb3347b2e0b6d12447b4e8b-image-1476891499229.gif\" - style=\"width: 150px; float: right;\">\r\n\r\n**Now you try it** - use [setPosition](#triggercallout=setPosHover) - to **move the button to the middle of the screen when clicked**. \r\n\r\nWe've - set up a small project for you with a button (id: `moveBtn`) already added - in design mode.\r\n\r\n1. Add an `onEvent` block\r\n2. Drag a `setPosition` - command into the event handler function\r\n3. Set the x,y coordinate so that - the button ends up in the middle of the screen.\r\n * You'll need to experiment - a little bit to find coordinates that work for you.\r\n * Hover over the screen - to find a good starting point.\r\n\r\n**Tip**: when you see a command that - is linked like this: [setPosition](#triggercallout=setPosHover) click it! - -- it will show you other hints.\r\n\r\nOnce you've got the button moving - to the middle of the screen click Finish to move on to the next challenge.\r\n" - CSPU5_turtleDriver_add2ndButton_markdown_instruction: "<img src=\"https://images.code.org/7447f9f6df9a1931297e1f8fa7284f28-image-1481582422206.gif\" - style=\"float: right; width: 200px\">\r\n\r\n# Practice! Add another button\r\n\r\nNow - that you know the pattern try it out. **Add a 2nd button to the screen that - turns the turtle to the left when clicked.** The finished product should - look similar to the image shown here.\r\n\r\nRemember the steps:\r\n\r\n 1. - **Design Mode**: drag another button onto the screen\r\n 2. Switch to Code - Mode: **add an onEvent block** to the code\r\n 3. **Add code** inside the - function to make the turtle turn left\r\n 4. Run. Test. Debug\r\n\r\n<details><summary>Need - Help? [Click Here]</summary>\r\n\r\n<h3>\r\nHere is an example of adding other - button to make the turtle turn left\r\n</h3> \r\n\r\n<div style=\"column-count: - 3; column-gap: 20px; column-rule: 0.5px solid #00adbc; -moz-column-count: - 3; width: 100%\">\r\n\r\n<p><span style=\"font-weight: bold; color: #00adbc; - font-size: 200%;\">1.</span>\r\nAdd a UI element to the screen in Design Mode</p>\r\n\r\n<p><span - style=\"font-weight: bold; color: #00adbc; font-size: 200%;\">2.</span>\r\nAdd - another onEvent block to the code. <strong>Note:</strong> you need new onEvent - block <em>for every</em> event you want to capture.</p>\r\n\r\n<p><span style=\"font-weight: - bold; color: #00adbc; font-size: 200%;\">3.</span>\r\nAdd code to the event - handler function you want.</p>\r\n\r\n</div>\r\n\r\n<img src=\"https://images.code.org/f695b83911560bf628750ed2a134a38c-image-1476818017592.png\" - style=\"display: block; width: 100%\">\r\n\r\n<div style=\"column-count: 1; - column-gap: 20px; column-rule: 0.5px solid #00adbc; -moz-column-count: 3; - width: 33%;\">\r\n\r\n<p><span style=\"font-weight: bold; color: #00adbc; - font-size: 200%;\">4.</span>\r\n<strong>Debugging Tip:</strong> if you hover - your mouse over a UI element while in code mode, it will show you the ID of - the element. This very useful when you have a lot of elements on the screen.\r\n\r\n</div>\r\n\r\n<div - style=\"clear: both\">\r\n \r\n</div>\r\n\r\n\r\n\r\n\r\n</details>\r\n" - CSPU5_U3 - Arrays - appendItem_markdown_instruction: "# Adding Items to an - Array\r\n\r\n<img src=\"https://images.code.org/c9244eb598416b5a3d9baac088bbaca8-image-1447267168567.39.06 - PM.png\" style=\"width: 250px; float: right\">\r\n\r\nIn our last exercise - we created our array and initialized it with some values. Another way to do - this is to **add items to your array on separate lines**. The simplest way - to do this is to add a new item to the end of your array using the `appendItem` - command.\r\n\r\n<img src=\"https://images.code.org/74a2f2660d5aea8dec7dc4933f2c68d3-image-1447185901732.04.50 - PM.png\" style=\"width: 250px; float:right; border: solid 1px black\">\r\n\r\nTo - append means to add or to join. When you append an item to an array you actually - add a new location to the end of the array that contains the new value, so - that the total size of the array grows by one. Since you can always add items - to an array after creating it, it is very common to **create an empty array - and then add values in subsequent portions of your program**.\r\n\r\n# Do - This:\r\n\r\n* **Read the documentation** for `appendItem`.\r\n* Create an - **empty array** called `oddNumbers`.\r\n* Use `appendItem` to add the odd - numbers 1-11 to your array.\r\n\r\n![](https://images.code.org/41883beff3cb9810fed37ae684dc1fe8-image-1448312407634.gif)\r\n\r\n* - **Use `console.log`** to confirm your array is holding the correct values. - The output should look like the example below.\r\n\r\n![](https://images.code.org/4daf7aff37f4796185fc608f20856a12-image-1489697355089.png)" - CSPU5_U3 - Arrays - assignment_markdown_instruction: "# Setting Values by Index\r\n\r\nEach - location in an array can be treated like its own variable. We've already - seen how we can use bracket notation to reference values stored at specific - locations in an array. Just like with variables, **we can assign the value - of a specific location in an array using `=`** (the assignment operator).\r\n\r\n**Example:** - The value at index 0 of this array is set to 10.\r\n\r\n![](https://images.code.org/d0bf9901deeffb1cd6553c27c38046a4-image-1447172887059.27.25 - AM.png)\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/cfa8d82d89e5227f22e3afe5f9c49698-image-1447366432447.13.11 - PM.png\" style=\"width: 200px; float: right\">\r\n\r\nStarter code is provided - that creates an array of 0's and 1's. **Set all the values in this array - to be 0**. \r\n\r\n* Use **indexes** and the **assignment operator** `=` to - **set all the 1's to be 0**.\r\n* Check the output of the `console.log` to - confirm **the array only contains 0's**. Example shown on the right.\r\n\r\n" - CSPU5_U3 - Arrays - assignment2_markdown_instruction: "# Array Values: Arithmetic\r\n\r\nYou - can reference locations in arrays in arithmetic expressions, just like you - might a variable.\r\n\r\n![](https://images.code.org/a7d11342d8c72b34f2268e4104e43fbd-image-1447189790574.09.32 - PM.png)\r\n\r\nThe starter code **creates an empty array and adds three random - values to it**. \r\n\r\n![](https://images.code.org/51b7c713ae398299a85ee8c0b9ee04f3-image-1447190702799.23.46 - PM.png)\r\n\r\nYou will be adding code to your program that calculates the - sum of the values in the array.\r\n\r\n**Notice** the difference between displaying - an array as part of a string or by itself. Example:\r\n\r\n* code: `console.log(myNumbers)` - displays *with* brackets as: `[1, 2, 3, 4]`\r\n* code: `console.log(\"my list: - \"+myNumbers)` displays *without* brackets as: `my list: 1, 2, 3, 4`\r\n\r\nSo - when it's part of a string it *does not* print the square brackets around - the ends of the list. This is a \"feature\" of the language with no great - explanation. In the first case it sees only a list and it produces a more - technical representation. In the second case the system is trying hard to - convert the list to a nice looking string.\r\n\r\n# Do This:\r\n\r\n* **Add - a variable** to your program to hold the sum of the array values.\r\n* Assign - the value of the variable to **the sum of the three array values**.\r\n* Use - `console.log` to confirm that you have correctly calculated the sum of the - values. Below is sample output from one run of the program.\r\n\r\n![](https://images.code.org/a9ca48808e8e833d92b3bcdebc7b0bd4-image-1447189975738.12.31 - PM.png)" - CSPU5_U3 - Arrays - assignment3_markdown_instruction: "# Reassigning Array - Values\r\n\r\nWe've already seen many examples of how **a location in an - array can be treated identically to a variable**. The last exercise we'll - perform to prove this point is **reassigning array values**. The syntax for - reassigning values stored in an array is identical to that used when reassigning - variables. Even the `++` notation to increase a value by one works!\r\n\r\n![](https://images.code.org/3cbd11c69e42daddce28e059388097db-image-1464228660945.png)\r\n\r\nThe - program you're about to see **creates an empty array and adds three random - values to it**. You will be adding code to the program that **increases each - value by one**.\r\n\r\n# Do This:\r\n\r\n* Add code to the program that **increases - the value stored at each location in the array by one**.\r\n* Use `console.log` - to confirm that you have correctly increased the values. Below is sample output - from one run of the program.\r\n\r\n![](https://images.code.org/42ca1f874a8a7b71e29b2ffd80ec31c3-image-1447191826756.43.37 - PM.png)\r\n\r\n" - CSPU5_U3 - Arrays - createFirstArray_markdown_instruction: "# Creating an Array\r\n\r\nArrays - have many features which make them different from variables, but **most of - what you've learned about variables also applies to arrays**. For example, - just like a variable:\r\n\r\n* Arrays should be given a **descriptive and - meaningful** name.\r\n* Arrays are created using `var`.\r\n* Arrays can be - initialized/set using `=`.\r\n\r\n**Example: Creating an Array**\r\n\r\n![](https://images.code.org/0b7d201db2990f0189963bb6a565a057-image-1447097600773.33.08 - PM.png)\r\n\r\nThis array contains 3 values: 100, 250, 500. Notice that the - values are separated with commas `,` and that the entire array is enclosed - in brackets `[ ]` . We can use `console.log` to display the contents of an - array just like we would a variable.\r\n\r\n![](https://images.code.org/7d4be70330108e3e5d6325fa4e721ef4-image-1447097904253.38.18 - PM.png)\r\n\r\n# Do This:\r\n\r\n* Following the format described above **create - an array** which contains **the even numbers from 0 to 10**.\r\n\r\n<img src=\"https://images.code.org/872be32ff4ba4e9c733435d524a95c9e-image-1448311800271.gif\" - width=450px>\r\n\r\n* Make sure your array has a **descriptive and meaningful - name**.\r\n* Use `console.log` to display the contents of your array. Below - is an example of the output your program should generate.\r\n\r\n![](https://images.code.org/230d988cf99556db04a8a4ad6a8d8a47-image-1447364062049.33.53 - PM.png)\r\n\r\n" - CSPU5_U3 - Arrays - Demo App_markdown_instruction: "# My Favorite Things\r\n\r\nCheck - out this simple app for creating a collection of your favorite things. **We're - going to be working towards building this app** over the next several exercises. - As you might expect, this application **uses an array** to store and organize - information.\r\n\r\n# Do This:\r\n\r\n* Use the \"My Favorite Things\" app - and try to **predict how arrays are used to create the functionality you observe.** - \r\n* Some features to notice:\r\n\t* The app keeps track of a **list of your - favorite things**.\r\n * You may use buttons to **move forward and backward - through your list**.\r\n * The **current entry and total number of entries** - are indicated at the top.\r\n * You may **add a new entry** at the current - location in your list." - CSPU5_U3 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions - as Indexes: Using Variables\r\n\r\nWe can use **any expression that evaluates - to a number** as an index in an array. Here are some examples:\r\n\r\n![](https://images.code.org/6d4ecc9249dc9f3a845196b04d833c1a-image-1447268711944.24.53 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **Starter code** has been provided which - creates an array of colors.\r\n* **Write code** that logs **a random color - from this list** to the console by generating a value for a random index. - Try to write your program using `list.length` rather than hard-coding the - length of the list.\r\n\r\n![](https://images.code.org/d0463c0f2528e04c396f3b9cf219c3ed-image-1447370139548.gif)" - CSPU5_U3 - Arrays - favThings addItem_markdown_instruction: "# Adding New Items\r\n\r\nNow - we want our user to be able to add items of their own to the list. As you - might have guessed, this is as easy as inserting an item into our array at - the current index.\r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to - the \"Add\" button.\r\n* **Write code** in your event handler that:\r\n\t* - Uses `getText` to access the user's new item.\r\n * Uses`insertItem` to - add that item to your array at the current index.\r\n * Calls your update - function to update the screen (the new item should be displayed).\r\n* Run - your program to confirm that the user **can add items to the list** and that - the output displayed is correct." - CSPU5_U3 - Arrays - favThings bounds_markdown_instruction: "# *if* Statements: - Staying in Bounds\r\n\r\nCurrently the user can increase or decrease the value - in the global index **past the bounds of your array**. As a result you've - probably already seen that errors are generated.\r\n\r\nTo prevent this from - happening, we're going to **add `if` statements** to the event handlers on - the \"Next\" and \"Last\" buttons. They should check the value of the global - index variable before changing it. If the user is about to step out of the - bounds of your array they should either:\r\n\r\n* **Block:** Do not change - the index if it will result in a value that is out of bounds.\r\n* **Wrap:** - Set the index to be the other end of the array. In other words, going past - the end of the array moves the index back to 0 and going past the beginning - of the array sets the index to the last in the array (`list.length` will be - helpful here).\r\n\r\n# Do This:\r\n\r\n* **Add `if` statements** to the event - handlers on the \"Next\" and \"Last\" buttons that **prevent the global index - from going out of bounds** using one of the two strategies described above.\r\n* - Run your program to confirm that the user **cannot go out of bounds** and - that the output displayed is correct." - CSPU5_U3 - Arrays - favThings Counting Variable_markdown_instruction: "# Current - Index\r\n\r\nThis app also allows a user to scroll through individual items - in the array. In order to keep track of which index we are currently viewing, - our application will need **a global variable that stores the current index**. - In coming exercises we'll want our global index to change, so let's **make - sure that your code references your global index** rather than fixed values.\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 - AM.png\" style=\"width: 250px; float: right\">\r\n\r\n* Create a **global - variable** that will be used to keep track of the current index in the array. - Set this variable to 0.\r\n* Update `setText` which displays the words to - show your first favorite thing using **the global index variable** instead - of a hard-coded number. \r\n* Update `setText` which displays the current - item number to use **the global index variable** instead of a hard-coded number.\r\n\t* - **Hint:** since arrays are zero-indexed **you will have to add one to your - index** to generate the correct value to display.\r\n* **Note:** neither of - these outputs will be able to change yet. Don't worry, we'll be taking care - of that in coming exercises!" - CSPU5_U3 - Arrays - favThings createArray_markdown_instruction: "# Create Your - Array\r\n\r\nNow that we've dealt with our design elements we'll need to - start writing the actual code of our app. This app keeps track of a list of - items, so we know that **we'll need to create an array** to store them. \r\n\r\n# - Do This:\r\n\r\n* **Create an array** that will hold your list of favorite - things.\r\n* **Add three of your own favorite things to your array.**" - CSPU5_U3 - Arrays - favThings firstOutput_markdown_instruction: "# Displaying - Information to the User\r\n\r\nBefore we make our application interactive, - we'll want to practice creating some simple user output. When the app starts - up, the first item in your list should be displayed. Let's write the code - that will display this information to the screen. \r\n\r\n# Do This:\r\n\r\n<img - src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 - AM.png\" style=\"width: 250px; float:right\">\r\n\r\n* Using `setText` set - the main text area to show your first favorite thing.\r\n* Using `setText` - and `list.length` set the text indicating what item of the list the user is - currently viewing.\r\n\t* **Hint:** since arrays are zero-indexed **you will - have to add one to your index** to generate the correct value to display.\r\n* - **Note:** neither of these outputs will be able to change yet. Don't worry, - we'll be taking care of that in coming exercises!\r\n\r\n" - CSPU5_U3 - Arrays - favThings giveIDs_markdown_instruction: "# Getting Started: - Creating IDs\r\n\r\nTo get your application off the ground we've provided - **the user interface elements that you will use in your application**. Unfortunately - they all currently have **default IDs** which don't reflect how the elements - will be used.\r\n\r\n# Do This:\r\n\r\n* **Create a descriptive and meaningful - ID** for each element in your app." - CSPU5_U3 - Arrays - favThings keepPlaying_markdown_instruction: "# Keep Going!\r\n\r\nYour - app should now be fully functional - nice job! There are of course plenty - of new pieces of functionality to add. If you have time feel free to make - any improvements you wish. Here are some ideas:\r\n\r\n* Allow the user to - **append items** rather than add them at the current location.\r\n* Give the - user the ability to **remove** the item at the current index. This can be - a little tricky if you **remove the item at the end of the list** so see if - you can account for that.\r\n* Only add words **if they are not blank**.\r\n* - **Improve the appearance** of the app." - CSPU5_U3 - Arrays - favThings Next_markdown_instruction: "# Next Button\r\n\r\nNice - work! Your application should now have some simple output displaying one of - your favorite things and indicating which item of your list you are showing. - To make things more interesting, however, **we want to be able to change which - item we display**.\r\n\r\nTo change the item displayed, the user will use - the \"Next\" and \"Last\" buttons. These should **increase or decrease the - global index by one and then you should update the information displayed on - the screen**. To start out with, however, we'll just be writing code for - our Next Button. \r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to the - \"Next\" button.\r\n* Write code in this event handler that **increments your - global index variable** and then **updates the output on the screen**.\r\n\t* - **Note:** If your code from the last exercise was written to reference this - variable then you should just be able to reuse it once you've incremented - your variable. We'll talk more about this in the next exercise.\r\n* Run - your program to **confirm that the user can move forward through the list - and that the output displayed is correct**.\r\n\t* **Note:** You may notice - that your program throws an error if the global index variable goes out of - bounds. Don't worry about this for now - we'll fix it in a later exercise." - CSPU5_U3 - Arrays - favThings Prev_markdown_instruction: "# Last Button\r\n\r\nOur - user can now move forward through our list of favorite things, and we're - about to write code that allows them to move backwards as well. If you've - written your code to reference your global index then this should only require - you to decrease its value by one and reuse code that updates the screen output. - Before we write the code for backwards let's work on cleaning up our code.\r\n\r\n**Removing - Repeated Code:** Once you add the code for moving backwards through your array, - your program will have three places where it updates the screen by setting - the text of your screen elements. Rather than repeating this code we should - **create a function** that updates the screen and then call it every time - we need to refresh those elements. This will not only make our program easier - to read and avoids the errors that can arise from redundant code, but it also - makes it easier to make changes to how our program runs, since all the code - that updates the screen is in a single place.\r\n\r\n# Do This:\r\n\r\n* **Write - a function** that contains the `setText` commands you have used to update - the screen.\r\n* **Replace** the places in your code where you used to have - these commands with **calls to your new function**.\r\n* **Add an event handler** - to the \"Last\" button that decreases the **global index variable** by one - and then updates the screen by calling your new function.\r\n* Run your program - to confirm that the user **can move forward AND backward** through the list - and that the output displayed is correct.\r\n * **Note:** You may notice - that your program throws an error if the global index variable goes out of - bounds. Don't worry about this for now - we'll fix it in a later exercise." - CSPU5_U3 - Arrays - indexPractice_markdown_instruction: "# Index Practice\r\n\r\nIt - will take some practice to get comfortable using array indexes. We'll do - a couple of exercises to build your confidence.\r\n\r\n# Do This:\r\n\r\n<img - src=\"https://images.code.org/4d52429f1d6f8e7812e14d73e2a89c45-image-1447366245418.08.51 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has - been provided that creates an array called `myNumbers`.\r\n\r\n* Use `console.log` - and array indexes to write the contents of `myNumbers` to the screen in order, - as shown to the right. Your commands should be of the form `console.log(myNumbers[index])`.\r\n\r\n" - CSPU5_U3 - Arrays - insertingItems_markdown_instruction: "# Inserting Items: - Array Indexes\r\n\r\nIf you want to add elements in the middle of your array - you can use `insertItem` to specify an **index** at which an item should be - inserted.\r\n\r\n![](https://images.code.org/46815edd373b9fe51c4efcf145474ecc-image-1447252675635.37.24 - AM.png)\r\n\r\nJust like `appendItem`, `insertItem` creates a new location - in the array. However `insertItem` allows you to insert an item anywhere in - the array, not just at the end, and it shifts all elements at or after its - index one location over.\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** - for `insertItem`.\r\n* **Starter code** has been provided which appends some - strings to an array, but right now they don't form a complete sentence.\r\n* - Use `insertItem` to **individually insert strings to your array** to form - a complete sentence.\r\n* Use `console.log` to confirm you succesfully created - your sentence.\r\n\r\n![](https://images.code.org/a77efe777082d387f64c4761d890c560-image-1447254451590.06.59 - AM.png)" - CSPU5_U3 - Arrays - insertionErrors_markdown_instruction: "# Out of Bounds\r\n\r\nIn - many languages trying to access indexes of an array that don't exist will - create an error. **JavaScript allows for some strange behavior** with arrays - that it's useful to see, even though **you will likely never use this functionality**.\r\n\r\n**Warning:** - some of this code will generate errors or work in unexpected ways. Don't - spend a long time trying to understand weird results. The point to take from - this is **referencing indexes that are out of bounds will almost never do - what you intend**, and we'll be learning ways to avoid this as we move forward.\r\n\r\n# - Do This:\r\n\r\n* **Starter code** has been provided which creates an array - with three elements.\r\n* Uncomment the **first command that references indexes - that are out of bounds** and run the code.\r\n* **Examine the output** and - try to understand what is happening.\r\n* Reset and then **recomment** the - line after you've used it. \r\n* **Repeat the process for all the lines.**\r\n\r\n**Note:** - We have used a different style of comment in this program. `/* long block - comment */` is used when you want to write a multiple-line comment. " - CSPU5_U3 - Arrays - introIndex_markdown_instruction: "# Accessing Items in - an Array\r\n\r\nAn array is comprised of many locations. You can individually - set or reference the information at each location of your array just like - a variable. To tell your locations apart each has a separate number, or **index**, - that identifies it.\r\n\r\nArrays in JavaScript are **zero-indexed** which - means the first index is 0. This is similar to binary number systems which - begin counting at 0. For example an array of 10 items would have indexes 0-9. - As a result **the last index is always one less than the length of the array**.\r\n\r\n**Accessing - Array Items by Index:** If you know the index of the item you wish to access - you can reference it using square brackets `list[index]` . The example below - prints the value of the 4th element in the array. \r\n\r\n![](https://images.code.org/8b2da597fccaeeafb30b04991074cd8b-image-1447365422277.56.45 - PM.png)\r\n\r\n# Do This:\r\n\r\n**Starter code** has been provided which - creates an array of the numbers 1 through 10\r\n\r\n* Use `console.log` to - display the first item in your array.\r\n* Use `console.log` to display the - last item in your array.\r\n* Use `console.log` to display the number 5 from - the array." - CSPU5_U3 - Arrays - length_markdown_instruction: "# *Array.length*\r\n\r\nAs - we saw in the last exercise, there are many strange behaviors that can result - from referencing array indexes that are less than 0 or greater than the highest - index in your array. **If want to avoid these kinds of errors then it is useful - to know how long your array is,** especially since we've seen that arrays - can grow and shrink during the course of our program.\r\n\r\n![](https://images.code.org/419a610bedaaf709d400c51a6399f482-image-1447263621427.40.15 - AM.png)\r\n\r\nYou can always check the current length of your array using - the command `list.length` where \"list\" is the name of your array. It evaluates - to a number indicating how many items are in your array.\r\n\r\n# Do This:\r\n\r\n* - **Starter code** has been provided which creates several long arrays.\r\n* - **Use `list.length` and `console.log`** to determine how many items are in - each array. An example of the output is below.\r\n\r\n<img src=\"https://images.code.org/f309b94e58f252599de709dd568441fd-image-1447690174179.08.29 - AM.png\" style=\"width: 250px\">" - CSPU5_U3 - Arrays - lengthMinus1_markdown_instruction: "# Expressions as Indexes: - *list.length - 1*\r\n\r\nWe have been accessing information in an array by - using numbers, but we can actually use **any expression that evaluates to - a number as an index in our array**. The first example of this we will explore - is accessing the last item in our array.\r\n\r\nArrays are **zero-indexed**, - which means that the first index is 0. Therefore an array with a length of - 3 will have indexes 0, 1, and 2. Notice that **the last index is 1 less than - the length**. This will always be the case, and so we can use this expression - to access the last element in any array:\r\n\r\n![](https://images.code.org/4b9d62e451188ea00a58102110e447f6-image-1447267224677.28.31 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **Starter code** has been provided that - which creates several arrays.\r\n* Use the syntax provided above and `console.log` - to display the final item in each list.\r\n" - CSPU5_U3 - Arrays - remove_markdown_instruction: "# Removing Items\r\n\r\nSometimes - we want to remove something from an array. In order to do so you'll need - to specify the **index** of the item that should be removed.\r\n\r\n<img src=\"https://images.code.org/350e3dfe234b1ce1e47e11bc0629b47d-image-1447272428285.06.40 - PM.png\" style=\"width: 250px\">\r\n\r\n**Note:** `removeItem` removes the - location in the array at the index provided. As a result **the array is one - location shorter and all the indexes after the index provided will have their - index decreased by one**.\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** - for `removeItem`.\r\n* **Starter code** has been provided which creates an - array of strings.\r\n* Use `removeItem` to **individually remove all the \"REMOVE\" - strings in your array** to form a complete sentence. \r\n* Use `console.log` - to confirm you succesfully created your sentence.\r\n\r\n**Note:** Keep an - eye out; your indexes will shift as you remove items.\r\n\r\n![](https://images.code.org/5ba2247cafcfcb5d8be80db32126105e-image-1447273315312.21.17 - PM.png)" - CSPU5_U3 - Arrays - stringsInArrays_markdown_instruction: "# Arrays Can Hold - Strings\r\n\r\nSo far we have been using arrays to hold numbers, but each - location in an array could hold a string instead.\r\n\r\n![](https://images.code.org/5088def6c9aa8c114fc415bf25d83511-image-1447195709238.48.13 - PM.png)\r\n\r\n**Note:** It is possible for an array to hold both strings - and numbers, but **typically you will only want your arrays to hold one type - of data**.\r\n\r\n# Do This:\r\n\r\n* Create an **empty array**.\r\n* Use - `appendItem` to **individually add strings to your array**, forming a sentence - of at least **5 words**.\r\n* Use `console.log` to confirm you succesfully - created your sentence.\r\n\r\n![](https://images.code.org/72b8a2bf0a98be39fba73498cb6ed5da-image-1489697463827.png)" - CSPU5_U3 - Arrays - Wrap Up 1_markdown_instruction: "## Choose: Array or Variable?\n\nYour - app needs to store the following information. For each type of information, - decide whether you would use an array or a variable to store it:\n \n* All - the messages a user has sent\n* The highest score a user has ever reached - on the app\n* A username and password to unlock the app\n\n" - CSPU5_U3 - Arrays - Wrap Up 2_markdown_instruction: "## Free Response: Choosing - Array or Variable\n\nIn general, when do you think you should store information - in an array, and when should you use a variable?\n" - CSPU5_U3 - Canvas - 200dots_markdown_instruction: "# Loops on the Canvas\r\n\r\nTo - make things interesting, we're going to quickly add 200 dots to our canvas - by using a `for` loop. **Locations on the canvas are relative to the top-left - corner of the canvas, not the screen**. Therefore you will need to know the - dimensions of your canvas in order to randomly place dots throughout it. You - can find this information in Design Mode:\r\n\r\n![](https://images.code.org/8e0c868a21f5c674efb6adef1040ec2b-image-1448040822360.33.29 - AM.png)\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/345b625e6954dc1ea2310c97aa08c59f-image-1448243004939.gif\" - style=\"float: right\">\r\n* Add a **`for` loop that runs 200 times.**\r\n* - Place the **`circle` command inside the loop** and **decrease the radius** - (try 20).\r\n* **Use `randomNumber` to randomize the `x` and `y` values used - to place your dots**. The ranges you select should be the width and height - of your canvas. \r\n* **COMMON MISTAKE ALERT:** If you test your code before - setting the `x` and `y` values of the circle to random numbers, it will look - like there's only one dot. But really you will have just drawn 200 dots - all at the same (x, y) position.\r\n\r\n" - CSPU5_U3 - Canvas - appendToArray_markdown_instruction: "# Store Your Dots\r\n\r\nNow - we're going to get into the core of the activity. We will be **creating a - record of every dot your user draws**.\r\n\r\nTo do this, we will append *every* - `event` parameter to an array as events are generated. When we store every - mouse location in an array, we can make many interesting effects and redraw - the image in different ways, by looping over the array. First let's just - make sure we can capture them all.\r\n\r\n# Do This:\r\n\r\n* Create a new - array outside the event handler function: `var eventList = []`.\r\n\r\n* In - your event handler, before you call the `circle` command, use `appendItem` - to add the `event` parameter to `eventList`.\r\n![](https://images.code.org/98f98c0895fafa87b8f6617e5b4629af-image-1448080702748.gif)\r\n\r\n* - **Run the program** and draw some dots.\r\n\r\n* In the Debug Console type - `console.log(eventList)` and inspect the contents. You should have a record - of every event parameter used to draw a dot! (It might be a lot.)\r\n![](https://images.code.org/425bdde5f2d87b34c037b533600f19b4-image-1448080857409.gif)" - CSPU5_U3 - Canvas - changeToMouseMove_markdown_instruction: "# Drawing on *mousemove*\r\n\r\nCurrently - the user can click to add dots, but we want **to place dots wherever the user - moves the mouse on the canvas**.\r\n\r\nTo place dots whenever the mouse is - moved, we'll be **changing the event type from `click` to `mousemove`**.\r\n\r\n# - Do This:\r\n<img src=\"https://images.code.org/960ac863ac908506724eeb9f11165672-image-1448246938599.gif\" - style=\"float: right\">\r\n* Change the event type in your event handler **from - `click` to `mousemove`**.\r\n* **Run your program** to confirm that dots are - being drawn anywhere the user moves the mouse.\r\n\r\n**Your user is now able - to draw anywhere they want on the screen!**" - CSPU5_U3 - Canvas - clickToAdd_markdown_instruction: "# Click to Add Dots\r\n\r\nLoops - are one way of quickly adding dots to our canvas, but now we're going to - change our app so that the user can decide when and how many dots to add. - The canvas is a UI element, so **you can attach event handlers to it just - like you would any other element**. We're going to move the circle command - inside of a click event handler so that the user can click to add individual - dots.\r\n\r\n![](https://images.code.org/ecd25d3ff2bb50f0555ebd012e5c3b88-image-1448078111902.gif)\r\n\r\n# - Do This:\r\n\r\n* **Add an `onEvent` handler**; set its ID to your canvas - ID.\r\n* **Move the `circle` command out of your `for` loop and into your - new event handler**.\r\n* **Remove the `for` loop from your program.**\r\n* - **Run your program** and confirm that a single dot is added everytime a user - clicks your canvas.\r\n\r\n![](https://images.code.org/0064f8ac406a9f09dc742c81d8510f16-image-1448244621879.gif)" - CSPU5_U3 - Canvas - delete_markdown_instruction: "# Delete Button\r\n\r\nWe - are finally going to use those buttons! Each one will trigger an event handler - that **processes the array `eventList` to create a visual effect** with the - mouse data you have stored. **The first effect we are going to create is delete.**\r\n\r\nYou - may want to provide your user with a way to start over with their drawing. - In order to do this, you will need to *both* **clear the canvas** and **delete - all items from `eventList`.** The easiest way to delete everything from the - list is to simply set the value of `eventList` to be a new empty list.\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/f8fca0d889ae9ddc3ac9b33ba27fadce-image-1448311933871.gif\" - style=\"width: 200px; float: right\">\r\n\r\n* In Design Mode, set the styling - and text of one button to indicate it's the \"delete\" or \"start over\" - button. Give your button **a descriptive ID**.\r\n\r\n* **Add a click event - handler** to your button.\r\n\r\n* Within the event handler call `clearCanvas`.\r\n\r\n* - Set `eventList` to the empty array (i.e., `eventList = []`).\r\n\r\n**Test - your program** to make sure that starting over works the way it should. \r\n" - CSPU5_U3 - Canvas - draw at click point_markdown_instruction: "# Drawing Dots - at Click\r\n\r\nCurrently the user can click to add dots, but they're drawn - at random locations around the canvas. We're going to use information stored - in the `event` parameter of the event handler function **to place dots wherever - the user clicks the mouse on the canvas**.\r\n\r\nThe event parameter has - two critical pieces of information we'll want, which are `event.offsetX` - and `event.offsetY`. These hold **the location (relative to the top left corner - of the canvas) that was clicked**. \r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/1c6109cfc1b02c3ba737519d3f01d1b4-image-1448301532145.gif\" - style=\"width: 200px; float: right\">\r\n\r\n* **Remove (or comment out) the - `console.log` statement**.\r\n* Replace the `x` and `y` parameters of the - `circle` command with `event.offsetX` and `event.offsetY`.\r\n* **Run your - program** to confirm that dots are being drawn anywhere the user clicks the - mouse." - CSPU5_U3 - Canvas - freePlay_markdown_instruction: "# Create Your Own Effect!\r\n\r\nYou've - just seen several ways that we can process our array `eventList` in order - to create different effects. Now it's time to make your own! **Extend the - functionality of one of the effects you just created, or create an entirely - new one**. What else could you do with the information you've stored in your - array? How else might you combine the programming tools you've developed?\r\n\r\n# - Do This:\r\n\r\n* **Extend the functionality of one of the effects, or create - an entirely new one of your own!**" - CSPU5_U3 - Canvas - introCanvas_markdown_instruction: "# Introducing Canvas\r\n\r\nToday - we are going to be building a drawing app around **a new UI element called - the canvas**.![](https://images.code.org/26713ddcc9477e64c347c228d68cac0a-image-1447994134674.35.25 - PM.png)\r\n\r\n![](https://images.code.org/044ad7db1cb4101f54302bd4013d1cc2-image-1448241882228.gif)\r\n\r\n**A - canvas is simply a transparent rectangle on which you can draw basic shapes** - like lines, circles, and rectangles. In fact, at first you might feel like - we're going to end this unit in the way we started it, making turtle drawings. - Don't worry, we'll quickly move into new and exciting things we can do with - this new UI element.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/3874f5e430a6290544466b2037490ae4-image-1448242142421.28.33 - PM.png\" style=\"float: right\">\r\n* **Starter code** is provided which places - buttons on the bottom of your screen. **Ignore these for now; we'll be using - them later**.\r\n* **In Design Mode, drag a canvas element into the empty - space at the top of your app**, resize it, and give it a descriptive ID.\r\n* - **Call `setActiveCanvas` with the ID you assigned to your canvas**, which - makes it responsive to canvas commands.\r\n* **Add a giant circle to the canvas.** - Use the `circle` command. Make its radius large enough that it goes off the - edge of your canvas.\r\n\r\nYour code will look something like this:\r\n\r\n![](https://images.code.org/f0cc22a1de686db72ebce90c720ae6e4-image-1447994225253.36.59 - PM.png)" - CSPU5_U3 - Canvas - movementFunction fix Orig_markdown_instruction: "# Fix - the \"Original\" Button\r\n\r\nOur \"Original\" button is now slightly broken - because the effect it renders doesn't match our new free-form drawing which - takes the movement of the mouse into account - it just draws fixed-size cricles.\r\n\r\nLet's - fix the \"Original\" button.\r\n\r\n# Do This:\r\n\r\nIn the event handler - function for the \"Original\" button:\r\n\r\n* Change the value used for the - radius from a fixed value to the same thing calculated for the free-form drawing. - Since you wrote a function to do this calculation, it should be easy to call - it from this code as well!\r\n* The **slight difference will be that you will - be looping over the array of events.** So the line of code that draws the - circle might look like the one below. This line of code is certainly a mouthful, - but it's basically the same as the line of code in your `mousemove` event - handler; **it just references the event in the list instead.** <br><img src=\"https://images.code.org/dbb4cd9b98eba70aa2919a93544c1e03-image-1448314845862.40.21 - PM.png\" style=\"width: 600px\">\r\n* **Test your program** to confirm that - clicking the \"Original\" button creates the same effect that occurs when - doing free-form drawing.\r\n\r\n![](https://images.code.org/4fcf033e87dc407d337941a7adc4766b-image-1448394246410.gif)" - CSPU5_U3 - Canvas - movementFunction_markdown_instruction: "# Adjusting Circle - Size\r\n\r\nAmong the other pieces of information contained in each `event` - parameter are the values `movementX` and `movementY`. These numbers tell us - how far (in pixels) the mouse moved since the last mouse event was triggered, - and can be used to measure the speed of the mouse. ** If the movement is large, - the mouse is moving fast; if the movement is small, the mouse is moving slowly.**\r\n\r\nLet's - use the mouse movement speed to make a cool effect. When we draw with a real - pen or brush, the line usually gets thin when making quick strokes and is - wider and darker when making slower ones. We can generate this effect by **using - `movementX` and `movementY` to calculate the radius for the circle.** Since - this calculation might be a little tricky, a smart thing to do would be to - **write a function** that takes `movementX` and `movementY` as parameters - and **returns** a value that should be used as the radius.\r\n\r\n<img src=\"https://images.code.org/b9dc4c20d44af7b4e7725b71cd35fa2b-image-1448313734191.21.43 - PM.png\" style=\"width: 350px; float: right; border: solid 1px black\">\r\n\r\nThere - are several ways to do this. One possible way to write the function is provided - on the right, which uses some arithmetic tricks. The function to the right - is actually only three lines of code but is heavily commented to explain what - it's doing. It makes use of a function called **`Math.abs` which returns - the absolute value of a number.** Feel free to use this or another method - of converting `movementX` and `movementY` into a radius.\r\n\r\n<details> - <summary><strong>What is Absolute Value?</strong> [click to expand]</summary>\r\n`Math.abs` - takes a number as input and returns the positive version of this number. \r\n\r\nIn - math, absolute value is often written with this | | symbol. So |10| is the - absolute value of ten and |-10| is the absolute value of negative ten. Both - evaluate to 10.\r\n\r\nIn Javascript we use `Math.abs` instead of | |. `Math.abs(-10)` - and `Math.abs(10)` both evaluate to <strong>10</strong>.\r\n</details> <br>\r\n\r\n# - Do This:\r\n\r\n* **Write a function like the one above** that accepts two - parameters (one each for `movementX` and `movementY`) and returns a radius. - A higher speed should lead to a smaller radius.\r\n* **Inside your `mousemove` - event handler,** set the radius of the circle to the value returned by your - function, where the function takes `event.movementX` and `event.movementY` - as input. For example, if using the function above, your code would be: <br>![](https://images.code.org/94a379336084954ba2ab27e80b17dee3-image-1448314255797.30.22 - PM.png)\r\n* Run your program and confirm that **when you draw, the speed - of the mouse affects the radius of the dots**. The effect should look something - like what's below \r\n\r\n![](https://images.code.org/ee83d18f04e4d9d486428273b7321f9f-image-1448394071473.gif)" - CSPU5_U3 - Canvas - One Dot sprayPaint_markdown_instruction: "# Making Spray - Paint\r\n\r\nThe next effect we would like to create is a \"spray paint\" - effect. Instead of drawing a single dot for every location stored in `eventList`, - we'll draw many small dots randomly placed around each location.\r\n\r\nWe - are going to start off just practicing **drawing a circle whose x and y locations - use `offsetX` and `offsetY` with a small random value added**. This makes - the line of code to draw the circle kind of long, but hopefully it's easy - to understand if you read it carefully.\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n# - Do This:\r\n\r\n* **Set the style of another button** in Design Mode, give - a label like \"Spray Paint,\" give it a descriptive ID, and attach a click - event handler to it.\r\n* **Copy the code from the \"Original\"** button into - the event handler for spray paint.\r\n* Change the code for `circle` so that - it will **draw a dot whose x and y locations use `offsetX` and `offsetY` with - a small random value added. **\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n* - **Run your app** to make sure it is drawing small dots close to the original - position. Look at the example below.\r\n\r\n![](https://images.code.org/d6279085a5c6689dd5c745a0d0e28136-image-1448386996780.gif)" - CSPU5_U3 - Canvas - redrawOriginal_markdown_instruction: "# Redraw Original\r\n\r\nIf - you were able to get that working and understand what you did, congratulations! - That was some serious programming! If not, take a moment to go back and talk - through the different components with a classmate. Most of the work we'll - be doing for the rest of this lesson uses similar patterns, and you'll want - to be comfortable with them as we add more complexity to our app.\r\n\r\nThe - first thing we are going to do is **create an \"Original\" button that will - redraw the image with the same circle radius you used before**. The process - will be nearly identical to how you added the \"Random\" button.\r\n\r\nIn - fact, the code to redraw the original is *exactly* the same, except instead - of making the radius of the circle be random, it will just be the fixed value - you used originally (probably radius 5 or so).\r\n\r\n![](https://images.code.org/9238e313e8f635e2e6b31ad19d0fdc41-image-1448290929994.gif)\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/6cf1d46af7cd92cc1faf1501366e2e1a-image-1448312993714.gif\" - style=\"width: 200px; float: right\">\r\n(**NOTE:** The instructions below - are shown in the code animation above.)\r\n\r\n* Style a button, give it label - like \"Original,\" give it a meaningful ID, and add a \"click\" event handler.\r\n* - Inside the event handler for your \"Original\" button...\r\n\t* Copy the code - from the \"Random\" button event handler.\r\n * Paste it inside the event - handler for the \"Original\" button.\r\n\t* Set the `radius` parameter to - **whatever value you used when you originally drew dots**.\r\n* Test your - program by drawing a figure and then hitting your \"Randomize\" button. Then - hit the \"Original\" button. Your original drawing should appear." - CSPU5_U3 - Canvas - redrawRandom_markdown_instruction: "# Redraw Random - Part - 1\r\n\r\nThe next effect we are going to create is **\"random.\"** We will - be redrawing the image but with randomly sized dots.\r\n\r\nWe'll be doing - this in two steps. For now, all you need to do is **change the first button - in the row to have the proper styling and attach a click event handler to - it**. **In addition, clear the canvas from inside the event handler** so we - are ready to redraw our new image. We don't want to delete all the items - from the array though, as we will use them to redraw. Once you've done that, - move on to the next exercise where we'll write the actual code in our event - handler.\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/0116a787b989df18b077cb4657a5d379-image-1448312365660.58.05 - PM.png\" style=\"width: 200px; float: right\">\r\n\r\n* In Design Mode, **pick - a button to use for Random. Set the styling and text of the button**. The - image below shows one possible option, but you can style it however you like.\r\n\r\n* - Give your button **a descriptive ID**.\r\n\r\n* **Add a click event handler** - to your button.\r\n\r\n* **Call `clearCanvas`** from inside the event handler - so the canvas is ready for the redraw." - CSPU5_U3 - Canvas - redrawRandom2_markdown_instruction: "# Redraw Random - - Part 2\r\n\r\nNow we're ready to write the code for our \"Random\" effect. - To do this, we will be clearing the canvas and then processing the array `eventList` - to redraw all the dots with a random radius. \r\n\r\nYou already set up the - clear canvas, so next we'll need to process our array in order to find out - the event information for each dot. You'll need to create a `for` loop that - iterates through every index in `eventList` (recall the `length` command). - Within your loop, you will be drawing dots referencing items stored in the - array. \r\n\r\nAs you write this code, remember that **you can treat an individual - element of an array exactly like the kind of data it stores**. Inside a `for` - loop, the event at index `i` can be accessed with the notation `eventList[i]` - and the `offsetX` of that event can be accessed with `eventList[i].offsetX`. - Again, you are essentially treating the array element as if it were the data - it contains.\r\n\r\n![](https://images.code.org/8ce01658ab31ce5f05101e58e3413681-image-1448250618520.gif)\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/6e081911348f3c1b07d17f83bd402249-image-1448312722857.gif\" - style=\"width: 200px; float: right\">\r\n\r\n(**NOTE:** Everything listed - below is shown in code animation above.)\r\n\r\n**Inside the \"Random\" button - event handler...**\r\n* **Add a `for` loop** that runs `i` from 0 up to `eventList.length` - to process over the array.\r\n* **Add a `circle`** command inside your loop.\r\n* - **Set the x and y parameters** of the `circle` to `eventList[i].offsetX` and - `eventList[i].offsetY`, respectively.\r\n* **Set the `radius` parameter** - to some `randomNumber`. Pick any range you like. You can always change it - later.\r\n* **Test your program** by drawing a figure and then hitting your - \"Randomize\" button. It should be the same drawing, but now with randomly - sized dots!" - CSPU5_U3 - Canvas - shiftKey_markdown_instruction: "# Draw When a Key is Pressed\r\n\r\nThis - app now lets the user draw, but they have no control of whether the pen is - up or down. Let's give the user the ability to **choose when to put down - the pen**. We won't even need to add a new event handler to our app! \r\n\r\nYou - may have noticed that the **`event` parameter includes information about whether - certain keys were pressed when the event fired**. They are stored in variables - with names like `shiftKey` or `altKey` and are stored as boolean values (true - / false). We are going to use the `shiftKey` variable to decide when we should - draw circles. \r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/1a4b8f12645e5e88dee96d5542933c84-image-1448248202626.gif\" - style=\"float:right\">\r\n\r\n* **Add an `if` statement inside your event - handler function** where the condition is based on the value stored in `event.shiftKey`: - **If `shiftKey` is true, then draw the circle.** <img src=\"https://images.code.org/a542766e8e52fed5ca992f2434ace086-image-1448307484936.37.32 - PM.png\" width=\"200\">\r\n\r\n* You might want to **decrease the radius of - your circle** (for example to 5).\r\n\r\n* **Run the program and confirm that - dots are only drawn when the shift key is pressed.**\r\n\t* The effect should - be that the user can pick up and put down the pen to draw.\r\n\t* Hold the - shift key down and move the mouse to draw.\r\n\t* Release the shift key to - stop drawing.\r\n\r\n(**NOTE:** If you wish, use `console.log` to display - the values in `event` again. You'll see `event.shiftKey` is one of the values - stored.)\r\n" - CSPU5_U3 - Canvas - sketch_markdown_instruction: "# Relative Indexes\r\n\r\nWhen - looping over an array, we use a counter variable (typically `i`) to keep track - of which index we're at. We can then access the contents at each index with - the syntax `list[i]`.\r\n\r\nIf we want, however, we could access the contents - of the next element as well, since its index is just one greater. For example, - if we are currently focused on the element at index `i`, then `list[i+1]` - gives us access to the next element in the array. In other words, you can - **reference indexes relative to your counter variable**.\r\n\r\n![](https://images.code.org/3bb5dfce60951040172bfe08d98a8750-image-1448393281688.png)\r\n\r\nWe - are going to use relative indexing to create our final effect, which will - look sort of like an etching of the image. The idea is simple: **for every - (x, y) location in the event list, draw a straight line between that - location and the location stored 10 spots further down the array.** You will - use the **`line` command** to draw a line connecting these points.\r\n\r\n# - Do This:\r\n\r\n* **Read the documentation for `line`**.\r\n* **Set the style - of the final button** in Design Mode, give a label like \"Etch,\" give it - a descriptive ID, and attach a click event handler to it.\r\n* **Call `clearCanvas`** - to clear the screen.\r\n* Create a `for` loop that counts from **0 to `eventList.length - - 10`**. \r\n\t* Why do you think we're not counting over the entire array?\r\n* - Use `line` to draw a line between the (x, y) locations of `eventList[i]` - and `eventList[i+10]`. The full line of code will be another big one: ![](https://images.code.org/5de2c40b56042069379ff20ce5d10cab-image-1448393948598.38.49 - PM.png)\r\n* **Use `setStrokeColor` and/or `setStrokeWidth` inside the event - handler** to make the lines visible; otherwise, they will be transparent, - since we set the stroke color to transparent at the beginning of the program.\r\n* - **Run your app** and confirm that your new button creates a sketch effect, - as shown below.\r\n\r\n![](https://images.code.org/c06c268a4757e8838435e576a676a0a2-image-1448395181441.gif)" - CSPU5_U3 - Canvas - sprayPaint_markdown_instruction: "# Making Spray Paint - with Nested Loops\r\n\r\nIn order to make \"Spray Paint\" look more real you - will need to draw multiple dots randomly placed around the original x and - y locations. In order to do this, you will place one `for` loop inside of - another, also known as a **nested loop**. You already have the main loop which - visits every index in `eventList`. The inner loop should **draw 5 circles - whose x and y locations use `offsetX` and `offsetY` with a small random value - added**. \r\n\r\n# Nested Loops\r\n\r\n<img src=\"https://images.code.org/15d7590ed9d4c07a40f22da4decc396c-image-1448153719856.54.36 - PM.png\" width= 300px ; style=\"float: right\">\r\n**When nesting loops, it - is important that you use different variables to count your iterations**. - Look at the example at right. These nested loops effectively say: **\"for - every possible value in `eventList.length`, run a loop 5 times\". **\r\n\r\nSince - `i` is used as the counter variable in the outer loop, we need to use a *different - counter variable for the inner `for` loop*, or things will go haywire. Why? - **If both loops used `i` as a counter variable, the inner loop would keep - changing `i` and the outer loop wouldn't count properly.** The example uses - `j` as the inner loop variable, but you could use anything that's *not* `i`.\r\n\r\n<img - src=\"https://images.code.org/b5184430a48ac55d8f6fe7280c983186-image-1448387927473.gif\" - style=\"width: 450px\">\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/290adbb84a51b89ca27414746d3a4a93-image-1448395072342.gif\" - style=\"width: 200px; float: right\">\r\n\r\n(**Note:** Steps shown in animation - above.)\r\n\r\n* **Add a `for` loop inside the existing `for` loop** in the - spray paint event handler. \r\n* **Change the counter variable** to something - other than `i` for the inner `for` loop.\r\n* **Change the boolean condition** - so the inner loop will run **5 times.**\r\n* **Move the circle** code inside - both `for` loops.\r\n* **Run your app** and confirm that your new button creates - a spray paint effect, as shown below." - CSPU5_U3 - Canvas - transparentDots_markdown_instruction: "# Changing Colors - in Canvas\r\n\r\nWe would like to make our dots transparent so that we can - see when they are drawn on top of each other. To set the color and transparency - of shapes you draw on your canvas, you need to change both the **stroke** - or outline color and the **fill** color. The functions `setStrokeColor` and - `setFillColor` can be used to set those colors. \r\n\r\nThese functions **accept - strings of the form `\"rgba(100, 200, 100, 0.5)\"` as input**. The first three - values in the string are RGB values and the last value is the transparency, - as represented by a decimal number between 0 and 1.0. All together it looks - like this:\r\n\r\n![](https://images.code.org/5f5692259df092ce4e000cbdf5a7df1b-image-1448077147778.png)\r\n<img - src=\"https://images.code.org/e833a63e31dca7d5e8357c0b856dc7cc-image-1448244247180.gif\" - style=\"float: right; width: 150px\">\r\n\r\n# Do This:\r\n\r\n**Before the - loop: ** \r\n* **Add a `setStrokeColor` command** to set the stroke to **fully - transparent**.\r\n* **Add a `setFillColor` command** to set your dots to full - black and mostly transparent **(try a value of 0.2)**." - CSPU5_U3 - Canvas - usingOffsetXY_markdown_instruction: "# The Event Parameter - for Mouse Events\r\n\r\nWe'd like to change the app so that when the user - clicks on the canvas we draw a circle right where they clicked. To do that, - we need to learn more about the **parameter passed by our event handler function, - which by default is called `event`**.\r\n\r\nRecall that when we wanted to - know what key the user pressed on a `keyPress` event, we checked the value - stored in `event.key`. **The event parameter actually stores a great deal - more information about each event**. \r\n\r\nWhen using the mouse, the event - parameter carries information like the location of the mouse, how fast it's - moving, and some other things as well. \r\n\r\nLet's get acquainted with - the event parameter and what we can find out about the mouse.\r\n\r\n# Do - This:\r\n\r\n* Add a `console.log` command inside the function of your event - handler. Use it to display the `event` parameter.\r\n* Run your program and - click your canvas. **The full contents of the `event` parameter should be - displayed in the console**. \r\n* **Which values do you think hold the x and - y coordinates**? What else is there?\r\n* We won't use all of these, but - it's interesting to see just how much is available.\r\n* Once you have experimented - a little, move to the next level.\r\n![](https://images.code.org/a6875e27019cb938a9576f0485648ca9-image-1448041792987.49.30 - AM.png)\r\n" - CSPU5_U3 - Conditional Basics - 6_markdown_instruction: "# What happens after - an *if* ?\r\n\r\nYou may have noticed that our flowchart for our game so far - only does something if the condition is true. What happens after the `if` - statement? Let's find out.\r\n\r\n<img src=\"https://images.code.org/90b7a527091704a6ab4612b9f84db305-image-1446234882661.png\" - style=\"width: 200px\">\r\n\r\n# Do This:\r\n\r\n* **Add a `setText` after - the `if` statement** to \"Nope. Guess again.\"\r\n\r\n<img src=\"https://images.code.org/f5c5de1b77a9caf16027e65ed24f91ec-image-1446234785600.gif\" - style=\"width: 450px\">\r\n\r\n* **Run the program** a couple times to **look - for a bug**. We will fix this on the next level." - CSPU5_U3 - Conditionals - Combine AND OR and NOT_markdown_instruction: "# Combining - AND and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean - expression to invert its result. This opens the door to express the same logical - statements in different ways. \r\n\r\nFor example, let's say you want to - determine if a person, based on his or her age (under 12 or over 65) gets - to pay a reduced price for a movie ticket. You might express that like this:\r\n\r\n```\r\n// - If your age is less than 12 or greater than 65\r\nif( (age < 12) || (age > - 65) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\nBut - you might also figure out a way to determine if a person gets a reduced price - ticket by determining if his or her age is between 12 and 65 (`(age >= 12) - && (age <= 65)`) and then taking the inverse of that. So using the NOT operator - this would work as well:\r\n\r\n```\r\n// If your age is NOT between 12 and - 65\r\nif( !( (age >= 12) && (age <= 65) ) ){\r\n\twrite(\"You qualify for - a reduced price!\");\r\n}\r\n```\r\n\r\n**Why use one over the other?** Personal - preference. Use the one that makes the most sense to you, but it should be - a clear expression of what you are trying to say. \r\n\r\n\r\n# Do This:\r\nWe've - provided you with starting code that prompts the user to enter a **day** and - their **age** and store it in variables.\r\n\r\n**Add an `if` statement that - uses both AND and OR operators**\r\n\r\n * The app should write \"Time for - school!\" if it's a weekday and the user is under 18.\r\n \t* Hint: one way - to say that it's a weekday is to say that it's NOT a weekend.\r\n * Otherwise, - if it's a weekday and the user is 18 or older, it should write \"Time to - go to work!\"\r\n * Otherwise, it should write \"Time to relax for the weekend!\"\r\n - \r\n \r\n**WARNING** logic can get tricky sometimes. Make sure to test your - program with inputs that cover every possibility. There are 4 basic cases - to test for:\r\n\r\n * It is a weekday and age is under 18\r\n * It is a weekday - and age is not under 18\r\n * It's not a weekday and age is under 18\r\n - * It's not a weekday and age is not under 18\r\n\r\nTry it out!" - CSPU5_U3 - Conditionals - Combine AND OR Simple_markdown_instruction: "# Combining - AND and OR\r\n\r\nYou can express more complex conditions by combining **AND** - and **OR** in one statement. Here is the example from the previous page which - you can use as a reference. This statement will evaluate to **true** if the - day is Tuesday or Thursday AND their age is 15 or 16.\r\n\r\n![](https://images.code.org/3f3aba7828abd88fdbd90eda60611bd3-image-1448062956405.06.36.png)\r\n\r\n# Do - This:\r\nWe've provided you with starting code that prompts the user to enter - a **day** and their **age** and stores the result in variables.\r\n\r\n**Add - an `if` statement that uses both AND and OR operators**\r\n\r\n * The app - should write \"Sleep in!\" if it's a weekend and the user is a teenager.\r\n - * Otherwise it should write \"Uh oh. Have to wake up.\"\r\n \r\n\r\nTry it - out!\r\n" - CSPU5_U3 - Conditionals - Simple AND_markdown_instruction: "# AND Operator\r\n\r\n<img - src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nAgain you will see the - JavaScript boolean operators AND (`&&`) and OR (`||`) in code toolbox. You - can drag them out or simply type them.\r\n\r\nLet's now try out using an - **AND** operator. As a reminder: **if both statements are true** then AND - evaluates to **true**. **If either (or both) are false** the AND operator - will evaluate to **false**.\r\n\r\n<img src=\"https://images.code.org/4a461db916ded2acccfcdb9a75ef8838-image-1446483668310.png\" - style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\nWe've provided - you with starting code that prompts the user to enter their **age** and stores - it in a variable.\r\n\r\n**Add an `if` statement with a Boolean expression - that uses an AND operator (`&&`)** to express:\r\n\r\n * IF *the age is between - 13 and 19* write \"You are a teenager.\"\r\n * ELSE write \"You are not a - teenager.\"\r\n" - CSPU5_U3 - Conditionals - Simple OR_markdown_instruction: "# OR Operator\r\n\r\n<img - src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nYou will now see the - JavaScript boolean operators AND (`&&`) and OR (`||`) in code toolbox. You - can drag them out or simply type them.\r\n\r\nLet's try OR right now. As - a reminder: the OR operator will evaluate to true if *either or both* statements - are true. If both are false, the OR operator will evaluate to false. \r\n\r\n<img - src=\"https://images.code.org/48d59f73e701d452dd74ae304db59d93-image-1446482464792.png\" - style=\"width: 200px; float:right\"> \r\n\r\n\r\n# Do This:\r\nWe've provided - you with starting code that prompts the user to enter a day of the week and - stores it in a variable.\r\n\r\n**Add the boolean expression to the if-statement - to use an OR (`||`)** to express:\r\n\r\n * IF *it's Saturday or Sunday* - then write **\"It's the weekend!\"** \r\n * Else write **\"Can't wait for - the weekend to get here.\"**" - CSPU5_U3 - Design Mode - Console Log_markdown_instruction: "# Updating IDs - and Debugging with Console Log\r\n\r\nIn the last level you tested out the - new command: `console.log`. In this level we have a couple buttons with event - handlers and `console.log` statements, but they are switched around!\r\n\r\nWe - should have given the buttons better ID names so we could tell the difference - based on the ID. **Can you update the ID names and `console.log` messages - to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** - of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to - Code Mode and notice that the **ID pulldowns have been updated to include - the new IDs**. (You still need to select the correct ID from the pulldown - menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" - CSPU5_U3 - Design Mode - Layers and Delete_markdown_instruction: "# Layering - and Deleting\r\n<img src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" - style=\"width: 150px; float: right\">User interface elements can overlap one - another, so you'll want the ability to change the order or **depth** at which - each one is rendered. \r\n\r\nIf you **scroll to the bottom of the Properties - tab** you'll find buttons which allow you to easily **delete or change the - depth** of an element.\r\n* **Delete an Element** by selecting it (clicking - on it) in the design view and then clicking **Delete** in the properties tab.\r\n* - **Change the depth** of elements by using the double or single arrows.\r\n - * Click the double arrow to send all the way to front or back.\r\n * Click - the single arrow to move up or down one layer.\r\n \r\n# Do This:\r\n\r\nUse - the **delete** and **depth** tools to **create the \"After\" image**\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th - style=\"text-align:center\">Before</th>\r\n <th style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td - align=center><img src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" - style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img - src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" - style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" - CSPU5_U3 - Design Mode - Multi Screens 2_markdown_instruction: "# Switching - Screens\r\n\r\nIn the last level you made two screens, a black one and a white - one. However when you ran the app you probably noticed that you had no way - to see the second screen. Let's fix that.\r\n\r\nIn order to switch between - screens we have added a new command: `setScreen`. Read the documentation to - figure out how this command works.\r\n\r\n<img src=\"https://images.code.org/152f45b312da467f0b553efc9fba20a7-image-1444354703453.gif\" - style=\"width: 250px; float: right\">\r\n\r\n**Goal:** Make a 2 screen app - which can switch back and forth between a black screen and a white screen - using buttons.\r\n\r\n# Do This:\r\n\r\n* **Put a button on each screen**. \r\n\r\n* - **Set up event handlers** for each of your buttons. \r\n\r\n* **Use the `setScreen` - block to switch screens** when the buttons are clicked.\r\n\r\n* Test out - your app to make sure you can switch back and forth between the two screens." - CSPU5_U3 - Design Mode - Multi Screens_markdown_instruction: "# Second Screen\r\n\r\nUp - until now our apps have only been able to have one view. With Design Mode - we can now make multiple screens and switch between them!\r\n\r\n**Goal:** - Make a 2 screen app with a black screen and a white screen. \r\n\r\n<img src=\"https://images.code.org/e35a6f494cf6f0c57c66a1aef651cdb0-image-1444353622241.gif\" - style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\n\r\nSwitch to Design - Mode and **add a second screen**. There are two ways to add a second screen: - \r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 - PM.png\" style=\"width: 50px\"> from the Design Toolbox. Check out the screen - dropdown menu at the top right of the app window. You should now have two - screens! <img src=\"https://images.code.org/b48d978335701888b744702f25f11b28-image-1444353746012.17.07 - PM.png\" style=\"width: 75px\"> \r\n* From the screen dropdown menu at the - top right of the app window click *New Screen*. \r\n\r\nMake screen1 white - and screen2 black. **Set the background color for a screen in the Properties - tab**. Make sure to rename the screens with appropriate IDs." - CSPU5_U3 - Design Mode - WTF Console Log_markdown_instruction: "# Console Log\r\nIn - the last level, we saw a new command: `console.log`. You may have noticed - that it prints out text in the Debug Console below the code workspace.\r\n\r\n<img - src=\"https://images.code.org/326e0f6c7d3b846ba06db998f06f56aa-image-1444419414248.36.33 - PM.png\" style=\"width: 450px; border: solid 1px black\"> \r\n\r\nThe Debug - Console is an important tool for programmers. You've seen it display error - messages, but you can also send messages that a user cannot see to the Debug - Console while a program is running. <img src=\"https://images.code.org/cdc253db1b9a3685eaf5ea4b6bc30766-image-1444337429645.png\" - style=\"width: 250px; float: right; border: solid 1px black\"> The Debug Console - is really helpful for debugging programs because you can send messages to - yourself from within your own code!\r\n\r\nYou can find `console.log` in the - code toolbox under the Variables tab.\r\n\r\n# Do This:\r\n\r\n* Drag out - 3 `console.log` commands into the workspace.\r\n\r\n* Update each `console.log` - with your own messages.\r\n\r\n* Run the program a couple times to test out - this new command." - CSPU5_U3 - Design Mode -Recreate Beyond Buttons_markdown_instruction: "# Improved - Chaser Game\r\n\r\nNow lets improve the \"Chaser Game\". This is where you - get to use your creativity. Make it look nice!\r\n\r\nIn addition you will - notice a new command in the toolbox: `playsound`! Read the documentation about - how to add sounds.\r\n\r\n**Note:** Your code from before has been provided - for you.\r\n\r\n# Do This:\r\n\r\n* **Create a Welcome Screen** that explains - the rules of the game. Include a \"Start Game\" button.\r\n\r\n* Update the - your code so that the **image jumps to a new location when it is clicked**. - \r\n\r\n* **Play a sound** each time the image is clicked.\r\n\r\n* **Add - a Game Over Screen** with a lose message and button to start over. The Start - Over Button should direct back to the Welcome Screen.\r\n\r\n* **Make the - user lose**, by sending them to the Game Over Screen, when the background - is clicked.\r\n\r\n\r\n" - CSPU5_U3 - Design Mode 1_markdown_instruction: "<img src=\"https://images.code.org/5e6fa5738796d69775c0786ca9b4a076-image-1476735925167.png\" - style=\"float: right\">\r\n# Design Mode\r\n\r\n**You Try it:** Add a large - red button to your app using Design Mode.\r\n\r\n* Switch to Design Mode\r\n* - Drag a button onto the app screen\r\n* Change the text to say \"Click Me!\"\r\n* - Make the color of the button red.\r\n\r\n\r\n" - CSPU5_U3 - Dice - Dropdown and Score_markdown_instruction: "# Adding Guess - and Score to Dice Game\r\n\r\nLet's have the user guess the number that will - come up when we roll a single die. \r\n\r\nYou can have multiple `if` statements, - one after another, if they have different purposes which are separate. \r\n\r\n** - Note: ** Use the flowchart below to help you figure out the logic of the game.\r\n\r\n# - Do This:\r\n\r\n* **Add a dropdown** to take in the user's guess from 1 to - 6.\r\n\r\n* **Add a set of `if` statements to check if the dice roll number - is equal to the user guess.** Put this set of `if` statements after your set - of `if` statements for the dice image. It should be completely separate from - the other set of `if` statements. \r\n\r\n* Create a variable to **keep track - of score**. Give 10 points if they guess right and take one point away when - they guess wrong.\r\n\r\n* **Display the score** on the screen and update - it after each dice roll.\r\n\r\n<img src=\"https://images.code.org/ac24917ca18606f6f3c31a6be1a16d73-image-1446174953979.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/ac24917ca18606f6f3c31a6be1a16d73-image-1446174953979.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - Dice - Dropdown with Strings_markdown_instruction: "# Adding Difficulty - Levels: Dropdowns with Strings\r\n\r\nLet's add another element to our dice - game: **difficulty levels**. The user will pick either \"Easy\" or \"Hard.\" These - are strings so you might be wondering how to check for equality. **The `==` - works on strings as well!** It checks if the first string is exactly the same - as the second string. **Strings must be the same letters and even have the - same case to be equal**! So \"dog\" and \"Dog\" would not be equal. \r\n\r\n# - Do This:\r\n\r\n* **Add a dropdown** for difficulty level with the options - of \"Easy\" or \"Hard.\" \r\n\r\n* **Create an `if` statement for difficulty - level** which prints the difficulty level to the console.\r\n\r\n<img src=\"https://images.code.org/9db291c8dd4192390e008aa764576cd3-image-1446175136919.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/9db291c8dd4192390e008aa764576cd3-image-1446175136919.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - Dice - If_markdown_instruction: "# Using `if` to Display Images\r\n\r\nWe - are going to set up a dice game. We want to show a picture of a single die - for each random number generated 1 to 6. We've already set up the screen - in Design Mode, with a button to generate the roll and an image to show a - picture of the die.\r\n\r\n**Note:** The flowchart for the desired behavior - is below.\r\n\r\n# Do This:\r\n\r\n* Add an event handler for the Roll! button - so that when the button is clicked it generates a random number from 1 to - 6. \r\n\r\n* Add conditionals (`if`, `else if`, and `else`) to change the - picture of the image (ID: `dice_image`) to display the correct side of the - die depending on the random number generated. You will need to use <img src=\"https://images.code.org/89f2c13ef4ead590475c863a087597f8-image-1446535826599.30.16.png\" - style=\"width:150px\"> with the URLs below to set the images for the die.\r\n\t* - <img src=\"https://code.org/images/dice/1.png\" style=\"width: 50px\"> Dice - 1 Image URL - https://code.org/images/dice/1.png\r\n * <img src=\"https://code.org/images/dice/2.png\" - style=\"width: 50px\"> Dice 2 Image URL - https://code.org/images/dice/2.png\r\n * - <img src=\"https://code.org/images/dice/3.png\" style=\"width: 50px\"> Dice - 3 Image URL - https://code.org/images/dice/3.png\r\n * <img src=\"https://code.org/images/dice/4.png\" - style=\"width: 50px\"> Dice 4 Image URL - https://code.org/images/dice/4.png\r\n * - <img src=\"https://code.org/images/dice/5.png\" style=\"width: 50px\"> Dice - 5 Image URL - https://code.org/images/dice/5.png\r\n * <img src=\"https://code.org/images/dice/6.png\" - style=\"width: 50px\"> Dice 6 Image URL - https://code.org/images/dice/6.png\r\n\r\n<img - src=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" - target=\"_blank\">Open diagram in a new tab</a>\r\n" - CSPU5_U3 - Dice - Nested_markdown_instruction: "# Nested *if* Statements\r\n\r\n<img - src=\"https://images.code.org/1774efb17571d3370662e34b705dde47-image-1446485939643.37.11 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Let's change the - scoring of the game to match the difficulty level.** \r\n\r\nNew scoring rules:\r\n* - _Easy: +10 points right answer / -1 point for wrong answer_\r\n* _Hard: +1 - point right answer / -1 point for wrong answer_\r\n\r\nHow do we check _both_ - the difficulty level and if the user's guess was correct? **We can actually - put `if` statements inside of other `if` statements!** So we first want to - check what the difficulty level is and then check if the user was right or - wrong to determine the score.\r\n\r\n** Note: ** The flowchart below outlines - the logic you are trying to implement.\r\n\r\n# Do This:\r\n\r\n* Move a copy - of the score `if` statement inside of the difficulty levels. Be careful with - indenting. All of the `if` statements for score need to be inside of the difficulty - `if` statement (i.e. indented 1 level more than the difficulty `if` statement)\r\n\r\n<img - src=\"https://images.code.org/2125a027997aeca75d18b8423058063d-image-1446485524945.gif\" - style=\"width: 350px\">\r\n\r\n\r\n* Edit the `if` statements to give the - correct scores\r\n\t* Easy level (+10 right, -1 wrong)\r\n * Hard level - (+1 right, -1 wrong)\r\n\r\n<img src=\"https://images.code.org/3b95a9f5cca60fc0ffbf7c2fb174d737-image-1446175290414.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/3b95a9f5cca60fc0ffbf7c2fb174d737-image-1446175290414.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - High Low - Debug_markdown_instruction: "# Debug Conditionals\r\n\r\n\"Help! - I was trying to give the player a hint when their guess was within 2 of the - secret number but the code I wrote isn't working. **Can you fix it?**\"\r\n\r\nThis - picture shows what the message should be based on the difference between the - secret number and the player's guess:\r\n\r\n![](https://images.code.org/8b6e60db87e3c704ae5209c8c608f5d5-image-1481691055804.png)\r\n\r\n* - Run the code to identify when the program is not working correctly (try guessing - numbers 1-6)\r\n* Fix the problem with the order of the conditionals.\r\n\r\n**Hint:** - \r\n* The major problem here is that **conditional statements run in order - from top to bottom**. \r\n* Remember you have to check the smallest/most narrow - case first, and work up from there.\r\n* The conditions might be slightly - non-intuitive at first glance.\r\n* If you want to re-arrange the conditions - it might be easier if you **switch to text mode**\r\n\r\n<details><summary>Check - out the flow chart for the logic I wanted. [Click to Expand]</summary>\r\n\r\n<a - href=\"https://images.code.org/76681a7d86bd4097417b25b682eee5a8-image-1458309676819.png\" - target=\"_blank\">\r\n<img src=\"https://images.code.org/76681a7d86bd4097417b25b682eee5a8-image-1458309676819.png\" - style=\"width: 350px;\">\r\nClick image to open larger in a new tab</a>\r\n</details>\r\n\r\n" - CSPU5_U3 - High Low - Dropdown_markdown_instruction: "# Dropdown\r\n\r\nOn - the last level we used `promptNum` to get the user's guess. However, we had - no way to limit them to the numbers we wanted. They could have typed 11 even - though we told them not to. A better way to get input with a limited set of - options is the dropdown. The <img src=\"https://images.code.org/3b21b4288a2a155d1e9a3c2cf3a5b09b-image-1446229368079.28.23 - PM.png\" style=\"width: 75px\"> is in your Design Mode Toolbox. You can control - the list of options users can choose and then use `getText` to get the chosen - number.\r\n\r\nWe are going to need an event handler in order to do this. - The event handler will detect when the user has changed the value of the dropdown. - \r\n\r\n# Do This:\r\n\r\n* **Add a dropdown** for their guess instead of - `promptNum`. Make sure to give it a good ID.\r\n\r\n<img src=\"https://images.code.org/fea164f6e53d1ce0c50981565e066d4c-image-1446229598357.gif\" - style=\"width: 350px\">\r\n\r\n* Under properties **find the Options** and - change it to the **numbers 1 to 10**\r\n\r\n<img src=\"https://images.code.org/0cfecbcdcfb95fc30876155ec6a3a021-image-1446229593687.gif\" - style=\"width: 250px\">\r\n\r\n* Add an event handler to detect the `change` - event on your dropdown.<br><br>\r\n<img src=\"https://images.code.org/48cffda5b7ff3a446116a39b4dbcbe8c-image-1446232308751.gif\" - style=\"width: 150px; float: right\">\r\n* Move your `if` statement inside - the event handler so it will check each time the dropdown is changed.<br><br>\r\n* - When the dropdown is changed **use `getText` to find out the user's guess**. - Save the guess using a variable. **Don't forget about scope!**<br><br>\r\n* - Test your app -- it should work like the demo." - CSPU5_U3 - High Low - Else if_markdown_instruction: "# Guess the Secret Number - with *else-if*\r\n\r\nIn this guess-the-number game, the starting code tells - the user whether they were right or wrong. Let's help the user out even - more by telling them if they guessed correctly or if their guess was too high - or too low. \r\n\r\nThere are **only 3 possible cases:**\r\n\r\n* They were - right.\r\n* Their guess was higher than the number.\r\n* Their guess was lower - than the number.\r\n\r\nUse a conditional with and `if`, `else-if`, and a - final `else` to implement this.\r\n\r\n**Remember:** You can create an `else-if` - statement by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. The first - <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> will add an `else`, the second will add an - `else-if`.\r\n\r\n\r\n# Do This:\r\n\r\n* **Add an `else-if` statement to - accommodate the 3 conditions.**\r\n\r\n* **Update the conditions** using `<`, - `>`, and `==` to tell the user if their guess was correct, high, or low.\r\n\r\n* - **Test out the program** to make sure your updates worked.\r\n\r\n<details><summary>Visual - Explanation [Click to expand]</summary>\r\n<li>Sometimes it's helpful to - see how the program should flow with a flow chart. The flow chart below depicts - what should happen </li>\r\n\r\n<img src=\"https://images.code.org/f7e483414dfe1d4585841e653e44d8b0-image-1446169181724.png\" - style=\"width: 500px\">\r\n</details>" - CSPU5_U3 - High Low - Else_markdown_instruction: "# *else*\r\n\r\n<img src=\"https://images.code.org/b7942d778a54465ad6f9f19fbab8d1ef-image-1446237289306.34.23 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\nLet's add an `else` - statement so we can tell the user when they are right and when they are wrong.\r\n\r\n**Note:** You - can create an `else` statement by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. There - is also an `if-else` block in the toolbox. \r\n\r\n\r\n# Do This:\r\n\r\n* - **Add an `else` statement**\r\n\r\n* **Move your `setText` inside the `else` - statement.** So it should say \"Nope that's not it. Guess again.\" when the - user does not guess the secret number." - CSPU5_U3 - High Low - If_markdown_instruction: "# *if* Statement\r\n\r\n<img - src=\"https://images.code.org/040c8364e3795252194b816623e949e5-image-1446227663554.54.03 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nThe boolean expression - we tested on the last level allows us to make decisions. In order to make - these decisions we need to use something called a conditional. **Conditionals - check if a boolean expression is true and then will execute the code inside - of the `if` statement.** \r\n\r\n<img src=\"https://images.code.org/84123a7c317c63d8876b6b56086d717e-image-1446228290588.png\" - style=\"width: 150px; float: right\">\r\n\r\nOver the number couple levels - we are going to be creating a **Guess My Number game**. The starter code uses - `promptNum` to ask the user for a number from 1 to 10. The `if` statement - checks if the user guess is equal to the secret number. Right now nothing - happens when they guess the right number. Can you fix that?\r\n\r\n# Do This:\r\n\r\n* - Read the code to identify the boolean expression.\r\n* Add a text label to - the screen. Have it start out with \"Guess my secret number!\"\r\n* **Set - the text label to say \"You got it right!\" from inside the `if` statement**. - This will tell them they get it right only when that condition is true!\r\n* - **Test your code out** to make sure it works.\r\n\r\n<img src=\"https://images.code.org/2f3487ec7a8d7cec1605f3da830c83f8-image-1446227512726.gif\" - style=\"width: 350px\">" - CSPU5_U3 - Keys - Add Image URLs_markdown_instruction: "# Adding Image URLs\r\n\r\nWe're - ready to start improving the \"My Favorite Things\" app. \r\n\r\nWe'll do - this in two steps:\r\n1. We will change it from scrolling text to scrolling - images.\r\n2. We will add key events to scroll with the keyboard.\r\n\r\n**Step - 1:**\r\n* The default values in your array should be image URLs.\r\n* The - large **text area** needs to be changed to an **image**.\r\n* Instead of **setting - the text**, you'll now be using `setImageURL` to set the URL of the image.\r\n\r\n# - Do This:\r\n**NOTE: We've re-loaded the code from the \"My Favorite Things\" - App you wrote in the previous lesson.** (If you want to refer to code you - just wrote, you can go back to look at it.)\r\n\r\n* **Set the default values** - in your array to be image URLs. (You might need to take a minute to go collect - a few if you didn't in preparation for this lesson.)\r\n* In Design Mode - **delete the text area** and replace it with an **image**. Make sure your - image has a descriptive and meaningful ID.\r\n* Inside your function that - updates the display **replace `setText` with `setImageURL`**. Make sure you - reference your new image element **by its correct ID**.<br>\r\n<img src=\"https://images.code.org/9f7f4aeeb9b1a84ae781043602166865-image-1447337890448.gif\" - style=\"width: 350px\">\r\n* ** Test your app** to confirm that it's now - showing the images in your array." - CSPU5_U3 - Keys - Buttons and Keys_markdown_instruction: "# Buttons and Keys\r\n\r\nWe - now know how to respond to key events, but often we want the user to be able - to **do the same thing with the app in multiple ways**. For example, we might - want the app to exhibit the same behavior if the user clicks a button on the - screen or a key on the keyboard. (This is how so-called \"keyboard shortcuts\" - work.)\r\n\r\nIn the program you're about to see, we've provided event handlers - for some buttons on the screen. You're going to **create identical functionality** - for the key events.\r\n\r\n# Do This:\r\n\r\n* **Add conditional statements - inside the `keydown` event handler** to check for when the **up and down arrows** - are pressed.\r\n<img src=\"https://images.code.org/0e0fe80c821c6a3171ec3a272c42325c-image-1447253300861.gif\" - style=\"width: 350px\">\r\n\r\n* ** Copy the code for the `upImage` button**, - and paste into the up arrow `if` statement.\r\n![](https://images.code.org/ad56005d74736c7c9aa8bedf68529c0e-image-1448300088636.gif)\r\n\r\n* - ** Copy the code for the down button**, and paste it into the down arrow `if` - statement.\r\n\r\n* Confirm your app **responds to key events** by running - it. For example, clicking the image of the up arrow in the app should do - the same thing as hitting the up arrow on the keyboard.\r\n\r\n" - CSPU5_U3 - Keys - Demo App_markdown_instruction: "# Making our App an Image - Scroller\r\n\r\nOver the course of this lesson we are going to be working - towards improving our \"My Favorite Things\" app to add some new features. - Our improved app will be able to:\r\n\r\n* Respond to **key events**.\r\n* - **Display images** by storing their URLs.\r\n\r\nWe'll call this new kind - of app an **image scroller** but feel free to call it anything you like.\r\n\r\n# - Do This:\r\n\r\n* Close these instructions.\r\n* **Experiment with the improved - \"My Favorite Things\" app** to understand the new features we'll be adding. \r\n* - Make sure you try clicking the **left and right arrow keys!**\r\n\r\nOnce - you think you've experimented enough, continue on to the next level." - CSPU5_U3 - Keys - Final Image Scroller_markdown_instruction: "# Final Image - Scroller\r\n\r\nYou're now ready to add key event functionality to your app! - As you are doing so, keep an eye out for places where you need to **refactor** - old code in order to prevent redundancy. **Create functions** that carry out - repeated tasks and make other changes to keep your code **readable and consistent**. - \r\n\r\nIf you want a reminder of how key events work, you can always go back - to the example from earlier in this lesson. You will need to add `if` statements - to check for which keys were pressed, just as before.\r\n\r\n# Do This:\r\n\r\n* - Add the ability to respond to **key events** to your app.\r\n\r\n* **Refactor - your old code** to remove redundant portions.\r\n\r\n* Keeping adding to your - program. What other features do you want to include?" - CSPU5_U3 - Keys - Functions_markdown_instruction: "# Refactoring Code\r\n\r\nOn - the last level, we copied a few lines of code to a different part of our program. - **Hopefully warning bells went off in your head!** Any time you are copying - portions of code from one area of your program to another, it's a good indication - that you should write a function to capture that behavior in one place. \r\n\r\nWhen - you add new features to your code **you will often create redundancies**. - To keep your code readable and consistent, you may need to rewrite old pieces - of code. This process of restructuring existing code without changing its - external behavior is called **refactoring**. It is an important process when - developing software that improves code readability and reduces complexity. - As a result, code is much easier to maintain.\r\n\r\n# Do This:\r\n\r\n* **Create - a function called `doUpArrow`**. \r\n* Move the code from the `upArrow` event - handler to the function.\r\n* **Call `doUpArrow`** from both your button and - key event handlers. (The animation below shows the steps above.)\r\n* Repeat - the same process for the down arrow / button by creating a function called - `doDownArrow`.\r\n* Once you have **removed these redundancies from your code** - test your app to make sure it still works!\r\n\r\n![](https://images.code.org/f47a98a8c9ca169848c682b3e61293cd-image-1448300634062.gif)" - CSPU5_U3 - Keys - Key Up and Down_markdown_instruction: "# Using *keyup* and - *keydown*\r\n\r\nOn the last level, we played with the `keypress` event. Let's - take a look at some of the other key events. \r\n\r\nYou are going to get - the chance to play with `keyup` and `keydown` in this level. **Pay attention - to the different values of `event.key` for `keydown` and `keypress`. **\r\n\r\n# - Do This:\r\n\r\n* Switch to the event type to `keydown` or `keyup`. \r\n\r\n<img - src=\"https://images.code.org/fa91b1a9e3240eb65ff75b381e76ce69-image-1447213909054.gif\" - style=\"width: 350px\">\r\n\r\n* Try out the event.\r\n\t* Press and hold - a key\r\n * Try the arrow keys\r\n * Shift\r\n * Option\r\n * - Alt\r\n * Others" - CSPU5_U3 - Keys - Multiple Keys_markdown_instruction: "# Multiple Keys\r\n\r\nIf - you want your program to respond differently to a couple different keys, you - will need to use chained conditional statements (`if` and `else-if`). \r\n\r\nLet's - set up the program to **play a different sound for the down key.**\r\n\r\n# - Do This:\r\n**We've added another sound** to the app, but it's just sitting - at the top of the code.\r\n\r\n* Add an `else-if` statement to check if the - **down arrow** was pressed.\r\n\r\n<img src=\"https://images.code.org/996914e436cca050f62d5b851899eda9-image-1447215275417.gif\" - style=\"width: 350px\">\r\n\r\n* Move the `playSound` command from the top - of the program inside the `else-if`. (Notice that in the example, we switch - to block mode to move this line because it's easier to move blocks around - that way. You can just copy/paste the text too.)\r\n\r\n<img src=\"https://images.code.org/42b2df84b4cd98267068592218ac96ed-image-1447215267891.gif\" - style=\"width: 350px\">\r\n\r\n* **Test the program:** it should play one - sound when the **up** arrow is pressed and a different sound if the **down** - arrow is pressed. It shouldn't make any sound if any other keys are pressed. - " - CSPU5_U3 - Loops - Complex Condition_markdown_instruction: "# Expressing Stopping - Conditions: \"Until Loops\"\r\nIt is often more natural to think about looping - in terms of when the loop should end rather than when it should continue. - For example you might say \"keep going down the road until you see the gas - station\" or \"keep calling until you get through to someone.\" You might - think of these as \"until loops\" rather than \"while loops,\" since we want - the loop to continue **until a condition is true rather than while a condition - is true**.\r\n\r\n**There is no \"until loop\" in JavaScript** but it is actually - quite easy to translate \"until loops\" into `while` loops so that you can - use them in programs. An \"until loop\" runs *until* a condition is true, - as opposed to a while loop which runs *as long as* a condition is true. That - means an until loop is the logical inverse of a while loop - it runs as long - as the **condition is false**. The table below shows how you can use the **NOT** - ( `!` ) operator to translate stopping conditions into `while` loop conditions.\r\n\r\n| - Expressed as Stopping | Expressed as Until Loop | Expressed as While Loop - |\r\n| --- | --- | --- |\r\n| **Stop** once you reach the gas station | Keep - going **until** you reach the gas station | Keep going **while** you have - **NOT** reached the gas station|\r\n| **Stop** calling when you get through - to someone | Keep calling **until** you get through to someone | Keep calling - **while** you have **NOT** gotten through to someone|\r\n| **Stop** when `x - == y` | `until(x == y){...` | `while(!(x == y)){...`|\r\n<br>\r\nNote how - we can use the **NOT** operation to find the **logical inverse** (or opposite) - of the condition from our \"until loop\" to create a `while` loop. Let's - do a little practice of that now.\r\n\r\n# Do This:\r\n\r\n**Starter code** - is provided that repeatedly rolls two dice and writes their values to the - screen. **Careful: ** before you edit this code it creates an infinite loop.\r\n\r\n* - Use the technique above to **modify this code** so that the loop **stops when - both dice are 5 or greater**.\r\n* **Try it out and experiment.** You should - exit the loop the first time both dice have values greater than or equal to - 5 displayed.\r\n\r\n![](https://images.code.org/076fb8e95fabc55e8ee45e31e51ca2d5-image-1448925611863.19.59 - PM.png)" - CSPU5_U3 - Loops - 1_markdown_instruction: "# *while* Loops\r\n\r\n<img src=\"https://images.code.org/bfb82e4caecc3ad1338177e05064ef72-image-1446669721477.41.28 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\n **The `while` loop - uses a boolean condition to repeatedly run a block of code.** It checks the - expression, and if it is true it runs the block of code contained within it. - This process of checking the condition and running the block of code is repeated - as long as the boolean condition remains true. **Once the boolean expression - becomes false it will stop.**\r\n\r\nWe are going to start exploring a `while` - loop by **modifying the condition on which a `while` loop runs and using `console.log` - to ensure it is correctly evaluating its condition**.\r\n\r\n# Do This:\r\n\r\n* - **Starter code** is provided which creates a `while` loop that repeatedly - moves the turtle around the screen.\r\n* **Add a `console.log` command** inside - the loop after `num` is assigned a random number. This way you can see the - value the loop is based on.\r\n![](https://images.code.org/1da444fd5c6533ad1cc0de3c593bf92d-image-1446825127341.gif)\r\n* - **Run the program a couple times** and look at the results.\r\n* **Change - the condition for the `while` loop** to check if the variable **`num` is less - than 90**. Your output might look like the example below.\r\n\r\n![](https://images.code.org/97df98c23c0c03a7ce480108a92627a5-image-1448296906193.41.17 - AM.png)" - CSPU5_U3 - Loops - 10_markdown_instruction: "# Writing a Loop From English\r\n\r\nAlright - it’s your turn. Can you translate the English into code? This problem also - involves an \"until loop\" problem.\r\n# Do This:\r\n\r\nTake this statement - in English and translate it into code: \r\n\r\n**“Write a program that simulates - the rolling of two dice. Keep rolling the dice UNTIL the sum of the dice is - either a 7 OR an 11.\"** Your program should display the results of each - roll. \r\n\r\n**NOTE**: this one is a *little* tricky. Hint: In English - we sometimes say \"or\" when in cold hard logic we mean \"and\".\r\n\r\nHere - is a sample output:\r\n\r\n![](https://images.code.org/706279a3c167d8c76068a7ded5146eed-image-1456434365077.png)" - CSPU5_U3 - Loops - 11_markdown_instruction: "# Debugging: Complex Logic\r\n\r\nIn - this challenge you need to find and fix a bug in a program that simulates - rolling one die. \r\n\r\nThe given code accidentally loops infinitely, so - something must be wrong with the condition. Can you figure out how to fix - it?\r\n\r\n# Do This:\r\n\r\n* **Fix the condition** so that it keeps rolling - the die as long as the value is **not a 2 or a 3.**\r\n\r\n* **Hint:** Think - about other ways you can express this idea in English. \r\n\r\n" - CSPU5_U3 - Loops - 12_markdown_instruction: "# Repeat Specific Number of Times\r\n\r\nInstead - of writing code that makes the loop run a random number of times, we can control - the `while` loop by changing the variable used in the boolean expression differently. - Let’s try just printing a string 5 times.\r\n\r\n# Do This:\r\n\r\n* **Starter - Code:** Right now the code prints a string \"Hi\" twice.\r\n* **Change the - code** so that it prints the string \"Hi\" 5 times.\r\n* **Notice** how `count` - is being re-assigned each time through the loop." - CSPU5_U3 - Loops - 14_markdown_instruction: "# Defensive Loop Conditions\r\n\r\nTake - a look at the starting code. Instead of counting by 3's we had decided to - count by 4's. \r\n\r\nBut this will run us into a problem. Can you see why?\r\n\r\nWe - wanted to stop counting at 30, but when you count by 4 you will actually never - hit 30. It would go... 24, 28, 32, 36... What we really want to do is stop - when the number is **greater than 30**. This is an important defensive programming - strategy. Make the condition catch more cases than you think you need so that - if for some reason something does not go exactly as you planned it will hit - the stop condition and not go infinitely.\r\n\r\n\r\n# Do This:\r\n\r\n* **Change - the loop condition** to prevent the infinite loop and stop counting once the - count is past 30." - CSPU5_U3 - Loops - 15_markdown_instruction: "# Using an *if* Statement In a - Loop\r\n\r\nA common thing to do is to use variables to keep track of some - sort of count. When used in a loop we count things very quickly.\r\n\r\n**Scenario:**\r\nIf - you roll a pair of dice, rolling a 12 (two sixes) is rare. How rare? If - you were to roll a pair of dice 1,000 times, on average, how many times would - it come up as 12?\r\n\r\nTo figure this out, we could write code to run an - experiment. It would go something like this:\r\n* Make a loop that simulates - rolling a pair of dice 1,000 times.\r\n* Inside the loop, add an `if` statement: - **if die1 + die2 == 12, then add 1 to a counter**.\r\n* After the loop, display - the result.\r\n\r\n# Do This:\r\nThe **starter code** sets up the whole experiment - for you, except it doesn't count the number of 12's rolled - that's your - job.\r\n\r\n* **Run the code** to see what the experiment does.\r\n\r\n* ** - Add an `if` statement inside the loop** to check if the sum of the dice is - equal to 12, and add 1 to `twelveCount`.\r\n\r\n* Once the loop has completed, - **display the number of times the sum was 12.**\r\n\r\n**Note:** If you remove - (or comment out) the `console.log` statement that displays every roll of the - dice, the experiment will speed up A LOT! You could do tens of thousands - of dice rolls in a matter of seconds." - CSPU5_U3 - Loops - 2_markdown_instruction: "# Infinite *while* Loops\r\n\r\n`while` - loops run until their condition becomes false, which raises an interesting - question. **What happens if the condition never becomes false**? In these - cases the program enters what is called an **infinite loop** over the commands - in the `while` loop, and it never reaches the rest of your program. **We normally - avoid infinite loops in our programs**, but let's try it out to see what - happens.\r\n\r\n# Do This:\r\n\r\n* **Starter code** is provided which creates - a `while` loop to move the turtle around the screen.\r\n* **Change the `while` - loop condition to something that will always be true.** The easiest way to - do this is to change 50 to be a number that randomNumber will never generate - such as 200. \r\n* **Run the program.** Notice that it will never stop running. - You may even get an error from your browser.\r\n* **Hit reset to stop it.** - Your computer may actually stop running as you expect if you let an infinite - loop run for too long. **It's possible you may even need to close the browser - window and reload the page. If you hit reset early enough you can usually - avoid this problem.**\r\n* **Find a condition using `<` or `>` that will also - cause an infinite loop.**" - CSPU5_U3 - Loops - 3_markdown_instruction: "# Changing *if* to *while*\r\n\r\n** - How many times would we have to roll a die before it comes up as a 6?** In - the program you're about to see, we **simulate rolling a die (generating - a random number between 1 and 6)** in order to answer this question.\r\n\r\n# - Do This:\r\n\r\n** Starter code** is provided which re-rolls a die once if - the first roll is not a 6. \r\n* **Change the `if` statement to a `while` - loop** so the program will keep rolling the die **while the current roll is - not a 6.** \r\n\t* **Hint:** The easiest way to do this is to change the text - from `if` to `while`.\r\n<img src=\"https://images.code.org/50b97e8858bf5ebf82eb1d358f875854-image-1446739013775.gif\" - style=\"width: 350px; border: solid 1px black \">\r\n* Run the program to - test out the change.\r\n" - CSPU5_U3 - Loops - 4_markdown_instruction: "# Debug Commands\r\n\r\n<img src=\"https://images.code.org/c6322845b96b70c9083a6c62736048e5-image-1446739268136.00.34 - AM.png\" style=\"width: 200px; float: right\">\r\n\r\nCheck out the new **Debug - Commands toolbox** that has appeared next to the Debug Console! These powerful - tools allow us to **pause a program at a certain point** while it’s running - and then execute lines one at a time. \r\n\r\nUsing these tools we can investigate - the state of variables and other elements of the program at any point, mid-execution. - This makes it much easier to see what’s happening while the programming is - actually running!\r\n\r\nIn order to use the debug commands, you first have - to indicate which line you want the program to pause at. This is called adding - a “breakpoint” (see animation below).\r\n\r\n# Do This:\r\n\r\n* **Add a breakpoint** - on the line where the `while` loop starts. (**Just click the line number.**)\r\n* - **Use the <img src=\"https://images.code.org/bd8f1a67242e64e6b3740eac79f881e8-image-1446748421345.33.09 - PM.png\" style=\"width: 75px\"> button** to execute each line one at a time.\r\n* - Each time you hit the breakpoint, **use the console to check value of `num`**. - \r\n* **NOTE:** If you hit <img src=\"https://images.code.org/6c4712da58e32dae2d04c52d9964fca9-image-1446741498097.37.48 - AM.png\" style=\"width: 75px\"> it will \"continue\" executing the program - normally, unless of course it hits another breakpoint. \r\n\r\n![](https://images.code.org/68f8e185914c8cc127aa9573ae37f687-image-1446835628580.gif)" - CSPU5_U3 - Loops - 5_markdown_instruction: "# Update Condition\r\n\r\nIn order - for a `while` loop to stop at some point, the code inside the loop **must - change something about the state of the program** - usually the value of a - variable - so that eventually the boolean expression becomes false. Otherwise - you'd have an infinite loop!\r\n\r\n# Do This:\r\n**Starter Code:** The starter - code runs an infinite loop. \r\n* **Run the code** to see the problem in action. - Remember to hit the reset button to stop the infinite loop.\r\n* **Add code - inside the `while` loop** which will **update the variable `num` so that the - condition will eventually become false.**\r\n* **TIP:** you can use the debugging - tools if you think they would be helpful." - CSPU5_U3 - Loops - 6_markdown_instruction: "# Starting Condition\r\n\r\nWe - have seen that loops can run infinitely. On the last level we saw that there - is also the **chance that the loop never runs at all!** If the condition of - the `while` loop starts out false then the loop will never run.\r\n\r\nWe - fixed this problem in the last exercise by displaying the value of `num` in - two places: before the loop and in the loop. Duplicating code is generally - a bad strategy, so the question is: can we be a little clever and get into - the loop without missing any values? The answer is yes.\r\n\r\n**The solution** - is to initialize the values used in our boolean expression so that we are - **certain** it will evaluate to true the first time the loop checks it. **For - example, if your loop condition is: `while (num != 6)` you could initialize - `num` to anything other than 6 and you'd know that you get into the loop**. \r\n\r\nIf - you use this technique though...\r\n1. You need to make sure you set the value - of `num` right away inside the loop.\r\n2. You probably want to use a nonsense - value like -1, so that if you ever see that displayed it will be obvious something - is wrong and be easier to debug.\r\n\r\n# Do This:\r\n\r\n* **Starter code** - is provided which creates a `while` loop that never runs.\r\n* **Run the program** - once to see that the loop is never entered.\r\n* **Fix** the problem by changing - the initial value of `num` to a nonsense value such as -1." - CSPU5_U3 - Loops - 7_markdown_instruction: "# Printing After Setting Value\r\n\r\nWe - started trying to remove the duplicate code we had on the last level by initializing - a variable to a nonsense, or \"dummy,\" value that would still ensure we entered - the loop. \r\n\r\nIn the code provided, not every number is going to display. - However, this time we want to try **not to add code** to fix the problem, - since duplicate code is inefficient. \r\n\r\n# Do This:\r\n\r\n* **Starter - Code:** The code is completely functional except that it does not print one - of the numbers it's supposed to. In addition we don't want it to print the - dummy variable of -1.** Hint: ** What should be the last number that prints - every time this program runs?\r\n\r\n* Run the program to see the behavior.\r\n\r\n* - Fix the code so that it prints all the values of `num`. **Hint:** You don't - need to add any code. Just switch the order of the code you have now!" - CSPU5_U3 - Loops - 8_markdown_instruction: "# Printing Before the Loop Starts\r\n\r\nSometimes - our code will be doing the right thing but we won't be able to tell because - of the way we are printing values. We need to make sure we print all the values - we are interested in. \r\n\r\nThis program *should* write all the values of - `num` to the screen as it runs; however it misses one - the first one generated. \r\n\r\n# - Do This:\r\n\r\n* **Run the program** a few times and notice that sometimes - it just prints \"Done.\" and nothing else, even though a number was generated. - The first value of `num` never gets displayed.\r\n* **Add a `write` statement** - before the loop to print the first number. \r\n* **Hint:** Look at the two - times `num` is assigned a value. Which one isn't being displayed? " - CSPU5_U3 - Loops - 9_markdown_instruction: "# Boolean Operators in *while* - Loops\r\n\r\nWe can create compound boolean expressions to control our `while` - loops just like our `if` statements. Let's try using boolean operators in - our `while` loop condition.\r\n\r\n# Do This:\r\n\r\n* Right now this code - rolls two dice as long as either one of them is less than 3. **Modify the - condition so that it keeps rolling as long as *both* are less than 3.**\r\n\r\n* - **HINT:** To say that both dice are less than 3 the boolean expression must - say: if die1 less-than 3 AND die2 less-than 3...\r\n" - CSPU5_U3 - Loops - minus = operator_markdown_instruction: "# Try Out the *-=* - Operator\r\n\r\nThe `-=` operator works almost identically to `+=`, but instead - it subtracts the value provided from the variable. Let's use this operator - to **create a loop that counts down from 30 by 3's**.\r\n\r\n# Do This:\r\n\r\n* - **Change the code to use `-=`** to count from *down* from 30 to 0 by 3's." - CSPU5_U3 - Loops - Minus Minus_markdown_instruction: "# *++* Has a Friend! Introducing - *--*\r\n\r\nAs you may have guessed, just as we can write `count = count + - 1` as `count++` we can also write `count = count - 1` as `count--`.\r\n\r\nLet’s - write a program that counts **down** from 10 down to 1. \r\n\r\n# Do This:\r\n\r\n* - **Starter Code: ** The current program counts **up** from 1 to 10. \r\n\r\n* - **Change the code to use `count--` to count *down* from 10 to 1.** You will - need to:\r\n\t* Change the looping condition.\r\n * Change `count++` to - `count--`.\r\n * Change the initial value assigned to `count`.\r\n" - CSPU5_U3 - Loops - plus and minus = operator_markdown_instruction: "# Introducing - *+=* and *-=* Operators\r\n\r\nSometimes you want to add or subtract something - *other than 1* from the current value of a variable. If you wanted to add - or subtract 3 for example, such as: `count = count + 3` or `count = count - - 3`, `++` and `--` wouldn’t help. \r\n\r\nIt turns out this is pretty common - as well so there is actually a shorthand version of `count = count + 3`. \r\n\r\n**Introducing - `+=` and `-=`**!\r\n\r\nWe can use the `+=` or `-=` operator to add or subtract - any value we want to the current value of a variable. \r\n\r\nSo, the shorthand - versions of `count = count + 3` and `count = count - 3` would be:\r\n * `count - += 3` \r\n * `count -= 3`\r\n\r\n**Notice** that these 3 statements: `count - = count + 1`, `count++`, and `count += 1` all do **exactly** the same thing!\r\n\r\nWhich - one you use as a programmer is your choice, and in the future you can use - either version, but try out the new operator here.\r\n\r\n# Do This:\r\n\r\n* - **Change the code to use `count += 3`** instead of `count = count + 3` so - the program will still count up by 3. (You'll need to be in text mode to - do this.) \r\n\r\n(You'll get to try out `-=` on the next level.)" - CSPU5_U3 - Loops - Plus Plus_markdown_instruction: "# *++* Operator\r\n\r\nAs - programmers we are always looking for more concise ways to write code. It - is so common to add 1 to a variable such as in `count = count + 1` that there - is actually a shorthand for it. \r\n\r\n# Introducing the *++* Operator\r\n\r\nYou - can write `count++` to add 1 to `count`. `count++` does the exact same thing - as `count = count + 1`! \r\n\r\nIn fact the computer turns `count++` into - `count = count + 1` behind the scenes - it really is just a convenient shorthand.\r\n\r\n**Note:** - This is more of a programmer style choice so if you want to write your code - using `count = count + 1` instead there is nothing wrong with that!\r\n\r\n# - Do This:\r\n\r\n* Change the code to use `count++` instead of `count = count - + 1`. (You'll need to be in text mode to do this.)\r\n\r\n** Misconception - Alert:** You don't need to write `count = count++` - the computer is doing - the assignment for you." - CSPU5_U3 - Loops - Typing in Console_markdown_instruction: "# Debug Console: - Variable Values\r\n\r\nUp until now, if we wanted to find out the value of - a variable at some point in the execution of a program, we've used `console.log`. - That is still going to be a great strategy but **the Debug Console can do - even more for us!**\r\n\r\n**Check this out:** We can check the value of a - variable in real time (as our program executes) by typing its name into the - prompt within the Debug Console and hitting \"enter\". **This is another powerful - tool for debugging your programs.** \r\n\r\n![](https://images.code.org/7e7ff7aa041814cfcd69a1c9a028c439-image-1446826780896.gif)\r\n\r\n# - Do This:\r\n\r\n* **Run the program.**\r\n\r\n* Use the Debug Console to **check - the ending value of `num`**. You can do this by typing num in the Debug Console - and hitting enter!" - CSPU5_U3 - Loops And Arrays - Add 5_markdown_instruction: "# Updating Values - in an Array with a *for* Loop\r\n\r\nThe `for` loop you set up on the last - level is actually so common that we will rarely deviate from this `for` loop - setup.\r\n\r\n<img src=\"https://images.code.org/fba4d95636869c1c1c1a539fe81ded72-image-1447346793054.45.50 - AM.png\">\r\n\r\nThis `for` loop basically means **\"for every possible index - in `myArray`...\"** and we use it as a basic building block for processing - arrays. Common array-processing techniques like searching for a value, updating - all values, or calculating simple stats on an array will all be completed - using a `for` loop written with the syntax above.\r\n\r\nIn fact, we're going - to see that happen right now as we **use a `for` loop to add 5 to every value - in an array**.\r\n\r\n# Do This:\r\n**Starter code** has been provided that - creates an array of random values. You are also given a `for` loop that loops - over every index in the array.\r\n\r\n* Add code inside the loop to **add - 5 to the value at every location in the array**. \r\n\t* ** Remember: ** `myArray[i]` - refers to the element in the array at the current value of `i`.\r\n* Confirm - your code works by **displaying the values in your array before and after - your loop**. Below is a sample result. Notice how, after the array has been - processed, all of the values are 5 greater than the originals.\r\n\r\n![](https://images.code.org/aaf36ac93098ef7f43fdda04243d17ad-image-1447792214666.29.41 - PM.png)" - CSPU5_U3 - Loops And Arrays - Counting Times_markdown_instruction: "# Counting - Occurrences of a Value\r\n\r\nInstead of displaying a true/false value for - *every* item in the list, let's compute one value and display it. A common - thing to want to do is **count** the number of times a value occurs. We can - do this with a very small change to the code we've already got. \r\n\r\n# - Do This:\r\n**Starter Code** is similar to past levels. We've also created - a variable called `fiveCount`.\r\n\r\n* ** Add an `if` statement** inside - the `for` loop to **increment `fiveCount` if the value is equal to 5. **\r\n - (Note: this will be exactly the same as the `if` statement you wrote in the - previous level. Just giving you more practice).\r\n\r\n* **Run and re-run - your code** to make sure that it's accurately counting the number of 5's - in the array. Since the array is getting a random set of values every time - you run the program, you might have to run it a bunch of times to thoroughly - test it. Make sure you get it to run at least once when no 5's appear in - the array.\r\n\r\n* Finally, if you'd like to, **change the first loop in - the program to add 100 items to the array** instead of 10. Your code should - still work to count the number of 5's, no matter how big the original array - is!" - CSPU5_U3 - Loops And Arrays - Divid by 2_markdown_instruction: "# Divide by - 2\r\n\r\nIn the last exercise, you updated every element in an array using - a `for` loop. Let's get a little bit more practice with the pattern you used - in the last exercise, this time creating the loop yourself.\r\n\r\n# Do This:\r\n**Starter - code** is provided which creates an array of random values.\r\n\r\n* Create - a `for` loop that **iterates over every index in the array**.\r\n\r\n* Within - your loop, add code that **divides each value in the array by 2**.\r\n\r\n* - Use the provided `console.log` statements to **confirm your program runs as - expected**. Below is an example of the expected outcome.\r\n![](https://images.code.org/04b09b795c30313c67b2242f1773b2f6-image-1447795598583.26.21 - PM.png)" - CSPU5_U3 - Loops And Arrays - Find Min_markdown_instruction: "# Reusing a Function - Pattern: Find Minimum\r\n\r\n**Nice work! You've just written a function - that implements an algorithm to process an array!** If you feel comfortable - with the basic pattern you used to create this function, you can quickly create - functions for many other useful algorithms that work on arrays.\r\n\r\n**Basic - Function Pattern**\r\n\r\n* Create a **function that accepts an array** as - input.\r\n* **Create a \"flag\" variable** and set its default value before - looping through the array.\r\n* Loop through your array with a `for` loop - that **visits every index in the array**.\r\n* **Update your flag** as necessary - with every iteration of your loop.\r\n* **Display your flag** at the end of - the loop.\r\n\r\nLet's use this pattern to **write a function that finds - and displays the smallest value in an array**.\r\n\r\nInstead of using a true/false - flag to indicate whether we found a value, **we'll use a variable to keep - track of the smallest value we've seen in the array so far**.\r\n\r\n# Do - This:\r\n\r\n**Starter code** has been provided which outlines and calls `findMinVal` - with different inputs. Your job will be to finish writing the function.\r\n\r\n* - Before programming, try to **develop an algorithm that you could use to find - the minimum value in an array**. Use the pattern outlined above as a guide.\r\n* - **Write code** in the places indicated with comments to complete the function. \r\n\t* - You'll want to use the `minVal` variable to keep track of the smallest value - you've found so far.\r\n * You'll need to **write an `if` statement** - that checks whether the current value in the array is less than `minVal`. - If it is, then update the smallest value. \r\n* **Run the code** to ensure - it is working as you intend.\r\n\r\n<details><summary><strong>HINT: pseudocode</strong> - [click to expand]</summary>\r\n<p>\r\nHere is some pseduocode that you should - be able to implement.\r\n</p>\r\n<pre>\r\nminVal = first value in array \r\nfor - EACH value IN array\r\n if value < minVal\r\n minVal = value\r\n\r\ndisplay(minVal)\r\n</pre>\r\n</details>\r\n\r\n\r\n![](https://images.code.org/e6abdc34c653e4bb0885ffabcf897fc5-image-1447877822696.16.03 - PM.png)" - CSPU5_U3 - Loops And Arrays - General Search Param_markdown_instruction: "# - General Search\r\n\r\nIn order to make a general search function, we should - be able to **search for any value, not just 5**. We can do this by making - the value to search for a parameter as well.\r\n\r\n# Do This:\r\n\r\n* **Add - a second parameter** to your `search` function to represent the item to search - for. This example uses the name `searchValue`.\r\n\r\n* **Update the code - inside the function to check for `searchValue` instead of 5.** \r\n\r\n* **Call - your search function** to search for different values inside of each array.\r\n\r\n* - The `console.log` statement **is now inaccurate**. Change it to say \"Array - has searchValue: \" followed by the value in flag.\r\n\r\n(These steps are - shown in the code animation below.)\r\n\r\n![](https://images.code.org/b71a0bd1cf725d58ae76836a6422ebeb-image-1447695946760.gif)" - CSPU5_U3 - Loops And Arrays - Intro For Loop_markdown_instruction: "# *for* - Loop\r\n\r\nIt's very common to want to repeat a set of commands a particular - number of times. Recently, we have been using the `while` loop to do this - by creating a counting variable, setting the boolean expression, and incrementing - the value of the counter by 1 each time. We've also used the `for` loop before, - and we'll explain it more in-depth now. The `for` loop was created to wrap - all of those components related to counting loops into a single line of code.\r\n\r\n<img - src=\"https://images.code.org/b93a044fc07cb4bbabb95b43132a005b-image-1447342829632.png\" - style=\"width: 450px\">\r\n\r\n<img src=\"https://images.code.org/d0d8f34d0f4aabaf66084ceac282448e-image-1447343652405.png\" - style=\"width: 450px\">\r\n\r\nProgrammers would typically read a loop `for - (var i = 0; i < 10; i++)` out like this: <br>\r\n**\"for variable i starting - at 0, while i is less than 10, i plus plus (or increment i by 1)\"**\r\n\r\nNotice - that in reading a `for` loop we still use the word \"while\".\r\n\r\nYou may - notice that when you drag a `for` loop out from the toolbox that we've set - it up for you with `i` as the variable. \r\n\r\n<details> \r\n<summary>**Why - is `i` the variable?** [click to expand]</summary> \r\n\r\nUsing the single - character `i` as the variable in a `for` loop has become a convention in programming - for a variety of reasons. One reason is that `for` loops are often used when - processing arrays - **you can think of `i` as shorthand for index. ** But - there is no reason why you have to use `i` if you don't want to. It's just - a variable. \r\n</details>\r\n\r\n# Do This:\r\n\r\n* Drag out the `for` - loop.\r\n\r\n* Insert a `console.log` statement inside the `for` loop that - displays `i`.\r\n![](https://images.code.org/2a81206296dc693463d7b147f2f93dcb-image-1447446254447.gif)\r\n\r\n* - Try changing:\r\n\t* The condition to stop the loop (make it run longer).\r\n * - The amount you change `i` by each time (try changing `i++` to something like - `i += 5`).\r\n * The starting value of `i`.\r\n\r\n" - CSPU5_U3 - Loops And Arrays - Linear Search_markdown_instruction: "# Algorithms - and General-Purpose Functions\r\n\r\nOver the next several exercises we will - be **creating a general-purpose function to determine if a value is contained - within an array**. Over the course of these exercises, keep an eye out for - the general pattern we are using, because you'll get to use it again to create - functions of your own.\r\n\r\nTo begin, we'll start simple. We'll write - code that **checks whether an array contains a specific value**. At every - index, your program should display \"true\" if the value at that index is - a 5 and \"false\" otherwise.\r\n\r\n# Do This:\r\nThe **starter code** is - similar to past levels, but you'll notice that we use a loop to construct - `myArray` rather than appending items one line at a time. You are also given - the `for` loop you will use.\r\n\r\n* Add an `if` statement inside the `for` - loop to check if the value of the array at the current index is 5. \r\n * - If the value is equal to 5, write **true** to the console. Otherwise write - **false** to the console.\r\n* **Test your code** to make sure it is working - as you intend. An example output is below.\r\n\r\n![](https://images.code.org/a64c3be0a23e25bef67494bdfeb61415-image-1447879494916.44.45 - PM.png)" - CSPU5_U3 - Loops And Arrays - Loop Array If_markdown_instruction: "# *for* - Loop with *if*\r\n\r\nSometimes we want to find values in an array that meet - certain conditions. We can add an **`if` statement inside the `for` loop** - to individually check every value within the array. To practice this, we will - create a `for` loop that will **display every value in the array greater than - 5**.\r\n\r\n# Do This:\r\n** Starter code** has been been provided that creates - an array of random values.\r\n\r\n* Add a `for` loop that references every - index in the array.\r\n\r\n* Add an `if` statement inside the `for` loop that - **displays every value in the array greater than 5** using `console.log`\r\n\t![](https://images.code.org/969077ff23232e410ce17520b0a71e1e-image-1447390972867.gif)\r\n \r\n* - **Note:** Because the original array is being constructed with random values - it's *possible* that it might not have any values greater than 5. Just run - the program a few times to make sure it works. An example of the possible - output is below.\r\n\r\n![](https://images.code.org/266e23afc3533ebd63b393b2ee8682d8-image-1447796380510.39.26 - PM.png)" - CSPU5_U3 - Loops And Arrays - Make it a Function - add list parameter_markdown_instruction: "# - Generalize *search* by Making It Into a Function - Part 2\r\n\r\nRight now, - our function just searches for a 5 in a global array called `testArray`. We - would like to be able to **use this function to search through any array**, - so we will be adding a parameter to allow us to specify which array should - be searched.\r\n\r\n# Do This:\r\n\r\n* **Add a parameter to the `search` - function called `list`**.\r\n* **Modify the code inside the function** so - that it loops over `list` (the parameter) instead of `testArray` (the global - variable).\r\n* **Call your function** with each of the arrays provided at - the top of the program.\r\n\r\n(These steps are shown in the code animation - below.)\r\n\r\n![](https://images.code.org/af4cf7bd95c09f3e8e3548a3383c4a4e-image-1447693121377.gif)" - CSPU5_U3 - Loops And Arrays - Make it a Function_markdown_instruction: "# Generalize - *search* by Making It Into a Function\r\n\r\nYou've just written code to - search for a value in a list! If we could generalize this behavior, it might - be useful to us in the future - it's probably something that we want to do - over and over again. \r\n\r\nOver the next few levels, we'll build up a - very useful, general function for searching for *any* value in *any* list. But - we'll do it one step at a time...\r\n\r\n# Do This:\r\n\r\n**Note:** We've - provided **new starter code** that implements the pseudocode from the last - exercise. It also **creates two more arrays** that we'll be using later for - testing. For this level just worry about `testArray`. \r\n\r\n* **Run the - starter** code to verify that it works correctly.\r\n* **Create a new function**. - Name the function `search`.\r\n* **Move the code that checks for a 5 inside - the function.** **Note:** You must move the boolean variable inside the function - as well, or it won't reset each time you call the function!\r\n* **Call the - function** to make sure your code still works. The actual behavior will be - the same as when you ran it the first time. The difference now is that you're - calling a function to do it.\r\n\r\n(Steps are shown in code animation below.)\r\n\r\n![](https://images.code.org/dfad49ac35cd605410c52828716b712c-image-1447631609779.gif)" - CSPU5_U3 - Loops And Arrays - Print Array_markdown_instruction: "# Print an - Array with a *for* Loop\r\n\r\nAs you know, we can use variables as indexes - in an array. We can take advantage of this fact to create a `for` **loop - which visits every index in an array**.\r\n\r\n![](https://images.code.org/5aeb9986535424b1d737b8221685196f-image-1447446416081.26.01 - PM.png)\r\n\r\nIn this `for` loop, the `i` eventually gets set to every possible - index in the array. You are going to use a loop of this kind to display all - the values in an array.\r\n\r\n# Do This:\r\n**Starter code** is provided - that adds several random values to an array.\r\n\r\n* Create a `for` loop - that uses the syntax shown below (and above) to **iterate through every index - in the array**.\r\n\t![](https://images.code.org/930b40b3e3f204605a0fd27fee9d8b8f-image-1447346008842.gif)\r\n \r\n* - Use `console.log` to **display the contents of the array at each index**.\r\n\t![](https://images.code.org/43431613ea0c045411499dd0e68e7feb-image-1447345996258.gif)\r\n \r\n* - Run the program to **confirm it is displaying all the values**.\r\n" - CSPU5_U3 - Loops And Arrays - Printing Single True_markdown_instruction: "# - Print a Single True/False Value\r\n\r\nSometimes we don't care about the - count and just want to know if the array contains a 5 or not. **Let's try - to display a single true/false indicating whether the list contains a 5.** - There are two cases to consider: \r\n\r\n1. The list **does not contain any - 5's**; you need to display **\"false\"**. \r\n2. The list **contains at - least one 5**; you need to display **\"true\"**.\r\n\r\n**HINT:** one way - to do this is to reference your counter variable `fiveCount` after the array - has been processed.\r\n\r\n# Do This:\r\n**We've pulled your code from the - previous level so you can continue to add to it**.\r\n\r\n* Add a **`console.log` - statement to display a single \"true\" or \"false\"** indicating whether there - is a 5 anywhere in the array.\r\n\r\n| Example output 1: One or more 5's - | Example output 2: No 5's |\r\n| --- | --- |\r\n|![](https://images.code.org/15ed45d471e9279a8739bad5f31c3a4d-image-1447452726753.06.31 - PM.png) | ![](https://images.code.org/ed19957449c6b68cb19326a6f430edec-image-1447452740979.06.46 - PM.png)|" - CSPU5_U3 - Loops And Arrays - Search with Boolean Var_markdown_instruction: "# - Using a Boolean Variable as a Flag\r\n\r\nWe are going to do a **challenge - that is similar to the last exercise** but, rather than counting the number - of 5's in the array, we're going to use a different **interesting programming - technique for processing arrays** that might prove useful to you in the future. - \r\n\r\n# Using a Boolean Flag\r\n\r\n<img src=\"https://images.code.org/756fcab9d5f48ace76eb5d300fcf58af-image-1447624065160.png\" - style=\"float: right; width: 250px\">\r\nThe technique is generally referred - to as **using a boolean \"flag.\"** To understand this idea, think about how - some mailboxes work: the flag starts down, and when a person wants to let - the mail carrier know there is something to pick up, she puts the flag up - to notify the mail carrier that there is outgoing mail in the box.\r\n\r\nWe - can use a variable to do something similar when programming. Rather than incrementing - a count every time we find a 5 in the array, we will use a variable that acts - like a **flag**. We will create a variable before the loop and assign it - `false` to start (flag is down). Then, as we process the array, if we find - a 5, set the variable to `true` (put the flag up). \r\n\r\nHere is some pseudocode:\r\n```\r\nvar - flag = FALSE\r\nFOR EACH item IN list\r\n IF (item EQUALS 5)\r\n flag - = TRUE\r\n \r\nDISPLAY (flag)\r\n```\r\nNotice that it doesn't matter - if we find more than one 5. It will just keep setting the flag to `true`. However, - if there are no 5's, the `if` statement in the loop will never execute, and - so the variable will remain the value it was initialized to, which was `false`.\r\n\r\n# - Do This:\r\n\r\n* **Implement the pseudocode above** in JavaScript. \r\n* - We've given you code that constructs an array of random values, and the standard - `for` loop for looping over an array.\r\n* The output will be no different - from the previous exercise, but you should still **confirm that your program - correctly identifies when a 5 is in the array.**\r\n\r\n| One or more 5's - | No 5's |\r\n| --- | --- |\r\n|![](https://images.code.org/15ed45d471e9279a8739bad5f31c3a4d-image-1447452726753.06.31 - PM.png) | ![](https://images.code.org/ed19957449c6b68cb19326a6f430edec-image-1447452740979.06.46 - PM.png)|\r\n\r\n" - CSPU5_U3 - Movie Bot - Multiple If Sequences_markdown_instruction: "# Adding - Rating to Keywords\r\n\r\nUp until now our movie suggestions have just been - based on genre. Let's now also look for keywords related to the movie rating - like \"G\", \"PG\", \"PG-13\", and \"R\" so we can give movie suggestions - based on both genre and rating.\r\n \r\n**Note: ** We've updated the flowchart - below (highlighted in yellow) to see the logic we are trying to add.\r\n\r\n**Note - 2: ** The logic of the program right now will yield some odd results - there - are some things you can type that will give 2 suggestions - this is expected, - for now. We are just taking a small step here. We'll refine the code again - in later levels.\r\n\r\n# Do This:\r\n\r\n* **Add another set of `if`, `else-if`, - and `else` statements** inside the question `if` statement to **check for - keywords for movie ratings (G, PG, PG-13, and R).**\r\n\r\n* **Hint:** When - checking for \"G\", \"PG\" and \"R\" you need to be a little clever. R and - G are letters that will show up in lots of words and PG will get confused - with PG-13. We want to check for \"g\" and \"r\" with spaces on either side. - So make sure to use `\" g \"` where there is a space on either side of g instead - of `\"g\"`. For \"pg\" you can just add a space after the pg to look for `\"pg - \"`\r\n\r\n* **Test out a couple sentences with your keywords** to make sure - the change worked.\r\n\r\n<img src=\"https://images.code.org/886713cfedf4802e174b68ed2eb36d4b-image-1455816199174.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/886713cfedf4802e174b68ed2eb36d4b-image-1455816199174.png\" - target=\"_blank\">Click to open in separate window.</a>" - CSPU5_U3 - Movie Bot - Nested Motivation_markdown_instruction: "# Checking - for a Question\r\n\r\nWe're going to start adding some \"intelligence\" to - our Movie Bot. Since we've added `includes` it can now tell if its keywords - appear anywhere in the input. As a result some inputs may be questions while - others might simply be statements. **We'd like the movie bot to respond differently - to questions and statements.**\r\n\r\nIn order to tell when the user is asking - a question **we will be checking whether the input includes a question mark - **.\r\n\r\n# Do This:\r\n\r\n* Add a separate statement to **check if the - input includes a \"?\"**. \r\n* If the input includes a question mark **print - \"That's a good question.\" before the recommendation.**\r\n* Otherwise print - **\"I only answer questions.\" before the recommendation.**\r\n* **Test out - a couple sentences with your keywords** to make sure the change worked.\r\n\r\n**Example - Input --->** | **Output**\r\n---|---\r\nWhat's the best action movie? | That's - a good question. The best action movie is any James Bond movie.\r\nI love - comedy | I only respond to questions. The best comedy movie is The Princess - Bride.\r\n<br>\r\n**Note:** Check out the flowchart below to see the logic - we are trying to change.\r\n\r\n<img src=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - Movie Bot - toLowerCase_markdown_instruction: "# Dealing with Character - Case\r\n\r\nWhat if the user types **ACTION** instead of **action**? These - are two different strings to the computer and therefore it won't recognize - they are the same. We want Movie Bot to treat words the same ignoring the - case of the letters. We can do this using the string command `toLowerCase`.\r\n\r\n**Note: - ** Check out the flowchart below to see the logic we are trying to add. \r\n\r\n# - Do This:\r\n\r\n* **Try typing COMEDY, ACtioN, horroR, and Romance** into - Movie Bot.\r\n\r\n* **Use the `toLowerCase` command** to change all user input - into lowercase letters after they enter it.\r\n\r\n* **Check that COMEDY, - ACtioN, horroR, and Romance generate the same recommendations** as comedy, - action, horror, and romance.\r\n\r\n<img src=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - Movie Bot - When Multiple If Statements_markdown_instruction: "# - Adding a Separate *if*\r\n\r\nIt's still the case that sometimes you want - to have two completely separate groups of `if` statements because there are - separate conditions you want to check and possibly have responses for both. - You don't always just keep adding to a giant `if` statement forever.\r\n\r\nIn - the Movie Bot demo you probably saw that if you type \"please\" and \"thank - you\" it adds something extra to the response (it says something like \"Thanks - for being polite!\"). Let's add this functionality to your movie bot as well. - \r\n\r\n**Note: ** Check out the flowchart below to see the logic we are trying - to add.\r\n\r\n# Do This:\r\n\r\n* ** Add an `if` and `else-if` statement - that checks for \"please\" and \"thank you\"**. \r\n\t* If the string includes - \"please\" it should say \"Thank you for being so polite!\" before it gives - its response.\r\n * If the string includes \"thank you\" it should say - \"You are very welcome!\" before it gives its response.\r\n\r\n* **Test out - a couple sentences with your keywords** to make sure the change worked.\r\n\r\n<img - src=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" - target=\"_blank\">Click to open in separate window.</a>" - CSPU5_U3 - Practice Create Performance Task_markdown_instruction: "# Practice - Create Performance Task\r\n\r\nYou've finally made it to the end of the Programming - Unit! We will continue some programming in the next unit, but for now we are - going to use all the new concepts you have learn to create something of your - own design! \r\n\r\n# Do This:\r\n\r\n* **Read the Project Overview** to understand - the entire project.\r\n* **Follow the Project Planning Guide**.\r\n* **Implement - your final program in this level**." - CSPU5_U3 - Return Values - constrainTurtle_markdown_instruction: "# Use a Function - that Returns a Value in an App\r\n\r\nWe create functions to **contain blocks - of code that will be used multiple times within our program**. The same is - true with functions that return values. Let's see an example of how we might - use one of the functions we've written.\r\n\r\nThis exercise comes with starter - code that creates a **simple turtle driver app**. The x and y location of - the turtle are stored in the variables `xloc` and `yloc`. An event handler - is used to update these values when the **arrow keys are pressed**, and then - a separate `updateTurtle` function is called to draw the turtle on the screen.\r\n\r\nCurrently - the turtle can drive off the screen. If we are clever about how we use our - `constrain` function, however, we can prevent this from happening.\r\n\r\n# - Do This:\r\n\r\n* **Starter code** is provided which allows the turtle to - move. Additionally a **working version of `constrain`** is provided.\r\n* - **Call the `constrain` function twice** within the `updateTurtle` function - to prevent the turtle from going outside the screen.\r\n\t* One call to the - function for `xloc` and one time for `yloc`.\r\n * Recall the screen is - **320 by 450 pixels**.\r\n* **Run your app** and confirm the turtle cannot - leave the screen.\r\n\r\n![](https://images.code.org/f2e24abdf2d4008dfdc4f2ba9e23ff2c-image-1447958362880.gif)" - CSPU5_U3 - Return Values - debuggingConstrain_markdown_instruction: "# Debugging - and Multiple Return Statements: *constrain*\r\n\r\nWe're going to debug another - function that uses multiple return statements. The function is called `constrain` - and is used to limit an input number to a certain range. The function accepts - three parameters.\r\n\r\n* `input` : the number to be constrained.\r\n* `low` - : the lower bound of the range. If `input` is below this value, the function - should return the value of `low`.\r\n* `high` : the upper bound of the range. - If `input` is above this value, the function should return the value of `high`.\r\n\r\n<details>\r\n<summary>**Click - for sample input and output for `constrain`**</summary>\r\n* `constrain(15,10,20)` - should return 15 since it is within the range of 10 to 20.\r\n* `constrain(5,10,20)` - should return 10 since the input is below the range of 10 to 20.\r\n* `constrain(25,10,20)` - should return 20 since the input is above the range of 10 to 20.\r\n</details>\r\n<br>\r\nUnfortunately, - because of the way this function was written, it does not always work as expected. - In particular, **because of how `return` was used, some portions of the function - never run**. Change the structure of the function to **use the pattern you - have been shown in previous exercises, included below**.\r\n<br> <br>\r\n**Pattern - for Functions that Return Values**\r\n* Use parameters to provide input.\r\n* - Declare a variable that will be used as output, possibly initializing its - value.\r\n* Update the value in your output variable throughout your program.\r\n* - Return your output variable on the last line of your function.\r\n\r\n# Do - This:\r\n\r\n* **Run the program** and identify the errors generated in the - output.\r\n* **Inspect the logic of `constrain`** to identify the logical - errors.\r\n* **Rewrite** `constrain` to make use of the **pattern for functions - that return values**, shown above.\r\n* **Run the program** to ensure it is - now running as you expect.\r\n\r\n![](https://images.code.org/38afcc5420e084b3146a8b12cc2d0e72-image-1447952855846.07.25 - AM.png)" - CSPU5_U3 - Return Values - debuggingMaxVal_markdown_instruction: "# Debugging - and Multiple Return Statements\r\n\r\n**Having multiple `return` statements - in a program can lead to tricky situations**. You may use multiple return - statements, but it makes it easier to introduce logical errors into your program. - We're going to look at some examples of functions with return values that - include logical errors and debug them. The goal is to **recognize common errors - with return values now so you can avoid them when writing your own programs**.\r\n\r\nThere - is a logical error somewhere in the version of `maxVal` you are about to see - which uses multiple return statements. As a result the function works correctly - for some inputs but not all. You'll need to inspect the code to understand - what the issue is and make changes accordingly.\r\n\r\n# Do This:\r\n\r\n* - **Run the program** and identify the errors generated in the output.\r\n* - **Inspect the logic of `maxVal`** to identify the logical error.\r\n* **Correct - the logical error** so that the function returns the correct value for all - inputs." - CSPU5_U3 - Return Values - useMinVal_markdown_instruction: "# Using Functions - that Return Values\r\n\r\nWe have used functions that return values many times - before, but in this exercise you will see how they are actually created by - using the `return` command. The function `minVal` accepts two numbers as input - and returns the minimum of the two as output. You can call this function just - like any other, and **because it returns a number, you can treat the function - call as if it were a number**.\r\n\r\n# Do This:\r\n\r\n* **Starter code** - has been provided that creates the function `minVal` and generates two random - values.\r\n* **Inspect the code of `minVal` to understand the logic of this - function**.\r\n* On the `console.log` line **call the function using `rand1` - and `rand2` as parameters** and ensure the minimum value is returned. You - should treat the function call **as if it were a number**.\r\n\r\n<img src=\"https://images.code.org/21c2232acca1ed4a133d648982b0b042-image-1447964963356.gif\" - style=\"width: 550px\">\r\n\r\n* Check that the program generates output similar - to the output shown below.\r\n\r\n<img src=\"https://images.code.org/0ec446c772976ca8e75e5eb25d018b24-image-1447964535213.21.49 - PM.png\" style=\"width: 350px\">\r\n" - CSPU5_U3 - Return Values - wrapTurtle_markdown_instruction: "# Use a Function - that Returns a Value in an App - Part 2\r\n\r\nThis time, you're going to - write a function that returns a value to add functionality to the turtle driver. - The `updateTurtle` function now is making a call to a function called `wrap` - that has not been written yet. It accepts three parameters and should work - in the following way:\r\n\r\n* `input`: the input value to the function. If - it is within the range it should just be returned.\r\n* `low`: the lower bound - of the range. If `input` is below this value the output should be the value - of `high`.\r\n* `high`: the upper bound of the range. If `input` is above - this value the output should be the value of `low`.\r\n\r\nBy using this function - you can create the illusion that the screen \"wraps\" around, so when the - turtle leaves the top of the screen it appears again at the bottom.\r\n\r\n# - Do This:\r\n\r\n* **Starter code** is provided which allows the turtle to - move.\r\n* The `updateTurtle` function now makes two calls to `wrap`, but - the function is not yet written.\r\n* **Write the `wrap` function** so that - it implements the logic described above.\r\n* **Run your app** and confirm - the turtle now \"wraps\" when it leaves the screen.\r\n\r\n![](https://images.code.org/ebed5130ccdd16202eac0b8cc02df959-image-1447957698820.gif)" - CSPU5_U3 - Return Values - writeMaxVal_markdown_instruction: "# Writing Functions - that Return Values\r\n\r\nNow you are going to write your own function that - returns a value, `maxVal`. This function should return the maximum of two - values provided as input. The code for `minVal` is provided so that you can - **replicate the pattern used in this function**.\r\n\r\n**Pattern for Functions - that Return Values**\r\n* Use parameters to provide input.\r\n* Declare a - variable that will be used as output, possibly initializing its value.\r\n* - Update the value in your output variable throughout your program.\r\n* Return - your output variable on the last line of your function.\r\n\r\nYou may actually - recognize many similarities between how we wrote functions that process arrays - and functions that return values. **These patterns aren't rules of programming, - but they help make your code easy to read and understand**.\r\n\r\n# Do This:\r\n\r\n* - **Starter code** has been provided which stubs out `maxVal` and generates - two random values. `minVal` is still provided **so that you can replicate - the pattern used**.\r\n* **Write `maxVal`**, replicating the pattern used - to write `minVal`.\r\n* **Use `maxVal` within the `console.log` statement - as if it were a number** to generate the output similar to the one shown below.\r\n\r\n![](https://images.code.org/5941ceeb27f0ad2d59819c9395d0d89a-image-1447947829448.gif)" - CSPU5_U3 - Simulation - 1_markdown_instruction: "# Starting Small\r\n\r\nTo - start, we're going to simulate flipping a coin 10 times. You might be thinking - that isn't many coin flips, and that we could just do those flips in real - life, but this is actually an important step in developing a simulation. At - small scales we can make sure our code is working as intended because **we - can still visually confirm its output**. Once we're convinced that the logic - of our program is reliable we'll move up to simulating larger numbers of - flips.\r\n\r\nThe core logic of our program will be focused on **a `while` - loop** that simulates flipping a coin by repeatedly generating **random 0's - or 1's using `randomNumber`**. This is a great opportunity to keep practicing - using loops while applying your knowledge of variables, iteration, and `if` - statements.\r\n\r\n# Do This:\r\n\r\n* When we want to flip a coin with a - computer we will instead **generate a random number between 0 and 1**.\r\n* - Write a program that **uses a `while` loop** to **flip a coin 10 times** and - writes the value of each flip to the screen. The example below shows how your - program should run.\r\n* **HINT:** you will need to use a counter variable - in your `while` loop to keep track of how many times the coin has been flipped. - \r\n\r\n![](https://images.code.org/970622047b06af13ea7bdd50ee86bcbf-image-1446739178483.gif)" - CSPU5_U3 - Simulation - 2.1_markdown_instruction: "# Changing the Loop Condition\r\n\r\nCurrently - our loop condition is based on a counter variable that keeps track of the - total number of flips, but our simulation should only run **while we have - fewer than the target number of heads**. In this exercise you are going to - change the condition used by your `while` loop so that your **simulation terminates - once you have flipped 5 total heads**. At the end of the loop we will **write - the total number of flips** to know how many flips it took to get 5 heads.\r\n\r\n# - Do This:\r\n\r\n* Change the looping condition to use the variable you are - using to keep track of the number of heads. **Your loop should run as long - as you have fewer than 5 total heads**.\r\n* Add code after your loop that - **writes the total number of flips**.\r\n* **Test your program** several times - to make sure it works as expected. See the example below.\r\n* **Note:** the - simulation is always terminating once it flips its 5th heads. Sometimes this - means the text output runs off the screen. We will address this in the next - exercise.\r\n\r\n![](https://images.code.org/878ff327142ebad8f81ecd8cdf58b14a-image-1446861064994.gif)" - CSPU5_U3 - Simulation - 2.5_markdown_instruction: "# 10,000 Heads!\r\n\r\nYou're - ready to increase the number of heads your simulation is looking for and **test - your first hypothesis**. Before we move up to the full 10,000 heads, however, - we're going to perform a quick check of our program logic. When you make - changes to your program **it is possible that some portion of your programming - logic will stop working as you expected**. In order to feel more confident - about your model you will **first change the number of heads you are looking - for to a number that we can still visually verify (7 heads)**. If our code - still works after making changes then we should be confident that it should - work at 10,000. We will remove the intermediate output and run the full simulation!\r\n\r\n# - Do This:\r\n\r\n* **Increase the number of heads you are looking for to 7** - and **visually confirm** that the code is still working as you expect.\r\n* - If everything seems to be working, **comment out the `write` command that - displays the results of each flip.** You can use `//` to comment out a single - line of code. Make sure that the total count of flips still prints though!\r\n* - **Run your simulation and find out how long it takes to get to 10,000 heads**. - Then run it a few more times. What patterns are you noticing? Record your - results and move on." - CSPU5_U3 - Simulation - 2_markdown_instruction: "# Counting Heads\r\n\r\nLet's - say that a **1 is a heads**. If we want our simulation to run until we reach - a certain number of heads then **we will need a way to count the number of - heads that have been flipped**. In order to do this you will need to add a - variable that acts **as a counter**. Initialize it to 0, and every time you - flip a heads (1) **increment your counter by 1**. At the end of your program - you should write the value to the screen.\r\n\r\n# Do This:\r\n\r\n* Add a - variable that **counts the number of heads (1's)** and write its value to - the screen after each flip.\r\n* Run your program severals times **and validate - that the number of heads recorded is correct** by visually checking the flips - you've printed to the screen.\r\n* **Hint:** you will also need to store - your current coin flip in a variable to complete this challenge.\r\n\r\n![](https://images.code.org/0d99569cd223c63e2166d610d09fd525-image-1446859813702.gif)" - CSPU5_U3 - Simulation - 3_markdown_instruction: "# Streaks of Heads\r\n\r\nWe - are going to alter our simulation so that it doesn't count the total number - of heads, but rather the longest **streaks of heads**. This will allow us - to simulate **how many flips it takes to get 12 heads in a row**. \r\n\r\nTo - begin with you will change your looping condition so that **the loop again - only runs 10 times**. This will allow us to visually confirm our code is working.\r\n\r\n**Keeping - Track of Streaks:** We know we need to count streaks of heads, how do we do - this in code? Do we need to keep track of all the previous flips so we know - that we're on a streak?\r\n\r\nThe answer is: **no**. We can instead just - **count in a clever way** that makes our code pretty simple. Make a variable - to use as a counter and...\r\n\r\n * every time you see heads, add 1 to a - counter.\r\n * every time you see tails, set the counter back to 0.\r\n\r\nHere - is some psuedocode showing how it works. You might take a minute to study - and reason about why and how it works.\r\n\r\n**Pseudocode**\r\n```\r\n// - Ouside loop\r\nheadsCount <-- 0\r\n\r\n// Inside loop\t\r\nIF (current flip - is a heads)\r\n headsCount <-- headsCount + 1\r\nELSE\r\n headsCount <-- - 0\r\nDISPLAY (current flip)\r\nDISPLAY (headsCount)\r\n```\r\n# Do This:\r\n\r\n* - Change your `while` loop's condition so that **it only runs 10 times**.\r\n* - Add code to the simulation that **displays the length of each streak of heads** - following the logic described above. Note that pseudocode should translate - to JavaScript pretty easily.\r\n* The example below shows an example of what - output from your program might look like.\r\n\r\n![](https://images.code.org/22f1a29e9b6abd558198f4704e437498-image-1446751547621.25.07 - PM.png)" - CSPU5_U3 - Simulation - 4_markdown_instruction: "# Changing the Loop Condition: - Streaks of Heads\r\n\r\nWe want our simulation to run** while the streak of - heads is less than a target length**. In order to do this we'll need to change - our looping condition to use the variables we've been using to count our - streak of heads. To begin with **your simulation should look for a streak - of 3 heads** so that you can still visually confirm the output.\r\n\r\n# Do - This:\r\n\r\n* **Change the condition** used by your `while` loop so that - it now runs **while the streak of heads is less than 3**.\r\n* **Test your - program** by running it and visually confirming that its output is correct. - It should run like in the example below.\r\n* **Note:** As before it's possible - that your output will sometimes run off the screen. You can still confirm - your code is working as you intend (it should never run after a streak of - 3) and we will address this issue in the next exercise.\r\n\r\n![](https://images.code.org/90ec4022f784ba136e59bb9b7c57a5c7-image-1446862623863.gif)" - CSPU5_U3 - Simulation - 5_markdown_instruction: "# Streaks of Heads: 12 in - a Row\r\n\r\nWe're almost ready to test **our second hypothesis** and find - out how long it takes to get **12 heads in a row**. Just as before we're - first going to **visually test our code with a different length streak (4)** - before removing most of the visual output and running the code for a streak - of 12.\r\n\r\n# Do This:\r\n\r\n* **Change your simulation to run until you - get a streak of 4** and visually verify that the values calculated are accurate.\r\n* - **Comment out** the lines of code that write the current coin flip and the - current streak count. You can use `//` to comment out a single line of code.\r\n* - **Change your simulation to run until you get a streak of 12 heads**. \r\n* - **Run your simulation a few times and record your results!**" - CSPU5_U3 - Simulation - 6_markdown_instruction: "# Keep Experimenting!\r\n\r\nYour - simulation can be updated or changed however you like. What new questions - do you have? Do you want to look for longer streaks of heads? Do you want - to roll a die instead of flipping a coin? Make any changes and improvements - to your simulation that you like.\r\n" - CSPU5_U3 - User Input - Save getText To Variable_markdown_instruction: "# Saving - Text Input in Variables\r\n\r\nOften we want to save the information we pull - in from the user for later use in our program. The best way to do this is - to save it in a variable.\r\n\r\n# Do This:\r\n\r\n* **Create two variables - inside your event handler** to store the **age** and **name** of the user.\r\n* - **Use `getText()` to update the values** stored in each of these variables.\r\n* - **Change your `console.log` statements to use your variable instead of `getText`**.\r\n\r\n![](https://images.code.org/ca45dcb01ae2d1956ed2f87efeda0264-image-1445976691215.11.13 - PM.png)" - CSPU5_U3 - Variables - Set to Expression with Other Variables_markdown_instruction: "# - Expressions with Variables\r\nArithmetic becomes much more interesting when - we use other variables in our expressions. For example you can do this:\r\n\r\n<table style=\"margin-left: - auto;\r\n margin-right: auto; align: center\">\r\n<tr>\r\n<td>\r\n<img src=\"https://images.code.org/13c21437292031a705744a8c2663c0d4-image-1445547765131.png\" - style=\"width: 400px;\">\r\n</td></tr>\r\n<tr> <td>\r\n <h3>\r\n Mental Model\r\n![](https://images.code.org/b4a2c125508fb06fd653b90c643cb53b-image-1447272790306.png)</h3>\r\n</td></tr>\r\n<tr><td><img - src=\"https://images.code.org/95eb7e859d04c72ed82ed80023a870cf-image-1445546103564.gif\" - style=\"width: 400px;\"></td>\r\n</tr>\r\n</table>\r\n\r\nThe end result of - an expression with variables is the same as one without. The major difference - is that values are retrieved from memory in order to do the calculation rather - than simply hard-coded.\r\n\r\n# Mental Model Check\r\nWatch the animation - above. To compute the expression the computer will: **first** retrieve each - of the values of the variables used in the expression; **then** the arithmetic - expression can be evaluated; **finally** the computed value can be stored - in memory.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/485f61858e45a39e383497c522c94d64-image-1445548216109.png\" - style=\"float: right; width: 300px\">\r\n* **Scenario:** In the starting code - we have provided you with variables that might be the kinds of things you - would keep track of in a game: `totalTime`, `points` and `lives`. (see right).\r\n\r\n* - Right now the `totalScore` is just set to 0. We want you to compute a final - score so that the person is rewarded for having a lot of points and lives, - but penalized for taking a lot of time.\r\n\r\n* **Write an expression** that - calculates the player's total score and stores it in the `totalScore` variable. The - calculation is: **the player's points *times* lives *divided* by the total - time.**\r\n\r\n* For the values provided the app display should look like - this:\r\n \r\n<img src=\"https://images.code.org/10c9c6f162004a1b7216ae36c1427478-image-1445548367117.png\" - style=\"width: 250px\">\r\n" - CSPU5_U3 - Variables - Set to Expression_markdown_instruction: "# Variables - and Arithmetic Expressions\r\nA common thing to want to do is store the result - of an arithmetic expression. The 4 basic arithmetic operations `+ - * /` - are available. \r\n\r\n<details><summary><strong>Here is a quick table that - shows the arithmetic operators with code examples</strong> [click to expand]</summary>\r\n<table>\r\n<thead>\r\n<tr>\r\n<th - style=\"text-align:center\">operation</th>\r\n<th style=\"text-align:center\">block</th>\r\n<th - style=\"text-align:center\">text</th>\r\n<th style=\"text-align:center\">example</th>\r\n<th - style=\"text-align:center\">result</th>\r\n</tr>\r\n</thead>\r\n<tbody>\r\n<tr>\r\n<td - style=\"text-align:center\">add</td>\r\n<td style=\"text-align:center\"><img - src=\"https://images.code.org/2cf1014a4e0b1dedd361edc73a0f7eb1-image-1445536786715.png\" - alt=\"\"></td>\r\n<td style=\"text-align:center\">`+`</td>\r\n<td style=\"text-align:center\">`result - = 7 + 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>10</strong> - in <em>result</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">subtract</td>\r\n<td - style=\"text-align:center\"><img src=\"https://images.code.org/96b80cd4d866130c7f8567765f9b4b00-image-1445536805959.png\" - alt=\"\"></td>\r\n<td style=\"text-align:center\">`-`</td>\r\n<td style=\"text-align:center\">`value - = 7 - 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>4</strong> - in <em>value</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">multiply</td>\r\n<td - style=\"text-align:center\"><img src=\"https://images.code.org/3574725201e009142126f39ad1df8a78-image-1445536817791.png\" - alt=\"\"></td>\r\n<td style=\"text-align:center\">`*`</td>\r\n<td style=\"text-align:center\">`score - = 7 * 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>21</strong> - in <em>score</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">divide</td>\r\n<td - style=\"text-align:center\"><img src=\"https://images.code.org/5d470b223717c9daac5246af0d013bdf-image-1445536826467.png\" - alt=\"\"></td>\r\n<td style=\"text-align:center\">`/`</td>\r\n<td style=\"text-align:center\">`bonus - = 7 / 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>2.3333</strong> - in <em>bonus</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">parentheses</td>\r\n<td - style=\"text-align:center\">none</td>\r\n<td style=\"text-align:center\">`()`</td>\r\n<td - style=\"text-align:center\">`avg = (99 + 85 + 93) / 3;`</td>\r\n<td style=\"text-align:center\">stores - <strong>92.3333</strong> in <em>avg</em></td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n</details>\r\n<br>\r\n# - Misconception Alert \r\n\r\n<img src=\"https://images.code.org/18eb833aba4a7199a28929dcd43c73f8-image-1445540549754.gif\" - style=\"float: right\">\r\nWhen you have a statement like `result = 5 + 7;` - realize that this **does NOT store a mathematical expression in the variable.** \r\n\r\nRather, - with this instruction you are asking to compute 5 + 7 and **THEN** store the - answer (a single number) in the variable.\r\n\r\n# Do This:\r\n\r\n**GOAL:** - the goal here is mostly to acquaint yourself with typing arithmetic expressions - - the answers to the questions below are less important, and should be used - as interesting things to investigate. \r\n\r\nWe've given you some **starting - code** with 5 statements similar to ones in the table above.\r\n* **Add `console.log` - or `write` statements** to display the values of each of the variables.\r\n* - Experiment with arithmetic expressions, try to make really big and really - small numbers.\r\n\r\n<hr>\r\n\r\n**Things to Try:**\r\n* Using **multiplication: - what's the biggest a number you can store** in a variable?\r\n * How many - digits are in the biggest number before it starts using scientific notation?\r\n* - Using **subtraction (or multiplication with negative numbers): what's the - lowest number you store?** (low means a negative number with a lot of digits)\r\n* - Using **parentheses** make a crazy-big arithmetic expression. \r\n * NOTE: - composing arithmetic expressions is ***much* easier in text mode**, and is - actually almost unreadable in block mode. Try doing this in text mode.\r\n - \r\n" - CSPU5_U3 Digital Assistant Design_markdown_instruction: "# Getting Started - with Your Digital Assistant\r\n\r\n<img src=\"https://images.code.org/e875ff7b54c314a378cdb784f92371a0-image-1445989933171.52.04.png\" - style=\"width:200px;float:right;\">\r\nOver the course of the next few lessons, - you'll be __developing your own digital assistant__. To make your digital - assistant more useful, it needs to be able to make __decisions__ based on - questions the user asks it, and respond intelligently.\r\n\r\nTo get started, - __choose a topic__ you want your digital assistant to specialize in. It should - be something you are interested in and know a lot about. Examples: Country - Music, Sushi, College Football, Comedy Movies.\r\n\r\nYou'll next set up - the layout for your app. __The basic layout contains just two primary design - elements:__ a text input and a text area.\r\n\r\n# Do This:\r\n\r\n- __Choose - a topic__ for your digital assistant to specialize in.\r\n- __Create the layout__ - for your app. Your digital assistant should have:\r\n - A name\r\n - - A text input for the user to ask a question\r\n - A text area for the digital - assistant to respond\r\n - The text area should have a greeting for the - user (e.g. Ask me a question about movies!)\r\n" - CSPU5_U3 Digital Assistant Set Text_markdown_instruction: "# Respond to Basic - User Input\r\n\r\n<img src=\"https://images.code.org/2bed8002ff3c89afb02db5809de1c40e-image-1445996503055.gif\" - style=\"width:200px;float:right;\">\r\nNow you can have your digital assistant - repeat what the user typed and add a __default response__. It's not the most - intelligent response, but you'll build up to that over the next couple of - lessons and it's important to build this program in pieces. \r\n\r\n# Looking - Back to Move Forward\r\nYou're going to now add to your program without as - much guidance as usual. Keep in mind that __this is very similar to programs - you've already built__, so look back at your work for a refresher.\r\n- __Mad - Libs:__ In Mad Libs you got a user's text when the 'Next' button was clicked, - filled in the outline with the responses, and displayed the completed Mad - Lib\r\n- __Introducing the 'change' event:__ You just learned about the - 'change' event that triggers when the user hits 'enter' on a text input.\r\n\r\n# - Do This:\r\n- __Take the user's question and output it to the text area__ - when the 'enter' key is pressed in the text input\r\n- The response should - also __include a default phrase__ such as _\"I don't know about that yet!\"_\r\n- - __Format the response with newline characters__ to separate the user's response - from the assistant's response.: `\\n`\r\n- The __text input should clear__ - after the user hits 'enter'" - CSPU5_U3 Digital Assistant Target_markdown_instruction: "# Introduction to - the Digital Assistant\r\n\r\n__While digital assistants may seem like magic, - they are just elaborate computer programs that parse, or process, text__ looking - for combinations of words to make decisions about what to reply.\r\n\r\nOver - the next few lessons, __you're going to build up your own digital assistant - that responds \"intelligently\" to a user's question__, by making a decision - about what to reply based on the contents.\r\n\r\nYou'll now __explore a - demo digital assistant__, Movie Bot, that represents the kind of program that - you'll build up to. Try out some of the prompts below and also try your own. - You'll quickly find the limits of what this program can and can't do.\r\n\r\n# - Do This:\r\n__Run Movie Bot. In the _'enter your question here'_ input, - type each of the following prompts and hit 'enter.' __\r\n- 'help'\r\n- - 'What is the best PG comedy movie ever?'\r\n- 'What PG comedy movie should - I watch next?'\r\n- 'Could you please tell me the best romance movie?'\r\n- - 'I waNT To WatCH a MovIE!!!'\r\n- 'What is the capital of Kentucky?'\r\n- - Play around! Ask more questions of Movie Bot and make a prediction about what - logic it's using to reply.\r\n" - CSPU5_U3 full clicker demo_markdown_instruction: "# Clicker Game Demo\r\n\r\nTry - out this clicker game! You'll be building your own version (with a theme - you choose) at the end of the lesson.\r\n\r\n# Things That Are Familiar\r\nYou - know how to build many of the components of this game already:\r\n- Multiple - screens.\r\n- Buttons that change the screen when clicked.\r\n- Image that - moves when you click it.\r\n\r\n# Things That Are New\r\n- Keeping track of - and displaying the __changing score__.\r\n- Keeping track of and displaying - the __changing lives__.\r\n- Changing to the __win screen if the score is - 25__.\r\n- Changing to the __lose screen if the lives is 0__.\r\n" - CSPU5_U3- Keys - Code Refactoring Exit Ticket_markdown_instruction: "# Free - Response: Why Refactor?\n\nWhy is refactoring your code important?\n" - CSPU5_U3- Variables - Create And Assign_markdown_instruction: "# Create and - Assign At Once\r\n\r\nIt's so common to want to create a variable and give - it an initial value, that JavaScript has a shortcut that lets you create and - assign with one line of code like this:\r\n\r\n<img src=\"https://images.code.org/84b576f02fe92989d0955dc8d4122eed-image-1445480709312.png\" - style=\"width:120px\">\r\n\r\n\r\nYou'll also see a new block in the toolbox - for this (see right).<img src=\"https://images.code.org/cbe3f9ffd0bafef72ce18232f746fdbe-image-1445480538334.gif\" - style=\"float: right; width: 350px\">\r\n\r\n# Do This:\r\nWe'll just quickly - practice using this form of variable creation and assignment. The code you - write will achieve the same thing as the previous level in fewer lines of - code. \r\n\r\n* **Create a variable called `lives`** and **assign it the value - 3** using the new one-line version of this command. (See animation at right.)\r\n\r\n* - **Add** `console.log` statements to display the value of `lives` just as before. \r\n\r\n* - The output in the console should (again) look like this:\r\n \r\n <img src=\"https://images.code.org/6405a3ed95ca3125ea1b2c9ffbdffa94-image-1445349849482.png\" - style=\"border: solid 1px gray\">\r\n\r\n" - CSPU5_U3- Variables - Text Mode_markdown_instruction: "# Give Text Mode a Try!\r\nThe - block-based mode of programming is useful for getting code into your app fast - and error free. But sometimes those little tiny edits are a pain. **Use text - mode instead!** Text mode is designed to make typing code fast and easy, - and it also gives a lot of help to make your code error free. \r\n\r\nLet's - re-create these variables again, but explore some features of text mode this - time.\r\n\r\n# Try Each of These 3 Things\r\nWe've given you the first two - lines of code in a program. \r\nExpand each box below and try what's suggested - - each builds on the previous one, so you might want to go in order.\r\n\r\n<details>\r\n<summary>1. - **Switch to text mode and try to type.** [click to expand]</summary>\r\n \r\n - Switch to text mode and **type out a `console.log` statement** to display - the value of `score`.<br>\r\n <img src=\"https://images.code.org/d8cd6968bbb5fb5b5a8b8b3e41ee7ad1-image-1445353098262.gif\" - style=\"width: 500px\">\r\n</details><br>\r\n\r\n<details>\r\n<summary>2. - **Drag blocks into text mode.** [click to expand]</summary>\r\n\r\n If you - don't want to type *everything* you can drag a block from the toolbox into - text mode and it will show you the text version of it. **Add code to create - the `lives` variable and a `console.log` message**.<br>\r\n \r\n <img src=\"https://images.code.org/b755a871221705ebdc73e73ffbfd1ad0-image-1445353101095.gif\" - style=\"width: 500px\">\r\n\r\n</details><br>\r\n\r\n<details>\r\n<summary>3. - **Check out code completion.** [click to expand]\r\n</summary>\r\n When you - type commands a tool tip pops up that tries to guess what you're trying to - type. If you see what you want in the box, **highlight it** (you can use arrow - keys) and then **hit the tab key**. It will auto-complete the code for you!<br>\r\n - \r\n <img src=\"https://images.code.org/177d70ab086d1481ad2ba5d367379aff-image-1445353103029.gif\" - style=\"width: 500px\">\r\n </details>" - CSPU5_U3-Design Mode-ID and Event Handler_markdown_instruction: "# Activate - Your Button\r\nOn the last level you added a button using Design Mode. If - you click it, nothing happens. Let's make the button work. \r\nYour button - has been brought over to this level. \r\n\r\n**Goal:** Add code using Design - Mode to make the button respond to a click.\r\n\r\n# Do This:\r\n\r\n<img - src=\"https://images.code.org/9ff41c3ea30ece355e91eaca5cdc1e36-image-1444417748945.gif\" style=\"width: - 250px; float: right\">\r\n\r\n* **Change ID of button** from “button1” to - “redButton”.\r\n\r\n* **Insert `onEvent` from Design Mode** by clicking *Insert - and show code* under the **Events Tab**.\r\n\r\n* Run the program and **look - for the output in the *Debug Console* **below the workspace instead of the - app window. We will discuss the *Debug Console* on the next level." - CSPU5_U3-Design Mode-Image_markdown_instruction: "# Testing Overlapping objects - and the Screen with Console.log\r\n\r\nThere are two goals here:\r\n\r\n1. - Practice inserting your own console.log statements.\r\n2. Investigate how - the screen captures events (it's different).\r\n\r\n## Do This:\r\n\r\n* - Add `console.log` statements to each of the 3 event handlers we started you - out with.\r\n * Make the text that gets printed *be descriptive* so that you - know exactly what is happening when.\r\n\r\n* **Run** the program\r\n* **Click - on the overlapping objects** both the parts that overlap and the parts that - don't.\r\n* **\r\n\r\n**Investigate until you can answer the questions:**\r\n1. - When you click on a location where two objects are overlapping, which event(s) - fire(s)?\r\n2. When you click on an non-overlapping part of some object what - gets triggered?\r\n3. When does a \"click\" on the \"screen\" get triggered?\r\n\r\n\r\n<details><summary>Answers: - [click here]</summary>\r\n\r\n1. When you click on a location where two objects - are overlapping, which event(s) fire(s)?\r\n<br>\r\n<li> The event-handler - for object that is on top gets triggered. The object that is underneath is - essentially blocked from being clicked in the overlapping portion</li>\r\n<br><br>\r\n2. - When you click on an non-overlapping part of some object what gets triggered?\r\n<li>The - event-handler for the object gets triggered as you might expect</li>\r\n<br><br>\r\n3. - When does a \"click\" on the \"screen\" get triggered?\r\n<li>Always. Events - that occur on the screen cannot be blocked by other objects. If you set up - an event listener for the screen it will capture EVERY event of that type, - no matter what other UI elements are on the screen. This behavior of the - screen is done on purpose and is useful for certain kinds of things.</li>\r\n\r\n\r\n</details>\r\n" - CSPU5_U313 drag Two Buttons_markdown_instruction: "# Buttons and Unique IDs\r\nYou - may have noticed that the button command has two parameters: `button(id, text)`. The - `text` is the text that actually shows up on the button display, and the `id` - (we'll typically write **ID**) is a **unique identifier** for that element - in the app.\r\n\r\nEach element that appears in the app must have a **unique - ID**. In fact, if you try to run a program that has two buttons with same - ID you will get a warning message in the console. Watch:\r\n<img src=\"https://images.code.org/47ec46e0563f63641cc10ef152e9f86e-image-1444074330713.gif\" - style=\"border: solid 1px black; width:500px\">\r\n\r\nNotice that even though - the text on the buttons was different, the IDs were the same, which caused - the error message to show up. To get rid of that error message you will have - to change the ID of the button from the default `id` to something else.\r\n\r\n**Error - messages happen to everyone and they are helpful!**: getting an error or warning - message when you run your program is *not a big deal*. Programmers actually - rely on error messages to tell them where and how to fix their code.\r\nSometimes - error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers - to an id (id) which already exists.` But a warning like this contains helpful - information and clues such as the line the error occured on, or some word - or command it didn't recognize. \r\n\r\n# Do This:\r\nThe goal here is to - experience an error message in a program, study it, and fix it.\r\n* **Drag** - two buttons into the workspace (same as shown above) with the default IDs.\r\n* - **Run** the program to see the warning message in the console.\r\n* **Read** - the warning message to see what it says.\r\n* **Change** the IDs of the buttons - to make them unique. An ID must be specified in quotes. You can use double-quotes: - `\"myId\"`, or single quotes: `'myId'`\r\n* **Re-run the program** to make - sure you don't get the error.\r\n\r\nOnce you've got two buttons on the - screen with different IDs and the program can run without generating the warning, - move on to the next level.\r\n" - CSPU5_U313 Two Buttons with Ids_markdown_instruction: "# Predict - Observe - - Reflect\r\nHere's another one. \r\n\r\nTo understand a new piece of code - good programmers often try to **first make a prediction about what will happen - before running the program**. \r\n\r\nBy forcing yourself to make a prediction - (it doesn't matter if you're right or not) you are immediately alerted to - any **unusual or unexpected behavior** and you can ask yourself, *\"Huh? why - did it do that? Was that supposed to happen?\"* It might not be an error, - but you gain invaluable insight and actually **learn faster**.\r\n\r\n**Predict:** - For the code that is here, what will happen when the \"Forward\" button is - clicked? \r\n\r\n * **Study the code** - This program has **two event handlers** - listening for events on the same button?\r\n * **Force yourself to make a - prediction!** - \"I don't know\" is not a prediction!. \r\n\r\nHere are some - options to think about:\r\n\r\n* There will be an error in the console immediately - after hitting run\r\n* There will be an error in the console but not until - you hit the button\r\n* Program does nothing\r\n* turtle only moves forward\r\n* - turtle only turns left\r\n* turtle move forward *then* turn left \r\n* turtle - turn left *then* move forward?\r\n* something else? \r\n\r\n**Observe:** Once - you've made a prediction, close these instructions and **run the program** - to observe what happens.\r\n\r\n**Reflect:** Was your prediction correct? - If not what about your mental model might need to change? Talk about it with - a classmate and experiment with the code to make sure you understand what - is happening." - CSPU5_U3L13 - Debug Id Problem_markdown_instruction: "# Descriptive IDs\r\n\r\n**You - try it** - give your buttons **descriptive and meaningful IDs** rather than - the default `button1`, `button2` and so forth.\r\n\r\nRemember to:\r\n\r\n* - **Change ** the event handler code so that it correctly references the new - IDs of the buttons\r\n* **Run - Test - Debug ** the program to make sure it - works, and debug any problems.\r\n\r\n<details><summary><strong>Reminder:</strong> - Rules About IDs [click to expand]</summary>\r\n\r\nIn making descriptive and - meaningful IDs there **are some rules about IDs** you need to know. IDs...\r\n\r\n<li> - cannot contain spaces.\r\n<li> *must* begin with a letter (A-Z or a-z) and - may be followed by any number of digits and letters.\r\n<li> can contain - hyphens (\"-\"), underscores (\"_\"), colons (\":\"), or periods (\".\").\r\n\r\n</details>\r\n" - CSPU5_U3L13 - Debugging 1_markdown_instruction: "# Debugging Event-Driven Programs: - IDs\r\n\r\nTry another one! -- This one is trickier, but very common.\r\n\r\n1. - **Run the program** and inspect the messages in the Debug Console for clues.\r\n2. - **Investigate** - track down what the root of the problem might be.\r\n3. - **Fix it** the program and correct the errors so that it works as intended.\r\n4. - **Run the program** and verify that both buttons have the intended functionality.\r\n5. - **Repeat as necessary** until the program works as intended\r\n\r\n<details><summary>Hint? - [click here]</summary>\r\n\r\n<li>Remember: IDs are **case-sensitive**!!!</li>\r\n<li>The - error is with the id: **left**[**B/b**]**tn**</li>\r\n</details>\r\n" - CSPU5_U3L13 - Debugging 2_markdown_instruction: "# Debugging Event-Driven Programs: - Ordering Event Handlers\r\n\r\n**Ordering Event Handlers: ** Event handlers - must come **after the object they reference in the code**. If your event handler - comes before your object (in this case a button) your computer would be looking - for an event on an object that does not yet exist. You will get an error message - and your code will not work as you intend.<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" - style=\"float: right; width: 150px\">\r\n\r\n**Target Application:** Just - like the last exercise, you'll again try to make an app that has two buttons, - one for moving forward and one for turning left. \r\n\r\nOnce again, we've - introduced a new error.\r\n\r\n# Do This:\r\n**Run the Existing program** - to see the error that gets generated.\r\n\r\n**Debug ** this program so that - it works as intended.\r\n\r\n**Run the program ** and try both buttons to - make sure they have the intended functionality." - CSPU5_U3L13 - Debugging 3_markdown_instruction: "# Debugging Logical Errors\r\n\r\nSometimes - you can write a program that generates no errors but still does not work as - intended. \r\n\r\nThis is the result of **logical errors** in your code, and - **making a prediction** can help find these nasty little buggers too.\r\n\r\nOnce - again we've introduced an error or two (a logical error this time) for you - to debug.\r\n\r\n1. **Investigate the code and make a prediction** - What - *should* happen here?\r\n2. **Run the program** and experiment to see what's - wrong.\r\n3. **Reflect** - were you right? Why or why not?\r\n4. **Fix it** - - make it work as intended.\r\n5. **Repeat as necessary**" - CSPU5_U3L13 - Debugging IDs case sensitive_markdown_instruction: "# Debugging - Event-Driven Programs: IDs\r\n\r\nTry another one! -- This one is trickier, - but very common.\r\n\r\n1. **Run the program** and inspect the messages in - the Debug Console for clues.\r\n2. **Investigate** - track down what the root - of the problem might be.\r\n3. **Fix it** the program and correct the errors - so that it works as intended.\r\n4. **Run the program** and verify that both - buttons have the intended functionality.\r\n5. **Repeat as necessary** until - the program works as intended\r\n\r\n<details><summary>Hint? [click here]</summary>\r\n\r\n<li>Remember: - IDs are **case-sensitive**!!!</li>\r\n<li>The error is with the id: **left**[**B/b**]**tn**</li>\r\n</details>\r\n" - CSPU5_U3L13 - Project_markdown_instruction: "# Multi Screen App\r\nYou will - be creating your own multi-screen app to practice designing user interfaces - and writing event-driven programs. \r\n\r\n**Look at the Project Guide and - Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* - Your app will have at least **4 screens**.\r\n* Your app should include **text, - images, buttons, and sound**.\r\n* There should be **no “getting stuck” on - any screen.** It should always be possible to navigate from a screen in your - app to some other screen. \r\n* Your program code should follow **good style**.\r\n* - Your user interface should be **intuitive to use**." - CSPU5_U3L13 - Turtle Driver Project_markdown_instruction: "# Create a Turtle - Driver App!\r\n\r\nAt this point you know enough about buttons and event handlers, - and how to debug some common issues that arise to be able to **build your - own \"turtle-driver\" app** from scratch. \r\n\r\n**Build up the program bit - by bit**. Don't try to write all the code at once. Add a button with an - event handler, make sure it works, debug any problems, and then move on to - the next part.\r\n\r\n# Do This:\r\n\r\n**Create ** an application with **four - buttons**, one for moving the turtle forward and one each for turning left - and right. The fourth button should do whatever you like.\r\n\r\n**Use descriptive - and meaningful IDs** for your buttons and ensure your event handlers work - as you intend.\r\n\r\n**If you have extra time** add more buttons that use - other turtle commands you'd like to include. You can also use colors, and - different line widths, dots, etc. " - CSPU5_U3L13 - Turtle move with button_markdown_instruction: "# Your First Interactive - App!\r\n<img src='https://images.code.org/3fad83213ae72073251c4d5abc1f048a-image-1444060521578.png' - style='float: right; width: 250px'> A new group of commands has been added - to the toolbox called **UI Controls** (User Interface Controls) which are - commands that let you interact with, and respond to, the user of your app. - To keep it simple, we'll start with just two commands: \r\n* `onEvent` which - lets you run a function in response to some event occuring (such as a button - click).\r\n* `button` which puts a button on the screen.\r\n\r\n# Do This:\r\nYou - will replicate the small app shown below, which makes the turtle move with - a button click. You will do three things:\r\n* Add a `button`.\r\n* Add an - `onEvent` block.\r\n* Add `moveForward` inside the onEvent function block.\r\n\r\nHere's - what you should do - you can come back to watch this as many times as you - need to get it right.\r\n<img src=\"https://images.code.org/1cdc8cfbcef2a43f84b11ebdf14aed0c-image-1444061731350.gif\" - style=\"border: solid 1px black; width: 500px; margin: auto\">\r\n\r\nOnce - you've created the program and gotten it to run, click **Finish** to move - onto the next level." - CSPU5_U3L13 eventsDetails_markdown_instruction: "# onEvent\r\n\r\n**You try - it!** - Make the turtle move forward when the button is clicked.\r\n\r\n* - **Add an `onEvent` block** \r\n* Set the **id** and **type** you want.\r\n* - Add `moveForward` to the function definition\r\n\r\n* **Run the program** - to make sure it works.\r\n* **Try changing the event type** to something like - *\"mouseover\"* and see what happens. Not all event types will work with - buttons but it's fun to play a little bit.\r\n\r\nOnce you've got the program - responding to some event, congratulations! You've just made your first interactive - app. \r\n\r\n**Click Finish** to move on to the next problem.\r\n\r\n" - CSPU5_U3L13 Free Response Reflection_markdown_instruction: "Elements in your - app are required to have **unique IDs**. Given what you now know about how - event handlers work, why is it important for the IDs of page elements to be - unique?\n\n" - CSPU5_U3L14 - Assigning Random Value_markdown_instruction: "# Other Ways to - Assign Values to Variables\r\nPrograms become much more interesting when the - values in variables change while the program is running. We can also assign - to a variable the value returned by a function. For example:\r\n\r\n![](https://images.code.org/31447c1b90c925bba3ca86ead8d84a7d-image-1445892065474.png)\r\n\r\nBecause - the `randomNumber` function *evaluates to a number* it means we can treat - it *as though it were a number*. We've used it before by just \"plugging - it in\" to some function that needed a number as a parameter like:\r\n![](https://images.code.org/5df0376d562bd75a1899e17c49b00144-image-1445941026356.png)\r\n\r\nBecause - the `randomNumber` function generates a new and different number each time - you call it, one thing we *could not* do before we had variables was generate - a random number, and use that *same number* for two different things in a - program. Now we can.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/df3d2a8f4c1a3061981667c9f85b0071-image-1445549489133.png\" - style=\"float: right; width: 350px\">Write a program that simulates the rolling - of two dice and reports their individual values as well as the sum. \r\nThe - program should:\r\n* Generate two random numbers between 1 and 6 and store - each result in its own variable.\r\n* Display the individual values of the - two dice.\r\n* Display the sum of the two dice (see right).\r\n* Every time - you run the program the result will be a little different.\r\n\r\nWe have - given you starting code that shows what to do for the first die. The *rest - of the code is up to you!* When you're done the output in the app display - should look like what's above.\r\n\r\n" - CSPU5_U3L14 - concatenate simple_markdown_instruction: "# Text and Variables - Living Together!\r\n\r\nSometimes it’s useful to display text along with the - value of a variable in the same line of output. To do this you use `+` to - attach a variable onto a literal string of characters. Here is an example:\r\n\r\n<img - src=\"https://images.code.org/a35e68b062fc814871a8323938cf3384-image-1445888147995.png\" - style=\"border: solid 1px #BBBBBB; height: 30px;\">\r\n\r\nNotice that the - `+` operator has **two different meanings in JavaScript depending on what - type of data you're applying it to**. Click the explanations below for more - details.\r\n\r\n<details>\r\n<summary>If **both operands are numbers** `+` - means to add those two numbers together.</summary>\r\n\r\nThis is standard - addition. It works both with numbers and with variables that contain numbers, - as shown below.<br>\r\n\r\n<img src=\"https://images.code.org/eb50a1fcea459fe74774d903b07a274f-image-1445887814602.png\" - style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n\r\nBecause `num1` - is a variable that holds a number, and 10 itself is obviously a number, in - this case `+` will do addition like you would expect.\r\n\r\n</details>\r\n<br>\r\n<details>\r\n<summary>If - **either of the operands is a string** `+` treats both as if they were strings - and combines them to create a single string.</summary>\r\nThis is potentially - confusing behavior and can get pretty weird if the text *looks* like numbers. For - example, this code will display **16100** to the screen.<br>\r\n\r\n<img src=\"https://images.code.org/a9c54b664bd192aa5bf611808d88a3bc-image-1445887893598.png\" - style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n\r\nWhy? Because - JavaScript sees you trying to display a mix of text and variable values. \"16\" - (in quotes) is a string of ASCII characters not a number. And so JavaScript - converts everything to text, and the characters in the result of \"16\"+\"100\" - comes out to \"16100\". \r\n\r\n</details>\r\n<br>\r\n \r\n**TIP:** It's - common to want to sandwich a variable between some text when displaying it. You - can string together multiple pieces of text and variables using the `+` operator. For - example, you can do this:\r\n<br> \r\n\r\n<img src=\"https://images.code.org/65b0e277f058903bd3b956cc59ee5253-image-1445887976271.png\" - style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n \r\n<br>\r\n<details>\r\n<summary>**Misconception - Alert**</summary>\r\n\r\nThe **key thing to understand** about the `+` symbol - is that it can _only_ do actual arithmetic addition if the values on either - side of the `+` are actually numbers or variables that contain numbers. \r\n\r\n**And** - if the `+` symbol cannot determine whether the value is a number then it **assumes - it's a string**, and converts everything to a string and tries to concatenate - it. \r\n \r\nThe computer relies on you - the programmer - to make sure that - the **type of data** stored in a variable is appropriate for the task at hand.\r\n</details><br>\r\n\r\nOn - the next screen we'll have you play with this a little bit, but you'll write - statements to display a mix of text and strings from here on out.\r\n\r\n# - Do This:\r\nWe have given you the starting code shown below. You should **modify** - the `write` statement on **line 3** to combine text and variables together - to make the app display a single line of text as shown.\r\n\r\n|starting code|output|\r\n|--|--|\r\n|<img - src=\"https://images.code.org/a1b84a8728599e9945c576d3bb459140-image-1445891621155.png\" - style=\"height:50px\">| <img src=\"https://images.code.org/f5673df128eca0f9637c0cca1729b489-image-1445891800242.png\" - style=\"width: 250px\">|" - CSPU5_U3L14 - Mini Calculator embed_markdown_instruction: "# Getting User Input - - A Simple Calculator\r\nPrograms become *even more interesting* when we can - interact with the user. A short way to ask a user for a number is with the - `promptNum` command, which pops up a dialog box asking the user to enter a - number.\r\n\r\nThis very simple app demonstrates a new behavior: getting input - from the user.\r\n**You will write code to re-create this program** on the - next page.\r\n\r\n# Do This:\r\n* Click \"Run\" on the app.\r\n* You will - be prompted for two numbers, one right after the other. \r\n\t* If you don't - enter a number it will simply re-prompt you until you do.\r\n* See what happens. \r\n* - Re-run the program and enter different numbers until you get the idea.\r\n\r\nClick - **Finish** to move on." - CSPU5_U3L14 - moving memory challenge1_markdown_instruction: "# Moving Memory - - Challenge 1\r\n\r\nThe next several levels all present challenges related - to \"moving memory\" around in your program. \r\n\r\n**GOAL:** Set the value - of the variable(s) to make the `console.log` statement display what it's - supposed to.\r\n\r\n**Rules**:\r\n\r\n * You may **only** add lines of code - that re-assign values of variables provided.\r\n * You may **only** use assignment - (`=`) and arithmetic operators (`+` `-` `*` `/`).\r\n * You **MAY NOT** type - or introduce any numbers.\r\n * You **MAY NOT** add or create any new variables.\r\n - * You **MAY NOT** change or alter the `console.log` statement at all.\r\n\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n<br><br>\r\n### Try this example yourself...\r\n\r\n" - CSPU5_U3L14 - moving memory challenge2_markdown_instruction: "# Moving Memory - - Challenge 2\r\n\r\n# Try another one!! \r\n* Click through to see a new - problem provided in the starter code. \r\n* A reminder of the rules and example - are below if you need to sneak a peek.\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - moving memory challenge3_markdown_instruction: "# Moving Memory - - Challenge 3\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar - x = 2;\r\nvar y = 3;\r\n// your code here\r\n\r\nconsole.log(\"The value of - x is: \" + x + \" (x should be 7)\");\r\n```\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - moving memory challenge4_markdown_instruction: "# Moving Memory - - Challenge 4\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar - x = 2;\r\n// your code here\r\n\r\nconsole.log(\"The value of x is: \" + x - + \" (x should be 8)\");\r\n```\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - moving memory challenge5_markdown_instruction: "# Moving Memory - - Challenge 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar - x = 2;\r\nvar y = 3;\r\nvar z = 0;\r\n// your code here\r\n\r\nconsole.log(\"The - value of x is: \" + x + \" (x should be 3)\");\r\nconsole.log(\"The value - of y is: \" + y + \" (y should be 2)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong>(click - to expand)</summary>\r\nSince this one requires you to change the value of - two variables you need to be careful about which one you change first, since - its new value will affect the next lines of code.\r\n<p></p>\r\nYou can also - take advantage of the fact that since `z` is not used as a display value, - you can use it as a temporary holding ground for one value while you change - another.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - moving memory challenge6_markdown_instruction: "# Moving Memory - - Challenge 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar - x = 5;\r\nvar y = 11;\r\nvar z = 4;\r\n// your code here\r\n\r\nconsole.log(\"The - value of x is: \" + x + \" (x should be 2)\");\r\nconsole.log(\"The value - of y is: \" + y + \" (y should be 6)\");\r\nconsole.log(\"The value of z is: - \" + z + \" (z should be 8)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong> - (click to expand)</summary>\r\nThis one requires you to be a little clever. Think - about setting the value of one variable that you could then use to easily - set the value of the other variables. Then the trick is to figure out how - to use the variables you've been given to make that useful value.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - User Input Division calculator_markdown_instruction: "# Assigning - User Input to Variables\r\n<img src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" - style=\"width: 350px; float:right\">\r\nLet's use `promptNum` to make a simple - calculator. The `promptNum` command appears in the variables toolbox because - it's typically used as a way to get a value from the user that you want to - hold on to while the program runs.\r\n\r\n`promptNum` is similar to `randomNumber` - in that it is a function whose return value *evaluates to a number*. The difference - here is that `promptNum` pops up an input dialog box and waits for the user - to type a number. Once they do and hit \"OK\" the number they typed is returned - and we can store it in a variable to use in our programs.\r\n\r\n\r\n# Do - This:\r\nWrite a program that acts as a simple calculator. (An animation of - the end result is shown at right.) <img src=\"https://images.code.org/e644d4b17d1d6fdb6b5a93651d512f8a-image-1445552700557.gif\" - style=\"width: 250px; float: right\">\r\n* Ask the user to **enter a number**.\r\n* - Then ask the user to **enter a second number**.\r\n* **Display the result** - of *some* calculation.\r\n * The example shows division but you may choose - something else if you like.\r\n\r\nWe have given you starting code that shows - you how to get the first number. The rest of the code is up to you.\r\n\r\n" - CSPU5_U3L14 - Variable ReAssignment pt2_markdown_instruction: "# Variable Re-assignment - - Part 2: Updating Values\r\n\r\nAll of our examples so far have shown how - to set the value of a variable by using combinations of numbers and other - variables. But what if you wanted to do something like **add 10 to the *current* - value of a variable**? \r\n\r\nBecause updating the value in a variable is - just moving memory around, the process has to go something like this:\r\n* - Read the current value of a variable.\r\n* Add 10 to it.\r\n* Store the new - value back into the same variable.\r\n\r\nThe technical term for this is called - **variable re-assignment** - when you change the value of a variable based - on its current contents. To increase the value of `num1` by 10 you actually - need to do this:\r\n\r\n<img src=\"https://images.code.org/c49b1a0fb81de4b90558fdb278e40987-image-1445942169121.png\" - style=\"float:right\">\r\n```\r\nnum1 = num1 + 10;\r\n```\r\nThe diagram at - right shows a picture of what's happening (it assumes the value of `num1` - is 7 before the line is executed). It's actually very similar to what happens - with plain old arithmetic: compute a value, then store it in a variable. Because - the computation has to happen before storing the result in a variable, there - is no contradiction here.\r\n\r\n<details>\r\n<Summary><strong>Common Mistakes - & Tips</strong> [click to expand]</Summary>\r\n\r\n<h3>\r\nMistake 1\r\n</h3>\r\n<p>To - increase the value of variable by 10 (for example) a common mistake is to - think that this statement alone will do the trick.\r\n</p><p>\r\n\r\n```\r\nnum1 - + 10;\r\n```\r\n</p><p>\r\nIt doesn't. This tells the computer to add 10 - to whatever the value of `num1` is. And the computer will do that, and the - result will go....nowhere. It will be lost.\r\n</p><p>\r\nBecause you are - trying assign a new value to a variable it should make sense that **the = - sign must be involved somehow**. \r\n</p>\r\n<h3>\r\nMistake 2\r\n</h3>\r\n<p>\r\nIf - you were in math class this statment would make no sense:\r\n```\r\nnum1 = - num1 + 10;\r\n```\r\n</p><p>\r\nBut **remember to read = as \"gets.\"** If - you read the statement above as: \"num1 *gets* the value of num1's current - value plus 10\" it might make more sense. Get in the habit of using \"gets.\"\r\n</p>\r\n</details>\r\n\r\n# - Do This:\r\n\r\n * **Make a prediction.**\r\n We start you out with some code - again (see below). \r\n\r\n <img src=\"https://images.code.org/60b25394c387bc111451f0e481528733-image-1447800367736.43.42.png\" - style=\"width: 500px;\"> \r\n\r\n Trace the code and predict what you think - will be printed to the console. (NOTE: We're serious about this \"make a - prediction\" stuff. When you force yourself to make a prediction about what - code will do you will learn faster since it triggers you to apply your mental - model of what's happening.)\r\n \r\n * **Run the program** to see if you - were right.\r\n \r\n * **Add a `console.log` statement**.\r\n \r\n We've - left you with a *little bit* of programming to do: add a `console.log` statement - at the end of the program to see the last value of `someNum` to see if your - full prediction is correct.\r\n" - CSPU5_U3L15 - add code to make count down work_markdown_instruction: "# Make - Count Down Work\r\n\r\n<img src=\"https://images.code.org/0044a46a27f7af5da74daeae8de021f7-image-1446063781449.gif\" - style=\"float: right; width: 200px\">You now know enough about using global - variables (and some of the problems you might run into) to try it yourself.\r\n\r\nLet's - start with an easy task. Right now clicking the up arrow works as expected; - **clicking the down arrow does not**. So...\r\n\r\n# Do This:\r\n**Make the - count go down by 1 every time the down arrow is clicked**\r\n\r\n* Study how - the up arrow works, and use it as an example for writing the code for the - down arrow.\r\n* Add and modify the code so that when the down arrow is clicked - the count goes down.\r\n* When you're done the app should work like the animation - shown to the right.\r\n* HINT: Don't forget to set the text of the label.\r\n\r\n" - CSPU5_U3L15 - Add reset button to UpDown app_markdown_instruction: "# Add a - Reset Button\r\nIn most apps you want to provide a way to start over. \r\n\r\nTo - do this without having the user quit and restart your app, you need to add - code to **reset variables and text displays to initial values** so the app - can effectively start over.\r\n\r\nWe've **added a button** to the \"gameOverScreen\" - in the *Count Up/Down App* and **added an empty event handler** for it. \r\n\r\nRight - now clicking the \"start over\" button does nothing. You will write code to - make it work.\r\n\r\n\r\n# Do This:\r\n**Add code to the startOverButton event - handler to reset the app**. <img src=\"https://images.code.org/cb1569accb6a370d2258b5b14d624424-image-1446126849891.gif\" - style=\"width: 150px; float: right;\">\r\n\r\nThe app should work like the - animation shown to the right. **Notice** that when the \"start over\" button - is clicked it goes back to the main screen and the count has been reset to - 0. \r\n\r\nThe code should:\r\n\r\n* Set the screen to the gamePlayScreen.\r\n* - Set the count variable to 0.\r\n* Set the correct text label on the gamePlayScreen - to show the count is 0.\r\n\r\nOnce you get it to work, move on." - CSPU5_U3L15 - count upDown bug forget to set text_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a bug that doesn't produce an error. - It just doesn't do what's expected. The reason is a common mistake that - all programmers make.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To - see the bug:**\r\n * Click the up arrow about 5 times.\r\n * Click the down - arrow about 10 times.\r\n * Click the up arrow again.\r\n* **Look at the code - and fix the problem.**\r\n* **Read about the common mistake** by expanding - the area below.\r\n* **Once you've fixed the issue, move on.**\r\n <p>\r\n\r\n</p>\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...forgetting - to update the display after changing something in the program</big>\r\n\r\n\r\n<h1> - Misconception Alert - Changing a Variable Doesn't Change the Display</h1>\r\n\r\nA - common misunderstanding about variables and displaying them is to think that - a text label that's displaying a variable will change when the variable changes. - NO. A text label is just \"dumb\" container for text. It's similar to a - variable itself in that it won't change unless you explicitly tell it to.\r\n<p></p>\r\n<h1>Concept: - Separation of Program Data from How It's Viewed</h1>\r\nMaintaining variables - and program data is a **different task** from maintaining the display of the - app. Your program could actually run without updating the display at all - - it would still be working behind the scenes; it just wouldn't be very fun - or interesting to use.\r\n<p></p>\r\n</details>\r\n\r\n\r\n" - CSPU5_U3L15 - count upDown bug logic error wrong update_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a few different bugs. Find them and squash - them!\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n - * Click the up arrow exactly twice.\r\n \t* Restart the program and do this - a few times - you'll notice nothing happens the first time you click.\r\n - * Click the down arrow several times.\r\n* **Look at the code and fix the - problem.**\r\n* **Read about the common mistake** by expanding the area below.\r\n* - **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...updating - the wrong thing in the wrong event handler.</big>\r\n<p></p>\r\nThere are - two common mistakes here:\r\n<p></p>\r\n1. Mixing up which event handler should - do what.\r\n<p></p>\r\n2. Updating the display **before** any change is made - to the underlying data of the program. \r\n\tThis can make the app seem oddly - out of sync where each event triggers an update to the display that reflects - the **last** thing done, not the current thing.\r\n<p></p>\r\n</details>" - CSPU5_U3L15 - count upDown bug var not created globally_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a few different bugs that are related - to the same problem.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To - see the bug:**\r\n * Click the up arrow several times.\r\n * Click the down - arrow.\r\n* **Look at the code and fix the problem.**\r\n* **Read about the - common mistake** by expanding the area below.\r\n* **Once you've fixed the - issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read about the - common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...thinking - you're referencing a global variable when you're not.</big><br>\r\n\r\nA - common mistake is basically a syntax/spelling error. These mistakes can be - really tricky to work out because you *think* you know what you wrote, but - the computer doesn't see it that way :)\r\n<p></p>\r\n</details>\r\n\r\n\r\n" - CSPU5_U3L15 - Debug forget to update var on reset in UpDown app_markdown_instruction: "# - Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common - mistake** has been introduced into the code.\r\n\r\nIt's a tricky one to - find because at first it looks like everything is okay.\r\n\r\n# Do This:\r\n\r\n* - **Run the program.**\r\n\r\n* **To see the bug:**\r\n * Click the up or down - arrow until you get to the \"gameOverScreen.\"\r\n * Click \"start over.\"\r\n - * Click the up or down arrow again... what the?\r\n \r\n* **Look at the code - and fix the problem.**\r\n\r\n* **Read about the common mistake** by expanding - the area below.\r\n\r\n* **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...forgetting - to reset <i>everything</i> you need to actually start over.</big></strong><br><br>\r\nFrequently - to actually reset you need to set a few variables back to initial values <i>and</i> - update all the UI components, especially those that rely on those variables, - so they reflect the new values.<br><br>\r\n\r\nAnother common mistake shown - here is setting the text of a label to \"0\" rather than the value of the - count variable. For example, these two lines of code are a little dangerous:<br><br>\r\n<pre>\r\ncount - = 0;\r\nsetText(\"countDisplayLabel\", 0);\r\n</pre>\r\n\r\nTo be safe, if - a label is supposed to display the value of a variable, you should always - use the variable <i>instead of hard-coding numbers</i> as a check on yourself. The - general rule of thumb is: never hard-code a value instead of using a variable - that holds the value you need to show.<br><br>\r\n\r\n<b>A common strategy</b> - for handling this is to put everything you need to reset the app into a function - which you can call at both the beginning of your program, and from other screens - later on. For example:<br><br>\r\n\r\n<pre>\r\nfunction resetAll(){\r\n count - = 0;\r\n setText(\"countDisplayLabel\", count);\r\n setScreen(\"gamePlayScreen\");\r\n}\r\n</pre>\r\n\r\nThen - in some other code like a button event handler you can just call your reset - \r\nfunction:<br><br>\r\n\r\n<pre>\r\nonEvent(\"startOverButton\", \"click\", - \r\nfunction() {\r\n <span style=\"background-color:yellow\">resetAll();</span>\r\n});\r\n</pre>\r\n\r\n</details>" - CSPU5_U3L15 - Debug if never triggers in UpDown app_markdown_instruction: "# - Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common - mistake** has been introduced into the code.\r\n\r\nWe've changed the app - so that it counts up and down by 3 rather than by 1.\r\n\r\n# Do This:\r\n\r\n* - **Run the program.**\r\n\r\n* **To see the bug:**\r\n * Click the up or down - arrow trying to get to the game over screen.\r\n * It should be impossible - to get to the game over screen.\r\n \r\n* **Look at the code and fix the problem.**\r\n\r\n* - **Read about the common mistake** by expanding the area below.\r\n\r\n* **Once - you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...the - condition you're checking in your `if` statement is actually impossible to - reach.</big></strong>\r\n<p>\r\nThis problem was probably easy to see here, - but in practice <b>logic errors</b> like this can be devilish to track down. - It's especially hard because the program gives you no hints that anything - is wrong - it is syntactially a correct program. The computer cannot tell - ahead of time whether your `if` statements will ever be true. So you need - to trace through the logic of your program step by step to try to figure out - why something's not happening that you expect should have happened.\r\n</p>\r\n\r\n</details>" - CSPU5_U3L15 - Debugging Simple If-statements =v==_markdown_instruction: "# - Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA **very common - mistake** has been introduced into the code. It's one that vexes early programmers, - but we're sure you'll find it.\r\n\r\n# Do This:\r\n\r\n* **Run the program.**\r\n\r\n* - **To see the bug:**\r\n * Click the up arrow just once.\r\n * Restart the - program.\r\n * Click the down arrow just once.\r\n \r\n* **Look at the code - and fix the problem.**\r\n\r\n* **Read about the common mistake** by expanding - the area below.\r\n\r\n* **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...using - `=` instead of `==`</big></strong>\r\n<p>\r\n<b>Yup,</b> we told you this - is a common mistake! And it's an easy one to make.\r\n</p>\r\n<p>\r\nRemember - that the single `=` sign does assignment and it actually *also* evaluates - to true. This means that if you stick it in an `if` statement, that `if` - statement will <i>always</i> be true.\r\n</p>\r\n<p>\r\nOne strategy to avoid - this mistake is to **read code aloud in your head** and don't even use the - single word \"equal\":\r\n<li> think **\"gets\"** every time you see `=`</li>\r\n<li> - think **\"equal-equal\"** every time you see `==` </li>\r\n</p>\r\n<p>\r\nIf - you get in the habit of thinking that way, these mistakes are easier to catch. For - example you'd see this:<br>\r\n`if (count = 20)`<br>\r\nand read:<br>\r\n<i>\"if - count gets 20\"</i> ...and know that that doesn't make sense.\r\n</p>\r\n\r\n<p></p>\r\n</details>\r\n\r\n" - CSPU5_U3L15 - DEMO up down count practice app_markdown_instruction: "# All - the Basics You Need\r\n\r\n<img src=\"https://images.code.org/abb09baa0b6ccc24ff141590c5b667c3-image-1446417655965.gif\" - style=\"float:right; width: 150px\"> When you close these instructions, you'll - get to play a little bit with the very simple app (shown at right) to demonstrate - the basics of concepts involved in making the clicker game. We'll call it - the **Count Up/Down App**. Yes, it's a boring \"game,\" but it has all the - pieces of a more sophisticated game.\r\n\r\nThis app demontrates a few new - concepts. We'll step through each one, one at a time, explaining how each - thing works. Along the way, we'll also encounter some common challenges, - and learn how to solve them.\r\n\r\n# Do This:\r\n* Keeping clicking the up - arrow until something happens (something besides the number increasing).\r\n* - Start over.\r\n* Click the down arrow until something happens (something besides - the number decreasing).\r\n* Start over.\r\n\r\nOnce you think you've seen - all the behavior click Finish to see the first part of how this is done.\r\n\r\n" - CSPU5_U3L15 - global var example count up_markdown_instruction: "# Using Variables - in Apps!\r\n<img src=\"https://images.code.org/f156f8d8524c3c0316e4db394e331bdc-image-1446060829590.gif\" - style=\"float: right; width: 200px;\">\r\nThe example program here has a small - portion of the *Count Up/Down App* written. Right now, what the app should - do is shown in the animation to the right.\r\n\r\n# Important Concept!\r\n\r\nThis - small functionality **demonstrates an important concept** - how to create - a variable in the app and update it when an event occurs. It may seem fairly - straightforward but there are some common misconceptions that we want to alert - you to.\r\n\r\n# Do This: Misconception Investigation\r\nOver the next few - levels you are going to do a small investigation of two apps that do almost - the same thing but *one works as expected* and *one with a bug* that demonstrates - an important concept about using variables in apps. Here is what you'll - do:\r\n\r\n1. **Run this app, which works properly.**\r\n * Study the code - until you think you understand what's happening.\r\n * Pay attention to the - code that handles the up arrow being clicked.\r\n\r\n2. **Run the app on the - next screen, which has a bug.**\r\n * On the next screen we show you almost - the same app, but with a subtle problem.\r\n * See if you can spot the difference - and fix it.\r\n\r\n3. **Report what you found!**\r\n * We'll ask you to report - what you found. It's not a quiz. You can go back and forth until you spot - the problem, but you should find it and be able to write what it is.\r\n" - CSPU5_U3L15 - mini clicker update score_markdown_instruction: "# Using Global - Variables\r\n\r\nYou'll now look at a version of the clicker game. We've - set up the basic functionality to move the apple around the screen, and have - __created a global variable to keep track of the score.__\r\n\r\n# Do This:\r\n__Add - code to update the score when the apple is clicked.__ Remember that you'll - have to update both the global variable _and_ the label text!\r\n\r\n<img - src=\"https://images.code.org/001640fd24fc487af534ab769ed196e2-image-1446136596261.gif\" - style=\"width:200px\">" - CSPU5_U3L15 - practice with setText_markdown_instruction: "# Changing Elements - on Screen \r\n\r\nThere's another way to display text in your app besides - `console.log` and `write`. \r\n\r\nThere is a command called `setText` which - will **change the text of a component on screen** given its id. This is a - very powerful technique and one that you will use a lot. Here's what it looks - like in action....\r\n\r\n<img src=\"https://images.code.org/3e5dd320801720d5c62a49146d9ee3d2-image-1446056202170.gif\" - style=\"width: 500px\">\r\n\r\nLet's do a **very simple** example of using - `setText`.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/5fc22aef5e8f5161f95a2507c1ec006b-image-1446056758249.gif\" - style=\"float: right; width: 175px; border: solid 1px #AAAAAA\">\r\n* **Run - the code** in the app.\r\n \r\n Look at the code for the \"upArrow\" event - handler and how it sets the text of the label.\r\n \r\n* **Modify the code.**\r\n - \r\n When the down arrow is clicked, set the text of the label to something - else.\r\n\r\n* **GOAL:**\r\n * Your only goal is to successfully use `setText` - in this example app.\r\n * The app should do something similar to the animated - example at right.\r\n\r\nOnce you've got it functional, click Finish to move - on.\r\n \r\n\r\n" - CSPU5_U3L15 - Simple If-statements in UpDown App_markdown_instruction: "# Add - Your Own *if* Statement\r\n\r\nIn most apps you want to make decisions based - on the state of some data you're keeping track of in the app. \r\n\r\nWe've - **modified** the *Count Up/Down App* to add another screen. When the count - reaches certain values, we'll switch screens. In the code you'll see an - `if` statement has been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n - * **If** the value of `count` is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img - src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" - style=\"width: 150px; float: right\">\r\n\r\n# Do This:\r\n**Add an `if` statement - so that when counting down the app changes screens when the count reaches - -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what - happens when the `if` statement is triggered.\r\n* **Study the `if` statement** - for the up arrow button to see how it works.\r\n* **Add an `if` statement** - to the down arrow event handler:\r\n\t* **If** `count` is equal to **-5, then** - set the screen to the \"gameOverScreen.\"\r\n* **Goal:** Once you're finished, - clicking the down arrow in the app should work like the animation shown to - the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click - to expand]</summary>\r\nThere is a subtle challenge here that you need to - set the text of the label on the <i>gameOverScreen</i> when you change screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> - Your code can call `setText` for any UI element, on any screen, at any time - - even if the element isn't on the screen that's currently showing.\r\n</details>\r\n\r\n" - CSPU5_U3L15 - variable scoping problem debugging_markdown_instruction: "# Debugging - Problem!\r\n\r\n**Uh oh!** The code here is subtly different from the one - in the previous example and **now there is a problem**.\r\n\r\n# Do This:\r\n\r\n* - **Run the app** and try it to see the problem. \r\n* **See the error.**\r\n - * Note that **NaN** stands for \"Not a Number\" - why would it say this?\r\n* - **Note the difference** between this broken version and the previous one that - worked.\r\n* **Fix the problem** so that it works as before." - CSPU5_U3L15 click add lives_markdown_instruction: "# Tracking Lives\r\n\r\nIn - the game, the number of lives starts at 3 and decrements by 1 every time the - background image is clicked. Add this functionality to your game!\r\n\r\n# - Do This:\r\n- __Add your variable to keep track of lives.__\r\n- __Add a click - handler for the background image.__ _ID: \"background\"_\r\n- __When the background - is clicked, decrement the number of lives by 1.__\r\n\r\n<img src=\"https://images.code.org/79f1352aebb2e40c302d1900aacd31f4-image-1446138180044.gif\" - style=\"width:200px;\">" - CSPU5_U3L15 full clicker app_markdown_instruction: "# Make Your Own \"Clicker\" - Game\r\nYou will be creating your own “clicker” game similar to the Apple - Grabber game you worked on in this lesson. \r\nThe general object of the game - is to click on an element that jumps around every time you click it. You will - pick your own theme and decide what the rules are and how to keep score.\r\n\r\n** - Your Main Tasks Are To:**\r\n\r\n * Pick a theme for your game and add appropriate - images and styling.\r\n * Add variables to track some data during gameplay.\r\n - * Add code to event handlers to update the variables and display appropriately.\r\n - \r\n**See Activity Guide for Requirements**\r\n\r\nThere is a full activity - guide and rubric for this project. You can find a link to it in the student - resources section for this lesson. Or ask your teacher for it.\r\n \r\n<img - src=\"https://images.code.org/146107536c50b4a3317f3ebbe2e66f37-image-1446418612319.png\" - style=\"float: right; width: 300px\">\r\n** Template **\r\n\r\nThis level - is a template for the app. You should **run it to see what it does** right - now. You will modify *this* template, both the design elements and the code, - for your project.\r\n\r\nThe template has 4 screens and some basic navigation - functionality and event handlers set up for you. The game play screen uses - the images from the Apple Grabber game, but you should replace these with - images related to your chosen theme.\r\n\r\n" - CSPU5_U3L15 spot the difference variable debugging_markdown_instruction: "Respond - to the following questions about your investigation into the bug with the - counting game. Feel free to go back and look at the game again (but do so - in another tab or be sure to click \"Submit\" to save your work!):\n\n- From - the user's perspective, what was the difference between the first version - of the game and the one with the bug?\n- From looking at the code, what specifically - was the difference between the two, and why is that an issue?\n- How did you - fix the bug?\n" - CSPU5_U3L16 - challenge say hi app_markdown_instruction: "# Introducing the *change* - Event\r\n\r\nDid you notice with the demo digital assistant that you could - just __type a question, hit 'enter', and the assistant would respond__? - Up until now you've been using the click of a button to trigger getting the - text from an input or text area.\r\n\r\nYou can use a new event type to get - this behavior: The __'change' event__ is triggered when the user hits 'enter' - in a text input after typing.\r\n\r\n\r\n<img src=\"https://images.code.org/7d1725b236471f8e2a0efed5870660da-image-1446071579670.32.36.png\" - style=\"width:350px;\">\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/f8f1f7ae18acbc570a367886bcd6ca88-image-1445976541574.gif\" - style=\"width:250px;\">\r\n- A __text input__ has been created for you that - asks for a user's name.\r\n- Attach a __'change'__ event handler to the - text input.\r\n- When the 'change' event triggers, __write the user's name - and a greeting__.\r\n" - CSPU5_U3L16 - chaserApp_markdown_instruction: "# Chaser Game\r\n\r\nYou now - have all the skills you need to make a simple \"chaser\" game. A chaser game - is just a game where an image runs away from your mouse.\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" - style=\"float: right\">\r\n\r\n# Do This:\r\n\r\n**Create a \"Chaser Game\"** - which includes the following components:\r\n\r\n* **Text** on the top of the - screen with a title or instructions for what to do.\r\n* **An image** that - \"runs away\" (moves randomly) based on some mouse event.\r\n\r\nOnce you - have the basic functionality down feel free to spend time adding more features - to your application.\r\n<br><br><br>\r\n\r\n" - CSPU5_U3L16 - chooseImages_markdown_instruction: "# Choosing Your Own Images\r\n\r\nThe - second parameter of the `image` command allows you to set the image to be - displayed. There are two ways to do this:\r\n1. Provide the URL of an image - on the web.\r\n2. Upload an image from your computer (by clicking \"choose...\").\r\n\r\n![](https://images.code.org/e726e56fd3e4c7cd4a0d58cba731a855-image-1444240440116.53.49 - PM.png)\r\n\r\n\r\n# Do This:\r\n\r\n* **Read the documentation for `image`** - for tips on how to find an image's URL and how to upload.\r\n* **Change the - image** to one you've found online or from your own computer.\r\n\r\n**NOTE:** - many images are bigger than the screen of your app, so it's likely you'll - need to add a `setPosition` command to get it on the screen sized the way - you want." - CSPU5_U3L16 - doubleQuotes_markdown_instruction: "# Importance of Double Quotes\r\n\r\nYou - may have noticed that the strings we've seen are **wrapped in double quotes**. - These double quotes **are not part of the string**. Instead this is how you - indicate that a sequence of characters **is a string and not the name of a - variable**.\r\n\r\nAs you start writing programs with strings **it is common - to generate errors from forgetting to place them in double quotes**. We're - going to generate some of those errors now so that we can recognize them more - easily later.\r\n\r\n![](https://images.code.org/89235457b9b9bf76ac4f8221cae5a62e-image-1445987270682.07.24 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **This program generates many errors** - because strings were not placed in quotes.\r\n* **Run the program** before - you change it to see the errors that are generated.\r\n* **Add double quotes** - around all the strings so that the program runs without errors.\r\n\r\n" - CSPU5_U3L16 - intro getText_markdown_instruction: "# Getting Text Input\r\n\r\nAs - we saw a user can now type inside of a text input whenever they want, **but - now we'll need a way to access that text**. In order to do that you'll need - to use the `getText` command, which you can now find in the **UI Controls** - tab.\r\n\r\n<img src=\"https://images.code.org/0c6774f2b6d33f8107ec2936102b1a10-image-1445533677192.58.24 - PM.png\" style=\"width: 150px;\">\r\n\r\nYou can use a `getText` command just - like a string within a `console.log` or `write` command. Just like with `setText` - you will refer to the UI element by its ID.\r\n\r\n![](https://images.code.org/c17e419301d0cfeebf7f0ccee13e415f-image-1445892504376.47.54 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **Read the documentation ** for `getText`.\r\n* - **Add an event handler to the Submit button** that fires when your button - is clicked.\r\n* **Inside the event handler** place code that will **log the - name your user input to the console**.\r\n\r\n" - CSPU5_U3L16 - introSetPosition_markdown_instruction: "# How to Organize the - Code\r\nAs your apps get more complex you'll have to think about how to organize - your code so it remains readable and easy for you to locate things when debugging - any problems. We suggest the following convention which breaks the code into - 3 major sections:\r\n* **Top**: code for UI elements **and** any code for - positioning them.\r\n* **Middle**: code for event handlers.\r\n* **Bottom**: - code for any other other functions you've written. (We don't have any of - these yet.)\r\n\r\nSo if you have some existing code and want to insert a - `setPosition` command, you should place it after `button` but before `onEvent` - in the code, like this:\r\n\r\n<img src=\"https://images.code.org/ae17e62c077aa9698526371d22db1307-image-1448404255046.gif\" - style=\"width: 500px\">\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/3a834b8a4313e31a453525a69acda1f4-image-1444335250982.png\" - style=\"float: right; width: 175px\">\r\n\r\n* **Starter code** has been provided - which creates two buttons and event handlers.\r\n* **Insert** `setPosition` - commands for each button so they appear at the bottom of the screen (as shown).\r\n * - **Remember:** in an app screen 0,0 is the top left corner and you specify - a location by how many pixels from the left and how many down from the top - of the screen it is. The screen is **320 by 450 pixels**." - CSPU5_U3L16 - introStrings_markdown_instruction: "# Strings\r\n\r\nThe primary - data type we have used so far is **Numbers**. If we want to interact with - user-submitted text, however, we'll need to learn about a new data type called - a **String**. A string is a **sequence of ASCII characters**.\r\n\r\n**Example** - | **Rule**\r\n---|---\r\n`\"aString\"` | Strings **might** look a lot like - a variable name but there are **many differences**.\r\n`\"look at all these - spaces\"` | Strings can **contain spaces**.\r\n`\"$2 bills are the coolest\"` - | Strings can **contain special characters** (and even start with them).\r\n`\"11\"` - | Strings might **contain only digits**. This looks like a number but it is - really 2 ASCII characters.\r\n`\"\"` | Strings might **contain no characters**.\r\n<br>\r\nYou - can **store strings in a variable just like a number**. In this example the - variable name is `str` but you should choose a name that is **descriptive - and meaningful**.\r\n\r\n![](https://images.code.org/56e6b30a51556aa3b516e0a49b51cbeb-image-1445894334432.18.40 - PM.png)\r\n\r\n**Combining Strings:** often you will want to combine multiple - strings to create one longer string. You can do this with the `+` operator. - The formal name of this process is **concatenation**.\r\n\r\nThe program you're - about to see is a very simple Mad Libs app that uses strings that are created - inside the program and saved inside of variables. These strings are then - **concatenated** with other strings to create a Mad Lib.\r\n\r\n# Do This:\r\n\r\n* - The input words of this Mad Lib are **currently set to the empty string**.\r\n* - **Add your own input words** and run the program to generate the Mad Lib." - CSPU5_U3L16 - newEventTypes_markdown_instruction: "# New Elements and Events: - New Event Types\r\nYou just wrote your first program that **does not include - the turtle**! Moving forward we're going to focus much more on programming - apps that use User Interface (UI) elements, but we'll keep the turtle library - around in case you want to use it.\r\n\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 - AM.png\" style=\"float: right\">\r\n\r\n**New Events**: You may have noticed - that the `onEvent` block has a pull-down menu for the event **type** (see - right).\r\n\r\n# Do This:\r\n\r\n* **Experiment** with **each of the different - types of mouse events** by selecting from the list. You can also read about - them in the documentation.\r\n\t* click\r\n * mousemove\r\n * movedown\r\n * - mouseup\r\n * mouseover\r\n* **Choose** the mouse event type you like most - and change your event handler to use it.\r\n* **Note:** There are some events - that capture keystroke events. These are interesting, but they do not work - easily with buttons. We'll stick to mouse events for now, and get to keys - later.\r\n\r\n**Be sure** to experiment with each one. The next exercise - will quiz you on which one is which.\r\n\r\n" - CSPU5_U3L16 - outputWithTextArea_markdown_instruction: "# Generating Text Output\r\n\r\nSo - far we've been outputting our messages to the console, but now we'd like - to display them in the app. In order to do so we're going to be using a new - UI element called a `textArea`. You can use `setText` with a `textArea` just - like you would with a `textLabel`.\r\n\r\n![](https://images.code.org/45e6b6cdb1ca87f53cf1d6bba97cb812-image-1445977693641.24.43 - PM.png)\r\n\r\nIf we want to combine user input with default text we can do - so with **string concatenation**. Together with a `textArea` we can use this - ability to compose longer messages based on user input.\r\n\r\n# Do This:\r\n\r\n* - **Add a `textArea`** to your app and give it a descriptive and meaningful - ID.\r\n* **Create a variable inside your event handler** called `userMessage` - to hold the full message that will be sent to the user.\r\n* **Use string - concatenation** to compose a message from the user input.\r\n* **Use `setText`** - to place your `userMessage` inside the `textArea` you created.\r\n\r\n<img - src=\"https://images.code.org/193af3e0c993dbf0b7af9c571ec5f56d-image-1445977696957.27.08 - PM.png\", style=\"width:250px;\">" - CSPU5_U3L16 - setPosition to fixed location_markdown_instruction: "# Using - setPosition\r\n\r\n<img src=\"https://images.code.org/b664824ffeb3347b2e0b6d12447b4e8b-image-1476891499229.gif\" - style=\"width: 150px; float: right;\">\r\n\r\n**Now you try it** - use [setPosition](#triggercallout=setPosHover) - to **move the button to the middle of the screen when clicked**. We've set - up a small project for you with a button (id: `moveBtn`) already added in - design mode.\r\n\r\n1. Add an `onEvent` block\r\n2. Drag a `setPosition` command - into the event handler function\r\n3. Set the x,y coordinate so that the button - ends up in the middle of the screen.\r\n * You'll need to experiment a little - bit to find coordinates that work for you.\r\n * Hover over the screen to - find a good starting point.\r\n\r\n**Tip**: when you see a command that is - linked like this: [setPosition](#triggercallout=setPosHover) click it! -- - it will show you other hints.\r\n\r\nOnce you've got the button moving to - the middle of the screen click Finish to move on to the next challenge.\r\n" - CSPU5_U3L16 - setPosition to move button_markdown_instruction: "<img src=\"https://images.code.org/dc1f942b805f07b3581c678ed1669a27-image-1476892595302.gif\" - style=\"float: right\">\r\n# Using setPosition and randomNumber\r\n\r\n<img - src=\"https://images.code.org/a501391fac0c396a197aaaf357e73972-image-1476892143359.gif\">\r\n\r\n**Now - you try it** - instead of using a fixed value, you use [randomNumber](#triggercallout=showRand) - to set the x and y coordinates for setPosition. Now you'll have to chase - the button all over the screen!\r\n\r\n* Make it so that the button could - jump *anywhere* on the visible screen each time it's clicked.\r\n* Extend - it: if you want to get really nuts, you could add back in the *width* and - *height* parameters of setPosition and make the size of the button *also* - change randomly with each click!\r\n\r\nOnce you've got the button jumping - around the screen. Click **Finish** to move onto the next level.\r\n" - CSPU5_U3L16 - singleSetPosition_markdown_instruction: "# Moving and Sizing - Buttons\r\n\r\nAn important component of designing intuitive and visually - appealing user interfaces is the location of the elements on the screen. Using - the `setPosition` command (now added to the Toolbox) you can move and set - the size of user interface elements.\r\n\r\n![](https://images.code.org/c3e42223cbcb096f992d758973d09f63-image-1444664597665.42.48 - AM.png)\r\n\r\n**NOTE:**\r\n * If you only want to set the size you can use - the `setSize` function which looks like this:\r\n\r\n ![](https://images.code.org/cb742ecf96c04477db0f8361ad5dcdaf-image-1448924017288.png)\r\n\r\n - * If you *only* want to set the position *without* changing the size of the - element, you can omit the *width* and *height* parameters from the `setPosition` - function. To do that, you need to switch into text mode, like this:\r\n\r\n - <img src='https://images.code.org/5b565ef5b74b5cd657ba15c67be92b0d-image-1448924356253.gif' - style=\"width: 400px\">\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** - for `setPosition`.\r\n* **Starter code** has been provided which creates a - single button.\r\n* **Move the button to the middle of the screen** using - `setPosition`, as in the image below. (You may need to experiment a little - bit with the x,y location to get it right).\r\n* **Remember:** in an app screen - 0,0 is the top left corner and you specify a location by how many pixels from - the left and how many down from the top of the screen it is. The screen is - **320 by 450 pixels**.\r\n\r\n![](https://images.code.org/62840468826ce153d3d0d80bca303827-image-1444662614963.10.05 - AM.png)\r\n\r\n" - CSPU5_U3L16 - text labels_markdown_instruction: "# New Elements and Events: - Text Labels\r\n<img src=\"https://images.code.org/20d50fd324908fc48633e1325cc37603-image-1444662791509.png\" - style=\"float: right\">\r\nThe UI controls toolbox contains an element called - `textLabel`. A text label is what it sounds like: plain text that you can - put in your app. Even though it's just plain text you can still move and - resize it using `setPosition`, and you can attach event handlers to it as - well.\r\n\r\n**NOTE:** resizing a text label does not change the font size - of the text. We'll learn how to do that later. \r\n\r\n# Do This:\r\n\r\n* - **Read the documentation** for `textLabel`<img src=\"https://images.code.org/fe2ce5f335fd124dc3052270ca0af31f-image-1444336014658.gif\" - style=\"float: right; width: 150px\">.\r\n* **Modify** the program so that - your button is now a text label. Just as before, it should move randomly around - the screen when clicked. You can make the text whatever you like.\r\n* **Tip:** - If you reuse your button's ID you'll only need to change a single line of - code to make your program work. Once you have your program working **choose - a descriptive and meaningful ID** for your text label and make the appropriate - changes in the event handler.\r\n\r\n<br>\r\n<br>\r\n<br>\r\n\r\n" - CSPU5_U3L16 - textInput getText write_markdown_instruction: "# Text Input Elements\r\n\r\nSo - far we've been using `promptNum` as a simple way to get a number as input. - Now that we know a little about strings we are going to create **user interface - elements that users can use to submit text (i.e. strings) instead**. The first - and simplest example is `textInput` which you can find in Design Mode.\r\n\r\n<img - src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 - PM.png\" style=\"width: 100px\">\r\n\r\n# Do This:\r\n\r\n* **Add two text - input elements to this program**, one for the name and one for the age of - the user.\r\n* **Give your text input elements descriptive and meaningful - IDs**.\r\n* **In Design Mode** set their default text to prompt the user for - their name and age.\r\n* **Compare your app to the example below**.\r\n\r\n<img - src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 - PM.png\" style=\"float:left; width:200px;\">\r\n<br>" - CSPU5_U3L16 - toUpper_markdown_instruction: "# String Capitalization\r\n\r\nIf - you want to change the capitalization of a string you can do so with two new - functions\r\n\r\n![](https://images.code.org/d8523cdae7c07b34baa1c61809bb80d4-image-1445980407200.42.31 - PM.png)\r\n\r\nNote that the syntax is similar to `console.log` . This is - because `toUpperCase` really only makes sense as a command when you are using - a **string**, just as `log` only makes sense when you are talking about the - console. This function **evaluates to a new string in which all characters - have been made uppercase / lowercase**. If you want to update the value in - your original variable you'll have to do so explicitly, as in\r\n\r\n```\r\nvar - myString = \"lower case for now\";\r\nmyString = myString.toUpperCase();\r\n```\r\n\r\n# - Do This:\r\n\r\n* **Update your application so that the user's name is printed - in UPPERCASE**.\r\n\r\n<img src=\"https://images.code.org/26d8ffb7c631c1c510f781b5bf46d494-image-1445980322936.04.55 - PM.png\", style=\"width:250px;\">" - CSPU5_U3L16 - use images_markdown_instruction: "# New Elements and Events: - Images\r\n\r\n<img src=\"https://images.code.org/a84297658be45dc78bc401d387d10436-image-1444663322356.21.25 - AM.png\" style=\"float: right; width: 120px\">\r\nImages make applications - more visually pleasing and interactive. You can add images to your application - using the `image` command. For now, just add an `image` element to your app - (the default image link is the Code.org logo) and don't worry about choosing - a unique image just yet. We'll do that in the very next exercise!\r\n\r\n\r\n# - Do This:\r\n<img src=\"https://images.code.org/8df7b1b56c71de7ad9770646bd7f8792-image-1444336140877.gif\" - style=\"float: right; width: 250px\">\r\n\r\n* **Modify** the program - change - the `textLabel` to an `image` so that the image moves randomly around the - screen based on the event you chose.\r\n* **Tip:** If you reuse your text - label's ID you'll only need to change a single line of code to make your - program work! Once you have your program working though, it's probably a - good idea to choose a descriptive and meaningful ID for your image and make - the appropriate changes in the event handler.\r\n\r\n<br>" - CSPU5_U3L16 Mad Lib Clear Input_markdown_instruction: "# Play It Again and - Again!\r\n\r\nWhen the user clicks the \"Play again\" button, the first screen - should reset and not show the user's previous text.\r\n\r\n# Do This:\r\n- - When the \"Play again\" button is clicked, __clear the text from each text - input__ on Screen 1.\r\n- __Free play:__ Add images, or more How-to steps - for your Mad Libs, and invite others to play!\r\n\r\n<img src=\"https://images.code.org/a49fe3eba4d2d2fb03e45d15aad53dbf-image-1450143105779.16.14 - Mad Libs play again button.gif\" style=\"width:200px\">\r\n\r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nTry - setting the text to the empty string: `\"\"`.\r\n</details>\r\n" - CSPU5_U3L16 Mad Lib Demo_markdown_instruction: "# Getting Text from the User\r\n\r\nUp - until now, the event-driven apps you have created responded to the user clicking - an element or typing a number when you used `promptNum`. __What if we want - the user to provide _text_ instead of a number?__ You can probably think of - many apps and websites that ask you to provide text in order to do something.\r\n\r\nIn - programming, we have to represent text in a specific way to distinguish it - from other words in our code, such as variable names. But we'll cover that - later...\r\n\r\nAt the beginning of class you created a Mad Libs on paper, - which takes user input in the form of nouns, adjectives, and verbs to create - a unique \"How-to\" manual. You'll be translating your own Mad Libs How-to - into an app in this lesson.\r\n\r\n# Do This:\r\n\r\n- __Play with this Mad - Libs app__ a couple of times to see a digital version of the paper game. \r\n- - __Think about how the final text is created__ based on the input from the - user. How would you describe in words the algorithm for creating it?" - CSPU5_U3L16 Mad Lib getText_markdown_instruction: "# Make It Mad! Add the User's - Text to Your Mad Libs Outline\r\n\r\nNow that you have your Mad Libs outline - appearing in the text area, it's time to __incorporate the user's text__ - to make your Mad Libs come alive.\r\n\r\n# Do This:\r\n\r\n- Did you pick - good ID names for your text input elements? Update them now if you didn't!\r\n- - When the __Next__ button is clicked, __get the user's text from the text - inputs on Screen 1 and store each in a separate variable__.\r\n- Use string - concatenation to __incorporate the user's text into your Mad Labs string__ - before updating the text area on Screen 2. \r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nUse - `getText` to get the text from each of the text inputs on Screen 1.\r\n</details>\r\n<details>\r\n<summary>**Should - I make local or global variables?**</summary>\r\nRemember that the decision - to create local variables or global variables is a question of _scope_. Where - will you need to access these variables in your program? If you are only using - the variables in the click callback function for the \"Next\" button, then - they can be _local_ variables in that function. \r\n</details>" - CSPU5_U3L16 Mad Lib setText_markdown_instruction: "# Update the Text Area with - Your Mad Libs Outline\r\n\r\nWhen figuring out how to make progress with a - program, it helps to break the problem down into smaller steps and test your - program incrementally. So rather than jumping straight to getting the user - input and __concatenating__ it with your Mad Libs outline, start first by - just making sure that you can get your Mad Libs outline to appear in the text - area when the __Next__ button is clicked on the first screen. \r\n\r\nBut - wait! If you just use `setText` and pass in the string of your Mad Libs outline, - it will look like the screen on the left where all the steps are smushed together. - You can use one or more newline characters, `\"\\n\"`, in your string to create - a line break in your text.\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Without - newlines</strong>\r\n</td>\r\n<td>\r\n<strong>With newlines</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n\r\n<img - src=\"https://images.code.org/24fb1385d6199cd52c6e1d3d11e547fc-image-1448404478181.png\" - style=\"width:201px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/3a627993f9e0e4a6d462c8a21b335058-image-1448404299215.png\" - style=\"width:200px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n\r\n# - Do This:\r\n\r\n- When the __Next__ button is clicked, you already switch - to Screen 2, but now you should also call `setText` on the text area on Screen - 2 to your Mad Libs outline. See the images above for one way to temporarily - handle the word placeholders.\r\n- Add in newline characters `\"\\n\"` in - your Mad Libs string to format it.\r\n\r\n<details>\r\n<summary>**Newline - Examples**</summary>\r\n<table style=\"width:100%; margin-left:25px;\">\r\n<tr>\r\n<td - style=\"vertical-align: text-top; border-right:1px solid #000\">\r\n\t**Example1:**<br/><br/>\r\n \r\n <samp>console.log(\"How - to Drive\\nStep 1.\");<br/><br/></samp>\r\n \r\n *will be displayed - as...*<br/><br/>\r\n \r\n <samp>How to Drive<br/>Step 1.<br/><br/></samp>\r\n \r\n *...on - your console.*\r\n</td>\r\n<td style=\"padding-left:20px;\">\r\n<samp>**Example2:**<br/><br/>\r\n \r\n var - step1 = \"Step 1: ...\";<br/>\r\n \r\n var step2 = \"Step 2: ...\";<br/>\r\n \r\n console.log(step1 - + \"\\n\" + step2);<br/><br/></samp>\r\n \r\n *will be displayed as...*<br/><br/>\r\n \r\n <samp>Step - 1: ...<br/>Step 2: ...<br/><br/></samp>\r\n \r\n *...on your console.*\r\n</td>\r\n</tr>\r\n</table>\r\n</details>" - CSPU5_U3L16 Mad Lib Student Setup_markdown_instruction: "# Back to Mad Libs: - Design Your App\r\nNow that you've had some practice getting user text and - making new strings with it, you're ready to turn your How-to Mad Libs into - an app. To get started, you'll set up the layout. There are two main screens:\r\n\r\n__Screen - 1: Collect User Input__ \r\n- On this screen, you'll use __text labels__ - and __text input__ design elements to set up the different words you want - the user to provide.\r\n- A __Next__ button takes you to Screen 2 to view - the full Mad Libs.\r\n\r\n__Screen 2: View Mad Libs__ \r\n- On this screen, - you'll use the __text area__ design element to create the space where the - user's completed Mad Libs will be displayed.\r\n- A __Play again__ button - takes you to back Screen 1.\r\n<br>\r\n<br>\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Screen - 1:</strong>\r\n</td>\r\n<td>\r\n<strong>Screen 2:</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/ccea092b516047dff82fafa50b47bcc7-image-1447974038265.00.17 - PM.png\" style=\"width:150px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/0f832e6314ad98170a3cddb317d26e41-image-1445898480304.27.45.png\" - style=\"width:151px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n# - Do This:\r\n\r\n- Create the two screens for your app, including the design - elements in each one.\r\n- Requirement: Request at least 3 separate words - from the user on Screen 1.\r\n- Create the event handlers for the __Next__ - and __Play again__ buttons to respond to clicks.\r\n- Use `setScreen` in the - event handlers to get the screen navigation working.\r\n" - CSPU5_U3L16 Mad Lib toUpper_markdown_instruction: "# Why Are You Yelling At - Me?! *toUpperCase* and *toLowerCase*\r\n\r\nThe main functionality of the - Mad Libs app is complete, but there are some finishing touches to add. The - user may type input with random letter capitalization, but the Mad Libs output - string should be consistently capitalized.\r\n\r\n# Do This:\r\n\r\n- Pick - one or more pieces of the user's input text to transform into \"yelling\" - or emphasize by __making it uppercase__ before displaying it.\r\n- For the - other pieces of the user's input text, __make it lowercase__ before displaying - it.\r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nRemember the rules - of updating variables! You can update a variable after first getting its current - value and then doing something with it. <br> Example: `song = song.toUpperCase();`\r\n</details>" - CSPU5_U3L18 comparison operators_markdown_instruction: "# Explore Comparison - Operators with Console.log\r\n\r\n**Your task:** Make each expression evaluate - to **true** by changing only the comparison operator.\r\n\r\nWe can easily - test the results of comparison operators with `console.log`. \r\n\r\n* Run - the code provided - see results in the console debug area below.\r\n* All - of the Boolean expressions currently evaluate to `false`.\r\n* **Modify the - code** so they all evaluate to `true`\r\n* **Change only the operator**\r\n\r\nExample:\r\n\r\n* - `(3 > 4)` evaluates to **false**...\r\n* Change it to `(3 < 4)` (*3 is **less - than** 4*) to make it **true*\r\n\r\n**HINT:** The workspace starts in text - mode because you might find that doing this in text mode is much easier and - faster than dragging out new blocks. You can flip back to block mode if you - like.\r\n" - CSPU5_U3L19 - fix the var name syntax error v2_markdown_instruction: "<!---\r\n# - Debugging Variables\r\n<img src=\"https://images.code.org/18cb0f3b0fc43def369a3329854edc2e-image-1447272068495.png\r\n\" - style=\"float: right; border: solid 1px black; width: 350px\">\r\n\r\nOne - of the most common errors that can happen when you try to run a program is - `Unknown identifer`.\r\nThis is just the computer trying to tell you that - it doesn't recognize something you wrote. Usually it's the name of a variable - or function that you're trying to write and there is a small misspelling.\r\n\r\n**The - computer doesn't hate you :)** It just needs everything to be exact so it - can understand what you're trying to get it to do.\r\n\r\n**App Lab** alerts - you to potential errors in two ways:<img src=\"https://images.code.org/329990c2e51e1e07a16d5e550cf766f0-image-1447272337465.gif\" - style=\"width: 350px; float: right; border: solid 1px black\">\r\n\r\n* Hover - your mouse over the yellow triangles or red squares next to line numbers in - the code to see what they say.\r\n* As usual, the Debug Console will also - tell you about any errors while your program is running. \r\n--->\r\n\r\n# - Do This:\r\nWe've given you some code with some errors in it. Look at the - error messages and try to figure out the problem.\r\n\r\n* **Run the program**.\r\n* - **Locate and fix the error**.\r\n\r\nWhen you get it right the output to the - console should look like this:\r\n\r\n![](https://images.code.org/9c7a8eb5db973f81eb2faa89713d4f30-image-1445477911014.png)\r\n\r\nAs - a reminder, App Lab gives you hints about errors in two ways: \r\n\r\n* Hover - your mouse over the yellow triangles or red squares next to line numbers in - the code to see what they say.\r\n* As usual, the Debug Console will also - tell you about any errors while your program is running. \r\n" - CSPU5_U3L19 - test reassignment of two vars_markdown_instruction: "# Variable - Reassignment - Part 1\r\n\r\nSo far we have only set a variable's value once. But - it's called a *variable* for a reason - its value can change (or vary) throughout - a program. This is useful and necessary for keeping track of things like a - score in a game.\r\n\r\nTo re-assign a value to a variable all you have to - do is maintain the mental model of what's happening:\r\n\r\n * Variables - are containers for information.\r\n * The `=` sign is an instruction to set - the value.\r\n * A series of assignment statements (see example to right) - is a list of instructions to execute one at a time - it's not a series of - equations that define the state of the world.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/066db834ae289ac538609b68c6492c4a-image-1445944263895.png\" - style=\"float: right\">\r\n\r\n * **Make a prediction.**\r\n\r\n The code - on the following screen looks like what is shown at right. Study it and make - a prediction about what will happen when you run the code. What will the values - of `a` and `b` be at the end of the program?\r\n\r\n* **Add `console.log` - statements.** \r\n\r\n Prove it to yourself by adding `console.log` statements - at the end of the program to find out what the value of `a` and `b` are.\r\n - \r\n* **NOTICE:** in the code above, after the variable `a` has been created - using `var`, to change a variable's value, you only need to refer to the - variable by its name. The word `var` only needs to be used once - when the - variable is created for the first time. \r\n\r\n* It's a **common mistake** - to use `var` everytime you want to *use* a variable but just **remember `var` - means CREATE a new variable**. When you create a new variable it will lose - its old value. We'll look at errors related to this later.\r\n\r\n" - CSPU5_U3L19 - three basic ops of variables_markdown_instruction: "# Variables - Toolbox\r\nLet's get started with the most basic example of using and controlling - the computer's memory with variables. The toolbox has a couple of new commands - for working with variables.\r\n\r\nWe've given you some starter code that - does three things:\r\n<table>\r\n<tr>\r\n<td>\r\n<ol>\r\n<li>**Creates** a - variable called `score`</li>\r\n<li> **Assigns** the value *0* to `score`</li>\r\n<li>**Displays** - the value of the `score` to the console (see hint below about quotes) </li>\r\n</ol> - \r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/056a735a96a603e23768d66f0de32961-image-1445462590619.png\" - style=\"width: 350px\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n\r\n# Do This:\r\nYou're - going to add another variable, assign it a value, and then display it to the - console.\r\nUse the starting code as a model for what you need to create now.\r\n<img - src=\"https://images.code.org/72744382133081947777e67a5988d4ea-image-1445462803999.gif\" - style=\"float: right; width: 350px\">\r\n* **Create a new variable** by dragging - out the `var` block.\r\n* **Change the name of the variable** from the default - `x` to `lives` (see animation at right).\r\n* **Set the value of `lives` to - be 3**.\r\n* **Add** `console.log` **messages** to show the value of `lives`.\r\n\r\nThe - output in the debug console should look like this:\r\n \r\n <img src=\"https://images.code.org/6405a3ed95ca3125ea1b2c9ffbdffa94-image-1445349849482.png\" - style=\"border: solid 1px gray\">\r\n<details>\r\n <summary> Debugging Tip: - Displaying values of variables [click to expand]</summary>\r\n **NOTE: To - print the value of a variable you *should not* use quotes.**\r\n Notice - the difference between these two statements: <br>\r\n `console.log(\"score\")`<br>\r\n `console.log(score)`<br>\r\n It's - subtle but important:\r\n <br>\r\n <li>When `console.log` sees quotation - marks it thinks you want to print out the literal characters in the quotes.\r\n <li>When - `console.log` sees something **without quotation marks** it assumes you're - trying to print a variable, and it goes to retrieve its value and displays - that. </li>\r\n \r\n</details>" - CSPU5_U3L19 - variable reassignment challenge pt2_markdown_instruction: "# - Wrapping Up Variables - This is Not Math Class\r\n\r\nHopefully you now understand - the gist of working with variables. The major thing to remember is that every - time you see an `=` sign it means that you are instructing the computer to - set a variable to a new value. \r\n\r\n<img src=\"https://images.code.org/ecced8eb916809f66ac7d555a819c2a6-image-1447803015383.17.43.png\" - style=\"float: right\">\r\nThe example to the right is something that definitely - wouldn't make sense in math class, but you should be able to reason about - it as a piece of code. Because it's code, you can also **insert** statements - to display the value of variables as they change. You don't have to guess!\r\n\r\n# - Do This:\r\n* ** Make a prediction.** \r\n\r\n As usual you should **first** - look at the code given to you and reason about what it does. You should try - to predict what the value of `num` will be after all lines have executed.\r\n\r\n* - ** Insert 3 `console.log` statements.**\r\n\r\n Insert `console.log` statements - into the existing code to display each value of `num` immediately after it's - changed. (The animation below shows how to get started.)\r\n \r\n ![](https://images.code.org/0e425ce1a186d49d230395032f970913-image-1447802992249.19.24 - add console message.gif)\r\n \r\n* **Was your prediction right?**\r\n \r\n - After you figure out the answer, if your prediction was off, try to understand - why. Where was your misunderstanding?\r\n" - CSPU5_U3L19 - write var and string with same name v2_markdown_instruction: "# - Debugging Variables\r\n<img src=\"https://images.code.org/1363b1799cd0f70e383664b4c6359ef4-image-1445479475849.png\" - style=\"float:right; width: 200px\">There is a simple command called `write` - in the UI Controls toolbox that is a fast and easy way to display text in - the app itself. The way you use it is very similar to `console.log`. Let's - debug another problem only using `write` instead of `console.log`. \r\n\r\nYou - may have already run into this problem! But it's worth mentioning again. - To display the value of a variable you *should not* use quotes. Notice the - difference between these two statements - the comments next to each line explains - the differences:\r\n``` \r\n write(\"score\"); // will display the literal - characters s-c-o-r-e\r\n write(score); // will retrieve the value of score - and display it\r\n```\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/a0ff680a245dba5546183e07ebbeaef2-image-1447270477159.png\" - style=\"float: right; width: 250px\">To solve these problems you **should - only add or remove quotation marks**.\r\n* **Run the starter code**\r\n* **Locate - and fix the problems**\r\n\r\n**GOAL:** Make the app display what's shown - at right by only adding or removing quotation marks from the code given.\r\n" - CSPU5_U3L23 Chatbot Conditionals 1_markdown_instruction: "# Adding Intelligence - Using Conditionals\r\n\r\nSo far the digital assistant you created responds - with the same message no matter what the user types. Let's look at how to - make the digital assistant smarter. Let's work on creating a Movie Bot example - before returning to your digital assistant.\r\n\r\nIn the last lesson we learned - about `if`, `else-if`, and `else` statements. These allow us to make decisions. - In the digital assistant we want to make decisions based on keywords. **The - first keywords we want the Movie Bot to respond to are the movie genres: comedy, - romance, action, and horror. **\r\n\r\n**Note: ** Check out the flowchart - below to see the logic we are trying to add. The current portions of the diagram - that we are creating are <mark>highlighted in yellow</mark>.\r\n\r\n# Do This:\r\n\r\n* - **Run the code** to understand what it does.\r\n\r\n* **Add `else-if` statements** - to the `if` to check if the word the user typed matches **action, romance - and horror**. **Note:** Movie Bot will only understand input in the form - of \"comedy\" not \"Comedy\" or \"What is a comedy?\" \r\n\r\n* **Add an `else` - statement** to print a default answer for any other input.\r\n\r\n<img src=\"https://images.code.org/8ec655795042a2a3a22a85f0886f0d21-image-1446067226646.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/8ec655795042a2a3a22a85f0886f0d21-image-1446067226646.png\" - target=\"_blank\">Open diagram in a new tab</a>\r\n" - CSPU5_U3L23 Free Response Getting Started_markdown_instruction: "Siri is a - digital assistant built into Apple's iOS devices, including iPhones and iPads. - Watch the advertisement for Siri, below. \n\n<iframe width=\"637px\" height=\"375px\" - src=\"https://www.youtube.com/embed/8ciagGASro0\" frameborder=\"0\" allowfullscreen></iframe>\n\n<br/>\n__Reflect - on the prompts below:__ \n\n- What types of information does Siri respond - to in the video?\n- What do you think Siri is paying attention to in order - to create these answers?\n" - CSPU5_U3L23 Free Response Wrap Up_markdown_instruction: "Identify a global - problem that a NLP (Natural Language Processing) application could be used - to help solve. \n\n* Describe the problem.\n* Explain how you think a NLP - app could contribute to a solution.\n* Describe how the app would interact - with the user. \n* What would you name the app? \n\n" - CSPU5_U3L24 Chatbot Basic Conditionals_markdown_instruction: "# Digital Assistant - Project\r\n\r\n**Your Digital Assistant Project is back!** Now that you've - learned how to use conditional logic to control your program flow, it's time - to add functionality to the digital assistant you previously designed.\r\n\r\n# - Do This:\r\n\r\n* You should have already created a flowchart to design the - logic for your digital assistant. \r\n* **Use your flowchart to program your - digital assistant so that it \"intelligently\" responds to user input.**\r\n\t* - Feel free to make changes to your existing project in Design Mode, if needed.\r\n* - **Test your program thoroughly** to make sure your digital assistant responds - to user input appropriately.\r\n* Once you're done, **submit your project!**\r\n" - CSPU5_U3L24 introIncludes_markdown_instruction: "# *includes*\r\n<img src=\"https://images.code.org/7373ad2ad98b0d815ce0b8196c2ec177-image-1446070324010.11.43 - PM.png\" style=\"width: 250px; float:right\">\r\n\r\nWe're going to explore - a new function called `includes`. This function can be used to check if one - string appears anywhere inside of another. Just like `toUpperCase` and `toLowerCase` - this function is called using **dot notation**.\r\n\r\n# *includes* Returns - a Boolean\r\n**`includes` is a function that returns a boolean.** In other - words, when the function runs it will **evaulate to either `true` or `false`**. - This function can be used **anywhere you would normally use a boolean expression**.\r\n\r\nYou've - actually **seen a few functions that return a value before this**. `randomNumber` - is a function that returns a number and `getText` is a function that returns - a string. In every case we've used these functions **as if they were the - data type they return (or evaulate to)**. Notice that in block mode these - functions don't have the connectors that other commands do since they will - be used as a piece of data within another function.\r\n\r\n# Do This:\r\n\r\n* - **Read the documentation** for `includes`.\r\n* **Starter code** has been - provided which shows one instance where a string does include a `searchValue` - and one where it does not.\r\n* **Replicate the style** of these commands - to check the rest of questions provided.\r\n* **Create three statements of - your own using `includes`** making use of the `console.log` statements provided.\r\n* - **Once you're comfortable with this command move on.**" - CSPU5_U3L24 Nested Conditionals 1_markdown_instruction: "# Adding *includes* - to the Movie Bot\r\n\r\nIf our Movie Bot is asked a question like \"What is - a good comedy movie?\" it currently won't know how to respond, **even though - the question includes one of its keywords.** By using `includes` we can allow - our Movie Bot to sense if a keyword appears anywhere in the question.\r\n\r\n# - Do This:\r\n\r\n* **Suggestion: Switch to Text Mode.** This will be much easier - in Text Mode.\r\n* **Change all your boolean expressions to use `includes` - instead of `==`**.\r\n* **Test out a couple sentences with your keywords** - to make sure the change worked.\r\n\r\n![](https://images.code.org/0df459c4ccd9b613b23409af7ff5f59e-image-1446139233341.gif)\r\n\r\n**Note: - ** Check out the flowchart below to see the logic we are trying to change.\r\n\r\n\r\n<img - src=\"https://images.code.org/ea8340252f50774c352f58fa7cc12e5c-image-1446069734921.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/ea8340252f50774c352f58fa7cc12e5c-image-1446069734921.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3L24 Nested Conditionals 2_markdown_instruction: "# Nested Conditionals\r\n\r\nThe - way we left the Movie Bot in the last exercise is a little strange to see - as a user. **Currently when the input doesn't have a question mark the Movie - Bot says \"I only respond to questions.\" but it still provides a recommendation**. - We're going to alter our code so that the movie recommendation is only provided - if the user asks a question.\r\n\r\n# Do This:\r\n\r\n* **Nest your movie - genre `if` statements** inside the \"?\" `if` statement so that **a recommendation - is made only if a question was asked**.\r\n* **Remove the \"That's a good - question.\"** output.\r\n* Ensure that **if your input is not a question** - then the response is **I only respond to questions.**\r\n* **Test out a couple - sentences with your keywords** to make sure the change worked.\r\n\r\n**Example - Input --->** | **Output**\r\n---|---\r\nWhat's the best action movie? | The - best action movie is any James Bond movie.\r\nI love comedy | I only respond - to questions.\r\n<br>\r\n**Note: ** Check out the flowchart below to see the - logic we are trying to change.\r\n\r\n<img src=\"https://images.code.org/c319d7ba43112451a6b25aa9475cacb5-image-1446074593924.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/c319d7ba43112451a6b25aa9475cacb5-image-1446074593924.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3L25 - drag out key event_markdown_instruction: "# *keypress*\r\n\r\nIf - we want to add keyboard input to our apps we'll need to learn about how key - events work in App Lab. To start let's take a closer look at the `onEvent` - block. We already know that event handlers call a function. What we'll see - now is that they also **pass a parameter**. The default name for this parameter - is simply `event` but you can change it to be anything you like. \r\n\r\nThe - `event` parameter is a more complex kind of variable (called an \"Object\") - that we'll learn more about later. For now just know that for both mouse - and keyboard events, the event parameter passes more information about the - event. In the case of key events **you can find out the key(s) that were actually - pressed by using `event.key`**.\r\n\r\n# Do This:\r\n\r\n* Drag out an `onEvent` - block.\r\n* Change the ID to `screen1` and the event type to `keypress`. \r\n\r\n<img - src=\"https://images.code.org/537b5bbef3db62c90155528e6753a00a-image-1447175732347.gif\" - style=\"width: 450px\">\r\n\r\n* Once you hit **Run**, **click on the screen - so that the keystrokes will register**.\r\n* **Type different combinations - of keys** and check out the results in the console. Does every key combination - print to the console? Some keys to try:\r\n * Letter keys\r\n * Number - keys\r\n * Shift key\r\n * Hold shift and letter\r\n * Delete key\r\n * - Left and right arrow keys\r\n * Press and hold a key" - CSPU5_U3L25 - play sound when up key_markdown_instruction: "# Play Sound With - Keys\r\n\r\nYou may have noticed from the last couple of levels that the value - of `event.key` is just a string which is the name of the key. As a result - we can check which key was pressed with a simple conditional statement. For - example to check for the press of the **\"a\"** key we could write `if (event.key - == \"a\")`.\r\n\r\n# Do This:\r\nThe **starter code provided** plays the sound - whenever ANY key is pressed.\r\n\r\n* Use `console.log` to **find out the - value of `event.key` when the up arrow is pressed.**\r\n\r\n* **Add an `if` - statement** so the sound only plays when the when the **up arrow** is pressed." - CSPU5_U3L25 Free Response 3_markdown_instruction: "What is the output of this - code segment?\n\n\tvar phrase = \"I am so\";\n\tvar emotion = \"excited\";\n\tvar - sentence = phrase + \" \" + emotion.toUpperCase() + \"!\";\n\tconsole.log(sentence);\n<br/>\n" - CSPU5_U3L26 AND operator_markdown_instruction: "# AND Operator in Movie Bot\r\n\r\nOn - the last level you may have noticed that if you typed in a question like \"What - is an R rated comedy movie?\" It gives two movie suggestions! It would make - more sense for it to give one suggestion.\r\n\r\nWe could use nested `if` - statements to do this by nesting `if` statements about ratings inside of `if` - statements about genre. However, you might be getting a sinking feeling that - this could become a lot of nested `if` statements very quickly! \r\n\r\n**Instead - let's use the AND operator (`&&`) to check for a genre and a rating at the - same time.** \r\n\r\n<img src=\"https://images.code.org/a9307ead3b147e0a8016f2054f47f5f2-image-1446153610104.png\" - style=\"width: 200px; float:right\">\r\n\r\nBe careful about the order of - the `if` statements. As a general principle you want to check the most specific - conditions before checking more general ones. For example, you want to have - an `if` statement that checks for rating AND genre evaluated before one that - just checks for genre on its own. Having a more general `if` statement checked - first might cut off or prevent more specific conditions from being reached.\r\n\r\nYou - still want your app to give suggestions when just a rating or just a genre - is detected, so keep this principle of ordering in mind. (Try them in the - reverse order if you're interested in seeing what happens :))\r\n\r\n**Note: - ** Check out the flowchart below to see the logic we are trying to add.\r\n\r\n# - Do This:\r\n\r\n* **Try the question \"What is an R rated comedy movie?** - to see the result.\r\n\r\n* **Update the code to give only one movie suggestion - when a genre and a rating are detected in the input.**\r\n\t* Make one set - of `if`, `else-if`, and `else` statements about genre and rating\r\n * - Add conditional statements to check for a comedy movie AND a rating. You could - do this for all the genres but stick to one for now.\r\n\r\n* **Test out a - couple sentences with your keywords** to make sure the change worked.\r\n\r\n<img - src=\"https://images.code.org/e64c26fed584ddbb5e5a62e6800d5e69-image-1455816162662.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e64c26fed584ddbb5e5a62e6800d5e69-image-1455816162662.png\" - target=\"_blank\">Click to open in separate window.</a>" - CSPU5_U3L26 OR operator_markdown_instruction: "# OR Operator in Movie Bot\r\n\r\nLet's - try to check for the keywords related to questions (\"who\", \"what\", \"where\", - \"when\", \"why\", \"how\", and \"?\") to decide if the user asked a question. - You could do this with a chain of `if-else-if` statements, but it would not - be very efficient. \r\n\r\nInstead let's use a **series of OR operators (`||`)** - to check whether \"who\", \"what\", \"where\", \"when\", \"why\", \"how\" - or \"?\" show up in the user input. \r\n\r\n**Note: ** We've updated the - the flowchart below to show the logic we are trying to add to the initial - question.\r\n\r\n# Do This:\r\n\r\n* **Update the `if` statement** to check - if **\"who\" OR \"what\" OR \"where\" OR \"when\" OR \"why\" OR \"how\" OR - \"?\"** have been typed in by the user.\r\n\r\n* **Test out a couple sentences - with your keywords** to make sure the change worked.\r\n\r\n<img src=\"https://images.code.org/6104c7fd0ecd31010d12be79bc350831-image-1446495141539.png\" - style=\"width=500px\">\r\n" - Data Visualizations 101_markdown_instruction: "## Data Visualization 101: How - to design charts and graphs\r\n\r\nIn lesson 10, students evaluate a curated - set of visualizations based on how effective they are at clearly and accurately - communicating what they're representing. After they've done this evaluation - for themselves, they explore this resource, which formally introduces the - names of the different types of charts they've been seeing and goes into - detail about what types of data each chart can represent most appropriately, - as well as best practices for designing each type of chart.\r\n\r\n" - Designing Assessment Questions_markdown_instruction: "## Designing Test Questions\r\n\r\nThe - following resource is from the University of North Carolina Charlotte's Center - for Teaching and Learning. In it you will find a breakdown of the uses, tradeoffs - for common assessment types, along with tips for writing good items.\r\n\r\n\r\n\r\n" - Discovery learning definition and history_markdown_instruction: "The following - link is a resource that shows some of the history behind discovery learning: - " - Discovery learning techniques_markdown_instruction: "The following link is - a resource that shows the principles and techniques of discovery learning: - " - 'Discovery Learning: Definition and History_markdown_instruction': "The following - link is a resource that shows some of the history behind discovery learning: - " - 'Discovery Learning: Principals and Techniques_markdown_instruction': "The - following link is a resource that shows the principles and techniques of discovery - learning: " - 'Discovery Learning: Principles and Techniques_markdown_instruction': "The - following link is a resource that shows the principles and techniques of discovery - learning: " - ECS Unit 2 Challenge Selection_markdown_instruction: "# Challenge Overview - > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your - challenge in the text box below.\r\n\r\n- Day 7-9: CSDT Cornrow Braiding\r\n- - Day 10-12: Binary\r\n- Day 13-14: Linear and Binary Search (Tower Building) - \r\n- Day 15-16: Sorting \r\n- Day 17: Minimal Spanning Trees\r\n- Day 18-21: - Unit Final Project\r\n\r\nNow that you've selected a lesson, head to the - forum and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### - <a href=\"http://forum.code.org/c/ecs/ecs-unit2\" target=_blank>Forums <i - class=\"fa fa-external-link\" /></a>" - ECS Unit 2 Challenge Submission_markdown_instruction: "# Share Out and Submit - > Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the - forum** and share: \r\n\r\n- Any data visualization or other artifact you - created in doing the \r\n - Use the “SHARE” button in code studio to get a - link to your program: \r\n- The assessment question or extending learning - activity that you produced for this lesson.\r\n- Notes for others who are - going to teach this lesson. This should include: \r\n - Advice for someone - who is going to teach this lesson (consider what was challenging about doing - the lesson, what you think students will struggle with, etc).\r\n - What ideas - do you have about how to structure and teach this lesson? what modifications - do you plan to make to the lesson?\r\n - What additional resources (if any) - might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit2\" - target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others - have posted! \r\nOnce you've posted your own challenge results, check out - what others have posted! Be sure to click through the other lessons as well - and read through their work. Remember, a big goal here is to learn from one - another so let people know when your find their suggestions helpful, or provide - your own ideas when you come across questions. Be sure to use the **heart** - feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a dirct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECS Unit 3 Challenge Selection_markdown_instruction: "# Challenge Overview - > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your - challenge in the text box below.\r\n\r\nHTML Beginners:\r\n\r\n- Day 3-4,5: - Basic HTML - Paragraph, Header, Strong, and EM Tags\r\n- Day 6--7: HTML - - Images\r\n- Day 14: HTML - Links\r\n\r\nCSS Beginners:\r\n\r\n- Day 8-10: - Basic CSS \r\n\r\nMore Experienced with HTML and CSS:\r\n\r\n- Day 11-13: - HTML and CSS \r\n- Day 17-19: HTML and CSS: Create Your Own Webpage\r\n- Day - 22-25: Unit Final Project\r\n- Day 18-21 Final Unit Project\r\n\r\n\r\nNow - that you've selected a lesson, head to the forum and **share which lesson - you plan to complete** for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit3\" - target=_blank>Forums <i class=\"fa fa-external-link\" /></a>" - ECS Unit 3 Challenge Submission_markdown_instruction: "# Unit 3 Challenge > - Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the forum** - and share: \r\n\r\n- Any data visualization or other artifact you created - in doing the \r\n - Use the “SHARE” button in code studio to get a link to - your program: \r\n- The assessment question or extending learning activity - that you produced for this lesson.\r\n- Notes for others who are going to - teach this lesson. This should include: \r\n - Advice for someone who is going - to teach this lesson (consider what was challenging about doing the lesson, - what you think students will struggle with, etc).\r\n - What ideas do you - have about how to structure and teach this lesson? what modifications do you - plan to make to the lesson?\r\n - What additional resources (if any) might - be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit3\" - target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others - have posted! \r\nOnce you've posted your own challenge results, check out - what others have posted! Be sure to click through the other lessons as well - and read through their work. Remember, a big goal here is to learn from one - another so let people know when your find their suggestions helpful, or provide - your own ideas when you come across questions. Be sure to use the **heart** - feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECS Unit 4 Challenge Selection_markdown_instruction: "# Challenge Overview - > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your - challenge in the text box below.\r\n\r\nNew to Programming?\r\n\r\n- Day 2-3: - Scratch - Name Project\r\n- Day 4: Scratch - Knock Knock Joke\r\n- Day 5-6: - Scratch - Moving Sprites \r\n\r\nNew to Scratch:\r\n\r\n- Day 7-8: Scratch - - Event Driven Programming\r\n- Day 9: Scratch - Broadcast Roleplay\r\n- Day - 10-13: Scratch - Broadcasting\r\n\r\nSome Experience with Scratch and Programming:\r\n\r\n- - Day 18, 19: Rock Paper Scissors and Timer\r\n- Day 20-23: Scratch - Timing - Game\r\n- Day 25-30: Unit Final Project\r\n\r\n\r\n\r\nNow that you've selected - a lesson, head to the forum and **share which lesson you plan to complete** - for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit4\" - target=_blank>Forums <i class=\"fa fa-external-link\" /></a>" - ECS Unit 4 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share - your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any - data visualization or other artifact you created in doing the \r\n - Use the - “SHARE” button in code studio to get a link to your program: \r\n- The assessment - question or extending learning activity that you produced for this lesson.\r\n- - Notes for others who are going to teach this lesson. This should include: - \r\n - Advice for someone who is going to teach this lesson (consider what - was challenging about doing the lesson, what you think students will struggle - with, etc).\r\n - What ideas do you have about how to structure and teach - this lesson? what modifications do you plan to make to the lesson?\r\n - What - additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### - <a href= \"http://forum.code.org/c/ecs/ecs-unit4\" target=_blank> Head to - the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce - you've posted your own challenge results, check out what others have posted! - Be sure to click through the other lessons as well and read through their - work. Remember, a big goal here is to learn from one another so let people - know when your find their suggestions helpful, or provide your own ideas when - you come across questions. Be sure to use the **heart** feature on the forum - to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECS Unit 5 Challenge Selection_markdown_instruction: "# What's your Challenge? - \r\n\r\n## Enter the lesson you selected for your challenge in the text box - below.\r\n\r\n- Day 1 - 3: Room data project, set up final project\r\n- Day - 4 - 5: Developing research questions\r\n- Day 6 - 7: Building group norms\r\n- - Day 8: Check in Day\r\n- Day 9 - 11: Maps, identifying variables, subsetting - data, sorting data, frequency of types.\r\n- Day 12: Bubble Charts\r\n- Day - 13: Review: Bubble Charts\r\n- Day 14 - 15: Bar Plots\r\n- Day 16: Mosaic - Plots\r\n- Day 17: Review: Bar and Mosaic Plots\r\n- Day 18 - 20: Mean, Median, - Minimum, Maximum, Histograms, Box Plots\r\n- Day 21: Review: Mean, Median, - Minimum, Maximum\r\n- Days 22 - 24: Filtering Text data (remove punctuation, - remove case, remove stop words, stemming), Analyzing word counts.\r\n- Day - 25: Review: Text Data\r\n- Day 26 - 27: Incorporate data techniques into - final project\r\n- Day 28 - 29: Build project presentations\r\n- Day 30: Present - final project\r\n\r\nNow that you've selected a lesson, head to the forum - and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### - <a href=\"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank>Forums <i - class=\"fa fa-external-link\" /></a>" - ECS Unit 5 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share - your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any - data visualization or other artifact you created in doing the \r\n - Use the - “SHARE” button in code studio to get a link to your program: \r\n- The assessment - question or extending learning activity that you produced for this lesson.\r\n- - Notes for others who are going to teach this lesson. This should include: - \r\n - Advice for someone who is going to teach this lesson (consider what - was challenging about doing the lesson, what you think students will struggle - with, etc).\r\n - What ideas do you have about how to structure and teach - this lesson? what modifications do you plan to make to the lesson?\r\n - What - additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### - <a href= \"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank> Head to - the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce - you've posted your own challenge results, check out what others have posted! - Be sure to click through the other lessons as well and read through their - work. Remember, a big goal here is to learn from one another so let people - know when your find their suggestions helpful, or provide your own ideas when - you come across questions. Be sure to use the **heart** feature on the forum - to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECS Unit 6 Challenge Selection_markdown_instruction: "# Unit 6 Challenge Selection\r\n\r\n## - Enter the lesson you selected for your challenge in the text box below.\r\n - \r\nFrom the curriculum\r\n\r\n- Day: 1 What is a robot / what makes a computer - robotic?\r\n- Days: 2-3 Evaluate robot body designs and algorithms that control - robot behavior\r\n- Day: 4 Set up the Lego kit\r\n- Day: 5 Build robot base\r\n- - Day: 6-7 Introduce NXT brick features\r\n- Day: 8-9 Introduce NXT software\r\n- - Day: 10-13 Program robot using tutorials (using sensors for input)\r\n- Day: - 14 Describe RoboCup & RoboCupJunior\r\n- Day: 15 Human robot tic-tac-toe\r\n- - Days: 16-18 Program dancing robot\r\n- Days 19-23 Program rescue robot\r\n- - Days 24-33 Final projects and presentations\r\n\r\nAlternative Topics\r\n\r\n- - Online simulations\r\n- Physical computing options\r\n- Projects and portfolios\r\n\r\nNow - that you've selected a challenge topic, **share what you plan to do** for - your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit6\" - target=_blank>Head to the Forums <i class=\"fa fa-external-link-square\" /></a>" - ECS Unit 6 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share - your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any - data visualization or other artifact you created in doing the \r\n - Use the - “SHARE” button in code studio to get a link to your program: \r\n- The assessment - question or extending learning activity that you produced for this lesson.\r\n- - Notes for others who are going to teach this lesson. This should include: - \r\n - Advice for someone who is going to teach this lesson (consider what - was challenging about doing the lesson, what you think students will struggle - with, etc).\r\n - What ideas do you have about how to structure and teach - this lesson? what modifications do you plan to make to the lesson?\r\n - What - additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### - <a href= \"http://forum.code.org/c/ecs/ecs-unit6\" target=_blank> Head to - the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce - you've posted your own challenge results, check out what others have posted! - Be sure to click through the other lessons as well and read through their - work. Remember, a big goal here is to learn from one another so let people - know when your find their suggestions helpful, or provide your own ideas when - you come across questions. Be sure to use the **heart** feature on the forum - to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSPD Binary Odometer_markdown_instruction: "# Binary Odometer Widget\r\n\r\nThis - widget was created as part of the Code.org Computer Science Principles class. - It is a great additional resource for teaching binary!\r\n" - ECSPD course goals_markdown_instruction: "# Documenting Your Course Goals\r\n\r\n## - Now that you know more about the ECS curriculum, let's consider your goals\r\n\r\n**What - are your goals for your ECS class?** *These goals will change over time, and - we'll revisit this your response as we go through PD so we can check in on - how we're progressing towards those goals.*\r\n\r\n**NOTE:** remember you - can change the size of the text box by clicking and dragging the bottom-right - corner of the box.\r\n" - ECSPD Fence post Q1_markdown_instruction: "## Fence Post Problem:\n\nYou need - to build one side of a fence that is 12 yards long. This fence will be built - with fence posts and rails that connect one fence post to another. If each - fence post is 1 yard away from the next fence post, how many fence posts will - be needed for this side of the fence? How many fence posts will be needed - for a side of a fence that is N (where N > 0) yards long?\n" - ECSPD Handshake Q1_markdown_instruction: "## Handshake Problem #1:\n\nAssume - there are 20 people in a room, including you. You must shake hands with everyone - else in the room. How many hands will you shake? If there are N (where N>0) - people in the room, how many hands will you shake?\n" - ECSPD impact in program_markdown_instruction: "\n\n#### What connections do - you think might exist between the ideas covered in the videos you just watched - and the units of ECS that you learned about earlier?\n" - ECSPD Online U1D1-2 Assessment 1_markdown_instruction: "Did you have coffee - this morning? If you did, odds are you used a computer. If you made the coffee - yourself, your coffee maker probably had a digital clock or a programmable - timer. If you bought it, the barista likely used a card reader with an electronic - cash register to take your payment. Think through your day and record how - many computers you used before sitting down in front of a desktop or a laptop - (or whatever device you are using right now). Don't forget the computers - in your car, your refrigerator, your alarm clock...\n" - ECSPD Online U1D1-2 Reflection_markdown_instruction: "You have experienced - the lesson both online and on the first day of the in-person PD. Additionally, - you have watched a video defining computers. What have you learned that you - can take back to your classroom? Use this space to record your ideas for this - lesson. You will have a chance to share your ideas and questions in a forum - in the following level.\n" - ECSPD Online U1D10 Reflection_markdown_instruction: "You have experienced the - lesson both online and on the first day of the in-person PD. Additionally, - you have watched a TED talk about the representation of data. What have you - learned that you can take back to your classroom? Use this space to record - your ideas for this lesson. You will have a chance to share your ideas and - questions in a forum in the following level." - ECSPD Online U1D11-14 Reflection_markdown_instruction: "You have experienced - part of this lesson online and have investigated other design tools. What - have you learned that you can take back to your classroom? How will you tackle - this lesson's unique challenges? Use this space to record your ideas for - this lesson. You will have a chance to share your ideas and questions in a - forum in the following level.\n" - ECSPD Online U1D15-16 Reflection_markdown_instruction: "You have experienced - the lesson on the first day of the in-person PD and have watched a TED talk - about the extent of the use of algorithms in the world. What have you learned - that you can take back to your classroom? Use this space to record your ideas - for this lesson. You will have a chance to share your ideas and questions - in a forum in the following level." - ECSPD Online U1D17-19 Assessment_markdown_instruction: "Take some time to look - over the lesson and the unplugged activity. Think about your classroom and - the space you have available to run the Turing Test Activity. How are you - planning to set up your classroom to best facilitate the Turing Test Activity?" - ECSPD Online U1D17-19 Reflection_markdown_instruction: "This is the last lesson - in the unit. How does it combine what was covered previously in the unit? - Now that you have taken time to examine this lesson, what have you learned - that you can take back to your classroom? Use this space to record your ideas - for this lesson. You will have a chance to share your ideas and questions - in a forum in the following level." - ECSPD Online U1D3-4 Reflection_markdown_instruction: "You have experienced - part of this lesson online and studied the components of computers. What have - you learned that you can take back to your classroom? Use this space to record - your ideas for this lesson. You will have a chance to share your ideas and - questions in a forum in the following level. " - ECSPD Online U1D5-7 Reflection_markdown_instruction: "You have experienced - this lesson in person and have examined additional resources online. What - have you learned that you can take back to your classroom? Use this space - to record your ideas for this lesson. You will have a chance to share your - ideas and questions in a forum in the following level." - ECSPD Online U1D8-9 Assessment_markdown_instruction: "List three points either - from the articles or the lesson plan that you would want to discuss with your - class. Describe one strategy you plan to use to facilitate discussion." - ECSPD Online U1D8-9 Reflection_markdown_instruction: "You have experienced - part of this lesson online and have read a few articles regarding the impact - of computers and the internet on communication. What have you learned that - you can take back to your classroom? Use this space to record your ideas for - this lesson. You will have a chance to share your ideas and questions in a - forum in the following level." - ECSPD Online U1Reflection_markdown_instruction: "## Telling the story of Unit - 1\n\nNow that you've explored all of the lessons and resources from Unit - 1, how would you describe the learning that happens? \n\nIn a few sentences, - tell the story of Unit 1, how the lessons relate and build off one another, - and what students will walk away with.\n" - ECSPD PD goals_markdown_instruction: "***Now that you've learned more about - the ECS Professional Development, let's consider your goals***\n\n<br>\n<br>\n__What - are your personal goals for your ECS PD experience (what do you hope to accomplish, - how do you hope to grow)?__ *NOTE: These goals might change over time, and - we'll revisit this your response as we go through the course so we can check - in on how we're progressing towards those goals.*\n\n\n" - ECSPD Personal Problem Solving Strategies_markdown_instruction: "# Problem - Solving Strategies\n### Make a list of Problem Solving Strategies\n\nWe have - all learned different problem solving strategies through out our lives. Some - work all the time and others only in certain situations. Make a list of all - the problem solving strategies you can think of. You will continue to add - to this list over the course of this unit PD. You can also share strategies - or find new strategies on the forum.\n\n### <strong><a href=\"http://forum.code.org/t/pd-discussion-topic-problem-solving-strategies/2086/1\" - target=\"_blank\">Problem Solving Strategies>></a></strong>\n<br>\n\n**Each - time you see this page pop up think about the problem solving strategies you - and your students will need for the current lesson. Then add to the list if - you think of new things.**\n" - ECSPD program overlap_markdown_instruction: "\n#### Now that you've read more - about the ECS program, what relationship do you see between the curriculum - and Professional Development? What aspects of the two piece of the program - seem most important or interesting to you?\n" - ECSPD strategies_markdown_instruction: "# Classroom Strategies Journal\r\n\r\nThis - space is your **digital journal for documenting strategies** you've picked - up during Professional Development and while teaching the course. We'll revisit - this in online pd for each unit, and you should refer back to it while planning - lessons to remind yourself of strategies you want to try in class. \r\n\r\n\r\n" - ECSPD your goals_markdown_instruction: "__What are your goals for your ECS - class?__ *These goals will change over time, and we'll revisit this your - response as we go through the course so we can check in on how we're progressing - towards those goals.*\n" - ECSPD3-u5 pick a challenge_markdown_instruction: "# Challenge Overview > What's - your Challenge? \r\n\r\n## Enter the lesson you selected for your challenge - in the text box below.\r\n\r\n- Day 1 - 3: Room data project, set up final - project\r\n- Day 4 - 5: Developing research questions\r\n- Day 6 - 7: Building - group norms\r\n- Day 8: Check in Day\r\n- Day 9 - 11: Maps, identifying variables, - subsetting data, sorting data, frequency of types.\r\n- Day 12: Bubble Charts\r\n- - Day 13: Review: Bubble Charts\r\n- Day 14 - 15: Bar Plots\r\n- Day 16: Mosaic - Plots\r\n- Day 17: Review: Bar and Mosaic Plots\r\n- Day 18 - 20: Mean, Median, - Minimum, Maximum, Histograms, Box Plots\r\n- Day 21: Review: Mean, Median, - Minimum, Maximum\r\n- Days 22 - 24: Filtering Text data (remove punctuation, - remove case, remove stop words, stemming), Analyzing word counts.\r\n- Day - 25: Review: Text Data\r\n- Day 26 - 27: Incorporate data techniques into - final project\r\n- Day 28 - 29: Build project presentations\r\n- Day 30: Present - final project\r\n\r\nNow that you've selected a lesson, head to the forum - and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### - <a href=\"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank>Forums <i - class=\"fa fa-external-link\" /></a>" - ECSPD3-u5 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSPD3-u5 submit_markdown_instruction: "# Share Out and Submit > Submit Link\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nYou've just shared your Challenge - work on the forum. If you would like to receive payment for this online PD, - please submit a link to that forum post here so we can review! \r\n\r\nIn - order to get a direct link to your post, click the link icon directly under - your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSPD3-u6 pick a challenge_markdown_instruction: "# Unit 6 Challenge > What's - your Challenge?\r\n\r\n## Enter the lesson you selected for your challenge - in the text box below.\r\n \r\nFrom the curriculum\r\n\r\n- Day: 1 What is - a robot / what makes a computer robotic?\r\n- Days: 2-3 Evaluate robot body - designs and algorithms that control robot behavior\r\n- Day: 4 Set up the - Lego kit\r\n- Day: 5 Build robot base\r\n- Day: 6-7 Introduce NXT brick features\r\n- - Day: 8-9 Introduce NXT software\r\n- Day: 10-13 Program robot using tutorials - (using sensors for input)\r\n- Day: 14 Describe RoboCup & RoboCupJunior\r\n- - Day: 15 Human robot tic-tac-toe\r\n- Days: 16-18 Program dancing robot\r\n- - Days 19-23 Program rescue robot\r\n- Days 24-33 Final projects and presentations\r\n\r\nAlternative - Topics\r\n\r\n- Online simulations\r\n- Physical computing options\r\n- Projects - and portfolios\r\n\r\nNow that you've selected a challenge topic, **share - what you plan to do** for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit6\" - target=_blank>Head to the Forums <i class=\"fa fa-external-link-square\" /></a>" - ECSPD3-u6 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link to your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review!\r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below): \r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSU2 Challenge Submission_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the forum** - and share: \r\n\r\n- Any data visualization or other artifact you created - in doing the \r\n - Use the “SHARE” button in code studio to get a link to - your program: \r\n- The assessment question or extending learning activity - that you produced for this lesson.\r\n- Notes for others who are going to - teach this lesson. This should include: \r\n - Advice for someone who is going - to teach this lesson (consider what was challenging about doing the lesson, - what you think students will struggle with, etc).\r\n - What ideas do you - have about how to structure and teach this lesson? what modifications do you - plan to make to the lesson?\r\n - What additional resources (if any) might - be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit2\" - target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others - have posted! \r\nOnce you've posted your own challenge results, check out - what others have posted! Be sure to click through the other lessons as well - and read through their work. Remember, a big goal here is to learn from one - another so let people know when your find their suggestions helpful, or provide - your own ideas when you come across questions. Be sure to use the **heart** - feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a dirct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSU3 Challenge Submission_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a dirct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSU4 Challenge Submission fin_markdown_instruction: "# Share Out and Submit - > Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - Escape Room Example_markdown_instruction: "# Room Escape\r\n\r\nIn today's - workshop you are going to be working on making a room escape app! This level - has an example app that you should play around with to get the feel for what - you will be creating.\r\n\r\n# Do This\r\n\r\n* Click RUN to start the app\r\n* - Try to find the key that will open the door." - Eval Booleans 1_markdown_instruction: "Boolean operators (like >, <, =) allow - us to compare different values, returning either *true* or *false*. Click - \"Run\" to see how this expression evaluates." - Eval Booleans 2_markdown_instruction: "Can you set the values so that this - expression evaluates as *true*?" - Eval Booleans 3_markdown_instruction: "The `string-length` function returns - the number of characters in a string (including spaces!) - make this code - evaluate to *true*." - Eval Booleans 4_markdown_instruction: "Here's an Evaluation Block called `and` - - it returns *true* if both of its parameters are *true*, otherwise it returns - *false*. Edit the x variable so that this expression returns *true*." - Eval Booleans 5_markdown_instruction: "This `or` block returns *true* if either - of its parameters is *true*. Otherwise, if both parameters are *false* it - will return *false*. Set the y variable to a value that will cause this expression - to return *false*." - Eval Booleans 6_markdown_instruction: "Here's one more boolean block called - `not`. This block flips *true* to *false*, or *false* to *true*. If you wrap - this block of code in a NOT block, it should return *true* (because we are - asking if the two expressions do NOT produce equal values)." - Eval Booleans Free Play_markdown_instruction: "Free Play: Try out some creations - of your own using Booleans." - Eval Cond 4_markdown_instruction: "We can use the `string=?` function to make - conditionals that respond to text input. Here's a function called `green - shape` that takes a string for the type of shape. Complete the conditions - so that the correct solid green shape is returned when the function is run - with \"circle\", \"triangle\", \"square\", or \"rectangle\"." - Eval Cond 5_markdown_instruction: "Here's a similar function `red shape` with - an additional variable for size. Complete the conditionals so the correct - solid red image of a given size is drawn for \"circle\", \"triangle\", and - \"star\"." - Eval Contracts 4_markdown_instruction: "The `scale` function returns an image - that is either larger or smaller than the input image. Try scaling this circle - by a factor of 10. How is the returned image different than if you'd just - made a circle of that size in the first place?" - Eval Contracts A_markdown_instruction: "Use the `star` function to produce - a solid red star with a 60 pixel radius" - Eval Contracts C_markdown_instruction: "Check out the `rotate` function - can - you use it to rotate this 90 pixel green square by 45 degrees?" - Eval Contracts E_markdown_instruction: "Try using the `text` function to write - this \"Hello, world!\" in teal at size 40." - Eval Define Funcs 1_markdown_instruction: "Here's a new function called `green-triangle` - that takes a single Number for size and produces a green triangle. Use the - new function to create a 125 pixel green triangle" - Eval Define Funcs 2_markdown_instruction: "Let's look inside that `green-triangle` - function to see how it works. Can you modify it so that the `green-triangle` - function always draws outlined green triangles? **Don't forget to change - the examples too!**" - Eval Define Funcs 3_markdown_instruction: "Here's the start of another new - function called `purple-circle` with a domain of one Number (the radius) and - a range of Image. The body of the function is broken though, it always draws - a circle of 50 pixel radius instead of using the radius parameter. Replace - the current Number with the `radius` block from the domain.\r\n\r\nWhen you've - fixed the function, test your new function with a 150 pixel radius." - Eval Define Funcs 4_markdown_instruction: "Create a new function called `aqua-star` - that has a Domain of a single Number for radius and returns an aqua star of - the given radius. Run your new function with a radius of 75." - Eval Define Funcs 5_markdown_instruction: "Let's use that `aqua-star` function - to make a row of different sized stars. From left to right, the stars should - have radii of 25, 50, and 75." - Eval Define Funcs Test_markdown_instruction: "Here's the start of another - new function called `purple-circle` with a domain of one Number (the radius) - and a range of Image. The body of the function is broken though, it always - draws a circle of 50 pixel radius instead of using the radius parameter. Replace - the current Number with the `radius` block from the domain.\r\n\r\nWhen you've - fixed the function, test your new function with a 150 pixel radius." - Eval Defining Vars Free Play 1_markdown_instruction: "Free Play: We've provided - a function that fills your screen with `my-image`. Change `my-image` to see - what patterns you can make." - Eval Design Recipe .1_markdown_instruction: "Here's a Design Recipe for a - function called `square-circle` with domain Number String and range Image. - Click Edit to write the function definition (you will see two examples provided)." - Eval Design Recipe 3_markdown_instruction: "The Design Recipe for `wide-rect` - already has a contract and one example. Can you write a second example and - then complete the definition? The `wide-rect` function should produce a rectangle - of given color that is twice as wide as it is high." - Eval Design Recipe 4_markdown_instruction: "Use the Design Recipe to create - a function `starburst`. When given a number of points and an outer radius, - `starburst` returns a yellow radial star with given points, and an inner radius - that is half the outer radius." - Eval Design Recipe 5_markdown_instruction: "Write a function `striped-flag` - that takes two colors and produces a flag that is 250 pixels wide, 150 pixels - tall, with three even horizontal stripes of given colors, in the order color2, - color1, color2." - Eval Design Recipe 6_markdown_instruction: "Write a function `large-polygon` - that should output a solid polygon of given sides and color that takes up - most of the window, regardless of the number of sides. To make sure that the - polygon doesn't get too large as you increase the number of sides, side length - should be inversely proportional to side number, with a length of **(800/sides)**." - Eval Design Recipe Free Play_markdown_instruction: "Free Play: Use the Design - Recipe to create some functions of your own design" - Eval Strings Images .1_markdown_instruction: "So far we've only dealt with - a single type of data, Numbers. Another type of data is a String, which is - any combination of letters, numbers, or other characters wrapped in quotation - marks. Run the String \"Hello, world!\" and see what happens." - Eval Strings Images .2_markdown_instruction: "The `string-append` function - takes two Strings and returns a single combined String. Add a String \"Universe\" - to the second argument of `string-append`." - Eval Strings Images 1_markdown_instruction: "The third type of data we're - going to use is an Image. This `star` function takes in a Number and two Strings, - and it evaluates to an Image. Use this function to make a solid red star with - radius of 100." - Eval Strings Images 2_markdown_instruction: "Free Play: Every Evaluation Block - is color-coded to let you know which data type it returns and which types - it needs for its parameters. The last parameter of the triangle function takes - a String that controls its color - try some different colors to see what works." - Eval Strings Images 3_markdown_instruction: "Some functions can only take a - specific set of Strings, such as the second argument of this `circle` function, - which controls its style. Draw this orange outline circle using the special - String block with a dropdown to make sure you only use valid styles." - Eval Strings Images 4_markdown_instruction: "Try using the `rectangle` block - to draw this solid, red rectangle - it is 175 pixels wide and 100 pixels tall." - Eval Strings Images 5_markdown_instruction: "Try using this new Evaluation - Block called `overlay` to place a 100 pixel white triangle on top of a 200 - pixel red circle." - Eval Strings Images 6_markdown_instruction: "Use the overlay block to place - a 75 pixel radius yellow star on top of a 150 pixel long blue square." - Eval Strings Images 7_markdown_instruction: "The `offset` block lets you move - an image relative to where it would normally be placed. Use this block to - offset the square by 100 pixels on the y-axis." - Eval Strings Images 8_markdown_instruction: "Here's a different kind of star - block - it's called `radial-star` and it allows you to draw stars with any - number of points! Use it to create a 7 point solid orange star with an inner - radius of 75 pixels and an outer radius of 175 pixels." - Eval Strings Images Free Play_markdown_instruction: "Free Play: Explore the - blocks available to create something interesting. Make sure to share your - favorite creations." - Final Personal Website_markdown_instruction: "# Personal Website\r\n\r\nThis - is it! You have been working on your Personal Website for the whole unit. - Put the finishing touches on it and submit it to your teacher! Remember to - use the problem solving process as your guide in preparing your final product.\r\n\r\n# - Do This\r\n\r\n* Define: Read the rubric so you know what is expected\r\n* - Plan: Decide what you still need to work on and put those things in priority - order\r\n* Try: Implement your improvements to your personal website.\r\n* - Reflect: Get feedback from a classmate and decide what of that feedback to - act on.\r\n\r\nDon't forget to take a screenshot of your home page and save - it somewhere on your computer so you can find it later (*Need help with how - to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)" - Final Room Escape App_markdown_instruction: "# You've done it!\r\n\r\nYou - made a room escape! Now its time to customize it. \r\n\r\nConsider:\r\n\r\n* - Adding more rooms\r\n* Adding more things users can interact with in the rooms\r\n* - Add more style to the rooms" - Finalize Your Chaser Game v.1_markdown_instruction: "# Add an Image and Make - a Chaser Game!\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" - style=\"float: right\">\r\n\r\n**Now You Try it** - add an image to your app - and modify the code so that the image jumps around the screen rather than - the button. Your little game should have:\r\n\r\n* **Text** on the top of - the screen with a title or instructions for what to do.\r\n* **An image** - that \"runs away\" (moves randomly) based on some mouse event.\r\n\r\n**Tips:**\r\n - * **Hint** - the easy way to do this is to simply change the IDs in `onEvent` - and `setPosition` to respond to the image instead of the button.\r\n * Remove - the button from the app after the image is working. We don't need it anymore.\r\n - * Change the label text so that the instructions make sense for your game.\r\n - * The game is even more fun if you use the `mouseover` event instead of `click`\r\n\r\n**Optional - Extensions**:\r\n * Make the background interesting\r\n * Add another image - that runs away.\r\n * See what happens with the commands `hideElement` and - `showElement`\r\n * Have two UI elements where interacting with one controls - or does something to the other.\r\n\r\n**Finalize your \"Chaser Game v.1\"** - and click Finish.\r\n\r\n * **Note**: We'll revisit this game in the next - lesson where you can improve it. This is **just version 1**\r\n\r\n" - Food Fight!_markdown_instruction: "We've added one last function for you.\r\n<hr/>\r\n\r\n<h4>\r\nUse - an `if` statement to program your game to call the `level_up` function only - when `player_score` becomes greater than a certain number.<br/><br/>\r\n</h4>\r\n<i>For - example: `player_score` > 6</i>\r\n\r\n\r\n<hr/>\r\n<i>Play the game, and - make it to level 3 to move to the next puzzle.</i>" - Formative versus Summative Assessment_markdown_instruction: "The following - link is a resource that provides definitions and examples of formative and - summative assessments:" - Frequency Analysis_markdown_instruction: "# Break a random substitution cipher!\r\n\r\nMessages - encrypted with the **Caesar cipher** are very easy to crack. What if instead - of shifting the whole alphabet, we mapped every letter of the alphabet to - a random different letter of the alphabet? This is called a **random substitution - cipher**.\r\n\r\nIn this version of the tool, you'll be interacting more - with the graphs that show letter frequency. By analyzing the frequency of - the letters in the encrypted input message compared to the frequency of letters - in a typical piece of English prose, you can start to narrow in on what some - of the letter mappings might be. Did you know that *'E'* is the most common - letter used in the English language? Maybe the most common letter in your - encrypted text maps to the letter *'E'*, but maybe not! You'll have to - do a bit of guess and check to see if that substitution makes sense.\r\n\r\n\r\n# - Do this\r\n- Load the **Sample message (hard)** from the message dropdown. - This will load a message that has been encrypted with a random substitution - cipher. \r\n![](https://images.code.org/04c6230c9607110126581c298bc09183-image-1443569176380.gif)\r\n\r\n- - You will crack the message by guessing what each letter of the alphabet contained - in the original ciphertext should be changed to. You can do so by dragging - the blue letters of the alphabet directly underneath the orange letter you - want changed in the original ciphertext. Letters that have been changed using - your guesses will no longer be highlighted orange in the message window on - the left.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n- - Play with some of the sorting options available in the Random substitution - cipher tab to get different views on the letter frequencies in the input text - as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\nSee - how long it takes you to crack the cipher! Is this a good method of encrypting - secret data?\r\n\r\n" - frozen circle function in circle_markdown_instruction: "Now let's create 20 - overlapping circles, turning 18 degrees between each circle." - frozen circle function with parameter_markdown_instruction: "Here's a ”Create - circle” block that can make circles of different sizes. Can you use this to - create a small circle of size 5 and a larger circle of size 10?" - frozen circle function_markdown_instruction: "Use the new “Create a circle” - block to create 10 overlapping circles. Don't forget to jump forward between - circles." - frozen circle_markdown_instruction: "A circle is a special shape. Can you figure - out what number to replace the question marks with to draw a circle?" - frozen cross rotate dense_markdown_instruction: "Let's repeat it 90 times! - How many times does 90 go into 360? Hint: It's a really small number." - frozen cross rotate_markdown_instruction: "Now try repeating it 10 times. How - many degrees do you need to turn between each line?" - frozen cross_markdown_instruction: "Wrap a “Repeat” block around these commands - to create a plus sign. Did you notice Elsa can move forward and backward?" - frozen diamond mini snowflake_markdown_instruction: "Did you know every snowflake - is a different shape? Let's create a new snowflake by using another “Repeat\" - block to repeat a parallelogram 4 times, turning right by 90 degrees between - each parallelogram." - frozen diamond snowflake_markdown_instruction: "Now, let's create a new snowflake - by using the repeat block to repeat a parallelogram 10 times, turning right - by 36 degrees between each one." - frozen diamond_markdown_instruction: "Use a repeat around these blocks to create - a parallelogram. It's just like a rectangle but has different angles. This - one has 60 degree and 120 degree angles instead of all 90 degree angles." - frozen freeplay_markdown_instruction: "You've officially become a master artist! - Create a winter wonderland." - frozen perpendicular_markdown_instruction: "Now let's see if we can create - two lines that are at a 90 degree angle to each other. You will need to use - the \"Turn\" block as well as the \"Move\" block." - frozen snowflake branch_markdown_instruction: "Try using the ”Create a snowflake - branch” block to create three branches, which starts to look like a snowflake." - frozen snowflake full_markdown_instruction: "Now let's repeat it 8 times to - make a beautiful snowflake!" - frozen snowflower_markdown_instruction: "Intricate snow patterns can be created - with very simple shapes. Can you make a pattern by repeating 5 circles of - size 5 and 5 circles of size 10?" - frozen square iterative_markdown_instruction: "It seems like we're halfway - to making a square. Let's put 4 lines together to create a square." - frozen square loop 3x_markdown_instruction: "Let's create three squares, turning - after each square. Be sure to turn by 120 degrees before each new square." - frozen square loop_markdown_instruction: "Hi, I’m Anna of Arendelle! Let’s - make a square with the “Repeat” block, which uses fewer blocks. How many times - (???) should the “Repeat” block loop the blocks inside it to make a square?" - frozen square snowflake_markdown_instruction: "Can you create a snowflake using - the “Repeat” block to make a square 10 times, and the “Turn” block to turn - 36 degrees between each square?" - 'Game Lab Workshop: Random_markdown_instruction': "# Randomized Shapes\r\n\r\nLet's - see how we can use randomization in our drawings. Each of the inputs from - the shape blocks you've seen can be replaced with calls to `randomNumber()`. - Try drawing some images that are slightly randomized each time. You might - try changing the position randomly by using `randomNumber()` in place of the - x or y inputs, or you could change the size of the shape itself by randomizing - the length or width inputs.\r\n\r\n# Do This\r\n\r\nPick a shape command (`ellipse()`, - `rect()` or `regularPolygon()`) and use `randomNumber()` in place of one or - more of the inputs. Make sure you run it a few times so you can see the effect - of randomization.\r\n" - Gamelab AllTheThings Embed Level_markdown_instruction: "# How Many Counter - Variables?\r\n\r\nYou can use counter variables (`x = x + 1` , `x = x - 1` - , `x = x + 0.5`, etc.) to animate a scene. What happens when scenes start - to get larger and more complicated? \r\n\r\nWatch this animation. With a partner: - \r\n\r\n* Decide how many counter variables you would need to create this - scene\r\n* Decide what you would name your counter variables\r\n* **Draw a - Labels-Values-Connectors** diagram of your variables at the first frame of - this scene. Don't worry about getting the values exactly correct.\r\n* Share - your answer with another group **and be ready to share your ideas with the - class**" - GameLab Livecode Demo 1_markdown_instruction: "# Animating Sprites\r\n\r\nTo - start this demo, we'll do the following:\r\n\r\n1. Create a new sprite with - the `createSprite()` block\r\n2. Click on the Animation tab and select an - image for the sprite\r\n3. Set the animation using the `sprite.setAnimation()` - block\r\n4. Move the sprite by incrementing (slowly increasing) its x and - y value using the draw loop\r\n" - GameLab Livecode Demo 2_markdown_instruction: "# Move With Keys\r\n\r\nNow - that we've got a sprite on the screen, let's make it respond to keyboard - input.\r\n\r\n1. Read through the blocks at lines 14 and 21 - what is going - on?\r\n2. Add two more conditionals to respond to the up and left keys\r\n3. - Experiment with some of the additional provided blocks, such as `sprite.scale` - and `sprite.rotation`\r\n" - GameLab Livecode Demo 3_markdown_instruction: "# Sprite Interactions\r\n\r\nAt - this point there's one sprite on screen, and we can move it around with the - arrow keys. Now let's add a second sprite and get the two interacting.\r\n\r\n1. - Add a new animation in the animation tab\r\n2. Create a new sprite called - \"target\" and set its animation\r\n3. Use the `sprite.isTouching()` block - in a conditional to make the target sprite react to the player sprite\r\n\t* - Make the target sprite shrink or grow\r\n * Make the target move to a random - location\r\n * Make the target rotate\r\n" - GameLab Livecode Demo 4_markdown_instruction: "# Make it Your Own\r\n\r\nNow - that we've created a simple game, take some time to explore the environment - on your own and add to your game. You'll notice that there are a bunch of - new blocks available to you in the toolbox - take a look around and try some - out!" - 'GameLab Workshop: Draw Loop Shapes_markdown_instruction': "# Experiment with - the Draw Loop\r\n\r\nHere's a simple app that we've slowed down by changing - the _frame rate_ (the number of times the draw loop is run each second).\r\n\r\nWith - a neighbor:\r\n\r\n* Read through the code and discuss what you think it will - do\r\n* Run and observe the program\r\n* Try reordering the blocks to see - how it impacts the drawing\r\n\t* Can you make the rectangle appear above - the circle?\r\n * What happens if you place one of the commands before - or after the draw loop?\r\n * Try adding some new shapes to the program" - Geometric Pattern_markdown_instruction: "**Project Idea:** Create a pattern - using geometric ideas like shapes. This requires persistence and planning!" - Geometric Sun_markdown_instruction: "**Project Idea:** Create a pattern using - geometric ideas like shapes. This requires persistence and planning!" - Glossary O_markdown_instruction: "## Vocabulary\n\nEncouraging students to - learn and use 'professional' terms enables them to communicate correctly - and efficiently with others and builds their knowledge such that it can be - further developed without having to relearn terms and concepts at a later - time. The terms and concepts used in the unplugged lessons are defined using - words that young students can understand.\n\n# TEACHING TIP\nBest practice - is to introduce the terms with easy-to-understand language, relate the terms - to previous experiences, use the terms repeatedly beyond the lesson itself - throughout the entire course (and in other situations) when appropriate, and - reinforce students' use in oral and written communication.\n\nThe following - terms are introduced in an unplugged lesson as either a Vocabulary word or - as a term related to the online Blockly programming interface. Terms are subsequently - reinforced in the following online puzzles and activities. Most terms appear - multiple times throughout the courses and lessons providing the students with - many opportunities to deepen their understanding and assimilate the words - into conversations, both in and outside of the classroom.\n\nThe course and - lesson numbers after each term indicate the unplugged lessons in which the - term is emphasized.\n\n# Look through this list of vocabulary words and then - answer the prompt at the bottom of the page. You don't have to learn all - the vocabulary words all right now, but you they are here so you can refer - back them during this online course. \n\nabstraction\n\nPulling out specific - differences to make one solution work for multiple problems students.\n\n(Course - 3: Lesson 1)\n\nalgorithm\n\nA list of steps to finish a task. A set of instructions - that can be performed with or without a computer. For example, the collection - of steps to make a peanut butter and jelly sandwich is an algorithm.\n\n(Course - 1: Lessons 1, 6 | Course 2: Lessons 1, 2 | Course 3: Lessons 1, 10)\n\nbinary\n\nA - way of representing information using only two options.\n\n(Course 2: Lesson - 14)\n\nBlockly\n\nThe visual programming language used in Code.org's online - learning system for K-5 students. (Course 1: Lesson 3)\n\nbug\n\nAn error - in a program that prevents the program from running as expected. (Course 2: - Lesson 9)\n\ncode\n\nOne or more commands or algorithm(s) designed to be carried - out by a computer. See Program. (Course 1: Lesson 2)\n\ncommand\n\nAn instruction - for the computer. Many commands put together make up algorithms and computer - programs. (Course 1: Lesson 2)\n\ncomputational thinking\n\nMental processes - and strategies that include: decomposition, pattern matching, abstraction, - algorithms (decomposing problems into smaller, more manageable problems, finding - repeating patterns, abstracting specific differences to make one solution - work for multiple problems, and creating step-by-step algorithms). (Course - 3: Lesson 1)\n\ncomputer science\n\nA field in which people use the power - of computers to solve big problems. (Course 1: Lesson 2)\n\nconditionals\n\nStatements - that only run under certain conditions or situations. (Course 2: Lesson 12)\n\ncrowdsourcing\n\nGetting - help from a large group of people to finish something faster. (Course 3: Lesson - 19)\n\ndata\n\nQuantities, characters, or symbols that are the inputs and - outputs of computer programs. (Course 2: Lesson 14 | Course 3: Lessons 1)\n\ndebugging\n\nFinding - and fixing errors in programs. (Course 2: Lesson 9)\n\ndecompose\n\nBreak - a problem down into smaller pieces. (Course 3: Lesson 1)\n\ndigital citizen\n\nSomeone - who acts safely, responsibly, and respectfully online. (Course 3: Lesson 20)\n\ndigital - footprint\n\nThe information about someone on the Internet. (Course 2: Lesson - 18)\n\nDNS (domain name service)\n\nThe service that translates URLs to IP - addresses. (Course 3: Lesson 18)\n\nDSL/cable\n\nA method of sending information - using telephone or television cables. (Course 3: Lesson 18)\n\nevent\n\nAn - action that causes something to happen. (Course 1: Lesson 15 | Course 2: Lesson - 15)\n\nevent-handler\n\nAn action or event that is being constantly monitored - for by the computer. When you write code for the computer to perform after - that an action occurs, that code, the event-handler, will run every time the - action is performed without having to put the commands inside of a loop. Many - event-handlers are human-initiated. For example: an event handler might respond - when the user clicks the mouse by making the bird flap its wings. \"When the - mouse is clicked\" is an event-handler. (Course 1: Lesson 15 | Course 2: Lesson - 15)\n\nfiber optic cable\n\nA connection that uses light to transmit information. - (Course 3: Lesson 18)\n\nfunction\n\nA piece of code that you can easily call - over and over again. Functions are sometimes called 'procedures.' A function - definition is a segment of code that includes the steps performed in the function. - A function call is the code segment, typically within the main logic of the - program, which invokes the function. (Course 3: Lesson 4, 9)\n\nInternet\n\nA - group of computers and servers that are connected to each other. (Course 1: - Lesson 17 | Course 3: Lessons 18, 20)\n\nIP address\n\nA number assigned to - any item that is connected to the Internet. (Course 3: Lesson 18)\n\niteration\n\nA - repetitive action or command typically created with programming loops. (Course - 1: Lesson 12 | Course 2: Lesson 5)\n\nloop\n\nThe action of doing something - over and over again. (Course 1: Lesson 12 | Course 2: Lesson 5)\n\npackets\n\nSmall - chunks of information that have been carefully formed from larger chunks of - information. (Course 3: Lesson 18)\n\npattern matching\n\nFinding similarities - between things. (Course 3: Lesson 1)\n\npersistence\n\nTrying again and again, - even when something is very hard. (Course 1: Lesson 9)\n\nprogram\n\nA program - is an algorithm that has been coded into something that can be run by a machine. - (Course 1: Lesson 2 | Course 2: Lesson 1 | Course 3: Lesson 10)\n\nrun program\n\nTo - have the computer execute the commands you've written in your program. (Course - 1: Lesson 4)\n\nservers\n\nComputers that exist only to provide things to - others. (Course 3: Lesson 18)\n\ntoolbox\n\nThe tall grey bar in the middle - section of Code.org's online learning system where all the commands you can - use to write your program are displayed. (Course 1: Lesson 4)\n\nURL (universal - resource locator)\n\nAn easy-to-remember address for calling a web page (like - www.code.org). (Course 3: Lesson 18)\n\nusername\n\nA name you make up so - that you can see or do things on a website, sometimes called a \"screen name.\" - (Course 1: Lesson 18)\n\nvariable\n\nA placeholder for a piece of information - that can change. (Course 3: Lesson 4)\n\nWi-Fi\n\nA wireless method of sending - information using radio waves. (Course 3: Lesson 18)\n\nworkspace\n\nThe white - area on the right side of Code.org's online learning system where you drag - and drop commands to build your program. (Course 1: Lesson 4)\n\n### What - is one way you can include computer science vocabulary terms in your class?\n" - grade1_adventurer_loops2_markdown_instruction: "How can Laurel collect all - five piles of gold using only one `E -->` block?" - grade1_artist_loops6_markdown_instruction: "**Challenge:** It's a hidden - garden! Let's walk around." - grade1_artist_loops7a_markdown_instruction: "**Challenge:** Lovely! Let's - take a walk around the garden." - grade1_artist_loopsFP_markdown_instruction: "Use what you have learned to draw - a picture of what you think the artist saw when he got home.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" - width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" - width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" - width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" - width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" - grade1_maze_sequence8_markdown_instruction: "**Challenge:** Debug this level - by adding blocks to get me to the pig!" - grade1_maze_sequenceA_markdown_instruction: "**Challenge:** Move me around - the TNT to get to the pig." - grade1_playlab_events1_markdown_instruction: "This game is called \"Play Lab\". \r\n\r\n<br/>\r\nSee - if you can figure out what each block does." - grade1_playlab_eventsFP_markdown_instruction: "Use your imagination. What can - you do to make this game more fun?\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Conversation</strong> - - Add blocks so that the characters say \"Hello!\" when they run into each - other. </li>\r\n <li><strong>Where's the Dragon?</strong> - Have - the dragon dissapear when the up arrow key is pressed.</li>\r\n <li><strong>Super - Dragon</strong> - Make the dragon move at a faster speed and then try to catch - him with the knight. </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>" - grade2_CaringForNewPet_0_markdown_instruction: "For this puzzle, drag all of - the blocks together and click \"Run\" to watch it go!" - grade2_CaringForNewPet_1_markdown_instruction: "Drag an extra `move forward` - block out of the toolbox to finish your code." - grade2_CaringForNewPet_11_markdown_instruction: "*\"Keep calm and help me find - the bad pig.\"*" - grade2_CaringForNewPet_2_markdown_instruction: "*\"This pig is ruffling my - feathers.\"*\r\n\r\nThere is one extra block that is going to cause the bird - to crash. \r\nThrow it away by dragging it back to the toolbox." - grade2_CaringForNewPet_2courseC_maze_programming3_markdown_instruction: "*\"This - pig is ruffling my feathers.\"*\r\n\r\nThere is one extra block that is going - to cause the bird to crash. \r\nThrow it away by dragging it back to the - toolbox." - grade2_CaringForNewPet_3_markdown_instruction: "*\"Trace the path and lead - me to the silly pig. Avoid TNT or feathers will fly!\"*" - grade2_CaringForNewPet_3D_markdown_instruction: "*\"Follow this path to get - me to the pig!\"*" - grade2_CaringForNewPet_4_markdown_instruction: "*\"Keep calm and help me find - the bad pig. Otherwise I might get angry!\"*" - grade2_CaringForNewPet_6_markdown_instruction: "**Challenge:** Guide me to - the green evilness! (Watch out for TNT)" - grade2_CaringForNewPet_7D_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** - This code has a lot of bugs. You'll need to remove blocks and add blocks." - grade2_collector_10_markdown_instruction: "You're almost done! \r\n\r\nCollect - as many pieces of treasure as you can to finish the stage!" - grade2_collector_2_markdown_instruction: "Move Laurel to the gold, then use - `collect` to pick it up." - grade2_collector_3_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe - blocks you need are already in the workspace, but not connected. Put these - blocks in order to collect all of the gold and solve the puzzle." - grade2_collector_4_markdown_instruction: "Sequence matters! The blocks you - need are already in the workspace, but not connected. Order these blocks - to solve the puzzle." - grade2_collector_5_markdown_instruction: "*\"Help me collect each gold coin!\"*\r\n\r\nThese - blocks are in the wrong order. Can you fix them?" - grade2_collector_6_markdown_instruction: "\"Help me collect all of the treasure!\"\r\n\r\nThese - blocks are in the wrong order. Reorder them to collect all of the treasure." - grade2_collector_7_markdown_instruction: "**Challenge:** What is going on here? \r\n\r\nEven - if we put these in the right order, there will still be some missing. \r\nUse - blocks from the toolbox to collect all of the treasure." - grade2_collector_8_markdown_instruction: "*\"Keep up the good work! Help me - collect all of the coins.\"*" - grade2_collector_9_markdown_instruction: "*\"Let's get all of the coins!\"*" - grade2_collector_9a_markdown_instruction: "**Challenge:** Grab all of the coins." - grade2_collector_A_markdown_instruction: "Help Laurel collect all of the treasure." - grade2_collector_pre1_markdown_instruction: "*\"Hi, I'm Laurel. Today I'm - searching for treasure at the dog park!\"* \r\n\r\nPlay around with the blocks - to see if you can help Laurel collect some gold." - grade2_link_RunMarco_partner_markdown_instruction: "<a href=\"https://www.allcancode.com/runmarco\"></a><img - src=\"https://images.code.org/c754e82a395ab69e5c1e3b2dfe8bf9ff-image-1486603338831.22.10.png\" - width=\"400px\"/></a>" - grade2_MakeDogTag_1_markdown_instruction: "*\"Let's make a cage for my pet - monster!\"*\r\n\r\nDrag blocks onto the screen to have the artist draw over - the grey lines in the picture. \r\n(Each line is 100 pixels long)" - grade2_MakeDogTag_10_markdown_instruction: "Now, draw anything you like!\r\n<br/><br/>\r\nHere - are some ideas you could try if you get stuck (the last one is a challenge):\r\n<br/>\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/c8748bea36ec8ea92ceb13d86cd862d2-image-1471033427162.13.51 - PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/57c582dca6126e30de36b5bef5517f78-image-1471033432715.03.46 - PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/9df13dec95da560686472580304d9ee3-image-1471033275008.55.15 - PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n\r\n\r\n" - grade2_MakeDogTag_2_markdown_instruction: "*\"This spaceship needs a window!\"*\r\n\r\nEach - side of the inner square is 100 pixels and all of the angles are 90 degrees." - grade2_MakeDogTag_3_markdown_instruction: "*\"Oh no! Starla's pet alien just - flew away! Let's help the spacewoman!\"*\r\n\r\nFinish Starla's rocket so - she can chase her pet. \r\n(Each side of the triangle is 100 pixels long - and has 120 degree outer angles)" - grade2_MakeDogTag_4_markdown_instruction: "*\"Maybe we should make a tag for - each of our pets in case they get lost!\"*\r\n\r\nFinish this tag by drawing - a rectangle around the outside. \r\n(The long sides are 200 pixels each and - the short sides are each 100 pixels)" - grade2_MakeDogTag_5_markdown_instruction: "*\"Now a tag for Belle!\"*\r\n\r\nDraw - this diamond with 200 pixel sides." - grade2_MakeDogTag_6_markdown_instruction: "**Challenge:** This tag is a special - one! Can you figure out how to draw the outline? \r\n(The long side is 150 - pixels and each of the short sides are 75 pixels.)" - grade2_MakeDogTag_7_markdown_instruction: "One more tag. This is a triangle - for Pi. \r\n(Each side is 150 pixels)" - grade2_MakeDogTag_8_markdown_instruction: "Now let's connect a bunch of V's - together in a loop." - grade2_MakeDogTag_9_markdown_instruction: "Time to make something snazzy! \r\n\r\nRebuild - the code from the last puzzle, but this time, add a left turn of 30 degrees - inside the loop. Now, repeat it 24 times instead of 8." - grade2_MakeDogTag_BFP_markdown_instruction: "*\"Hi, I'm an artist. You can - write code to make me draw almost anything.\"*\r\n\r\nPlay with the blocks - in the toolbox to see what they do!" - grade2_MakeDogTag_FP_markdown_instruction: "**Freeplay:** What shape will you - make the tag for your pet?\r\n<br/><br/>\r\n\r\n\r\nHere are some ideas you - could try if you get stuck:\r\n![](https://images.code.org/e36330061c21807fac24d804e301e572-image-1475814869558.26.01.png)" - grade2_maze_debuggingFP_markdown_instruction: "*\"Now, help me sneak up on - the pig any way you want to!\"*" - grade2_maze_intro10_markdown_instruction: "Solve this puzzle." - grade2_maze_intro2_markdown_instruction: "Welcome to Code Studio! Here you - will learn to use blocks to build programs. Press `Ok`, then find the `Run` - button to run your first program." - grade2_maze_intro3_markdown_instruction: "The `workspace` is where you will - create all of your programs. Find the workspace, then see what the program - does." - grade2_maze_intro4_markdown_instruction: "The `toolbox` is where blocks are - stored. You can drag them into the `workspace` to create programs." - grade2_maze_intro6_markdown_instruction: "That’s it! Now we’re ready to try - to solve a few puzzles." - grade2_maze_intro7_markdown_instruction: "This time, try something a bit more - challenging." - grade2_maze_intro8_markdown_instruction: "This is a challenge puzzle. It is - meant to be hard and will probably take you a couple of tries to solve. If - you don’t solve it after several tries, don’t worry! It will be in the Play - Zone at the end of the stage and you can try it again when you’ve had more - practice." - grade2_maze_intro9_markdown_instruction: "Solve this puzzle." - grade2_playlab_project_3_markdown_instruction: "Can you have Waddles (actor - 1) say \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen - you're done, play the game to make that happen.\r\n\r\n![](https://images.code.org/a634f249021651f60a1acf37bf78d07d-image-1475342557950.gif)" - grade2_playlab_project_6_markdown_instruction: "<style>\r\n.hint{\r\n\tpadding: - 15px 15px 15px 40px; \r\n background-color:#eeeeee; \r\n border-radius:10px;\r\n}\r\n.hintInner{\r\n\tpadding: - 15px 15px 15px 15px; \r\n background-color:#FFFFFF; \r\n border-radius:10px;\r\n}\r\n\r\nimg{\r\n\tborder-radius: - 10px;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n</style>\r\n\r\nCreate - your own story. When you're done, click \"Finish\" to share with friends.\r\n<br/>\r\n\r\n<h5 - class=\"hint\">\r\n<details>\r\n<summary><b>Need some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5 - class=\"hintInner\">\r\n\t\t<ul>\r\n \t<li><strong>Who's there?</strong> - - Make characters appear with random images, so no one knows who's showing - up next.</li>\r\n <li><strong>Going on an Adventure</strong> - - Change the background, then have the characters talk about where they are - now. </li>\r\n <li><strong>Pinball</strong> - Make one character - move using the arrow keys (use `when up arrow`, `when down arrow` blocks), - then play random sounds when it collides with other characters on the screen. - </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" - grade2_puppy_loops2_markdown_instruction: "Suddenly, a magical block appears! With - the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to - the pig by creating a loop that uses only one `move forward` block inside - of a `repeat`?" - grade2_puppy_loops3_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nSolve - this puzzle by creating a loop!" - grade2_puppy_loops4_markdown_instruction: "In this puzzle, two `repeat` loops - will help you get to the pig with the fewest number of blocks!" - grade2_puppy_loops5_markdown_instruction: "*\"Get me to the pig as quickly - as possible!\"*" - grade2_puppy_loops6_markdown_instruction: "*\"This pig is ruffling my feathers!\"*\r\n\r\nLoops - even work with more than one block inside! Can you loop this sequence?" - grade2_puppy_loops7_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nUse - what you learned in other puzzles!" - grade2_PuppyLoops_10_markdown_instruction: "My teacher says that I should finish - what I start!\r\n\r\nHelp me finish my pinwheel. Can you figure out what's - wrong?" - grade2_PuppyLoops_2_markdown_instruction: "Suddenly, a magical block appears! With - the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to - the pig by creating a loop that uses only one `move forward` block inside - of a `repeat`?" - grade2_PuppyLoops_3_markdown_instruction: "Get me to the pig! Solve this puzzle - by creating a loop!" - grade2_PuppyLoops_4_markdown_instruction: "In this puzzle, two `repeat` loops - will help you get to the pig with the fewest number of blocks!" - grade2_PuppyLoops_8_markdown_instruction: "This code for the cat's whiskers - is wrong. \r\n\r\nFix this code to draw whiskers that are all the same length." - grade2_PuppyLoops_9_markdown_instruction: "Looks like the C in code is drawn - backwards!\r\n\r\nCan you make it look like a C again?" - grade3_bee_conditionals_new1a_markdown_instruction: "You can only collect nectar - from flowers, but you can check any space to see if there is a flower." - grade3_bee_conditionals_new2a_markdown_instruction: "In this puzzle, we know - that every flower has exactly one nectar, but the flowers aren't spaced evenly.\r\n\r\nGet - all of the nectar using as few blocks as possible." - grade3_bee_conditionals_new3b_markdown_instruction: "Conditionals can be helpful, - even when you know exactly what is in each spot!\r\n\r\nCollect all of the - nectar and make all of the honey." - grade3_bee_conditionals_quantum1_markdown_instruction: "*\"This cloud is blocking - my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. If there's - a flower, get nectar." - grade3_bee_conditionals_quantum2_markdown_instruction: "More clouds! \r\n\r\nCheck - underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade3_bee_conditionals_quantum3_markdown_instruction: "*\"Now I just want - to make honey.\"*\r\n\r\nSome of these clouds might have honeycombs under - them. Be sure to check if a honeycomb is hiding behind each cloud!" - grade3_bee_conditionals_quantum4_markdown_instruction: "Sometimes a cloud covers - a flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block - to collect nectar at flowers and make honey at honeycomb." - grade3_bee_conditionals_quantum5_markdown_instruction: "**Challenge:** There - will be either a flower or a honeycomb under each of those clouds!\r\n\r\nUse - the `if/else` block to collect nectar if there is a flower.\r\nOtherwise, - make honey (because there is a honeycomb)." - grade3_Conditionals_1_markdown_instruction: "I'm a hungry bee! \r\n\r\n\r\nHelp - me collect all of the nectar from the flowers using the fewest number of blocks." - grade3_Conditionals_10_markdown_instruction: "There's a lot happening here!\r\n\r\nUse - what you've learned to collect all of the nectar and then make the honey." - grade3_Conditionals_11 BAD_markdown_instruction: "**Assessment:** Use a `while` - loop to collect all of the nectar from these flowers." - grade3_Conditionals_11_markdown_instruction: "Let's put everything together!\r\n\r\nUse - what you've learned to help me collect nectar only from flowers that have - it, using as few blocks as possible. \r\n\r\nDon't forget to make honey - at the end." - grade3_Conditionals_12_markdown_instruction: "This stair step pattern should - look familiar. \r\n\r\nCan you collect nectar only from the flowers that - have some, using as few blocks as possible?" - grade3_Conditionals_13_markdown_instruction: "**Assessment:** Collect all of - the nectar. \r\nBe careful not to try to collect nectar from a purple flower - if it doesn't have any." - grade3_Conditionals_2_markdown_instruction: "Look at all of that nectar!\r\n\r\nHelp - me collect the nectar and make the honey using as few blocks as you can. " - grade3_Conditionals_3_markdown_instruction: "These magic purple flowers change!\r\n\r\nEach - time you try the puzzle, purple flowers can have either 1 nectar or none at - all...but you won't know the number until you run the code! \r\n\r\nBe careful - not to collect nectar from a purple flower if it doesn't have any. \r\nYou - must first check if the nectar is equal to 1 using the `if nectar` block." - grade3_Conditionals_8_markdown_instruction: "I wonder what's out there!\r\n\r\nHelp - me fly around the yard and collect nectar only from the flowers that have - some. " - grade3_ConditionalsElse_1_markdown_instruction: "This cloud is blocking my - view! \r\n\r\nCheck to see if there's a flower under the cloud, and only - get nectar if there's a flower. \r\nBe careful, it can change!" - grade3_ConditionalsElse_2_markdown_instruction: "More clouds! \r\n\r\nCheck - underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade3_ConditionalsElse_4_markdown_instruction: "Sometimes this cloud covers - a flower, and sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block - to collect nectar only if it is a flower. \r\nElse, make honey (because it - is a honeycomb)." - grade3_ConditionalsElse_5_markdown_instruction: "There will be either a flower - or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block - to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade3_ConditionalsElse_6_markdown_instruction: "I am not sure how much nectar - this flower has, but I know it has either 1, 2, or 3 nectar. \r\n\r\nCombine - the conditional blocks (`if` and/or `if/else`) to only get as much nectar - as the flower has. \r\n\r\nRemember, the amount of nectar can change each - time you run the puzzle!" - grade3_ConditionalsElse_7_markdown_instruction: "These flowers can have 3, - 2, or 1 nectar. \r\n\r\nComplete the `check purple flower` function and use - it to collect all of the nectar at the flowers." - grade3_ConditionalsElse_8_markdown_instruction: "Write the function for `check - flower make honey`. \r\n\r\nYour function should check if the purple flower - has 3, 2, or 1 nectar and get all of the nectar. \r\nThen, move forward and - make honey." - grade3_ConditionalsElse_9_markdown_instruction: "**Assessment:** This cloud - is either hiding a flower with one nectar or a honeycomb that needs one honey. \r\n\r\nComplete - the `get nectar or make honey` function, then call it to collect the nectar - or honey. \r\n" - grade3_ConditionalsElse_TeacherIDo_markdown_instruction: "There will be either - a flower or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` - block to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade3_Debugging_1_markdown_instruction: "These blocks are really bugging me!\r\n\r\nFix - the error(s) to collect all of the nectar." - grade3_Debugging_10_markdown_instruction: "**Challenge:** *\"This puzzle is - making me loopy!\"*\r\n\r\nAll of the commands that you need are already here...now - use your debugging skills to figure out how to solve this puzzle." - grade3_Debugging_11_markdown_instruction: "**Challenge:** Fix the errors to - collect all of the nectar and make all of the honey." - grade3_Debugging_2_markdown_instruction: "*\"These blocks are really bugging - me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." - grade3_Debugging_3_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix - the error(s) to collect all of the nectar." - grade3_Debugging_4_markdown_instruction: "*\"These blocks are really bugging - me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of - the honey." - grade3_Debugging_5_markdown_instruction: "That flower looks tasty! \r\n\r\nFix - the error(s) to collect all of the nectar. \r\nYou can now use both run and - step." - grade3_Debugging_6_markdown_instruction: "What a sweet challenge!\r\n\r\nFix - the error(s) to collect all of the nectar." - grade3_Debugging_8_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix - the error(s) to make all of the honey." - grade3_Debugging_9_markdown_instruction: "\"Bee\" patient with this one!\r\n\r\nYou - will need to fix a couple of things in this program to collect all of the - nectar and make all of the honey." - grade3_Loops_10_markdown_instruction: "Such a busy bee!\r\n\r\nHelp Bee collect - all of the nectar and make all of the honey with the fewest blocks possible." - grade3_Loops_11_markdown_instruction: "The shape of this path is different - from the others. \r\n\r\nCan you collect all of the nectar using as few blocks - as possible?" - grade3_Loops_3_markdown_instruction: "Use a `repeat` loop to collect all of - the nectar." - grade3_Loops_4_markdown_instruction: "Now use the `repeat` block to collect - all of the nectar and make all of the honey." - grade3_Loops_5_markdown_instruction: "What a beautiful field of flowers!\r\n\r\nHelp - the bee visit each one.\r\n\r\nCan you find a way to do it with fewer than - 7 blocks?" - grade3_Loops_6_markdown_instruction: "How many times can loops help you in - this puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete - this puzzle with the fewest blocks possible." - grade3_Loops_7_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." - grade3_Loops_TeacherIDo_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." - grade3_maze_Loop1_markdown_instruction: "**Assessment:** Get me to the sunflower - using only 5 blocks! " - grade3_maze_loops1_markdown_instruction: "*\"Must...eat...sunflower!\"*\r\n\r\nGet - the zombie to the sunflower." - grade3_maze_loops2_markdown_instruction: "Get the zombie to the sunflower using - the fewest blocks possible! " - grade3_maze_loops2a_markdown_instruction: "*\"Zombie hungry!\"*\r\n\r\nGet - the zombie to the sunflower using the fewest number of blocks possible." - grade3_maze_loops3_markdown_instruction: "*\"Must eat sunflower!\"*\r\n\r\nGet - the zombie to the sunflower using only the blocks available." - grade3_maze_nestedLoops2_markdown_instruction: "Suddenly, a magical block appears! With - the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to - the pig by creating a loop that uses only one `move forward` block inside - of a `repeat`?" - grade3_maze_nestedLoops3_markdown_instruction: "Get me to the pig! You can - only use one `move forward` block this time" - grade3_maze_nestedLoops4_markdown_instruction: "In this puzzle, two `repeat` - loops will help you get to the pig with the fewest number of blocks!" - grade3_RunningFarm_1_markdown_instruction: "*\"Corn you help me harvest today?\"*\r\n\r\nUse - conditionals to make sure that you pick all of the corn, but don't disturb - the stalks where nothing is growing yet." - grade3_RunningFarm_10_markdown_instruction: "Collect all of the corn and lettuce, - then pick the pumpkin." - grade3_RunningFarm_11a_markdown_instruction: "Collect all of the corn and lettuce, - then pick the pumpkin." - grade3_RunningFarm_2_markdown_instruction: "*\"Lettuce collect both crops from - this row!\"*\r\n\r\nHelp the farmer collect both corn and lettuce from the - field." - grade3_RunningFarm_4_markdown_instruction: "*\"Gosh! Now the crops are growing - in clusters!\"* \r\n\r\nHelp the farmer pick all of the lettuce in each cluster - before moving on to the next bunch." - grade3_RunningFarm_5_markdown_instruction: "*\"What a bountiful crop!\"*\r\n\r\nThis - field has clusters of corn, lettuce, and pumpkins all growing together. Can - you collect them all?" - grade3_RunningFarm_6_markdown_instruction: "*\"Let's take this one step further!\"*\r\n\r\nCan - you figure out how to pick the pumpkin? Make sure to collect all of the corn - along the way!" - grade3_RunningFarm_7_markdown_instruction: "**Challenge:** Collect all of the - corn and lettuce, then pick the pumpkin." - grade3_RunningFarm_8_markdown_instruction: "Harvesting one type of crop at - a time takes too long. Can you help me harvest both wheat and potatoes in - one run? I wonder if you can stack another While There is... loop on top of - another one?" - grade3_RunningFarm_9_markdown_instruction: "Can you help me one last time? - I want to collect as many crops as I can before the weeds take over this field. - How many do you think we can get?" - grade4_arist_functions_star0_markdown_instruction: "Have you drawn something - like this star before? Practice making it one more time by adding a `turn` - and a `repeat` block." - grade4_arist_nested_loop_circles1_markdown_instruction: "**Assessment:** Use - a nested loop to complete the design." - grade4_arist_nested_loop_flags1_markdown_instruction: "Loop the given code - to create a windmill." - grade4_arist_nested_loop_polygons1_markdown_instruction: "Loop this design - 10 times. \r\n\r\nHow much do you have to turn each time you loop?" - grade4_arist_nested_loop_polygons2_markdown_instruction: "Loop this shape 6 - times. \r\n\r\nHow much do you have to turn each time you loop? " - grade4_arist_nested_loop_squares1_markdown_instruction: "Can you draw these - 10 squares of this sidewalk using a nested loop? \r\n\r\nEach square is 30 - pixels." - grade4_arist_nested_loop_triangles2_markdown_instruction: "Now nest this loop - inside another loop to draw 10 triangles. \r\nThis is called a \"nested\" - loop. " - grade4_arist_nested_loop_triangles3_markdown_instruction: "Can you draw a hexagon - by looping the triangle code?" - grade4_arist_nested_loop_triangles4_markdown_instruction: "Draw the teeth in - the alligator's mouth!" - grade4_arist_nested_loop_triangles5_markdown_instruction: "Create a sun by - nesting the starter code in another loop.\r\n\r\nTo get this cool design with - a hollow center, you'll need to jump forward by the length of the triangle - before turning." - grade4_arist_nested_loop_triangles6_markdown_instruction: "Can you draw these - 36 triangles using a nested loop?" - grade4_artist_freeplay_markdown_instruction: "Create your own project! This - creation will be saved to your Projects dashboard so that you can easily edit - it any time!" - grade4_artist_functions1_markdown_instruction: "*\"Me zombie artist. Me love - drawing!\"*\r\n\r\nHelp the zombie draw glasses using squares with sides of - 100 pixels. \r\nThe bridge between the glasses is 75 pixels long.\r\n\r\n" - grade4_artist_functions2_markdown_instruction: "Functions let you define new - blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a - function called `draw a square`. This time, use the `draw a square` function - to create the glasses. \r\n\r\nThe squares are 75 pixels apart." - grade4_artist_functions2a_markdown_instruction: "Create this image using only - the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - grade4_artist_functions3a_markdown_instruction: "Create this image using only - the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - grade4_artist_functions3b_markdown_instruction: "This time, use lines of 8 - hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the 6 - times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - grade4_artist_functions_challenge_markdown_instruction: "**Functions Super - Challenge:** Use the suggested functions to draw four rows of hexagons. Notice - how our even numbered rows are shifted to the right?" - grade4_artist_functions_challenge2_markdown_instruction: "**Functions Super - Challenge:** Use the suggested functions to draw four rows of hexagons. Notice - how our even numbered rows are shifted to the right?" - grade4_artist_functions_freeplay_markdown_instruction: "Create your own project! - This creation will be saved to your Projects dashboard so that you can easily - edit it any time!\r\n<hr/>\r\n<h3>Here are some ideas if you are looking for - inspiration, or make your own function!</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/7e85601182e37a5331a17c0e29cf504d-image-1471042674372.42.08 - PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/6ae7664d92a706e852d92dc419836557-image-1471042678266.55.48 - PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n\r\n</tr>\r\n</table>" - grade4_artist_functions_stars0_markdown_instruction: "We will come back to - functions shortly. Let's take a break to practice making this star. \r\n\r\nYou - can make this drawing by adding a repeat block." - grade4_artist_functions_stars1_markdown_instruction: "Now that you can draw - a star, try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels - long\r\n- Turn 45 degrees between branches\r\n- Jump 100 pixels between each - star" - grade4_artist_functions_stars2_markdown_instruction: "When is drawing three - stars harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw - only those three stars to finish this puzzle." - grade4_artist_functions_stars3_markdown_instruction: "That last one is tough - if you only use loops. Let's try one more time and see if this new 'function' - makes it easier to **draw a star**." - grade4_artist_functions_windows0_markdown_instruction: "You are doing great! - \r\n\r\nMake this window by drawing a square, then turning 90 degrees before - drawing another, and so on." - grade4_artist_functions_windows1_markdown_instruction: "You just created a - nested loop! Let's repeat all of these commands with **another** `repeat` - block to draw windows on this house. Don't forget to `jump`!" - grade4_artist_functions_windows2_markdown_instruction: "Let's take the code - for the window and add it to function `draw a window`. Now, we can call the - function any time we need to draw a window without having to write the code - again. \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" - width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw - a window` and calling it five times. Watch out for the door!\r\n\r\n- The - top windows are 50 pixels away from each other. \r\n- The bottom windows - are 100 pixels below the top set." - grade4_artist_functionsChallenge0_markdown_instruction: "**Challenge:** Create - as many functions as you think you need to make this drawing of 50 pixel squares." - grade4_artist_nested_loop_circles1_markdown_instruction: "**Assessment:** Use - a nested loop to complete the design." - grade4_artist_nested_loop_flags1_markdown_instruction: "Loop the given code - to create a windmill." - grade4_artist_nested_loop_polygons1_markdown_instruction: "Loop this design - 10 times. \r\n\r\nHow much do you have to turn each time you loop?" - grade4_artist_nested_loop_polygons2_markdown_instruction: "Hi, I'm the Artist! - Let's create some drawings together! For starters, try repeating this shape - 6 times. \r\n\r\nHow much do you have to turn each time you loop? " - grade4_artist_nested_loop_squares1_markdown_instruction: "Can you draw these - 10 squares of this sidewalk using a nested loop? \r\n\r\nEach square is 30 - pixels." - grade4_artist_nested_loop_triangles1_markdown_instruction: "Complete the code - to draw these triangles. The first one is done for you. Hint: 3 triangles - in a 360 degree rotation.\r\n\r\n" - grade4_artist_nested_loop_triangles2_markdown_instruction: "Let's make a quick - adjustment to get completely different image! \r\n<b>Hint:</b> ? × 10 = 360" - grade4_artist_nested_loop_triangles3_markdown_instruction: "Can you draw a - hexagon by looping the triangle code?\r\nHint: 6 × ? = 360" - grade4_artist_nested_loop_triangles4_markdown_instruction: "Let's try something - a little different! Can you help me draw the bottom teeth in the alligator's - mouth?" - grade4_artist_nested_loop_triangles5_markdown_instruction: "Create a sun by - nesting the starter code in another loop.\r\n\r\nTo get this cool design with - a hollow center, you'll need to jump forward by the length of the triangle - before turning." - grade4_artist_nested_loop_triangles6_markdown_instruction: "Can you draw these - 36 triangles using a nested loop?" - grade4_artist_nestedLoops_challenge_markdown_instruction: "<img src=\"https://images.code.org/c876143212d195192013582f57c6df04-image-1445625392518.36.18.png\" - width=\"150px;\" style=\"mix-blend-mode: multiply;\" />\r\n\r\n**Play time:** Here - is the code for an interesting shape. \r\n\r\nWhat happens when you repeat - it multiple times, turning between each iteration? \r\n\r\nNotice that the - turns in this shape add up to *420 degrees*, which means that when your artist - is done drawing, it will be facing a different direction than when you started. That - new direction is exactly *60 degrees* to the *right* of where you began.\r\n\r\n<hr/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat - 4</b></summary>\r\n<br/>\r\nIf you want to come full circle in just 4 repetitions, - you need the artist to turn a total of **360 degrees/4 = 90 degrees** each - time. You can do that by adding an extra `turn right by 30 degrees` block - to the outer loop (since **60+30 = 90**.) \r\n<br/>\r\n<img src=\"https://images.code.org/9da67a628ed72e87520a02a0d917e2af-image-1440132370113.44.12.png\" - width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n<br/><br/>\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat - 6</b></summary>\r\n<br/>\r\nWhen you repeat the shape as-is 6 times, you get - a total rotation of **6x60 degrees** which is a full **360 degree** cycle. \r\n<img - src=\"https://images.code.org/b79f96b87097ce3afe8a6a5608d04e36-image-1440132287456.44.27.png\" width=\"500px;\" style=\"mix-blend-mode: - multiply;\" />\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat - 12</b></summary>\r\n<br/>\r\nIf you want to repeat the image 12 times, you - need the artist to turn a total of **360 degrees/12 = 30 degrees** each iteration. That - means you will need to adjust the artist back a bit with `turn left by 30 - degrees` before you repeat the shape again. <br/><br/>\r\n<img src=\"https://images.code.org/ad254952522674496918561096817c66-image-1440132424792.44.01.png\" - width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n</details>\r\n</h4>\r\n\r\nNow - it's your turn! Can you recreate each image by repeating the starting shape? " - grade4_artist_nestedLoops_challenge2_markdown_instruction: "<img src=\"https://images.code.org/6cac10470af71bbb5d75bf5e2669046f-image-1439939145211.png\" - width=\"200px\"/>\r\n\r\nNow for a challenge! \r\n\r\nHere is a design that - uses only blocks that you have already been shown. Can you figure out how - to recreate it? Feel free to use trial and error. You are not expected to - get it perfect the first time.\r\n\r\nThe repeated shape is almost identical - to the one from the last puzzle, except that the length used in the first - loop is a little smaller. " - grade4_artist_parameters_squares1_markdown_instruction: "Click \"edit\" to - fill in the function definition of `draw a square` and add a parameter. \r\nIt - should take a length parameter just like the triangle. \r\n\r\n**This time, - draw 3 squares:** 25, 50 and 75 pixels in length. The lefthand corners are - each 100 pixels away from the last." - grade4_artist_parameters_triangles1_markdown_instruction: "Today, we're going - to try out a different, more powerful function editor. See if you can figure - out how to edit the `draw a triangle` function to find the bugs." - grade4_artist_parameters_triangles2_markdown_instruction: "Do you notice anything - different about these function blocks? Click “Run” to see what happens." - grade4_artist_parameters_triangles2b_markdown_instruction: "Can you complete - this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than - the last. \r\nThe first triangle has 25 pixel sides." - grade4_artist_parameters_triangles3_markdown_instruction: "Can you complete - this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than - the last. \r\nThe first triangle has 25 pixel sides." - grade4_artist_parameters_triangles4_markdown_instruction: "The code for this - triangle function is broken. \r\n\r\nCan you edit the function to fix it, - and then make triangles of length 25, 50, and 75?" - grade4_artist_parameters_trianglesx_markdown_instruction: "Can you complete - this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than - the last. \r\nThe first triangle has 25 pixel sides." - grade4_bee_conditionals_nested_loops_markdown_instruction: "**Assessment:** - Collect all of the nectar. \r\nBe careful not to try to collect nectar from - a purple flower if it doesn't have any." - grade4_bee_conditionals_new1_markdown_instruction: "**Assessment:** Collect - all of the nectar. \r\nBe careful not to try to collect nectar from a purple - flower if it doesn't have any." - grade4_bee_conditionals_quantum1_markdown_instruction: "This cloud is blocking - my view! \r\n\r\nCheck to see if there's a flower under the cloud, and only - get nectar if there's a flower. \r\nBe careful, it can change!" - grade4_bee_conditionals_quantum2_markdown_instruction: "More clouds! \r\n\r\nCheck - underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade4_bee_conditionals_quantum4_markdown_instruction: "Sometimes this cloud - covers a flower, and sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` - block to collect nectar only if it is a flower. \r\nElse, make honey (because - it is a honeycomb)." - grade4_bee_conditionals_quantum5_markdown_instruction: "There will be either - a flower or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` - block to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade4_bee_functions2_markdown_instruction: "Functions are blocks of code that - perform a task. \r\n\r\nUse the `get 2 nectar` function to collect the nectar - from each flower." - grade4_bee_functions3_markdown_instruction: "Build the `get 5` function to - use in this puzzle." - grade4_bee_functions4_markdown_instruction: "The `move and get nectar` function - turns the bee, collects nectar, and then returns the bee to where it started. \r\n\r\nUse - the `move and get nectar` function to collect all of the nectar." - grade4_bee_functions9_markdown_instruction: "**Challenge:** These flowers can - have a different amount of nectar each time you run the puzzle. \r\n\r\nCreate - a function that collects all of the nectar from each flower." - grade4_bee_nestedLoops1_markdown_instruction: "*\"Can you BEE-lieve all of - these flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " - grade4_bee_nestedLoops2_markdown_instruction: "**Challenge:** Figure out how - to get all of the nectar using only the blocks available." - grade4_bee_nestedLoops4_markdown_instruction: "Collect all of the nectar from - each flower and make honey at the honeycomb. " - grade4_bee_nestedLoops5_markdown_instruction: "**Challenge:** Collect all of - the nectar from each flower and make honey at each honeycomb. \r\n" - grade4_bee_nestedLoops_assess_markdown_instruction: "**Assessment:** Collect - all of the nectar and make all of the honey using loops.\r\n\r\n**Hint:** - *There are several possible solutions!*" - grade4_frozen_freeplay_markdown_instruction: "You've officially become a master - artist! Create a winter wonderland." - grade4_frozen_functions0_markdown_instruction: "A circle is a special shape. - Can you figure out what number to replace the question marks with to draw - a circle?" - grade4_frozen_functions1_markdown_instruction: "Use the new “dreate a circle” - `function` to create 10 overlapping circles. Don't forget to `jump` forward - between circles." - grade4_frozen_functions1a_markdown_instruction: "Use the new “Create a circle” - block to create 10 overlapping circles. Don't forget to jump forward between - circles." - grade4_frozen_functions2_markdown_instruction: "Now let's create 20 overlapping - circles, turning 18 degrees between each circle." - grade4_frozen_functions3_markdown_instruction: "Here's a ”Create circle” block - that can make circles of different sizes. Can you use this to create a small - circle of size 5 and a larger circle of size 10?" - grade4_frozen_functions4_markdown_instruction: "Intricate snow patterns can - be created with very simple shapes. Can you make a pattern by repeating 5 - circles of size 5 and 5 circles of size 10?" - grade4_frozen_nested_loop_diamonds1_markdown_instruction: "Let’s use a repeat - block to create a rhombus. Like a square, all sides are equal length, but - the angles are different. This one has 60 degree and 120 degree angles instead - of all 90 degree angles." - grade4_frozen_nested_loop_diamonds2_markdown_instruction: "Did you know every - snowflake is a different shape? Let's create a new snowflake by using another - “Repeat\" block to repeat a parallelogram 4 times, turning right by 90 degrees - between each parallelogram." - grade4_frozen_nested_loop_diamonds3_markdown_instruction: "Now, let's create - a new snowflake by using the repeat block to repeat a parallelogram 10 times, - turning right by 36 degrees between each one." - grade4_frozen_nested_loop_rectangle1_markdown_instruction: "Hi, I’m Anna of - Arendelle! Let’s use a repeat block to create a rectangle. This one is 200 - pixels long and 100 pixels tall. All of the corners are 90 degree angles." - grade4_frozen_square_markdown_instruction: "Hi, I’m Anna of Arendelle! Let’s - make a square with the “Repeat” block, which uses fewer blocks. How many times - (???) should the “Repeat” block loop the blocks inside it to make a square?" - grade4_frozen_square_loop1_markdown_instruction: "Hi, I’m Anna of Arendelle! - Let’s make a square with the “Repeat” block, which uses fewer blocks. How - many times (???) should the “Repeat” block loop the blocks inside it to make - a square?" - grade4_frozen_square_loop2_markdown_instruction: "Let's create three squares, - turning after each square. Be sure to turn by 120 degrees before each new - square." - grade4_frozen_square_loop3_markdown_instruction: "Can you create a snowflake - using the “Repeat” block to make a square 10 times, and the “Turn” block to - turn 36 degrees between each square?" - grade4_playlab_freeplay_markdown_instruction: "It's free play time! Have fun - with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> - - Have character 2 patrol and use your arrow keys to make character 1 chase - until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> - - Have a character constantly pop up at a random location. Award points for - clicking the sprite before it disappears. </li>\r\n <li><strong>Best - Guess</strong> - Make both characters disappear, change location to a random - spot, then reappear as a random character. Click on the first one and get - a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" - grade4_playlab_test_markdown_instruction: "<h5><b>\r\nIn our game, how should - we score points? \r\n</b></h5> \r\n<br/>\r\n\r\n1. Add 1 to your `points` - variable each time Dog hits Cat with a piece of pie. <br/> <br/> \r\n2. - Use the `when actor 2 touches anything` event to trigger an update to your - score. You can increment your variable by setting `points = points + 1.` <br/> <br/> - \r\n3. Get your score up to 10 to pass the level.\r\n\r\n<br/><br/>\r\n<h4>\r\n**Note:** - Use the right arrow to throw pie!\r\n</h4>" - grade4_playlab_test2_markdown_instruction: "Here's a function called `jump` - that causes your main character to jump up 100 pixels. \r\n\r\nRun the program - and use the jump function to collect all of the flags by moving the dog with - the arrow keys." - grade4_review_artist1_markdown_instruction: "Hi, I'm an artist. You can write - code to make me draw almost anything. Use a few blocks to make me draw over - the grey lines in the picture. (Each line is 100 pixels long)\r\n\r\n<br> \r\n" - grade4_review_artist2_markdown_instruction: "This house needs a roof! Draw - the triangle. \r\n\r\nHint: all three sides are the same length.\r\n\r\n<img - src=\"https://images.code.org/8b10073fd1a7fe53b4da33ec2229894b-image-1468018903891.gif\" - width=\"300\"/>" - grade4_review_artist3_markdown_instruction: "The jump block moves the artist - without drawing. Draw the dashed line using both the `jump forward` and `move - forward` blocks. Each line is 50 pixels long." - grade4_review_bee1_markdown_instruction: "Now use the `repeat` block to collect - all of the nectar and make all of the honey." - grade4_review_bee3_markdown_instruction: "Such a busy bee!\r\n\r\nHelp Bee - collect all of the nectar and make all of the honey with the fewest blocks - possible." - grade4_scaffolded_project1_markdown_instruction: "It is amazing how much you - have learned! Let's put them together to make a game, step by step.\r\nTo - start, let's set up your game's space and actor. We've put these blocks - in your tool box. Choose a background and map, and pick an actor to be your - game's hero.\r\n\r\n![](https://images.code.org/745931ce34b3c47de19c36009e4a9c48-image-1471464938470.14.47 - PM.png)" - grade4_scaffolded_project2_markdown_instruction: "Now let's get things moving! - Use event handlers and actions to make your hero move.\r\n\r\nWe've added - these blocks to your tool box to help you.\r\n\r\n![](https://images.code.org/6216c0559cfae16005ffb53e6532473b-image-1471472994205.23.54 - PM.png)" - grade4_scaffolded_project3_markdown_instruction: "Now that your game has a - hero, it's time to start adding other actors and assigning them behaviors. - \r\n\r\nAdd two or more additional actors to your game and make them move. - Do you want to have an actor patrol back and forth? Try using a these new - blocks to bring these other components of your game to life!\r\n\r\n![](https://images.code.org/4cfffd476c6129891eb8bde246a711a8-image-1472065288448.00.42 - PM.png)\r\n\r\n**NOTE:** Chasing and fleeing behavior commands are coming - soon!" - grade4_scaffolded_project4_markdown_instruction: "Just getting the actors moving - is a great step, but we need to program some interactions to make this really - feel like a game. A simple way to do this is to add or remove points when - actors collide with projectiles or each other. Find some interesting ways - to change the score in your game.\r\n\r\n*Don't expect to get this right - on the first try. Keep testing your game as you code. You'll not only want - a game that works, but one that is fun to play!*\r\n\r\nWe've added these - blocks to your toolbox:\r\n\r\n![](https://images.code.org/ad0df96aa91c89e3d903dce2fe19517f-image-1472070105051.20.55 - PM.png)" - grade4_scaffolded_project4a_markdown_instruction: "Just getting the actors - moving is a great step, but we need to program some interactions to make this - really feel like a game. A simple way to do this is to add or remove points - when actors collide with projectiles or each other. Find some interesting - ways to change the score in your game.\r\n\r\n*Don't expect to get this right - on the first try. Keep testing your game as you code. You'll not only want - a game that works, but one that is fun to play!*\r\n\r\n![](https://images.code.org/876b13abf8a7984f94342dd9a5c8a8f0-image-1472069578010.42.30 - PM.png)" - grade4_scaffolded_project5_markdown_instruction: "Great job! You have all the - basic components of a working game. Now spend some time making sure the game - works the way you want. Try including a way to win or lose your game.\r\n\r\n*Don't - forget: Keep testing your game as you code. You'll not only want a game that - works, but one that is fun to play!*\r\n\r\nYour toolbox has been re-organized - to make it easier to find what you need. We've also added these blocks:\r\n\r\n![](https://images.code.org/59b92b4c288bd5fc0c3be355c968f3d1-image-1472074578380.27.57 - PM.png)" - grade4_scaffolded_project6_markdown_instruction: "You've finished! Now you - can play your game or share it with your friends and classmates!" - grade5_artist_binary1_markdown_instruction: "Binary is a way of representing - information using only two options. Here, we're going to use the options - \"off\" (represented by the number 0) and \"on\" (represented by the number - 1). \r\n\r\nWe've provided you with a grid of \"pixels\" that you can walk - through and make designs by turning on only certain squares. \r\n\r\n**Can - you have the artist draw \"01010101\" in binary in the first row?**" - grade5_artist_binary10_markdown_instruction: "<img src=\"https://images.code.org/0a30f23ff6138828d053267719d34fa8-image-1444435986654.00.22.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own. - \r\n<br/>\r\n" - grade5_artist_binary2_markdown_instruction: "Here's a function that takes - a binary string of 1's and 0's and instructs the artist to follow them from - left to right, top to bottom. \r\n\r\nThe artist will fill-in the squares - when it sees a 1 and ignore the square when it sees a 0. \r\n\r\n**Run this - code to see how the artist uses binary to draw this pattern.**" - grade5_artist_for_loops1_markdown_instruction: "Use a `for` loop to draw this - triangle that is 50 pixels wide. If you count from 1 to 3 by 1s, you can use - this just like a `repeat` loop." - grade5_artist_for_loops10_markdown_instruction: "**Challenge:** Can you figure - out how to use all of the things you've learned to create this image of polygons, - all with 40 pixel sides?" - grade5_artist_for_loops1a_markdown_instruction: "Try using a `for loop`to create - this triangular design. Don't worry that the numbers are different than the - last puzzle. As long as you turn by the right number of degrees, the artist - will make the correct shape!\r\n\r\n" - grade5_artist_for_loops1b_markdown_instruction: "**Free Play:** Experiment - with the `for` loop and the `counter` variable. \r\n\r\nDrag out a few blocks - and see what happens. \r\n\r\n<br/><br/>\r\n" - grade5_artist_for_loops2_markdown_instruction: "Use a `repeat` inside of a - `for` loop to create this stack of triangles that goes from 50 pixels to 100 - pixels." - grade5_artist_for_loops3_markdown_instruction: "These triangles go from 20 - pixel sides to 200 pixel sides, and each triangle is 20 pixels larger than - the last." - grade5_artist_for_loops4_markdown_instruction: "These squares start at 15 pixels - long, the largest is 300 pixels long, and each square is 15 pixels larger - than the last." - grade5_artist_for_loops5_markdown_instruction: "Just one little change to the - code from the last image can create this drawing. Can you figure out what - that change is?\r\n\r\nHint: You need to remove something!" - grade5_artist_for_loops6_markdown_instruction: "If you turn a little bit more - or less than you normally would for a shape, it creates a neat effect.\r\n\r\nTry - using some of the code from the last level, but turning 89 degrees to create - this twisted square spiral." - grade5_artist_for_loops7_markdown_instruction: "Make three small changes to - the code from the last level to get this! \r\n(This time, the `for` loop - increments by 2)" - grade5_artist_for_loops7a_markdown_instruction: "Take the angle down to 72 - degrees to get a spiraled pentagon." - grade5_artist_for_loops7b_markdown_instruction: "Use the counter inside the - `set alpha` block to get this faded center. \r\n(This hexagon pattern was - made using a 60 degree turn.)" - grade5_artist_for_loops8_markdown_instruction: "Remember back in a previous - stage when we used a variable to control the number of sides in a shape? We - are going to do the same thing with the `counter` variable now. \r\n\r\nThis - pattern starts with a triangle and adds one side at a time until it draws - a decagon (10 sides). Each side should be 100 pixels long. \r\n\r\nHow will - you use the `counter` variable from the `for` loop to recreate this drawing?" - grade5_artist_for_loops9_markdown_instruction: "Let's put it all together! \r\n\r\nUsing - your knowledge of `for` loops and the `counter` variable, create this drawing - where each shape has two more sides than the last. Make sure that each side - is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little - of the code has been provided for you." - grade5_artist_for_loopsfreeplay11_markdown_instruction: "<br/><br/>\r\n<img - src=\"https://images.code.org/9b5897e059bb29bd2faf8504659a3cfc-image-1440719685627.49.33.png\" - width=\"250px\"/> \r\n<br/><br/>\r\n**Free-Play Inspiration:** You've now - learned everything you need to know to make a pattern like this! If this picture - inspires you, try to make something similar. Otherwise, create something all - your own." - grade5_artist_for_loopsfreeplay12_markdown_instruction: "**Free Play:** Try - using the `counter` variable with other drawing elements to make magical images - like this one.\r\n\r\n<img src=\"https://images.code.org/7910db8adf2ec7e4c5fdad0101c68368-image-1475911466143.24.03.png\" - width=\"400px\"/>" - grade5_artist_freeplay_markdown_instruction: "Create your own project! This - creation will be saved to your Projects dashboard so that you can easily edit - it any time!" - grade5_artist_functionparameters10_markdown_instruction: "<img src=\"https://images.code.org/1df195df9d808f0dd539bef0f5c2958b-image-1443049871563.02.54.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own.\r\n\r\nNotice: - We've used the `set alpha` block to make the \"petals\" fade toward the outside." - grade5_artist_functionparameters11_markdown_instruction: "**Freeplay:** Below - there are functions you've written, and more for you to play with. Play with - the pen width to see how different your drawings look!" - grade5_artist_functionparameters7_markdown_instruction: "This image is similar - to the last. \r\n\r\nCan you use a `for` loop with your function to make - this design?" - grade5_artist_functionparameters8_markdown_instruction: "Use the function from - the last puzzle to draw this series of shapes. \r\n\r\n\r\nThe triangle has - 21 pixel sides, and the sides in each following shape are 7 pixels longer - than the last. \r\nUse the `multiplication`block to make this all happen - with just one function call.\r\n<hr/>\r\nBe sure to jump 100 pixels between - polygons. <br>\r\nThe multipication block looks like this ![](https://images.code.org/55e293447c6b26bbbcf29cda2036706b-image-1481322763779.png)\r\n\r\n" - grade5_artist_functionparameters9_markdown_instruction: "**Challenge:** Edit - `draw a spiral edge` to use `length` and `sides` parameters, then recreate - these shapes.\r\n\r\n- The square goes from 3 pixels to 90 pixels.\r\n- The - hexagon goes from 3 pixels to 100 pixels.\r\n- The triangle goes from 3 pixels - to 105 pixels." - grade5_artist_functionparameters9a_markdown_instruction: "Finish off the `draw - a spiral edge` function to also ask for a minimum length for the center of - the spiral.\r\n\r\n- The smallest side in the center of this square is 50 - pixels long\r\n- The longest side at the outside of this spiral is 200 pixels - long\r\n" - grade5_artist_functionparameters9b_markdown_instruction: "Can you figure out - how to make this drawing using the function that you just created?\r\n\r\n- - The red spiral goes from 50 to 200 pixels\r\n- The blue spiral goes from 25 - to 125 pixels\r\n- The green spiral goes from 100 to 300 pixels\r\n" - grade5_artist_functionparameters_6_markdown_instruction: "Great job! Now edit - this function to add a parameter for the number of sides in your polygon.\r\n\r\nThe - sides of all the shapes are 100 pixels long." - grade5_artist_parameters_squares1_markdown_instruction: "Click \"edit\" to - fill in the function definition of `draw a square` and add a parameter. \r\nIt - should take a length parameter just like the triangle. \r\n\r\n**This time, - draw 3 squares:** 25, 50 and 75 pixels in length. The lefthand corners are - each 100 pixels away from the last." - grade5_artist_parameters_squares1a_markdown_instruction: "Today, we're going - to try out a different, more powerful function editor. See if you can figure - out how to edit the `draw a square` function to find the bugs." - grade5_artist_parameters_squares2_markdown_instruction: "Now try creating the - function from scratch! \r\n\r\nCreate a function called `draw a square` and - use it to outline these four boxes. \r\nMake sure to add a parameter for - `length`!\r\n\r\n<hr/>\r\nStarting from the upper right, the box widths are - 50, 100, 150, and 200." - grade5_artist_parameters_squares2a_markdown_instruction: "Edit the function - to accept a parameter called `length`. \r\n\r\nThe sides of each square should - be 25 pixels larger than the last. The first square has 25 pixel sides. Replace - the '???' with the correct values to draw the picture." - grade5_artist_parameters_stars1_markdown_instruction: "That last one is tough - if you only use loops. Let's try one more time and see if this new 'function' - makes it easier to **draw a star**." - grade5_artist_parameters_triangles1_markdown_instruction: "Today, we're going - to try out a different, more powerful function editor. See if you can figure - out how to edit the `draw a square` function to find the bugs." - grade5_artist_parameters_triangles1a_markdown_instruction: "Today, we're going - to try out a different, more powerful function editor. See if you can figure - out how to edit the `draw a triangle` function to find the bugs." - grade5_artist_parameters_triangles1aa_markdown_instruction: "Click \"edit\" - to fill in the function definition of `draw a triangle` and add a parameter. \r\nIt - should take a length parameter just like the triangle. \r\n\r\n**This time, - draw 3 triangles:** 25, 50 and 75 pixels in length. The lefthand corners are - each 100 pixels away from the last." - grade5_artist_parameters_triangles2_markdown_instruction: "Can you complete - this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than - the last. \r\nThe first triangle has 25 pixel sides." - grade5_artist_parameters_triangles2a_markdown_instruction: "Do you notice anything - different about these function blocks? Click “Run” to see what happens." - grade5_artist_parameters_triangles3_markdown_instruction: "The code for this - triangle function is broken.\r\n\r\nCan you edit the function to fix it, and - then make triangles of length 25, 50, and 75?" - grade5_artist_parameters_triangles4_markdown_instruction: "The code for this - triangle function is broken. \r\n\r\nCan you edit the function to fix it, - and then make triangles of length 25, 50, and 75?" - grade5_artist_parameters_trianglesy_markdown_instruction: "The code for this - triangle function is broken.\r\n\r\nCan you edit the function to fix it, and - then make triangles of length 25, 50, and 75?" - grade5_artist_variables_freeplay10_markdown_instruction: "**Free Play:** Experiment - with the number of sides this shape has. Can you change the algorithm so that - the overall size of the shape stays the same, no matter how many sides it - has? " - grade5_artist_variables_freeplay14_markdown_instruction: "**Free Play**: Check - it out! Now your algorithm is nested within one more loop. Experiment with - changing the values of your two variables to draw cool patterns.\r\n\r\nFor - even more effect, try playing with color! Use random colors inside loops - to see how it changes your design." - grade5_artist_variables_freeplay15_markdown_instruction: "<img src=\"https://images.code.org/b5e28b084cb331ee030ea3853ed921bd-image-1440060815818.51.21.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! If this picture inspires you, - try to make something similar. Otherwise, create something all your own. " - grade5_artist_variables_freeplay16_markdown_instruction: "Still playing? \r\n\r\nHere - is a blank canvas where you can create whatever you want!\r\n\r\n<hr/>\r\n<h3>If - you're looking for ideas, try one of these:</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/2e8a6853ccb3ffe9bc6d25aaeea75514-image-1471047821651.10.45 - PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/0b63705c28ac282637a3a5b3cede8608-image-1471047826162.18.02 - PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>" - grade5_artist_variables_hexagons1_markdown_instruction: "Let's try it again! - \r\n\r\nCan you set the `length` variable to 60 to make this cool design with - hexagons?" - grade5_artist_variables_letterT11_markdown_instruction: "Here’s some more complicated - code using the same concepts from the last puzzle - what should you set the - `sides` variable to in order to draw this picture made of squares?\r\n\r\n<p - style=\"font-size:small; padding: 15px 15px 15px 40px; background-color:#dcf3f3; - border-radius:10px;\">\r\n\tJust for fun: Try using a few different numbers - to see what happens to the pattern!\r\n</p>" - grade5_artist_variables_octagons13_markdown_instruction: "When a shape has - lots of sides, each side needs to be shorter if you want the whole pattern - to fit on the screen. \r\n\r\nLet's recreate the algorithm for this amazing - pattern, but instead of manually setting the `length` variable, let's use - a math block with the `sides` variable inside to make sure that each shape - fits correctly. \r\n\r\nThe perimeter of each polygon is 300 pixels." - grade5_artist_variables_pentagon8_markdown_instruction: "Use what you learned - in the last puzzle to create this hexagon using the `sides` variable.\r\n\r\nSee - how you could change just one value to draw a triangle, square, pentagon, - or octagon?" - grade5_artist_variables_pentagon9_markdown_instruction: "Now, recreate the - algorithm from the last level and create a pentagon with sides of length 150." - grade5_artist_variables_pentagons1_markdown_instruction: "Draw this pattern - of pentagons with 100 pixel sides by setting the right value for `length` - and dropping the `length` variable into all of the the correct places. \r\n\r\nSee - how you only have to set the value for `length` once, and the code uses the - right value everywhere?" - grade5_artist_variables_pentagons12_markdown_instruction: "Let's set the `sides` - variable to 5. The more sides we add to this algorithm, the bigger this whole - pattern gets! \r\n\r\n<br/>\r\nNotice that there is another variable called - `length`. \r\nWe can now use that variable wherever we have a `move forward` - block. \r\n\r\nSet the `length` variable to 75 for this shape." - grade5_artist_variables_rectangle6_markdown_instruction: "Now I want to make - a rectangle that is twice as tall as it is wide. We've got a variable called - `width` that needs to be set to 100. Can you use the math blocks to complete - the code?" - grade5_artist_variables_square7_markdown_instruction: "Here’s some code that - can draw any regular polygon. \r\n\r\nThere’s a new variable called `sides` - that is set to 4. \r\n\r\nCan you use the `sides` variable (along with the - math block) to turn the right amount regardless of how many sides are in the - polygon?" - grade5_artist_variables_triangles1_markdown_instruction: "Let's draw an equilateral - triangle. \r\n\r\nIt has to be exactly 50 pixels long on each side.\r\n\r\n" - grade5_artist_variables_triangles2_markdown_instruction: "Instead of using - `move forward by 150`, the `move` block is now referencing a variable called - `length`. Can you set `length` to 150 to draw this new triangle?" - grade5_artist_variables_triangles3_markdown_instruction: "Drag a number block - to the `set length` block and to the `repeat _ times` block to draw a set - of 50 pixel triangles. " - grade5_bee_for_loops10_markdown_instruction: "If your loop is counting down, - the increment is **subtracted** from your counter variable each time through. - \r\n\r\nWhat should your increment be to collect 15, then 12, then 9, 6, 3 - nectar?" - grade5_bee_for_loops11_markdown_instruction: "**Challenge:** Take what you've - learned about `for` loops and try to solve this problem. \r\n\r\nRemember: - You may have to run through solutions multiple times before you figure out - all of the steps.\r\n" - grade5_bee_for_loops2_markdown_instruction: "Add the code necessary to make - sure the bee collects all the nectar.\r\n\r\nLook at how much code you need - for this puzzle! (We'll learn a simpler way in the next puzzle.)" - grade5_bee_for_loops3_markdown_instruction: "Ah, the `for` loop makes this - much easier! \r\n\r\nTry this puzzle using the `for` loop with `counter` - variable and see how much shorter your code becomes." - grade5_bee_for_loops4_markdown_instruction: "Help the bee collect all of the - nectar." - grade5_bee_for_loops5_markdown_instruction: "Now we need to `move forward` - `counter` times, then `get nectar` `counter` times. Can you use two `repeat` - loops to solve this challenge?" - grade5_bee_for_loops6_markdown_instruction: "You can also use a `for loop` - to count down. Try gathering this nectar by counting down from 5 to 1 by 1." - grade5_bee_for_loops7_markdown_instruction: "The last number in your `for` - loop is called the **\"increment\"**. Each time the loop is run, the counter - variable changes by the value of the increment.\r\n\r\nTry collecting these - flowers using an increment of 2." - grade5_bee_for_loops8_markdown_instruction: "You've got this! \r\n\r\nWhat - should your increment be to collect 3, 6, 9, 12, 15 nectar?\r\n\r\n" - grade5_bee_for_loops9_markdown_instruction: "Now, let's combine the `counter` - variable with a math block! \r\n\r\nHow can you use the `counter` variable - to navigate this garden with the fewest number of blocks possible?" - grade5_bee_parameters_new1_markdown_instruction: "Check beneath the clouds - to see if the flowers have any nectar." - grade5_bee_parameters_new2_markdown_instruction: "Here's some code that solves - the last puzzle. \r\nLet's turn it into a function, then call the function - to check this row for nectar. \r\n<hr/>\r\nThis may seem like a strange step - now, but it will be really helpful soon!" - grade5_bee_parameters_new3_markdown_instruction: "Time to put the function - to the test! \r\n\r\nLet's see if it makes collecting these three rows of - nectar any easier." - grade5_bee_parameters_new4_markdown_instruction: "*\"How is your function holding - up?\"* \r\n\r\nWe need to make some adjustments here. Click \"edit\" to - add a `length` parameter to the function so that it will still work when the - row is a different length." - grade5_bee_parameters_new5_markdown_instruction: "*\"You're doing great so - far!\"*\r\n\r\nLet's use this function to collect a lot of nectar." - grade5_bee_parameters_new6_markdown_instruction: "You can make code shorter - and more efficient when you combine functions with other programming elements. \r\n<hr/>\r\n<h3>What - blocks can you use with your function to build a short and sweet solution - to this puzzle?</h3>" - grade5_bee_parameters_new7_markdown_instruction: "**Challenge:** Something - looks a little different. Can you modify your function to make honey as well?" - grade5_bee_parameters_new8a_markdown_instruction: "Use your new function to - solve this spiral." - grade5_bee_parameters_new9a_markdown_instruction: "Use your new function to - solve this spiral." - grade5_pixelation_markdown_instruction: "# Make your own image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* - Encode an image of anything you like using `binary`.\r\n* The binary language - will be represented with `0` and `1` only.\r\n* You might want to do some - planning and sketching with graph paper first. \r\n* Depict something, perhaps - your name written out, your initials, an icon or logo of some sort.\r\n* Get - creative! The image doesn't have to be a perfect square, it can be long and - skinny." - grade5_playlab_freeplay_markdown_instruction: "It's free play time! Have fun - with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> - - Have character 2 patrol and use your arrow keys to make character 1 chase - until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> - - Have a character constantly pop up at a random location. Award points for - clicking the sprite before it disappears. </li>\r\n <li><strong>Best - Guess</strong> - Make both characters disappear, change location to a random - spot, then reappear as a random character. Click on the first one and get - a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" - grade5_playlab_parameters_points1_markdown_instruction: "Here's the same game - but most of the code is hidden. We've added a new function called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nAdd - a new parameter called `points` to the `player_score` function. \r\n<br/>\r\nThe - `score_points` function should be able to both add and remove points from - `player_score` depending on which actor is hit.<br>\r\nChanging the score - by 1 will add a point, while changing the score by -1 will subtract a point.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: When - you're done, click \"Run\" to play. When Dog scores 6 points, you will move - on to the next puzzle.*" - grade5_playlab_variables1_markdown_instruction: "This time you don't have - to write any code, just hit `Run` to play the game! \r\n\r\n<br/>\r\nIn this - game, you're the dog who is trying to collect more flags than the cat. Use - the down arrow to control the dog. Press `Finish` when you're done playing." - grade5_playlab_variables10_markdown_instruction: "Edit the the `patrol` function - to add an `actor` parameter, so that we can call it for each of the actors - on the screen. Remember, the actors correspond to numbers 1, 2, and 3." - grade5_playlab_variables11_markdown_instruction: "Add another parameter called - `speed` to the `patrol` function. Try using a `set speed` block with the new - `speed` parameter to help Penguin get both flags before the other sprites - even get one." - grade5_playlab_variables12_markdown_instruction: "Let's have some fun! Look - at the code provided to see if you can figure out what each block does. \r\n\r\nWhen - you're done, use the arrow keys to control Dog and collect all of the flags.\r\n\r\n**NOTE:** - You don't need to make any changes to the program" - grade5_playlab_variables13_markdown_instruction: "Use the `when actor touches` - block to send Dog back to the top-left ONLY if Dog touches any of the other - actors." - grade5_playlab_variables14_markdown_instruction: "It's free play time! Have - fun with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> - - Have character 2 patrol and use your arrow keys to make character 1 chase - until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> - - Have a character constantly pop up at a random location. Award points for - clicking the sprite before it disappears. </li>\r\n <li><strong>Best - Guess</strong> - Make both characters disappear, change location to a random - spot, then reappear as a random character. Click on the first one and get - a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" - grade5_playlab_variables1ask_markdown_instruction: "This time, when you press - 'run', you will see a 'prompt' asking you for a number. This number will - be stored in a variable used to set the dog's speed.\r\n\r\n\r\nPay attention - to how this program is written!" - grade5_playlab_variables2_markdown_instruction: "The race in that last puzzle - wasn't very fair! Change the `dog_speed` variable to make sure you can collect - more flags than Cat. The first to collect 10 flags wins!" - grade5_playlab_variables3_markdown_instruction: "Here's a new kind of game! - \r\n\r\nYou don't need to change anything on this level.\r\n\r\n**Directions:** - Use the left and right arrows to move, and the up arrow to jump. See if you - can collect all of the flags." - grade5_playlab_variables4_markdown_instruction: "Now we're using a variable - called `height` to control how high the dog can jump. Update the `height` - variable so that the dog can jump high enough to reach all the flags. \r\n" - grade5_playlab_variables6_markdown_instruction: "In our game, how should we - score points?\r\n\r\n1. Add 1 to your `points` variable each time Dog hits - Cat with a piece of pie.\r\n2. Use the `when actor 2 touches anything` event - to trigger an update to your score. You can increment your variable by setting - `points = points + 1.`\r\n3. Get your score up to 10 to pass the level.\r\n\r\n**Note:** - Use the right arrow to throw pie!" - grade5_playlab_variables6ask_markdown_instruction: "This time, you need 100 - points to win! Don't worry though, you can choose how many points you earn - each time you score a hit!\r\nTry adding the `ask` block and changing the - number 1 out for the variable `value`.\r\n\r\n**Note:** Use the right arrow - to throw pie!" - grade5_playlab_variables7_markdown_instruction: "Nice, now let's make sure - this game isn't too easy to play!\r\n\r\nAny time Dog (actor 1) gets hit - by a sandwich from Cat (actor 2), you should lose a point.\r\n\r\nStart with - 10 points so it's not too hard. Let your score drop down from 10 to 0 to - pass the level." - grade5_playlab_variables71_markdown_instruction: "Here's our game from an - earlier stage but most of the code is hidden. We've added a new function - called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nEdit the function - so that a new parameter called `points` is added to `player_score`. \r\n<br/>\r\nThe - variable `player_score` should increase each time Dog tags Cat with pie, and - decrease each time that Cat tags Dog with a sandwich.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: - When you're done, click \"Run\" to play. When Dog scores 6 points, you will - move on to the next puzzle.*" - grade5_playlab_variables81_markdown_instruction: "We've added one last function + CSD - Predict - Array Length List Printing_markdown_instruction: "# For Loop + - Using List Length in For Loop\r\n\r\nOne of the most common ways that for + loops are used is with lists. In this example the condition is dependent on + list. \r\n\r\nWhat will this print in the console?" + CSD - Predict List Accessing_markdown_instruction: "# Predict\r\n\r\nThe code + below has 4 things it will log to the console. What do you think will print + in the console as a result of this code?\r\n" + CSD - for loop - on off_markdown_instruction: "# For Loops with Color LEDs\r\n\r\nFor + loops can make doing something to all the `colorLed`s easier. \r\n\r\n**Starter + Program:** There are two buttons one to turn all the `colorLeds` on and one + to turn them all off. \r\n\r\nCan you fill in the functions for each of these + task using a for loop to write your algorithm." + CSD For Loops - Check For Understanding_markdown_instruction: "# Check In\r\n\r\nIn + the box below explain the 3 different parts of the for loop. Why is each important?\r\n" + CSD Hackathon Pt 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe + blocks you've been provided are those that a student in CS Discoveries would + likely have available after a week or so of using Game Lab. No sprites yet, + but you've **just been introduced to some powerful programming constructs + like generating random numbers, storing values in a variable, and looping.** + You'll also be pretty familiar with the drawing commands at this point.\r\n\r\n# + Do This\r\n\r\n* Using only the tools provided to you, **make something awesome!!**\r\n* + The likely project at this point would be an **animated card** but feel free + to go other directions if you like.\r\n* **Avoid complex variable arithmetic** + if you can. You \"don't know it\" yet.\r\n* **Avoid referencing the iterator + in your for loops**. At this point it's just a repeat loop." + CSD Hackathon Pt 2_markdown_instruction: "# MS Hackathon: Sprites and Interactivity\r\n\r\nYou + now can **create sprites, add images, manipulate their properties, and perform + simple variable arithmetic to update their values (e.g. `sprite.scale = sprite.scale + + 1;`)**. You've also been introduced to conditional statements and know + how to use them to get some interactive behavior with the mouse and keyboard.\r\n\r\n# + Do This\r\n\r\n* Using only the tools provided to you **make something awesome!**\r\n* + The likely target project here might be a **simple game** or **interactive + visualization**.\r\n* You don't yet know about **groups, loops, collisions**, + or more magical properties like **velocity or rotationSpeed**\r\n\r\n**These + commands are not in the block palette but feel free to use**\r\n\r\n* `mySprite.mouseActive + = true;` will make your sprite track mouse events\r\n* `mySprite.mouseIsOver` + and `mySprite.mouseIsPressed` are booleans you can now use to sense mouse-to-sprite + interactions.\r\n\r\n**To add sprites to images follow the pattern below**\r\n\r\n```\r\nvar + spriteImage, sprite;\r\n\r\n//You'll need to create a preload function to + load the image.\r\nfunction preload(){\t\t\t\r\n spriteImage = loadImage(\"imageURL\");\r\n}\r\n\r\n//Create + your sprite and add the image\r\nfunction setup(){\r\n sprite = createSprite(200,200,10,10);\r\n sprite.addImage(\"someName\", + spriteImage);\r\n}\r\n\r\n//Draw your sprites.\r\nfunction draw(){\r\n\tbackground(255,255,255);\r\n\tdrawSprites();\r\n}\r\n```" + CSD Hackathon Week 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe + blocks you've been provided are those that a student in CS Discoveries would + likely have available after a week or so of using Game Lab. No sprites yet, + but you've **just been introduced to some powerful programming constructs + like generating random numbers, storing values in a variable, and looping.** + You'll also be pretty familiar with the drawing commands at this point.\r\n\r\n# + Do This\r\n\r\n* Using only the tools provided to you, **make something awesome!!**\r\n* + The likely project at this point would be an **animated card** but feel free + to go other directions if you like.\r\n* **Avoid complex variable arithmetic** + if you can. You \"don't know it\" yet.\r\n* **Avoid referencing the iterator + in your for loops**. At this point it's just a repeat loop." + CSD Hackathon Week 2_markdown_instruction: "# MS Hackathon: Sprites and Interactivity\r\n\r\nYou + now can **create sprites, add images, manipulate their properties, and perform + simple variable arithmetic to update their values (e.g. `sprite.scale = sprite.scale + + 1;`)**. You've also been introduced to conditional statements and know + how to use them to get some interactive behavior with the mouse and keyboard.\r\n\r\n# + Do This\r\n\r\n* Using only the tools provided to you **make something awesome!**\r\n* + The likely target project here might be a **simple game** or **interactive + visualization**.\r\n* You don't yet know about **groups, loops, collisions**, + or more magical properties like **velocity or rotationSpeed**\r\n\r\n**These + commands are not in the block palette but feel free to use**\r\n\r\n* `mySprite.mouseActive + = true;` will make your sprite track mouse events\r\n* `mySprite.mouseIsOver` + and `mySprite.mouseIsPressed` are booleans you can now use to sense mouse-to-sprite + interactions.\r\n\r\n**To add sprites to images follow the pattern below**\r\n\r\n```\r\nvar + spriteImage, sprite;\r\n\r\n//You'll need to create a preload function to + load the image.\r\nfunction preload(){\t\t\t\r\n spriteImage = loadImage(\"imageURL\");\r\n}\r\n\r\n//Create + your sprite and add the image\r\nfunction setup(){\r\n sprite = createSprite(200,200,10,10);\r\n sprite.addImage(\"someName\", + spriteImage);\r\n}\r\n\r\n//Draw your sprites.\r\nfunction draw(){\r\n\tbackground(255,255,255);\r\n\tdrawSprites();\r\n}\r\n```" + CSD U1 - Image Filter Demo show Binary_markdown_instruction: "# Oh Noes\r\nThis + tree should be green, but it's blue instead. Can you use the filter blocks + to change all of the blue pixels to green?" + CSD U1 - Image Filter Demo_markdown_instruction: "# Oh Noes\r\nThis tree should + be green, but it's blue instead. Can you use the filter blocks to change + all of the blue pixels to green?" + CSD U1 - PixFilter 1x1 Filter_markdown_instruction: "# Filtering Images\r\nIf + you've ever used Instragram you've probably encountered an image filter. + Image filters read in each pixel, process it in some way, and the return the + filtered pixel. In this tool we're going to start by filtering just a single + pixel before moving on to a full image.\r\n\r\nYou’ll notice there are three + drop downs under the picture. A red replace, a green replace, and a blue replace. + Next to it are drop downs for the colors. How many bits are we working with? + Yes, we’re working with 3. We also learned that the bits control the colors. + First bit controls R, second bit controls G, third bit controls B.\r\n\r\n\r\n# + Do This\r\nTry changing the color drop downs next to replace. Based on how + the bits change, can you formulate what replace is doing? Talk to your partner + and see if you can figure it out.\r\n\r\n" + CSD U1 - PixFilter 1x1 intro_markdown_instruction: "# 3 Bit Colors\r\nEach + pixel is a square on a screen that emits light. Each pixel can have a certain + number of bits assigned to it, and bits per pixel determine the colors that + can be rendered.\r\n\r\nIn this tool we're using 3 bits to define the one + large black pixel. The first bit affects the red tint. The second bit affects + the green tint. The third bit affects the blue tint.\r\n\r\n# Do This\r\n\r\n* + Click the \"Run\" button to start the widget\r\n* Click on the light bulbs + to turn on or off each color and see what happens to your pixel\r\n* See how + many different colors you can create with just three bits\r\n* Write down + the binary associated with each color you come up with\r\n" + CSD U1 - PixFilter Filter Intro_markdown_instruction: "# Filtering Pixels\r\nIf + you've ever used Instagram you've probably encountered an image filter. + Image filters read in each pixel, process it in some way, and the return the + filtered pixel. In this tool we're going to start by filtering just a single + pixel before moving on to a full image.\r\n\r\n# Do This\r\n\r\n* Try changing + the color drop downs in the Filter section\r\n* Click on the top row of lightbulbs + in the Diagram section to see how the filter will convert the input (top bulbs) + to the output (bottom bulbs)\r\n* Look at how the numbers in the Binary section + reflect changes to the colors\r\n* Based on how the bits change, can you formulate + what replace is doing? Talk to your partner and see if you can figure it out.\r\n* + Complete the Level 2 table in your Activity Guide\r\n\r\n" + CSD U1 - PixFilter Filter Revisit_markdown_instruction: "# Combining Filters\r\nNow + that you've played with filtering a single color channel, it's time to see + what happens if we filter more than one color.\r\n\r\n# Do This\r\n\r\n* Using + the color dropdowns in the filter section, build a filter that changes the + value of more than one color channel\r\n* Click on the top row of lightbulbs + in the Diagram section to see how the filter will convert the input (top bulbs) + to the output (bottom bulbs)\r\n* Look at how the numbers in the Binary section + reflect changes to the colors\r\n* Complete the Level 4 table in your Activity + Guide\r\n\r\n" + CSD U1 - PixFilter FreePlay_markdown_instruction: "# Free Play\r\n\r\nDo as + you will, make something awesome" + CSD U1 - PixFilter Full_markdown_instruction: "# Instructions Go Here" + CSD U1 - PixFilter Mario_markdown_instruction: "# Combining Filters\r\n\r\nSometimes + you'll need to filter more than one pixel to get the color change that you + want.\r\n\r\n# Do This\r\nCheck out Mario, he's lookin' pretty good in his + red hat and overalls. Your job it to set up the filter so he looks like Luigi, + with a green hat and overalls.\r\n\r\n* First, determine which bit(s) needs + to change in order to the change you want\r\n* Once you've figured out which + bit needs changing, set the filter dropdown appropriately\r\n* After you've + got the filter working so that, try to come up with other filters that change + *only* his hat and overalls - how many different clothing colors can you come + up with?\r\n\r\n_How many tries did it take you to find the right filter?_\r\n\r\n\r\n\r\n" + CSD U1 - PixFilter Mushroom_markdown_instruction: "# Filtering Images\r\nNow + that we've seen how a single pixel can be filtered to change its color, let's + try applying a filter to an image made of multiple pixels. The filter you + create will be applied to each pixel in the image - and you still have the + light bulbs available to experiment with how your filter will work with individual + colors.\r\n\r\n\r\n# Do This\r\nHere's a picture of a red mushroom - you're + going to try and turn it into a yellow mushroom.\r\n\r\n* First, determine + which bit needs to change in order to turn red into yellow\r\n* Once you've + figured out which bit needs changing, use the filter dropdowns to make all + of the red areas turn yellow\r\n* After you've got the filter working so + that the red has turned yellow, see if you can come up with filters that turn + the mushroom other colors\r\n\r\n_How many tries did it take you to find the + right filter?_\r\n\r\n\r\n\r\n" + CSD U1 - PixFilter UnFilter_markdown_instruction: "# UnFiltering\r\n\r\nBit + filters can be used to _undo_ filtering as well. Here's an image of a bird + that's been filtered from it's original colors. Can you get it back to normal?\r\n\r\n# + Do This\r\n\r\n<img src=\"https://images.code.org/c15636bda16e8792c59ac955332e37a5-image-1471372091393.22.56.png\" + style=\"float:right; width: 200px\"/>\r\nHere's what our bird should look + like. Use the filter to get him back to normal.\r\n\r\n* Decide which colors + (and so which bits) you need to change. You might need to write your thoughts + with pencil and paper.\r\n* Once you know which bits need changing, set the + filter dropdown appropriately to test your answer\r\n* After you've fixed + the image, write down both your process and your final filter in the Level + 6 section of your Activity Guide\r\n\r\n_How many tries did it take you to + find the right filter?_\r\n" + CSD U1 - Single Pixel_markdown_instruction: "# 3 Bit Colors\r\nEach pixel is + a square on a screen that emits light. Each pixel can have a certain number + of bits assigned to it, and bits per pixel determine the colors that can be + rendered.\r\n\r\nIn this tool we're using 3 bits to define the one large + blue pixel pixel. The first bit affects the red tint. The second bit affects + the green tint. The third bit affects the blue tint.\r\n\r\n# Do This\r\n\r\n* + Click on the light bulbs to turn on or off each color and see what happens + to your pixel\r\n* See how many different colors you can create with just + three bits\r\n" + CSD U2 layout style body_markdown_instruction: "<div style=\"float: right; + height: 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What + is a CSS rule-set?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a selector?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a declaration block?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**what + is a property-value pair?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new rule-set?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n</div>\r\n# The Body Element\r\n\r\n* Find the `body` + rule-set in \"style.css\"\r\n* Discuss with a partner what you think will + happen if you add `text-align`, `color`, or other text properties to the `body` + rule set.\r\n* Try out some different properties to check your guesses." + CSD U2 layout style textalign_markdown_instruction: "<div style=\"float: right; + height: 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What + is a CSS rule-set?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a selector?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a declaration block?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**what + is a property-value pair?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new rule-set?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n</div>\r\n# Text Align\r\n\r\n* Find the `text-align` + property in \"style.css\" in the `p` rule-set.\r\n* Change the text-align + value to `center` or `right`.\r\n* Add a `text-align` rule in the `body` rule + set" + CSD U2 RGB intro_markdown_instruction: "# RGB Colors\r\n\r\nAll colors, whether + they have names or not, can be described by the level of red, green, and blue + light it takes to make them. This is called an RGB value (short for Red-Green-Blue). You + can use the widget on your left to try out different RGB values and see what + colors they make.\r\n\r\n* **Click \"Run\" to start the widget on the left,** + and use the sliders to adjust the levels of red, green, and blue light.\r\n* + For each of the colors below, match it to its RGB value.\r\n\r\nA) red: 216, + green: 191, blue: 216 - rgb(216,191,216)\r\n\r\nB) red: 255, green: 239, blue: + 213 - rgb(255,239,213)\r\n\r\nC) red: 255, green: 140, blue: 105 - rgb(255,140,105)\r\n\r\nD) + red: 123, green: 104, blue: 238 - rgb(123,104,238)\r\n\r\nE) red: 107, green: + 142, blue: 35 - rgb(107,142,35)\r\n\r\n\r\n<div style=\"font-size: 16px\">\r\n<br + />\r\n<details>\r\n<summary>**Why do red and green make yellow?**</summary>\r\n<p>When + you mix paint, red and green make brown, but RGB color mixing uses light instead + of paint, so the colors mix differently. RGB uses _additive color mixing_. In + additive color mixing, red and green make yellow, red and blue make magenta, + and blue and green make cyan. When you mix the three primary colors together + (red, green, and blue), they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia + - Additive Color</a>\r\n</p> </details>\r\n<details>\r\n<summary>**How many + colors can I make with RGB color mixing?**</summary>\r\n<p>\r\nYou can make + make over sixteen million different colors with RGB color mixing.\r\n</p></details>\r\n</div>" + CSD U2 RGB others_markdown_instruction: "# Spring and Autumn Colors\r\n\r\nChoose + RGB values for spring and autumn colors.\r\n\r\n* Click \"Run\" to start the + widget.\r\n* Adjust the levels until you find a spring color you like, then + write down the values on your activity guide.\r\n* Do the same for an autumn + color. You will need the RGB values for the next activity.\r\n\r\n\r\n<div + style=\"font-size: 16px\">\r\n<br />\r\n<details><summary>**Where can I see + the whole range of color types?**</summary>\r\nYou can find many options for + colors at <a href=\"http://www.w3schools.com/colors/colors_picker.asp\">W3Schools + - HTML Color Picker</a></details>\r\n<details>\r\n<summary>**Why do red and + green make yellow?**</summary>\r\n<p>When you mix paint, red and green make + brown, but RGB color mixing uses light instead of paint, so the colors mix + differently. RGB uses _additive color mixing_. In additive color mixing, + red and green make yellow, red and blue make magenta, and blue and green make + cyan. When you mix the three primary colors together (red, green, and blue), + they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia + - Additive Color</a></p> </details>\r\n<details>\r\n<summary>**How many colors + can I make with RGB color mixing?**</summary>\r\n<p>You can make make over + sixteen million different colors with RGB color mixing.</p></details>\r\n</div>" + CSD U2 RGB summer_markdown_instruction: "# Summer Color\r\n\r\nFind the RGB + values for a summery yellow color.\r\n\r\n* Click \"Run\" to start the widget.\r\n* + Adjust the levels until you match the summery yellow at the bottom of the + widget.\r\n* Write the RGB values on your activity guide. You will need them + in the next activity.\r\n\r\n\r\n<div style=\"font-size: 16px\">\r\n<br />\r\n<summary>**Why + do red and green make yellow?**</summary>\r\n<p>When you mix paint, red and + green make brown, but RGB color mixing uses light instead of paint, so the + colors mix differently. RGB uses _additive color mixing_. In additive color + mixing, red and green make yellow, red and blue make magenta, and blue and + green make cyan. When you mix the three primary colors together (red, green, + and blue), they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia + - Additive Color</a></p> </details>\r\n<details>\r\n<summary>**How many colors + can I make with RGB color mixing?**</summary>\r\n<p>You can make make over + sixteen million different colors with RGB color mixing.</p></details>\r\n</div>" + CSD U2 RGB winter_markdown_instruction: "# Winter Color\r\n\r\nIn the next + few levels, you'll be finding seasonal colors for a website. Here, you'll + need to find the RGB values for a wintery blue color.\r\n\r\n* Click \"Run\" + to start the widget.\r\n* Adjust the levels until you match the wintery blue + color at the bottom of the widget.\r\n* Write the RGB values on your activity + guide. You will need them in the next activity.\r\n\r\n\r\n<div style=\"font-size: + 16px\">\r\n<br />\r\n<details><summary>**How do I make a color lighter?**</summary>\r\n<p>To + make a color lighter, you need to add more light (increase the level of the + slider). If you have already added the maximum amount of blue light, you + will need to add more red and green light to make your blue lighter.</p></details>\r\n<details>\r\n<summary>**Why + do red and green make yellow?**</summary>\r\n<p>When you mix paint, red and + green make brown, but RGB color mixing uses light instead of paint, so the + colors mix differently. RGB uses _additive color mixing_. In additive color + mixing, red and green make yellow, red and blue make magenta, and blue and + green make cyan. When you mix the three primary colors together (red, green, + and blue), they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia + - Additive Color</a></p> </details>\r\n<details>\r\n<summary>**How many colors + can I make with RGB color mixing?**</summary>\r\n<p>You can make make over + sixteen million different colors with RGB color mixing.</p></details>\r\n</div>" + CSD U2 add file_markdown_instruction: "<div style=\"float: right; height: 250px; + width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new style sheet?**</summary>\r\nTo create a new style sheet, + click on the \"Add CSS\" button above the code area.\r\n</details>\r\n<details>\r\n<summary>**What + should I name my style sheet?**</summary>\r\nYou can name your style sheet + anything, but it's better to choose a relevant name, such as \"style.css\" + or \"aboutmestyles.css\" so that it's clear what the file is. Your file + should always end in the \".css\" extension.\r\n</details>\r\n<details>\r\n<summary>**How + do I rename a file?**</summary>\r\nTo rename a file, you can right click (or + control click) on the file name and choose the \"Rename\" option. This will + allow you to type in a new file name. Clicking on a file name after it is + already highlighted will also allow you to rename the file.\r\n</details>\r\n<details>\r\n<summary>**How + do I add a style sheet to a web page?**</summary>\r\nTo add a style sheet + to a web page, open up the code for the web page. Inside the head tag, add + the following code `<link rel=\"stylesheet\" href=\"style.css\">`. Then change + \"style.css\" to the name of your style sheet.\r\n</details>\r\n</div>\r\n# + Adding a Style Sheet\r\n\r\nThis is your About Me page from before. In the + next level, you'll have a chance to add some different styles to it, but + first, you need to add a style sheet, name it, and link it to your html page.\r\n\r\n1. + Create a new style sheet for your project.\r\n2. Rename the style sheet file.\r\n3. + Add your style sheet to your HTML page.\r\n\r\n<img src=\"https://images.code.org/63ed91b7de4365f59f0f4d652f8dd8fc-image-1481639763979.png\" + style=\"width:50%px\">" + CSD U2 classes modify_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nFor the code to work, you need to both + create a winter class and add elements to the class.\r\n\r\nThe class is created + in the style sheet, with the following code.\r\n\r\n<pre>.winter {\r\n color: + rgb(195,230,255);\r\n}</pre>\r\n\r\nThis code creates a class called `winter` + and makes everything in the class our winter blue, which has the RGB values + of (195,230,255).\r\n\r\nThe code that adds a `h5` element to the winter class + is `<h5 class=\"winter\">`. The `class=winter` inside the opening tag adds + everything inside the tag to the class.\r\n</details>\r\n<details>\r\n<summary>**What + rules can be added to a class rule-set?**</summary>\r\nA class rule-set can + have the same rules as any other type of selector. If a rule does not apply + to the content of the class (for example, using `font-size` on an element + with no text), then the computer will ignore that rule, but still use the + rules that work.\r\n</details>\r\n<details>\r\n<summary>**Why does the selector + have a period in front of it?**</summary>\r\nIn CSS, a period in front of + a selector means that the selector is the name of a class. If there is no + period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why + would a web developer use classes?**</summary>\r\nA web developer uses classes + when some elements should be styled differently than others, even if they + are the same tag. Classes can also be used to give elements that have different + tags the same style.\r\n</details>\r\n<details>\r\n<summary>**I got different + RGB values, but mine are right, too.**</summary>\r\nBecause RGB creates millions + of different colors, some are so similar that people have a hard time telling + them apart. That means that there are multiple RGB values that are close + enough to work for our winter color.\r\n\r\n</details>\r\n</div>\r\n# Adding + Rules\r\n\r\nYour winter words should all have the same color and font.\r\n\r\n* + Find the CSS rule-set in the style sheet that gives the winter words their + style.\r\n* Add a rule that changes the font of the winter words. It can + be any font, but it will need to be different from that of the other three + seasons.\r\n* Add any other rules you'd like for your winter words." + CSD U2 classes sample_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nFor the code to work, you need to both + create a winter class and add elements to the class.\r\n\r\nThe class is created + in the style sheet, with the following code.\r\n\r\n<pre>.winter {\r\n color: + rgb(195,230,255);\r\n}</pre>\r\n\r\nThis code creates a class called `winter` + and makes everything in the class our winter blue, which has the RGB values + of (195,230,255).\r\n\r\nThe code that adds a `h5` element to the winter class + is `<h5 class=\"winter\">`. The `class=winter` inside the opening tag adds + everything inside the tag to the class.\r\n</details>\r\n<details>\r\n<summary>**Why + does the selector have a period in front of it?**</summary>\r\nIn CSS, a period + in front of a selector means that the selector is the name of a class. If + there is no period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why + would a web developer use classes?**</summary>\r\nA web developer uses classes + when some elements should be styled differently than others, even if they + are the same tag. Classes can also be used to give elements that have different + tags the same style.\r\n</details>\r\n<details>\r\n<summary>**I got different + RGB values, but mine are right, too.**</summary>\r\nBecause RGB creates millions + of different colors, some are so similar that people have a hard time telling + them apart. That means that there are multiple RGB values that are close + enough to work for our winter color.\r\n\r\n</details>\r\n</div>\r\n# Classes\r\n\r\nIn + this page, the web developer has used classes to give some of the words our + winter color.\r\n\r\n* Look at the HTML code for the winter words. Why is + \"snowy\" the only winter word without the winter color?\r\n* Add code to + the HTML that will give \"snowy\" the same winter blue as the other words.\r\n* + Look inside the style sheet to find the rule that makes all the words in the + winter class blue, and check whether your RGB numbers are close to the ones + in the style sheet. \r\n* Discuss with your partner how the code works." + CSD U2 classes spring_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nFor the code to work, you need to both + create a spring class and add elements to the class.\r\n\r\nThe spring class + is already created in the style sheet, but it doesn't have any rules.\r\n\r\n<pre>.spring + {\r\n color: rgb(195,230,255);\r\n}</pre>\r\n\r\nLook at the rules in the + `winter` class for clues to how to make rules for the summer class.\r\n\r\nYou + will also need to add some elements to the spring class inside your HTML file.\r\n\r\nThe + code in the HTML file that adds a `h5` element to the winter class is `<h5 + class=\"winter\">`. Use this pattern to add elements to the spring class, + too.\r\n</details>\r\n<details>\r\n<summary>**What rules can be added to a + class rule-set?**</summary>\r\nA class rule-set can have the same rules as + any other type of selector. If a rule does not apply to the content of the + class (for example, using `font-size` on an element with no text), then the + computer will ignore that rule, but still use the rules that work.\r\n</details>\r\n<details>\r\n<summary>**Why + does the selector have a period in front of it?**</summary>\r\nIn CSS, a period + in front of a selector means that the selector is the name of a class. If + there is no period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why + would a web developer use classes?**</summary>\r\nA web developer uses classes + when some elements should be styled differently than others, even if they + are the same tag. Classes can also be used to give elements that have different + tags the same style.\r\n</details>\r\n</div>\r\n# Spring Class\r\n\r\nNow + that your winter class is ready, you can start on the other seasons.\r\n\r\n* + Find the empty CSS rule-set in the style sheet that gives the spring words + their style.\r\n* Add two rules, one to give the text your spring color for + earlier in the lesson, and another to give the text a different font, font + size, or decoration.\r\n* Add the spring class to the spring elements in the + HTML page." + CSD U2 classes summer_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nFor the code for the winter class to work, + it needs to both create a winter class and add elements to the class.\r\n\r\nThe + class is created in the style sheet, with the following code.\r\n\r\n<pre>.winter + {\r\n color: rgb(195,230,255);\r\n}</pre>\r\n\r\nThis code creates a class + called `winter` and makes everything in the class our winter blue, which has + the RGB values of (195,230,255).\r\n\r\nThe code that adds a `h5` element + to the winter class is `<h5 class=\"winter\">`. The `class=winter` inside + the opening tag adds everything inside the tag to the class.\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new rule-set?**</summary>\r\nYou can create a new rule-set by + following the pattern that the `winter` and `spring` classes used in the style + sheet.\r\n<pre>.winter {\r\n color: rgb(195,230,255);\r\n}</pre>\r\n\r\nThe + selector name and the color values will be different, but the following pattern + is always the same.\r\n\r\n<pre>.classname {\r\n property1: value1;\r\n property2: + value2;\r\n}</pre>\r\n\r\n</details>\r\n<details>\r\n<summary>**Why does the + selector have a period in front of it?**</summary>\r\nIn CSS, a period in + front of a selector means that the selector is the name of a class. If there + is no period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why + would a web developer use classes?**</summary>\r\nA web developer uses classes + when some elements should be styled differently than others, even if they + are the same tag. Classes can also be used to give elements that have different + tags the same style.\r\n</details>\r\n</div>\r\n# Summer and Autumn Classes\r\n\r\n* + Inside the style sheet, create a new rule-set for a \"summer\" class.\r\n* + Add a rule to set the text in the summer class to your summer RGB color.\r\n* + Add the summer class to the summer elements in the HTML page.\r\n* Do the + same for the autumn class." + CSD U2 layout style bgcolor_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the background + of the page blue:\r\n\r\n<pre>body {\r\n background-color: lightblue;\r\n}</pre>\r\n\r\n* + `body` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the body element is the entire + page.\r\n* `background-color: lightblue;` is the rule that makes the entire + page light blue.\r\n * `background-color` is the _property_. It explains + what the rule is about, in this case the color of the background.\r\n * `lightblue` + is the _value_. It explains how the rule should be applied, in this case + making the background light blue.\r\n</details>\r\n<details>\r\n<summary>**What + colors can I use in CSS?**</summary>\r\nCSS includes most common color names + (red, blue, green, etc.), and many uncommon ones. You can see a full list + of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools + - HTML Color Names</a>. You can still use colors that are not included in + the named list, but you will need to use their RGB values. You can read more + about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools + - CSS Legal Color Values</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `background-color` property do?**</summary>\r\nThe `background-color` + property determines the color of the background of an element. You can read + more about the property at <a href=\"http://www.w3schools.com/cssref/pr_background-color.asp\">W3Schools + - CSS background-color Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + if an element inside the page has a different background color from the body?**</summary>\r\nYou + can see the answer to this question by adding a `background-color` rule to + the `p` tag. The paragraphs will have the background color in the rule for + the `p` tag, and the rest of the page will follow the rule for the `body` + tag.\r\n</details>\r\n<details>\r\n<summary>**What is a style sheet?**</summary>\r\nA + style sheet is a document that controls how a web page will appear. External + style sheets are separate files that are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n#Background + Color\r\n\r\n* Find the code in the style sheet that is making the background + of the entire page light blue.\r\n* Change the code to make the page a different + color.\r\n* Try to change the background color of just the paragraphs." + CSD U2 layout style body_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n\r\n<details>\r\n<summary>**What + does the `body` selector do?**</summary>\r\nBecause the content of the web + page is all inside the `body` tag, the body selector gives style rules for + everything on the web page.\r\n</details>\r\n<details>\r\n<summary>**What + does the `color` property do?**</summary>\r\nThe `color` property specifies + the color of the text. If there’s no text, it won’t do anything. Read more + at <a href=\"http://www.w3schools.com/cssref/pr_text_color.asp\"> W3Schools + - CSS color Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does + the `text-align` property do?**</summary>\r\nThe `text-align` property aligns + the text to the left, right, or center. You can read more at <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3Schools + - CSS text-align Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `text-decoration` property do?**</summary>\r\nThe `text-decoration` + property puts a line over, under, or through a piece of text. You can read + more about the property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3Schools + - CSS text-decoration Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `font-family` property do?**</summary>\r\nThe `font-family` property + changes the font of the text. It gives a general description of the type + of font that should be used, but each browser might display the font slightly + differently. Read more at <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\">W3chools + - CSS font-family Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `font-size` property do?**</summary>\r\nThe `font-size` property + changes the size of the text. You can use general terms, such as `small`, + `medium`, and `large`, or you can specify the exact size in pixels, such as + `20px`. Read more at <a href=\"http://www.w3schools.com/cssref/pr_font_font-size.asp\">W3Schools + - CSS font-size Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + is a stylesheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n# + The Body Element\r\n\r\n* Find the `body` rule-set in the style sheet.\r\n* + Discuss with a partner what you think will happen if you add `text-align`, + `color`, or other text properties to the `body` rule set.\r\n* Try out some + different properties to check your guesses." + CSD U2 layout style border_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + colors can I use in CSS?**</summary>\r\nCSS includes most common color names + (red, blue, green, etc.), and many uncommon ones. You can see a full list + of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools + - HTML Color Names</a>. You can still use colors that are not included in + the named list, but you will need to use their RGB values. You can read more + about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools + - CSS Legal Color Values</a>\r\n</details>\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the image + borders:\r\n\r\n<pre>img {\r\n border-color: saddlebrown;\r\n border-width: + 4px;\r\n border-style: solid;\r\n border-radius: 10px;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `border-color: + saddlebrown;`,`border-width: 4px;`,`border-style: solid;`, and `border-radius: + 10px;` are the rules that make the border.\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-style` property do?**</summary>\r\nThe `border-style` property + determines what kind of border (solid, dotted, etc.) the element has. You + can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_border-style.asp\">W3Schools + - CSS border-style Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-radius` property do?**</summary>\r\nThe `border-radius` property + determines the radius of the curves at the corners of the element. A bigger + radius makes a bigger, softer curve, and a smaller radius makes a smaller, + sharper curve. A radius of zero makes a regular corner. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/css3_pr_border-radius.asp\">W3Schools + - CSS3 border-radius property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `float` property do?**</summary>\r\nThe `float` property makes an + element \"float\", meaning that the elements that come after it all flow around + it. If the `float` value is `left`, the element will float to the left, and + the elements after it will show up on its right. If the `float` value is + `right`, the element will float to the right, and the elements after it will + show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools + - CSS float Property</a>\r\n</details>\r\n</div>\r\n\r\n# Borders\r\n\r\n* + Find the rules in the style sheet that set image borders color and width.\r\n* + Change the color and width of your borders.\r\n* Try out some different border + styles.\r\n * Choose from `dotted`, `dashed`, `solid`, and `double`\r\n* + Put a border on another type of page element, such as one of the headers or + the paragraphs." + CSD U2 layout style borderradius_markdown_instruction: "<div style=\"float: + right; height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the image + borders:\r\n\r\n<pre>img {\r\n border-color: saddlebrown;\r\n border-width: + 4px;\r\n border-style: solid;\r\n border-radius: 10px;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `border-color: + saddlebrown;`,`border-width: 4px;`,`border-style: solid;`, and `border-radius: + 10px;` are the rules that make the border.\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-style` property do?**</summary>\r\nThe `border-style` property + determines what kind of border (solid, dotted, etc.) the element has. You + can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_border-style.asp\">W3Schools + - CSS border-style Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-radius` property do?**</summary>\r\nThe `border-radius` property + determines the radius of the curves at the corners of the element. A bigger + radius makes a bigger, softer curve, and a smaller radius makes a smaller, + sharper curve. A radius of zero makes a regular corner. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/css3_pr_border-radius.asp\">W3Schools + - CSS3 border-radius property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `float` property do?**</summary>\r\nThe `float` property makes an + element \"float\", meaning that the elements that come after it all flow around + it. If the `float` value is `left`, the element will float to the left, and + the elements after it will show up on its right. If the `float` value is + `right`, the element will float to the right, and the elements after it will + show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools + - CSS float Property</a>\r\n</details>\r\n</div>\r\n\r\n# Border Radius\r\n\r\n* + Look at the `border-radius` property inside your `img` rule-set\r\n* Discuss + with your partner what you think the property does.\r\n* Try different values + for border radius and decide which one you like the best." + CSD U2 layout style float_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the image + float on the left hand side of the page:\r\n\r\n<pre>img {\r\n float: left;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `float: + left;` is the rule that makes the image float to the left.\r\n</details>\r\n<details>\r\n<summary>**What + does the `float` property do?**</summary>\r\nThe `float` property makes an + element \"float\", meaning that the elements that come after it all flow around + it. If the `float` value is `left`, the element will float to the left, and + the elements after it will show up on its right. If the `float` value is + `right`, the element will float to the right, and the elements after it will + show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools + - CSS float Property</a>\r\n</details>\r\n</div>\r\n\r\n# Float\r\n\r\n* Look + at the `float` property inside your `img` rule-set\r\n* Discuss with your + partner what you think the property does.\r\n* Change the value from `left` + to `right`." + CSD U2 layout style freeplay_markdown_instruction: "# About Me Page\r\n\r\nTry + out these some new CSS properties on your About Me page.\r\n\r\n* Add styling + of your choice to your About Me Page. Be sure to use at least 3 new CSS properties.\r\n\r\n# + Checklist\r\n\r\n* At least 3 of the following CSS Properties are used:\r\n\r\n + * `background-color`\r\n * `height`\r\n * `width`\r\n * `border-style`\r\n + * `border-radius`\r\n * `border-width`\r\n * `float`\r\n * `margin`\r\n\r\n\r\nIf + you’ve used at least 3 of the properties from the checklist, you can explore + some additional CSS properties to add to your About Me page." + CSD U2 layout style margin_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is putting extra + space around the images:\r\n\r\n<pre>img {\r\n\tmargin: 10px;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `margin: + 10px;` is the rule that puts 10 pixels of space around the image.\r\n</details>\r\n<details>\r\n<summary>**What + does the `margin` property do?**</summary>\r\nThe `margin` property determines + how much space will be around the image. Most of the time, you will define + in the margin in pixels. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_margin.asp\">W3Schools + - CSS margin Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does + `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated `px`, + is how elements are measured in CSS. It’s the size of a single point of light + on the screen.\r\n</details>\r\n</div>\r\n# Margin\r\n\r\nMargins specify + how much space should be around an element.\r\n\r\n* Find the `margin` property + in the `img` rule-set.\r\n* Change the margin to be larger, and discuss the + effect with a partner.\r\n* Choose another element type and give it a margin, + too." + CSD U2 layout style sample_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n\r\n<details>\r\n<summary>**What + does the `body` selector do?**</summary>\r\nBecause the content of the web + page is all inside the `body` tag, the body selector gives style rules for + everything on the web page.\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-style` property do?**</summary>\r\nThe `border-style` property + determines what kind of border (solid, dotted, dashed, etc.) the element has. You + can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_border-style.asp\">W3Schools + - CSS border-style Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-radius` property do?**</summary>\r\nThe `border-radius` property + determines the radius of the curves at the corners of the element. A bigger + radius makes a bigger, softer curve, and a smaller radius makes a smaller, + sharper curve. A radius of zero makes a regular corner. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/css3_pr_border-radius.asp\">W3Schools + - CSS3 border-radius property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `float` property do?**</summary>\r\nThe `float` property makes an + element \"float\", meaning that the elements that come after it all flow around + it. If the `float` value is `left`, the element will float to the left, and + the elements after it will show up on its right. If the `float` value is + `right`, the element will float to the right, and the elements after it will + show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools + - CSS float Property</a>\r\n</details>\r\n</div>\r\n# Layout and Style\r\n\r\n* + Look through web page below for new styles.\r\n* Open the style sheet\r\n* + With your partner, discuss which parts of the CSS code you think are making + the page appear different.\r\n * What makes the entire page blue?\r\n * How + are the images positioned to the left of all the other elements?\r\n * What + made the image corners rounded?\r\n\r\nIn the next few puzzles, you'll be + changing and adding new styles on this page." + CSD U2 layout style width_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the image + its current size:\r\n\r\n<pre>img {\r\n\twidth: 250px;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `width: + 250px` is the rule that makes the image 250 pixels wide. It also changes + the height so that the image does not stretch.\r\n</details>\r\n<details>\r\n<summary>**What + does the `width` property do?**</summary>\r\nThe `width` property determines + how wide the element will be. Most of the time, you will define in the width + in pixels, which makes the element take up an exact amount of space on the + screen. Defining the width will also change the height so that the image + does not stretch, unless you have also defined the height. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/pr_dim_width.asp\">W3Schools + - CSS width Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does + the `height` property do?**</summary>\r\nThe `height` property determines + how tall the element will be. Most of the time, you will define in the height + in pixels, which makes the element take up an exact amount of space on the + screen. Defining the height will also change the width so that the image + does not stretch, unless you have also defined the width. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/pr_dim_height.asp\">W3Schools + - CSS width Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does + `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated `px`, + is how elements are measured in CSS. It’s the size of a single point of light + on the screen.\r\n</details>\r\n<details>\r\n<summary>**Why does using a width + and height rule at the same time sometimes stretch out the image?**</summary>\r\nWhen + the width of an images changes, the height must change by the same percentage, + otherwise the image will stretch. For example, if you double the width of + an image, you must also double the height, or the image will be stretched + horizonally. When you only define the width or the height, the computer will + automatically change the other property so that the image looks the same.\r\n</details>\r\n</div>\r\n\r\n# + Width and Height\r\n\r\n* Find the property in the style sheet that controls + the width of the images.\r\n* Change the width of the images to be larger + or smaller.\r\n* Create a new rule with a `height` property to control the + height of the images.\r\n* Use the `width` property in the `p` rule-set to + change the width of your paragraphs." + CSD U2 style background_markdown_instruction: "<div style=\"float: right; height: + 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What + is a CSS rule-set?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a selector?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a declaration block?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**what + is a property-value pair?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new rule-set?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n</div>\r\n# Text Alignment\r\n\r\n* Find the \"text-align\" + property in the paragraph tag.\r\n* Change the paragraph alignment.\r\n * + Choose from \"left\", \"right\", and \"center\"" + CSD U2 text style bgcolor_markdown_instruction: "<div style=\"float: right; + height: 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What + colors can I choose?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n</div>\r\n#Background + Color\r\n\r\n* Find the code in \"style.css\" that is making the background + of the entire page light blue.\r\n* Change the code to make the page a different + color.\r\n* Try to change the background color of just the paragraphs." + CSD U2 text style decoration_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that makes the `h1` elements + underlined:\r\n\r\n<pre>h1 {\r\n text-decoration: underline;\r\n}</pre>\r\n\r\n* + `h1` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces. The `p` stands for paragraph.\r\n* `text-decoration: + underline;` is the rule that makes the text inside the `h1` tag underlined.\r\n + * `text-decoration` is the _property_. It explains what the rule is about, + in this case where the line goes.\r\n * `underline` is the _value_. It explains + how the rule should be applied, in this case making the test underlined.\r\n</details>\r\n<details>\r\n<summary>**What + are the possible values for text decoration?**</summary>\r\nYou can choose + between \"underline\", \"overline\", and \"line-through\". You can read more + about the text-decoration property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3Schools + - CSS text-decoration Property</a>\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the stylesheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a stylesheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n# + Underlining\r\n\r\n* Find the code in the style sheet that makes the h1 tag + underlined.\r\n* Change the text decoration and see which one you like.\r\n * + Choose from \"underline\", \"overline\", and \"line-through\"\r\n* Add a text + decoration rule for the paragraph or h3 tag." + CSD U2 text style font family_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is controlling the + paragraph font:\r\n\r\n<pre>p {\r\n font-family: cursive;\r\n}</pre>\r\n\r\n* + `p` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces. The `p` stands for paragraph.\r\n* `font-family: + cursive;` is the rule that makes the text inside the `p` tags a particular + font.\r\n * `font-family` is the _property_. It explains what the rule is + about, in this case the font.\r\n * `cursive` is the _value_. It explains + how the rule should be applied, in this case making the text cursive.\r\n</details>\r\n<details>\r\n<summary>**What + are the possible values for font family?**</summary>\r\nYou can choose between + \"serif\", \"sans-serif\", \"cursive\", \"fantasy\", and \"monospace\". You + can also try more specific fonts as described in <a href=\"http://www.w3schools.com/cssref/css_websafe_fonts.asp\">W3Schools + - CSS Web Safe Font Combinations</a>\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the stylesheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a stylesheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n#Changing + the Font\r\n\r\n* Find the CSS rule-set in the style sheet that determines + the style for the paragraph tag.\r\n* Change the font family and choose which + one you like the best.\r\n * Choose from \"serif\", \"sans-serif\", \"cursive\", + \"fantasy\", and \"monospace\"\r\n* Add a font family rule for the h1 or h3 + tags." + CSD U2 text style freeplay_markdown_instruction: "# About Me Page\r\n\r\nNow + you can style the text on your About Me page!\r\n\r\n* Open your style sheet + and add styling of your choice to your About Me Page. Be sure to use at least + 3 different CSS properties.\r\n\r\n# Checklist\r\n\r\n* At least 3 of the + following CSS Properties are used:\r\n * `font-size`\r\n * `font-family`\r\n + * `color`\r\n * `text-decoration`\r\n * `text-align`\r\n\r\nIf you’ve used + at least 3 of the properties from the checklist, you can explore some additional + text properties to add to your About Me page." + CSD U2 text style h1_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + colors can I use in CSS?**</summary>\r\nCSS includes most common color names + (red, blue, green, etc.), and many uncommon ones. You can see a full list + of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools + - HTML Color Names</a>. You can still use colors that are not included in + the named list, but you will need to use their RGB values. You can read more + about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools + - CSS Legal Color Values</a>\r\n</details><details>\r\n<summary>**How does + the code work?**</summary>\r\nHere is the code that is making the `h1` header + red:\r\n\r\n<pre>h1 {\r\n color: red;\r\n}</pre>\r\n\r\n* `h1` is the _selector_. It + specifies which elements will have to follow the rules inside the curly braces.\r\n* + `color: red;` is the rule that makes the text inside the `h1` tags red.\r\n + * `color` is the _property_. It explains what the rule is about, in this + case the text color.\r\n * `red` is the _value_. It explains how the rule + should be applied, in this case making the text red.\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the style sheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n}\r\n</pre>\r\n\r\nIn + this example, `h2` is the selector, `color` and `font-family` are properties, + and `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n# + CSS and Text Color\r\n\r\nThis HTML file uses a style sheet (\"style.css\") + to give the page a particular style. The style sheet contain information + about what each of the HTML elements should look like.\r\n\r\n* Find the code + in the style sheet (click on \"style.css\" in the files area) that is making + the h1 header red.\r\n* Change the code for the color of the h1 header from + `red` to a different color." + CSD U2 text style h3_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + colors can I use in CSS?**</summary>\r\nCSS includes most common color names + (red, blue, green, etc.), and many uncommon ones. You can see a full list + of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools + - HTML Color Names</a>. You can still use colors that are not included in + the named list, but you will need to use their RGB values. You can read more + about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools + - CSS Legal Color Values</a>\r\n</details>\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the `h1` + header red:\r\n\r\n<pre>h1 {\r\n color: red;\r\n}</pre>\r\n\r\n* `h1` is + the _selector_. It specifies which elements will have to follow the rules + inside the curly braces.\r\n* `color: red;` is the rule that makes the text + inside the `h1` tags red.\r\n * `color` is the _property_. It explains what + the rule is about, in this case the text color.\r\n * `red` is the _value_. It + explains how the rule should be applied, in this case making the text red.\r\n</details>\r\n<details>\r\n<summary>**How + do I make a new rule-set?**</summary>\r\nTo make a new rule set, you'll need + a selector and a list of rules. The selector is the name of the tag you want + the rules to be applied to. The rules are a list of property and value pairs. You'll + also need to pay careful attention to the punctuation in the rule set. Look + at the code below for an example of how the code should look. You'll need + to change the specifics for your page.\r\n\r\n<pre>h1 {\r\n color: red;\r\n}</pre>\r\n\r\n\r\n* + `h1` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces.\r\n* `color: red;` is the rule that makes the + text inside the `h1` tags red.\r\n * `color` is the _property_. It explains + what the rule is about, in this case the text color.\r\n * `red` is the _value_. It + explains how the rule should be applied, in this case making the text red.\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the style sheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n#Making + a new CSS rule-set\r\n\r\nThe block of code that gives rules for a particular + tag is called a _rule-set_. You can make a new rule set by copying the pattern + you see in the rule-set for the `h1` tag.\r\n\r\n* Find the CSS rule-set in + the style sheet that determines the styles for the h1 tag.\r\n* Using the + same pattern, write a new CSS rule-set that will determine the styles for + the h3 tag.\r\n* Add code to make the text in all h3 tags a different color." + CSD U2 text style sample_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nWeb developers + intentionally separate content and style to make their code easier to maintain. + HTML is the language used to structure the content of a web page. CSS is a + language that adds style to a web page. \r\n</details>\r\n<details>\r\n<summary>**What + does `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated + `px`, is how elements are measured in CSS. It’s the size of a single point + of light on the screen.\r\n</details>\r\n<details>\r\n<summary>**What does + the `text-decoration` property do?**</summary>\r\nThe `text-decoration` property + puts a line over, under, or through a piece of text. You can read more about + the property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3Schools + - CSS text-decoration Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `text-align` property do?**</summary>\r\nThe `text-align` property + aligns the text to the left, right, or center. You can read more at <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3Schools + - CSS text-align Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `font-family` property do?**</summary>\r\nThe `font-family` property + changes the font of the text. It gives a general description of the type + of font that should be used, but each browser might display the font slightly + differently. Read more at <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\">W3chools + - CSS font-family Property</a>\r\n</details>\r\n</div>\r\n#CSS and Style sheets\r\n\r\n* + Look at the web page below and find some different types of text stylings + that you don't know how to code yet.\r\n* Click on the style sheet (\"style.css\" + in the files area) and look at the code inside the file.\r\n* With your partner, + discuss which parts of the code you think are making the text appear differently + than before.\r\n\r\nIn the next few lessons, you'll be changing and adding + new styles on this page.\r\n\r\n" + CSD U2 text style size_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is controlling the + paragraph text size:\r\n\r\n<pre>p {\r\n font-size: 14px;\r\n}</pre>\r\n\r\n* + `p` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces. The `p` stands for paragraph.\r\n* `font-size: + 14px;` is the rule that makes the text inside the `p` tags a particular size.\r\n + * `font-size` is the _property_. It explains what the rule is about, in this + case the text size.\r\n * `14px` is the _value_. It explains how the rule + should be applied, in this case making the text 14 pixels big.\r\n</details>\r\n<details>\r\n<summary>**What + does `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated + `px`, is how elements are measured in CSS. It’s the size of a single point + of light on the screen.\r\n</details>\r\n<details>\r\n<summary>**Why do I + need all the punctuation?**</summary>\r\nThe punctuation, such as the curly + braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand + the rules in the style sheet. The curly braces hold all the rules for a particular + selector. Each rule should end in a semicolon, and the properties and values + are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n\r\n# + Changing text size\r\n\r\nYou can control other things besides colors by using + other properties.\r\n\r\n* Find the CSS rule-set in the style sheet that determines + the style for the paragraph tag.\r\n* Change the text size of the paragraphs + to be bigger.\r\n* Add a new rule to your rule-set for your h3 tag to make + the text bigger or smaller." + CSD U2 text style text align_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is controlling the + paragraph text alignment:\r\n\r\n<pre>p {\r\n text-align: left;\r\n}</pre>\r\n\r\n* + `p` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces. The `p` stands for paragraph.\r\n* `text-align: + left;` is the rule that makes the text inside the `p` tags align to the left + side of the paragraph.\r\n * `text-align` is the _property_. It explains + what the rule is about, in this case the text alignment.\r\n * `left` is the + _value_. It explains how the rule should be applied, in this case making + the text align to the left side of the paragraph.\r\n</details>\r\n<details>\r\n<summary>**Why + doesn't `text-align: left;` do anything?**</summary>\r\nMost properties have + default values. The default values are the styles that an element will have + automatically, before you add your style sheet. The default value for `text-align` + is `left`, so it doesn't change from how it already looked.\r\n</details>\r\n<details>\r\n<summary>**What + are the possible values for text align?**</summary>\r\nYou can choose between + \"left\", \"right\", and \"center\". You can read more about the text-align + property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3Schools + - CSS text-align Property</a>\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the style sheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</details>\r\n</div>\r\n# + Text Alignment\r\n\r\nThe `text-align` property sets the horizontal (side + to side) position of the text within each line.\r\n\r\n* Find the \"text-align\" + property in the paragraph tag.\r\n* Change the paragraph alignment.\r\n * + Choose from \"left\", \"right\", and \"center\"" + CSD U3 - Booleans Video_markdown_instruction: "# Boolean Expressions Video" + CSD U3 - Sprites - Sprite v Rect_markdown_instruction: "# Sprites vs Rect\r\n\r\nCurently + sprites and rectangles seem really similar. It will become clear later on + why sprites are more powerful than basic shapes. Before you get there though + it is important to call out a major difference in the way sprites and rectangles + draw.\r\n\r\n# Do This\r\nCan you will figure out the difference by just trying + this?\r\n\r\n* Create a rectangle with a width and height of 30\r\n* Set the + fill for the rectangle to a different color than gray (So its clear which + is the rectangle)\r\n* Create a sprite and give it the same x and y values + as you gave the rectangle\r\n* Make sure to call `drawSprites` in the draw + loop\r\n* Run the program\r\n* Can you see the difference?" + CSD U3 - complex - compound conditionals_markdown_instruction: "# Possible + Solution #2 - Compound Conditionals\r\n\r\nAnother way that you might have + phrased the challenge problem is:\r\n\r\n\tIf the up arrow was pressed AND + the sprite hasn't gone off the top of the screen, move up.\r\n\r\nThis structure + of asking both questions at the same time is accomplished using a **compound + conditional**. Compound conditionals use the boolean operators `AND` and `OR` + to ask multiple questions at once. `AND` only returns true if _both_ of the + questions it's asking are true, while `OR` will return true if _either_ of + its questions are true. In JavaScript (and many other languages) `AND` is + represented by two ampersands (`&&`) while `OR` is represented by two pipes + (`||`) - their blocks look like this: \r\n\r\n![](https://images.code.org/c7ab68cb4091472f05d7c862a52730c6-image-1466785066210.48.02.png)\r\n\r\nWe + could pseudocode this solution as \r\n\r\n\tIf the up arrow was pressed AND + sprite.y > 0\t// Both Questions\r\n \tmove up\t\t\t\t\t\t\t\t\t // Only + runs if both questions were true\r\n\r\n\r\n# Do This\r\n\r\nHere's the same + code from the challenge again, but this time the up arrow uses a compound + conditional. \r\n\r\n* Use the same compound conditional pattern on the other + three arrow keys.\r\n" + CSD U3 - complex - key up and down_markdown_instruction: "# Responding to a + Single Click\r\n\r\nEarlier we learned that `keyWentDown` and `keyWentUp` + can be used to respond to a keypress a single time. The blocks `mouseWentUp` + and `mouseWentDown` allow you to do that for the mouse!\r\n\r\n# Do This\r\n\r\nLet's + make a simple game that counts how many times you've clicked. We've already + provided a variable `clicks` that you can use to track how many times the + user has clicked.\r\n\r\n* Add a conditional that checks if the mouse went + down.\r\n* Inside your conditional, add to the `clicks` variable.\r\n\r\n_Challenge: + Can you add a sprite that responds to `mouseWentDown` as well? Add an image + of your choice and increase the sprite's size each time the mouse is clicked._" + CSD U3 - complex - mouse down_markdown_instruction: "# Mouse Clicks\r\n\r\nKeypresses + are great, but sometimes you want users to interact through mouse clicks. + There's a new block called `mouseDown` which, similar to `keyDown`, checks + whether the left or right mouse buttons is being pressed. If you are using + a computer with a mouse or trackpad that has only one button, you'll want + to always use `mouseDown(\"left\")`. \r\n\r\n# Do This\r\nHere's a program + that drops a balloon down the screen - you're going to program the mouse + button to raise the balloon back up while it's clicked.\r\n\r\n* Add an if + else statment that checks for `mouseDown`\r\n* Inside the conditional, move + the balloon up one pixel if the mouse is down otherwise move the balloon down + \r\n\r\n_Hint: You'll need to move the code that drops the balloon for this + to work - you only want it to run if `mouseDown` is `false`_\r\n\r\n_Challenge: + Can you make the balloon drift randomly to the left and right as it raises + and falls?_" + CSD U3 - complex - mouse move_markdown_instruction: "# mouseDidMove\r\n\r\nWe + can also use Boolean expressions to check whether or not the mouse has moved. + The `mouseDidMove` block will return `false` if the mouse is still, but `true` + if the mouse has been moving.\r\n\r\n# Do This\r\nRight now, this program + just displays a salt shaker sprite. You'll need to use `mouseDidMove` so + that you can \"shake\" the salt by moving the mouse back and forth.\r\n\r\n* + Add a conditional that checks if `mouseDidMove`.\r\n* If the conditional is + true, rotate the salt sprite randomly to the left or right.\r\n\r\n_Challenge: + Can you keep track of how many times the `mouseDidMove` shakes the salt, and + then rotate it right side up after 100 shakes?_" + CSD U3 - complex - nested conditional_markdown_instruction: "# Possible Solution + #1 - Nested Conditionals\r\n\r\nThe way you phrase the previous challenge + says a lot about how you might approach solving it. For example, you might + have phrased moving up and staying on screen as:\r\n\r\n\tIf the up arrow + was pressed then check if the sprite hasn't gone off the top of the screen + and move up.\r\n\r\nThis structure of first asking one question, and then + asking a second question if the first was true is accomplished using a **nested + if statement**. Nested if statements put one if statement inside another if + statement. You can think of this as asking a question and then based on the + answer asking another question before making a decision. We could pseudocode + the previous phrase as:\r\n\r\n\tIf the up arrow was pressed\t// First Question\r\n \tIf + my y > 0\t\t\t\t// Second Question\r\n \tmove up\t\t\t\t// Only runs + if both questions were true\r\n\r\n\r\n# Do This\r\n\r\nHere's the same code + from the challenge, with the up arrow using a nested conditional. \r\n\r\n* + Use the same nested conditional pattern on the other 3 arrow keys.\r\n" + CSD U3 - conditionals - arrows and gears_markdown_instruction: "# Gears with + Conditionals\r\n\r\nLet's make the gears spin only when the space key is + being held down.\r\n\r\n# Do This\r\n\r\n* Add an `if` statement.\r\n* Use + `keyDown` as input to the if statement to check when the space key is pressed.\r\n* + Move the code that makes the gears rotate inside the `if`." + CSD U3 - conditionals - first conditional 2_markdown_instruction: "<img src=\"https://images.code.org/abd459d8d1477ac2f582417f4334cdaa-image-1466107090414.gif\" + style=\"width:200px;float:right\">\r\n# Visible\r\n\r\nNow that you have conditionals + and images, sometimes it's useful to hide the image for a while and then + show it again. You can do this using the `visible` property. The visible property + is a little different from other properties you have seen in the past: It + is a Boolean value, either `true` (the sprite is visible) or `false` (the + sprite is **not** visible). By default, visible is set to `true`.\r\n\r\n# + Do This\r\nMake the balloon pop when it hits the edge of the game area!\r\n\r\n* + Add an `if` statement that checks to see if the balloon has hit the edge.\r\n\t* + Use a watcher on `balloon.scale` to help you out\r\n* Create a pop sprite + which uses the \"pop\" visual in the animation tab.\r\n* Set the pop's `visible` + property to `false` to start.\r\n* Inside the if add two statements.\r\n\t* + One that sets the `visible` property to hide the balloon sprite.\r\n * + One that sets the `visible` property to show the pop sprite." + CSD U3 - conditionals - first conditional_markdown_instruction: "<img src=\"https://images.code.org/36c5543076622c96f7dabce8bc37f995-image-1468425774455.54.03 + PM.png\" style=\"float:right;width:100px\">\r\n# If Statement\r\n\r\nThe Boolean + expressions we tested on the last level allow us to ask questions. In order + to use the answers we need to use something called an **if statement**. If + statements take a Boolean expression as input and check whether it is true + or false. If the Boolean expression is true, then the computer executes the + code inside the if statement.\r\n\r\nFor example, the code below checks whether + the sprite's width is greater than 100. If it is, it prints \"This is a + wide sprite\" to the console log.\r\n\t\r\n\tif( sprite.width > 100 ){\r\n \tconsole.log(\"This + is a wide sprite\");\r\n }\r\n\r\nIf statements usually go inside your + draw loop because we want to check them each time the loop runs. \r\n\r\n# + Do This\r\n\r\nThe race car program you wrote earlier is loaded here for you.\r\n\r\n* + Add an `if` statement after you update the position of the race car. \r\n* + Move the boolean expression from the console.log statement to the input of + the if statement.\r\n* Inside the `if` statement add a statement to draw text + on the screen to say \"Winner\".\r\n" + CSD U3 - conditionals - transition 2_markdown_instruction: "# More Practice + With Booleans\r\n\r\nLet's use one more Boolean expression to check the condition + of a sprite.\r\n\r\n# Do This\r\nThere is a growing balloon sprite created + for you. Can you create an expression to check when the balloon hits the edge + of the game area?\r\n\r\n* Add a `console.log` statement.\r\n* Add a Boolean + expression inside the `console.log` that checks whether the balloon has hit + the edge of the game area.\r\n* Hint: Use the scale of the balloon. You might + have to do some guess and check testing to find the right scale." + CSD U3 - conditionals - transition_markdown_instruction: "# Booleans\r\n\r\nIn + the past few levels, we have been comparing values of sprites to find out + whether something is true or false. Let's start putting that in the context + of an animation.\r\n\r\n# Do This\r\nThe program draws a race car and a finish + line. We are going to figure out when the race car crosses the finish line. + The sprites have all been set up for you.\r\n\r\n* Add a `console.log` statement + inside the draw loop. [Show me where](#triggercallout=callout)\r\n* Add an + Boolean expression inside the `console.log` that asks \"Is the x position + of the race car less than the x position of the finish line?\" (You can look + at [this level](/s/csd3/stage/8/puzzle/2) to see what the statement might + look like.)\r\n* Look at the output of the program as the car moves. When + does the output change? Why?" + CSD U3 - images - Embed Project_markdown_instruction: "Example of the Final + Project" + CSD U3 - images - animations_markdown_instruction: "# Animations\r\n\r\nYou + have seen through out this Unit that when you put together a set of images + and play them close together back to back it looks like movement! Well sprites + make that animation easier! You can put together a set of images to create + an animation. There are pre-loaded animations for you in the animations manager. + \r\n\r\nSet the animation with setAnimation.\r\n\r\n# Do This\r\n\r\n* Create + a sprite\r\n* Add the animation." + CSD U3 - images - changing scene_markdown_instruction: "# Images\r\n\r\nUse + the animations tab to finish making all three sprites fish images.\r\n\r\n<img + src=\"https://images.code.org/f947fc6800cd1abda023b08c20a2ee87-image-1477679298953.gif\" + style=\"float:right\">\r\n\r\n# Do This\r\nYour goal is to finish the underwater + scene so all three sprites are fish like the example on the right. \r\n\r\n* + There is a rectangle sprite already created for you for each fish.\r\n* Run + the code to see how it works.\r\n* Add a `setAnimation` command to change + the look for the remaining two fish. \r\n* Run it to see that your rectangle + is now an image!\r\n" + CSD U3 - images - first image_markdown_instruction: "# Images\r\n\r\nUp until + now all of your sprites have been rectangles. No longer! Now you can use pictures + for your sprites instead.\r\n\r\nCheck out the animations tab by clicking + the <img src=\"https://images.code.org/9471c62f11f3c6065c0d2da523f2ac89-image-1465515854142.43.49 + PM.png\" style=\"width:100px\"> button above the display area.\r\n\r\nThere + is an image there that have been loaded for you!\r\n\r\nIn order to use that + image you will need to use the `setAnimation` command. You have to create + the sprite before you can set its animation.\r\n\r\n# Do This\r\n\r\nThere + is a rectangle sprite already created for you. All you need to do is change + it to an image.\r\n\r\n* Add a call to `setAnimation` to set the animation + to the image provided\r\n* Run it to see that your rectangle is now an image!" + CSD U3 - images - first sprite with image_markdown_instruction: "# Images\r\n\r\nRectangles + are great, but if you're going to make animations and games that really look + great, you'll need some way to add more interesting images to your sprites.\r\n\r\nOver + on the **Animations Tab** you'll see three images that have been loaded for + you! You can get to the animations tab by clicking the <img src=\"https://images.code.org/9471c62f11f3c6065c0d2da523f2ac89-image-1465515854142.43.49 + PM.png\" style=\"width:100px\"> button above the display area.\r\n\r\n<img + src=\"https://images.code.org/f694a37bbadcf0533e7b19d8c0f5309b-image-1465580394090.35.11 + PM.png\" style=\"width:300px;float:right\">\r\n\r\nOnce you have created a + sprite you can **use the `setAnimation()` command to change the look of your + sprite from a rectangle to a picture.** The blocks make this super easy to + do as the names of all the images you have loaded in the animation tab show + up in the `setAnimation()` dropdown. The alien is set up for you as an example.\r\n\r\n# + Do This\r\nChange the sprite to your favorite image from the animations tab.\r\n\r\n* + A sprite that is set to an image has already been created for you.\r\n* Run + the code to see how it works.\r\n* Change the input to the `setAnimation` + command to change the look of the sprite.\r\n* Try out all the different images." + CSD U3 - images - fish free play_markdown_instruction: "# Fish Free Play\r\n\r\nHere + are the swimming fish you have been working on. Continue to improve the animation!\r\n\r\n# + Do This\r\n\r\n* Add another sea creature to the scene.\r\n* Make the sea + creature move.\r\n* Make one of the fish follow the mouse.\r\n* Add more ideas + of your own!" + CSD U3 - images - fish with arrows_markdown_instruction: "# Fish With Arrows\r\n\r\nThe + fish are back. Can you make the fish move left only when the left arrow key + is pressed down?\r\n\r\n# Do This\r\n\r\n* Add an if statement to check when + the left arrow key is pressed down.\r\n* Move the statements for moving the + fish inside the if statement." + CSD U3 - images - kite free play_markdown_instruction: "# Kite Free Play\r\n\r\nHere + is the flying kite you have been working on. Continue to improve the animation!\r\n\r\n# + Do This\r\n\r\n* Add at least 1 other sprite.\r\n* Make the sprite move.\r\n* + Improve the background by adding clouds or other objects.\r\n* Add more ideas + of your own!" + CSD U3 - images - kiteFlying_markdown_instruction: "# Flying Kite\r\n\r\nNow + that you have a kite, make it fly around.\r\n\r\nTo do this we will need to + move the kite and update the end position of the line that is the string. + You have done similar things with variables before but now you will be using + properties.\r\n\r\n# Do This\r\n\r\n* Make the kite move around the top right + corner of the screen randomly.\r\n* Move the code for the string of the kite + to the Draw Animations section since it is now moving!\r\n* Update the end + position of the line so that one end of string stays at the center of the + kite." + CSD U3 - images - nextFrame_markdown_instruction: "# Next Frame\r\n\r\nOn the + last level the animation you used continously looped through the animation + and never stopped. Sometimes we want to control when the animation changes. When + you want to create a sequence but not have it loop you can click the button + in the anmations tab *** show example***. Then in the code you can control + when you move to the next frame using `nextFrame`. \r\n\r\n\r\n# Do This\r\n\r\nThere + is a sprite already created for you and 4 images loaded into the animations + tab. Make the sprite change frames each time the space bar is pressed down.\r\n\r\n* + Create a conditional to respond to the space bar\r\n* Inside the conditional + call `nextFrame` to move the sprite to the next frame" + CSD U3 - images - race images_markdown_instruction: "# Race Cars\r\n\r\nYou + made a racing game in the last lesson. You can now make those rectangles look + like race cars!\r\n\r\n# Do This\r\n\r\n* Use the race car images in the animations + tab to update your racing animation." + CSD U3 - images - random movement_markdown_instruction: "<img src=\"https://images.code.org/fccef5d23434917c0a22361cb6e69666-image-1477679738105.gif\" + style=\"float:right\">\r\n\r\n# Updating Fish\r\n\r\nThe same thing you did + on the last level will help your fish look more like they are swimming. Update + your scene to make the fish look like they don't swim in a perfectly straight + line. \r\n\r\n# Do This\r\nYour goal is to finish the underwater scene so + all three sprites are fish like the example on the right. \r\n\r\n* Use a + small random rotation to **make your fish wiggle**.\r\n" + CSD U3 - images - review_markdown_instruction: "# Sprites Review\r\n\r\nYou + have learned a lot about sprites already and conditionals. Can you use those + skills to create a square that moves in all 4 directions in response to the + arrow keys?\r\n\r\n# Do This\r\n\r\n* Create a sprite\r\n* Make the sprite + move up, down, left, and right in response to the arrow keys" + CSD U3 - images - scale_markdown_instruction: "# Upload your own image\r\n\r\nSo + the image you uploaded probably was not the size you wanted was it? You can + fix that! There is a property for sprites called `scale`. **Scale controls + the width and the height of the sprite at once.** Using scale is better than using + width and height for images because...\r\n1. It's one property instead of + two.\r\n2. You keep the image ratio and it doesn't distort it.\r\n\r\n**To + make the image smaller you want to use a scale less than 1. To make the image + bigger you want to use a number greater than 1. A scale of 1 would keep it + the same.**\r\n\r\n# Do This\r\n\r\n* Resize your kite using `scale` to better + fit the picture." + CSD U3 - images - setAnimation_markdown_instruction: "# Upload your own image\r\n\r\nYou + can also use the Animation tab to upload your own image.\r\n\r\n# Do This\r\nYou + are going to make a flying kite. The first step is to pick out a kite you + like.\r\n\r\n* Find an image of a kite you want to use. It works best if + it has a clear background.\r\n* Open the animations tab.\r\n* Click <img src=\"https://images.code.org/346f6657dba57b0c3bd5deb534f76b69-image-1466194432449.13.05 + PM.png\" style=\"width:50px\">\r\n* Click <img src=\"https://images.code.org/60c0371b45b29f10a3c8530db9154428-image-1466194434329.13.16 + PM.png\" style=\"width:50px\">\r\n* Select a file from your computer.\r\n* + Rename your image so it has a name that is easy to remember. To rename it + click the text below the image. <img src=\"https://images.code.org/c7809f27743bcb4cd86e46a4493c5c7a-image-1466194516357.15.04 + PM.png\" style=\"width:60px\">\r\n* Set the kite sprite to display your image.\r\n\r\nDon't + worry if your kite image is too big! You'll learn how to fix that in the + next level." + CSD U3 - images - switch the picture_markdown_instruction: "# Switching Images\r\n\r\nYou + don't have to keep the same image the whole time. In fact since your *image* + was moving around the screen it would be cool to have it fact the correct + direction as it moves.\r\n\r\n# Do This\r\n\r\nYour work was copied here as + well\r\n\r\n* Add a call to `setAnimation` inside each if statement to the + correct image" + CSD U3 - images - visible_markdown_instruction: "# Visible\r\n\r\nNow that + you have conditionals and images sometimes it appropriate to hide the image + for a while and then show it again. You can do this using the `visible` property. + The visible property is a little different than some of the other properties + you have seen in the past. It is a boolean value. So visible is either true + or false. By default visible is set to true.\r\n\r\n\r\n# Do This\r\n\r\n* + In response to something set the sprite to visible and invisible.\r\n" + CSD U3 - sprites - motiviation_markdown_instruction: "# How Many Variables?\r\n\r\nIn + the last lesson you learned how to use the **counter pattern** (`x = x + 1`, + `x = x - 0.5`, `x = x - 1`, etc.) to create smooth animations. Using this + pattern in many different ways allows you to create interesting and complex + animations.\r\n\r\nWatch the animation here. With a partner discuss: \r\n\r\n* + How many counter variables would you need to create to make this animation? + What are they used to animate?\r\n* What would you name your variables?\r\n* + What are the challenges of using counter variables in a scene like this?" + CSD U3 AnimationsMulti Play Defender_markdown_instruction: "# Defend Your Cake!\r\n\r\nThis + is an example of a defender game that you'll build by the end of this lesson. + Move the alien with arrow keys to keep the ladybugs from getting to your cake. + How high of a score can you get?\r\n\r\n# Do This\r\n\r\nTurn to a classmate + and make a list of the following information.\r\n\r\n* How many sprites are + there in this game. Which are they?\r\n* What variables are needed to make + this game? What do they store?\r\n* If you were to split the code of this + game into functions what do you think they would be? What are the major pieces + of behavior you'd need to create in your code?" + CSD U3 AnimationsMulti defender animate cake enemies_markdown_instruction: "# + Getting Started: Set Animations\r\n\r\nYou should have already reviewed the + planning guide for this project. A lot of the work to turn this project guide + into a working game has already been started. Based on the project guide you're + going to do the rest of this work.\r\n\r\n# Do This\r\n\r\nBefore we get started + you'll want some better animations for each of your sprites.\r\n\r\n* In + the Animation Tab are animations for each of your sprites. Go look at what + they are.\r\n* In your code give each sprite its appropriate animation. **Use + the ones provided for now** but later you'll be able to go change them.\r\n* + Head to [Level 4](/s/csd3/stage/16/puzzle/4) if you need help remembering + how to do this." + CSD U3 AnimationsMulti defender animate player_markdown_instruction: "# Change + Player Animations\r\n\r\nRight now your player is always facing the same direction. + You can make things look a lot more realistic by switching between animations. + Your player should switch between a left-facing and right-facing animation + depending on which key was last pressed. Remember, you can quickly copy and + edit animations inside the Animation Tab.\r\n\r\n# Do This\r\n\r\n* Inside + the Animation Tab copy the animation of your player sprite.\r\n* Flip each + frame of the new animation so that the sprite is facing in the opposite direction\r\n* + Rename your new animation\r\n* Use the `setAnimation` command inside the `movePlayer` + function so that the player changes the direction it is facing when the \"left\" + and \"right\" arrows are pressed." + CSD U3 AnimationsMulti defender create set enemies_markdown_instruction: "# + Creating Functions\r\n\r\n<img src=\"https://images.code.org/126982cbde9ae62e9a77ca1e53c92024-image-1476291567280.58.00 + AM.png\" style=\"float:right; height:90px\">\r\n\r\nYour program now includes + code in two places to set the enemies on the left side of the screen at a + random y location. You can create functions to reset each of your two enemies + to remove repetitions from your program. This will make your program easier + to read, allow you to change it more easily, and allow you to quickly reset + your sprites at other points in your program if you need to.\r\n\r\n# Do This\r\n\r\n<img + src=\"https://images.code.org/01a2f4d9725162482fda9f74734c992c-image-1476461412974.09.52 + AM.png\" style=\"\r\nfloat:right; height:70px\">\r\n\r\n* At the bottom of + your program create two new functions, `setEnemy1` and `setEnemy2`.\r\n* Inside + each of these functions place the code that sets the enemies on the left side + of the screen and gives them a random y position\r\n* Wherever the code for + `setEnemy1` and `setEnemy2` appears in your program replace them with a call + to the functions you just created." + CSD U3 AnimationsMulti defender displace enemies_markdown_instruction: "# Displace + Enemies\r\n\r\nIt's time to write code for some more sprite interactions. + Your player sprite should displace the enemy sprites.\r\n\r\n# Do This\r\n\r\nFor + this level you'll be writing code inside the `displaceEnemies` function.\r\n\r\n* + Write code that makes player displace both enemy sprites.\r\n* Test your program + to make sure your player is displacing enemies but they keep moving right + after the player moves away.\r\n\r\n_Hint: You can use `sprite.debug` to see + your sprites' colliders if you need to debug your program_" + CSD U3 AnimationsMulti defender enemies move_markdown_instruction: "# Moving + The Enemies\r\n\r\nIt's time to start writing the code that will move your + sprites. To begin you'll need to get your enemy sprites to a random position + and moving across the screen.\r\n\r\n# Do This\r\n\r\nAt the top of your program, + after you create each enemy sprite, write code that will move it to the correct + position and give it the correct velocity.\r\n\r\n* Use `sprite.x` to set + the x position to 0\r\n* Use `sprite.y` to set the y position should be a + random number between 150 and 250\r\n* Use `sprite.velocityX` to set the x + velocity to 2\r\n\r\nTest your program. Your enemy sprites should now be moving + across the bridge." + CSD U3 AnimationsMulti defender enemies touch cake sprite2_markdown_instruction: "# + Touching the Cake: Second Ladybug\r\n\r\nYour first enemy sprite should now + be resetting when it gets to the cake. Now you'll want the other ladybug + to reset as well.\r\n\r\n# Do This\r\n\r\nInside the `enemiesTouchCake` function + you should have written code that resets enemy1\r\n\r\n* Copy the entire if-statement + you wrote in the last level (Ctrl-C)\r\n* Paste the code inside of the `enemiesTouchCake` + function, just below the last one (Ctrl-V)\r\n* Change the name of the sprite + in that code from `enemy1` to `enemy2`\r\n \r\nTest your code. Now both bugs + should reset when they touch the cake." + CSD U3 AnimationsMulti defender enemies touch cake_markdown_instruction: "# + Touching the Cake\r\n\r\nIf the enemies get all the way across to the cake + you should place them back at the left side of the screen and decrease the + score. To start you'll **write code for only one of your enemies**.\r\n\r\n# + Do This\r\n\r\nInside the `enemiesTouchCake` function you'll need to write + code that checks when a ladybug is touching the cake, resets its position, + and changes the score.\r\n\r\n* Use an `if` and `isTouching` to detect whether + enemy1 has touched the cake.\r\n* Inside your `if` block place code that...\r\n * + Sets enemy1's x position back to 0\r\n * Sets enemy1's y position to a + random number between 150 and 250\r\n * _Hint: You can reuse some code you + already wrote_\r\n * Use the counter pattern to decrease the score by 2\r\n \r\nTest + your code. One of your ladybugs should now reset when it gets across to the + cake, and the score should go down by 2." + CSD U3 AnimationsMulti defender make it your own_markdown_instruction: "# Make + It Your Own\r\n\r\nYou just walked through someone else's plan for creating + a game, so now it's time to make it your own. What additional features or + challenges do you want to create?\r\n\r\n# Do This\r\n\r\nSelect one of the + challenges below to add to the game or come up with a challenge of your own.\r\n\r\n* + Change the visuals of the game so that your player, enemies, or cake look + different\r\n* End the game when the enemies get to the cake and print the + score. For an extra challenge end the game only after 3 enemies get through\r\n* + Randomize the speed of the enemies\r\n* Create a new background that shows + up when players reach a higher score." + CSD U3 AnimationsMulti defender move player_markdown_instruction: "# Moving + Left and Right\r\n\r\nNow that your enemy sprites are moving correctly, it's + time to write the code to move your player. For now you'll just need to get + your character moving left and right and changing its animations.\r\n\r\n# + Do This\r\n\r\nFor this level you'll be writing code inside the `movePlayer` + function.\r\n\r\n* Use an `if` block along with `keyDown` to detect when the + \"right\" arrow is pressed\r\n* Use `sprite.x` and the counter pattern increase + the player's x position by 3\r\n* Use another `if` block to move the player + to the left when the \"left\" arrow is pressed. This time you'll need to + decrease the player's x position.\r\n\r\nTest your game. Your character sprite + should now move left and right when you press the left and right arrows." + CSD U3 AnimationsMulti defender move up down_markdown_instruction: "# Moving + Up and Down\r\n\r\nYou'll want your player sprite to move up and down as + well.\r\n\r\n# Do This\r\n\r\nFor this level you'll still be writing code + inside the `movePlayer` function.\r\n\r\n* Use an `if` block along with `keyDown` + to detect when the \"up\" arrow is pressed\r\n* Use `sprite.y` to increase + the player's y position by 3 using the counter pattern\r\n* Use another `if` + block to move the player down when the \"down\" arrow is pressed\r\n\r\nTest + your code. Your character should now move in all 4 directions." + CSD U3 AnimationsMulti defender template_markdown_instruction: "# Play and + Pause\r\n\r\nYou can use the `sprite.play` and `sprite.pause` commands to + play and pause a sprite's animation. If the animation is already playing + or paused, using these commands twice in a row has no effect. There's one + important exception, however, which is that **play will restart a non-looping + animation if it has finished**. We're going to look at some cool behavior + this lets us create.\r\n\r\n# Do This\r\n\r\n* Use the `sprite.play` command + after each of your `setAnimation` commands. This will restart the walk animations + as long as the keys are pressed." + CSD U3 AnimationsMulti defender touch water_markdown_instruction: "# Touching + the Water\r\n\r\nThe last part of the game that you'll need to write is the + code to reset the sprites when they touch the water. Luckily you should have + already written functions that reset each sprite, so you'll just need a good + way to know when either sprite leaves the bridge. Start by writing the code + for a single enemy and then copy-paste and make small changes to create code + for your second enemy.\r\n\r\n# Do This\r\n\r\nFor this level you'll be writing + code inside the `enemiesTouchWater` function.\r\n\r\n* Use an `if` statement + to check whether enemy1 is off the top of the bridge by checking whether its + y value is below 140. Within your if statement...\r\n * Use your `setEnemy1` + function to reset the sprite\r\n * Add 1 to the score\r\n* Use an if statement + to check whether enemy1 is off the bottom of the bridge by checking whether + its y value is above 260. Within your if statement...\r\n\t* Use your `setEnemy1` + function to reset the sprite\r\n * Add 1 to the score\r\n* Test your program + for the first enemy sprite. Make sure the sprite is resetting and the score + goes up.\r\n* Once it is working copy and paste the code you wrote to create + the same behavior for `enemy2`. You'll need to change the name of the sprite + and the name of the functions you use." + CSD U3 AnimationsMulti introducing multiframe template_markdown_instruction: "# + Using Multiframe Animations\r\n\r\nYou probably noticed in the last game that + the sprites themselves were animated. Have some fun choosing some of the animations + from the library.\r\n\r\n\r\n# Do This\r\n\r\nThis program already includes + several sprites but they don't yet have any animations.\r\n\r\n* Go to the + Animation tab and check out the multi-frame animations already added to your + project. Choose one for each of your characters.\r\n" + CSD U3 AnimationsMulti introducing multiframe_markdown_instruction: "# Using + Multiframe Animations\r\n\r\nIn the sample defender game the sprites themselves + were animated. Before getting started on programming this game take a minute + to get familiar with this new way of animating sprites.\r\n\r\n# Do This\r\n\r\nThis + program already includes several sprites but they don't yet have any animations.\r\n\r\n* + Go to the Animation tab and check out the multi-frame animations already added + to your project. Choose one for each of your characters.\r\n* Remember you + can use `setAnimation` to give your sprites animations you've created in + the Animation Tab\r\n" + CSD U3 AnimationsMulti mirror animation_markdown_instruction: "# Editing Multiframe + Animations\r\n\r\nYour sprites will look a lot more realistic if they turn + around when they're moving. You can switch back and forth between multiframe + animations when the user presses different keys.\r\n\r\n# Do This\r\n\r\nRead + this code and run the program. Make sure you know how the sprite responds + to the arrow keys.\r\n\r\n* In the Animation Tab create a copy of the alien + animation ![](https://images.code.org/aee81f9cd3f63bb8a9c91ac3ab250a87-image-1475699896387.38.09 + PM.png)\r\n* Use the tool to flip your animation. Make sure you flip both + frames. ![](https://images.code.org/3b10b4a612f9a7c640dc7bb18f4c2b91-image-1475699599617.33.03 + PM.png) \r\n* Rename your new animation\r\n* Use your new animation and old + animation so that the alien faces the correct direction when moving. Where + do you think you'll need to set the sprite's animation in your code?" + CSD U3 AnimationsMulti no loop_markdown_instruction: "# Preventing Animations + from Looping\r\n\r\nBy default your animations keep replaying in a loop. You + can have you animation only play once by clicking this button below your animation.\r\n\r\n# + Do This\r\n\r\n* Set both the animations in your project to non-looping.\r\n* + Run the program and confirm your sprite only takes 1 step when it changes + directions" + CSD U3 AnimationsMulti play pause_markdown_instruction: "# Play and Pause\r\n\r\nYou + can use the `sprite.play` and `sprite.pause` commands to play and pause a + sprite's animation. If the animation is already playing or paused, using + these commands twice in a row has no effect. There's one important exception, + however, which is that **play will restart a non-looping animation if it has + finished**. We're going to look at some cool behavior this lets us create.\r\n\r\n# + Do This\r\n\r\n* Use the `sprite.play` command after each of your `setAnimation` + commands. This will restart the walk animations as long as the keys are pressed." + CSD U3 AnimationsMulti slow down_markdown_instruction: "# Slow Down\r\n\r\nNice + work! Time to start learning how to control these multiframe animations.\r\n\r\n# + Do This\r\n\r\nYour sprites should be animated but they're moving really + quickly. \r\n\r\n* Head back to the Animation Tab. Underneath each animation + you should see a slider. ![](https://images.code.org/169e11c1f6f55b607937fe9cb7e5e390-image-1476209267457.07.26 + AM.png)\r\n* Use these sliders to slow down your animations so they look more + realistic.\r\n\r\n" + CSD U3 Background Discuss_markdown_instruction: "<i class=\"fa fa-hand-paper-o\" + aria-hidden=\"true\" style=\"color:red; float: right; font-size: 200px; font-weight: + 800;\"></i>\r\n\r\n# Animation\r\nUsing the draw loop opens up the potential + to make some neat animations, but it's a bit troublesome that every time + the loop is run it just draws on top of the last drawing. What if we could + make this behave more like a flip book animation?\r\n\r\n# Do This Together\r\n\r\n* + **Run** the provided program together\r\n* **Hypothesize** how does the draw + loop work?\r\n* **Brainstorm** how could we make it so that we only see the + most recently drawn rectangle?" + CSD U3 Background Experiment_markdown_instruction: "# Background\r\nWe could + draw a 400 pixel white square each time the `draw()` loop runs, but there's + actually a built-in command that works even better. The `background()` block + just takes one input, the color of your background, and fills the whole canvas + with that color. The nice thing about using `background()` instead of `rect()` + is that it will fill the screen regardless of how big it is, making your code + more flexible and usable in more scenarios (like when you get a new phone + with a bigger screen).\r\n\r\n# Do This\r\nPlace the `background()` block + inside your `draw()` loop before any other shapes are drawn. Choose a background + color of your choice and then test your code to make sure it only shows a + single rectangle at a time." + CSD U3 Boolean Modify_markdown_instruction: "# Boolean Expressions\r\n\r\nThe + simplest Boolean expressions are questions that the computer can answer with + true or false. These expressions are made using **comparison operators**, + as shown below.\r\n\r\n|Comparison Operator | Boolean Expression | Meaning + |\r\n|:---:|:---:|:---:|\r\n| <img src=\"https://images.code.org/1a0798d75d4242715e7608d825f95101-image-1447271431312.png\" + style=\"width: 100px\"> | `1 < 9` | Is 1 less than 9? | \r\n| <img src=\"https://images.code.org/5ff460ac121f0ac51b569e96a4404c57-image-1447271431310.png\" + style=\"width: 100px\"> | `1 > 9` | Is 1 greater than 9 ? | \r\n| <img src=\"https://images.code.org/a4daa9efccea2278e165592efe343c1a-image-1447271431308.png\" + style=\"width: 100px\">| `1 == 9` | Is 1 equal to 9?| \r\n<br>\r\n**Note:** + If you saw the statement 3 < 2 in math class, you'd think something was terribly + wrong, but this is not math class. In computer science, the comparison operators + **ask a question** that the computer will answer with `true` or `false`. So + you can read 3 < 2 as **\"Is 3 less than 2?\"** The answer in this case is + no, or `false`. \r\n\r\nAnother way to say this is that the Boolean expression + `3 < 2` **evaluates** to `false`.\r\n\r\n# Do This\r\nCan you modify the values + of the sprite properties so that each of the Boolean expressions evaluates + to `true`?\r\n\r\n- Read through the entire program to see how `sprite1` and + `sprite2` are being created and which properties are compared.\r\n- For each + of the Boolean expressions, identify the sprite properties being compared.\r\n- + Change the code _in the first **13** lines only_ so that each of the `console.log()` + statements print `true`." + CSD U3 Boolean Predict_markdown_instruction: "# Boolean Expressions\r\n\r\nDecision-making + in computers is based on statements called **boolean expressions**. A boolean + expression is **any expression that can only evaluate to either `TRUE` or + `FALSE`**. This can be particularly useful when used to compare the properties + of two sprites. For example, you could figure out which one is larger or placed + higher up. In the next few puzzles, we'll use simple boolean expressions + to compare sprite properties.\r\n\r\n# Predict\r\n\r\nRead the code below. + There are some new symbols in it which you haven't been introduced to. Take + a guess at what they mean and try to answer the following question.\r\n\r\nWhich + result will be printed in the console by this program?\r\n\r\n1.\r\n \r\n true\r\n false\r\n true\r\n2.\r\n + \r\n 200\r\n 10\r\n -20\r\n \r\n3.\r\n \r\n true\r\n error\r\n true\r\n4.\r\n + \r\n false\r\n true\r\n false" + CSD U3 Complex Movement counter prediction_markdown_instruction: "# Velocity + and the Counter Pattern\r\n\r\nUsing the counter pattern with a sprite's + x and y property makes a sprite move smoothly across the screen. In this program + **the counter pattern is being used with the `sprite.velocityX` property** + instead.\r\n\r\n# Predict\r\n\r\nWhat do you think will happen when the code + is run? Why? Once you're ready you can run the code to find out." + CSD U3 Compound Nested Challenge_markdown_instruction: "# Checking for Multiple + Conditions\r\n\r\nSo far we've looked at a lot of ways to check if a single + condition is true, but often a program needs to check the state of many conditions + simultaneously before making a decision. For this challenge, let's assume + the following scenario:\r\n\r\n- The sprite should move up, down, left, and + right if the corresponding arrow key is pressed.\r\n- The sprite should _not_ + go all the way off the screen in any direction.\r\n\r\n# Do This Together\r\n\r\nBefore + you tackle writing this program, you'll need to figure out how to check multiple + conditions at once.\r\n\r\n* **Brainstorm** with your neighbors ways you might + check for more than one condition.\r\n* **Share** back with the whole class + so you can see other potential approaches.\r\n* **Explore** the toolbox for + blocks that might help (pay extra attention to the Math and Control drawers).\r\n* + **Program** your proposed solution.\r\n* **Test** your program to make sure + it's actually checking all of the conditions you intended.\r\n" + CSD U3 Compound Nested Examples_markdown_instruction: "# Multiple Paths to + the Same Outcome\r\n\r\nYou may have seen several different approaches to + solving the previous challenge - one of the beatiful things about programming + is that it is as much about personal expression as it is about problem solving. + You could have 10 people attempt to create the same program, and each would + be unique and reflective of the person who programmed it!\r\n\r\nThere are + two primary approaches to checking for multiple conditions:\r\n\r\n### Nesting + Conditionals\r\n\r\nIf you think about asking one question first, and then + asking the second question only if the first was true, you could nest your + conditionals, like so:\r\n\r\n```javascript\r\nif (keyDown('up') {\r\n if + (sprite.y > 0) {\r\n sprite.y = sprite.y - 1;\r\n }\r\n}\r\n```\r\n\r\n### + Compound Booleans\r\n\r\nIf you think about asking if both the first and second + question are true at the same time, you could use `&&` (and) to combine booleans, + like so:\r\n\r\n```javascript\r\nif (keyDown('up') && sprite.y < 0) {\r\n\tsprite.y + = sprite.y - 1;\r\n}\r\n```\r\n\r\n# Do This\r\n\r\nThis program uses a nested + conditional to check the up arrow and a compound boolean to check the down + arrow. Use one (or both) techniques to check the left and right arrows as + well." + CSD U3 Conditional Predict_markdown_instruction: "# Prediction\r\n\r\nIn this + program, the animation has different reactions when the user presses different + keys. One reaction is a new kind of behavior you haven't seen before. Look + at the following inputs and match them to their outputs. Once you have made + your prediction you will be able to test it out.\r\n\r\n| Input |\r\n| ------------- + | \r\n| Press the _space_ bar | \r\n| Press the _w_ key | \r\n| Press the + _j_ key |\r\n| Press the _j_ and _k_ keys | \r\n| Press the _k_ key |\r\n\r\n\r\n| + Output |\r\n| ------------------------- |\r\n| blue_sprite rotates clockwise |\r\n| + red_sprite moves up and blue_sprite moves down |\r\n| The sprites don't + change |\r\n| red_sprite rotates counter clockwise |\r\n| red_sprite gets + bigger and blue_sprite gets smaller |\r\n" + CSD U3 Conditional Project_markdown_instruction: "# Get Creative\r\n\r\nAt + this point you have all of the tools necessary to make an interactive animation + or simple game of your own design! This is your chance practice using all + of the blocks you've seen so far, and to experiment with blocks you haven't + used yet.\r\n\r\n# Do This\r\n\r\nDesign an interactive animation of your + own. Your program should -\r\n\r\n- Use conditionals to get keyboard input\r\n- + Use conditionals to react to a sprite's properties\r\n- Allow a user to move + one or more sprites around the screen\r\n- Change multiple sprite properties + through conditionals\r\n\r\n_You might notice some new blocks in the Sprites + drawer, experiment with them and see if you can incorporate them into your + conditionals._" + CSD U3 Counters assigning an expression_markdown_instruction: "# Assignment + and Expressions\r\n\r\nYou know that **variables can hold a single value**. + You also know that **expressions are always evaluated to a single value**. + Why don't we try storing that single value in a variable so that we can use + it many times in our programs.\r\n\r\n# Do This\r\n\r\nThis program generates + a random multiple of 10 (10, 20, 30, 40 etc) and stores it in the variable + `size`\r\n\r\n* **Run the progam** to see how it works\r\n* **Change the numbers + used in the expression on line 3** to see how it affects this simple animation" + CSD U3 Counters counter colors_markdown_instruction: "# Counters in Colors\r\n\r\nThe + counter pattern you've been using is incredibly useful for changing many + different aspects of your images, not just the position of shapes. **Anything + that normally would be drawn with a number can easily be animated with a counter + variable.**\r\n\r\n# Do This\r\n\r\nThe goal of this program is to use two + variables as counters to **transition a circle's color slowly from blue to + red**.\r\n\r\n* **Run the program** to see what happens.\r\n\t* The `red` + value **already counts up by 1**\r\n\t* The `blue` value **doesn't change** + and so the circle becomes purple, not red.\r\n* Use what you know about counters + to **add code that will make the circle transition smoothly to red**\r\n* + **Note:** When the `color` command sees a value outside the range of 0 - 255 + it just rounds. For example, 300 becomes 255 and -100 becomes 0." + CSD U3 Counters counter square movement_markdown_instruction: "# Animating + with Counters\r\n\r\nThe counter pattern can be used to increase the value + of a variable each time the draw loop runs. You can use this to create smooth + motion in your programs. You're going to try out a few ways of using this.\r\n\r\n# + Do This\r\n\r\nThis program uses the counter pattern with a variable called + `xPos`.\r\n\r\n* **Read the program** and make a prediction of how it will + run.\r\n* **Run the program** to check your prediction\r\n* **Change the code** + so that `xPos` changes by different amounts each draw loop. For example instead + of `xPos = xPos + 1` you could try:\r\n\t* `xPos = xPos + 2`\r\n * `xPos + = xPos + 5`\r\n * `xPos = xPos + 0.1`" + CSD U3 Counters counter subtraction_markdown_instruction: "# Counting Down\r\n\r\nSometimes + you won't want to count up, you'll want to count down. You can **subtract** + from a variable's value just as easily as you add. ![](https://images.code.org/8b98effa437da54090926c3451af204d-image-1465325587949.52.49 + PM.png)\r\n\r\n\t// counter pattern, counting down\r\n counter = counter + - 1;\r\n\r\nKeep getting practice using counters to animate, but this time + try counting down.\r\n# Do This\r\n\r\nThis program uses the counter pattern + with a variable called `xPos`.\r\n\r\n* The square currently starts in the + center and **goes off the right side** of the screen\r\n* **Change the program** + so that the square **goes off the left side of the screen** instead.\r\n\r\n" + CSD U3 Counters counters expressions_markdown_instruction: "# Using One Counter + Many Times\r\n\r\nYou've already seen and used commands like `x = x + 1` + often to update the value of `x`. Sometimes though we want to **do some math + with a variable without actually changing that variable's value**. \r\n\r\nThis + program draws a rectangle **100 pixels to the right of `x` without changing + the value of `x`**. Here's the steps your computer goes through to run that + second line of code.\r\n\r\n![](https://images.code.org/8f33bbb0189c5e1b854c5b1786168225-image-1465503000293.09.49 + PM.png)\r\n\r\nUsing this pattern allows you to use a single counter to animate + multiple objects, as you're about to see.\r\n\r\n# Do This\r\n\r\nThis program + creates a counter variable called `xPos` and uses it to animate 3 rectangles.\r\n\r\n* + **Run the program** to see what happens.\r\n* **The red and orange rectangles + move across the screen but the yellow one doesn't yet.**\r\n* **Write code + following the pattern shown above** so that the yellow rectangle will move + across the screen with the others.\r\n* **Hint:** How was the orange rectangle + made to move?\r\n\r\n![](https://images.code.org/822941874e7add509bb80266718efb94-image-1463080462625.gif)" + CSD U3 Counters counters sunset night_markdown_instruction: "# Challenge: Nightfall\r\n\r\nThink + you've got drawing with counters down? Try this challenge.\r\n\r\nThe color + block can take a 4th input that controls the opacity of the color. You can + click the arrows on the side of the color block to expand this 4th input.\r\n\r\n![](https://images.code.org/7844f8cb46eade7cec452b7a4d98124b-image-1484964689007.10.08 + PM.png)\r\n\r\n# Do This\r\n\r\nThis is your same sunset animation from before. + Can you make the scene slowly change to night?\r\n\r\n![](https://images.code.org/b055142110b0d0ed092d6496447aad6e-image-1463079830043.gif)\r\n\r\n" + CSD U3 Counters counters sunset_markdown_instruction: "# Animate a Sunset\r\n\r\nYou + now know a little bit about programming with variables. You've seen that + they can **store a value to use many times in a program**. You've seen how + the **counter pattern can allow you to perform smooth animations**. It's + now time to put everything you've learned together.\r\n\r\n<img src = \"https://images.code.org/d0a1386297fae9f21fc046da62b13248-image-1462997082538.gif\" + style=\"float: right; height: 200px\">\r\n# Do This\r\n\r\nThis program is + designed to **animate a sunset**. Some starter code is provided that **creates + all the counter variables you'll need to run your animation**. You need to + decide how to use them to animate this image.\r\n\r\n* **Run the program to + see how it works**\r\n* **Add code** that will:\r\n\t* Make the sun go down\r\n * + Change the color of the sky from blue to red\r\n * Make the cloud go across + the screen\r\n \r\n<details><Summary>Need help?</Summary>\r\n<ul>\r\n<li>For + help animating the sun go check out level 10</li>\r\n<li>For help animating + the sky go check out level 12</li>\r\n<li>For help animating the cloud go + check out level 13</li>\r\n</ul>\r\n\r\n</details>" + CSD U3 Counters explaining counters contained 2_markdown_instruction: "# The + Counter Pattern\r\n\r\nThis pattern is one of the most important ones in all + of programming. \r\n\r\n![](https://images.code.org/83af2e40443ab294ba635f2a01a48ac7-image-1465506512065.06.56 + PM.png)\r\n \r\nIt is used to increase the value of a variable by 1. You + might call it the **counter pattern** since it can be used to make a variable + that counts up. You'll use this pattern a lot, especially with the draw loop. + Let's see what that looks like.\r\n\r\n# Do This\r\n\r\nThis program creates + a variable `counter` and then uses the **counter pattern** to make it count + up. When you run the program what do you think you'll see on the screen?\r\n\r\n* + **Read the program** and make a prediction of what the output will be.\r\n* + **Run the program** to check your prediction.\r\n* **Discuss with a neighbor**. + Can you explain what you observed?\r\n\r\n" + CSD U3 Counters explaining counters_markdown_instruction: "# The Counter Pattern\r\n\r\nThis + pattern is one of the most important ones in all of programming. \r\n\r\n![](https://images.code.org/83af2e40443ab294ba635f2a01a48ac7-image-1465506512065.06.56 + PM.png)\r\n \r\nIt is used to increase the value of a variable by 1. You + might call it the **counter pattern** since it can be used to make a variable + that counts up. You'll use this pattern a lot, especially with the draw loop. + Let's see what that looks like.\r\n\r\n# Do This\r\n\r\nThis program creates + a variable `counter` and then uses the **counter pattern** to make it count + up. When you run the program what do you think you'll see on the screen?\r\n\r\n* + **Read the program** and make a prediction of what the output will be.\r\n* + **Run the program** to check your prediction.\r\n* **Discuss with a neighbor**. + Can you explain what you observed?\r\n\r\n" + CSD U3 Counters expressions_markdown_instruction: "# Expressions\r\n\r\nWe're + going to start learning about **expressions** and how to use them in programs. + Here are two expressions, a short one and a longer one.\r\n\r\n`1 + 2`\r\n\r\n`(1000 + - 400) / (3 * 20)`\r\n\r\nThese expressions have two important components:\r\n\r\n* + **values:** numbers, text, or information in your program \r\n* **operators:** + commands telling the computer to perform an action with those value `+`, `-`, + `*`, `/`\r\n\r\nDon't worry if this is a lot of vocabulary all at once. Try + using some expressions first to get a feel for how they work.\r\n\r\n# Do + This: \r\n\r\nThis program draws a rectangle using 4 separate expressions. + \r\n\r\n* **Run the program** to see what happens\r\n* **Change some of the + values and operators in the 4 expressions**. How does it change the rectangle?\r\n* + Move on once you've changed a few expressions. It's fine if your program + didn't run properly." + CSD U3 Counters long expressions_markdown_instruction: "# Expressions Evaluate + to a Single Value\r\n\r\nAs you probably just noticed expressions can be used + in places where you might normally use a number. That's because your computer + can **evaluate or calculate the single number that is the result of the expression**. + When your computer runs the command\r\n\r\n`strokeWeight(10 + 20)`\r\n\r\nIt + will first calculate the value of the expression `10 + 20` to be `30` and + use that value to set the strokeWeight. In fact, **every expression will eventually + be evaluated to a single value**.\r\n\r\n# Do This\r\n\r\nThis program uses + console.log to show the single value of a couple long expressions.\r\n\r\n* + **Run the program** to see that the expressions result in a single value\r\n* + **Create and display the results of some expressions of your own**. It doesn't + matter what they are, just throw in something long and complex and convince + yourself a single value always comes out." + CSD U3 Counters random expressions_markdown_instruction: "# Random Numbers + in Expressions\r\n\r\nYou can **use random numbers inside of expressions** + too. For example, \r\n\r\n`10 * randomNumber(1,5)`\r\n\r\nis a perfectly valid + expression. This is because **`randomNumber` will generate a single random + value** that can then be used in the expression just like a number.\r\n\r\n# + Do This\r\n\r\nThis program displays random multiples of 10 between 10 and + 50.\r\n\r\n* **Run the program** to see how it works\r\n* **Change the program** + so that it displays **random multiples of 10 between 10 and 100**.\r\n* Change + the expression with a random number in it more if you like. Once you're comfortable + with how it works move on." + CSD U3 Counters sunset template_markdown_instruction: "# Animate a Sunset\r\n\r\nYou + now know a little bit about how **expressions can be used to create variables + that count** and you've used these in some simple programs. Try using counter + variables to animate a more complex scene.\r\n\r\n# Do This\r\n\r\nThis program + is designed to **animate a sunset**. Some starter code is provided but you'll + need to fill in the rest.\r\n\r\n* **Run the program to see how it works**\r\n* + **Add code** that will:\r\n\t* Make the sun go down\r\n * Make the cloud + go across the screen\r\n * Change the color of the sky from blue to red\r\n \r\n<details><Summary>Want + a hint?</Summary>\r\n<ul>\r\n<li>For help animating the sun go check out level + [[blah]]</li>\r\n<li>For help animating the cloud go check out level [[blah]]</li>\r\n<li>For + help animating the sky go check out level [[blah]]</li>\r\n</ul>\r\n\r\n</details>\r\n\r\n![](https://images.code.org/d0a1386297fae9f21fc046da62b13248-image-1462997082538.gif)" + CSD U3 Counters variables as counters_markdown_instruction: "# x = x + 1\r\n\r\nThe + following line of code **is the most important one to understand in this lesson**.\r\n\r\n`x + = x + 1;`\r\n\r\nTry it out in a program first, then move on to **learn more + about what this command is doing**.\r\n\r\n# Do This:\r\n\r\n* **Read the + program to get a sense of how it should run**\r\n* **Run the program** and + observe how it works\r\n* **Discuss with a neighbor** what you observe and + why you think it is happening. Once you've talked, move on." + CSD U3 Counters variables in expressions_markdown_instruction: "# Variables + in Expressions\r\n\r\nYou just saw that **the result of an expression can + be stored in a variable**. Get ready though, because we're about to get even + more interesting.\r\n\r\n**Variables can be used in expressions**. All of + these expressions are valid (assuming the variables have been created):\r\n\r\n`age + + 1`\r\n`height / 2`\r\n`(time * speed) + 100`\r\n\r\nIn each case **the variable's + value is used when its label appears**.\r\n\r\n# Do This\r\n\r\nThis program + generates a random multiple of 10 (10, 20, 30, 40 etc) and stores it in the + variable `size`\r\n\r\n* **Run the progam** to see how it works\r\n* **The + variable `size` appears in two expressions on lines 7 and 8.**\r\n* **Change + the values in these expressions** to see how they affect the way your program + works" + CSD U3 Counters watchers_markdown_instruction: "# Debugging: Watchers\r\n\r\nOnce + you have multiple counter variables it can become difficult to keep track + of how your program is running. **If you want to debug your code, it's useful + to be able to see the values of your different variables as they change.**\r\n\r\nYou + can add a **watcher** to a variable at any time by typing `$watch` followed + by the name of your variable into the Debug Console. This example shows how + you would create watchers for the variables `x` and `y`. Notice they've now + **been added to the \"Watch\" window** to the right.\r\n\r\n![](https://images.code.org/c5cddda5572e73e3f082287aa076e4a8-image-1465327628344.25.11 + PM.png)\r\n\r\nWhile your program is running, the values of `x` and `y` in + the \"Watch\" window will update to show their current value.\r\n\r\n# Do + This\r\n\r\nThis program draws a dot that slowly grows in size. You want to + know **the value of `size` when the dot totally covers the screen.**\r\n\r\n* + **Create a watcher** for `size` by running the command `$watch size` in the + Debug Console.\r\n* **Run the program** and observe the value of `size` change + in the \"Watch\" window.\r\n* **Talk to a neighbor**. How large is `size` + when the dot covers the whole screen?" + CSD U3 Direction Animations_markdown_instruction: "# Changing Images as you + Move\r\nRight now your conditionals only do one thing (change your sprite's + x or y), but you can actually put as much code as you want inside a conditional. + A common thing to do in games is to change your character's image depending + on which direction they're walking.\r\n\r\n# Do This\r\nUsing the provided + program and images:\r\n\r\n- Click on the bug image you are using.\r\n- Use + the Duplicate Button <img src=\"https://images.code.org/f8628b1d4393760d72ea625a93aceb66-image-1481036707819.04.47 + AM.png\" style=\"width:30px\"> in the Animation Tab to make 4 copies of the + bug image you are using.\r\n- Make each copy face a different way and give + it a good descriptive name.\r\n- You should now have 4 images of the bug in + your animation tab, each facing a different way\r\n- Write code that uses + `sprite.setAnimation()` to change the image on your bug sprite when different + arrow keys are pressed\r\n\t- The up arrow should switch to up facing bug + image\r\n\t- The down arrow should switch to down facing bug image\r\n\t- + The left arrow should switch to left facing bug image\r\n\t- The right arrow + should switch to right facing bug image" + CSD U3 Direction Arrows_markdown_instruction: "# Move in All Directions\r\nOnce + you've got your sprite moving in one direction by responding to a `keyDown`, + getting it to move in all four directions should be more of the same. The + basic keyboard control that you're developing here will become the basis + for many of the games you make down the road.\r\n\r\n# Do This\r\nThe bug + sprite you made that responds to the up arrow has been brought to this level. + Add the interaction for the other three arrow keys!\r\n\r\n- Add three if + statements - one for each arrow.\r\n- Each if statement should move the sprite + in the direction of the arrow.\r\n- HINT: As you're working, make sure you + consider both which axis (x or y) your sprite should be moving depending on + the key, and whether or not you should be increasing or decreasing to go in + the desired direction." + CSD U3 Draw Loop Discuss_markdown_instruction: "# Draw()ing\r\nHere's a program + that looks pretty similar to what you've been writing, but may behave quite + differently. You'll want to **stop and discuss** with the class before moving + on.\r\n\r\n# Do This Together\r\nYou will **not write any code** in this level, + and you should be working as a whole class.\r\n* **Read** the provided program + together.\r\n* **Identify** elements that are different than those you have + seen before.\r\n* **Predict** what the provided program will do. **Be specific!**\r\n* + **Run** the program several times and **record** the results.\r\n* **Discuss + with a neighbor.** Was your prediction correct?\r\n* **Hypothesize** what + is happening when this code is run." + CSD U3 Draw Loop Experiment_markdown_instruction: "# Do This\r\nTry using some + of the other shape functions you've learned in the draw loop. What happens + when you use `randomNumber()` to generate some of the inputs?\r\n\r\n# Challenge\r\nExperiment + with adding code before and after the `draw()` loop. Can you figure out what + gets called when?" + CSD U3 Else_markdown_instruction: "# What If My Condition Isn't True?\r\n\r\n<img + src=\"https://images.code.org/1a997d78fcd88efeb9e6dc5a02aa88e8-image-1464706463138.53.58.png\" + width=\"125px\" style=\"float:right\">\r\n\r\nSometimes we want to tell our + program what to do if a condition is `true`, but also what to do if it's + `false`. Pressing the plus button at the bottom of your conditional block + will give you another section called `else`. This `else` section is a fallback + - it will get called whenever the condition in the `if` before it is `false`.\r\n\r\n# + Do This\r\nThe gears are back again. The last time you worked with them, you + made them spin when the space bar is pressed. Instead of the gears only spinning + when the space key is pressed, we want them to spin one way when the space + key is pressed and spin the other way when it's not pressed.\r\n<img src=\"https://images.code.org/b074d47ca8dfa5ab3bfd08344b4f4e42-image-1464706389475.gif\" + style=\"float:right\">\r\n\r\n* Click the _plus_ button at the bottom of the + if block to add an else.\r\n* Add commands to make the gears spin opposite + of the direction that they do when the space bar is pressed." + CSD U3 Expressions calculator_markdown_instruction: "# Adding and Multiplying\r\n\r\nYour + computer can calculate the results of many math problems. Try out this example, + where we add and multiply a few numbers. Then extend it yourself to the numbers + 1 - 10.\r\n\r\n# Do This\r\n\r\n* Run the program code once to see how it + works\r\n* Following the examples, write a program that **multiplys the numbers + 1 - 10** and **adds the numbers 1 - 10**\r\n* **When you're done confirm + your results with a neighbor**" + CSD U3 Frame Rate_markdown_instruction: "# Too Fast, Slow Down!\r\n<img src=\"https://images.code.org/f249b981ead9d196b0f136c402dd0c41-image-1478803334302.gif\" + style=\"float:right; width:200px\"/>\r\n\r\nThe animation is working, but + it's a bit too fast. We're flipping the pages in our virtual flipbook too + often, so we'll need to slow that down.\r\n\r\nThe frequency that our draw + loop is run is called the **frame rate** - the number of times per second + the screen is refreshed.\r\n\r\nThe default frame rate for Game Lab is 30 + frames per second (or FPS), which is great for a video game, but not so good + for our animation. We can slow down the frame rate using the `Game.frameRate` + block.\r\n\r\n# Do This\r\n\r\n* Use the `Game.frameRate` block at the very + beginning of your program, setting it to a number (frames per second) that + slows the animation down a bit. \r\n* Test it out with different numbers to + see which frame rate you like (the default is 30, and it can't go any higher + than 60)." + CSD U3 Functions Add Change Background tmp_markdown_instruction: "# Change + the Background with the Score\r\n\r\nOnce you've caught 10 coins it's time + to celebrate. You should change the background to be something fun.\r\n\r\n<img + src=\"https://images.code.org/943c67e59502334fc65a25e690076bdb-image-1475030156530.33.54 + PM.png\" style=\"float:right; height:100px\">\r\n\r\n# Do This\r\n\r\n* Use + an **if-statement** and two separate functions to draw your backgrounds\r\n* + Then go write your functions outside your draw loop. You get to decide what + a \"simple\" or \"crazy\" background are. Have fun with it!" + CSD U3 Functions Add Change Background_markdown_instruction: "# Change the + Background with the Score\r\n\r\nOnce you've caught 10 coins it's time to + celebrate. You should change the background to be something fun.\r\n\r\n<img + src=\"https://images.code.org/943c67e59502334fc65a25e690076bdb-image-1475030156530.33.54 + PM.png\" style=\"float:right; height:100px\">\r\n\r\n# Do This\r\n\r\n* Use + an **if-statement** and two separate functions to draw your backgrounds\r\n* + Then go write your functions outside your draw loop. You get to decide what + a \"simple\" or \"crazy\" background are. Have fun with it!" + CSD U3 Functions Add IsTouching_markdown_instruction: "# Catch the Coin, Increase + the Score\r\n\r\nLet's make that score change now too to complete the game. + You'll need to be able to tell when the bunny is touching the coin and the + reset it.\r\n\r\n# Do This\r\n\r\n* Use an **if-statement** and the **isTouching** + block to increase the score when the bunny catches the coin\r\n* Make sure + you're **calling your function** to reset the coin once it's been caught.\r\n* + Play the game and **randomize the velocity of the coin** to a range that you + think is fun" + CSD U3 Functions Call Draw Loop_markdown_instruction: "# Calling Functions + in the Draw Loop\r\n\r\nYou can call a function inside the draw loop, just + as you would anywhere else in your code.\r\n\r\n# Do This\r\n\r\nA function + that will draw a background has been created for you. A sprite has been created + to move across the background.\r\n\r\n* **Call the function inside the draw + loop** so that the sprite appears on top of the background.\r\n* **Note:** + Don't create functions inside the draw loop. Make them at the bottom of your + code." + CSD U3 Functions Call Function_markdown_instruction: "# Calling Functions\r\n\r\nFunctions + let you build your own blocks and decide what code goes inside of them. This + is the command that lets you create a new function.\r\n\r\n![](https://images.code.org/2493f74065d4e642ca51429b8832e431-image-1474913839061.17.09 + PM.png)\r\n\r\nYou use or \"call\" your function like any other block by using + the name you gave it.\r\n\r\n![](https://images.code.org/61a6eb716e263b580ecd63fab0de7547-image-1474913770359.16.00 + PM.png)\r\n\r\nThe blocks to create and call functions can be found in the + \"Functions\" tab of the palette.\r\n\r\n![](https://images.code.org/a570a05be61297ee9f0d79a02df8db6e-image-1474922721897.44.36 + PM.png)\r\n\r\n# Do This\r\n\r\nThis program has already created 2 functions. + Only one of them is being called.\r\n\r\n* **Call the second function** to + reveal the full image. Use the function that is being called as a guide.\r\n* + **Tip:** Just like with all other blocks, spelling and capitalization is important + here" + CSD U3 Functions Create Function_markdown_instruction: "# Creating Functions + to Organize Code\r\n\r\nIn Game Lab all the action is happening in the draw + loop, but too much complex code makes it really confusing to read. To keep + your draw loop easy to read, begin by writing functions for larger chunks + of code. You can then go write them below. This is a really good example of + using **abstraction** to think about problems at a high level and worry about + details later.\r\n\r\n<img src=\"https://images.code.org/1a5beeaad6e55c5b27a43604be4f039a-image-1475199750468.42.07 + PM.png\" style=\"float:right;width:150px\">\r\n\r\n# Do This\r\n\r\nThis program + should draw a daytime scene or a nighttime scene, depending on the location + of the mouse. The draw loop describes what needs to happen but one of the + functions hasn't been written yet.\r\n\r\n* **Write the `drawNight` function** + which has been created but is empty\r\n* Hint: Look at the picture to the + right for how your night image should look. Can you use the `drawDay` function + to help you at all?" + CSD U3 Functions Improve Side Scroller_markdown_instruction: "# Finish Your + Side Scroller\r\n\r\nTime to use functions to finish off you side-scroller!\r\n\r\n# + Do This\r\n\r\n* Change the background of your game depending on the score. + Use functions to move the code for your background out of your draw loop\r\n* + Use functions to make sure you're not repeating code when you reset your + obstacle\r\n\r\n_Challenge: Add another sprite to your game and define how + it will interact with your main character. It might be another obstacle to + avoid or some kind of goal to collect_" + CSD U3 Functions Order Functions_markdown_instruction: "# Reordering Code\r\n\r\nPlacing + code inside functions makes it easy to read and make changes to. Good names + for functions indicate what your program is doing to a reader. You can call + your functions in a different order to quickly make significant changes to + how your program runs.\r\n\r\n# Do This\r\n\r\nThis program has already created + 4 functions that draw parts of a scene. Unfortunately it's not coming out + right.\r\n\r\n* **Read the of the 4 functions** to know what they do\r\n* + **Call the functions** in an order that draws the scene in the way that looks + best to you" + CSD U3 Functions Prediction Order of Create Call_markdown_instruction: "# When + Can Your Define Functions?\r\n\r\nSo far you've only seen functions created + at the bottom of your code. What do you think happens if we create the function + before we call it?\r\n\r\n# Do This\r\n\r\n" + CSD U3 Functions Randomize Sprite_markdown_instruction: "# Making Changes to + Functions\r\n\r\nA nice benefit of using functions to remove repeated code + is that you can now easily make changes to multiple places in your code. Just + change how you create the functions, and your program will now use the new + code everywhere your function is called.\r\n\r\n# Do This\r\n\r\nMake changes + to the `setFlyman` function so that he starts at a random Y location between + 0 and 400, and moves at a random velocity every time he is reset." + CSD U3 Functions Reset Sprite_markdown_instruction: "# Calling Functions Multiple + Times\r\n\r\nYou'll often want to use the same code at many places in your + program. Once you've created a function you can call it as many times as + you like.\r\n\r\n# Do This\r\n\r\nThis code creates a sprite that moves across + the screen once. How can you make it go back across the screen.\r\n\r\n* **Note:** + The function is already called once at the beginning of your program\r\n* + Read the condition of the **if-statement** inside the draw loop. Why do you + think it's there?\r\n* Use this if-statement and the function written for + you to make the sprite move across the screen multiple times." + CSD U3 Functions Template Flyman_markdown_instruction: "# Calling Functions + Multiple Times\r\n\r\nOften times you'll want to use the same code at many + places in your program. Once you've created a function you can call it as + many times as you like.\r\n\r\n# Do This\r\n\r\nThis code creates a sprite + that moves across the screen once. How can you make it go back across the + screen.\r\n\r\n* Read the condition of the **if-statement** inside the draw + loop. Why do you think it's there?\r\n* Use this if-statement and the function + written for you to make the sprite move across the screen multiple times." + CSD U3 Functions Write Reset_markdown_instruction: "# Write Your Own Function\r\n\r\nTime + to practice writing functions of your own. This is a very simple game in which + coins fall from the sky and the bunny tries to catch them. All you need to + do is write the function that sets up the coin.\r\n\r\n# Do This\r\n\r\n* + **Read and run the code** that already exists to make sure you know how it + works\r\n* **Write the code for the `setCoin`** function to make the coin + fall from the sky.\r\n* You can go look at some of the previous levels if + you need help" + CSD U3 Functions Write Your Own_markdown_instruction: "# Write Your Own Function\r\n\r\nTry + writing your own function to add something to the scene!\r\n\r\n# Do This\r\n\r\nThis + is the same program you wrote in the last level.\r\n\r\n* **Create and call** + a function that adds something to the scene. No need to get too complex, but + make sure you get some practice writing a function\r\n* **Share your code** + with a neighbor. Do they think your function's name clearly describes what + it does? Make changes if you need to." + CSD U3 Functions isTouching_markdown_instruction: "# Making Changes to Functions\r\n\r\nA + nice benefit of using functions to remove repeated code is that you can now + easily make changes to multiple places in your code. Just change how you create + the functions, and your program will now use the new code everywhere your + function is called.\r\n\r\n# Do This\r\n\r\nMake changes to the `setFlyman` + function so that he starts at a random Y location between 0 and 400, and moves + at a random speed every time he restarts." + CSD U3 If Else_markdown_instruction: "# When to Provide a Fallback\r\n\r\nThe + else clause is useful as a fallback to the main condition that you're checking + - that is, if you _care_ what happens when your primary condition is `false`, + you should provide an else clause to take care of it.\r\n\r\n<img src=\"https://images.code.org/730a895b50375781e72c95f5fa21d09d-image-1477681109870.gif\" + style=\"float:right;\">\r\n\r\n# Do This\r\nClick \"Run\" to see the swarm + of bees created for you and a flower on the left side of the screen. Make + the swarm of bees **appear when the mouse is near the flower** (on the left + side of the screen) and **disappear when the mouse is away from the flower** + (on the right side of the screen). Look at the example on the right.\r\n\r\n* + Add an `if else` statement after you update the position of the bees.\r\n* + In the input of the if use a boolean to check if the x position of the mouse + is on the side of the screen with the flower.\r\n* Set the `visible` property + of each bee inside both the if and else statements appropriately to make the + bees only show near the flower." + CSD U3 Interactive Card Background_markdown_instruction: "# Laying Out Your + Background\r\nBefore beginning this project, you should have already completed + the Interactive Card Planning activity, and you'll want to have that paper + with you as you develop your program. Preparation is one of the **most important** + elements of successfully creating a program!\r\n\r\n# Do This\r\nRefer to + your planning activity sheet to help you lay out the shapes that will become + the background to your card.\r\n\r\n* First, figure out what the lowest layer + in your image is (this should use the `background()` block) and add it to + the very top of the `draw()` loop\r\n* Next, layer each additional drawing + block in the order you want them to appear in the stack\r\n* Finally, add + a comment to the top of this section of code to describe what it does, and + if you have any particularly complicated chunks of code within (such as code + to draw a tree or a house), add a descriptive comment to that as well\r\n\r\n**Challenge:** + Can you use variables or `randomNumber()` to add some subtle animation to + your background layer?" + CSD U3 Interactive Card Exemplar_markdown_instruction: "# Example Project\r\n\r\nRun + the program a few times and answer the following questions:\r\n\r\n1) Which + elements appear to use drawing commands?\r\n\r\n2) Which elements appear to + be Sprites?\r\n\r\n3) For each Sprite, which properties are being updated?\r\n\r\n4) + Where do you see conditionals being used?\r\n\r\n5) Are there elements that + you don’t understand?" + CSD U3 Interactive Card Final_markdown_instruction: "# Finishing Touches\r\nNow's + your chance to put some finishing touches on your card. We've included some + new blocks that you haven't seen before, so take some time to look around + and try out some new blocks.\r\n\r\n# Do This\r\nConsider adding any of the + following to finish up your card:\r\n\r\n* Text (add it after the `drawSprites()` + block if you want it on top of everything)\r\n* Additional images for your + Sprites\r\n* Subtle animation in the background\r\n* Sound effects (can you + figure out how to do this?)\r\n* More ways for a user to interact with your + card" + CSD U3 Interactive Card Other Conditionals_markdown_instruction: "# Other Conditionals\r\nThe + _surprise_ in your card comes from conditionals that don't directly respond + to user input, but to some other element of your card. This could be triggered + by a variable that gets updated as the user interacts with your card, or a + Sprite moving into a certain part of the screen.\r\n\r\n# Do This\r\nFor each + of the remaining items on your interactions table:\r\n\r\n* Add an `if` block + (or `if-else` block if you need a fallback action) inside the `draw()` loop\r\n* + Add the appropriate boolean comparison block to the condition (eg. `<`, `>`, + or `==`)\r\n* Add the necessary actions inside the `if` block\r\n\r\n**Challenge:** + Can you create more sophisticated conditionals by nesting them or using compound + booleans?" + CSD U3 Interactive Card Sprites_markdown_instruction: "# Adding Sprites\r\nNow + that you have the more static elements of your card layed out, it's time + to add the Sprites. Your Sprites should provide the primary animations and + interactions for your card - so feel free to get creative here and have fun.\r\n\r\n# + Do This\r\nCheck out the Sprites table on the back of your planning sheet. + For each Sprite in your table:\r\n\r\n* Initialize the Sprite at the top of + your program with `createSprite()`.\r\n* Find or create the image(s) for the + Sprite and set it with `setAnimation()`.\r\n* Inside the `draw()` loop update + any Sprite properties that we will be constantly animating (we'll deal with + conditionals in a minute)." + CSD U3 Interactive Card User Input_markdown_instruction: "# User Input\r\nYou've + got a background, you've got Sprites, now it's time to give your user something + to do!\r\n\r\n# Do This\r\nOn the interactions table from your planning sheet, + find all of the interactions that rely on user input (key presses and mouse + movements). For each of those interactions:\r\n\r\n* Add an `if` block (or + `if-else` block if you need a fallback action) inside the `draw()` loop.\r\n* + Add the appropriate input block for your condition (such as `keyDown()` or + `mouseDown()`).\r\n* Add the necessary actions inside the `if` block.\r\n\r\n**Challenge:** + Can you create more sophisticated conditionals by nesting them or using compound + booleans?" + CSD U3 Keypress Boolean Predict_markdown_instruction: "# Make a Prediction: + keyDown()\r\nThe `keyDown()` block is the first of a new set of blocks that + will let us get input from the user. This is the first step on our road to + actually making games! See if you can figure out how the `keyDown()` block + works.\r\n\r\nWhat do you think will happen when you run the program and press + the \"up\" arrow? Write your prediction below and then run the program to + see if your prediction was accurate." + CSD U3 Keypress Boolean_markdown_instruction: "# keyDown()\r\nThe `keyDown()` + block is the first of a new set of blocks that will let us get input from + the user. This is the first step on our road to actually making games! See + if you can figure out how the `keyDown()` block works.\r\n\r\n# Do This\r\n\r\nYou + will **not write any code** in this program.\r\n\r\n* Read the program and + see if you can guess what will happen.\r\n* Run the program.\r\n* While the + program is running, press the up arrow on your keyboard.\r\n* Observe what + happens." + CSD U3 Keypress Watchers Predict_markdown_instruction: "# Make a Prediction: + User Input\r\n\r\nSo far you've used `keyDown` as a way to let users control + your programs, but that's just one of many ways to take input. In fact, just + one of many ways _to detect keypresses_! Depending on how you want to react + to a keypress, there are a few other blocks you might want to use.\r\n\r\nRead + the program and predict below what will happen when you press each of the + up, down, left, and right arrows.\r\n\r\nAfter making your prediction, run + the code and write down or share with your neighbor your observations.\r\n\r\n* + What seems to be the difference between `keyDown()`, `keyWentDown()`, and + `keyWentUp()`?\r\n* What do you think the exclamation mark (`!`) on line 10 + does?\r\n* How might you use the different keypress blocks in a game?" + CSD U3 Keypress Watchers_markdown_instruction: "# More Ways to Get User Input\r\n\r\nSo + far you've used `keyDown` as a way to let users control your programs, but + that's just one of many ways to take input. In fact, just one of many ways + _to detect keypresses_! Depending on how you want to react to a keypress, + there are a few other blocks you might want to use.\r\n\r\n# Do This\r\n\r\nYou + will **not write any code** in this program.\r\n\r\n* Read the program and + see if you can guess what will happen.\r\n* While the program is running, + press the arrow keys and observe how the screen responds.\r\n* Write down + or share with your neighbor your observations.\r\n\t* What seems to be the + difference between `keyDown()`, `keyWentDown()`, and `keyWentUp()`?\r\n * + What do you think the exclamation mark (`!`) on line 10 does?\r\n * How + might you use the different keypress blocks in a game?" + CSD U3 Property Conditional Multi_markdown_instruction: "# Get Creative\r\n\r\nNow + that you've seen how we can use conditionals both to take input from the + keyboard and to react to changes is sprite properties, it's time to come + up with a cool use of conditionals on your own. You'll want to brainstorm + with a partner to come up with the sprite properties you want to change, and + the conditions that will decide when they get changed.\r\n\r\n# Do This\r\n- + Decide which sprite properties will be controlled by conditionals eg:\r\n\t- + Position (x and y)\r\n - Rotation\r\n - Color\r\n - Size (width, + height, or scale)\r\n - etc\r\n- For each sprite property, decide on a + conditional that will impact it:\r\n\t- Keyboard input (`keyDown()`, `keyWentDown()`, + etc)\r\n - Sprite position\r\n - Mouse position\r\n - Other variables + or properties\r\n- One at a time, write and test each conditional\r\n\r\n**Challenge** + - Can you make a single conditional impact multiple properties?\r\n" + CSD U3 Property Conditional_markdown_instruction: "# Doing More With Conditionals\r\nUsing + conditionals to figure out which key was pressed is pretty useful, but we + can also use conditionals with any value in our program, including sprite + properties!\r\n\r\nWith your neighbor, discuss the kinds of boolean questions + you could use with the following sprite properties:\r\n\r\n- `sprite.x` and + `sprite.y`\r\n- `sprite.width` and `sprite.height`\r\n- `sprite.shapeColor`\r\n- + `sprite.visibility`\r\n\r\n# Do This\r\nHere's a program similar to one you + just made, it uses `keyDown()` to move the sprite around the screen when you + click the arrow keys. You're going to add some additional conditionals to + this program to do the following:\r\n\r\n- Change the color of the sprite + if it goes into the top quarter of the screen\r\n- Rotate the sprite if it + goes into the left quarter of the screen\r\n- Make the sprite invisible if + it goes into the bottom quarter of the screen\r\n- Make the sprite larger + if it goes into the right quarter of the screen\r\n\r\n_BTW, if you're looking + for the `keyDown()` block, you'll notice that it's now in the 'Game Lab' + category._ \r\n" + CSD U3 Random Animation_markdown_instruction: "<img src=\"https://images.code.org/f249b981ead9d196b0f136c402dd0c41-image-1478803334302.gif\" + style=\"float:right; width:200px\"/>\r\n# Animation\r\n\r\nLook at this face + made from some simple shapes. We put it in the `draw()` loop so that we could + animate it, but it doesn't seem to be doing anything. We want the mouth to + move like the image on the right, so that it looks like it's talking\r\n\r\n# + Do This\r\n* Find the code that draws the mouth and replace the width and + height with calls to `randomNumber()`\r\n* Experiment with different ranges + of random numbers to get the kind of animation you're looking for.\r\n\r\nHint: + Don't worry if it's going too fast. You'll slow it down on the next level." + CSD U3 Random Choice_markdown_instruction: "# Making Random Choices\r\n\r\nYou + probably noticed that the code from the last puzzle did a few things.\r\n* + Always produced a whole number (also called an **integer**).\r\n* The lowest + number that could be produced was 0, which is the first **input** we passed + to the `randomNumber` block.\r\n* The highest number that could be produced + was 10, which is the second **input** to the block.\r\n\r\nLet's create a + program that can randomly make decisions for us. We'll use a **binary** representation + where `0` means `false` and `1` means `true`.\r\n\r\n# Do This\r\n\r\n* Write + a program that randomly writes out either 0 or 1 using `console.log()`.\r\n* + Have your partner ask some true/false or yes/no questions and use your program + to randomly answer." + CSD U3 Random Color_markdown_instruction: "# Randomized Colors\r\n\r\nCould + you use `randomNumber()` to pick random colors as well? Back in unit 2 you + learned that colors can be composed of Red, Green, and Blue channel values + - each of which is represented by a number value. What's the maximum and + minimum that those channels can be set to?\r\n\r\n# Do This\r\n\r\nUsing the + `color()` function, set the `fill` or `stroke` of your shape to a random color.\r\n\r\n# + Challenge\r\n\r\nCan you generate random colors that are limited to a narrow + range of colors, such as a random shade or purple, or a random shade of teal?" + CSD U3 Random FreeResponse_markdown_instruction: "# Randomness\r\n\r\nSometimes + you will want your programs to run a bit differently every time, and a simple + way to do this is to generate **random numbers**. The `randomNumber()` block + allows you to write programs with a little bit of randomization in them, which + is also helpful when you you want images that look more natural - for example + drawing a lots of stars in the sky in random positions, instead of selecting + the x and y for each star.\r\n\r\n# console.log() \r\nThe `console.log()` + block is a useful tool for testing and debugging - anything that you place + into `console.log()` block's input will be printed to the debug console, + which you can find below your code.\r\n\r\n# Do This\r\n\r\nYou will **not + write any code** in this level.\r\n\r\n* Read the program provided\r\n* **Predict** + what the provided program will do and write your prediction in the box below. + **Be specific!**\r\n* Run the program several times and **record** the results.\r\n* + **Discuss the results with a neighbor**. Was your prediction correct?" + CSD U3 Random Intro_markdown_instruction: "# Randomness\r\n\r\nSometimes you + will want your programs to run a bit differently every time, and a simple + way to do this is to generate **random numbers**. The `randomNumber()` block + allows you to write programs with a little bit of randomization in them, which + is also helpful when you you want images that look more natural - for example + drawing a lots of stars in the sky in random positions, instead of selecting + the x and y for each star.\r\n\r\n# console.log() \r\nThe `console.log()` + block is a useful tool for testing and debugging - anything that you place + into `console.log()` block's input will be printed to the debug console, + which you can find below your code.\r\n\r\n# Do This\r\n\r\nYou will **not + write any code** in this level.\r\n\r\n* Read the program provided\r\n* **Predict** + what the provided program will do. **Be specific!**\r\n* Run the program several + times and **record** the results.\r\n* **Discuss the results with a neighbor**. + Was your prediction correct?" + CSD U3 Random Min Max_markdown_instruction: "# Changing the minimum\r\n\r\nSo + far we've only generated numbers from 0 up to some other value, but what + if we wanted a different minimum? For example, if we want to use `randomNumber()` + to create circles that have a radius somewhere between 50 and 100 pixels, + how might we do it?\r\n\r\nThe first input (also called an **argument**) of + the `randomNumber()` block defines the lowest number that will be randomly + generated. In the previous levels we always used 0, but you could use any + integer as the lower bound (even negative numbers!)\r\n\r\n# Do This\r\n\r\nUsing + `console.log()` write a program that randomly returns a number in a range + you define. Try coming up with an interesting range of numbers for your program, + for example:\r\n* Randomly generate a month number\r\n* Randomly generate + a temperature below boiling but above freezing\r\n* Randomly generate a year + you were alive in\r\n\r\nCan you come up with a range that includes negative + numbers? What about both positive and negative ones?" + CSD U3 Random Width Height_markdown_instruction: "# Randomized Shapes\r\n\r\nLet's + see how we can use randomization in our drawings. Each of the inputs from + the shape blocks you've seen can be replaced with calls to `randomNumber()`. + Try drawing some images that are slightly randomized each time. You might + try changing the position randomly by using `randomNumber()` in place of the + x or y inputs, or you could change the size of the shape itself by randomizing + the length or width inputs.\r\n\r\n# Do This\r\n\r\nPick a shape command (`ellipse()`, + `rect()` or `regularPolygon()`) and use `randomNumber()` in place of one or + more of the inputs. Make sure you run it a few times so you can see the effect + of randomization.\r\n\r\n_Notice that the `console.log()` block is now in + the Variables drawer and the `randomNumber()` block is in the Math drawer._" + CSD U3 Simple Drawing - Animation 2_markdown_instruction: "# Rays of Sunshine\r\n\r\nLet's + add a little bit more animation to the scene. The `line()` block takes in + two pairs of x,y coordinates and draws a line between them.\r\n\r\nDraw 5 + yellow lines that all start from the center of the sun and move out to a random + point around the top half.\r\n\r\n# Do This\r\n\r\n* Create 5 lines, each + of which should start at the center of the sun and go out to a random point. + You can pick your own random ranges, but you might try:\r\n * `randomNumber(115,135), + randomNumber(10,20)`\r\n * `randomNumber(145,165), randomNumber(20,30)`\r\n * + `randomNumber(85, 105), randomNumber(20,30)`\r\n * `randomNumber(165,185), + randomNumber(40,50)`\r\n * `randomNumber(65, 85 ), randomNumber(40,50)`\r\n* + Don't forget to set the `strokeColor()` before you draw your lines and to + reset to `noStroke()` afterwards." + CSD U3 Simple Drawing - Animation_markdown_instruction: "# Clouds in the Wind\r\n\r\nNow + that our image is in the draw loop, let's make use of that feature to add + a little bit of animation. We're going to make our clouds look as though + they're shifting in the breeze by randomizing their position and size a little + bit each time the `draw()` loop is run.\r\n\r\n# Do This\r\n\r\n* Replace + the x input of each cloud ellipse with a call to `randomNumber`\r\n * `randomNumber` + should vary the x position by + or - 5 pixels. So if your x position was 50, + replace it with `randomNumber(45,55)`\r\n* Replace the width input of each + cloud ellipse with a call to `randomNumber`\r\n * `randomNumber` should vary + the width by + 5 pixels. So if your width was 50, replace it with `randomNumber(50,55)`\r\n* + Change the **frame rate** to something slower (try 5 or 10 FPS)" + CSD U3 Simple Drawing - Background_markdown_instruction: "# Draw()ing your + street image\r\n\r\nHere's the street image you started working on in the + last lesson. We're going to get it ready to add some animation.\r\n\r\nFor + the animation to work you'll need to wrap all of your current code in the + `draw()` loop, adding a call to `background()` at the top of the loop.\r\n\r\n# + Do This\r\n\r\n* Add a `draw()` block and move all of your current code inside + it\r\n* Replace the rectangle that draws your background with a call to the + `background()` block" + CSD U3 Simple Drawing - Personal Animation_markdown_instruction: "# Your Own + Animation\r\n\r\nHere's the drawing you planned and started in the last lesson + - let's animate it!\r\n\r\n# Do This\r\n\r\n* Move all of your code into + a `draw()` loop\r\n* Use `randomNumber()` in the inputs of some of your shapes\r\n* + Set the speed of your animation using the `Game.frameRate` block\r\n" + CSD U3 Sprites Template race_markdown_instruction: "# Putting it All Together\r\n\r\nLet's + put all of this together in a fun way. We're going to make three sprites + \"race\" across the screen by combining the counter pattern, random numbers, + and sprite properties.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nTo begin with make three + different sprites and put them in a row on the left side of your screen.\r\n\r\n* + **Create three sprites** and give them labels\r\n* **Add code to the \"Drawing\" + section of the draw loop that draws the background and your sprites**\r\n* + Your animation should look like the example at the right.\r\n\r\n" + CSD U3 Sprites animating with sprites_markdown_instruction: "# Animating with + Sprites\r\n\r\n**Sprite properties can be used in the counter pattern too**.\r\n\r\n\t// + Counter Pattern with variables\r\n x = x + 1;\r\n \r\n // Counter + Pattern with sprite properties\r\n mySprite.x = mySprite.x + 1\r\n\r\nIf + you call ![](https://images.code.org/16810be94cc61ea828e0acce5b642468-image-1466009389700.19.16 + AM.png) inside the draw loop then you can use this counter pattern to animate + sprites as well.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/a34d5c36c98c2d61ce341be59cbcf315-image-1466534169200.gif\" + style=\"float:right; width:200px\">\r\n\r\n\r\nThis program creates 2 sprites + and then animates one of them to move across the screen using the counter + pattern.\r\n\r\n* Inside the draw loop **add code that uses the counter pattern + to make the orange sprite move across the screen**.\r\n* Hint: How can you + use the counter pattern here? Look at the code for the redSprite if you need + help.\r\n* Your animation should look like the example at the right." + CSD U3 Sprites createSprite params_markdown_instruction: "# createSprite() + with parameters\r\n\r\nWhen you create a variable you often want to set its + value right away. That's why the command `var x =` exists, to let you perform + both commands at once.\r\n\r\nIt's very common to want to set the x and y + of your sprite in a single command. To help, the createSprite command accepts + 2 parameters or values that set these properties right away. Instead of writing + \r\n\r\n \tvar mySprite = createSprite();\r\n \tmySprite.x = 100;\r\n \tmySprite.y + = 200; \r\n\r\nyou can just write the command\r\n\r\n\tvar mySprite = createSprite(100, + 200);\r\n\r\nThis code does exactly the same thing, but it's much easier + to write. \r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis is your code from + earlier. Note that a new, larger version of `createSprite` is now available.\r\n\r\n<img + src=\"https://images.code.org/4a2e6bf1ffbd9782ce637b3e997004e3-image-1468337207497.25.20 + AM.png\" style=\" width:350px\">\r\n\r\n* Update your code to use this new + version of `createSprite`\r\n* Your program should only be **9 total lines**\r\n* + You're still trying to make your image look as close as possible to the image + at the right." + CSD U3 Sprites debug background_markdown_instruction: "# Debug: Ordering in + the Draw Loop\r\n\r\nAs you start animating with sprites you'll have more + complex code in your draw loop. It's important to stay organized if you don't + want your code to be confusing.\r\n\r\nHere's the way you should structure + your draw loop when animating with sprites:\r\n\r\n\tfunction draw(){\r\n \t// + Draw Background\r\n \r\n \t// Update Sprite Properties\r\n \r\n // + Draw Animations\r\n \r\n }\r\n \r\nThis strategy will work for most + cases but not all.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/df08c0bb7290e9d255f1cc51be35954d-image-1472665837101.gif\" + style=\"float:right; width:200px\">\r\n\r\nThis program is supposed to animate + a sprite moving across the screen, but **there's a problem that's preventing + it from running properly**.\r\n\r\n* **Run the program** to see how it works.\r\n* + **Debug the program** to find the error that prevents it from working properly.\r\n* + Your animation should look like the example at the right.\r\n* Hint: Order + matters a lot when drawing.\r\n" + CSD U3 Sprites debug dot notation_markdown_instruction: "# Debugging: Dot Notation\r\n\r\n**Dot + Notation:** Sprites all have the same properties, which is really useful. + It means that once you know the label of a sprite, you know the labels of + its properties. All you need to do is combine the name of your sprite and + the name of your property with a period or \"dot\" in between. This is also + referred to as **dot notation**. For example, a sprite called `bob` will have + the properties `bob.x`, `bob.y`, and so on.\r\n\r\nWhen using dot notation + it's important that **you spell the label of your sprite and your property + correctly.** Just like with variables, keep an eye out for:\r\n\r\nRule | + Example\r\n---|---\r\nCorrect capitalization|`sprite.x` is not `sprite.X`\r\nCorrect + spelling|`sprite.y` is not `sprte.y`\r\nWhether the label you're trying to + use actually exists|`sprite.xlocation` does not exist\r\nThe sprite's label + comes before the property's label|`x.sprite` will not work\r\n\r\n# Do This\r\n\r\n<img + src=\"https://images.code.org/5c6019e343bc58650c45f66c3e3c9bc5-image-1466089712070.08.20 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program tries to + use dot notation to change the properties of two sprites. Unfortunately, errors + are preventing the program from running correctly.\r\n\r\n* **Use dot notation + correctly** to fix the errors in this program\r\n* When your program works + correctly, it should draw the image to the right" + CSD U3 Sprites debug watchers_markdown_instruction: "# Debug: Watchers\r\n\r\nYou + can place watchers on a sprite property just like you would a regular variable.\r\n\r\n![](https://images.code.org/291b83de4b7d540017df382944474c16-image-1466017776084.09.27 + PM.png)\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/1a1a724338e983c2124b0e97d43469a2-image-1466024475859.gif\" + style=\"float:right; width:200px\">\r\n\r\nThis program is supposed to animate + a sprite moving across the screen but **there's a problem that's preventing + it from running properly**.\r\n\r\n* **Run the program** to see how it works.\r\n* + **Add a watcher** if you like to help you check individual properties.\r\n* + **Debug the program** to find the error that prevents it from working properly.\r\n* + Your animation should look like the example at the right.\r\n* Hint: Read + the code carefully. Is there a logical error?" + CSD U3 Sprites intro sprites_markdown_instruction: "# Sprites\r\n\r\n**Sprites** + make it easier to keep track of all of those values that you've been using + separate variables for. You are going to start creating animations with **sprites**. + A sprite is like a character in your animations, and each sprite keeps track + of its own x and y coordinates (and lots of other values too). Your program + will control how your sprites move and appear on the screen.\r\n\r\n**Creating + Sprites:** The <img src = \"https://images.code.org/92e06cddc5355dc37aa2c6a033793dd0-image-1466027030772.43.41 + PM.png\" style = \"height:30px\"> block creates a new sprite and gives it + any label you like. This label is how you'll refer to your sprite in your + code.\r\n\r\n**Drawing Sprites:** Sprites only appear on the screen when you + draw them there. Whenever you call the ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 + AM.png) command, all the sprites you've created will be drawn on the screen.\r\n\r\n# + Do This\r\n\r\nThis program includes comments that let you know where to place + code but otherwise is blank\r\n\r\n* Beneath the \"Creating Sprites\" comment + drag in a <img src = \"https://images.code.org/92e06cddc5355dc37aa2c6a033793dd0-image-1466027030772.43.41 + PM.png\" style = \"height:30px\"> block and give your new sprite any label + you like.\r\n* Beneath the \"Drawing\" comment drag in a ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 + AM.png) command\r\n* **Run the code** to draw your first sprite on the screen." + CSD U3 Sprites make template_markdown_instruction: "# Make Your Own Sprite\r\n\r\nYou + now know how to create a sprite, set its properties with dot notation, and + draw sprites using `drawSprites`. It's time to put all these pieces together + on your own.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program creates a + red sprite in the bottom right hand corner of the screen.\r\n\r\n* **Write + code** that creates a new separate sprite in the top left corner of the screen.\r\n* + Be careful with your dot notation, and use the code for the first sprite as + a guide.\r\n* Try to make your image look as close as possible to the image + at the right." + CSD U3 Sprites make your own sprite_markdown_instruction: "# Make Your Own + Sprite\r\n\r\nYou now know how to create a sprite, set its properties with + dot notation, and draw sprites using `drawSprites`. It's time to put all + these pieces together on your own.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program creates a + red sprite in the bottom right hand corner of the screen.\r\n\r\n* **Write + code** that creates a new separate sprite in the top left corner of the screen.\r\n* + Be careful with your dot notation, and use the code for the first sprite as + a guide.\r\n* Try to make your image look as close as possible to the image + at the right." + CSD U3 Sprites motivation_markdown_instruction: "# How Many Counter Variables?\r\n\r\nYou + can use counter variables (`x = x + 1` , `x = x - 1` , `x = x + 0.5`, etc.) + to animate a scene. What happens when scenes start to get larger and more + complicated? \r\n\r\nWatch this animation. With a partner: \r\n\r\n* Decide + how many counter variables you would need to create this scene\r\n* Decide + what you would name your counter variables\r\n* **Draw a Labels-Values-Connectors** + diagram of your variables at the first frame of this scene. Don't worry about + getting the values exactly correct.\r\n* Share your answer with another group + **and be ready to share your ideas with the class**" + CSD U3 Sprites race create sprites_markdown_instruction: "# Putting it All + Together\r\n\r\nLet's put all of this together in a fun way. You're going + to make three sprites \"race\" across the screen by combining the counter + pattern, random numbers, and sprite properties.\r\n\r\n# Do This\r\n\r\n<img + src=\"https://images.code.org/1ee52eac731176211c286023c87c166a-image-1466021038288.03.29 + PM.png\" style=\"float:right; width:200px\">\r\n\r\nTo begin with, make three + different sprites and put them in a row on the left side of your screen.\r\n\r\n* + **Create three sprites** and give them labels.\r\n* **Add code to the \"Draw + Background\" section of the draw loop that draws the background**.\r\n* **Add + code to the \"Draw Animations\" section of the draw loop that draws your sprites**.\r\n* + Your picture should look like the example at the right." + CSD U3 Sprites race finish_markdown_instruction: "# Make It Your Own\r\n\r\nKeep + adding to this project and make it your own. Do you want to add a finish line? + Do you want to make one racer a little bit faster than the others? Maybe you + could add some text and give your race a name. There's a ton of ways you + can make this animation a lot more interesting and exciting!\r\n\r\n<img src + = \"https://images.code.org/387aec833f243632735c97b56ae6e64e-image-1466022313176.gif\" + style=\"float:right; width:200px\">\r\n# Do This\r\n\r\n* **Keep adding your + own touches to your race** using what you already know about drawing, sprites, + and animation." + CSD U3 Sprites race movement_markdown_instruction: "# Get Those Sprites Moving!\r\n\r\nNow + that you have three sprites on the screen, it's time to make them \"race\" + across the screen. For now, the race will just be a tie, so focus mainly on + **making sure your code is organized** and that **you use sprite properties + with the counter pattern correctly**.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/a935615480098eb0a8e7723d87b2308c-image-1466021329937.gif\" + style=\"float:right; width:200px\">\r\n\r\n* **Add code to the \"Update Properties\" + section** that makes the sprites move across the screen together.\r\n* Your + animation should look like the example at the right." + CSD U3 Sprites race random_markdown_instruction: "# Random Movement\r\n\r\nRight + now your race isn't very interesting. Let's make one small change to make + it a lot more exciting. Instead of your sprites moving the same amount forward + every frame, **they will now move a random amount**. This will make use of + what we'll call the **random counter pattern**. Here's what the code might + look like.\r\n\r\n\t// Random Counter Pattern\r\n mySprite.x = mySprite.x + + randomNumber(0,2);\r\n \r\nInstead of adding the same amount every time + it will move forward by some random amount between 0 and 2.\r\n\r\n# Do This\r\n\r\n<img + src=\"https://images.code.org/accadb669e88a7c2aff8a29b6305da55-image-1466021491106.gif\" + style=\"float:right; width:200px\">\r\n\r\n* **Use the random counter pattern** + to make your sprites move forward by a random amount in each frame.\r\n* **Run + the program** to make sure your sprites now move a random amount. Is your + race predictable anymore?\r\n* Your animation should look similar to the example + at the right." + CSD U3 Sprites setting properties_markdown_instruction: "# Properties\r\n\r\n<img + src=\"https://images.code.org/9567c9df55163104ff91df0920457ad3-image-1466047307713.21.28 + PM.png\" style=\"float:right\">\r\n\r\n**Properties:** When you create a sprite + it will automatically be given many special variables called properties. Properties + keep track of information about the sprite, which is used when you draw it + on the screen. For example, these two properties keep track of a sprite's + x and y position on the screen.\r\n\r\n**Changing Properties:** Properties + are just variables, so you can change their values using `=` just like any + other variable. Here's an example of how you might change the `x` property + of a sprite called `myFavoriteSprite`.\r\n\r\n![](https://images.code.org/6976d707cba95e92369831729cdb7435-image-1466085767357.02.35 + AM.png)\r\n\r\n<img src=\"https://images.code.org/2743e55cef5da23bf61db1556c88f174-image-1466049906667.04.41 + PM.png\" style=\"float:right;width:150px\">\r\n\r\n# Do This\r\n\r\nThis program + creates a new sprite, gives it a label, and then sets its `x` and `y` properties.\r\n\r\n* + **Read the code**. Notice that the label given to the sprite is used in the + sprite's property.\r\n* **Change the values given to the `x` and `y` properties** + to move the sprite to the bottom right corner of the screen." + CSD U3 Sprites shapeColor_markdown_instruction: "# shapeColor\r\n\r\n**shapeColor:** + Another useful property is ![](https://images.code.org/538b61640803ec3b333d7cb2d9a162f5-image-1466050497196.14.46 + PM.png) which can be used to change the color of the sprite. It can be assigned + values in different ways. For example, you could use the name of a color\r\n\r\n<img + src=\"https://images.code.org/e5ffaee2a40c1690958b5c35a1d74719-image-1466086033266.06.45 + AM.png\" style=\"height:30px\">\r\n\r\nor you can use the rgb block\r\n\r\n<img + src=\"https://images.code.org/670af2867af02830979ff95356ba87d6-image-1488480027884.39.53 + PM.png\" style=\"height:30px\">\r\n\r\nTo make it easier to program with blocks, + **when you drag a sprite property onto its own line it will automatically + be placed inside an \"=\" block.**\r\n\r\n<img src=\"https://images.code.org/9790f3285269e9cf909fb820679a472e-image-1466091972429.46.00 + AM.png\" style=\"float:right;width:150px\">\r\n\r\n# Do This\r\n\r\nThis program + creates two sprites and places them on the screen. Currently they are still + gray.\r\n\r\n* Beneath the \"Setting Properties\" comment add code to **set + the shapeColor of these two sprites**\r\n\t* Make sure you use dot notation + correctly. Use the code already written as a guide.\r\n * Try assigning + one sprite a **named color** and another sprite a color using the **rgb block**.\r\n* + Your finished work should look something like the image to the right." + CSD U3 Sprites sprites vs rects_markdown_instruction: "# Sprites vs. Rectangles\r\n\r\nSprites + may seem a lot like fancy rectangles right now. In time you'll see that sprites + are **much more powerful**. But for now, there's one key difference you need + to know about.\r\n\r\nSprites have an `x` and a `y` location just like a rectangle. + The key difference is that **a sprite's `x` and `y` are in the middle of + the sprite, not the top left corner**. \r\n\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/b1b38266c674e43687148a1ec4fd8e82-image-1466007512332.17.59 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program creates a + red sprite and a green rectangle that are the same size and have the same + `x` and `y`. **The sprite does not cover the rectangle since its `x` and `y` + are at its center**.\r\n\r\n* Change the `x` and `y` properties of the sprite + so that it entirely covers the green rectangle.\r\n* When your program works + correctly, it should draw the image to the right." + CSD U3 Sprites width and height_markdown_instruction: "# Setting Properties\r\n\r\nYou + are going to start programming with **sprites**. A sprite is made up of many + pieces of information called **properties**. The ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 + AM.png) command can be called whenever you like. It uses the properties of + your sprites to draw them all at once.\r\n\r\nSprites have **lots and lots + of properties** but to get started let's just look at three.\r\n\r\n![](https://images.code.org/4d0f35bc60aa9d1c80e6dda4db16abc4-image-1466004005360.19.30 + AM.png)\r\n\r\n<img src=\"https://images.code.org/cb14a5f6add86bf3c0bcf12901366794-image-1466004148640.22.16 + AM.png\" style=\"float:right; width:200px\">\r\n# Do This\r\n\r\nThis program + creates a sprite and gives it the label `mySprite`. Then it sets the properties + `shapeColor`, `x`, and `y` of the sprite. When `drawSprites` is called, this + information is used to draw the sprite in the correct location and color.\r\n\r\n* + **Change the values given to each property** so that:\r\n\t* The sprite is + now in the bottom right corner of the screen\r\n * The sprite is \"orange\" + rather than \"red\"" + CSD U3 Sprites width height_markdown_instruction: "# Width and Height\r\n\r\nWhen + you create a sprite, it is automatically set up with all its properties having + default values. If you know the names of these properties, you can use dot + notation to change them. This will change the way your sprite looks when you + draw it.\r\n\r\nHere are two new properties:\r\n\r\n![](https://images.code.org/158421dbb4f9640ee852d994d2b4a7d6-image-1466006293357.40.26 + AM.png)\r\n\r\nBy default each sprite starts with a width and height of 100.\r\n\r\n# + Do This\r\n\r\nThis program creates a sprite and sets its `x`, `y`, and `shapeColor` + properties.\r\n\r\n* Use the new `width` and `height` properties to make the + sprite fill up most of the screen.\r\n* Make sure you're using dot notation + correctly.\r\n* **Note:** If you drag the property block onto a new line it + will change to include the `=` command automatically.\r\n\r\n![](https://images.code.org/77d0a16f19a2a7b2c2f1f6b88cda17b3-image-1466006474149.41.53 + AM.png)" + CSD U3 UP_ARROW_markdown_instruction: "# Moving Sprites\r\n\r\nYou saw on the + last level that `keyDown` returns `true` while you are holding a key down + and `false` when the key is not pressed down.\r\n\r\nWe can use `keyDown` + as an input to an `if` statement to change our animations based on key presses!\r\n\r\nThe + input for the `keyDown` command is the name of key you want to check in quotes. + Some examples are \"x\", \"up\" and \"space\".\r\n\r\n# Do This\r\nYou have + been provided with the start of a bug sprite. You need to pick the bug picture + you want to use from the animation tab.\r\n\r\n* Set the animation of the + sprite to your favorite bug.\r\n* Add an `if` statement inside your draw loop\r\n* + Add a call to `keyDown` as the input to the `if` statement to check if the + **up** arrow was pressed\r\n* Add code inside the conditional to move the + sprite up if the up arrow is down.\r\n\r\n_Do you need to change sprite's + x or y property to move it up?_" + CSD U3 Variable Arithmetic pt2_markdown_instruction: "# Variable Arithmetic + Pt2\r\n\r\nAs we saw in the last level, **you can add, subtract, multiply, + or divide** your variable **without changing its value**. The only time a + variable's value will change is when you use the `=` or **gets** command.\r\n\r\nTry + another example highlighting another common misconception.\r\n\r\n# Do This\r\n\r\n* + Read the program provided\r\n* **Predict:** What two numbers will get displayed? + Why? **Explain your reasoning to a neighbor**.\r\n* Run the program. Were + you surpised by what happened? **Compare notes with a neighbor**." + CSD U3 Variable Arithmetic_markdown_instruction: "# Variable Arithmetic\r\n\r\nYou + can use the values stored in a variable to perform **addition, subtraction, + multiplication, and division**. Let's have a look at some common misconceptions.\r\n\r\n# + Do This\r\n\r\n* Read the program provided\r\n* **Predict:** what will displayed + when you run the program? Why? **Explain your reasoning to a neighbor**.\r\n* + Run the program. Were you surpised by what happened? **Compare notes with + a neighbor**." + CSD U3 Variable Incrementation pt2_markdown_instruction: "# Variable Reassignment\r\n\r\nThis + example is starting to get a little more complex. Work through it with a partner. + Why do you get the output you do?\r\n\r\n# Do This\r\n\r\n* Read the program + provided\r\n* **Predict:** What two numbers will get displayed? Why? **Explain + your reasoning to a neighbor**.\r\n* Run the program. Were you surpised by + what happened? **Compare notes with a neighbor**." + CSD U3 Variable Incrementation_markdown_instruction: "# Variable Incrementation\r\n\r\nTo + **increment** something means to add something to a value. In programming + if you want to increase or increment the value in a variable you need to use + the **gets** command to store the new value.\r\n\r\nAs you work through this + example try to discuss with your partner, **What's the difference between + the left side and the right side of the `=` command?**\r\n\r\n# Do This\r\n\r\n* + Read the program provided\r\n* **Predict:** What two numbers will get displayed? + Why? **Explain your reasoning to a neighbor**.\r\n* Run the program. Were + you surpised by what happened? **Compare notes with a neighbor**." + CSD U3 Variables CHALLENGE gamelab gary_markdown_instruction: "# Challenge: + Variables and Game Lab Gary\r\n\r\n* You've been provided code that draws + a simple version of Game Lab Gary\r\n* **Use variables to animate Gary**. + How can you extend them?\r\n* [[Question that leads towards incrementation]]" + CSD U3 Variables Initialize_markdown_instruction: "# Using a Variable's Value\r\n\r\nThis + program creates a variable called `size`. You will need to **assign it a value**. + It will then be used to set the size of a square on the screen.\r\n\r\n# Do + This\r\n\r\n* **Assign the variable `size` a value** and run the program to + see how its value is used\r\n* **Change the value** and rerun the program + to see how it affects the output of your program." + CSD U3 Variables Intro_markdown_instruction: "# Your first variable\r\n\r\nThe + `var` command **creates a new variable**. You only need to use it once with + each variable you create.\r\n\r\n# Do This\r\n\r\n* Create a new variable + with a **name of your choosing**, as shown in the starter code." + CSD U3 Variables Random_markdown_instruction: "# Variables random values\r\n\r\nYou + can use a variable to store a **randomly generated number**.\r\n\r\n# Do This\r\n\r\n* + In the starter code a variable is **initialized with a random number** and + then **displayed twice**\r\n* **Predict:** Will the value displayed change + between the two `console.log` statements?\r\n* Run the program. Was your prediction + correct? Were you surprised?\r\n* **Compare notes with a neighbor**" + CSD U3 Variables Reassign Predict_markdown_instruction: "# Make a Prediction\n\nThis + program **creates a variable** and then sets its value twice in a row. **What + value will be displayed when the console.log() statement runs?**\n\n![](https://images.code.org/0375d4215c5cc4b937c9333390deb81c-image-1460404063955.47.09 + PM.png)\n\n**Once you've submitted your answer be prepared to discuss your + reasoning with your classmates.**\n" + CSD U3 Variables Reassign pt2_markdown_instruction: "# Creating and assigning + in one line\r\n\r\nYou can use `var` and `=` in a single line to **assign + a value to a variable as soon as it is created**, for example: `var size = + 10;`\r\n\r\n# Do This\r\n\r\n* **Create a new variable and assign it a value** + in a single line." + CSD U3 Variables Reassign_markdown_instruction: "# Assiging a Variable\r\n\r\nVariables + **store a single piece of information that can change throughout your program**. + The `=` command gives a variable a new value.\r\n\r\nYou read the command + `size = 10;` as \"size gets the value 10\". You can also say \"size gets 10\".\r\n\r\n# + Do This\r\n\r\n**Use the `=` command** to assign a value to the variable `numberOfDogs`" + CSD U3 Variables Square Random Loop_markdown_instruction: "# Random Values + and the Draw Loop\r\n\r\nIn the last level you should have **made a prediction** + about the difference between two programs. They are both available here, with + the second one commented out.\r\n\r\n# Do This\r\n\r\n* Run the first program\r\n* + **Comment out** the first program and **uncomment** the second program\r\n* + Run the second program\r\n* **Compare what you observed to your prediction. + Discuss the results with a neighbor**" + CSD U3 Variables Square Random_markdown_instruction: "# Variables and Random + Drawing\r\n\r\nVariables can be used to **store a randomly generated value** + that you want to use many times in your program.\r\n\r\n# Do This\r\n\r\n* + Assign size a **random number between 1 and 200**.\r\n* **Run the program + multiple times**\r\n* **Discuss with a neighbor:** Can you explain why the + program always drawing a square?" + CSD U3 Variables Square_markdown_instruction: "# Variables and Drawing\r\n\r\nVariables + allow you to **use the same value multiple times in your program**. If a value + will always be used many times in a program it is really useful to place that + value in a variabnle. This lets you **quickly change the same value at many + places in your program**. It also can make move obvious **how that value is + used**.\r\n\r\n# Do This\r\n\r\n* Change the value that `size` is initialized + to so that the program draws a **larger square**" + CSD U3 Variables TEMPLATE square_markdown_instruction: "# Drawing with Variables\r\n\r\n**Get + excited because you're about to see your first variable used in a program!** + This program uses a variable in three separate ways.\r\n\r\n* `var size;` + Creates a new variable with the label size\r\n* `size = 50;` Assigns the value + 50 to size\r\n* `rect(200, 200, size, size);` Uses the value in size to draw + a rectangle with equal width and height.\r\n\r\n# Do This\r\n\r\n* Run the + program once to see how it works\r\n* **Change the value assigned to size + in line 2** and rerun the program to see what changed." + CSD U3 Variables create and assign_markdown_instruction: "# Create and Assign\r\n\r\nWhen + you create a new variable you will often want to assign it a value right away. + You can **create and assign a value** to a variable in a single command as + shown below.\r\n\r\n![](https://images.code.org/2110bcf19415401434a876503ddecab5-image-1462472203840.16.37 + PM.png)\r\n\r\n# Do This\r\n\r\nThis program needs you to **create and assign + a value to the variable `size`** in order to draw a square.\r\n\r\n* Use the + block shown above to create the rectangle and assign it a value in a single + line of code.\r\n\r\n" + CSD U3 Variables draw loop newVars_markdown_instruction: "# Keep going!\r\n\r\n**Keep + using the patterns we just explored to build your own visualization**\r\n\r\n# + Do This\r\n\r\n* Extend your project to create a **personal randomized piece + of art**\r\n* Some techniques you might try:\r\n\t* Use **new shapes** like + `rect`, `regularPolygon`, or `line`\r\n * Use **variables in unexpected + ways**, (e.g. `red` also controls the size of your ellipse)\r\n * Create + **new variables** to control new parts of your program\r\n * Pick **new + ranges** for your random values\r\n * Switch which variables are assigned + values **inside or outside the draw loop**" + CSD U3 Variables draw loop rgb_markdown_instruction: "# Using variables in + the draw loop\r\n\r\nNow try randomizing the `red`, `green`, and `blue` variables. + Try setting their values to random numbers **before the draw loop** or **inside + the draw loop** like you did with `x1` and `y1` in the previous level. \r\n\r\n# + Do This\r\n\r\n* Randomize the values of `red`, `green`, and `blue`, changing + some **before the draw loop** and some **inside the draw loop**\r\n* Find + a visual effect you really like and share with a neighbor before moving on" + CSD U3 Variables draw loop xy_markdown_instruction: "# Using variables in the + draw loop\r\n\r\nAs you saw in the last example, **you can update a value + repeatedly within the draw loop**. Using this allows you to redraw an image + with random changes every time. By storing these random values in a variable + you can **use the same random value multiple times**.\r\n\r\n# Do This\r\n\r\n* + Add to the starter code provided so that the variables `x1` and `y1` are updated + randomly in the draw loop.\r\n* Use these values to redraw the ellipses at + random locations." + CSD U3 Variables eyeBrows_markdown_instruction: "# Create Your Own\r\n\r\nThe + pattern you just saw is very common. The steps were:\r\n\r\n* **Create** a + variable **outside** the draw loop\r\n* **Assign** the variable a new value + **inside** the draw loop\r\n* **Use** the new value **inside** the draw loop + to draw the current frame\r\n\r\nLet's see if you can put together everything + you've done so far to use this pattern yourself.\r\n\r\n# Do This\r\n\r\nYou + will be adding **eyebrows that move up and down together** to your smiley + face.\r\n\r\n* **Create** a variable **outside** the draw loop with a good + label. Remember this variable will control **the height of the eyebrows**\r\n* + **Assign** your variable a new random value **inside** your draw loop\r\n* + **Use** your value inside the draw loop to create **two new ellipses**. The + value in your variable should control the height\r\n\r\n**Hints and Tips:**\r\n\r\n* + The x values of your eyes can help you line up your eyebrows. \r\n* Don't + be afraid to work **iteratively** here (that means try something and keep + improving). It's ok to have something not work the first time.\r\n* Talk + with a neighbor if you're having trouble, or go check your work from earlier + in the lesson.\r\n\r\n![](https://images.code.org/05e5ea214c8ccc37fc8dd4223569602a-image-1462474590368.gif)" + CSD U3 Variables make a big square_markdown_instruction: "# Replacing Labels + with Values \r\n\r\nThe last command in the program you just ran is:\r\n\r\n\tconsole.log(size);\r\n\r\nBut + the output you saw was\r\n\r\n\t10\r\n \r\nThe reason is that **variables + are replaced with their values before running almost all commands.** The only + exceptions are the commands `var size` and `size = `.\r\n\r\n# Do This\r\n\r\nThis + program is very similar to the one you just ran, except now you'll be using + a variable to draw. **Can you fill the entire screen?**\r\n\r\n* **Predict** + what this program will do.\r\n\t* Does it generate an error? What will it + draw?\r\n* **Run** the program and check your prediction.\r\n* **Change the + value** assigned on line 2 so that **the rectangle drawn fills the whole screen**.\r\n\r\n" + CSD U3 Variables make a square_markdown_instruction: "# Drawing with Variables\r\n\r\nA + **variable** is a named piece of information in a program. You can think of + it as a **label** that identifies a **value** that we wish to use and update + many times in our programs. In the previous lesson, you learned two important + commands with variables.\r\n\r\n\tvar size; // Creates a new label + (or variable) called size\r\n size = 10; // size \"gets\" 10. The + label score is now connected to the value 10\r\n \r\nOnce these connections + have been formed, we can use them to make much more interesting drawings and + animations.\r\n\r\n# Do This\r\n\r\nThis program creates a variable called + `size` and assigns it the value `10`. These two commands are familiar, but + line 3 should look new to you. What do you think will happen?\r\n\r\n* **Predict** + what this program will do.\r\n\t* Does it generate an error? Output some text? + Output a value? Why do you think so?\r\n* **Run** the program and check your + prediction.\r\n* **Change the value** that size \"gets\" on line 2 and re-run + your program. Notice anything?" + CSD U3 Variables multiple assignments_markdown_instruction: "# Multiple Assignments\r\n\r\nA + variable contains a single piece of information called its **value**. To tell + variables apart each one has a **label** or name. In your last program, the + variable had the label `size` and originally had a value of `10`. **Here's + how each command you just saw works**\r\n\r\n![](https://images.code.org/a8d2c5a88a8fbb8284a18bcb7464cb9b-image-1462301535506.51.32 + PM.png) **Create a new variable** with the label `size`\r\n\r\n![](https://images.code.org/d2a2578e6d0190f7db69872c1ad64572-image-1462301539050.51.43 + PM.png) **Assign the value `10`** to the variable `size`\r\n\r\n![](https://images.code.org/84b01d13b210c8cca8a71934b77acc56-image-1462301542169.51.53 + PM.png) **Use the value in `size`** as the width and height of the rectangle. + (Since they're the same we end up with a square)\r\n\r\n# Do This\r\n\r\nThis + program is similar to the first but it assigns multiple values to `size` before + drawing the rectangle.\r\n\r\n* **Run the program once** to see how it works\r\n* + **One at a time change the values assigned to `size` in lines 2-4 and rerun + the program** \r\n* **Discuss / Reflect:**\r\n\t* Which lines is changing + the rectangle drawn? How can you tell?\r\n * Can you explain what you're + seeing?" + CSD U3 Variables naming rules_markdown_instruction: "# Choosing Labels\r\n\r\nGood + labels **indicate how the variable will be used in the program**. The label + `size` is a good choice for a variable that controls the size of something. + You could always choose `potato` or `s`, but confusing or unclear names make + your program hard to read for you and others.\r\n\r\nThere are a **few rules** + when choosing labels:\r\n\r\n* Labels **cannot include spaces**. For example, + `size of rectangle` would generate an error.\r\n* Labels with multiple words + can be easier to read in **camelCase**. CamelCase looks like `sizeOfRectangle` + or `aReallyLongLabelName`\r\n* Labels **cannot begin with a number**. `4sides` + and `2morrow` will generate errors.\r\n* Be very careful with **spelling**.\r\n* + Labels are **case-sensitive**. `size` is not the same as `Size` or `SIZE`.\r\n\r\n\r\n<img + src=\"https://images.code.org/39340782150ad1635f6274f6edadb114-image-1462314883756.34.32 + PM.png\" style=\"float:right; height:200px\"> \r\n\r\n# Do This\r\n\r\nThis + program has multiple errors caused by bad label names.\r\n\r\n* **Correct + the errors by picking new names that follow the rules listed above.**\r\n* + **Note:** The errors prevent the program from being viewed in block mode.\r\n* + If your program works it should draw the image on the right.\r\n\r\n" + CSD U3 Variables random assignment_markdown_instruction: "# Random Assignment\r\n\r\nVariables + are really helpful when you want to **store a number that you'll use many + times in your program**. For example, if you generate a random number you + could store it in a variable so that you can use that same random number as + many times as you wish, like this.\r\n\r\n\tvar randomSize; // + Create variable randomSize\r\n randomSize = randomNumber(10,100); // randomSize + \"gets\" a randomly generated number between 10 and 100\r\n\r\n# Do This\r\n\r\nThis + program **assigns a random number** to `eyeSize` on line 1. It's already + being used to change the size of one of the eyes on the smiley face, but not + the other. **Can you get both eyes to always be the same random size?**\r\n\r\n* + **Run the program** to see how it works\r\n* **Change the program** so that + both eyes are always the same random size. Check line 12 if you need some + help.\r\n\r\nNote: Read the documentation about the `arc` command if you want + to know more about how the mouth on the smiley was made." + CSD U3 Variables random draw loop_markdown_instruction: "# Variables and the + Draw Loop\r\n\r\nYou already know that draw loop **runs over and over again + so long as your program is running**. If you assign a value to a variable + outside the draw loop it will not change while the draw loop runs. If your + assignment happens **inside the draw loop the variable will be constantly + updated, once for each time the loop runs**. \r\n\r\n# Do This\r\n\r\nThis + program draws a smiley face with randomly sized eyes. You are going to **move + the assignment of `eyeSize` inside of the draw loop, but first...**\r\n\r\n* + **Run the program** without making changes to remind yourself how it works\r\n* + **Predict what will happen** when you move the assignment statement inside + the draw loop\r\n* **Move the assignment inside the draw loop** and run your + program\r\n* **Discuss / Reflect:**\r\n\t* Was your prediction correct?\r\n * + Can you explain what you see?\r\n * Try changing the range of random values + to get a different effect." + CSD U3 Variables random drawing exemplar_markdown_instruction: "# Exemplar: + Random Drawing\r\n\r\nTo practice using **variables with the draw loop** you + will be building your own **randomized art project**. Check out the exemplar + to see one possible outcome. Then move on to get started building your own." + CSD U3 Variables use value rect_markdown_instruction: "# Using a Variable's + Value\r\n\r\nThis program creates a variable called `size`. You will need + to **assign it a value**. It will then be used to set the size of a square + on the screen.\r\n\r\n# Do This\r\n\r\n* **Assign the variable `size` a value** + and run the program to see how its value is used\r\n* **Change the value** + and rerun the program to see how it affects the output of your program." + CSD U3 Variables write_markdown_instruction: "# Displaying a Variable's Value\r\n\r\nOften + you want to see the exact value contained in a variable, especially if it + was randomly generated. Both `console.log` and `text` can be used with variables + to specifically see their values. This is an important skill when **debugging** + your programs.\r\n\r\n# Do This\r\n\r\nThis program uses a variable `size` + to draw a square with a randomly generated value.\r\n\r\n* **Use the `text` + command** to display the value of `size` on the screen.\r\n* **Use the `console.log` + command** to display the value of `size` in the debug console." + CSD U3 Variables2 expressions in commands_markdown_instruction: "# Expressions + inside commands\r\n\r\n**When your computer sees an expression in a program + it will calculate its value before using it**. This means you can even use + expressions in unexpected places, like inside drawing commands.\r\n\r\n\tstrokeWeight(4 + * 5);\r\n rect(10 + 10, 5 * 50, 30, 30);\r\n \r\nNotice that the commas + still separate each expression. This is just further evidence that **even + though an expression may have multiple parts, it will eventually get treated + as a single value.**\r\n\r\n# Do This\r\n\r\nTry writing more complex expressions + inside of the drawing commands provided." + CSD U3 Variables2 expressions in variables_markdown_instruction: "# Do This\r\n\r\n* + Use the `=` (assignment operator) to store the value of each expression in + a variable\r\n* Use `console.log` to display each value\r\n* Repeat the pattern + with some expressions of your own. What do you want to calculate?" + CSD U3 Variables2 expressions_markdown_instruction: "# Do This\r\n\r\n* Place + each expression inside of a `console.log` command to display their results\r\n* + What other expressions can you make? Try writing 3 of your own.\r\n" + CSD U3 abstraction accelerateX_markdown_instruction: "# Velocity and the Counter + Pattern\r\n\r\nAs you just saw, using a `sprite.velocityX` property with the + counter pattern will change a sprite's velocity during the program. This + makes the sprite speed up. Do a little practice using this pattern yourself.\r\n\r\n# + Do This\r\n\r\nThis program already makes a car move across the screen, but + it's going very slowly\r\n\r\n* Use the counter pattern with the sprite's + velocityX property to make the car speed up. [Show me where](#triggercallout=code_triggered)" + CSD U3 abstraction accelerateY up_markdown_instruction: "# Rising Bubble\r\n\r\nThis + program makes a bubble rise up the water. Can you make it get faster as it + rises?\r\n\r\n# Do This\r\n\r\n* Use the counter pattern and the sprite's + y velocity to make the bubble move up more quickly." + CSD U3 abstraction accelerateY_markdown_instruction: "# Falling Rock\r\n\r\nThe + rock should speed up as it falls down the screen. Can you use the same counter + pattern with `velocityY` inside the draw loop to make the rock go faster and + faster as it falls?\r\n\r\n# Do This\r\n\r\n* Use the counter pattern with + the sprite's y velocity to make the rock speed up as it falls. [Show me + where](#triggercallout=code_triggered)\r\n\r\n*Challenge: Can you make the + rock spin as it falls?*" + CSD U3 abstraction add coin_markdown_instruction: "# Add a Coin\r\n\r\nIn the + next few levels you'll add to your program to make a simple game. In this + game the player will collect points to increase the score. This is a good + chance to see how different kinds of movement can affect the way a game feels, + and it will also just help you practice programming skills.\r\n\r\n# Do This\r\n\r\nIn + this level you'll just be adding a new coin sprite to the game. You should + be working at the top of your program, outside the draw loop.\r\n\r\n* Use + the `createSprite()` block to create a new sprite. Make sure to give it a + descriptive name like **coin**\r\n* Use the `sprite.x` and `sprite.y` properties + of the sprite to give it a random X and Y position between 0 and 400\r\n* + In the Animation Tab there is already a coin animation. Use the `sprite.setAnimation()` + block to give your sprite this animation.\r\n\r\nTest your code before moving + on. When you run the game you should see a coin sprite appear somewhere randomly + on the screen." + CSD U3 abstraction animation circle_markdown_instruction: "# Animate the Satellite\r\n\r\nNow + you are ready for the final piece of the drawing: making the satellite circle + the moon.\r\n\r\n#Do This\r\n\r\nUse `setSpeed()` and `getDirection()` to + make the satellite circle the moon. " + CSD U3 abstraction animation rotate_markdown_instruction: "# Rotation\r\n\r\nMake + earth rotate using the `rotationSpeed` property." + CSD U3 abstraction animation setSpeed_markdown_instruction: "# Animate Your + Picture\r\n\r\n<img style=\"float:right\" src=\"https://images.code.org/d2ad362f37d0e5f9b98691654256d2fb-image-1469469372823.gif\">\r\n\r\nNow + that everything is in the right place, you can make them move using the properties + and methods you have learned.\r\n\r\n# Do This\r\n\r\nUse `rotationSpeed`, + `rotationToDirection`, `getSpeed`, `getDirection`, and `setSpeed` to animate + your scene, as seen in the image to the right. " + CSD U3 abstraction animation setup_markdown_instruction: "# Setting up your + picture\r\n<img style=\"float: right; margin: 4px;\" src=\"https://images.code.org/b90748874dc9094386134be8ec1b95e5-image-1469228306235.png\">\r\nBefore + you make anything move, you'll need to start all your sprites off in the + right place. The Earth has already been positioned for you.\r\n\r\n# Do This\r\n\r\nCreate + sprites for the moon, spaceship, and satellite. Use `setAnimation` to add + a picture to each one, and use the `x` and `y` properties to put them in the + right place on the screen.\r\n\r\n" + CSD U3 abstraction animation_markdown_instruction: "# Setting up your picture\r\n<img + style=\"float: right; margin: 4px;\" src=\"https://images.code.org/b90748874dc9094386134be8ec1b95e5-image-1469228306235.png\">\r\nBefore + you make anything move, you'll need to start all your sprites off in the + right place. The Earth has already been positioned for you.\r\n\r\n# Do This\r\n\r\nCreate + sprites for the moon, spaceship, and satellite. Use `setAnimation` to add + a picture to each one, and use the `x` and `y` properties to put them in the + right place on the screen.\r\n\r\n" + CSD U3 abstraction bug template_markdown_instruction: "# velocityY\r\n\r\n`velocityY` + is like `velocityX`, but it moves things up and down. Can you use it to make + the dragonfly walk up the screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` to + make the sprite go up the screen.\r\n\r\n*Hint: Should velocity by positive + or negative to move the sprite up the screen?*" + CSD U3 abstraction car rotation_markdown_instruction: "# rotateToDirection\r\n\r\nHere's + the car you just made move. It stayed on the road, but it was not pointing + in the right direction. You can tell the sprite to always point in the direction + that it's moving by adding `car.rotateToDirection = true` outside the draw + loop, right after you create your sprite.\r\n\r\n# Do This\r\n\r\nUse the + `rotateToDirection` property to make your car face the direction it's moving." + CSD U3 abstraction car template_markdown_instruction: "# Moving at an Angle\r\n\r\nIf + you use `velocityX` and `velocityY` at the same time, you can move your sprite + at an angle. See if you can keep the car on the road by using these two properties.\r\n\r\n# + Do This\r\n\r\nUse `velocityX` and `velocityY` to make the car move along + the road." + CSD U3 abstraction change velocityX_markdown_instruction: "# Moving Faster\r\n\r\nRemember + when you used the counter pattern `sprite.x = sprite.x + 1` to change your + sprite's position inside the draw loop? Now you can use the same type of + counter pattern with `sprite.velocityX` to change your sprite's speed as + your program runs. Can you add a line of code in the draw loop to make the + sprite swim faster and faster?\r\n\r\n# Do This\r\n\r\nMake the fish get faster + by adding `fish.velocityX = fish.velocityX + 1` inside the draw loop. [Show + me where](#triggercallout=code_triggered)" + CSD U3 abstraction change velocityXY_markdown_instruction: "# Getting faster + at an angle\r\n\r\nHere's a different car that uses the same counter pattern + we used in the last lesson to make the car go faster, but it changes both + `velocityX` and `velocityY`. ([Show me where](#triggercallout=code_triggered)) It + also prints the speed and direction to the debug console. What do you think + will happen when you run the code?\r\n\r\n# Do This\r\n\r\nDiscuss with your + partner what you think will happen when the code runs, then run it and see + whether you were right. Why do you think the car moves in this way?\r\n\r\n[//]: + #(https://images.code.org/4d1af9cc274f30b9d9263a47f9f64f13-image-1470941637433.png)" + CSD U3 abstraction change velocityY_markdown_instruction: "# Moving Faster\r\n\r\nJust + as you can change `velocityX` inside the draw loop, you can change `velocityY` + to make your sprite move faster up or down. Can you add code into the draw + loop to make the dragonfly go faster?\r\n\r\n# Do This\r\n\r\nUse the `velocityY` + property to make the dragonfly fly faster and faster up the screen. [Show + me where](#triggercallout=code_triggered)" + CSD U3 abstraction circle_markdown_instruction: "# getDirection()\r\n\r\nYou've + been using `getSpeed` and `setSpeedAndDirection` to change the speed of a + sprite in a particular direction. What do you think will happen if you keep + the speed the same, but use `getDirection` and `setSpeedAndDirection` to change + the direction? Look at the code below and predict what it will do. After + you've run it, try changing the direction by different amounts to see what + happens.\r\n\r\n# Do This\r\n* Read the code where the direction is changed + and predict what it will do [Show me where](#triggercallout=code_triggered)\r\n* + Run the program and observe what it does\r\n* Modify the program to make the + car spin in large circles\r\n* Modify the program to make the car move in + the opposite direction\r\n\r\n[//]: #(https://images.code.org/63b04e63fc4bc21700b64ef3d6c6b8b7-image-1471475653020.png)" + CSD U3 abstraction decelerateX_markdown_instruction: "# Slowing Things Down\r\n\r\nNow + that you've had some practice speeding things up, can you use the counter + pattern to slow sprites down? \r\n\r\n# Do This\r\n\r\nThe car is going to + run into the water! You'll need to use the counter pattern to slow it down.\r\n\r\n* + Use the `sprite.velocityX` block with a counter pattern to slow the car down + by 0.25 as it moves across the screen. \r\n* Discuss with your Partner: What + do you think will happen when the car finally stops?\r\n\r\n*Challenge: Add + code that makes the car slow down only if his velocityX is greater than 0*\r\n" + CSD U3 abstraction decelerateY_markdown_instruction: "# Simulating Gravity\r\n\r\nIn + the last level you slowed down the car with the `sprite.velocityX` block and + the counter pattern. It almost looked like the car was getting pulled to the + left.\r\n\r\nIf you use this same pattern with the `sprite.velocityY` block + it will look like your sprite is always being pulled down, which is exactly + what gravity does!\r\n\r\n# Do This\r\n\r\nThe rock is thrown in the air but + it never falls back down.\r\n\r\n* Use the `sprite.velocityY` block with the + counter pattern to make the rock slow down and then fall in the other direction.\r\n* + Experiment with different values in your counter pattern. Do you want the + rock to slow down quickly or gradually? What looks most realistic to you?\r\n* + Discuss with your partner: Why are you setting the rock's initial velocity + outside the draw loop? Why are you changing the sprite's velocity inside + the draw loop?" + CSD U3 abstraction demo pic_markdown_instruction: "# Space Animation\r\n\r\nIn + the next few puzzles, you'll be building the space animation on the left. You + can use your activity guide to help you plan how to make the different type + of movements you see.\r\n\r\n# Do This\r\n\r\n* Click \"Run\" to see the animation.\r\n* + Look at how all the different sprites are moving and update your activity + guide with any ideas you have.\r\n* Discuss with a partner how you might make + this picture." + CSD U3 abstraction dragonfly (OLD)_markdown_instruction: "# velocityY\r\n\r\n`velocityY` + is like `velocityX`, but it moves things up and down. Can you use it to make + the feather float the down screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` + to make the sprite go down the screen.   [Show me where](#triggercallout=code_triggered)" + CSD U3 abstraction dragonfly OLD_markdown_instruction: "# velocityY\r\n\r\n`velocityY` + is like `velocityX`, but it moves things up and down. Can you use it to make + the dragonfly walk up the screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` to + make the sprite go up the screen.   [Show me where](#triggercallout=code_triggered)\r\n\r\n*Hint: + Should velocity be positive or negative to move the sprite up the screen?*" + CSD U3 abstraction drive_markdown_instruction: "# Race Your Car\r\n\r\nNow + that you can steer, you need to control the speed of your car. Use the `setSpeed` + method to make the car go faster when you push the up arrow and slower when + you push the down arrow.\r\n\r\n# Do This\r\n\r\nAdd two conditionals to your + car program. \r\n\r\n* The first should check whether the up arrow is pressed, + and increase the speed of the car. \r\n* The second should check whether the + down arrow is pressed and decrease the speed of the car.\r\n\r\n*Hint: What's + the difference between `keyDown` and `keyWentDown`? Which do you think will + work better for changing the speed of the car?*" + CSD U3 abstraction fish template_markdown_instruction: "# velocityX\r\n\r\nLast + time you made the fish move, you did it by changing its `x` property in the + draw loop. Now, you can use `velocityX` to make your sprites move left or + right by a certain amount each time they are drawn.\r\n\r\n# Do This\r\n\r\nUse + the `velocityX` block to make the sprite go across the screen.\r\n" + CSD U3 abstraction horse_markdown_instruction: "# Horse\r\n\r\nThe horse is + trying to make its escape. Can you use the `velocityX` and `velocityY` blocks + to make the horse jump over the fence?\r\n\r\n\r\n# Do This\r\n\r\n* Set the + starting `velocityX` and `velocityY` values outside the draw loop [Show me + where](#triggercallout=code_triggered1)\r\n* Change your sprite's `velocityY` + using a counter pattern inside the draw loop [Show me where](#triggercallout=code_triggered2)\r\n" + CSD U3 abstraction horse2_markdown_instruction: "# Better Horse\r\n\r\nIf you're + making a game, you'll want the horse to jump according to user input. This + program automatically moves the horse to the right, but the horse should jump + when the user presses the up arrow key. You will need to add three lines + of code to make this work. First, you'll need to check whether the up arrow + key has been pressed, and make the horse move up if it has. \r\n\r\n\r\n# + Do This\r\n\r\n* Inside the `if` block that checks whether the up arrow key + has been pressed, use the `velocityY` block to make the horse move up by 4 + each time. [Show me where](#triggercallout=code_triggered)\r\n\r\n" + CSD U3 abstraction horse3_markdown_instruction: "# Better Horse\r\n\r\nNext, + you'll make the horse fall back down to the ground. You'll need to check + whether the horse is in the air by looking at its y position. If it's in + the air it should fall down, but once it touches the ground it should stop. + The `if/else` block has already been provided for you.\r\n\r\n# Do This\r\n\r\nLook + at the `if/else` block that checks whether the horse's position is less than + 325. [Show me where](#triggercallout=code_triggered1)\r\n\r\n* If the horse's + y position is less than 325, use a counter pattern to change the horse's + velocityY by 0.1 on each tick of the draw loop. \r\n* If the horse's y position + is not less than 325, use the `velocityY` to change its vertical velocity + to zero. [Show me where](#triggercallout=code_triggered2)\r\n\r\n" + CSD U3 abstraction jump_markdown_instruction: "# Jumping\r\n\r\nYou now have + all the blocks you need to make your sprite jump!\r\n\r\nJust as you checked + whether your fish was at the left edge, you'll need to check whether the + frog is on the ground. If it is, it could either jump up or stay still, so + you'll need one more `if` block to check whether the user has pressed the + up arrow ([Show me where](#triggercallout=code_triggered1)).\r\n\r\nYou'll + also need to check whether the frog has reached its highest point, and send + it back down if it has.\r\n\r\n# Do this\r\n\r\n* Find the `if` statement + that checks whether the sprite is on the ground, and look at the `if` statement + inside of it that checks whether the user has pressed the \"up\" arrow key. + [Show me where](#triggercallout=code_triggered1)\r\n\t* Use the `velocityY` + block to make the frog jump up when the user presses the arrow key.\r\n\t* + Use the `velocityY` block to make the frog stop moving otherwise.\r\n* Add + an if statement that does the following [Show me where](#triggercallout=code_triggered2)\r\n * + Checks whether the frog sprite has reached its highest point.\r\n * If so, + use the `velocityY` block to make the sprite fall back down.\r\n\r\n" + CSD U3 abstraction jumper intro_markdown_instruction: "# Horse Jumper\r\n\r\nNow + that you've learned these new blocks, you can start to make a horse jumper + game. Press \"Run\" to play the game on the left. You can use the up arrow + to jump over the tumbleweed. What block will you need to make the tumbleweed + move? How many different ways does the horse move?\r\n\r\n\r\n" + CSD U3 abstraction jumper template_markdown_instruction: "# Horse Jumper\r\n\r\nNow + that you've learned these new blocks, you can start to make a horse jumper + game. Press \"Run\" to play the game on the left. You can use the up arrow + to jump over the tumbleweed. What block will you need to make the tumbleweed + move? How many different ways does the horse move?\r\n\r\n\r\n" + CSD U3 abstraction jumping advanced_markdown_instruction: "# Jumping with the + Counter Pattern\r\n\r\nIn the last level you just set the sprite's velocity + to -5 to make it jump. Eventually the sprite slows down and then starts falling + again. Now you'll build a slightly more realistic jump by using the counter + pattern with the sprite's y velocity.\r\n\r\n# Do This\r\n\r\nInside the + `if` block you should have code that sets the sprite's y velocity to a number.\r\n\r\n* + Replace that line of code with new code, `flyer.velocityY = flyer.velocityY + - 5`\r\n* Discuss with Your Partner: How did this change affect the way the + sprite moves? How does subtracting a different amount change the way your + sprite moves? Do you prefer one or the other type of jump?" + CSD U3 abstraction jumping template_markdown_instruction: "# Jumping\r\n\r\nIncreasing + a sprite's y velocity inside the counter pattern can simulate gravity. By + adding user interactions you can make your sprite appear to jump as well. + For starters you'll make a simple jump and then make it more realistic looking + in the next level.\r\n\r\n# Do This\r\n\r\nA sprite has already been created + for you that falls because its y velocity is increased inside the draw loop. + You'll need to make this sprite appear to jump.\r\n\r\n* Inside the draw + loop add an `if` block\r\n* Use the `keyWentDown` block to make the block + respond to the \"up\" arrow being pressed\r\n* Inside your `if` block set + the sprite's y velocity to -5\r\n\r\nRun the code to make sure it works. + Then experiment with different values. How could you make your sprite jump + higher or lower?" + CSD U3 abstraction jumping_markdown_instruction: "# Jumping\r\n\r\nIncreasing + a sprite's y velocity inside the counter pattern can simulate gravity. By + adding user interactions you can make your sprite appear to jump as well. + For starters you'll make a simple jump, and then make it more realistic looking + in the next level.\r\n\r\n# Do This\r\n\r\nA sprite has already been created + for you that falls because its y velocity is increased inside the draw loop. + You'll need to make this sprite appear to jump.\r\n\r\n* Inside the `if` + block that checks whether the up arrow has been pressed, set the sprite's + y velocity to -5. [Show me where](#triggercallout=callout1)\r\n* Discuss with + a neighbor: Why does this code run the way it does? How would using a number + besides -5 affect the way the code works? How could you jump higher or lower?" + CSD U3 abstraction left right counter 2_markdown_instruction: "# Floating Left\r\n\r\nIn + the last level you got detailed instructions on how to make your sprite start + floating to the right. This time you'll need to make your sprite float to + the left on your own. You should be pretty comfortable with using velocity + and the counter pattern together at this point. If you're having trouble, + talk to a neighbor or review some of the past levels.\r\n\r\n# Do This\r\n\r\n* + Add code to your draw loop that will make the sprite start moving to the left + when the \"left\" arrow is down.\r\n* Make sure you're using velocity and + the counter pattern together.\r\n\r\nOnce your code is working share what + you wrote with a partner. Is your sprite easy to control? Does changing the + amount you add or subtract in the counter patterns you wrote affect the way + the game feels? What kind of game might be fun to make with a player that + moves like this?" + CSD U3 abstraction left right counter_markdown_instruction: "# Floating Right\r\n\r\nYou're + now using the counter pattern with the sprite's Y velocity to simulate gravity + and jumping. If you use the sprite's X velocity in the counter pattern then + you can make your sprite float from side to side as well.\r\n\r\n# Do This\r\n\r\nIn + this level you'll make your sprite start floating to the right when the right + arrow is pressed\r\n\r\n* Add an `if` statement inside your draw loop below + the one you created for the \"up\" arrow\r\n* Use the `keyDown` block to make + the `if` statement respond to when the \"right\" arrow is pressed\r\n* Inside + the `if` block use the counter pattern with the `sprite.velocityX` block to + add 0.1 to the sprite's X velocity\r\n\r\nRun your code to see how it works. + The sprite should start floating to the right when you press the right arrow + and jump when you press \"up\". You'll make the left arrow work in the next + level." + CSD U3 abstraction looping_markdown_instruction: "# Looping\r\n\r\nThe game + will be more fun if the frog can jump more than once. You can make the mushroom + \"loop\" by checking whether it's moved past the left edge and moving it + back to the right edge when it has.\r\n\r\n# Do this\r\n* Find the `if` statement + that checks whether the mushroom has passed the left edge. [Show me where](#triggercallout=code_triggered1)\r\n* + Use the `sprite.x` block to set the mushroom's position back to the right + edge if it has.\r\n\r\n" + CSD U3 abstraction make it your own_markdown_instruction: "# Make It Your Own\r\n\r\nYou + now have the basic mechanics of your game in place, so it's time to make + it your own. What do you want to happen? Should the character get points every + time it collects a coin? Can you add a scoreboard like you learned in the + last lesson? Do you want to make another coin? What about a \"bad coin\" that + takes away points?\r\n\r\n# Do This\r\n\r\nMake at least one improvement to + the game that makes it your own. Be prepared to share your changes and improvements + with your classmate." + CSD U3 abstraction parabola_markdown_instruction: "# Basketball\r\n\r\nHere's + a basketball that's thrown up, then falls back down. Can you use the `velocityX` + block to make it go through the hoop?\r\n\r\n\r\n# Do This\r\n\r\nUse the + `velocityX` block outside the draw loop to make the ball move to the right + by 3 each time. [Show me where](#triggercallout=code_triggered)\r\n\r\n[//]: + #(https://images.code.org/119358fc8705640a24d2138439ea7cc1-image-1472496770816.png)" + CSD U3 abstraction race template_markdown_instruction: "Template for the race + game" + CSD U3 abstraction reset coin_markdown_instruction: "# Reset Coin\r\n\r\nWhen + your character touches the coin you should reset it somewhere on the screen.\r\n\r\n# + Do This\r\n\r\n* Place an `if` block inside of your draw loop\r\n* Use the + `sprite.isTouching()` block as the condition to detect when the character + touches the coin\r\n* Inside the `if` block write code that sets the coin's + X and Y position to random numbers between 0 and 400\r\n\t* *Hint: You've + already written this code elsewhere in your program*\r\n\r\nTest your code + before moving on. When your player touches the coin it should move somewhere + else on the screen." + CSD U3 abstraction rotation accelerate_markdown_instruction: "# Speeding up\r\n\r\nNow + that you've used `rotationSpeed` outside the draw loop to start your sprite + rotating at a certain speed, you can also use `rotationSpeed` inside the draw + loop to change how fast the sprite rotates. Look at the code inside the draw + loop. It uses the counter pattern to make the wheel speed up when the up + arrow is pressed. Can you use a different counter pattern to make the wheel + slow down when the down arrow is pressed?\r\n\r\n# Do This\r\n\r\n* Look at + the code that makes the wheel spin faster when the up arrow is pressed [Show + me where](#triggercallout=code_triggered1)\r\n* Add code that makes the wheel + spin slower when the down arrow is pressed [Show me where](#triggercallout=code_triggered2)" + CSD U3 abstraction rotation control_markdown_instruction: "# Controlling Speed\r\n\r\nYou + used `rotatationSpeed` outside the draw loop to make your sprite rotate when + your program started. You can also use `rotationSpeed` **inside** the draw + loop to change the speed of the sprite during the game. For example, a sprite + can start rotating when the user presses the space bar, and it will keep rotating + until it's told to stop.\r\n\r\n# Do This\r\n\r\n* Look at the `if` statement + inside the draw loop that checks whether the space bar has been pressed. [Show + me where](#triggercallout=code_triggered1)\r\n* Use the `rotationSpeed` block + to make the color wheel start spinning when the user presses the space bar." + CSD U3 abstraction rotation_markdown_instruction: "# rotationSpeed\r\n\r\nYou've + already learned how to make your sprite spin by using the `rotation` block. For + example, when you wanted your sprite to rotate by two degrees each time it + was drawn, you put `sprite.rotation = sprite.rotation + 2` inside the draw + loop.\r\n\r\nNow, you can use `rotationSpeed` to make your sprites rotate + by a certain amount each time they are drawn. If you want your sun to rotate + by two degrees each time it's drawn, you can use `sun.rotationSpeed = 2` + before the draw loop, after you create your sprite.\r\n\r\n# Do This\r\n\r\nMake + the sun rotate by 3 degrees each time using the `rotationSpeed` block. [Show + me where](#triggercallout=callout1)" + CSD U3 abstraction setSpeed accelerate_markdown_instruction: "# Moving faster + and faster\r\n\r\nNow that you've started your car off in the right direction, + you can make it go faster and faster by using a counter pattern inside the + draw loop. Because the sprite does not store its speed as it would a property, + you'll need to use the `getSpeed` block inside the `setSpeedAndDirection` + block to add one to the speed each time. The code `car.setSpeedAndDirection(car.getSpeed() + + 1, -20)` will get the speed of the car, add one to it, and set the new speed + to be the sum. Even though it looks different from using a counter pattern + on a property or variable, the basic pattern of adding one each time is the + same.\r\n\r\n# Do this\r\n\r\nUse the `getSpeed` and `setSpeedAndDirection` + blocks to add one to the speed each time the draw loop is called. [Show me + where](#triggercallout=code_triggered)" + CSD U3 abstraction setSpeed fish_markdown_instruction: "# Save the Fish\r\n<img + style=\"float: right; height: 200px;\" src=\"https://images.code.org/c92db34c78faa59c2d8a3f0df7fe92aa-image-1472492951133.gif\" + />\r\nYour fish is in danger! The shark is swimming faster than the fish, + but we can use the counter pattern to make the fish get faster as the program + runs. Can use use the counter pattern inside the draw loop to change the + program to match the animation on the right?\r\n\r\n# Do This\r\nUse `setSpeedAndDirection` + inside the draw loop to increase the speed of the sprite by 1 each time the + draw loop is called.\r\n\r\n[//]: # (https://images.code.org/a87dac6c803751292c6fb11a63623e3f-image-1471466985600.png)\r\n\r\n[//]: + # (https://images.code.org/b63256ffb19a98d9d20f3b3b79364006-image-1471467188241.png)\r\n\r\n[//]: + # (https://images.code.org/c92db34c78faa59c2d8a3f0df7fe92aa-image-1472492951133.gif)" + CSD U3 abstraction setSpeed intro_markdown_instruction: "# getSpeed() and getDirection()\r\n\r\nWhen + you move around the world, you probably don't normally think about your velocityX + and velocityY. You probably just think about how fast you are going in the + direction you are heading. You can figure out a sprite's speed and direction + with math, but it's faster to teach the computer to do those calculations + for you. `getSpeed()` and `getDirection()` are methods that use the information + in `velocityX` and `velocityY` to find your speed and direction.\r\n\r\n# + Do this\r\n\r\n* For each of the three sprites in this animation: Look at + its `velocityX` and `velocityY` and guess what its speed and direction are. \r\n* + Then run the code and see the answers in the debug console.\r\n" + CSD U3 abstraction setSpeed_markdown_instruction: "# setSpeedAndDirection()\r\n\r\nJust + as you can use the `getSpeed` and `getDirection` blocks to see how your sprite + is moving, you can use the `setSpeedAndDirection` block to tell the computer + how you want your sprite to move. This block takes in two numbers, first + the new speed of your sprite, then the angle of its direction.\r\n\r\nBefore, + you did this by setting your `velocityX` and `velocityY` properties, but `setSpeedAndDirection` + lets you input the exact speed and direction of your sprite. The computer + calculates the matching `velocityX` and `velocityY` values and sets them for + you, according to code that another programmer already wrote.\r\n\r\n# Do + this\r\n\r\nUse `setSpeedAndDirection` to make the car stay on the road. You + can see the effect on your sprite's `velocityX` and `velocityY` in the debug + console.\r\n\r\n*Hint: The angle of the road is -20 degrees*\r\n\r\n*Challenge: + Make the car point in the correct direction.*" + CSD U3 abstraction sidescroll intro_markdown_instruction: "# Horse Jumper\r\n\r\nNow + that you've learned these new blocks, you can start to make a horse jumper + game. Press \"Run\" to play the game on the left. You can use the up arrow + to jump over the tumbleweed. What block will you need to make the tumbleweed + move? How many different ways does the horse move?\r\n\r\n\r\n" + CSD U3 abstraction sidescroll_markdown_instruction: "# Side Scroller\r\n\r\nNow + that you can make your sprite jump, you're ready to start a simple side scroller. In + a side scroller game, the main sprite stays at the same x location, and the + background and obstacles slide past it. In this first part of the project, + you'll make a hay bale slide across the screen so that your horse can jump + over it. You can do this by creating the hay bale off the right hand side + of the screen, but setting its velocity so that it moves to the left. Then, + when the hay bale is completely off the left hand side of the screen, move + it back to where it started so it can scroll across the screen again.\r\n\r\n# + Do this\r\n\r\n* Change the line of code where the hay sprite is created to + make it start off the right side of the screen. [Show me where](#triggercallout=code_triggered1)\r\n* + Add a line of code to make the sprite move across the screen toward the left. + [Show me where](#triggercallout=code_triggered2)\r\n* Add an if statement + that does the following [Show me where](#triggercallout=code_triggered3)\r\n * + Checks whether the sprite has gone off the left side of the screen.\r\n * + If so, moves the sprite back to its initial position off the right side of + the screen.\r\n\r\n\r\n_Challenge: Can you make the hay bale come out from + different places on the right hand side of the screen?_\r\n\r\n_Extra fun: + You can choose your own images to use, rather than the horse and hay bale, + and draw a new background._\r\n\r\n[](https://images.code.org/0a265cf4c22f69463200dce05989e8e4-image-1474609853181.png)" + CSD U3 abstraction space animation_markdown_instruction: "# Your choice\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that you have everything moving in the correct way, you can add your own sprite. You + can choose between the star and astronaut animations in the animations tab\r\n\r\n# + Do This\r\n\r\n* Add a new sprite to the picture using the star or astronaut + in the animations tab\r\n* Make your sprite move in a new way based on what + you have learned\r\n* Share your picture with a classmate and compare your + animations" + CSD U3 abstraction space comet_markdown_instruction: "# Animate The Comet\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that your sprites are in the right place, you can make them move using the + properties and methods you have learned. In this level, you can make the + comet fly across the sky in a curve. If you want to animate another sprite, + you can click on the following links:\r\n\r\n* [Animate the Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* + [Animate the Spaceship](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/14)\r\n* + [Animate the Satellite](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# + Do This\r\n\r\nUse the correct blocks to make the comet fly across the sky + as in the picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/13) + for clues.*" + CSD U3 abstraction space earth_markdown_instruction: "# Animate The Earth\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that everything is in the right place, you can make the sprites move using + the properties and methods you have learned. In this level, you can make + the earth rotate. If you want to animate another sprite, you can click on + the following links:\r\n* [Animate the Comet](s/CSDU3-Draft/stage/12/puzzle/13)\r\n* + [Animate the Spaceship](s/CSDU3-Draft/stage/12/puzzle/14)\r\n* [Animate the + Satellite](s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# Do This\r\n\r\nUse the + correct blocks to make the earth rotate as in the picture.\r\n" + CSD U3 abstraction space satellite_markdown_instruction: "# Animate The Satellite\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that everything is in the right place, you can make the sprites move using + the properties and methods you have learned. In this level, you can make + the satellite revolve around the moon. If you want to animate another sprite, + you can click on the following links:\r\n\r\n* [Animate the Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* + [Animate the Comet](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/13)\r\n* + [Animate the Spaceship](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/14)\r\n\r\n# + Do This\r\n\r\nUse the correct blocks to make the satellite move as in the + picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) + for clues.*" + CSD U3 abstraction space setup_markdown_instruction: "# Setting up your picture\r\n<img + style=\"float: right; margin: 4px;\" src=\"https://images.code.org/aabf67f8692c025f62a43e54d4bfd830-image-1472408773491.png\">\r\nBefore + you make anything move, you'll need to start all your sprites off in the + right place. The Earth has already been positioned for you, and all the images + are loaded for you in the animations tab.\r\n\r\n# Do This\r\n\r\n* Create + sprites for the moon, spaceship, and satellite.\r\n* Use `setAnimation` to + add a picture to each sprite.\r\n* Use the `x` and `y` properties to put the + sprites in the right place on the screen.\r\n" + CSD U3 abstraction space spaceship_markdown_instruction: "# Animate The Spaceship\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that everything is in the right place, you can make the sprites move using + the properties and methods you have learned. In this level, you can make + the spaceship speed up as it takes off from Earth. If you want to animate + another sprite, you can click on the following links:\r\n\r\n* [Animate the + Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* + [Animate the Comet](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/13)\r\n* + [Animate the Satellite](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# + Do This\r\n\r\nUse the correct blocks to make the spaceship take off as in + the picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/6) + for clues.*" + CSD U3 abstraction space template_markdown_instruction: "![](https://images.code.org/b449da443093a6b7fb872c0b65d4ea39-image-1472234725048.png)\r\n\r\n![](https://images.code.org/87f39110a8cec7a6ca1978989f1d8eaf-image-1472235414354.png)\r\n\r\n![](https://images.code.org/69cb2daab7d1eec824b8bd2d2b117116-image-1472235429548.png)" + CSD U3 abstraction steer_markdown_instruction: "# Steering your car\r\n\r\nNow + you have enough information to control your car with the keyboard using conditionals. Every + time the left arrow key is pressed, the car will turn to the left. Can you + use the `if` block to make the car turn to the right when the right arrow + key is pressed? (Don't worry about speeding up and slowing down. You will + do that on the next level.)\r\n\r\n# Do This\r\n\r\nInside the draw loop:\r\n* + check whether the right arrow key is pressed\r\n* if it's pressed, turn the + car to the right\r\n\r\n*Challenge: Can you modify the code so that the car + turns faster?*" + CSD U3 abstraction teaser_markdown_instruction: "# Space Animation\r\n\r\nLook + at the space animation on the left.\r\n\r\n* What sorts of movements are the + different sprites making? \r\n* Which types of movement do you already know + how to program?\r\n* Is there anything you're not sure how to do? \r\n* Discuss + with a partner how you might make this picture.\r\n\r\n# Do This\r\n\r\n* + Click \"Run\" to see the space animation.\r\n* With your partner, discuss + the different types of movement and how you might code your sprites.\r\n* + Fill out the activity guide with your notes on the different movements." + CSD U3 abstraction tumbleweed_markdown_instruction: "# Mushroom\r\n\r\nNow + you just need something for your sprite to jump over. This program already + has a mushroom just past the right edge of the screen, but it needs to move + toward your frog.\r\n\r\n# Do this\r\n* Use the `velocityX` block to make + the mushroom move left across the screen.\r\n\r\n*Hint: The mushroom should + start moving at the very beginning of the game, and never change, so should + it be inside or outside the draw loop?*\r\n\r\n" + CSD U3 abstraction velocityX control_markdown_instruction: "# Multiple Controls\r\n\r\nAs + you saw in the last level, you can change the sprite's velocity with multiple + `if` statements. In this program, the fish has three different types of movement, + each of which should be controlled by its own `if` statement.\r\n\r\n# Do + This\r\n* Look at the three `if` statements inside the draw loop.\r\n\r\n* + Use a `sprite.velocityX` block inside each `if` statement to make the three + following movements:\r\n * If the user presses the right arrow key, move the + fish to the right.\r\n * If the fish gets to the right hand side of the screen, + move the fish to the left.\r\n * If the fish gets to the left hand side of + the screen, stop the fish." + CSD U3 abstraction velocityX if-statements_markdown_instruction: "# Changing + Velocity with Position\r\n\r\nOne advantage to using the velocity blocks inside + conditionals (`if` blocks) is that your sprite keeps moving, even after the + condition stops being true. For example, you only had to press a key once + to launch your fly man, and he kept flying forever.\r\n\r\nYou can do the + same when you check a sprite's position. In the code below, the fish sprite + moves to the left when it hits the right edge, and to the right when it hits + the left edge. The `if` block only sets the velocity when the sprite hits + the edge, but the sprite keeps moving in the same direction, even when it's + not touching the edge anymore.\r\n\r\n# Do This\r\n\r\n* Look at `if` statements + that check the sprite's position and set its velocity.\r\n* With your partner, + discuss how the sprite knows which way to move when neither of the `if` statements + are true (the sprite is in the middle of the screen)." + CSD U3 abstraction velocityX_markdown_instruction: "# velocityX\r\n\r\nOne + way to move sprites in Game Lab is with the counter pattern. For example `sprite1.x + = sprite1.x + 1` moves a sprite by 1 pixel each frame of the draw loop. This + pattern is so common that sprites have a `velocityX` property that does this + for you.\r\n\r\n# Do This\r\n\r\n* Drag a `sprite.velocityX` block directly + below where your sprite is created.       [Show me + where](#triggercallout=code_triggered)\r\n* Write the name of your sprite + in the block.\r\n* Assign the `velocityX` property a value of 1.\r\n* Run + the code. What happens?\r\n* Re-run the code giving the `velocityX` property + a different value. What's changing?\r\n" + CSD U3 abstraction velocityXY_markdown_instruction: "# Moving at an Angle\r\n\r\nFor + the next several levels you'll use the `sprite.velocityX` and `sprite.velocityY` + blocks to create some interesting sprite movements. As you do so ask yourself + whether you need the code to run just once (outside the draw loop) or on every + frame (inside the draw loop).\r\n\r\n# Do This\r\n\r\nThis car sprite should + move along the diagonal road.\r\n\r\n* Set both the X and Y velocities of + the car to make it move along the road.\r\n* Discuss with a Neighbor: Did + you set the velocity inside or outside the draw loop? Does it make a difference? + Why might one be better than the other?" + CSD U3 abstraction velocityY 2_markdown_instruction: "# velocityY\r\n\r\n`velocityY` + is like `velocityX`, but it moves things up and down. Can you use it to make + the feather float the down screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` + to make the sprite go down the screen.   [Show me where](#triggercallout=code_triggered)" + CSD U3 abstraction velocityY control_markdown_instruction: "# Controlling Speed\r\n\r\nYour + code before the draw loop sets up the beginning of your game. Your code inside + the draw loop controls how the game will change while it's being played. In + this game, the helicopter man starts off at the bottom of the screen, but + when the space key is pressed, he flies up.\r\n\r\n# Do This\r\n\r\n* Use + an `if` statement inside the draw loop to check when the space bar is pressed.\r\n* + Use the `velocityY` block to make the sprite fly up when the user presses + the space bar." + CSD U3 abstraction velocityY_markdown_instruction: "# Moving Down\r\n\r\nHere + is a feather sprite that should be floating down the screen. If `velocityX` + makes a sprite move to the right, can you find the block that will make the + feather move down?\r\n\r\n#Do This\r\n\r\nFind the block that will make the + feather sprite go down the screen, and use it outside the draw loop.   [Show + me where](#triggercallout=code_triggered)" + CSD U3 collisions bounce birds_markdown_instruction: "# bounce()\r\n\r\nThe + birds are fighting for space on the wire. Can you change the code so that + the green bird pushes the yellow bird off the wire?\r\n\r\n# Do This\r\n\r\nUse + the `bounce` block to the green bird sprite bounce against the yellow bird + sprite.\r\n" + CSD U3 collisions bounce intro_markdown_instruction: "# bounce()\r\n\r\nYou + can also make sprites bounce when they touch each other, as in the code below. + Read the code and run it with a partner. Can you change the code so that + the green bird pushes the yellow bird off the wire?\r\n\r\n# Do This\r\n\r\nUse + the `bounce` block to make the green bird sprite bounce against the yellow + bird sprite.\r\n" + CSD U3 collisions bounce_markdown_instruction: "# Billiards\r\n\r\nChanging + your sprites' velocities will change the ways that they bounce when they + touch each other. Read the code and run it with a partner, then try out different + intial velocities for your sprites. After each change, discuss with your + partner what you think will happen before you run the code.\r\n\r\n# Do This\r\nDiscuss + with your partner what you think will happen when you run the code, then try + it again with the following changes:\r\n* set the purple ball's velocity + to 0\r\n* set the purple ball's velocity to 4\r\n* switch the purple and + red balls so it says `red_ball.bounce(purple_ball)`\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: + # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" + CSD U3 collisions bounceOff intro_markdown_instruction: "# Basketball\r\n\r\nRun + the code below and see what happens. You want the basketball to bounce, but + the floor should not move! See if you can find a different block that you + can use to make the basketball bounce off the floor.\r\n\r\n# Do This\r\n\r\nReplace + `bounce` with a different block so that the floor sprite does not move, and + the basketball sprite bounces off it.\r\n\r\n[//]: # (https://images.code.org/24355fc6377cfafdce3ce2b3568a33c3-image-1470343728940.png)\r\n\r\n[//]: + # (https://images.code.org/87e4306e0371c7975b8fb2583657ee4a-image-1470343728942.png)" + CSD U3 collisions bounceOff_markdown_instruction: "# Mouse\r\n\r\nThe mouse + should be running back and forth between the two walls. Can you use the `bounceOff` + block to make it move in the right way?\r\n\r\n# Do This\r\n\r\nUse the `bounceOff` + block to make the mouse sprite bounce off the wall sprites.\r\n\r\n[//]: # + (https://images.code.org/e542bc5decf5f57d3184a8d5449776d2-image-1470413949810.png)\r\n\r\n[//]: + # (https://images.code.org/fcd40235d2a4285723eecec1df041edc-image-1470413965009.png)\r\n\r\n[//]: + # (https://images.code.org/c3f6298b05a9eb51772c8c03a06abe54-image-1470414415864.png)\r\n\r\n[//]: + # (https://images.code.org/e89b80c63658eb3607478fe91aceda47-image-1470414741858.png)" + CSD U3 collisions bounciness_markdown_instruction: "# Bounciness\r\n\r\nSo + far, `bounceOff` has made sprites bounce away from other objects as fast as + they bounced into them. In the real world, almost everything slows down just + a little bit when it bounces off something else. You can use the `bounciness` + block to tell your sprite how much to slow down or speed up when it bounces + off something else.\r\n\r\n# Do This\r\n\r\n* Read the code below and press + \"Run\" to see the behavior of the basketball and pool ball.\r\n* Use a `bounciness` + block to set the bounciness of your soccer ball.\r\n* Run the code again to + see how the sprites bounce off the floor.\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: + # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)\r\n\r\n[//]: + # (https://images.code.org/0e4e9c26bed0d31d14f6b3f8f8bb4c27-image-1475786966986.png)" + CSD U3 collisions build isTouching_markdown_instruction: "# Balloon\r\n\r\nThe + code below will change the balloon sprite's animation when the tack touches + it. Use the arrow keys to move the tack until it touches the balloon.\r\n\r\n# + Do This\r\n\r\n* You do not need to change any code on this level.\r\n* Read + the if statements inside the draw loop and discuss with your partner how they + work.\r\n\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: + # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: + # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)" + CSD U3 collisions bumper_markdown_instruction: "# Bumper Cars\r\n\r\nThe bumper + cars are almost ready, but they still don't bump into each other. Can you + choose the right method to make the cars behave like they do in the picture?\r\n\r\n# + Do This\r\n\r\nUse `displace`, `collide`, `bounce`, or `bounceOff` to make + the sprites interact in the right way.\r\n\r\n[//]: # (https://images.code.org/682567536f824cc930ebed5c1b936e5f-image-1470415888369.png)\r\n\r\n[//]: + # (https://images.code.org/8a6915fe703f4fe097094cad1e754a6f-image-1470415888371.png)\r\n\r\n[//]: + # (https://images.code.org/0b9f5ca88dc99fc08d472fdba87d6e32-image-1470417254115.png)\r\n\r\n[//]: + # (https://images.code.org/2085e5de29f7170465b0c7bd5e6b56e9-image-1470417254116.png)" + CSD U3 collisions car intro_markdown_instruction: "# Frog Jump\r\n\r\nLook + at the frog jumping game to the left. It looks like the game from the last + lesson, but the frog moves the mushroom if it hits it. What code do you think + would help the computer to know whether two sprites are touching?\r\n\r\n[//]: + # (https://images.code.org/ee9b677e93213846fe12abb3b34f563c-image-1469742494237.png)\r\n\r\n[//]: + # (https://images.code.org/5f738da1a2b1ef8af124e4470e2babe7-image-1469742830481.png)\r\n\r\n[//]: + # (https://images.code.org/f22e6b1a636337820e53fb37a137b3d1-image-1469742992179.png)" + CSD U3 collisions car_markdown_instruction: "# Improve Your Game\r\n\r\nNow + that you know how to use `isTouching` and `playSound`, you can make some fun + things happen when your sprites run into each other.\r\n\r\n# Do This\r\n\r\nUse + the `if`, `isTouching`, `playsound`, and any other blocks you want to add + effects when your sprites collide. You should have at least two effects.\r\n\r\n_Challenge: + Can you add a score board to the top of the screen? How would your game keep + score, and how would the score be displayed?_" + CSD U3 collisions collide_markdown_instruction: "# Save your treasure\r\n\r\nThe + pirate is trying to steal your treasure! Use the arrow keys to move the pirate + around the screen. Can you change the code so the pirate can't get past + the wall?\r\n\r\n# Do This\r\n\r\nUse the `collide` block to make the pirate + sprite collide into the wall.\r\n\r\n[//]: #(https://images.code.org/04a7b28f7228570602238fed87420aab-image-1470944619236.png)\r\n\r\n[//]: + #(https://images.code.org/8f7ec18621c97ce98d22337a1e21ddab-image-1470944619234.png)\r\n\r\n[//]: + #(https://images.code.org/6b749a05857ea1e88fa46f7e2740c77c-image-1470944619235.png)" + CSD U3 collisions debug isTouching_markdown_instruction: "# Debugging Collisions\r\n\r\nThe + balloon is popping before the tack touches it. When sprites aren't doing + what you expect, you can use the `debug` block to get more information about + why the sprites are behaving that way. Can you find out what's wrong in + the code below?\r\n\r\n# Do This\r\n* Run the code and use the arrow keys + to move the tack to pop the balloon.\r\n* In the code below, change `balloon.debug + = false` to `balloon.debug = true`.\r\n* Add a new `debug` block to the code + and set the tack sprite's debug property to `true`.\r\n* Run the code again, + then discuss with your partner why the balloon is popping early.\r\n\r\n*Challenge: + Can you use the animations tab to resize the balloon picture so it pops at + the correct time?*\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: + # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: + # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)\r\n\r\n[//]: + # (https://images.code.org/2892e65635d7a43d0664bb8ff58eb698-image-1471200175665.png)\r\n\r\n[//]: + # (https://images.code.org/9ffeb3f543033353d073794071316860-image-1471200179449.png)" + CSD U3 collisions debug_markdown_instruction: "# Debug\r\n\r\nSometimes sprites + will behave in ways that are unexpected. There is a special `sprite.debug` + property you can use to better understand why the sprites interact the way + that they do.\r\n\r\n# Do This\r\n\r\nThese two coins are round, so you would + expect them to bounce in a certain way. Something weird is happening though!\r\n\r\n* + Run the code and watch the way that the coins interact.\r\n* Use the `sprite.debug` + block to make debug 'true' for both the sprites and run the code again.\r\n* + Change the gold coin's starting x position to 51 and run the code again.\r\n* + Discuss with a partner: Why do you think the balls are bouncing strangely?" + CSD U3 collisions displace diagonal_markdown_instruction: "# Diagonal Elevator\r\n\r\nLast + time we saw balloon, it pushed the feather all the way off screen. What do + you think will happen when the balloon moves away from the feather while it's + moving it?\r\n\r\n# Do This\r\n\r\nUse the `displace` block to make the balloon + sprite push the feather sprite, and watch what happens when the sprites stop + touching each other.\r\n\r\n[//]: # (https://images.code.org/a6c891b044cea1b6d8649a153e13739b-image-1470316517410.png)\r\n\r\n[//]: + # (https://images.code.org/af2df53196186e50a58f64f6559a53ca-image-1470316589121.png)\r\n\r\n[//]: + # (https://images.code.org/fb739254c4d2f6745977a26e0481162a-image-1470316780326.png)\r\n\r\n[//]: + # (https://images.code.org/341bb1ce73ba812f2bd0afeb01e08aad-image-1470316853020.png)" + CSD U3 collisions displace intro_markdown_instruction: "# Displace\r\n\r\nThe + interaction you've been programming is so common that there's a block designed + to do the interaction for you. `sprite.displace()` that will make one sprite + push the other when they touch. The code underlying this block might look + a lot like what you just wrote, but now you no longer need to worry about + writing those details yourself.\r\n\r\n# Do This\r\n\r\nSomeone tried to use + the `sprite.displace()` block to make the **elephant push the hippo**, but + there is a bug. Can you change the code so that the elephant pushes the hippo + off the screen?\r\n\r\n* Find the line of code where the `sprite.displace()` + block is used and fix the error." + CSD U3 collisions displace x_markdown_instruction: "# Program a Sprite Interaction\r\n\r\nYou + should have discussed with your classmates how you could create the sprite + interaction you saw in the last level. Now it's your turn to program it yourself. + How can you make the giraffe move the monkey off the screen?\r\n\r\n# Do This\r\n\r\nThe + giraffe is already moving across the screen toward the monkey but the sprite + interaction itself hasn't been programmed.\r\n\r\n* Use the plan you developed + with your classmates on the last level to program the sprite interaction yourself.\r\n\r\n[//]: + # (https://images.code.org/2e6b993747a39cd5076dce219037903d-image-1470319674401.png)\r\n\r\n[//]: + # (https://images.code.org/d44d7c1aa87ea7eeceea9e9b023408f9-image-1470319674396.png)" + CSD U3 collisions displace y_markdown_instruction: "# Write Your Own Sprite + Interaction\r\n\r\nIn the last level you should have written code for a sprite + interaction that you developed with your classmates. This time try to write + the program on your own, but you can use the patterns you saw in the last + level.\r\n\r\n# Do This\r\n\r\nThe elephant should **push the hippo off the + screen**. Notice that the elephant moves at a random Y velocity each time + the program runs.\r\n\r\n* Using the patterns from the last level, write code + that makes the elephant push the hippo off the screen." + CSD U3 collisions egg template_markdown_instruction: "# Template Level\r\n\r\n[//]: + # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: + # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: + # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: + # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: + # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: + # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" + CSD U3 collisions egg_markdown_instruction: "# Applesauce\r\n\r\nWhen the apple + hits the blender, the blender should turn on.\r\n\r\n# Do This\r\n\r\nUse + the `isTouching` block to make the blender shake back and forth when the apple + sprite touches the blender sprite. The shaking motion is already coded using + the random block, so you just have to check when the two sprites are touching.\r\n\r\n*Challenge: + Can you make the apple disappear when it touches the blender?*\r\n\r\n[//]: + # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: + # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: + # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: + # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: + # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: + # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" + CSD U3 collisions egg2_markdown_instruction: "# Making Sounds\r\n\r\nYou can + also use code to play a blender sound.\r\n\r\n# Do This\r\n\r\nUse the `playSound` + block from the \"Game Lab\" drawer to play the \"https://docs.code.org/sounds/blender.mp3\" + sound when the apple touches the blender. You will need to paste the address + of the sound into the block, so it looks like this: ![](https://images.code.org/8376df7a92ff8e6ba0a2d6e51c24547e-image-1484091385498.34.57 + PM.png)\r\n\r\n[//]: # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: + # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: + # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: + # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: + # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: + # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)\r\n\r\n[//]: + # (https://images.code.org/8376df7a92ff8e6ba0a2d6e51c24547e-image-1484091385498.34.57 + PM.png)" + CSD U3 collisions flyman add obstacles_markdown_instruction: "# Flyer Game + - Add Obstacle\r\n\r\nThis is the flyer game you built in the last lesson. + For the next several levels you'll be adding an obstacle sprite to the game, + using some of the sprite interactions you just learned. At the end you'll + have a chance to keep adding on ideas of your own.\r\n\r\n<img src=\"https://images.code.org/47f8c130ca668080d48520ef9aced093-image-1477069764142.08.58 + AM.png\" style=\"float:right;width:200px\">\r\n\r\n# Do This\r\n\r\nAdd an + obstacle sprite to the game. You can use whatever image you like from the + animation tab but the example shown here uses a sun. Right now you just need + to add the sprite to your game and give it an animation.\r\n\r\n* Add a new + sprite to your game called \"obstacle\"\r\n* In the animation tab create a + new animation for your obstacle. In the example a sun image was chosen\r\n* + Use the `sprite.setAnimation()` block to give your sprite the image you chose.\r\n* + Run the code and make sure the sprite appears where you want it on the screen. + You may need to set its X, Y, and scale properties to get it to look the way + you want." + CSD U3 collisions flyman bounceOff_markdown_instruction: "# Flyer Game - Interacting + with the Obstacle\r\n\r\nYou don't want your player to be able to move through + the obstacle, so you'll need to use one of the sprite interactions.\r\n\r\n# + Do This\r\n\r\n* Add code to your game that prevents your player from moving + through the obstacle.\r\n* If you use one of the bounce interactions, decide + if you want to reset the bounciness of your character.\r\n* Discuss with a + Neighbor: Which sprite interaction did you decide to use? Is there more than + one sprite interaction that works the way you'd expect?" + CSD U3 collisions flyman change colliders_markdown_instruction: "# Flyer Game + - Change Colliders\r\n\r\nRight now your colliders are all rectangular. Switch + them over to circles to get more interesting and realistic bounces and collisions.\r\n\r\n# + Do This\r\n\r\n* Use the `sprite.setCollider()` block to change the colliders + of your sprites to circles.\r\n* Set your sprites' debug properties to `true` + to make sure your game is working the way you want.\r\n* Play your game to + make sure it's working the way you want." + CSD U3 collisions flyman displace coin_markdown_instruction: "# Flyer Game + - Coin Behind the Obstacle\r\n\r\nRight now your coin is moving to random + locations. That means sometimes it even will appear behind your obstacle, + so your character can't get to it. Using sprite interactions you can fix + this problem.\r\n\r\n# Do This\r\n\r\n* Add code to your game that prevents + the coin from moving behind the obstacle. Don't be afraid to try out ideas + and just see how they work.\r\n* Discuss with a Neighbor: Which sprite interaction + did you decide to use? Is there more than one sprite interaction that works + the way you'd expect?" + CSD U3 collisions flyman make it your own_markdown_instruction: "# Flyer Game + - Make It Your Own\r\n\r\nTime to make this game your own by using what you've + learned about sprite interactions.\r\n\r\n# Do This\r\n\r\nAdd at least one + more aspect to your game that uses sprite interactions. There's some ideas + below or you can choose to add features of your own. Make sure you're ready + to share your ideas with your classmates.\r\n\r\n* Create \"edge\" sprites + to keep your character from bouncing out\r\n* Add platforms to the game for + your character to navigate around\r\n* Add another obstacle to your game\r\n* + Create another idea of your own." + CSD U3 collisions getSpeed_markdown_instruction: "# Dashboard\r\n\r\nHere's + a car that can be controlled with the arrow keys. The dashboard at the bottom + should show the car's speed and direction, even when it is off the screen.\r\n\r\n# + Do This\r\n\r\n* Use the `getDirection()` block to turn the compass needle + to the car's current direction. [Show me where](#triggercallout=code_triggered1)\r\n* + Use the `getSpeed()` block to display the car's current speed on the dashboard, + instead of 0. [Show me where](#triggercallout=code_triggered2)\r\n\r\n*Challenge: + Can you also show the car's current location on the dashboard?*\r\n\r\n[//]: + #(https://images.code.org/b87e51b8ed026ca239cbf629c9a58b26-image-1472571454000.png)\r\n\r\n[//]: + #(https://images.code.org/669fd48b2a28602220c2d07b717c1ace-image-1472571454002.png)\r\n\r\n[//]: + #(https://images.code.org/e3013d8428f54f7fbde63d0a4a8eaafb-image-1472571782304.png)" + CSD U3 collisions horse_markdown_instruction: "# Rainbow Horse\r\n\r\nWhen + the rainbow touches the horse, it should turn into a unicorn.\r\n\r\n# Do + This\r\n\r\nUse the `if`, `isTouching`, and `setAnimation` blocks to change + the horse sprite's image when the rainbow touches it. The unicorn image + is already loaded in the animations tab for you.\r\n\r\n[//]: # (https://images.code.org/4d1d0e36e574117140ecc377d406c1de-image-1470256869920.png)\r\n\r\n[//]: + # (https://images.code.org/b913bc2ee2231b908892472240a70105-image-1470256869922.png)\r\n\r\n[//]: + # (https://images.code.org/558b42903bf40cc26410e651a85de922-image-1470256869923.png)\r\n\r\n[//]: + # (https://images.code.org/1d41d2e5b3b55037911b8f73bdc2ff48-image-1470257277875.png)" + CSD U3 collisions isTouching intro_markdown_instruction: "# isTouching()\r\n\r\nWriting + out the math each time you want to check whether two sprites are touching + can take a while, so a programmer created the `isTouching` block, which can + check whether one sprite is touching another sprite (the *target*). The computer + is still doing the same math as in the previous program, but you don't have + to worry about it because another programmer already did that work.\r\n\r\n# + Do This\r\n\r\nInside the draw loop, drag the `isTouching` block into the + `if` block.    [Show me where](#triggercallout=code_triggered)\r\n\r\n*Hint: + Don't forget to change the \"sprite\" to \"balloon\" and the \"target\" to + \"tack\".*\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: + # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: + # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)" + CSD U3 collisions obstacle_markdown_instruction: "# Mouse Maze\r\n\r\nThe mouse + needs to find its way through the maze to get to the cheese, but right now + it passes through the walls. Can you change the code so that the mouse is + blocked by the walls?\r\n\r\n# Do This\r\n\r\nAdd a `displace`, `collide`, + `bounce`, or `bounceOff` block in the draw loop to make the sprites interact + in the right way.\r\n\r\n[//]: # (https://images.code.org/cefb99d244b9167314128578e477808c-image-1470948228670.png)\r\n\r\n[//]: + # (https://images.code.org/e0cf14ae384355129b32b73ef64ed77e-image-1470948281047.png)" + CSD U3 collisions open_markdown_instruction: "# Your Choice\r\n\r\nYou've + seen sprites do many things when they collide with each other: rotate, disappear, + change animation, or even make a new sprite appear on the screen. Now it's + your turn to choose what the sprites can do. Decide what two animations you + want to use for your sprite, and what you want to happen when they touch each + other, then code your choice. You may also choose to change the position, + speed, and direction of your sprites.\r\n\r\n# Do This\r\n* Decide what your + sprites should look like, and use `setAnimation` to give them that image\r\n* + Change the starting position of your sprites in the `createSprite` block\r\n* + Use `setSpeedAndDirection` or `velocityX` and `velocityY` to make your sprites + move how you want\r\n* Use the `if` block, with `isTouching` and `rotate`, + `visible`, `setAnimation` or any other block to make your sprites react when + they collide." + CSD U3 collisions overlap x_markdown_instruction: "# Turtle Race\r\n\r\nThe + turtle moves forward every time you press the left key. When he touches the + finish line, he should get a trophy. The trophy will appear when `isTouchingX` + is true. Can you add code to make sure it is set to true when the turtle + gets to the finish line?\r\n\r\n# Do This\r\n\r\nAdd code inside the draw + loop to set the values of the variables that have been created for you. Then, + test your program by playing the game.\r\n\r\n\r\n[//]: # (https://images.code.org/af2cffe952997258eb6b5573cfe9a29f-image-1470188585528.png)\r\n\r\n[//]: + # (https://images.code.org/d2eb9684743d45ef1e10ff4602936107-image-1470188590517.png)\r\n\r\n[//]: + # (https://images.code.org/98aee1ed11c7e00cd66718b4c232ab66-image-1470190293465.png)\r\n\r\n[//]: + # (https://images.code.org/fb129d34e3089763f35dfc8980d705ea-image-1470191576501.png)\r\n\r\n[//]: + # (https://images.code.org/3fc6da739dfd31b256618a560c12a076-image-1470191923150.png)" + CSD U3 collisions overlap y_markdown_instruction: "# Fried Egg\r\n\r\nIt's + breakfast time! When the egg hits the pan, it should start to fry. Can you + add code so that isTouchingX is set to true at the right time?\r\n\r\n# Do + This\r\n\r\nSet the values of the variables so that `isTouchingX` is true + when the egg hits the pan.\r\n\r\n[//]: # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: + # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: + # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: + # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: + # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: + # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" + CSD U3 collisions overlap_markdown_instruction: "# IDEK\r\n\r\nThis is Tracey's + idea. Apparently horses turn into unicorns when they go through rainbows? Use + your arrow keys to aim the rainbow at the unicorn, then hit the space bar + to make it fly toward the horse.\r\n\r\n# Do This\r\n\r\nUse two `if` blocks + together to change the sprite's animation when the two sprites touch each + other. Then play the game to test your code.\r\n\r\n[//]: # (https://images.code.org/4d1d0e36e574117140ecc377d406c1de-image-1470256869920.png)\r\n\r\n[//]: + # (https://images.code.org/b913bc2ee2231b908892472240a70105-image-1470256869922.png)\r\n\r\n[//]: + # (https://images.code.org/558b42903bf40cc26410e651a85de922-image-1470256869923.png)\r\n\r\n[//]: + # (https://images.code.org/1d41d2e5b3b55037911b8f73bdc2ff48-image-1470257277875.png)" + CSD U3 collisions pinball_markdown_instruction: "# Panda Game\r\n\r\nPress + \"Run\" to try out the game on the left. You can use the left and right arrow + keys to control the paddle. What types of sprite interactions do you see? Which + ones will use the `isTouching` block? Which interactions have their own blocks?\r\n\r\n# + Do This\r\n\r\nPlay the game a few times and discuss with your partner what + how you would program the different sprite interactions.\r\n" + CSD U3 collisions pinball2_markdown_instruction: "# Panda Game\r\n\r\nHere + is the same game, but missing most of the interactions. All of the missing + interactions should be inside the \"spriteInteractions\" function. ([Show + me where](#triggercallout=code_triggered)) The comments will help you remember + which interactions are missing.\r\n\r\n# Do This\r\n\r\nUse the blocks you + know to program back the missing interactions.\r\n" + CSD U3 collisions pirate_markdown_instruction: "# Hide your treasure\r\n<img + style=\"float: right\" src=\"https://images.code.org/2bcf0ba8d5efe69c4531627f2c4d2a1f-image-1472600812452.gif\" + />\r\nYour enemies are still after your treasure. Use the arrow keys to move + the person around the screen. Can you change the code so that she can push + the treasure behind the tree?\r\n\r\n# Do This\r\n\r\nUse `displace`, `collide`, + `bounce`, or `bounceOff` to make the sprites interact in the right way.\r\n\r\n[//]: + # (https://images.code.org/732942eef4d0c288bf445a4478aee6ec-image-1470947222110.png)\r\n\r\n[//]: + # (https://images.code.org/1458d90cb97f3bd37508fa0ec3d997f8-image-1470947222109.png)\r\n\r\n[//]: + # (https://images.code.org/56da2ef5cef40080e0d677c86aec3901-image-1470947222108.png)" + CSD U3 collisions predict set velocity code_markdown_instruction: "# Sprite + Interactions\r\n\r\nSo far you've been able to create simple sprite interactions + by using the `sprite.isTouching()` block. For example, you've reset a coin + to a different location on the screen when a character touches it. Now it's + time to start making sprites have more complex interactions.\r\n\r\n# Do This\r\n\r\n* + Run the program and observe the interaction between the two sprites\r\n* Discuss + with a Neighbor: Using only the commands you already know how could you create + this kind of interaction? There's many ways to do it, but here are some blocks + to consider.\r\n\t* `sprite.isTouching()`\r\n * `sprite.velocityX`\r\n * + `sprite.velocityY`\r\n * `sprite.x`\r\n * `sprite.y`\r\n\r\nBe ready + to share your ideas with your classmates." + CSD U3 collisions predict set velocity_markdown_instruction: "# Setting Velocity\r\n\r\nThis + program creates two sprites, one that's standing still in the middle of the + screen and the other that moves towards it. Notice the one important line + of code in this program\r\n\r\n\tif(sprite1.isTouching(sprite2)){\r\n\t\tsprite2.velocityX + = sprite1.velocityX;\r\n }\r\n\r\n# Predict\r\n\r\nWhat do you think will + happen when the two sprites touch? Write your answer and reasonings in the + space below. Then run the code to see for yourself.\r\n\r\n" + CSD U3 collisions scoreboard_markdown_instruction: "# Scoreboard\r\n\r\nYou + can also use `isTouching` to decide whether you should increase the score. In + this game, the score is stored inside the 'score' variable. It is displayed + on the screen using the `text` block. [Show me where](#triggercallout=code_triggered)\r\n\r\n# + Do This\r\n\r\n* Use the `if` and `isTouching` blocks to determine whether + the bunny has caught the carrot. [Show me where](#triggercallout=code_triggered2)\r\n* + If it has, do the following three things:\r\n * use the counter pattern on + the score variable to increase the score.\r\n * reset the carrot's x position + off the right hand side of the screen\r\n * set the carrot's y position to + a random number between 10 and 390" + CSD U3 collisions setCollider_markdown_instruction: "# setCollider\r\n\r\nSprites + interact based on the size and shape of their collider, not the images that + are assigned to them. You can only see the collider when debug mode is turned + on. You can change the shape of the collider using the `sprite.setCollider()` + block, which lets you pick between a \"rectangle\" or a \"circle\". By default + all colliders are \"rectangle\".\r\n\r\n# Do This\r\n\r\n* Find the `sprite.setCollider()` + block for the gold coin, and change it from \"rectangle\" to \"circle\"\r\n* + Add a new `sprite.setCollider()` block for the silver coin, and choose \"circle\" + for the shape of the collider\r\n* Run the code again to see how the sprites + bounce.\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: + # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" + CSD U3 collisions sidescroll2_markdown_instruction: "# Improve Your Game\r\n\r\nNow + that you know how to use `isTouching` and `playSound`, you can make some fun + things happen when your sprites run into each other.\r\n\r\n# Do This\r\n\r\n* + Add at least two effects when your sprites collide.\r\n\r\n*Challenge: Add + a scoreboard to the top of your screen.*\r\n" + CSD U3 collisions sundae_markdown_instruction: "# collide()\r\n\r\nThe `collide` + block is similar to `displace`, but it makes the sprite that uses it stop + when it is touching the other sprite. Can you use this to make the cherry + stop when it gets to the top of the ice cream sundae?\r\n\r\n# Do This\r\n\r\nUse + the `collide` block to make the cherry sprite stop when it runs into the ice + cream sprite.\r\n\r\n[//]: # (https://images.code.org/491fb8bff907a183bd1cf0061689d193-image-1470419927625.png)\r\n\r\n[//]: + # (https://images.code.org/ea2066d640e74284b8c48e382f56bf1b-image-1470419927627.png)" + CSD U3 collisions tennis_markdown_instruction: "# Tennis\r\n\r\nComplete the + tennis game by making sure the ball and the racket interact in the right way. + You can use your up and down arrows to control the racket.\r\n\r\n# Do This\r\n\r\nAdd + a `displace`, `collide`, `bounce`, or `bounceOff` block in the draw loop to + make the sprites interact as they do in the picture.\r\n\r\n_Challenge: Can + you add a scoreboard that will add a point every time the ball is hit, and + subtract one every time it's missed?_\r\n\r\n[//]: # (https://images.code.org/8d8cf039f50114c07a21e73bbc1c8dfe-image-1470418244037.png)\r\n\r\n[//]: + # (https://images.code.org/d05be653ae7e4717353dffd08af9c656-image-1470418244039.png)" + CSD U3 collisions try blocks_markdown_instruction: "# More Collision Blocks\r\n\r\nThree + new types of sprite interactions have been added to the toolbox, `sprite.collide()`, + `sprite.bounce()`, and `sprite.bounceOff()`. How do you think they'll affect + the sprites?\r\n\r\n# Do This\r\n\r\n* Switch out the displace block for the + `sprite.collide()`, `sprite.bounce()`, and `sprite.bounceOff()` blocks. [Show + me where](#triggercallout=code_triggered)\r\n\t* *Hint: If you're having + trouble doing this with blocks then switch over to text mode*\r\n* Discuss + with a neighbor: What is the difference between the four different sprite + interactions? What do you think the purpose of each block is?\r\n\r\n\r\n[//]: + # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: + # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" + CSD U3 collisions turtle_markdown_instruction: "# Debugging Sprite Interactions\r\n\r\nSprite + interactions just run some code when they're called. The interactions are + not \"remembered\" by the game. If you want one sprite to bounce or collide + with another then it needs to be a part of the draw loop. If you forget then + this can lead to unexpected behavior.\r\n\r\n# Do This\r\n\r\nThe turtle can + be moved with the arrow keys. It's not supposed to be able to walk through + the tree, but something is wrong in the code. Can you find and correct the + bug in the code?\r\n\r\n* Run the code and try to make the turtle collide + with the tree.\r\n* Look through the code and discuss with your partner what + the problem is.\r\n* Correct the code, then run it again to make sure it works." + CSD U3 collisions types_markdown_instruction: "# Collision Types\r\n\r\nThere + are four types of collisions that we use in Game Lab. These blocks will cause + a certain type of interaction between the _sprite_ and its _target_.\r\n\r\n## + displace\r\n\r\nThe `displace` block causes the sprite to push the target + as long as they are touching each other. The sprite keeps moving normally.\r\n\r\n## + collide\r\n\r\nThe `collide` block makes the sprite stop when it runs into + the target. If the target is moving, it will push the sprite with it. The + target keeps moving normally.\r\n\r\n## bounce\r\n\r\nThe `bounce` block makes + the sprite and the target bounce when they touch each other. Both the sprite + and the target change how they are moving.\r\n\r\n## bounceOff\r\n\r\nThe + `bounceOff` block makes the sprite bounce off the target. The target keeps + moving normally.\r\n\r\n\r\n\r\n# Do This\r\n\r\nChoose the best block to + model the basketball bouncing off the floor. [Show me where](#triggercallout=code_triggered)\r\n\r\n[//]: + # (https://images.code.org/24355fc6377cfafdce3ce2b3568a33c3-image-1470343728940.png)\r\n\r\n[//]: + # (https://images.code.org/87e4306e0371c7975b8fb2583657ee4a-image-1470343728942.png)" + CSD U3 finishing touches_markdown_instruction: "# Finishing Touches\r\n\r\nNow + that you have the basis for your game, it's time to add some finishing touches.\r\n\r\nTo + make your game even better, try making at least two improvements to it. You + can use the list below to help you, or you can come up with your own improvements + that you'd like to make.\r\n\r\n* Find a way to keep your player from going + off the edges of the screen.\r\n* Add a different item for your player to + collect or avoid that are worth different point values.\r\n* Make a variable + to keep track of how many lives your player has, and then end the game when + the lives run out.\r\n* Add sprites that move in the background of your game.\r\n* + Make another background to switch to when the score gets even higher, or when + the game ends.\r\n* Give your game a way to end. Possible events to end your + game could be the score reaching a certain value, or the amount of lives to + keep the game running runs out.\r\n* If your game has platforms, try making + the objects in your game interact with these platforms in some way." + CSD U3 game animations_markdown_instruction: "# Create your Animations\r\n\r\nNext + you will create your animations in the animation tab. Don't forget to make + multiple animations if you want your sprite to change appearance according + to how it's moving.\r\n" + CSD U3 game backgrounds_markdown_instruction: "# Create your Backgrounds\r\n\r\nNext, + you'll create all of the background functions that you need for your game. Some + games only have one background, and others have more than one that's chosen + according to user score or another aspect of gameplay. You'll need to create + a function for each separate background in your game. You'll write the code + to choose the correct background in the next level.\r\n\r\n* [Show me the + block to create a new function](#triggercallout=callout1)\r\n* [Show me the + area in the code to put my function](#triggercallout=callout2)\r\n\r\nAfter + you create your functions, test them by calling them inside the draw loop, + one background per test.\r\n\r\n* [show me the block to call my function](#triggercallout=callout3)" + CSD U3 game choose background_markdown_instruction: "# Choose your Backgrounds\r\n\r\nNow + that you have the backgrounds that you need, you'll write the code to choose + the correct background. You've seen this done in [Stage 15 Level 11](/s/csd3/stage/15/puzzle/11).\r\n\r\nAfter + you've written the code, test it by changing the starting value of your variables + and making sure the correct background shows up.\r\n" + CSD U3 game create sprites_markdown_instruction: "# Create your Sprites\r\n\r\nNext + you will create your sprites and give them starting properties in the \"Create + Sprites\" area of your code. For each sprite your should:\r\n\r\n* Create + the sprite in the correct place on the screen\r\n* Set its animation (or color + and size)\r\n* Set its velocity and rotation speed, if needed\r\n* Set its + collider and bounciness, if needed\r\n\r\nAfter you create each sprite, test + it before making the next one. If your sprite starts off screen, first place + it on the screen to test it, them move it back off screen once you know that + it looks right.\r\n\r\nIf your sprites position will need to be reset later + in your game, it's a good idea to make a function that sets the position + of this sprite that you can use again later.\r\n" + CSD U3 game display boards_markdown_instruction: "# Display Boards\r\n\r\nNow + that your backgrounds are working, you can add your display boards. Most + games have a score board, but you might also want to display information about + player level or lives remaining. Look at [Stage 12 Puzzle 9](/s/csd3/stage/12/puzzle/9) + for an example of how to make a scoreboard.\r\n\r\nFor each display board:\r\n* + Create a function to display the information\r\n* Call the function in the + draw loop\r\n\r\nBe sure to test your boards by changing the starting value + of your variables and making sure the board also changes when you run the + code.\r\n" + CSD U3 game interactions_markdown_instruction: "# Sprite Interactions\r\n\r\nThe + last step is to create the functions that make your sprites interact in the + right ways. You'll need a function for each type of sprite interaction. + You can use the `collectItems` in [Stage 17 Puzzle 17](/s/csd3/stage/17/puzzle/17) + and `displaceEnemies` in [Stage 16 Puzzle 15](/s/csd3/stage/16/puzzle/15) + as examples.\r\n\r\nFor each interaction:\r\n* Create a function in the functions + area of your code\r\n* Call the function inside the draw loop\r\n\r\nAfter + you make each function, run the code to test it before making another.\r\n" + CSD U3 game sprite movement_markdown_instruction: "# Sprite Movement Functions\r\n\r\nNow + you'll make the functions that make the sprite move in different ways as + the game is played. Some examples of functions that you've written are `loopPlatforms` + in [Stage 17 Puzzle 9](/s/csd3/stage/17/puzzle/9) and `playerFall` in [Stage + 17 Puzzle 14](/s/csd3/stage/17/puzzle/14).\r\n\r\nFor each movement:\r\n* + Create a function that will make the sprite move in that way\r\n* Call the + function inside the draw loop\r\n" + CSD U3 game user controls_markdown_instruction: "# User Controls\r\n\r\nNext, + you'll want to make sure your user controls are working. Create a function + that makes your sprites respond to user controls as defined in your project + guide. You can use the function in in [Stage 16 Puzzle 13](/s/csd3/stage/16/puzzle/13) + as an example.\r\n" + CSD U3 game variables_markdown_instruction: "# Create your Variables\r\n\r\nFirst, + you'll need to create all of your variables and put them in the variables + area of your code.\r\n* [Show me the block](#triggercallout=callout1)\r\n* + [Show me the area in the code](#triggercallout=callout2)\r\n\r\nDon't forget, + each variable needs a label (name) and a starting value. You can change the + value of the variable later in your code." + CSD U3 platform background1_markdown_instruction: "# Background\r\n\r\nThe + first thing that you will create for your game is the background. The sample + game had two different backgrounds that were chosen according to the user's + score. The first background has already been created for you. Look at the + `background1` function in the code below to see how it works. [Show me where](#triggercallout=code_triggered1)\r\n\r\nIn + order for the background function to do something, you have to call it inside + the draw loop. [Show me where](#triggercallout=code_triggered2)\r\n\r\nThere + is also an empty function named `background2`. [Show me where](#triggercallout=code_triggered3) You + will need to fill that function with new code to make a different background, + then test the code by calling the function inside the draw loop.\r\n\r\n# + Do this\r\n\r\n* Read the code for `background1`\r\n* Fill the `background2` + function with new code for a second background.\r\n* Test your `background2` + function by calling it inside the draw loop.\r\n\r\n_Hint: It's much easier + to copy, paste, and make small changes to your code in text mode._" + CSD U3 platform background2_markdown_instruction: "# Choosing your Background\r\n\r\nNow + that you have your score variable, you can use it to choose the right background + for your game. You can see an example of changing your background according + to your score in [Stage 15 Level 11](/s/csd3/stage/15/puzzle/11)\r\n\r\n# + Do This\r\n\r\n\r\n* Inside the draw loop, use an `if` statement and your + two background functions to draw your background according to your score level.\r\n* + Test your code by changing the start score to 100, then running to code to + see whether the background changes.\r\n\r\n_Challenge: If you have a third + background, you can click the plus sign at the bottom of the `if` block. Another + space will appear for your third background function, as well as a place to + check the score again._\r\n" + CSD U3 platform challenge_markdown_instruction: "# Improve Your Game\r\n\r\nImprove + your game by adding in two or more of the features you saw in the last two + examples. You can use the list below to help you.\r\n\r\n* Choose new animations + for your player, platform, and items.\r\n* Prevent your player from going + off the side of the screen.\r\n* Add a different type of item for the player + to collect or avoid.\r\n* Add a variable that keeps track of how many lives + the player has, and end the game if the player runs out.\r\n* Make your player's + animation change direction when the player changes direction.\r\n* Change + the player to only jump when it is on a platform.\r\n* Add another background + and make it appear when the score gets even higher.\r\n* Make your items interact + with the platforms in some way." + CSD U3 platform challenge1_markdown_instruction: "# Collect Items\r\n\r\nLast, + you'll want your player to collect the items falling from the top of the + screen.\r\n\r\n# Do This\r\n\r\n* Create a `collectItems` function and add + it to the \"functions\" area of your code.\r\n* Use the `if` and `isTouching` + blocks to change the x and y position of the items when the player touches + them. You can look at the `loopItem` function for clues in how to reset the + item position.\r\n* Inside your `if` statement, add a counter pattern that + will increase the score every time the player touches an item. Look at [Stage + 12 Puzzle 8](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) + for an example.\r\n* Call the function inside the draw loop, in the \"update + sprites\" area of your code.\r\n* Run the code to test your function." + CSD U3 platform draw loop_markdown_instruction: "# Draw Loop\r\n\r\nOnce you + have functions that can draw what you want, you can put them inside a draw + loop.\r\n\r\n# Do This\r\n\r\n* Add the `function draw() {}` (draw loop) block + into the workspace.\r\n* Inside the draw loop, use an `if` block to choose + the correct background function to use [Remind me how](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/13/puzzle/10)\r\n* + After the if statement, use the function you wrote to display the current + information\r\n* Test your code by changing the starting value of your variables + and running it to see whether the correct information and background are drawn." + CSD U3 platform items_markdown_instruction: "# Create your Items\r\n\r\nNext, + you need to add in the items that fall from the top of the screen. In [Stage + 11 Puzzle 6](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/6), + you modeled falling using the counter pattern on `velocityY`. You can use + the same pattern to make your items fall from the sky. In our sample game, + our carrots rotated and bounced off the platforms, but you can choose to add + any other type of interaction that you like in the next level.\r\n\r\n# Do + This\r\n\r\n* Create an item sprite with the label and starting position that + you put on your worksheet.\r\n* Give the sprite the starting properties you + wrote on your worksheet.\r\n* Run the code to test your sprite.\r\n* Create + a function that checks whether the sprite is off the bottom of the screen, + and loops it back to the top of the screen if it is. (Look at [Stage 11 Bubble + 16](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/16) + to see an example of code that loops a sprite.)\r\n* Run the code to test + your sprite." + CSD U3 platform items1_markdown_instruction: "# Create an Item\r\n\r\n<img + src=\"https://images.code.org/2cdb64a2e23e68c8a86296240642cd13-image-1476211650103.gif\" + style=\"float:right;\">\r\n\r\nNext, you need to add the items that fall from + the top of the screen. These move just like the platforms, but faster. In + order to make the game more interesting, the items start at a random location + above the screen. For the sample game, the item's x position is a random + number between 50 and 350, and the y position is a random number between -30 + and -60.\r\n\r\n# Do This\r\n\r\n* Use the `createSprite` block to make an + item sprite in the \"create sprites\" section of your code.\r\n* Use the `randomNumber` + block inside your `createSprite` block to start the item at a random x and + y position.\r\n* Use `setAnimation` and `velocityY` to give your sprite the + correct image and make it fall from the top of the screen.\r\n* Run the code + to test your sprite." + CSD U3 platform items2_markdown_instruction: "# Loop your Item\r\n\r\n<img + src=\"https://images.code.org/bf06ad06acbba65dfd48b63608a08c90-image-1476212006882.gif\" + style=\"float:right\">\r\nNow that your item is falling, you can add code + to loop it back to the top. This is similar to what you did for the platform + sprite, but the item sprite will loop back to a random x and y location when + it goes to the top of the screen.\r\n\r\n# Do This\r\n\r\n* Create a `loopItems` + function that uses an `if` block to check whether the item sprite is off the + bottom of the screen, then sends the item back to a random x and y position, + just as it did when you first created the sprite.\r\n* Call the function inside + the draw loop\r\n* Run the code to test your sprite." + CSD U3 platform items3_markdown_instruction: "# Make your Second Item\r\n\r\n<img + src=\"https://images.code.org/dfd53f2ea4b4380c126dde8035bcdc45-image-1476212495388.gif\" + style=\"float: right\">\r\n\r\nNext, you'll copy and paste the code for your + first item to create a second item. Remember that this is a lot easier in + **text mode**, so be sure to try it out if you haven't already.\r\n\r\nYou'll + need to copy two parts of your code: the part at the beginning where you made + the item, and the part in your `loopItem` function, where you looped the item + back to the top of the screen.\r\n\r\n# Do This\r\n\r\n* Copy the code you + used to create the first item sprite (`createSprite`, `setAnimation`, and + `velocityY`), and paste it directly beneath the original code.\r\n* Change + the names of the sprite in the new lines. For example, if you named your + original sprite \"star\", you could name this one \"star2\".\r\n* Inside your + `loopItems` function, copy the if statement, then paste it directly underneath + the original code, inside the function.\r\n* Change the sprite name in the + new lines of code.\r\n* Run your code to test it.\r\n" + CSD U3 platform platform1_markdown_instruction: "# Create a Platform Sprite\r\n\r\n<img + src=\"https://images.code.org/6e5aa80eb72809d761a695fae1b42b81-image-1476210749306.gif\" + style=\"float: right;\"> \r\n\r\nNow that you have your background and your + variables, it's time to create your sprites. Usually, it will be easiest + to start with the sprites that are part of the environment, such as your platforms. The + sample game had two platform sprites, but you'll make just one first, then + test it before copying and pasting the code to make the second.\r\n\r\n# Do + This\r\n\r\n* Look at your worksheet and choose a platform sprite to create.\r\n* + In the \"Create sprites\" area at the top of your code, create your new sprite + with the `createSprite` block, giving it the correct position and label (name). + ([Show me the block](#triggercallout=callout))\r\n* Use the `setAnimation` + and `velocityY` blocks to give your sprite the correct image and downward + velocity.\r\n* Test the sprite to make sure that it's moving in the correct + way. You might need to adjust its velocity.\r\n\r\n_Hint: The sprite will + go off the screen and not come back. You'll make it loop back around in + the next level._\r\n" + CSD U3 platform platform2_markdown_instruction: "# Loop the Platform Sprite\r\n\r\n<img + src=\"https://images.code.org/6bfe6dd078b2022315a7f54a38c90826-image-1476211068588.gif\" + style=\"float: right;\">\r\n\r\nRight now, your platform sprite moves down, + but it doesn't loop back up to the top of the screen. You can look at [Stage + 11 Bubble 12](/s/csd3/stage/11/puzzle/12) to see an example of a sprite looping + around a screen.\r\n\r\n# Do This\r\n\r\n* Use the `function` block to create + a `loopPlatforms` function at the bottom of your code.\r\n* Use the `if` block + inside the function to check whether the platform has gone off the bottom + of screen and, if it has, move it back to the top of the screen.\r\n* Call + the function inside the draw loop, in the \"update sprites\" area.\r\n* Run + the code to test your sprite.\r\n\r\n_Hint: What will platform.y be when the + sprite moves off the bottom of the screen? What should platform.y be when + you put it back at the top of the screen?_\r\n" + CSD U3 platform platform3_markdown_instruction: "# Make your Second Platform\r\n\r\n<img + src=\"https://images.code.org/94abf92949a82f6ba18a8cfafb9231b1-image-1476211447371.gif\" + style=\"float:right;\">\r\n\r\nMaking a second platform will be easier than + making the first, because you can copy and paste a lot of the code, then make + a few small changes. This is a lot easier in *text mode*, so be sure to try + it out if you haven't already.\r\n\r\nYou'll need to copy two parts of your + code: the part at the beginning where you made the platform, and the part + in your `loopPlatforms` function, where you looped the platform back to the + top of the screen.\r\n\r\n# Do This\r\n\r\n* Copy the code you used to create + the first platform sprite (`createSprite`, `setAnimation`, and `velocityY`), + and paste it directly beneath the original code.\r\n* Change the names of + the sprite in the new lines. For example, if you named your original sprite + \"platform\", you could name this one \"platform2\".\r\n* Change the starting + position of your new platform sprite.\r\n* Inside your `loopPlatforms` function, + copy the if statement, then paste it directly underneath the original code, + inside the function.\r\n* Change the sprite name in the new lines of code.\r\n* + Run your code to test it.\r\n\r\n_Challenge: You can make your platforms appear + at random x positions when they loop back to the top of the screen._\r\n" + CSD U3 platform player1_markdown_instruction: "# Create your Player\r\n\r\n<img + src=\"https://images.code.org/8358b8d2eef2461e113e0b3093da7403-image-1476212944204.gif\" + style=\"float:right\">\r\n\r\nNow you can create your player sprite. Just + like the item sprites, the player sprite will fall from the top of the screen. Unlike + the items, your player sprite will get faster as it falls, just like real + falling objects. This is what allows it to jump up, and fall back down.\r\n\r\n# + Do This\r\n\r\n* Use the `createSprite` block to make a player sprite with + the label and starting position that you put on your worksheet.\r\n* Use `setAnimation` + to give it the correct image.\r\n* Create a `playerFall` function that makes + the sprite fall from the top of the screen. The code inside the function + should use `velocityY` in a counter pattern, just as when you made the falling + rock in [Stage 13 Puzzle 4](/s/csd3/stage/13/puzzle/4).\r\n* Call the `playerFall` + function inside the draw loop.\r\n* Run the code to test your sprite." + CSD U3 platform player2_markdown_instruction: "# User Controls\r\n\r\nNext, + you should add user controls so that you can move your player around. Your + player needs to move to the left when the left arrow key is pressed, to the + right when the right arrow key is pressed, and jump when the space bar is + pressed.\r\n\r\n# Do This\r\n\r\n* Create a new `controlPlayer` function in + the \"functions\" area of your code.\r\n* Inside the `controlPlayer` function, + use the `if`, `keyDown`, and `sprite.x` blocks to make your player move to + the left and right according to the arrow keys. Look at <a href=\"/s/csd3/stage/8/puzzle/15\" + target=\"_blank\"> Stage 8 Puzzle 15 </a> for examples.\r\n* Inside the `controlPlayer` + function, use the `if`, `keyDown`, and `velocityY` blocks to make your player + jump when the up arrow is pressed. Look at <a href=\"/s/csd3/stage/11/puzzle/10\" + target=\"_blank\"> Stage 11 Puzzle 10 </a> for an example.\r\n* Call the `controlPlayer` + function inside the draw loop.\r\n* Run the game and test your code.\r\n" + CSD U3 platform player2b_markdown_instruction: "# Add Reset\r\n\r\nNow that + your player is falling, you can add code to reset him when he gets to the + top.\r\n\r\n# Do This\r\n\r\n* Create a function that checks whether the player + sprite is off the bottom of the screen, and decreases the number of lives + by one if it is.\r\n* Use the function inside the draw loop.\r\n* Run the + code to test your function.\r\n* Once you have decreased the lives, you need + to check whether the player has run out. Add code to your function that checks + to see whether the player's lives equals 0. If they do equal zero, use the + `text` block to write \"GAME OVER\" in the middle of the screen. Otherwise, + reset the sprite to the top of the screen.\r\n" + CSD U3 platform player3_markdown_instruction: "# Player Interactions\r\n\r\nThe + last part of making your game is programming the player interactions with + the other sprites. First, your player needs to land on the platforms.\r\n\r\n# + Do This\r\n\r\n* Create a `playerLands` function and add it to the \"functions\" + area of your code.\r\n* Inside the function, use the `collide` block so that + your player can land on both the platforms.\r\n* Call the function inside + the draw loop.\r\n* Run the code to test your function.\r\n" + CSD U3 platform player4_markdown_instruction: "# Collect Items\r\n\r\nLast, + you'll want your player to collect the items falling from the top of the + screen.\r\n\r\n# Do This\r\n\r\n* Create a `collectItems` function and add + it to the \"functions\" area of your code.\r\n* Use the `if` and `isTouching` + blocks to change the x and y position of the items when the player touches + them. You can look at the `loopItem` function for clues in how to reset the + item position.\r\n* Inside your `if` statement, add a counter pattern that + will increase the score every time the player touches an item. Look at [Stage + 12 Puzzle 9](/s/csd3/stage/12/puzzle/9) for an example.\r\n* Call the function + inside the draw loop, in the \"update sprites\" area of your code.\r\n* Run + the code to test your function." + CSD U3 platform sample_markdown_instruction: "# Platform Jumper\r\n\r\nThe + game on the left is an example of a platform jumper. Press \"Run\" to play + it. You can make the bunny bump with the space bar, and move it to the left + and right with the arrow keys. You score by collecting carrots, and if you + score high enough, the background will change.\r\n\r\nYou have three lives, + so if you fall to the bottom of the screen three times, the game will be over.\r\n\r\nYou + already know how to use all the blocks you need to make a game just like this + one, and you'll be making your own platform jumper in this lesson." + CSD U3 platform sample1_markdown_instruction: "# Platform Jumper\r\n\r\nThe + game on the left is an example of a platform jumper. Press \"Run\" to play + it. You can make the alien jump with the up arrow, and move it to the left + and right with the arrow keys. You score by collecting stars, and if you + score high enough, the background will change.\r\n\r\nYou already know how + to use all the blocks you need to make a game just like this one, and you'll + be making your own platform jumper in this lesson.\r\n\r\nYou can see other + examples of platform jumpers in the next two levels." + CSD U3 platform sample2_markdown_instruction: "# Plane Jumper\r\n\r\nHere's + another example of a platform jumper, but it has a few more features. You + can use it to get ideas to improve your own game. For example, there is a + coin sprite that gives the player an extra life.\r\n\r\nChoose one or more + of the following changes and add them to your game.\r\n* Choose new animations + for your player, platform, and items.\r\n* Make it impossible for your player + to go off the left or right of the screen.\r\n* Add a different type of item + for the player to collect or avoid.\r\n* Add a variable that keeps track of + how many lives the player has, and end the game if the player runs out.\r\n\r\n" + CSD U3 platform sample3_markdown_instruction: "# Bunny Jumper\r\n\r\nHere's + another example of a jumper. In this one, the items get faster when they + fall, and bounce off the platforms.\r\n\r\nChoose one or more of the following + changes and add them to your game.\r\n* Make your player's animation change + direction when the player changes direction.\r\n* Add another background and + make it appear when the score gets even higher.\r\n* Make your items interact + with the platforms in some way.\r\n\r\n" + CSD U3 platform scoreboard_markdown_instruction: "# Make the Scoreboard\r\n\r\n<img + src=\"https://images.code.org/ea490a1915a70676fd3a783adce93cdd-image-1476142534609.png\" + style=\"float:right;\">\r\n\r\nYou'll also need a scoreboard so the player + can keep track of the score. There's already a `showScore` function written, + but it only shows the text \"Score\" and not the actual score. ([Show me where](#triggercallout=code_triggered)) You + can see an example of a working scoreboard in [Stage 12 Puzzle 9](/s/csd3/stage/12/puzzle/9).\r\n\r\n# + Do this\r\n\r\n* Read the code in the `showScore` function.\r\n* Call the + function inside the draw loop, right after you draw the backgrounds.\r\n* + Use the `text` block to display the score at the top of the screen." + CSD U3 platform variable1_markdown_instruction: "# Score Variable\r\n\r\nNow + that you've created your backgrounds, you'll need to choose when each background + is drawn. For that, you'll need a score variable to hold information about + your player's score.\r\n\r\nYou should always give your variables a starting + value at the very beginning of the program. That way, they are available + for any code that comes after.\r\n\r\n# Do This\r\n\r\n* Create a score variable + at the beginning of your game program. [Show me the block](#triggercallout=callout)\r\n* + Set the score equal to 0." + CSD U3 platform variables_markdown_instruction: "# Variables and Display\r\n\r\nIn + our sample game, we kept track of the score and the number of lives left, + then displayed them at the top of the screen. For your game, you'll need + to create a variable for each piece of information you want to keep track + of during the game. Once you have your variables, you can create a function + to display information at the top of the screen for the player.\r\n\r\n# Do + This\r\n\r\n* Create the variables that you listed on your planning sheet + and give them starting values.\r\n* Use the `text` block to display information + about the variables on the screen. You can use `textSize` and `fill` to change + the way the text looks.\r\n* Make a new function and put the code that displays + the information inside of it.\r\n\r\n_Hint: You can look at [Stage 12 Bubble + 8](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) to + see a working scoreboard. Scroll down in the code until you see the comment + \"draw score\"_" + CSD U4 - Design Mode Input Widgets_markdown_instruction: "# Input Elements\r\n\r\n<img + src=\"https://images.code.org/108fcc6fc89bf88edde00353afb33d75-image-1469814642375.49.23.png\" + style=\"float: right; width: 150px\"/>\r\nButtons are a great way to navigate + around your app, and text labels are the primary way to display content in + your app. When it comes to taking input from your users, sometimes you need + a place for them to type or boxes to check. The **Text Input**, **Dropdown**, + **Radio Button**, and **Checkbox** elements all provide ways for your users + to input information to your app.\r\n\r\n# Do This\r\n\r\nChoose at least + two of the input elements, and for each one:\r\n\r\n* Drag it out and position + it on the screen\r\n* Change the id to something meaningful\r\n* Read through + the properties and experiment with them\r\n* Add a label element next to each + that describes what they do (don't forget to give it an id too!)\r\n\r\n" + CSD U4 - Design Mode Project_markdown_instruction: "# Mocking Up Your App\r\n\r\nNow + that you have some practice laying out elements in App Lab you can start working + on mocking your own app. With your group divvy up the screens so that everyone + is working on a different screen. Because you'll be dividing the work up + you'll want to do some planning ahead of time to deicde on a common look + and feel for your pages. For example, you'll want to agree on things such + as:\r\n\r\n* Where do navigation buttons go?\r\n* What colors will you use + for backgrounds, text, and buttons\r\n* What's the general style and layout?\r\n\r\n# + Do This\r\n\r\n* Decide on a _namespace_ for your page, this will be something + you add to the beginning of every id so that your element ids don't conflict + with others when you merge everyone's screens together\r\n\t* For example, + if you are making the home page, you might use \"home_\" as your namespace + - leading to ids such as:\r\n \t* \"home_title\"\r\n * \"home_loginButton\"\r\n * + \"home_logo\"\r\n* Use the built-in elements to lay out your app screen\r\n* + For any components of your app that can't be recreated with the built in + elements you can either:\r\n\t* Redesign to utilize built in elements\r\n * + Find an image to use in place of your element\r\n * Draw the element using + your preferred image editor\r\n* Share your design regularly with your teammates + to ensure consistent style" + CSD U4 - Design Mode Text_markdown_instruction: "# Adding Text\r\n<img src=\"https://images.code.org/86ba633e04f90f3ca47dff3dcd064847-image-1469812708683.15.36.png\" + style=\"float: right; width: 75px\"/>\r\nThe label element lets you add any + text you'd like to your app. Just drag out a label block and set its \"text\" + property. \r\n\r\n# Do This\r\nUse a label element to create a title for this + app.\r\n\r\n* Drag out a label and place it on the top of the screen\r\n* + Change the id to \"titleLabel\"\r\n* Change the text to \"My App\"\r\n* Increase + the font size\r\n* Choose a color you like for the title\r\n\r\n" + CSD U5 black white images pixelation_markdown_instruction: "# Do This\r\n\r\nUse + the pixelation widget to draw something a smiley face" + CSD U5 collection UPS_markdown_instruction: "<img src=\"https://images.code.org/db7d21a8d28df27dee3449939038c7a9-image-1488501564775.jpg\" + style=\"float:right;height:250px\">\r\n### Plan a Route\r\n\r\nRoutz is a + company that helps people navigate traffic. It has maps of locations all around + the world and knows real-time information about traffic conditions. When you + type in a destination you want to go, it will give you the best route it can + find.\r\n\r\nRoutz wants to improve its data to provide even better directions. + Your job is to help the company decide what data it could collect to improve + those directions.\r\n\r\n**What data should Routz collect to improve its recommendations + AND where could it get that data?**\r\n\r\n" + CSD U5 collection videos_markdown_instruction: "<img src=\"https://images.code.org/dbefd53cc9aaa2ee1c54f25afc88d860-image-1488492606296.jpg\" + style=\"float:right;height:300px\">\r\n\r\n### Make a Recommendation\r\n\r\nMeScreen + is a website where users can watch videos uploaded from all over the world. + It has millions of videos and users and new ones every day.\r\n\r\nMeScreen + recommends a Top Video to each of its users every day. You job is to collect + information about your users and your videos to make the best recommendation + you can.\r\n\r\n**What kinds of information should you collect AND how could + you get it?**" + CSD U5 color image_markdown_instruction: "# Paint by Numbers\r\n\r\nLook at + the binary code below. Use the patterns of ones and zeros to create the picture + the code represents. To paint each square, click on the color you want to + use, then click on the square.\r\n\r\n\r\n`011 011 011 011 011 011 011 011 + 110 110`\r\n\r\n`011 011 111 111 111 011 011 011 110 110`\r\n\r\n`011 111 + 111 111 111 111 011 011 011 011`\r\n\r\n`011 011 111 111 111 011 011 011 011 + 011`\r\n\r\n`011 011 011 011 011 011 011 010 011 011`\r\n\r\n`011 011 011 + 011 011 011 010 010 010 011`\r\n\r\n`011 011 011 011 011 011 010 010 010 011`\r\n\r\n`011 + 011 011 011 011 011 011 000 011 011`\r\n\r\n`001 001 001 010 010 010 010 000 + 010 010`\r\n\r\n`001 001 001 001 010 010 010 010 010 010`" + 'CSD: Boolean Expressions_markdown_instruction': "# Boolean Expressions Video" + 'CSD: Cake Defender Exemplar_markdown_instruction': "# Defend Your Cake!\r\n\r\nThis + is an example of a defender game that you'll build by the end of this lesson. + Move the alien with arrow keys to keep the ladybugs from getting to your cake. + How high of a score can you get?\r\n\r\n# Do This\r\n\r\nTurn to a classmate + and make a list of the following information.\r\n\r\n* How many sprites are + there in this game. Which are they?\r\n* What variables are needed to make + this game? What do they store?\r\n* If you were to split the code of this + game into functions what do you think they would be? What are the major pieces + of behavior you'd need to create in your code?" + 'CSD: Platform Jumper Exemplar_markdown_instruction': "# Platform Jumper\r\n\r\nThe + game on the left is an example of a platform jumper. Press \"Run\" to play + it. You can make the alien jump with the up arrow, and move it to the left + and right with the arrow keys. You score by collecting stars, and if you + score high enough, the background will change.\r\n\r\nYou already know how + to use all the blocks you need to make a game just like this one, and you'll + be making your own platform jumper in this lesson.\r\n\r\nYou can see other + examples of platform jumpers in the next two levels." + 'CSD: Slider Example_markdown_instruction': "# RGB Slider\r\n\r\nOver the next + couple levels you are going to learn about using sliders to get user input. + You will be creating this slider which controls the color of a button. You + will return to this project in later lessons to control lights!" + CSDU2 - 2nd Validator issue_markdown_instruction: "# Add head and title tags\r\n\r\nYou + should have ended up on this level because of one of the following errors:\r\n\r\n* + Element head is missing a required instance of child element title.\r\n* Element + title must not be empty.\r\n\r\nBoth of these error messages point out that + **every web page needs a title**. The title is more than just putting a header + on your page. A computer won't be able to easily go through the content of + your web page to find your header (it could be in lots of different types + of tags). So instead **every web page includes a title element marked by a + <title> tag.** This title does not show up anywhere on your page so + it is not part of the content of your page.\r\n\r\nSince the title is not + part of web page content it goes in a special area at the top. This area is + for all information about your web page that is not content. This information + is often called **metadata**. **Metadata goes in the head element marked + by a <head> tag.** The title element is a child element of the head + element so the title element goes inside the head element.\r\n\r\nExample:\r\n\r\n<pre>\r\n<head>\r\n <title> + My Awesome Website </title>\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* + Add a <head> element above the first content in your page\r\n* Add a + <title> element inside the <head> element. Makes sure to give + your page a descriptive title.\r\n* Once you have done this return to the + <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/3\">validator level</a>" + CSDU2 - About Me Page Styling_markdown_instruction: "# About Me Page\r\n\r\nThere + are many CSS properties and values that can be applied to HTML elements in + order to change their style. Use the checklist below to add style to the text, + image, and body elements. Remember to think about how your styling choices + will impact users view of the web page.\r\n\r\n# Do This\r\n\r\n* Add `<head>` + and `<body>` elements to your page\r\n* Add a `<title>` element to your page + inside the `<head>` element\r\n* Add a `<style>` element to your page\r\n* + Add styling of your choice to your About Me Page. Be sure to use at least + 5 different CSS properties.\r\n\r\n# Checklist\r\n\r\n* All content contained + in body element\r\n* All style contained in head element\r\n* At least 5 of + the following CSS Properties are used:\r\n\r\n| Color Properties | Text Properties + | Images Properties |\r\n| --------------- | --------------- |----------------- |\r\n| + `color` <br> `background-color` | `text-align` <br> `text-decoration` <br> + `font-family` <br> `font-size` | `height` <br> `width` <br> `border-width` + <br> `border-color` <br> `border-style` |\r\n\r\nIf you’ve used at least 5 + of the properties from the checklist, you can explore some additional text + and image CSS properties to add to your About Me page." + CSDU2 - About Me Page start_markdown_instruction: "# About Me Page\r\n\r\nYou + are going to make another page for your portfolio. This one will be your About + Me page. The project has been loaded with 6 different images. Two pictures + are associated with each question below.\r\n\r\n* Do you prefer chocolate + or vanilla ice cream?\r\n* Are you a dog or a cat person?\r\n* Do you prefer + watching a movie or reading a book?\r\n\r\nCreate a website that tells your + user more about you by answering the 3 questions and showing pictures for + each answer.\r\n\r\n# Checklist\r\n\r\n* At least three images\r\n* A large + header with the name of the page\r\n* Descriptions of your image choices for + each category inside a paragraph element\r\n* HTML document uses the correct + structure. (Doctype, html, head, and body)" + CSDU2 - Add doctype and html_markdown_instruction: "# Doctype and HTML tag\r\n\r\nWhen + a web browswer is trying to read your document it looks for alerts which tell + it which language you are using. In order to let the web browser know that + this is an html document you need to do two things:\r\n\r\n1. Add <!DOCTYPE + html> at the very top of your html file. <!DOCTYPE html> is always + the first thing in an html document because it notifies the computer that + this is an html document and to interpret it as such. <!DOCTYPE html> + is not technically a tag but instead an instruction to the web browser. \r\n\r\n2. + Wrap all the content of the file in an HTML element using the <html> + tag. The <html> tag notifies the computer where the html starts and + ends. The <html> tag is the container for all other HTML elements (except + for the <!DOCTYPE html> tag). So you need an opening and closing <html> + tag.\r\n\r\n# Do This\r\nThis is your Hobbies page from the last lesson.\r\n\r\n* + Add <!DOCTYPE html> at the top of your index.html file\r\n* Add <html> + right underneath <!DOCTYPE html> and add a closing </html> tag + at the end of index.html" + CSDU2 - Adding Personal Cause_markdown_instruction: "# Personal Cause\r\n\r\n**Circulate:** + As students are working on their research and website, check to make sure + that thay are using appropriately licensed media and proving accurate attribution. + Spot check by asking for the license details of specific images.\r\n\r\n\r\n# + Do This\r\n\r\n* Finish your personal website" + CSDU2 - Classes on ESS_markdown_instruction: "# Classes in External Style Sheets\r\nYou + may have also noticed these issues appearing.\r\n\r\n\t1.\tThe styling of + the `<img>` elements on one page should be different than the other\r\n\t2.\tFor + the `<h1>` headers, on one page we want to style them and on the other we + don't.\r\n\r\nLuckily you know classes and we can fix these with classes!\r\n\r\n# + Do This\r\n\r\n* Put the image on the home page in the \"home-image\" class\r\n* + Find the old style rule for images on the home page (width: 600px) and change + the selector so it will style the \"home-image\" class instead\r\n* Put all + the images on the technology page in the \"tech-images\" class\r\n* Find the + old style rule for images on the technology page (width: 100px) and change + the selector so it will style the \"tech-images\" class instead\r\n* Find + the h1 element on the technology page and put it in the class \"page-header\"\r\n* + Change the secltor for the style rule for h1 elements to be just a style rule + for the page-header class" + CSDU2 - Classes_markdown_instruction: "# Classes\r\n\r\nSometimes you only + want to style one specific element of a certain type instead of all elements + of one type. **Classes are HTML attributes that can be added to any HTML element + to group it with other elements. Classes allow for the group of elements to + have their own unique style.** This applies to elements on the same page or + on separate pages.\r\n\r\nTo style using classes:\r\n\r\n1. First you need + to mark the elements in html that will be in that class. \r\n2. Second you + need to write a style rule for that class. To write a rule for a class of + elements, the selector for the rule is a `.` before the class name. \r\n\r\nFor + example the code below would style the fancy class which has been set up for + a paragraph element:\r\n\r\n| HTML file | CSS File | Result |\r\n| --------- + | -------- | ------ |\r\n| <pre> <p class=\"fancy\">Good Day</p></pre> + |<pre>.fancy {<br> color: darkblue;<br> font-family: cursive;<br>} </pre>|<img + src=\"https://images.code.org/05110876c62dafe72a7d0ddf34f7ae07-image-1475009963479.58.30 + PM.png\" alt=\"result image\"> | \r\n\r\n# Do This\r\n\r\nThere are lots of + different `<h5>` elements on the page. We want to style them differently depending + on what season they are associated with.\r\n\r\n* For each season put all + the `<h5>` elements for that season in a class specific to that season. For + example all the winter `<h5>` elements would be in the class \"winter\".\r\n* + Style each class of `<h5>` elements with a different `color`" + CSDU2 - Copy Code_markdown_instruction: "# Adding HTML and CSS\r\n\r\nNow that + you have the files set up bring over your code for your Guinness Book of World + Records page.\r\n\r\n## Copy Code\r\n* Go to <a href=\"https://studio.code.org/s/csd2/stage/7/puzzle/8\" + target=\"_blank\">this level</a> and copy all the code from the HTML file. + Paste the code into the HTML file you just created.\r\n* Copy the CSS code + from the style sheet at <a href=\"https://studio.code.org/s/csd2/stage/7/puzzle/8\" + target=\"_blank\">this level</a> and copy it into the CSS file you just created." + CSDU2 - Debug images_markdown_instruction: "# Debug\r\n\r\n\r\n\r\n# Do This\r\n* + Look through at the src attribute and determine the cause. \r\n* Your goal + is to have an HTML page that displays 5 images. \r\n* Notice that the “alt” + attribute serves as a placeholder in case the image doesn’t load\r\n* It’s + also helpful to know what the picture should be about in case there’s a problem + with the file path" + CSDU2 - Debugging 1_markdown_instruction: "# Debugging\r\n\r\nComputer code + is written by humans and humans make mistakes. All computer scientists make + mistakes. So part of being a good computer scientists is about being able + to find your mistakes and fix them. In computer science we call mistakes **bugs**. + Bugs can be anything in code which causes it not to work as planned. The process + of finding and fixing those bugs is called **debugging**. Debugging is a + problem solving process so use your problem solving steps as you try to debug. + Over the next couple levels you are going to work on your debugging skills.\r\n\r\n<img + src=\"https://images.code.org/ed7cb1f2e093b9c36b82bfbf9bbcd76b-image-1474383288840.54.26 + AM.png\" style=\"float:right;border:black solid 5px;width:200px\">\r\n\r\nThe + desired web page is on the right. There are two issues with the starter web + page:\r\n\r\n1. The header won't show up as an h1 header.\r\n2. The list + doesn't seem to be formatting correctly.\r\n\r\n# Do This\r\n\r\n* Find and + fix all bugs in the starting HTML\r\n* Check that the final result matches + the image on the right." + CSDU2 - Debugging 2_markdown_instruction: "# Debugging\r\n<img src=\"https://images.code.org/61190513dba270c731251df168b98f80-image-1474383960371.02.38 + AM.png\" style=\"float:right;border:5px black solid;width:250px\">\r\n\r\nMore + debugging practice! This page is a little more challenging to debug than + the last one.\r\n\r\n# Do This\r\n\r\nFix the HTML so that the web page makes + the example on the right.\r\n\r\n* Find and fix all bugs in the starting HTML\r\n* + You will know you have found all the bugs when your page matches the one on + the right." + CSDU2 - Debugging 3_markdown_instruction: "# Debugging\r\n\r\nThis page has + images in it. Images make finding bugs a little more tricky. Can you debug + this page?\r\n\r\nAs you are debugging you may notice a new set of symbols + that look something like this:\r\n<pre>\r\n<!-- this is a comment -->\r\n</pre>\r\n\r\nThis + is a **comment**. Comments are written by computer scientists creating web + pages for themselves and other humans who might look at their HTML file. Comments + explain the different parts of the code and what it should create. Comments + might be able to help you debug.\r\n\r\n# Do This\r\n\r\n* Find and fix all + bugs in the starting HTML\r\n* You know you’ve found all of the bugs when + your page matches the <a href=\"https://thimbleprojects.org/danimcavoy/103295/\" + target=\"_blank\"> Target Page</a>." + CSDU2 - Debugging 4_markdown_instruction: "# Debugging\r\n\r\nSometimes bugs + in code aren't obvious in how the page displays. Remember that you want your + web page to display on any browswer so even though it displays nicely in one + place may not mean that it works everywhere. \r\n\r\n# Do This\r\n\r\n* Find + and fix all bugs in the starting HTML\r\n* You know you’ve found all of the + bugs when your page match’s the <a href=\"https://thimbleprojects.org/danimcavoy/103456\" + target=\"_blank\"> Target Page</a>" + CSDU2 - Developing Brand Style_markdown_instruction: "# Developing Brand Style\r\n\r\nAlright + now its time to start writing the style rules for your brand!\r\n\r\nYou will + notice that all the different basic elements you could have used on your web + pages are included on this page and you are given a style rule for each to + start with.\r\n\r\nIn addition there is a style rule for two classes: header + and content. You will be setting up these classes on all the pages of your + website using divs. The header class contains the title of the website as + well as the navigation to get around it. The content class contains everything + else.\r\n\r\n# Do This\r\n\r\n* Look up your colors RGB values from your <a + href=\"https://studio.code.org/s/csd2/stage/10/puzzle/4\" target=\"_blank\"> + Color Choice Level </a> and copy the RGB values into the block comment to + make it easier to style your page\r\n* Create style rules for all the basic + elements of a web page that might be included on your website\r\n* Create + style rules for the header and content classes. Consider having background + colors and borders on these sections to make them stand out from the background." + CSDU2 - Div_markdown_instruction: "# Div Element\r\n\r\nHTML elements allow + you to group together content on your web page that is connected. However + sometimes you want to group together multiple HTML elements into one connected + chunk and give it a style. To connect a set of HTML elements inside one element + you can use the `<div>` element.\r\n\r\nFor your Personal Website you are + going to start out by using this to group together the header section you + want to go on every page of your website. This will include the title of your + website as well as any navigation. Once you do this you can put a background + color on the whole div to make it look like one connected block.\r\n\r\n<pre>\r\n<div>\r\n <h1> + Title of Website </h1>\r\n <a href=\"index.html\"> Home </a>\r\n <a + href=\"page1.html\"> Page 1 </a>\r\n <a href=\"page2.html\"> + Page 1 </a>\r\n <a href=\"page3.html\"> Page 1</a>\r\n</div>\r\n</pre>\r\n\r\n# + Do This\r\n\r\n* Put all the navigation hyperlinks and page title in `<div>` + element\r\n* Add a `background-color` for the `<div>` element" + CSDU2 - External Style Sheets_markdown_instruction: "# External Style Sheet\r\n\r\nNow + that you have your colors and fonts, you can begin to think more about the + style rules of your brand. This is a simple template page that contains the + features your website might contain. You will use this page to play around + with the style rules until you find the right set of style rules for your + brand. These style rules will be common across all the pages on your website. + They will promote your own personal brand. Since they will be common across + all the web pages it would be nice if they could all be written in one place + instead of duplicating them on every page.\r\n\r\nYou can get clearer separation + of content and style by putting content and style in separate files. The new + file for CSS will be called an **external style sheet**. Most of the time + the file name will be **style.css**. Since the file ends in .css the web browswer + already knows that this is CSS code so we no longer need the `<style>` element + around it. \r\n\r\n# Do This\r\n\r\n* Add a new CSS file called style.css\r\n* + Copy all the CSS from inside the `<style>` element from the .html file to + the .css file\r\n* Delete the `<style>` element from the .html file" + CSDU2 - Finalize Personal Website_markdown_instruction: "# Consistent Style\r\n\r\nYour + site’s pages might look crazy since you pulled together the style of all the + pages in the last level. It is time to work on that. It will be up to you + to determine the style rules for your page. Remember best practice is to + only have one rule per html element. If you want to keep two different styles + for certain elements remember you can use classes. In addition you should + have taken time to plan out your consistent style design for website.\r\n\r\n# + Do This\r\n\r\n* Work on creating a consistent style for your website using + the external style sheet and style rules.\r\n* Use classes to make parts of + your website stand out." + CSDU2 - Finish Recipe_markdown_instruction: "# Finishing Recipe Page\r\n\r\nNow + its time to finish off your Recipe Page.\r\n\r\n* Add any more information + to your recipe page you think would be helpful such as how long it takes to + make or what meal of the day you usually eat it.\r\n* Finalize your Recipe + Page. Use the checklist below to make sure your page is complete. Remember + you can always go back and look at the example page.\r\n\r\n## Checklist\r\n\r\n* + All text contained in an HTML tag (header, paragraph, or list)\r\n* Unordered + list of ingredients\r\n* Ordered list of directions\r\n* Paragraph description + of the dish\r\n* Headers for each section\r\n* Title header at the top of + the page" + CSDU2 - First Debug_markdown_instruction: "# Debug\r\n\r\nMistakes happen when + you are programming. The great thing is that these mistakes help your code + get better and you become a better developer as you learn how to find the + mistakes. Mistakes in code are called **bugs** and the process of fixing the + bugs is called **debugging**. \r\n\r\n# Do This\r\nThe creator of this website + is having trouble so trouble. Debug this page so that it matches the example + on the next level. Your teacher may also be displaying the website at the + front of the room.\r\n\r\nAs you work to debug look specifically at:\r\n\r\n* + header elements\r\n* list elements\r\n* list item elements" + CSDU2 - First-Weblab_markdown_instruction: "# Adding Content\r\n\r\nStart creating + your first web page! Try to create a page with a title and two paragraphs.\r\n\r\n# + Do This\r\n\r\n* Write a sentence about your favorite animal\r\n* On a separate + line write another sentence about your least favorite animal.\r\n* Above both + sentences try adding a title that says \"Animals\"\r\n* Don't forget to click + <img src=\"https://images.code.org/6a35d13b10ed2029a9323c9cb555e39e-image-1477681291001.01.12 + PM.png\" style=\"width:100px\">\r\n* **What do you notice about the structure + of your content?**" + CSDU2 - Footer_markdown_instruction: "# Recreating Page\r\n\r\nAt the beginning + of class you looked at a web page and figured out which elements were styled + similarly. Using those guesses and the classes in the starter code can you + recreate the original page?\r\n\r\n# Do This\r\n* Look at the class style + rules to see what they do. Don't worry if you don't know every property + yet. Just use the ones you do know.\r\n* Put elements in the appropriate classes + to recreate the <a href=\"https://studio.code.org/s/csd2/stage/9/puzzle/2\" + target=\"_blank\"> original page </a>" + CSDU2 - Header of Page_markdown_instruction: "# Header Area\r\n\r\nWebsites + usually have the same navigation bar across all of their pages so you can + get back and forth between things on the site. To do this you need to add + the navigation links to all the pages on your website.\r\n\r\n# Do This\r\n\r\n* + Copy the navigation links section onto all the web pages.\r\n* Copy any styles + you need into the style sheets for those pages." + CSDU2 - Headers_markdown_instruction: "<div style=\"float: right; height: 250px; + width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + are headers?**</summary>\r\nHeaders are the different sized section titles + throughout a web page. Headers add structure to your web page by breaking + it up so its easier for a user to read.\r\n</details>\r\n<details>\r\n<summary>**How + do I create a header?**</summary>\r\nYou can make something a header element + by surrounding it by header tags. For example:\r\n<pre> <h1> Header + Text </h1> </pre> <br> <br>\r\n\r\nNotice how there is a the opening + tag (<h1>) and closing tag (</h1>). The closing tag is the same + as the opening tag except it has `/` after the opening angle bracket. The + text you want to show as the header goes in the middle of the two tags.\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example: \r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is. HTML tags + add structure to the content of a web page.\r\n</details>\r\n<details>\r\n<summary>**Why + do you need an opening and closing tag?**</summary>\r\nYou need both an opening + and closing tag for many HTML elements because it marks where that structure + starts and stops. You don't want all the text on your web page to be a title.\r\n</details>\r\n</div>\r\n\r\n# + Headers\r\n\r\nYou may have noticed on the last level that everything you + type into the editor is getting smashed together. In order to differentiate + between these different parts we use HTML elements to mark the different parts + of a web page. In your investigation with the inspector did you come across + something that made headers?\r\n\r\n# Do This\r\n\r\n* Make your header \"Animals\" + stand out using the `<h1>` header element." + CSDU2 - Hobbies Valid Update_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is Doctype and how do I use it? **</summary>\r\n<!DOCTYPE html> is always + the first thing in an html document because it notifies the computer that + this is an html document and to interpret it as such. <!DOCTYPE html> + is not technically a tag but instead an instruction to the web browser. <br> + <br>\r\n\r\nAdd <!DOCTYPE html> at the very top of your html file. \r\n</details>\r\n\r\n<details>\r\n<summary>**What + is the <html> element and how do I use it? **</summary>\r\n\r\nThe <html> + tag notifies the computer where the html starts and ends. The <html> + tag is the container for all other HTML elements (The <!DOCTYPE html> + tag does NOT go inside the html element). You will need an opening and closing + <html> tag. This will also make your preview of your website update + automatically if there are no issues with your code! <br> <br>\r\n \r\nWrap + all the content of the file in an HTML element using the <html> tag.\r\n\r\n</details>\r\n<details>\r\n<summary>**Why + do I need to structure the HTML document this way?**</summary>\r\nAlthough + many modern web browsers can make good assumptions about what language you + are writing in and where to find different information in your document, you + don't want to leave the display of you web page up to chance. To guarantee + the best results for displaying your web page on all computers you need to + assist the computer in figuring out where to find information. <br> <br>\r\n\r\nAs + you go forward you are going to need two different sections in your HTML file. + They will serve different purposes.\r\n<br><br>\r\n1. Content of the page<br>\r\n2. + Information about the page<br>\r\n<br>\r\nBy breaking up a web page this way + it is clear where to find the code that is creating the physical output on + the web page and which code is just information for the computer about the + page.<br><br>\r\n\r\nIn creating web pages we differentiate between these + two areas using the <head> and <body> elements. The <head> + element contains all the information about the page. The <body> element + contains all the content for a web page.\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What + is a head element?**</summary>\r\nThe <head> element contains all the + information about the page. This is extra information that is helpful for + the computer in displaying your web page but is not the physical content of + the web page. \r\n\r\nThe <head> element usually comes above the body + element but inside the <html> element. For right now it will be blank + but later we will learn important things that are added to the head.\r\n</details>\r\n\r\n<details>\r\n<summary>**How + is the head element different than the header elements? **</summary>\r\nThe + header elements (<h1> to <h6>) are used to display headers directly + on your web page for your user to see. The head tag marks the information + that is not user facing in your HTML document. \r\n</details>\r\n\r\n<details>\r\n<summary>**What + is the body element? **</summary>\r\n\r\n The <body> element contains + all the content for a web page. The HTML elements for your headers, paragraphs, + and lists should all go inside the <body> element.\r\n\r\n</details>\r\n\r\n</div>\r\n\r\n# + Update Hobbies Page\r\n\r\n<!DOCTYPE html>, <html>, <head>, + and <body> are important to add to your web page. Practice adding them + to update your Hobbies page. In all future levels they will be included for + you so you won't need to add themselves." + CSDU2 - HobbiesPage_markdown_instruction: "# Hobbies Page\r\n\r\nIn this level, + you’ll use what you’ve learned to create your Hobbies page. Get creative with + your Hobbies Page but make sure it meets the basic requirements in the Checklist + first.\r\n\r\n# Checklist\r\n\r\n* 1 title with large header size\r\n* At + least 3 medium headers with each hobby name\r\n* At least 3 small headers + with the amount of time you’ve been doing each hobby\r\n* At least a 2 to + 3 sentence description of each hobby under the hobby’s time inside paragraph + tags" + CSDU2 - HobbiesPageExample_markdown_instruction: "# Example Hobbies Page\r\n\r\nTO + DO: Make this an embed level\r\n\r\nOn the next level you are going to work + on creating your own Hobbies Page. This is an example of the type of page + you are working to create. Come back to this level for reference as needed + while creating your page." + CSDU2 - Inspector Warm Up_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**<span> + How do I use the Inspector Tool? </span>**</summary>\r\nThe Inspector Tool + is a great way to figure out what unfamiliar code in Web Lab. To turn on the + Inspector Tool click the <img src=\"https://images.code.org/188579d7c6e7645d0d2edd203a33bd63-image-1480361561351.31.56 + PM.png\" style=\"width:100px\">. You will know that the Inspector Tool is + on because the button will turn white and say Inspector: On. Once you turn + on the Inspector Tool you can hover over any element in the preview area and + Web Lab will highlight the associated code.\r\n</details>\r\n\r\n</div>\r\n\r\n# + Language Detective\r\n\r\nUse the Inspector Tool to check out the code for + this website someone created on Web Lab! Focus on the index.html file open + for now.\r\n\r\nTry to answer the following questions:\r\n\r\n* In what ways + is this language similar to or different from the languages your groups invented + in the last lesson?\r\n* What are the rules of this language?\r\n* How does + this language add structure to the website?\r\n\r\n**Wait for instructions + from your teacher before going on to the next level.**" + CSDU2 - Internet Speed Test_markdown_instruction: "# Peer Review\r\n\r\nToday + you are going to have other people look at your website and give feedback + on it.\r\n\r\n# Do This\r\n\r\n* Leave this open on your screen so your peer + reviewers can look at your work" + CSDU2 - Intro to CSS_markdown_instruction: "# Style Element\r\n\r\nUp until + now you have only been able to add content to your page. In Web Developers + intentionally separate content and style to make their code easier to maintain. HTML + is the language used to add content to a web page. CSS is a language that + adds style to a web page. \r\n\r\nIn CSS style rules are used to style certain + elements of HTML. Style rules explicitly call out certain properties of the + element to be styled. To add CSS style rules to an HTML page, you need to + first add an HTML `<style>` element. This signals to the web browser that + all the stuff inside the `<style>` element is CSS styling instructions. \r\n\r\n\r\n# + Do This\r\n\r\n* Add the `<style>` element right below the opening `<html>` + tag. \r\n\r\nWe will add CSS to change the look of the page on the next level!" + CSDU2 - Intro to Validator_markdown_instruction: "# Validator\r\n\r\nThe validator + is a tool that allows you to check if a page is following good HTML fundamentals + and will work consistently across many different computers and web browsers.\r\n\r\n# + Do This\r\n\r\nUse the validator to check if the web page on this level meets + the requirements for consistent web pages. To use the validator, it’s important + to work on it one error at a time.\r\n\r\n1. Open up the <a href=\"https://validator.w3.org/\" + target=\"_blank\">W3 validator</a>.\r\n2. Click **\"Validate by Direct Input\"**\r\n3.** + Copy and paste the contents of index.html** file into the box.\r\n4. Click + **“Check”**\r\n5. If there is an error message click the top error below:\r\n\r\n\t* + <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> Unable to Determine + Parse Mode! </a>\r\n\t* <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> + No DOCTYPE found, and unknown root element. Aborting validation. </a>\r\n * + <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/5\"> Element head + is missing a required instance of child element title. </a>\r\n * <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/5\"> + Element title must not be empty.</a>\r\n * <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> + Start tag seen without seeing a doctype first. Expected e.g. <!DOCTYPE html>.</a>\r\n\r\n\tOnce + you fix the error start again at step 1.\r\n\r\n6. If there are no error messages + <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/6\">click here </a> + to head to the next set of levels!" + CSDU2 - Link Tag_markdown_instruction: "# Link Element\r\n\r\nIn the last level + you moved your style out into an external style sheet. You may have noticed + though that the style was no longer appearing on the page. To get the style + to apply to the web page we need to connect the html and css files.\r\n\r\n**To + link sheets you will need to add a `<link>` element.** The `<link>` element + goes inside the `<head>` element since it is information about the page and + not content of the page. You can link a stylesheet to multiple pages if you + want them all to have the same style.\r\n\r\n`<link>` element has two main + attributes: `rel` and `href`.\r\n\r\n* As you learned before for images the + `href` attribute is the file path, in this case just the same of the CSS file. \r\n* + The `rel` attribute indicates the relationship that the linked file has to + the current file, in this case its a stylesheet.\r\n\r\nFor example:\r\n<pre>\r\n<head>\r\n <link + rel=\"stylesheet\" href=\"styles.css\">\r\n</head>\r\n</pre>\r\n\r\n# + Do This\r\n\r\n* For the index.html link the css file using the `<link>` element + in the `<head>` element" + CSDU2 - Link and Nav_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + are hyperlinks?**</summary>\r\nHyperlinks can connect to local web pages or + external web pages. To add navigation to your website you will need to add + hyperlinks which connect your individual web pages. You can **add hyperlinks + to your web page using the `<a>` element**. The text you want to display + as the hyperlink goes between the opening and closing hyperlink tags. The + `<a>` element has an attribute `href` which is the location to link to. The + location of a local page is just the file path for that page. <br> <br>\r\n\r\nFor + example to link to the unique houses page you would add the following code + inside your `<body>` element. <br><br>\r\n\r\n<pre>\r\n<a href=”houses.html”> + Unique Houses </a>\r\n</pre>\r\n\r\n</details>\r\n<details>\r\n<summary>**How + do I add a hyperlink?**</summary>\r\nYou can **add hyperlinks to your web + page using the `<a>` element**. The text you want to display as the hyperlink + goes between the opening and closing hyperlink tags. The `<a>` element has + an attribute `href` which is the location to link to. The location of a local + page is just the file path for that page. <br> <br>\r\n\r\nFor example to + link to the unique houses page you would add the following code inside your + `<body>` element. <br><br>\r\n\r\n<pre>\r\n<a href=”houses.html”> Unique + Houses </a>\r\n</pre>\r\n\r\n</details>\r\n</div>\r\n\r\n# Hyperlink + Element\r\n\r\n* In the index.html file, find the line of code that says that + says `<a href=\"houses.html\">Odd Houses</a>`. This is a link that will take + you to the Odd Houses page at `houses.html`.\r\n* Discuss with a partner how + the code works.\r\n * Where does the file name go?\r\n * Where does the label + of the link go?\r\n* Below the hyperlink to the Odd Houses page add two new + hyperlinks (`<a>`) to the following pages:\r\n * Crazy Signs Page\r\n * + Guinness Book of World Records Page\r\n* Test it out to see if clicking the + links take you to the other pages of your site." + CSDU2 - Local Images_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + do I add images?**</summary>\r\nThe `<img>` tag allows you to show images + on your web page. <br><br>\r\n\r\nExample:\r\n<pre><img src=\"dog.png\" + alt=\"dog jumping\"/></pre><br><br>\r\n\r\nIn order to tell the browser + which file to use, extra information, called an **attribute**, is added to + the <img> tag inside the brackets. The attribute `src` stands for **s**ou**rc**e + and tell the name of the image. Image files names include extensions which + tell the computer which type of image they are working with. Common extensions + are .jpg, .jpeg, .png. <br><br>\r\n\r\nIn addition to have the src attribute, + image elements also have the `alt` attribute which describe the image. This + is important in case the image doesn’t load or for people who have trouble + with their eyesight. <br><br>\r\n\r\nAn `<img>` tag is an example of a **void + element** because it starts and closes in one tag. To mark this we put the + `/` which usually goes in the close tag at the end of the image tag.\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is a void tag?**</summary>\r\nAn `<img>` tag is an example of a **void element** + because it starts and closes in one tag. To mark this we put the `/` which + usually goes in the close tag at the end of the image tag. Void tags do not + need a closing tag because there is no text content which must be wrapped + in tags. The content that shows on the screen is specified through the tags + attributes.\r\n</details>\r\n<details>\r\n<summary>**Why does an image tag + not have a closing tag?**</summary>\r\nAn image tag is a void tag and void + tags do not need a closing tag because there is no text content which must + be wrapped in tags. The content that shows on the screen is specified through + the tags attributes.\r\n</details>\r\n<details>\r\n<summary>**What is an attribute?**</summary>\r\nAttributes + are extra information included in a tag. Attributes have names and values. + The name tells what type of information is being provided and then the value + gives the specific information for that tag. \r\n\r\nFor example <img> + tags have two attributes, src and alt. src specifies the name of the image + file and alt tells the browser in readable text what the image is.\r\n</details>\r\n</div>\r\n\r\n# + Images\r\n\r\nA Dog vs Cat web page has been started for you. The dog image + has already been added to the below web page. Use an image tag to add the + cat.jpeg image to the page below the cat header." + CSDU2 - Matching Class Style Checker_markdown_instruction: "# Check your matching + answers\r\n\r\nTest out your guesses from the matching activity by applying + the class styling to the elements and see if it produces the same result. + The results from the slide show are shown below.\r\n\r\n| Question 1 | Question + 2 | Question 3 | Question 4 | Question 5 |\r\n| ---------- | --------- | + ---------- | ---------- | ---------- |\r\n| <img src=\"https://images.code.org/702e804602dbf28874f516f1578fd883-image-1475259238611.54.05 + PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/7f6a2c9561213f6b5c8c9285f94ae850-image-1475259241204.25.16 + PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/291f01b170f9242a26f04f8eb8296471-image-1475259238611.52.46 + PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/81c9db1d1258f0fd709ba4508806388c-image-1475259238611.53.08 + PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/43df26d786235bf2402854b56c8bbcf5-image-1475259238610.50.22 + PM.png\" style=\"width:250px\"> |" + CSDU2 - Missing Home Link_markdown_instruction: "# Missing Home Link\r\n\r\nCopying + your hyperlinks to all your pages allowed you to get to most of the pages + on your website from any other page. One hyperlink is missing - the one to + get you to your home page (index.html).\r\n\r\n**Add a hyperlink to your home + page from all the pages, even your home page itself.** Adding it to your home + page will keep your navigation header consistent on all pages." + CSDU2 - Multi Site First_markdown_instruction: "# Making a Multi-page Site\r\n\r\nA + web site should include more than one web page, and they should connect to + each other. The first multi-page site you make will be a site of Odd Stuff. Most + of the site is already here, but you will need to add your Guinness Book of + World Records page.\r\n\r\n* In the list of project files, find index.html + and click on it. **index.html is used in Web Lab to mark the home page of + a website**, the first page that your visitors will see.\r\n* Click on some + of the other HTML files. These are also web pages, but they have different + names. **Every file needs a unique name that will help you know what it is.**\r\n* + Look around through all the files provided. Can you figure out which style + sheets go with which web pages?" + CSDU2 - Nav add to Personal Site_markdown_instruction: "# Navigation on Personal + Website\r\n\r\nNow that you have all the files for your website, connect them + together!\r\n\r\n# Do This\r\n\r\n* Add hyperlinks at the top of your index.html + file for every page on your site (including the index.html page).\r\n* In + your style sheet, create a rule-set for the `a` tag that gives it the style + that you want.\r\n* Copy the hyperlinks and put them in every page.\r\n\r\n\r\n* + Add the `a` rule-set to every style sheet, or combine your style sheets to + make your entire page have the same look and feel!\r\n\r\nOnce your website + is set up and connected, feel free to make improvements to any pages on your + website.\r\n\r\nBefore leaving this level:\r\n* Take a screenshot of your + home page and save it somewhere on your computer so you can find it later + (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Check List\r\n\r\n* All of your web pages are individual + HTML files in this Portfolio Project" + CSDU2 - Nav on Personal Website_markdown_instruction: "# Multi-Page Personal + Website\r\n\r\nNow that you know how to set up a website, go ahead and set + up your own personal website.\r\n\r\n# Do This\r\nYour personal website is + back. So far you have just your personal home page.\r\n\r\n* Add html files + for each of the Hobbies Page, Recipe Page, and About Me page\r\n* Copy the + code from the following levels <a href=\"https://studio.code.org/s/csd2/stage/4/puzzle/14\" + target=\"_blank\">Hobbies Page</a>, <a href=\"https://studio.code.org/s/csd2/stage/4/puzzle/17\" + target=\"_blank\">Recipe Page</a>, and <a href=\"https://studio.code.org/s/csd2/stage/8/puzzle/12\" + target=\"_blank\">About Me page</a> into the files you created.\r\n* Add a + CSS file for your <a href=\"https://studio.code.org/s/csd2/stage/8/puzzle/12\" + target=\"_blank\">\"About Me\" page style sheet</a>." + CSDU2 - New Class Files_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**Why + is the style sheet not working? **</summary>\r\nCheck in the HTML of the records + page to make sure that your link (`<link rel=\"stylesheet\" href=\"nameofstylesheet.css\">`) + is linking to the correct CSS file.\r\n</details>\r\n</div>\r\n# Making a + Multi-page Site\r\n\r\nYou may notice that your styles for your Guinness Book + of World Records don't seem to be working. Can you figure out why? \r\n\r\n**Hint:** + When you brought over your code you had to change the name of the style sheet + from \"style.css\" to something else." + CSDU2 - New Html Files_markdown_instruction: "# Adding HTML and CSS\r\n\r\nYou + will need to add your Guinness Book of World Records page. First create an + HTML and CSS file. On the next level you will bring over the code.\r\n\r\n## + Adding File\r\n* Add a new HTML file by clicking the \"Add HTML\" button.\r\n* + Rename the file, either by right clicking it and choosing \"Rename\", or by + clicking on it when it's already highlighted. **Make sure the name is unique, + descriptive and ends in \".html\"**.\r\n* Create a new CSS file and rename + it, too." + CSDU2 - PW - Class Style Personal Site_markdown_instruction: "# Free Play Styling\r\n\r\nYour + turn to decide what you want to style! Play with the classes styling and RGB + colors to improve your personal website.\r\n\r\n* Make sure you have completed + the checklist below \r\n* Take a screenshot of your home page and save it + somewhere on your computer so you can find it later (*Need help with how to + screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Checklist\r\n\r\n* On your hobby page, give each hobby its + own text color using RGB values.\r\n* On your recipe page, give all the parts + of the ingredients list the same background color, including the title.\r\n* + Use classes to style at least 2 other elements of your personal website" + CSDU2 - PW - Classes on Recipe_markdown_instruction: "# Classes on Recipe Page\r\n\r\nIn + the next few levels, as a little more practice with style, you will style + some of the elements on your recipe page in order to give the appearance of + a notecard. You will want to make the background of the ingredients list and + the directions lists look like notecards.\r\n\r\n# Do This\r\n\r\n* In the + recipe page add the ordered list for directions to the \"notecard\" class\r\n* + In the recipe page add the unordered list for the ingredients to the \"notecard\" + class\r\n* Add a style rule for the notecard class but don't put anything + in it. You will start working on it on the next level." + CSDU2 - PW - Consistent Personal Site Style_markdown_instruction: "# Consistent + Style\r\n\r\nYour site’s pages might look crazy since you pulled together + the style of all the pages in the last level. It is time to work on that by + creating classes for style exceptions.\r\n\r\n# Do This\r\n\r\n* Identify + the exceptions to the style rules such as the note card styling\r\n* Use classes + to separate the styling of those unique elements\r\n* Move the styling for + those classes into your style.css file\r\n* Get ride of all `<style>` elements + and the style rules inside them\r\n* Your website should now have a consistent + look!" + CSDU2 - PW - Divs to break up the page_markdown_instruction: "# Header and + Content Divs\r\n\r\nGrouping together the different sections of a web page + will make styling the web page easier. It also helps make clear to the user + where to look for different content. You saw an example of this earlier in + the levels.\r\n\r\n# Do This\r\n\r\n* Put all the elements for the navigation + of the website and the title of the website in div if it not already\r\n* + Set the class of that div to be \"header\"\r\n* Put all the rest of the elements + on the page in a different div \r\n* Set the class for the second div to be + \"content\"\r\n* These will get styled on the next level!" + CSDU2 - PW - ESS Final touches_markdown_instruction: "# Finalizing Styling\r\n\r\nYou + should have completed styling your page with an external style sheet. Now + it is time to finish up anything you still want to work on.\r\n\r\n# Do This\r\n\r\n* + Go over the checklist below to make sure you have completed everything\r\n* + Work on continuing to improve your website!\r\n* Take a screenshot of your + home page and save it somewhere on your computer so you can find it later + (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Checklist\r\n\r\n* Picked and used a font pair consistently + across your website\r\n* Pick and used a color set of no more than 4 primary + colors across your website. It is okay if you use different shades of those + colors as well.\r\n* All style rules are in an external style sheet named + style.css\r\n* The style.css file is linked to all pages on the website\r\n* + Each page has:\r\n\t* Header div with the title of the website, the logo for + your website, and the navigation bar\r\n * Content div with the main content + of the web page\r\n * The logo as the favicon for that page\r\n* Clicking + the logo on any page will take you back to the home page" + CSDU2 - PW - External Style Sheets_markdown_instruction: "# External Style + Sheet\r\n\r\nAlright you just learned how to add an external style sheet to + create consistent style across a website. When there are specific things you + want to style differently you have practiced using classes. It is time to + use these in your Personal Website. To start, get all the style into one external + style sheet linked to each web page.\r\n\r\nYou can mark the different sections + of the .css file with comments. Comments in CSS use different notation than + comments in HTML. Comments in CSS look like this: `/* This is a comment */`\r\n\r\n# + Do This\r\n\r\n* Create a CSS file and name it style.css\r\n* Cut/Paste the + CSS code from your <a href=\"\" target=\"_blank\">style tester level</a> to + style.css\r\n* Link the stylesheet to each document in a project." + CSDU2 - PW - Favicon_markdown_instruction: "# Favicon\r\n\r\nSince you have + a logo for your website it would also be cool to have it be small image associated + your website. The small image associate with your website is called a **favicons**. + Favicon is short for favorite icon. It displays in the tab for a website, + when a website is bookmarked, and sometimes in the browsers address bar.\r\n\r\nFor + example when you open a tab for Code.org it might look like this. The icon + on the left is the favicon.\r\n\r\n<img src=\"https://images.code.org/9db8bd43bf27355cd6ed799358775140-image-1475697356699.55.40 + PM.png\">\r\n\r\nFavicons are metadata for the website since they are used + by the web browser and not content on the web page itself. Therefor they are + included in the `<head>` element. To add the favicon you use the `<link>` + element. The `href` still is the file path but the `rel` is \"shortcut icon\".\r\n\r\nFor + Example:\r\n\r\n<pre>\r\n<head>\r\n\t<link rel=\"shortcut icon\" + href=\"logo.png\" />\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* + Set your icon to be the favicon for your website. You need to add it to every + page for it show up on each page." + CSDU2 - PW - Final Classes Style_markdown_instruction: "# Note Card Styling\r\n\r\nNow + that you have the background of the note cards, you can finish up the styling + of the note card. \r\n\r\nBefore you start styling it is important to know + something about borders. So far you have controlled all four-sides of a border + at the same time. Sometimes you want to style just one border edge at a time. + To do this we just add the name of the side to the property. For example:\r\n\r\n<pre>\r\np + {\r\n\tborder-top-color: green;\r\n\tborder-bottom-style: solid;\r\n\tborder-right-width: + 20px;\r\n}\r\n</pre>\r\n\r\n# Do This\r\n<img src=\"https://images.code.org/b38ebda06d6ce76bd59aa93fa050290c-image-1475159743251.30.18 + AM.png\" style=\"width:400px;float:right\">\r\n\r\nStyle the note card so + it looks similar to the image on the right.\r\n\r\n* Make the writing on the + note card look like handwriting by using the font-family property and coloring + it different than the rest of the text on the page\r\n* Make all note cards + have a fixed width by setting the width of the notecard class to 500 pixels\r\n* + Make the note card pop and look 3D using border properties.\r\n\t* Set the + border color to the same color as the background of the card.\r\n * Set + the style to `outset`\r\n * Set the width to a small number of pixels\r\n* + Style the bottom border of all li elements to be black, solid, and 1 pixel.\r\n* + Style the bottom border of all h3 elements to be red, solid, and 1 pixel." + CSDU2 - PW - Image as A Link_markdown_instruction: "# Image as a Link\r\n\r\nNow + that you have a logo lets add it to your website. It will go on every individual + page in your header with your navigation and website title. Often clicking + on the logo of a website will take you back to the home page of a website. + So we will set that up as well.\r\n\r\nTo make an image also a link we just + wrap the `<img>` element in a `<a>` element.\r\n\r\n<pre>\r\n<a href=\"index.html\"> + <img src=\"logo.png\" alt=\"logo\"> </a>\r\n</pre>\r\n\r\n# Do + This\r\n\r\n* Upload your logo to your project.\r\n* Insert the logo using + an `<img>` element in the header div of each page\r\n* Make the image a link + by surronding the `<img>` element in an `<a>` element that directs to the + index.html page" + CSDU2 - PW - Pre Publishing 2_markdown_instruction: "# HTML Tags Check\r\n\r\nThe + next check should be for bugs or issues with your HTML. \r\n\r\n# Do This\r\n\r\n* + Make sure you are viewing your index.html file on Web Lab\r\n* Open your Web + Development Practices to page 2\r\n* Read through the list of basic HTML tags + you have seen\r\n* Check through your page to make sure you are using the + tags correctly and not missing tags" + CSDU2 - PW - Pre Publishing 3_markdown_instruction: "# Bugs Check\r\n\r\nThe + next check should be for general bugs.\r\n\r\n# Do This\r\n\r\n* Open your + Web Development Practices to page 3\r\n* Read through the list of bugs you + have seen\r\n* Check through your page to make sure none of those bugs are + appearing in your current website" + CSDU2 - PW - Pre Publishing 4_markdown_instruction: "# CSS Properties Check\r\n\r\nThe + next check should be for styles you still want to add or fix.\r\n\r\n# Do + This\r\n\r\n* Make sure you are viewing your style.css file on Web Lab\r\n* + Open your Web Development Practices to page 4\r\n* Read through the list of + basic CSS properties you have seen\r\n* Think about if there are styles you + still want to add or improve" + CSDU2 - PW - Pre Publishing 5_markdown_instruction: "# Personally Identifiable + Information Check\r\n\r\nEarlier in this lesson you made a list of information + you would not want to give away on your website. Use that list to check your + site. This is the most important step before publishing your website for all + to see.\r\n\r\n# Do This\r\n\r\n* Open your Web Development Practices to page + 5\r\n* Read through your list of rules for protecting your PII\r\n* Be a sleuth + on your own page and make sure people can not find out that important information + you want to protect.\r\n* Remove the information you don't want people to + know. This doesn’t have to mean stripping all of the personal importance out + of your site, it can be as simple as cropping an image to remove faces or + replacing your school’s name with “my school”." + CSDU2 - PW - Pre Publishing 6_markdown_instruction: "# Publishing!\r\n\r\nIt + is time to share your website!\r\n\r\n# Do This\r\n\r\n* Check your website + one more time to make sure you are ready to share it with others\r\n* Notice + the \"Share\" button has appeared at the top of the screen.\r\n* Click the + share button and copy the URL for your website.\r\n* Send that URL to friends + and family as instructed by your teacher.\r\n\r\nIf you made changes to your + home page during class make sure to take a screenshot of your home page and + save it somewhere on your computer so you can find it later (*Need help with + how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)" + CSDU2 - PW - Pre Publishing Access_markdown_instruction: "# Accessibility Check\r\n\r\nThe + next check should be for accessibility issues.\r\n\r\n# Do This\r\n\r\n* Open + your Web Development Practices to page 5\r\n* Read through the list of accessibility + issues you had identified\r\n* Make sure you fixed all the issues you had + listed\r\n* Check for any new content you have added for accessibility issues" + CSDU2 - PW - Pre Publishing Check_markdown_instruction: "# High Quality Features + Check\r\n\r\nUse your Web Development Practices - Project Guide to review + your website for publishing. First you will look at the list of features you + said you thought made something a high quality website to make sure you are + doing those things.\r\n\r\n# Do This\r\n\r\n* Open your Web Development Practices + to page 1\r\n* Read through the feature list\r\n* Pick a couple features you + might want to improve after reading the list" + CSDU2 - PW - Publish It_markdown_instruction: "# Publish It\r\n\r\n\r\n# Do + This\r\n\r\n* Publish it" + CSDU2 - PW - RGB color_markdown_instruction: "# RGB Color\r\n\r\nIn order to + get a nice “fake” notecard color, you will have to break out from the named + color values given in Web Lab. \r\nInstead, you will be using the RGB function, + which takes three values, the amount of red, green and blue you want in your + color. Each component of the color (red, green, blue) can have a value of + 0 to 255. Where 0 means the component color is not present or dark and 255 + means it is full present or bright.\r\n\r\nFor example:\r\n\r\n<pre>\r\n\r\nh1 + {\r\n\tcolor: rgb(120, 0, 255);\r\n}\r\n</pre>\r\n\r\nTo explore RGB colors + go to <a href=\"http://www.w3schools.com/colors/colors_rgb.asp\">W3 Schools + - RGB Colors </a>. There is a tool for you to play around with different RGB + values.\r\n\r\n# Do This\r\n\r\n* Play with the <a href=\"http://www.w3schools.com/colors/colors_rgb.asp\">W3 + Schools - RGB Colors </a> tool and find a color similar to this color: <img + src=\"https://images.code.org/2de78dc9667e9e6c77dc5e28b1de6b0d-image-1475095252137.40.30 + PM.png\" style=\"width:50px\">\r\n\r\n* Set the `background-color` of the + notecard class to the yellow you just created.\r\n\r\n*Hint: Yellow is a **bright** + color with **equal amounts of red and green**. *" + CSDU2 - PW - Title for Your Site_markdown_instruction: "# Website Title\r\n\r\nin + head element need to add title element with your title\r\n\r\nshows up in + the name of the tab\r\n\r\n# Do This\r\n\r\n* Stuff" + CSDU2 - PW - Validate Your Website_markdown_instruction: "# Validator\r\n\r\nThe + HTML is designed to display the same way on all computers, but sometimes you’ll + notice that different web browsers, or even different versions of the same + browser, display a website differently. Often this is because you either missed + a rule of HTML, or didn’t describe your content specifically enough. Fortunately + there’s a tool called the Validator that can check your code for errors!\r\n\r\n# + Do This\r\n\r\n* Open up the <a href=\"https://validator.w3.org/#validate_by_input\" + target=\"_blank\">Validator - Website</a>\r\n* For each html file in your + project\r\n\t* Copy the html into the box\r\n * Click check to see if there + are an error\r\n\t* Make a list of all unique errors.\r\n * For each error, + write in your own words what you think it means\r\n * For each error, search + to find a potential solution." + CSDU2 - Paragraphs 2_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is a paragraph element?**</summary>\r\nParagraphs are marked by opening(`<p>`) + and closing(`</p>`) tags as well. Paragraphs in HTML can be any length of + text from one word to a bunch of sentences. All of your text in your web page + should be contained in an HTML element (headers or paragraphs). Paragraphs + group together sets of sentences and put some space between that group of + text and the next group of text.\r\n</details>\r\n<details>\r\n<summary>**How + do I create multiple paragraphs?**</summary>\r\nParagraphs are marked by opening(`<p>`) + and closing(`</p>`) tags as well. To create more than one paragraph you will + want multiple sets of opening and closing `<p>` tags. For example\r\n<pre>\r\n\t<p>\r\n \tThis + is a paragraph.\r\n </p>\r\n\t<p>\r\n \tThis is another + paragraph.\r\n </p>\r\n</pre>\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example: \r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is.\r\n</details>\r\n</div>\r\n\r\n# + Paragraphs\r\n\r\nNow that you have a header try to separate the two sentences + like the example below using the paragraph element.\r\n\r\n<img src=\"https://images.code.org/12f8d4230fcd2144a5880815c8375149-image-1480364278934.12.18 + PM.png\" style=\"width:300px\">" + CSDU2 - Paragraphs 3_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + do I make different sized headers?**</summary>\r\nHeaders come in 6 different + sizes. So far you have primarily used the biggest one <h1>. The number + 1 in the HTML tag designates that this is the biggest header. The smallest + header is <h6>. You can also try the <h2>, <h3>, <h4>, + and <h5> tags which get smaller as the number gets larger.\r\n</h1>\r\n</details>\r\n<details>\r\n<summary>**What + are headers?**</summary>\r\nHeaders are the different sized section titles + throughout a web page. Headers add structure to your web page by breaking + it up so its easier for a user to read.\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example: \r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is.\r\n</details>\r\n</div>\r\n\r\n# + Header Sizes\r\nAdd the names of your favorite animals above the sentence + they go with. Make the names of the animals smaller headers than the \"Animals\" + title for the page. See the example below.\r\n\r\n<img src=\"https://images.code.org/1462f452bd2d983902f47e275da9fa90-image-1481137414337.03.11 + PM.png\" style=\"width:250px\">" + CSDU2 - Priority of CSS Rules_markdown_instruction: "# Priority of CSS Rules\r\n\r\nOn + the last level you moved all the style rules to one style.css file that is + linked to both web pages on the website. You may have noticed that the way + some of the styling of the elements on the two pages changed. Over the next + couple levels you will be working to fix this.\r\n\r\n## Multiple Rules for + One Element\r\n\r\nBy copying the style rules from two different pages into + one style sheet we created a couple cases where we have two style rules for + one element. Style rules are applied from top to bottom so when there are + multiple style-rules for the same properties of one element the one closer + to the bottom is the one that will appear.\r\n\r\nFor example if you had the + following style rules.\r\n\r\n<pre>\r\np{\r\n background-color: blue;\r\n}\r\np{\r\n background-color: + red;\r\n}\r\n</pre>\r\n\r\nThe pargraph elements would have a red background.\r\n\r\nTo + fix this issue the best thing to do is have one rule for each type of element.\r\n\r\n# + Do This\r\n\r\n* There are two style rules for `<div>` elements. They are + both the same. Delete one of them.\r\n* There are two style rules for `<body>` + elements. They are **different** but both just control the `background-color` + decide which of the two you would like to keep and get rid of the other one.\r\n* + Leave the duplicate `<img>` element style rules for now we will deal with + them on the next level." + CSDU2 - Recipe Page Start_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is. HTML tags + add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# + Recipe Page\r\n\r\nYou are going to start a new web page. This will be a favorite + recipe page. It will take a couple levels to build the page. Use your knowledge + from earlier in class to start getting it set up.\r\n\r\n# Do This\r\n\r\n* + Take out your recipe you picked.\r\n* Using a large header tag, put the name + of the recipe at the top of the page.\r\n* Create three smaller headers: Description, + Ingredients, and Instructions.\r\n* Add a paragraph element under the \"Description\" + describing the dish the recipe creates." + CSDU2 - Recipe Valid Update_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + do I alert the web browser what language I'm writing in?**</summary>\r\n\r\nYou + will need to add two things to your HTML document, Doctype and an html element. + \r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**Why do I need to add these + elements?**</summary>\r\n\r\nWhen a web browser is trying to read your document + it looks for alerts which tell it which language you are using. In order to + let the web browser know that this is an html document you need to tell it + what type of document it is deal with (Doctype) and where to find the code + (inside the html element).\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What + is DOCTYPE and how do I use it? **</summary>\r\n<!DOCTYPE html> is always + the first thing in an html document because it notifies the computer that + this is an html document and to interpret it as such. <!DOCTYPE html> + is not technically a tag but instead an instruction to the web browser. <br> + <br>\r\n\r\nAdd <!DOCTYPE html> at the very top of your html file. \r\n</details>\r\n\r\n<details>\r\n<summary>**What + is the HTML element and how do I use it? **</summary>\r\n\r\nThe <html> + tag notifies the computer where the html starts and ends. The <html> + tag is the container for all other HTML elements (The <!DOCTYPE html> + tag does NOT go inside the html element). You will need an opening and closing + <html> tag. This will also make your preview of your website update + automatically if there are no issues with your code! <br> <br>\r\n \r\nWrap + all the content of the file in an HTML element using the <html> tag.\r\n\r\n</details>\r\n\r\n</div>\r\n\r\n# + Doctype and HTML tag\r\n\r\nThis is your Recipe page from the last lesson. + Update it with elements that alert your browser which language the document + was written in by adding DOCTYPE and <html> elements.\r\n\r\n![](https://images.code.org/f75e718b8e40870e7b6d87c0efdfc0ae-image-1481320053480.png)" + CSDU2 - SEO 1_markdown_instruction: "# Personal Website: Search Engine Optimization\r\n\r\nYou + are going to update your website to optimize for finding it on a search engine. + It is important to know that your website it might not be easy to find on + a search engine. This might be partially a result of improvements you could + make to your website. However since your website is hosted by Code.org and + does not have a descriptive URL it might be harder to find.\r\n\r\n# Do This\r\n\r\n* + Run your website through the <a href=\"http://www.seocentro.com/tools/seo/seo-analyzer.html\" + target=\"_blank\"> SEO </a>\r\n* Write down the issues it highlights with + your website\r\n* We will learn how to fix some of those issues in the next + couple levels however some may be things you want to investigate on your own + later such as Social Media presence." + CSDU2 - SEO 2_markdown_instruction: "# Search Engine Optimization: Title\r\n\r\nOne + piece of metadata that should be included in every web page you create is + the website title. Although you may put an `<h1>` element on your page content + with the title of your website, the computer does not necessarily know that + is the title as there may be multiple `<h1>` tags on your page. To make clear + to the computer what the title is the `<title>` element is added as metadata + in the `<head>` element. Every page on your website needs it own title.\r\n\r\nExample:\r\n<pre>\r\n<head>\r\n\t<title> + My Website Title</title>\r\n</head>\r\n</pre>\r\n\r\nThis `<title>` + element is not displayed anywhere on the page but the browser may use it to + put a name in the tab of your web browser or display it when someone searches + for your website. In fact titles are very important to search engines because + titles are often a primary piece of information looked at by users to decide + which websites fulfill their needs.\r\n\r\n*Sometimes search engines will + still generate their own title for your page based on the user search and + what the algorithm of the search engine thinks is best for supporting what + the user is looking for.*\r\n\r\n## Guidelines for Creating Good Titles\r\n\r\nSince + titles are so important you will want to make sure you have good titles for + all the pages of your website. Here are a couple practices for making good + titles. \r\n\r\nMake your title:\r\n* **Descriptive:** Make sure your title + explains what someone will find on that page.\r\n* **Concise:** Keep your + title short. 5 words or less.\r\n* **Individual:** Don't use the same title + for multiple pages.\r\n\r\n# Do This\r\n\r\n* Add a `<title>` element to each + web page on your website" + CSDU2 - SEO 3_markdown_instruction: "# Search Engine Optimization: Description\r\n\r\nAnother + important piece of meta data used by search engines is the description. The + description is added using the `<meta>` element. It has two attributes, the + name and the content. The content is where the actual description goes. **Every + page should have its own description.**\r\n\r\n<pre>\r\n<head> \r\n\t<meta + name=\"description\" content=\"Your meta description goes here \" />\r\n</head>\r\n</pre>\r\n\r\nJust + like the title tag this will not show up physically on the page but will be + used by search engines to display information about your page. Sometimes the + description will also be used when you share the link on social media platforms. + \r\n\r\n*Just like titles the search engine might decide it knows best and + generate a description for the page that is different than the one you provided.*\r\n\r\n## + What goes in a description?\r\n\r\nA good description will follow these guidelines:\r\n\r\n* + **Descriptive:** Unique description of what someone will find on this page\r\n* + **Keywords:** Uses keywords in full sentence descriptions which someone might + use to search for your page\r\n* **Short:** Less than 150 characters\r\n* + **Avoid Special Characters:** Don't use special characters such as ‘”<>{}[]()\r\n* + **Enticing:** It makes someone want to look at your web page.\r\n\r\n# Do + This\r\n\r\n* Add descriptions to each web page on your website using the + `<meta>` tag \r\n* Test it out!\r\n\t* Open <a href=\"http://www.seocentro.com/tools/seo/seo-analyzer.html\" + target=\"_blank\"> SEO </a>\r\n * Re-load the results for your page to + use the most updated version\r\n * Under the <img src=\"https://images.code.org/01e0d19ff0278ba750efc3b3824b31b0-image-1477075078800.37.19 + PM.png\" style=\"width:80px\"> section there is a preview of the Google Search + results.\r\n \r\n*Remember that the search engine might still decide to + use something else as your description. Its not a big deal and its still important + to have a description.*" + CSDU2 - SEO 4_markdown_instruction: "# Search Engine Optimization: Keywords\r\n\r\n\r\n\r\n\r\n# + Do This\r\n\r\n* Meta name =”keywords” content=”blah” (http://searchengineland.com/meta-keywords-tag-101-how-to-legally-hide-words-on-your-pages-for-search-engines-12099)" + CSDU2 - SEO 5_markdown_instruction: "# Search Engine Optimization: Viewport\r\n\r\nYour + website can be used on many different devices. Those devices have different + screen sizes. Viewport tells the browser how to load your website depending + on the size of the browser. To get the browser to display your web page at + the width of the device you can use the `<meta>` element with the attributes + below. The `<meta>` element should go inside the `<head>` element with all + the other meta data.\r\n\r\n<pre>\r\n<meta name=\"viewport\" content=\"width=device-width, + initial-scale=1\">\r\n</pre>\r\n\r\n# Do This\r\n\r\n* Set the viewport + of your website using the above code." + CSDU2 - SEO Final_markdown_instruction: "# Search Engine Optimization: Final\r\n\r\nIn + the past levels you added metadata to your website to improve your search + engine optimization. Go back to your list of issues the Search Engine Optimizer + identified and see if there are any others you can solve.\r\n\r\n# Do This\r\n\r\n* + Check to make sure you have completed the checklist below\r\n* Continue to + optimize your site for better search engine results\r\n* Take a screenshot + of your home page and save it somewhere on your computer so you can find it + later (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Checklist\r\n\r\n* Every web page has metadata for title, + description and viewport to improve search engine optimization." + CSDU2 - Selector and Property_markdown_instruction: "# CSS Style Rules\r\n\r\nStyle + rules consists of two main parts: the selector and the property. All style + rules go inside the `<style>` element.\r\n\r\n# Selector\r\nThe selectors + can be any part of the web page you want to style. One way you can identify + parts of the web page is using the names of the element. Selecting an element + will make all elements of that type have the given styling. The selector name + for HTML elements is the name of the tag with the brackets removed. In the + below example the selector is `h1` and it will style all the h1 tags with + the properties inside the `{ }`.\r\n\r\n# Property\r\nThe property describes + which style component of the selected element to change. There are lots of + different style properties you can change about your web page. Not all properties + can be used for all elements.\r\n\r\nThe first property we will use is the + `color` property. The **`color` property sets the color of text** and works + for any text elements including paragraphs, lists and headers. There are tons + of colors you can choose. Luckily Web Lab pops up a list as you type. You + can also look at the full list of colors at <a href=\"http://www.w3schools.com/cssref/css_colors.asp\">W3 + Schools - CSS Colors</a>.\r\n\r\nExample:\r\n\r\nThe below style will make + all the h1 headers on the page have blue text.\r\n\r\n<pre>\r\n <style>\r\n h1{\r\n color:blue;\r\n }\r\n </style>\r\n</pre>\r\n\r\n# + Do This\r\n\r\n* Add a style rule for h1 headers so the text is green.\r\n* + Add another rule that defines the color of h3 headers. Pick any color you + would like." + CSDU2 - Separate Content and Style_markdown_instruction: "# Separate Content + and Style\r\n\r\nSoon you will get to apply your new brand style rules to + your website. Before you do that, though, let's investigate how to style + a multi-page website.\r\n\r\nAs already mentioned, from this point forward + we will be using external style sheets instead of styling inside the HTML + file because this keeps all the styling for the website in one place. However, + in order to do this you are going to have to pay extra close attention as + you remove your old styling. Even though you want consistent style on your + website, you will have exceptions to the style rules in certain cases. Exceptions + to the style rules might include the note card styling, which you worked on + in the last lesson. We would not want every list to have the note card styling, + just those specific ones on the recipe page.\r\n\r\nYou will never want to + have duplicate rules for the same selector. So there should not be two stylings + with `p` as the selector. Instead you need to leverage the ability to make + classes in order to have multiple styles for `<p>` elements. \r\n\r\nTo practice + this, we have a website with an external style sheet that also still has styling. + You will need to figure out how to keep the unique elements of the individual + web pages while getting a more consistent style across the pages.\r\n\r\nUnique + Elements You Want to Keep:\r\n\r\n\t1.\tThe styling of the `<img>` elements + on one page should be different than the other\r\n\t2.\tFor the `<h1>` headers, + on one page we want to style them and on the other we don't.\r\n\r\n# Do + This\r\n\r\n* Put the image on the home page in the \"home-image\" class\r\n* + Find the old style rule for images on the home page (width: 600px) and change + the selector so it will style the \"home-image\" class instead\r\n* Put all + the images on the technology page in the \"tech-images\" class\r\n* Find the + old style rule for images on the technology page (width: 100px) and change + the selector so it will style the \"tech-images\" class instead\r\n* Find + the h1 element on the technology page and put it in the class \"page-header\"\r\n* + Change the secltor for the style rule for h1 elements to be just a style rule + for the page-header class\r\n* Copy the three new style rules you created + into your style.css file.\r\n* Delete the `<style>` element and its contents + from both pages." + CSDU2 - SizeOfHeaders_markdown_instruction: "# Size of Headers\r\n\r\nThere + are different sized headers which are marked by the number next to the h in + the header tag. They go from <h1> to <h6> .\r\n\r\n| Example | + Result |\r\n| ------- | ------ |\r\n| <pre><h1> Shoulders </h1> + <br> <h2> Knees </h2> <br> <h3> Toes </h3></pre> | + <img src=\"https://images.code.org/4f252e3dce84a14e1bfdab373d3edbad-image-1473432674187.50.43 + AM.png\" style=\"width:200px\"> |\r\n\r\n# Do This\r\n* Predict what the result + of the code in the index.html file will look like. Pick from one of the 4 + options below.\r\n\r\n| Option 1 | Option 2 | Option 3 | Option 4 |\r\n| -------- + | -------- | -------- | -------- |\r\n| <img src=\"https://images.code.org/a4e973cc13db380ca1e1efeb4263974f-image-1473432905067.53.47 + AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/1c660b4e54a3e835250597cb261d8e17-image-1473432905068.54.08 + AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/22e9ae6a04afd8251b29939a6fa63411-image-1473432905069.54.25 + AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/0eee565202089d44a6bb5633603c45e0-image-1473432905069.54.50 + AM.png\" style=\"width:200px\"> |" + CSDU2 - Starting Personal Home Page_markdown_instruction: "# Starting Your + Home Page\r\n\r\nIn this lesson we are going to start putting together your + personal website! In order to do this you need to create your personal home + page.\r\n\r\n# Do This\r\n\r\nUsing your sketch of your personal home page + and personal web development practice packet as a guide:\r\n* Create as much + of the home page design as you currently know how to.\r\n* Take a screenshot + of your work and save it somewhere on your computer so you can find it later + (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)" + CSDU2 - Style to Personal Site_markdown_instruction: "# Style on Personal Website\r\n\r\nNow + that you have navigation on each page, you need to figure out how you want + to style your website. You have two choices:\r\n\r\n1. Make a style sheet + for each web page on your website\r\n2. Have one style sheet for your whole + website to give it a more consistent feel.\r\n\r\nPick one of the two choices + and style your website appropriately. Make sure to link the style sheet to + the page(s) you want it to apply to. Also make sure that the `a` rule-set + you created on the last level is applied to all your `a` tags.\r\n\r\nOnce + your website is set up and connected, feel free to make improvements to any + pages on your website.\r\n\r\nBefore leaving this level:\r\n* Take a screenshot + of your home page and save it somewhere on your computer so you can find it + later (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Check List\r\n\r\n* All of your web pages are individual + HTML files in this Portfolio Project\r\n* Navigation to all the pages exists + at the top of each individual page\r\n* Style has been applied to all pages + on the website" + CSDU2 - Sub Folders_markdown_instruction: "# Images\r\n\r\nWhen you have a + bunch of images in your project its good to put them all in a folder to help + organize your files.\r\n\r\nOnce files are in a folder you need to help the + computer find them by giving both the folder name and the file name. For + example to display the dog.png file in the folder called images we would use:\r\n\r\n<pre> + <img src=\"images/dog.png\" alt=\"dog jumping\" /> </pre>\r\n\r\nThe + folder names comes first follow by the image name. We separate them with a + / .\r\n\r\n# Do This\r\n* Add a folder called pictures\r\n* Move all the image + files into the pictures folder\r\n* Notice how all the pictures no longer + show but the text in the alt attribute does.\r\n* Update the links to the + images so they display again" + CSDU2 - Type Anything_markdown_instruction: "# Welcome to Web Lab!\r\n\r\n<img + src=\"https://images.code.org/12ffe6980a25a3664eabe69be487a921-image-1485384422334.jpg\" + style=\"width:700px; float:right\">\r\n\r\nThe platform you are in is called + Web Lab. There are three main parts of the screen in Web Lab.\r\n\r\n\r\n\r\n# + Do This\r\n\r\n* Try typing something in the Code Area\r\n* Press <img src=\"https://images.code.org/6a35d13b10ed2029a9323c9cb555e39e-image-1477681291001.01.12 + PM.png\" style=\"width:100px\"> to see it in the Preview Area!\r\n" + CSDU2 - Unordered Lists_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + are the two types of lists?**</summary>\r\n There are two types of lists in + HTML, ordered and unordered lists.\r\n</details>\r\n<details>\r\n<summary>**What + is an unordered list?**</summary>\r\nAn unordered list is just a set of bulleted + items.\r\n</details>\r\n<details>\r\n<summary>**How do I make an unordered + list?**</summary>\r\n\r\nAn unordered list element has the tag <ul> + . Notice that this is an abbreviation for <strong>U</strong>nordered <strong>L</strong>ist. + Each item on the list is marked by a list item element <li>. Notice + that this is also an abbreviation for <strong>L</strong>ist <strong>I</strong>tem. The + list item element is a child element which means that you don't use it on + its own. It is contained inside a list element. It can be helpful to indent + your <li> tags so its clear that is contained in the <ul> tags.\r\n\r\n<table + border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> + <ul> <br> <li>Red </li> <br> <li>Green </li> + <br> <li>Blue</li> <br> </ul> </pre></td>\r\n<td><img + src=\"https://images.code.org/25d4dfc9b6c448d0da305df66aa1dfb7-image-1473444368948.05.32 + PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is an ordered list?**</summary>\r\nAn ordered list is a set of bulleted items + which are numbered.\r\n</details>\r\n\r\n<details>\r\n<summary>**How do I + make an ordered list?**</summary>\r\n\r\nAn ordered list element has the tag + <ol> . Notice that this is an abbreviation for <strong>O</strong>rdered + <strong>L</strong>ist. Each item on the list is marked by a list item element + <li>. Notice that this is also an abbreviation for <strong>L</strong>ist + <strong>I</strong>tem. The list item element is a child element which means + that you don't use it on its own. It is contained inside a list element. + It can be helpful to indent your <li> tags so its clear that is contained + in the <ol> tag.\r\n\r\n<table border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> + <ol> <br> <li>Step 1 </li> <br> <li>Step 2 </li> + <br> <li>Step 3 </li> <br> </ol> </pre></td>\r\n<td><img + src=\"https://images.code.org/3ef357cfad8ac98a8b30beb229ebcb78-image-1473446360428.39.04 + PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is. HTML tags + add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# + Unordered Lists\r\n\r\nNow that you have the basic layout for your Recipe + page you need two lists. An ingredients list and a directions list. Start + by trying to create the ingredients list. All text on your web page should + go inside one type of HTML element (header, list, or paragraph).\r\n\r\n# + Do This\r\nUnder your ingredients header create an unordered list of ingredients." + CSDU2 - Using Your Colors_markdown_instruction: "# Using Your Font\r\n\r\nThere + are other uses for the `<link>` element. The `<link>` element also used to + import your chosen fonts. Since you will be using a font not from the typical + five font families, the browser needs to have a fall back plan in case it + can't load the font you wanted. To do this a back up font name is given.\r\n\r\nFor + Example:\r\n<pre>\r\nfont-family: 'Cabin', sans-serif;\r\n</pre>\r\n\r\nThe + font you want to use is listed first in `''` and then after a comma a back + up font from the 5 normal font families is give.\r\n\r\n# Do This\r\nSet up + your style rules to use your fonts you picked out.\r\n\r\n* Open the <a href=\"https://studio.code.org/s/csd2/stage/10/puzzle/3\" + target=\"_blank\">level where you chose your fonts. </a>\r\n* Open the link + for each of your chosen fonts.\r\n* For each font:\r\n\t* Click <img src=\"https://images.code.org/91720f2ecae50e22d3287a92e988ee35-image-1475609982999.39.20 + PM.png\" style=\"width:130px\"> at the top right of the page.\r\n * That + will pop up a tab at the bottom. Click on the tab to open it. The pop up will + contain the link tag as well as the style rule for your font-family.\r\n <img + src=\"https://images.code.org/1e8712c56112e85157da093349f4b93d-image-1475610080515.40.26 + PM.png\" style=\"width:330px\">\r\n * Copy the link tag in the `<head>` + element of your index.html file.\r\n <img src=\"https://images.code.org/65fe1b66992e199f7c82c1f59c98cac5-image-1475610080516.40.38 + PM.png\" style=\"width:330px\">\r\n * Copy the style property example into + your style.css file for later use. There is a block comment where you can + copy it for keeping. You can determine where it goes on the next level.\r\n <img + src=\"https://images.code.org/da2f5cdec56681e0e8fa161bdf40d7a0-image-1475610080516.40.43 + PM.png\" style=\"width:330px\">" + CSDU2 - Using Your Font_markdown_instruction: "# Using Your Font\r\n\r\nThere + are other uses for the `<link>` element. The `<link>` element is also used + to import your chosen fonts. Since you will be using a font not from the typical + five font families, the browser needs to have a fall back plan in case it + can't load the font you wanted. To do this a back up font name is given.\r\n\r\nFor + Example:\r\n<pre>\r\nfont-family: 'Cabin', sans-serif;\r\n</pre>\r\n\r\nThe + font you want to use is listed first in `''` and then after a comma a back + up font from the 5 normal font families is give.\r\n\r\n# Do This\r\nSet up + your style rules to use your fonts you picked out.\r\n\r\n* Open the <a href=\"https://studio.code.org/s/csd2/stage/10/puzzle/3\" + target=\"_blank\">level where you chose your fonts. </a>\r\n* Open the link + for each of your chosen fonts.\r\n* For each font:\r\n\t* Click <img src=\"https://images.code.org/91720f2ecae50e22d3287a92e988ee35-image-1475609982999.39.20 + PM.png\" style=\"width:130px\"> at the top right of the page.\r\n * That + will pop up a tab at the bottom. Click on the tab to open it. The pop up will + contain the link tag as well as the style rule for your font-family.\r\n <img + src=\"https://images.code.org/1e8712c56112e85157da093349f4b93d-image-1475610080515.40.26 + PM.png\" style=\"width:330px\">\r\n * Copy the link tag in the `<head>` + element of your index.html file.\r\n <img src=\"https://images.code.org/65fe1b66992e199f7c82c1f59c98cac5-image-1475610080516.40.38 + PM.png\" style=\"width:330px\">\r\n * Copy the style property example into + your style.css file for later use. There is a block comment where you can + copy it for keeping. You can determine where it goes on the next level.\r\n <img + src=\"https://images.code.org/da2f5cdec56681e0e8fa161bdf40d7a0-image-1475610080516.40.43 + PM.png\" style=\"width:330px\">" + CSDU2 - Validator Extension_markdown_instruction: "# Favorite Places\r\n\r\nLets + start a new page. This page will be about your favorite places to spend time. + This could be on your block, in your city or even somewhere you like to go + on vacation.\r\n\r\n# Do This\r\n\r\n* Add <!Doctype>, <html>, + <head>, <title> tags to set up your page correctly from the beginning.\r\n* + Use header and list elements to make a page describing your favorite places.\r\n\r\n# + Checklist\r\n* At least 1 header\r\n* At least 1 list\r\n* Description of + each of your favorite places\r\n* Consistency tags used correctly - <!Doctype>, + <html>, <head>, and <title>" + CSDU2 - Welcome-to-Weblab_markdown_instruction: "# Welcome to Web Lab!\r\n\r\nStuff\r\n\r\n# + Do This\r\n\r\n* Thing 1\r\n* Thing 2" + CSDU2 - add header to content_markdown_instruction: "# Adding Content Part + 2\r\n\r\nLet's add some headers to the document.\r\n\r\n# Do This\r\n\r\n* + Add a \"Favorite Animal\" title above your paragraph about your favorite animal.\r\n* + Add a \"Favorite Way to Travel\" title above your paragraph about your favorite + way to travel (car, plane, train, etc.)." + CSDU2 - body tags_markdown_instruction: "# Body Element\r\n\r\nAs mentioned + on the last level the `<body>`element can be useful for more than breaking + up your code. What if you wanted to put a background color on the whole page? + Since the `<body>` element contains all the content of the web page, styling + its `background-color` property will give the whole page a background color.\r\n\r\n# + Do This\r\n\r\n* Use a selector for the `<body>` element to set the `background-color` + of the page to something other than white" + CSDU2 - font properties_markdown_instruction: "# Font Properties\r\nThe way + text looks is called a font. Two properties that control font are `font-family` + and `font-size`.\r\n\r\n## font-family\r\nThere are 5 fonts that will look + the same across any browser:\r\n\r\n* serif\r\n* sans-serif\r\n* monospace\r\n* + cursive\r\n* fantasy\r\n\r\nWe will focus on using those font families to + start. To read more about font families you can go to <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\"> + W3 Schools - CSS font-family</a>\r\n\r\n## font-size\r\nThere are many values + that can be used to determine font-size. Pixels are the easiest to use. A + pixel is one tiny square on the screen. So when a font is 14px that means + its 14 pixels tall.\r\n\r\nFor more details on font properties go to <a href=\"http://www.w3schools.com/cssref/pr_font_font-size.asp\">W3 + Schools - font-size</a>.\r\n\r\n# Do This\r\n\r\n* Add a font-family property + to h1 style to make the font cursive\r\n* Make the text in all the paragraph + elements larger." + CSDU2 - head and body tag intro_markdown_instruction: "<div style=\"float: + right; height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**Why + do I need to structure the HTML document this way?**</summary>\r\nAlthough + many modern web browsers can make good assumptions about what language you + are writing in and where to find different information in your document, you + don't want to leave the display of you web page up to chance. To guarantee + the best results for displaying your web page on all computers you need to + assist the computer in figuring out where to find information. <br> <br>\r\n\r\nAs + you go forward you are going to need two different sections in your HTML file. + They will serve different purposes.\r\n<br><br>\r\n1. Content of the page<br>\r\n2. + Information about the page<br>\r\n<br>\r\nBy breaking up a web page this way + it is clear where to find the code that is creating the physical output on + the web page and which code is just information for the computer about the + page.<br><br>\r\n\r\nIn creating web pages we differentiate between these + two areas using the <head> and <body> elements. The <head> + element contains all the information about the page. The <body> element + contains all the content for a web page.\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What + is a head element?**</summary>\r\nThe <head> element contains all the + information about the page. This is extra information that is helpful for + the computer in displaying your web page but is not the physical content of + the web page. \r\n\r\nThe <head> element usually comes above the body + element but inside the <html> element. For right now it will be blank + but later we will learn important things that are added to the head.\r\n</details>\r\n\r\n<details>\r\n<summary>**How + is the head element different than the header elements? **</summary>\r\nThe + header elements (<h1> to <h6>) are used to display headers directly + on your web page for your user to see. The head tag marks the information + that is not user facing in your HTML document. \r\n</details>\r\n\r\n<details>\r\n<summary>**What + is the body element? **</summary>\r\n\r\n The <body> element contains + all the content for a web page. The HTML elements for your headers, paragraphs, + and lists should all go inside the <body> element.\r\n\r\n</details>\r\n</div>\r\n\r\n# + Head and Body\r\n\r\nFormat your HTML document with two sections using the + <head> and <body> elements as shown in the image below. From this + point forward anything you add to an HTML document should go inside either + the <head> or the <body> elements. Put all the content and structure + you have created so far inside the <body> element.\r\n\r\n<img src=\"https://images.code.org/2513d8f7c31e76c2ee5427e512a54a1c-image-1481559174341.png\" + style=\"width:300px\">" + CSDU2 - head body_markdown_instruction: "# Head and Body\r\n\r\nThere are now + two different sections of code in our HTML file:\r\n\r\n1. Content of the + page\r\n2. Information about the page (for right now just how to style it).\r\n\r\nIn + creating web pages we differentiate between these two areas using the <head> + and <body> elements. These elements are important for creating maintainable + code but will also be useful for other things as well. The <head> element + contains all the information about the page, also sometimes called **metadata**. The + <body> element contains all the content for a web page.\r\n\r\nOutline + of the structure of your web page:\r\n\r\n<pre>\r\n<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<style>\r\n \t\t<!--Styling + Goes Here-->\r\n\t\t</style>\r\n\t</head>\r\n\r\n\t<body>\r\n\t\t<!--Content + Goes Here-->\r\n\t</body>\r\n \r\n</html>\r\n</pre>\r\n\r\n\r\n# + Do This\r\n\r\n* Add a <head> element surrounding the styling for the + web page.\r\n* Add a <body> element surrounding the content for the + web page." + CSDU2 - image properties_markdown_instruction: "# Image Properties\r\n\r\nImages + elements also have properties that can change their style.\r\n\r\n## Size\r\nOne + of the image properties is size. You can control size of an image using the + `width` and `height` properties. The size is determined by the number of pixels + tall and wide an image is. Pixels is abbreviated to `px`. For example to + make all the images 100 pixels wide you would use:\r\n\r\n<pre>\r\nimg {\r\n\twidth: + 100px;\r\n}\r\n</pre>\r\n\r\nAlthough you can control both width and height + it is best practice to only set either width and height since setting both + can distort the image.\r\n\r\n\r\n\r\n## Borders\r\nBorders are a common property + for many elements including images. Borders consist of three properties: `border-style`, + `border-width` and `border-color`.\r\n\r\n<pre>\r\nimg {\r\n border-style: + dashed;\r\n border-width: 5px;\r\n border-color: blue;\r\n}\r\n</pre>\r\n\r\nFor + more information about borders go to <a href=\"http://www.w3schools.com/css/css_border.asp\"> + W3 Schools - Border Properties</a>.\r\n\r\n# Do This\r\n\r\n* Add a rule to + style img elements\r\n* Use the rule to set the width of all images to 200 + pixels\r\n* Add borders to all images. Be creative and try different border + styles and colors." + CSDU2 - ordered Lists_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + are the two types of lists?**</summary>\r\n There are two types of lists in + HTML, ordered and unordered lists.\r\n</details>\r\n<details>\r\n<summary>**What + is an unordered list?**</summary>\r\nAn unordered list is just a set of bulleted + items.\r\n</details>\r\n<details>\r\n<summary>**How do I make an unordered + list?**</summary>\r\n\r\nAn unordered list element has the tag <ul> + . Notice that this is an abbreviation for <strong>U</strong>nordered <strong>L</strong>ist. + Each item on the list is marked by a list item element <li>. Notice + that this is also an abbreviation for <strong>L</strong>ist <strong>I</strong>tem. The + list item element is a child element which means that you don't use it on + its own. It is contained inside a list element. It can be helpful to indent + your <li> tags so its clear that is contained in the <ul> tags.\r\n\r\n<table + border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> + <ul> <br> <li>Red </li> <br> <li>Green </li> + <br> <li>Blue</li> <br> </ul> </pre></td>\r\n<td><img + src=\"https://images.code.org/25d4dfc9b6c448d0da305df66aa1dfb7-image-1473444368948.05.32 + PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is an ordered list?**</summary>\r\nAn ordered list is a set of bulleted items + which are numbered.\r\n</details>\r\n\r\n<details>\r\n<summary>**How do I + make an ordered list?**</summary>\r\n\r\nAn ordered list element has the tag + <ol> . Notice that this is an abbreviation for <strong>O</strong>rdered + <strong>L</strong>ist. Each item on the list is marked by a list item element + <li>. Notice that this is also an abbreviation for <strong>L</strong>ist + <strong>I</strong>tem. The list item element is a child element which means + that you don't use it on its own. It is contained inside a list element. + It can be helpful to indent your <li> tags so its clear that is contained + in the <ul> tag.\r\n\r\n<table border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> + <ol> <br> <li>Step 1 </li> <br> <li>Step 2 </li> + <br> <li>Step 3 </li> <br> </ol> </pre></td>\r\n<td><img + src=\"https://images.code.org/3ef357cfad8ac98a8b30beb229ebcb78-image-1473446360428.39.04 + PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is. HTML tags + add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# + Ordered Lists\r\n\r\nCreate an ordered list for each step in your recipe under + the Directions header" + CSDU2 - p tags_markdown_instruction: "# Background Color\r\n\r\nAnother common + CSS property used to style pages is `background-color`. This property will + set the background color of a specific element. You can use any of the CSS + colors for background color.\r\n\r\nFor example the code below will set the + text color of all h1 elements to blue and the background color to red.\r\n\r\n<pre>\r\nh1 + {\r\n\tcolor: blue;\r\n\tbackground-color: red;\r\n}\r\n</pre>\r\n\r\n# Do + This\r\nTry out the `background-color` property with paragraphs.\r\n\r\n* + Give all the paragraphs (`<p>`) elements a background color of your choice." + CSDU2 - testing something_markdown_instruction: "# Welcome to Web Lab!\r\n\r\nHTML + is a language to express content on the web. HTML stands for Hypertext Markup + Language. This means you are just using special sets of characters to define + the content of a website.\r\n\r\nThe platform you are in is called Web Lab. + It lets you write HTML on one side of the screen and see the results on the + other.\r\n\r\n# Do This\r\n\r\n* Use the Inspector Tool to find where the + HTML code for “Welcome to Web Lab” appears.\r\n* Try to change the text from + \"Welcome to Web Lab\" to something different.\r\n* Try typing something else + on the page and see what happens." + CSDU2 - text properties_markdown_instruction: "# Text Properties\r\n\r\nColor + properties are just one type of property. Another is text properties. Text + properties can be used on an text element (`<p>`, `<h1>` to `<h6>`, `<ul>`, + `<ol>`, `<li>`).\r\n\r\n* text-align - sets the horizontal (side to side) + position of the text within each line\r\n* text-decoration - can add a line + above, below or through the text\r\n\r\nFor more details on text properties + go to <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3 + Schools - Text Decoration</a> or <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3 + Schools - Text Align</a>.\r\n\r\nExample:\r\n\r\nThe below example will make + all the paragraphs be right aligned with a green text color and a line through + all the text.\r\n<pre>\r\np {\r\n\ttext-decoration: line-through;\r\n\tcolor: + green;\r\n text-align: right;\r\n}\r\n</pre>\r\n\r\n# Do This\r\nRead the + W3 resources and figure out how to add the following styles on your page.\r\n\r\n* + Add an underline to all of the smaller headers by using the text-decoration + property.\r\n* Use the “text-align” property on paragraphs to align them on + the page so that each line has the same width." + CSDU2 - title element in head_markdown_instruction: "# Title Element\r\n\r\nOne + piece of metadata that should be included in every web page you create is + the website title. Although you may put an `<h1>` element on your page content + with the title of your website, the computer does not necessarily know that + is the title as there may be multiple `<h1>` tags on your page.\r\n\r\nTo + make clear what the title of a website is for the computer the `<title>` element + is added as metadata in the `<head>` element. This title is not displayed + on the page anywhere as a result of the title tag but the browser may use + it to put a name in the tab of your web browser or when someone searches for + your website.\r\n\r\nExample:\r\n<pre>\r\n<head>\r\n\t<title> + My Website Title</title>\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* + Add a `<title>` element with the name of the web page inside the `<head>` + element" + CSDU2 - website comp_markdown_instruction: "# Comparing Websites\r\n\r\n**Prompt:** + Imagine you have a new puppy at home who has chewed through her old leash. + Decide between which of these two websites you would ultimately decide to + buy your puppy’s new leash. Why?\r\n\r\n* Website 1: <a href=\"https://thimbleprojects.org/nickianselmo/84613/\"> + Uncle Joe's Pet Store</a>\r\n* Website 2: <a href=\"http://www.petsmart.com/\"> + PetSmart</a>\r\n\r\nWrite your answer in the box below. When you are done + wait for directions from your teacher before moving on." + CSDU2 Color Blindness_markdown_instruction: "# Color Blindness Filter\r\n\r\n\r\n\r\n" + CSDU2 IP Add Images_markdown_instruction: "# Adding Your Images\r\n\r\nWith + images and attribution information in hand, it's time to spruce up your new + page.\r\n\r\n# Do This\r\n\r\nUpload your images to Web Lab and, using `<img>` + tags, add them where you'd like them to go. For each image:\r\n\r\n* Add + a descriptive `alt` attribute\r\n* Add attribution underneath the image, including\r\n\t* + Name or screenname of author (if available)\r\n * Title of image (if available)\r\n * + Link to original site (you can make the whole attribution text a link)\r\n * + License image was published under either in text (eg CC-BY) or using a badge + from the [Creative Commons website](https://creativecommons.org/about/downloads/).\r\n\r\nFor + example\r\n\r\n![Sad Dog](https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Longhaired_Dachshund_portrait.jpg/629px-Longhaired_Dachshund_portrait.jpg)\r\n\r\n[Longhaired + Dachshund portrait by Flickr user Soggydan](https://commons.wikimedia.org/wiki/File:Longhaired_Dachshund_portrait.jpg) + ![CC-BY](https://licensebuttons.net/l/by/3.0/88x31.png)" + CSDU2 IP Final Touches_markdown_instruction: "# Finishing Touches\r\n\r\nYou + have the content, you have pretty images, now put the finishing touches on + your page.\r\n\r\n# Do This\r\n\r\nMake sure you page meets the checklist + below then make this page your own and get it ready for publishing. Specifically, + consider the following:\r\n\r\n* **Styling:** Add new style rules to your + CSS file and give your page some flair.\r\n* **Organization**: Does the structure + of your content make it easy for users to find the information you want them + to see?\r\n* **Publishing Review**: Use your Web Development Practices to + review your site for publishing readiness.\r\n\r\nIf you made improvements + to your home page ake sure to take a screenshot of your home page and save + it somewhere on your computer so you can find it later (*Need help with how + to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Checklist\r\n\r\n* There is a separate HTML file for your + cause site with a descriptive name\r\n* The web page has a title, viewpoint, + and description\r\n* The web page is linked to your stylesheet for your website. + \r\n* A first level header with a catchy title for your page\r\n* A second + level header for each separate argument to support your cause\r\n* Paragraphs + of content under each second level header\r\n* A link to the appropriate site + where you need to cite outside sources\r\n* All images you are using are uploaded + into your web lab project\r\n* All images have a descriptive alt attribute\r\n* + All images have attribution underneath the image, including:\r\n\t* Name or + screenname of author (if available)\r\n\t* Title of image (if available)\r\n\t* + Link to original site (you can make the whole attribution text a link)\r\n\t* + License image was published under either in text (eg CC-BY) or using a badge + from the Creative Commons website." + CSDU2 IP Portfolio_markdown_instruction: "# Cause Page\r\n\r\nLet's start + by setting up the page you will be using to create your cause page.\r\n\r\n# + Do This\r\n\r\n* Add a new HTML file to your project for your cause page.\r\n* + Add a title, viewport, and description\r\n* Link the style sheet for your + website to the cause page" + CSDU2 IP Research Content_markdown_instruction: "# Adding Your Content\r\n\r\nYou + should now have found a handful of website that you can use to help make your + case for the cause you've chosen. If not, keep on researching! Otherwise + it's time to start structuring the content of your page.\r\n\r\n## Hyperlinks + to Websites\r\n\r\nEarlier in the unit you learned how to use the `<a>` element + to link between pages on your website. You can also use this element to link + to other websites. To do this the `href` attribute needs to contain the full + URL of the site you wish to link to. For example if I wanted to link to the + Code.org website in my project I would use the following code:\r\n\r\n| Code + | Output|\r\n| ---- | ----- |\r\n| <pre> My favorite coding site is <a + href=\"https://code.org/\" > Code.org </a > ! </pre> | My favorite + coding site is <a href=\"https://code.org/\"> Code.org </a> ! |\r\n\r\n# Do + This\r\n\r\nThe specifics of your page layout will depend on your topics and + goals, but in general you should create the following structure\r\n\r\n* A + first level header with a catchy title for your page\r\n* A second level header + for each separate argument to support your cause\r\n* Paragraphs of content + under each second level header\r\n* A link to the appropriate site where you + need to cite outside sources\r\n* Don't worry about styling right now you + are just getting the content\r\n\r\nAttribution links can take many forms, + for example\r\n\r\n* According to the [ASPCA](http://www.aspca.org/animal-homelessness) + only 10% of animals entering shelters have been spayed or neutered.\r\n* Kill + shelters euthanize 2.7 million animals per year (Source: [ASPCA](http://www.aspca.org/animal-homelessness))." + CSDU2 Make Your Logo_markdown_instruction: "# Create a Logo\r\n\r\nYou will + also need a logo for your brand. Get creative and create something that really + is you. Remember you probably want to use your colors and fonts as you design + your logo. If the tools does not have your exact font find something close.\r\n\r\n# + Do This\r\n\r\n* Use the tool linked below to **create a logo for your brand**\r\n* + **Hint:** The color picker on this site uses a different encoding called hex. + Your color picker gave you those values as well. They are the first encoding + with numbers and letters in it. They start with the # symbol.\r\n* **Save + that logo somewhere on your computer** so you can use it later." + CSDU2 Pick Your Colors_markdown_instruction: "# Pick Your Colors\r\n\r\nAnother + component of creating your brand is picking the colors for your brand. These + should be colors that stand out but also look good together. You want your + users to enjoy looking at your page. You will want to keep your set of colors + small so that the combination is memorable. A set of 4 main colors or less + for your page will be a good place to start. Different shades of those colors + can be used as well.\r\n\r\n# Do This\r\n\r\n* Go to the <a href=\"http://paletton.com/\"> + Paletton </a> website.\r\n* Decide how many primary colors you want for your + brand.\r\n* Set the number of primary colors useing these buttons <img src=\"https://images.code.org/669d2fe15825ea753f804ebb690aab95-image-1475594935612.28.22 + AM.png\" style=\"width:150px\">. The number of dots shows the number of primary + colors.\r\n* Play with dragging around the dots to find the primary colors + you like. The one that takes up the biggest box on the right will be your + primary color.\r\n\r\n<img src=\"https://images.code.org/b5811cea1acf1bf281ab73661db4b7cb-image-1475595405528.gif\" + style=\"width:400px\">\r\n\r\n* Once you have picked your colors click <img + src=\"https://images.code.org/3d30144dbe0cadc9bd083f1967e66b20-image-1475595929655.44.22 + AM.png\" style=\"width:100px\"> which is below the color boxes on the right.\r\n\r\n* + A list like the one below will show up click on **\"as Text\"** below the + Color List header.\r\n\r\n<img src=\"https://images.code.org/d39c3112948cd860148f2228f5b1c45a-image-1475595929655.44.43 + AM.png\" style=\"width:150px\">\r\n\r\n* A page that looks like the one below + will open. **Copy the text from this page into the box below.** This will + give you the RGB values for the colors as well as hex codes which you may + want on the next level.\r\n\r\n<img src=\"https://images.code.org/731d2612a1ccb47a4db8085abe910266-image-1475596945480.02.14 + PM.png\" style=\"width:400px\">" + CSDU2 Pick Your Fonts_markdown_instruction: "# Pick Your Fonts\r\n\r\nPart + of any good brand is having a specific font that is associated with the brand. + Most brands keep to a small set of fonts they use. These fonts however are + unique to the brand and will need to adventure beyond the 5 font families + you have been using.\r\n\r\nPicking a small set of fonts for your website + is also a good practice as when you adventure beyond the 5 font families into + other fonts the browser has to download the font file. Downloading files is + something that can add time to how long it takes to your load your website. + To prevent it from taking too long it is good to stay with just 2 different + fonts.\r\n\r\n# Do This\r\n\r\n* Go to the <a href=\"http://fontpair.co/\" + target=\"_blank\">Font Pair </a> website. The website lists sets of heading + and body font pairs that work nicely together. Each pair is listed like the + image below.\r\n\r\n<img src=\"https://images.code.org/7f34c1986c16fbb50e2acc4f72923b60-image-1475593488897.03.00 + AM.png\" style=\"width:400px\">\r\n\r\n* Pick a font set you like.\r\n* Copy + the heading and body font names.\r\n\r\n<img src=\"https://images.code.org/879b3b41486f728fbb8840469277704e-image-1475594076521.png\" + style=\"width:400px\">\r\n\r\n* Click the link to each font. This should take + you to a google fonts page.\r\n\r\n<img src=\"https://images.code.org/6163e64372d8825a7a8ed6a943cb3701-image-1475594076522.png\" + style=\"width:400px\">\r\n\r\n* Copy the URL for the google fonts page into + the box below so they will be saved for later. An example is below.\r\n\r\n<img + src=\"https://images.code.org/92e66b9ffae4d836175d63d87ab5586c-image-1475594389964.17.58 + AM.png\" style=\"width:400px\">" + CSDU2 RGB Color Matching_markdown_instruction: "# RGB Colors\r\n\r\nAll colors, + whether they have names or not, can be described by the level of red, green, + and blue light it takes to make them. This is called an RGB value (short + for Red-Green-Blue). You can use the widget on your left to try out different + RGB values and see what colors they make.\r\n\r\n* **Click \"Run\" to start + the widget on the left,** and use the sliders to adjust the levels of red, + green, and blue light.\r\n* For each of the colors below, match it to its + RGB value. Type your response in the box below.\r\n\r\nA) red: 216, green: + 191, blue: 216 - rgb(216,191,216)\r\n\r\nB) red: 255, green: 239, blue: 213 + - rgb(255,239,213)\r\n\r\nC) red: 255, green: 140, blue: 105 - rgb(255,140,105)\r\n\r\nD) + red: 123, green: 104, blue: 238 - rgb(123,104,238)\r\n\r\nE) red: 107, green: + 142, blue: 35 - rgb(107,142,35)\r\n" + CSDU4 - AppLab - 1_markdown_instruction: "# Documentation\r\nAs we move forward + you are going to see more and more (and more!) commands added to the toolbox. What + happens if you see a command and don't understand it, or you forget how it + works? Don't worry, this happens to professional programmers all the time! + No one actually memorizes long lists of commands. Most programming environments + have ways to quickly look up documentation about the commands of the language + you're using. **Good news: App Lab has documentation too!**\r\n\r\n![](https://images.code.org/3fe10e1b65edb37306099098161be001-image-1441990727053.gif)\r\n\r\nWhen + you **hover your mouse over a command** in the block palette a bubble pops + up with a quick reminder of what a function does, and what its parameters + are. If you click \"See examples\", you will be taken to more detailed documentation + of the command which includes **code examples** that you can even copy and + paste.\r\n" + CSDU4 - AppLab - 2_markdown_instruction: "# Assigning User Input to Variables\r\n<img + src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" + style=\"width: 350px; float:right\">\r\nThe `promptNum` command appears in + the variables toolbox because it's typically used as a way to get a value + from the user that you want to hold on to while the program runs.\r\n\r\n`promptNum` + is similar to `randomNumber` in that it is a function whose return value *evaluates + to a number*. The difference here is that `promptNum` pops up an input dialog + box and waits for the user to type a number. Once they do and hit \"OK\" + the number they typed is returned and we can store it in a variable to use + in our programs." + CSDU4 - AppLab - 3_markdown_instruction: "# Debug Console: Variable Values\r\n\r\nUp + until now, if we wanted to find out the value of a variable at some point + in the execution of a program, we've used `console.log`. That is still going + to be a great strategy but **the Debug Console can do even more for us!**\r\n\r\n**Check + this out:** We can check the value of a variable in real time (as our program + executes) by typing its name into the prompt within the Debug Console and + hitting \"enter\". **This is another powerful tool for debugging your programs.** + \r\n\r\n![](https://images.code.org/7e7ff7aa041814cfcd69a1c9a028c439-image-1446826780896.gif)" + CSDU4 - AppLab - 4_markdown_instruction: "# Debug Commands\r\n\r\n<img src=\"https://images.code.org/c6322845b96b70c9083a6c62736048e5-image-1446739268136.00.34 + AM.png\" style=\"width: 200px; float: right\">\r\n\r\nCheck out the new **Debug + Commands toolbox** that has appeared next to the Debug Console! These powerful + tools allow us to **pause a program at a certain point** while it’s running + and then execute lines one at a time. \r\n\r\nUsing these tools we can investigate + the state of variables and other elements of the program at any point, mid-execution. + This makes it much easier to see what’s happening while the programming is + actually running!\r\n\r\nIn order to use the debug commands, you first have + to indicate which line you want the program to pause at. This is called adding + a “breakpoint” (see animation below).\r\n\r\n# Do This:\r\n\r\n* **Add a breakpoint** + on the line where the `while` loop starts. (**Just click the line number.**)\r\n* + **Use the <img src=\"https://images.code.org/bd8f1a67242e64e6b3740eac79f881e8-image-1446748421345.33.09 + PM.png\" style=\"width: 75px\"> button** to execute each line one at a time.\r\n* + **NOTE:** If you hit <img src=\"https://images.code.org/6c4712da58e32dae2d04c52d9964fca9-image-1446741498097.37.48 + AM.png\" style=\"width: 75px\"> it will \"continue\" executing the program + normally, unless of course it hits another breakpoint. \r\n\r\n![](https://images.code.org/68f8e185914c8cc127aa9573ae37f687-image-1446835628580.gif)" + CSDU4 - Design Mode - 1_markdown_instruction: "<img src='https://images.code.org/3fad83213ae72073251c4d5abc1f048a-image-1444060521578.png' + style='float: right; width: 250px'> A new group of commands has been added + to the toolbox called **UI Controls** (User Interface Controls) which are + commands that let you interact with, and respond to, the user of your app. + To keep it simple, we'll start with just two commands: \r\n* `onEvent` which + lets you run a function in response to some event occuring (such as a button + click).\r\n* `button` which puts a button on the screen." + CSDU4 - Design Mode - 10_markdown_instruction: "# New Elements and Events: + Moving Buttons with Events\r\n\r\nOver the next few exerises we will be exploring + several new user interface elements and event types. Your code will be pulled + forward as you progress through the exercises.\r\n\r\n**Moving Past Turtle:** + We've been using buttons to move the turtle. For example, in the program + you're about to see a button that moves the turtle to a random location on + the screen. We're going to alter this program ** so that the button itself + moves every time you click it**.\r\n\r\n**Notice** that this means that event + handlers can affect the elements they are attached to, not just other elements! This + is an interesting technique for apps. Now you're going to try it...\r\n\r\n# + Do This:\r\n* **Change the ID** of the button to something descriptive and + meaningful.\r\n* **Modify** your event handler so that **it no longer moves + the turtle** but instead sets the position of the button itself to a random + location on the screen.\r\n\t* TIP: add `setPosition` to the event handler, + and just move the `randomNumber` calls from the turtle.\r\n\t* Recall the + screen is **320 by 450 pixels**.\r\n\r\n**Before** | **After**\r\n---|---\r\n![](https://images.code.org/a4172e43b6707a3170e4eaf54a2a7b1d-image-1444335577799.gif) + | <img src=\"https://images.code.org/4e17b077bd8fbdd43f960d26bb3d252d-image-1444335766972.gif\" + style=\"width: 150px\">\r\n\r\n\r\n" + CSDU4 - Design Mode - 11_markdown_instruction: "# New Elements and Events: + New Event Types\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 + AM.png\" style=\"float: right\">\r\n\r\n**New Events**: You may have noticed + that the `onEvent` block has a pull-down menu for the event **type** (see + right).\r\n\r\n# Do This:\r\n\r\n* **Experiment** with **each of the different + types of mouse events** by selecting from the list. You can also read about + them in the documentation.\r\n\t* click\r\n * mousemove\r\n * movedown\r\n * + mouseup\r\n * mouseover\r\n* **Choose** the mouse event type you like most + and change your event handler to use it.\r\n* **Note:** There are some events + that capture keystroke events. These are interesting, but they do not work + easily with buttons. We'll stick to mouse events for now, and get to keys + later." + CSDU4 - Design Mode - 12_markdown_instruction: "# New Elements and Events: + Text Labels\r\n<img src=\"https://images.code.org/20d50fd324908fc48633e1325cc37603-image-1444662791509.png\" + style=\"float: right\">\r\nThe UI controls toolbox contains an element called + `textLabel`. A text label is what it sounds like: plain text that you can + put in your app. Even though it's just plain text you can still move and + resize it using `setPosition`, and you can attach event handlers to it as + well.\r\n\r\n**NOTE:** resizing a text label does not change the font size + of the text. We'll learn how to do that later. " + CSDU4 - Design Mode - 13_markdown_instruction: "# New Elements and Events: + Images\r\n\r\n<img src=\"https://images.code.org/a84297658be45dc78bc401d387d10436-image-1444663322356.21.25 + AM.png\" style=\"float: right; width: 120px\">\r\nImages make applications + more visually pleasing and interactive. You can add images to your application + using the `image` command. For now, just add an `image` element to your app + (the default image link is the Code.org logo) and don't worry about choosing + a unique image just yet. We'll do that in the very next exercise!" + CSDU4 - Design Mode - 15_markdown_instruction: "# Design Mode\r\n\r\nWelcome + to Design Mode in AppLab! This will allow you to easily create a digital version + of your sketched wireframes by adding UI elements from the toolbox and and + styling them the way you want!\r\n\r\n**Goal:** Add a large red button to + your app using Design Mode.\r\n\r\n# Do This:\r\n\r\n* **Find <img src=\"https://images.code.org/278f146396c80c97d0b5d73f24d48aec-image-1444335461720.png\"> + in the Design Toolbox** and drag out a button and resize it. \r\n\r\n* **Change + the button text** to say \"Click Me\".\r\n\r\n* **Set the color for the button** + to be red.\r\n\r\n<img src=\"https://images.code.org/4cab6a5233cf07df0d8e312932762012-image-1444314797615.gif\" + style=\"width: 500px; float: middle\">\r\n" + CSDU4 - Design Mode - 16_markdown_instruction: "# Activate Your Button\r\nIn + the last lesson you focused on laying out a page of your app in Design Mode. + This is a great, quick way to get the visual side of an app figured out, but + it's not very functional. If you click any of the buttons you added, nothing + happens. Now you're work towards adding some basic functionality by making + the buttons in your app actually _do_ something!\r\n\r\n**Goal:** Add code + using Design Mode to make the button respond to a click.\r\n\r\n# Do This\r\nYour + starter app has two elements, a _label_ with the id `titleLabel` and a _button_ + with the id `changeTitleButton`. To start with, you're going to make the + button log a message to the console when it's clicked.\r\n\r\n* In Design + Mode, **click on the provided button to edit its properties**\r\n* Click on + the **Events** tab\r\n* Insert an `onEvent` from Design Mode by clicking **Insert + and show code** under the **Events Tab**.\r\n* Take a look at the block that + was added to the **Code Mode** tab.\r\n* Run the program, click your button + and **look for the output in the *Debug Console* **below the workspace instead + of the app window. We will discuss the *Debug Console* on the next level." + CSDU4 - Design Mode - 17_markdown_instruction: "# Updating IDs and Debugging + with Console Log\r\n\r\nHere we have a couple buttons with event handlers + and `console.log` statements, but they are all switched around!\r\n\r\nWe + should have given the buttons better ID names so we could tell the difference + based on the ID. **Can you update the ID names and `console.log` messages + to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** + of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to + Code Mode and notice that the **ID pulldowns have been updated to include + the new IDs**. (You still need to select the correct ID from the pulldown + menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" + CSDU4 - Design Mode - 18_markdown_instruction: "# Layering and Deleting\r\n<img + src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" + style=\"width: 200px; float: right\">User interface elements can overlap one + another, so you'll want the ability to change the order or **depth** at which + each one is rendered. \r\n\r\nIf you **scroll to the bottom of the Properties + tab** you'll find buttons which allow you to easily **delete or change the + depth** of an element.\r\n* **Delete an Element** by selecting it (clicking + on it) in the design view and then clicking **Delete** in the properties tab.\r\n* + **Change the depth** of elements by using the double or single arrows.\r\n + * Click the double arrow to send all the way to front or back.\r\n * Click + the single arrow to move up or down one layer.\r\n \r\n# Do This:\r\n\r\nUse + the **delete** and **depth** tools to **create the \"After\" image**\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th + style=\"text-align:center\">Before</th>\r\n <th style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td + align=center><img src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" + style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img + src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" + style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" + CSDU4 - Design Mode - 19_markdown_instruction: "# Second Screen\r\n\r\nMost + apps have more than one screen or page that each have different contents. + With Design Mode you can quickly add new screen to your app.\r\n\r\n# Do This\r\n\r\nYou're + going to add a second screen to your app and add a button to that screen. + Make sure you're using good IDs!\r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 + PM.png\" style=\"width: 50px\"> from the Design Toolbox into your app. You + now have two screens!\r\n* Using Design Mode create a button in your new screen. <img + src=\"https://images.code.org/bbf464e2fc94bacba39407d6842f2336-image-1478300698068.04.35 + PM.png\" style=\"width: 150px\"> \r\n* Set the IDs for your screens and buttons + to something meaningful, for example _\"homeScreen\"_, _\"detailsScreen\"_, + _\"homeButton\"_, and _\"detailsButton\"_\r\n\r\n\r\nYou can always use the + screen dropdown menu at the top of the app window to switch between your screens + <img src=\"https://images.code.org/404e0b3f520a413c8a5e62e74b70bb19-image-1478300388689.58.59 + PM.png\" style=\"width: 150px\"> \r\n\r\n" + CSDU4 - Design Mode - 2_markdown_instruction: "# Buttons and Unique IDs\r\nYou + may have noticed that the button command has two parameters: `button(id, text)`. The + `text` is the text that actually shows up on the button display, and the `id` + (we'll typically write **ID**) is a **unique identifier** for that element + in the app.\r\n\r\nEach element that appears in the app must have a **unique + ID**. In fact, if you try to run a program that has two buttons with same + ID you will get a warning message in the console. Watch:\r\n<img src=\"https://images.code.org/47ec46e0563f63641cc10ef152e9f86e-image-1444074330713.gif\" + style=\"border: solid 1px black; width:500px\">\r\n\r\nNotice that even though + the text on the buttons was different, the IDs were the same, which caused + the error message to show up. To get rid of that error message you will have + to change the ID of the button from the default `id` to something else.\r\n\r\n**Error + messages happen to everyone and they are helpful!**: getting an error or warning + message when you run your program is *not a big deal*. Programmers actually + rely on error messages to tell them where and how to fix their code.\r\nSometimes + error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers + to an id (id) which already exists.` But a warning like this contains helpful + information and clues such as the line the error occured on, or some word + or command it didn't recognize. " + CSDU4 - Design Mode - 20_markdown_instruction: "# Switching Screens\r\n\r\nYou + can set which screen is showing in your app with the `setScreen()` command. + If you're working in blocks you can select which screen you want to switch + to from a dropdown.\r\n\r\n![](https://images.code.org/615fae136488e1e6d1349e4383388e08-image-1478303858022.13.25 + PM.png)\r\n\r\n# Do This\r\n\r\nYou'll use an `onEvent()` block with `setScreen()` + to make the two buttons in your app switch between the two screen.\r\n\r\n* + Drag out two `onEvent()` blocks\r\n* Set the IDs for your `onEvent()` blocks + for each of your two buttons\r\n* Place a `setScreen` block inside each of + the `onEvent` blocks.\r\n* Choose the appropriate screen from the dropdown + of each `setScreen` block.\r\n* Test out your app to make sure your buttons + let you switch back and forth between the two screens" + CSDU4 - Design Mode - 21_markdown_instruction: "# Adding Images\r\nSometimes + the functionality you want to represent in your prototype is too complicated + to do with just the default buttons and fields. If you want to mock up more + advanced interfaces (like a map), the easiest way to do it is with an image\r\n\r\n# + Do This\r\n* Find and download an image of a map you like\r\n* Drag an image + element into your app ![](https://images.code.org/cda02ffe3acc869822a551f5cdbf8606-image-1444667846363.37.14 + AM.png)\r\n* Choose your image ![](https://images.code.org/e5b9571ae54af60a3ae597b787e741ea-image-1444667688762.34.42 + AM.png)\r\n\t* **URLs** can be added directly into the \"picture\" field. \r\n\t* + **Upload images** by clicking \"Choose\".\r\n\t* **Note:** You can always + see all the files you've uploaded by clicking the gear at the top of the + toolbox. ![](https://images.code.org/53b405b771bc11bf5d24c84c878c80dd-image-1444668067826.35.10 + AM.png)\r\n* Make sure to give your image a good ID!\r\n\r\n" + CSDU4 - Design Mode - 22_markdown_instruction: "A new command in the toolbox: + `playsound`! Read the documentation about how to add sounds." + CSDU4 - Design Mode - 23_markdown_instruction: "# Changing Elements on Screen + \r\n\r\nThere's another way to display text in your app besides `console.log` + and `write`. \r\n\r\nThere is a command called `setText` which will **change + the text of a component on screen** given its id. This is a very powerful + technique and one that you will use a lot. Here's what it looks like in action....\r\n\r\n<img + src=\"https://images.code.org/3e5dd320801720d5c62a49146d9ee3d2-image-1446056202170.gif\" + style=\"width: 500px\">\r\n\r\nLet's do a **very simple** example of using + `setText`." + CSDU4 - Design Mode - 24_markdown_instruction: "# Text Input Elements\r\n\r\n<img + src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 + PM.png\" style=\"width: 100px; float:right;\">\r\n\r\nSetting the text of + an element is all well and good, but things are going to get really interesting + when we can get text that a user has entered and do something with it.\r\n\r\n\r\n\r\n# + Do This:\r\n\r\n* **Add two text input elements to this program**, one for + the name and one for the age of the user.\r\n* **Give your text input elements + descriptive and meaningful IDs**.\r\n* **In Design Mode** set their default + text to prompt the user for their name and age.\r\n* **Compare your app to + the example below**.\r\n\r\n<img src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 + PM.png\" style=\"float:left; width:200px;\">\r\n<br>" + CSDU4 - Design Mode - 25_markdown_instruction: "# Getting Text Input\r\n\r\nAs + we saw a user can now type inside of a text input whenever they want, **but + now we'll need a way to access that text**. In order to do that you'll need + to use the `getText` command, which you can now find in the **UI Controls** + tab.\r\n\r\n<img src=\"https://images.code.org/0c6774f2b6d33f8107ec2936102b1a10-image-1445533677192.58.24 + PM.png\" style=\"width: 150px;\">\r\n\r\nYou can use a `getText` command just + like a string within a `console.log` or `write` command. Just like with `setText` + you will refer to the UI element by its ID.\r\n\r\n![](https://images.code.org/c17e419301d0cfeebf7f0ccee13e415f-image-1445892504376.47.54 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **Read the documentation ** for `getText`.\r\n* + **Add an event handler to the Submit button** that fires when your button + is clicked.\r\n* **Inside the event handler** place code that will **log the + name your user input to the console**.\r\n\r\n" + CSDU4 - Design Mode - 26_markdown_instruction: "# Saving Text Input in Variables\r\n\r\nOften + we want to save the information we pull in from the user for later use in + our program. The best way to do this is to save it in a variable.\r\n\r\n# + Do This:\r\n\r\n* **Create two variables inside your event handler** to store + the **age** and **name** of the user.\r\n* **Use `getText()` to update the + values** stored in each of these variables.\r\n* **Change your `console.log` + statements to use your variable instead of `getText`**.\r\n\r\n![](https://images.code.org/ca45dcb01ae2d1956ed2f87efeda0264-image-1445976691215.11.13 + PM.png)" + CSDU4 - Design Mode - 27_markdown_instruction: "# Generating Text Output\r\n\r\nSo + far we've been outputting our messages to the console, but now we'd like + to display them in the app. In order to do so we're going to be using a new + UI element called a **textArea**. You can use `setText()` with a **textArea** + just like you would with a **textLabel**.\r\n\r\n![](https://images.code.org/45e6b6cdb1ca87f53cf1d6bba97cb812-image-1445977693641.24.43 + PM.png)\r\n\r\nIf we want to combine user input with default text we can do + so with **string concatenation** (that's just a fancy phrase for combining + strings of text). Together with a **textArea** we can use this ability to + compose longer messages based on user input.\r\n\r\n# Do This:\r\n\r\n* **Add + a textArea** to your app and give it a descriptive and meaningful ID.\r\n* + **Create a variable inside your event handler** called `userMessage` to hold + the full message that will be sent to the user.\r\n* **Use string concatenation** + to compose a message from the user input.\r\n\t* eg `var userMessage = \"Welcome + \" + userName + \"!\";`\r\n* **Use `setText()`** to place your `userMessage` + inside the `textArea` you created.\r\n\r\n<img src=\"https://images.code.org/193af3e0c993dbf0b7af9c571ec5f56d-image-1445977696957.27.08 + PM.png\", style=\"width:250px;\">" + CSDU4 - Design Mode - 28_markdown_instruction: "# Introducing the *change* + Event\r\nUp until now you've been using the click of a button to trigger + getting the text from an input or text area.\r\n\r\nYou can use a new event + type to get this behavior: The __'change' event__ is triggered when the + user hits 'enter' in a text input after typing.\r\n\r\n\r\n<img src=\"https://images.code.org/7d1725b236471f8e2a0efed5870660da-image-1446071579670.32.36.png\" + style=\"width:350px;\">\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/f8f1f7ae18acbc570a367886bcd6ca88-image-1445976541574.gif\" + style=\"width:250px;\">\r\n- A text input has been created for you that asks + for a user's name, as well as a label for the response\r\n- Attach a \"change\" + event handler to the text input.\r\n- When the \"change\" event triggers, + set the text of \"nameResponse\" to the user's input.\r\n" + CSDU4 - Design Mode - 29_markdown_instruction: "# Dropdown\r\n\r\nOn the last + level we used `promptNum` to get the user's guess. However, we had no way + to limit them to the numbers we wanted. They could have typed 11 even though + we told them not to. A better way to get input with a limited set of options + is the dropdown. The <img src=\"https://images.code.org/3b21b4288a2a155d1e9a3c2cf3a5b09b-image-1446229368079.28.23 + PM.png\" style=\"width: 75px\"> is in your Design Mode Toolbox. You can control + the list of options users can choose and then use `getText` to get the chosen + number.\r\n\r\nWe are going to need an event handler in order to do this. + The event handler will detect when the user has changed the value of the dropdown. + \r\n\r\n# Do This:\r\n\r\n* **Add a dropdown** for their guess instead of + `promptNum`. Make sure to give it a good ID.\r\n\r\n<img src=\"https://images.code.org/fea164f6e53d1ce0c50981565e066d4c-image-1446229598357.gif\" + style=\"width: 350px\">\r\n\r\n* Under properties **find the Options** and + change it to the **numbers 1 to 10**\r\n\r\n<img src=\"https://images.code.org/0cfecbcdcfb95fc30876155ec6a3a021-image-1446229593687.gif\" + style=\"width: 250px\">\r\n\r\n* Add an event handler to detect the `change` + event on your dropdown.<br><br>\r\n<img src=\"https://images.code.org/48cffda5b7ff3a446116a39b4dbcbe8c-image-1446232308751.gif\" + style=\"width: 150px; float: right\">\r\n* Move your `if` statement inside + the event handler so it will check each time the dropdown is changed.<br><br>\r\n* + When the dropdown is changed **use `getText` to find out the user's guess**. + Save the guess using a variable. **Don't forget about scope!**<br><br>\r\n* + Test your app -- it should work like the demo." + CSDU4 - Design Mode - 3_markdown_instruction: "# How Do Events Work?\r\nEvent-driven + apps are made up of elements that can trigger events (such as buttons) and + pieces of code called **event handlers**. Event handlers are commands that + \"watch\" for certain events to occur in your program, and then run some function + when an event occurs.\r\n\r\nWhen you first create an event handler from Design + Mode, puts a `console.log()` block inside to help you test the event, but + you can put just about any code you want inside the event hander.\r\n\r\n# + Do This\r\n\r\nThe toolbox has a new block called `setText` which allows you + to change the text of an element on the screen. You're going to modify the + button event handler so that it changes the title text when clicked.\r\n\r\n* + Drag out a `setText()` block to the _inside_ of the `onEvent()` callback function + (where the `console.log()` block currently is)\r\n* From the block's dropdown, + select \"titleLabel\" (the id of the element you want to change)\r\n* In the + block's second input, replace \"text\" with a new title for the app\r\n* + Run your program and click the button to see it work" + CSDU4 - Design Mode - 30_markdown_instruction: "# Using `if` to Display Images\r\n\r\nWe + are going to set up a dice game. We want to show a picture of a single die + for each random number generated 1 to 6. We've already set up the screen + in Design Mode, with a button to generate the roll and an image to show a + picture of the die.\r\n\r\n**Note:** The flowchart for the desired behavior + is below.\r\n\r\n# Do This:\r\n\r\n* Add an event handler for the Roll! button + so that when the button is clicked it generates a random number from 1 to + 6. \r\n\r\n* Add conditionals (`if`, `else if`, and `else`) to change the + picture of the image (ID: `dice_image`) to display the correct side of the + die depending on the random number generated. You will need to use <img src=\"https://images.code.org/89f2c13ef4ead590475c863a087597f8-image-1446535826599.30.16.png\" + style=\"width:150px\"> with the URLs below to set the images for the die.\r\n\t* + <img src=\"https://code.org/images/dice/1.png\" style=\"width: 50px\"> Dice + 1 Image URL - https://code.org/images/dice/1.png\r\n * <img src=\"https://code.org/images/dice/2.png\" + style=\"width: 50px\"> Dice 2 Image URL - https://code.org/images/dice/2.png\r\n * + <img src=\"https://code.org/images/dice/3.png\" style=\"width: 50px\"> Dice + 3 Image URL - https://code.org/images/dice/3.png\r\n * <img src=\"https://code.org/images/dice/4.png\" + style=\"width: 50px\"> Dice 4 Image URL - https://code.org/images/dice/4.png\r\n * + <img src=\"https://code.org/images/dice/5.png\" style=\"width: 50px\"> Dice + 5 Image URL - https://code.org/images/dice/5.png\r\n * <img src=\"https://code.org/images/dice/6.png\" + style=\"width: 50px\"> Dice 6 Image URL - https://code.org/images/dice/6.png\r\n\r\n<img + src=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" + target=\"_blank\">Open diagram in a new tab</a>\r\n" + CSDU4 - Design Mode - 31_markdown_instruction: "# *keypress*\r\n\r\nIf we want + to add keyboard input to our apps we'll need to learn about how key events + work in App Lab. To start let's take a closer look at the `onEvent` block. + We already know that event handlers call a function. What we'll see now is + that they also **pass a parameter**. The default name for this parameter is + simply `event` but you can change it to be anything you like. \r\n\r\nThe + `event` parameter is a more complex kind of variable (called an \"Object\") + that we'll learn more about later. For now just know that for both mouse + and keyboard events, the event parameter passes more information about the + event. In the case of key events **you can find out the key(s) that were actually + pressed by using `event.key`**.\r\n\r\n# Do This:\r\n\r\n* Drag out an `onEvent` + block.\r\n* Change the ID to `screen1` and the event type to `keypress`. \r\n\r\n<img + src=\"https://images.code.org/537b5bbef3db62c90155528e6753a00a-image-1447175732347.gif\" + style=\"width: 450px\">\r\n\r\n* Once you hit **Run**, **click on the screen + so that the keystrokes will register**.\r\n* **Type different combinations + of keys** and check out the results in the console. Does every key combination + print to the console? Some keys to try:\r\n * Letter keys\r\n * Number + keys\r\n * Shift key\r\n * Hold shift and letter\r\n * Delete key\r\n * + Left and right arrow keys\r\n * Press and hold a key" + CSDU4 - Design Mode - 32_markdown_instruction: "# Using *keyup* and *keydown*\r\n\r\nOn + the last level, we played with the `keypress` event. Let's take a look at + some of the other key events. \r\n\r\nYou are going to get the chance to play + with `keyup` and `keydown` in this level. **Pay attention to the different + values of `event.key` for `keydown` and `keypress`. **\r\n\r\n# Do This:\r\n\r\n* + Switch to the event type to `keydown` or `keyup`. \r\n\r\n<img src=\"https://images.code.org/fa91b1a9e3240eb65ff75b381e76ce69-image-1447213909054.gif\" + style=\"width: 350px\">\r\n\r\n* Try out the event.\r\n\t* Press and hold + a key\r\n * Try the arrow keys\r\n * Shift\r\n * Option\r\n * + Alt\r\n * Others" + CSDU4 - Design Mode - 33_markdown_instruction: "# Play Sound With Keys\r\n\r\nYou + may have noticed from the last couple of levels that the value of `event.key` + is just a string which is the name of the key. As a result we can check which + key was pressed with a simple conditional statement. For example to check + for the press of the **\"a\"** key we could write `if (event.key == \"a\")`.\r\n\r\n# + Do This:\r\nThe **starter code provided** plays the sound whenever ANY key + is pressed.\r\n\r\n* Use `console.log` to **find out the value of `event.key` + when the up arrow is pressed.**\r\n\r\n* **Add an `if` statement** so the + sound only plays when the when the **up arrow** is pressed." + CSDU4 - Design Mode - 4_markdown_instruction: "# IDs\r\nThe `id` (we'll typically + write **ID**) is a **unique identifier** used for each element in the app.\r\n\r\nEach + element that appears in the app must have a **unique ID**. In fact, if you + try to run a program that has two buttons with same ID you will get a warning + message in the console.\r\n\r\n# Do This\r\nWhile each element you drag out + in Design Mode gets a default ID, they aren't really that helpful (like `button1` + and `button2`), so you should get in the habit of creating your own IDs.\r\n\r\n* + Change the ID of your \"click me\" button to something useful (like `redButton`)\r\n* + Drag out a second button\r\n* Make the second button blue and give it an ID + of `blueButton`" + CSDU4 - Design Mode - 5_markdown_instruction: "# Debugging Event-Driven Programs: + IDs\r\n\r\n**Debugging:** As you write more complex event-driven programs, + you'll need to polish your **debugging** skills. Debugging involves locating + and correcting errors within a program. It is a critical (and generally unavoidable) + step when writing code.<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" + style=\"float: right; width: 200px\">\r\n\r\n**Checking IDs:** Your first + debugging task will be to verify that the button IDs match the IDs in the + event-handlers. **Remember that IDs are case-sensitive**." + CSDU4 - Design Mode - 7_markdown_instruction: "**Logical Errors: ** Sometimes + you can write a program that generates no errors but does not work as you + intend. This is the result of **logical errors** in your code. These can be + tricky to catch without knowing what your program is supposed to do in the + first place, and usually are only found with careful testing of your app's + functionality.\r\n<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" + style=\"float: right; width: 150px\">" + CSDU4 - Design Mode - 8_markdown_instruction: "# Moving and Sizing Buttons\r\n\r\nAn + important component of designing intuitive and visually appealing user interfaces + is the location of the elements on the screen. Using the `setPosition` command + (now added to the Toolbox) you can move and set the size of user interface + elements.\r\n\r\n![](https://images.code.org/c3e42223cbcb096f992d758973d09f63-image-1444664597665.42.48 + AM.png)\r\n\r\n**NOTE:**\r\n * If you only want to set the size you can use + the `setSize` function which looks like this:\r\n\r\n ![](https://images.code.org/cb742ecf96c04477db0f8361ad5dcdaf-image-1448924017288.png)\r\n\r\n + * If you *only* want to set the position *without* changing the size of the + element, you can omit the *width* and *height* parameters from the `setPosition` + function. To do that, you need to switch into text mode, like this:\r\n\r\n + <img src='https://images.code.org/5b565ef5b74b5cd657ba15c67be92b0d-image-1448924356253.gif' + style=\"width: 400px\">\r\n\r\n* **Remember:** in an app screen 0,0 is the + top left corner and you specify a location by how many pixels from the left + and how many down from the top of the screen it is. The screen is **320 by + 450 pixels**." + CSDU4 - Design Mode - 9_markdown_instruction: "# How to Organize the Code\r\nAs + your apps get more complex you'll have to think about how to organize your + code so it remains readable and easy for you to locate things when debugging + any problems. We suggest the following convention which breaks the code into + 3 major sections:\r\n* **Top**: code for event handlers.\r\n* **Bottom**: + code for any other other functions you've written. (We don't have any of + these yet.)" + CSDU4 - Design Mode Icons_markdown_instruction: "<img src=\"https://images.code.org/2b405319f597910b1563ae607958171c-image-1475866226306.49.51.png\" + style=\"width: 200px; float:right\">\r\n\r\n# Icons\r\nIcons help users find + the right functionality while also making your app feel more polished.\r\n\r\n# + Do This\r\nAdd a few icons to your app. For each icon:\r\n\r\n* Drag out an + image element\r\n* Next to the \"Picture\" field click \"Choose...\"\r\n* + Click on the \"Icons\" tab and select one\r\n* Make sure to give your image + a good ID! (do we still need to say it?)\r\n\r\n" + CSDU4 Connecting Screens Getting Back_markdown_instruction: "# Navigating Back\r\n\r\nSomeone + using your app can now get to each of the red, green, and blue pages, but + they can't get back to the homepage. You can add buttons and event handlers + of your own to help them do this.\r\n\r\n# Do This\r\n\r\nCreate buttons and + event handlers to help a user navigate back to the \"home\" screen\r\n\r\n* + Use Design Mode to create a button inside each of the \"red\", \"green\", + and \"blue\" screens. Make sure to give them descriptive IDs.\r\n* Back in + your code drag in three `onEvent()` blocks, one for each of the three buttons + you made.\r\n* Inside each `onEvent()` block use the `setScreen()` block that + switches back to your \"home\" screen.\r\n* Test your app. You should now + be able to navigate back to the home screen from each of the other three." + CSDU4 Connecting Screens template_markdown_instruction: "# Navigating\r\n\r\nOnce + you start adding multiple screens to an app, you need to make sure that users + can always get where they want to go. If you forget to provide a link back + home or to a deeper page.\r\n\r\n# Do This\r\n\r\nHere's an app with four + different pages, but only the \"red\" screen is linked so far.\r\n\r\n* Add + event handlers for \"greenButton\" and \"blueButton\" to go to their respective + screens\r\n* From each of the sub pages, add a button with event handler to + navigate back to the home page\r\n* Test your app thoroughly to make sure + all of your buttons work and you can always get back home" + CSDU4 Connecting Screens_markdown_instruction: "# Navigating\r\n\r\nOnce you + start adding multiple screens to an app, you need to make sure that users + can always get where they want to go. In the next two levels you'll learn + how to make sure a user can always get back to the \"homepage\" of your app.\r\n\r\n# + Do This\r\n\r\nHere's an app with four different pages, but only the \"red\" + screen is linked so far. In this level you'll make the other two buttons + take the user to the correct screen.\r\n\r\n* Add two `onEvent()` blocks, + one each for the \"greenButton\" and \"blueButton\"\r\n* Use the `setScreen()` + block to make each button switch to the appropriate screen\r\n* Test your + app to make sure both buttons work. For example, when you click the green + button you should go to the green screen." + CSDU4 Crowdsource App Demo_markdown_instruction: "# Crowdsourcing\r\n\r\nCrowdsourcing + apps allow multiple users to submit content for everyone to use (the _source_ + of content is the _crowd_). This app is very similar to the list app, with + the main difference being that the list app assumes a single user while this + app allows all users to add to the same list and \"like\" submissions.\r\n\r\nThis + example uses a list of crowdsourced information for simplicity, but you could + display any kind of information in many different formats. A crowdsourcing + app could allow users to submit locations for display on a map, images to + go into a gallery, or any number of other types of information.\r\n\r\n# Functionality + Missing from this Prototype\r\n\r\n* User's can't create accounts or profiles\r\n* + Submitted things aren't added to the list\r\n* Clicking on the \"like\" icons + don't change their state" + CSDU4 Decision App Demo_markdown_instruction: "# Decision Maker\r\n\r\nSimilar + to the quiz app, a decision tree app asks the user a series of questions. + The primary difference between the two is that a decision tree doesn't check + for right or wrong answers, but instead attempts to give the user a suggest + or help them make a decision based on their answers.\r\n\r\nThis simple decision + maker asks only three questions, but more advanced ones actually take the + form of a tree as seen below:\r\n\r\n![](https://images.code.org/aeadfca116011949855c169905ff89a3-image-1476823699500.png)\r\n\r\nDepending + on the user's answer to each question, they're given a different page for + the next question. This allows the app to gradually narrow down the decision + one question at a time. This type of app can be really useful to help users + understand complex processes - for example, you might introduce a recycling + program by using a decision tree app to help users figure out which bin to + sort items into - first asking what material it's made out of, then whether + it is clean or not, and so on.\r\n\r\n# Functionality Missing from this Prototype\r\n\r\n* + Question buttons don't direct you to different screens\r\n* The final screen + doesn't give you a recommended decision" + CSDU4 Functionality setText button_markdown_instruction: "# setText on More + than Just Labels\r\n\r\nYou can use `setText()` to change the text of labels, + obviously, but it can also be used to change the text on _any_ element that + has text, including buttons, text input, and text areas.\r\n\r\n# Do This\r\n\r\nThe + starter program has an event handler already set up for the red button, can + you write event handlers for the other three buttons so they behave in the + same way?" + CSDU4 Functionality setText input_markdown_instruction: "# Pre-fill Input Fields + with setText\r\n\r\nYou've set the text of labels, and you've set the text + of buttons, but did you know you can also use `setText()` to pre-fill text + input fields?\r\n\r\n# Do This\r\n\r\nThis app has four buttons, each of which + should fill the \"nameInput\" field with a given name. For each button:\r\n\r\n* + Add an `onEvent` block to run when the button is clicked\r\n* In the button's + event handler, set the text of \"nameInput\" to the appropriate name\r\n\r\nWhen + you've gotten all four buttons to work, add another button that will fill + the input field with your name." + CSDU4 Functionality setText quiz 1_markdown_instruction: "# Making The Quiz + App\r\n<img src=\"https://images.code.org/b87aef1a1fcd238590b2b866f11f47c7-image-1478035551794.15.03.png\" + style=\"float:right; max-width: 200px;\">\r\nLet's look back at the quiz + app example that we talked about earlier in this lesson. Recall that we proposed + a single page that could serve three purposes:\r\n\r\n1. Display the question\r\n2. + Show if the question was answered correctly\r\n3. Show if the question was + answered incorrectly\r\n\r\n# Do This\r\n\r\nWe've already provided the screen + for a single question. Before worrying about any code, you just need to set + this up to ask a question.\r\n\r\n* Change the title to a question that you + want to ask\r\n* Change the text of the two buttons to two potential answers + to your question" + CSDU4 Functionality setText quiz 2_markdown_instruction: "# Answering the Question\r\n\r\nNow + that this screen is asking the question you want it to ask, you'll want to + make it respond to the answer buttons.\r\n\r\n# Do This\r\n\r\nInstead of + using the buttons to change screens as we did in earlier quiz apps, each one + of the answer buttons should change the title to say either \"Correct\" or + \"Incorrect.\" For each of the answer buttons:\r\n\r\n* Add an event handler + to watch the button's ID\r\n* In the event handler, set the title text to + either \"Correct\" or Incorrect\"\r\n\r\n_Challenge: Create a couple more + question screens just like this on and make the \"Next Question\" button navigate + between them._" + CSDU4 Functionality setText quiz 3_markdown_instruction: "# Don't Skip The + Question\r\n\r\nThe way this screen currently works, a user could just click + immediately on \"Next Question\" and not bother answering. Worse still, the + user could click one answer, see that it's wrong, and then click the other. + Let's use `hideElement()` and `showElement()` to prevent that.\r\n\r\n# Do + This\r\n\r\nYou'll need to hide or show all three of the buttons in order + to make this work, so let's focus on one at a time:\r\n\r\n**Next Question**\r\n\r\nThe + \"Next Question\" button should be hidden to start with, and then show up + once the question has been answered.\r\n\r\n* In Design Mode, select the \"Next + Question\" button and check the \"hidden\" checkbox. This will make sure the + button is already hidden when the app starts\r\n* In the event handler for + each of the answer buttons, add code to show the \"Next Question\" button\r\n\r\n**Answer + Buttons**\r\n\r\n* In the event handler for each button, add code to hide + the question buttons\r\n\t* If you want to allow a user to re-answer using + only the answers they haven't tried yet, you could hide just the button that + was clicked" + CSDU4 Functionality setText_markdown_instruction: "# Changing text with setText()\r\n\r\nYou + actually saw `setText()` briefly in the last lesson - it's a function that + allows you to change the text of a design element with code.\r\n\r\n# Do This\r\n\r\nUsing + the provided `onEvent()` block\r\n\r\n* Add a `setText()` block in the event + handler\r\n* From the dropdown in the `setText()` block, select \"title\"\r\n* + Make up a new title for the app and place it in the second parameter of the + `setText()` block\r\n* Run it and test the button" + CSDU4 Functionality visible_markdown_instruction: "# Controlling Visibility\r\n\r\nEarlier + in this lesson, when we were proposing ways to simplify the quiz app, we mentioned + that it was possible to show or hide design elements with code. App Lab has + two functions that let you control the visibility of an element:\r\n\r\n* + `hideElement()` makes the specified element invisible\r\n* `showElement()` + makes the specified element visible\r\n\r\n# Do This\r\n\r\nThe provided app + has an image and two buttons.\r\n\r\n* Attach an event handler to the \"Hide\" + button that hides the image when clicked\r\n* Attach an event handler to the + \"Show\" button that shows the image when clicked" + CSDU4 List App Demo_markdown_instruction: "# List Manager\r\n\r\nThe list manager + app allows user to keep track of the state of information and can be modified + to serve many different purposes, such as checking in / out loaned items, + tracking personal To Dos, or keeping track of where things are in a multi-step + process.\r\n\r\nWhile this example focuses on a single list, more sophisticated + list apps could allow the user to create multiple lists, or even move items + between lists. This app also only keeps track of the name of an item and whether + or not it is \"Done,\" but it could be extended to track and organize any + amount of information about the list times.\r\n\r\n# Functionality Missing + from this Prototype\r\n\r\n* Delete buttons don't actually delete items from + the list\r\n* Add screen doesn't actually add an item to the list" + CSDU4 Project Bug Feature_markdown_instruction: "# Improving and Iterating\r\n\r\nYou've + put your app in front of users, gathered feedback, and identified bugs and + new features - time to do something about it.\r\n\r\n# Do This\r\n\r\nEach + team member is going to implement select features and bug fixes on their own + version of the team's app. Start by selecting a sticky note from the **To + Do** column of your team's chart and moving it to the **Doing** column. For + each sticky you tackle:\r\n\r\n* Make a remix of your app at it's current + state. This ensures that you always keep a working copy of your app as you + try to add new features\r\n* Give your remix a meaningful name, such as \"Pancake + Finder - original\", or \"Pancake Finder - navigation fix\"\r\n* Return here + to work on your app\r\n* Add a comment to the top of your program describing + the feature or bug fix you are implementing\r\n* Work on your iteration until + it works. Try to stay focused on only the single feature or bug that you've + selected.\r\n* When done, move your sticky to the **Done** column, pick a + new one, and start the process over." + CSDU4 Project Functionality_markdown_instruction: "# Add Some Functionality\r\n\r\nUsing + the list you brainstormed with your team, add a single piece of new functionality + to your app.\r\n\r\n# Do This\r\n\r\nBefore adding anything new to a working + app, it's always a good idea to make a backup. Click the \"Remix\" button + in the header, give your remix a good name, and then come back here.\r\n\r\nFor + each piece of functionality you incorporate:\r\n\r\n* Make a remix of your + app at it's current state\r\n* Return here to work on your app\r\n* Add a + comment to the top of your program describing the functionality you are trying + to add\r\n* Work on your app until it works. Try to stay focused on only the + single piece of functionality you've chosen\r\n* When done, pick a new idea + and start the process over\r\n" + CSDU4 Project Import_markdown_instruction: "# Back To Your App\r\n\r\nNow that + you've had some practice with importing screens, it's time to start working + on your team's app.\r\n\r\n# Do This\r\n\r\nEach member of your team is going + to create their own copy of the app, with all of the team members' screens + imported in. This will be your copy of the app, and the copy that you will + start to add code to in the next lesson.\r\n\r\n* Collect all of the sharing + urls for your team's pages\r\n\t* You can find the share url by going back + to the last level of the previous lesson, or by finding the screen in your + [projects directory](/projects)\r\n* Import each of the screens, one at a + time\r\n\t* If you run into an ID error with one of the screens, discuss the + issue with the screen's creator so it can be fixed and imported\r\n* Delete + the default \"screen1\"\r\n* Set the main screen as the default\r\n\r\nDon't + worry about adding any code at this point; we'll get to that in the next + level." + CSDU4 Quiz App Demo_markdown_instruction: "# Quiz Me\r\n\r\nA quiz app can + be used to teach, or help reinforce, information important to your chosen + topic.\r\n\r\nAt its most basic, a quiz app is composed of a screen for each + question with two or more buttons for multiple choice answers. Each button + links to a page that either confirms that you were correct, or gives you information + about why you were were wrong.\r\n\r\nMore advanced quiz apps could include + features such as:\r\n\r\n* Different types of questions (such as matching, + free response, or even interactive games)\r\n* Randomizing the order of questions\r\n* + Changing the questions based on how we'll you're doing\r\n* Providing a + final score\r\n* Incorporating study material\r\n\r\n# Functionality Missing + from this Prototype\r\n\r\n* Questions aren't actually checked for correctness" + CSDU4 nameAgeTemplate_markdown_instruction: "# Text Input Elements\r\n\r\nSo + far we've been using `promptNum` as a simple way to get a number as input. + Now that we know a little about strings were are going to create **user interface + elements that users can use to submit text (i.e. strings) instead**. The first + and simplest example is `textInput` which you can find in Design Mode.\r\n\r\n<img + src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 + PM.png\" style=\"width: 100px\">\r\n\r\n# Do This\r\n\r\n* **Add two text + input elements to this program**, one for the name and one for the age of + the user.\r\n* **Give your text input elements descriptive and meaningful + IDs**\r\n* **In Design Mode** set their default text to prompt the user for + their name in age\r\n* **Compare your app to the example below**\r\n\r\n<img + src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 + PM.png\" style=\"float:left; width:200px;\">\r\n<br>" + CSDU6 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions + as Indexes: Using Variables\r\n\r\n* **Starter code** has been provided which + creates an list of identifiers for icons in the icon library\r\n* **Write + code** that sets the image on the screen to a random icon from the list" + CSDU6 - Arrays - indexPractice_markdown_instruction: "# Index Practice\r\n\r\n<img + src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has + been provided that creates a list called `colors`.\r\n\r\n* Use `setProperty` + and the list of colors to change the `background-color` of the buttons to + create a rainbow. The first button has been done for you." + CSDU6 - Arrays - length_markdown_instruction: "<img src=\"https://images.code.org/f02914c957acffecbadaa3646388d26c-image-1486499703151.33.50 + PM.png\" style=\"width: 200px; float:right\">\r\n\r\n# List Length\r\n\r\n* + **Starter code** has been provided which creates several long arrays.\r\n* + **Use `list.length` and `console.log`** to determine how many items are in + each array. An example of the output is below." + CSDU6 - Arrays - lengthMinus1_markdown_instruction: "# Accessing Last Item + in List\r\n\r\n* **Starter code** has been provided that which creates several + lists.\r\n* **Write Code** to display the final item in each list. Make sure + to use list.length so that your code will work even if the list shrank.\r\n" + CSDU6 - UI and Inputs - Debug Screens and IDs_markdown_instruction: "# Debug + The Program\r\n\r\nIn Unit 4 you learned how to set up the UI of an app, give + elements meaningful IDs, and switch between screens using button clicks. The + programmer that created this app did not use good IDs and that caused their + code to be buggy. Can you fix their code?\r\n\r\n* Go into Design Mode and + give everything meaningful IDs\r\n* Set up the event handlers so that the + buttons transition to the correct screen (see diagram below)\r\n\r\n![](https://images.code.org/f9c9a9b5cbcb6e1cd59b1349625b7e9d-image-1485898200882.png)" + CSDU6 - UI and Inputs - dropdown setText_markdown_instruction: "# setText and + getText\r\n\r\nOften you will want to get the text of a UI Element and use + it to set the text of another element on the screen. Can you get the text + from the dropdown when the user picks a new input and use it to set the text + of the choiceDisplay label." + CSDU6 - UI and Inputs - event type testing_markdown_instruction: "# Event Testing: + \r\n\r\nSo far you have only used the 'click' event type. However there + are lots of other event types. You are going to test out a couple different + event types for 4 different UI elements (Button, Dropdown, Slider, Text Input).\r\n\r\n**Starter + Code:** The starting code is set up to react to the *click* event for the + *button*. When that event fires a message will be logged to the console.\r\n\r\nOne + at a time, **change either the ID or event type**. Run the program and write + down you observations of when this event fires. Keep going until you have + tried all the combinations of events in the table." + CSDU6 - UI and Inputs - function_markdown_instruction: "# setColor Function\r\n\r\nAt + this point you probably have the same code inside each of your event handlers. + Remember that when you have repeated code it is good to put it into a function. + Can you use functions to get rid of the repeated code?" + CSDU6 - UI and Inputs - get set with text input_markdown_instruction: "# setText + and getText\r\n\r\nYou've seen how to use getText and setText already. Can + you make this app get the text the user typed once they hit enter and show + it in the text area at the bottom?" + CSDU6 - UI and Inputs - getNumber practice_markdown_instruction: "# getNumber\r\n\r\n**Starter + Code:** The program tries to update the valueDisplay whenever the slider value + changes but it always sets the value to 10.\r\n\r\nCan you use `getNumber()` + to get the value of the slider and update the valueDisplay as it changes?" + CSDU6 - UI and Inputs - getNumber_markdown_instruction: "# getNumber\r\n\r\n**Starter + Code:** This program creates a simple calculator but **there is something + wrong with it. Try putting in 2 + 2.**\r\n\r\nWe can fix this by using `getNumber()` + instead of `getText()`. Can you fix the program by changing `getText()` to + `getNumber()`?" + CSDU6 - UI and Inputs - getText_markdown_instruction: "# getText\r\n\r\nTry + to set up an event handler that gets the text from the dropdown whenever a + user selects a new item from the dropdown. You will need to use the getter + `getText()`. Whenever you use a getter you should save it in a variable. Use + `console.log()` to make sure it is working." + CSDU6 - UI and Inputs - hide show_markdown_instruction: "# Hide and Show\r\n\r\nIt + is a little weird that both buttons are on the screen at the same time. You + don't need the stop alarm button until the alarm is on. Can you make the + buttons only show when they are needed?\r\n\r\n* You will want the stop alarm + button to be hidden when the program starts. You can do this in design mode.\r\n\r\nHint: + When you click the trigger alarm button, you should change the text, hide + the trigger alarm button, _and_ show the stop alarm button." + CSDU6 - UI and Inputs - set slider range_markdown_instruction: "# Set Slider + Range\r\n\r\nSliders represent a range of numbers. In order to set that range + you need to set the minimum value and maximum value for each slider. Do you + remember what the range of values is you can give for each value in a RGB + color?" + CSDU6 - UI and Inputs - setProperty Image_markdown_instruction: "# setProperty + image\r\n\r\n**Note:** This level starts in Design Mode.\r\n\r\nThere is an + image element set up for you but it does not show when you leave Design Mode + because it has not been told what image to display. \r\n\r\n* Use the `setProperty()` + command to set the image of the UI Image Element on the screen.\r\n" + CSDU6 - UI and Inputs - setProperty first level_markdown_instruction: "# setProperty\r\n\r\n**Starter + Code:** There is one call to `setProperty()` which sets the text-color to + blue when you run the program.\r\n\r\nCan you add more calls to `setProperty()` + that change other things about the text when you run the program? Try to change + at least 3 more things.\r\n" + CSDU6 - UI and Inputs - setProperty_markdown_instruction: "# setProperty background-color\r\n\r\nChange + the `background-color` of a button to a new random color each time it is clicked + using `setProperty()`." + CSDU6 - UI and Inputs - setScreen_markdown_instruction: "# setScreen\r\n\r\nLets + start with a setter you have used before `setScreen()`. \r\n\r\n* Make the + About Me button on the Home page go to the About Me page.\r\n* Make the Back + button on the About Me go to the Home page." + CSDU6 - UI and Inputs - setText_markdown_instruction: "# setText\r\n\r\nWe + are going to start making an alarm app. We have already set up an event handler + for the \"triggerAlarmButton\" which will change the \"statusLabel\" text + to ON when clicked. Can you make the stop alarm button change the text to + OFF when clicked?" + CSDU6 - UI and Inputs - slider UI_markdown_instruction: "# RGB Sliders\r\n\r\n<img + src=\"https://images.code.org/f3fb468a73aa35b69d7e64deee34c7c3-image-1486080850211.12.39 + PM.png\" style=\"width:200px;float:right\">\r\n\r\nFirst step to creating + the RGB Sliders app is to set up the UI elements and event handers for the + sliders. \r\n\r\n* Can you get the screen to look similar to the one below? + Hint: The color box is a button with no text.\r\n* Can you set up 3 event + handlers that listen for when someone has finished moving the slider to a + new location? Hint: Think back to your event investigation. Which event type + do you want?" + CSDU6 - button debug_markdown_instruction: "# Debug\r\n\r\n<[gif needed]>\r\n\r\nThis + program should work like the image on the right - toggle LEDs one by one in + the direction of the button you click. Clicking the left button should cause + LEDs to toggle counter clockwise, while clicking the right button should toggle + LEDs clockwise. Find and fix all of the bugs to get the program working again." + CSDU6 - button on off_markdown_instruction: "# On and Off Buttons\r\n\r\n<[pic + needed]>\r\n\r\nRight a program that works like the image to the right. The + left button should turn on all of the color LEDs, and the right button should + turn them off again." + CSDU6 - button screen buttonL_markdown_instruction: "# Board Events\r\n\r\nThe + `onBoardEvent()` command allows you to start taking input from your Circuit + Playground. This app has two screens, \"red_sreen\" and \"blue_screen\". Using + the provided board event handler, write a program that switches to the blue + screen when the left button on your board is pressed." + CSDU6 - button screen buttonR_markdown_instruction: "# Changing the Input\r\n\r\n<img + src=\"https://images.code.org/cc903e4a0fb57b241b90abe220f027ef-image-1487707484420.04.00.png\" + style=\"float:right; margin-left: 10px; width: 50%\">\r\n\r\nUsing another + `onBoardEvent()` block, make `buttonR` change the screen back to \"red_screen\". + The first input of the `onBoardEvent()` command lets you pick which board + object to watch." + CSDU6 - button switch_markdown_instruction: "# The Toggle Switch\r\n\r\nWhile + the toggle switch is in many ways similar to the left and right buttons, the + reasons you might use it can be different. Unlike the buttons, the toggle + switch stays in whichever position you place it, so it doesn't have a \"press\" + event. In fact, you'll find that none of the events you used with buttons + are present for the toggle switch.\r\n\r\n# Do This\r\n\r\nDrag out an `onBoardEvent()` + block and select `toggleSwitch` from the first dropdown\r\n\r\n* Look at the + options available in the events dropdown. What do you think they do?\r\n* + Write a program that turns on half of the color LEDs at a time, based on the + position of the toggle switch <[pic needed]>\r\n\r\n_Challenge:_ The toggle + switch events will only fire when the switch changes, so when you start the + program you'll need to flip the switch for your code to work. Can you fix + it so that your program starts with the correct set of LEDs lit? Look in \"Circuit\" + drawer for a block that could tell you which position the toggle switch is + in." + CSDU6 - button toggle_markdown_instruction: "# Toggle with a Button\r\n\r\nUsing + `onBoardEvent()`, can you write a program that toggles the red LED when you + click the left button?" + CSDU6 - button tug o war challenge_markdown_instruction: "# Challenge\r\n\r\n_Check + with your teacher before starting this challenge_\r\n\r\nAt this point your + Tug o' War game should have basic functionality, but there are still a few + things missing. Continue fleshing out your game. You can make the game your + own in any way you like, but you might add some of the following features:\r\n\r\n* + Switch to a \"Win\" screen when one player reaches their target\r\n* Add a + \"Reset\" button to start the game over\r\n* Add different difficulty levels + or \"handicaps\" (one user may move two on each click while the other only + moves one)\r\n* Add visuals to make the game look more interesting\r\n* Use + the color LEDs to show the score" + CSDU6 - button tug o war left button_markdown_instruction: "# Making Both Buttons + Work\r\n\r\nIf you were successful in the last level, the slider should move + to the right when the right button is pressed. To get the left button to work + you need to add another event handler, only this time it should **decrease** + the variable _score_ and update the slider on each press." + CSDU6 - button tug o war right button_markdown_instruction: "# Tug o' War\r\n\r\nLet's + start working on a two player Tug o' War game. Each player will be assigned + one of the two hardware buttons (`buttonL` or `buttonR`), and they play the + game by clicking as quickly as possible. Each time one of the buttons is clicked, + it should move the slider \"tug_slider\" in the direction of that button.When + the slider gets to one of the ends (either -10 or 10), that player wins.\r\n\r\n# + Do This\r\n\r\nFirst we'll get the right button working. You've already + been provided an event handler for `buttonR` - when the \"press\" event occurs, + your program should:\r\n\r\n* Increase the variable _score_ by one\r\n* Set + the value of \"tug_slider\" to the new score\r\n\r\nDon't worry about the + other button yet, we'll get to that in the next level." + CSDU6 - button up down predict question_markdown_instruction: "What do you + think will happen when you run this code? What will happen when you press + the left and right buttons?" + CSDU6 - button up down_markdown_instruction: "# Down and Up Events\r\n\r\nAs + you saw in the last level, the \"down\" and \"up\" events allow you to respond + to buttons being pressed down and being released back up, respectively.\r\n\r\n# + Do This\r\n\r\nUsing those events, can you write a program that shows the + label with id \"alert_message\" while the button is pressed down, but hides + it again when the button is released?" + CSDU6 - ch 1 exemplar LEDs_markdown_instruction: "# An Example Using Color + LEDs\r\n\r\nHere's an example app that uses the color LEDs, event handlers, + and a for loop to create an visual color mixer. Run this app and analyze how + you think it was written." + CSDU6 - ch 1 project design_markdown_instruction: "# Set Up Your Screen\r\n\r\nUsing + the project guide, set up the elements of your screen in Design Mode." + CSDU6 - ch 1 project events_markdown_instruction: "# Event Handlers\r\n\r\nSet + up an event handler for each of the elements you plan to use for input. Don't + worry yet about getting the them fully functional, but you might use `console.log()` + statements to help with testing." + CSDU6 - ch 1 project finish_markdown_instruction: "# Add the Finishing Touches\r\n\r\nGo + back to your project guide and check to see that your app is addressing the + goals you set out. This is your chance to add finishing touches, improve functionality, + and get your app ready to be used by other people. When you're are finished, + and have thoroughly tested it, use the share button to share your app out + with others." + CSDU6 - ch 1 project functions_markdown_instruction: "# Functions\r\n\r\nCreate + all of the functions that you identified in your project guide." + CSDU6 - ch 1 project output_markdown_instruction: "# Board Output\r\n\r\nAt + this point you should have the structure of your app mostly fleshed out. Test + your program as is to make sure that everything currently works as expected. + Once you are confident in your program as-is, add the code to send output + to your board." + CSDU6 - for loop - 1_markdown_instruction: "# For Loop - Looping Through A + List\r\n\r\n* Print out all the items in the colors list using a for loop" + CSDU6 - for loop - 10_markdown_instruction: "# For Loop - Looping Through A + List\r\n\r\nYou saw this for loop on the last level:\r\n\r\n<pre>\r\nfor(var + i = 0; i < daysOfWeek.length; i++){\r\n console.log(i);\r\n}\r\n</pre>\r\n\r\nWhich + prints the numbers from 0 to one less than the list length in this case (0 + to 6). Another way of looking at this is that it prints all the index values + in the list! This might be helpful to loop through a list!\r\n\r\n**Starter + Code:** This program writes out each item of the array individually. \r\n\r\n**Write + Code** that uses the for loop from the last level to print out all the items + in the list." + CSDU6 - for loop - 2_markdown_instruction: "# For Loop - Condition\r\n\r\n* + Run the program - how many times does it print?\r\n* Change the 2 to another + positive number less than 5. What happens?" + CSDU6 - for loop - 3_markdown_instruction: "# For Loop - Starting Value\r\n\r\nYou + can change where a for loop starts counting.\r\n\r\n* Run the program what + number does it start counting at?\r\n* Try changing the 5 to a different number\r\n\t* + What happens if you make the number negative?\r\n * What happens if you + make the number bigger than 10 (since the condition is i < 10)?" + CSDU6 - for loop - 4_markdown_instruction: "# For Loop - Incrementor \r\n\r\n* + Run the program what numbers is it printing?\r\n* Try to change the 2 to another + number, what happens?" + CSDU6 - for loop - 6_markdown_instruction: "# For Loop - Condition Practice\r\n\r\nChange + the condition of the for loop so that the word message prints 6 times." + CSDU6 - for loop - 7_markdown_instruction: "# For Loop - Starting Value Practice\r\n\r\nEdit + the starting value and the condition of the loop so that it counts from 50 + to 100.\r\n" + CSDU6 - for loop - 8_markdown_instruction: "# For Loop - Incrementor Practice\r\n\r\nCan + you make the program count from 30 to 60 by 3s? (30,33,36,39......57,60)" + CSDU6 - for loop - 9_markdown_instruction: "# *for* Loop with *if*\r\n\r\nSometimes + we want to find values in an array that meet certain conditions. We can add + an **`if` statement inside the `for` loop** to individually check every value + within the array. To practice this, we will create a `for` loop that will + **display every value in the array greater than 5**.\r\n\r\n# Do This:\r\n** + Starter code** has been been provided that creates an array of random values.\r\n\r\n* + Add a `for` loop that references every index in the array.\r\n\r\n* Add an + `if` statement inside the `for` loop that **displays every value in the array + greater than 5** using `console.log`\r\n\t![](https://images.code.org/969077ff23232e410ce17520b0a71e1e-image-1447390972867.gif)\r\n \r\n* + **Note:** Because the original array is being constructed with random values + it's *possible* that it might not have any values greater than 5. Just run + the program a few times to make sure it works. An example of the possible + output is below.\r\n\r\n![](https://images.code.org/266e23afc3533ebd63b393b2ee8682d8-image-1447796380510.39.26 + PM.png)\r\n" + CSDU6 - for loop - around for loop_markdown_instruction: "# Before and After + For Loop\r\n\r\n* Run this code and check out when the console.log statements + before and after the for loop print." + CSDU6 - for loop - button grid 1_markdown_instruction: "# Random Button Colors\r\n\r\n**Starter + Code:** An array with the name of the 30 buttons on the screen (not including + the New Pattern button) is provided for you. \r\n\r\n**Write Code** that loops + through all the buttons on the screen and gives them each a random color when + the New Pattern Button is clicked." + CSDU6 - for loop - color buttons with for_markdown_instruction: "# Lists\r\n\r\n<img + src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\nTake a look at the code + you wrote in the last level. Can you make it better by using a loop to set + the button colors instead?" + CSDU6 - for loop - color buttons_markdown_instruction: "# Lists\r\n\r\n<img + src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has + been provided that creates a list of colors and a list of the buttons on the + screen. In addition there is code to set each button to a color.\r\n\r\n**Change + the code** so that instead of the name of each button being using in the call + to `setProperty` the list index is used instead. For example:\r\n\r\n<pre>\r\nsetProperty(buttons[0],\"background-color\", + colors[0]);\r\n</pre>" + CSDU6 - for loop - condition with for_markdown_instruction: "# *for* Loop with + *if*\r\n\r\nAnother way to use a for loop is to count the number of occurances + of something in list. \r\n\r\n** Starter Code:** The program generates an + list of 5 random numbers from 1 to 3. \r\n\r\n**Write Code:** Write a program + that prints the number of 2s in the list.\r\n\r\n* You will need to write + an if statement to check if the current value of the list is equal to 2\r\n* + Instead of printing that value inside the if statement like on the last level + you will want to increment a variable that keeps track of the number of 2s.\r\n* + Print out the variable after the for loop runs!" + CSDU6 - for loop - count down_markdown_instruction: "# Counting down\r\n\r\nSo + far all the programs you have written count up. Can you make this program + count down from 10 to 1? Hint: You need to change something about all three + parts of the for loop!" + CSDU6 - for loop - next day_markdown_instruction: "# Accessing Items in a List\r\n\r\n**Starter + Code:** There is a list of days of the week provided as well as a command + to set the label on the screen.\r\n\r\n**Do This:** Can you change the index + value so that the page displays \"Today is: Tuesday\"" + CSDU6 - for loop - predict repeat_markdown_instruction: "# For Loop - Condition + Practice\r\n\r\nChange the condition of the for loop so that the word message + prints 6 times." + CSDU6 - for loop - repeatedCode_markdown_instruction: "# Refactoring To For + Loop\r\n\r\nFor loops are just a way of simplifying repeated code and make + it easier to update in the future.\r\n\r\n* Can you take the repeated code + here and turn it into a for loop?" + CSDU6 - for loop - why for_markdown_instruction: "# Lists\r\n\r\n<img src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\nWhy are loops so great? Well + lets try something out.\r\n\r\n* Add another button to your screen in design + mode.\r\n* Add a color for that button to the end of your list of colors\r\n* + Add the button name for that button to the end of your list of buttons\r\n* + Run your program!\r\n\r\nDid it work? Notice you never changed the for loop + at all!" + CSDU6 - for loop - winning num_markdown_instruction: "# Debug\r\n\r\nThis program + is supposed to generate 3 random winning numbers from 1 to 5. There is a list + of numbers but it seems like there are some bugs with generating the 3 random + numbers when the Draw Numbers button is clicked. Can you debug the program? + Check to make sure you can get every number in every slot of the winning numbers + area. " + CSDU6 - for loops - lights picker_markdown_instruction: "# Challenge: More + Patterns\r\n\r\nYour work on the color light patterns is back:\r\n\r\n* Consider + using the all lights on and all lights off functions you made on the last + level here.\r\n* Can you edit the patterns you created to use for loops where + appropriate?\r\n* Can you add more patterns that use for loops?" + CSDU6 - lists - lists 1_markdown_instruction: "# Lists\r\n\r\nLet's practice + adding items and printing out lists.\r\n\r\n* Add a `console.log()` command + to print out the lettersList\r\n* Add the letter \"c\" to the letters list + so it prints [a,b,c,d]" + CSDU6 - lists - lists 2_markdown_instruction: "# Create Your Own Lists\r\n\r\n**Write + code:** to create _one or more_ of the following lists:\r\n\r\n* The numbers + from 1 to 10\r\n* A list of the names of 5 different shapes\r\n* The names + of the months of the year" + CSDU6 - lists - lists 3 - out of bounds_markdown_instruction: "# Accessing + Items in a List\r\n\r\n**Starter Code:** There is a list of days of the week + provided as well as well as a console.log statement to access the spot that + holds \"Friday\" in the list. \r\n\r\n**Do This:** Can you add three more + console.log statements that access the spots that hold:\r\n\r\n* Thursday\r\n* + Monday\r\n* Sunday" + CSDU6 - lists - lists 3_markdown_instruction: "# Accessing Items in a List\r\n\r\n**Starter + Code:** There is a list of days of the week provided as well as a command + to set the label on the screen.\r\n\r\n**Do This:** Can you change the index + value so that the page displays \"Today is: Tuesday\"" + CSDU6 - lists - lists 5_markdown_instruction: "# Debug\r\n\r\nThis program + is supposed to generate 3 random winning numbers from 1 to 5. There is a list + of numbers but it seems like there are some bugs with generating the 3 random + numbers when the Draw Numbers button is clicked. Can you debug the program? + Check to make sure you can get every number in every slot of the winning numbers + area. " + CSDU6 - sensor love tester demo_markdown_instruction: "# \"Love\" Tester\r\n\r\nThe + \"Love\" Tester is a classic carnival game. It works by having a user place + their palm flat on a sensor or hold a metal handle. The tester then displays + how in love that person is. The simplest version of these machines simply + measure the temperature of the user’s hand and equate more love with a higher + temperature.\r\n\r\nTest out this \"Love\" Tester by holding your thumb down + on your Circuit Playground's temperature sensor. Compare your results with + those of your neighbors - do all of the boards respond in the same way?" + CSDU6 - sensor theremin demo_markdown_instruction: "# Light Theremin\r\n\r\nA + theremin is an instrument that can be played without the musician actually + touching it! Traditional theremins use magnetic fields for user interaction, + but a simpler version can be made by detecting and reacting to light.\r\n\r\nTest + out this theremin by waving your hand over the light sensor on your Circuit + Playground. How does the tone change as the amount of light detected changes?" + CSDU6 - sensor vu meter demo_markdown_instruction: "# VU Meter\r\n\r\nMany + stereo systems feature a row of LEDs that light up as the music plays. This + display is called a Volume Unit (VU) Meter, and it allows the user to see + how loud the music is as it plays.\r\n\r\nTest out this VU Meter by speaking + or otherwise making noise near the Circuit Playground. How do the lights and + display change as the volume of ambient noise changes?" + CSDU6 - sensors challenge_markdown_instruction: "# Challenge\r\n\r\n_Check + with your teacher before pursuing this challenge_\r\n\r\nNow that you've + practiced taking input from the various analog sensors and changing their + scale to meet your needs, can you come up with an interesting use for sensor + data? It's easy to display the raw numbers coming out of a sensor, but far + more interesting to present that data in different ways.\r\n\r\nConsider the + following ways you might communicate sensor data:\r\n\r\n* Use the board outputs\r\n* + Change the width, height, or position of a UI element\r\n* Use conditionals + to display different images based on sensor values" + CSDU6 - sensors experiment_markdown_instruction: "<iframe width=\"370\" height=\"620\" + style=\"float:left; margin-right: 25px; border: 0px;\" src=\"https://studio.code.org/projects/applab/iCWa6Gsb-W4StwmqFX5TkA/embed\"></iframe>\r\n\r\n# + Sensor Experiment\r\n\r\nRun the program to the left and experiment with your + board. Try interacting with your board in many different ways to figure out + what each sensor might be. Once you've completed the experiment, answer the + following questions for each sensor in the text box below.\r\n\r\n* What does + this sensor measure?\r\n* What is it's maximum value?\r\n* What is it's + minimum value?" + CSDU6 - sensors light_markdown_instruction: "# Light Sensor Updates\r\n\r\nThis + app is very similar to the last, but we've added a button with the ID \"update_button\". + Write a program that displays the current value of the light sensor every + time the update button is clicked." + CSDU6 - sensors love tester 1_markdown_instruction: "# \"Love\" Tester: Collecting + and Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat + scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an + event handler to continually collect data from your chosen sensor and use + `console.log()` to track how it changes to user interaction. If necessary, + change the scale of your input to meet your needs.\r\n\r\n_Tip: Consider which + type of data is easiest to use from the temperature sensor - the raw value, + temperature in C, or temperature in F._" + CSDU6 - sensors love tester 2_markdown_instruction: "# \"Love\" Tester: Displaying + Output\r\n\r\nHow will your collected data be displayed?\r\nDoes your data + need to be transformed or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace + your call to `console.log()` with the kind of output you need for your project.\r\n\r\n_Tip: + You may want a conditional to determine which output to display depending + on input._" + CSDU6 - sensors love tester 3_markdown_instruction: "# \"Love\" Tester: Finishing + it Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# + Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning + guide to make sure that the app meets your initial goals." + CSDU6 - sensors predict question_markdown_instruction: "# Make a Prediction\r\n\r\nRead + the code in this program and make a prediction below. What do you think this + program will do when you run it? How is the user intended to interact with + the board?" + CSDU6 - sensors rgb part 1_markdown_instruction: "# Displaying Sensor Readings + in Color\r\n\r\nIn the previous prediction level you saw how the `setScale()` + method can convert the full range of sensor readings (0-1023) into a range + that can be used for RGB values (0-255). Let's build on that idea to make + an app that can communcate the current value of all three analog sensors with + a single color.\r\n\r\n# Do This\r\n\r\nTo start, we just need to set the + sensor scales correctly - don't worry about actually setting the color of + the background yet.\r\n\r\n<img src=\"https://images.code.org/39de88e19682e905a1e08d5f12398f35-image-1488995498849.png\" + style=\"float: right; width: 300px; margin-left: 20px;\"/>\r\n\r\n* Using + the `sensor.setScale()` block, set each of the three analog sensors to the + right scale for an RGB color channel.\r\n* Create a variable for each of the + three colors and assign each one to the `.value` of a different sensor.\r\n* + Use `console.log()` to test that your variables are in the correct range.\r\n\r\n_Hint: + Order matters. You need to set the scale of a sensor before checking it's + value_" + CSDU6 - sensors rgb part 2_markdown_instruction: "# Putting Color on the Screen\r\n\r\nNow + that your sensor data is in a scale that works for RGB, you can go about setting + the screen color.\r\n\r\n# Do This\r\n\r\n* Add a `setProperty()` block and + set it to change the \"background-color\" property of \"screen1\".\r\n* Add + an `rgb()` block to the last parameter of `setProperty()`.\r\n* Use the three + color variables you created as inputs to the `rgb()` block." + CSDU6 - sensors rgb part 3_markdown_instruction: "# Continuous Updates\r\n\r\nThis + sensor-to-color app isn't super useful if it only sets the color once when + you start the app. You can use the sensors' \"data\" event to make your app + continually update the background color every time the value changes.\r\n\r\nMove + your `setScale()` blocks into a an event handler for one of the sensors to + make the app update continually." + CSDU6 - sensors sound_markdown_instruction: "# Reading the Sound Sensor\r\n\r\nIn + this app we've already added a text label with the id \"sound_value\". Using + the `soundSensor.value` block. display the value of the sound sensor." + CSDU6 - sensors temp f c_markdown_instruction: "# Temperatures in Fahrenheit + and Celsius\r\n\r\nWhile the sound, light, and temperature all behave in the + same fashion (converting an analog input to a 10 bit number), the temperature + sensor is often used a bit differently. Typically if you are using a temperature + sensor, you want to get a temperature in Fahrenheit or Celsius, not just a + number in a range. To help with this, the temperature sensor how two special + blocks, `tempSensor.F` and `tempSensor.C`.\r\n\r\n# Do This\r\n\r\nUsing an + event handler, write a program that continuously updates the labels \"temp_c\" + and \"temp_f\" with the appropriate temperature readings." + CSDU6 - sensors temp_markdown_instruction: "# Make a Thermometer App\r\n\r\nSimilar + to the sensors you saw in the previous levels, you can get the raw value of + the temperature sensor using `tempSensor.value`. For the temperature sensor, + however, there are some more interesting properties available. `tempSensor.F` + and `tempSensor.C` will convert the raw input value to either Fahrenheit or + Celsius.\r\n\r\n# Do This\r\n\r\nMake a simple thermometer app that reads + in values from the temperature sensor. Your app can display the temperature + in either Fahrenheit or Celsius (or both!)\r\n\r\n_Challenge: can you make + your app continually update the temperature readings?_" + CSDU6 - sensors theremin 1_markdown_instruction: "# Light Theremin: Collecting + and Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat + scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an + event handler to continually collect data from your chosen sensor and use + `console.log()` to track how it changes to user interaction. If necessary, + change the scale of your input to meet your needs." + CSDU6 - sensors theremin 2_markdown_instruction: "# Light Theremin: Displaying + Output\r\n\r\nHow will your collected data be displayed?\r\nDoes your data + need to be transformed or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace + your call to `console.log()` with the kind of output you need for your project." + CSDU6 - sensors theremin 3_markdown_instruction: "# Light Theremin: Finishing + it Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# + Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning + guide to make sure that the app meets your initial goals." + CSDU6 - sensors vu meter 1_markdown_instruction: "# VU Meter: Collecting and + Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat + scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an + event handler to continually collect data from your chosen sensor and use + `console.log()` to track how it changes to user interaction. If necessary, + change the scale of your input to meet your needs.\r\n\r\n_Tip: If you are + going to use the 10 color LEDs for output, how should you set the scale of + your sensor?_" + CSDU6 - sensors vu meter 2_markdown_instruction: "# VU Meter: Displaying Output\r\n\r\nHow + will your collected data be displayed?\r\nDoes your data need to be transformed + or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace your + call to `console.log()` with the kind of output you need for your project.\r\n\r\n_Tip: + You may want to use a conditional to determine which LEDs to turn on, and + which one's to turn off_" + CSDU6 - sensors vu meter 3_markdown_instruction: "# VU Meter: Finishing it + Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# + Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning + guide to make sure that the app meets your initial goals." + CSDU6 - timed loop challenge_markdown_instruction: "# Challenge\r\n\r\n_Ask + your teacher before embarking on this challenge_\r\n\r\nUsing your new _timed + loop_ skills, create an interesting program of your own design. Consider using + multiple loops running at different speeds, or combining _timed loops_ with + the `blink()` and `play()` helpers you saw in the previous level.\r\n\r\nYou + can either start from scratch here, or remix any of the earlier levels in + this lesson." + CSDU6 - timed loop console.log()_markdown_instruction: "# Starting From Scratch\r\n\r\nNow + that you've got some practice with `timedLoop()`, let's see if you can set + one up from scratch.\r\n\r\n# Do This\r\n\r\n* Get a `timedLoop()` block from + the _Control_ drawer in your toolbox\r\n* Change the _ms_ input so that the + loop runs twice a second\r\n* Inside the loop, write the console with `console.log()`" + CSDU6 - timed loop for LEDs_markdown_instruction: "# Turn on Each RGB LED and + Exit\r\n\r\nUsing a _timed loop_ in place of a _for loop_ loop requires that + you set up a counter variable, increment it each time the loop is run, and + use a conditional to determine when to exit the loop. Set up a _timed loop_ + to turn on each of the color LEDs one at a time and then exit. Refer back + to the previous page for examples." + CSDU6 - timed loop helpers_markdown_instruction: "# Timed Loop Alternatives\r\n\r\nBlinking + lights and playing notes are common enough activities that we've provided + some helpers to do them more easily.\r\n\r\n# Do This\r\n\r\nRun this code + to see how the helpers work, and then **discuss** with a neighbor how you + might do this with a _timed loop_." + CSDU6 - timed loop question timed_markdown_instruction: "What do you think + will happen when you run this code?" + CSDU6 - timed loop random blink_markdown_instruction: "# Timed Blinking\r\n\r\nThe + provided code toggles a randomly selected color LED once. Place that line + inside a timed loop to make a randomized pattern of blinking lights." + CSDU6 - timed loop random sound exit_markdown_instruction: "# Ending The Song + and Light Show\r\n\r\nHere's the randomized light and music app you created + earlier. Using the `stopTimedLoop()` command, can you make the program stop + at some point? You can choose one of the following ways to stop:\r\n\r\n* + Use a _counter_ variable and stop the loop after the counter has reached a + certain point (like a _for loop_)\r\n* Add a button and event handler to call + `stopTimedLoop()` when clicked.\r\n\r\n_Make sure you also turn off all of + the LEDs when the show is over!_" + CSDU6 - timed loop random sound_markdown_instruction: "# Disco Dance Party\r\n\r\nAdding + some sound to your blinking lights would really kick this program up a notch.\r\n\r\n# + Do This\r\n\r\n* At the top of the program, create an list of notes, such + as `var notes = ['C4', 'D4', 'E4']`\r\n* Inside the timed loop, randomly + select one of the notes to play with `buzzer.note()`\r\n\r\n_Challenge: By + default the lights are all blinking white - can you set them to random colors?_" + CSDU6 - timed loop smiley event_markdown_instruction: "# What Happens Between + Repetitions\r\n\r\nWhen the `timedLoop()` is waiting for the next repetition, + the rest of your program is free to do whatever else it needs to do, including + respond to events.\r\n\r\nAdd an event handler for the \"smiley\" image. You + can make the event do whatever you like - just test it to make sure that your + event responds each time the image is moved.\r\n\r\n**Heads Up**: Make sure + to put your event handler **outside** of the loop, otherwise a new event handler + will be added _every time your loop is run!_ \r\n\r\n_Challenge: At this point + you've got the start of a simple clicker gamer. Consider keeping track of + score, or adding additional event handlers._" + CSDU6 - timed loop smiley rand y_markdown_instruction: "# Infinite Loop\r\n\r\nThe + `timedLoop()` is really useful not only for looping code at a slower speed, + but also if you want to a loop to run infinitely. The provided program moves + the image \"smiley\" to a random x position every second, can you make the + image also move to a random y?" + CSDU6 AppLab Input 1_markdown_instruction: "# Input in App Lab\r\n\r\n_You + don't need to make any changes to the code here_\r\n\r\nTake a minute to + read through the code and run the program. Discuss with a partner:\r\n\r\n1. + What is the source of input?\r\n2. Where and how does the program check for + input?\r\n3. What does the program do when it gets the right input?\r\n3. + What is the program doing when there is no input?" + CSDU6 Circuit Playground Test_markdown_instruction: "# Test Your Board\r\n\r\nThis + level is just a quick test to make sure your board is working. To run this + test, do the following:\r\n\r\n1. Plug your board into your computer with + a USB cable\r\n2. Click \"Run\"\r\n3. Wait a few seconds for either a Success + or Error screen to pop up\r\n4. If your test was successful, move on to the + next level. If not, try some of the troubleshooting steps\r\n\r\n## Troubleshooting\r\n\r\nThere + are a number of things that could prevent your test from passing.\r\n\r\n1. + Try refreshing the page and running the test again (you should refresh the + page for each of the following ideas as well)\r\n2. Try connecting your board + to a different USB port\r\n3. Try a different USB cable. Some USB cables can + only be used for charging, so make sure your cable supports data transfer!\r\n4. + Try a different board\r\n5. Go to [studio.code.org/maker/setup](/maker/setup) + to run a more detailed test" + CSDU6 GameLab Input 1_markdown_instruction: "# Input in Game Lab\r\n\r\n_You + don't need to make any changes to the code here_\r\n\r\nTake a minute to + read through the code and run the program. Discuss with a partner:\r\n\r\n1. + What is the source of input?\r\n2. Where and how does the program check for + input?\r\n3. What does the program do when it gets the right input?\r\n3. + What is the program doing when there is no input?" + CSDU6 LED alarm silent_markdown_instruction: "# Silent Alarm\r\n\r\nHere's + the alarm app that you started in the last lesson. Right now it doesn't do + much, so let's see if we can make it more useful by hooking it up to your + board. When the alarm is triggered, turn on the red LED. When the alarm is + stopped, turn the LED off again.\r\n\r\n# Do This\r\n\r\nAdd `led.on()` and + `led.off()` blocks to the events that trigger and disable the alarm.\r\n\r\n_Notice + that the LED blocks have been moved to a new drawer called Circuit_" + CSDU6 LED basics led.off()_markdown_instruction: "# Turn that LED Off\r\n\r\nJust + as you can turn your red LED on using `led.on()`, you can turn it back off + again with `led.off()`. You'll need to add a second button with an event + handler that calls `led.off()`.\r\n\r\n# Do this\r\n\r\nAdd a second button + and use its \"click\" event to turn off the LED\r\n\r\n* Drag out a new button + in Design Mode and give it a good ID\r\n* Insert an event handler for your + newly created button\r\n* Drag an `led.off()` command into your new event + handler\r\n\r\nNow you should have two buttons, one that turns the LED on, + and another that turns it off.\r\n\r\n_Challenge: Can you come up with other + ways to turn on and off the LED? Could you do it with a single button?_" + CSDU6 LED basics led.on_markdown_instruction: "# Turn on that LED\r\n\r\nThe + red LED on your board is represented in code by an object called `led`. Similar + to the sprite objects in Game Lab, you can use _dot notation_ to control the + LED. Try using the command `led.on()` to make your red LED light up when the + program is run.\r\n\r\n# Do this\r\n\r\n* Drag out the `led.on()` block and + place it underneath the comment\r\n* Run the program\r\n* Bask in the warm + red glow of your LED!" + CSDU6 LED basics onEvent_markdown_instruction: "# Turn on that LED - with a + Button!\r\n\r\nAs exciting as an always-on red LED is, an LED that you can + turn on with the click of a button seems much more useful. If you add a button + to your screen in Design Mode, then you can use move your `led.on()` command + into an `onEvent()` block.\r\n\r\n# Do this\r\n\r\nAdd a button and use its + \"click\" event to turn on the LED\r\n\r\n* Drag out a new button in Design + Mode and give it a good ID\r\n* Insert an event handler for your newly created + button\r\n* Move the code that turns your LED on _inside_ the button's event + handler\r\n\r\nIf everything worked out, you should see that your LED starts + out off, but turns on when you click the button!" + CSDU6 buzzer alarm_markdown_instruction: "# Noisy Alarm\r\n\r\nBack to the + Alarm now - now with the buzzer we can make this thing really sound like an + alarm. Using `buzzer.frequency()` and `buzzer.stop()` make your alarm play + a sound when it goes off." + CSDU6 buzzer freq_markdown_instruction: "# Playing Sounds\r\n\r\nThe `buzzer.frequency()` + command takes two inputs - the first is the _frequency_ of the sound to be + played (higher numbers = higher sounds), and the second is the _duration_ + of the sound (how long it should be played)\r\n\r\n# Do This\r\n\r\nThe provided + app has three buttons with event handlers. Add a `buzzer.frequency()` command + to each of the event handlers so that the buzzer plays the appropriate sound + (a low, medium, or high note)." + CSDU6 buzzer stop_markdown_instruction: "# Playing Longer Sounds\r\n\r\n<img + src=\"https://images.code.org/e5513675e74233d4fe55a0826376b83f-image-1487622642991.gif\" + style=\"float: right; margin: 10px;\">\r\n\r\nThe _duration_ input of the + `buzzer.frequency()` command is an _optional_ input - meaning that you don't + need to use it. You can remove an optional input by clicking the left arrow + next to it.\r\n\r\nBy removing the duration, you are telling the buzzer to + buzz continuously. You'll notice that there's a new block in the toolbox + called `buzzer.stop()` to use in this case.\r\n\r\n# Do This\r\n\r\nHere's + an app with two buttons, a Start and a Stop. Make these buttons Start and + Stop the buzzer\r\n\r\n* Add an event handler for each button\r\n* When the + Start button is clicked, make the buzzer play continuously\r\n* When the Stop + button is clicked, stop the buzzer from playing\r\n\r\n" + CSDU6 light sensor alarm_markdown_instruction: "# Auto Alarm\r\n\r\nLet's + revisit the alarm app one last time. When we last updated this app we made + it turn on or off the buzzer in addition to the LED, but it still needs to + be manually triggered. Now that we know how to use sensor events, you can + make the alarm trigger automatically!\r\n\r\n# Do This\r\n\r\nUsing the an + event handler for the light sensor, make the alarm turn on when it sees light. + You can test the alarm by placing an object like a piece of paper over the + board - if someone tries to take the piece of paper your alarm should start + buzzing.\r\n\r\n_Challenge: Can you make both the buttons and the sensor play + nicely together?_" + CSDU6- predict event types_markdown_instruction: "# Predict: Event Type\r\n\r\nSo + far you have really only used the click event type with buttons. There are + many different event types you can use in App Lab. Look at the code and predict + when each of the messages will print to the console log." + CSDU6L06 - lists and colorLeds - Light Display_markdown_instruction: "# Blink\r\n\r\nMake + lights blink \r\n\r\n" + CSDU6L06 - lists and colorLeds - blink_markdown_instruction: "# Blink\r\n\r\nMake + lights blink \r\n\r\n" + CSDU6L06 - lists and colorLeds - create light pattern_markdown_instruction: "# + Light Pattern\r\n\r\nFind a partner and bring your light patterns together.\r\n\r\nSet + up the app so the user can use what light pattern they want to see. You should + put each of your light displays in a function to make this easier" + CSDU6L06 - lists and colorLeds - debug_markdown_instruction: "<img src=\"https://images.code.org/a2b5050f76bdb262713ce52f0356fb04-image-1486151096632.JPG\" + style=\"width:250px; float:right\">\r\n# Debug: colorLeds\r\n\r\nCan you debug + the index values so that the rainbow shows up on the board like in the picture?\r\n\r\n" + CSDU6L06 - lists and colorLeds - intensity_markdown_instruction: "# Changing + Brightness\r\n\r\nSometimes you want to do more than just turn a light on + or off, you might want to set a specific brightness. The `intensity()` command + lets you set an LED's brightness (or _intensity_) from 0 - 100. Under the + hood, this works just like `buzzer.frequency()` by rapidly turning the LED + on and off to make it seem dimmer.\r\n\r\n# Do This\r\n\r\nThe provided program + has a slider that goes from 0 to 100 with an event handler. In the event handler, + set intensity of your color LEDs to the value of the slider." + CSDU6L06 - lists and colorLeds - light pattern off_markdown_instruction: "# + Turning It Off\r\n\r\nWhen you start this app your lights are off, but as + soon as choose a pattern, there's no way to turn the lights back off!\r\n\r\n# + Do This\r\n\r\nCreate a function that turns all of the LEDs off, and then + add a \"Off\" button to your app and make it turn off all of the color LEDs." + CSDU6L06 - lists and colorLeds - pulse_markdown_instruction: "# Pulse\r\n\r\nMake + lights pulse\r\n\r\n" + CSDU6L06 - lists and colorLeds - set color_markdown_instruction: "# Adding + Some Color\r\n\r\nYou probably noticed when you used `colorLeds[0].on()` in + the last level, the LEDs turned on as white. If you don't specify a color, + `on()` will turn on all three parts of the LED (red, green, and blue) to produce + white. You'll see a new command in the toolbox called `colorLeds[0].color()` + which lets you specify a color, either as a string like \"blue\" or an RGB + value using color `color()` command.\r\n\r\n# Do This\r\n\r\nUse the `.color()` + command to set each of the color LEDs to a different color." + CSDU6L06 - lists and colorLeds - song list_markdown_instruction: "<img src=\"//curriculum.code.org/images/circuitplayground/colorLedonoff.gif\" + style=\"float: right; margin: 10px;\">\r\n\r\n# colorLeds\r\n\r\nThe color + LEDs can use the same basic commands that you used with the red LED, such + as `on()` and `off()`. Using the provided buttons, write a program that turns + on and off the bottom two color LEDs (the one's furthest away from the USB + cable.\r\n\r\n# Do This\r\n\r\nAdd event handlers to the provided buttons + \"on_button\" and \"off_button\" that turn on and off the bottom two color + LEDs. Which positions in the `colorLeds` list are those two LEDs?\r\n\r\n" + CSDU6L06 - lists and colorLeds - toggle_markdown_instruction: "# Toggle\r\n\r\nThe + `.toggle()` command works like a light switch - whenever you call it on an + LED, the light will turn on if it was off, or off if it was on. This can be + a really useful alternative to using both on and off.\r\n\r\n# Do This\r\n\r\nChoose + a few LEDs and write a program that toggles them on and off when you click + the Toggle button.\r\n" + CSDU6L06 - lists and colorLeds -solo light pattern_markdown_instruction: "# + Light Patterns\r\n\r\nThis app already has one light pattern program, which + can be activated by clicking a button. Notice that we put this pattern into + a function to make the code cleaner and clearer.\r\n\r\n# Do This\r\n\r\nCreate + a light pattern function of your own - maybe the colors of your favorite holiday, + college, sports team, or try to create an image with the lights.\r\n\r\nAfter + you've created your new function, add a button and event handler so that + you can switch between the two light patterns." + CSDu2 IP CC Search_markdown_instruction: "# Finding Media\r\n\r\nNow that your + content is in place, it's time to find some good images and other media to + help make your page look better, and potentially strengthen your argument.\r\n\r\nBecuase + the Creative Commons provides such a simple way to know what media you can + and can't use, a lot of search engines have integrated Creative Commons filtering + to ensure they only give you results you can use. The Creative Commons search + page (linked below) is a compilation of CC friendly search engines that you + can use to find media for your page.\r\n\r\n# Do This\r\n\r\nUsing the Creative + Commons Search page, find a handful of pictures that you'll want to use on + your web pages. By default the search is set to the most restrictive settings. + Next to the the text **I want something that I can...** you can uncheck _use + for commercial purposes_. You can also uncheck _modify, adapt, or build upon_ + as long as you don't plan on modifying the images you find (such as adding + text, cropping, or otherwise editing).\r\n\r\n<img src=\"https://images.code.org/41b70c9ad055b42ed9d9749be2e1fdb2-image-1473978771297.31.58.png\" + style=\"max-width: 800px\"/>\r\n\r\nFor each image you plan on using:\r\n\r\n* + Download a copy to your computer (so that you can upload it to your website + in the next step)\r\n* Write down all information you can find about the author, + such as\r\n\t* Name, or screenname\r\n * URL of website (not URL of the + image itself)\r\n * Title of image\r\n" + CSP Data Unit - Counting Multiple Things_markdown_instruction: "If you can + count one thing you can count multiple things\r\n\r\nFind out how many people + like something other than dogs and cats\r\n\r\nCount dogs\r\nCount cats\r\nCount + total\r\nDo the math\r\n\r\nblank/ blank total\r\n\r\nCan also use this to + find percents from this\r\n\r\nx% are dog lovers" + CSP Data Unit -Counting Records - Easy Way_markdown_instruction: "ReadRecords + with specific criteria \r\nfind the length of an array\r\n" + CSP Data Unit -Counting Records - Hard Way_markdown_instruction: "\r\n1. ReadRecords + for all records\r\n2. Way to loop through and count" + CSP U4 - CreateRecord with JSON_markdown_instruction: "Good news! we can also + store objects in the easy way!\r\nStarting code is some kind of pre-composed + object. And call to createRecord that shows using the javascript object as + the the thing being stored.\r\nTest.\r\nInvestigate.\r\nAdd a field to the + object and run again, see what’s there." + CSP U4 - Export Table_markdown_instruction: "# You can export the table too!\r\n\r\nMake + a table and then export it to share it with a friend!" + CSP U4 - First Create Record Experience_markdown_instruction: "So how can we + use this? We can use it to compose a bunch of things we want to store at + once. In Data we call this a “record”. Let’s look at how we create records….new + level:\r\n\r\nJust drag out createRecord and play with it (non-project level) + — not triggered by a button. \r\n\r\nCreateRecord should populate with a default + JSON object (which you can set in level builder when defining params for the + blocks in the palette.) Have it be the string version of of JSON object.\r\nJust + Hit run several times.\r\nView Data.\r\nInvestigate problems.\r\n\r\n\r\n" + CSP U4 - Import Table_markdown_instruction: "You can create a new table by + importing a CSV file. CSV stands for comma separated values and is a standard + way to move data between different applications. CSV files usually have multiple + columns with the first row containing the label for each column. AppLab will + use this first row to create the column names in the table. \r\n\r\nIn AppLab + you can create a new table in an app by clicking the “View Data” button(a + new browser tab opens) and type in a new, descriptive table name (the table + name does not have to match the app name, and an app can have more than one + table), then click the “Add” button next to the table name(another new browser + tab opens). Click the “Import” button, then the “Choose File” button and select + the RottenTomatoes2015.csv file (see below). Finally click the “Overwrite + & Import” button. Note the unique “Id” field created for each record." + CSP U4 - JSON Object Intro - Bad Way_markdown_instruction: "# We've Seen Objects + Before\r\n\r\nWe're going to see how we can use objects to organize data + in our own apps, but this actually isn't the first time we've used objects + in our programs. **The object that we've used most frequently is the event + parameter of our event handlers**. This single object contains many pieces + of information about the event which can be accessed to determine how to respond + to the event. For example `event.key` contains the key that was pressed for + key events, and `event.offsetX` and `event.offsetY` contain the location of + the mouse for mouse events.\r\n\r\nBefore we move on to creating objects of + our own, let's take another look at this event parameter (or as we'll call + it now event object) and recall how they were used.\r\n\r\n# Do This\r\n\r\n**Starter + code** is provided which creates event handlers for both a \"click\" and \"keydown\" + event and displays the contents of the event object they create.\r\n\r\n* + **Run the program** and trigger both a keyboard event and a mouse event.\r\n* + **Examine the objects displayed in the Debug Console** to recall the different + pieces of information they contain.\r\n* **Reflect: ** Why wouldn't we want + this information stored in many variables? Why wouldn't we want this information + stored in an array?" + CSP U4 - JSON Object Intro - Good Way_markdown_instruction: "# Creating Your + Own Objects\r\n\r\n**Objects are unordered collections of name value pairs**. + Like an array they can hold many pieces of information, but where arrays use + a numeric index to reference specific pieces of information, objects use a + descriptive name. We lose the \"ordered\" nature of our data, but we gain + the ability to describe the purpose of each piece of data within a collection.\r\n\r\nConsider + the event objects you just looked at. An array can just as easily store all + the information they contain, but it would be difficult to determine what + any of the values represent.\r\n\r\n**The syntax for creating objects of your + own is shown below**\r\n\r\n* Curly braces are placed around the contents + of an object `{}`\r\n* Names are separated from values with a colon `:`\r\n* + Name value pairs are separated by commas `,`\r\n* Names must be strings. If + they are not they will be coerced to strings, possibly creating unpredictable + behavior.\r\n* **Example:** `var user = {\"userName\":\"Ada\", \"password\":\"csIsAwesome\", + \"yearBorn\":1815};`\r\n\r\n# Do This\r\n\r\n**Starter code** is provided + which creates an empty object and displays its value.\r\n\r\n* Modify the + code **using the syntax above** to create an object of your own. Your object + should contain **at least 5 pieces of information including both strings and + numbers**.\r\n* **Run the program** and confirm all values in your object + appear as you expected." + CSP U4 - Objects - createObject_markdown_instruction: "# Creating Your Own + Objects\r\n\r\n**Objects are unordered collections of name value pairs**. + Like an array they can hold many pieces of information, but where arrays use + a numeric index to reference specific pieces of information, objects use a + descriptive name. We lose the \"ordered\" nature of our data, but we gain + the ability to describe the purpose of each piece of data within a collection.\r\n\r\nConsider + the event objects you just looked at. An array can just as easily store all + the information they contain, but it would be difficult to determine what + any of the values represent.\r\n\r\n**The syntax for creating objects of your + own is shown below**\r\n\r\n* Curly braces are placed around the contents + of an object `{}`\r\n* Names are separated from values with a colon `:`\r\n* + Name value pairs are separated by commas `,`\r\n* Names must be strings. If + they are not they will be coerced to strings, possibly creating unpredictable + behavior.\r\n* **Example:** `var user = {\"userName\":\"Ada\", \"password\":\"csIsAwesome\", + \"yearBorn\":1815};`\r\n\r\n# Do This\r\n\r\n**Starter code** is provided + which creates an empty object and displays its value.\r\n\r\n* Modify the + code **using the syntax above** to create an object of your own. Your object + should contain **at least 5 pieces of information including both strings and + numbers**.\r\n* **Run the program** and confirm all values in your object + appear as you expected." + CSPPD PD goals_markdown_instruction: "***Now that you've learned more about + the CSP Professional Development, let's consider your goals***\n\n<br>\n__What + are your personal goals for your CSP PD experience (what do you hope to accomplish, + how do you hope to grow)?__ *NOTE: These goals might change over time, and + we'll revisit your responses as we go through the course so we can check + in on how we're progressing towards those goals.*\n" + CSPPD course goals_markdown_instruction: "***Now that you've learned more + about the CSP curriculum, let's consider your goals***\n<br>\n<br>\n\n__What + are your goals for your CSP class?__ *These goals will change over time, and + we'll revisit this your response as we go through the course so we can check + in on how we're progressing towards those goals.*\n\n*NOTE: remember you + can change the size of the text box by clicking and dragging the bottom-right + corner of the box.*\n" + CSPPD impact in program_markdown_instruction: "\n#### What connections do you + think might exist between the ideas covered in the videos you just watched + and the units of CSP that you learned about earlier?\n" + CSPPD materials question1_markdown_instruction: "We just talked about the types + of materials available through the Code.org CSP curriculum, including teacher + lesson plans, widgets, widget tutorial videos, concept videos, teaching tips + videos, and student-facing activities. Which of these materials are you most + excited to have access to? Which are you most uncertain about? " + CSPPD program overlap_markdown_instruction: "#### Now that you've read more + about the CSP program, what relationship do you see between the curriculum + and Professional Development? What aspects of the two pieces of the program + seem most important or interesting to you?\n" + CSPPD strategies_markdown_instruction: "\nThis space is your __digital journal + for documenting strategies__ you've picked up during Professional Development + and while teaching the course. We'll revisit this often during PD, and you + should refer back to it while planning lessons to remind yourself of strategies + you want to try in class. \n\n\n" + CSPPD2 PT activity_markdown_instruction: "# Practice PT > Encoding a Complex + Thing\r\n<img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/FBlNhEkvsTFskXJ/Screen%20Shot%202015-07-18%20at%205.46.24%20PM.png\" + class=\"level-image\">\r\n\r\n## Doing the Project\r\nTo wrap up our work + in this unit, we're going to spend an hour doing the practice performance + task. After you've read the lesson, spend some time looking over the student-facing + worksheet and think about what you would like to encode. This is really open + ended, and there's no 'right' thing to choose, but to get the juices going, + here are a few example topics: \r\n\r\n- A piece of music (the notes that + are played, the instruments that play them, etc)\r\n- A food (the smells, + tastes, appearance, etc) \r\n- A place (the sounds, the smells, what natural + things are in the space, what man-made things are in the space, etc)\r\n\r\n> + Once you've selected your topic, start working through your protocol for + encoding the \"complex thing.\" Use the <a href =\"https://docs.google.com/document/d/1IPDnC6tKN7yRzog9t7weKISnjXvykTQe3QEpu43uM7c/edit\" + target =\"_blank\">student activity guide</a> and the <a href=\"https://docs.google.com/document/d/1rkVbwb8nJBlnF9t3hkyIyckM6gJGEjcUwyQiyV-Jlu4/edit\" + target =\"_blank\">lesson plan</a> to work through this.\r\n\r\n**See how + far you can get through the activity in one hour, but please do limit yourself + to 60 minutes.** Don't worry about getting through the entire thing in that + time, but be ready to share your thoughts about the process along with whatever + you come up with! \r\n\r\nUse the text box below to record your protocol. + You'll have space on the next page to share your final product. " + CSPPD2 share protocol_markdown_instruction: "# Chunk 3: Encoding and Sending + Text > Creating a Text Message Protocol\r\n\r\n<img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/FCmh8I2x5GTQ3tu/Screen%20Shot%202015-07-18%20at%2012.53.45%20PM.png\" + class=\"level-image\">\r\n\r\n## Creating a Text Message Protocol\r\n\r\nOn + the right you'll find the student-facing worksheet from lesson 10, which + builds on students' prior work with protocols and has them develop a text + messaging protocol that can handle the letters a-z as well as common punctuation. + \r\n\r\n>Read over the [lesson plan](https://docs.google.com/document/d/1lAHRLpxu05-gSbNF6LX8vUIoDMHEonrmL3bk-Sh1viA/edit) + and **work through developing a protocol yourself.** Use the text box below + to record your protocol.\r\n\r\n*Having trouble viewing the activity? [Click + here](https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/jogZFA5WQK3rYne/text%20protocol.pdf) + to open it directly.* \r\n\r\n" + CSPPD3-u2 pick a challenge_markdown_instruction: "# Challenge Overview > What's + your Challenge?\r\n\r\nNow that you've selected a lesson, head to the forum + and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### + <a href=\"http://forum.code.org/t/unit-2-online-pd-challenge-selection/2222\" + target=_blank>Forums <i class=\"fa fa-external-link-square\" /></a>\r\n\r\nEnter + the lesson you selected for your challenge below:" + CSPPD3-u2 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a dirct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + CSPPD3-u3 pick a challenge_markdown_instruction: "# Challenge Overview > What's + your Challenge? \r\n\r\n## Enter the lesson you selected for your challenge + in the text box below.\r\n\r\n- 2 - 5: Turtle Drawing\r\n- 6 - 7: Functions + and Simple Loops\r\n- 14-15: Variables \r\n- 16: Strings\r\n- 18: Programming + Flow and Conditionals\r\n\r\nNow that you've selected a lesson, head to the + forum and **share which lesson you plan to complete** for your challenge. + \r\n\r\n#### <a href=\"http://forum.code.org/t/unit-3-challenge-selection/2470\" + target=_blank>Forums <i class=\"fa fa-external-link-square\" /></a>" + CSPPD3-u3 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + CSPPD3-u4 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + CSPPD3-u5 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + CSPU5 Add Screens to Chaser Game_markdown_instruction: "# Improved Chaser Game\r\n\r\nNow + lets improve the \"Chaser Game\". This is where you get to use your creativity. + Make it look nice!\r\n\r\nIn addition you will notice a new command in the + toolbox: `playsound`! Read the documentation about how to add sounds.\r\n\r\n**Note:** + Your code from before has been provided for you.\r\n\r\n# Do This:\r\n\r\n* + **Create a Welcome Screen** that explains the rules of the game. Include a + \"Start Game\" button.\r\n\r\n* Update the your code so that the **image jumps + to a new location when it is clicked**. \r\n\r\n* **Play a sound** each time + the image is clicked.\r\n\r\n* **Add a Game Over Screen** with a lose message + and button to start over. The Start Over Button should direct back to the + Welcome Screen.\r\n\r\n* **Make the user lose**, by sending them to the Game + Over Screen, when the background is clicked.\r\n\r\n\r\n" + CSPU5 Add a 2nd Screen_markdown_instruction: "# Design Mode: Adding a Screen\r\n\r\n<img + src=\"https://images.code.org/3aab64d77293bda1759586e2cff5c6cc-image-1477366229125.png\" + style=\"width: 150px; float: right\">\r\n\r\n**Now you try it:** Add a new + screen and a button to the app we've started here.\r\n\r\n**NOTE:** We've + created one screen for you - the Hello Screen. You need to add a new screen + - the new screen should look something like the example shown to the right.\r\n\r\nHere + are the steps:\r\n\r\n* **Add a new screen**\r\n * Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 + PM.png\" style=\"width: 50px\"> from the Design Toolbox.\r\n * Or choose *New + Screen...* from the pulldown menu at the top of the app display.\r\n \r\n* + **Set the background color**\r\n * It doesn't have to be orange like the + example\r\n \r\n* **Add a Button**\r\n * A simple button is fine. You can + embelish with an icon if you want.\r\n * Optional: You can also add a text + label saying \"Goodbye!\"\r\n\r\n**Click Run...but...you won't see much**\r\n\r\n* + Because we haven't added code yet **all you'll see is the (default) Hello + screen**\r\n* You won't have any way to see the orange screen when the app + is running.\r\n\r\n**Click Finish** to move on to the next level where we'll + add code\r\n\r\n * Note: you can continue to work on your design on the next + level too\r\n\r\n" + CSPU5 Add full screen image to bg of chaser game_markdown_instruction: "# Add + a Full Screen Image to act as Background to Game\r\n\r\n<img src=\"https://images.code.org/9898664ee57768dd6e332bfab804c2a6-image-1477324830263.png\" + style=\"float: right\">\r\n\r\nWe want to be able to detect when the user + *misses* clicking on the target. Since we know the screen itself registers + every click no matter what, the only way to determine that the user missed + the target is to **add an image that takes up the full screen**. \r\n\r\nIn + other words we're trying to determine which of two images was clicked - the + target, or the background - which is do-able since we know when images overlap + only one will have a click event triggered. \r\n\r\n * When the target is + clicked, it jumps to a new location\r\n * When the background image is clicked + we will (eventually) switch to a new screen.\r\n\r\n**Following the Event-Driven + Pattern...**\r\n\r\n* **Design mode: Add a new image to the game** \r\n * + and stretch it to fill the whole screen.\r\n * Change the layering order + (if necessary) so that the target image is in front of the full screen image.\r\n * + (See example at right which shows an image that is stretched to the full size + of the screen sitting behind the target image).\r\n\r\n* **Add an onEvent + handler** for the full screen image with a simple console.log message\r\n * + **TIP**: this is basically done for you if you add onEvent from Design Mode\r\n\r\n* + **Run. Test. Debug.**\r\n \r\nMake sure that with each click one of two things + is happening.\r\n * When the target is clicked, it jumps to a new location + (and optionally print a message to the console).\r\n * When the background + image is clicked it should display a message to the console.\r\n * (See example + console output at right)." + CSPU5 Add game over screen_markdown_instruction: "# Add a \"game over\" screen + and finalize the game\r\n\r\n* **Add a new Screen** with a \"game over\" message + and **add a button** to start over. \r\n\r\n* **Add an event handler** for + the \"Start Over\" Button to send the user back to the Welcome Screen.\r\n\r\n* + **Add `setScreen` to the event handling function for the background image**\r\n + * When the background image is clicked, the user should be sent to the \"game + over\" screen you just created.\r\n\r\n<img src=\"https://images.code.org/bb3c0973ee0d83d3540f5ffed797e442-image-1477405500619.gif\" + style=\"float: right; width: 150px\">\r\n\r\n# Run. Test. Debug.\r\n\r\nYou + should now have a 3-screen app with:\r\n\r\n* A welcome screen\r\n* A game + play screen\r\n* A \"game over\" screen\r\n\r\n**Avoid dead-ends** -- the + user should be able to get between all the screens appropriately, and play + the game.\r\n\r\nIf it's not working:\r\n\r\n* Retrace your steps\r\n* See + if you can figure out where things are going wrong\r\n* Add extra `console.log` + statements. \r\n* Ask a friend to help you out.\r\n\r\n**Stick with it until + you get it!**\r\n\r\n" + CSPU5 Add onEvent from Design Mode_markdown_instruction: "# Add onEvent from + Design Mode!\r\n<img src=\"https://images.code.org/9ff41c3ea30ece355e91eaca5cdc1e36-image-1444417748945.gif\" style=\"width: + 250px; float: right\">\r\n\r\nDesign Mode has a shortcut for you to add `onEvent` + to your code for specific UI Element. It's quite handy.\r\n\r\n**You try + it:** Add an event handler to a button from Design Mode\r\n\r\n**Design Mode**\r\n * + A Red button has already been added to the app.\r\n * In Design Mode click + on the button to select it\r\n * Click the **EVENTS tab** and then click + the link that says **Insert and Show Code**\r\n * You may change the ID if + you like\r\n\r\nThis will insert an `onEvent` block with the ID and \"click\" + filled in already.\r\n\r\nIt also inserts a line of code with a command we + haven't seen yet: `console.log`.\r\n\r\n**Run. Test. Debug**\r\n* Run the + program and click on the button to see what happens\r\n * **Hint:** look + at the **Debug Console** area below the coding workspace.\r\n* If nothing + happens, retrace your steps and try again.\r\n\r\nOnce you see a message displayed + in the Debug Console click finish to move on." + CSPU5 Add welcome screen to chaser game_markdown_instruction: "# Add A Welcome + Screen\r\n\r\n<div style=\"float: right; width: 150px\">\r\n\r\n\r\n<img src=\"https://images.code.org/558ae19d0fb8af8c6ec573e5d7ac4e29-image-1477369385328.png\" + style=\"float: right; width: 150px\"><br>\r\n<em>This is an example showing + the elements of a welcome screen. Yours <strong> should not </strong> look + exactly like this. Yours should be appropriate for your game.</em>\r\n\r\n</div>\r\n\r\nLet's + improve your \"Chaser Game\" by **adding a welcome screen that shows when + the app starts up, and that with a button to start.**\r\n\r\n* NOTE: we've + imported the chaser game that you made in the last lesson. That's the starting + point for this. You can continue with this lesson if you don't have it. + But you'll need to make a screen for game play along the way.\r\n\r\nFollowing + the Event Driven Programming pattern:\r\n\r\n1. **Design Mode** \r\n * Add + a New Screen to the App\r\n * Make this new screen the **default screen**\r\n * + Add a new Button to the screen that says \"Start\"\r\n * Add text welcoming + the user to the game.\r\n * Give the button and the screen meaningful IDs\r\n\r\n2. + **Add an onEvent Handler for the Button**\r\n * Insert a new onEvent block + (easy way from Design Mode) for the \"start\" button\r\n\r\n3. **Add code + to the event handling function**\r\n * When the \"start\" button is clicked + it should `setScreen` to the screen that plays the game.\r\n \r\n4. **Run. + Test. Debug.**\r\n\r\n Make sure that:\r\n \r\n * When app starts up, your + new welcome screen shows first\r\n * When you click the \"start\" button it + takes you to the game play screen\r\n * Note: right now there's no way to + get back to the welcome screen - it's okay, we'll add that later.\r\n\r\n" + CSPU5 Adding Screens Template_markdown_instruction: "# Second Screen\r\n\r\nUp + until now our apps have only been able to have one view. With Design Mode + we can now make multiple screens and switch between them!\r\n\r\n**Goal:** + Make a 2 screen app with a black screen and a white screen. \r\n\r\n<img src=\"https://images.code.org/e35a6f494cf6f0c57c66a1aef651cdb0-image-1444353622241.gif\" + style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\n\r\nSwitch to Design + Mode and **add a second screen**. There are two ways to add a second screen: + \r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 + PM.png\" style=\"width: 50px\"> from the Design Toolbox. Check out the screen + dropdown menu at the top right of the app window. You should now have two + screens! <img src=\"https://images.code.org/b48d978335701888b744702f25f11b28-image-1444353746012.17.07 + PM.png\" style=\"width: 75px\"> \r\n* From the screen dropdown menu at the + top right of the app window click *New Screen*. \r\n\r\nMake screen1 white + and screen2 black. **Set the background color for a screen in the Properties + tab**. Make sure to rename the screens with appropriate IDs." + CSPU5 Debugging Overlapping Objects and Screen Events_markdown_instruction: "# + Use console.log to Test Overlapping Objects and the Screen\r\n\r\nThere are + two goals here:\r\n\r\n1. Practice inserting your own console.log statements.\r\n2. + Investigate how the screen captures events (it's different).\r\n\r\n## Do + This:\r\n<img src=\"https://images.code.org/4100fcc7062f97ce8440003b3a17cd25-image-1477363054051.png\" + style=\"float: right\">\r\n\r\n* **Add `console.log` statements to each of + the 3 event handlers** we started you out with.\r\n * Make the text that gets + printed *be descriptive* so that you know exactly what is happening when.\r\n\r\n* + **Run** the program and try clicking where the diagram (at right) shows.\r\n * + Click on each button\r\n * Click where the buttons overlap\r\n * Click on + the screen (i.e. the background)\r\n\r\n**Investigate until you can answer + these questions:**\r\n1. When you click on a location where two objects are + overlapping, which event(s) fire(s)?\r\n2. When you click on an non-overlapping + part of some object what gets triggered?\r\n3. When does a \"click\" on the + \"screen\" get triggered?\r\n\r\n\r\n<details><summary>Answers: [click here]</summary>\r\n<br><br>\r\n1. + When you click on a location where two objects are overlapping, which event(s) + fire(s)?\r\n<br>\r\n<li><em> The event-handler for object that is on top gets + triggered. The object that is underneath is essentially blocked from being + clicked in the overlapping portion</em></li>\r\n<br><br>\r\n2. When you click + on an non-overlapping part of some object what gets triggered?\r\n<li><em>The + event-handler for the object gets triggered as you might expect</em></li>\r\n<br><br>\r\n3. + When does a \"click\" on the \"screen\" get triggered?\r\n<li><em>Always. + Events that occur on the screen cannot be blocked by other objects. If you + set up an event listener for the screen it will capture EVERY event of that + type, no matter what other UI elements are on the screen. This behavior of + the screen is done on purpose and is useful for certain kinds of things.</em></li>\r\n\r\n\r\n</details>\r\n\r\n" + CSPU5 First Time Console.log_markdown_instruction: "# Exploring console.log\r\n\r\n<img + src=\"https://images.code.org/cdc253db1b9a3685eaf5ea4b6bc30766-image-1444337429645.png\" + style=\"width: 250px; float: right; border: solid 1px black; margin-right: + 10px\">\r\n\r\nIn the last level, we saw a new command: `console.log`. You + should have noticed that it prints out text in the Debug Console below the + code workspace.\r\n\r\nThe Debug Console area is an important tool for programmers. You've + seen it display error messages, but you can also have your program display + messages there. \r\n\r\nYou can find `console.log` in the **Variables** code + toolbox, and it is the command you use to send messages to the console -- + it's just about the simplest thing you can do to make your code generate + output.\r\n\r\n**You try it:** Add a console.log statement to say your name\r\n\r\n* + Drag out a `console.log` statement into the workspace and add it below the + 2 statements there.\r\n\r\n* Following the lead of the first two lines - update + the code so that it says your name.\r\n\r\n* The output should look something + like this: \r\n\r\n![](https://images.code.org/64c82c1bf7ecb859d84192e5bffb3488-image-1477338603375.png)" + CSPU5 Layering and Deleting in Design Mode_markdown_instruction: "# Design + Mode: Layering and Deleting\r\n<img src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" + style=\"width: 150px; float: right\">User interface elements can overlap one + another, so you'll want the ability to change the order or **depth** at which + each one is shown. \r\n\r\n**You Try it:** Use the **depth** and **delete** + tools to **create the \"After\" image** (shown below).\r\n\r\n* **Scroll to + the bottom of the Properties tab** you'll find buttons which allow you to + easily **change the depth** of an element.\r\n* **Change the depth** of elements + by using the double or single arrows.\r\n * Click the double arrow to send + all the way to front or back.\r\n * Click the single arrow to move up or down + one layer.\r\n \r\n* **Delete an Element** by selecting it (clicking on it) + in the design view and then clicking the **Red Delete button** in the properties + tab.\r\n\r\n\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th style=\"text-align:center\">Before</th>\r\n <th + style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td align=center><img + src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" + style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img + src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" + style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" + CSPU5 Project - Multi Screen App_markdown_instruction: "# Multi Screen App\r\nYou + will be creating your own multi-screen app to practice designing user interfaces + and writing event-driven programs. \r\n\r\n**Look at the Project Guide and + Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* + Your app will have at least **4 screens**.\r\n* Your app should include **text, + images, buttons, and sound**.\r\n* There should be **no “getting stuck” on + any screen.** It should always be possible to navigate from a screen in your + app to some other screen. \r\n* Your program code should follow **good style**.\r\n* + Your user interface should be **intuitive to use**." + CSPU5 Use Console.log to update IDs_markdown_instruction: "# Updating IDs and + Debugging with Console Log\r\n\r\nIn the last level you tested out the new + command: `console.log`. In this level we have a couple buttons with event + handlers and `console.log` statements, but they are switched around!\r\n\r\nWe + should have given the buttons better ID names so we could tell the difference + based on the ID. **Can you update the ID names and `console.log` messages + to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** + of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to + Code Mode and notice that the **ID pulldowns have been updated to include + the new IDs**. (You still need to select the correct ID from the pulldown + menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" + CSPU5 Use setScreen for first time_markdown_instruction: "# Adding Code: Switching + Screens with *setScreen*\r\n\r\n<img src=\"https://images.code.org/9232bd923268d36158d63829145c9879-image-1477367827365.gif\" + style=\"float: right; width: 150px\">\r\n\r\n**You Try it:** Add event handlers + to the buttons that use `setScreen` to switch to the other screen. \r\n\r\nThe + result should be two-screen app which can switch back and forth between the + \"hello\" and \"go back\" screens. See example at right.\r\n\r\n* **Add an + onEvent handler** for the smiley face image/button to respond to a \"click\"\r\n + * Do it the easy way by inserting from design mode, or just drag an `onEvent` + block into the code workspace.\r\n\r\n* **Add `setScreen` into the event handling + function**\r\n * Make it switch to the other screen when the smiley face is + clicked.\r\n\r\n**Run. Test. Debug**\r\n\r\n* Test to see if the clicking + the smiley face switches screens\r\n* If it doesn't work, retrace your steps + and try again.\r\n\r\nIf it works, then **repeat these steps for the \"go + back\" button.**\r\n\r\n* The result should look something like the example + on the right. \r\n" + CSPU5 console.log debug when mouse events happen_markdown_instruction: "# Which + comes first?\r\n\r\nAnother useful thing to do with `console.log` statements + is to use them to figure out the order in which events are triggered. In the + code below one button has 3 different event listeners, that will respond to + the events: `\"mousedown\"`, `\"mouseup\"`, and `\"click\"`\r\n\r\nThe question + is, if you click the button:\r\n\r\n* Will all 3 of these events trigger? + \r\n* Will any of them trigger? Which one(s)?\r\n* What order will these + events be triggered in?\r\n\r\n**You try it**:\r\n1. Study the code and **make + Prediction**\r\n2. **Run** the program\r\n3. **Were you right?** What's unexpected?\r\n4. + **Keep testing** until you see what's happening.\r\n\r\n" + CSPU5 console.log in event v. global_markdown_instruction: "# Predict what + will happen\r\n\r\nWe've added some `console.log` statements *both* in event + handlers as well as just out in the open, between event handler definitions. + \r\n\r\n* **Study the code first**\r\n * We've added some white space between + lines to make it more readable.\r\n\r\n* **Predict:** What do you think will + happen when you click Run? What will display? Will it:\r\n * Print all 5 + messages?\r\n * Print only a few? Which ones?\r\n * Halt with an error message?\r\n + \r\n* *After* you've made some kind of prediction, **hit Run**.\r\n * If + the program runs, then try to use it - click on the buttons and such.\r\n\r\n* + Were you right? Anything unexpected?\r\n * Reset and Run the program again + a few times until you understand what's happening.\r\n \r\n<details><summary>What's + happening? [click to expand]</summary>\r\n<li> As soon as you hit Run messages + \"1\", \"3\" and \"5\" will display immediately. Those statements are out + in the \"open\" rather than part of an event handling function - the computer + can run them right away.</li>\r\n<li>Messages \"1\", \"3\" and \"5\" will + only print once each time you run the program not matter what else you do</li>\r\n<li>Messages + \"2\" and \"4\" will be displayed when the the buttons are clicked.</li>\r\n<li>In + case you're wondering: <strong>This is bad code</strong>. It's hard to + read because of where the statements fall. Typically if some code needs to + run when the program starts up, you'd group it all together at the top of + the program. Scattering it about in and between event handlers and other + functions is a recipe for a lot of buggy code that will be hard for you to + work out.</li></details>" + CSPU5_AddImageToChaserGame_markdown_instruction: "# Now you do it: Add an image\r\n\r\n[lice + cap]\r\n\r\n* add an image from icon, or from something you upload.\r\n\r\n* + We'll make the image respond to events on the next level\r\n\r\n* Click continue\r\n\r\n" + CSPU5_AddImage_andMakeChaserGame_markdown_instruction: "# Now you do it: Add + an image\r\n\r\n[lice cap]\r\n\r\n* add an image from icon, or from something + you upload.\r\n\r\n* We'll make the image respond to events on the next level\r\n\r\n* + Click continue\r\n\r\n" + CSPU5_AddLabelToChaserGame_markdown_instruction: "# Design Mode: Add a label\r\n\r\n<img + src=\"https://images.code.org/092af4a9c90ad36fa44c636f1227e4d9-image-1476893390336.gif\" + style=\"float: right\">\r\n\r\nWell, now we have the beginnings of a little + game! Time to go back to design mode to start embelishing our program.\r\n\r\n**You + try it:** - Add a text label that says \"Try to Catch the Button!\"\r\n\r\n\r\n\r\n* + Switch back to design mode\r\n* Drag a label on the screen <img src=\"https://images.code.org/c74c0e7fed308af92740d31cbd1098a9-image-1476892918698.png\">\r\n* + Set the text to be something like \"Try to Catch the Button!\"\r\n* Set any + other properties or styles of the text label that you want.\r\n\r\n\r\n" + CSPU5_Debugging predict unexpected behavior - two onEvents to one ID_markdown_instruction: "# + Debugging Unexpected Behavior\r\n\r\n## Predict - Observe - Reflect\r\n\r\nTo + understand a new piece of code good programmers often try to **first make + a prediction about what will happen before running the program**. \r\n\r\nBy + forcing yourself to make a prediction (it doesn't matter if you're right + or not) you are immediately alerted to any **unusual or unexpected behavior** + and you can ask yourself, *\"Huh? why did it do that? Was that supposed to + happen?\"* It might not be an error, but you gain invaluable insight and + actually **learn faster**.\r\n\r\n**Predict:** For the code that is here, + what will happen when the \"Click Me\" button is clicked? \r\n\r\n * **Study + the code** - This program has **two event handlers** listening for events + on the same button?\r\n * **Force yourself to make a prediction!** - \"I don't + know\" is not a prediction!. \r\n\r\nHere are some options to think about:\r\n\r\n* + There will be an error in the console immediately after hitting run\r\n* There + will be an error in the console but not until you hit the button\r\n* Program + does nothing\r\n* turtle only moves forward\r\n* turtle only turns left\r\n* + turtle move forward *then* turn left \r\n* turtle turn left *then* move forward?\r\n* + something else? \r\n\r\n**Observe:** Once you've made a prediction, close + these instructions and **run the program** to observe what happens.\r\n\r\n**Reflect:** + Was your prediction correct? If not what about your mental model might need + to change? Talk about it with a classmate and experiment with the code to + make sure you understand what is happening." + CSPU5_FinalizeChaserGame_markdown_instruction: "# Add an Image and Make a Chaser + Game!\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" + style=\"float: right\">\r\n\r\n**Now You Try it** - add an image to your app + and modify the code so that the image jumps around the screen rather than + the button. Your little game should have:\r\n\r\n* **Text** on the top of + the screen with a title or instructions for what to do.\r\n* **An image** + that \"runs away\" (moves randomly) based on some mouse event.\r\n\r\n**Tips:**\r\n + * **Hint** - the easy way to do this is to simply change the IDs in `onEvent` + and `setPosition` to respond to the image instead of the button.\r\n * Remove + the button from the app after the image is working. We don't need it anymore.\r\n + * Change the label text so that the instructions make sense for your game.\r\n + * The game is even more fun if you use the `mouseover` event instead of `click`\r\n\r\n**Optional + Extensions**:\r\n * Make the background interesting\r\n * Add another image + that runs away.\r\n * See what happens with the commands `hideElement` and + `showElement`\r\n * Have two UI elements where interacting with one controls + or does something to the other.\r\n\r\n**Finalize your \"Chaser Game\"** and + click Finish.\r\n\r\n" + CSPU5_Project - Multi Screen App_markdown_instruction: "# Multi Screen App\r\nYou + will be creating your own multi-screen app to practice designing user interfaces + and writing event-driven programs. \r\n\r\n**Look at the Project Guide and + Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* + Your app will have at least **4 screens**.\r\n* Your app should include **text, + images, buttons, and sound**.\r\n* There should be **no “getting stuck” on + any screen.** It should always be possible to navigate from a screen in your + app to some other screen. \r\n* Your program code should follow **good style**.\r\n* + Your user interface should be **intuitive to use**." + CSPU5_U3 - Arrays - Demo App_markdown_instruction: "# My Favorite Things\r\n\r\nCheck + out this simple app for creating a collection of your favorite things. **We're + going to be working towards building this app** over the next several exercises. + As you might expect, this application **uses an array** to store and organize + information.\r\n\r\n# Do This:\r\n\r\n* Use the \"My Favorite Things\" app + and try to **predict how arrays are used to create the functionality you observe.** + \r\n* Some features to notice:\r\n\t* The app keeps track of a **list of your + favorite things**.\r\n * You may use buttons to **move forward and backward + through your list**.\r\n * The **current entry and total number of entries** + are indicated at the top.\r\n * You may **add a new entry** at the current + location in your list." + CSPU5_U3 - Arrays - Wrap Up 1_markdown_instruction: "## Choose: Array or Variable?\n\nYour + app needs to store the following information. For each type of information, + decide whether you would use an array or a variable to store it:\n \n* All + the messages a user has sent\n* The highest score a user has ever reached + on the app\n* A username and password to unlock the app\n\n" + CSPU5_U3 - Arrays - Wrap Up 2_markdown_instruction: "## Free Response: Choosing + Array or Variable\n\nIn general, when do you think you should store information + in an array, and when should you use a variable?\n" + CSPU5_U3 - Arrays - appendItem_markdown_instruction: "# Adding Items to an + Array\r\n\r\n<img src=\"https://images.code.org/c9244eb598416b5a3d9baac088bbaca8-image-1447267168567.39.06 + PM.png\" style=\"width: 250px; float: right\">\r\n\r\nIn our last exercise + we created our array and initialized it with some values. Another way to do + this is to **add items to your array on separate lines**. The simplest way + to do this is to add a new item to the end of your array using the `appendItem` + command.\r\n\r\n<img src=\"https://images.code.org/74a2f2660d5aea8dec7dc4933f2c68d3-image-1447185901732.04.50 + PM.png\" style=\"width: 250px; float:right; border: solid 1px black\">\r\n\r\nTo + append means to add or to join. When you append an item to an array you actually + add a new location to the end of the array that contains the new value, so + that the total size of the array grows by one. Since you can always add items + to an array after creating it, it is very common to **create an empty array + and then add values in subsequent portions of your program**.\r\n\r\n# Do + This:\r\n\r\n* **Read the documentation** for `appendItem`.\r\n* Create an + **empty array** called `oddNumbers`.\r\n* Use `appendItem` to add the odd + numbers 1-11 to your array.\r\n\r\n![](https://images.code.org/41883beff3cb9810fed37ae684dc1fe8-image-1448312407634.gif)\r\n\r\n* + **Use `console.log`** to confirm your array is holding the correct values. + The output should look like the example below.\r\n\r\n![](https://images.code.org/4daf7aff37f4796185fc608f20856a12-image-1489697355089.png)" + CSPU5_U3 - Arrays - assignment_markdown_instruction: "# Setting Values by Index\r\n\r\nEach + location in an array can be treated like its own variable. We've already + seen how we can use bracket notation to reference values stored at specific + locations in an array. Just like with variables, **we can assign the value + of a specific location in an array using `=`** (the assignment operator).\r\n\r\n**Example:** + The value at index 0 of this array is set to 10.\r\n\r\n![](https://images.code.org/d0bf9901deeffb1cd6553c27c38046a4-image-1447172887059.27.25 + AM.png)\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/cfa8d82d89e5227f22e3afe5f9c49698-image-1447366432447.13.11 + PM.png\" style=\"width: 200px; float: right\">\r\n\r\nStarter code is provided + that creates an array of 0's and 1's. **Set all the values in this array + to be 0**. \r\n\r\n* Use **indexes** and the **assignment operator** `=` to + **set all the 1's to be 0**.\r\n* Check the output of the `console.log` to + confirm **the array only contains 0's**. Example shown on the right.\r\n\r\n" + CSPU5_U3 - Arrays - assignment2_markdown_instruction: "# Array Values: Arithmetic\r\n\r\nYou + can reference locations in arrays in arithmetic expressions, just like you + might a variable.\r\n\r\n![](https://images.code.org/a7d11342d8c72b34f2268e4104e43fbd-image-1447189790574.09.32 + PM.png)\r\n\r\nThe starter code **creates an empty array and adds three random + values to it**. \r\n\r\n![](https://images.code.org/51b7c713ae398299a85ee8c0b9ee04f3-image-1447190702799.23.46 + PM.png)\r\n\r\nYou will be adding code to your program that calculates the + sum of the values in the array.\r\n\r\n**Notice** the difference between displaying + an array as part of a string or by itself. Example:\r\n\r\n* code: `console.log(myNumbers)` + displays *with* brackets as: `[1, 2, 3, 4]`\r\n* code: `console.log(\"my list: + \"+myNumbers)` displays *without* brackets as: `my list: 1, 2, 3, 4`\r\n\r\nSo + when it's part of a string it *does not* print the square brackets around + the ends of the list. This is a \"feature\" of the language with no great + explanation. In the first case it sees only a list and it produces a more + technical representation. In the second case the system is trying hard to + convert the list to a nice looking string.\r\n\r\n# Do This:\r\n\r\n* **Add + a variable** to your program to hold the sum of the array values.\r\n* Assign + the value of the variable to **the sum of the three array values**.\r\n* Use + `console.log` to confirm that you have correctly calculated the sum of the + values. Below is sample output from one run of the program.\r\n\r\n![](https://images.code.org/a9ca48808e8e833d92b3bcdebc7b0bd4-image-1447189975738.12.31 + PM.png)" + CSPU5_U3 - Arrays - assignment3_markdown_instruction: "# Reassigning Array + Values\r\n\r\nWe've already seen many examples of how **a location in an + array can be treated identically to a variable**. The last exercise we'll + perform to prove this point is **reassigning array values**. The syntax for + reassigning values stored in an array is identical to that used when reassigning + variables. Even the `++` notation to increase a value by one works!\r\n\r\n![](https://images.code.org/3cbd11c69e42daddce28e059388097db-image-1464228660945.png)\r\n\r\nThe + program you're about to see **creates an empty array and adds three random + values to it**. You will be adding code to the program that **increases each + value by one**.\r\n\r\n# Do This:\r\n\r\n* Add code to the program that **increases + the value stored at each location in the array by one**.\r\n* Use `console.log` + to confirm that you have correctly increased the values. Below is sample output + from one run of the program.\r\n\r\n![](https://images.code.org/42ca1f874a8a7b71e29b2ffd80ec31c3-image-1447191826756.43.37 + PM.png)\r\n\r\n" + CSPU5_U3 - Arrays - createFirstArray_markdown_instruction: "# Creating an Array\r\n\r\nArrays + have many features which make them different from variables, but **most of + what you've learned about variables also applies to arrays**. For example, + just like a variable:\r\n\r\n* Arrays should be given a **descriptive and + meaningful** name.\r\n* Arrays are created using `var`.\r\n* Arrays can be + initialized/set using `=`.\r\n\r\n**Example: Creating an Array**\r\n\r\n![](https://images.code.org/0b7d201db2990f0189963bb6a565a057-image-1447097600773.33.08 + PM.png)\r\n\r\nThis array contains 3 values: 100, 250, 500. Notice that the + values are separated with commas `,` and that the entire array is enclosed + in brackets `[ ]` . We can use `console.log` to display the contents of an + array just like we would a variable.\r\n\r\n![](https://images.code.org/7d4be70330108e3e5d6325fa4e721ef4-image-1447097904253.38.18 + PM.png)\r\n\r\n# Do This:\r\n\r\n* Following the format described above **create + an array** which contains **the even numbers from 0 to 10**.\r\n\r\n<img src=\"https://images.code.org/872be32ff4ba4e9c733435d524a95c9e-image-1448311800271.gif\" + width=450px>\r\n\r\n* Make sure your array has a **descriptive and meaningful + name**.\r\n* Use `console.log` to display the contents of your array. Below + is an example of the output your program should generate.\r\n\r\n![](https://images.code.org/230d988cf99556db04a8a4ad6a8d8a47-image-1447364062049.33.53 + PM.png)\r\n\r\n" + CSPU5_U3 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions + as Indexes: Using Variables\r\n\r\nWe can use **any expression that evaluates + to a number** as an index in an array. Here are some examples:\r\n\r\n![](https://images.code.org/6d4ecc9249dc9f3a845196b04d833c1a-image-1447268711944.24.53 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **Starter code** has been provided which + creates an array of colors.\r\n* **Write code** that logs **a random color + from this list** to the console by generating a value for a random index. + Try to write your program using `list.length` rather than hard-coding the + length of the list.\r\n\r\n![](https://images.code.org/d0463c0f2528e04c396f3b9cf219c3ed-image-1447370139548.gif)" + CSPU5_U3 - Arrays - favThings Counting Variable_markdown_instruction: "# Current + Index\r\n\r\nThis app also allows a user to scroll through individual items + in the array. In order to keep track of which index we are currently viewing, + our application will need **a global variable that stores the current index**. + In coming exercises we'll want our global index to change, so let's **make + sure that your code references your global index** rather than fixed values.\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 + AM.png\" style=\"width: 250px; float: right\">\r\n\r\n* Create a **global + variable** that will be used to keep track of the current index in the array. + Set this variable to 0.\r\n* Update `setText` which displays the words to + show your first favorite thing using **the global index variable** instead + of a hard-coded number. \r\n* Update `setText` which displays the current + item number to use **the global index variable** instead of a hard-coded number.\r\n\t* + **Hint:** since arrays are zero-indexed **you will have to add one to your + index** to generate the correct value to display.\r\n* **Note:** neither of + these outputs will be able to change yet. Don't worry, we'll be taking care + of that in coming exercises!" + CSPU5_U3 - Arrays - favThings Next_markdown_instruction: "# Next Button\r\n\r\nNice + work! Your application should now have some simple output displaying one of + your favorite things and indicating which item of your list you are showing. + To make things more interesting, however, **we want to be able to change which + item we display**.\r\n\r\nTo change the item displayed, the user will use + the \"Next\" and \"Last\" buttons. These should **increase or decrease the + global index by one and then you should update the information displayed on + the screen**. To start out with, however, we'll just be writing code for + our Next Button. \r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to the + \"Next\" button.\r\n* Write code in this event handler that **increments your + global index variable** and then **updates the output on the screen**.\r\n\t* + **Note:** If your code from the last exercise was written to reference this + variable then you should just be able to reuse it once you've incremented + your variable. We'll talk more about this in the next exercise.\r\n* Run + your program to **confirm that the user can move forward through the list + and that the output displayed is correct**.\r\n\t* **Note:** You may notice + that your program throws an error if the global index variable goes out of + bounds. Don't worry about this for now - we'll fix it in a later exercise." + CSPU5_U3 - Arrays - favThings Prev_markdown_instruction: "# Last Button\r\n\r\nOur + user can now move forward through our list of favorite things, and we're + about to write code that allows them to move backwards as well. If you've + written your code to reference your global index then this should only require + you to decrease its value by one and reuse code that updates the screen output. + Before we write the code for backwards let's work on cleaning up our code.\r\n\r\n**Removing + Repeated Code:** Once you add the code for moving backwards through your array, + your program will have three places where it updates the screen by setting + the text of your screen elements. Rather than repeating this code we should + **create a function** that updates the screen and then call it every time + we need to refresh those elements. This will not only make our program easier + to read and avoids the errors that can arise from redundant code, but it also + makes it easier to make changes to how our program runs, since all the code + that updates the screen is in a single place.\r\n\r\n# Do This:\r\n\r\n* **Write + a function** that contains the `setText` commands you have used to update + the screen.\r\n* **Replace** the places in your code where you used to have + these commands with **calls to your new function**.\r\n* **Add an event handler** + to the \"Last\" button that decreases the **global index variable** by one + and then updates the screen by calling your new function.\r\n* Run your program + to confirm that the user **can move forward AND backward** through the list + and that the output displayed is correct.\r\n * **Note:** You may notice + that your program throws an error if the global index variable goes out of + bounds. Don't worry about this for now - we'll fix it in a later exercise." + CSPU5_U3 - Arrays - favThings addItem_markdown_instruction: "# Adding New Items\r\n\r\nNow + we want our user to be able to add items of their own to the list. As you + might have guessed, this is as easy as inserting an item into our array at + the current index.\r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to + the \"Add\" button.\r\n* **Write code** in your event handler that:\r\n\t* + Uses `getText` to access the user's new item.\r\n * Uses`insertItem` to + add that item to your array at the current index.\r\n * Calls your update + function to update the screen (the new item should be displayed).\r\n* Run + your program to confirm that the user **can add items to the list** and that + the output displayed is correct." + CSPU5_U3 - Arrays - favThings bounds_markdown_instruction: "# *if* Statements: + Staying in Bounds\r\n\r\nCurrently the user can increase or decrease the value + in the global index **past the bounds of your array**. As a result you've + probably already seen that errors are generated.\r\n\r\nTo prevent this from + happening, we're going to **add `if` statements** to the event handlers on + the \"Next\" and \"Last\" buttons. They should check the value of the global + index variable before changing it. If the user is about to step out of the + bounds of your array they should either:\r\n\r\n* **Block:** Do not change + the index if it will result in a value that is out of bounds.\r\n* **Wrap:** + Set the index to be the other end of the array. In other words, going past + the end of the array moves the index back to 0 and going past the beginning + of the array sets the index to the last in the array (`list.length` will be + helpful here).\r\n\r\n# Do This:\r\n\r\n* **Add `if` statements** to the event + handlers on the \"Next\" and \"Last\" buttons that **prevent the global index + from going out of bounds** using one of the two strategies described above.\r\n* + Run your program to confirm that the user **cannot go out of bounds** and + that the output displayed is correct." + CSPU5_U3 - Arrays - favThings createArray_markdown_instruction: "# Create Your + Array\r\n\r\nNow that we've dealt with our design elements we'll need to + start writing the actual code of our app. This app keeps track of a list of + items, so we know that **we'll need to create an array** to store them. \r\n\r\n# + Do This:\r\n\r\n* **Create an array** that will hold your list of favorite + things.\r\n* **Add three of your own favorite things to your array.**" + CSPU5_U3 - Arrays - favThings firstOutput_markdown_instruction: "# Displaying + Information to the User\r\n\r\nBefore we make our application interactive, + we'll want to practice creating some simple user output. When the app starts + up, the first item in your list should be displayed. Let's write the code + that will display this information to the screen. \r\n\r\n# Do This:\r\n\r\n<img + src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 + AM.png\" style=\"width: 250px; float:right\">\r\n\r\n* Using `setText` set + the main text area to show your first favorite thing.\r\n* Using `setText` + and `list.length` set the text indicating what item of the list the user is + currently viewing.\r\n\t* **Hint:** since arrays are zero-indexed **you will + have to add one to your index** to generate the correct value to display.\r\n* + **Note:** neither of these outputs will be able to change yet. Don't worry, + we'll be taking care of that in coming exercises!\r\n\r\n" + CSPU5_U3 - Arrays - favThings giveIDs_markdown_instruction: "# Getting Started: + Creating IDs\r\n\r\nTo get your application off the ground we've provided + **the user interface elements that you will use in your application**. Unfortunately + they all currently have **default IDs** which don't reflect how the elements + will be used.\r\n\r\n# Do This:\r\n\r\n* **Create a descriptive and meaningful + ID** for each element in your app." + CSPU5_U3 - Arrays - favThings keepPlaying_markdown_instruction: "# Keep Going!\r\n\r\nYour + app should now be fully functional - nice job! There are of course plenty + of new pieces of functionality to add. If you have time feel free to make + any improvements you wish. Here are some ideas:\r\n\r\n* Allow the user to + **append items** rather than add them at the current location.\r\n* Give the + user the ability to **remove** the item at the current index. This can be + a little tricky if you **remove the item at the end of the list** so see if + you can account for that.\r\n* Only add words **if they are not blank**.\r\n* + **Improve the appearance** of the app." + CSPU5_U3 - Arrays - indexPractice_markdown_instruction: "# Index Practice\r\n\r\nIt + will take some practice to get comfortable using array indexes. We'll do + a couple of exercises to build your confidence.\r\n\r\n# Do This:\r\n\r\n<img + src=\"https://images.code.org/4d52429f1d6f8e7812e14d73e2a89c45-image-1447366245418.08.51 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has + been provided that creates an array called `myNumbers`.\r\n\r\n* Use `console.log` + and array indexes to write the contents of `myNumbers` to the screen in order, + as shown to the right. Your commands should be of the form `console.log(myNumbers[index])`.\r\n\r\n" + CSPU5_U3 - Arrays - insertingItems_markdown_instruction: "# Inserting Items: + Array Indexes\r\n\r\nIf you want to add elements in the middle of your array + you can use `insertItem` to specify an **index** at which an item should be + inserted.\r\n\r\n![](https://images.code.org/46815edd373b9fe51c4efcf145474ecc-image-1447252675635.37.24 + AM.png)\r\n\r\nJust like `appendItem`, `insertItem` creates a new location + in the array. However `insertItem` allows you to insert an item anywhere in + the array, not just at the end, and it shifts all elements at or after its + index one location over.\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** + for `insertItem`.\r\n* **Starter code** has been provided which appends some + strings to an array, but right now they don't form a complete sentence.\r\n* + Use `insertItem` to **individually insert strings to your array** to form + a complete sentence.\r\n* Use `console.log` to confirm you succesfully created + your sentence.\r\n\r\n![](https://images.code.org/a77efe777082d387f64c4761d890c560-image-1447254451590.06.59 + AM.png)" + CSPU5_U3 - Arrays - insertionErrors_markdown_instruction: "# Out of Bounds\r\n\r\nIn + many languages trying to access indexes of an array that don't exist will + create an error. **JavaScript allows for some strange behavior** with arrays + that it's useful to see, even though **you will likely never use this functionality**.\r\n\r\n**Warning:** + some of this code will generate errors or work in unexpected ways. Don't + spend a long time trying to understand weird results. The point to take from + this is **referencing indexes that are out of bounds will almost never do + what you intend**, and we'll be learning ways to avoid this as we move forward.\r\n\r\n# + Do This:\r\n\r\n* **Starter code** has been provided which creates an array + with three elements.\r\n* Uncomment the **first command that references indexes + that are out of bounds** and run the code.\r\n* **Examine the output** and + try to understand what is happening.\r\n* Reset and then **recomment** the + line after you've used it. \r\n* **Repeat the process for all the lines.**\r\n\r\n**Note:** + We have used a different style of comment in this program. `/* long block + comment */` is used when you want to write a multiple-line comment. " + CSPU5_U3 - Arrays - introIndex_markdown_instruction: "# Accessing Items in + an Array\r\n\r\nAn array is comprised of many locations. You can individually + set or reference the information at each location of your array just like + a variable. To tell your locations apart each has a separate number, or **index**, + that identifies it.\r\n\r\nArrays in JavaScript are **zero-indexed** which + means the first index is 0. This is similar to binary number systems which + begin counting at 0. For example an array of 10 items would have indexes 0-9. + As a result **the last index is always one less than the length of the array**.\r\n\r\n**Accessing + Array Items by Index:** If you know the index of the item you wish to access + you can reference it using square brackets `list[index]` . The example below + prints the value of the 4th element in the array. \r\n\r\n![](https://images.code.org/8b2da597fccaeeafb30b04991074cd8b-image-1447365422277.56.45 + PM.png)\r\n\r\n# Do This:\r\n\r\n**Starter code** has been provided which + creates an array of the numbers 1 through 10\r\n\r\n* Use `console.log` to + display the first item in your array.\r\n* Use `console.log` to display the + last item in your array.\r\n* Use `console.log` to display the number 5 from + the array." + CSPU5_U3 - Arrays - length_markdown_instruction: "# *Array.length*\r\n\r\nAs + we saw in the last exercise, there are many strange behaviors that can result + from referencing array indexes that are less than 0 or greater than the highest + index in your array. **If want to avoid these kinds of errors then it is useful + to know how long your array is,** especially since we've seen that arrays + can grow and shrink during the course of our program.\r\n\r\n![](https://images.code.org/419a610bedaaf709d400c51a6399f482-image-1447263621427.40.15 + AM.png)\r\n\r\nYou can always check the current length of your array using + the command `list.length` where \"list\" is the name of your array. It evaluates + to a number indicating how many items are in your array.\r\n\r\n# Do This:\r\n\r\n* + **Starter code** has been provided which creates several long arrays.\r\n* + **Use `list.length` and `console.log`** to determine how many items are in + each array. An example of the output is below.\r\n\r\n<img src=\"https://images.code.org/f309b94e58f252599de709dd568441fd-image-1447690174179.08.29 + AM.png\" style=\"width: 250px\">" + CSPU5_U3 - Arrays - lengthMinus1_markdown_instruction: "# Expressions as Indexes: + *list.length - 1*\r\n\r\nWe have been accessing information in an array by + using numbers, but we can actually use **any expression that evaluates to + a number as an index in our array**. The first example of this we will explore + is accessing the last item in our array.\r\n\r\nArrays are **zero-indexed**, + which means that the first index is 0. Therefore an array with a length of + 3 will have indexes 0, 1, and 2. Notice that **the last index is 1 less than + the length**. This will always be the case, and so we can use this expression + to access the last element in any array:\r\n\r\n![](https://images.code.org/4b9d62e451188ea00a58102110e447f6-image-1447267224677.28.31 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **Starter code** has been provided that + which creates several arrays.\r\n* Use the syntax provided above and `console.log` + to display the final item in each list.\r\n" + CSPU5_U3 - Arrays - remove_markdown_instruction: "# Removing Items\r\n\r\nSometimes + we want to remove something from an array. In order to do so you'll need + to specify the **index** of the item that should be removed.\r\n\r\n<img src=\"https://images.code.org/350e3dfe234b1ce1e47e11bc0629b47d-image-1447272428285.06.40 + PM.png\" style=\"width: 250px\">\r\n\r\n**Note:** `removeItem` removes the + location in the array at the index provided. As a result **the array is one + location shorter and all the indexes after the index provided will have their + index decreased by one**.\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** + for `removeItem`.\r\n* **Starter code** has been provided which creates an + array of strings.\r\n* Use `removeItem` to **individually remove all the \"REMOVE\" + strings in your array** to form a complete sentence. \r\n* Use `console.log` + to confirm you succesfully created your sentence.\r\n\r\n**Note:** Keep an + eye out; your indexes will shift as you remove items.\r\n\r\n![](https://images.code.org/5ba2247cafcfcb5d8be80db32126105e-image-1447273315312.21.17 + PM.png)" + CSPU5_U3 - Arrays - stringsInArrays_markdown_instruction: "# Arrays Can Hold + Strings\r\n\r\nSo far we have been using arrays to hold numbers, but each + location in an array could hold a string instead.\r\n\r\n![](https://images.code.org/5088def6c9aa8c114fc415bf25d83511-image-1447195709238.48.13 + PM.png)\r\n\r\n**Note:** It is possible for an array to hold both strings + and numbers, but **typically you will only want your arrays to hold one type + of data**.\r\n\r\n# Do This:\r\n\r\n* Create an **empty array**.\r\n* Use + `appendItem` to **individually add strings to your array**, forming a sentence + of at least **5 words**.\r\n* Use `console.log` to confirm you succesfully + created your sentence.\r\n\r\n![](https://images.code.org/72b8a2bf0a98be39fba73498cb6ed5da-image-1489697463827.png)" + CSPU5_U3 - Canvas - 200dots_markdown_instruction: "# Loops on the Canvas\r\n\r\nTo + make things interesting, we're going to quickly add 200 dots to our canvas + by using a `for` loop. **Locations on the canvas are relative to the top-left + corner of the canvas, not the screen**. Therefore you will need to know the + dimensions of your canvas in order to randomly place dots throughout it. You + can find this information in Design Mode:\r\n\r\n![](https://images.code.org/8e0c868a21f5c674efb6adef1040ec2b-image-1448040822360.33.29 + AM.png)\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/345b625e6954dc1ea2310c97aa08c59f-image-1448243004939.gif\" + style=\"float: right\">\r\n* Add a **`for` loop that runs 200 times.**\r\n* + Place the **`circle` command inside the loop** and **decrease the radius** + (try 20).\r\n* **Use `randomNumber` to randomize the `x` and `y` values used + to place your dots**. The ranges you select should be the width and height + of your canvas. \r\n* **COMMON MISTAKE ALERT:** If you test your code before + setting the `x` and `y` values of the circle to random numbers, it will look + like there's only one dot. But really you will have just drawn 200 dots + all at the same (x, y) position.\r\n\r\n" + CSPU5_U3 - Canvas - One Dot sprayPaint_markdown_instruction: "# Making Spray + Paint\r\n\r\nThe next effect we would like to create is a \"spray paint\" + effect. Instead of drawing a single dot for every location stored in `eventList`, + we'll draw many small dots randomly placed around each location.\r\n\r\nWe + are going to start off just practicing **drawing a circle whose x and y locations + use `offsetX` and `offsetY` with a small random value added**. This makes + the line of code to draw the circle kind of long, but hopefully it's easy + to understand if you read it carefully.\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n# + Do This:\r\n\r\n* **Set the style of another button** in Design Mode, give + a label like \"Spray Paint,\" give it a descriptive ID, and attach a click + event handler to it.\r\n* **Copy the code from the \"Original\"** button into + the event handler for spray paint.\r\n* Change the code for `circle` so that + it will **draw a dot whose x and y locations use `offsetX` and `offsetY` with + a small random value added. **\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n* + **Run your app** to make sure it is drawing small dots close to the original + position. Look at the example below.\r\n\r\n![](https://images.code.org/d6279085a5c6689dd5c745a0d0e28136-image-1448386996780.gif)" + CSPU5_U3 - Canvas - appendToArray_markdown_instruction: "# Store Your Dots\r\n\r\nNow + we're going to get into the core of the activity. We will be **creating a + record of every dot your user draws**.\r\n\r\nTo do this, we will append *every* + `event` parameter to an array as events are generated. When we store every + mouse location in an array, we can make many interesting effects and redraw + the image in different ways, by looping over the array. First let's just + make sure we can capture them all.\r\n\r\n# Do This:\r\n\r\n* Create a new + array outside the event handler function: `var eventList = []`.\r\n\r\n* In + your event handler, before you call the `circle` command, use `appendItem` + to add the `event` parameter to `eventList`.\r\n![](https://images.code.org/98f98c0895fafa87b8f6617e5b4629af-image-1448080702748.gif)\r\n\r\n* + **Run the program** and draw some dots.\r\n\r\n* In the Debug Console type + `console.log(eventList)` and inspect the contents. You should have a record + of every event parameter used to draw a dot! (It might be a lot.)\r\n![](https://images.code.org/425bdde5f2d87b34c037b533600f19b4-image-1448080857409.gif)" + CSPU5_U3 - Canvas - changeToMouseMove_markdown_instruction: "# Drawing on *mousemove*\r\n\r\nCurrently + the user can click to add dots, but we want **to place dots wherever the user + moves the mouse on the canvas**.\r\n\r\nTo place dots whenever the mouse is + moved, we'll be **changing the event type from `click` to `mousemove`**.\r\n\r\n# + Do This:\r\n<img src=\"https://images.code.org/960ac863ac908506724eeb9f11165672-image-1448246938599.gif\" + style=\"float: right\">\r\n* Change the event type in your event handler **from + `click` to `mousemove`**.\r\n* **Run your program** to confirm that dots are + being drawn anywhere the user moves the mouse.\r\n\r\n**Your user is now able + to draw anywhere they want on the screen!**" + CSPU5_U3 - Canvas - clickToAdd_markdown_instruction: "# Click to Add Dots\r\n\r\nLoops + are one way of quickly adding dots to our canvas, but now we're going to + change our app so that the user can decide when and how many dots to add. + The canvas is a UI element, so **you can attach event handlers to it just + like you would any other element**. We're going to move the circle command + inside of a click event handler so that the user can click to add individual + dots.\r\n\r\n![](https://images.code.org/ecd25d3ff2bb50f0555ebd012e5c3b88-image-1448078111902.gif)\r\n\r\n# + Do This:\r\n\r\n* **Add an `onEvent` handler**; set its ID to your canvas + ID.\r\n* **Move the `circle` command out of your `for` loop and into your + new event handler**.\r\n* **Remove the `for` loop from your program.**\r\n* + **Run your program** and confirm that a single dot is added everytime a user + clicks your canvas.\r\n\r\n![](https://images.code.org/0064f8ac406a9f09dc742c81d8510f16-image-1448244621879.gif)" + CSPU5_U3 - Canvas - delete_markdown_instruction: "# Delete Button\r\n\r\nWe + are finally going to use those buttons! Each one will trigger an event handler + that **processes the array `eventList` to create a visual effect** with the + mouse data you have stored. **The first effect we are going to create is delete.**\r\n\r\nYou + may want to provide your user with a way to start over with their drawing. + In order to do this, you will need to *both* **clear the canvas** and **delete + all items from `eventList`.** The easiest way to delete everything from the + list is to simply set the value of `eventList` to be a new empty list.\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/f8fca0d889ae9ddc3ac9b33ba27fadce-image-1448311933871.gif\" + style=\"width: 200px; float: right\">\r\n\r\n* In Design Mode, set the styling + and text of one button to indicate it's the \"delete\" or \"start over\" + button. Give your button **a descriptive ID**.\r\n\r\n* **Add a click event + handler** to your button.\r\n\r\n* Within the event handler call `clearCanvas`.\r\n\r\n* + Set `eventList` to the empty array (i.e., `eventList = []`).\r\n\r\n**Test + your program** to make sure that starting over works the way it should. \r\n" + CSPU5_U3 - Canvas - draw at click point_markdown_instruction: "# Drawing Dots + at Click\r\n\r\nCurrently the user can click to add dots, but they're drawn + at random locations around the canvas. We're going to use information stored + in the `event` parameter of the event handler function **to place dots wherever + the user clicks the mouse on the canvas**.\r\n\r\nThe event parameter has + two critical pieces of information we'll want, which are `event.offsetX` + and `event.offsetY`. These hold **the location (relative to the top left corner + of the canvas) that was clicked**. \r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/1c6109cfc1b02c3ba737519d3f01d1b4-image-1448301532145.gif\" + style=\"width: 200px; float: right\">\r\n\r\n* **Remove (or comment out) the + `console.log` statement**.\r\n* Replace the `x` and `y` parameters of the + `circle` command with `event.offsetX` and `event.offsetY`.\r\n* **Run your + program** to confirm that dots are being drawn anywhere the user clicks the + mouse." + CSPU5_U3 - Canvas - freePlay_markdown_instruction: "# Create Your Own Effect!\r\n\r\nYou've + just seen several ways that we can process our array `eventList` in order + to create different effects. Now it's time to make your own! **Extend the + functionality of one of the effects you just created, or create an entirely + new one**. What else could you do with the information you've stored in your + array? How else might you combine the programming tools you've developed?\r\n\r\n# + Do This:\r\n\r\n* **Extend the functionality of one of the effects, or create + an entirely new one of your own!**" + CSPU5_U3 - Canvas - introCanvas_markdown_instruction: "# Introducing Canvas\r\n\r\nToday + we are going to be building a drawing app around **a new UI element called + the canvas**.![](https://images.code.org/26713ddcc9477e64c347c228d68cac0a-image-1447994134674.35.25 + PM.png)\r\n\r\n![](https://images.code.org/044ad7db1cb4101f54302bd4013d1cc2-image-1448241882228.gif)\r\n\r\n**A + canvas is simply a transparent rectangle on which you can draw basic shapes** + like lines, circles, and rectangles. In fact, at first you might feel like + we're going to end this unit in the way we started it, making turtle drawings. + Don't worry, we'll quickly move into new and exciting things we can do with + this new UI element.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/3874f5e430a6290544466b2037490ae4-image-1448242142421.28.33 + PM.png\" style=\"float: right\">\r\n* **Starter code** is provided which places + buttons on the bottom of your screen. **Ignore these for now; we'll be using + them later**.\r\n* **In Design Mode, drag a canvas element into the empty + space at the top of your app**, resize it, and give it a descriptive ID.\r\n* + **Call `setActiveCanvas` with the ID you assigned to your canvas**, which + makes it responsive to canvas commands.\r\n* **Add a giant circle to the canvas.** + Use the `circle` command. Make its radius large enough that it goes off the + edge of your canvas.\r\n\r\nYour code will look something like this:\r\n\r\n![](https://images.code.org/f0cc22a1de686db72ebce90c720ae6e4-image-1447994225253.36.59 + PM.png)" + CSPU5_U3 - Canvas - movementFunction fix Orig_markdown_instruction: "# Fix + the \"Original\" Button\r\n\r\nOur \"Original\" button is now slightly broken + because the effect it renders doesn't match our new free-form drawing which + takes the movement of the mouse into account - it just draws fixed-size cricles.\r\n\r\nLet's + fix the \"Original\" button.\r\n\r\n# Do This:\r\n\r\nIn the event handler + function for the \"Original\" button:\r\n\r\n* Change the value used for the + radius from a fixed value to the same thing calculated for the free-form drawing. + Since you wrote a function to do this calculation, it should be easy to call + it from this code as well!\r\n* The **slight difference will be that you will + be looping over the array of events.** So the line of code that draws the + circle might look like the one below. This line of code is certainly a mouthful, + but it's basically the same as the line of code in your `mousemove` event + handler; **it just references the event in the list instead.** <br><img src=\"https://images.code.org/dbb4cd9b98eba70aa2919a93544c1e03-image-1448314845862.40.21 + PM.png\" style=\"width: 600px\">\r\n* **Test your program** to confirm that + clicking the \"Original\" button creates the same effect that occurs when + doing free-form drawing.\r\n\r\n![](https://images.code.org/4fcf033e87dc407d337941a7adc4766b-image-1448394246410.gif)" + CSPU5_U3 - Canvas - movementFunction_markdown_instruction: "# Adjusting Circle + Size\r\n\r\nAmong the other pieces of information contained in each `event` + parameter are the values `movementX` and `movementY`. These numbers tell us + how far (in pixels) the mouse moved since the last mouse event was triggered, + and can be used to measure the speed of the mouse. ** If the movement is large, + the mouse is moving fast; if the movement is small, the mouse is moving slowly.**\r\n\r\nLet's + use the mouse movement speed to make a cool effect. When we draw with a real + pen or brush, the line usually gets thin when making quick strokes and is + wider and darker when making slower ones. We can generate this effect by **using + `movementX` and `movementY` to calculate the radius for the circle.** Since + this calculation might be a little tricky, a smart thing to do would be to + **write a function** that takes `movementX` and `movementY` as parameters + and **returns** a value that should be used as the radius.\r\n\r\n<img src=\"https://images.code.org/b9dc4c20d44af7b4e7725b71cd35fa2b-image-1448313734191.21.43 + PM.png\" style=\"width: 350px; float: right; border: solid 1px black\">\r\n\r\nThere + are several ways to do this. One possible way to write the function is provided + on the right, which uses some arithmetic tricks. The function to the right + is actually only three lines of code but is heavily commented to explain what + it's doing. It makes use of a function called **`Math.abs` which returns + the absolute value of a number.** Feel free to use this or another method + of converting `movementX` and `movementY` into a radius.\r\n\r\n<details> + <summary><strong>What is Absolute Value?</strong> [click to expand]</summary>\r\n`Math.abs` + takes a number as input and returns the positive version of this number. \r\n\r\nIn + math, absolute value is often written with this | | symbol. So |10| is the + absolute value of ten and |-10| is the absolute value of negative ten. Both + evaluate to 10.\r\n\r\nIn Javascript we use `Math.abs` instead of | |. `Math.abs(-10)` + and `Math.abs(10)` both evaluate to <strong>10</strong>.\r\n</details> <br>\r\n\r\n# + Do This:\r\n\r\n* **Write a function like the one above** that accepts two + parameters (one each for `movementX` and `movementY`) and returns a radius. + A higher speed should lead to a smaller radius.\r\n* **Inside your `mousemove` + event handler,** set the radius of the circle to the value returned by your + function, where the function takes `event.movementX` and `event.movementY` + as input. For example, if using the function above, your code would be: <br>![](https://images.code.org/94a379336084954ba2ab27e80b17dee3-image-1448314255797.30.22 + PM.png)\r\n* Run your program and confirm that **when you draw, the speed + of the mouse affects the radius of the dots**. The effect should look something + like what's below \r\n\r\n![](https://images.code.org/ee83d18f04e4d9d486428273b7321f9f-image-1448394071473.gif)" + CSPU5_U3 - Canvas - redrawOriginal_markdown_instruction: "# Redraw Original\r\n\r\nIf + you were able to get that working and understand what you did, congratulations! + That was some serious programming! If not, take a moment to go back and talk + through the different components with a classmate. Most of the work we'll + be doing for the rest of this lesson uses similar patterns, and you'll want + to be comfortable with them as we add more complexity to our app.\r\n\r\nThe + first thing we are going to do is **create an \"Original\" button that will + redraw the image with the same circle radius you used before**. The process + will be nearly identical to how you added the \"Random\" button.\r\n\r\nIn + fact, the code to redraw the original is *exactly* the same, except instead + of making the radius of the circle be random, it will just be the fixed value + you used originally (probably radius 5 or so).\r\n\r\n![](https://images.code.org/9238e313e8f635e2e6b31ad19d0fdc41-image-1448290929994.gif)\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/6cf1d46af7cd92cc1faf1501366e2e1a-image-1448312993714.gif\" + style=\"width: 200px; float: right\">\r\n(**NOTE:** The instructions below + are shown in the code animation above.)\r\n\r\n* Style a button, give it label + like \"Original,\" give it a meaningful ID, and add a \"click\" event handler.\r\n* + Inside the event handler for your \"Original\" button...\r\n\t* Copy the code + from the \"Random\" button event handler.\r\n * Paste it inside the event + handler for the \"Original\" button.\r\n\t* Set the `radius` parameter to + **whatever value you used when you originally drew dots**.\r\n* Test your + program by drawing a figure and then hitting your \"Randomize\" button. Then + hit the \"Original\" button. Your original drawing should appear." + CSPU5_U3 - Canvas - redrawRandom_markdown_instruction: "# Redraw Random - Part + 1\r\n\r\nThe next effect we are going to create is **\"random.\"** We will + be redrawing the image but with randomly sized dots.\r\n\r\nWe'll be doing + this in two steps. For now, all you need to do is **change the first button + in the row to have the proper styling and attach a click event handler to + it**. **In addition, clear the canvas from inside the event handler** so we + are ready to redraw our new image. We don't want to delete all the items + from the array though, as we will use them to redraw. Once you've done that, + move on to the next exercise where we'll write the actual code in our event + handler.\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/0116a787b989df18b077cb4657a5d379-image-1448312365660.58.05 + PM.png\" style=\"width: 200px; float: right\">\r\n\r\n* In Design Mode, **pick + a button to use for Random. Set the styling and text of the button**. The + image below shows one possible option, but you can style it however you like.\r\n\r\n* + Give your button **a descriptive ID**.\r\n\r\n* **Add a click event handler** + to your button.\r\n\r\n* **Call `clearCanvas`** from inside the event handler + so the canvas is ready for the redraw." + CSPU5_U3 - Canvas - redrawRandom2_markdown_instruction: "# Redraw Random - + Part 2\r\n\r\nNow we're ready to write the code for our \"Random\" effect. + To do this, we will be clearing the canvas and then processing the array `eventList` + to redraw all the dots with a random radius. \r\n\r\nYou already set up the + clear canvas, so next we'll need to process our array in order to find out + the event information for each dot. You'll need to create a `for` loop that + iterates through every index in `eventList` (recall the `length` command). + Within your loop, you will be drawing dots referencing items stored in the + array. \r\n\r\nAs you write this code, remember that **you can treat an individual + element of an array exactly like the kind of data it stores**. Inside a `for` + loop, the event at index `i` can be accessed with the notation `eventList[i]` + and the `offsetX` of that event can be accessed with `eventList[i].offsetX`. + Again, you are essentially treating the array element as if it were the data + it contains.\r\n\r\n![](https://images.code.org/8ce01658ab31ce5f05101e58e3413681-image-1448250618520.gif)\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/6e081911348f3c1b07d17f83bd402249-image-1448312722857.gif\" + style=\"width: 200px; float: right\">\r\n\r\n(**NOTE:** Everything listed + below is shown in code animation above.)\r\n\r\n**Inside the \"Random\" button + event handler...**\r\n* **Add a `for` loop** that runs `i` from 0 up to `eventList.length` + to process over the array.\r\n* **Add a `circle`** command inside your loop.\r\n* + **Set the x and y parameters** of the `circle` to `eventList[i].offsetX` and + `eventList[i].offsetY`, respectively.\r\n* **Set the `radius` parameter** + to some `randomNumber`. Pick any range you like. You can always change it + later.\r\n* **Test your program** by drawing a figure and then hitting your + \"Randomize\" button. It should be the same drawing, but now with randomly + sized dots!" + CSPU5_U3 - Canvas - shiftKey_markdown_instruction: "# Draw When a Key is Pressed\r\n\r\nThis + app now lets the user draw, but they have no control of whether the pen is + up or down. Let's give the user the ability to **choose when to put down + the pen**. We won't even need to add a new event handler to our app! \r\n\r\nYou + may have noticed that the **`event` parameter includes information about whether + certain keys were pressed when the event fired**. They are stored in variables + with names like `shiftKey` or `altKey` and are stored as boolean values (true + / false). We are going to use the `shiftKey` variable to decide when we should + draw circles. \r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/1a4b8f12645e5e88dee96d5542933c84-image-1448248202626.gif\" + style=\"float:right\">\r\n\r\n* **Add an `if` statement inside your event + handler function** where the condition is based on the value stored in `event.shiftKey`: + **If `shiftKey` is true, then draw the circle.** <img src=\"https://images.code.org/a542766e8e52fed5ca992f2434ace086-image-1448307484936.37.32 + PM.png\" width=\"200\">\r\n\r\n* You might want to **decrease the radius of + your circle** (for example to 5).\r\n\r\n* **Run the program and confirm that + dots are only drawn when the shift key is pressed.**\r\n\t* The effect should + be that the user can pick up and put down the pen to draw.\r\n\t* Hold the + shift key down and move the mouse to draw.\r\n\t* Release the shift key to + stop drawing.\r\n\r\n(**NOTE:** If you wish, use `console.log` to display + the values in `event` again. You'll see `event.shiftKey` is one of the values + stored.)\r\n" + CSPU5_U3 - Canvas - sketch_markdown_instruction: "# Relative Indexes\r\n\r\nWhen + looping over an array, we use a counter variable (typically `i`) to keep track + of which index we're at. We can then access the contents at each index with + the syntax `list[i]`.\r\n\r\nIf we want, however, we could access the contents + of the next element as well, since its index is just one greater. For example, + if we are currently focused on the element at index `i`, then `list[i+1]` + gives us access to the next element in the array. In other words, you can + **reference indexes relative to your counter variable**.\r\n\r\n![](https://images.code.org/3bb5dfce60951040172bfe08d98a8750-image-1448393281688.png)\r\n\r\nWe + are going to use relative indexing to create our final effect, which will + look sort of like an etching of the image. The idea is simple: **for every + (x, y) location in the event list, draw a straight line between that + location and the location stored 10 spots further down the array.** You will + use the **`line` command** to draw a line connecting these points.\r\n\r\n# + Do This:\r\n\r\n* **Read the documentation for `line`**.\r\n* **Set the style + of the final button** in Design Mode, give a label like \"Etch,\" give it + a descriptive ID, and attach a click event handler to it.\r\n* **Call `clearCanvas`** + to clear the screen.\r\n* Create a `for` loop that counts from **0 to `eventList.length + - 10`**. \r\n\t* Why do you think we're not counting over the entire array?\r\n* + Use `line` to draw a line between the (x, y) locations of `eventList[i]` + and `eventList[i+10]`. The full line of code will be another big one: ![](https://images.code.org/5de2c40b56042069379ff20ce5d10cab-image-1448393948598.38.49 + PM.png)\r\n* **Use `setStrokeColor` and/or `setStrokeWidth` inside the event + handler** to make the lines visible; otherwise, they will be transparent, + since we set the stroke color to transparent at the beginning of the program.\r\n* + **Run your app** and confirm that your new button creates a sketch effect, + as shown below.\r\n\r\n![](https://images.code.org/c06c268a4757e8838435e576a676a0a2-image-1448395181441.gif)" + CSPU5_U3 - Canvas - sprayPaint_markdown_instruction: "# Making Spray Paint + with Nested Loops\r\n\r\nIn order to make \"Spray Paint\" look more real you + will need to draw multiple dots randomly placed around the original x and + y locations. In order to do this, you will place one `for` loop inside of + another, also known as a **nested loop**. You already have the main loop which + visits every index in `eventList`. The inner loop should **draw 5 circles + whose x and y locations use `offsetX` and `offsetY` with a small random value + added**. \r\n\r\n# Nested Loops\r\n\r\n<img src=\"https://images.code.org/15d7590ed9d4c07a40f22da4decc396c-image-1448153719856.54.36 + PM.png\" width= 300px ; style=\"float: right\">\r\n**When nesting loops, it + is important that you use different variables to count your iterations**. + Look at the example at right. These nested loops effectively say: **\"for + every possible value in `eventList.length`, run a loop 5 times\". **\r\n\r\nSince + `i` is used as the counter variable in the outer loop, we need to use a *different + counter variable for the inner `for` loop*, or things will go haywire. Why? + **If both loops used `i` as a counter variable, the inner loop would keep + changing `i` and the outer loop wouldn't count properly.** The example uses + `j` as the inner loop variable, but you could use anything that's *not* `i`.\r\n\r\n<img + src=\"https://images.code.org/b5184430a48ac55d8f6fe7280c983186-image-1448387927473.gif\" + style=\"width: 450px\">\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/290adbb84a51b89ca27414746d3a4a93-image-1448395072342.gif\" + style=\"width: 200px; float: right\">\r\n\r\n(**Note:** Steps shown in animation + above.)\r\n\r\n* **Add a `for` loop inside the existing `for` loop** in the + spray paint event handler. \r\n* **Change the counter variable** to something + other than `i` for the inner `for` loop.\r\n* **Change the boolean condition** + so the inner loop will run **5 times.**\r\n* **Move the circle** code inside + both `for` loops.\r\n* **Run your app** and confirm that your new button creates + a spray paint effect, as shown below." + CSPU5_U3 - Canvas - transparentDots_markdown_instruction: "# Changing Colors + in Canvas\r\n\r\nWe would like to make our dots transparent so that we can + see when they are drawn on top of each other. To set the color and transparency + of shapes you draw on your canvas, you need to change both the **stroke** + or outline color and the **fill** color. The functions `setStrokeColor` and + `setFillColor` can be used to set those colors. \r\n\r\nThese functions **accept + strings of the form `\"rgba(100, 200, 100, 0.5)\"` as input**. The first three + values in the string are RGB values and the last value is the transparency, + as represented by a decimal number between 0 and 1.0. All together it looks + like this:\r\n\r\n![](https://images.code.org/5f5692259df092ce4e000cbdf5a7df1b-image-1448077147778.png)\r\n<img + src=\"https://images.code.org/e833a63e31dca7d5e8357c0b856dc7cc-image-1448244247180.gif\" + style=\"float: right; width: 150px\">\r\n\r\n# Do This:\r\n\r\n**Before the + loop: ** \r\n* **Add a `setStrokeColor` command** to set the stroke to **fully + transparent**.\r\n* **Add a `setFillColor` command** to set your dots to full + black and mostly transparent **(try a value of 0.2)**." + CSPU5_U3 - Canvas - usingOffsetXY_markdown_instruction: "# The Event Parameter + for Mouse Events\r\n\r\nWe'd like to change the app so that when the user + clicks on the canvas we draw a circle right where they clicked. To do that, + we need to learn more about the **parameter passed by our event handler function, + which by default is called `event`**.\r\n\r\nRecall that when we wanted to + know what key the user pressed on a `keyPress` event, we checked the value + stored in `event.key`. **The event parameter actually stores a great deal + more information about each event**. \r\n\r\nWhen using the mouse, the event + parameter carries information like the location of the mouse, how fast it's + moving, and some other things as well. \r\n\r\nLet's get acquainted with + the event parameter and what we can find out about the mouse.\r\n\r\n# Do + This:\r\n\r\n* Add a `console.log` command inside the function of your event + handler. Use it to display the `event` parameter.\r\n* Run your program and + click your canvas. **The full contents of the `event` parameter should be + displayed in the console**. \r\n* **Which values do you think hold the x and + y coordinates**? What else is there?\r\n* We won't use all of these, but + it's interesting to see just how much is available.\r\n* Once you have experimented + a little, move to the next level.\r\n![](https://images.code.org/a6875e27019cb938a9576f0485648ca9-image-1448041792987.49.30 + AM.png)\r\n" + CSPU5_U3 - Conditional Basics - 6_markdown_instruction: "# What happens after + an *if* ?\r\n\r\nYou may have noticed that our flowchart for our game so far + only does something if the condition is true. What happens after the `if` + statement? Let's find out.\r\n\r\n<img src=\"https://images.code.org/90b7a527091704a6ab4612b9f84db305-image-1446234882661.png\" + style=\"width: 200px\">\r\n\r\n# Do This:\r\n\r\n* **Add a `setText` after + the `if` statement** to \"Nope. Guess again.\"\r\n\r\n<img src=\"https://images.code.org/f5c5de1b77a9caf16027e65ed24f91ec-image-1446234785600.gif\" + style=\"width: 450px\">\r\n\r\n* **Run the program** a couple times to **look + for a bug**. We will fix this on the next level." + CSPU5_U3 - Conditionals - Combine AND OR Simple_markdown_instruction: "# Combining + AND and OR\r\n\r\nYou can express more complex conditions by combining **AND** + and **OR** in one statement. Here is the example from the previous page which + you can use as a reference. This statement will evaluate to **true** if the + day is Tuesday or Thursday AND their age is 15 or 16.\r\n\r\n![](https://images.code.org/3f3aba7828abd88fdbd90eda60611bd3-image-1448062956405.06.36.png)\r\n\r\n# Do + This:\r\nWe've provided you with starting code that prompts the user to enter + a **day** and their **age** and stores the result in variables.\r\n\r\n**Add + an `if` statement that uses both AND and OR operators**\r\n\r\n * The app + should write \"Sleep in!\" if it's a weekend and the user is a teenager.\r\n + * Otherwise it should write \"Uh oh. Have to wake up.\"\r\n \r\n\r\nTry it + out!\r\n" + CSPU5_U3 - Conditionals - Combine AND OR and NOT_markdown_instruction: "# Combining + AND and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean + expression to invert its result. This opens the door to express the same logical + statements in different ways. \r\n\r\nFor example, let's say you want to + determine if a person, based on his or her age (under 12 or over 65) gets + to pay a reduced price for a movie ticket. You might express that like this:\r\n\r\n```\r\n// + If your age is less than 12 or greater than 65\r\nif( (age < 12) || (age > + 65) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\nBut + you might also figure out a way to determine if a person gets a reduced price + ticket by determining if his or her age is between 12 and 65 (`(age >= 12) + && (age <= 65)`) and then taking the inverse of that. So using the NOT operator + this would work as well:\r\n\r\n```\r\n// If your age is NOT between 12 and + 65\r\nif( !( (age >= 12) && (age <= 65) ) ){\r\n\twrite(\"You qualify for + a reduced price!\");\r\n}\r\n```\r\n\r\n**Why use one over the other?** Personal + preference. Use the one that makes the most sense to you, but it should be + a clear expression of what you are trying to say. \r\n\r\n\r\n# Do This:\r\nWe've + provided you with starting code that prompts the user to enter a **day** and + their **age** and store it in variables.\r\n\r\n**Add an `if` statement that + uses both AND and OR operators**\r\n\r\n * The app should write \"Time for + school!\" if it's a weekday and the user is under 18.\r\n \t* Hint: one way + to say that it's a weekday is to say that it's NOT a weekend.\r\n * Otherwise, + if it's a weekday and the user is 18 or older, it should write \"Time to + go to work!\"\r\n * Otherwise, it should write \"Time to relax for the weekend!\"\r\n + \r\n \r\n**WARNING** logic can get tricky sometimes. Make sure to test your + program with inputs that cover every possibility. There are 4 basic cases + to test for:\r\n\r\n * It is a weekday and age is under 18\r\n * It is a weekday + and age is not under 18\r\n * It's not a weekday and age is under 18\r\n + * It's not a weekday and age is not under 18\r\n\r\nTry it out!" + CSPU5_U3 - Conditionals - Simple AND_markdown_instruction: "# AND Operator\r\n\r\n<img + src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nAgain you will see the + JavaScript boolean operators AND (`&&`) and OR (`||`) in code toolbox. You + can drag them out or simply type them.\r\n\r\nLet's now try out using an + **AND** operator. As a reminder: **if both statements are true** then AND + evaluates to **true**. **If either (or both) are false** the AND operator + will evaluate to **false**.\r\n\r\n<img src=\"https://images.code.org/4a461db916ded2acccfcdb9a75ef8838-image-1446483668310.png\" + style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\nWe've provided + you with starting code that prompts the user to enter their **age** and stores + it in a variable.\r\n\r\n**Add an `if` statement with a Boolean expression + that uses an AND operator (`&&`)** to express:\r\n\r\n * IF *the age is between + 13 and 19* write \"You are a teenager.\"\r\n * ELSE write \"You are not a + teenager.\"\r\n" + CSPU5_U3 - Conditionals - Simple OR_markdown_instruction: "# OR Operator\r\n\r\n<img + src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nYou will now see the + JavaScript boolean operators AND (`&&`) and OR (`||`) in code toolbox. You + can drag them out or simply type them.\r\n\r\nLet's try OR right now. As + a reminder: the OR operator will evaluate to true if *either or both* statements + are true. If both are false, the OR operator will evaluate to false. \r\n\r\n<img + src=\"https://images.code.org/48d59f73e701d452dd74ae304db59d93-image-1446482464792.png\" + style=\"width: 200px; float:right\"> \r\n\r\n\r\n# Do This:\r\nWe've provided + you with starting code that prompts the user to enter a day of the week and + stores it in a variable.\r\n\r\n**Add the boolean expression to the if-statement + to use an OR (`||`)** to express:\r\n\r\n * IF *it's Saturday or Sunday* + then write **\"It's the weekend!\"** \r\n * Else write **\"Can't wait for + the weekend to get here.\"**" + CSPU5_U3 - Design Mode - Console Log_markdown_instruction: "# Updating IDs + and Debugging with Console Log\r\n\r\nIn the last level you tested out the + new command: `console.log`. In this level we have a couple buttons with event + handlers and `console.log` statements, but they are switched around!\r\n\r\nWe + should have given the buttons better ID names so we could tell the difference + based on the ID. **Can you update the ID names and `console.log` messages + to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** + of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to + Code Mode and notice that the **ID pulldowns have been updated to include + the new IDs**. (You still need to select the correct ID from the pulldown + menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" + CSPU5_U3 - Design Mode - Layers and Delete_markdown_instruction: "# Layering + and Deleting\r\n<img src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" + style=\"width: 150px; float: right\">User interface elements can overlap one + another, so you'll want the ability to change the order or **depth** at which + each one is rendered. \r\n\r\nIf you **scroll to the bottom of the Properties + tab** you'll find buttons which allow you to easily **delete or change the + depth** of an element.\r\n* **Delete an Element** by selecting it (clicking + on it) in the design view and then clicking **Delete** in the properties tab.\r\n* + **Change the depth** of elements by using the double or single arrows.\r\n + * Click the double arrow to send all the way to front or back.\r\n * Click + the single arrow to move up or down one layer.\r\n \r\n# Do This:\r\n\r\nUse + the **delete** and **depth** tools to **create the \"After\" image**\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th + style=\"text-align:center\">Before</th>\r\n <th style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td + align=center><img src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" + style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img + src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" + style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" + CSPU5_U3 - Design Mode - Multi Screens 2_markdown_instruction: "# Switching + Screens\r\n\r\nIn the last level you made two screens, a black one and a white + one. However when you ran the app you probably noticed that you had no way + to see the second screen. Let's fix that.\r\n\r\nIn order to switch between + screens we have added a new command: `setScreen`. Read the documentation to + figure out how this command works.\r\n\r\n<img src=\"https://images.code.org/152f45b312da467f0b553efc9fba20a7-image-1444354703453.gif\" + style=\"width: 250px; float: right\">\r\n\r\n**Goal:** Make a 2 screen app + which can switch back and forth between a black screen and a white screen + using buttons.\r\n\r\n# Do This:\r\n\r\n* **Put a button on each screen**. \r\n\r\n* + **Set up event handlers** for each of your buttons. \r\n\r\n* **Use the `setScreen` + block to switch screens** when the buttons are clicked.\r\n\r\n* Test out + your app to make sure you can switch back and forth between the two screens." + CSPU5_U3 - Design Mode - Multi Screens_markdown_instruction: "# Second Screen\r\n\r\nUp + until now our apps have only been able to have one view. With Design Mode + we can now make multiple screens and switch between them!\r\n\r\n**Goal:** + Make a 2 screen app with a black screen and a white screen. \r\n\r\n<img src=\"https://images.code.org/e35a6f494cf6f0c57c66a1aef651cdb0-image-1444353622241.gif\" + style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\n\r\nSwitch to Design + Mode and **add a second screen**. There are two ways to add a second screen: + \r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 + PM.png\" style=\"width: 50px\"> from the Design Toolbox. Check out the screen + dropdown menu at the top right of the app window. You should now have two + screens! <img src=\"https://images.code.org/b48d978335701888b744702f25f11b28-image-1444353746012.17.07 + PM.png\" style=\"width: 75px\"> \r\n* From the screen dropdown menu at the + top right of the app window click *New Screen*. \r\n\r\nMake screen1 white + and screen2 black. **Set the background color for a screen in the Properties + tab**. Make sure to rename the screens with appropriate IDs." + CSPU5_U3 - Design Mode - WTF Console Log_markdown_instruction: "# Console Log\r\nIn + the last level, we saw a new command: `console.log`. You may have noticed + that it prints out text in the Debug Console below the code workspace.\r\n\r\n<img + src=\"https://images.code.org/326e0f6c7d3b846ba06db998f06f56aa-image-1444419414248.36.33 + PM.png\" style=\"width: 450px; border: solid 1px black\"> \r\n\r\nThe Debug + Console is an important tool for programmers. You've seen it display error + messages, but you can also send messages that a user cannot see to the Debug + Console while a program is running. <img src=\"https://images.code.org/cdc253db1b9a3685eaf5ea4b6bc30766-image-1444337429645.png\" + style=\"width: 250px; float: right; border: solid 1px black\"> The Debug Console + is really helpful for debugging programs because you can send messages to + yourself from within your own code!\r\n\r\nYou can find `console.log` in the + code toolbox under the Variables tab.\r\n\r\n# Do This:\r\n\r\n* Drag out + 3 `console.log` commands into the workspace.\r\n\r\n* Update each `console.log` + with your own messages.\r\n\r\n* Run the program a couple times to test out + this new command." + CSPU5_U3 - Design Mode -Recreate Beyond Buttons_markdown_instruction: "# Improved + Chaser Game\r\n\r\nNow lets improve the \"Chaser Game\". This is where you + get to use your creativity. Make it look nice!\r\n\r\nIn addition you will + notice a new command in the toolbox: `playsound`! Read the documentation about + how to add sounds.\r\n\r\n**Note:** Your code from before has been provided + for you.\r\n\r\n# Do This:\r\n\r\n* **Create a Welcome Screen** that explains + the rules of the game. Include a \"Start Game\" button.\r\n\r\n* Update the + your code so that the **image jumps to a new location when it is clicked**. + \r\n\r\n* **Play a sound** each time the image is clicked.\r\n\r\n* **Add + a Game Over Screen** with a lose message and button to start over. The Start + Over Button should direct back to the Welcome Screen.\r\n\r\n* **Make the + user lose**, by sending them to the Game Over Screen, when the background + is clicked.\r\n\r\n\r\n" + CSPU5_U3 - Design Mode 1_markdown_instruction: "<img src=\"https://images.code.org/5e6fa5738796d69775c0786ca9b4a076-image-1476735925167.png\" + style=\"float: right\">\r\n# Design Mode\r\n\r\n**You Try it:** Add a large + red button to your app using Design Mode.\r\n\r\n* Switch to Design Mode\r\n* + Drag a button onto the app screen\r\n* Change the text to say \"Click Me!\"\r\n* + Make the color of the button red.\r\n\r\n\r\n" + CSPU5_U3 - Dice - Dropdown and Score_markdown_instruction: "# Adding Guess + and Score to Dice Game\r\n\r\nLet's have the user guess the number that will + come up when we roll a single die. \r\n\r\nYou can have multiple `if` statements, + one after another, if they have different purposes which are separate. \r\n\r\n** + Note: ** Use the flowchart below to help you figure out the logic of the game.\r\n\r\n# + Do This:\r\n\r\n* **Add a dropdown** to take in the user's guess from 1 to + 6.\r\n\r\n* **Add a set of `if` statements to check if the dice roll number + is equal to the user guess.** Put this set of `if` statements after your set + of `if` statements for the dice image. It should be completely separate from + the other set of `if` statements. \r\n\r\n* Create a variable to **keep track + of score**. Give 10 points if they guess right and take one point away when + they guess wrong.\r\n\r\n* **Display the score** on the screen and update + it after each dice roll.\r\n\r\n<img src=\"https://images.code.org/ac24917ca18606f6f3c31a6be1a16d73-image-1446174953979.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/ac24917ca18606f6f3c31a6be1a16d73-image-1446174953979.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - Dice - Dropdown with Strings_markdown_instruction: "# Adding Difficulty + Levels: Dropdowns with Strings\r\n\r\nLet's add another element to our dice + game: **difficulty levels**. The user will pick either \"Easy\" or \"Hard.\" These + are strings so you might be wondering how to check for equality. **The `==` + works on strings as well!** It checks if the first string is exactly the same + as the second string. **Strings must be the same letters and even have the + same case to be equal**! So \"dog\" and \"Dog\" would not be equal. \r\n\r\n# + Do This:\r\n\r\n* **Add a dropdown** for difficulty level with the options + of \"Easy\" or \"Hard.\" \r\n\r\n* **Create an `if` statement for difficulty + level** which prints the difficulty level to the console.\r\n\r\n<img src=\"https://images.code.org/9db291c8dd4192390e008aa764576cd3-image-1446175136919.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/9db291c8dd4192390e008aa764576cd3-image-1446175136919.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - Dice - If_markdown_instruction: "# Using `if` to Display Images\r\n\r\nWe + are going to set up a dice game. We want to show a picture of a single die + for each random number generated 1 to 6. We've already set up the screen + in Design Mode, with a button to generate the roll and an image to show a + picture of the die.\r\n\r\n**Note:** The flowchart for the desired behavior + is below.\r\n\r\n# Do This:\r\n\r\n* Add an event handler for the Roll! button + so that when the button is clicked it generates a random number from 1 to + 6. \r\n\r\n* Add conditionals (`if`, `else if`, and `else`) to change the + picture of the image (ID: `dice_image`) to display the correct side of the + die depending on the random number generated. You will need to use <img src=\"https://images.code.org/89f2c13ef4ead590475c863a087597f8-image-1446535826599.30.16.png\" + style=\"width:150px\"> with the URLs below to set the images for the die.\r\n\t* + <img src=\"https://code.org/images/dice/1.png\" style=\"width: 50px\"> Dice + 1 Image URL - https://code.org/images/dice/1.png\r\n * <img src=\"https://code.org/images/dice/2.png\" + style=\"width: 50px\"> Dice 2 Image URL - https://code.org/images/dice/2.png\r\n * + <img src=\"https://code.org/images/dice/3.png\" style=\"width: 50px\"> Dice + 3 Image URL - https://code.org/images/dice/3.png\r\n * <img src=\"https://code.org/images/dice/4.png\" + style=\"width: 50px\"> Dice 4 Image URL - https://code.org/images/dice/4.png\r\n * + <img src=\"https://code.org/images/dice/5.png\" style=\"width: 50px\"> Dice + 5 Image URL - https://code.org/images/dice/5.png\r\n * <img src=\"https://code.org/images/dice/6.png\" + style=\"width: 50px\"> Dice 6 Image URL - https://code.org/images/dice/6.png\r\n\r\n<img + src=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" + target=\"_blank\">Open diagram in a new tab</a>\r\n" + CSPU5_U3 - Dice - Nested_markdown_instruction: "# Nested *if* Statements\r\n\r\n<img + src=\"https://images.code.org/1774efb17571d3370662e34b705dde47-image-1446485939643.37.11 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Let's change the + scoring of the game to match the difficulty level.** \r\n\r\nNew scoring rules:\r\n* + _Easy: +10 points right answer / -1 point for wrong answer_\r\n* _Hard: +1 + point right answer / -1 point for wrong answer_\r\n\r\nHow do we check _both_ + the difficulty level and if the user's guess was correct? **We can actually + put `if` statements inside of other `if` statements!** So we first want to + check what the difficulty level is and then check if the user was right or + wrong to determine the score.\r\n\r\n** Note: ** The flowchart below outlines + the logic you are trying to implement.\r\n\r\n# Do This:\r\n\r\n* Move a copy + of the score `if` statement inside of the difficulty levels. Be careful with + indenting. All of the `if` statements for score need to be inside of the difficulty + `if` statement (i.e. indented 1 level more than the difficulty `if` statement)\r\n\r\n<img + src=\"https://images.code.org/2125a027997aeca75d18b8423058063d-image-1446485524945.gif\" + style=\"width: 350px\">\r\n\r\n\r\n* Edit the `if` statements to give the + correct scores\r\n\t* Easy level (+10 right, -1 wrong)\r\n * Hard level + (+1 right, -1 wrong)\r\n\r\n<img src=\"https://images.code.org/3b95a9f5cca60fc0ffbf7c2fb174d737-image-1446175290414.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/3b95a9f5cca60fc0ffbf7c2fb174d737-image-1446175290414.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - High Low - Debug_markdown_instruction: "# Debug Conditionals\r\n\r\n\"Help! + I was trying to give the player a hint when their guess was within 2 of the + secret number but the code I wrote isn't working. **Can you fix it?**\"\r\n\r\nThis + picture shows what the message should be based on the difference between the + secret number and the player's guess:\r\n\r\n![](https://images.code.org/8b6e60db87e3c704ae5209c8c608f5d5-image-1481691055804.png)\r\n\r\n* + Run the code to identify when the program is not working correctly (try guessing + numbers 1-6)\r\n* Fix the problem with the order of the conditionals.\r\n\r\n**Hint:** + \r\n* The major problem here is that **conditional statements run in order + from top to bottom**. \r\n* Remember you have to check the smallest/most narrow + case first, and work up from there.\r\n* The conditions might be slightly + non-intuitive at first glance.\r\n* If you want to re-arrange the conditions + it might be easier if you **switch to text mode**\r\n\r\n<details><summary>Check + out the flow chart for the logic I wanted. [Click to Expand]</summary>\r\n\r\n<a + href=\"https://images.code.org/76681a7d86bd4097417b25b682eee5a8-image-1458309676819.png\" + target=\"_blank\">\r\n<img src=\"https://images.code.org/76681a7d86bd4097417b25b682eee5a8-image-1458309676819.png\" + style=\"width: 350px;\">\r\nClick image to open larger in a new tab</a>\r\n</details>\r\n\r\n" + CSPU5_U3 - High Low - Dropdown_markdown_instruction: "# Dropdown\r\n\r\nOn + the last level we used `promptNum` to get the user's guess. However, we had + no way to limit them to the numbers we wanted. They could have typed 11 even + though we told them not to. A better way to get input with a limited set of + options is the dropdown. The <img src=\"https://images.code.org/3b21b4288a2a155d1e9a3c2cf3a5b09b-image-1446229368079.28.23 + PM.png\" style=\"width: 75px\"> is in your Design Mode Toolbox. You can control + the list of options users can choose and then use `getText` to get the chosen + number.\r\n\r\nWe are going to need an event handler in order to do this. + The event handler will detect when the user has changed the value of the dropdown. + \r\n\r\n# Do This:\r\n\r\n* **Add a dropdown** for their guess instead of + `promptNum`. Make sure to give it a good ID.\r\n\r\n<img src=\"https://images.code.org/fea164f6e53d1ce0c50981565e066d4c-image-1446229598357.gif\" + style=\"width: 350px\">\r\n\r\n* Under properties **find the Options** and + change it to the **numbers 1 to 10**\r\n\r\n<img src=\"https://images.code.org/0cfecbcdcfb95fc30876155ec6a3a021-image-1446229593687.gif\" + style=\"width: 250px\">\r\n\r\n* Add an event handler to detect the `change` + event on your dropdown.<br><br>\r\n<img src=\"https://images.code.org/48cffda5b7ff3a446116a39b4dbcbe8c-image-1446232308751.gif\" + style=\"width: 150px; float: right\">\r\n* Move your `if` statement inside + the event handler so it will check each time the dropdown is changed.<br><br>\r\n* + When the dropdown is changed **use `getText` to find out the user's guess**. + Save the guess using a variable. **Don't forget about scope!**<br><br>\r\n* + Test your app -- it should work like the demo." + CSPU5_U3 - High Low - Else if_markdown_instruction: "# Guess the Secret Number + with *else-if*\r\n\r\nIn this guess-the-number game, the starting code tells + the user whether they were right or wrong. Let's help the user out even + more by telling them if they guessed correctly or if their guess was too high + or too low. \r\n\r\nThere are **only 3 possible cases:**\r\n\r\n* They were + right.\r\n* Their guess was higher than the number.\r\n* Their guess was lower + than the number.\r\n\r\nUse a conditional with and `if`, `else-if`, and a + final `else` to implement this.\r\n\r\n**Remember:** You can create an `else-if` + statement by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. The first + <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> will add an `else`, the second will add an + `else-if`.\r\n\r\n\r\n# Do This:\r\n\r\n* **Add an `else-if` statement to + accommodate the 3 conditions.**\r\n\r\n* **Update the conditions** using `<`, + `>`, and `==` to tell the user if their guess was correct, high, or low.\r\n\r\n* + **Test out the program** to make sure your updates worked.\r\n\r\n<details><summary>Visual + Explanation [Click to expand]</summary>\r\n<li>Sometimes it's helpful to + see how the program should flow with a flow chart. The flow chart below depicts + what should happen </li>\r\n\r\n<img src=\"https://images.code.org/f7e483414dfe1d4585841e653e44d8b0-image-1446169181724.png\" + style=\"width: 500px\">\r\n</details>" + CSPU5_U3 - High Low - Else_markdown_instruction: "# *else*\r\n\r\n<img src=\"https://images.code.org/b7942d778a54465ad6f9f19fbab8d1ef-image-1446237289306.34.23 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\nLet's add an `else` + statement so we can tell the user when they are right and when they are wrong.\r\n\r\n**Note:** You + can create an `else` statement by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. There + is also an `if-else` block in the toolbox. \r\n\r\n\r\n# Do This:\r\n\r\n* + **Add an `else` statement**\r\n\r\n* **Move your `setText` inside the `else` + statement.** So it should say \"Nope that's not it. Guess again.\" when the + user does not guess the secret number." + CSPU5_U3 - High Low - If_markdown_instruction: "# *if* Statement\r\n\r\n<img + src=\"https://images.code.org/040c8364e3795252194b816623e949e5-image-1446227663554.54.03 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nThe boolean expression + we tested on the last level allows us to make decisions. In order to make + these decisions we need to use something called a conditional. **Conditionals + check if a boolean expression is true and then will execute the code inside + of the `if` statement.** \r\n\r\n<img src=\"https://images.code.org/84123a7c317c63d8876b6b56086d717e-image-1446228290588.png\" + style=\"width: 150px; float: right\">\r\n\r\nOver the number couple levels + we are going to be creating a **Guess My Number game**. The starter code uses + `promptNum` to ask the user for a number from 1 to 10. The `if` statement + checks if the user guess is equal to the secret number. Right now nothing + happens when they guess the right number. Can you fix that?\r\n\r\n# Do This:\r\n\r\n* + Read the code to identify the boolean expression.\r\n* Add a text label to + the screen. Have it start out with \"Guess my secret number!\"\r\n* **Set + the text label to say \"You got it right!\" from inside the `if` statement**. + This will tell them they get it right only when that condition is true!\r\n* + **Test your code out** to make sure it works.\r\n\r\n<img src=\"https://images.code.org/2f3487ec7a8d7cec1605f3da830c83f8-image-1446227512726.gif\" + style=\"width: 350px\">" + CSPU5_U3 - Keys - Add Image URLs_markdown_instruction: "# Adding Image URLs\r\n\r\nWe're + ready to start improving the \"My Favorite Things\" app. \r\n\r\nWe'll do + this in two steps:\r\n1. We will change it from scrolling text to scrolling + images.\r\n2. We will add key events to scroll with the keyboard.\r\n\r\n**Step + 1:**\r\n* The default values in your array should be image URLs.\r\n* The + large **text area** needs to be changed to an **image**.\r\n* Instead of **setting + the text**, you'll now be using `setImageURL` to set the URL of the image.\r\n\r\n# + Do This:\r\n**NOTE: We've re-loaded the code from the \"My Favorite Things\" + App you wrote in the previous lesson.** (If you want to refer to code you + just wrote, you can go back to look at it.)\r\n\r\n* **Set the default values** + in your array to be image URLs. (You might need to take a minute to go collect + a few if you didn't in preparation for this lesson.)\r\n* In Design Mode + **delete the text area** and replace it with an **image**. Make sure your + image has a descriptive and meaningful ID.\r\n* Inside your function that + updates the display **replace `setText` with `setImageURL`**. Make sure you + reference your new image element **by its correct ID**.<br>\r\n<img src=\"https://images.code.org/9f7f4aeeb9b1a84ae781043602166865-image-1447337890448.gif\" + style=\"width: 350px\">\r\n* ** Test your app** to confirm that it's now + showing the images in your array." + CSPU5_U3 - Keys - Buttons and Keys_markdown_instruction: "# Buttons and Keys\r\n\r\nWe + now know how to respond to key events, but often we want the user to be able + to **do the same thing with the app in multiple ways**. For example, we might + want the app to exhibit the same behavior if the user clicks a button on the + screen or a key on the keyboard. (This is how so-called \"keyboard shortcuts\" + work.)\r\n\r\nIn the program you're about to see, we've provided event handlers + for some buttons on the screen. You're going to **create identical functionality** + for the key events.\r\n\r\n# Do This:\r\n\r\n* **Add conditional statements + inside the `keydown` event handler** to check for when the **up and down arrows** + are pressed.\r\n<img src=\"https://images.code.org/0e0fe80c821c6a3171ec3a272c42325c-image-1447253300861.gif\" + style=\"width: 350px\">\r\n\r\n* ** Copy the code for the `upImage` button**, + and paste into the up arrow `if` statement.\r\n![](https://images.code.org/ad56005d74736c7c9aa8bedf68529c0e-image-1448300088636.gif)\r\n\r\n* + ** Copy the code for the down button**, and paste it into the down arrow `if` + statement.\r\n\r\n* Confirm your app **responds to key events** by running + it. For example, clicking the image of the up arrow in the app should do + the same thing as hitting the up arrow on the keyboard.\r\n\r\n" + CSPU5_U3 - Keys - Demo App_markdown_instruction: "# Making our App an Image + Scroller\r\n\r\nOver the course of this lesson we are going to be working + towards improving our \"My Favorite Things\" app to add some new features. + Our improved app will be able to:\r\n\r\n* Respond to **key events**.\r\n* + **Display images** by storing their URLs.\r\n\r\nWe'll call this new kind + of app an **image scroller** but feel free to call it anything you like.\r\n\r\n# + Do This:\r\n\r\n* Close these instructions.\r\n* **Experiment with the improved + \"My Favorite Things\" app** to understand the new features we'll be adding. \r\n* + Make sure you try clicking the **left and right arrow keys!**\r\n\r\nOnce + you think you've experimented enough, continue on to the next level." + CSPU5_U3 - Keys - Final Image Scroller_markdown_instruction: "# Final Image + Scroller\r\n\r\nYou're now ready to add key event functionality to your app! + As you are doing so, keep an eye out for places where you need to **refactor** + old code in order to prevent redundancy. **Create functions** that carry out + repeated tasks and make other changes to keep your code **readable and consistent**. + \r\n\r\nIf you want a reminder of how key events work, you can always go back + to the example from earlier in this lesson. You will need to add `if` statements + to check for which keys were pressed, just as before.\r\n\r\n# Do This:\r\n\r\n* + Add the ability to respond to **key events** to your app.\r\n\r\n* **Refactor + your old code** to remove redundant portions.\r\n\r\n* Keeping adding to your + program. What other features do you want to include?" + CSPU5_U3 - Keys - Functions_markdown_instruction: "# Refactoring Code\r\n\r\nOn + the last level, we copied a few lines of code to a different part of our program. + **Hopefully warning bells went off in your head!** Any time you are copying + portions of code from one area of your program to another, it's a good indication + that you should write a function to capture that behavior in one place. \r\n\r\nWhen + you add new features to your code **you will often create redundancies**. + To keep your code readable and consistent, you may need to rewrite old pieces + of code. This process of restructuring existing code without changing its + external behavior is called **refactoring**. It is an important process when + developing software that improves code readability and reduces complexity. + As a result, code is much easier to maintain.\r\n\r\n# Do This:\r\n\r\n* **Create + a function called `doUpArrow`**. \r\n* Move the code from the `upArrow` event + handler to the function.\r\n* **Call `doUpArrow`** from both your button and + key event handlers. (The animation below shows the steps above.)\r\n* Repeat + the same process for the down arrow / button by creating a function called + `doDownArrow`.\r\n* Once you have **removed these redundancies from your code** + test your app to make sure it still works!\r\n\r\n![](https://images.code.org/f47a98a8c9ca169848c682b3e61293cd-image-1448300634062.gif)" + CSPU5_U3 - Keys - Key Up and Down_markdown_instruction: "# Using *keyup* and + *keydown*\r\n\r\nOn the last level, we played with the `keypress` event. Let's + take a look at some of the other key events. \r\n\r\nYou are going to get + the chance to play with `keyup` and `keydown` in this level. **Pay attention + to the different values of `event.key` for `keydown` and `keypress`. **\r\n\r\n# + Do This:\r\n\r\n* Switch to the event type to `keydown` or `keyup`. \r\n\r\n<img + src=\"https://images.code.org/fa91b1a9e3240eb65ff75b381e76ce69-image-1447213909054.gif\" + style=\"width: 350px\">\r\n\r\n* Try out the event.\r\n\t* Press and hold + a key\r\n * Try the arrow keys\r\n * Shift\r\n * Option\r\n * + Alt\r\n * Others" + CSPU5_U3 - Keys - Multiple Keys_markdown_instruction: "# Multiple Keys\r\n\r\nIf + you want your program to respond differently to a couple different keys, you + will need to use chained conditional statements (`if` and `else-if`). \r\n\r\nLet's + set up the program to **play a different sound for the down key.**\r\n\r\n# + Do This:\r\n**We've added another sound** to the app, but it's just sitting + at the top of the code.\r\n\r\n* Add an `else-if` statement to check if the + **down arrow** was pressed.\r\n\r\n<img src=\"https://images.code.org/996914e436cca050f62d5b851899eda9-image-1447215275417.gif\" + style=\"width: 350px\">\r\n\r\n* Move the `playSound` command from the top + of the program inside the `else-if`. (Notice that in the example, we switch + to block mode to move this line because it's easier to move blocks around + that way. You can just copy/paste the text too.)\r\n\r\n<img src=\"https://images.code.org/42b2df84b4cd98267068592218ac96ed-image-1447215267891.gif\" + style=\"width: 350px\">\r\n\r\n* **Test the program:** it should play one + sound when the **up** arrow is pressed and a different sound if the **down** + arrow is pressed. It shouldn't make any sound if any other keys are pressed. + " + CSPU5_U3 - Loops - Complex Condition_markdown_instruction: "# Expressing Stopping + Conditions: \"Until Loops\"\r\nIt is often more natural to think about looping + in terms of when the loop should end rather than when it should continue. + For example you might say \"keep going down the road until you see the gas + station\" or \"keep calling until you get through to someone.\" You might + think of these as \"until loops\" rather than \"while loops,\" since we want + the loop to continue **until a condition is true rather than while a condition + is true**.\r\n\r\n**There is no \"until loop\" in JavaScript** but it is actually + quite easy to translate \"until loops\" into `while` loops so that you can + use them in programs. An \"until loop\" runs *until* a condition is true, + as opposed to a while loop which runs *as long as* a condition is true. That + means an until loop is the logical inverse of a while loop - it runs as long + as the **condition is false**. The table below shows how you can use the **NOT** + ( `!` ) operator to translate stopping conditions into `while` loop conditions.\r\n\r\n| + Expressed as Stopping | Expressed as Until Loop | Expressed as While Loop + |\r\n| --- | --- | --- |\r\n| **Stop** once you reach the gas station | Keep + going **until** you reach the gas station | Keep going **while** you have + **NOT** reached the gas station|\r\n| **Stop** calling when you get through + to someone | Keep calling **until** you get through to someone | Keep calling + **while** you have **NOT** gotten through to someone|\r\n| **Stop** when `x + == y` | `until(x == y){...` | `while(!(x == y)){...`|\r\n<br>\r\nNote how + we can use the **NOT** operation to find the **logical inverse** (or opposite) + of the condition from our \"until loop\" to create a `while` loop. Let's + do a little practice of that now.\r\n\r\n# Do This:\r\n\r\n**Starter code** + is provided that repeatedly rolls two dice and writes their values to the + screen. **Careful: ** before you edit this code it creates an infinite loop.\r\n\r\n* + Use the technique above to **modify this code** so that the loop **stops when + both dice are 5 or greater**.\r\n* **Try it out and experiment.** You should + exit the loop the first time both dice have values greater than or equal to + 5 displayed.\r\n\r\n![](https://images.code.org/076fb8e95fabc55e8ee45e31e51ca2d5-image-1448925611863.19.59 + PM.png)" + CSPU5_U3 - Loops - 1_markdown_instruction: "# *while* Loops\r\n\r\n<img src=\"https://images.code.org/bfb82e4caecc3ad1338177e05064ef72-image-1446669721477.41.28 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\n **The `while` loop + uses a boolean condition to repeatedly run a block of code.** It checks the + expression, and if it is true it runs the block of code contained within it. + This process of checking the condition and running the block of code is repeated + as long as the boolean condition remains true. **Once the boolean expression + becomes false it will stop.**\r\n\r\nWe are going to start exploring a `while` + loop by **modifying the condition on which a `while` loop runs and using `console.log` + to ensure it is correctly evaluating its condition**.\r\n\r\n# Do This:\r\n\r\n* + **Starter code** is provided which creates a `while` loop that repeatedly + moves the turtle around the screen.\r\n* **Add a `console.log` command** inside + the loop after `num` is assigned a random number. This way you can see the + value the loop is based on.\r\n![](https://images.code.org/1da444fd5c6533ad1cc0de3c593bf92d-image-1446825127341.gif)\r\n* + **Run the program a couple times** and look at the results.\r\n* **Change + the condition for the `while` loop** to check if the variable **`num` is less + than 90**. Your output might look like the example below.\r\n\r\n![](https://images.code.org/97df98c23c0c03a7ce480108a92627a5-image-1448296906193.41.17 + AM.png)" + CSPU5_U3 - Loops - 10_markdown_instruction: "# Writing a Loop From English\r\n\r\nAlright + it’s your turn. Can you translate the English into code? This problem also + involves an \"until loop\" problem.\r\n# Do This:\r\n\r\nTake this statement + in English and translate it into code: \r\n\r\n**“Write a program that simulates + the rolling of two dice. Keep rolling the dice UNTIL the sum of the dice is + either a 7 OR an 11.\"** Your program should display the results of each + roll. \r\n\r\n**NOTE**: this one is a *little* tricky. Hint: In English + we sometimes say \"or\" when in cold hard logic we mean \"and\".\r\n\r\nHere + is a sample output:\r\n\r\n![](https://images.code.org/706279a3c167d8c76068a7ded5146eed-image-1456434365077.png)" + CSPU5_U3 - Loops - 11_markdown_instruction: "# Debugging: Complex Logic\r\n\r\nIn + this challenge you need to find and fix a bug in a program that simulates + rolling one die. \r\n\r\nThe given code accidentally loops infinitely, so + something must be wrong with the condition. Can you figure out how to fix + it?\r\n\r\n# Do This:\r\n\r\n* **Fix the condition** so that it keeps rolling + the die as long as the value is **not a 2 or a 3.**\r\n\r\n* **Hint:** Think + about other ways you can express this idea in English. \r\n\r\n" + CSPU5_U3 - Loops - 12_markdown_instruction: "# Repeat Specific Number of Times\r\n\r\nInstead + of writing code that makes the loop run a random number of times, we can control + the `while` loop by changing the variable used in the boolean expression differently. + Let’s try just printing a string 5 times.\r\n\r\n# Do This:\r\n\r\n* **Starter + Code:** Right now the code prints a string \"Hi\" twice.\r\n* **Change the + code** so that it prints the string \"Hi\" 5 times.\r\n* **Notice** how `count` + is being re-assigned each time through the loop." + CSPU5_U3 - Loops - 14_markdown_instruction: "# Defensive Loop Conditions\r\n\r\nTake + a look at the starting code. Instead of counting by 3's we had decided to + count by 4's. \r\n\r\nBut this will run us into a problem. Can you see why?\r\n\r\nWe + wanted to stop counting at 30, but when you count by 4 you will actually never + hit 30. It would go... 24, 28, 32, 36... What we really want to do is stop + when the number is **greater than 30**. This is an important defensive programming + strategy. Make the condition catch more cases than you think you need so that + if for some reason something does not go exactly as you planned it will hit + the stop condition and not go infinitely.\r\n\r\n\r\n# Do This:\r\n\r\n* **Change + the loop condition** to prevent the infinite loop and stop counting once the + count is past 30." + CSPU5_U3 - Loops - 15_markdown_instruction: "# Using an *if* Statement In a + Loop\r\n\r\nA common thing to do is to use variables to keep track of some + sort of count. When used in a loop we count things very quickly.\r\n\r\n**Scenario:**\r\nIf + you roll a pair of dice, rolling a 12 (two sixes) is rare. How rare? If + you were to roll a pair of dice 1,000 times, on average, how many times would + it come up as 12?\r\n\r\nTo figure this out, we could write code to run an + experiment. It would go something like this:\r\n* Make a loop that simulates + rolling a pair of dice 1,000 times.\r\n* Inside the loop, add an `if` statement: + **if die1 + die2 == 12, then add 1 to a counter**.\r\n* After the loop, display + the result.\r\n\r\n# Do This:\r\nThe **starter code** sets up the whole experiment + for you, except it doesn't count the number of 12's rolled - that's your + job.\r\n\r\n* **Run the code** to see what the experiment does.\r\n\r\n* ** + Add an `if` statement inside the loop** to check if the sum of the dice is + equal to 12, and add 1 to `twelveCount`.\r\n\r\n* Once the loop has completed, + **display the number of times the sum was 12.**\r\n\r\n**Note:** If you remove + (or comment out) the `console.log` statement that displays every roll of the + dice, the experiment will speed up A LOT! You could do tens of thousands + of dice rolls in a matter of seconds." + CSPU5_U3 - Loops - 2_markdown_instruction: "# Infinite *while* Loops\r\n\r\n`while` + loops run until their condition becomes false, which raises an interesting + question. **What happens if the condition never becomes false**? In these + cases the program enters what is called an **infinite loop** over the commands + in the `while` loop, and it never reaches the rest of your program. **We normally + avoid infinite loops in our programs**, but let's try it out to see what + happens.\r\n\r\n# Do This:\r\n\r\n* **Starter code** is provided which creates + a `while` loop to move the turtle around the screen.\r\n* **Change the `while` + loop condition to something that will always be true.** The easiest way to + do this is to change 50 to be a number that randomNumber will never generate + such as 200. \r\n* **Run the program.** Notice that it will never stop running. + You may even get an error from your browser.\r\n* **Hit reset to stop it.** + Your computer may actually stop running as you expect if you let an infinite + loop run for too long. **It's possible you may even need to close the browser + window and reload the page. If you hit reset early enough you can usually + avoid this problem.**\r\n* **Find a condition using `<` or `>` that will also + cause an infinite loop.**" + CSPU5_U3 - Loops - 3_markdown_instruction: "# Changing *if* to *while*\r\n\r\n** + How many times would we have to roll a die before it comes up as a 6?** In + the program you're about to see, we **simulate rolling a die (generating + a random number between 1 and 6)** in order to answer this question.\r\n\r\n# + Do This:\r\n\r\n** Starter code** is provided which re-rolls a die once if + the first roll is not a 6. \r\n* **Change the `if` statement to a `while` + loop** so the program will keep rolling the die **while the current roll is + not a 6.** \r\n\t* **Hint:** The easiest way to do this is to change the text + from `if` to `while`.\r\n<img src=\"https://images.code.org/50b97e8858bf5ebf82eb1d358f875854-image-1446739013775.gif\" + style=\"width: 350px; border: solid 1px black \">\r\n* Run the program to + test out the change.\r\n" + CSPU5_U3 - Loops - 4_markdown_instruction: "# Debug Commands\r\n\r\n<img src=\"https://images.code.org/c6322845b96b70c9083a6c62736048e5-image-1446739268136.00.34 + AM.png\" style=\"width: 200px; float: right\">\r\n\r\nCheck out the new **Debug + Commands toolbox** that has appeared next to the Debug Console! These powerful + tools allow us to **pause a program at a certain point** while it’s running + and then execute lines one at a time. \r\n\r\nUsing these tools we can investigate + the state of variables and other elements of the program at any point, mid-execution. + This makes it much easier to see what’s happening while the programming is + actually running!\r\n\r\nIn order to use the debug commands, you first have + to indicate which line you want the program to pause at. This is called adding + a “breakpoint” (see animation below).\r\n\r\n# Do This:\r\n\r\n* **Add a breakpoint** + on the line where the `while` loop starts. (**Just click the line number.**)\r\n* + **Use the <img src=\"https://images.code.org/bd8f1a67242e64e6b3740eac79f881e8-image-1446748421345.33.09 + PM.png\" style=\"width: 75px\"> button** to execute each line one at a time.\r\n* + Each time you hit the breakpoint, **use the console to check value of `num`**. + \r\n* **NOTE:** If you hit <img src=\"https://images.code.org/6c4712da58e32dae2d04c52d9964fca9-image-1446741498097.37.48 + AM.png\" style=\"width: 75px\"> it will \"continue\" executing the program + normally, unless of course it hits another breakpoint. \r\n\r\n![](https://images.code.org/68f8e185914c8cc127aa9573ae37f687-image-1446835628580.gif)" + CSPU5_U3 - Loops - 5_markdown_instruction: "# Update Condition\r\n\r\nIn order + for a `while` loop to stop at some point, the code inside the loop **must + change something about the state of the program** - usually the value of a + variable - so that eventually the boolean expression becomes false. Otherwise + you'd have an infinite loop!\r\n\r\n# Do This:\r\n**Starter Code:** The starter + code runs an infinite loop. \r\n* **Run the code** to see the problem in action. + Remember to hit the reset button to stop the infinite loop.\r\n* **Add code + inside the `while` loop** which will **update the variable `num` so that the + condition will eventually become false.**\r\n* **TIP:** you can use the debugging + tools if you think they would be helpful." + CSPU5_U3 - Loops - 6_markdown_instruction: "# Starting Condition\r\n\r\nWe + have seen that loops can run infinitely. On the last level we saw that there + is also the **chance that the loop never runs at all!** If the condition of + the `while` loop starts out false then the loop will never run.\r\n\r\nWe + fixed this problem in the last exercise by displaying the value of `num` in + two places: before the loop and in the loop. Duplicating code is generally + a bad strategy, so the question is: can we be a little clever and get into + the loop without missing any values? The answer is yes.\r\n\r\n**The solution** + is to initialize the values used in our boolean expression so that we are + **certain** it will evaluate to true the first time the loop checks it. **For + example, if your loop condition is: `while (num != 6)` you could initialize + `num` to anything other than 6 and you'd know that you get into the loop**. \r\n\r\nIf + you use this technique though...\r\n1. You need to make sure you set the value + of `num` right away inside the loop.\r\n2. You probably want to use a nonsense + value like -1, so that if you ever see that displayed it will be obvious something + is wrong and be easier to debug.\r\n\r\n# Do This:\r\n\r\n* **Starter code** + is provided which creates a `while` loop that never runs.\r\n* **Run the program** + once to see that the loop is never entered.\r\n* **Fix** the problem by changing + the initial value of `num` to a nonsense value such as -1." + CSPU5_U3 - Loops - 7_markdown_instruction: "# Printing After Setting Value\r\n\r\nWe + started trying to remove the duplicate code we had on the last level by initializing + a variable to a nonsense, or \"dummy,\" value that would still ensure we entered + the loop. \r\n\r\nIn the code provided, not every number is going to display. + However, this time we want to try **not to add code** to fix the problem, + since duplicate code is inefficient. \r\n\r\n# Do This:\r\n\r\n* **Starter + Code:** The code is completely functional except that it does not print one + of the numbers it's supposed to. In addition we don't want it to print the + dummy variable of -1.** Hint: ** What should be the last number that prints + every time this program runs?\r\n\r\n* Run the program to see the behavior.\r\n\r\n* + Fix the code so that it prints all the values of `num`. **Hint:** You don't + need to add any code. Just switch the order of the code you have now!" + CSPU5_U3 - Loops - 8_markdown_instruction: "# Printing Before the Loop Starts\r\n\r\nSometimes + our code will be doing the right thing but we won't be able to tell because + of the way we are printing values. We need to make sure we print all the values + we are interested in. \r\n\r\nThis program *should* write all the values of + `num` to the screen as it runs; however it misses one - the first one generated. \r\n\r\n# + Do This:\r\n\r\n* **Run the program** a few times and notice that sometimes + it just prints \"Done.\" and nothing else, even though a number was generated. + The first value of `num` never gets displayed.\r\n* **Add a `write` statement** + before the loop to print the first number. \r\n* **Hint:** Look at the two + times `num` is assigned a value. Which one isn't being displayed? " + CSPU5_U3 - Loops - 9_markdown_instruction: "# Boolean Operators in *while* + Loops\r\n\r\nWe can create compound boolean expressions to control our `while` + loops just like our `if` statements. Let's try using boolean operators in + our `while` loop condition.\r\n\r\n# Do This:\r\n\r\n* Right now this code + rolls two dice as long as either one of them is less than 3. **Modify the + condition so that it keeps rolling as long as *both* are less than 3.**\r\n\r\n* + **HINT:** To say that both dice are less than 3 the boolean expression must + say: if die1 less-than 3 AND die2 less-than 3...\r\n" + CSPU5_U3 - Loops - Minus Minus_markdown_instruction: "# *++* Has a Friend! Introducing + *--*\r\n\r\nAs you may have guessed, just as we can write `count = count + + 1` as `count++` we can also write `count = count - 1` as `count--`.\r\n\r\nLet’s + write a program that counts **down** from 10 down to 1. \r\n\r\n# Do This:\r\n\r\n* + **Starter Code: ** The current program counts **up** from 1 to 10. \r\n\r\n* + **Change the code to use `count--` to count *down* from 10 to 1.** You will + need to:\r\n\t* Change the looping condition.\r\n * Change `count++` to + `count--`.\r\n * Change the initial value assigned to `count`.\r\n" + CSPU5_U3 - Loops - Plus Plus_markdown_instruction: "# *++* Operator\r\n\r\nAs + programmers we are always looking for more concise ways to write code. It + is so common to add 1 to a variable such as in `count = count + 1` that there + is actually a shorthand for it. \r\n\r\n# Introducing the *++* Operator\r\n\r\nYou + can write `count++` to add 1 to `count`. `count++` does the exact same thing + as `count = count + 1`! \r\n\r\nIn fact the computer turns `count++` into + `count = count + 1` behind the scenes - it really is just a convenient shorthand.\r\n\r\n**Note:** + This is more of a programmer style choice so if you want to write your code + using `count = count + 1` instead there is nothing wrong with that!\r\n\r\n# + Do This:\r\n\r\n* Change the code to use `count++` instead of `count = count + + 1`. (You'll need to be in text mode to do this.)\r\n\r\n** Misconception + Alert:** You don't need to write `count = count++` - the computer is doing + the assignment for you." + CSPU5_U3 - Loops - Typing in Console_markdown_instruction: "# Debug Console: + Variable Values\r\n\r\nUp until now, if we wanted to find out the value of + a variable at some point in the execution of a program, we've used `console.log`. + That is still going to be a great strategy but **the Debug Console can do + even more for us!**\r\n\r\n**Check this out:** We can check the value of a + variable in real time (as our program executes) by typing its name into the + prompt within the Debug Console and hitting \"enter\". **This is another powerful + tool for debugging your programs.** \r\n\r\n![](https://images.code.org/7e7ff7aa041814cfcd69a1c9a028c439-image-1446826780896.gif)\r\n\r\n# + Do This:\r\n\r\n* **Run the program.**\r\n\r\n* Use the Debug Console to **check + the ending value of `num`**. You can do this by typing num in the Debug Console + and hitting enter!" + CSPU5_U3 - Loops - minus = operator_markdown_instruction: "# Try Out the *-=* + Operator\r\n\r\nThe `-=` operator works almost identically to `+=`, but instead + it subtracts the value provided from the variable. Let's use this operator + to **create a loop that counts down from 30 by 3's**.\r\n\r\n# Do This:\r\n\r\n* + **Change the code to use `-=`** to count from *down* from 30 to 0 by 3's." + CSPU5_U3 - Loops - plus and minus = operator_markdown_instruction: "# Introducing + *+=* and *-=* Operators\r\n\r\nSometimes you want to add or subtract something + *other than 1* from the current value of a variable. If you wanted to add + or subtract 3 for example, such as: `count = count + 3` or `count = count + - 3`, `++` and `--` wouldn’t help. \r\n\r\nIt turns out this is pretty common + as well so there is actually a shorthand version of `count = count + 3`. \r\n\r\n**Introducing + `+=` and `-=`**!\r\n\r\nWe can use the `+=` or `-=` operator to add or subtract + any value we want to the current value of a variable. \r\n\r\nSo, the shorthand + versions of `count = count + 3` and `count = count - 3` would be:\r\n * `count + += 3` \r\n * `count -= 3`\r\n\r\n**Notice** that these 3 statements: `count + = count + 1`, `count++`, and `count += 1` all do **exactly** the same thing!\r\n\r\nWhich + one you use as a programmer is your choice, and in the future you can use + either version, but try out the new operator here.\r\n\r\n# Do This:\r\n\r\n* + **Change the code to use `count += 3`** instead of `count = count + 3` so + the program will still count up by 3. (You'll need to be in text mode to + do this.) \r\n\r\n(You'll get to try out `-=` on the next level.)" + CSPU5_U3 - Loops And Arrays - Add 5_markdown_instruction: "# Updating Values + in an Array with a *for* Loop\r\n\r\nThe `for` loop you set up on the last + level is actually so common that we will rarely deviate from this `for` loop + setup.\r\n\r\n<img src=\"https://images.code.org/fba4d95636869c1c1c1a539fe81ded72-image-1447346793054.45.50 + AM.png\">\r\n\r\nThis `for` loop basically means **\"for every possible index + in `myArray`...\"** and we use it as a basic building block for processing + arrays. Common array-processing techniques like searching for a value, updating + all values, or calculating simple stats on an array will all be completed + using a `for` loop written with the syntax above.\r\n\r\nIn fact, we're going + to see that happen right now as we **use a `for` loop to add 5 to every value + in an array**.\r\n\r\n# Do This:\r\n**Starter code** has been provided that + creates an array of random values. You are also given a `for` loop that loops + over every index in the array.\r\n\r\n* Add code inside the loop to **add + 5 to the value at every location in the array**. \r\n\t* ** Remember: ** `myArray[i]` + refers to the element in the array at the current value of `i`.\r\n* Confirm + your code works by **displaying the values in your array before and after + your loop**. Below is a sample result. Notice how, after the array has been + processed, all of the values are 5 greater than the originals.\r\n\r\n![](https://images.code.org/aaf36ac93098ef7f43fdda04243d17ad-image-1447792214666.29.41 + PM.png)" + CSPU5_U3 - Loops And Arrays - Counting Times_markdown_instruction: "# Counting + Occurrences of a Value\r\n\r\nInstead of displaying a true/false value for + *every* item in the list, let's compute one value and display it. A common + thing to want to do is **count** the number of times a value occurs. We can + do this with a very small change to the code we've already got. \r\n\r\n# + Do This:\r\n**Starter Code** is similar to past levels. We've also created + a variable called `fiveCount`.\r\n\r\n* ** Add an `if` statement** inside + the `for` loop to **increment `fiveCount` if the value is equal to 5. **\r\n + (Note: this will be exactly the same as the `if` statement you wrote in the + previous level. Just giving you more practice).\r\n\r\n* **Run and re-run + your code** to make sure that it's accurately counting the number of 5's + in the array. Since the array is getting a random set of values every time + you run the program, you might have to run it a bunch of times to thoroughly + test it. Make sure you get it to run at least once when no 5's appear in + the array.\r\n\r\n* Finally, if you'd like to, **change the first loop in + the program to add 100 items to the array** instead of 10. Your code should + still work to count the number of 5's, no matter how big the original array + is!" + CSPU5_U3 - Loops And Arrays - Divid by 2_markdown_instruction: "# Divide by + 2\r\n\r\nIn the last exercise, you updated every element in an array using + a `for` loop. Let's get a little bit more practice with the pattern you used + in the last exercise, this time creating the loop yourself.\r\n\r\n# Do This:\r\n**Starter + code** is provided which creates an array of random values.\r\n\r\n* Create + a `for` loop that **iterates over every index in the array**.\r\n\r\n* Within + your loop, add code that **divides each value in the array by 2**.\r\n\r\n* + Use the provided `console.log` statements to **confirm your program runs as + expected**. Below is an example of the expected outcome.\r\n![](https://images.code.org/04b09b795c30313c67b2242f1773b2f6-image-1447795598583.26.21 + PM.png)" + CSPU5_U3 - Loops And Arrays - Find Min_markdown_instruction: "# Reusing a Function + Pattern: Find Minimum\r\n\r\n**Nice work! You've just written a function + that implements an algorithm to process an array!** If you feel comfortable + with the basic pattern you used to create this function, you can quickly create + functions for many other useful algorithms that work on arrays.\r\n\r\n**Basic + Function Pattern**\r\n\r\n* Create a **function that accepts an array** as + input.\r\n* **Create a \"flag\" variable** and set its default value before + looping through the array.\r\n* Loop through your array with a `for` loop + that **visits every index in the array**.\r\n* **Update your flag** as necessary + with every iteration of your loop.\r\n* **Display your flag** at the end of + the loop.\r\n\r\nLet's use this pattern to **write a function that finds + and displays the smallest value in an array**.\r\n\r\nInstead of using a true/false + flag to indicate whether we found a value, **we'll use a variable to keep + track of the smallest value we've seen in the array so far**.\r\n\r\n# Do + This:\r\n\r\n**Starter code** has been provided which outlines and calls `findMinVal` + with different inputs. Your job will be to finish writing the function.\r\n\r\n* + Before programming, try to **develop an algorithm that you could use to find + the minimum value in an array**. Use the pattern outlined above as a guide.\r\n* + **Write code** in the places indicated with comments to complete the function. \r\n\t* + You'll want to use the `minVal` variable to keep track of the smallest value + you've found so far.\r\n * You'll need to **write an `if` statement** + that checks whether the current value in the array is less than `minVal`. + If it is, then update the smallest value. \r\n* **Run the code** to ensure + it is working as you intend.\r\n\r\n<details><summary><strong>HINT: pseudocode</strong> + [click to expand]</summary>\r\n<p>\r\nHere is some pseduocode that you should + be able to implement.\r\n</p>\r\n<pre>\r\nminVal = first value in array \r\nfor + EACH value IN array\r\n if value < minVal\r\n minVal = value\r\n\r\ndisplay(minVal)\r\n</pre>\r\n</details>\r\n\r\n\r\n![](https://images.code.org/e6abdc34c653e4bb0885ffabcf897fc5-image-1447877822696.16.03 + PM.png)" + CSPU5_U3 - Loops And Arrays - General Search Param_markdown_instruction: "# + General Search\r\n\r\nIn order to make a general search function, we should + be able to **search for any value, not just 5**. We can do this by making + the value to search for a parameter as well.\r\n\r\n# Do This:\r\n\r\n* **Add + a second parameter** to your `search` function to represent the item to search + for. This example uses the name `searchValue`.\r\n\r\n* **Update the code + inside the function to check for `searchValue` instead of 5.** \r\n\r\n* **Call + your search function** to search for different values inside of each array.\r\n\r\n* + The `console.log` statement **is now inaccurate**. Change it to say \"Array + has searchValue: \" followed by the value in flag.\r\n\r\n(These steps are + shown in the code animation below.)\r\n\r\n![](https://images.code.org/b71a0bd1cf725d58ae76836a6422ebeb-image-1447695946760.gif)" + CSPU5_U3 - Loops And Arrays - Intro For Loop_markdown_instruction: "# *for* + Loop\r\n\r\nIt's very common to want to repeat a set of commands a particular + number of times. Recently, we have been using the `while` loop to do this + by creating a counting variable, setting the boolean expression, and incrementing + the value of the counter by 1 each time. We've also used the `for` loop before, + and we'll explain it more in-depth now. The `for` loop was created to wrap + all of those components related to counting loops into a single line of code.\r\n\r\n<img + src=\"https://images.code.org/b93a044fc07cb4bbabb95b43132a005b-image-1447342829632.png\" + style=\"width: 450px\">\r\n\r\n<img src=\"https://images.code.org/d0d8f34d0f4aabaf66084ceac282448e-image-1447343652405.png\" + style=\"width: 450px\">\r\n\r\nProgrammers would typically read a loop `for + (var i = 0; i < 10; i++)` out like this: <br>\r\n**\"for variable i starting + at 0, while i is less than 10, i plus plus (or increment i by 1)\"**\r\n\r\nNotice + that in reading a `for` loop we still use the word \"while\".\r\n\r\nYou may + notice that when you drag a `for` loop out from the toolbox that we've set + it up for you with `i` as the variable. \r\n\r\n<details> \r\n<summary>**Why + is `i` the variable?** [click to expand]</summary> \r\n\r\nUsing the single + character `i` as the variable in a `for` loop has become a convention in programming + for a variety of reasons. One reason is that `for` loops are often used when + processing arrays - **you can think of `i` as shorthand for index. ** But + there is no reason why you have to use `i` if you don't want to. It's just + a variable. \r\n</details>\r\n\r\n# Do This:\r\n\r\n* Drag out the `for` + loop.\r\n\r\n* Insert a `console.log` statement inside the `for` loop that + displays `i`.\r\n![](https://images.code.org/2a81206296dc693463d7b147f2f93dcb-image-1447446254447.gif)\r\n\r\n* + Try changing:\r\n\t* The condition to stop the loop (make it run longer).\r\n * + The amount you change `i` by each time (try changing `i++` to something like + `i += 5`).\r\n * The starting value of `i`.\r\n\r\n" + CSPU5_U3 - Loops And Arrays - Linear Search_markdown_instruction: "# Algorithms + and General-Purpose Functions\r\n\r\nOver the next several exercises we will + be **creating a general-purpose function to determine if a value is contained + within an array**. Over the course of these exercises, keep an eye out for + the general pattern we are using, because you'll get to use it again to create + functions of your own.\r\n\r\nTo begin, we'll start simple. We'll write + code that **checks whether an array contains a specific value**. At every + index, your program should display \"true\" if the value at that index is + a 5 and \"false\" otherwise.\r\n\r\n# Do This:\r\nThe **starter code** is + similar to past levels, but you'll notice that we use a loop to construct + `myArray` rather than appending items one line at a time. You are also given + the `for` loop you will use.\r\n\r\n* Add an `if` statement inside the `for` + loop to check if the value of the array at the current index is 5. \r\n * + If the value is equal to 5, write **true** to the console. Otherwise write + **false** to the console.\r\n* **Test your code** to make sure it is working + as you intend. An example output is below.\r\n\r\n![](https://images.code.org/a64c3be0a23e25bef67494bdfeb61415-image-1447879494916.44.45 + PM.png)" + CSPU5_U3 - Loops And Arrays - Loop Array If_markdown_instruction: "# *for* + Loop with *if*\r\n\r\nSometimes we want to find values in an array that meet + certain conditions. We can add an **`if` statement inside the `for` loop** + to individually check every value within the array. To practice this, we will + create a `for` loop that will **display every value in the array greater than + 5**.\r\n\r\n# Do This:\r\n** Starter code** has been been provided that creates + an array of random values.\r\n\r\n* Add a `for` loop that references every + index in the array.\r\n\r\n* Add an `if` statement inside the `for` loop that + **displays every value in the array greater than 5** using `console.log`\r\n\t![](https://images.code.org/969077ff23232e410ce17520b0a71e1e-image-1447390972867.gif)\r\n \r\n* + **Note:** Because the original array is being constructed with random values + it's *possible* that it might not have any values greater than 5. Just run + the program a few times to make sure it works. An example of the possible + output is below.\r\n\r\n![](https://images.code.org/266e23afc3533ebd63b393b2ee8682d8-image-1447796380510.39.26 + PM.png)" + CSPU5_U3 - Loops And Arrays - Make it a Function - add list parameter_markdown_instruction: "# + Generalize *search* by Making It Into a Function - Part 2\r\n\r\nRight now, + our function just searches for a 5 in a global array called `testArray`. We + would like to be able to **use this function to search through any array**, + so we will be adding a parameter to allow us to specify which array should + be searched.\r\n\r\n# Do This:\r\n\r\n* **Add a parameter to the `search` + function called `list`**.\r\n* **Modify the code inside the function** so + that it loops over `list` (the parameter) instead of `testArray` (the global + variable).\r\n* **Call your function** with each of the arrays provided at + the top of the program.\r\n\r\n(These steps are shown in the code animation + below.)\r\n\r\n![](https://images.code.org/af4cf7bd95c09f3e8e3548a3383c4a4e-image-1447693121377.gif)" + CSPU5_U3 - Loops And Arrays - Make it a Function_markdown_instruction: "# Generalize + *search* by Making It Into a Function\r\n\r\nYou've just written code to + search for a value in a list! If we could generalize this behavior, it might + be useful to us in the future - it's probably something that we want to do + over and over again. \r\n\r\nOver the next few levels, we'll build up a + very useful, general function for searching for *any* value in *any* list. But + we'll do it one step at a time...\r\n\r\n# Do This:\r\n\r\n**Note:** We've + provided **new starter code** that implements the pseudocode from the last + exercise. It also **creates two more arrays** that we'll be using later for + testing. For this level just worry about `testArray`. \r\n\r\n* **Run the + starter** code to verify that it works correctly.\r\n* **Create a new function**. + Name the function `search`.\r\n* **Move the code that checks for a 5 inside + the function.** **Note:** You must move the boolean variable inside the function + as well, or it won't reset each time you call the function!\r\n* **Call the + function** to make sure your code still works. The actual behavior will be + the same as when you ran it the first time. The difference now is that you're + calling a function to do it.\r\n\r\n(Steps are shown in code animation below.)\r\n\r\n![](https://images.code.org/dfad49ac35cd605410c52828716b712c-image-1447631609779.gif)" + CSPU5_U3 - Loops And Arrays - Print Array_markdown_instruction: "# Print an + Array with a *for* Loop\r\n\r\nAs you know, we can use variables as indexes + in an array. We can take advantage of this fact to create a `for` **loop + which visits every index in an array**.\r\n\r\n![](https://images.code.org/5aeb9986535424b1d737b8221685196f-image-1447446416081.26.01 + PM.png)\r\n\r\nIn this `for` loop, the `i` eventually gets set to every possible + index in the array. You are going to use a loop of this kind to display all + the values in an array.\r\n\r\n# Do This:\r\n**Starter code** is provided + that adds several random values to an array.\r\n\r\n* Create a `for` loop + that uses the syntax shown below (and above) to **iterate through every index + in the array**.\r\n\t![](https://images.code.org/930b40b3e3f204605a0fd27fee9d8b8f-image-1447346008842.gif)\r\n \r\n* + Use `console.log` to **display the contents of the array at each index**.\r\n\t![](https://images.code.org/43431613ea0c045411499dd0e68e7feb-image-1447345996258.gif)\r\n \r\n* + Run the program to **confirm it is displaying all the values**.\r\n" + CSPU5_U3 - Loops And Arrays - Printing Single True_markdown_instruction: "# + Print a Single True/False Value\r\n\r\nSometimes we don't care about the + count and just want to know if the array contains a 5 or not. **Let's try + to display a single true/false indicating whether the list contains a 5.** + There are two cases to consider: \r\n\r\n1. The list **does not contain any + 5's**; you need to display **\"false\"**. \r\n2. The list **contains at + least one 5**; you need to display **\"true\"**.\r\n\r\n**HINT:** one way + to do this is to reference your counter variable `fiveCount` after the array + has been processed.\r\n\r\n# Do This:\r\n**We've pulled your code from the + previous level so you can continue to add to it**.\r\n\r\n* Add a **`console.log` + statement to display a single \"true\" or \"false\"** indicating whether there + is a 5 anywhere in the array.\r\n\r\n| Example output 1: One or more 5's + | Example output 2: No 5's |\r\n| --- | --- |\r\n|![](https://images.code.org/15ed45d471e9279a8739bad5f31c3a4d-image-1447452726753.06.31 + PM.png) | ![](https://images.code.org/ed19957449c6b68cb19326a6f430edec-image-1447452740979.06.46 + PM.png)|" + CSPU5_U3 - Loops And Arrays - Search with Boolean Var_markdown_instruction: "# + Using a Boolean Variable as a Flag\r\n\r\nWe are going to do a **challenge + that is similar to the last exercise** but, rather than counting the number + of 5's in the array, we're going to use a different **interesting programming + technique for processing arrays** that might prove useful to you in the future. + \r\n\r\n# Using a Boolean Flag\r\n\r\n<img src=\"https://images.code.org/756fcab9d5f48ace76eb5d300fcf58af-image-1447624065160.png\" + style=\"float: right; width: 250px\">\r\nThe technique is generally referred + to as **using a boolean \"flag.\"** To understand this idea, think about how + some mailboxes work: the flag starts down, and when a person wants to let + the mail carrier know there is something to pick up, she puts the flag up + to notify the mail carrier that there is outgoing mail in the box.\r\n\r\nWe + can use a variable to do something similar when programming. Rather than incrementing + a count every time we find a 5 in the array, we will use a variable that acts + like a **flag**. We will create a variable before the loop and assign it + `false` to start (flag is down). Then, as we process the array, if we find + a 5, set the variable to `true` (put the flag up). \r\n\r\nHere is some pseudocode:\r\n```\r\nvar + flag = FALSE\r\nFOR EACH item IN list\r\n IF (item EQUALS 5)\r\n flag + = TRUE\r\n \r\nDISPLAY (flag)\r\n```\r\nNotice that it doesn't matter + if we find more than one 5. It will just keep setting the flag to `true`. However, + if there are no 5's, the `if` statement in the loop will never execute, and + so the variable will remain the value it was initialized to, which was `false`.\r\n\r\n# + Do This:\r\n\r\n* **Implement the pseudocode above** in JavaScript. \r\n* + We've given you code that constructs an array of random values, and the standard + `for` loop for looping over an array.\r\n* The output will be no different + from the previous exercise, but you should still **confirm that your program + correctly identifies when a 5 is in the array.**\r\n\r\n| One or more 5's + | No 5's |\r\n| --- | --- |\r\n|![](https://images.code.org/15ed45d471e9279a8739bad5f31c3a4d-image-1447452726753.06.31 + PM.png) | ![](https://images.code.org/ed19957449c6b68cb19326a6f430edec-image-1447452740979.06.46 + PM.png)|\r\n\r\n" + CSPU5_U3 - Movie Bot - Multiple If Sequences_markdown_instruction: "# Adding + Rating to Keywords\r\n\r\nUp until now our movie suggestions have just been + based on genre. Let's now also look for keywords related to the movie rating + like \"G\", \"PG\", \"PG-13\", and \"R\" so we can give movie suggestions + based on both genre and rating.\r\n \r\n**Note: ** We've updated the flowchart + below (highlighted in yellow) to see the logic we are trying to add.\r\n\r\n**Note + 2: ** The logic of the program right now will yield some odd results - there + are some things you can type that will give 2 suggestions - this is expected, + for now. We are just taking a small step here. We'll refine the code again + in later levels.\r\n\r\n# Do This:\r\n\r\n* **Add another set of `if`, `else-if`, + and `else` statements** inside the question `if` statement to **check for + keywords for movie ratings (G, PG, PG-13, and R).**\r\n\r\n* **Hint:** When + checking for \"G\", \"PG\" and \"R\" you need to be a little clever. R and + G are letters that will show up in lots of words and PG will get confused + with PG-13. We want to check for \"g\" and \"r\" with spaces on either side. + So make sure to use `\" g \"` where there is a space on either side of g instead + of `\"g\"`. For \"pg\" you can just add a space after the pg to look for `\"pg + \"`\r\n\r\n* **Test out a couple sentences with your keywords** to make sure + the change worked.\r\n\r\n<img src=\"https://images.code.org/886713cfedf4802e174b68ed2eb36d4b-image-1455816199174.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/886713cfedf4802e174b68ed2eb36d4b-image-1455816199174.png\" + target=\"_blank\">Click to open in separate window.</a>" + CSPU5_U3 - Movie Bot - Nested Motivation_markdown_instruction: "# Checking + for a Question\r\n\r\nWe're going to start adding some \"intelligence\" to + our Movie Bot. Since we've added `includes` it can now tell if its keywords + appear anywhere in the input. As a result some inputs may be questions while + others might simply be statements. **We'd like the movie bot to respond differently + to questions and statements.**\r\n\r\nIn order to tell when the user is asking + a question **we will be checking whether the input includes a question mark + **.\r\n\r\n# Do This:\r\n\r\n* Add a separate statement to **check if the + input includes a \"?\"**. \r\n* If the input includes a question mark **print + \"That's a good question.\" before the recommendation.**\r\n* Otherwise print + **\"I only answer questions.\" before the recommendation.**\r\n* **Test out + a couple sentences with your keywords** to make sure the change worked.\r\n\r\n**Example + Input --->** | **Output**\r\n---|---\r\nWhat's the best action movie? | That's + a good question. The best action movie is any James Bond movie.\r\nI love + comedy | I only respond to questions. The best comedy movie is The Princess + Bride.\r\n<br>\r\n**Note:** Check out the flowchart below to see the logic + we are trying to change.\r\n\r\n<img src=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - Movie Bot - When Multiple If Statements_markdown_instruction: "# + Adding a Separate *if*\r\n\r\nIt's still the case that sometimes you want + to have two completely separate groups of `if` statements because there are + separate conditions you want to check and possibly have responses for both. + You don't always just keep adding to a giant `if` statement forever.\r\n\r\nIn + the Movie Bot demo you probably saw that if you type \"please\" and \"thank + you\" it adds something extra to the response (it says something like \"Thanks + for being polite!\"). Let's add this functionality to your movie bot as well. + \r\n\r\n**Note: ** Check out the flowchart below to see the logic we are trying + to add.\r\n\r\n# Do This:\r\n\r\n* ** Add an `if` and `else-if` statement + that checks for \"please\" and \"thank you\"**. \r\n\t* If the string includes + \"please\" it should say \"Thank you for being so polite!\" before it gives + its response.\r\n * If the string includes \"thank you\" it should say + \"You are very welcome!\" before it gives its response.\r\n\r\n* **Test out + a couple sentences with your keywords** to make sure the change worked.\r\n\r\n<img + src=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" + target=\"_blank\">Click to open in separate window.</a>" + CSPU5_U3 - Movie Bot - toLowerCase_markdown_instruction: "# Dealing with Character + Case\r\n\r\nWhat if the user types **ACTION** instead of **action**? These + are two different strings to the computer and therefore it won't recognize + they are the same. We want Movie Bot to treat words the same ignoring the + case of the letters. We can do this using the string command `toLowerCase`.\r\n\r\n**Note: + ** Check out the flowchart below to see the logic we are trying to add. \r\n\r\n# + Do This:\r\n\r\n* **Try typing COMEDY, ACtioN, horroR, and Romance** into + Movie Bot.\r\n\r\n* **Use the `toLowerCase` command** to change all user input + into lowercase letters after they enter it.\r\n\r\n* **Check that COMEDY, + ACtioN, horroR, and Romance generate the same recommendations** as comedy, + action, horror, and romance.\r\n\r\n<img src=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - Practice Create Performance Task_markdown_instruction: "# Practice + Create Performance Task\r\n\r\nYou've finally made it to the end of the Programming + Unit! We will continue some programming in the next unit, but for now we are + going to use all the new concepts you have learn to create something of your + own design! \r\n\r\n# Do This:\r\n\r\n* **Read the Project Overview** to understand + the entire project.\r\n* **Follow the Project Planning Guide**.\r\n* **Implement + your final program in this level**." + CSPU5_U3 - Return Values - constrainTurtle_markdown_instruction: "# Use a Function + that Returns a Value in an App\r\n\r\nWe create functions to **contain blocks + of code that will be used multiple times within our program**. The same is + true with functions that return values. Let's see an example of how we might + use one of the functions we've written.\r\n\r\nThis exercise comes with starter + code that creates a **simple turtle driver app**. The x and y location of + the turtle are stored in the variables `xloc` and `yloc`. An event handler + is used to update these values when the **arrow keys are pressed**, and then + a separate `updateTurtle` function is called to draw the turtle on the screen.\r\n\r\nCurrently + the turtle can drive off the screen. If we are clever about how we use our + `constrain` function, however, we can prevent this from happening.\r\n\r\n# + Do This:\r\n\r\n* **Starter code** is provided which allows the turtle to + move. Additionally a **working version of `constrain`** is provided.\r\n* + **Call the `constrain` function twice** within the `updateTurtle` function + to prevent the turtle from going outside the screen.\r\n\t* One call to the + function for `xloc` and one time for `yloc`.\r\n * Recall the screen is + **320 by 450 pixels**.\r\n* **Run your app** and confirm the turtle cannot + leave the screen.\r\n\r\n![](https://images.code.org/f2e24abdf2d4008dfdc4f2ba9e23ff2c-image-1447958362880.gif)" + CSPU5_U3 - Return Values - debuggingConstrain_markdown_instruction: "# Debugging + and Multiple Return Statements: *constrain*\r\n\r\nWe're going to debug another + function that uses multiple return statements. The function is called `constrain` + and is used to limit an input number to a certain range. The function accepts + three parameters.\r\n\r\n* `input` : the number to be constrained.\r\n* `low` + : the lower bound of the range. If `input` is below this value, the function + should return the value of `low`.\r\n* `high` : the upper bound of the range. + If `input` is above this value, the function should return the value of `high`.\r\n\r\n<details>\r\n<summary>**Click + for sample input and output for `constrain`**</summary>\r\n* `constrain(15,10,20)` + should return 15 since it is within the range of 10 to 20.\r\n* `constrain(5,10,20)` + should return 10 since the input is below the range of 10 to 20.\r\n* `constrain(25,10,20)` + should return 20 since the input is above the range of 10 to 20.\r\n</details>\r\n<br>\r\nUnfortunately, + because of the way this function was written, it does not always work as expected. + In particular, **because of how `return` was used, some portions of the function + never run**. Change the structure of the function to **use the pattern you + have been shown in previous exercises, included below**.\r\n<br> <br>\r\n**Pattern + for Functions that Return Values**\r\n* Use parameters to provide input.\r\n* + Declare a variable that will be used as output, possibly initializing its + value.\r\n* Update the value in your output variable throughout your program.\r\n* + Return your output variable on the last line of your function.\r\n\r\n# Do + This:\r\n\r\n* **Run the program** and identify the errors generated in the + output.\r\n* **Inspect the logic of `constrain`** to identify the logical + errors.\r\n* **Rewrite** `constrain` to make use of the **pattern for functions + that return values**, shown above.\r\n* **Run the program** to ensure it is + now running as you expect.\r\n\r\n![](https://images.code.org/38afcc5420e084b3146a8b12cc2d0e72-image-1447952855846.07.25 + AM.png)" + CSPU5_U3 - Return Values - debuggingMaxVal_markdown_instruction: "# Debugging + and Multiple Return Statements\r\n\r\n**Having multiple `return` statements + in a program can lead to tricky situations**. You may use multiple return + statements, but it makes it easier to introduce logical errors into your program. + We're going to look at some examples of functions with return values that + include logical errors and debug them. The goal is to **recognize common errors + with return values now so you can avoid them when writing your own programs**.\r\n\r\nThere + is a logical error somewhere in the version of `maxVal` you are about to see + which uses multiple return statements. As a result the function works correctly + for some inputs but not all. You'll need to inspect the code to understand + what the issue is and make changes accordingly.\r\n\r\n# Do This:\r\n\r\n* + **Run the program** and identify the errors generated in the output.\r\n* + **Inspect the logic of `maxVal`** to identify the logical error.\r\n* **Correct + the logical error** so that the function returns the correct value for all + inputs." + CSPU5_U3 - Return Values - useMinVal_markdown_instruction: "# Using Functions + that Return Values\r\n\r\nWe have used functions that return values many times + before, but in this exercise you will see how they are actually created by + using the `return` command. The function `minVal` accepts two numbers as input + and returns the minimum of the two as output. You can call this function just + like any other, and **because it returns a number, you can treat the function + call as if it were a number**.\r\n\r\n# Do This:\r\n\r\n* **Starter code** + has been provided that creates the function `minVal` and generates two random + values.\r\n* **Inspect the code of `minVal` to understand the logic of this + function**.\r\n* On the `console.log` line **call the function using `rand1` + and `rand2` as parameters** and ensure the minimum value is returned. You + should treat the function call **as if it were a number**.\r\n\r\n<img src=\"https://images.code.org/21c2232acca1ed4a133d648982b0b042-image-1447964963356.gif\" + style=\"width: 550px\">\r\n\r\n* Check that the program generates output similar + to the output shown below.\r\n\r\n<img src=\"https://images.code.org/0ec446c772976ca8e75e5eb25d018b24-image-1447964535213.21.49 + PM.png\" style=\"width: 350px\">\r\n" + CSPU5_U3 - Return Values - wrapTurtle_markdown_instruction: "# Use a Function + that Returns a Value in an App - Part 2\r\n\r\nThis time, you're going to + write a function that returns a value to add functionality to the turtle driver. + The `updateTurtle` function now is making a call to a function called `wrap` + that has not been written yet. It accepts three parameters and should work + in the following way:\r\n\r\n* `input`: the input value to the function. If + it is within the range it should just be returned.\r\n* `low`: the lower bound + of the range. If `input` is below this value the output should be the value + of `high`.\r\n* `high`: the upper bound of the range. If `input` is above + this value the output should be the value of `low`.\r\n\r\nBy using this function + you can create the illusion that the screen \"wraps\" around, so when the + turtle leaves the top of the screen it appears again at the bottom.\r\n\r\n# + Do This:\r\n\r\n* **Starter code** is provided which allows the turtle to + move.\r\n* The `updateTurtle` function now makes two calls to `wrap`, but + the function is not yet written.\r\n* **Write the `wrap` function** so that + it implements the logic described above.\r\n* **Run your app** and confirm + the turtle now \"wraps\" when it leaves the screen.\r\n\r\n![](https://images.code.org/ebed5130ccdd16202eac0b8cc02df959-image-1447957698820.gif)" + CSPU5_U3 - Return Values - writeMaxVal_markdown_instruction: "# Writing Functions + that Return Values\r\n\r\nNow you are going to write your own function that + returns a value, `maxVal`. This function should return the maximum of two + values provided as input. The code for `minVal` is provided so that you can + **replicate the pattern used in this function**.\r\n\r\n**Pattern for Functions + that Return Values**\r\n* Use parameters to provide input.\r\n* Declare a + variable that will be used as output, possibly initializing its value.\r\n* + Update the value in your output variable throughout your program.\r\n* Return + your output variable on the last line of your function.\r\n\r\nYou may actually + recognize many similarities between how we wrote functions that process arrays + and functions that return values. **These patterns aren't rules of programming, + but they help make your code easy to read and understand**.\r\n\r\n# Do This:\r\n\r\n* + **Starter code** has been provided which stubs out `maxVal` and generates + two random values. `minVal` is still provided **so that you can replicate + the pattern used**.\r\n* **Write `maxVal`**, replicating the pattern used + to write `minVal`.\r\n* **Use `maxVal` within the `console.log` statement + as if it were a number** to generate the output similar to the one shown below.\r\n\r\n![](https://images.code.org/5941ceeb27f0ad2d59819c9395d0d89a-image-1447947829448.gif)" + CSPU5_U3 - Simulation - 1_markdown_instruction: "# Starting Small\r\n\r\nTo + start, we're going to simulate flipping a coin 10 times. You might be thinking + that isn't many coin flips, and that we could just do those flips in real + life, but this is actually an important step in developing a simulation. At + small scales we can make sure our code is working as intended because **we + can still visually confirm its output**. Once we're convinced that the logic + of our program is reliable we'll move up to simulating larger numbers of + flips.\r\n\r\nThe core logic of our program will be focused on **a `while` + loop** that simulates flipping a coin by repeatedly generating **random 0's + or 1's using `randomNumber`**. This is a great opportunity to keep practicing + using loops while applying your knowledge of variables, iteration, and `if` + statements.\r\n\r\n# Do This:\r\n\r\n* When we want to flip a coin with a + computer we will instead **generate a random number between 0 and 1**.\r\n* + Write a program that **uses a `while` loop** to **flip a coin 10 times** and + writes the value of each flip to the screen. The example below shows how your + program should run.\r\n* **HINT:** you will need to use a counter variable + in your `while` loop to keep track of how many times the coin has been flipped. + \r\n\r\n![](https://images.code.org/970622047b06af13ea7bdd50ee86bcbf-image-1446739178483.gif)" + CSPU5_U3 - Simulation - 2.1_markdown_instruction: "# Changing the Loop Condition\r\n\r\nCurrently + our loop condition is based on a counter variable that keeps track of the + total number of flips, but our simulation should only run **while we have + fewer than the target number of heads**. In this exercise you are going to + change the condition used by your `while` loop so that your **simulation terminates + once you have flipped 5 total heads**. At the end of the loop we will **write + the total number of flips** to know how many flips it took to get 5 heads.\r\n\r\n# + Do This:\r\n\r\n* Change the looping condition to use the variable you are + using to keep track of the number of heads. **Your loop should run as long + as you have fewer than 5 total heads**.\r\n* Add code after your loop that + **writes the total number of flips**.\r\n* **Test your program** several times + to make sure it works as expected. See the example below.\r\n* **Note:** the + simulation is always terminating once it flips its 5th heads. Sometimes this + means the text output runs off the screen. We will address this in the next + exercise.\r\n\r\n![](https://images.code.org/878ff327142ebad8f81ecd8cdf58b14a-image-1446861064994.gif)" + CSPU5_U3 - Simulation - 2.5_markdown_instruction: "# 10,000 Heads!\r\n\r\nYou're + ready to increase the number of heads your simulation is looking for and **test + your first hypothesis**. Before we move up to the full 10,000 heads, however, + we're going to perform a quick check of our program logic. When you make + changes to your program **it is possible that some portion of your programming + logic will stop working as you expected**. In order to feel more confident + about your model you will **first change the number of heads you are looking + for to a number that we can still visually verify (7 heads)**. If our code + still works after making changes then we should be confident that it should + work at 10,000. We will remove the intermediate output and run the full simulation!\r\n\r\n# + Do This:\r\n\r\n* **Increase the number of heads you are looking for to 7** + and **visually confirm** that the code is still working as you expect.\r\n* + If everything seems to be working, **comment out the `write` command that + displays the results of each flip.** You can use `//` to comment out a single + line of code. Make sure that the total count of flips still prints though!\r\n* + **Run your simulation and find out how long it takes to get to 10,000 heads**. + Then run it a few more times. What patterns are you noticing? Record your + results and move on." + CSPU5_U3 - Simulation - 2_markdown_instruction: "# Counting Heads\r\n\r\nLet's + say that a **1 is a heads**. If we want our simulation to run until we reach + a certain number of heads then **we will need a way to count the number of + heads that have been flipped**. In order to do this you will need to add a + variable that acts **as a counter**. Initialize it to 0, and every time you + flip a heads (1) **increment your counter by 1**. At the end of your program + you should write the value to the screen.\r\n\r\n# Do This:\r\n\r\n* Add a + variable that **counts the number of heads (1's)** and write its value to + the screen after each flip.\r\n* Run your program severals times **and validate + that the number of heads recorded is correct** by visually checking the flips + you've printed to the screen.\r\n* **Hint:** you will also need to store + your current coin flip in a variable to complete this challenge.\r\n\r\n![](https://images.code.org/0d99569cd223c63e2166d610d09fd525-image-1446859813702.gif)" + CSPU5_U3 - Simulation - 3_markdown_instruction: "# Streaks of Heads\r\n\r\nWe + are going to alter our simulation so that it doesn't count the total number + of heads, but rather the longest **streaks of heads**. This will allow us + to simulate **how many flips it takes to get 12 heads in a row**. \r\n\r\nTo + begin with you will change your looping condition so that **the loop again + only runs 10 times**. This will allow us to visually confirm our code is working.\r\n\r\n**Keeping + Track of Streaks:** We know we need to count streaks of heads, how do we do + this in code? Do we need to keep track of all the previous flips so we know + that we're on a streak?\r\n\r\nThe answer is: **no**. We can instead just + **count in a clever way** that makes our code pretty simple. Make a variable + to use as a counter and...\r\n\r\n * every time you see heads, add 1 to a + counter.\r\n * every time you see tails, set the counter back to 0.\r\n\r\nHere + is some psuedocode showing how it works. You might take a minute to study + and reason about why and how it works.\r\n\r\n**Pseudocode**\r\n```\r\n// + Ouside loop\r\nheadsCount <-- 0\r\n\r\n// Inside loop\t\r\nIF (current flip + is a heads)\r\n headsCount <-- headsCount + 1\r\nELSE\r\n headsCount <-- + 0\r\nDISPLAY (current flip)\r\nDISPLAY (headsCount)\r\n```\r\n# Do This:\r\n\r\n* + Change your `while` loop's condition so that **it only runs 10 times**.\r\n* + Add code to the simulation that **displays the length of each streak of heads** + following the logic described above. Note that pseudocode should translate + to JavaScript pretty easily.\r\n* The example below shows an example of what + output from your program might look like.\r\n\r\n![](https://images.code.org/22f1a29e9b6abd558198f4704e437498-image-1446751547621.25.07 + PM.png)" + CSPU5_U3 - Simulation - 4_markdown_instruction: "# Changing the Loop Condition: + Streaks of Heads\r\n\r\nWe want our simulation to run** while the streak of + heads is less than a target length**. In order to do this we'll need to change + our looping condition to use the variables we've been using to count our + streak of heads. To begin with **your simulation should look for a streak + of 3 heads** so that you can still visually confirm the output.\r\n\r\n# Do + This:\r\n\r\n* **Change the condition** used by your `while` loop so that + it now runs **while the streak of heads is less than 3**.\r\n* **Test your + program** by running it and visually confirming that its output is correct. + It should run like in the example below.\r\n* **Note:** As before it's possible + that your output will sometimes run off the screen. You can still confirm + your code is working as you intend (it should never run after a streak of + 3) and we will address this issue in the next exercise.\r\n\r\n![](https://images.code.org/90ec4022f784ba136e59bb9b7c57a5c7-image-1446862623863.gif)" + CSPU5_U3 - Simulation - 5_markdown_instruction: "# Streaks of Heads: 12 in + a Row\r\n\r\nWe're almost ready to test **our second hypothesis** and find + out how long it takes to get **12 heads in a row**. Just as before we're + first going to **visually test our code with a different length streak (4)** + before removing most of the visual output and running the code for a streak + of 12.\r\n\r\n# Do This:\r\n\r\n* **Change your simulation to run until you + get a streak of 4** and visually verify that the values calculated are accurate.\r\n* + **Comment out** the lines of code that write the current coin flip and the + current streak count. You can use `//` to comment out a single line of code.\r\n* + **Change your simulation to run until you get a streak of 12 heads**. \r\n* + **Run your simulation a few times and record your results!**" + CSPU5_U3 - Simulation - 6_markdown_instruction: "# Keep Experimenting!\r\n\r\nYour + simulation can be updated or changed however you like. What new questions + do you have? Do you want to look for longer streaks of heads? Do you want + to roll a die instead of flipping a coin? Make any changes and improvements + to your simulation that you like.\r\n" + CSPU5_U3 - User Input - Save getText To Variable_markdown_instruction: "# Saving + Text Input in Variables\r\n\r\nOften we want to save the information we pull + in from the user for later use in our program. The best way to do this is + to save it in a variable.\r\n\r\n# Do This:\r\n\r\n* **Create two variables + inside your event handler** to store the **age** and **name** of the user.\r\n* + **Use `getText()` to update the values** stored in each of these variables.\r\n* + **Change your `console.log` statements to use your variable instead of `getText`**.\r\n\r\n![](https://images.code.org/ca45dcb01ae2d1956ed2f87efeda0264-image-1445976691215.11.13 + PM.png)" + CSPU5_U3 - Variables - Set to Expression with Other Variables_markdown_instruction: "# + Expressions with Variables\r\nArithmetic becomes much more interesting when + we use other variables in our expressions. For example you can do this:\r\n\r\n<table style=\"margin-left: + auto;\r\n margin-right: auto; align: center\">\r\n<tr>\r\n<td>\r\n<img src=\"https://images.code.org/13c21437292031a705744a8c2663c0d4-image-1445547765131.png\" + style=\"width: 400px;\">\r\n</td></tr>\r\n<tr> <td>\r\n <h3>\r\n Mental Model\r\n![](https://images.code.org/b4a2c125508fb06fd653b90c643cb53b-image-1447272790306.png)</h3>\r\n</td></tr>\r\n<tr><td><img + src=\"https://images.code.org/95eb7e859d04c72ed82ed80023a870cf-image-1445546103564.gif\" + style=\"width: 400px;\"></td>\r\n</tr>\r\n</table>\r\n\r\nThe end result of + an expression with variables is the same as one without. The major difference + is that values are retrieved from memory in order to do the calculation rather + than simply hard-coded.\r\n\r\n# Mental Model Check\r\nWatch the animation + above. To compute the expression the computer will: **first** retrieve each + of the values of the variables used in the expression; **then** the arithmetic + expression can be evaluated; **finally** the computed value can be stored + in memory.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/485f61858e45a39e383497c522c94d64-image-1445548216109.png\" + style=\"float: right; width: 300px\">\r\n* **Scenario:** In the starting code + we have provided you with variables that might be the kinds of things you + would keep track of in a game: `totalTime`, `points` and `lives`. (see right).\r\n\r\n* + Right now the `totalScore` is just set to 0. We want you to compute a final + score so that the person is rewarded for having a lot of points and lives, + but penalized for taking a lot of time.\r\n\r\n* **Write an expression** that + calculates the player's total score and stores it in the `totalScore` variable. The + calculation is: **the player's points *times* lives *divided* by the total + time.**\r\n\r\n* For the values provided the app display should look like + this:\r\n \r\n<img src=\"https://images.code.org/10c9c6f162004a1b7216ae36c1427478-image-1445548367117.png\" + style=\"width: 250px\">\r\n" + CSPU5_U3 - Variables - Set to Expression_markdown_instruction: "# Variables + and Arithmetic Expressions\r\nA common thing to want to do is store the result + of an arithmetic expression. The 4 basic arithmetic operations `+ - * /` + are available. \r\n\r\n<details><summary><strong>Here is a quick table that + shows the arithmetic operators with code examples</strong> [click to expand]</summary>\r\n<table>\r\n<thead>\r\n<tr>\r\n<th + style=\"text-align:center\">operation</th>\r\n<th style=\"text-align:center\">block</th>\r\n<th + style=\"text-align:center\">text</th>\r\n<th style=\"text-align:center\">example</th>\r\n<th + style=\"text-align:center\">result</th>\r\n</tr>\r\n</thead>\r\n<tbody>\r\n<tr>\r\n<td + style=\"text-align:center\">add</td>\r\n<td style=\"text-align:center\"><img + src=\"https://images.code.org/2cf1014a4e0b1dedd361edc73a0f7eb1-image-1445536786715.png\" + alt=\"\"></td>\r\n<td style=\"text-align:center\">`+`</td>\r\n<td style=\"text-align:center\">`result + = 7 + 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>10</strong> + in <em>result</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">subtract</td>\r\n<td + style=\"text-align:center\"><img src=\"https://images.code.org/96b80cd4d866130c7f8567765f9b4b00-image-1445536805959.png\" + alt=\"\"></td>\r\n<td style=\"text-align:center\">`-`</td>\r\n<td style=\"text-align:center\">`value + = 7 - 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>4</strong> + in <em>value</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">multiply</td>\r\n<td + style=\"text-align:center\"><img src=\"https://images.code.org/3574725201e009142126f39ad1df8a78-image-1445536817791.png\" + alt=\"\"></td>\r\n<td style=\"text-align:center\">`*`</td>\r\n<td style=\"text-align:center\">`score + = 7 * 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>21</strong> + in <em>score</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">divide</td>\r\n<td + style=\"text-align:center\"><img src=\"https://images.code.org/5d470b223717c9daac5246af0d013bdf-image-1445536826467.png\" + alt=\"\"></td>\r\n<td style=\"text-align:center\">`/`</td>\r\n<td style=\"text-align:center\">`bonus + = 7 / 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>2.3333</strong> + in <em>bonus</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">parentheses</td>\r\n<td + style=\"text-align:center\">none</td>\r\n<td style=\"text-align:center\">`()`</td>\r\n<td + style=\"text-align:center\">`avg = (99 + 85 + 93) / 3;`</td>\r\n<td style=\"text-align:center\">stores + <strong>92.3333</strong> in <em>avg</em></td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n</details>\r\n<br>\r\n# + Misconception Alert \r\n\r\n<img src=\"https://images.code.org/18eb833aba4a7199a28929dcd43c73f8-image-1445540549754.gif\" + style=\"float: right\">\r\nWhen you have a statement like `result = 5 + 7;` + realize that this **does NOT store a mathematical expression in the variable.** \r\n\r\nRather, + with this instruction you are asking to compute 5 + 7 and **THEN** store the + answer (a single number) in the variable.\r\n\r\n# Do This:\r\n\r\n**GOAL:** + the goal here is mostly to acquaint yourself with typing arithmetic expressions + - the answers to the questions below are less important, and should be used + as interesting things to investigate. \r\n\r\nWe've given you some **starting + code** with 5 statements similar to ones in the table above.\r\n* **Add `console.log` + or `write` statements** to display the values of each of the variables.\r\n* + Experiment with arithmetic expressions, try to make really big and really + small numbers.\r\n\r\n<hr>\r\n\r\n**Things to Try:**\r\n* Using **multiplication: + what's the biggest a number you can store** in a variable?\r\n * How many + digits are in the biggest number before it starts using scientific notation?\r\n* + Using **subtraction (or multiplication with negative numbers): what's the + lowest number you store?** (low means a negative number with a lot of digits)\r\n* + Using **parentheses** make a crazy-big arithmetic expression. \r\n * NOTE: + composing arithmetic expressions is ***much* easier in text mode**, and is + actually almost unreadable in block mode. Try doing this in text mode.\r\n + \r\n" + CSPU5_U3 Digital Assistant Design_markdown_instruction: "# Getting Started + with Your Digital Assistant\r\n\r\n<img src=\"https://images.code.org/e875ff7b54c314a378cdb784f92371a0-image-1445989933171.52.04.png\" + style=\"width:200px;float:right;\">\r\nOver the course of the next few lessons, + you'll be __developing your own digital assistant__. To make your digital + assistant more useful, it needs to be able to make __decisions__ based on + questions the user asks it, and respond intelligently.\r\n\r\nTo get started, + __choose a topic__ you want your digital assistant to specialize in. It should + be something you are interested in and know a lot about. Examples: Country + Music, Sushi, College Football, Comedy Movies.\r\n\r\nYou'll next set up + the layout for your app. __The basic layout contains just two primary design + elements:__ a text input and a text area.\r\n\r\n# Do This:\r\n\r\n- __Choose + a topic__ for your digital assistant to specialize in.\r\n- __Create the layout__ + for your app. Your digital assistant should have:\r\n - A name\r\n - + A text input for the user to ask a question\r\n - A text area for the digital + assistant to respond\r\n - The text area should have a greeting for the + user (e.g. Ask me a question about movies!)\r\n" + CSPU5_U3 Digital Assistant Set Text_markdown_instruction: "# Respond to Basic + User Input\r\n\r\n<img src=\"https://images.code.org/2bed8002ff3c89afb02db5809de1c40e-image-1445996503055.gif\" + style=\"width:200px;float:right;\">\r\nNow you can have your digital assistant + repeat what the user typed and add a __default response__. It's not the most + intelligent response, but you'll build up to that over the next couple of + lessons and it's important to build this program in pieces. \r\n\r\n# Looking + Back to Move Forward\r\nYou're going to now add to your program without as + much guidance as usual. Keep in mind that __this is very similar to programs + you've already built__, so look back at your work for a refresher.\r\n- __Mad + Libs:__ In Mad Libs you got a user's text when the 'Next' button was clicked, + filled in the outline with the responses, and displayed the completed Mad + Lib\r\n- __Introducing the 'change' event:__ You just learned about the + 'change' event that triggers when the user hits 'enter' on a text input.\r\n\r\n# + Do This:\r\n- __Take the user's question and output it to the text area__ + when the 'enter' key is pressed in the text input\r\n- The response should + also __include a default phrase__ such as _\"I don't know about that yet!\"_\r\n- + __Format the response with newline characters__ to separate the user's response + from the assistant's response.: `\\n`\r\n- The __text input should clear__ + after the user hits 'enter'" + CSPU5_U3 Digital Assistant Target_markdown_instruction: "# Introduction to + the Digital Assistant\r\n\r\n__While digital assistants may seem like magic, + they are just elaborate computer programs that parse, or process, text__ looking + for combinations of words to make decisions about what to reply.\r\n\r\nOver + the next few lessons, __you're going to build up your own digital assistant + that responds \"intelligently\" to a user's question__, by making a decision + about what to reply based on the contents.\r\n\r\nYou'll now __explore a + demo digital assistant__, Movie Bot, that represents the kind of program that + you'll build up to. Try out some of the prompts below and also try your own. + You'll quickly find the limits of what this program can and can't do.\r\n\r\n# + Do This:\r\n__Run Movie Bot. In the _'enter your question here'_ input, + type each of the following prompts and hit 'enter.' __\r\n- 'help'\r\n- + 'What is the best PG comedy movie ever?'\r\n- 'What PG comedy movie should + I watch next?'\r\n- 'Could you please tell me the best romance movie?'\r\n- + 'I waNT To WatCH a MovIE!!!'\r\n- 'What is the capital of Kentucky?'\r\n- + Play around! Ask more questions of Movie Bot and make a prediction about what + logic it's using to reply.\r\n" + CSPU5_U3 full clicker demo_markdown_instruction: "# Clicker Game Demo\r\n\r\nTry + out this clicker game! You'll be building your own version (with a theme + you choose) at the end of the lesson.\r\n\r\n# Things That Are Familiar\r\nYou + know how to build many of the components of this game already:\r\n- Multiple + screens.\r\n- Buttons that change the screen when clicked.\r\n- Image that + moves when you click it.\r\n\r\n# Things That Are New\r\n- Keeping track of + and displaying the __changing score__.\r\n- Keeping track of and displaying + the __changing lives__.\r\n- Changing to the __win screen if the score is + 25__.\r\n- Changing to the __lose screen if the lives is 0__.\r\n" + CSPU5_U3- Keys - Code Refactoring Exit Ticket_markdown_instruction: "# Free + Response: Why Refactor?\n\nWhy is refactoring your code important?\n" + CSPU5_U3- Variables - Create And Assign_markdown_instruction: "# Create and + Assign At Once\r\n\r\nIt's so common to want to create a variable and give + it an initial value, that JavaScript has a shortcut that lets you create and + assign with one line of code like this:\r\n\r\n<img src=\"https://images.code.org/84b576f02fe92989d0955dc8d4122eed-image-1445480709312.png\" + style=\"width:120px\">\r\n\r\n\r\nYou'll also see a new block in the toolbox + for this (see right).<img src=\"https://images.code.org/cbe3f9ffd0bafef72ce18232f746fdbe-image-1445480538334.gif\" + style=\"float: right; width: 350px\">\r\n\r\n# Do This:\r\nWe'll just quickly + practice using this form of variable creation and assignment. The code you + write will achieve the same thing as the previous level in fewer lines of + code. \r\n\r\n* **Create a variable called `lives`** and **assign it the value + 3** using the new one-line version of this command. (See animation at right.)\r\n\r\n* + **Add** `console.log` statements to display the value of `lives` just as before. \r\n\r\n* + The output in the console should (again) look like this:\r\n \r\n <img src=\"https://images.code.org/6405a3ed95ca3125ea1b2c9ffbdffa94-image-1445349849482.png\" + style=\"border: solid 1px gray\">\r\n\r\n" + CSPU5_U3- Variables - Text Mode_markdown_instruction: "# Give Text Mode a Try!\r\nThe + block-based mode of programming is useful for getting code into your app fast + and error free. But sometimes those little tiny edits are a pain. **Use text + mode instead!** Text mode is designed to make typing code fast and easy, + and it also gives a lot of help to make your code error free. \r\n\r\nLet's + re-create these variables again, but explore some features of text mode this + time.\r\n\r\n# Try Each of These 3 Things\r\nWe've given you the first two + lines of code in a program. \r\nExpand each box below and try what's suggested + - each builds on the previous one, so you might want to go in order.\r\n\r\n<details>\r\n<summary>1. + **Switch to text mode and try to type.** [click to expand]</summary>\r\n \r\n + Switch to text mode and **type out a `console.log` statement** to display + the value of `score`.<br>\r\n <img src=\"https://images.code.org/d8cd6968bbb5fb5b5a8b8b3e41ee7ad1-image-1445353098262.gif\" + style=\"width: 500px\">\r\n</details><br>\r\n\r\n<details>\r\n<summary>2. + **Drag blocks into text mode.** [click to expand]</summary>\r\n\r\n If you + don't want to type *everything* you can drag a block from the toolbox into + text mode and it will show you the text version of it. **Add code to create + the `lives` variable and a `console.log` message**.<br>\r\n \r\n <img src=\"https://images.code.org/b755a871221705ebdc73e73ffbfd1ad0-image-1445353101095.gif\" + style=\"width: 500px\">\r\n\r\n</details><br>\r\n\r\n<details>\r\n<summary>3. + **Check out code completion.** [click to expand]\r\n</summary>\r\n When you + type commands a tool tip pops up that tries to guess what you're trying to + type. If you see what you want in the box, **highlight it** (you can use arrow + keys) and then **hit the tab key**. It will auto-complete the code for you!<br>\r\n + \r\n <img src=\"https://images.code.org/177d70ab086d1481ad2ba5d367379aff-image-1445353103029.gif\" + style=\"width: 500px\">\r\n </details>" + CSPU5_U3-Design Mode-ID and Event Handler_markdown_instruction: "# Activate + Your Button\r\nOn the last level you added a button using Design Mode. If + you click it, nothing happens. Let's make the button work. \r\nYour button + has been brought over to this level. \r\n\r\n**Goal:** Add code using Design + Mode to make the button respond to a click.\r\n\r\n# Do This:\r\n\r\n<img + src=\"https://images.code.org/9ff41c3ea30ece355e91eaca5cdc1e36-image-1444417748945.gif\" style=\"width: + 250px; float: right\">\r\n\r\n* **Change ID of button** from “button1” to + “redButton”.\r\n\r\n* **Insert `onEvent` from Design Mode** by clicking *Insert + and show code* under the **Events Tab**.\r\n\r\n* Run the program and **look + for the output in the *Debug Console* **below the workspace instead of the + app window. We will discuss the *Debug Console* on the next level." + CSPU5_U3-Design Mode-Image_markdown_instruction: "# Testing Overlapping objects + and the Screen with Console.log\r\n\r\nThere are two goals here:\r\n\r\n1. + Practice inserting your own console.log statements.\r\n2. Investigate how + the screen captures events (it's different).\r\n\r\n## Do This:\r\n\r\n* + Add `console.log` statements to each of the 3 event handlers we started you + out with.\r\n * Make the text that gets printed *be descriptive* so that you + know exactly what is happening when.\r\n\r\n* **Run** the program\r\n* **Click + on the overlapping objects** both the parts that overlap and the parts that + don't.\r\n* **\r\n\r\n**Investigate until you can answer the questions:**\r\n1. + When you click on a location where two objects are overlapping, which event(s) + fire(s)?\r\n2. When you click on an non-overlapping part of some object what + gets triggered?\r\n3. When does a \"click\" on the \"screen\" get triggered?\r\n\r\n\r\n<details><summary>Answers: + [click here]</summary>\r\n\r\n1. When you click on a location where two objects + are overlapping, which event(s) fire(s)?\r\n<br>\r\n<li> The event-handler + for object that is on top gets triggered. The object that is underneath is + essentially blocked from being clicked in the overlapping portion</li>\r\n<br><br>\r\n2. + When you click on an non-overlapping part of some object what gets triggered?\r\n<li>The + event-handler for the object gets triggered as you might expect</li>\r\n<br><br>\r\n3. + When does a \"click\" on the \"screen\" get triggered?\r\n<li>Always. Events + that occur on the screen cannot be blocked by other objects. If you set up + an event listener for the screen it will capture EVERY event of that type, + no matter what other UI elements are on the screen. This behavior of the + screen is done on purpose and is useful for certain kinds of things.</li>\r\n\r\n\r\n</details>\r\n" + CSPU5_U313 Two Buttons with Ids_markdown_instruction: "# Predict - Observe + - Reflect\r\nHere's another one. \r\n\r\nTo understand a new piece of code + good programmers often try to **first make a prediction about what will happen + before running the program**. \r\n\r\nBy forcing yourself to make a prediction + (it doesn't matter if you're right or not) you are immediately alerted to + any **unusual or unexpected behavior** and you can ask yourself, *\"Huh? why + did it do that? Was that supposed to happen?\"* It might not be an error, + but you gain invaluable insight and actually **learn faster**.\r\n\r\n**Predict:** + For the code that is here, what will happen when the \"Forward\" button is + clicked? \r\n\r\n * **Study the code** - This program has **two event handlers** + listening for events on the same button?\r\n * **Force yourself to make a + prediction!** - \"I don't know\" is not a prediction!. \r\n\r\nHere are some + options to think about:\r\n\r\n* There will be an error in the console immediately + after hitting run\r\n* There will be an error in the console but not until + you hit the button\r\n* Program does nothing\r\n* turtle only moves forward\r\n* + turtle only turns left\r\n* turtle move forward *then* turn left \r\n* turtle + turn left *then* move forward?\r\n* something else? \r\n\r\n**Observe:** Once + you've made a prediction, close these instructions and **run the program** + to observe what happens.\r\n\r\n**Reflect:** Was your prediction correct? + If not what about your mental model might need to change? Talk about it with + a classmate and experiment with the code to make sure you understand what + is happening." + CSPU5_U313 drag Two Buttons_markdown_instruction: "# Buttons and Unique IDs\r\nYou + may have noticed that the button command has two parameters: `button(id, text)`. The + `text` is the text that actually shows up on the button display, and the `id` + (we'll typically write **ID**) is a **unique identifier** for that element + in the app.\r\n\r\nEach element that appears in the app must have a **unique + ID**. In fact, if you try to run a program that has two buttons with same + ID you will get a warning message in the console. Watch:\r\n<img src=\"https://images.code.org/47ec46e0563f63641cc10ef152e9f86e-image-1444074330713.gif\" + style=\"border: solid 1px black; width:500px\">\r\n\r\nNotice that even though + the text on the buttons was different, the IDs were the same, which caused + the error message to show up. To get rid of that error message you will have + to change the ID of the button from the default `id` to something else.\r\n\r\n**Error + messages happen to everyone and they are helpful!**: getting an error or warning + message when you run your program is *not a big deal*. Programmers actually + rely on error messages to tell them where and how to fix their code.\r\nSometimes + error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers + to an id (id) which already exists.` But a warning like this contains helpful + information and clues such as the line the error occured on, or some word + or command it didn't recognize. \r\n\r\n# Do This:\r\nThe goal here is to + experience an error message in a program, study it, and fix it.\r\n* **Drag** + two buttons into the workspace (same as shown above) with the default IDs.\r\n* + **Run** the program to see the warning message in the console.\r\n* **Read** + the warning message to see what it says.\r\n* **Change** the IDs of the buttons + to make them unique. An ID must be specified in quotes. You can use double-quotes: + `\"myId\"`, or single quotes: `'myId'`\r\n* **Re-run the program** to make + sure you don't get the error.\r\n\r\nOnce you've got two buttons on the + screen with different IDs and the program can run without generating the warning, + move on to the next level.\r\n" + CSPU5_U3L13 - Debug Id Problem_markdown_instruction: "# Descriptive IDs\r\n\r\n**You + try it** - give your buttons **descriptive and meaningful IDs** rather than + the default `button1`, `button2` and so forth.\r\n\r\nRemember to:\r\n\r\n* + **Change ** the event handler code so that it correctly references the new + IDs of the buttons\r\n* **Run - Test - Debug ** the program to make sure it + works, and debug any problems.\r\n\r\n<details><summary><strong>Reminder:</strong> + Rules About IDs [click to expand]</summary>\r\n\r\nIn making descriptive and + meaningful IDs there **are some rules about IDs** you need to know. IDs...\r\n\r\n<li> + cannot contain spaces.\r\n<li> *must* begin with a letter (A-Z or a-z) and + may be followed by any number of digits and letters.\r\n<li> can contain + hyphens (\"-\"), underscores (\"_\"), colons (\":\"), or periods (\".\").\r\n\r\n</details>\r\n" + CSPU5_U3L13 - Debugging 1_markdown_instruction: "# Debugging Event-Driven Programs: + IDs\r\n\r\nTry another one! -- This one is trickier, but very common.\r\n\r\n1. + **Run the program** and inspect the messages in the Debug Console for clues.\r\n2. + **Investigate** - track down what the root of the problem might be.\r\n3. + **Fix it** the program and correct the errors so that it works as intended.\r\n4. + **Run the program** and verify that both buttons have the intended functionality.\r\n5. + **Repeat as necessary** until the program works as intended\r\n\r\n<details><summary>Hint? + [click here]</summary>\r\n\r\n<li>Remember: IDs are **case-sensitive**!!!</li>\r\n<li>The + error is with the id: **left**[**B/b**]**tn**</li>\r\n</details>\r\n" + CSPU5_U3L13 - Debugging 2_markdown_instruction: "# Debugging Event-Driven Programs: + Ordering Event Handlers\r\n\r\n**Ordering Event Handlers: ** Event handlers + must come **after the object they reference in the code**. If your event handler + comes before your object (in this case a button) your computer would be looking + for an event on an object that does not yet exist. You will get an error message + and your code will not work as you intend.<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" + style=\"float: right; width: 150px\">\r\n\r\n**Target Application:** Just + like the last exercise, you'll again try to make an app that has two buttons, + one for moving forward and one for turning left. \r\n\r\nOnce again, we've + introduced a new error.\r\n\r\n# Do This:\r\n**Run the Existing program** + to see the error that gets generated.\r\n\r\n**Debug ** this program so that + it works as intended.\r\n\r\n**Run the program ** and try both buttons to + make sure they have the intended functionality." + CSPU5_U3L13 - Debugging 3_markdown_instruction: "# Debugging Logical Errors\r\n\r\nSometimes + you can write a program that generates no errors but still does not work as + intended. \r\n\r\nThis is the result of **logical errors** in your code, and + **making a prediction** can help find these nasty little buggers too.\r\n\r\nOnce + again we've introduced an error or two (a logical error this time) for you + to debug.\r\n\r\n1. **Investigate the code and make a prediction** - What + *should* happen here?\r\n2. **Run the program** and experiment to see what's + wrong.\r\n3. **Reflect** - were you right? Why or why not?\r\n4. **Fix it** + - make it work as intended.\r\n5. **Repeat as necessary**" + CSPU5_U3L13 - Debugging IDs case sensitive_markdown_instruction: "# Debugging + Event-Driven Programs: IDs\r\n\r\nTry another one! -- This one is trickier, + but very common.\r\n\r\n1. **Run the program** and inspect the messages in + the Debug Console for clues.\r\n2. **Investigate** - track down what the root + of the problem might be.\r\n3. **Fix it** the program and correct the errors + so that it works as intended.\r\n4. **Run the program** and verify that both + buttons have the intended functionality.\r\n5. **Repeat as necessary** until + the program works as intended\r\n\r\n<details><summary>Hint? [click here]</summary>\r\n\r\n<li>Remember: + IDs are **case-sensitive**!!!</li>\r\n<li>The error is with the id: **left**[**B/b**]**tn**</li>\r\n</details>\r\n" + CSPU5_U3L13 - Project_markdown_instruction: "# Multi Screen App\r\nYou will + be creating your own multi-screen app to practice designing user interfaces + and writing event-driven programs. \r\n\r\n**Look at the Project Guide and + Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* + Your app will have at least **4 screens**.\r\n* Your app should include **text, + images, buttons, and sound**.\r\n* There should be **no “getting stuck” on + any screen.** It should always be possible to navigate from a screen in your + app to some other screen. \r\n* Your program code should follow **good style**.\r\n* + Your user interface should be **intuitive to use**." + CSPU5_U3L13 - Turtle Driver Project_markdown_instruction: "# Create a Turtle + Driver App!\r\n\r\nAt this point you know enough about buttons and event handlers, + and how to debug some common issues that arise to be able to **build your + own \"turtle-driver\" app** from scratch. \r\n\r\n**Build up the program bit + by bit**. Don't try to write all the code at once. Add a button with an + event handler, make sure it works, debug any problems, and then move on to + the next part.\r\n\r\n# Do This:\r\n\r\n**Create ** an application with **four + buttons**, one for moving the turtle forward and one each for turning left + and right. The fourth button should do whatever you like.\r\n\r\n**Use descriptive + and meaningful IDs** for your buttons and ensure your event handlers work + as you intend.\r\n\r\n**If you have extra time** add more buttons that use + other turtle commands you'd like to include. You can also use colors, and + different line widths, dots, etc. " + CSPU5_U3L13 - Turtle move with button_markdown_instruction: "# Your First Interactive + App!\r\n<img src='https://images.code.org/3fad83213ae72073251c4d5abc1f048a-image-1444060521578.png' + style='float: right; width: 250px'> A new group of commands has been added + to the toolbox called **UI Controls** (User Interface Controls) which are + commands that let you interact with, and respond to, the user of your app. + To keep it simple, we'll start with just two commands: \r\n* `onEvent` which + lets you run a function in response to some event occuring (such as a button + click).\r\n* `button` which puts a button on the screen.\r\n\r\n# Do This:\r\nYou + will replicate the small app shown below, which makes the turtle move with + a button click. You will do three things:\r\n* Add a `button`.\r\n* Add an + `onEvent` block.\r\n* Add `moveForward` inside the onEvent function block.\r\n\r\nHere's + what you should do - you can come back to watch this as many times as you + need to get it right.\r\n<img src=\"https://images.code.org/1cdc8cfbcef2a43f84b11ebdf14aed0c-image-1444061731350.gif\" + style=\"border: solid 1px black; width: 500px; margin: auto\">\r\n\r\nOnce + you've created the program and gotten it to run, click **Finish** to move + onto the next level." + CSPU5_U3L13 Free Response Reflection_markdown_instruction: "Elements in your + app are required to have **unique IDs**. Given what you now know about how + event handlers work, why is it important for the IDs of page elements to be + unique?\n\n" + CSPU5_U3L13 eventsDetails_markdown_instruction: "# onEvent\r\n\r\n**You try + it!** - Make the turtle move forward when the button is clicked.\r\n\r\n* + **Add an `onEvent` block** \r\n* Set the **id** and **type** you want.\r\n* + Add `moveForward` to the function definition\r\n\r\n* **Run the program** + to make sure it works.\r\n* **Try changing the event type** to something like + *\"mouseover\"* and see what happens. Not all event types will work with + buttons but it's fun to play a little bit.\r\n\r\nOnce you've got the program + responding to some event, congratulations! You've just made your first interactive + app. \r\n\r\n**Click Finish** to move on to the next problem.\r\n\r\n" + CSPU5_U3L14 - Assigning Random Value_markdown_instruction: "# Other Ways to + Assign Values to Variables\r\nPrograms become much more interesting when the + values in variables change while the program is running. We can also assign + to a variable the value returned by a function. For example:\r\n\r\n![](https://images.code.org/31447c1b90c925bba3ca86ead8d84a7d-image-1445892065474.png)\r\n\r\nBecause + the `randomNumber` function *evaluates to a number* it means we can treat + it *as though it were a number*. We've used it before by just \"plugging + it in\" to some function that needed a number as a parameter like:\r\n![](https://images.code.org/5df0376d562bd75a1899e17c49b00144-image-1445941026356.png)\r\n\r\nBecause + the `randomNumber` function generates a new and different number each time + you call it, one thing we *could not* do before we had variables was generate + a random number, and use that *same number* for two different things in a + program. Now we can.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/df3d2a8f4c1a3061981667c9f85b0071-image-1445549489133.png\" + style=\"float: right; width: 350px\">Write a program that simulates the rolling + of two dice and reports their individual values as well as the sum. \r\nThe + program should:\r\n* Generate two random numbers between 1 and 6 and store + each result in its own variable.\r\n* Display the individual values of the + two dice.\r\n* Display the sum of the two dice (see right).\r\n* Every time + you run the program the result will be a little different.\r\n\r\nWe have + given you starting code that shows what to do for the first die. The *rest + of the code is up to you!* When you're done the output in the app display + should look like what's above.\r\n\r\n" + CSPU5_U3L14 - Mini Calculator embed_markdown_instruction: "# Getting User Input + - A Simple Calculator\r\nPrograms become *even more interesting* when we can + interact with the user. A short way to ask a user for a number is with the + `promptNum` command, which pops up a dialog box asking the user to enter a + number.\r\n\r\nThis very simple app demonstrates a new behavior: getting input + from the user.\r\n**You will write code to re-create this program** on the + next page.\r\n\r\n# Do This:\r\n* Click \"Run\" on the app.\r\n* You will + be prompted for two numbers, one right after the other. \r\n\t* If you don't + enter a number it will simply re-prompt you until you do.\r\n* See what happens. \r\n* + Re-run the program and enter different numbers until you get the idea.\r\n\r\nClick + **Finish** to move on." + CSPU5_U3L14 - User Input Division calculator_markdown_instruction: "# Assigning + User Input to Variables\r\n<img src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" + style=\"width: 350px; float:right\">\r\nLet's use `promptNum` to make a simple + calculator. The `promptNum` command appears in the variables toolbox because + it's typically used as a way to get a value from the user that you want to + hold on to while the program runs.\r\n\r\n`promptNum` is similar to `randomNumber` + in that it is a function whose return value *evaluates to a number*. The difference + here is that `promptNum` pops up an input dialog box and waits for the user + to type a number. Once they do and hit \"OK\" the number they typed is returned + and we can store it in a variable to use in our programs.\r\n\r\n\r\n# Do + This:\r\nWrite a program that acts as a simple calculator. (An animation of + the end result is shown at right.) <img src=\"https://images.code.org/e644d4b17d1d6fdb6b5a93651d512f8a-image-1445552700557.gif\" + style=\"width: 250px; float: right\">\r\n* Ask the user to **enter a number**.\r\n* + Then ask the user to **enter a second number**.\r\n* **Display the result** + of *some* calculation.\r\n * The example shows division but you may choose + something else if you like.\r\n\r\nWe have given you starting code that shows + you how to get the first number. The rest of the code is up to you.\r\n\r\n" + CSPU5_U3L14 - Variable ReAssignment pt2_markdown_instruction: "# Variable Re-assignment + - Part 2: Updating Values\r\n\r\nAll of our examples so far have shown how + to set the value of a variable by using combinations of numbers and other + variables. But what if you wanted to do something like **add 10 to the *current* + value of a variable**? \r\n\r\nBecause updating the value in a variable is + just moving memory around, the process has to go something like this:\r\n* + Read the current value of a variable.\r\n* Add 10 to it.\r\n* Store the new + value back into the same variable.\r\n\r\nThe technical term for this is called + **variable re-assignment** - when you change the value of a variable based + on its current contents. To increase the value of `num1` by 10 you actually + need to do this:\r\n\r\n<img src=\"https://images.code.org/c49b1a0fb81de4b90558fdb278e40987-image-1445942169121.png\" + style=\"float:right\">\r\n```\r\nnum1 = num1 + 10;\r\n```\r\nThe diagram at + right shows a picture of what's happening (it assumes the value of `num1` + is 7 before the line is executed). It's actually very similar to what happens + with plain old arithmetic: compute a value, then store it in a variable. Because + the computation has to happen before storing the result in a variable, there + is no contradiction here.\r\n\r\n<details>\r\n<Summary><strong>Common Mistakes + & Tips</strong> [click to expand]</Summary>\r\n\r\n<h3>\r\nMistake 1\r\n</h3>\r\n<p>To + increase the value of variable by 10 (for example) a common mistake is to + think that this statement alone will do the trick.\r\n</p><p>\r\n\r\n```\r\nnum1 + + 10;\r\n```\r\n</p><p>\r\nIt doesn't. This tells the computer to add 10 + to whatever the value of `num1` is. And the computer will do that, and the + result will go....nowhere. It will be lost.\r\n</p><p>\r\nBecause you are + trying assign a new value to a variable it should make sense that **the = + sign must be involved somehow**. \r\n</p>\r\n<h3>\r\nMistake 2\r\n</h3>\r\n<p>\r\nIf + you were in math class this statment would make no sense:\r\n```\r\nnum1 = + num1 + 10;\r\n```\r\n</p><p>\r\nBut **remember to read = as \"gets.\"** If + you read the statement above as: \"num1 *gets* the value of num1's current + value plus 10\" it might make more sense. Get in the habit of using \"gets.\"\r\n</p>\r\n</details>\r\n\r\n# + Do This:\r\n\r\n * **Make a prediction.**\r\n We start you out with some code + again (see below). \r\n\r\n <img src=\"https://images.code.org/60b25394c387bc111451f0e481528733-image-1447800367736.43.42.png\" + style=\"width: 500px;\"> \r\n\r\n Trace the code and predict what you think + will be printed to the console. (NOTE: We're serious about this \"make a + prediction\" stuff. When you force yourself to make a prediction about what + code will do you will learn faster since it triggers you to apply your mental + model of what's happening.)\r\n \r\n * **Run the program** to see if you + were right.\r\n \r\n * **Add a `console.log` statement**.\r\n \r\n We've + left you with a *little bit* of programming to do: add a `console.log` statement + at the end of the program to see the last value of `someNum` to see if your + full prediction is correct.\r\n" + CSPU5_U3L14 - concatenate simple_markdown_instruction: "# Text and Variables + Living Together!\r\n\r\nSometimes it’s useful to display text along with the + value of a variable in the same line of output. To do this you use `+` to + attach a variable onto a literal string of characters. Here is an example:\r\n\r\n<img + src=\"https://images.code.org/a35e68b062fc814871a8323938cf3384-image-1445888147995.png\" + style=\"border: solid 1px #BBBBBB; height: 30px;\">\r\n\r\nNotice that the + `+` operator has **two different meanings in JavaScript depending on what + type of data you're applying it to**. Click the explanations below for more + details.\r\n\r\n<details>\r\n<summary>If **both operands are numbers** `+` + means to add those two numbers together.</summary>\r\n\r\nThis is standard + addition. It works both with numbers and with variables that contain numbers, + as shown below.<br>\r\n\r\n<img src=\"https://images.code.org/eb50a1fcea459fe74774d903b07a274f-image-1445887814602.png\" + style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n\r\nBecause `num1` + is a variable that holds a number, and 10 itself is obviously a number, in + this case `+` will do addition like you would expect.\r\n\r\n</details>\r\n<br>\r\n<details>\r\n<summary>If + **either of the operands is a string** `+` treats both as if they were strings + and combines them to create a single string.</summary>\r\nThis is potentially + confusing behavior and can get pretty weird if the text *looks* like numbers. For + example, this code will display **16100** to the screen.<br>\r\n\r\n<img src=\"https://images.code.org/a9c54b664bd192aa5bf611808d88a3bc-image-1445887893598.png\" + style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n\r\nWhy? Because + JavaScript sees you trying to display a mix of text and variable values. \"16\" + (in quotes) is a string of ASCII characters not a number. And so JavaScript + converts everything to text, and the characters in the result of \"16\"+\"100\" + comes out to \"16100\". \r\n\r\n</details>\r\n<br>\r\n \r\n**TIP:** It's + common to want to sandwich a variable between some text when displaying it. You + can string together multiple pieces of text and variables using the `+` operator. For + example, you can do this:\r\n<br> \r\n\r\n<img src=\"https://images.code.org/65b0e277f058903bd3b956cc59ee5253-image-1445887976271.png\" + style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n \r\n<br>\r\n<details>\r\n<summary>**Misconception + Alert**</summary>\r\n\r\nThe **key thing to understand** about the `+` symbol + is that it can _only_ do actual arithmetic addition if the values on either + side of the `+` are actually numbers or variables that contain numbers. \r\n\r\n**And** + if the `+` symbol cannot determine whether the value is a number then it **assumes + it's a string**, and converts everything to a string and tries to concatenate + it. \r\n \r\nThe computer relies on you - the programmer - to make sure that + the **type of data** stored in a variable is appropriate for the task at hand.\r\n</details><br>\r\n\r\nOn + the next screen we'll have you play with this a little bit, but you'll write + statements to display a mix of text and strings from here on out.\r\n\r\n# + Do This:\r\nWe have given you the starting code shown below. You should **modify** + the `write` statement on **line 3** to combine text and variables together + to make the app display a single line of text as shown.\r\n\r\n|starting code|output|\r\n|--|--|\r\n|<img + src=\"https://images.code.org/a1b84a8728599e9945c576d3bb459140-image-1445891621155.png\" + style=\"height:50px\">| <img src=\"https://images.code.org/f5673df128eca0f9637c0cca1729b489-image-1445891800242.png\" + style=\"width: 250px\">|" + CSPU5_U3L14 - moving memory challenge1_markdown_instruction: "# Moving Memory + - Challenge 1\r\n\r\nThe next several levels all present challenges related + to \"moving memory\" around in your program. \r\n\r\n**GOAL:** Set the value + of the variable(s) to make the `console.log` statement display what it's + supposed to.\r\n\r\n**Rules**:\r\n\r\n * You may **only** add lines of code + that re-assign values of variables provided.\r\n * You may **only** use assignment + (`=`) and arithmetic operators (`+` `-` `*` `/`).\r\n * You **MAY NOT** type + or introduce any numbers.\r\n * You **MAY NOT** add or create any new variables.\r\n + * You **MAY NOT** change or alter the `console.log` statement at all.\r\n\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n<br><br>\r\n### Try this example yourself...\r\n\r\n" + CSPU5_U3L14 - moving memory challenge2_markdown_instruction: "# Moving Memory + - Challenge 2\r\n\r\n# Try another one!! \r\n* Click through to see a new + problem provided in the starter code. \r\n* A reminder of the rules and example + are below if you need to sneak a peek.\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L14 - moving memory challenge3_markdown_instruction: "# Moving Memory + - Challenge 3\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar + x = 2;\r\nvar y = 3;\r\n// your code here\r\n\r\nconsole.log(\"The value of + x is: \" + x + \" (x should be 7)\");\r\n```\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L14 - moving memory challenge4_markdown_instruction: "# Moving Memory + - Challenge 4\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar + x = 2;\r\n// your code here\r\n\r\nconsole.log(\"The value of x is: \" + x + + \" (x should be 8)\");\r\n```\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L14 - moving memory challenge5_markdown_instruction: "# Moving Memory + - Challenge 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar + x = 2;\r\nvar y = 3;\r\nvar z = 0;\r\n// your code here\r\n\r\nconsole.log(\"The + value of x is: \" + x + \" (x should be 3)\");\r\nconsole.log(\"The value + of y is: \" + y + \" (y should be 2)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong>(click + to expand)</summary>\r\nSince this one requires you to change the value of + two variables you need to be careful about which one you change first, since + its new value will affect the next lines of code.\r\n<p></p>\r\nYou can also + take advantage of the fact that since `z` is not used as a display value, + you can use it as a temporary holding ground for one value while you change + another.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L14 - moving memory challenge6_markdown_instruction: "# Moving Memory + - Challenge 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar + x = 5;\r\nvar y = 11;\r\nvar z = 4;\r\n// your code here\r\n\r\nconsole.log(\"The + value of x is: \" + x + \" (x should be 2)\");\r\nconsole.log(\"The value + of y is: \" + y + \" (y should be 6)\");\r\nconsole.log(\"The value of z is: + \" + z + \" (z should be 8)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong> + (click to expand)</summary>\r\nThis one requires you to be a little clever. Think + about setting the value of one variable that you could then use to easily + set the value of the other variables. Then the trick is to figure out how + to use the variables you've been given to make that useful value.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L15 - Add reset button to UpDown app_markdown_instruction: "# Add a + Reset Button\r\nIn most apps you want to provide a way to start over. \r\n\r\nTo + do this without having the user quit and restart your app, you need to add + code to **reset variables and text displays to initial values** so the app + can effectively start over.\r\n\r\nWe've **added a button** to the \"gameOverScreen\" + in the *Count Up/Down App* and **added an empty event handler** for it. \r\n\r\nRight + now clicking the \"start over\" button does nothing. You will write code to + make it work.\r\n\r\n\r\n# Do This:\r\n**Add code to the startOverButton event + handler to reset the app**. <img src=\"https://images.code.org/cb1569accb6a370d2258b5b14d624424-image-1446126849891.gif\" + style=\"width: 150px; float: right;\">\r\n\r\nThe app should work like the + animation shown to the right. **Notice** that when the \"start over\" button + is clicked it goes back to the main screen and the count has been reset to + 0. \r\n\r\nThe code should:\r\n\r\n* Set the screen to the gamePlayScreen.\r\n* + Set the count variable to 0.\r\n* Set the correct text label on the gamePlayScreen + to show the count is 0.\r\n\r\nOnce you get it to work, move on." + CSPU5_U3L15 - DEMO up down count practice app_markdown_instruction: "# All + the Basics You Need\r\n\r\n<img src=\"https://images.code.org/abb09baa0b6ccc24ff141590c5b667c3-image-1446417655965.gif\" + style=\"float:right; width: 150px\"> When you close these instructions, you'll + get to play a little bit with the very simple app (shown at right) to demonstrate + the basics of concepts involved in making the clicker game. We'll call it + the **Count Up/Down App**. Yes, it's a boring \"game,\" but it has all the + pieces of a more sophisticated game.\r\n\r\nThis app demontrates a few new + concepts. We'll step through each one, one at a time, explaining how each + thing works. Along the way, we'll also encounter some common challenges, + and learn how to solve them.\r\n\r\n# Do This:\r\n* Keeping clicking the up + arrow until something happens (something besides the number increasing).\r\n* + Start over.\r\n* Click the down arrow until something happens (something besides + the number decreasing).\r\n* Start over.\r\n\r\nOnce you think you've seen + all the behavior click Finish to see the first part of how this is done.\r\n\r\n" + CSPU5_U3L15 - Debug forget to update var on reset in UpDown app_markdown_instruction: "# + Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common + mistake** has been introduced into the code.\r\n\r\nIt's a tricky one to + find because at first it looks like everything is okay.\r\n\r\n# Do This:\r\n\r\n* + **Run the program.**\r\n\r\n* **To see the bug:**\r\n * Click the up or down + arrow until you get to the \"gameOverScreen.\"\r\n * Click \"start over.\"\r\n + * Click the up or down arrow again... what the?\r\n \r\n* **Look at the code + and fix the problem.**\r\n\r\n* **Read about the common mistake** by expanding + the area below.\r\n\r\n* **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...forgetting + to reset <i>everything</i> you need to actually start over.</big></strong><br><br>\r\nFrequently + to actually reset you need to set a few variables back to initial values <i>and</i> + update all the UI components, especially those that rely on those variables, + so they reflect the new values.<br><br>\r\n\r\nAnother common mistake shown + here is setting the text of a label to \"0\" rather than the value of the + count variable. For example, these two lines of code are a little dangerous:<br><br>\r\n<pre>\r\ncount + = 0;\r\nsetText(\"countDisplayLabel\", 0);\r\n</pre>\r\n\r\nTo be safe, if + a label is supposed to display the value of a variable, you should always + use the variable <i>instead of hard-coding numbers</i> as a check on yourself. The + general rule of thumb is: never hard-code a value instead of using a variable + that holds the value you need to show.<br><br>\r\n\r\n<b>A common strategy</b> + for handling this is to put everything you need to reset the app into a function + which you can call at both the beginning of your program, and from other screens + later on. For example:<br><br>\r\n\r\n<pre>\r\nfunction resetAll(){\r\n count + = 0;\r\n setText(\"countDisplayLabel\", count);\r\n setScreen(\"gamePlayScreen\");\r\n}\r\n</pre>\r\n\r\nThen + in some other code like a button event handler you can just call your reset + \r\nfunction:<br><br>\r\n\r\n<pre>\r\nonEvent(\"startOverButton\", \"click\", + \r\nfunction() {\r\n <span style=\"background-color:yellow\">resetAll();</span>\r\n});\r\n</pre>\r\n\r\n</details>" + CSPU5_U3L15 - Debug if never triggers in UpDown app_markdown_instruction: "# + Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common + mistake** has been introduced into the code.\r\n\r\nWe've changed the app + so that it counts up and down by 3 rather than by 1.\r\n\r\n# Do This:\r\n\r\n* + **Run the program.**\r\n\r\n* **To see the bug:**\r\n * Click the up or down + arrow trying to get to the game over screen.\r\n * It should be impossible + to get to the game over screen.\r\n \r\n* **Look at the code and fix the problem.**\r\n\r\n* + **Read about the common mistake** by expanding the area below.\r\n\r\n* **Once + you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...the + condition you're checking in your `if` statement is actually impossible to + reach.</big></strong>\r\n<p>\r\nThis problem was probably easy to see here, + but in practice <b>logic errors</b> like this can be devilish to track down. + It's especially hard because the program gives you no hints that anything + is wrong - it is syntactially a correct program. The computer cannot tell + ahead of time whether your `if` statements will ever be true. So you need + to trace through the logic of your program step by step to try to figure out + why something's not happening that you expect should have happened.\r\n</p>\r\n\r\n</details>" + CSPU5_U3L15 - Debugging Simple If-statements =v==_markdown_instruction: "# + Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA **very common + mistake** has been introduced into the code. It's one that vexes early programmers, + but we're sure you'll find it.\r\n\r\n# Do This:\r\n\r\n* **Run the program.**\r\n\r\n* + **To see the bug:**\r\n * Click the up arrow just once.\r\n * Restart the + program.\r\n * Click the down arrow just once.\r\n \r\n* **Look at the code + and fix the problem.**\r\n\r\n* **Read about the common mistake** by expanding + the area below.\r\n\r\n* **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...using + `=` instead of `==`</big></strong>\r\n<p>\r\n<b>Yup,</b> we told you this + is a common mistake! And it's an easy one to make.\r\n</p>\r\n<p>\r\nRemember + that the single `=` sign does assignment and it actually *also* evaluates + to true. This means that if you stick it in an `if` statement, that `if` + statement will <i>always</i> be true.\r\n</p>\r\n<p>\r\nOne strategy to avoid + this mistake is to **read code aloud in your head** and don't even use the + single word \"equal\":\r\n<li> think **\"gets\"** every time you see `=`</li>\r\n<li> + think **\"equal-equal\"** every time you see `==` </li>\r\n</p>\r\n<p>\r\nIf + you get in the habit of thinking that way, these mistakes are easier to catch. For + example you'd see this:<br>\r\n`if (count = 20)`<br>\r\nand read:<br>\r\n<i>\"if + count gets 20\"</i> ...and know that that doesn't make sense.\r\n</p>\r\n\r\n<p></p>\r\n</details>\r\n\r\n" + CSPU5_U3L15 - Simple If-statements in UpDown App_markdown_instruction: "# Add + Your Own *if* Statement\r\n\r\nIn most apps you want to make decisions based + on the state of some data you're keeping track of in the app. \r\n\r\nWe've + **modified** the *Count Up/Down App* to add another screen. When the count + reaches certain values, we'll switch screens. In the code you'll see an + `if` statement has been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n + * **If** the value of `count` is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img + src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" + style=\"width: 150px; float: right\">\r\n\r\n# Do This:\r\n**Add an `if` statement + so that when counting down the app changes screens when the count reaches + -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what + happens when the `if` statement is triggered.\r\n* **Study the `if` statement** + for the up arrow button to see how it works.\r\n* **Add an `if` statement** + to the down arrow event handler:\r\n\t* **If** `count` is equal to **-5, then** + set the screen to the \"gameOverScreen.\"\r\n* **Goal:** Once you're finished, + clicking the down arrow in the app should work like the animation shown to + the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click + to expand]</summary>\r\nThere is a subtle challenge here that you need to + set the text of the label on the <i>gameOverScreen</i> when you change screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> + Your code can call `setText` for any UI element, on any screen, at any time + - even if the element isn't on the screen that's currently showing.\r\n</details>\r\n\r\n" + CSPU5_U3L15 - add code to make count down work_markdown_instruction: "# Make + Count Down Work\r\n\r\n<img src=\"https://images.code.org/0044a46a27f7af5da74daeae8de021f7-image-1446063781449.gif\" + style=\"float: right; width: 200px\">You now know enough about using global + variables (and some of the problems you might run into) to try it yourself.\r\n\r\nLet's + start with an easy task. Right now clicking the up arrow works as expected; + **clicking the down arrow does not**. So...\r\n\r\n# Do This:\r\n**Make the + count go down by 1 every time the down arrow is clicked**\r\n\r\n* Study how + the up arrow works, and use it as an example for writing the code for the + down arrow.\r\n* Add and modify the code so that when the down arrow is clicked + the count goes down.\r\n* When you're done the app should work like the animation + shown to the right.\r\n* HINT: Don't forget to set the text of the label.\r\n\r\n" + CSPU5_U3L15 - count upDown bug forget to set text_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a bug that doesn't produce an error. + It just doesn't do what's expected. The reason is a common mistake that + all programmers make.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To + see the bug:**\r\n * Click the up arrow about 5 times.\r\n * Click the down + arrow about 10 times.\r\n * Click the up arrow again.\r\n* **Look at the code + and fix the problem.**\r\n* **Read about the common mistake** by expanding + the area below.\r\n* **Once you've fixed the issue, move on.**\r\n <p>\r\n\r\n</p>\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...forgetting + to update the display after changing something in the program</big>\r\n\r\n\r\n<h1> + Misconception Alert - Changing a Variable Doesn't Change the Display</h1>\r\n\r\nA + common misunderstanding about variables and displaying them is to think that + a text label that's displaying a variable will change when the variable changes. + NO. A text label is just \"dumb\" container for text. It's similar to a + variable itself in that it won't change unless you explicitly tell it to.\r\n<p></p>\r\n<h1>Concept: + Separation of Program Data from How It's Viewed</h1>\r\nMaintaining variables + and program data is a **different task** from maintaining the display of the + app. Your program could actually run without updating the display at all + - it would still be working behind the scenes; it just wouldn't be very fun + or interesting to use.\r\n<p></p>\r\n</details>\r\n\r\n\r\n" + CSPU5_U3L15 - count upDown bug logic error wrong update_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a few different bugs. Find them and squash + them!\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n + * Click the up arrow exactly twice.\r\n \t* Restart the program and do this + a few times - you'll notice nothing happens the first time you click.\r\n + * Click the down arrow several times.\r\n* **Look at the code and fix the + problem.**\r\n* **Read about the common mistake** by expanding the area below.\r\n* + **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...updating + the wrong thing in the wrong event handler.</big>\r\n<p></p>\r\nThere are + two common mistakes here:\r\n<p></p>\r\n1. Mixing up which event handler should + do what.\r\n<p></p>\r\n2. Updating the display **before** any change is made + to the underlying data of the program. \r\n\tThis can make the app seem oddly + out of sync where each event triggers an update to the display that reflects + the **last** thing done, not the current thing.\r\n<p></p>\r\n</details>" + CSPU5_U3L15 - count upDown bug var not created globally_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a few different bugs that are related + to the same problem.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To + see the bug:**\r\n * Click the up arrow several times.\r\n * Click the down + arrow.\r\n* **Look at the code and fix the problem.**\r\n* **Read about the + common mistake** by expanding the area below.\r\n* **Once you've fixed the + issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read about the + common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...thinking + you're referencing a global variable when you're not.</big><br>\r\n\r\nA + common mistake is basically a syntax/spelling error. These mistakes can be + really tricky to work out because you *think* you know what you wrote, but + the computer doesn't see it that way :)\r\n<p></p>\r\n</details>\r\n\r\n\r\n" + CSPU5_U3L15 - global var example count up_markdown_instruction: "# Using Variables + in Apps!\r\n<img src=\"https://images.code.org/f156f8d8524c3c0316e4db394e331bdc-image-1446060829590.gif\" + style=\"float: right; width: 200px;\">\r\nThe example program here has a small + portion of the *Count Up/Down App* written. Right now, what the app should + do is shown in the animation to the right.\r\n\r\n# Important Concept!\r\n\r\nThis + small functionality **demonstrates an important concept** - how to create + a variable in the app and update it when an event occurs. It may seem fairly + straightforward but there are some common misconceptions that we want to alert + you to.\r\n\r\n# Do This: Misconception Investigation\r\nOver the next few + levels you are going to do a small investigation of two apps that do almost + the same thing but *one works as expected* and *one with a bug* that demonstrates + an important concept about using variables in apps. Here is what you'll + do:\r\n\r\n1. **Run this app, which works properly.**\r\n * Study the code + until you think you understand what's happening.\r\n * Pay attention to the + code that handles the up arrow being clicked.\r\n\r\n2. **Run the app on the + next screen, which has a bug.**\r\n * On the next screen we show you almost + the same app, but with a subtle problem.\r\n * See if you can spot the difference + and fix it.\r\n\r\n3. **Report what you found!**\r\n * We'll ask you to report + what you found. It's not a quiz. You can go back and forth until you spot + the problem, but you should find it and be able to write what it is.\r\n" + CSPU5_U3L15 - mini clicker update score_markdown_instruction: "# Using Global + Variables\r\n\r\nYou'll now look at a version of the clicker game. We've + set up the basic functionality to move the apple around the screen, and have + __created a global variable to keep track of the score.__\r\n\r\n# Do This:\r\n__Add + code to update the score when the apple is clicked.__ Remember that you'll + have to update both the global variable _and_ the label text!\r\n\r\n<img + src=\"https://images.code.org/001640fd24fc487af534ab769ed196e2-image-1446136596261.gif\" + style=\"width:200px\">" + CSPU5_U3L15 - practice with setText_markdown_instruction: "# Changing Elements + on Screen \r\n\r\nThere's another way to display text in your app besides + `console.log` and `write`. \r\n\r\nThere is a command called `setText` which + will **change the text of a component on screen** given its id. This is a + very powerful technique and one that you will use a lot. Here's what it looks + like in action....\r\n\r\n<img src=\"https://images.code.org/3e5dd320801720d5c62a49146d9ee3d2-image-1446056202170.gif\" + style=\"width: 500px\">\r\n\r\nLet's do a **very simple** example of using + `setText`.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/5fc22aef5e8f5161f95a2507c1ec006b-image-1446056758249.gif\" + style=\"float: right; width: 175px; border: solid 1px #AAAAAA\">\r\n* **Run + the code** in the app.\r\n \r\n Look at the code for the \"upArrow\" event + handler and how it sets the text of the label.\r\n \r\n* **Modify the code.**\r\n + \r\n When the down arrow is clicked, set the text of the label to something + else.\r\n\r\n* **GOAL:**\r\n * Your only goal is to successfully use `setText` + in this example app.\r\n * The app should do something similar to the animated + example at right.\r\n\r\nOnce you've got it functional, click Finish to move + on.\r\n \r\n\r\n" + CSPU5_U3L15 - variable scoping problem debugging_markdown_instruction: "# Debugging + Problem!\r\n\r\n**Uh oh!** The code here is subtly different from the one + in the previous example and **now there is a problem**.\r\n\r\n# Do This:\r\n\r\n* + **Run the app** and try it to see the problem. \r\n* **See the error.**\r\n + * Note that **NaN** stands for \"Not a Number\" - why would it say this?\r\n* + **Note the difference** between this broken version and the previous one that + worked.\r\n* **Fix the problem** so that it works as before." + CSPU5_U3L15 click add lives_markdown_instruction: "# Tracking Lives\r\n\r\nIn + the game, the number of lives starts at 3 and decrements by 1 every time the + background image is clicked. Add this functionality to your game!\r\n\r\n# + Do This:\r\n- __Add your variable to keep track of lives.__\r\n- __Add a click + handler for the background image.__ _ID: \"background\"_\r\n- __When the background + is clicked, decrement the number of lives by 1.__\r\n\r\n<img src=\"https://images.code.org/79f1352aebb2e40c302d1900aacd31f4-image-1446138180044.gif\" + style=\"width:200px;\">" + CSPU5_U3L15 full clicker app_markdown_instruction: "# Make Your Own \"Clicker\" + Game\r\nYou will be creating your own “clicker” game similar to the Apple + Grabber game you worked on in this lesson. \r\nThe general object of the game + is to click on an element that jumps around every time you click it. You will + pick your own theme and decide what the rules are and how to keep score.\r\n\r\n** + Your Main Tasks Are To:**\r\n\r\n * Pick a theme for your game and add appropriate + images and styling.\r\n * Add variables to track some data during gameplay.\r\n + * Add code to event handlers to update the variables and display appropriately.\r\n + \r\n**See Activity Guide for Requirements**\r\n\r\nThere is a full activity + guide and rubric for this project. You can find a link to it in the student + resources section for this lesson. Or ask your teacher for it.\r\n \r\n<img + src=\"https://images.code.org/146107536c50b4a3317f3ebbe2e66f37-image-1446418612319.png\" + style=\"float: right; width: 300px\">\r\n** Template **\r\n\r\nThis level + is a template for the app. You should **run it to see what it does** right + now. You will modify *this* template, both the design elements and the code, + for your project.\r\n\r\nThe template has 4 screens and some basic navigation + functionality and event handlers set up for you. The game play screen uses + the images from the Apple Grabber game, but you should replace these with + images related to your chosen theme.\r\n\r\n" + CSPU5_U3L15 spot the difference variable debugging_markdown_instruction: "Respond + to the following questions about your investigation into the bug with the + counting game. Feel free to go back and look at the game again (but do so + in another tab or be sure to click \"Submit\" to save your work!):\n\n- From + the user's perspective, what was the difference between the first version + of the game and the one with the bug?\n- From looking at the code, what specifically + was the difference between the two, and why is that an issue?\n- How did you + fix the bug?\n" + CSPU5_U3L16 - challenge say hi app_markdown_instruction: "# Introducing the *change* + Event\r\n\r\nDid you notice with the demo digital assistant that you could + just __type a question, hit 'enter', and the assistant would respond__? + Up until now you've been using the click of a button to trigger getting the + text from an input or text area.\r\n\r\nYou can use a new event type to get + this behavior: The __'change' event__ is triggered when the user hits 'enter' + in a text input after typing.\r\n\r\n\r\n<img src=\"https://images.code.org/7d1725b236471f8e2a0efed5870660da-image-1446071579670.32.36.png\" + style=\"width:350px;\">\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/f8f1f7ae18acbc570a367886bcd6ca88-image-1445976541574.gif\" + style=\"width:250px;\">\r\n- A __text input__ has been created for you that + asks for a user's name.\r\n- Attach a __'change'__ event handler to the + text input.\r\n- When the 'change' event triggers, __write the user's name + and a greeting__.\r\n" + CSPU5_U3L16 - chaserApp_markdown_instruction: "# Chaser Game\r\n\r\nYou now + have all the skills you need to make a simple \"chaser\" game. A chaser game + is just a game where an image runs away from your mouse.\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" + style=\"float: right\">\r\n\r\n# Do This:\r\n\r\n**Create a \"Chaser Game\"** + which includes the following components:\r\n\r\n* **Text** on the top of the + screen with a title or instructions for what to do.\r\n* **An image** that + \"runs away\" (moves randomly) based on some mouse event.\r\n\r\nOnce you + have the basic functionality down feel free to spend time adding more features + to your application.\r\n<br><br><br>\r\n\r\n" + CSPU5_U3L16 - chooseImages_markdown_instruction: "# Choosing Your Own Images\r\n\r\nThe + second parameter of the `image` command allows you to set the image to be + displayed. There are two ways to do this:\r\n1. Provide the URL of an image + on the web.\r\n2. Upload an image from your computer (by clicking \"choose...\").\r\n\r\n![](https://images.code.org/e726e56fd3e4c7cd4a0d58cba731a855-image-1444240440116.53.49 + PM.png)\r\n\r\n\r\n# Do This:\r\n\r\n* **Read the documentation for `image`** + for tips on how to find an image's URL and how to upload.\r\n* **Change the + image** to one you've found online or from your own computer.\r\n\r\n**NOTE:** + many images are bigger than the screen of your app, so it's likely you'll + need to add a `setPosition` command to get it on the screen sized the way + you want." + CSPU5_U3L16 - doubleQuotes_markdown_instruction: "# Importance of Double Quotes\r\n\r\nYou + may have noticed that the strings we've seen are **wrapped in double quotes**. + These double quotes **are not part of the string**. Instead this is how you + indicate that a sequence of characters **is a string and not the name of a + variable**.\r\n\r\nAs you start writing programs with strings **it is common + to generate errors from forgetting to place them in double quotes**. We're + going to generate some of those errors now so that we can recognize them more + easily later.\r\n\r\n![](https://images.code.org/89235457b9b9bf76ac4f8221cae5a62e-image-1445987270682.07.24 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **This program generates many errors** + because strings were not placed in quotes.\r\n* **Run the program** before + you change it to see the errors that are generated.\r\n* **Add double quotes** + around all the strings so that the program runs without errors.\r\n\r\n" + CSPU5_U3L16 - intro getText_markdown_instruction: "# Getting Text Input\r\n\r\nAs + we saw a user can now type inside of a text input whenever they want, **but + now we'll need a way to access that text**. In order to do that you'll need + to use the `getText` command, which you can now find in the **UI Controls** + tab.\r\n\r\n<img src=\"https://images.code.org/0c6774f2b6d33f8107ec2936102b1a10-image-1445533677192.58.24 + PM.png\" style=\"width: 150px;\">\r\n\r\nYou can use a `getText` command just + like a string within a `console.log` or `write` command. Just like with `setText` + you will refer to the UI element by its ID.\r\n\r\n![](https://images.code.org/c17e419301d0cfeebf7f0ccee13e415f-image-1445892504376.47.54 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **Read the documentation ** for `getText`.\r\n* + **Add an event handler to the Submit button** that fires when your button + is clicked.\r\n* **Inside the event handler** place code that will **log the + name your user input to the console**.\r\n\r\n" + CSPU5_U3L16 - introSetPosition_markdown_instruction: "# How to Organize the + Code\r\nAs your apps get more complex you'll have to think about how to organize + your code so it remains readable and easy for you to locate things when debugging + any problems. We suggest the following convention which breaks the code into + 3 major sections:\r\n* **Top**: code for UI elements **and** any code for + positioning them.\r\n* **Middle**: code for event handlers.\r\n* **Bottom**: + code for any other other functions you've written. (We don't have any of + these yet.)\r\n\r\nSo if you have some existing code and want to insert a + `setPosition` command, you should place it after `button` but before `onEvent` + in the code, like this:\r\n\r\n<img src=\"https://images.code.org/ae17e62c077aa9698526371d22db1307-image-1448404255046.gif\" + style=\"width: 500px\">\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/3a834b8a4313e31a453525a69acda1f4-image-1444335250982.png\" + style=\"float: right; width: 175px\">\r\n\r\n* **Starter code** has been provided + which creates two buttons and event handlers.\r\n* **Insert** `setPosition` + commands for each button so they appear at the bottom of the screen (as shown).\r\n * + **Remember:** in an app screen 0,0 is the top left corner and you specify + a location by how many pixels from the left and how many down from the top + of the screen it is. The screen is **320 by 450 pixels**." + CSPU5_U3L16 - introStrings_markdown_instruction: "# Strings\r\n\r\nThe primary + data type we have used so far is **Numbers**. If we want to interact with + user-submitted text, however, we'll need to learn about a new data type called + a **String**. A string is a **sequence of ASCII characters**.\r\n\r\n**Example** + | **Rule**\r\n---|---\r\n`\"aString\"` | Strings **might** look a lot like + a variable name but there are **many differences**.\r\n`\"look at all these + spaces\"` | Strings can **contain spaces**.\r\n`\"$2 bills are the coolest\"` + | Strings can **contain special characters** (and even start with them).\r\n`\"11\"` + | Strings might **contain only digits**. This looks like a number but it is + really 2 ASCII characters.\r\n`\"\"` | Strings might **contain no characters**.\r\n<br>\r\nYou + can **store strings in a variable just like a number**. In this example the + variable name is `str` but you should choose a name that is **descriptive + and meaningful**.\r\n\r\n![](https://images.code.org/56e6b30a51556aa3b516e0a49b51cbeb-image-1445894334432.18.40 + PM.png)\r\n\r\n**Combining Strings:** often you will want to combine multiple + strings to create one longer string. You can do this with the `+` operator. + The formal name of this process is **concatenation**.\r\n\r\nThe program you're + about to see is a very simple Mad Libs app that uses strings that are created + inside the program and saved inside of variables. These strings are then + **concatenated** with other strings to create a Mad Lib.\r\n\r\n# Do This:\r\n\r\n* + The input words of this Mad Lib are **currently set to the empty string**.\r\n* + **Add your own input words** and run the program to generate the Mad Lib." + CSPU5_U3L16 - newEventTypes_markdown_instruction: "# New Elements and Events: + New Event Types\r\nYou just wrote your first program that **does not include + the turtle**! Moving forward we're going to focus much more on programming + apps that use User Interface (UI) elements, but we'll keep the turtle library + around in case you want to use it.\r\n\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 + AM.png\" style=\"float: right\">\r\n\r\n**New Events**: You may have noticed + that the `onEvent` block has a pull-down menu for the event **type** (see + right).\r\n\r\n# Do This:\r\n\r\n* **Experiment** with **each of the different + types of mouse events** by selecting from the list. You can also read about + them in the documentation.\r\n\t* click\r\n * mousemove\r\n * movedown\r\n * + mouseup\r\n * mouseover\r\n* **Choose** the mouse event type you like most + and change your event handler to use it.\r\n* **Note:** There are some events + that capture keystroke events. These are interesting, but they do not work + easily with buttons. We'll stick to mouse events for now, and get to keys + later.\r\n\r\n**Be sure** to experiment with each one. The next exercise + will quiz you on which one is which.\r\n\r\n" + CSPU5_U3L16 - outputWithTextArea_markdown_instruction: "# Generating Text Output\r\n\r\nSo + far we've been outputting our messages to the console, but now we'd like + to display them in the app. In order to do so we're going to be using a new + UI element called a `textArea`. You can use `setText` with a `textArea` just + like you would with a `textLabel`.\r\n\r\n![](https://images.code.org/45e6b6cdb1ca87f53cf1d6bba97cb812-image-1445977693641.24.43 + PM.png)\r\n\r\nIf we want to combine user input with default text we can do + so with **string concatenation**. Together with a `textArea` we can use this + ability to compose longer messages based on user input.\r\n\r\n# Do This:\r\n\r\n* + **Add a `textArea`** to your app and give it a descriptive and meaningful + ID.\r\n* **Create a variable inside your event handler** called `userMessage` + to hold the full message that will be sent to the user.\r\n* **Use string + concatenation** to compose a message from the user input.\r\n* **Use `setText`** + to place your `userMessage` inside the `textArea` you created.\r\n\r\n<img + src=\"https://images.code.org/193af3e0c993dbf0b7af9c571ec5f56d-image-1445977696957.27.08 + PM.png\", style=\"width:250px;\">" + CSPU5_U3L16 - setPosition to fixed location_markdown_instruction: "# Using + setPosition\r\n\r\n<img src=\"https://images.code.org/b664824ffeb3347b2e0b6d12447b4e8b-image-1476891499229.gif\" + style=\"width: 150px; float: right;\">\r\n\r\n**Now you try it** - use [setPosition](#triggercallout=setPosHover) + to **move the button to the middle of the screen when clicked**. We've set + up a small project for you with a button (id: `moveBtn`) already added in + design mode.\r\n\r\n1. Add an `onEvent` block\r\n2. Drag a `setPosition` command + into the event handler function\r\n3. Set the x,y coordinate so that the button + ends up in the middle of the screen.\r\n * You'll need to experiment a little + bit to find coordinates that work for you.\r\n * Hover over the screen to + find a good starting point.\r\n\r\n**Tip**: when you see a command that is + linked like this: [setPosition](#triggercallout=setPosHover) click it! -- + it will show you other hints.\r\n\r\nOnce you've got the button moving to + the middle of the screen click Finish to move on to the next challenge.\r\n" + CSPU5_U3L16 - setPosition to move button_markdown_instruction: "<img src=\"https://images.code.org/dc1f942b805f07b3581c678ed1669a27-image-1476892595302.gif\" + style=\"float: right\">\r\n# Using setPosition and randomNumber\r\n\r\n<img + src=\"https://images.code.org/a501391fac0c396a197aaaf357e73972-image-1476892143359.gif\">\r\n\r\n**Now + you try it** - instead of using a fixed value, you use [randomNumber](#triggercallout=showRand) + to set the x and y coordinates for setPosition. Now you'll have to chase + the button all over the screen!\r\n\r\n* Make it so that the button could + jump *anywhere* on the visible screen each time it's clicked.\r\n* Extend + it: if you want to get really nuts, you could add back in the *width* and + *height* parameters of setPosition and make the size of the button *also* + change randomly with each click!\r\n\r\nOnce you've got the button jumping + around the screen. Click **Finish** to move onto the next level.\r\n" + CSPU5_U3L16 - singleSetPosition_markdown_instruction: "# Moving and Sizing + Buttons\r\n\r\nAn important component of designing intuitive and visually + appealing user interfaces is the location of the elements on the screen. Using + the `setPosition` command (now added to the Toolbox) you can move and set + the size of user interface elements.\r\n\r\n![](https://images.code.org/c3e42223cbcb096f992d758973d09f63-image-1444664597665.42.48 + AM.png)\r\n\r\n**NOTE:**\r\n * If you only want to set the size you can use + the `setSize` function which looks like this:\r\n\r\n ![](https://images.code.org/cb742ecf96c04477db0f8361ad5dcdaf-image-1448924017288.png)\r\n\r\n + * If you *only* want to set the position *without* changing the size of the + element, you can omit the *width* and *height* parameters from the `setPosition` + function. To do that, you need to switch into text mode, like this:\r\n\r\n + <img src='https://images.code.org/5b565ef5b74b5cd657ba15c67be92b0d-image-1448924356253.gif' + style=\"width: 400px\">\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** + for `setPosition`.\r\n* **Starter code** has been provided which creates a + single button.\r\n* **Move the button to the middle of the screen** using + `setPosition`, as in the image below. (You may need to experiment a little + bit with the x,y location to get it right).\r\n* **Remember:** in an app screen + 0,0 is the top left corner and you specify a location by how many pixels from + the left and how many down from the top of the screen it is. The screen is + **320 by 450 pixels**.\r\n\r\n![](https://images.code.org/62840468826ce153d3d0d80bca303827-image-1444662614963.10.05 + AM.png)\r\n\r\n" + CSPU5_U3L16 - text labels_markdown_instruction: "# New Elements and Events: + Text Labels\r\n<img src=\"https://images.code.org/20d50fd324908fc48633e1325cc37603-image-1444662791509.png\" + style=\"float: right\">\r\nThe UI controls toolbox contains an element called + `textLabel`. A text label is what it sounds like: plain text that you can + put in your app. Even though it's just plain text you can still move and + resize it using `setPosition`, and you can attach event handlers to it as + well.\r\n\r\n**NOTE:** resizing a text label does not change the font size + of the text. We'll learn how to do that later. \r\n\r\n# Do This:\r\n\r\n* + **Read the documentation** for `textLabel`<img src=\"https://images.code.org/fe2ce5f335fd124dc3052270ca0af31f-image-1444336014658.gif\" + style=\"float: right; width: 150px\">.\r\n* **Modify** the program so that + your button is now a text label. Just as before, it should move randomly around + the screen when clicked. You can make the text whatever you like.\r\n* **Tip:** + If you reuse your button's ID you'll only need to change a single line of + code to make your program work. Once you have your program working **choose + a descriptive and meaningful ID** for your text label and make the appropriate + changes in the event handler.\r\n\r\n<br>\r\n<br>\r\n<br>\r\n\r\n" + CSPU5_U3L16 - textInput getText write_markdown_instruction: "# Text Input Elements\r\n\r\nSo + far we've been using `promptNum` as a simple way to get a number as input. + Now that we know a little about strings we are going to create **user interface + elements that users can use to submit text (i.e. strings) instead**. The first + and simplest example is `textInput` which you can find in Design Mode.\r\n\r\n<img + src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 + PM.png\" style=\"width: 100px\">\r\n\r\n# Do This:\r\n\r\n* **Add two text + input elements to this program**, one for the name and one for the age of + the user.\r\n* **Give your text input elements descriptive and meaningful + IDs**.\r\n* **In Design Mode** set their default text to prompt the user for + their name and age.\r\n* **Compare your app to the example below**.\r\n\r\n<img + src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 + PM.png\" style=\"float:left; width:200px;\">\r\n<br>" + CSPU5_U3L16 - toUpper_markdown_instruction: "# String Capitalization\r\n\r\nIf + you want to change the capitalization of a string you can do so with two new + functions\r\n\r\n![](https://images.code.org/d8523cdae7c07b34baa1c61809bb80d4-image-1445980407200.42.31 + PM.png)\r\n\r\nNote that the syntax is similar to `console.log` . This is + because `toUpperCase` really only makes sense as a command when you are using + a **string**, just as `log` only makes sense when you are talking about the + console. This function **evaluates to a new string in which all characters + have been made uppercase / lowercase**. If you want to update the value in + your original variable you'll have to do so explicitly, as in\r\n\r\n```\r\nvar + myString = \"lower case for now\";\r\nmyString = myString.toUpperCase();\r\n```\r\n\r\n# + Do This:\r\n\r\n* **Update your application so that the user's name is printed + in UPPERCASE**.\r\n\r\n<img src=\"https://images.code.org/26d8ffb7c631c1c510f781b5bf46d494-image-1445980322936.04.55 + PM.png\", style=\"width:250px;\">" + CSPU5_U3L16 - use images_markdown_instruction: "# New Elements and Events: + Images\r\n\r\n<img src=\"https://images.code.org/a84297658be45dc78bc401d387d10436-image-1444663322356.21.25 + AM.png\" style=\"float: right; width: 120px\">\r\nImages make applications + more visually pleasing and interactive. You can add images to your application + using the `image` command. For now, just add an `image` element to your app + (the default image link is the Code.org logo) and don't worry about choosing + a unique image just yet. We'll do that in the very next exercise!\r\n\r\n\r\n# + Do This:\r\n<img src=\"https://images.code.org/8df7b1b56c71de7ad9770646bd7f8792-image-1444336140877.gif\" + style=\"float: right; width: 250px\">\r\n\r\n* **Modify** the program - change + the `textLabel` to an `image` so that the image moves randomly around the + screen based on the event you chose.\r\n* **Tip:** If you reuse your text + label's ID you'll only need to change a single line of code to make your + program work! Once you have your program working though, it's probably a + good idea to choose a descriptive and meaningful ID for your image and make + the appropriate changes in the event handler.\r\n\r\n<br>" + CSPU5_U3L16 Mad Lib Clear Input_markdown_instruction: "# Play It Again and + Again!\r\n\r\nWhen the user clicks the \"Play again\" button, the first screen + should reset and not show the user's previous text.\r\n\r\n# Do This:\r\n- + When the \"Play again\" button is clicked, __clear the text from each text + input__ on Screen 1.\r\n- __Free play:__ Add images, or more How-to steps + for your Mad Libs, and invite others to play!\r\n\r\n<img src=\"https://images.code.org/a49fe3eba4d2d2fb03e45d15aad53dbf-image-1450143105779.16.14 + Mad Libs play again button.gif\" style=\"width:200px\">\r\n\r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nTry + setting the text to the empty string: `\"\"`.\r\n</details>\r\n" + CSPU5_U3L16 Mad Lib Demo_markdown_instruction: "# Getting Text from the User\r\n\r\nUp + until now, the event-driven apps you have created responded to the user clicking + an element or typing a number when you used `promptNum`. __What if we want + the user to provide _text_ instead of a number?__ You can probably think of + many apps and websites that ask you to provide text in order to do something.\r\n\r\nIn + programming, we have to represent text in a specific way to distinguish it + from other words in our code, such as variable names. But we'll cover that + later...\r\n\r\nAt the beginning of class you created a Mad Libs on paper, + which takes user input in the form of nouns, adjectives, and verbs to create + a unique \"How-to\" manual. You'll be translating your own Mad Libs How-to + into an app in this lesson.\r\n\r\n# Do This:\r\n\r\n- __Play with this Mad + Libs app__ a couple of times to see a digital version of the paper game. \r\n- + __Think about how the final text is created__ based on the input from the + user. How would you describe in words the algorithm for creating it?" + CSPU5_U3L16 Mad Lib Student Setup_markdown_instruction: "# Back to Mad Libs: + Design Your App\r\nNow that you've had some practice getting user text and + making new strings with it, you're ready to turn your How-to Mad Libs into + an app. To get started, you'll set up the layout. There are two main screens:\r\n\r\n__Screen + 1: Collect User Input__ \r\n- On this screen, you'll use __text labels__ + and __text input__ design elements to set up the different words you want + the user to provide.\r\n- A __Next__ button takes you to Screen 2 to view + the full Mad Libs.\r\n\r\n__Screen 2: View Mad Libs__ \r\n- On this screen, + you'll use the __text area__ design element to create the space where the + user's completed Mad Libs will be displayed.\r\n- A __Play again__ button + takes you to back Screen 1.\r\n<br>\r\n<br>\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Screen + 1:</strong>\r\n</td>\r\n<td>\r\n<strong>Screen 2:</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/ccea092b516047dff82fafa50b47bcc7-image-1447974038265.00.17 + PM.png\" style=\"width:150px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/0f832e6314ad98170a3cddb317d26e41-image-1445898480304.27.45.png\" + style=\"width:151px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n# + Do This:\r\n\r\n- Create the two screens for your app, including the design + elements in each one.\r\n- Requirement: Request at least 3 separate words + from the user on Screen 1.\r\n- Create the event handlers for the __Next__ + and __Play again__ buttons to respond to clicks.\r\n- Use `setScreen` in the + event handlers to get the screen navigation working.\r\n" + CSPU5_U3L16 Mad Lib getText_markdown_instruction: "# Make It Mad! Add the User's + Text to Your Mad Libs Outline\r\n\r\nNow that you have your Mad Libs outline + appearing in the text area, it's time to __incorporate the user's text__ + to make your Mad Libs come alive.\r\n\r\n# Do This:\r\n\r\n- Did you pick + good ID names for your text input elements? Update them now if you didn't!\r\n- + When the __Next__ button is clicked, __get the user's text from the text + inputs on Screen 1 and store each in a separate variable__.\r\n- Use string + concatenation to __incorporate the user's text into your Mad Labs string__ + before updating the text area on Screen 2. \r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nUse + `getText` to get the text from each of the text inputs on Screen 1.\r\n</details>\r\n<details>\r\n<summary>**Should + I make local or global variables?**</summary>\r\nRemember that the decision + to create local variables or global variables is a question of _scope_. Where + will you need to access these variables in your program? If you are only using + the variables in the click callback function for the \"Next\" button, then + they can be _local_ variables in that function. \r\n</details>" + CSPU5_U3L16 Mad Lib setText_markdown_instruction: "# Update the Text Area with + Your Mad Libs Outline\r\n\r\nWhen figuring out how to make progress with a + program, it helps to break the problem down into smaller steps and test your + program incrementally. So rather than jumping straight to getting the user + input and __concatenating__ it with your Mad Libs outline, start first by + just making sure that you can get your Mad Libs outline to appear in the text + area when the __Next__ button is clicked on the first screen. \r\n\r\nBut + wait! If you just use `setText` and pass in the string of your Mad Libs outline, + it will look like the screen on the left where all the steps are smushed together. + You can use one or more newline characters, `\"\\n\"`, in your string to create + a line break in your text.\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Without + newlines</strong>\r\n</td>\r\n<td>\r\n<strong>With newlines</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n\r\n<img + src=\"https://images.code.org/24fb1385d6199cd52c6e1d3d11e547fc-image-1448404478181.png\" + style=\"width:201px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/3a627993f9e0e4a6d462c8a21b335058-image-1448404299215.png\" + style=\"width:200px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n\r\n# + Do This:\r\n\r\n- When the __Next__ button is clicked, you already switch + to Screen 2, but now you should also call `setText` on the text area on Screen + 2 to your Mad Libs outline. See the images above for one way to temporarily + handle the word placeholders.\r\n- Add in newline characters `\"\\n\"` in + your Mad Libs string to format it.\r\n\r\n<details>\r\n<summary>**Newline + Examples**</summary>\r\n<table style=\"width:100%; margin-left:25px;\">\r\n<tr>\r\n<td + style=\"vertical-align: text-top; border-right:1px solid #000\">\r\n\t**Example1:**<br/><br/>\r\n \r\n <samp>console.log(\"How + to Drive\\nStep 1.\");<br/><br/></samp>\r\n \r\n *will be displayed + as...*<br/><br/>\r\n \r\n <samp>How to Drive<br/>Step 1.<br/><br/></samp>\r\n \r\n *...on + your console.*\r\n</td>\r\n<td style=\"padding-left:20px;\">\r\n<samp>**Example2:**<br/><br/>\r\n \r\n var + step1 = \"Step 1: ...\";<br/>\r\n \r\n var step2 = \"Step 2: ...\";<br/>\r\n \r\n console.log(step1 + + \"\\n\" + step2);<br/><br/></samp>\r\n \r\n *will be displayed as...*<br/><br/>\r\n \r\n <samp>Step + 1: ...<br/>Step 2: ...<br/><br/></samp>\r\n \r\n *...on your console.*\r\n</td>\r\n</tr>\r\n</table>\r\n</details>" + CSPU5_U3L16 Mad Lib toUpper_markdown_instruction: "# Why Are You Yelling At + Me?! *toUpperCase* and *toLowerCase*\r\n\r\nThe main functionality of the + Mad Libs app is complete, but there are some finishing touches to add. The + user may type input with random letter capitalization, but the Mad Libs output + string should be consistently capitalized.\r\n\r\n# Do This:\r\n\r\n- Pick + one or more pieces of the user's input text to transform into \"yelling\" + or emphasize by __making it uppercase__ before displaying it.\r\n- For the + other pieces of the user's input text, __make it lowercase__ before displaying + it.\r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nRemember the rules + of updating variables! You can update a variable after first getting its current + value and then doing something with it. <br> Example: `song = song.toUpperCase();`\r\n</details>" + CSPU5_U3L18 comparison operators_markdown_instruction: "# Explore Comparison + Operators with Console.log\r\n\r\n**Your task:** Make each expression evaluate + to **true** by changing only the comparison operator.\r\n\r\nWe can easily + test the results of comparison operators with `console.log`. \r\n\r\n* Run + the code provided - see results in the console debug area below.\r\n* All + of the Boolean expressions currently evaluate to `false`.\r\n* **Modify the + code** so they all evaluate to `true`\r\n* **Change only the operator**\r\n\r\nExample:\r\n\r\n* + `(3 > 4)` evaluates to **false**...\r\n* Change it to `(3 < 4)` (*3 is **less + than** 4*) to make it **true*\r\n\r\n**HINT:** The workspace starts in text + mode because you might find that doing this in text mode is much easier and + faster than dragging out new blocks. You can flip back to block mode if you + like.\r\n" + CSPU5_U3L19 - fix the var name syntax error v2_markdown_instruction: "<!---\r\n# + Debugging Variables\r\n<img src=\"https://images.code.org/18cb0f3b0fc43def369a3329854edc2e-image-1447272068495.png\r\n\" + style=\"float: right; border: solid 1px black; width: 350px\">\r\n\r\nOne + of the most common errors that can happen when you try to run a program is + `Unknown identifer`.\r\nThis is just the computer trying to tell you that + it doesn't recognize something you wrote. Usually it's the name of a variable + or function that you're trying to write and there is a small misspelling.\r\n\r\n**The + computer doesn't hate you :)** It just needs everything to be exact so it + can understand what you're trying to get it to do.\r\n\r\n**App Lab** alerts + you to potential errors in two ways:<img src=\"https://images.code.org/329990c2e51e1e07a16d5e550cf766f0-image-1447272337465.gif\" + style=\"width: 350px; float: right; border: solid 1px black\">\r\n\r\n* Hover + your mouse over the yellow triangles or red squares next to line numbers in + the code to see what they say.\r\n* As usual, the Debug Console will also + tell you about any errors while your program is running. \r\n--->\r\n\r\n# + Do This:\r\nWe've given you some code with some errors in it. Look at the + error messages and try to figure out the problem.\r\n\r\n* **Run the program**.\r\n* + **Locate and fix the error**.\r\n\r\nWhen you get it right the output to the + console should look like this:\r\n\r\n![](https://images.code.org/9c7a8eb5db973f81eb2faa89713d4f30-image-1445477911014.png)\r\n\r\nAs + a reminder, App Lab gives you hints about errors in two ways: \r\n\r\n* Hover + your mouse over the yellow triangles or red squares next to line numbers in + the code to see what they say.\r\n* As usual, the Debug Console will also + tell you about any errors while your program is running. \r\n" + CSPU5_U3L19 - test reassignment of two vars_markdown_instruction: "# Variable + Reassignment - Part 1\r\n\r\nSo far we have only set a variable's value once. But + it's called a *variable* for a reason - its value can change (or vary) throughout + a program. This is useful and necessary for keeping track of things like a + score in a game.\r\n\r\nTo re-assign a value to a variable all you have to + do is maintain the mental model of what's happening:\r\n\r\n * Variables + are containers for information.\r\n * The `=` sign is an instruction to set + the value.\r\n * A series of assignment statements (see example to right) + is a list of instructions to execute one at a time - it's not a series of + equations that define the state of the world.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/066db834ae289ac538609b68c6492c4a-image-1445944263895.png\" + style=\"float: right\">\r\n\r\n * **Make a prediction.**\r\n\r\n The code + on the following screen looks like what is shown at right. Study it and make + a prediction about what will happen when you run the code. What will the values + of `a` and `b` be at the end of the program?\r\n\r\n* **Add `console.log` + statements.** \r\n\r\n Prove it to yourself by adding `console.log` statements + at the end of the program to find out what the value of `a` and `b` are.\r\n + \r\n* **NOTICE:** in the code above, after the variable `a` has been created + using `var`, to change a variable's value, you only need to refer to the + variable by its name. The word `var` only needs to be used once - when the + variable is created for the first time. \r\n\r\n* It's a **common mistake** + to use `var` everytime you want to *use* a variable but just **remember `var` + means CREATE a new variable**. When you create a new variable it will lose + its old value. We'll look at errors related to this later.\r\n\r\n" + CSPU5_U3L19 - three basic ops of variables_markdown_instruction: "# Variables + Toolbox\r\nLet's get started with the most basic example of using and controlling + the computer's memory with variables. The toolbox has a couple of new commands + for working with variables.\r\n\r\nWe've given you some starter code that + does three things:\r\n<table>\r\n<tr>\r\n<td>\r\n<ol>\r\n<li>**Creates** a + variable called `score`</li>\r\n<li> **Assigns** the value *0* to `score`</li>\r\n<li>**Displays** + the value of the `score` to the console (see hint below about quotes) </li>\r\n</ol> + \r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/056a735a96a603e23768d66f0de32961-image-1445462590619.png\" + style=\"width: 350px\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n\r\n# Do This:\r\nYou're + going to add another variable, assign it a value, and then display it to the + console.\r\nUse the starting code as a model for what you need to create now.\r\n<img + src=\"https://images.code.org/72744382133081947777e67a5988d4ea-image-1445462803999.gif\" + style=\"float: right; width: 350px\">\r\n* **Create a new variable** by dragging + out the `var` block.\r\n* **Change the name of the variable** from the default + `x` to `lives` (see animation at right).\r\n* **Set the value of `lives` to + be 3**.\r\n* **Add** `console.log` **messages** to show the value of `lives`.\r\n\r\nThe + output in the debug console should look like this:\r\n \r\n <img src=\"https://images.code.org/6405a3ed95ca3125ea1b2c9ffbdffa94-image-1445349849482.png\" + style=\"border: solid 1px gray\">\r\n<details>\r\n <summary> Debugging Tip: + Displaying values of variables [click to expand]</summary>\r\n **NOTE: To + print the value of a variable you *should not* use quotes.**\r\n Notice + the difference between these two statements: <br>\r\n `console.log(\"score\")`<br>\r\n `console.log(score)`<br>\r\n It's + subtle but important:\r\n <br>\r\n <li>When `console.log` sees quotation + marks it thinks you want to print out the literal characters in the quotes.\r\n <li>When + `console.log` sees something **without quotation marks** it assumes you're + trying to print a variable, and it goes to retrieve its value and displays + that. </li>\r\n \r\n</details>" + CSPU5_U3L19 - variable reassignment challenge pt2_markdown_instruction: "# + Wrapping Up Variables - This is Not Math Class\r\n\r\nHopefully you now understand + the gist of working with variables. The major thing to remember is that every + time you see an `=` sign it means that you are instructing the computer to + set a variable to a new value. \r\n\r\n<img src=\"https://images.code.org/ecced8eb916809f66ac7d555a819c2a6-image-1447803015383.17.43.png\" + style=\"float: right\">\r\nThe example to the right is something that definitely + wouldn't make sense in math class, but you should be able to reason about + it as a piece of code. Because it's code, you can also **insert** statements + to display the value of variables as they change. You don't have to guess!\r\n\r\n# + Do This:\r\n* ** Make a prediction.** \r\n\r\n As usual you should **first** + look at the code given to you and reason about what it does. You should try + to predict what the value of `num` will be after all lines have executed.\r\n\r\n* + ** Insert 3 `console.log` statements.**\r\n\r\n Insert `console.log` statements + into the existing code to display each value of `num` immediately after it's + changed. (The animation below shows how to get started.)\r\n \r\n ![](https://images.code.org/0e425ce1a186d49d230395032f970913-image-1447802992249.19.24 + add console message.gif)\r\n \r\n* **Was your prediction right?**\r\n \r\n + After you figure out the answer, if your prediction was off, try to understand + why. Where was your misunderstanding?\r\n" + CSPU5_U3L19 - write var and string with same name v2_markdown_instruction: "# + Debugging Variables\r\n<img src=\"https://images.code.org/1363b1799cd0f70e383664b4c6359ef4-image-1445479475849.png\" + style=\"float:right; width: 200px\">There is a simple command called `write` + in the UI Controls toolbox that is a fast and easy way to display text in + the app itself. The way you use it is very similar to `console.log`. Let's + debug another problem only using `write` instead of `console.log`. \r\n\r\nYou + may have already run into this problem! But it's worth mentioning again. + To display the value of a variable you *should not* use quotes. Notice the + difference between these two statements - the comments next to each line explains + the differences:\r\n``` \r\n write(\"score\"); // will display the literal + characters s-c-o-r-e\r\n write(score); // will retrieve the value of score + and display it\r\n```\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/a0ff680a245dba5546183e07ebbeaef2-image-1447270477159.png\" + style=\"float: right; width: 250px\">To solve these problems you **should + only add or remove quotation marks**.\r\n* **Run the starter code**\r\n* **Locate + and fix the problems**\r\n\r\n**GOAL:** Make the app display what's shown + at right by only adding or removing quotation marks from the code given.\r\n" + CSPU5_U3L23 Chatbot Conditionals 1_markdown_instruction: "# Adding Intelligence + Using Conditionals\r\n\r\nSo far the digital assistant you created responds + with the same message no matter what the user types. Let's look at how to + make the digital assistant smarter. Let's work on creating a Movie Bot example + before returning to your digital assistant.\r\n\r\nIn the last lesson we learned + about `if`, `else-if`, and `else` statements. These allow us to make decisions. + In the digital assistant we want to make decisions based on keywords. **The + first keywords we want the Movie Bot to respond to are the movie genres: comedy, + romance, action, and horror. **\r\n\r\n**Note: ** Check out the flowchart + below to see the logic we are trying to add. The current portions of the diagram + that we are creating are <mark>highlighted in yellow</mark>.\r\n\r\n# Do This:\r\n\r\n* + **Run the code** to understand what it does.\r\n\r\n* **Add `else-if` statements** + to the `if` to check if the word the user typed matches **action, romance + and horror**. **Note:** Movie Bot will only understand input in the form + of \"comedy\" not \"Comedy\" or \"What is a comedy?\" \r\n\r\n* **Add an `else` + statement** to print a default answer for any other input.\r\n\r\n<img src=\"https://images.code.org/8ec655795042a2a3a22a85f0886f0d21-image-1446067226646.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/8ec655795042a2a3a22a85f0886f0d21-image-1446067226646.png\" + target=\"_blank\">Open diagram in a new tab</a>\r\n" + CSPU5_U3L23 Free Response Getting Started_markdown_instruction: "Siri is a + digital assistant built into Apple's iOS devices, including iPhones and iPads. + Watch the advertisement for Siri, below. \n\n<iframe width=\"637px\" height=\"375px\" + src=\"https://www.youtube.com/embed/8ciagGASro0\" frameborder=\"0\" allowfullscreen></iframe>\n\n<br/>\n__Reflect + on the prompts below:__ \n\n- What types of information does Siri respond + to in the video?\n- What do you think Siri is paying attention to in order + to create these answers?\n" + CSPU5_U3L23 Free Response Wrap Up_markdown_instruction: "Identify a global + problem that a NLP (Natural Language Processing) application could be used + to help solve. \n\n* Describe the problem.\n* Explain how you think a NLP + app could contribute to a solution.\n* Describe how the app would interact + with the user. \n* What would you name the app? \n\n" + CSPU5_U3L24 Chatbot Basic Conditionals_markdown_instruction: "# Digital Assistant + Project\r\n\r\n**Your Digital Assistant Project is back!** Now that you've + learned how to use conditional logic to control your program flow, it's time + to add functionality to the digital assistant you previously designed.\r\n\r\n# + Do This:\r\n\r\n* You should have already created a flowchart to design the + logic for your digital assistant. \r\n* **Use your flowchart to program your + digital assistant so that it \"intelligently\" responds to user input.**\r\n\t* + Feel free to make changes to your existing project in Design Mode, if needed.\r\n* + **Test your program thoroughly** to make sure your digital assistant responds + to user input appropriately.\r\n* Once you're done, **submit your project!**\r\n" + CSPU5_U3L24 Nested Conditionals 1_markdown_instruction: "# Adding *includes* + to the Movie Bot\r\n\r\nIf our Movie Bot is asked a question like \"What is + a good comedy movie?\" it currently won't know how to respond, **even though + the question includes one of its keywords.** By using `includes` we can allow + our Movie Bot to sense if a keyword appears anywhere in the question.\r\n\r\n# + Do This:\r\n\r\n* **Suggestion: Switch to Text Mode.** This will be much easier + in Text Mode.\r\n* **Change all your boolean expressions to use `includes` + instead of `==`**.\r\n* **Test out a couple sentences with your keywords** + to make sure the change worked.\r\n\r\n![](https://images.code.org/0df459c4ccd9b613b23409af7ff5f59e-image-1446139233341.gif)\r\n\r\n**Note: + ** Check out the flowchart below to see the logic we are trying to change.\r\n\r\n\r\n<img + src=\"https://images.code.org/ea8340252f50774c352f58fa7cc12e5c-image-1446069734921.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/ea8340252f50774c352f58fa7cc12e5c-image-1446069734921.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3L24 Nested Conditionals 2_markdown_instruction: "# Nested Conditionals\r\n\r\nThe + way we left the Movie Bot in the last exercise is a little strange to see + as a user. **Currently when the input doesn't have a question mark the Movie + Bot says \"I only respond to questions.\" but it still provides a recommendation**. + We're going to alter our code so that the movie recommendation is only provided + if the user asks a question.\r\n\r\n# Do This:\r\n\r\n* **Nest your movie + genre `if` statements** inside the \"?\" `if` statement so that **a recommendation + is made only if a question was asked**.\r\n* **Remove the \"That's a good + question.\"** output.\r\n* Ensure that **if your input is not a question** + then the response is **I only respond to questions.**\r\n* **Test out a couple + sentences with your keywords** to make sure the change worked.\r\n\r\n**Example + Input --->** | **Output**\r\n---|---\r\nWhat's the best action movie? | The + best action movie is any James Bond movie.\r\nI love comedy | I only respond + to questions.\r\n<br>\r\n**Note: ** Check out the flowchart below to see the + logic we are trying to change.\r\n\r\n<img src=\"https://images.code.org/c319d7ba43112451a6b25aa9475cacb5-image-1446074593924.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/c319d7ba43112451a6b25aa9475cacb5-image-1446074593924.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3L24 introIncludes_markdown_instruction: "# *includes*\r\n<img src=\"https://images.code.org/7373ad2ad98b0d815ce0b8196c2ec177-image-1446070324010.11.43 + PM.png\" style=\"width: 250px; float:right\">\r\n\r\nWe're going to explore + a new function called `includes`. This function can be used to check if one + string appears anywhere inside of another. Just like `toUpperCase` and `toLowerCase` + this function is called using **dot notation**.\r\n\r\n# *includes* Returns + a Boolean\r\n**`includes` is a function that returns a boolean.** In other + words, when the function runs it will **evaulate to either `true` or `false`**. + This function can be used **anywhere you would normally use a boolean expression**.\r\n\r\nYou've + actually **seen a few functions that return a value before this**. `randomNumber` + is a function that returns a number and `getText` is a function that returns + a string. In every case we've used these functions **as if they were the + data type they return (or evaulate to)**. Notice that in block mode these + functions don't have the connectors that other commands do since they will + be used as a piece of data within another function.\r\n\r\n# Do This:\r\n\r\n* + **Read the documentation** for `includes`.\r\n* **Starter code** has been + provided which shows one instance where a string does include a `searchValue` + and one where it does not.\r\n* **Replicate the style** of these commands + to check the rest of questions provided.\r\n* **Create three statements of + your own using `includes`** making use of the `console.log` statements provided.\r\n* + **Once you're comfortable with this command move on.**" + CSPU5_U3L25 - drag out key event_markdown_instruction: "# *keypress*\r\n\r\nIf + we want to add keyboard input to our apps we'll need to learn about how key + events work in App Lab. To start let's take a closer look at the `onEvent` + block. We already know that event handlers call a function. What we'll see + now is that they also **pass a parameter**. The default name for this parameter + is simply `event` but you can change it to be anything you like. \r\n\r\nThe + `event` parameter is a more complex kind of variable (called an \"Object\") + that we'll learn more about later. For now just know that for both mouse + and keyboard events, the event parameter passes more information about the + event. In the case of key events **you can find out the key(s) that were actually + pressed by using `event.key`**.\r\n\r\n# Do This:\r\n\r\n* Drag out an `onEvent` + block.\r\n* Change the ID to `screen1` and the event type to `keypress`. \r\n\r\n<img + src=\"https://images.code.org/537b5bbef3db62c90155528e6753a00a-image-1447175732347.gif\" + style=\"width: 450px\">\r\n\r\n* Once you hit **Run**, **click on the screen + so that the keystrokes will register**.\r\n* **Type different combinations + of keys** and check out the results in the console. Does every key combination + print to the console? Some keys to try:\r\n * Letter keys\r\n * Number + keys\r\n * Shift key\r\n * Hold shift and letter\r\n * Delete key\r\n * + Left and right arrow keys\r\n * Press and hold a key" + CSPU5_U3L25 - play sound when up key_markdown_instruction: "# Play Sound With + Keys\r\n\r\nYou may have noticed from the last couple of levels that the value + of `event.key` is just a string which is the name of the key. As a result + we can check which key was pressed with a simple conditional statement. For + example to check for the press of the **\"a\"** key we could write `if (event.key + == \"a\")`.\r\n\r\n# Do This:\r\nThe **starter code provided** plays the sound + whenever ANY key is pressed.\r\n\r\n* Use `console.log` to **find out the + value of `event.key` when the up arrow is pressed.**\r\n\r\n* **Add an `if` + statement** so the sound only plays when the when the **up arrow** is pressed." + CSPU5_U3L25 Free Response 3_markdown_instruction: "What is the output of this + code segment?\n\n\tvar phrase = \"I am so\";\n\tvar emotion = \"excited\";\n\tvar + sentence = phrase + \" \" + emotion.toUpperCase() + \"!\";\n\tconsole.log(sentence);\n<br/>\n" + CSPU5_U3L26 AND operator_markdown_instruction: "# AND Operator in Movie Bot\r\n\r\nOn + the last level you may have noticed that if you typed in a question like \"What + is an R rated comedy movie?\" It gives two movie suggestions! It would make + more sense for it to give one suggestion.\r\n\r\nWe could use nested `if` + statements to do this by nesting `if` statements about ratings inside of `if` + statements about genre. However, you might be getting a sinking feeling that + this could become a lot of nested `if` statements very quickly! \r\n\r\n**Instead + let's use the AND operator (`&&`) to check for a genre and a rating at the + same time.** \r\n\r\n<img src=\"https://images.code.org/a9307ead3b147e0a8016f2054f47f5f2-image-1446153610104.png\" + style=\"width: 200px; float:right\">\r\n\r\nBe careful about the order of + the `if` statements. As a general principle you want to check the most specific + conditions before checking more general ones. For example, you want to have + an `if` statement that checks for rating AND genre evaluated before one that + just checks for genre on its own. Having a more general `if` statement checked + first might cut off or prevent more specific conditions from being reached.\r\n\r\nYou + still want your app to give suggestions when just a rating or just a genre + is detected, so keep this principle of ordering in mind. (Try them in the + reverse order if you're interested in seeing what happens :))\r\n\r\n**Note: + ** Check out the flowchart below to see the logic we are trying to add.\r\n\r\n# + Do This:\r\n\r\n* **Try the question \"What is an R rated comedy movie?** + to see the result.\r\n\r\n* **Update the code to give only one movie suggestion + when a genre and a rating are detected in the input.**\r\n\t* Make one set + of `if`, `else-if`, and `else` statements about genre and rating\r\n * + Add conditional statements to check for a comedy movie AND a rating. You could + do this for all the genres but stick to one for now.\r\n\r\n* **Test out a + couple sentences with your keywords** to make sure the change worked.\r\n\r\n<img + src=\"https://images.code.org/e64c26fed584ddbb5e5a62e6800d5e69-image-1455816162662.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e64c26fed584ddbb5e5a62e6800d5e69-image-1455816162662.png\" + target=\"_blank\">Click to open in separate window.</a>" + CSPU5_U3L26 OR operator_markdown_instruction: "# OR Operator in Movie Bot\r\n\r\nLet's + try to check for the keywords related to questions (\"who\", \"what\", \"where\", + \"when\", \"why\", \"how\", and \"?\") to decide if the user asked a question. + You could do this with a chain of `if-else-if` statements, but it would not + be very efficient. \r\n\r\nInstead let's use a **series of OR operators (`||`)** + to check whether \"who\", \"what\", \"where\", \"when\", \"why\", \"how\" + or \"?\" show up in the user input. \r\n\r\n**Note: ** We've updated the + the flowchart below to show the logic we are trying to add to the initial + question.\r\n\r\n# Do This:\r\n\r\n* **Update the `if` statement** to check + if **\"who\" OR \"what\" OR \"where\" OR \"when\" OR \"why\" OR \"how\" OR + \"?\"** have been typed in by the user.\r\n\r\n* **Test out a couple sentences + with your keywords** to make sure the change worked.\r\n\r\n<img src=\"https://images.code.org/6104c7fd0ecd31010d12be79bc350831-image-1446495141539.png\" + style=\"width=500px\">\r\n" + CSPU5_addDescriptiveIDsToTurtleDriver_markdown_instruction: "# Descriptive + IDs\r\n\r\n**You try it** - give your buttons **descriptive and meaningful + IDs** rather than the default `button1`, `button2` and so forth.\r\n\r\nAfter + you change the ID in Design Mode remember to:\r\n\r\n* **Change the event + handler code** so that it correctly references the new IDs of the buttons\r\n* + **Run - Test - Debug ** the program to make sure it works, and debug any problems.\r\n\r\n<details><summary><strong>Reminder:</strong> + Rules About IDs [click to expand]</summary>\r\n\r\nIn making descriptive and + meaningful IDs there **are some rules about IDs** you need to know. IDs...\r\n\r\n<li> + are case sensitive</li>\r\n<li> cannot contain spaces.\r\n<li> *must* begin + with a letter (A-Z or a-z) and may be followed by any number of digits and + letters.\r\n<li> can contain hyphens (\"-\"), underscores (\"_\"), colons + (\":\"), or periods (\".\").\r\n\r\n</details>\r\n" + CSPU5_basic if - DIY secret number_markdown_instruction: "# Do it yourself + - What's the secret number?\r\n\r\nInsert lines of code between the \"Welcome\" + and \"Goodbye\" that do the following:\r\n\r\n1. use `promptNum` to ask the + user to enter the \"secret number\"\r\n2. add an `if` statement to check if + the number is the secret (you can make up your own secret number)\r\n3. use + `console.log` to display a message if the user guessed correctly\r\n\r\n**NOTE:** + Don't go overboard here adding messages. Just get practice adding a prompt + and an if-statement on your own. Make sure it works and move on.\r\n" + CSPU5_basic if - check driving age_markdown_instruction: "# You try it\r\n\r\nThis + is only *slightly* different from the voting example you just saw.\r\n\r\n* + **Add an if-statement** to the code to check the `age` to see if the person + is old enough to drive. (In most states you need to be 16 or older).\r\n* + **Display a message if the person is old enough drive.**\r\n\r\nYou can add + an if-statement by dragging it out from the toolbox. We've provided the + console.log message you should use. Just drag it inside the if-statement. This + animation shows most of what you have to do.\r\n\r\n![](https://images.code.org/4ef3562d035ffacf292daac508fea34f-image-1479746969387.gif)" + CSPU5_basic if - voting examle_markdown_instruction: "# Recreate the voting + example\r\n\r\n* Replace `condition` with a Boolean expression to check if + the person is 18 or older.\r\n* Run the program a few times, entering different + ages at the prompt\r\n* Make sure you generate the two outputs that are possible + from this code.\r\n\r\n" + CSPU5_basic if-else - driving age_markdown_instruction: "# You try it\r\n\r\nLet's + modify the driving age example to add an `else` clause.\r\n\r\n* **Add an + `else` ** to the if-statement.\r\n* **Add a console.log** message inside the + else clause that says something like \"sorry you can't drive yet\".\r\n\r\nYou + can add an else-statement by clicking on the `+` attached to the if statement. We've + provided some starting code.\r\n\r\n**BONUS** - if they are not old enough + to drive you could do the math and tell them how many years they have to wait." + CSPU5_moveTurtleOnButtonClick_markdown_instruction: "# onEvent\r\n\r\n**You + try it!** - Make the turtle move forward when the button is clicked.\r\n\r\n* + **Add an `onEvent` block** \r\n* Set the **id** of your button\r\n* Add `moveForward` + to the function definition\r\n\r\n* **Run the program** to make sure it works.\r\n* + **Try changing the event type** to something like *\"mouseover\"* and see + what happens. Not all event types will work with buttons but it's fun to + play a little bit.\r\n\r\nOnce you've got the program responding to some + event, congratulations! You've just made your first interactive app. \r\n\r\n**Click + Finish** to move on to the next problem.\r\n\r\n" + CSPU5_playWithEventTypes_markdown_instruction: "\r\n# Play with different event + types\r\n\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 + AM.png\" style=\"float: right\">\r\nIf you haven't yet, you should experiment + with different event types with your `onEvent` blocks. The ones that will + work best here are mouse-related ones such as:\r\n * click\r\n * mousemove\r\n * + movedown\r\n * mouseup\r\n * mouseover\r\n\r\n*There are some events that + capture keystrokes from the keyboard. These are interesting, but they do not + work easily with buttons. We'll stick to mouse events for now, and get to + keys later.*\r\n\r\n**Be sure** to experiment with each of the ones that start + with \"mouse...\".\r\n\r\nOnce you've have played a little bit, click Finish + to move on.\r\n\r\n" + CSPU5_predict_applab_onEventWithWrongID_markdown_instruction: "# Debugging + Event-Driven Programs: IDs\r\n\r\n**You Try it: Checking IDs** -- Your first + debugging task will be to verify that the button IDs match the event-handlers. You'll + also see error messages in the **\"Debug Console\"**\r\n\r\n![](https://images.code.org/6bb61c1ab1af5c0ce84a8cc4dc9b95cd-image-1476970435861.png)\r\n\r\n1. + **Run the program** and inspect the error messages in the Debug Console.\r\n * + **NOTE:** an error message *only* indicates where the computer ran into trouble. It + doesn't tell you the root cause of the problem, necessarily.\r\n2. **Investigate** + -- Use the **error message as a clue** to investigate the possible problem.\r\n3. + **Fix it** -- Make a change that you think will fix the problem.\r\n4. **Run + the program** and verify that not only are there no error messages but the + program works as intended (turtle moves forward on button click).\r\n5. **Didn't + work?** - repeat the steps above. And stick with it! You'll get it eventually.\r\n\r\n**Remember:** + You can see the ID of a UI element by just hovering your mouse over it.\r\n<details><summary>Hint? + [click here]</summary>\r\n\r\n<li>In this case the ID of the button does not + match the ID in the onEvent command</li>\r\n<li>The error message is saying: + \"you're telling me to listen to events on a UI Element with id 'button1' + and no such thing exists!\" </li><br>\r\nThere are two ways to fix this:<br>\r\n<li>Change + the ID in the event handler code to match the button ID in design mode.</li>\r\n<li>...or + Change the button ID in design mode to match the event handler</li></details>\r\n\r\n" + CSPU5_setPosition to fixed location_markdown_instruction: "# Using setPosition\r\n\r\n<img + src=\"https://images.code.org/b664824ffeb3347b2e0b6d12447b4e8b-image-1476891499229.gif\" + style=\"width: 150px; float: right;\">\r\n\r\n**Now you try it** - use [setPosition](#triggercallout=setPosHover) + to **move the button to the middle of the screen when clicked**. \r\n\r\nWe've + set up a small project for you with a button (id: `moveBtn`) already added + in design mode.\r\n\r\n1. Add an `onEvent` block\r\n2. Drag a `setPosition` + command into the event handler function\r\n3. Set the x,y coordinate so that + the button ends up in the middle of the screen.\r\n * You'll need to experiment + a little bit to find coordinates that work for you.\r\n * Hover over the screen + to find a good starting point.\r\n\r\n**Tip**: when you see a command that + is linked like this: [setPosition](#triggercallout=setPosHover) click it! + -- it will show you other hints.\r\n\r\nOnce you've got the button moving + to the middle of the screen click Finish to move on to the next challenge.\r\n" + CSPU5_turtleDriver_add2ndButton_markdown_instruction: "<img src=\"https://images.code.org/7447f9f6df9a1931297e1f8fa7284f28-image-1481582422206.gif\" + style=\"float: right; width: 200px\">\r\n\r\n# Practice! Add another button\r\n\r\nNow + that you know the pattern try it out. **Add a 2nd button to the screen that + turns the turtle to the left when clicked.** The finished product should + look similar to the image shown here.\r\n\r\nRemember the steps:\r\n\r\n 1. + **Design Mode**: drag another button onto the screen\r\n 2. Switch to Code + Mode: **add an onEvent block** to the code\r\n 3. **Add code** inside the + function to make the turtle turn left\r\n 4. Run. Test. Debug\r\n\r\n<details><summary>Need + Help? [Click Here]</summary>\r\n\r\n<h3>\r\nHere is an example of adding other + button to make the turtle turn left\r\n</h3> \r\n\r\n<div style=\"column-count: + 3; column-gap: 20px; column-rule: 0.5px solid #00adbc; -moz-column-count: + 3; width: 100%\">\r\n\r\n<p><span style=\"font-weight: bold; color: #00adbc; + font-size: 200%;\">1.</span>\r\nAdd a UI element to the screen in Design Mode</p>\r\n\r\n<p><span + style=\"font-weight: bold; color: #00adbc; font-size: 200%;\">2.</span>\r\nAdd + another onEvent block to the code. <strong>Note:</strong> you need new onEvent + block <em>for every</em> event you want to capture.</p>\r\n\r\n<p><span style=\"font-weight: + bold; color: #00adbc; font-size: 200%;\">3.</span>\r\nAdd code to the event + handler function you want.</p>\r\n\r\n</div>\r\n\r\n<img src=\"https://images.code.org/f695b83911560bf628750ed2a134a38c-image-1476818017592.png\" + style=\"display: block; width: 100%\">\r\n\r\n<div style=\"column-count: 1; + column-gap: 20px; column-rule: 0.5px solid #00adbc; -moz-column-count: 3; + width: 33%;\">\r\n\r\n<p><span style=\"font-weight: bold; color: #00adbc; + font-size: 200%;\">4.</span>\r\n<strong>Debugging Tip:</strong> if you hover + your mouse over a UI element while in code mode, it will show you the ID of + the element. This very useful when you have a lot of elements on the screen.\r\n\r\n</div>\r\n\r\n<div + style=\"clear: both\">\r\n \r\n</div>\r\n\r\n\r\n\r\n\r\n</details>\r\n" + CSP_U2_Shakespeare_Question_markdown_instruction: "Respond to this prompt or + to another as directed by your teacher.\r\n\r\nShakespeare’s complete works + have approximately 3.5 million characters. Which is bigger in file size: + Shakespeare’s complete works stored in plain ASCII text or a 4 minute song + on mp3? How much bigger?" + Calc Circles of Eval .1_markdown_instruction: "You’ll be writing a kind of + code called Evaluation Blocks, because each block of code evaluates to a single + value. Change the ??? in this code so that the block evaluates to 5." + Calc Circles of Eval .2_markdown_instruction: "This Evaluation Block is a multiplication + function which takes two numbers and returns the product of those numbers. + Edit this block so that it multiplies 2 * 5" + Calc Circles of Eval .3_markdown_instruction: "Here's a function for addition + which takes two numbers and returns their sum. Use this Addition Block to + add 3 + 6." + Calc Circles of Eval .4_markdown_instruction: "Here we've nested an Addition + Block inside a Multiplication Block. Complete this code so it multiplies 3 + by (4 + 1)" + Calc Circles of Eval 2_markdown_instruction: "Use a Multiplication Block to + complete this code." + Calc Circles of Eval 3_markdown_instruction: "Complete the Evaluation Blocks + to match this statement." + Calc Circles of Eval 4_markdown_instruction: "This code is missing a couple + of Evaluation Blocks - make sure you put everything in the right order." + Calc Circles of Eval 7_markdown_instruction: "Complete the Evaluation Blocks + to match this statement." + Calc Circles of Eval 8_markdown_instruction: "Complete the Evaluation Blocks + to match this statement." + Calc Circles of Eval 9_markdown_instruction: "Complete the Evaluation Blocks + to match this statement." + Calc Circles of Eval Free Play_markdown_instruction: "Free Play: Try using + the Evaluation Blocks to write some equations of your own. How does nesting + the blocks in different ways impact their evaluation?" + Calc Define Funcs 1_markdown_instruction: "Let's look at some more traditional + algebraic functions now. Here's a function translated from the simple algebraic + function `f(x) = x + 1`. What would you expect this function to output if + provided an input of 15?" + Calc Define Funcs 2_markdown_instruction: "Write a function `f` that takes + a parameter `x` and returns `x - 10`. Test your function using `f(15)`." + Calc Define Funcs 3_markdown_instruction: "We don't have to call our function + `f` every time; create a function called `times-ten` that should take a parameter + `x` and return `x * 10`. Once you've created the function, run `times-ten(50)`." + Calc Define Funcs 4_markdown_instruction: "Write a function called `half` that + takes a number `x` and returns half that number. Once you've written the + function, use it to calculate `half(21)`" + Calc Design Recipe 1_markdown_instruction: "Let's use the Design Recipe to + create a function called `cube` - this function should take in a Number and + return that number to the power of 3. Make sure to write two example cases! + When you're done, use your new function to calculate `cube(7)`." + Calc Design Recipe 2_markdown_instruction: "Your school is holding a bake sale, + and you need to track the cost of making each cookie, the money paid, and + the total profit. Cookies cost $0.25 each to make, and sell for $1.50/cookie.\r\nWrite + the function `cost`, which takes in the number of cookies you intend to sell, + and returns the cost of making those cookies.\r\n\r\n_Test your function by + calculating the cost of 42 cookies_" + Calc Design Recipe 3_markdown_instruction: "Write the function `sales` which + takes in the number of cookies sold, and produces the amount of money customers + spent to buy those cookies (each cookie is sold at $1.50).\r\n\r\n_Test your + function by calculating the sales for 135 cookies_" + Calc Design Recipe 4_markdown_instruction: "Using the two functions we just + wrote, write the function `profit`, which takes in the number of cookies you + sold, and gives you back the total profit you make from selling your cookies, + accounting for the cost of baking them.\r\n\r\n_Test your function by calculating + the total profit for 15 cookies_" + Calc Rocket 1_markdown_instruction: "In the last puzzle you wrote a contract + for the function `rocket-height` that states it has a range of Number, domain + of Number, and should return the height of the rocket traveling at 15 m/s + after a given number of seconds. Let's write an example case now for the + height of the rocket at 3 seconds." + Calc Rocket 2_markdown_instruction: "Great, let's do one more example before + writing the function - what should the rocket height be after 30 seconds?" + Calc Vars 1.1_markdown_instruction: "Here we've set the `age` variable to + 17 years. Can you write an expression that calculates `age` in days?" + Calc Vars 1_markdown_instruction: "Variables allow us to name values so that + we can easily refer to them repeatedly throughout our programs. Here's a + variable called `age`. Set its value to your age and click run." + Calc Vars 2.1_markdown_instruction: "Here's a new variable called `age-in-months`. + Use the variable `age` to set `age-in-months`." + Calc Vars 2_markdown_instruction: "Can you write an expression that calculates + `age` in months?" + 'Challenge: Buzzer and LED_markdown_instruction': "# Challenge\r\n\r\nCheck + with your teacher before starting the challenge.\r\n\r\nNow that you know + how to use the LED and buzzer, try creating an app that can play a variety + of different sounds and which uses the LED. You could make a keyboard or synthesizer + that plays various sounds when you click different buttons." + 'Challenge: Input and UI_markdown_instruction': "# Stop\r\n\r\nYou have reached + the end of the lesson. Check in with your teacher to see if you should work + on the challenge level before you start. This is an extra challenge to practice + your skills if you have time. If you don't have time for it no big deal!\r\n\r\n# + Challenge\r\n\r\nGo to <a href=\"studio.code.org/p/gamelab\" target=\"_blank\"> + Full Game Lab </a> and try to make your own profile creator like the example + program on this level." + 'Challenge: Lights Picker_markdown_instruction': "# Challenge: More Patterns\r\n\r\nAdd + some more patterns to your app. Find a partner and add their pattern as an + option. Make sure to put each pattern into its own function." + 'Challenge: List of Notes_markdown_instruction': "# Challenge: \r\n\r\nCheck + with your teacher before starting the challenge.\r\n\r\n**Starter Code:** + An array with the name of the 30 buttons on the screen (not including the + New Pattern button) is provided for you. \r\n\r\n**Write Code:** Each time + the New Pattern button is clicked at least one random button from the list + is set to a random color.\r\n" + 'Challenge: Random Button Colors_markdown_instruction': "# Challenge: Random + Button Colors\r\n\r\nCheck with your teacher before starting the challenge.\r\n\r\n**Starter + Code:** An array with the name of the 30 buttons on the screen (not including + the New Pattern button) is provided for you. \r\n\r\n**Write Code:** Each + time the New Pattern button is clicked at least one random button from the + list is set to a random color.\r\n" + 'Challenge: Sunset with Counters_markdown_instruction': "# Challenge: Nightfall\r\n\r\nThink + you've got drawing with counters down? Try this challenge.\r\n\r\nThe color + block can take a 4th input that controls the opacity of the color. You can + click the arrows on the side of the color block to expand this 4th input.\r\n\r\n![](https://images.code.org/7844f8cb46eade7cec452b7a4d98124b-image-1484964689007.10.08 + PM.png)\r\n\r\n# Do This\r\n\r\nThis is your same sunset animation from before. + Can you make the scene slowly change to night?\r\n\r\n![](https://images.code.org/b055142110b0d0ed092d6496447aad6e-image-1463079830043.gif)\r\n\r\n" + Classroom Assessment Techniques_markdown_instruction: "The following link is + a resource that presents the process of designing and using classroom assessment + techniques:" + Classroom Management Tips for School Computer Labs_markdown_instruction: "## + Strategies for Managing a Computer Lab\r\n\r\n\r\nIf you're new to teaching + a computer lab, consider implementing some of the 7 tips for establishing + strong instructional routines, outlined in this article by Angela Watson. + \r\n\r\n<br><br>" + 'Collaborative Learning and Group Work: Description and Strategies_markdown_instruction': "The + following link to Cornell University Center for Teaching Excellence provides + a brief description of group learning along with a handful of specific techniques + for designing and implementing group work activities: " + Color Blindness Filter_markdown_instruction: "# Color Blindness Filter\r\n\r\n\r\n\r\n" + Color Contrast Checker_markdown_instruction: "# Color Contrast\r\n\r\nPeople + need to be able to see and read the content on your web page for it to be + useful. Some people might have bad eye sight, others are color blind. How + do you design with these differences in mind? \r\n\r\nOne of the easiest ways + to insure that many people will be able to read the content on your website + is to make sure their is enough contrast between the different colors you + are using together on your site.\r\n\r\nhttp://gomedia.com/zine/tutorials/rule-three-contrast-contrast-contrast/\r\n\r\n\r\n# + Do This\r\n\r\n* Use the color contrast checker to see the difference in contrast + of the different colors you are using together on your site." + Considerations for the 1-to-1 Classroom_markdown_instruction: "## 1-1 Classroom\r\n\r\nIf + you're new to managing a classroom with computers, check out this article + in Education Week, which outlines some important considerations.\r\n\r\n<br><br>" + Course 4 Artist 1_markdown_instruction: "Help me draw a box. \r\n(Each line + is 200 pixels long) \r\n\r\n<br/><br/>\r\n\r\n" + Course 4 Artist 10_markdown_instruction: "<img src=\"https://images.code.org/c876143212d195192013582f57c6df04-image-1445625392518.36.18.png\" + width=\"150px;\" style=\"mix-blend-mode: multiply;\" />\r\n\r\n**Play time:** Here + is the code for an interesting shape. \r\n\r\nWhat happens when you repeat + it multiple times, turning between each iteration? \r\n\r\nNotice that the + turns in this shape add up to *420 degrees*, which means that when your artist + is done drawing, it will be facing a different direction than when you started. That + new direction is exactly *60 degrees* to the *right* of where you began.\r\n\r\n<hr/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 4</b></summary>\r\n<br/>\r\nIf you want to come full circle in just 4 repetitions, + you need the artist to turn a total of **360 degrees/4 = 90 degrees** each + time. You can do that by adding an extra `turn right by 30 degrees` block + to the outer loop (since **60+30 = 90**.) \r\n<br/>\r\n<img src=\"https://images.code.org/9da67a628ed72e87520a02a0d917e2af-image-1440132370113.44.12.png\" + width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n<br/><br/>\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 6</b></summary>\r\n<br/>\r\nWhen you repeat the shape as-is 6 times, you get + a total rotation of **6x60 degrees** which is a full **360 degree** cycle. \r\n<img + src=\"https://images.code.org/b79f96b87097ce3afe8a6a5608d04e36-image-1440132287456.44.27.png\" width=\"500px;\" style=\"mix-blend-mode: + multiply;\" />\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 12</b></summary>\r\n<br/>\r\nIf you want to repeat the image 12 times, you + need the artist to turn a total of **360 degrees/12 = 30 degrees** each iteration. That + means you will need to adjust the artist back a bit with `turn left by 30 + degrees` before you repeat the shape again. <br/><br/>\r\n<img src=\"https://images.code.org/ad254952522674496918561096817c66-image-1440132424792.44.01.png\" + width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n</details>\r\n</h4>\r\n\r\nNow + it's your turn! Can you recreate each image by repeating the starting shape? " + Course 4 Artist 11_markdown_instruction: "<img src=\"https://images.code.org/6cac10470af71bbb5d75bf5e2669046f-image-1439939145211.png\" + width=\"200px\"/>\r\n\r\nNow for a challenge! \r\n\r\nHere is a design that + uses only blocks that you have already been shown. Can you figure out how + to recreate it? Feel free to use trial and error. You are not expected to + get it perfect the first time.\r\n\r\nThe repeated shape is almost identical + to the one from the last puzzle, except that the length used in the first + loop is a little smaller. " + Course 4 Artist 12_markdown_instruction: "<img src=\"https://images.code.org/70795d84048767ae7fb65883f476b27c-image-1440050836837.01.09.png\" + width=\"250px\"/>\r\n\r\nFree Play Inspiration: You've now learned everything + you need to know to make a pattern like this! If this picture inspires you, + try to make something similar. Otherwise, create something all your own. \r\n\r\n<br/>\r\n" + Course 4 Artist 13_markdown_instruction: "Still playing? Here is a blank canvas + where you can design anything you want!" + Course 4 Artist 2_markdown_instruction: "Can you use a loop to draw the greyed + out square? \r\n(Each side is 300px long)" + Course 4 Artist 20_markdown_instruction: "Still playing? \r\n\r\nHere is a + blank canvas where you can create whatever you want!" + Course 4 Artist 3_markdown_instruction: "Try to figure out what happens if + you run this code (or press \"Run\" to test it). \r\n\r\nThen, repeat it + enough times to complete the drawing." + Course 4 Artist 4_markdown_instruction: "How many degrees are in a circle? \r\nFill + in the repeat block with that number to create a circle of colors." + Course 4 Artist 5_markdown_instruction: "Draw the other half of this design + so it's symmetrical. \r\nThe triangles are equilateral and are 50 pixels + long. \r\n\r\nYou may have to run the code several times to figure out all + of the blocks that need to be added." + Course 4 Artist 6_markdown_instruction: "Complete the code to draw these three, + equilateral triangles." + Course 4 Artist 7_markdown_instruction: "Now nest this loop inside another + loop to draw 10 triangles. " + Course 4 Artist 8_markdown_instruction: "Draw this sun by looping this whole + block of code multiple times." + Course 4 Artist 8a_markdown_instruction: "Remember this shape? Now we're + going to let you build it without giving you any blocks to start!" + Course 4 Artist 9_markdown_instruction: "Loop this design 10 times and make + sure to turn between each shape that's drawn. " + Course 4 Artist Binary 1_markdown_instruction: "Here's a function that takes + a binary string of 1's and 0's and instructs the artist to follow them from + left to right, top to bottom. \r\n\r\nThe artist will fill-in the squares + when it sees a 1 and ignore the square when it sees a 0. \r\n\r\n**Run this + code to see how the artist uses binary to draw this pattern.**" + Course 4 Artist Binary 1a_markdown_instruction: "Here's a function that takes + a binary string of 1's and 0's and instructs the artist to follow them from + left to right, top to bottom. The artist will fill-in the squares when it + sees a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to + see how the artist uses binary to draw this pattern." + Course 4 Artist Binary Free Play 2b_markdown_instruction: "<img src=\"https://images.code.org/0a30f23ff6138828d053267719d34fa8-image-1444435986654.00.22.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own. + \r\n<br/>\r\n" + Course 4 Artist Binary pre1_markdown_instruction: "Binary is a way of representing + information using only two options. In this case, <b>off</b> and <b>on</b>.\r\n<br/>\r\nHere, + we're going to use the number <b>0</b> as code for \"off\" and the number + <b>1</b> as code for \"on\".\r\n<hr/>\r\nWe've provided you with a grid of + \"pixels\" that you can walk through and make designs by turning on only certain + squares.\r\n\r\n<b>Use the blocks below to have the artist draw \"01010101\" + in binary in the first row.</b>" + Course 4 Artist Binary ryan_markdown_instruction: "Binary is a way of representing + information using only two options. Here, we're going to use the options + \"off\" (represented by the number 0) and \"on\" (represented by the number + 1). \r\n\r\nWe've provided you with a grid of \"pixels\" that you can walk + through and make designs by turning on only certain squares. Can you have + the artist draw \"01010101\" in binary in the first row?" + Course 4 Artist For Loops 1_markdown_instruction: "Use a repeat block to draw + this triangle that is 50 pixels wide.\r\n\r\n" + Course 4 Artist For Loops 10_markdown_instruction: "Free Play Time! Have fun + drawing whatever you like with the blocks you have learned how to use." + Course 4 Artist For Loops 11_markdown_instruction: "Remember back in a previous + stage when we used a variable to control the number of sides in a shape? We + are going to do the same thing with the `counter` variable now. \r\n\r\nThis + pattern starts with a triangle and adds one side at a time until it draws + a decagon (10 sides). Each side should be 100 pixels long. \r\n\r\nHow will + you use the `counter` variable from the `for` loop to recreate this drawing?" + Course 4 Artist For Loops 11a_markdown_instruction: "Let's put it all together! \r\n\r\nUsing + your knowledge of `for` loops and the `counter` variable, create this drawing + where each shape has two more sides than the last. Make sure that each side + is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little + of the code has been provided for you." + Course 4 Artist For Loops 12_markdown_instruction: "That looked pretty cool, + but now I'd like to draw each shape next to the last one. This time each + side is 20 pixels. Use a jump block to jump forward 40 pixels after each shape." + Course 4 Artist For Loops 13_markdown_instruction: "Hmmm, those shapes are + getting bigger every time! Didn't we already solve this problem with variables? + How can we use the counter variable to make the sides smaller as there are + more of them? Instead of moving forward by a set amount, try moving forward + (100 / counter) pixels." + Course 4 Artist For Loops 14_markdown_instruction: "If you turn a little bit + more or less than you normally would for a shape, it creates a neat effect. + \r\n\r\nTry using some of the code from the last level, but turning 89 degrees + to create this twisted square spiral." + Course 4 Artist For Loops 15_markdown_instruction: "**Free Play:** Try making + some drawings of your own using `for loops`. We've added a few useful variables + for you as well." + Course 4 Artist For Loops 2_markdown_instruction: "I've put the code for drawing + a triangle inside a `for loop` that counts from 50 to 100 by 10. \r\n\r\n<br/>\r\n<strong>NOTE:</strong> + Make sure you look at the code *before* you hit \"Run\"." + Course 4 Artist For Loops 3_markdown_instruction: "Use the last puzzle as a + reference to complete this one. The smallest triangle has 20 pixel sides, + the largest has 200 pixel sides, and each triangle is 20 pixels larger than + the last." + Course 4 Artist For Loops 4_markdown_instruction: "How would you modify what + you've learned to draw these squares? They start at 15 pixels long, the largest + is 300 pixels long, and each square is 15 pixels larger than the last. " + Course 4 Artist For Loops 5_markdown_instruction: "Good job on the last puzzle! + Let's use that \"counter\" variable block again to draw this cool picture. + \r\n\r\n" + Course 4 Artist For Loops 6_markdown_instruction: "Free Play! Try using a for + loop to draw a growing shape pattern of your own design." + Course 4 Artist For Loops 6a_markdown_instruction: "Make three small changes + to the code from the last level to get this!" + Course 4 Artist For Loops 7_markdown_instruction: "What happens if you remove + the \"Repeat 3\" from this algorithm, keeping the \"move\" and \"turn\" blocks + in the for loop? \r\n\r\n<br/>\r\nIn this spiraling triangle, each side is + 20 pixels longer than the last.\r\n\r\n" + Course 4 Artist For Loops 8_markdown_instruction: "Just one little change to + the code from the last image can create this drawing. Can you figure out what + that change is?\r\n\r\nHint: You need to remove something! " + Course 4 Artist For Loops 8a_markdown_instruction: "Just one little change + to the code from the last image can create this image. Can you figure out + what that change is?" + Course 4 Artist For Loops 9_markdown_instruction: "Can you make a spiral? Move + forward from 1 to 75 pixels, increasing by 1 pixel each time.\r\n\r\n" + Course 4 Artist For Loops Challenge_markdown_instruction: "**Challenge:** Can + you figure out how to use all of the things you've learned to create this + image of polygons, all with 40 pixel sides?\r\n\r\nRemember, in order to create + a spiral, you cannot close the polygon. This means that each shape will need + to have one fewer sides than usual." + Course 4 Artist For Loops Challenge_a_markdown_instruction: "**Challenge:** + Can you figure out how to use all of the things you've learned to create + this image of polygons, all with 40 pixel sides?" + Course 4 Artist For Loops inspire_markdown_instruction: "<br/><br/>\r\n<img + src=\"https://images.code.org/9b5897e059bb29bd2faf8504659a3cfc-image-1440719685627.49.33.png\" + width=\"250px\"/> \r\n<br/><br/>\r\n**Free-Play Inspiration:** You've now + learned everything you need to know to make a pattern like this! If this picture + inspires you, try to make something similar. Otherwise, create something all + your own." + Course 4 Artist Functions 12.1_markdown_instruction: "Let's create a function + called `draw an octagon 20` that draws an octagon where each side is 20 pixels + long." + Course 4 Artist Functions 13.1_markdown_instruction: "Now, let's make a function + called `jump to upper right` that moves the artist to the upper-right of the + octagon that you just drew so we can finish this pattern. \r\n<br/>\r\n*Hint: To + get yourself to the upper-right corner, try jumping in a pattern that makes + just 3/8 of the octagon.* " + Course 4 Artist Functions 14.1_markdown_instruction: "Now, let's make a function + called `jump to upper right` that moves the artist to the top-right of the + octagon that you just drew so we can finish this pattern. " + Course 4 Artist Functions Inspiration_markdown_instruction: "<img src=\"https://images.code.org/cf373e03bede480ae54aec72ce823454-image-1442951867535.54.11.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own. + " + Course 4 Artist Functions challenge_markdown_instruction: "<img src=\"https://images.code.org/69f1c2b415f907c86aaa6ed2534c3682-image-1442870371171.13.38.png\" + width=\"250px\"/>\r\n\r\n**Challenge Level:** Use what you've learned in + this stage and others to figure out how to make the drawing above. " + Course 4 Artist Functions inspire_markdown_instruction: "<img src=\"https://images.code.org/6c6ff8e3b5a763926102033a94720f8b-image-1441300952649.19.47.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own. \r\n<br/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Hints</b></summary>\r\n\t<br/><br/>\r\n\t<h5>\r\n\t<details>\r\n\t<summary><b>Hint + #1</b></summary>\r\n \t<br/>\r\n \tUse a `for loop`, then use its counter + variable inside of a nested `repeat` loop. \r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint + #2</b></summary>\r\n \t<br/>\r\n \tEach iteration, you should `draw + a square` then jump forward.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint + #3</b></summary>\r\n \t<br/>\r\n \tYou will need to turn left by 90 + degrees outside of your `repeat`, but still inside the `for loop`.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Solution</b></summary>\r\n \t<br/>\r\n \t<br/>\r\n \t<img + src=\"https://images.code.org/6b07c5de58a1fa573bef19182105f516-image-1441300922567.14.00.png\" + width=\"450px\"/>\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n</details>\r\n</h4>\r\n\r\n<br/>\r\nWhat + happens if you make the squares a little bigger or smaller? How about if + you turn right instead of left?" + Course 4 Artist Inspire_markdown_instruction: "<img src=\"https://images.code.org/b5e28b084cb331ee030ea3853ed921bd-image-1440060815818.51.21.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! If this picture inspires you, + try to make something similar. Otherwise, create something all your own. " + Course 4 Artist Vars 1_markdown_instruction: "Let's draw an equilateral triangle. + \r\n\r\nIt has to be exactly 100 pixels long on each side.\r\n\r\n<br/>\r\n" + Course 4 Artist Vars 10_markdown_instruction: "Here's an algorithm that draws + a triangle out of smaller triangles. Can you modify it so that it uses the + `sides` variable to draw each triangle? \r\n\r\n</br>\r\nLook through the + code, and every time you see the number 3, replace it with your `sides` variable. + Remember to use the `set sides` block." + Course 4 Artist Vars 11_markdown_instruction: "Here’s some more complicated + code using the same concepts from the last puzzle - what should you set the + `sides` variable to in order to draw this picture made of squares?\r\n\r\n<p + style=\"font-size:small; padding: 15px 15px 15px 40px; background-color:#dcf3f3; + border-radius:10px;\">\r\n\tJust for fun: Try using a few different numbers + to see what happens to the pattern!\r\n</p>" + Course 4 Artist Vars 12_markdown_instruction: "Let's set the `sides` variable + to 5. The more sides we add to this algorithm, the bigger this whole pattern + gets! \r\n\r\n<br/>\r\nNotice that there is another variable called `length`. + \r\nWe can now use that variable wherever we have a `move forward` block. + \r\n\r\nSet the `length` variable to 75 for this shape." + Course 4 Artist Vars 13_markdown_instruction: "When a shape has lots of sides, + each side needs to be shorter if you want the whole pattern to fit on the + screen. \r\n\r\nLet's recreate the algorithm for this amazing pattern, but + instead of manually setting the `length` variable, let's use a math block + with the `sides` variable inside to make sure that each shape fits correctly. \r\n\r\nThe + perimeter of each polygon is 300 pixels." + Course 4 Artist Vars 14_markdown_instruction: "**Free Play**: Check it out! + Now your algorithm is nested within one more loop. Experiment with changing + the values of your two variables to draw cool patterns.\r\n\r\nFor even more + effect, try playing with color! Use random colors inside loops to see how + it changes your design." + Course 4 Artist Vars 2_markdown_instruction: "Instead of using `move forward + by 150`, the `move` block is now referencing a variable called `length`. Can + you set `length` to 150 to draw this new triangle?" + Course 4 Artist Vars 3_markdown_instruction: "Here's a loop that draws a square, + but something's missing. Can you fix it so that it uses the variable \"length\" + to figure out how long each side should be? " + Course 4 Artist Vars 4_markdown_instruction: "Now I want to make a rectangle + that is twice as tall as it is wide. We've got a variable called `width` + that needs to be set to 100. Can you use the math blocks to complete the code?" + Course 4 Artist Vars 6_markdown_instruction: "Here’s some code that can draw + any regular polygon. \r\n\r\nThere’s a new variable called `sides` that is + set to 4. \r\n\r\nCan you use the `sides` variable (along with the math block) + to turn the right amount regardless of how many sides are in the polygon?" + Course 4 Artist Vars 7_markdown_instruction: "Use what you learned in the last + puzzle to create this hexagon using the `sides` variable.\r\n\r\nSee how you + could change just one value to draw a triangle, square, pentagon, or octagon?" + Course 4 Artist Vars 8_markdown_instruction: "**Free Play:** Experiment with + the number of sides this shape has. Can you change the algorithm so that the + overall size of the shape stays the same, no matter how many sides it has? + " + Course 4 Artist Vars 9_markdown_instruction: "Modify this algorithm so it uses + the `sides` variable instead of a fixed number to draw a triangle. Don't + forget to use the `set sides to` block." + Course 4 Bee 1_markdown_instruction: "The bee can't tell what's under the + cloud! \r\n\r\nUse the `if` block to check whether there is a flower under + the cloud. \r\n\r\nGet nectar one time, **ONLY** if there is a flower." + Course 4 Bee 2_markdown_instruction: "Use the `if/else` block to check each + object to see if it's a flower or a honeycomb. \r\n\r\nIf it's a flower, + collect one nectar...otherwise, make one honey!" + Course 4 Bee 3_markdown_instruction: "The unknown object is either a flower + or a honeycomb. \r\n\r\nThis time, use the `if/else` block to collect one + nectar **if** it is a flower, **else** make one honey (because then it would + be a honeycomb)." + Course 4 Bee 4_markdown_instruction: "This purple flower may have either 3, + 2, or 1 nectar. \r\n\r\nHere an `if/else` block is combined with another `if/else` + block to create an `if/else-if/else` statement. \r\n\r\nComplete the solution + to collect the unknown amount of nectar." + Course 4 Bee 5_markdown_instruction: "This purple flower may have either 3, + 2, or 1 nectar. Add an `if-else` block to create an `if, else-if, else` block. + Complete the solution to collect the unknown amount of nectar." + Course 4 Bee 6_markdown_instruction: "This purple flower may have either 3, + 2, or 1 nectar. Create an `if, else-if, else` block to collect the unknown + amount of nectar." + Course 4 Bee 7_markdown_instruction: "Use everything you have learned so far + to collect all the nectar. The purple flower may have either 3, 2, or 1 nectar." + Course 4 Bee For Loops 11_markdown_instruction: "What's wrong with this loop? + See if you can fix it and make the bee collect all the nectar." + Course 4 Bee Params 1_markdown_instruction: "Write a sequence to collect all + of the nectar using `get 3 nectar` which turns, moves to collect the nectar, + and then returns to the original location." + Course 4 Bee Params 2_markdown_instruction: "Modify the `get 3 nectar` function + so it makes me turn right instead of left to the flowers." + Course 4 Bee Params 3_markdown_instruction: "Now there are flowers on both + sides! \r\n\r\nWe've added variables called `left` and `right` for you to + use, and now there is a parameter called `direction` inside `get 3 nectar`. + \r\n\r\n**Edit `get 3 nectar` so that the bee turns the correct direction + when the variables `left` or `right` are passed into the function.**" + Course 4 Bee Params 5_markdown_instruction: "Let's start from scratch - can + you create a new function called `get 5 nectar` with a direction parameter?" + Course 4 Bee Params 6_markdown_instruction: "Wouldn't it be nice if we could + collect all of these nectars with a single function? \r\n\r\n<br/>\r\nTry + adding a new parameter to your function called `nectar units` to control the + amount of nectar to collect. You'll probably want to rename the function + too!" + Course 4 Bee Params 7_markdown_instruction: "Try using your new function to + collect all of this nectar.\r\n\r\n<br/>\r\n" + Course 4 Bee Params 8_markdown_instruction: "**Challenge:** Now there's honey + to deal with too! \r\n\r\nRewrite your function to use both the number of + honey units and the number of nectar units. How would you use those numbers + to decide what you should do?" + Course 4 EC 1a_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 1b_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 2a_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 2b_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 2c_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 2d_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 3_markdown_instruction: "**Functions Super Challenge:** Use what + you learned in the previous level to draw an image like this.\r\n\r\n*Note: + The code becomes more simple if you incorporate parameters.*\r\n\r\n<br/>\r\n<img + src=\"https://images.code.org/d3d6a51fafdcc0a09a5c6b0e0f3c2b92-image-1446239805818.08.59.png\" + width=\"300px\"/>\r\n<br/> \r\n\r\n\r\n" + Course 4 EC 3a_markdown_instruction: "**Extreme Challenge:** No rules. No clues. + Just the challenge!\r\n\r\n<br/>\r\n<img src=\"https://images.code.org/d3d6a51fafdcc0a09a5c6b0e0f3c2b92-image-1446239805818.08.59.png\" + width=\"300px\"/>\r\n<br/> \r\n\r\n\r\n" + Course 4 Maze 4_markdown_instruction: "Try the `repeat` block to use fewer + blocks when solving this puzzle..." + Course 4 Play Lab Params 1_markdown_instruction: "Here's a function called + `jump` that causes your main character to jump up 100 pixels. \r\n\r\nRun + the program and use the jump function to collect all of the flags by moving + the dog with the arrow keys." + Course 4 Play Lab Params 10_markdown_instruction: "We've added one last function for you.\r\n<hr/>\r\n\r\n<h4>\r\nUse an `if` statement to program your game to call the `level_up` function only when `player_score` becomes greater than a certain number.<br/><br/>\r\n</h4>\r\n<i>For example: `player_score` > 6</i>\r\n\r\n\r\n<hr/>\r\n<i>Play the game, and make it to level 3 to move to the next puzzle.</i>" - grade5_playlab_variables9_markdown_instruction: "Here's a function called - `patrol`. \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 - pixels." - grade5_playlab_variables_freeplay_markdown_instruction: "Free Play time! Here - are all of the variables we've played with so far in this stage, as well - as a few more in case you want them. \r\n\r\nNotice that there are now so - many blocks in our toolbox that they need to be organized! Here, we've put - each piece into an appropriate category. Take some time to explore everything - that is available. When you're done browsing, make a game or story using - repeats, variables, and events. \r\n\r\n*Hint: scroll down to see all the - commands in the workspace.*" - grade5_playlab_variables_jump1_markdown_instruction: "This puzzle uses a hidden - function that makes the dog jump when the `up` arrow is pressed. The height - of the jumps can be set at the start of the game using the `jumpPower` variable. - Try to touch all of the flags!" - grade5_prompt_test_markdown_instruction: "Variables aren't always numbers. - What if you wanted to store a word or text? Experiment with the new `ask` - block." - gradek_artist_loops1_markdown_instruction: "Help the artist draw this line - two times forward.\r\n\r\n![](https://images.code.org/7ddc7b43ef27197559c7defb0af56d03-image-1470776934855.gif)" - gradek_artist_loops2_markdown_instruction: "Our artist is trying to draw a - line five times, but can't get it right. Can you help?\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" - gradek_artist_loops3_markdown_instruction: "Now, use a `repeat` loop to draw - this line five times!\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" - gradek_artist_loops4_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nDraw a line seven steps long. This will - become our horizon.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" - width=\"300\"/>\r\n" - gradek_artist_loops5_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nLet's put a nice hill in the back.<br/><br/>\r\n</div>\r\n\r\n<img - src=\"https://images.code.org/bbbd114642d829029fc3b0566a4437e3-image-1477107329933.gif\" - width=\"300\"/>\r\n" - gradek_artist_loops6_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the - water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" - width=\"300\"/>\r\n" - gradek_artist_loops7_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nWe need a ladder up to the boat.<br/>\r\n</div>\r\n\r\n<img - src=\"https://images.code.org/6e4dc767e55d11400f35c6680bbfe1e3-image-1470788284437.gif\" - width=\"300\"/>" - gradek_artist_loops8_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** The stairs down to the dock - are broken. Help me fix them.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/53c68133f897895caa0369b4afa3ec3b-image-1470789463684.gif\" - width=\"300\"/>\r\n" - gradek_artist_loops9_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nTime to head back to land. Help me put down - stones so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" - width=\"300\"/>\r\n" - gradek_artist_loopsA_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nHelp me build steps to watch the ship sail - away.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/0dfa647dbc835fae09989a0fbfd798c7-image-1470871168220.gif\" - width=\"300\"/>\r\n" - gradek_artist_loopsFP_markdown_instruction: "The artist saw something funny - in the distance. Draw what you think he saw.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" - width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" - width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" - width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" - width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" - gradek_playlab_events1c_markdown_instruction: "Jorge the Dog wants to say \"Hi - there.\" Can you help him?" - gradek_playlab_events2c_markdown_instruction: "Help Jorge the Dog get moving - by connecting the ![](https://images.code.org/b3d6215901969328333d6393f8101c5b-image-1478142333199.png) - block to the ![](https://images.code.org/4f2130b2a3053695414a02c3d39ef864-image-1478143461271.png) - event block that is already in the workspace." - gradek_playlab_events3c_markdown_instruction: "Now, get Jorge to move right - when the ![](https://images.code.org/b99365eb23280f158e6ef570fe1c8a76-image-1478145132820.png) - button is clicked." - gradek_playlab_events4c_markdown_instruction: "Add events to have Jorge move - up and down when the ![](https://images.code.org/379493b95d158b273f1424538b1c635a-image-1478145402316.png) - and ![](https://images.code.org/f490d78efd81c21ab74286aefe7af097-image-1478145385132.png) - buttons are pressed." - gradeK_sequence_4_markdown_instruction: "Try this one yourself from the beginning.\r\n\r\n![](https://images.code.org/43001078c4df6feea1a6edf025192d85-image-1467929743355.gif)" + Course 4 Play Lab Params 2_markdown_instruction: "Now we've got flags that + are too high for our current jump! Let's use both the \"up\" and \"down\" + arrows so that we can have multiple jump heights. \r\n\r\nWe need to add + a parameter to our jump function called `height`. \r\n- The up arrow should + cause the dog to jump 200 pixels \r\n- The down arrow should make it jump + only 100 pixels. \r\n" + Course 4 Play Lab Params 3_markdown_instruction: "We have added another parameter + to the jump function so that we can use it with other actors. Each actor is + represented by a number, starting from one. \r\n\r\n<br/>\r\nEdit the `jump` + function so that it uses the `actor` parameter to make the correct character + jump. " + Course 4 Play Lab Params 4_markdown_instruction: "Here's a function called + `patrol`. \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 + pixels." + Course 4 Play Lab Params 5_markdown_instruction: "Edit the the `patrol` function + to add an `actor` parameter, so that we can call it for each of the actors + on the screen. Remember, the actors correspond to numbers 1, 2, and 3." + Course 4 Play Lab Params 6_markdown_instruction: "Add another parameter called + `speed` to the `patrol` function. Try using a `set speed` block with the new + `speed` parameter to help Penguin get both flags before the other sprites + even get one." + Course 4 Play Lab Params 7_markdown_instruction: "Let's have some fun! Look + at the code provided to see if you can figure out what each block does. \r\n\r\nWhen + you're done, use the arrow keys to control Dog and collect all of the flags.\r\n\r\n**NOTE:** + You don't need to make any changes to the program" + Course 4 Play Lab Params 8_markdown_instruction: "Use the `when actor touches` + block to send Dog back to the top-left ONLY if Dog touches any of the other + actors." + Course 4 Play Lab Params 9_markdown_instruction: "Here's our game from an + earlier stage but most of the code is hidden. We've added a new function + called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nEdit the function + so that a new parameter called `points` is added to `player_score`. \r\n<br/>\r\nThe + variable `player_score` should increase each time Dog tags Cat with pie, and + decrease each time that Cat tags Dog with a sandwich.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: + When you're done, click \"Run\" to play. When Dog scores 6 points, you will + move on to the next puzzle.*" + Course 4 Play Lab Vars 1_markdown_instruction: "This time you don't have to + write any code, just hit `Run` to play the game! \r\n\r\n<br/>\r\nIn this + game, you're the dog who is trying to collect more flags than the cat. Use + the down arrow to control the dog. Press `Finish` when you're done playing." + Course 4 Play Lab Vars 2_markdown_instruction: "The race in that last puzzle + wasn't very fair! Change the `dog_speed` variable to make sure you can collect + more flags than Cat. The first to collect 10 flags wins!" + Course 4 Play Lab Vars 3_markdown_instruction: "Here's a new kind of game! + \r\n\r\nYou don't need to change anything on this level.\r\n\r\n**Directions:** + Use the left and right arrows to move, and the up arrow to jump. See if you + can collect all of the flags." + Course 4 Play Lab Vars 4_markdown_instruction: "Now we're using a variable + called `height` to control how high the dog can jump. Update the `height` + variable so that the dog can jump high enough to reach all the flags. \r\n" + Course 4 Play Lab Vars 6_markdown_instruction: "<h5><b>\r\nIn our game, how + should we score points? \r\n</b></h5> \r\n<br/>\r\n\r\n1. Add 1 to your `points` + variable each time Dog hits Cat with a piece of pie. <br/> <br/> \r\n2. + Use the `when actor 2 touches anything` event to trigger an update to your + score. You can increment your variable by setting `points = points + 1.` <br/> <br/> + \r\n3. Get your score up to 10 to pass the level.\r\n\r\n<br/><br/>\r\n<h4>\r\n**Note:** + Use the right arrow to throw pie!\r\n</h4>" + Course 4 Play Lab Vars 7_markdown_instruction: "Nice, now let's make sure + this game isn't too easy to play! \r\n\r\nAny time Dog (actor 1) gets hit + by a sandwich from Cat (actor 2), you should lose a point. \r\n\r\nStart with + 10 points so it's not too hard. Let your score drop down from 10 to 0 to + pass the level." + Course 4 Play Lab Vars 9_markdown_instruction: "Free Play time! Here are all + of the variables we've played with so far in this stage, as well as a few + more in case you want them. \r\n\r\nNotice that there are now so many blocks + in our toolbox that they need to be organized! Here, we've put each piece + into an appropriate category. Take some time to explore everything that is + available. When you're done browsing, make a game or story using repeats, + variables, and events. \r\n\r\n*Hint: scroll down to see all the commands + in the workspace.*" + Course 4 Play Labs For Loops 1_markdown_instruction: "Let's make the dog speak + every number from 1 to 100. Use a `for` loop and the counter block to speak + the counter variable each time the loop is run." + Course 4 Play Labs For Loops 4_markdown_instruction: "Changing the increment + can be helpful, but we're still counting linearly (each number is the same + distance from the last) What if I wanted to count exponentially? \r\n\r\n<br/>\r\nWithout + changing the settings in this for loop, can you count 1, 4, 9, 16, 25... (counter + squared)?" + Course 4 Play Labs For Loops 4a_markdown_instruction: "Now, let's blend the + variables from Stage 7 together with your `counter` variable to make some + magic happen. \r\n\r\nIn this puzzle, Dog will count from **0** to **1000** + by `increment`. Set the `increment` variable to **10** at the beginning of + your code to see what happens." + Course 4 Play Labs For Loops 5_markdown_instruction: "In the last stage we + counted the square of each number. Try changing `counter ^ 2` to `counter + ^ 3` to count the cube of each number (1, 8, 27, 64, 125, 216, 343…)" + Course 4 Play Labs For Loops 5a_markdown_instruction: "In this puzzle, Dog + will be your time keeper.\r\n\r\nDog will count from **0** to **30** by `increment`. The + `increment` variable will begin with a value of **1**.\r\n\r\nCan you make + it so that each time you click Dog, `increment` increases by **2**? Click + the forward arrow to run the `for loop`. \r\n\r\n**Note:** Run the loop a + couple of times, clicking Dog before each one." + Course 4 Play Labs For Loops 6a_markdown_instruction: "Now that we've seen + how to control our `for loop` using variables inside of our program, let's + make a game!\r\n\r\nDog will still keep time by counting with our `for loop` + by `increment`, but this time we will add The Wizard into the mix. Can you + change the code so that `increment` goes up by two each time The Wizard is + clicked?\r\n\r\nWatch out! The Wizard moves quickly!" + Course 4 Play Labs For Loops 7a_markdown_instruction: "Now we're getting somewhere! What + if we start counting how many times we can click The Wizard before Dog gets + to 30? \r\n\r\nFinish adding blocks to The Wizard so that every time he's + clicked the variable `clicked` increases by one. You can ignore `increment` + for now.\r\n\r\n**Note:** Dog will start counting when you click `Run`." + Course 4 Play Labs For Loops 8_markdown_instruction: "Now, help the actors + move as they count. \r\n\r\nDog should move and count by adding 2 (`counter + + 2`) each time. Cat will move and count by multiplying by 2 (`counter *2`) each + time. Penguin will move and count to the power of 2 (`counter ^ 2`) each time. Who + will reach their flag first?" + Course 4 Play Labs For Loops 8a_markdown_instruction: "To finish our game, + we need to bring back the `increment` variable! Let's tie it to the level + of the game.\r\n\r\n1) Keep track of the number of times The Wizard is clicked. \r\n2) + If The Wizard is clicked at least 10 times before Dog counts to 30, raise + `increment` by 1 and start again. \r\n3) If The Wizard does not get clicked + at least 10 times, the game is over. " + Course 4 Playlab For Loop Freeplay_markdown_instruction: "**Freeplay:** Use + everything you've learned so far to make a game that includes a `for` loop!" + Course 4 Playlab For Loops 4b_markdown_instruction: "Now, these two characters + are going to race! \r\n\r\nEach of them will move `counter` steps at a time, + but their counters will have different values because of the `for` loops. \r\n\r\nCan + you change the **increment** in one of the loops so that the race is a tie?" + Course 4 Playlab For Loops 5b_markdown_instruction: "Adjust the interval on + these `for` loops so that the two characters end in the exact same place." + Course 4 Playlab For Loops 6b_markdown_instruction: "Now we're going to use + `for` loops in a whole different way!\r\n\r\nThis game gets hard quickly because + the time between disappearances shrinks fast!\r\n\r\n<hr/>\r\n\r\n**Edit this + `for` loop to create a game that's fun for you to play!** \r\n\r\n<hr/>\r\n\r\nPress + \"Run\" and click Madame Unicorn as many times as you can. Can you beat our + score of 24? " + Course 4 SCF 1_markdown_instruction: "**Functions Super Challenge:** Use the + suggested functions to draw four rows of hexagons. Notice how our even numbered + rows are shifted to the right?" + Course 4 SCF 1a_markdown_instruction: "**Functions Super Challenge:** Can you + figure out how to collect all of this nectar with the fewest blocks possible?\r\n" + Course 4 SCF 1b_markdown_instruction: "**Functions Super Challenge:** Can you + figure out how to collect all of this honey with the fewest blocks possible?\r\n\r\n" + Course 4 SCF 2_markdown_instruction: "**Functions Super Challenge:** Use what + you learned in the previous level to draw an image like this.\r\n\r\n*Note: + The code becomes more simple if you incorporate parameters.* " + Course 4 SCF 3 Fail 1_markdown_instruction: "**Functions Super Challenge #1:** + \r\n\r\n" + Course 4 SCF 3 Fail 2_markdown_instruction: "**Functions Super Challenge #1:** + \r\n\r\n" + Course 4 SCF 3_markdown_instruction: "**Functions Super Challenge:** Use what + you learned in the previous level to draw an image like this.\r\n\r\n*Note: + The code becomes more simple if you incorporate parameters.*\r\n\r\n<br/>\r\n<img + src=\"https://images.code.org/d3d6a51fafdcc0a09a5c6b0e0f3c2b92-image-1446239805818.08.59.png\" + width=\"300px\"/>\r\n<br/> " + Course 4 SCFL 1_markdown_instruction: "**For-Loops Super Challenge:** Solve + this puzzle with the fewest number of blocks possible." + Course 4 SCFL 1a_markdown_instruction: "**For Loops Super Challenge:** Can + you get Skrat to his acorn using as few blocks as possible?\r\n\r\n" + Course 4 SCFL 1b_markdown_instruction: "**For Loops Super Challenge:** Can + you get Skrat to his acorn using as few blocks as possible?\r\n" + Course 4 SCFL 2_markdown_instruction: "**For-Loops Super Challenge:** Solve + this puzzle with the fewest number of blocks possible. \r\n<br/>\r\n" + Course 4 SCFL 3_markdown_instruction: "**For-Loops Super Challenge:** Can you + figure out how to re-create this drawing? \r\n\r\n<img src=\"https://images.code.org/724b2efa8aefe863bd0d6491a3f1590f-image-1445563707400.26.50.png\" + width=\"350px\"/>\r\n" + Course 4 SCFL 4_markdown_instruction: "**For-Loops Super Challenge:** Can you + figure out how to re-create this drawing? \r\n\r\n<img src=\"https://images.code.org/407f502735beec686187451bdf67aada-image-1446002848700.59.34.png\" + width=\"350px\"/>" + Course 4 SCFL 5_markdown_instruction: "**For-Loops Super Challenge #5:** Can + you figure out how to re-create this drawing? \r\n\r\n<img src=\"https://images.code.org/407f502735beec686187451bdf67aada-image-1446002848700.59.34.png\" + width=\"350px\"/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Hints</b></summary>\r\n\t<br/><br/>\r\n\t<h5>\r\n\t<details>\r\n\t<summary><b>Hint + #1</b></summary>\r\n \t<br/>\r\n \tThe color change happens using the + `set color with red, green, blue` block. Red is always the value of `counter`, + green is always `255 - counter`, and blue remains constant at 255 exactly.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint + #2</b></summary>\r\n \t<br/>\r\n \tEach shape is a square with sides + that are `counter` pixels long, starting with 5px, and increasing by 5px all + the way up to 200px.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint + #3</b></summary>\r\n \t<br/>\r\n \tThe artist turns 15 degrees between + each square.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Solution</b></summary>\r\n \t<br/>\r\n \t<br/>\r\n \t<img + src=\"https://images.code.org/0bf4c87e33459f832258939ec53ad595-image-1446002848701.59.15.png\" + width=\"450px\"/>\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n</details>\r\n</h4>" + Course 4 SCFL 6_markdown_instruction: "**For-Loops Super Challenge:** Can you + figure out how to re-create this drawing with a single loop? \r\n\r\n<img + src=\"https://images.code.org/b0d15d06465d645c5ca533e5da6387b3-image-1446075597132.36.04.png\" + width=\"350px\"/>" + Course 4 SCFL 7_markdown_instruction: "**For-Loops Super Challenge:** The artist + wants to catch some waves! Can you figure out how to re-create this drawing? + \r\n\r\n<img src=\"https://images.code.org/fba3423f2e9a405d4d3859de32cdb0f3-image-1446102880655.13.36.png\" + width=\"350px\"/>" + Course 4 SCFP 1_markdown_instruction: "Create a function with parameters that + allows the artist to jump backward and forward by x pixels, and also up and + down by y pixels (using positive and negative numbers)." + Course 4 SCV 1_markdown_instruction: "<img src=\"https://images.code.org/7469d6b9aaaae532d864caecb65bd2cc-image-1444706295435.54.39.png\" + width=\"250px\"/>\r\n\r\n**Variables Super Challenge:** You've now learned + everything you need to know to make a pattern like this! This puzzle is meant + to be difficult. Can you stick with it until you figure out the solution?" + Course 4 SCV 2_markdown_instruction: "<img src=\"https://images.code.org/85f0b27009edd86eff78692004b9ed52-image-1444712655590.02.32.png\" + width=\"250px\"/>\r\n\r\n**Variables Super Challenge:** You've now learned + everything you need to know to make a pattern like this! This puzzle is meant + to be difficult. Can you stick with it until you figure out the solution?" + Course 4 SCV 3_markdown_instruction: "**Variables Super Challenge:** You've + now learned everything you need to know to solve this puzzle! This game is + meant to be difficult. Can you stick with it until you figure out the solution?\r\n\r\n<hr/>\r\n\r\nNow + for a game of tag! Tag Cat to get 2 points. Tag Penguin to get 3 points. Get + exactly 10 points to win!\r\nBut be careful, when Cat and Penguin tag each + other, they take points away.\r\n\r\n<strong>\r\nAdd the blocks necessary + to make this game work the way it's been explained. \r\n- How will you get + Dog to move in all directions using the arrow keys? \r\n- How will you add + points when Dog tags Cat or Penguin? \r\n- How will you subtract points when + Cat and Penguin touch?\r\n</strong>\r\n\r\n<hr/>\r\n\r\n" + Course 4 SCV 4_markdown_instruction: "**Variables Super Challenge:** Solve + this puzzle with the fewest number of blocks possible.\r\n" + Course 4 SCV 5_markdown_instruction: "**Variables Super Challenge:** Solve + this puzzle with the fewest number of blocks possible.\r\n\r\n" + Course 4 SCV 6_markdown_instruction: "<img src=\"https://images.code.org/499fc71a0a06bacb68a9789ad57f8148-image-1445574373673.16.44.png\" + width=\"250px\"/>\r\n\r\n**Variables Super Challenge:** You've now learned + everything you need to know to make a pattern like this! This puzzle is meant + to be difficult. Can you stick with it until you figure out the solution? " + Course 4 SCVP 1_markdown_instruction: "Create a function with parameters that + allows the artist to jump backward and forward by x pixels, and also up and + down by y pixels (using positive and negative numbers)." + Course 4 Variables Assessment_markdown_instruction: "Can you create this image + using a variable for `sides`? Each line should be 50 pixels long." + Crack Random Substitution_markdown_instruction: "# Break a random substitution + cipher!\r\n\r\nThis version of the tool gives you more information about the + encrypted text and more options for how to try out different substitutions.\r\n\r\n### + Different ways to analyze text\r\n- Play with some of the sorting options + available in the Random substitution cipher tab to get different views on + the letter frequencies in the input text as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\n### + Different ways to substitute\r\n- To substitute a letter you can drag a blue + letter of the alphabet directly underneath the orange letter you want changed + in the original ciphertext.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n### + Play. Always play.\r\n- There are other ways to analyze and substitute characters + that you can find by clicking on the buttons and trying out whatever you like.\r\n- + Remember: you can't break it :)\r\n\r\nSee how long it takes you to crack + the cipher! Is this a good method of encrypting secret data?\r\n\r\n<img src=\"http://code.org/api/hour/finish_encryption.png\">" + Crack a Caesar Cipher_markdown_instruction: "# Crack a Caesar cipher!\r\n\r\nThis + tool lets you play with text and do Caesar ciphers. You can use this to either + encrypt a message or decrypt it.\r\n\r\n# Do this\r\n- Load a **Sample message** + from the message dropdown. This will load a message that has been encrypted + with a Caesar cipher.\r\n\r\n![](https://images.code.org/347139486c8c729bf3c6e72ce67da878-image-1476286380409.gif)\r\n\r\n- + Using the buttons in the Caesar substitution tab, you can shift the alphabet + forwards or backwards to try to unscramble the message.\r\n\r\n![](https://images.code.org/ef9ebc16d2f1442dc46fba9bd48b5d43-image-1476285966821.gif)\r\n\r\nSee + how long it takes you to crack the cipher! Is this a good method of encrypting + secret data?\r\n\r\n<img src=\"http://code.org/api/hour/begin_encryption.png\">\r\n\r\n" + Data Visualizations 101_markdown_instruction: "## Data Visualization 101: How + to design charts and graphs\r\n\r\nIn lesson 10, students evaluate a curated + set of visualizations based on how effective they are at clearly and accurately + communicating what they're representing. After they've done this evaluation + for themselves, they explore this resource, which formally introduces the + names of the different types of charts they've been seeing and goes into + detail about what types of data each chart can represent most appropriately, + as well as best practices for designing each type of chart.\r\n\r\n" + Designing Assessment Questions_markdown_instruction: "## Designing Test Questions\r\n\r\nThe + following resource is from the University of North Carolina Charlotte's Center + for Teaching and Learning. In it you will find a breakdown of the uses, tradeoffs + for common assessment types, along with tips for writing good items.\r\n\r\n\r\n\r\n" + 'Discovery Learning: Definition and History_markdown_instruction': "The following + link is a resource that shows some of the history behind discovery learning: + " + 'Discovery Learning: Principals and Techniques_markdown_instruction': "The + following link is a resource that shows the principles and techniques of discovery + learning: " + 'Discovery Learning: Principles and Techniques_markdown_instruction': "The + following link is a resource that shows the principles and techniques of discovery + learning: " + Discovery learning definition and history_markdown_instruction: "The following + link is a resource that shows some of the history behind discovery learning: + " + Discovery learning techniques_markdown_instruction: "The following link is + a resource that shows the principles and techniques of discovery learning: + " + ECS Unit 2 Challenge Selection_markdown_instruction: "# Challenge Overview + > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your + challenge in the text box below.\r\n\r\n- Day 7-9: CSDT Cornrow Braiding\r\n- + Day 10-12: Binary\r\n- Day 13-14: Linear and Binary Search (Tower Building) + \r\n- Day 15-16: Sorting \r\n- Day 17: Minimal Spanning Trees\r\n- Day 18-21: + Unit Final Project\r\n\r\nNow that you've selected a lesson, head to the + forum and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### + <a href=\"http://forum.code.org/c/ecs/ecs-unit2\" target=_blank>Forums <i + class=\"fa fa-external-link\" /></a>" + ECS Unit 2 Challenge Submission_markdown_instruction: "# Share Out and Submit + > Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the + forum** and share: \r\n\r\n- Any data visualization or other artifact you + created in doing the \r\n - Use the “SHARE” button in code studio to get a + link to your program: \r\n- The assessment question or extending learning + activity that you produced for this lesson.\r\n- Notes for others who are + going to teach this lesson. This should include: \r\n - Advice for someone + who is going to teach this lesson (consider what was challenging about doing + the lesson, what you think students will struggle with, etc).\r\n - What ideas + do you have about how to structure and teach this lesson? what modifications + do you plan to make to the lesson?\r\n - What additional resources (if any) + might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit2\" + target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others + have posted! \r\nOnce you've posted your own challenge results, check out + what others have posted! Be sure to click through the other lessons as well + and read through their work. Remember, a big goal here is to learn from one + another so let people know when your find their suggestions helpful, or provide + your own ideas when you come across questions. Be sure to use the **heart** + feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a dirct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECS Unit 3 Challenge Selection_markdown_instruction: "# Challenge Overview + > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your + challenge in the text box below.\r\n\r\nHTML Beginners:\r\n\r\n- Day 3-4,5: + Basic HTML - Paragraph, Header, Strong, and EM Tags\r\n- Day 6--7: HTML - + Images\r\n- Day 14: HTML - Links\r\n\r\nCSS Beginners:\r\n\r\n- Day 8-10: + Basic CSS \r\n\r\nMore Experienced with HTML and CSS:\r\n\r\n- Day 11-13: + HTML and CSS \r\n- Day 17-19: HTML and CSS: Create Your Own Webpage\r\n- Day + 22-25: Unit Final Project\r\n- Day 18-21 Final Unit Project\r\n\r\n\r\nNow + that you've selected a lesson, head to the forum and **share which lesson + you plan to complete** for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit3\" + target=_blank>Forums <i class=\"fa fa-external-link\" /></a>" + ECS Unit 3 Challenge Submission_markdown_instruction: "# Unit 3 Challenge > + Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the forum** + and share: \r\n\r\n- Any data visualization or other artifact you created + in doing the \r\n - Use the “SHARE” button in code studio to get a link to + your program: \r\n- The assessment question or extending learning activity + that you produced for this lesson.\r\n- Notes for others who are going to + teach this lesson. This should include: \r\n - Advice for someone who is going + to teach this lesson (consider what was challenging about doing the lesson, + what you think students will struggle with, etc).\r\n - What ideas do you + have about how to structure and teach this lesson? what modifications do you + plan to make to the lesson?\r\n - What additional resources (if any) might + be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit3\" + target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others + have posted! \r\nOnce you've posted your own challenge results, check out + what others have posted! Be sure to click through the other lessons as well + and read through their work. Remember, a big goal here is to learn from one + another so let people know when your find their suggestions helpful, or provide + your own ideas when you come across questions. Be sure to use the **heart** + feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECS Unit 4 Challenge Selection_markdown_instruction: "# Challenge Overview + > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your + challenge in the text box below.\r\n\r\nNew to Programming?\r\n\r\n- Day 2-3: + Scratch - Name Project\r\n- Day 4: Scratch - Knock Knock Joke\r\n- Day 5-6: + Scratch - Moving Sprites \r\n\r\nNew to Scratch:\r\n\r\n- Day 7-8: Scratch + - Event Driven Programming\r\n- Day 9: Scratch - Broadcast Roleplay\r\n- Day + 10-13: Scratch - Broadcasting\r\n\r\nSome Experience with Scratch and Programming:\r\n\r\n- + Day 18, 19: Rock Paper Scissors and Timer\r\n- Day 20-23: Scratch - Timing + Game\r\n- Day 25-30: Unit Final Project\r\n\r\n\r\n\r\nNow that you've selected + a lesson, head to the forum and **share which lesson you plan to complete** + for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit4\" + target=_blank>Forums <i class=\"fa fa-external-link\" /></a>" + ECS Unit 4 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share + your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any + data visualization or other artifact you created in doing the \r\n - Use the + “SHARE” button in code studio to get a link to your program: \r\n- The assessment + question or extending learning activity that you produced for this lesson.\r\n- + Notes for others who are going to teach this lesson. This should include: + \r\n - Advice for someone who is going to teach this lesson (consider what + was challenging about doing the lesson, what you think students will struggle + with, etc).\r\n - What ideas do you have about how to structure and teach + this lesson? what modifications do you plan to make to the lesson?\r\n - What + additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### + <a href= \"http://forum.code.org/c/ecs/ecs-unit4\" target=_blank> Head to + the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce + you've posted your own challenge results, check out what others have posted! + Be sure to click through the other lessons as well and read through their + work. Remember, a big goal here is to learn from one another so let people + know when your find their suggestions helpful, or provide your own ideas when + you come across questions. Be sure to use the **heart** feature on the forum + to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECS Unit 5 Challenge Selection_markdown_instruction: "# What's your Challenge? + \r\n\r\n## Enter the lesson you selected for your challenge in the text box + below.\r\n\r\n- Day 1 - 3: Room data project, set up final project\r\n- Day + 4 - 5: Developing research questions\r\n- Day 6 - 7: Building group norms\r\n- + Day 8: Check in Day\r\n- Day 9 - 11: Maps, identifying variables, subsetting + data, sorting data, frequency of types.\r\n- Day 12: Bubble Charts\r\n- Day + 13: Review: Bubble Charts\r\n- Day 14 - 15: Bar Plots\r\n- Day 16: Mosaic + Plots\r\n- Day 17: Review: Bar and Mosaic Plots\r\n- Day 18 - 20: Mean, Median, + Minimum, Maximum, Histograms, Box Plots\r\n- Day 21: Review: Mean, Median, + Minimum, Maximum\r\n- Days 22 - 24: Filtering Text data (remove punctuation, + remove case, remove stop words, stemming), Analyzing word counts.\r\n- Day + 25: Review: Text Data\r\n- Day 26 - 27: Incorporate data techniques into + final project\r\n- Day 28 - 29: Build project presentations\r\n- Day 30: Present + final project\r\n\r\nNow that you've selected a lesson, head to the forum + and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### + <a href=\"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank>Forums <i + class=\"fa fa-external-link\" /></a>" + ECS Unit 5 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share + your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any + data visualization or other artifact you created in doing the \r\n - Use the + “SHARE” button in code studio to get a link to your program: \r\n- The assessment + question or extending learning activity that you produced for this lesson.\r\n- + Notes for others who are going to teach this lesson. This should include: + \r\n - Advice for someone who is going to teach this lesson (consider what + was challenging about doing the lesson, what you think students will struggle + with, etc).\r\n - What ideas do you have about how to structure and teach + this lesson? what modifications do you plan to make to the lesson?\r\n - What + additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### + <a href= \"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank> Head to + the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce + you've posted your own challenge results, check out what others have posted! + Be sure to click through the other lessons as well and read through their + work. Remember, a big goal here is to learn from one another so let people + know when your find their suggestions helpful, or provide your own ideas when + you come across questions. Be sure to use the **heart** feature on the forum + to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECS Unit 6 Challenge Selection_markdown_instruction: "# Unit 6 Challenge Selection\r\n\r\n## + Enter the lesson you selected for your challenge in the text box below.\r\n + \r\nFrom the curriculum\r\n\r\n- Day: 1 What is a robot / what makes a computer + robotic?\r\n- Days: 2-3 Evaluate robot body designs and algorithms that control + robot behavior\r\n- Day: 4 Set up the Lego kit\r\n- Day: 5 Build robot base\r\n- + Day: 6-7 Introduce NXT brick features\r\n- Day: 8-9 Introduce NXT software\r\n- + Day: 10-13 Program robot using tutorials (using sensors for input)\r\n- Day: + 14 Describe RoboCup & RoboCupJunior\r\n- Day: 15 Human robot tic-tac-toe\r\n- + Days: 16-18 Program dancing robot\r\n- Days 19-23 Program rescue robot\r\n- + Days 24-33 Final projects and presentations\r\n\r\nAlternative Topics\r\n\r\n- + Online simulations\r\n- Physical computing options\r\n- Projects and portfolios\r\n\r\nNow + that you've selected a challenge topic, **share what you plan to do** for + your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit6\" + target=_blank>Head to the Forums <i class=\"fa fa-external-link-square\" /></a>" + ECS Unit 6 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share + your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any + data visualization or other artifact you created in doing the \r\n - Use the + “SHARE” button in code studio to get a link to your program: \r\n- The assessment + question or extending learning activity that you produced for this lesson.\r\n- + Notes for others who are going to teach this lesson. This should include: + \r\n - Advice for someone who is going to teach this lesson (consider what + was challenging about doing the lesson, what you think students will struggle + with, etc).\r\n - What ideas do you have about how to structure and teach + this lesson? what modifications do you plan to make to the lesson?\r\n - What + additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### + <a href= \"http://forum.code.org/c/ecs/ecs-unit6\" target=_blank> Head to + the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce + you've posted your own challenge results, check out what others have posted! + Be sure to click through the other lessons as well and read through their + work. Remember, a big goal here is to learn from one another so let people + know when your find their suggestions helpful, or provide your own ideas when + you come across questions. Be sure to use the **heart** feature on the forum + to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSPD Binary Odometer_markdown_instruction: "# Binary Odometer Widget\r\n\r\nThis + widget was created as part of the Code.org Computer Science Principles class. + It is a great additional resource for teaching binary!\r\n" + ECSPD Fence post Q1_markdown_instruction: "## Fence Post Problem:\n\nYou need + to build one side of a fence that is 12 yards long. This fence will be built + with fence posts and rails that connect one fence post to another. If each + fence post is 1 yard away from the next fence post, how many fence posts will + be needed for this side of the fence? How many fence posts will be needed + for a side of a fence that is N (where N > 0) yards long?\n" + ECSPD Handshake Q1_markdown_instruction: "## Handshake Problem #1:\n\nAssume + there are 20 people in a room, including you. You must shake hands with everyone + else in the room. How many hands will you shake? If there are N (where N>0) + people in the room, how many hands will you shake?\n" + ECSPD Online U1D1-2 Assessment 1_markdown_instruction: "Did you have coffee + this morning? If you did, odds are you used a computer. If you made the coffee + yourself, your coffee maker probably had a digital clock or a programmable + timer. If you bought it, the barista likely used a card reader with an electronic + cash register to take your payment. Think through your day and record how + many computers you used before sitting down in front of a desktop or a laptop + (or whatever device you are using right now). Don't forget the computers + in your car, your refrigerator, your alarm clock...\n" + ECSPD Online U1D1-2 Reflection_markdown_instruction: "You have experienced + the lesson both online and on the first day of the in-person PD. Additionally, + you have watched a video defining computers. What have you learned that you + can take back to your classroom? Use this space to record your ideas for this + lesson. You will have a chance to share your ideas and questions in a forum + in the following level.\n" + ECSPD Online U1D10 Reflection_markdown_instruction: "You have experienced the + lesson both online and on the first day of the in-person PD. Additionally, + you have watched a TED talk about the representation of data. What have you + learned that you can take back to your classroom? Use this space to record + your ideas for this lesson. You will have a chance to share your ideas and + questions in a forum in the following level." + ECSPD Online U1D11-14 Reflection_markdown_instruction: "You have experienced + part of this lesson online and have investigated other design tools. What + have you learned that you can take back to your classroom? How will you tackle + this lesson's unique challenges? Use this space to record your ideas for + this lesson. You will have a chance to share your ideas and questions in a + forum in the following level.\n" + ECSPD Online U1D15-16 Reflection_markdown_instruction: "You have experienced + the lesson on the first day of the in-person PD and have watched a TED talk + about the extent of the use of algorithms in the world. What have you learned + that you can take back to your classroom? Use this space to record your ideas + for this lesson. You will have a chance to share your ideas and questions + in a forum in the following level." + ECSPD Online U1D17-19 Assessment_markdown_instruction: "Take some time to look + over the lesson and the unplugged activity. Think about your classroom and + the space you have available to run the Turing Test Activity. How are you + planning to set up your classroom to best facilitate the Turing Test Activity?" + ECSPD Online U1D17-19 Reflection_markdown_instruction: "This is the last lesson + in the unit. How does it combine what was covered previously in the unit? + Now that you have taken time to examine this lesson, what have you learned + that you can take back to your classroom? Use this space to record your ideas + for this lesson. You will have a chance to share your ideas and questions + in a forum in the following level." + ECSPD Online U1D3-4 Reflection_markdown_instruction: "You have experienced + part of this lesson online and studied the components of computers. What have + you learned that you can take back to your classroom? Use this space to record + your ideas for this lesson. You will have a chance to share your ideas and + questions in a forum in the following level. " + ECSPD Online U1D5-7 Reflection_markdown_instruction: "You have experienced + this lesson in person and have examined additional resources online. What + have you learned that you can take back to your classroom? Use this space + to record your ideas for this lesson. You will have a chance to share your + ideas and questions in a forum in the following level." + ECSPD Online U1D8-9 Assessment_markdown_instruction: "List three points either + from the articles or the lesson plan that you would want to discuss with your + class. Describe one strategy you plan to use to facilitate discussion." + ECSPD Online U1D8-9 Reflection_markdown_instruction: "You have experienced + part of this lesson online and have read a few articles regarding the impact + of computers and the internet on communication. What have you learned that + you can take back to your classroom? Use this space to record your ideas for + this lesson. You will have a chance to share your ideas and questions in a + forum in the following level." + ECSPD Online U1Reflection_markdown_instruction: "## Telling the story of Unit + 1\n\nNow that you've explored all of the lessons and resources from Unit + 1, how would you describe the learning that happens? \n\nIn a few sentences, + tell the story of Unit 1, how the lessons relate and build off one another, + and what students will walk away with.\n" + ECSPD PD goals_markdown_instruction: "***Now that you've learned more about + the ECS Professional Development, let's consider your goals***\n\n<br>\n<br>\n__What + are your personal goals for your ECS PD experience (what do you hope to accomplish, + how do you hope to grow)?__ *NOTE: These goals might change over time, and + we'll revisit this your response as we go through the course so we can check + in on how we're progressing towards those goals.*\n\n\n" + ECSPD Personal Problem Solving Strategies_markdown_instruction: "# Problem + Solving Strategies\n### Make a list of Problem Solving Strategies\n\nWe have + all learned different problem solving strategies through out our lives. Some + work all the time and others only in certain situations. Make a list of all + the problem solving strategies you can think of. You will continue to add + to this list over the course of this unit PD. You can also share strategies + or find new strategies on the forum.\n\n### <strong><a href=\"http://forum.code.org/t/pd-discussion-topic-problem-solving-strategies/2086/1\" + target=\"_blank\">Problem Solving Strategies>></a></strong>\n<br>\n\n**Each + time you see this page pop up think about the problem solving strategies you + and your students will need for the current lesson. Then add to the list if + you think of new things.**\n" + ECSPD course goals_markdown_instruction: "# Documenting Your Course Goals\r\n\r\n## + Now that you know more about the ECS curriculum, let's consider your goals\r\n\r\n**What + are your goals for your ECS class?** *These goals will change over time, and + we'll revisit this your response as we go through PD so we can check in on + how we're progressing towards those goals.*\r\n\r\n**NOTE:** remember you + can change the size of the text box by clicking and dragging the bottom-right + corner of the box.\r\n" + ECSPD impact in program_markdown_instruction: "\n\n#### What connections do + you think might exist between the ideas covered in the videos you just watched + and the units of ECS that you learned about earlier?\n" + ECSPD program overlap_markdown_instruction: "\n#### Now that you've read more + about the ECS program, what relationship do you see between the curriculum + and Professional Development? What aspects of the two piece of the program + seem most important or interesting to you?\n" + ECSPD strategies_markdown_instruction: "# Classroom Strategies Journal\r\n\r\nThis + space is your **digital journal for documenting strategies** you've picked + up during Professional Development and while teaching the course. We'll revisit + this in online pd for each unit, and you should refer back to it while planning + lessons to remind yourself of strategies you want to try in class. \r\n\r\n\r\n" + ECSPD your goals_markdown_instruction: "__What are your goals for your ECS + class?__ *These goals will change over time, and we'll revisit this your + response as we go through the course so we can check in on how we're progressing + towards those goals.*\n" + ECSPD3-u5 pick a challenge_markdown_instruction: "# Challenge Overview > What's + your Challenge? \r\n\r\n## Enter the lesson you selected for your challenge + in the text box below.\r\n\r\n- Day 1 - 3: Room data project, set up final + project\r\n- Day 4 - 5: Developing research questions\r\n- Day 6 - 7: Building + group norms\r\n- Day 8: Check in Day\r\n- Day 9 - 11: Maps, identifying variables, + subsetting data, sorting data, frequency of types.\r\n- Day 12: Bubble Charts\r\n- + Day 13: Review: Bubble Charts\r\n- Day 14 - 15: Bar Plots\r\n- Day 16: Mosaic + Plots\r\n- Day 17: Review: Bar and Mosaic Plots\r\n- Day 18 - 20: Mean, Median, + Minimum, Maximum, Histograms, Box Plots\r\n- Day 21: Review: Mean, Median, + Minimum, Maximum\r\n- Days 22 - 24: Filtering Text data (remove punctuation, + remove case, remove stop words, stemming), Analyzing word counts.\r\n- Day + 25: Review: Text Data\r\n- Day 26 - 27: Incorporate data techniques into + final project\r\n- Day 28 - 29: Build project presentations\r\n- Day 30: Present + final project\r\n\r\nNow that you've selected a lesson, head to the forum + and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### + <a href=\"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank>Forums <i + class=\"fa fa-external-link\" /></a>" + ECSPD3-u5 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSPD3-u5 submit_markdown_instruction: "# Share Out and Submit > Submit Link\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nYou've just shared your Challenge + work on the forum. If you would like to receive payment for this online PD, + please submit a link to that forum post here so we can review! \r\n\r\nIn + order to get a direct link to your post, click the link icon directly under + your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSPD3-u6 pick a challenge_markdown_instruction: "# Unit 6 Challenge > What's + your Challenge?\r\n\r\n## Enter the lesson you selected for your challenge + in the text box below.\r\n \r\nFrom the curriculum\r\n\r\n- Day: 1 What is + a robot / what makes a computer robotic?\r\n- Days: 2-3 Evaluate robot body + designs and algorithms that control robot behavior\r\n- Day: 4 Set up the + Lego kit\r\n- Day: 5 Build robot base\r\n- Day: 6-7 Introduce NXT brick features\r\n- + Day: 8-9 Introduce NXT software\r\n- Day: 10-13 Program robot using tutorials + (using sensors for input)\r\n- Day: 14 Describe RoboCup & RoboCupJunior\r\n- + Day: 15 Human robot tic-tac-toe\r\n- Days: 16-18 Program dancing robot\r\n- + Days 19-23 Program rescue robot\r\n- Days 24-33 Final projects and presentations\r\n\r\nAlternative + Topics\r\n\r\n- Online simulations\r\n- Physical computing options\r\n- Projects + and portfolios\r\n\r\nNow that you've selected a challenge topic, **share + what you plan to do** for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit6\" + target=_blank>Head to the Forums <i class=\"fa fa-external-link-square\" /></a>" + ECSPD3-u6 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link to your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review!\r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below): \r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSU2 Challenge Submission_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the forum** + and share: \r\n\r\n- Any data visualization or other artifact you created + in doing the \r\n - Use the “SHARE” button in code studio to get a link to + your program: \r\n- The assessment question or extending learning activity + that you produced for this lesson.\r\n- Notes for others who are going to + teach this lesson. This should include: \r\n - Advice for someone who is going + to teach this lesson (consider what was challenging about doing the lesson, + what you think students will struggle with, etc).\r\n - What ideas do you + have about how to structure and teach this lesson? what modifications do you + plan to make to the lesson?\r\n - What additional resources (if any) might + be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit2\" + target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others + have posted! \r\nOnce you've posted your own challenge results, check out + what others have posted! Be sure to click through the other lessons as well + and read through their work. Remember, a big goal here is to learn from one + another so let people know when your find their suggestions helpful, or provide + your own ideas when you come across questions. Be sure to use the **heart** + feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a dirct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSU3 Challenge Submission_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a dirct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSU4 Challenge Submission fin_markdown_instruction: "# Share Out and Submit + > Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + Escape Room Example_markdown_instruction: "# Room Escape\r\n\r\nIn today's + workshop you are going to be working on making a room escape app! This level + has an example app that you should play around with to get the feel for what + you will be creating.\r\n\r\n# Do This\r\n\r\n* Click RUN to start the app\r\n* + Try to find the key that will open the door." + Eval Booleans 1_markdown_instruction: "Boolean operators (like >, <, =) allow + us to compare different values, returning either *true* or *false*. Click + \"Run\" to see how this expression evaluates." + Eval Booleans 2_markdown_instruction: "Can you set the values so that this + expression evaluates as *true*?" + Eval Booleans 3_markdown_instruction: "The `string-length` function returns + the number of characters in a string (including spaces!) - make this code + evaluate to *true*." + Eval Booleans 4_markdown_instruction: "Here's an Evaluation Block called `and` + - it returns *true* if both of its parameters are *true*, otherwise it returns + *false*. Edit the x variable so that this expression returns *true*." + Eval Booleans 5_markdown_instruction: "This `or` block returns *true* if either + of its parameters is *true*. Otherwise, if both parameters are *false* it + will return *false*. Set the y variable to a value that will cause this expression + to return *false*." + Eval Booleans 6_markdown_instruction: "Here's one more boolean block called + `not`. This block flips *true* to *false*, or *false* to *true*. If you wrap + this block of code in a NOT block, it should return *true* (because we are + asking if the two expressions do NOT produce equal values)." + Eval Booleans Free Play_markdown_instruction: "Free Play: Try out some creations + of your own using Booleans." + Eval Cond 4_markdown_instruction: "We can use the `string=?` function to make + conditionals that respond to text input. Here's a function called `green + shape` that takes a string for the type of shape. Complete the conditions + so that the correct solid green shape is returned when the function is run + with \"circle\", \"triangle\", \"square\", or \"rectangle\"." + Eval Cond 5_markdown_instruction: "Here's a similar function `red shape` with + an additional variable for size. Complete the conditionals so the correct + solid red image of a given size is drawn for \"circle\", \"triangle\", and + \"star\"." + Eval Contracts 4_markdown_instruction: "The `scale` function returns an image + that is either larger or smaller than the input image. Try scaling this circle + by a factor of 10. How is the returned image different than if you'd just + made a circle of that size in the first place?" + Eval Contracts A_markdown_instruction: "Use the `star` function to produce + a solid red star with a 60 pixel radius" + Eval Contracts C_markdown_instruction: "Check out the `rotate` function - can + you use it to rotate this 90 pixel green square by 45 degrees?" + Eval Contracts E_markdown_instruction: "Try using the `text` function to write + this \"Hello, world!\" in teal at size 40." + Eval Define Funcs 1_markdown_instruction: "Here's a new function called `green-triangle` + that takes a single Number for size and produces a green triangle. Use the + new function to create a 125 pixel green triangle" + Eval Define Funcs 2_markdown_instruction: "Let's look inside that `green-triangle` + function to see how it works. Can you modify it so that the `green-triangle` + function always draws outlined green triangles? **Don't forget to change + the examples too!**" + Eval Define Funcs 3_markdown_instruction: "Here's the start of another new + function called `purple-circle` with a domain of one Number (the radius) and + a range of Image. The body of the function is broken though, it always draws + a circle of 50 pixel radius instead of using the radius parameter. Replace + the current Number with the `radius` block from the domain.\r\n\r\nWhen you've + fixed the function, test your new function with a 150 pixel radius." + Eval Define Funcs 4_markdown_instruction: "Create a new function called `aqua-star` + that has a Domain of a single Number for radius and returns an aqua star of + the given radius. Run your new function with a radius of 75." + Eval Define Funcs 5_markdown_instruction: "Let's use that `aqua-star` function + to make a row of different sized stars. From left to right, the stars should + have radii of 25, 50, and 75." + Eval Define Funcs Test_markdown_instruction: "Here's the start of another + new function called `purple-circle` with a domain of one Number (the radius) + and a range of Image. The body of the function is broken though, it always + draws a circle of 50 pixel radius instead of using the radius parameter. Replace + the current Number with the `radius` block from the domain.\r\n\r\nWhen you've + fixed the function, test your new function with a 150 pixel radius." + Eval Defining Vars Free Play 1_markdown_instruction: "Free Play: We've provided + a function that fills your screen with `my-image`. Change `my-image` to see + what patterns you can make." + Eval Design Recipe .1_markdown_instruction: "Here's a Design Recipe for a + function called `square-circle` with domain Number String and range Image. + Click Edit to write the function definition (you will see two examples provided)." + Eval Design Recipe 3_markdown_instruction: "The Design Recipe for `wide-rect` + already has a contract and one example. Can you write a second example and + then complete the definition? The `wide-rect` function should produce a rectangle + of given color that is twice as wide as it is high." + Eval Design Recipe 4_markdown_instruction: "Use the Design Recipe to create + a function `starburst`. When given a number of points and an outer radius, + `starburst` returns a yellow radial star with given points, and an inner radius + that is half the outer radius." + Eval Design Recipe 5_markdown_instruction: "Write a function `striped-flag` + that takes two colors and produces a flag that is 250 pixels wide, 150 pixels + tall, with three even horizontal stripes of given colors, in the order color2, + color1, color2." + Eval Design Recipe 6_markdown_instruction: "Write a function `large-polygon` + that should output a solid polygon of given sides and color that takes up + most of the window, regardless of the number of sides. To make sure that the + polygon doesn't get too large as you increase the number of sides, side length + should be inversely proportional to side number, with a length of **(800/sides)**." + Eval Design Recipe Free Play_markdown_instruction: "Free Play: Use the Design + Recipe to create some functions of your own design" + Eval Strings Images .1_markdown_instruction: "So far we've only dealt with + a single type of data, Numbers. Another type of data is a String, which is + any combination of letters, numbers, or other characters wrapped in quotation + marks. Run the String \"Hello, world!\" and see what happens." + Eval Strings Images .2_markdown_instruction: "The `string-append` function + takes two Strings and returns a single combined String. Add a String \"Universe\" + to the second argument of `string-append`." + Eval Strings Images 1_markdown_instruction: "The third type of data we're + going to use is an Image. This `star` function takes in a Number and two Strings, + and it evaluates to an Image. Use this function to make a solid red star with + radius of 100." + Eval Strings Images 2_markdown_instruction: "Free Play: Every Evaluation Block + is color-coded to let you know which data type it returns and which types + it needs for its parameters. The last parameter of the triangle function takes + a String that controls its color - try some different colors to see what works." + Eval Strings Images 3_markdown_instruction: "Some functions can only take a + specific set of Strings, such as the second argument of this `circle` function, + which controls its style. Draw this orange outline circle using the special + String block with a dropdown to make sure you only use valid styles." + Eval Strings Images 4_markdown_instruction: "Try using the `rectangle` block + to draw this solid, red rectangle - it is 175 pixels wide and 100 pixels tall." + Eval Strings Images 5_markdown_instruction: "Try using this new Evaluation + Block called `overlay` to place a 100 pixel white triangle on top of a 200 + pixel red circle." + Eval Strings Images 6_markdown_instruction: "Use the overlay block to place + a 75 pixel radius yellow star on top of a 150 pixel long blue square." + Eval Strings Images 7_markdown_instruction: "The `offset` block lets you move + an image relative to where it would normally be placed. Use this block to + offset the square by 100 pixels on the y-axis." + Eval Strings Images 8_markdown_instruction: "Here's a different kind of star + block - it's called `radial-star` and it allows you to draw stars with any + number of points! Use it to create a 7 point solid orange star with an inner + radius of 75 pixels and an outer radius of 175 pixels." + Eval Strings Images Free Play_markdown_instruction: "Free Play: Explore the + blocks available to create something interesting. Make sure to share your + favorite creations." + Final Personal Website_markdown_instruction: "# Personal Website\r\n\r\nThis + is it! You have been working on your Personal Website for the whole unit. + Put the finishing touches on it and submit it to your teacher! Remember to + use the problem solving process as your guide in preparing your final product.\r\n\r\n# + Do This\r\n\r\n* Define: Read the rubric so you know what is expected\r\n* + Plan: Decide what you still need to work on and put those things in priority + order\r\n* Try: Implement your improvements to your personal website.\r\n* + Reflect: Get feedback from a classmate and decide what of that feedback to + act on.\r\n\r\nDon't forget to take a screenshot of your home page and save + it somewhere on your computer so you can find it later (*Need help with how + to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)" + Final Room Escape App_markdown_instruction: "# You've done it!\r\n\r\nYou + made a room escape! Now its time to customize it. \r\n\r\nConsider:\r\n\r\n* + Adding more rooms\r\n* Adding more things users can interact with in the rooms\r\n* + Add more style to the rooms" + Finalize Your Chaser Game v.1_markdown_instruction: "# Add an Image and Make + a Chaser Game!\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" + style=\"float: right\">\r\n\r\n**Now You Try it** - add an image to your app + and modify the code so that the image jumps around the screen rather than + the button. Your little game should have:\r\n\r\n* **Text** on the top of + the screen with a title or instructions for what to do.\r\n* **An image** + that \"runs away\" (moves randomly) based on some mouse event.\r\n\r\n**Tips:**\r\n + * **Hint** - the easy way to do this is to simply change the IDs in `onEvent` + and `setPosition` to respond to the image instead of the button.\r\n * Remove + the button from the app after the image is working. We don't need it anymore.\r\n + * Change the label text so that the instructions make sense for your game.\r\n + * The game is even more fun if you use the `mouseover` event instead of `click`\r\n\r\n**Optional + Extensions**:\r\n * Make the background interesting\r\n * Add another image + that runs away.\r\n * See what happens with the commands `hideElement` and + `showElement`\r\n * Have two UI elements where interacting with one controls + or does something to the other.\r\n\r\n**Finalize your \"Chaser Game v.1\"** + and click Finish.\r\n\r\n * **Note**: We'll revisit this game in the next + lesson where you can improve it. This is **just version 1**\r\n\r\n" + Food Fight!_markdown_instruction: "We've added one last function for you.\r\n<hr/>\r\n\r\n<h4>\r\nUse + an `if` statement to program your game to call the `level_up` function only + when `player_score` becomes greater than a certain number.<br/><br/>\r\n</h4>\r\n<i>For + example: `player_score` > 6</i>\r\n\r\n\r\n<hr/>\r\n<i>Play the game, and + make it to level 3 to move to the next puzzle.</i>" + Formative versus Summative Assessment_markdown_instruction: "The following + link is a resource that provides definitions and examples of formative and + summative assessments:" + Frequency Analysis_markdown_instruction: "# Break a random substitution cipher!\r\n\r\nMessages + encrypted with the **Caesar cipher** are very easy to crack. What if instead + of shifting the whole alphabet, we mapped every letter of the alphabet to + a random different letter of the alphabet? This is called a **random substitution + cipher**.\r\n\r\nIn this version of the tool, you'll be interacting more + with the graphs that show letter frequency. By analyzing the frequency of + the letters in the encrypted input message compared to the frequency of letters + in a typical piece of English prose, you can start to narrow in on what some + of the letter mappings might be. Did you know that *'E'* is the most common + letter used in the English language? Maybe the most common letter in your + encrypted text maps to the letter *'E'*, but maybe not! You'll have to + do a bit of guess and check to see if that substitution makes sense.\r\n\r\n\r\n# + Do this\r\n- Load the **Sample message (hard)** from the message dropdown. + This will load a message that has been encrypted with a random substitution + cipher. \r\n![](https://images.code.org/04c6230c9607110126581c298bc09183-image-1443569176380.gif)\r\n\r\n- + You will crack the message by guessing what each letter of the alphabet contained + in the original ciphertext should be changed to. You can do so by dragging + the blue letters of the alphabet directly underneath the orange letter you + want changed in the original ciphertext. Letters that have been changed using + your guesses will no longer be highlighted orange in the message window on + the left.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n- + Play with some of the sorting options available in the Random substitution + cipher tab to get different views on the letter frequencies in the input text + as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\nSee + how long it takes you to crack the cipher! Is this a good method of encrypting + secret data?\r\n\r\n" + 'Game Lab Workshop: Random_markdown_instruction': "# Randomized Shapes\r\n\r\nLet's + see how we can use randomization in our drawings. Each of the inputs from + the shape blocks you've seen can be replaced with calls to `randomNumber()`. + Try drawing some images that are slightly randomized each time. You might + try changing the position randomly by using `randomNumber()` in place of the + x or y inputs, or you could change the size of the shape itself by randomizing + the length or width inputs.\r\n\r\n# Do This\r\n\r\nPick a shape command (`ellipse()`, + `rect()` or `regularPolygon()`) and use `randomNumber()` in place of one or + more of the inputs. Make sure you run it a few times so you can see the effect + of randomization.\r\n" + GameLab Livecode Demo 1_markdown_instruction: "# Animating Sprites\r\n\r\nTo + start this demo, we'll do the following:\r\n\r\n1. Create a new sprite with + the `createSprite()` block\r\n2. Click on the Animation tab and select an + image for the sprite\r\n3. Set the animation using the `sprite.setAnimation()` + block\r\n4. Move the sprite by incrementing (slowly increasing) its x and + y value using the draw loop\r\n" + GameLab Livecode Demo 2_markdown_instruction: "# Move With Keys\r\n\r\nNow + that we've got a sprite on the screen, let's make it respond to keyboard + input.\r\n\r\n1. Read through the blocks at lines 14 and 21 - what is going + on?\r\n2. Add two more conditionals to respond to the up and left keys\r\n3. + Experiment with some of the additional provided blocks, such as `sprite.scale` + and `sprite.rotation`\r\n" + GameLab Livecode Demo 3_markdown_instruction: "# Sprite Interactions\r\n\r\nAt + this point there's one sprite on screen, and we can move it around with the + arrow keys. Now let's add a second sprite and get the two interacting.\r\n\r\n1. + Add a new animation in the animation tab\r\n2. Create a new sprite called + \"target\" and set its animation\r\n3. Use the `sprite.isTouching()` block + in a conditional to make the target sprite react to the player sprite\r\n\t* + Make the target sprite shrink or grow\r\n * Make the target move to a random + location\r\n * Make the target rotate\r\n" + GameLab Livecode Demo 4_markdown_instruction: "# Make it Your Own\r\n\r\nNow + that we've created a simple game, take some time to explore the environment + on your own and add to your game. You'll notice that there are a bunch of + new blocks available to you in the toolbox - take a look around and try some + out!" + 'GameLab Workshop: Draw Loop Shapes_markdown_instruction': "# Experiment with + the Draw Loop\r\n\r\nHere's a simple app that we've slowed down by changing + the _frame rate_ (the number of times the draw loop is run each second).\r\n\r\nWith + a neighbor:\r\n\r\n* Read through the code and discuss what you think it will + do\r\n* Run and observe the program\r\n* Try reordering the blocks to see + how it impacts the drawing\r\n\t* Can you make the rectangle appear above + the circle?\r\n * What happens if you place one of the commands before + or after the draw loop?\r\n * Try adding some new shapes to the program" + Gamelab AllTheThings Embed Level_markdown_instruction: "# How Many Counter + Variables?\r\n\r\nYou can use counter variables (`x = x + 1` , `x = x - 1` + , `x = x + 0.5`, etc.) to animate a scene. What happens when scenes start + to get larger and more complicated? \r\n\r\nWatch this animation. With a partner: + \r\n\r\n* Decide how many counter variables you would need to create this + scene\r\n* Decide what you would name your counter variables\r\n* **Draw a + Labels-Values-Connectors** diagram of your variables at the first frame of + this scene. Don't worry about getting the values exactly correct.\r\n* Share + your answer with another group **and be ready to share your ideas with the + class**" + Geometric Pattern_markdown_instruction: "**Project Idea:** Create a pattern + using geometric ideas like shapes. This requires persistence and planning!" + Geometric Sun_markdown_instruction: "**Project Idea:** Create a pattern using + geometric ideas like shapes. This requires persistence and planning!" + Glossary O_markdown_instruction: "## Vocabulary\n\nEncouraging students to + learn and use 'professional' terms enables them to communicate correctly + and efficiently with others and builds their knowledge such that it can be + further developed without having to relearn terms and concepts at a later + time. The terms and concepts used in the unplugged lessons are defined using + words that young students can understand.\n\n# TEACHING TIP\nBest practice + is to introduce the terms with easy-to-understand language, relate the terms + to previous experiences, use the terms repeatedly beyond the lesson itself + throughout the entire course (and in other situations) when appropriate, and + reinforce students' use in oral and written communication.\n\nThe following + terms are introduced in an unplugged lesson as either a Vocabulary word or + as a term related to the online Blockly programming interface. Terms are subsequently + reinforced in the following online puzzles and activities. Most terms appear + multiple times throughout the courses and lessons providing the students with + many opportunities to deepen their understanding and assimilate the words + into conversations, both in and outside of the classroom.\n\nThe course and + lesson numbers after each term indicate the unplugged lessons in which the + term is emphasized.\n\n# Look through this list of vocabulary words and then + answer the prompt at the bottom of the page. You don't have to learn all + the vocabulary words all right now, but you they are here so you can refer + back them during this online course. \n\nabstraction\n\nPulling out specific + differences to make one solution work for multiple problems students.\n\n(Course + 3: Lesson 1)\n\nalgorithm\n\nA list of steps to finish a task. A set of instructions + that can be performed with or without a computer. For example, the collection + of steps to make a peanut butter and jelly sandwich is an algorithm.\n\n(Course + 1: Lessons 1, 6 | Course 2: Lessons 1, 2 | Course 3: Lessons 1, 10)\n\nbinary\n\nA + way of representing information using only two options.\n\n(Course 2: Lesson + 14)\n\nBlockly\n\nThe visual programming language used in Code.org's online + learning system for K-5 students. (Course 1: Lesson 3)\n\nbug\n\nAn error + in a program that prevents the program from running as expected. (Course 2: + Lesson 9)\n\ncode\n\nOne or more commands or algorithm(s) designed to be carried + out by a computer. See Program. (Course 1: Lesson 2)\n\ncommand\n\nAn instruction + for the computer. Many commands put together make up algorithms and computer + programs. (Course 1: Lesson 2)\n\ncomputational thinking\n\nMental processes + and strategies that include: decomposition, pattern matching, abstraction, + algorithms (decomposing problems into smaller, more manageable problems, finding + repeating patterns, abstracting specific differences to make one solution + work for multiple problems, and creating step-by-step algorithms). (Course + 3: Lesson 1)\n\ncomputer science\n\nA field in which people use the power + of computers to solve big problems. (Course 1: Lesson 2)\n\nconditionals\n\nStatements + that only run under certain conditions or situations. (Course 2: Lesson 12)\n\ncrowdsourcing\n\nGetting + help from a large group of people to finish something faster. (Course 3: Lesson + 19)\n\ndata\n\nQuantities, characters, or symbols that are the inputs and + outputs of computer programs. (Course 2: Lesson 14 | Course 3: Lessons 1)\n\ndebugging\n\nFinding + and fixing errors in programs. (Course 2: Lesson 9)\n\ndecompose\n\nBreak + a problem down into smaller pieces. (Course 3: Lesson 1)\n\ndigital citizen\n\nSomeone + who acts safely, responsibly, and respectfully online. (Course 3: Lesson 20)\n\ndigital + footprint\n\nThe information about someone on the Internet. (Course 2: Lesson + 18)\n\nDNS (domain name service)\n\nThe service that translates URLs to IP + addresses. (Course 3: Lesson 18)\n\nDSL/cable\n\nA method of sending information + using telephone or television cables. (Course 3: Lesson 18)\n\nevent\n\nAn + action that causes something to happen. (Course 1: Lesson 15 | Course 2: Lesson + 15)\n\nevent-handler\n\nAn action or event that is being constantly monitored + for by the computer. When you write code for the computer to perform after + that an action occurs, that code, the event-handler, will run every time the + action is performed without having to put the commands inside of a loop. Many + event-handlers are human-initiated. For example: an event handler might respond + when the user clicks the mouse by making the bird flap its wings. \"When the + mouse is clicked\" is an event-handler. (Course 1: Lesson 15 | Course 2: Lesson + 15)\n\nfiber optic cable\n\nA connection that uses light to transmit information. + (Course 3: Lesson 18)\n\nfunction\n\nA piece of code that you can easily call + over and over again. Functions are sometimes called 'procedures.' A function + definition is a segment of code that includes the steps performed in the function. + A function call is the code segment, typically within the main logic of the + program, which invokes the function. (Course 3: Lesson 4, 9)\n\nInternet\n\nA + group of computers and servers that are connected to each other. (Course 1: + Lesson 17 | Course 3: Lessons 18, 20)\n\nIP address\n\nA number assigned to + any item that is connected to the Internet. (Course 3: Lesson 18)\n\niteration\n\nA + repetitive action or command typically created with programming loops. (Course + 1: Lesson 12 | Course 2: Lesson 5)\n\nloop\n\nThe action of doing something + over and over again. (Course 1: Lesson 12 | Course 2: Lesson 5)\n\npackets\n\nSmall + chunks of information that have been carefully formed from larger chunks of + information. (Course 3: Lesson 18)\n\npattern matching\n\nFinding similarities + between things. (Course 3: Lesson 1)\n\npersistence\n\nTrying again and again, + even when something is very hard. (Course 1: Lesson 9)\n\nprogram\n\nA program + is an algorithm that has been coded into something that can be run by a machine. + (Course 1: Lesson 2 | Course 2: Lesson 1 | Course 3: Lesson 10)\n\nrun program\n\nTo + have the computer execute the commands you've written in your program. (Course + 1: Lesson 4)\n\nservers\n\nComputers that exist only to provide things to + others. (Course 3: Lesson 18)\n\ntoolbox\n\nThe tall grey bar in the middle + section of Code.org's online learning system where all the commands you can + use to write your program are displayed. (Course 1: Lesson 4)\n\nURL (universal + resource locator)\n\nAn easy-to-remember address for calling a web page (like + www.code.org). (Course 3: Lesson 18)\n\nusername\n\nA name you make up so + that you can see or do things on a website, sometimes called a \"screen name.\" + (Course 1: Lesson 18)\n\nvariable\n\nA placeholder for a piece of information + that can change. (Course 3: Lesson 4)\n\nWi-Fi\n\nA wireless method of sending + information using radio waves. (Course 3: Lesson 18)\n\nworkspace\n\nThe white + area on the right side of Code.org's online learning system where you drag + and drop commands to build your program. (Course 1: Lesson 4)\n\n### What + is one way you can include computer science vocabulary terms in your class?\n" Hardware Accessibility_markdown_instruction: "# Hardware Accessibility: Screen Size\r\n\r\nAnother thing to consider about accessibility for different users is the size of the device they are using to view the web page. You can do @@ -15439,13 +12983,6 @@ en: , **beans** ![picture of beans](https://images.code.org/5e379ff595be17722237d9685b29fd96-image-1472493220871.png) , or **pumpkins** ![picture of pumpkin](https://images.code.org/03cf76a978e0788ccb53f14e9d264695-image-1472493237148.png) . Can you write some code to pick all the crops, no matter what they are?" - harvey_pixelation_markdown_instruction: "# Make your own image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* - Encode an image of anything you like using `binary`.\r\n* The binary language - will be represented with `0` and `1` only.\r\n* You might want to do some - planning and sketching with graph paper first. \r\n* Depict something, perhaps - your name written out, your initials, an icon or logo of some sort.\r\n* Get - creative! The image doesn't have to be a perfect square, it can be long and - skinny." 'How to: Setup your Class Data Tracker_markdown_instruction': "## Setting up your copy of the Class Data Tracker\r\n\r\nThe second chapter of unit 2 dives into data collection, analysis, and visualization. Starting in lesson 7 you @@ -15637,8 +13174,6 @@ en: this video** to understand or complete this lesson - it is merely here if you are interested in getting a general overview. \r\n\r\nIn this lesson to get started we will only use a few of the features depicted." - jessie-test_markdown_instruction: "# Cool\r\n\r\n## Markdown\r\n\r\n### Instructions\r\n\r\n#### - here\r\n\r\n##### now\r\n\r\n###### forever" Just for Testing_markdown_instruction: "Other test instructions" K-1 Bee Loops 2_markdown_instruction: "Use a `repeat` loop to move and then get the nectar and make honey!" @@ -15689,9 +13224,6 @@ en: blocks to get me to the pig!\r\n\r\n![](https://images.code.org/810d7189bcd0767d37ea82319b4c678c-image-1467932445247.gif)" K2.0 sequence 9_markdown_instruction: "**Challenge:** Go around the TNT to get me to the pig!\r\n\r\n![](https://images.code.org/fa04813e9451e0bc070af50bc01d4a6b-image-1467932582838.gif)" - kikiTesta_markdown_instruction: "Our adventurer wants to collect coins. But - she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many - as she can using just 4 blocks?" LaurelDebugging4Video1_markdown_instruction: "This is Laurel the Adventurer!\r\n\r\nMove her around and get as much gold as you can." 'Lesson 7: Teaching and Student Support Plan_markdown_instruction': "> **NOTE: @@ -15985,43 +13517,10 @@ en: task, two reviewers need to agree that you have responded to the prompts fully. If reviewers don’t feel comfortable making a decision about your task submission, they can elevate to a facilitator to review. You will always have a chance - to address feedback from your reviewers and resubmit your task! Reviewer feedback - will show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" - level 'grade3_Loops_10_markdown_instruction: "Such a busy bee!\r\n\r\nHelp - Bee collect all of the nectar and make all of the honey with the fewest blocks - possible." - level 'grade3_Loops_11_markdown_instruction: "The shape of this path is different - from the others. \r\n\r\nCan you collect all of the nectar using as few blocks - as possible?" - level 'grade3_Loops_3_markdown_instruction: "Use a `repeat` loop to collect - all of the nectar." - level 'grade3_Loops_4_markdown_instruction: "Now use the `repeat` block to - collect all of the nectar and make all of the honey." - level 'grade3_Loops_5_markdown_instruction: "What a beautiful field of flowers! \r\n\r\nHelp - the bee visit each one.\r\n\r\nCan you find a way to do it with fewer than - 7 blocks?" - level 'grade3_Loops_6_markdown_instruction: "How many times can loops help - you in this puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete - this puzzle with the fewest blocks possible." - level 'grade3_Loops_7_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." + to address feedback from your reviewers and resubmit your task! Reviewer feedback + will show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" Limited Quantity of Blocks Test_markdown_instruction: "Get me to the pig by adding only one block." - love_spring_1_markdown_instruction: "Let's celebrate Spring! \r\n\r\nWe have - put some seeds in the ground to prepare for the season's flowers. Can you - cover them up so that the birds don't eat them?" - love_spring_2_markdown_instruction: "Our flowers are in full bloom! \r\n\r\nNow - we need the bee to grab nectar from each one so he can make plenty of honey - back at his hive!" - love_spring_3_markdown_instruction: "<b>The sun is shining, the birds are chirping, - and now it's time to play!</b> <br/><br/>\r\n\r\nRobin has chosen a number - between 10 and 30. \r\nUse the up and down arrows to make a guess about what - it is. \r\nClick Robin to submit your guess.\r\n\r\n- Robin will move up - when your guess is too high\r\n- Robin will move down when your guess is too - low\r\n- Where do you change how far Robin moves each time?\r\n- Where would - you change the range of numbers to choose from?\r\n- Can you change the code - so that Robin chooses a number between 1 & 20?\r\n\r\n<br/>\r\n<b>When you're - ready, press \"Run\" and play until you guess Robin's number!</b>" Luigi's Pizza 1_markdown_instruction: "Welcome to Luigi's Pizza! To order a pizza, type the name of a topping into the `cost` function, and we'll return the price of that pizza. Try ordering a pepperoni pizza to start." @@ -16041,12 +13540,17 @@ en: a function that allows for ordering multiple pizzas (the same, or with different toppings)\r\n- Create a function that allows you to add a coupon code for a 30% discount" - maker workshop final_markdown_instruction: "# Challenge: Explore!\r\n\r\nNow - that you've tested the waters a bit, go explore the full extent of this tool. - On this level you'll see lots of new blocks and even some completely new - areas of functionality (like a database backend!). Feel free to go back to - previous levels for inspiration, or go off and building something completely - your own." + MSM Defining Vars 1_markdown_instruction: "Write a program that produces a + 50 pixel solid green triangle." + MSM Defining Vars 2_markdown_instruction: "If we wanted to make fifty green + triangles, it would be a pain to repeat that block of code 50 times. Let's + create a variable called `my-shape` and put the code for a 50 pixel solid + green triangle inside." + MSM Defining Vars 3_markdown_instruction: "Take your `my-shape` variable and + use it with this provided code to draw two identical green triangles that + are 50 pixels in size." + MSM Defining Vars 4_markdown_instruction: "Edit your `my-shape` variable so + that it draws 75 pixel solid red stars." Matt Test Level_markdown_instruction: "Do 0 bits weigh less than 1 bits?\n" Middle School Hackathon Pt 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe blocks you've been provided are those that a student in CS Discoveries would @@ -16084,22 +13588,6 @@ en: Mike Test Bee Conditionals 2_markdown_instruction: "**Assessment:** Collect all of the nectar. \r\nBe careful not to try to collect nectar from a purple flower if it doesn't have any." - mike3bit_markdown_instruction: "# 3-Bit Color\r\n**Directions:**\r\n\r\n* We - start you with the 4x2 image Maddie was creating, but we've left out the - last few pixels. \r\n* Finish off the image by figuring out which colors are - missing and encoding them.\r\n" - mike3bitbird_markdown_instruction: "# 3-Bit Color\r\nHere's an example of - an image made with 3-bit color. Try changing it to understand how it works. - \r\n\r\n*If you want to reset the image, press \"Start Over\".*\r\n" - mike3bitfreeplay_markdown_instruction: "# 3-Bit Color\r\n\r\nYou have one last - chance to experiment and get creative with the pixelation widget. Make something - awesome and share it with your classmates!\r\n\r\n* *Hint:* You can copy and - paste the value of a pixel to use it repeatedly." - mike3bitmario_markdown_instruction: "# 3-Bit Color\r\n \r\n**Challenge:** \r\n\r\nA - careless binary coder typed in ONE extra 0 or 1 somewhere within this image's - data. The extra bit that is causing Mario to glitch out! \r\n\r\nDelete the - extra bit to restore Mario back to normal!\r\n\r\n![](https://images.code.org/8b7c17ba204a1a4d33e1bd6de7f01d76-image-1477306657312.54.57 - AM.png)" MikeTest1_markdown_instruction: "Markdown" Modular Arithmetic_markdown_instruction: "# Modular Arithmetic\r\n\r\n\r\nThe modulo operation (which gives you the remainder of dividing two integers) @@ -16111,129 +13599,6 @@ en: below introduces the concept of modular arithmetic, and explains the Diffie-Hellman key exchange (described in lesson 7 using an analogy with Alice, Eve, and Bob)." - MSM Defining Vars 1_markdown_instruction: "Write a program that produces a - 50 pixel solid green triangle." - MSM Defining Vars 2_markdown_instruction: "If we wanted to make fifty green - triangles, it would be a pain to repeat that block of code 50 times. Let's - create a variable called `my-shape` and put the code for a 50 pixel solid - green triangle inside." - MSM Defining Vars 3_markdown_instruction: "Take your `my-shape` variable and - use it with this provided code to draw two identical green triangles that - are 50 pixels in size." - MSM Defining Vars 4_markdown_instruction: "Edit your `my-shape` variable so - that it draws 75 pixel solid red stars." - multi-lesson Teaching and Student Support Plan_markdown_instruction: "<br><br>\r\n> - **NOTE: before you start this task, make sure you’ve reviewed the lesson resources - in this module, and have a good sense of how the lesson works. If you haven’t - already reviewed the materials, do that now and come back to this task later.**\r\n\r\n# - Teaching and Student Support Plan\r\n\r\n## Task Description\r\n\r\nNow that - you have a better sense of this lessons in this sequence, let’s think about - the types of supports students will need in order to be successful. Since - the curriculum is based on inquiry learning, lessons feature activities that - engage students in discovering core concepts themselves. It’s important to - think through implementation plans and student support. In this task you will - make a plan for teaching and student support **for one of the lessons in this - sequence** that takes into account differentiation strategies and make-up - work for absent students. Your teaching and student support plan should cover - the following: \r\n\r\n\r\n- **Which lesson in the sequence are you discussing?** - \r\n\r\n- **Details on how you will implement and differentiate the lesson:**\r\n\r\n - - An outline of any changes you will need to make to the lesson to fit your - local constraints or context (for example: pacing and time, dealing with classroom - setup, etc). \r\n - An overview of the types of student needs you’ll likely - need to support in your classroom (for example: students who are struggling - to understand the underlying concept; students who are already familiar with - the concept, but still have room to learn more; etc)\r\n - Your plan for addressing - each of the needs outlined above (for example: integrating extension activities - or other materials for students who already know something about the topic)\r\n - - How will you address or emphasize the connection between lessons in this - sequence? \r\n\r\n<br>\r\n- **Plan for catching up absent students:**\r\n\r\n - - How will absent students catch up on activities they missed? \r\n - How - will you use the fact that the lessons in this sequence are related and build - on one another to address make-up work? \r\n\r\nYou can type out your teaching - and student support plan in the box below, or you can upload a word doc or - pdf file. \r\n\r\n## Getting Credit for Completing this Task\r\n\r\n#### Task - Review Details\r\n\r\nIf this module is listed as your “focus area”, then - your response to the prompt above will be shared anonymously and reviewed - by your peers, and you will review the work done by other teachers. Reviewers - will be looking for thoughtful and thorough answers that demonstrate that - you have spent time considering how the lesson will play out in your own classroom. - Reviewers will have an opportunity to give feedback on your submission, and - you can respond to that feedback and resubmit. \r\n\r\nIn order to get credit - for completing this task, two reviewers need to agree that you have responded - to the prompts fully. If reviewers don’t feel comfortable making a decision - about your task submission, they can elevate to a facilitator to review. You - will always have a chance to address feedback from your reviewers and resubmit - your task! Reviewer feedback will show up at the bottom of this page, once - it’s available. \r\n\r\n<br><br>" - name 'CSD U3 Keypress Boolean Predict'_markdown_instruction: "# Make a Prediction: - keyDown()\r\nThe `keyDown()` block is the first of a new set of blocks that - will let us get input from the user. This is the first step on our road to - actually making games! See if you can figure out how the `keyDown()` block - works.\r\n\r\nWhat do you think will happen when you run the program and press - the \"up\" arrow? Write your prediction below and then run the program to - see if your prediction was accurate." - NetSim Standalone Automatic DNS_markdown_instruction: "# Domain Name System - (DNS)\r\n\r\nIn this version of the Internet Simulator, a Domain Name System - (DNS) is provided for you and knows the IP addresses of all connected computers. - You can only see the hostnames of other connected computers. \r\n![](https://images.code.org/3ac2c23ed610abc7e785ec85054e89a9-image-1434746293690.PNG)\r\n\r\nThe - address of the DNS is always <yourRouterNumber>.15. Send a message with - protocol `GET [hostname]`, for example `GET Bob2`, to the DNS to get another - student's address. You can keep track of the responses in the Notes section - in the DNS tab. \r\n![](https://images.code.org/c81c1a6b876eb46674a7f7e5e70506ce-image-1434746797267.png)\r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone Broadcast_markdown_instruction: "# Broadcast messages in - the Internet Simulator\r\n\r\nIn this version of the Internet Simulator, you - can connect to up to 5 other people in a room. When you send messages in the - room, everyone receives them. What are some of the challenges of this system, - and how might you solve them?\r\n\r\nYour teacher will hand out more specific - instructions for this activity." - NetSim Standalone Classroom Routers_markdown_instruction: "#Routing messages - \r\n\r\nIn this version of the Internet Simulator, everyone connects to a - router and has a specific address. To send messages, you have to address your - message to the specific address of the recipient, and the router will take - care of delivering it to the right computer. If there are other routers created - in your class, ask for the address of one of your classmates and send them - a message! View the Log Router to see the path the messages have taken through - the network.\r\n\r\nYour teacher will hand out more specific instructions - for this activity." - NetSim Standalone Freeplay_markdown_instruction: "# Internet Simulator Freeplay\r\n\r\nIn - this version of the Internet Simulator, most of the options are turned on - and are configurable. Messages can be sent to any router within the class, - and messages will take different paths to reach their destination.\r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone Manual DNS_markdown_instruction: "# Introduction to DNS\r\n\r\nIn - this version of the simulator you can't see the other students' addresses. Instead, - one of you must act as a name service, to help share addresses with each other. - From the DNS tab in the left column, one person can take over as DNS.\r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone Packets TCP_markdown_instruction: "# Packets and Making a - Reliable Internet\r\n\r\nMessages on the Internet can take many paths to get - to their destination, and sometimes along the way the message gets dropped. - In this version of the Internet Simulator:\r\n\r\n- There is a 10% chance - of a packet being dropped\r\n- Multiple packets may take different paths to - the destination\r\n- The default max packet size is set to 6 additional characters\r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone SendAB_markdown_instruction: "#Sending bits with the Internet - Simulator\r\n\r\nYou and your partner share a single wire that can only be - in state A or state B. You can set the wire to either state at any time, and - you can read the state of the wire at any time. Can you figure out a way to - effectively communicate with just this system?\r\n\r\nYour teacher will hand - out more specific instructions for this activity." - NetSim Standalone Sending Numbers Ascii_markdown_instruction: "# Sending Text - with the Internet Simulator\r\n\r\nNow that you've transmitted information - represented as decimal numbers, you can map those numbers to text characters - to send text-based information back and forth. With a text-based protocol, - you can easily represent and communicate all kinds of information. \r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone Sending Numbers_markdown_instruction: "#Sending Numbers with - the Internet Simulator\r\n\r\nYou and your partner can now reliably send messages - back and forth without extra coordination! While you're always sending bits - back and forth, you can also represent those bits as decimal numbers. What - kinds of information can you represent with this system? \r\n\r\nYour teacher - will hand out more specific instructions for this activity." - NetSim_Variant2_markdown_instruction: "##NetSim: Variant 2\r\n\r\nStudents - connect directly to one another and send entire packets back and forth, exploring - systems of encoding data." NEW Course 4 Artist Functions 1_markdown_instruction: "Can you draw a square that is 100 pixels in length, using a repeat loop?\r\n\r\n" NEW Course 4 Artist Functions 10.1_markdown_instruction: "Use the functions @@ -16396,15 +13761,77 @@ en: NEW Course 4 Play Labs For Loops 8a_markdown_instruction: "**Challenge:** How would you use the `for loop` to go from top to bottom and get every character to say their actor number, then vanish from the screen? " + NetSim Standalone Automatic DNS_markdown_instruction: "# Domain Name System + (DNS)\r\n\r\nIn this version of the Internet Simulator, a Domain Name System + (DNS) is provided for you and knows the IP addresses of all connected computers. + You can only see the hostnames of other connected computers. \r\n![](https://images.code.org/3ac2c23ed610abc7e785ec85054e89a9-image-1434746293690.PNG)\r\n\r\nThe + address of the DNS is always <yourRouterNumber>.15. Send a message with + protocol `GET [hostname]`, for example `GET Bob2`, to the DNS to get another + student's address. You can keep track of the responses in the Notes section + in the DNS tab. \r\n![](https://images.code.org/c81c1a6b876eb46674a7f7e5e70506ce-image-1434746797267.png)\r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone Broadcast_markdown_instruction: "# Broadcast messages in + the Internet Simulator\r\n\r\nIn this version of the Internet Simulator, you + can connect to up to 5 other people in a room. When you send messages in the + room, everyone receives them. What are some of the challenges of this system, + and how might you solve them?\r\n\r\nYour teacher will hand out more specific + instructions for this activity." + NetSim Standalone Classroom Routers_markdown_instruction: "#Routing messages + \r\n\r\nIn this version of the Internet Simulator, everyone connects to a + router and has a specific address. To send messages, you have to address your + message to the specific address of the recipient, and the router will take + care of delivering it to the right computer. If there are other routers created + in your class, ask for the address of one of your classmates and send them + a message! View the Log Router to see the path the messages have taken through + the network.\r\n\r\nYour teacher will hand out more specific instructions + for this activity." + NetSim Standalone Freeplay_markdown_instruction: "# Internet Simulator Freeplay\r\n\r\nIn + this version of the Internet Simulator, most of the options are turned on + and are configurable. Messages can be sent to any router within the class, + and messages will take different paths to reach their destination.\r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone Manual DNS_markdown_instruction: "# Introduction to DNS\r\n\r\nIn + this version of the simulator you can't see the other students' addresses. Instead, + one of you must act as a name service, to help share addresses with each other. + From the DNS tab in the left column, one person can take over as DNS.\r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone Packets TCP_markdown_instruction: "# Packets and Making a + Reliable Internet\r\n\r\nMessages on the Internet can take many paths to get + to their destination, and sometimes along the way the message gets dropped. + In this version of the Internet Simulator:\r\n\r\n- There is a 10% chance + of a packet being dropped\r\n- Multiple packets may take different paths to + the destination\r\n- The default max packet size is set to 6 additional characters\r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone SendAB_markdown_instruction: "#Sending bits with the Internet + Simulator\r\n\r\nYou and your partner share a single wire that can only be + in state A or state B. You can set the wire to either state at any time, and + you can read the state of the wire at any time. Can you figure out a way to + effectively communicate with just this system?\r\n\r\nYour teacher will hand + out more specific instructions for this activity." + NetSim Standalone Sending Numbers Ascii_markdown_instruction: "# Sending Text + with the Internet Simulator\r\n\r\nNow that you've transmitted information + represented as decimal numbers, you can map those numbers to text characters + to send text-based information back and forth. With a text-based protocol, + you can easily represent and communicate all kinds of information. \r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone Sending Numbers_markdown_instruction: "#Sending Numbers with + the Internet Simulator\r\n\r\nYou and your partner can now reliably send messages + back and forth without extra coordination! While you're always sending bits + back and forth, you can also represent those bits as decimal numbers. What + kinds of information can you represent with this system? \r\n\r\nYour teacher + will hand out more specific instructions for this activity." + NetSim_Variant2_markdown_instruction: "##NetSim: Variant 2\r\n\r\nStudents + connect directly to one another and send entire packets back and forth, exploring + systems of encoding data." Nike Example Brand Book_markdown_instruction: "# Brand Book\r\n\r\nCheck out the example of a brand book\r\n\r\n" + October15 JoL 1_markdown_instruction: "Program the artist to design a face + for your jack-o-lantern!\r\n\r\n" October15 bat_markdown_instruction: "Freeplay: Here are the functions you've written, and some more for you to play with. Play with the pen width to see how different your drawings look!\r\n\r\n" October15 ghost 1_markdown_instruction: "Give the ghost eyes, using the `draw a circle` function.\r\n\r\n" - October15 JoL 1_markdown_instruction: "Program the artist to design a face - for your jack-o-lantern!\r\n\r\n" October15 pumpkin 1_markdown_instruction: "Finish this jack-o-lantern by drawing the eyes and nose in any style you would like.\r\n\r\n" October15 stars 1_markdown_instruction: "Use loops and the `random integer` @@ -16421,13 +13848,13 @@ en: pizza topping and coupon code and returns the cost of a pizza with that topping. If the coupon code is correct (you get to decide what it is), apply a 30% discount to the pizza." - PDAlg 8-12 ex dr 2_markdown_instruction: "This student has created two examples - for the function `apples` but something's not quite right. How would you - direct this student to correct their mistake?" PDAlg 8-12 Rocket Height Puzzle_markdown_instruction: "Let's write a `rocket-height` function with simple acceleration. Write a function that ensures the rocket is at 15 meters at 1 second, 45 meters at 2 seconds, 95 at 3 seconds, and 165 at 4 seconds." + PDAlg 8-12 ex dr 2_markdown_instruction: "This student has created two examples + for the function `apples` but something's not quite right. How would you + direct this student to correct their mistake?" PDAlg Big Game History_markdown_instruction: "Now that you've played through a Big Game level you should see a new entry in your history. Click the _Version History_ button and you should see at least one version. Each time you go @@ -16471,17 +13898,14 @@ en: of what happened, and describe the problem in an email to pd@code.org. Also include what operating system and browser version you're using (example: Windows 7, Internet explorer 9). We really appreciate teachers and users sending - us bug reports.\n\n### How will you foster a healthy CS classroom environment?\nNow - that you know more about our curriculum, what practices do you want to use - to promote a healthy atmosphere in your computer science classroom?'\n" - PDAlg course goals_markdown_instruction: "# Documenting Your Course Goals\r\n\r\n**Now - that you've learned more about the CS in Algebra Professional Learning Program - and curriculum, let's consider your goals**\r\n\r\n - What are your goals - for your CS in Algebra class?\r\n - How do you you see it integrating into - your class, and what do you hope that you and your students get out of the - experience?\r\n\r\n*These goals will change over time, and we'll revisit - your response as we go through the course so we can check in on how we're - progressing towards those goals.*\r\n" + us bug reports.\n\n### How will you foster a healthy CS classroom environment?\nNow + that you know more about our curriculum, what practices do you want to use + to promote a healthy atmosphere in your computer science classroom?'\n" + PDAlg DR Text 1_markdown_instruction: "Here's the same contract from the last + page. What could you ask this student to help them identify and correct their + error?\n\n### Question\n\nIf you have a budget in dollars, can you write a + function `treats` that returns the number of treats you could afford at 50 + cents each?\n\n### Contract\n\n`treats: Number Number -> Number`\n" PDAlg Design Recipe Delete_markdown_instruction: "When developing complex programs it's not uncommon to end up with functions that you no longer want, which used to just crowd your functions drawer, but now you can **delete** them. @@ -16492,11 +13916,6 @@ en: Complete the Design Recipe for the `eggs` function, making sure to create and test your examples. (You can ignore creating examples if you want to see the error message.)" - PDAlg DR Text 1_markdown_instruction: "Here's the same contract from the last - page. What could you ask this student to help them identify and correct their - error?\n\n### Question\n\nIf you have a budget in dollars, can you write a - function `treats` that returns the number of treats you could afford at 50 - cents each?\n\n### Contract\n\n`treats: Number Number -> Number`\n" PDAlg Prep on Paper_markdown_instruction: "# Lesson Prep > Thinking on Paper\r\n\r\nAs you learned in the summer PD, thinking through the Design Recipe on paper is an essential step for success, particularly when it comes to solving complex @@ -16534,6 +13953,14 @@ en: visible screen space.\r\n- Zoom in and out using Cmd +/- (Mac) or Ctrl +/- (Windows)\r\n\r\nExperiment with this provided code to see how the space can be manipulated to deal with larger programs." + PDAlg course goals_markdown_instruction: "# Documenting Your Course Goals\r\n\r\n**Now + that you've learned more about the CS in Algebra Professional Learning Program + and curriculum, let's consider your goals**\r\n\r\n - What are your goals + for your CS in Algebra class?\r\n - How do you you see it integrating into + your class, and what do you hope that you and your students get out of the + experience?\r\n\r\n*These goals will change over time, and we'll revisit + your response as we go through the course so we can check in on how we're + progressing towards those goals.*\r\n" PDK5 Challenges_markdown_instruction: "What are your biggest challenges to implementing Code.org's curriculum in your classroom?\n" PDK5 Classroom Culture 2_markdown_instruction: "### Strategies for facilitating @@ -16648,6 +14075,19 @@ en: tile. \n\n![image](//code.org/images/strategiesforteachingcs.png)\n\n</br>\n\n\n\n" PDK5 Test5_markdown_instruction: "## What did you think about things?\n\nWhat are your thoughts?\n" + PS FR test 7-25_markdown_instruction: "Here is *some* **markdown**" + PS Log test - Define and use turnAround_markdown_instruction: "#Do This:\r\n**Define** + a function called `turnAround` which turns the turtle around. Once you've + defined the function **call** it to make sure it works as you expect and then + move the turtle forward, as shown below. \r\n\r\n![](https://images.code.org/4c31307ec14cc6dfd65589f2a813120e-image-1447884881189.gif)" + PS copy 2-3 Bee Conditionals 5_markdown_instruction: "These magic purple flowers + change!\r\n\r\nEach time you try the puzzle, purple flowers can have either + 1 nectar or none at all...but you won't know the number until you run the + code! \r\n\r\nBe careful not to collect nectar from a purple flower if it + doesn't have any. \r\nYou must first check if the nectar is equal to 1 using + the `if nectar` block." + PS fr prediction q1_markdown_instruction: "What do *you* think will happen? + " Peer Review Level 1 - Tuesday Report_markdown_instruction: "Vacations are really fun. Please document a short and amusing story about a recent vacation.\r\n\r\nSome guidelines\r\n\r\n* Pics or it didn't happen\r\n* Keep it to 4 sentences @@ -16739,24 +14179,6 @@ en: Play Lab Rocket Free Play_markdown_instruction: "Free Play: Experiment with your `rocket-height` function to make the rocket fly in different ways. Click \"Finish\" when you are done." - playEventsK1_markdown_instruction: "This game is called \"Play Lab\".\r\n\r\nSee - if you can figure out what each block does." - playEventsK2_markdown_instruction: "Jorge wants to say \"Hi there.\"\r\n\r\nCan - you help?\r\n\r\n![](https://images.code.org/f32d285fa6f45e1f8d042c04c55f32c8-image-1467988839292.gif)" - playEventsK3_markdown_instruction: "Jorge wants to be scratched behind the - ears!\r\n\r\nCan you make it so that when you click Jorge he is happy?\r\n\r\n![](https://images.code.org/04fb37990455b215e0f20884363092d0-image-1467988943134.gif)" - playEventsK4_markdown_instruction: "Can you make it so that Jorge the dog chases - Robin the bird when you click the up arrow?\r\n\r\n![](https://images.code.org/2fbf6c793bb77a961fa7a52f27e4c59d-image-1467989013878.gif)" - playEventsK5_markdown_instruction: "Now add code so that Robin flies away when - you click the forward arrow.\r\n\r\n![](https://images.code.org/a7e224c5f13e39e5342011f8a76d3b6b-image-1467989101328.gif)" - playEventsK6_markdown_instruction: "Have Robin talk back to Jorge when you - click on her.\r\n\r\n![](https://images.code.org/fc80b1febbb7a472026b6bf2c535b2f4-image-1467989171517.gif)" - playEventsK7_markdown_instruction: "What else can you do in this fun scene?\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Conversation</strong> - - Have the sprites talk to eachother when you click on them.</li>\r\n <li><strong>Pinball</strong> - - Make one sprite play a noise when the other runs into it.</li>\r\n <li><strong>Arrows</strong> - - Write a program so when each arrow key is pressed, the sprite moves in that - direction!</li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>" Poorva copy U3L2 Using Simple Commands_markdown_instruction: "<img src=\"https://images.code.org/0aca9e3ba0945f31ddd56438a45ed69c-image-1436286498758.png\" align=right>\r\n\r\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write @@ -16780,10 +14202,6 @@ en: design! \r\n\r\n# Do This:\r\n\r\n* **Read the Project Overview** to understand the entire project.\r\n* **Follow the Project Planning Guide**.\r\n* **Implement your final program in this level**." - pre-assessment survey q24A_markdown_instruction: "What computer science skills - do you use in your everyday life? " - pre-assessment survey q25A_markdown_instruction: "If yes, what computer science - course(s) had you taken before your current computer science class? " Predict Loop I_markdown_instruction: "# Predict\r\n\r\nWhat will print as a result of this loop?" Project - Make Your Own Clicker Game_markdown_instruction: "# Make Your Own @@ -16818,19 +14236,6 @@ en: stuck” on any screen.** It should always be possible to navigate from a screen in your app to some other screen. \r\n* Your program code should follow **good style**.\r\n* Your user interface should be **intuitive to use**." - PS copy 2-3 Bee Conditionals 5_markdown_instruction: "These magic purple flowers - change!\r\n\r\nEach time you try the puzzle, purple flowers can have either - 1 nectar or none at all...but you won't know the number until you run the - code! \r\n\r\nBe careful not to collect nectar from a purple flower if it - doesn't have any. \r\nYou must first check if the nectar is equal to 1 using - the `if nectar` block." - PS fr prediction q1_markdown_instruction: "What do *you* think will happen? - " - PS FR test 7-25_markdown_instruction: "Here is *some* **markdown**" - PS Log test - Define and use turnAround_markdown_instruction: "#Do This:\r\n**Define** - a function called `turnAround` which turns the turtle around. Once you've - defined the function **call** it to make sure it works as you expect and then - move the turtle forward, as shown below. \r\n\r\n![](https://images.code.org/4c31307ec14cc6dfd65589f2a813120e-image-1447884881189.gif)" 'Raw Data Podcast: Data Confidential_markdown_instruction': "## Raw Data Podcast: Data Confidential <i class=\"fa fa-volume-up\" aria-hidden=\"true\"></i>\r\n\r\nRaw Data is a podcast from the Stanford Cyber Initiative that explores the uses @@ -17009,18 +14414,6 @@ en: how packets are constructed.**\r\n\r\n### How this task is reviewed\r\nThis task is peer-reviewed by 2 peers, using the following rubric:\r\n\r\n - Lesson includes lecture\r\n - Lesson includes activity on network simulator" - sample1_markdown_instruction: "Our adventurer wants to collect coins. But - she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many - as she can using just 4 blocks?" - sample10a_markdown_instruction: "<h4>You have helped the adventurer and her - bee! \r\nAs a reward, please stay and play around in my magical village. \r\n<br/>\r\n\r\nYou - should have everything you need to create a game of your own.</h4>" - sample4_markdown_instruction: "Our adventurer has found a stash of coins in - this cave.\r\n\r\nCan you help her grab as many as she can using just 7 blocks?" - sample6_markdown_instruction: "**Challenge:** Help bee get all of the nectar.\r\n\r\nThis - puzzle is meant to be hard. You may need to try lots of times." - sample8_markdown_instruction: "Look at this trove of coins! \r\n\r\nHow many - can you get the adventurer to grab?" Screen Size_markdown_instruction: "# Hardware Accessibility: Screen Size\r\n\r\nAnother thing to consider about accessibility for different users is the size of the device they are using to view the web page. You can do a basic test for this @@ -17200,44 +14593,6 @@ en: barriers.\r\n\r\n## Submit the Link for your Forum Post\r\n\r\nOnce you’ve posted in the forum, share a link here. In order to get a direct link to your post, click the link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)\r\n\r\n\r\n\r\n" - Teaching and Student Support Plan_markdown_instruction: "> **NOTE: before you - start this task, make sure you’ve reviewed the lesson resources in this module, - and have a good sense of how the lesson works. If you haven’t already reviewed - the materials, do that now and come back to this task later.**\r\n\r\n# Teaching - and Student Support plan\r\n## Task Description\r\n\r\nNow that you have a - better sense of this lesson, let’s think about the types of supports students - will need in order to successfully complete it. Since the curriculum is based - on inquiry learning, lessons feature activities that engage students in discovering - core concepts themselves. It’s important to think through implementation plans - and student support. In this task you will make a plan for teaching and student - support that takes into account differentiation strategies and make-up work - for absent students. Your teaching and student support plan should cover the - following: \r\n\r\n- **Details on how you will implement and differentiate - the lesson:**\r\n\r\n - An outline of any changes you will need to make to - the lesson to fit your local constraints or context (for example: pacing and - time, dealing with classroom setup, etc). \r\n - An overview of the types - of student needs you’ll likely need to support in your classroom (for example: - students who are struggling to understand the underlying concept; students - who are already familiar with the concept, but still have room to learn more; - etc)\r\n - Your plan for addressing each of the needs outlined above (for - example: integrating extension activities or other materials for students - who already know something about the topic)\r\n<br><Br>\r\n\r\n- **Plan for - catching up absent students:**\r\n\r\n - How will absent students catch up - on activities they missed? \r\n\r\nYou can type out your teaching and student - support plan in the box below, or you can upload a word doc or pdf file. \r\n\r\n## - Getting Credit for Completing this Task\r\n\r\n#### Task Review Details\r\n\r\nIf - this module is listed as your “focus area”, then your response to the prompt - above will be shared anonymously and reviewed by your peers, and you will - review the work done by other teachers. Reviewers will be looking for thoughtful - and thorough answers that demonstrate that you have spent time considering - how the lesson will play out in your own classroom. Reviewers will have an - opportunity to give feedback on your submission, and you can respond to that - feedback and resubmit. \r\n\r\nIn order to get credit for completing this - task, two reviewers need to agree that you have responded to the prompts fully. - If reviewers don’t feel comfortable making a decision about your task submission, - they can elevate to a facilitator to review. You will always have a chance - to address feedback from your reviewers and resubmit your task! Reviewer feedback - will show up at the bottom of this page, once it’s available. " 'Teaching Practice Plan: Assessing Student Learning_markdown_instruction': "> **NOTE: before you start this task, make sure you’ve reviewed the resources in this module, and have a good sense of the connections to unit 1. If you @@ -17389,10 +14744,46 @@ en: will always have a chance to address feedback from your reviewers and resubmit your task! Reviewer feedback will show up at the bottom of this page, once it’s available. \r\n\r\n\r\n\r\n\r\n" + Teaching and Student Support Plan_markdown_instruction: "> **NOTE: before you + start this task, make sure you’ve reviewed the lesson resources in this module, + and have a good sense of how the lesson works. If you haven’t already reviewed + the materials, do that now and come back to this task later.**\r\n\r\n# Teaching + and Student Support plan\r\n## Task Description\r\n\r\nNow that you have a + better sense of this lesson, let’s think about the types of supports students + will need in order to successfully complete it. Since the curriculum is based + on inquiry learning, lessons feature activities that engage students in discovering + core concepts themselves. It’s important to think through implementation plans + and student support. In this task you will make a plan for teaching and student + support that takes into account differentiation strategies and make-up work + for absent students. Your teaching and student support plan should cover the + following: \r\n\r\n- **Details on how you will implement and differentiate + the lesson:**\r\n\r\n - An outline of any changes you will need to make to + the lesson to fit your local constraints or context (for example: pacing and + time, dealing with classroom setup, etc). \r\n - An overview of the types + of student needs you’ll likely need to support in your classroom (for example: + students who are struggling to understand the underlying concept; students + who are already familiar with the concept, but still have room to learn more; + etc)\r\n - Your plan for addressing each of the needs outlined above (for + example: integrating extension activities or other materials for students + who already know something about the topic)\r\n<br><Br>\r\n\r\n- **Plan for + catching up absent students:**\r\n\r\n - How will absent students catch up + on activities they missed? \r\n\r\nYou can type out your teaching and student + support plan in the box below, or you can upload a word doc or pdf file. \r\n\r\n## + Getting Credit for Completing this Task\r\n\r\n#### Task Review Details\r\n\r\nIf + this module is listed as your “focus area”, then your response to the prompt + above will be shared anonymously and reviewed by your peers, and you will + review the work done by other teachers. Reviewers will be looking for thoughtful + and thorough answers that demonstrate that you have spent time considering + how the lesson will play out in your own classroom. Reviewers will have an + opportunity to give feedback on your submission, and you can respond to that + feedback and resubmit. \r\n\r\nIn order to get credit for completing this + task, two reviewers need to agree that you have responded to the prompts fully. + If reviewers don’t feel comfortable making a decision about your task submission, + they can elevate to a facilitator to review. You will always have a chance + to address feedback from your reviewers and resubmit your task! Reviewer feedback + will show up at the bottom of this page, once it’s available. " Test Contained Free Response_markdown_instruction: "My free response markdown instructions" - test externallink_markdown_instruction: "# Creative Commons\r\n\r\nHead to - the Creative Commons website to learn more about CC licensing models." Test Free Response Assessment Question_markdown_instruction: "Imagine that you have to send a list of 10 numbers to friend in binary using the bit-sending widget. The numbers are all between 0 and 100. Describe the issues or problems @@ -17400,24 +14791,6 @@ en: address these problem?\n\n### Hello!\n" Test Markdown level_markdown_instruction: "Enter prompt here\n\n# Test Markdown title\n\nTest Markdown prompt\n\n\n" - test peer review_markdown_instruction: "At this point you've seen 7 of the - 14 lessons from unit 1. Thinking about those lessons, and looking across the - other lessons in <a href=\"curriculum.code.org/csp/unit1/\" target=_blank>unit - 1</a> work with your partner to develop a set of recommendations for using - group work and peer learning in Unit 1. Your recommendations should include:\r\n\r\n- - Which lessons or activities provide opportunities for group work and peer - learning? \r\n- What recommendations do you have for using group work and - peer learning in Unit 1 lessons? \r\n\r\nUse the space below to record any - recommendations or commentary you have for others. Once you submit, another - participant will review chance to send you feedback! \r\n\r\n" - test_anonymous_student_survey_next_class_markdown_instruction: "What you will - do next after this class?" - test_anonymous_student_survey_why_class_markdown_instruction: "Why are you - doing this class? Give at least two reasons." - test_sarah_markdown_instruction: "hi" - test_sarah_freeresponse_markdown_instruction: "This is the question at hand...." - testing code callout_markdown_instruction: "# Click the link!\r\n[Show me where - the sprite moves](#triggercallout=code_triggered)\r\n" Testing Quantum Farmer_markdown_instruction: "Wow, look at that! \r\n\r\nI don't know how many shovelfuls of dirt this hole needs. \r\nCan you write a program that keeps using the `fill` block until the ground is even? " @@ -17429,10 +14802,6 @@ en: questions](https://docs.google.com/document/d/1ngw37cKFH4Dl_lhWXuXROH5WDdgHatz3gJo3pAdpqkg/edit?usp=sharing)" 'The Internet: Wires, Cables, and Wifi_markdown_instruction': "[Video guide and questions](https://docs.google.com/document/d/1YviZiL1VjpUa9Gbe3j_4lETKyoZqEW14_RG7EEWEwgU/edit)" - the Journal of Peer Learning_markdown_instruction: "The following link is to - a journal out of Australia that focuses on publishing scholarly research that - investigates innovations in peer learning and the implementation and evaluations - of peer learning programs:" The Official Peer Instruction Blog_markdown_instruction: "The following link is to a recent blog post describing the basic approach to and benefits of peer learning: " @@ -17501,14 +14870,6 @@ en: flow, or outcome of the lesson?\r\n- What benefits and pitfalls did you see in discovery activities?\r\n\r\nUse the space below to record any thoughts, recommendations, or commentary." - 'Tuesday Report: discovery learning_markdown_instruction': "So far we've seen - four lessons from unit 1 -- two model lessons delivered by facilitators and - two lessons by participants. With your partner, consider:\r\n\r\n- What opportunities - have you seen for learners to discover concepts for themselves? \r\n- How - did the process of engaging in discovery activities change the pacing, flow, - or outcome of the lesson? \r\n- What benefits and pitfalls did you see in - discovery activities? \r\n\r\nUse the space below to record any thoughts, - recommendations, or commentary" 'Tuesday Report: Group Work and Peer Learning in Unit 1_markdown_instruction': "So far we've seen four lessons from unit 1 — two model lessons delivered by facilitators and two lessons by participants. With your partner, consider:\r\n\r\n- @@ -17525,6 +14886,14 @@ en: are available in the curriculum?\r\n- What strategies would be effective for checking in on what students know?\r\n\r\nUse the space below to record any thoughts, recommendations, or commentary." + 'Tuesday Report: discovery learning_markdown_instruction': "So far we've seen + four lessons from unit 1 -- two model lessons delivered by facilitators and + two lessons by participants. With your partner, consider:\r\n\r\n- What opportunities + have you seen for learners to discover concepts for themselves? \r\n- How + did the process of engaging in discovery activities change the pacing, flow, + or outcome of the lesson? \r\n- What benefits and pitfalls did you see in + discovery activities? \r\n\r\nUse the space below to record any thoughts, + recommendations, or commentary" U1L1 - FR computer science word association_markdown_instruction: "**Directions:**\n\nYou're in a class called *Computer Science Principles*.\n\nYou might not know anything about computer science right now. You might know a few things. We're going @@ -17624,22 +14993,22 @@ en: U1L2 Free response reflection question_markdown_instruction: " Modify your question so that it could be answered with a binary message. Explain why it can now be answered with a binary message.\n\n\n" + U1L3 Free Response_markdown_instruction: "How did collaboration impact the + development of your protocol? What challenges did working in a group present + and in what ways did it positively impact your final product?" U1L3 Free response reflection question_markdown_instruction: "Recall when you built your binary message sending device. Why did we decide to send a message as a sequence of states (A and B) rather than modifying our devices to represent more states (State C, State D, State E, ...)?\r\n" - U1L3 Free Response_markdown_instruction: "How did collaboration impact the - development of your protocol? What challenges did working in a group present - and in what ways did it positively impact your final product?" + U1L4 Free Response Reflection_markdown_instruction: "A binary message was recorded + as a wave as shown in the image below. Can you decode the message? Explain + what information you would need in order to successfully decode the message + into A’s and B’s.\n\n![](https://images.code.org/c8ba0db14fabb778dc034ac4656259fa-image-1434429617999.png)\n\n" U1L4 Free response reflection question_markdown_instruction: "Complete the Lesson 2 Rubric.\n\nA binary message consisting of four bits was sent to you by a friend. The message was supposed to be ABAB. Unfortunately, your friend sent the message at 1/2 the bit rate you agreed upon. What message did you receive instead?\n" - U1L4 Free Response Reflection_markdown_instruction: "A binary message was recorded - as a wave as shown in the image below. Can you decode the message? Explain - what information you would need in order to successfully decode the message - into A’s and B’s.\n\n![](https://images.code.org/c8ba0db14fabb778dc034ac4656259fa-image-1434429617999.png)\n\n" U1L4 NetSim SendAB_markdown_instruction: "##Coordination and Binary Messages Activity\r\n\r\n**Develop your Protocol**\r\nDevelop a protocol that allows you to use Internet Simulator to relay a message, i.e. one member sends a @@ -17697,29 +15066,6 @@ en: U1L9 Free Response Assessment_markdown_instruction: "Choose one of the topics you most enjoyed learning about today. Describe what new information you learned and how it relates to the way we create and use number systems.\n" - U2 frequency caesar_markdown_instruction: "# Break a Caesar cipher!\r\n\r\nThis - tool lets you play with text and do substitution ciphers. It also shows you - a frequency analysis of the input text. (We’ll look at that more in a later - lesson.) You can use this to either encrypt a message or decrypt it.\r\n\r\n# - Do this\r\n- Load the **Sample message (easy)** from the message dropdown. - This will load a message that has been encrypted with a Caesar cipher.\r\n\r\n![](https://images.code.org/336a6a68cc34636df21fe5ad9f43992c-image-1443566879847.gif)\r\n\r\n- - Using the buttons in the Caesar substitution tab, you can shift the alphabet - forwards or backwards to try to unscramble the message.\r\n\r\n![](https://images.code.org/1783d62a944fd758cc19c5d0f73ec2c4-image-1443567014825.gif)\r\n\r\nSee - how long it takes you to crack the cipher! Is this a good method of encrypting - secret data?\r\n" - U2 frequency random sub_markdown_instruction: "# Break a random substitution - cipher!\r\n\r\nThis version of the tool gives you more information about the - encrypted text and more options for how to try out different substitutions.\r\n\r\n### - Different ways analyze text\r\n- Play with some of the sorting options available - in the Random substitution cipher tab to get different views on the letter - frequencies in the input text as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\n### - Different ways to substitute\r\n- To substitute a letter you can drag a blue - letter of the alphabet directly underneath the orange letter you want changed - in the original ciphertext.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n### - Play. Always play.\r\n- There are other ways to analyze and substitute characters - that you can find by clicking on the buttons and trying out whatever you like.\r\n- - Remember: you can't break it :)\r\n\r\nSee how long it takes you to crack - the cipher! Is this a good method of encrypting secret data?" 'U2 L 1 - 2: Teaching and Student Support Plan_markdown_instruction': "<br><br>\r\n> **NOTE: before you start this task, make sure you’ve reviewed the lesson resources in this module, and have a good sense of how the lesson works. If you haven’t @@ -17980,6 +15326,45 @@ en: show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" 'U2 The Internet: Cybersecurity and Crime - Video_markdown_instruction': "[Video guide and questions](https://drive.google.com/open?id=1Qv4lgMMtP42sRlofUmGtElViD1AJ7yETvQ4pCh0rDjw)" + U2 Vigenere_markdown_instruction: "# Encrypt and decrypt a message with the + Vigenère cipher\r\n\r\nThis is an interactive version of the Vigenère cipher + that animates the encryption and decryption as it’s happening, given a piece + of text to encrypt or decrypt and the key.\r\n\r\n# Do this\r\n### Encrypt + a message\r\nClick Step several times, and trace what’s happening. Pay attention + to:\r\n\r\n- How the ciphertext is being produced\r\n- What happens when you + get to the last character of the key\r\n- After you’ve stepped through a few + characters click Play to watch the rest animate\r\n- Hit Restart and play + the animation again. You can use the speed slider to speed it up or slow it + down \r\n\r\n![](https://images.code.org/06858f88ac12997bba73f4f76638a068-image-1443574425185.gif)\r\n\r\n### + Decrypt a message\r\nEncrypt a message as above, then: \r\n\r\n- Highlight + and copy the ciphertext\r\n- Paste it into the plaintext area. Note: Don’t + change the key\r\n- Change the Encrypt/Decrypt toggle to Decrypt\r\n- Hit + Step a few times, and then Play\r\n\r\nYou should see the original text emerge. \r\n![](https://images.code.org/dc89d6c19c17adb23b6b5ff9a62c4583-image-1443574425182.gif)\r\n\r\n\r\nHow + hard would it be to crack a message encrypted with this cipher? Does the length + of the key make a difference?\r\n" + U2 frequency caesar_markdown_instruction: "# Break a Caesar cipher!\r\n\r\nThis + tool lets you play with text and do substitution ciphers. It also shows you + a frequency analysis of the input text. (We’ll look at that more in a later + lesson.) You can use this to either encrypt a message or decrypt it.\r\n\r\n# + Do this\r\n- Load the **Sample message (easy)** from the message dropdown. + This will load a message that has been encrypted with a Caesar cipher.\r\n\r\n![](https://images.code.org/336a6a68cc34636df21fe5ad9f43992c-image-1443566879847.gif)\r\n\r\n- + Using the buttons in the Caesar substitution tab, you can shift the alphabet + forwards or backwards to try to unscramble the message.\r\n\r\n![](https://images.code.org/1783d62a944fd758cc19c5d0f73ec2c4-image-1443567014825.gif)\r\n\r\nSee + how long it takes you to crack the cipher! Is this a good method of encrypting + secret data?\r\n" + U2 frequency random sub_markdown_instruction: "# Break a random substitution + cipher!\r\n\r\nThis version of the tool gives you more information about the + encrypted text and more options for how to try out different substitutions.\r\n\r\n### + Different ways analyze text\r\n- Play with some of the sorting options available + in the Random substitution cipher tab to get different views on the letter + frequencies in the input text as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\n### + Different ways to substitute\r\n- To substitute a letter you can drag a blue + letter of the alphabet directly underneath the orange letter you want changed + in the original ciphertext.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n### + Play. Always play.\r\n- There are other ways to analyze and substitute characters + that you can find by clicking on the buttons and trying out whatever you like.\r\n- + Remember: you can't break it :)\r\n\r\nSee how long it takes you to crack + the cipher! Is this a good method of encrypting secret data?" U2 vigenere cipher_markdown_instruction: "# Encrypt and decrypt a message with the Vigenère cipher\r\n\r\nThis is an interactive version of the Vigenère cipher that animates the encryption and decryption as it’s happening, given @@ -17996,22 +15381,6 @@ en: Step a few times, and then Play\r\n\r\nYou should see the original text emerge. \r\n![](https://images.code.org/dc89d6c19c17adb23b6b5ff9a62c4583-image-1443574425182.gif)\r\n\r\n\r\nHow hard would it be to crack a message encrypted with this cipher? Does the length of the key make a difference?" - U2 Vigenere_markdown_instruction: "# Encrypt and decrypt a message with the - Vigenère cipher\r\n\r\nThis is an interactive version of the Vigenère cipher - that animates the encryption and decryption as it’s happening, given a piece - of text to encrypt or decrypt and the key.\r\n\r\n# Do this\r\n### Encrypt - a message\r\nClick Step several times, and trace what’s happening. Pay attention - to:\r\n\r\n- How the ciphertext is being produced\r\n- What happens when you - get to the last character of the key\r\n- After you’ve stepped through a few - characters click Play to watch the rest animate\r\n- Hit Restart and play - the animation again. You can use the speed slider to speed it up or slow it - down \r\n\r\n![](https://images.code.org/06858f88ac12997bba73f4f76638a068-image-1443574425185.gif)\r\n\r\n### - Decrypt a message\r\nEncrypt a message as above, then: \r\n\r\n- Highlight - and copy the ciphertext\r\n- Paste it into the plaintext area. Note: Don’t - change the key\r\n- Change the Encrypt/Decrypt toggle to Decrypt\r\n- Hit - Step a few times, and then Play\r\n\r\nYou should see the original text emerge. \r\n![](https://images.code.org/dc89d6c19c17adb23b6b5ff9a62c4583-image-1443574425182.gif)\r\n\r\n\r\nHow - hard would it be to crack a message encrypted with this cipher? Does the length - of the key make a difference?\r\n" U2L01 Assessment 4_markdown_instruction: "## The Internet is for Everyone: Assessment 4\n\nExplain one challenge raised by Vint Cerf in “The Internet is for Everyone - but it won’t be if….” and give one example of it that you @@ -18188,12 +15557,12 @@ en: password frequently or to have a longer password? \n\nWhat level of security is appropriate to require of end users? Does this change, depending on the context (for example, employee or customer)?\t\n" - U2L16 Free response assessment 1_markdown_instruction: "What does \"computationally - hard\" mean?" - U2L16 Free Response assessment 2_markdown_instruction: "What do people do who - need solutions to large computationally-hard problems?" U2L16 Free Response Assessment 3_markdown_instruction: "Why are computationally-hard problems important in encryption strategies?" + U2L16 Free Response assessment 2_markdown_instruction: "What do people do who + need solutions to large computationally-hard problems?" + U2L16 Free response assessment 1_markdown_instruction: "What does \"computationally + hard\" mean?" U2L17 Assessment 1_markdown_instruction: "Describe what it means for a problem to be “computationally hard.”" U2L17 Assessment 2_markdown_instruction: "What strategies do people use to @@ -18294,6 +15663,25 @@ en: you will know the name (or URL) of a computer you wish to talk to, but not its IP address. \n\nList two impacts that would result if you HAD TO KNOW IP addresses to get to websites?\n" + U3 - Arrays - Demo App_markdown_instruction: "# My Favorite Things\r\n\r\nCheck + out this simple app for creating a collection of your favorite things. **We're + going to be working towards building this app** over the next several exercises. + As you might expect, this application **uses an array** to store and organize + information.\r\n\r\n# Do This:\r\n\r\n* Use the \"My Favorite Things\" app + and try to **predict how arrays are used to create the functionality you observe.** + \r\n* Some features to notice:\r\n\t* The app keeps track of a **list of your + favorite things**.\r\n * You may use buttons to **move forward and backward + through your list**.\r\n * The **current entry and total number of entries** + are indicated at the top.\r\n * You may **add a new entry** at the current + location in your list." + U3 - Arrays - Wrap Up 1_markdown_instruction: "## Choose: Array or Variable?\n\nYour + app needs to store the following information. For each type of information, + decide whether you would use an array or a variable to store it:\n \n* All + the messages a user has sent\n* The highest score a user has ever reached + on the app\n* A username and password to unlock the app\n\n" + U3 - Arrays - Wrap Up 2_markdown_instruction: "## Free Response: Choosing Array + or Variable\n\nIn general, when do you think you should store information + in an array, and when should you use a variable?\n" U3 - Arrays - appendItem_markdown_instruction: "# Adding Items to an Array\r\n\r\n<img src=\"https://images.code.org/c9244eb598416b5a3d9baac088bbaca8-image-1447267168567.39.06 PM.png\" style=\"width: 250px; float: right\">\r\n\r\nIn our last exercise @@ -18366,17 +15754,6 @@ en: name**.\r\n* Use `console.log` to display the contents of your array. Below is an example of the output your program should generate.\r\n\r\n![](https://images.code.org/230d988cf99556db04a8a4ad6a8d8a47-image-1447364062049.33.53 PM.png)\r\n\r\n" - U3 - Arrays - Demo App_markdown_instruction: "# My Favorite Things\r\n\r\nCheck - out this simple app for creating a collection of your favorite things. **We're - going to be working towards building this app** over the next several exercises. - As you might expect, this application **uses an array** to store and organize - information.\r\n\r\n# Do This:\r\n\r\n* Use the \"My Favorite Things\" app - and try to **predict how arrays are used to create the functionality you observe.** - \r\n* Some features to notice:\r\n\t* The app keeps track of a **list of your - favorite things**.\r\n * You may use buttons to **move forward and backward - through your list**.\r\n * The **current entry and total number of entries** - are indicated at the top.\r\n * You may **add a new entry** at the current - location in your list." U3 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions as Indexes: Using Variables\r\n\r\nWe can use **any expression that evaluates to a number** as an index in an array. Here are some examples:\r\n\r\n![](https://images.code.org/6d4ecc9249dc9f3a845196b04d833c1a-image-1447268711944.24.53 @@ -18385,6 +15762,64 @@ en: from this list** to the console by generating a value for a random index. Try to write your program using `list.length` rather than hard-coding the length of the list.\r\n\r\n![](https://images.code.org/d0463c0f2528e04c396f3b9cf219c3ed-image-1447370139548.gif)" + U3 - Arrays - favThings Counting Variable_markdown_instruction: "# Current + Index\r\n\r\nThis app also allows a user to scroll through individual items + in the array. In order to keep track of which index we are currently viewing, + our application will need **a global variable that stores the current index**. + In coming exercises we'll want our global index to change, so let's **make + sure that your code references your global index** rather than fixed values.\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 + AM.png\" style=\"width: 250px; float: right\">\r\n\r\n* Create a **global + variable** that will be used to keep track of the current index in the array. + Set this variable to 0.\r\n* Update `setText` which displays the words to + show your first favorite thing using **the global index variable** instead + of a hard-coded number. \r\n* Update `setText` which displays the current + item number to use **the global index variable** instead of a hard-coded number.\r\n\t* + **Hint:** since arrays are zero-indexed **you will have to add one to your + index** to generate the correct value to display.\r\n* **Note:** neither of + these outputs will be able to change yet. Don't worry, we'll be taking care + of that in coming exercises!" + U3 - Arrays - favThings Next_markdown_instruction: "# Next Button\r\n\r\nNice + work! Your application should now have some simple output displaying one of + your favorite things and indicating which item of your list you are showing. + To make things more interesting, however, **we want to be able to change which + item we display**.\r\n\r\nTo change the item displayed, the user will use + the \"Next\" and \"Last\" buttons. These should **increase or decrease the + global index by one and then you should update the information displayed on + the screen**. To start out with, however, we'll just be writing code for + our Next Button. \r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to the + \"Next\" button.\r\n* Write code in this event handler that **increments your + global index variable** and then **updates the output on the screen**.\r\n\t* + **Note:** If your code from the last exercise was written to reference this + variable then you should just be able to reuse it once you've incremented + your variable. We'll talk more about this in the next exercise.\r\n* Run + your program to **confirm that the user can move forward through the list + and that the output displayed is correct**.\r\n\t* **Note:** You may notice + that your program throws an error if the global index variable goes out of + bounds. Don't worry about this for now - we'll fix it in a later exercise." + U3 - Arrays - favThings Prev_markdown_instruction: "# Last Button\r\n\r\nOur + user can now move forward through our list of favorite things, and we're + about to write code that allows them to move backwards as well. If you've + written your code to reference your global index then this should only require + you to decrease its value by one and reuse code that updates the screen output. + Before we write the code for backwards let's work on cleaning up our code.\r\n\r\n**Removing + Repeated Code:** Once you add the code for moving backwards through your array, + your program will have three places where it updates the screen by setting + the text of your screen elements. Rather than repeating this code we should + **create a function** that updates the screen and then call it every time + we need to refresh those elements. This will not only make our program easier + to read and avoids the errors that can arise from redundant code, but it also + makes it easier to make changes to how our program runs, since all the code + that updates the screen is in a single place.\r\n\r\n# Do This:\r\n\r\n* **Write + a function** that contains the `setText` commands you have used to update + the screen.\r\n* **Replace** the places in your code where you used to have + these commands with **calls to your new function**.\r\n* **Add an event handler** + to the \"Last\" button that decreases the **global index variable** by one + and then updates the screen by calling your new function.\r\n* Run your program + to confirm that the user **can move forward AND backward** through the list + and that the output displayed is correct.\r\n * **Note:** You may notice + that your program throws an error if the global index variable goes out of + bounds. Don't worry about this for now - we'll fix it in a later exercise." U3 - Arrays - favThings addItem_markdown_instruction: "# Adding New Items\r\n\r\nNow we want our user to be able to add items of their own to the list. As you might have guessed, this is as easy as inserting an item into our array at @@ -18412,23 +15847,6 @@ en: using one of the two strategies described above.\r\n* Run your program to confirm that the user **cannot go out of bounds** and that the output displayed is correct." - U3 - Arrays - favThings Counting Variable_markdown_instruction: "# Current - Index\r\n\r\nThis app also allows a user to scroll through individual items - in the array. In order to keep track of which index we are currently viewing, - our application will need **a global variable that stores the current index**. - In coming exercises we'll want our global index to change, so let's **make - sure that your code references your global index** rather than fixed values.\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 - AM.png\" style=\"width: 250px; float: right\">\r\n\r\n* Create a **global - variable** that will be used to keep track of the current index in the array. - Set this variable to 0.\r\n* Update `setText` which displays the words to - show your first favorite thing using **the global index variable** instead - of a hard-coded number. \r\n* Update `setText` which displays the current - item number to use **the global index variable** instead of a hard-coded number.\r\n\t* - **Hint:** since arrays are zero-indexed **you will have to add one to your - index** to generate the correct value to display.\r\n* **Note:** neither of - these outputs will be able to change yet. Don't worry, we'll be taking care - of that in coming exercises!" U3 - Arrays - favThings createArray_markdown_instruction: "# Create Your Array\r\n\r\nNow that we've dealt with our design elements we'll need to start writing the actual code of our app. This app keeps track of a list of items, so we know @@ -18462,47 +15880,6 @@ en: a little tricky if you **remove the item at the end of the list** so see if you can account for that.\r\n* Only add words **if they are not blank**.\r\n* **Improve the appearance** of the app." - U3 - Arrays - favThings Next_markdown_instruction: "# Next Button\r\n\r\nNice - work! Your application should now have some simple output displaying one of - your favorite things and indicating which item of your list you are showing. - To make things more interesting, however, **we want to be able to change which - item we display**.\r\n\r\nTo change the item displayed, the user will use - the \"Next\" and \"Last\" buttons. These should **increase or decrease the - global index by one and then you should update the information displayed on - the screen**. To start out with, however, we'll just be writing code for - our Next Button. \r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to the - \"Next\" button.\r\n* Write code in this event handler that **increments your - global index variable** and then **updates the output on the screen**.\r\n\t* - **Note:** If your code from the last exercise was written to reference this - variable then you should just be able to reuse it once you've incremented - your variable. We'll talk more about this in the next exercise.\r\n* Run - your program to **confirm that the user can move forward through the list - and that the output displayed is correct**.\r\n\t* **Note:** You may notice - that your program throws an error if the global index variable goes out of - bounds. Don't worry about this for now - we'll fix it in a later exercise." - U3 - Arrays - favThings Prev_markdown_instruction: "# Last Button\r\n\r\nOur - user can now move forward through our list of favorite things, and we're - about to write code that allows them to move backwards as well. If you've - written your code to reference your global index then this should only require - you to decrease its value by one and reuse code that updates the screen output. - Before we write the code for backwards let's work on cleaning up our code.\r\n\r\n**Removing - Repeated Code:** Once you add the code for moving backwards through your array, - your program will have three places where it updates the screen by setting - the text of your screen elements. Rather than repeating this code we should - **create a function** that updates the screen and then call it every time - we need to refresh those elements. This will not only make our program easier - to read and avoids the errors that can arise from redundant code, but it also - makes it easier to make changes to how our program runs, since all the code - that updates the screen is in a single place.\r\n\r\n# Do This:\r\n\r\n* **Write - a function** that contains the `setText` commands you have used to update - the screen.\r\n* **Replace** the places in your code where you used to have - these commands with **calls to your new function**.\r\n* **Add an event handler** - to the \"Last\" button that decreases the **global index variable** by one - and then updates the screen by calling your new function.\r\n* Run your program - to confirm that the user **can move forward AND backward** through the list - and that the output displayed is correct.\r\n * **Note:** You may notice - that your program throws an error if the global index variable goes out of - bounds. Don't worry about this for now - we'll fix it in a later exercise." U3 - Arrays - favThings template_markdown_instruction: "# Getting Started: Creating IDs\r\n\r\nTo get your application off the ground we've provided **the user interface elements that you will use in your application**. Unfortunately @@ -18615,14 +15992,6 @@ en: of at least **5 words**.\r\n* Use `console.log` to confirm you succesfully created your sentence.\r\n\r\n![](https://images.code.org/75fc0b55a44d02e2366c60b30aeb28d1-image-1447252397993.33.06 AM.png)" - U3 - Arrays - Wrap Up 1_markdown_instruction: "## Choose: Array or Variable?\n\nYour - app needs to store the following information. For each type of information, - decide whether you would use an array or a variable to store it:\n \n* All - the messages a user has sent\n* The highest score a user has ever reached - on the app\n* A username and password to unlock the app\n\n" - U3 - Arrays - Wrap Up 2_markdown_instruction: "## Free Response: Choosing Array - or Variable\n\nIn general, when do you think you should store information - in an array, and when should you use a variable?\n" U3 - Basic Conditionals - 1_markdown_instruction: "0- True and False statement\r\n\r\nif ( 1 < 5) {\r\n console.log(\"Hello\");\r\n}" U3 - Basic Conditionals - 2_markdown_instruction: "# Greater and Less Than\r\nIn @@ -18658,6 +16027,22 @@ en: setting the `x` and `y` values of the circle to random numbers, it will look like there's only one dot. But really you will have just drawn 200 dots all at the same (x, y) position.\r\n\r\n" + U3 - Canvas - One Dot sprayPaint_markdown_instruction: "# Making Spray Paint\r\n\r\nThe + next effect we would like to create is a \"spray paint\" effect. Instead of + drawing a single dot for every location stored in `eventList`, we'll draw + many small dots randomly placed around each location.\r\n\r\nWe are going + to start off just practicing **drawing a circle whose x and y locations use + `offsetX` and `offsetY` with a small random value added**. This makes the + line of code to draw the circle kind of long, but hopefully it's easy to + understand if you read it carefully.\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n# + Do This:\r\n\r\n* **Set the style of another button** in Design Mode, give + a label like \"Spray Paint,\" give it a descriptive ID, and attach a click + event handler to it.\r\n* **Copy the code from the \"Original\"** button into + the event handler for spray paint.\r\n* Change the code for `circle` so that + it will **draw a dot whose x and y locations use `offsetX` and `offsetY` with + a small random value added. **\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n* + **Run your app** to make sure it is drawing small dots close to the original + position. Look at the example below.\r\n\r\n![](https://images.code.org/d6279085a5c6689dd5c745a0d0e28136-image-1448386996780.gif)" U3 - Canvas - appendToArray_markdown_instruction: "# Store Your Dots\r\n\r\nNow we're going to get into the core of the activity. We will be **creating a record of every dot your user draws**.\r\n\r\nTo do this, we will append *every* @@ -18797,22 +16182,6 @@ en: PM.png)\r\n* Run your program and confirm that **when you draw, the speed of the mouse affects the radius of the dots**. The effect should look something like what's below \r\n\r\n![](https://images.code.org/ee83d18f04e4d9d486428273b7321f9f-image-1448394071473.gif)" - U3 - Canvas - One Dot sprayPaint_markdown_instruction: "# Making Spray Paint\r\n\r\nThe - next effect we would like to create is a \"spray paint\" effect. Instead of - drawing a single dot for every location stored in `eventList`, we'll draw - many small dots randomly placed around each location.\r\n\r\nWe are going - to start off just practicing **drawing a circle whose x and y locations use - `offsetX` and `offsetY` with a small random value added**. This makes the - line of code to draw the circle kind of long, but hopefully it's easy to - understand if you read it carefully.\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n# - Do This:\r\n\r\n* **Set the style of another button** in Design Mode, give - a label like \"Spray Paint,\" give it a descriptive ID, and attach a click - event handler to it.\r\n* **Copy the code from the \"Original\"** button into - the event handler for spray paint.\r\n* Change the code for `circle` so that - it will **draw a dot whose x and y locations use `offsetX` and `offsetY` with - a small random value added. **\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n* - **Run your app** to make sure it is drawing small dots close to the original - position. Look at the example below.\r\n\r\n![](https://images.code.org/d6279085a5c6689dd5c745a0d0e28136-image-1448386996780.gif)" U3 - Canvas - redrawOriginal_markdown_instruction: "# Redraw Original\r\n\r\nIf you were able to get that working and understand what you did, congratulations! That was some serious programming! If not, take a moment to go back and talk @@ -18987,32 +16356,17 @@ en: the `if` statement** to \"Nope. Guess again.\"\r\n\r\n<img src=\"https://images.code.org/f5c5de1b77a9caf16027e65ed24f91ec-image-1446234785600.gif\" style=\"width: 450px\">\r\n\r\n* **Run the program** a couple times to **look for a bug**. We will fix this on the next level." - U3 - Conditionals - Combine AND and OR_markdown_instruction: "# Combining AND - and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean expression - to invert it's truthiness. This is useful if you want to express the inverse - of a more complex expression. This opens the door to express the same logical - statments in different ways. \r\n\r\nFor example, let's say you want to - determine if a person, based on their age (under 12 or over 65) gets to pay - a reduced price for a movie ticket. You might express that like this:\r\n\r\n```\r\nif( - (age < 12) || (age > 65) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\nBut - you might also figure out a way to determine if the age is between 12 and - 65 (`(age > 5) && (age < 65)`) and then take the inverse of that. So using - the NOT operator this would work as well:\r\n\r\n```\r\nif( !( (age > 5) && - (age < 18) ) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\n**Why - use one over the other?** Personal preference. Use the one that makes the - most sense to you, but it should be a clear expression of what you are trying - to say. \r\n\r\n\r\n# Logic Challenge! Do This\r\nWe've provided you with - starting code that prompts the user to enter a **day** and their **age** and - store it in variables.\r\n\r\n**Add an if statement that uses both AND and - OR operators**\r\n\r\n * The app should write \"Time for school!\" if it's - a weekday and the user is under 18.\r\n \t* Hint: one way to say that it's - a weekday is to say that it's NOT a weekend.\r\n * Otherwise it should write - \"Time to go to work!\"\r\n \r\n \r\n**WARNING** logic can get tricky sometimes. Make - sure to test your program with inputs that cover every possibility. There - are 4 basic cases to test for:\r\n\r\n * It is a weekday and age is under - 18\r\n * It is a weekday and age is not under 18\r\n * It's not a weekday - and age is under 18\r\n * It's not a weekday and age is not under 18\r\n\r\nTry - it out!" + U3 - Conditionals - Combine AND OR Simple_markdown_instruction: "# Combining + AND and OR\r\n\r\nYou can express more complex conditions by combining **AND** + and **OR** in one statement. Here is the example from the previous page which + you can use as a reference. This statement will evaluate to **true** if the + day is Tuesday or Thursday AND their age is 15 or 16.\r\n\r\n![](https://images.code.org/3f3aba7828abd88fdbd90eda60611bd3-image-1448062956405.06.36.png)\r\n\r\n# Do + This:\r\nWe've provided you with starting code that prompts the user to enter + a **day** and their **age** and stores the result in variables.\r\n\r\n**Add + an `if` statement that uses both AND and OR operators**\r\n\r\n * The app + should write \"Sleep in!\" if it's a weekend and the user is a teenager.\r\n + * Otherwise it should write \"Uh oh. Have to wake up.\"\r\n \r\n\r\nTry it + out!\r\n" U3 - Conditionals - Combine AND OR and NOT_markdown_instruction: "# Combining AND and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean expression to invert its result. This opens the door to express the same logical @@ -19041,43 +16395,32 @@ en: to test for:\r\n\r\n * It is a weekday and age is under 18\r\n * It is a weekday and age is not under 18\r\n * It's not a weekday and age is under 18\r\n * It's not a weekday and age is not under 18\r\n\r\nTry it out!" - U3 - Conditionals - Combine AND OR Simple_markdown_instruction: "# Combining - AND and OR\r\n\r\nYou can express more complex conditions by combining **AND** - and **OR** in one statement. Here is the example from the previous page which - you can use as a reference. This statement will evaluate to **true** if the - day is Tuesday or Thursday AND their age is 15 or 16.\r\n\r\n![](https://images.code.org/3f3aba7828abd88fdbd90eda60611bd3-image-1448062956405.06.36.png)\r\n\r\n# Do - This:\r\nWe've provided you with starting code that prompts the user to enter - a **day** and their **age** and stores the result in variables.\r\n\r\n**Add - an `if` statement that uses both AND and OR operators**\r\n\r\n * The app - should write \"Sleep in!\" if it's a weekend and the user is a teenager.\r\n - * Otherwise it should write \"Uh oh. Have to wake up.\"\r\n \r\n\r\nTry it - out!\r\n" - U3 - Conditionals - intoOr_markdown_instruction: "# OR Operator\r\n\r\n<img - src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nUp till now we have - seen the boolean operators ==, >, and <. There are a couple more boolean operators - that are very useful to know about. AND(`&&`) and OR (`||`). Let's take - a look at OR.\r\n\r\nOR allows you to check multiple boolean expressions together.\r\n\r\n<img - src=\"https://images.code.org/df380925c0c598f06a5192ff2cfc8401-image-1446156668504.08.03 - PM.png\" style=\"width: 100px; float:right\"> \r\n\r\nIf either or both statements - are true, the OR operator will evaluate to true. If both are false, the OR - operator will evaluate to false. \r\n\r\n# Do This\r\n\r\n* **Run the code** - to see what it does.\r\n\r\n* **Add another conditional that check if color - is purple or number is greater than 2**\r\n\r\n* **Add another conditional - that check if direction is left or animal is zebra or number is 4**" - U3 - Conditionals - introAND_markdown_instruction: "# OR Operator\r\n\r\n<img - src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nUp till now we have - seen the boolean operators ==, >, and <. There are a couple more boolean operators - that are very useful to know about. AND(`&&`) and OR (`||`). Let's take - a look at OR.\r\n\r\nOR allows you to check multiple boolean expressions together.\r\n\r\n<img - src=\"https://images.code.org/df380925c0c598f06a5192ff2cfc8401-image-1446156668504.08.03 - PM.png\" style=\"width: 100px; float:right\"> \r\n\r\nIf either or both statements - are true, the OR operator will evaluate to true. If both are false, the OR - operator will evaluate to false. \r\n\r\n# Do This\r\n\r\n* **Run the code** - to see what it does.\r\n\r\n* **Add another conditional that check if color - is purple or number is greater than 2**\r\n\r\n* **Add another conditional - that check if direction is left or animal is zebra or number is 4**" + U3 - Conditionals - Combine AND and OR_markdown_instruction: "# Combining AND + and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean expression + to invert it's truthiness. This is useful if you want to express the inverse + of a more complex expression. This opens the door to express the same logical + statments in different ways. \r\n\r\nFor example, let's say you want to + determine if a person, based on their age (under 12 or over 65) gets to pay + a reduced price for a movie ticket. You might express that like this:\r\n\r\n```\r\nif( + (age < 12) || (age > 65) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\nBut + you might also figure out a way to determine if the age is between 12 and + 65 (`(age > 5) && (age < 65)`) and then take the inverse of that. So using + the NOT operator this would work as well:\r\n\r\n```\r\nif( !( (age > 5) && + (age < 18) ) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\n**Why + use one over the other?** Personal preference. Use the one that makes the + most sense to you, but it should be a clear expression of what you are trying + to say. \r\n\r\n\r\n# Logic Challenge! Do This\r\nWe've provided you with + starting code that prompts the user to enter a **day** and their **age** and + store it in variables.\r\n\r\n**Add an if statement that uses both AND and + OR operators**\r\n\r\n * The app should write \"Time for school!\" if it's + a weekday and the user is under 18.\r\n \t* Hint: one way to say that it's + a weekday is to say that it's NOT a weekend.\r\n * Otherwise it should write + \"Time to go to work!\"\r\n \r\n \r\n**WARNING** logic can get tricky sometimes. Make + sure to test your program with inputs that cover every possibility. There + are 4 basic cases to test for:\r\n\r\n * It is a weekday and age is under + 18\r\n * It is a weekday and age is not under 18\r\n * It's not a weekday + and age is under 18\r\n * It's not a weekday and age is not under 18\r\n\r\nTry + it out!" U3 - Conditionals - Simple AND_markdown_instruction: "# AND Operator\r\n\r\n<img src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 PM.png\" style=\"width: 100px; float: right\">\r\n\r\nAgain you will see the @@ -19105,6 +16448,32 @@ en: \r\n\r\n * The program should write **\"It's the weekend!\"** if the day entered by the user is a weekend day. \r\n * Otherwise it should write **\"Can't wait for the weekend to get here.\"**" + U3 - Conditionals - intoOr_markdown_instruction: "# OR Operator\r\n\r\n<img + src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nUp till now we have + seen the boolean operators ==, >, and <. There are a couple more boolean operators + that are very useful to know about. AND(`&&`) and OR (`||`). Let's take + a look at OR.\r\n\r\nOR allows you to check multiple boolean expressions together.\r\n\r\n<img + src=\"https://images.code.org/df380925c0c598f06a5192ff2cfc8401-image-1446156668504.08.03 + PM.png\" style=\"width: 100px; float:right\"> \r\n\r\nIf either or both statements + are true, the OR operator will evaluate to true. If both are false, the OR + operator will evaluate to false. \r\n\r\n# Do This\r\n\r\n* **Run the code** + to see what it does.\r\n\r\n* **Add another conditional that check if color + is purple or number is greater than 2**\r\n\r\n* **Add another conditional + that check if direction is left or animal is zebra or number is 4**" + U3 - Conditionals - introAND_markdown_instruction: "# OR Operator\r\n\r\n<img + src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nUp till now we have + seen the boolean operators ==, >, and <. There are a couple more boolean operators + that are very useful to know about. AND(`&&`) and OR (`||`). Let's take + a look at OR.\r\n\r\nOR allows you to check multiple boolean expressions together.\r\n\r\n<img + src=\"https://images.code.org/df380925c0c598f06a5192ff2cfc8401-image-1446156668504.08.03 + PM.png\" style=\"width: 100px; float:right\"> \r\n\r\nIf either or both statements + are true, the OR operator will evaluate to true. If both are false, the OR + operator will evaluate to false. \r\n\r\n# Do This\r\n\r\n* **Run the code** + to see what it does.\r\n\r\n* **Add another conditional that check if color + is purple or number is greater than 2**\r\n\r\n* **Add another conditional + that check if direction is left or animal is zebra or number is 4**" U3 - Design Mode - Console Log_markdown_instruction: "# Updating IDs and Debugging with Console Log\r\n\r\nIn the last level you tested out the new command: `console.log`. In this level we have a couple buttons with event handlers @@ -19344,33 +16713,6 @@ en: This will tell them they get it right only when that condition is true!\r\n* **Test your code out** to make sure it works.\r\n\r\n<img src=\"https://images.code.org/2f3487ec7a8d7cec1605f3da830c83f8-image-1446227512726.gif\" style=\"width: 350px\">" - U3 - image - Rotation Random Amount_markdown_instruction: "<img src=\"https://images.code.org/a7697b89e2c6ea67ae453410a1da6d47-image-1465572156435.gif\" - alt=\"wheel spinning\" style=\"width:200px;float:right\" >\r\n\r\n# Random - Rotation\r\n\r\nUsing random numbers with rotation can add interesting animation - effects. One effect you can use rotation for is shaking. **An object can look - like its shaking a little when you set its rotation to a small random number - repeatedly.**\r\n\r\n# Do This\r\nYou are going to start creating a spinner - wheel similar to one you might find at a carnival. You set up the wheel on - the last level so you are just adding the clicker at the top.\r\n\r\n* Create - a clicker sprite.\r\n* Set the sprite to the provided clicker image.\r\n* - Set the rotation to a random number between -5 and 5.\r\n* Test it out." - U3 - image - wheel free play_markdown_instruction: "# Wheel Free Play\r\n\r\nHere - is the spinning wheel you created so far. Continue to improve it.\r\n\r\n# - Do This\r\n\r\n* Create a background scene for the wheel to go in.\r\n* Resize - the wheel to fit the scene.\r\n* Add at least 1 other sprite to the scene - and give it some movement.\r\n* Add your own ideas!" - U3 - images - bee free play_markdown_instruction: "# Bee Free Play\r\n\r\nHere - is the swarm of bees you have been working on. Continue to improve the animation!\r\n\r\n# - Do This\r\n* Add a background.\r\n* Add a flower or hive sprite.\r\n* Make - the flower or hive sprite move.\r\n* Add more ideas of your own!" - U3 - images - gears conditionals_markdown_instruction: "# Gears Conditionals\r\n\r\nThe - gears are back! Lets change the direction of spinning based on some conditions!\r\n\r\n# - Do This\r\n\r\n" - U3 - images - gears free play_markdown_instruction: "# Gears Free Play\r\n\r\nHere - are the spinning gears you have been working on. Continue to improve the animation!\r\n\r\n# - Do This\r\n\r\n* Add more gears of different sizes.\r\n* Make the gears line - up and spin with the existing ones.\r\n* Create a background for the gears.\r\n* - Add more ideas of your own!" U3 - Keys - Add Image URLs_markdown_instruction: "# Adding Image URLs\r\n\r\nWe're ready to start improving the \"My Favorite Things\" app. \r\n\r\nWe'll do this in two steps:\r\n1. We will change it from scrolling text to scrolling @@ -19750,11 +17092,6 @@ en: line of code and steps over to the next one.\r\n\t\t* **Continue** - Execute until you hit the next break point\r\n\t\t* ( Note: We will talk about Step in and Step out later.)" - U3 - Loops - minus = operator_markdown_instruction: "# Try Out the *-=* Operator\r\n\r\nThe - `-=` operator works almost identically to `+=`, but instead it subtracts the - value provided from the variable. Let's use this operator to **create a loop - that counts down from 30 by 3's**.\r\n\r\n# Do This:\r\n\r\n* **Change the - code to use `-=`** to count from *down* from 30 to 0 by 3's." U3 - Loops - Minus Minus_markdown_instruction: "# *++* Has a Friend! Introducing *--*\r\n\r\nAs you may have guessed, just as we can write `count = count + 1` as `count++` we can also write `count = count - 1` as `count--`.\r\n\r\nLet’s @@ -19763,22 +17100,6 @@ en: **Change the code to use `count--` to count *down* from 10 to 1.** You will need to:\r\n\t* Change the looping condition.\r\n * Change `count++` to `count--`.\r\n * Change the initial value assigned to `count`.\r\n" - U3 - Loops - plus and minus = operator_markdown_instruction: "# Introducing - *+=* and *-=* Operators\r\n\r\nSometimes you want to add or subtract something - *other than 1* from the current value of a variable. If you wanted to add - or subtract 3 for example, such as: `count = count + 3` or `count = count - - 3`, `++` and `--` wouldn’t help. \r\n\r\nIt turns out this is pretty common - as well so there is actually a shorthand version of `count = count + 3`. \r\n\r\n**Introducing - `+=` and `-=`**!\r\n\r\nWe can use the `+=` or `-=` operator to add or subtract - any value we want to the current value of a variable. \r\n\r\nSo, the shorthand - versions of `count = count + 3` and `count = count - 3` would be:\r\n * `count - += 3` \r\n * `count -= 3`\r\n\r\n**Notice** that these 3 statements: `count - = count + 1`, `count++`, and `count += 1` all do **exactly** the same thing!\r\n\r\nWhich - one you use as a programmer is your choice, and in the future you can use - either version, but try out the new operator here.\r\n\r\n# Do This:\r\n\r\n* - **Change the code to use `count += 3`** instead of `count = count + 3` so - the program will still count up by 3. (You'll need to be in text mode to - do this.) \r\n\r\n(You'll get to try out `-=` on the next level.)" U3 - Loops - Plus Plus_markdown_instruction: "# *++* Operator\r\n\r\nAs programmers we are always looking for more concise ways to write code. It is so common to add 1 to a variable such as in `count = count + 1` that there is actually @@ -19803,6 +17124,27 @@ en: Do This:\r\n\r\n* **Run the program.**\r\n\r\n* Use the Debug Console to **check the ending value of `num`**. You can do this by typing num in the Debug Console and hitting enter!" + U3 - Loops - minus = operator_markdown_instruction: "# Try Out the *-=* Operator\r\n\r\nThe + `-=` operator works almost identically to `+=`, but instead it subtracts the + value provided from the variable. Let's use this operator to **create a loop + that counts down from 30 by 3's**.\r\n\r\n# Do This:\r\n\r\n* **Change the + code to use `-=`** to count from *down* from 30 to 0 by 3's." + U3 - Loops - plus and minus = operator_markdown_instruction: "# Introducing + *+=* and *-=* Operators\r\n\r\nSometimes you want to add or subtract something + *other than 1* from the current value of a variable. If you wanted to add + or subtract 3 for example, such as: `count = count + 3` or `count = count + - 3`, `++` and `--` wouldn’t help. \r\n\r\nIt turns out this is pretty common + as well so there is actually a shorthand version of `count = count + 3`. \r\n\r\n**Introducing + `+=` and `-=`**!\r\n\r\nWe can use the `+=` or `-=` operator to add or subtract + any value we want to the current value of a variable. \r\n\r\nSo, the shorthand + versions of `count = count + 3` and `count = count - 3` would be:\r\n * `count + += 3` \r\n * `count -= 3`\r\n\r\n**Notice** that these 3 statements: `count + = count + 1`, `count++`, and `count += 1` all do **exactly** the same thing!\r\n\r\nWhich + one you use as a programmer is your choice, and in the future you can use + either version, but try out the new operator here.\r\n\r\n# Do This:\r\n\r\n* + **Change the code to use `count += 3`** instead of `count = count + 3` so + the program will still count up by 3. (You'll need to be in text mode to + do this.) \r\n\r\n(You'll get to try out `-=` on the next level.)" U3 - Loops And Arrays - Add 5_markdown_instruction: "# Updating Values in an Array with a *for* Loop\r\n\r\nThe `for` loop you set up on the last level is actually so common that we will rarely deviate from this `for` loop setup.\r\n\r\n<img @@ -20174,19 +17516,6 @@ en: we are trying to change.\r\n\r\n<img src=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" target=\"_blank\">Open diagram in a new tab</a>" - U3 - Movie Bot - toLowerCase_markdown_instruction: "# Dealing with Character - Case\r\n\r\nWhat if the user types **ACTION** instead of **action**? These - are two different strings to the computer and therefore it won't recognize - they are the same. We want Movie Bot to treat words the same ignoring the - case of the letters. We can do this using the string command `toLowerCase`.\r\n\r\n**Note: - ** Check out the flowchart below to see the logic we are trying to add. \r\n\r\n# - Do This:\r\n\r\n* **Try typing COMEDY, ACtioN, horroR, and Romance** into - Movie Bot.\r\n\r\n* **Use the `toLowerCase` command** to change all user input - into lowercase letters after they enter it.\r\n\r\n* **Check that COMEDY, - ACtioN, horroR, and Romance generate the same recommendations** as comedy, - action, horror, and romance.\r\n\r\n<img src=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" - target=\"_blank\">Open diagram in a new tab</a>" U3 - Movie Bot - When Multiple If Statements_markdown_instruction: "# Adding a Separate *if*\r\n\r\nIt's still the case that sometimes you want to have two completely separate groups of `if` statements because there are separate @@ -20205,6 +17534,19 @@ en: src=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" target=\"_blank\">Click to open in separate window.</a>" + U3 - Movie Bot - toLowerCase_markdown_instruction: "# Dealing with Character + Case\r\n\r\nWhat if the user types **ACTION** instead of **action**? These + are two different strings to the computer and therefore it won't recognize + they are the same. We want Movie Bot to treat words the same ignoring the + case of the letters. We can do this using the string command `toLowerCase`.\r\n\r\n**Note: + ** Check out the flowchart below to see the logic we are trying to add. \r\n\r\n# + Do This:\r\n\r\n* **Try typing COMEDY, ACtioN, horroR, and Romance** into + Movie Bot.\r\n\r\n* **Use the `toLowerCase` command** to change all user input + into lowercase letters after they enter it.\r\n\r\n* **Check that COMEDY, + ACtioN, horroR, and Romance generate the same recommendations** as comedy, + action, horror, and romance.\r\n\r\n<img src=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" + target=\"_blank\">Open diagram in a new tab</a>" U3 - Practice Create Performance Task_markdown_instruction: "# Practice Create Performance Task\r\n\r\nYou've finally made it to the end of the Programming Unit! We will continue some programming in the next unit, but for now we are @@ -20738,23 +18080,6 @@ en: the numbers in the four different openings, then try running the program again. \r\n* Repeat that process until you can answer:\r\n\t* What do each of the four openings control?\r\n * What is the size of the drawing area?" - U3 - Simple Drawing - regular polygon_markdown_instruction: "# Regular Polygons\r\n\r\nYou - are now going to add the stop sign.\r\n\r\n<img src=\"https://images.code.org/0ea048eca4b3a7f3263cf8e0a9882d2b-image-1460646035610.53.20 - AM.png\" style=\"width:200px\">\r\n\r\nIn order to create a stop sign you - are going to need a new block. The `regularPolygon()` block draws any shape - with sides that are all the same length. Some examples are:\r\n\r\ntriangle - (3 sides) <img src=\"https://images.code.org/9bcbae86518007a3141ae5dbde5f1305-image-1460750039357.52.36 - PM.png\" style=\"width:100px\"> square (4 sides) <img src=\"https://images.code.org/1def6a4326b78b76a5fcf95c6ec33b8b-image-1460750039357.52.53 - PM.png\" style=\"width:100px\"> pentagon (5 sides) <img src=\"https://images.code.org/ba7262caf5ad0f9ec926027a2d281ceb-image-1460750039358.53.05 - PM.png\" style=\"width:100px\"> \r\n\r\nThe `regularPolygon` has 4 parameters - x, y, number of sides, and the radius. x and y specify the center of the shape. - The radius is the distance from the center to the end of each of the sides.\r\n\r\nTo - make a stop sign you are going to need an octagon, which has 8 sides. <img - src=\"https://images.code.org/4e8c23c88e33aa5e06ed3e5ca702e3ab-image-1460750174518.56.05 - PM.png\" style=\"width:100px\">\r\n\r\n# Do This\r\n\r\n* Add a pole for the - stop sign\r\n* Add an octagon (8 sided shape) for the sign. Hint: The center - of the octagon should be at the top of the pole.\r\n* Set the color of the - objects.\r\n* Make the stroke white and make the outline thicker" U3 - Simple Drawing - Road Ellipse_markdown_instruction: "# Clouds and Sun\r\n\r\nNext, you are going to add the clouds and sun to our picture. Here is an example of what your work could look like at the end of the level, but use some creativity @@ -20800,16 +18125,6 @@ en: | (255,0,0)|\r\n| orange | (255,127,0) |\r\n| yellow | (255, 255, 0) |\r\n| green | (0,255,0) |\r\n| blue | (0, 0, 255) |\r\n| indigo | (75, 0, 130) |\r\n| violet | (139, 0, 255) | " - U3 - Simple Drawing - text_markdown_instruction: "# Text\r\n\r\nThe last step - is to add text to our stop sign. You can add text with the <img src=\"https://images.code.org/302a9fa63cce41d49ce101df08a378f3-image-1472661577637.39.29.png\" - style=\"width:150px\"> block. The `text()` block has 3 parameters: `text`, - `x` and `y`. `text` is the string of text you want to print on the screen. This - text needs to go inside `' '` so that the computer knows it's a string. `x` - and `y` are the x and y coordinates of the bottom left corner of the text.\r\n\r\nAlso, - don't forget to comment your code and use white space to block out connected - lines. \r\n\r\n# Do This\r\n* Add text to the center of the sign\r\n* Make - sure the text has no stroke and that the fill is white\r\n\r\n<img src=\"https://images.code.org/86a9f34aadf57bb8e3b897b8c6ddf52e-image-1460646615062.09.59 - AM.png\" width=200>" U3 - Simple Drawing - X and Y values_markdown_instruction: "# Bugs\r\n\r\nNot every program you write in computer science works perfectly or even well the first time. The things that go wrong with a computer program are called **bugs**. The @@ -20823,6 +18138,33 @@ en: out why the rectangle is not showing. **HINT** What are the biggest x and y positions that will show on the canvas?\r\n* **Move the rectangle to the lower left corner of the drawing area** as in the example on the right." + U3 - Simple Drawing - regular polygon_markdown_instruction: "# Regular Polygons\r\n\r\nYou + are now going to add the stop sign.\r\n\r\n<img src=\"https://images.code.org/0ea048eca4b3a7f3263cf8e0a9882d2b-image-1460646035610.53.20 + AM.png\" style=\"width:200px\">\r\n\r\nIn order to create a stop sign you + are going to need a new block. The `regularPolygon()` block draws any shape + with sides that are all the same length. Some examples are:\r\n\r\ntriangle + (3 sides) <img src=\"https://images.code.org/9bcbae86518007a3141ae5dbde5f1305-image-1460750039357.52.36 + PM.png\" style=\"width:100px\"> square (4 sides) <img src=\"https://images.code.org/1def6a4326b78b76a5fcf95c6ec33b8b-image-1460750039357.52.53 + PM.png\" style=\"width:100px\"> pentagon (5 sides) <img src=\"https://images.code.org/ba7262caf5ad0f9ec926027a2d281ceb-image-1460750039358.53.05 + PM.png\" style=\"width:100px\"> \r\n\r\nThe `regularPolygon` has 4 parameters + x, y, number of sides, and the radius. x and y specify the center of the shape. + The radius is the distance from the center to the end of each of the sides.\r\n\r\nTo + make a stop sign you are going to need an octagon, which has 8 sides. <img + src=\"https://images.code.org/4e8c23c88e33aa5e06ed3e5ca702e3ab-image-1460750174518.56.05 + PM.png\" style=\"width:100px\">\r\n\r\n# Do This\r\n\r\n* Add a pole for the + stop sign\r\n* Add an octagon (8 sided shape) for the sign. Hint: The center + of the octagon should be at the top of the pole.\r\n* Set the color of the + objects.\r\n* Make the stroke white and make the outline thicker" + U3 - Simple Drawing - text_markdown_instruction: "# Text\r\n\r\nThe last step + is to add text to our stop sign. You can add text with the <img src=\"https://images.code.org/302a9fa63cce41d49ce101df08a378f3-image-1472661577637.39.29.png\" + style=\"width:150px\"> block. The `text()` block has 3 parameters: `text`, + `x` and `y`. `text` is the string of text you want to print on the screen. This + text needs to go inside `' '` so that the computer knows it's a string. `x` + and `y` are the x and y coordinates of the bottom left corner of the text.\r\n\r\nAlso, + don't forget to comment your code and use white space to block out connected + lines. \r\n\r\n# Do This\r\n* Add text to the center of the sign\r\n* Make + sure the text has no stroke and that the fill is white\r\n\r\n<img src=\"https://images.code.org/86a9f34aadf57bb8e3b897b8c6ddf52e-image-1460646615062.09.59 + AM.png\" width=200>" U3 - Simulation - 1_markdown_instruction: "# Starting Small\r\n\r\nTo start, we're going to simulate flipping a coin 10 times. You might be thinking that isn't many coin flips, and that we could just do those flips in real life, @@ -21116,9 +18458,6 @@ en: Play with the increment amount to find a speed you like\r\n\r\n# Till The Animation Tab Works\r\n\r\n* <a href=\"https://images.code.org/60ce4d33daafb50996f53597b4f1547e-image-1466193542771.png\"> Wheel</a>" - U3 - Sprites and Mod - two sprites_markdown_instruction: "# Two Sprites\r\n\r\ntwo - rects - make one move on the left side of the screen and one on the right - side of the screen\r\n\r\n" U3 - Sprites and Mod - Width and Height Rand_markdown_instruction: "# Width and Height\r\n\r\nSprites have other properties. There are properties for width and height of the sprite. The property names are `width` and `height`. @@ -21129,6 +18468,9 @@ en: U3 - Sprites and Mod - Wrap Many Squares_markdown_instruction: "# Stuff" U3 - Sprites and Mod - X and Y Prop_markdown_instruction: "# Predict\r\n\r\nWhat do you think this program will do when we run it?" + U3 - Sprites and Mod - two sprites_markdown_instruction: "# Two Sprites\r\n\r\ntwo + rects - make one move on the left side of the screen and one on the right + side of the screen\r\n\r\n" U3 - User Input - Save getText To Variable_markdown_instruction: "# Saving Text Input in Variables\r\n\r\nOften we want to save the information we pull in from the user for later use in our program. The best way to do this is @@ -21340,6 +18682,33 @@ en: composing arithmetic expressions is ***much* easier in text mode**, and is actually almost unreadable in block mode. Try doing this in text mode.\r\n \r\n" + U3 - image - Rotation Random Amount_markdown_instruction: "<img src=\"https://images.code.org/a7697b89e2c6ea67ae453410a1da6d47-image-1465572156435.gif\" + alt=\"wheel spinning\" style=\"width:200px;float:right\" >\r\n\r\n# Random + Rotation\r\n\r\nUsing random numbers with rotation can add interesting animation + effects. One effect you can use rotation for is shaking. **An object can look + like its shaking a little when you set its rotation to a small random number + repeatedly.**\r\n\r\n# Do This\r\nYou are going to start creating a spinner + wheel similar to one you might find at a carnival. You set up the wheel on + the last level so you are just adding the clicker at the top.\r\n\r\n* Create + a clicker sprite.\r\n* Set the sprite to the provided clicker image.\r\n* + Set the rotation to a random number between -5 and 5.\r\n* Test it out." + U3 - image - wheel free play_markdown_instruction: "# Wheel Free Play\r\n\r\nHere + is the spinning wheel you created so far. Continue to improve it.\r\n\r\n# + Do This\r\n\r\n* Create a background scene for the wheel to go in.\r\n* Resize + the wheel to fit the scene.\r\n* Add at least 1 other sprite to the scene + and give it some movement.\r\n* Add your own ideas!" + U3 - images - bee free play_markdown_instruction: "# Bee Free Play\r\n\r\nHere + is the swarm of bees you have been working on. Continue to improve the animation!\r\n\r\n# + Do This\r\n* Add a background.\r\n* Add a flower or hive sprite.\r\n* Make + the flower or hive sprite move.\r\n* Add more ideas of your own!" + U3 - images - gears conditionals_markdown_instruction: "# Gears Conditionals\r\n\r\nThe + gears are back! Lets change the direction of spinning based on some conditions!\r\n\r\n# + Do This\r\n\r\n" + U3 - images - gears free play_markdown_instruction: "# Gears Free Play\r\n\r\nHere + are the spinning gears you have been working on. Continue to improve the animation!\r\n\r\n# + Do This\r\n\r\n* Add more gears of different sizes.\r\n* Make the gears line + up and spin with the existing ones.\r\n* Create a background for the gears.\r\n* + Add more ideas of your own!" U3 AnimationsMulti Play Defender_markdown_instruction: "# Defend Your Cake!\r\n\r\nIn this lesson you will be learning to make a \"Defender\" style game. Push the ladybugs out of the way to prevent them from getting the cake. Once you lose @@ -21421,15 +18790,6 @@ en: should read the user's input and display it back to them along with some default response.\r\n \r\n * Anyone should be able to easily distinguish between the text that the user typed and the response from the digital assistant.\r\n" - U3 full clicker demo_markdown_instruction: "# Clicker Game Demo\r\n\r\nTry - out this clicker game! You'll be building your own version (with a theme - you choose) at the end of the lesson.\r\n\r\n# Things That Are Familiar\r\nYou - know how to build many of the components of this game already:\r\n- Multiple - screens.\r\n- Buttons that change the screen when clicked.\r\n- Image that - moves when you click it.\r\n\r\n# Things That Are New\r\n- Keeping track of - and displaying the __changing score__.\r\n- Keeping track of and displaying - the __changing lives__.\r\n- Changing to the __win screen if the score is - 25__.\r\n- Changing to the __lose screen if the lives is 0__.\r\n" 'U3 L1 - 3: Teaching and Student Support Plan_markdown_instruction': "<br><br>\r\n> **NOTE: before you start this task, make sure you’ve reviewed the lesson resources in this module, and have a good sense of how the lesson works. If you haven’t @@ -21559,22 +18919,6 @@ en: can elevate to a facilitator to review. You will always have a chance to address feedback from your reviewers and resubmit your task! Reviewer feedback will show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" - U3 mehal's clone_markdown_instruction: "# Introduction to the Digital Assistant\r\n\r\n__While - digital assistants may seem like magic, they are just elaborate computer programs - that parse, or process, text__ looking for combinations of words to make decisions - about what to reply.\r\n\r\nOver the next few lessons, __you're going to - build up your own digital assistant that responds \"intelligently\" to a user's - question__, by making a decision about what to reply based on the contents.\r\n\r\nYou'll - now __explore a demo digital assistant__, Movie Bot, that represents the kind - of program that you'll build up to. Try out some of the prompts below and - also try your own. You'll quickly find the limits of what this program can - and can't do.\r\n\r\n# Do this\r\n__Run Movie Bot. In the _'enter your question - here'_ input, type each of the following prompts and hit 'enter' __\r\n- - 'help'\r\n- 'What is the best PG comedy movie ever?'\r\n- 'What PG comedy - movie should I watch next?'\r\n- 'Could you please tell me the best romance - movie?'\r\n- 'I waNT To WatCH a MovIE!!!'\r\n- 'What is the capital of - Kentucky?'\r\n- Play around! Ask more questions of Movie Bot and make a prediction - about what logic it's using to reply\r\n" U3 Variables consolelog_markdown_instruction: "# Console.log\r\n\r\nThe **Debug Console** is an area below your code. Your user will never see the debug console. It is useful for **displaying information only you want to see, especially @@ -21654,6 +18998,31 @@ en: to draw a square with a randomly generated value.\r\n\r\n* **Use the `text` command** to display the value of `size` on the screen.\r\n* **Use the `console.log` command** to display the value of `size` in the debug console." + U3 full clicker demo_markdown_instruction: "# Clicker Game Demo\r\n\r\nTry + out this clicker game! You'll be building your own version (with a theme + you choose) at the end of the lesson.\r\n\r\n# Things That Are Familiar\r\nYou + know how to build many of the components of this game already:\r\n- Multiple + screens.\r\n- Buttons that change the screen when clicked.\r\n- Image that + moves when you click it.\r\n\r\n# Things That Are New\r\n- Keeping track of + and displaying the __changing score__.\r\n- Keeping track of and displaying + the __changing lives__.\r\n- Changing to the __win screen if the score is + 25__.\r\n- Changing to the __lose screen if the lives is 0__.\r\n" + U3 mehal's clone_markdown_instruction: "# Introduction to the Digital Assistant\r\n\r\n__While + digital assistants may seem like magic, they are just elaborate computer programs + that parse, or process, text__ looking for combinations of words to make decisions + about what to reply.\r\n\r\nOver the next few lessons, __you're going to + build up your own digital assistant that responds \"intelligently\" to a user's + question__, by making a decision about what to reply based on the contents.\r\n\r\nYou'll + now __explore a demo digital assistant__, Movie Bot, that represents the kind + of program that you'll build up to. Try out some of the prompts below and + also try your own. You'll quickly find the limits of what this program can + and can't do.\r\n\r\n# Do this\r\n__Run Movie Bot. In the _'enter your question + here'_ input, type each of the following prompts and hit 'enter' __\r\n- + 'help'\r\n- 'What is the best PG comedy movie ever?'\r\n- 'What PG comedy + movie should I watch next?'\r\n- 'Could you please tell me the best romance + movie?'\r\n- 'I waNT To WatCH a MovIE!!!'\r\n- 'What is the capital of + Kentucky?'\r\n- Play around! Ask more questions of Movie Bot and make a prediction + about what logic it's using to reply\r\n" U3- Keys - Code Refactoring Exit Ticket_markdown_instruction: "# Free Response: Why Refactor?\n\nWhy is refactoring your code important?\n" U3- Variables - Assign Random For Turtle Draw_markdown_instruction: "# Putting @@ -21745,6 +19114,30 @@ en: that in the \"Chaser Game\" you just need an image that runs away from the mouse.\r\n* If you have time **use Design Mode** to quickly improve some of the visual components of your game." + U313 Two Buttons with Ids_markdown_instruction: "# Make a Prediction - Learning + to Code Better, Faster\r\nResearch has shown that when you encounter a new + piece of code you learn faster by simply **making a prediction about what + will happen before you run the program**. It's not actually important if + your prediction is correct, but the act of predicting allows you to construct + a stronger mental model for how code works and then test your understanding + when you run the code.\r\n\r\nGood programmers do this all the time. **They + don't expect their code is correct the first time they write it.** Instead + they get in the habit of running their code, checking their assumptions, and + making changes as needed. Programming isn't a fixed set of steps. It's a + creative and continuous cycle of writing, testing, and improving code.\r\n\r\n# + Predict - Observe - Reflect\r\n<img src=\"https://images.code.org/5fc24f3f3e1ceae4bb196f1005d9e866-image-1444083405061.png\" + align=right>This program creates a button and **two event handlers** which + listen for a click on that button. \r\n\r\n**Predict:** What will happen when + the \"Forward\" button is clicked? Force yourself to make a prediction about + what the turtle will do! **\"I don't know\" is not a prediction**. Think + about the options and talk about it with a classmate: Will it..\r\n* move + forward?\r\n* turn left?\r\n* turn left *and* move forward?\r\n* do nothing?\r\n* + move forward *and* turn left?\r\n* cause an error?\r\n* something else? \r\n\r\n**Observe:** + Once you've made a prediction, close these instructions and **run the program** + to observe what happens.\r\n\r\n**Reflect:** Was your prediction correct? + If not what about your mental model might need to change? Talk about it with + a classmate and experiment with the code to make sure you understand what + is happening.\r\n" U313 drag Two Buttons_markdown_instruction: "# Buttons and Unique IDs\r\nYou may have noticed that the button command has two parameters: `button(id, text)`. The `text` is the text that actually shows up on the button display, and the `id` @@ -21792,30 +19185,6 @@ en: to make them unique, and re-run the program to make sure you don't get the error.\r\n* **NOTE:** an id must be specified in quotes. You can use double-quotes: `\"myId\"`, or single quotes: `'myId'` \r\n\r\n\r\n" - U313 Two Buttons with Ids_markdown_instruction: "# Make a Prediction - Learning - to Code Better, Faster\r\nResearch has shown that when you encounter a new - piece of code you learn faster by simply **making a prediction about what - will happen before you run the program**. It's not actually important if - your prediction is correct, but the act of predicting allows you to construct - a stronger mental model for how code works and then test your understanding - when you run the code.\r\n\r\nGood programmers do this all the time. **They - don't expect their code is correct the first time they write it.** Instead - they get in the habit of running their code, checking their assumptions, and - making changes as needed. Programming isn't a fixed set of steps. It's a - creative and continuous cycle of writing, testing, and improving code.\r\n\r\n# - Predict - Observe - Reflect\r\n<img src=\"https://images.code.org/5fc24f3f3e1ceae4bb196f1005d9e866-image-1444083405061.png\" - align=right>This program creates a button and **two event handlers** which - listen for a click on that button. \r\n\r\n**Predict:** What will happen when - the \"Forward\" button is clicked? Force yourself to make a prediction about - what the turtle will do! **\"I don't know\" is not a prediction**. Think - about the options and talk about it with a classmate: Will it..\r\n* move - forward?\r\n* turn left?\r\n* turn left *and* move forward?\r\n* do nothing?\r\n* - move forward *and* turn left?\r\n* cause an error?\r\n* something else? \r\n\r\n**Observe:** - Once you've made a prediction, close these instructions and **run the program** - to observe what happens.\r\n\r\n**Reflect:** Was your prediction correct? - If not what about your mental model might need to change? Talk about it with - a classmate and experiment with the code to make sure you understand what - is happening.\r\n" U3L01 Assessment1_markdown_instruction: "Consider the algorithm you designed for today’s activity. Identify two instances where there may be multiple ways to interpret your instructions and suggest improvements that could be made @@ -21881,15 +19250,6 @@ en: write the code to define the function and *then* add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\r\n\r\n![](https://images.code.org/3faf16575757ffae616dffd761085ab5-image-1467818996127.gif)" - U3L03 define turnRight and draw a rectangle_markdown_instruction: "# Draw a - rectangle with right\r\n\r\nAs you know, in order to turn right we have to - call `turnLeft()` three times. We've started you out with a stub that **defines** - a function called `right()`. Start by adding code inside the function definition - that will turn the turtle to the right (by turning left three times) when - called. \r\n\r\nThen **use** this function in some code to draw a rectangle, - as shown below. Make sure the turtle ends facing the same direction and in - the same location it started. *Note that the rectangle below is 2 moveForwards - tall and 1 moveForward wide*\r\n\r\n![](https://images.code.org/fd6e8b4d2218a242bae19ac9c78b5d5f-image-1447799438050.gif)\r\n\r\n" U3L03 Draw a T using turnAround_markdown_instruction: "#Do This:\r\nGet some more practice **calling** a function by using `turnAround()` along with your old friend the `moveForward()` function to create a plus sign that is centered @@ -21900,17 +19260,6 @@ en: sign, as shown below. Each of the four segments of the plus sign are one `moveForward()` long.* \r\n\r\n![](https://images.code.org/9d6c2d7d69c2f1c68c5b273bdbae65c7-image-1441296690812.11.14 AM.png)" - U3L03 draw diamond_markdown_instruction: "#Do This:\r\nWe're finally ready - to make our diamond! **Define** a function named `function drawDiamond()` - that **calls** `drawSide()` multiple times in order to complete the drawing. - Your final solution should be triggered by **a single call** to `drawDiamond()`. - \r\n\r\n<table>\r\n<tr>\r\n<td><img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/961892/NoxVhFlLf9HlybZ/upload.png\" - width=200></td>\r\n<td><img src=\"https://images.code.org/dca51c5b17a8c0778787337c3609557c-image-1441802821237.gif\" - width=200></td>\r\n</tr>\r\n</table>\r\n\r\n<hr>\r\n\r\n**Notes**:\r\n\r\nIn - the end you will have 4 functions defined:\r\n\r\n* drawDiamond()\r\n* drawSide()\r\n* - drawStep()\r\n* right()\r\n\r\nThese 4 functions work sort of like a hierarchy - of top-down design. At the top is `drawDiamond()` which makes calls to `drawSide()`, - which makes calls to `drawStep()` and `right()`.\r\n\r\n\r\n" U3L03 Free Response Getting Started_markdown_instruction: "In the previous lesson we created simple turtle drawings using only four commands. At some point you probably wished that more commands were available to you. Describe @@ -21934,6 +19283,26 @@ en: function. \r\n\r\nThe diagrams below show the intended actions.\r\n<table>\r\n<tr>\r\n<td>![](https://images.code.org/480f6787e4d2daf34d67642e25b29de6-image-1441772552026.png) </td>\r\n<td>![](https://images.code.org/02f52d406854d6f86535adf2f593ccc9-image-1441772709549.gif) </td>\r\n</tr>\r\n</table>\r\n\r\n\r\n" + U3L03 define turnRight and draw a rectangle_markdown_instruction: "# Draw a + rectangle with right\r\n\r\nAs you know, in order to turn right we have to + call `turnLeft()` three times. We've started you out with a stub that **defines** + a function called `right()`. Start by adding code inside the function definition + that will turn the turtle to the right (by turning left three times) when + called. \r\n\r\nThen **use** this function in some code to draw a rectangle, + as shown below. Make sure the turtle ends facing the same direction and in + the same location it started. *Note that the rectangle below is 2 moveForwards + tall and 1 moveForward wide*\r\n\r\n![](https://images.code.org/fd6e8b4d2218a242bae19ac9c78b5d5f-image-1447799438050.gif)\r\n\r\n" + U3L03 draw diamond_markdown_instruction: "#Do This:\r\nWe're finally ready + to make our diamond! **Define** a function named `function drawDiamond()` + that **calls** `drawSide()` multiple times in order to complete the drawing. + Your final solution should be triggered by **a single call** to `drawDiamond()`. + \r\n\r\n<table>\r\n<tr>\r\n<td><img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/961892/NoxVhFlLf9HlybZ/upload.png\" + width=200></td>\r\n<td><img src=\"https://images.code.org/dca51c5b17a8c0778787337c3609557c-image-1441802821237.gif\" + width=200></td>\r\n</tr>\r\n</table>\r\n\r\n<hr>\r\n\r\n**Notes**:\r\n\r\nIn + the end you will have 4 functions defined:\r\n\r\n* drawDiamond()\r\n* drawSide()\r\n* + drawStep()\r\n* right()\r\n\r\nThese 4 functions work sort of like a hierarchy + of top-down design. At the top is `drawDiamond()` which makes calls to `drawSide()`, + which makes calls to `drawStep()` and `right()`.\r\n\r\n\r\n" U3L04 - 3 by 3 with functions_markdown_instruction: "#Do This:\r\n\r\nWe're going to revisit a familiar problem, **drawing the 3x3 square as efficiently as possible**. The only difference is that this time you are armed with the @@ -22139,6 +19508,24 @@ en: U3L06 Free Response Wrap Up_markdown_instruction: "List 3 interesting functions you discovered in the AppLab API. \n\nSelect one of them and describe how you think you might want to use it in a future programming project.\n" + U3L07 - Free Play Loops and Random_markdown_instruction: "# Free Play!\r\n(Optional)\r\n\r\nMess + around with your \"Under the Sea\" scene to make it do different things. \r\n\r\n**Ideas:**\r\n* + Make different amounts of each component.\r\n* Play with the ranges of random + values.\r\n* Add other creatures.\r\n* Play with color values to give the + scene a different feel (nighttime? red dawn?).\r\n* Get creative!\r\n\r\n# + Don't Worry... You Can't Screw It Up\r\n* Play around as much as you want + - you can **always go back to a previous version**.\r\n* Each time you hit + \"Run\" your code is saved in a way that lets you get back to it.\r\n* Notice + that there is button at the top of the page called **Version History** that + lets you see and use any previous version of your code.\r\n\r\n![](https://images.code.org/881d72d190c0637705f8021369962701-image-1443117323816.gif)" + U3L07 - Starry Night Starter Code_markdown_instruction: "You are going to use + loops and random numbers to generate an image of starry night sky similar + to one shown here. We have given you some starter code to generate the ground + and sky (just two giant dots), you will add code to this project to make the + stars, grass, and moon. All of the effects are clever applications of turtle + dots, lines, and colors. To get started, follow the series of steps suggested + in the accompanying worksheet. \r\n\r\n<img src=\"https://images.code.org/0f42e475e7600ac33d31bdf5dee70726-image-1459547325746.gif\" + style=\"width: 250px\">" U3L07 - allSeaGrass_markdown_instruction: "# Add Seagrass\r\n<img src=\"https://images.code.org/a67f893ea9187b253ec4f6abcb16b7cf-image-1443048301130.30.42 PM.png\" style=\"width: 200px; float: right\">\r\nOur new version of `drawSeagrass` now draws a single piece of seagrass with a random height. Now let's use @@ -22191,16 +19578,6 @@ en: working try calling `drawFish` with random values for its `red`, `green`, and `blue` parameters to get differently colored fish.\r\n\r\n![](https://images.code.org/cbbb8e02c14cbc2d199ede4531090513-image-1443046439253.12.35 PM.png)" - U3L07 - Free Play Loops and Random_markdown_instruction: "# Free Play!\r\n(Optional)\r\n\r\nMess - around with your \"Under the Sea\" scene to make it do different things. \r\n\r\n**Ideas:**\r\n* - Make different amounts of each component.\r\n* Play with the ranges of random - values.\r\n* Add other creatures.\r\n* Play with color values to give the - scene a different feel (nighttime? red dawn?).\r\n* Get creative!\r\n\r\n# - Don't Worry... You Can't Screw It Up\r\n* Play around as much as you want - - you can **always go back to a previous version**.\r\n* Each time you hit - \"Run\" your code is saved in a way that lets you get back to it.\r\n* Notice - that there is button at the top of the page called **Version History** that - lets you see and use any previous version of your code.\r\n\r\n![](https://images.code.org/881d72d190c0637705f8021369962701-image-1443117323816.gif)" U3L07 - introSquare_markdown_instruction: "# Getting Started with Loops\r\n\r\nA **loop** is a block of code that is repeated or \"looped through\" in a program. You will be creating a loop using the `for` loop block.\r\n\r\nWe'll start @@ -22278,14 +19655,6 @@ en: values between 360 and 450)** of the image.\r\n\r\n* **Draw 5 sea stars** of random size between **10 and 30** using `drawSeaStar`.\r\n\r\n![](https://images.code.org/1aadf83bcecaf5ca6c505e46d43e5f45-image-1443046811335.20.04 PM.png)" - U3L07 - Starry Night Starter Code_markdown_instruction: "You are going to use - loops and random numbers to generate an image of starry night sky similar - to one shown here. We have given you some starter code to generate the ground - and sky (just two giant dots), you will add code to this project to make the - stars, grass, and moon. All of the effects are clever applications of turtle - dots, lines, and colors. To get started, follow the series of steps suggested - in the accompanying worksheet. \r\n\r\n<img src=\"https://images.code.org/0f42e475e7600ac33d31bdf5dee70726-image-1459547325746.gif\" - style=\"width: 250px\">" U3L07 - sunBeams_markdown_instruction: "# Add Sunbeams\r\n<img src=\"https://images.code.org/9e08dae8486f66422d492b8d8a6777eb-image-1443048962131.55.54 PM.png\" style=\"width: 200px; float: right\">\r\nFinally, we'll add some visual flourish by writing `drawAllSunbeams`. Note: you'll have to use the @@ -22329,6 +19698,12 @@ en: it's appropriate to write a loop. \n\nThere is no hard-and-fast rule as to which is better, but what do you think? What kinds of circumstances would lead you to writing a function versus using a loop?\n\n\n" + U3L08 - Enchantment Under the Sea_markdown_instruction: "You have been provided + with starter code for an “Under the Sea” scene which includes three functions, + one each for the starfish, seagrass, and fish. Create versions of these functions + which accept parameters to allow you to add more variation to your scene. The + student worksheet provides more details and guidance.\r\n\r\n<img src=\"https://levelbuilder-studio.code.org/script_assets/k_1_images/instruction_gifs/csp/U3L08%20-%20Under%20the%20sea.gif\" + style=\"width: 250px\">" U3L08 - createTwoParamTriangle_markdown_instruction: "# Defining Functions with Multiple Parameters\r\n\r\nNow it's your turn to define a function that accepts multiple parameters. Just like in the previous example make sure you @@ -22347,13 +19722,6 @@ en: all of the individual functions you and your group members have written at the bottom of this program.\r\n\r\n**Design your scene** using these functions, placing your calls at the top of the file." - U3L08 - drawSquaresWithParams_markdown_instruction: "# Duplicating functions\r\n\r\nThis - program is supposed to draw two squares, a big one and a small one. The function - definition for `drawBigSquare()` is written but `drawSmallSquare()` is empty.\r\n\r\n**Write** - `drawSmallSquare()` to draw a square with sides 25 pixels long.\r\n\r\n**Run - the code** to match the image below\r\n\r\n**Hint:** Copy-Paste might be a - useful approach here!\r\n\r\n![](https://images.code.org/b1cf1767df98f6b7eacdc8a10c5674a7-image-1442417274907.26.34 - AM.png)" U3L08 - drawSquareWithParam - for video_markdown_instruction: "# Defining and using a function with a parameter\r\nFrom the video, you learned that defining multiple functions to draw different sized squares results in lots of repetitive @@ -22384,12 +19752,13 @@ en: You should only need to change one thing about an existing line of code. You don't need to add or remove any lines of code. Remember: The parameter `size` acts like a placeholder for a value that gets plugged into each call to `moveForward()`.\r\n\r\n" - U3L08 - Enchantment Under the Sea_markdown_instruction: "You have been provided - with starter code for an “Under the Sea” scene which includes three functions, - one each for the starfish, seagrass, and fish. Create versions of these functions - which accept parameters to allow you to add more variation to your scene. The - student worksheet provides more details and guidance.\r\n\r\n<img src=\"https://levelbuilder-studio.code.org/script_assets/k_1_images/instruction_gifs/csp/U3L08%20-%20Under%20the%20sea.gif\" - style=\"width: 250px\">" + U3L08 - drawSquaresWithParams_markdown_instruction: "# Duplicating functions\r\n\r\nThis + program is supposed to draw two squares, a big one and a small one. The function + definition for `drawBigSquare()` is written but `drawSmallSquare()` is empty.\r\n\r\n**Write** + `drawSmallSquare()` to draw a square with sides 25 pixels long.\r\n\r\n**Run + the code** to match the image below\r\n\r\n**Hint:** Copy-Paste might be a + useful approach here!\r\n\r\n![](https://images.code.org/b1cf1767df98f6b7eacdc8a10c5674a7-image-1442417274907.26.34 + AM.png)" U3L08 - fish_markdown_instruction: "# Adding parameters to functions: *drawFish*\r\n\r\nLet's update our `drawFish` function to accept a parameter. Currently `drawFish` can only draw a fish of size 30.\r\n\r\n**Add a parameter** to the function @@ -22573,7 +19942,6 @@ en: \n\nHow could your group have sorted the cards more efficiently, assuming that everyone still needed to execute the actions as prescribed in their missions? \n\nIf your group was not the first to finish, what slowed your progress?\n\n\n" - U3L13 - Debug Id plus logic problem_markdown_instruction: "# Debugging 1" U3L13 - Debug Id Problem_markdown_instruction: "# Choosing Good IDs\r\n\r\n<img src=\"https://images.code.org/f968ce4b09d2500b224af1bf9bacbacd-image-1444155536105.png\" style=\"float: right\">**Good IDs** are **meaningful and descriptive**.\r\nJust @@ -22600,6 +19968,7 @@ en: choosing a **descriptive and meaningful** ID.\r\n* **Change ** the event handler so that it correctly references the button by its new ID.\r\n* **Run ** the program to make sure it works.\r\n" + U3L13 - Debug Id plus logic problem_markdown_instruction: "# Debugging 1" U3L13 - Debugging 1_markdown_instruction: "# Debugging Event-Driven Programs: IDs\r\n\r\n**Debugging:** As you write more complex event-driven programs, you'll need to polish your **debugging** skills. Debugging involves locating @@ -22681,6 +20050,14 @@ en: style=\"border: solid 1px black; width: 500px; margin: auto\">\r\n\r\nOnce you've created the program and gotten it to run, click **Finish** to move onto the next level." + U3L13 Free Response Getting Started_markdown_instruction: "Give three examples + of familiar applications that respond to you, the user. \n\nFor each, describe + the actions (means of input) you use to \"talk to the program.\" \n\nIf directed + by your teacher, work with a partner to sketch a mock-up of an app with multiple + means of input.\n\n\n" + U3L13 Free Response Reflection_markdown_instruction: "Elements in your app + are required to have **unique IDs**. Given what you now know about how event + handlers work, why is it important for the IDs of page elements to be unique?\n\n" U3L13 eventsDetails_markdown_instruction: "# How Do Events Work?\r\nEvent-driven apps are made up of elements that can trigger events (such as buttons) and pieces of code called **event handlers**. Event handlers are commands that @@ -22703,14 +20080,6 @@ en: the event type** to something like \"mouseover\" and see what happens. Not all event types will work with buttons but it's fun to play a little bit.\r\n\r\nOnce you've got the program responding to some event, move on to the next problem.\r\n\r\n" - U3L13 Free Response Getting Started_markdown_instruction: "Give three examples - of familiar applications that respond to you, the user. \n\nFor each, describe - the actions (means of input) you use to \"talk to the program.\" \n\nIf directed - by your teacher, work with a partner to sketch a mock-up of an app with multiple - means of input.\n\n\n" - U3L13 Free Response Reflection_markdown_instruction: "Elements in your app - are required to have **unique IDs**. Given what you now know about how event - handlers work, why is it important for the IDs of page elements to be unique?\n\n" U3L14 - Assigning Random Value_markdown_instruction: "# Other Ways to Assign Values to Variables\r\nPrograms become much more interesting when the values in variables change while the program is running. We can also assign to a @@ -22744,6 +20113,83 @@ en: a second number\r\n* Display the result of some calculation.\r\n* An example output is shown at right.\r\n\r\nWe have given you starting code that shows you how to get the first number. The rest of the code is up to you.\r\n\r\n" + U3L14 - Journal Favorite Event_markdown_instruction: "Pick one of the two prompts + below to answer. Start by copy/pasting the prompt you're responding to.\n\n**Pick + one:**\n\n* Think back a few lessons to the \"Mission: Unsortable\" card sorting + activity. Relate something that happened in that activity to something you + found with event-driven programming in this lesson. Were there any \"unfortunate + events\" in the card sorting activity that were similar to \"unfortunate events\" + while programming in this lesson? \n\n* What was your favorite event type? + Explain what the event type is and how you might use it in an app that you + want to write. \n\nWrite your response below in 100 words or less.\n" + U3L14 - Mini Calculator embed_markdown_instruction: "# Getting User Input - + A Simple Calculator\r\nPrograms become *even more interesting* when we can + interact with the user. A short way to ask a user for a number is with the + `promptNum` command, which pops up a dialog box asking the user to enter a + number.\r\n\r\nThis very simple app demonstrates a new behavior: getting input + from the user.\r\n**You will write code to re-create this program** on the + next page.\r\n\r\n# Do This:\r\n* Click \"Run\" on the app.\r\n* You will + be prompted for two numbers, one right after the other. \r\n\t* If you don't + enter a number it will simply re-prompt you until you do.\r\n* See what happens. \r\n* + Re-run the program and enter different numbers until you get the idea.\r\n\r\nClick + **Finish** to move on." + U3L14 - User Input Division calculator_markdown_instruction: "# Assigning User + Input to Variables\r\n<img src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" + style=\"width: 350px; float:right\">\r\nLet's use `promptNum` to make a simple + calculator. The `promptNum` command appears in the variables toolbox because + it's typically used as a way to get a value from the user that you want to + hold on to while the program runs.\r\n\r\n`promptNum` is similar to `randomNumber` + in that it is a function whose return value *evaluates to a number*. The difference + here is that `promptNum` pops up an input dialog box and waits for the user + to type a number. Once they do and hit \"OK\" the number they typed is returned + and we can store it in a variable to use in our programs.\r\n\r\n\r\n# Do + This:\r\nWrite a program that acts as a simple calculator. (An animation of + the end result is shown at right.) <img src=\"https://images.code.org/e644d4b17d1d6fdb6b5a93651d512f8a-image-1445552700557.gif\" + style=\"width: 250px; float: right\">\r\n* Ask the user to **enter a number**.\r\n* + Then ask the user to **enter a second number**.\r\n* **Display the result** + of *some* calculation.\r\n * The example shows division but you may choose + something else if you like.\r\n\r\nWe have given you starting code that shows + you how to get the first number. The rest of the code is up to you.\r\n\r\n" + U3L14 - Variable ReAssignment pt2_markdown_instruction: "# Variable Re-assignment + - Part 2: Updating Values\r\n\r\nAll of our examples so far have shown how + to set the value of a variable by using combinations of numbers and other + variables. But what if you wanted to do something like **add 10 to the *current* + value of a variable**? \r\n\r\nBecause updating the value in a variable is + just moving memory around, the process has to go something like this:\r\n* + Read the current value of a variable.\r\n* Add 10 to it.\r\n* Store the new + value back into the same variable.\r\n\r\nThe technical term for this is called + **variable re-assignment** - when you change the value of a variable based + on its current contents. To increase the value of `num1` by 10 you actually + need to do this:\r\n\r\n<img src=\"https://images.code.org/c49b1a0fb81de4b90558fdb278e40987-image-1445942169121.png\" + style=\"float:right\">\r\n```\r\nnum1 = num1 + 10;\r\n```\r\nThe diagram at + right shows a picture of what's happening (it assumes the value of `num1` + is 7 before the line is executed). It's actually very similar to what happens + with plain old arithmetic: compute a value, then store it in a variable. Because + the computation has to happen before storing the result in a variable, there + is no contradiction here.\r\n\r\n<details>\r\n<Summary><strong>Common Mistakes + & Tips</strong> [click to expand]</Summary>\r\n\r\n<h3>\r\nMistake 1\r\n</h3>\r\n<p>To + increase the value of variable by 10 (for example) a common mistake is to + think that this statement alone will do the trick.\r\n</p><p>\r\n\r\n```\r\nnum1 + + 10;\r\n```\r\n</p><p>\r\nIt doesn't. This tells the computer to add 10 + to whatever the value of `num1` is. And the computer will do that, and the + result will go....nowhere. It will be lost.\r\n</p><p>\r\nBecause you are + trying assign a new value to a variable it should make sense that **the = + sign must be involved somehow**. \r\n</p>\r\n<h3>\r\nMistake 2\r\n</h3>\r\n<p>\r\nIf + you were in math class this statment would make no sense:\r\n```\r\nnum1 = + num1 + 10;\r\n```\r\n</p><p>\r\nBut **remember to read = as \"gets.\"** If + you read the statement above as: \"num1 *gets* the value of num1's current + value plus 10\" it might make more sense. Get in the habit of using \"gets.\"\r\n</p>\r\n</details>\r\n\r\n# + Do This:\r\n\r\n * **Make a prediction.**\r\n We start you out with some code + again (see below). \r\n\r\n <img src=\"https://images.code.org/60b25394c387bc111451f0e481528733-image-1447800367736.43.42.png\" + style=\"width: 500px;\"> \r\n\r\n Trace the code and predict what you think + will be printed to the console. (NOTE: We're serious about this \"make a + prediction\" stuff. When you force yourself to make a prediction about what + code will do you will learn faster since it triggers you to apply your mental + model of what's happening.)\r\n \r\n * **Run the program** to see if you + were right.\r\n \r\n * **Add a `console.log` statement**.\r\n \r\n We've + left you with a *little bit* of programming to do: add a `console.log` statement + at the end of the program to see the last value of `someNum` to see if your + full prediction is correct.\r\n" U3L14 - concatenate simple_markdown_instruction: "# Text and Variables Living Together!\r\n\r\nSometimes it’s useful to display text along with the value of a variable in the same line of output. To do this you use `+` to attach @@ -22787,26 +20233,6 @@ en: src=\"https://images.code.org/a1b84a8728599e9945c576d3bb459140-image-1445891621155.png\" style=\"height:50px\">| <img src=\"https://images.code.org/f5673df128eca0f9637c0cca1729b489-image-1445891800242.png\" style=\"width: 250px\">|" - U3L14 - Journal Favorite Event_markdown_instruction: "Pick one of the two prompts - below to answer. Start by copy/pasting the prompt you're responding to.\n\n**Pick - one:**\n\n* Think back a few lessons to the \"Mission: Unsortable\" card sorting - activity. Relate something that happened in that activity to something you - found with event-driven programming in this lesson. Were there any \"unfortunate - events\" in the card sorting activity that were similar to \"unfortunate events\" - while programming in this lesson? \n\n* What was your favorite event type? - Explain what the event type is and how you might use it in an app that you - want to write. \n\nWrite your response below in 100 words or less.\n" - U3L14 - Mini Calculator embed_markdown_instruction: "# Getting User Input - - A Simple Calculator\r\nPrograms become *even more interesting* when we can - interact with the user. A short way to ask a user for a number is with the - `promptNum` command, which pops up a dialog box asking the user to enter a - number.\r\n\r\nThis very simple app demonstrates a new behavior: getting input - from the user.\r\n**You will write code to re-create this program** on the - next page.\r\n\r\n# Do This:\r\n* Click \"Run\" on the app.\r\n* You will - be prompted for two numbers, one right after the other. \r\n\t* If you don't - enter a number it will simply re-prompt you until you do.\r\n* See what happens. \r\n* - Re-run the program and enter different numbers until you get the idea.\r\n\r\nClick - **Finish** to move on." U3L14 - moving memory challenge1_markdown_instruction: "# Moving Memory - Challenge 1\r\n\r\nThe next several levels all present challenges related to \"moving memory\" around in your program. \r\n\r\n**GOAL:** Set the value of the variable(s) @@ -22924,180 +20350,72 @@ en: last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - U3L14 - moving memory challenge6_markdown_instruction: "# Moving Memory - Challenge - 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar x - = 5;\r\nvar y = 11;\r\nvar z = 4;\r\n// your code here\r\n\r\nconsole.log(\"The - value of x is: \" + x + \" (x should be 2)\");\r\nconsole.log(\"The value - of y is: \" + y + \" (y should be 6)\");\r\nconsole.log(\"The value of z is: - \" + z + \" (z should be 8)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong> - (click to expand)</summary>\r\nThis one requires you to be a little clever. Think - about setting the value of one variable that you could then use to easily - set the value of the other variables. Then the trick is to figure out how - to use the variables you've been given to make that useful value.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - U3L14 - User Input Division calculator_markdown_instruction: "# Assigning User - Input to Variables\r\n<img src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" - style=\"width: 350px; float:right\">\r\nLet's use `promptNum` to make a simple - calculator. The `promptNum` command appears in the variables toolbox because - it's typically used as a way to get a value from the user that you want to - hold on to while the program runs.\r\n\r\n`promptNum` is similar to `randomNumber` - in that it is a function whose return value *evaluates to a number*. The difference - here is that `promptNum` pops up an input dialog box and waits for the user - to type a number. Once they do and hit \"OK\" the number they typed is returned - and we can store it in a variable to use in our programs.\r\n\r\n\r\n# Do - This:\r\nWrite a program that acts as a simple calculator. (An animation of - the end result is shown at right.) <img src=\"https://images.code.org/e644d4b17d1d6fdb6b5a93651d512f8a-image-1445552700557.gif\" - style=\"width: 250px; float: right\">\r\n* Ask the user to **enter a number**.\r\n* - Then ask the user to **enter a second number**.\r\n* **Display the result** - of *some* calculation.\r\n * The example shows division but you may choose - something else if you like.\r\n\r\nWe have given you starting code that shows - you how to get the first number. The rest of the code is up to you.\r\n\r\n" - U3L14 - Variable ReAssignment pt2_markdown_instruction: "# Variable Re-assignment - - Part 2: Updating Values\r\n\r\nAll of our examples so far have shown how - to set the value of a variable by using combinations of numbers and other - variables. But what if you wanted to do something like **add 10 to the *current* - value of a variable**? \r\n\r\nBecause updating the value in a variable is - just moving memory around, the process has to go something like this:\r\n* - Read the current value of a variable.\r\n* Add 10 to it.\r\n* Store the new - value back into the same variable.\r\n\r\nThe technical term for this is called - **variable re-assignment** - when you change the value of a variable based - on its current contents. To increase the value of `num1` by 10 you actually - need to do this:\r\n\r\n<img src=\"https://images.code.org/c49b1a0fb81de4b90558fdb278e40987-image-1445942169121.png\" - style=\"float:right\">\r\n```\r\nnum1 = num1 + 10;\r\n```\r\nThe diagram at - right shows a picture of what's happening (it assumes the value of `num1` - is 7 before the line is executed). It's actually very similar to what happens - with plain old arithmetic: compute a value, then store it in a variable. Because - the computation has to happen before storing the result in a variable, there - is no contradiction here.\r\n\r\n<details>\r\n<Summary><strong>Common Mistakes - & Tips</strong> [click to expand]</Summary>\r\n\r\n<h3>\r\nMistake 1\r\n</h3>\r\n<p>To - increase the value of variable by 10 (for example) a common mistake is to - think that this statement alone will do the trick.\r\n</p><p>\r\n\r\n```\r\nnum1 - + 10;\r\n```\r\n</p><p>\r\nIt doesn't. This tells the computer to add 10 - to whatever the value of `num1` is. And the computer will do that, and the - result will go....nowhere. It will be lost.\r\n</p><p>\r\nBecause you are - trying assign a new value to a variable it should make sense that **the = - sign must be involved somehow**. \r\n</p>\r\n<h3>\r\nMistake 2\r\n</h3>\r\n<p>\r\nIf - you were in math class this statment would make no sense:\r\n```\r\nnum1 = - num1 + 10;\r\n```\r\n</p><p>\r\nBut **remember to read = as \"gets.\"** If - you read the statement above as: \"num1 *gets* the value of num1's current - value plus 10\" it might make more sense. Get in the habit of using \"gets.\"\r\n</p>\r\n</details>\r\n\r\n# - Do This:\r\n\r\n * **Make a prediction.**\r\n We start you out with some code - again (see below). \r\n\r\n <img src=\"https://images.code.org/60b25394c387bc111451f0e481528733-image-1447800367736.43.42.png\" - style=\"width: 500px;\"> \r\n\r\n Trace the code and predict what you think - will be printed to the console. (NOTE: We're serious about this \"make a - prediction\" stuff. When you force yourself to make a prediction about what - code will do you will learn faster since it triggers you to apply your mental - model of what's happening.)\r\n \r\n * **Run the program** to see if you - were right.\r\n \r\n * **Add a `console.log` statement**.\r\n \r\n We've - left you with a *little bit* of programming to do: add a `console.log` statement - at the end of the program to see the last value of `someNum` to see if your - full prediction is correct.\r\n" - U3L15 - add code to make count down work_markdown_instruction: "# Make Count - Down Work\r\n\r\n<img src=\"https://images.code.org/0044a46a27f7af5da74daeae8de021f7-image-1446063781449.gif\" - style=\"float: right; width: 200px\">You now know enough about using global - variables (and some of the problems you might run into) to try it yourself.\r\n\r\nLet's - start with an easy task. Right now clicking the up arrow works as expected; - **clicking the down arrow does not**. So...\r\n\r\n# Do This:\r\n**Make the - count go down by 1 every time the down arrow is clicked**\r\n\r\n* Study how - the up arrow works, and use it as an example for writing the code for the - down arrow.\r\n* Add and modify the code so that when the down arrow is clicked - the count goes down.\r\n* When you're done the app should work like the animation - shown to the right.\r\n* HINT: Don't forget to set the text of the label.\r\n\r\n" - U3L15 - Add reset button to UpDown app_markdown_instruction: "# Add a Reset - Button\r\nIn most apps you want to provide a way to start over. \r\n\r\nTo - do this without having the user quit and restart your app, you need to add - code to **reset variables and text displays to initial values** so the app - can effectively start over.\r\n\r\nWe've **added a button** to the \"gameOverScreen\" - in the *Count Up/Down App* and **added an empty event handler** for it. \r\n\r\nRight - now clicking the \"start over\" button does nothing. You will write code to - make it work.\r\n\r\n\r\n# Do This:\r\n**Add code to the startOverButton event - handler to reset the app**. <img src=\"https://images.code.org/cb1569accb6a370d2258b5b14d624424-image-1446126849891.gif\" - style=\"width: 150px; float: right;\">\r\n\r\nThe app should work like the - animation shown to the right. **Notice** that when the \"start over\" button - is clicked it goes back to the main screen and the count has been reset to - 0. \r\n\r\nThe code should:\r\n\r\n* Set the screen to the gamePlayScreen.\r\n* - Set the count variable to 0.\r\n* Set the correct text label on the gamePlayScreen - to show the count is 0.\r\n\r\nOnce you get it to work, move on." - U3L15 - clicker update score_markdown_instruction: "# Using global variables\r\n\r\nYou'll - now look at a version of the clicker game. We've set up the basic functionality - to move the apple around the screen, and have __created a global variable - to keep track of the score.__\r\n\r\n# Do this\r\n__Add code to update the - score when the apple is clicked.__ Remember that you'll have to update both - the global variable _and_ the label text!\r\n\r\n<img src=\"https://images.code.org/001640fd24fc487af534ab769ed196e2-image-1446136596261.gif\" - style=\"width:200px\">" - U3L15 - count upDown bug forget to set text_markdown_instruction: "# Bug Squash!\r\n\r\nThis - program has a bug that doesn't produce an error. It just doesn't do what's - expected. The reason is a common mistake that all programmers make.\r\n\r\n# - Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n * Click the - up arrow about 5 times.\r\n * Click the down arrow about 10 times.\r\n * Click - the up arrow again.\r\n* **Look at the code and fix the problem.**\r\n* **Read - about the common mistake** by expanding the area below.\r\n* **Once you've - fixed the issue, move on.**\r\n <p>\r\n\r\n</p>\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...forgetting - to update the display after changing something in the program</big>\r\n\r\n\r\n<h1> - Misconception Alert - Changing a Variable Doesn't Change the Display</h1>\r\n\r\nA - common misunderstanding about variables and displaying them is to think that - a text label that's displaying a variable will change when the variable changes. - NO. A text label is just \"dumb\" container for text. It's similar to a - variable itself in that it won't change unless you explicitly tell it to.\r\n<p></p>\r\n<h1>Concept: - Separation of Program Data from How It's Viewed</h1>\r\nMaintaining variables - and program data is a **different task** from maintaining the display of the - app. Your program could actually run without updating the display at all - - it would still be working behind the scenes; it just wouldn't be very fun - or interesting to use.\r\n<p></p>\r\n</details>\r\n\r\n\r\n" - U3L15 - count upDown bug logic error wrong update_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a few different bugs. Find them and squash - them!\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n - * Click the up arrow exactly twice.\r\n \t* Restart the program and do this - a few times - you'll notice nothing happens the first time you click.\r\n - * Click the down arrow several times.\r\n* **Look at the code and fix the - problem.**\r\n* **Read about the common mistake** by expanding the area below.\r\n* - **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...updating - the wrong thing in the wrong event handler.</big>\r\n<p></p>\r\nThere are - two common mistakes here:\r\n<p></p>\r\n1. Mixing up which event handler should - do what.\r\n<p></p>\r\n2. Updating the display **before** any change is made - to the underlying data of the program. \r\n\tThis can make the app seem oddly - out of sync where each event triggers an update to the display that reflects - the **last** thing done, not the current thing.\r\n<p></p>\r\n</details>" - U3L15 - count upDown bug var not created globally_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a few different bugs that are related - to the same problem.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To - see the bug:**\r\n * Click the up arrow several times.\r\n * Click the down - arrow.\r\n* **Look at the code and fix the problem.**\r\n* **Read about the - common mistake** by expanding the area below.\r\n* **Once you've fixed the - issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read about the - common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...thinking - you're referencing a global variable when you're not.</big><br>\r\n\r\nA - common mistake is basically a syntax/spelling error. These mistakes can be - really tricky to work out because you *think* you know what you wrote, but - the computer doesn't see it that way :)\r\n<p></p>\r\n</details>\r\n\r\n\r\n" + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + U3L14 - moving memory challenge6_markdown_instruction: "# Moving Memory - Challenge + 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar x + = 5;\r\nvar y = 11;\r\nvar z = 4;\r\n// your code here\r\n\r\nconsole.log(\"The + value of x is: \" + x + \" (x should be 2)\");\r\nconsole.log(\"The value + of y is: \" + y + \" (y should be 6)\");\r\nconsole.log(\"The value of z is: + \" + z + \" (z should be 8)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong> + (click to expand)</summary>\r\nThis one requires you to be a little clever. Think + about setting the value of one variable that you could then use to easily + set the value of the other variables. Then the trick is to figure out how + to use the variables you've been given to make that useful value.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + U3L15 - Add reset button to UpDown app_markdown_instruction: "# Add a Reset + Button\r\nIn most apps you want to provide a way to start over. \r\n\r\nTo + do this without having the user quit and restart your app, you need to add + code to **reset variables and text displays to initial values** so the app + can effectively start over.\r\n\r\nWe've **added a button** to the \"gameOverScreen\" + in the *Count Up/Down App* and **added an empty event handler** for it. \r\n\r\nRight + now clicking the \"start over\" button does nothing. You will write code to + make it work.\r\n\r\n\r\n# Do This:\r\n**Add code to the startOverButton event + handler to reset the app**. <img src=\"https://images.code.org/cb1569accb6a370d2258b5b14d624424-image-1446126849891.gif\" + style=\"width: 150px; float: right;\">\r\n\r\nThe app should work like the + animation shown to the right. **Notice** that when the \"start over\" button + is clicked it goes back to the main screen and the count has been reset to + 0. \r\n\r\nThe code should:\r\n\r\n* Set the screen to the gamePlayScreen.\r\n* + Set the count variable to 0.\r\n* Set the correct text label on the gamePlayScreen + to show the count is 0.\r\n\r\nOnce you get it to work, move on." + U3L15 - DEMO up down count practice app_markdown_instruction: "# All the Basics + You Need\r\n\r\n<img src=\"https://images.code.org/abb09baa0b6ccc24ff141590c5b667c3-image-1446417655965.gif\" + style=\"float:right; width: 150px\"> When you close these instructions, you'll + get to play a little bit with the very simple app (shown at right) to demonstrate + the basics of concepts involved in making the clicker game. We'll call it + the **Count Up/Down App**. Yes, it's a boring \"game,\" but it has all the + pieces of a more sophisticated game.\r\n\r\nThis app demontrates a few new + concepts. We'll step through each one, one at a time, explaining how each + thing works. Along the way, we'll also encounter some common challenges, + and learn how to solve them.\r\n\r\n# Do This:\r\n* Keeping clicking the up + arrow until something happens (something besides the number increasing).\r\n* + Start over.\r\n* Click the down arrow until something happens (something besides + the number decreasing).\r\n* Start over.\r\n\r\nOnce you think you've seen + all the behavior click Finish to see the first part of how this is done.\r\n\r\n" U3L15 - Debug forget to update var on reset in UpDown app_markdown_instruction: "# Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common mistake** has been introduced into the code.\r\n\r\nIt's a tricky one to @@ -23164,20 +20482,92 @@ en: you get in the habit of thinking that way, these mistakes are easier to catch. For example you'd see this:<br>\r\n`if (count = 20)`<br>\r\nand read:<br>\r\n<i>\"if count gets 20\"</i> ...and know that that doesn't make sense.\r\n</p>\r\n\r\n<p></p>\r\n</details>\r\n\r\n" - U3L15 - DEMO up down count practice app_markdown_instruction: "# All the Basics - You Need\r\n\r\n<img src=\"https://images.code.org/abb09baa0b6ccc24ff141590c5b667c3-image-1446417655965.gif\" - style=\"float:right; width: 150px\"> When you close these instructions, you'll - get to play a little bit with the very simple app (shown at right) to demonstrate - the basics of concepts involved in making the clicker game. We'll call it - the **Count Up/Down App**. Yes, it's a boring \"game,\" but it has all the - pieces of a more sophisticated game.\r\n\r\nThis app demontrates a few new - concepts. We'll step through each one, one at a time, explaining how each - thing works. Along the way, we'll also encounter some common challenges, - and learn how to solve them.\r\n\r\n# Do This:\r\n* Keeping clicking the up - arrow until something happens (something besides the number increasing).\r\n* - Start over.\r\n* Click the down arrow until something happens (something besides - the number decreasing).\r\n* Start over.\r\n\r\nOnce you think you've seen - all the behavior click Finish to see the first part of how this is done.\r\n\r\n" + U3L15 - Simple If-statements in UpDown App_markdown_instruction: "# Add Your + Own *if* Statement\r\n\r\nIn most apps you want to make decisions based on + the state of some data you're keeping track of in the app. \r\n\r\nWe've + **modified** the *Count Up/Down App* to add another screen. When the count + reaches certain values, we'll switch screens. In the code you'll see an + `if` statement has been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n + * **If** the value of `count` is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img + src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" + style=\"width: 150px; float: right\">\r\n\r\n# Do This:\r\n**Add an `if` statement + so that when counting down the app changes screens when the count reaches + -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what + happens when the `if` statement is triggered.\r\n* **Study the `if` statement** + for the up arrow button to see how it works.\r\n* **Add an `if` statement** + to the down arrow event handler:\r\n\t* **If** `count` is equal to **-5, then** + set the screen to the \"gameOverScreen.\"\r\n* **Goal:** Once you're finished, + clicking the down arrow in the app should work like the animation shown to + the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click + to expand]</summary>\r\nThere is a subtle challenge here that you need to + set the text of the label on the <i>gameOverScreen</i> when you change screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> + Your code can call `setText` for any UI element, on any screen, at any time + - even if the element isn't on the screen that's currently showing.\r\n</details>\r\n\r\n" + U3L15 - add code to make count down work_markdown_instruction: "# Make Count + Down Work\r\n\r\n<img src=\"https://images.code.org/0044a46a27f7af5da74daeae8de021f7-image-1446063781449.gif\" + style=\"float: right; width: 200px\">You now know enough about using global + variables (and some of the problems you might run into) to try it yourself.\r\n\r\nLet's + start with an easy task. Right now clicking the up arrow works as expected; + **clicking the down arrow does not**. So...\r\n\r\n# Do This:\r\n**Make the + count go down by 1 every time the down arrow is clicked**\r\n\r\n* Study how + the up arrow works, and use it as an example for writing the code for the + down arrow.\r\n* Add and modify the code so that when the down arrow is clicked + the count goes down.\r\n* When you're done the app should work like the animation + shown to the right.\r\n* HINT: Don't forget to set the text of the label.\r\n\r\n" + U3L15 - clicker update score_markdown_instruction: "# Using global variables\r\n\r\nYou'll + now look at a version of the clicker game. We've set up the basic functionality + to move the apple around the screen, and have __created a global variable + to keep track of the score.__\r\n\r\n# Do this\r\n__Add code to update the + score when the apple is clicked.__ Remember that you'll have to update both + the global variable _and_ the label text!\r\n\r\n<img src=\"https://images.code.org/001640fd24fc487af534ab769ed196e2-image-1446136596261.gif\" + style=\"width:200px\">" + U3L15 - count upDown bug forget to set text_markdown_instruction: "# Bug Squash!\r\n\r\nThis + program has a bug that doesn't produce an error. It just doesn't do what's + expected. The reason is a common mistake that all programmers make.\r\n\r\n# + Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n * Click the + up arrow about 5 times.\r\n * Click the down arrow about 10 times.\r\n * Click + the up arrow again.\r\n* **Look at the code and fix the problem.**\r\n* **Read + about the common mistake** by expanding the area below.\r\n* **Once you've + fixed the issue, move on.**\r\n <p>\r\n\r\n</p>\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...forgetting + to update the display after changing something in the program</big>\r\n\r\n\r\n<h1> + Misconception Alert - Changing a Variable Doesn't Change the Display</h1>\r\n\r\nA + common misunderstanding about variables and displaying them is to think that + a text label that's displaying a variable will change when the variable changes. + NO. A text label is just \"dumb\" container for text. It's similar to a + variable itself in that it won't change unless you explicitly tell it to.\r\n<p></p>\r\n<h1>Concept: + Separation of Program Data from How It's Viewed</h1>\r\nMaintaining variables + and program data is a **different task** from maintaining the display of the + app. Your program could actually run without updating the display at all + - it would still be working behind the scenes; it just wouldn't be very fun + or interesting to use.\r\n<p></p>\r\n</details>\r\n\r\n\r\n" + U3L15 - count upDown bug logic error wrong update_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a few different bugs. Find them and squash + them!\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n + * Click the up arrow exactly twice.\r\n \t* Restart the program and do this + a few times - you'll notice nothing happens the first time you click.\r\n + * Click the down arrow several times.\r\n* **Look at the code and fix the + problem.**\r\n* **Read about the common mistake** by expanding the area below.\r\n* + **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...updating + the wrong thing in the wrong event handler.</big>\r\n<p></p>\r\nThere are + two common mistakes here:\r\n<p></p>\r\n1. Mixing up which event handler should + do what.\r\n<p></p>\r\n2. Updating the display **before** any change is made + to the underlying data of the program. \r\n\tThis can make the app seem oddly + out of sync where each event triggers an update to the display that reflects + the **last** thing done, not the current thing.\r\n<p></p>\r\n</details>" + U3L15 - count upDown bug var not created globally_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a few different bugs that are related + to the same problem.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To + see the bug:**\r\n * Click the up arrow several times.\r\n * Click the down + arrow.\r\n* **Look at the code and fix the problem.**\r\n* **Read about the + common mistake** by expanding the area below.\r\n* **Once you've fixed the + issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read about the + common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...thinking + you're referencing a global variable when you're not.</big><br>\r\n\r\nA + common mistake is basically a syntax/spelling error. These mistakes can be + really tricky to work out because you *think* you know what you wrote, but + the computer doesn't see it that way :)\r\n<p></p>\r\n</details>\r\n\r\n\r\n" U3L15 - global var example count up_markdown_instruction: "# Using Variables in Apps!\r\n<img src=\"https://images.code.org/f156f8d8524c3c0316e4db394e331bdc-image-1446060829590.gif\" style=\"float: right; width: 200px;\">\r\nThe example program here has a small @@ -23221,27 +20611,6 @@ en: in this example app.\r\n * The app should do something similar to the animated example at right.\r\n\r\nOnce you've got it functional, click Finish to move on.\r\n \r\n\r\n" - U3L15 - Simple If-statements in UpDown App_markdown_instruction: "# Add Your - Own *if* Statement\r\n\r\nIn most apps you want to make decisions based on - the state of some data you're keeping track of in the app. \r\n\r\nWe've - **modified** the *Count Up/Down App* to add another screen. When the count - reaches certain values, we'll switch screens. In the code you'll see an - `if` statement has been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n - * **If** the value of `count` is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img - src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" - style=\"width: 150px; float: right\">\r\n\r\n# Do This:\r\n**Add an `if` statement - so that when counting down the app changes screens when the count reaches - -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what - happens when the `if` statement is triggered.\r\n* **Study the `if` statement** - for the up arrow button to see how it works.\r\n* **Add an `if` statement** - to the down arrow event handler:\r\n\t* **If** `count` is equal to **-5, then** - set the screen to the \"gameOverScreen.\"\r\n* **Goal:** Once you're finished, - clicking the down arrow in the app should work like the animation shown to - the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click - to expand]</summary>\r\nThere is a subtle challenge here that you need to - set the text of the label on the <i>gameOverScreen</i> when you change screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> - Your code can call `setText` for any UI element, on any screen, at any time - - even if the element isn't on the screen that's currently showing.\r\n</details>\r\n\r\n" U3L15 - variable scoping problem debugging_markdown_instruction: "# Debugging Problem!\r\n\r\n**Uh oh!** The code here is subtly different from the one in the previous example and **now there is a problem**.\r\n\r\n# Do This:\r\n\r\n* @@ -23578,6 +20947,26 @@ en: Libs app__ a couple of times to see a digital version of the paper game. \r\n- __Think about how the final text is created__ based on the input from the user. How would you describe in words the algorithm for creating it?" + U3L16 Mad Lib Student Setup_markdown_instruction: "# Back to Mad Libs: Design + Your App\r\nNow that you've had some practice getting user text and making + new strings with it, you're ready to turn your How-to Mad Libs into an app. + To get started, you'll set up the layout. There are two main screens:\r\n\r\n__Screen + 1: Collect User Input__ \r\n- On this screen, you'll use __text labels__ + and __text input__ design elements to set up the different words you want + the user to provide.\r\n- A __Next__ button takes you to Screen 2 to view + the full Mad Libs.\r\n\r\n__Screen 2: View Mad Libs__ \r\n- On this screen, + you'll use the __text area__ design element to create the space where the + user's completed Mad Libs will be displayed.\r\n- A __Play again__ button + takes you to back Screen 1.\r\n<br>\r\n<br>\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Screen + 1:</strong>\r\n</td>\r\n<td>\r\n<strong>Screen 2:</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/ccea092b516047dff82fafa50b47bcc7-image-1447974038265.00.17 + PM.png\" style=\"width:150px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/0f832e6314ad98170a3cddb317d26e41-image-1445898480304.27.45.png\" + style=\"width:151px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n# + Do This:\r\n\r\n- Create the two screens for your app, including the design + elements in each one.\r\n- Requirement: Request at least 3 separate words + from the user on Screen 1.\r\n- Create the event handlers for the __Next__ + and __Play again__ buttons to respond to clicks.\r\n- Use `setScreen` in the + event handlers to get the screen navigation working.\r\n" U3L16 Mad Lib getText_markdown_instruction: "# Make It Mad! Add the User's Text to Your Mad Libs Outline\r\n\r\nNow that you have your Mad Libs outline appearing in the text area, it's time to __incorporate the user's text__ @@ -23621,26 +21010,6 @@ en: step1 = \"Step 1: ...\";<br/>\r\n \r\n var step2 = \"Step 2: ...\";<br/>\r\n \r\n console.log(step1 + \"\\n\" + step2);<br/><br/></samp>\r\n \r\n *will be displayed as...*<br/><br/>\r\n \r\n <samp>Step 1: ...<br/>Step 2: ...<br/><br/></samp>\r\n \r\n *...on your console.*\r\n</td>\r\n</tr>\r\n</table>\r\n</details>" - U3L16 Mad Lib Student Setup_markdown_instruction: "# Back to Mad Libs: Design - Your App\r\nNow that you've had some practice getting user text and making - new strings with it, you're ready to turn your How-to Mad Libs into an app. - To get started, you'll set up the layout. There are two main screens:\r\n\r\n__Screen - 1: Collect User Input__ \r\n- On this screen, you'll use __text labels__ - and __text input__ design elements to set up the different words you want - the user to provide.\r\n- A __Next__ button takes you to Screen 2 to view - the full Mad Libs.\r\n\r\n__Screen 2: View Mad Libs__ \r\n- On this screen, - you'll use the __text area__ design element to create the space where the - user's completed Mad Libs will be displayed.\r\n- A __Play again__ button - takes you to back Screen 1.\r\n<br>\r\n<br>\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Screen - 1:</strong>\r\n</td>\r\n<td>\r\n<strong>Screen 2:</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/ccea092b516047dff82fafa50b47bcc7-image-1447974038265.00.17 - PM.png\" style=\"width:150px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/0f832e6314ad98170a3cddb317d26e41-image-1445898480304.27.45.png\" - style=\"width:151px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n# - Do This:\r\n\r\n- Create the two screens for your app, including the design - elements in each one.\r\n- Requirement: Request at least 3 separate words - from the user on Screen 1.\r\n- Create the event handlers for the __Next__ - and __Play again__ buttons to respond to clicks.\r\n- Use `setScreen` in the - event handlers to get the screen navigation working.\r\n" U3L16 Mad Lib toUpper_markdown_instruction: "# Why Are You Yelling At Me?! *toUpperCase* and *toLowerCase*\r\n\r\nThe main functionality of the Mad Libs app is complete, but there are some finishing touches to add. The user may @@ -23776,24 +21145,6 @@ en: **refresh the Data Viewer** each time by reloading the tab it is in.\r\n* **About what percent of the time do the `setKeyValue` requests arrive out of order?**" - U3L18 comparison operators_markdown_instruction: "# Explore Comparison Operators\r\n\r\nTrue/false - decisions are made using boolean expressions. A __boolean expression__ is - an expression that only evaluates to TRUE or FALSE, and you can use __comparison - operators__ to craft boolean expressions. \r\n\r\n# Do This:\r\n\r\nUse `console.log` - to **print out the different boolean expressions below to see what information - they return**.\r\n\r\n| Boolean Expressions |\r\n| --- |\r\n| 3 > 2 |\r\n| - 2 > 3 |\r\n| 5 + 3 < 10 |\r\n| ‘a’ < ‘b’ |\r\n| ‘j’ > ‘c’ |\r\n| 2 == 2 |\r\n| - 2 != 2 |\r\n| true == false |\r\n| \"x\" == x |\r\n| \"Blue\" == \"blue\" - |\r\n| x < 10 |" - U3L18 comparison operators_for_video_markdown_instruction: "# Explore Comparison - Operators\r\n\r\nTrue/false decisions are made using boolean expressions. - A __boolean expression__ is an expression that only evaluates to TRUE or FALSE, - and you can use __comparison operators__ to craft boolean expressions. \r\n\r\n# - Do This\r\n\r\nUse `console.log` to **print out the different boolean expressions - below to see what information they return**.\r\n\r\n| Boolean Expressions - |\r\n| --- |\r\n| 3 > 2 |\r\n| 2 > 3 |\r\n| 5 + 3 < 10 |\r\n| ‘a’ < ‘b’ |\r\n| - ‘j’ > ‘c’ |\r\n| 2 == 2 |\r\n| 2 != 2 |\r\n| true == false |\r\n| \"blue\" - == blue |\r\n| \"Blue\" == \"blue\" |\r\n| x < 10 |" U3L18 Free Response Wrap Up_markdown_instruction: "Over the next few lessons, you will be gathering skills and knowledge to create a clicker game of your own design. \nYou probably have some very cool ideas about what you want to @@ -23803,16 +21154,24 @@ en: space below:\n\n1. List at least 3 things you already know that will be useful in designing your clicker game.\n\n2. Based upon the initial ideas of your game design, list at least 3 things you want to know.\n\n\n" - U3L19 - Debugging with consoleLog_markdown_instruction: "# Debugging Variables: - Part 4\r\n\r\n`console.log()` is not just useful at the end of programs. It - is really helpful when we want to check the value of variables part way through - the running of a program. Since we can't see the value of the variable change - on the screen we need to find another way to get that information.\r\n\r\n# - Do This\r\n\r\n* **Starter Code:** We started you off with the same problem - from the last level with `console.log()` statements at the beginning and end - of the program to check the starting and ending values\r\n\r\n* **Add `console.log()` - statements** to find out the value of a and b after the first reassignment - statement `a = b;`" + U3L18 comparison operators_markdown_instruction: "# Explore Comparison Operators\r\n\r\nTrue/false + decisions are made using boolean expressions. A __boolean expression__ is + an expression that only evaluates to TRUE or FALSE, and you can use __comparison + operators__ to craft boolean expressions. \r\n\r\n# Do This:\r\n\r\nUse `console.log` + to **print out the different boolean expressions below to see what information + they return**.\r\n\r\n| Boolean Expressions |\r\n| --- |\r\n| 3 > 2 |\r\n| + 2 > 3 |\r\n| 5 + 3 < 10 |\r\n| ‘a’ < ‘b’ |\r\n| ‘j’ > ‘c’ |\r\n| 2 == 2 |\r\n| + 2 != 2 |\r\n| true == false |\r\n| \"x\" == x |\r\n| \"Blue\" == \"blue\" + |\r\n| x < 10 |" + U3L18 comparison operators_for_video_markdown_instruction: "# Explore Comparison + Operators\r\n\r\nTrue/false decisions are made using boolean expressions. + A __boolean expression__ is an expression that only evaluates to TRUE or FALSE, + and you can use __comparison operators__ to craft boolean expressions. \r\n\r\n# + Do This\r\n\r\nUse `console.log` to **print out the different boolean expressions + below to see what information they return**.\r\n\r\n| Boolean Expressions + |\r\n| --- |\r\n| 3 > 2 |\r\n| 2 > 3 |\r\n| 5 + 3 < 10 |\r\n| ‘a’ < ‘b’ |\r\n| + ‘j’ > ‘c’ |\r\n| 2 == 2 |\r\n| 2 != 2 |\r\n| true == false |\r\n| \"blue\" + == blue |\r\n| \"Blue\" == \"blue\" |\r\n| x < 10 |" U3L19 - DEMO up down count practice app_markdown_instruction: "# All the basics you need\r\n\r\nWe're going to use this very simple app to demonstrate the basics of concepts involved in making the clicker game. Yes, it's a dumb @@ -23823,6 +21182,46 @@ en: Click the up arrow until something happens\r\n* Start over\r\n* Click the down arrow until something happens\r\n* Start over\r\n\r\nOnce you think you've seen all the behavior click Finish to see the first part of how this is done.\r\n\r\n" + U3L19 - Debugging with consoleLog_markdown_instruction: "# Debugging Variables: + Part 4\r\n\r\n`console.log()` is not just useful at the end of programs. It + is really helpful when we want to check the value of variables part way through + the running of a program. Since we can't see the value of the variable change + on the screen we need to find another way to get that information.\r\n\r\n# + Do This\r\n\r\n* **Starter Code:** We started you off with the same problem + from the last level with `console.log()` statements at the beginning and end + of the program to check the starting and ending values\r\n\r\n* **Add `console.log()` + statements** to find out the value of a and b after the first reassignment + statement `a = b;`" + U3L19 - Simple If-statements in UpDown App_markdown_instruction: "# Add your + own if statement\r\n\r\nIn most apps you want to make decisions based on the + state of some data you're keeping track of in the app. \r\n\r\nWe've **modified** + the *Count Up/Down App* to add another screen. When the count reaches certain + values we'll switch screens. In the code you'll see an if statment has + been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n + * **If** the value of *count* is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img + src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" + style=\"width: 150px; float: right\">\r\n\r\n# Do This\r\n**Add an if statement + so that when counting down the app changes screens when the count reaches + -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what + happens when the if statement is triggered\r\n* **Study the if statement** + for the up arrow button to see how it works\r\n* **Add an if statement** to + the down arrow event handler:\r\n\t* **if** the count is equal to **-5, then** + set the screen to the \"gameOverScreen\"\r\n* **Goal:** Once you're done, + clicking the down arrow in the app should work like the animation shown to + the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click + to expand]</summary>\r\nThere is a subtle challenge here that you need to + set the text of of the label on the <i>gameOverScreen</i> when you change + screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> Your code can call `setText` for any + UI element, on any screen, at any time - even if the element isn't on the + screen that's currently showing.\r\n</details>\r\n\r\n" + U3L19 - Target Clicker App_markdown_instruction: "# The Goal\r\n\r\nWe have + seen a couple different versions of this app before. At the end of the design + mode lesson we made something very similar to this app. There are a couple + new elements in the app now. Study how those new elements work. \r\n\r\n# + Do This\r\n* Run the example program\r\n* Investigate: What happens when you + **click on the Code.org logo**? \r\n* Investigate: What happens when you **click + somewhere else**? \r\n* Investigate: What happens when you hit the **reset + button**. " U3L19 - final prompt_markdown_instruction: "Respond to your teacher's prompt below" U3L19 - fix the var name syntax error v2_markdown_instruction: "# Debugging @@ -23898,36 +21297,6 @@ en: in this example app\r\n * The app should do something similar the animated example at right.\r\n\r\nOnce you've got it functional, click Finish to move on.\r\n \r\n\r\n" - U3L19 - Simple If-statements in UpDown App_markdown_instruction: "# Add your - own if statement\r\n\r\nIn most apps you want to make decisions based on the - state of some data you're keeping track of in the app. \r\n\r\nWe've **modified** - the *Count Up/Down App* to add another screen. When the count reaches certain - values we'll switch screens. In the code you'll see an if statment has - been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n - * **If** the value of *count* is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img - src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" - style=\"width: 150px; float: right\">\r\n\r\n# Do This\r\n**Add an if statement - so that when counting down the app changes screens when the count reaches - -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what - happens when the if statement is triggered\r\n* **Study the if statement** - for the up arrow button to see how it works\r\n* **Add an if statement** to - the down arrow event handler:\r\n\t* **if** the count is equal to **-5, then** - set the screen to the \"gameOverScreen\"\r\n* **Goal:** Once you're done, - clicking the down arrow in the app should work like the animation shown to - the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click - to expand]</summary>\r\nThere is a subtle challenge here that you need to - set the text of of the label on the <i>gameOverScreen</i> when you change - screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> Your code can call `setText` for any - UI element, on any screen, at any time - even if the element isn't on the - screen that's currently showing.\r\n</details>\r\n\r\n" - U3L19 - Target Clicker App_markdown_instruction: "# The Goal\r\n\r\nWe have - seen a couple different versions of this app before. At the end of the design - mode lesson we made something very similar to this app. There are a couple - new elements in the app now. Study how those new elements work. \r\n\r\n# - Do This\r\n* Run the example program\r\n* Investigate: What happens when you - **click on the Code.org logo**? \r\n* Investigate: What happens when you **click - somewhere else**? \r\n* Investigate: What happens when you hit the **reset - button**. " U3L19 - test reassignment of two vars_markdown_instruction: "# Variable Reassignment - Part 1\r\n\r\nSo far we have only set a variable's value once. But it's called a *variable* for a reason - its value can change (or vary) throughout @@ -24390,26 +21759,6 @@ en: and subtopic_2\"));\r\n } else {\r\n \tsetText(\"text_area\", \"The input contains subtopic_2, but no details\"));\r\n }\r\n} else {\r\n\tsetText(\"text_area\", \"The input doesn't contain any subtopics I know about\");\r\n}</code></pre>\r\n</details>" - U3L24 introIncludes_markdown_instruction: "# *includes*\r\n<img src=\"https://images.code.org/7373ad2ad98b0d815ce0b8196c2ec177-image-1446070324010.11.43 - PM.png\" style=\"width: 250px; float:right\">\r\n\r\nWe're going to explore - a new function called `includes`. This function can be used to check if one - string appears anywhere inside of another. Just like `toUpperCase` and `toLowerCase` - this function is called using **dot notation**.\r\n\r\n# *includes* Returns - a Boolean\r\n**`includes` is a function that returns a boolean.** In other - words, when the function runs it will **evaulate to either `true` or `false`**. - This function can be used **anywhere you would normally use a boolean expression**.\r\n\r\nYou've - actually **seen a few functions that return a value before this**. `randomNumber` - is a function that returns a number and `getText` is a function that returns - a string. In every case we've used these functions **as if they were the - data type they return (or evaulate to)**. Notice that in block mode these - functions don't have the connectors that other commands do since they will - be used as a piece of data within another function.\r\n\r\n# Do This:\r\n\r\n* - **Read the documentation** for `includes`.\r\n* **Starter code** has been - provided which shows one instance where a string does include a `searchValue` - and one where it does not.\r\n* **Replicate the style** of these commands - to check the rest of questions provided.\r\n* **Create three statements of - your own using `includes`** making use of the `console.log` statements provided.\r\n* - **Once you're comfortable with this command move on.**" U3L24 Nested Conditionals 1_markdown_instruction: "# Adding *includes* to the Movie Bot\r\n\r\nIf our Movie Bot is asked a question like \"What is a good comedy movie?\" it currently won't know how to respond, **even though the @@ -24465,6 +21814,26 @@ en: this level. \r\n\r\n* Use the \"Activity Guide - Debugging Conditionals\"\r\n* Expose the bugs in this problem by typing inputs into the user-input box. \r\n* Track which inputs cause unexpected outputs." + U3L24 introIncludes_markdown_instruction: "# *includes*\r\n<img src=\"https://images.code.org/7373ad2ad98b0d815ce0b8196c2ec177-image-1446070324010.11.43 + PM.png\" style=\"width: 250px; float:right\">\r\n\r\nWe're going to explore + a new function called `includes`. This function can be used to check if one + string appears anywhere inside of another. Just like `toUpperCase` and `toLowerCase` + this function is called using **dot notation**.\r\n\r\n# *includes* Returns + a Boolean\r\n**`includes` is a function that returns a boolean.** In other + words, when the function runs it will **evaulate to either `true` or `false`**. + This function can be used **anywhere you would normally use a boolean expression**.\r\n\r\nYou've + actually **seen a few functions that return a value before this**. `randomNumber` + is a function that returns a number and `getText` is a function that returns + a string. In every case we've used these functions **as if they were the + data type they return (or evaulate to)**. Notice that in block mode these + functions don't have the connectors that other commands do since they will + be used as a piece of data within another function.\r\n\r\n# Do This:\r\n\r\n* + **Read the documentation** for `includes`.\r\n* **Starter code** has been + provided which shows one instance where a string does include a `searchValue` + and one where it does not.\r\n* **Replicate the style** of these commands + to check the rest of questions provided.\r\n* **Create three statements of + your own using `includes`** making use of the `console.log` statements provided.\r\n* + **Once you're comfortable with this command move on.**" U3L25 - drag out key event_markdown_instruction: "# *keypress*\r\n\r\nIf we want to add keyboard input to our apps we'll need to learn about how key events work in App Lab. To start let's take a closer look at the `onEvent` @@ -24692,135 +22061,56 @@ en: to collect from 10,000 plays of that game?\n" U3L2_Turtle3by3Grid_markdown_instruction: "# Do This: \r\nDraw a 3x3 grid to the *front* and *right* of the turtle as efficiently as possible. The turtle - should end at its original location, facing its original direction.\r\n\r\n![](https://images.code.org/c15fee1f27c817a352a521c7ddcb5006-image-1436282127747.png)\r\n\r\n**HINT:** - This problem presents some subtle challenges. Work with your partner to discuss - possible solutions. Try more than one path. Testing your ideas on paper might - be a faster way to brainstorm.\r\n\r\n" - U3L2_TurtleSquare_right_markdown_instruction: "<img src=\"https://images.code.org/ad48e7224312a6c41f4fc5727af53cc0-image-1436287265071.png\" - align=right> \r\n# Do This:\r\nDraw a 1 x 1 square to the *front and right* - of the turtle as efficiently as possible. Notice that there is no command - to turn right! You need to figure out how to draw this by only turning left - and moving forward. The program should stop with turtle in its original position, - facing its original direction.\r\n\r\nWhen you're done click the Finish button - to move onto the next problem.\r\n\r\n" - U3L30 Free Response Getting Started_markdown_instruction: "Why do you think - human beings create lists? \n\nWhat types of lists have you created? \n\nHow - do you use lists?\n" - U3L30 Free Response Wrap Up_markdown_instruction: "Complete the following sentence:\n\nToday - I learned three things about coding arrays __________, ____________, and __________. - \n \nBut the most important thing I learned about planning an arrays is _____________________.\n" - U3L31 Assessment1_markdown_instruction: "Assess your photo album project with - the rubric. Then answer the following questions.\n\nDiscuss how you incrementally - developed your program. (100 words max)\n\n* What did you create first? \n* - What came next? \n* What problems did you encounter and solve?\n" - U3L31 Assessment2_markdown_instruction: "Describe how the feedback you gave - to another student was helpful.(100 words max)\n\n* What was the most significant - feedback you provided that helped a peer review, revise and improve the program? - \n* How did your suggestions contribute to the improvement?\n" - U3L31 Assessment3_markdown_instruction: "What was the most significant feedback - another student provided to your project that helped you review, revise, and - improve your program? (100 words max)\n" - U3L31 Free Response Getting Started_markdown_instruction: "List three reasons - why you think that electronic photo albums are so popular.\n" - U3L32 Free Response Getting Started_markdown_instruction: "Did you ever own - a \"lite-brite\" toy as a child? Describe how an image is created with this - toy. What would you have to do to change everything that is red to blue?\n" - U3L33 Free Response Getting Started_markdown_instruction: "Describe the visual - impact of each of the following effects. What do you have to do to the image - to create the desired effect?\n\n* Make an image \"warmer\"\n* Make an image - \"cooler\"\n* Make an image \"brighter\"\n* Make an image \"darker\"\n* Make - an image \"gray scale\"\n\n\n" - U3L34 Free Response Getting Started_markdown_instruction: "Have you ever seen - hidden-image stereograms...an image hidden within what appears to be a colorful - geometric pattern? See an example <a href=\"http://www.vision3d.com/sghidden.html\" - target=\"_blank\"> here.\n\n</a>How do you think stereograms are created?\n" - U4 - add createRecord to contacts App_markdown_instruction: "# Save Your Contacts - in the Cloud!\r\n\r\nNow that you know how to save objects to the database, - you can make your contacts app save things permanently.\r\n\r\nRight now you'll - add the ability for the app to save contacts to the database. In the next - lesson, you'll learn how to pull data from the database back into the app.\r\n\r\n# - Do This:\r\n\r\n**The contacts app you created in the previous lesson** is - provided.\r\n\r\n * Drag the `createRecord` block into the event handler code - for the \"createContactButton\" and add it as the last lines of the function.\r\n - * Set the **first parameter** to be a descriptive table name like \"myContacts.\"\r\n - * Set the **second parameter** to object you created for the new contact (in - the example the variable is called `newContact`.\r\n * Run the app and **add - a new contact**.\r\n * In the Data Viewer, **confirm a new table was created - and that it contains the contact you created**.\r\n\r\n![](https://images.code.org/36dd0fc06e93b1988a9df72a62c3f99f-image-1449266720880.gif)" - U4 - Add Row By Hand_markdown_instruction: "# Add a Record by Hand\r\n\r\nYou - can also add new records in the data table itself by clicking the \"Add row\" - button.\r\n\r\n# Do This:\r\n * Go to the \"mySongs\" data table.\r\n * Click - the \"Add row\" button. <img src=\"https://images.code.org/403521f908a9055f4597f649deb3cfab-image-1449260729474.png\" - style=\"width: 70px\">\r\n * Enter the information for a song of your choosing.\r\n - \t* If you can't think of a song use: **Don't Stop Believin'** by *Journey*. It's - 250 seconds long.\r\n * Once you've added a record in the data table come - back here and continue to the next level.\r\n\r\n" - U4 - Charts - drawChartFromRecords 1_markdown_instruction: "# Visualizing Data\r\n\r\nSo - far, you’ve been able to visualize the data you collected by using `readRecords` - and **printing out your table to the console**. But you may have found that - **it’s hard to draw meaningful conclusions from your data** by looking at - a long list of text.\r\n\r\nAnother way that people visualize data is by **creating - graphs or charts**. When you plot information on a chart, you can more easily - see patterns and trends in your data, which allows you to **understand and - draw conclusions from your data**. In App Lab, the block that lets you chart - data is `drawChartFromRecords`.\r\n\r\n![](https://images.code.org/d03c13264c127088e6b505a30c83fde2-image-1450388738029.18.40.png)\r\n\r\n# - *drawChartFromRecords*\r\n\r\nIn the next several levels, you will learn how - to use a new block called `drawChartFromRecords`. This block allows you to - **construct charts from records in your database** to create your own data - visualizations.\r\n\r\n# Do This:\r\n\r\n* **Open the data viewer** and see - what records are stored in “mytable.”\r\n* In Design Mode, drag a **chart** - from the toolbox into your app.\r\n\t* Make sure you give your chart a **meaningful - and descriptive ID**!\r\n\r\n![](https://images.code.org/419d63a96da5eac9989fa0cb62f0c6f3-image-1450468649142.gif)\r\n\r\n* - **Drag out the `drawChartFromRecords` block.** It has some default code provided.\r\n* - **Change the ID** in the `drawChartFromRecords` block to match the ID of the - chart UI element you created. **Change the chart type** from “bar” to “scatter.”\r\n\r\n![](https://images.code.org/3d6d79a716afb9a25e81269974615b98-image-1450389317947.gif)\r\n\r\n* - **Run the program** and see the results.\r\n\t* **Note:** After you hit “Run,” - it might take a moment for your chart to load the data from the database." - U4 - Charts - drawChartFromRecords Options 1_markdown_instruction: "# Customizing - Your Charts\r\n\r\nYou now have a chart that allows you to **see relationships - and trends in your data!**\r\n\r\nYou may find that you want **greater control - over the appearance of your chart**. Luckily, `drawChartFromRecords` block - actually has another parameter that lets you customize different components - of your chart! Let’s take advantage of that ability now to manipulate some - components of your chart.\r\n\r\n# The *options* Object\r\n\r\nIf you look - at the `drawChartFromRecords` block, you will see that **there is an additional - parameter after the `columns` array, called `options`**. This parameter is - actually an object whose properties correspond to different parts of your - chart. There are many different properties that you can set for your chart, - but for this level you’ll only be working with the `title` and `colors` properties.\r\n\r\n# - Do This:\r\n\r\n* At the beginning of your program, **create a new object - called `options`.**\r\n* By default, your chart is not labeled with a title, - but a descriptive title will help others understand your chart more clearly.\r\n * - **Set the `title` property** to “Popularity of Hashtags Over Time.”\r\n* **Change - the colors of the lines for each hashtag** by setting the `colors` property. - `colors` expects an array of strings, where each string is a color name like - “purple” or “yellow”.\r\n\t* **Note:** When you set `colors`, make sure the - **number of elements in the array matches the number of columns you’re plotting.** - For example, if you’re plotting two lines, you’ll need to make sure `colors` - has two strings - one color for each line.\r\n* **Add your `options` object - as an additional parameter to `drawChartFromRecords`.** Your code should now - look something like this (click image to enlarge):<br><a href=\"https://images.code.org/42fdbac98871d9ebcfca3501a1ae092b-image-1457061566573.6.png\" - target=\"_blank\">![](https://images.code.org/42fdbac98871d9ebcfca3501a1ae092b-image-1457061566573.6.png)</a>\r\n* - Run the app and verify that your title appears above the chart and that your - lines have new colors.\r\n" - U4 - Charts - drawChartFromRecords Options 2_markdown_instruction: "There are - still **several other chart properties that you can manipulate** using the - `options` parameter of `drawChartFromRecords`. You can use these properties - to change the colors in your chart, hide the legend, and much more! **Remember, - when customizing your chart, it’s less about making a pretty chart and more - about manipulating your data so that it’s easier for others to read and understand.**\r\n\r\n# - Do This:\r\n\r\n* **Open the API** for the `drawChartFromRecords` block.\r\n* - Read through and **pick some of the other interesting options properties to - customize** for your chart." - U4 - Charts - drawChartsFromRecords 1_markdown_instruction: "Instead of using - the table to read out the entire table, let's visualize it by using a chart. - Here's a new block called drawChartsFromRecords [insert image]. We're going - to use this new block to create a scatter plot [how do they choose those options?]\r\n\r\nLOADING - DATA: (just use default table name, column names, so all they have to do is - drag and drop the block, w/o messing with the parameters)\r\n\r\n# Do This:\r\n\r\nAdd - a screen element for charts\r\n\r\nPull out the drawCharts block\r\n\r\nMake - the ID match the ID they gave the screen element\r\n\r\nRun the program to - see what happens!\r\n" + should end at its original location, facing its original direction.\r\n\r\n![](https://images.code.org/c15fee1f27c817a352a521c7ddcb5006-image-1436282127747.png)\r\n\r\n**HINT:** + This problem presents some subtle challenges. Work with your partner to discuss + possible solutions. Try more than one path. Testing your ideas on paper might + be a faster way to brainstorm.\r\n\r\n" + U3L2_TurtleSquare_right_markdown_instruction: "<img src=\"https://images.code.org/ad48e7224312a6c41f4fc5727af53cc0-image-1436287265071.png\" + align=right> \r\n# Do This:\r\nDraw a 1 x 1 square to the *front and right* + of the turtle as efficiently as possible. Notice that there is no command + to turn right! You need to figure out how to draw this by only turning left + and moving forward. The program should stop with turtle in its original position, + facing its original direction.\r\n\r\nWhen you're done click the Finish button + to move onto the next problem.\r\n\r\n" + U3L30 Free Response Getting Started_markdown_instruction: "Why do you think + human beings create lists? \n\nWhat types of lists have you created? \n\nHow + do you use lists?\n" + U3L30 Free Response Wrap Up_markdown_instruction: "Complete the following sentence:\n\nToday + I learned three things about coding arrays __________, ____________, and __________. + \n \nBut the most important thing I learned about planning an arrays is _____________________.\n" + U3L31 Assessment1_markdown_instruction: "Assess your photo album project with + the rubric. Then answer the following questions.\n\nDiscuss how you incrementally + developed your program. (100 words max)\n\n* What did you create first? \n* + What came next? \n* What problems did you encounter and solve?\n" + U3L31 Assessment2_markdown_instruction: "Describe how the feedback you gave + to another student was helpful.(100 words max)\n\n* What was the most significant + feedback you provided that helped a peer review, revise and improve the program? + \n* How did your suggestions contribute to the improvement?\n" + U3L31 Assessment3_markdown_instruction: "What was the most significant feedback + another student provided to your project that helped you review, revise, and + improve your program? (100 words max)\n" + U3L31 Free Response Getting Started_markdown_instruction: "List three reasons + why you think that electronic photo albums are so popular.\n" + U3L32 Free Response Getting Started_markdown_instruction: "Did you ever own + a \"lite-brite\" toy as a child? Describe how an image is created with this + toy. What would you have to do to change everything that is red to blue?\n" + U3L33 Free Response Getting Started_markdown_instruction: "Describe the visual + impact of each of the following effects. What do you have to do to the image + to create the desired effect?\n\n* Make an image \"warmer\"\n* Make an image + \"cooler\"\n* Make an image \"brighter\"\n* Make an image \"darker\"\n* Make + an image \"gray scale\"\n\n\n" + U3L34 Free Response Getting Started_markdown_instruction: "Have you ever seen + hidden-image stereograms...an image hidden within what appears to be a colorful + geometric pattern? See an example <a href=\"http://www.vision3d.com/sghidden.html\" + target=\"_blank\"> here.\n\n</a>How do you think stereograms are created?\n" + U4 - Add Row By Hand_markdown_instruction: "# Add a Record by Hand\r\n\r\nYou + can also add new records in the data table itself by clicking the \"Add row\" + button.\r\n\r\n# Do This:\r\n * Go to the \"mySongs\" data table.\r\n * Click + the \"Add row\" button. <img src=\"https://images.code.org/403521f908a9055f4597f649deb3cfab-image-1449260729474.png\" + style=\"width: 70px\">\r\n * Enter the information for a song of your choosing.\r\n + \t* If you can't think of a song use: **Don't Stop Believin'** by *Journey*. It's + 250 seconds long.\r\n * Once you've added a record in the data table come + back here and continue to the next level.\r\n\r\n" U4 - Charts - Export Data_markdown_instruction: "# Exporting Data\r\n\r\nIn the last level, you saw that **remixing a project doesn’t copy over the data** from the original project’s database. But what happens if you want to keep @@ -24969,6 +22259,72 @@ en: the app** and see the results.\r\n\t* Now that your chart has meaningful labels, **what conclusions can you draw about the data set?** What relationships do you see between the Tomatometer rating and the Audience rating?\r\n\r\n\r\n" + U4 - Charts - drawChartFromRecords 1_markdown_instruction: "# Visualizing Data\r\n\r\nSo + far, you’ve been able to visualize the data you collected by using `readRecords` + and **printing out your table to the console**. But you may have found that + **it’s hard to draw meaningful conclusions from your data** by looking at + a long list of text.\r\n\r\nAnother way that people visualize data is by **creating + graphs or charts**. When you plot information on a chart, you can more easily + see patterns and trends in your data, which allows you to **understand and + draw conclusions from your data**. In App Lab, the block that lets you chart + data is `drawChartFromRecords`.\r\n\r\n![](https://images.code.org/d03c13264c127088e6b505a30c83fde2-image-1450388738029.18.40.png)\r\n\r\n# + *drawChartFromRecords*\r\n\r\nIn the next several levels, you will learn how + to use a new block called `drawChartFromRecords`. This block allows you to + **construct charts from records in your database** to create your own data + visualizations.\r\n\r\n# Do This:\r\n\r\n* **Open the data viewer** and see + what records are stored in “mytable.”\r\n* In Design Mode, drag a **chart** + from the toolbox into your app.\r\n\t* Make sure you give your chart a **meaningful + and descriptive ID**!\r\n\r\n![](https://images.code.org/419d63a96da5eac9989fa0cb62f0c6f3-image-1450468649142.gif)\r\n\r\n* + **Drag out the `drawChartFromRecords` block.** It has some default code provided.\r\n* + **Change the ID** in the `drawChartFromRecords` block to match the ID of the + chart UI element you created. **Change the chart type** from “bar” to “scatter.”\r\n\r\n![](https://images.code.org/3d6d79a716afb9a25e81269974615b98-image-1450389317947.gif)\r\n\r\n* + **Run the program** and see the results.\r\n\t* **Note:** After you hit “Run,” + it might take a moment for your chart to load the data from the database." + U4 - Charts - drawChartFromRecords Options 1_markdown_instruction: "# Customizing + Your Charts\r\n\r\nYou now have a chart that allows you to **see relationships + and trends in your data!**\r\n\r\nYou may find that you want **greater control + over the appearance of your chart**. Luckily, `drawChartFromRecords` block + actually has another parameter that lets you customize different components + of your chart! Let’s take advantage of that ability now to manipulate some + components of your chart.\r\n\r\n# The *options* Object\r\n\r\nIf you look + at the `drawChartFromRecords` block, you will see that **there is an additional + parameter after the `columns` array, called `options`**. This parameter is + actually an object whose properties correspond to different parts of your + chart. There are many different properties that you can set for your chart, + but for this level you’ll only be working with the `title` and `colors` properties.\r\n\r\n# + Do This:\r\n\r\n* At the beginning of your program, **create a new object + called `options`.**\r\n* By default, your chart is not labeled with a title, + but a descriptive title will help others understand your chart more clearly.\r\n * + **Set the `title` property** to “Popularity of Hashtags Over Time.”\r\n* **Change + the colors of the lines for each hashtag** by setting the `colors` property. + `colors` expects an array of strings, where each string is a color name like + “purple” or “yellow”.\r\n\t* **Note:** When you set `colors`, make sure the + **number of elements in the array matches the number of columns you’re plotting.** + For example, if you’re plotting two lines, you’ll need to make sure `colors` + has two strings - one color for each line.\r\n* **Add your `options` object + as an additional parameter to `drawChartFromRecords`.** Your code should now + look something like this (click image to enlarge):<br><a href=\"https://images.code.org/42fdbac98871d9ebcfca3501a1ae092b-image-1457061566573.6.png\" + target=\"_blank\">![](https://images.code.org/42fdbac98871d9ebcfca3501a1ae092b-image-1457061566573.6.png)</a>\r\n* + Run the app and verify that your title appears above the chart and that your + lines have new colors.\r\n" + U4 - Charts - drawChartFromRecords Options 2_markdown_instruction: "There are + still **several other chart properties that you can manipulate** using the + `options` parameter of `drawChartFromRecords`. You can use these properties + to change the colors in your chart, hide the legend, and much more! **Remember, + when customizing your chart, it’s less about making a pretty chart and more + about manipulating your data so that it’s easier for others to read and understand.**\r\n\r\n# + Do This:\r\n\r\n* **Open the API** for the `drawChartFromRecords` block.\r\n* + Read through and **pick some of the other interesting options properties to + customize** for your chart." + U4 - Charts - drawChartsFromRecords 1_markdown_instruction: "Instead of using + the table to read out the entire table, let's visualize it by using a chart. + Here's a new block called drawChartsFromRecords [insert image]. We're going + to use this new block to create a scatter plot [how do they choose those options?]\r\n\r\nLOADING + DATA: (just use default table name, column names, so all they have to do is + drag and drop the block, w/o messing with the parameters)\r\n\r\n# Do This:\r\n\r\nAdd + a screen element for charts\r\n\r\nPull out the drawCharts block\r\n\r\nMake + the ID match the ID they gave the screen element\r\n\r\nRun the program to + see what happens!\r\n" U4 - CreateRecord - 1_markdown_instruction: "# Permanent Data Storage\r\n\r\nUp to now, all the data created in our app disappears or gets lost each time we re-run the app. You were probably frustrated, for example, that a new @@ -25073,80 +22429,6 @@ en: call to `createRecord`.\r\n* In the Data Viewer, **confirm the new record was added to the table**. You'll learn more about the changes you see in the next exercise." - U4 - debug column names are case sensitive_markdown_instruction: "# Are Properties - Case-Sensitive?\r\n\r\nYou saw that if you add a property to an object and - then store it in the database, the database will add a column to accommodate - the new data value. \r\n\r\nIf you end up with columns in your table that - you don't want, you can delete them\r\n![](https://images.code.org/baecadc168954c794212b419d441679b-image-1449262524542.gif)\r\n\r\nLet's - do another quick experiment to test the behavior of the data table. **What - happens if you change how a property is spelled?**\r\n\r\n# Do This:\r\n\r\n**Your - code from the previous exercise** is provided.\r\n\r\n* Change `song.title` - to `song.Title` (capital T) where you create your song object.\r\n* **Run - the program**, then go to the Data Viewer to see what happened.\r\n* If there - are problems created by the change in spelling, **delete unnecessary columns - and change your code back**." - U4 - deleteRecords 0_markdown_instruction: "# Deleting Records with Code\r\n\r\nYou - can delete a record \"by hand\" in the Data Viewer by clicking the <img src=\"https://images.code.org/b45cebe6d06d8c2d45a233bd3c472a62-image-1449850229074.png\" - style=\"width: 50px\"> button.\r\n\r\nTo delete a record with code you use - the `deleteRecord` command. It works similarly to the other data tools in - that it has 3 parameters:\r\n\r\n * The **name of the table** you want to - delete from.\r\n * The **object** you want to delete.\r\n * A **callback** - function.\r\n\r\n`deleteRecord` is **different from the other data commands** - in one critical way. The object you send to the database ***only* needs to - contain the id of the record** you want to delete. \r\n \r\n\r\n# Do This:\r\n\r\n**Your - database already includes a table called \"mytable\"**\r\n\r\n * Go to the - Data Viewer and **look at the data in \"mytable\"**.\r\n * **Drag out** the - `deleteRecord` block.\r\n \t* It includes **default code** to delete the record - with id:1 in \"mytable\".\r\n * Run the code and **confirm that the record - with id:1 (\"Greg\") is deleted from the database**.\r\n\r\n![](https://images.code.org/f1168e1793f646575f26d86e66ddcae4-image-1457470120824.gif)" - U4 - deleteRecords 1_markdown_instruction: "# Deleting Records Continued...\r\n\r\nThe - other difference with `deleteRecord` is that the database **sends back a boolean - called `success`.** \r\n\r\nUsing the `success` boolean, you can write a callback - function that will behave differently based on whether or not `deleteRecord` - ran successfully.\r\n\r\n* If the database was able to successfully delete - the specified record, `success` will be set to **true** in the callback function. - \r\n* If the database was **not** able to delete the record, `success` will - be **false.**\r\n\r\nLet's do a little more experimentation with `deleteRecord` - on a sample database. **We've given you a new database that has about 40 - songs in it.** You have a few different things to try so don't miss them.\r\n\r\n# - Do This:\r\n\r\n* **Click View Data.** Look at the \"mySongs\" table and **find - the ID of the song \"Little Bunny Foo Foo.\"** \r\n* **Drag out the `deleteRecord` - block.**\r\n * Set the table name to \"mySongs.\"\r\n * Set the `id` of - the object to delete to the ID of \"Little Bunny Foo Foo.\"\r\n* **Add an - `if` statement to the callback function.**\r\n * If `success` is true, print - \"Record deleted successfully\" to the console.\r\n * Otherwise, print \"Could - not delete record\" to the console.\r\n* **Run the code.**\r\n * Verify that - you deleted \"Little Bunny Foo Foo\" from the list of songs.\r\n* **Run the - exact same code again.**\r\n * This will attempt to delete a record with - the ID you just deleted. See what happens..." - U4 - deleteRecords 2 delete object_markdown_instruction: "# Using Objects to - Specify What to Delete\r\n\r\nWhen deleting an object in the database **the - only property the database checks is `id` - *everything else* in the object - is ignorned by `deleteRecord`**.\r\n\r\nThe **key takeway** is that you can - pass *any* object to `deleteRecord`. As long as it has a property called `id` - the database will try to delete a record with that ID.\r\n\r\nLet's look - at an example. \r\n\r\n# Do This:\r\n <img src=\"https://images.code.org/0af097cf5062c49743275f2c3df21bf7-image-1449864027240.gif\" - style=\"float: right; width: 350px\">\r\n \r\n**Starter code is provided** - that constructs an object called `song` and sets `song.id = 9` (the ID of - \"Little Bunny Foo Foo\"). Additional \"junk\" properties are added as well. - The \"mySongs\" table in the database has been restored to its original state.\r\n - \r\n* **Replace the second parameter of deleteRecord to use the `song` object** - instead of `{id:1}` (see animation at right).\r\n* Run your program and **confirm - that the record with id 9 is deleted** by checking in the Data Viewer.\r\n* - **Change the ID in the `song` object** to the ID of a different record in - your database.\r\n* Run your program and **confirm another record in \"mySongs\" - was deleted.**" - U4 - deleteRecords 2_markdown_instruction: "# Deleting Records\r\n\r\nGo look - at the data. See the ids. When you try to edit you can't. Why? Because - id's are unique, but for all time. Each record that gets added gets assigned - a unique id. That id will never be used again, even if you delete it. ![](https://images.code.org/352bbbd91c14aa8a4a37fcc309f29d93-image-1449782149871.gif)\r\n\r\nYou - can delete a record using the data viewer by clicking the delete button (duh).\r\n\r\nTo - do it with code you use the delete record block. It works similarly to the - other data tools.\r\n\r\n[screen cap diagram - table name, object, callback]\r\n\r\nHowever, - deleteRecord is different because the object *only* needs to contain the id - of the record you want to delete. You can \r\n\r\n# Do This\r\n * Drag out - the delete records block - set the id to the one you found.\r\n * Run the - code - verify that you deleted the right record\r\n\r\n" U4 - Edit Data Table by Hand_markdown_instruction: "# Editing the Data Table by Hand\r\n\r\nIn the previous level, you noticed that **a new column was added to the table** when you added an object that had a new property called @@ -25159,30 +22441,9 @@ en: - Gloria Gaynor\r\n* Since you re-added \"Single Ladies\" you can **Delete** the earlier, incomplete one.\r\n* Move on where your database has **4 songs, each with a title, seconds, and artist**." - U4 - fix contacts by hand in data table_markdown_instruction: "# Add Contacts - to the Data Table by Hand\r\n\r\nWhen you originally created this app, you - hard-coded at least **three contacts\"** that were added to your contacts - list every time the program started running. You'll want to move their information - into the database as well.\r\n\r\n# Do This:\r\n\r\n**Your code from the previous - exercise** is provided.\r\n\r\n* In the Data Viewer, go to the table you are - using to store your contacts.\r\n* Add rows to the table and copy in the url, - name, phone number, etc. for each of the hard-coded contacts in your app.\r\n* - **Don't actually delete your hard-coded contacts from your code.**" U4 - Import Data - 1_markdown_instruction: "We can import data\r\n\r\nGiven a csv file, have students import it and then go look at in the data viewer" - U4 - last stage test adding contcts_markdown_instruction: "# Test the App\r\n\r\nIf - you run your app now, you can add contacts and they will be saved to the database, - but they will also show up \"locally\" in your app. That is, until you restart - it.\r\n\r\n**When you restart the app, it only reloads the hard-coded contacts. - This is okay for now.** In the **next lesson** you'll learn how to pull - data from the database back into the app.\r\n\r\nAs a final step for now...\r\n\r\n# - Do This:\r\n\r\n**Your code from the previous exercise** is provided.\r\n\r\n - * **Add a few new contacts to your app and confirm you can scroll through - them**.\r\n * In the Data Viewer, **confirm those contacts were added to your - database**.\r\n * Restart your app. Confirm that **the newly added contacts - are no longer stored locally in your app, but they still exist in the database**.\r\n - * In the Data Viewer confirm those **\"lost\" contacts are still stored in - your database**." + U4 - Objects - Template Contacts_markdown_instruction: "![](https://images.code.org/53a5bdfb7f4ec83174756c8e094558fd-image-1449518131328.png)" U4 - Objects - accessingPropertiesInArray_markdown_instruction: "# Manipulating Objects in an Array\r\n\r\nWhen objects are in an array, we can still **access the individual properties of each object**. In order to do so, you will need @@ -25450,7 +22711,6 @@ en: Use `setImageURL` within the event handler to change the URL of the image to whatever is currently in `URLinput`.\r\n* Run the app and confirm that **the image updates when a valid image URL is given**.\r\n\r\n![](https://images.code.org/955fa56473d949ed7bd326aa87c96e0f-image-1449525666366.gif)" - U4 - Objects - Template Contacts_markdown_instruction: "![](https://images.code.org/53a5bdfb7f4ec83174756c8e094558fd-image-1449518131328.png)" U4 - Objects - writeWrap_markdown_instruction: "# Wrapping Indexes\r\n\r\nCurrently you can press the left and right arrow key to change the index of the contact you'd like to show. When `showCurrentContact` is called that contact is then @@ -25706,6 +22966,115 @@ en: * **Add a call to `refreshLocalData`** in the callback function of `deleteRecord`.\r\n * **Run your app**.\r\n * Confirm you can now delete contacts and that your local and remote data agree.\r\n" + U4 - add createRecord to contacts App_markdown_instruction: "# Save Your Contacts + in the Cloud!\r\n\r\nNow that you know how to save objects to the database, + you can make your contacts app save things permanently.\r\n\r\nRight now you'll + add the ability for the app to save contacts to the database. In the next + lesson, you'll learn how to pull data from the database back into the app.\r\n\r\n# + Do This:\r\n\r\n**The contacts app you created in the previous lesson** is + provided.\r\n\r\n * Drag the `createRecord` block into the event handler code + for the \"createContactButton\" and add it as the last lines of the function.\r\n + * Set the **first parameter** to be a descriptive table name like \"myContacts.\"\r\n + * Set the **second parameter** to object you created for the new contact (in + the example the variable is called `newContact`.\r\n * Run the app and **add + a new contact**.\r\n * In the Data Viewer, **confirm a new table was created + and that it contains the contact you created**.\r\n\r\n![](https://images.code.org/36dd0fc06e93b1988a9df72a62c3f99f-image-1449266720880.gif)" + U4 - debug column names are case sensitive_markdown_instruction: "# Are Properties + Case-Sensitive?\r\n\r\nYou saw that if you add a property to an object and + then store it in the database, the database will add a column to accommodate + the new data value. \r\n\r\nIf you end up with columns in your table that + you don't want, you can delete them\r\n![](https://images.code.org/baecadc168954c794212b419d441679b-image-1449262524542.gif)\r\n\r\nLet's + do another quick experiment to test the behavior of the data table. **What + happens if you change how a property is spelled?**\r\n\r\n# Do This:\r\n\r\n**Your + code from the previous exercise** is provided.\r\n\r\n* Change `song.title` + to `song.Title` (capital T) where you create your song object.\r\n* **Run + the program**, then go to the Data Viewer to see what happened.\r\n* If there + are problems created by the change in spelling, **delete unnecessary columns + and change your code back**." + U4 - deleteRecords 0_markdown_instruction: "# Deleting Records with Code\r\n\r\nYou + can delete a record \"by hand\" in the Data Viewer by clicking the <img src=\"https://images.code.org/b45cebe6d06d8c2d45a233bd3c472a62-image-1449850229074.png\" + style=\"width: 50px\"> button.\r\n\r\nTo delete a record with code you use + the `deleteRecord` command. It works similarly to the other data tools in + that it has 3 parameters:\r\n\r\n * The **name of the table** you want to + delete from.\r\n * The **object** you want to delete.\r\n * A **callback** + function.\r\n\r\n`deleteRecord` is **different from the other data commands** + in one critical way. The object you send to the database ***only* needs to + contain the id of the record** you want to delete. \r\n \r\n\r\n# Do This:\r\n\r\n**Your + database already includes a table called \"mytable\"**\r\n\r\n * Go to the + Data Viewer and **look at the data in \"mytable\"**.\r\n * **Drag out** the + `deleteRecord` block.\r\n \t* It includes **default code** to delete the record + with id:1 in \"mytable\".\r\n * Run the code and **confirm that the record + with id:1 (\"Greg\") is deleted from the database**.\r\n\r\n![](https://images.code.org/f1168e1793f646575f26d86e66ddcae4-image-1457470120824.gif)" + U4 - deleteRecords 1_markdown_instruction: "# Deleting Records Continued...\r\n\r\nThe + other difference with `deleteRecord` is that the database **sends back a boolean + called `success`.** \r\n\r\nUsing the `success` boolean, you can write a callback + function that will behave differently based on whether or not `deleteRecord` + ran successfully.\r\n\r\n* If the database was able to successfully delete + the specified record, `success` will be set to **true** in the callback function. + \r\n* If the database was **not** able to delete the record, `success` will + be **false.**\r\n\r\nLet's do a little more experimentation with `deleteRecord` + on a sample database. **We've given you a new database that has about 40 + songs in it.** You have a few different things to try so don't miss them.\r\n\r\n# + Do This:\r\n\r\n* **Click View Data.** Look at the \"mySongs\" table and **find + the ID of the song \"Little Bunny Foo Foo.\"** \r\n* **Drag out the `deleteRecord` + block.**\r\n * Set the table name to \"mySongs.\"\r\n * Set the `id` of + the object to delete to the ID of \"Little Bunny Foo Foo.\"\r\n* **Add an + `if` statement to the callback function.**\r\n * If `success` is true, print + \"Record deleted successfully\" to the console.\r\n * Otherwise, print \"Could + not delete record\" to the console.\r\n* **Run the code.**\r\n * Verify that + you deleted \"Little Bunny Foo Foo\" from the list of songs.\r\n* **Run the + exact same code again.**\r\n * This will attempt to delete a record with + the ID you just deleted. See what happens..." + U4 - deleteRecords 2 delete object_markdown_instruction: "# Using Objects to + Specify What to Delete\r\n\r\nWhen deleting an object in the database **the + only property the database checks is `id` - *everything else* in the object + is ignorned by `deleteRecord`**.\r\n\r\nThe **key takeway** is that you can + pass *any* object to `deleteRecord`. As long as it has a property called `id` + the database will try to delete a record with that ID.\r\n\r\nLet's look + at an example. \r\n\r\n# Do This:\r\n <img src=\"https://images.code.org/0af097cf5062c49743275f2c3df21bf7-image-1449864027240.gif\" + style=\"float: right; width: 350px\">\r\n \r\n**Starter code is provided** + that constructs an object called `song` and sets `song.id = 9` (the ID of + \"Little Bunny Foo Foo\"). Additional \"junk\" properties are added as well. + The \"mySongs\" table in the database has been restored to its original state.\r\n + \r\n* **Replace the second parameter of deleteRecord to use the `song` object** + instead of `{id:1}` (see animation at right).\r\n* Run your program and **confirm + that the record with id 9 is deleted** by checking in the Data Viewer.\r\n* + **Change the ID in the `song` object** to the ID of a different record in + your database.\r\n* Run your program and **confirm another record in \"mySongs\" + was deleted.**" + U4 - deleteRecords 2_markdown_instruction: "# Deleting Records\r\n\r\nGo look + at the data. See the ids. When you try to edit you can't. Why? Because + id's are unique, but for all time. Each record that gets added gets assigned + a unique id. That id will never be used again, even if you delete it. ![](https://images.code.org/352bbbd91c14aa8a4a37fcc309f29d93-image-1449782149871.gif)\r\n\r\nYou + can delete a record using the data viewer by clicking the delete button (duh).\r\n\r\nTo + do it with code you use the delete record block. It works similarly to the + other data tools.\r\n\r\n[screen cap diagram - table name, object, callback]\r\n\r\nHowever, + deleteRecord is different because the object *only* needs to contain the id + of the record you want to delete. You can \r\n\r\n# Do This\r\n * Drag out + the delete records block - set the id to the one you found.\r\n * Run the + code - verify that you deleted the right record\r\n\r\n" + U4 - fix contacts by hand in data table_markdown_instruction: "# Add Contacts + to the Data Table by Hand\r\n\r\nWhen you originally created this app, you + hard-coded at least **three contacts\"** that were added to your contacts + list every time the program started running. You'll want to move their information + into the database as well.\r\n\r\n# Do This:\r\n\r\n**Your code from the previous + exercise** is provided.\r\n\r\n* In the Data Viewer, go to the table you are + using to store your contacts.\r\n* Add rows to the table and copy in the url, + name, phone number, etc. for each of the hard-coded contacts in your app.\r\n* + **Don't actually delete your hard-coded contacts from your code.**" + U4 - last stage test adding contcts_markdown_instruction: "# Test the App\r\n\r\nIf + you run your app now, you can add contacts and they will be saved to the database, + but they will also show up \"locally\" in your app. That is, until you restart + it.\r\n\r\n**When you restart the app, it only reloads the hard-coded contacts. + This is okay for now.** In the **next lesson** you'll learn how to pull + data from the database back into the app.\r\n\r\nAs a final step for now...\r\n\r\n# + Do This:\r\n\r\n**Your code from the previous exercise** is provided.\r\n\r\n + * **Add a few new contacts to your app and confirm you can scroll through + them**.\r\n * In the Data Viewer, **confirm those contacts were added to your + database**.\r\n * Restart your app. Confirm that **the newly added contacts + are no longer stored locally in your app, but they still exist in the database**.\r\n + * In the Data Viewer confirm those **\"lost\" contacts are still stored in + your database**." 'U4 L1 - 4: Teaching and Student Support Plan_markdown_instruction': "<br><br>\r\n> **NOTE: before you start this task, make sure you’ve reviewed the lesson resources in this module, and have a good sense of how the lesson works. If you haven’t @@ -25838,6 +23207,7 @@ en: U4 vigenere cipher 2_markdown_instruction: "# Simple Markdown?" U4L01 Free Response_markdown_instruction: "This is the free response question text.\n" + U4L02 - Objects - Template1_markdown_instruction: "# Template" U4L02 - Objects - createObject_markdown_instruction: "# Creating Your Own Objects\r\n\r\n**Objects are unordered collections of name value pairs**. Like an array they can hold many pieces of information, but where arrays use a numeric index to reference @@ -25875,7 +23245,6 @@ en: pieces of information they contain.\r\n* **Reflect: ** Why wouldn't we want this information stored in many variables? Why wouldn't we want this information stored in an array?" - U4L02 - Objects - Template1_markdown_instruction: "# Template" U4L02 Free Response_markdown_instruction: "Free response prompt here.\n\n" U4L03 Free Response_markdown_instruction: "Free response prompt here.\n\n" U4L04 Free Response_markdown_instruction: "Free response prompt here.\n\n" @@ -26290,121 +23659,6 @@ en: scores might change with a single click. Maybe, maybe not.</li>\r\n<li>But we can be lazy and just set both score text labels every time and not have to worry about it.</li>\r\n</details>\r\n\r\n" - U5 compound boolean museum example_markdown_instruction: "## You Try It\r\n\r\n**Recreate - the museum price example from the video.**\r\n\r\n* We've setup everything - for you **except the boolean expression in the *if* statement is incomplete**\r\n\r\n**Modify - the boolean expression** (it just says `age < 21` right now) to use combinations - of `&&` and `||` to reflect the following condition:\r\n\r\n* IF *It's Tuesday - or Thursday or the age is between 12 and 21* they get a discount\r\n* ELSE - they pay full price\r\n\r\n**TIP:** switching to text mode might make this - easier to compose." - U5 if-else dropdown guess dice_markdown_instruction: "<img src=\"https://images.code.org/bd3094161d7d58800b1a6a981383fc6c-image-1479848098180.gif\" - style=\"float: right\">\r\n\r\n## You try it \r\n\r\nThis is a slightly more - involved example. You'll need to study the starting design and code a little - bit, but you only have to insert a single if-else statement and move some - lines of code into the appropriate if or else clause to make it work.\r\n\r\n## - Do this\r\n\r\n**Study the starting code first to see what it does**\r\n\r\n* - You *can* run it to see what happens before doing anything - it just won't - work right\r\n* **Notice** the function `reset()` - which hides the images. \r\n\t* - We made a function because we want to run this code from two different event - handlers.\r\n\r\n**Add an if-else statement in the *roll_btn* event handler** - to check if the random number that represents a dice roll matches the user's - guess in the dropdown\r\n\r\nIf they guessed correctly\r\n* Show the trophy - image\r\n* Add 6 to the score\r\n\r\nOtherwise:\r\n* Show the frowny face - image\r\n* Subtract 1 from the score\r\n\r\n**Setup Notes:**\r\n* All UI elements - are added for you (images are hidden) - flip to Design Mode to see.\r\n* All - lines of code *except* for the if-else statement and condition are also provided - - you'll need to move them around once you've added the if-else statement.\r\n* - Notice the global `score` variable which will keep track of the score between - clicks\r\n* We've added comments in the code to help you out - you can remove - them if you like.\r\n\r\n<details><summary>Hint: [click to expand]</summary>\r\n<br>\r\nThe - condition needs to us <code>==</code> compare <code>dieVal</code> with the - value in the dropdown. To get the value out of the dropdown you use <code>getNumber(\"guess_dropdown\")</code>.<br><br>(You - could use <code>getText(\"guess_dropdown\")</code> and it would still work, - because <code>==</code> tries to convert text to a number for comparison so - <code>\"6\"==6</code> is true. But since we're expecting a number in the - dropdown we should use <code>getNumber</code> so it makes sense when reading - the code.)\r\n</details>" - U5 if-else dropdown movie checker_markdown_instruction: "<img src=\"https://images.code.org/38b037a468dd7a9df53ce29b5b720a03-image-1479852997408.gif\" - style=\"float: right\">\r\n\r\n## You Try It\r\n\r\nThis example is very similar - to the worked example on the previous page - it is a version of the movie - age checker that uses a dropdown.\r\n\r\nWe've provided the starting UI elements, - including the dropdown - but none of the code.\r\n\r\n**Do this:**\r\nUsing - the examples on the previous page as a guide...\r\n\r\n* Add an event handler - for the *dropdown menu that triggers on *\"change\"*.\r\n* Add an if statement - to check if the age chosen in the dropdown is `>=` to 13 and set the text - in the *result_label*\r\n\t* if the age is 13 or over set the text to \"You - are old enough to see a PG-13 movie alone\"\r\n * Otherwise, set the text - to \"You are not old enough to see a PG-13 movie alone\"\r\n\r\n**Tip:** Use - `getNumber(id)` instead of `getText(id)` to get the value out of the dropdown\r\n\r\n* - One major difference from the example is that we want to compare the value - of the dropdown to a number using `>=` rather than with `==`\r\n* You should - to use `getNumber(\"age_dropdown\")` to extract the value *as a number rather - than text*. \r\n* This is the same reason we use `promptNum` instead of `prompt` - for simple console examples.\r\n* It will still work if you use `getText` - but isn't good form." - U5 if-else simple movie ratings example_markdown_instruction: "## You Try It\r\n\r\n**Recreate - the simple movie age example from the video.**\r\n\r\n* We've provided the - first line to prompt the user to enter their age.\r\n* Add and `if-else` statement - that checks to see if the age is `>=` 13 and \r\n* Use `console.log` to display - appropriate messages\r\n\r\nHere is pseudocode for what you should add\r\n\r\n```\r\nIF - age >= 13\r\n DISPLAY \"You can see a PG-13 movie alone\"\r\nELSE\r\n DISPLAY - \"You are not old enough to see a PG-13 movie alone\"\r\n```\r\n\r\n\r\n" - U5 if-else weeekend challenge_markdown_instruction: "<img src=\"https://images.code.org/42591321cf2bf9e4b90e89e0ea613c9f-image-1479909970655.gif\" - style=\"float: right\">\r\n\r\n## Challenge: It's the weekend!\r\n\r\n**Make - an app tells you whether to stay home or go to school based on what day of - the week it is.**\r\n\r\n\r\nIn this challenge you will:\r\n\r\n* Add your - own dropdown menu in design mode\r\n* Add an event handler for the dropdown\r\n* - Write an if-statement that's slightly tricky\r\n\r\n## Do this:\r\n\r\n* - In Design Mode **add a dropdown** menu and fill it with the days of the week: - *Monday, Tuesday,...,Sunday*\r\n* **Add an event handler** for that dropdown - that activates on *\"change\"*\r\n* **Add an `if-else` statement** to the - event handler that checks which day was selected and...\r\n\r\n\t* **If** - the day selected was a weekend day (*Saturday* or *Sunday*) then display a - message that says \"It's the weekend! Stay home!\"\r\n\r\n\t* **Otherwise** - (the day is a weekday) display a message that says \"It's a weekday. Go to - school\".\r\n* Your message should be displayed by setting the text of the - *msg_label* provided in design mode.\r\n\r\n## Testing:\r\n\r\n* Once you - have something functional, make sure you test *every* day of the week to verify - the output is correct\r\n* The if-statement here is trickier than before.\r\n\r\n<details><summary>HINT: - [click to expand]</summary>\r\n<br>\r\n\r\n<li>The trick here is that, unless - you want to check all seven days with individual if-statements, you need to - <strong>nest</strong> one if-statement inside another.</li>\r\n<li>The reason - is that in order to know it's a weekday you need to know <em>both</em> that - it's NOT Sunday <em>and</em> that it's not Saturday either. That's two - boolean conditions.</li>\r\n<li>Here is the skeleton of an if-else structure - that will work. Notice that the the if-statement that checks for Sunday is - <em>inside</em> the else clause of the statement that checks for Saturday</li>\r\n\r\n\r\n<pre>\r\n\r\nIF - it's saturday\r\n ...\r\nELSE\r\n IF it's sunday\r\n ...\r\n ELSE\r\n ...\r\n\r\n</pre>\r\n\r\n</details>\r\n\r\n" - U5 if-else-if movie example_markdown_instruction: "# *if-else-if*\r\n\r\nLet's - recreate the movie ratings example from the previous page (and video).\r\n\r\nAdd - an `if-else-if` statement with a series of `else-if`s to display the right - message based on the user's age.\r\n\r\nWe've started you out with code - that prompts the user for her age. We've also provided all the console.log - statements you need.\r\n\r\n**Your task:** Add an `if-else-if` statement with - the appropriate *Boolean expressions*, and move the `console.log` statements - into the right clause so the correct message gets displayed. Here is a reminder - of what is supposed to happen.\r\n\r\n* **If** the user's age is 17 or over, - they can see an R-rated movie\r\n* **else if** the user's age is 13 or over, - they can see a PG-13 movie\r\n* **else if** the user's age is 5 or over they - can see a PG movie\r\n* **else** display a message about the user being too - young\r\n\r\n* **Test out the program** to make sure your updates worked.\r\n\r\n## - Coding Tips\r\n\r\n**Create an `else-if`** by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. The first - <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> will add an `else`, the second will add an - `else-if`.\r\n\r\n**Remove an `else-if`** -- if you add an extra `else-if` - by accident, you can remove it by switching into text mode and deleting the - text. Don't forget to delete the curly-braces `{` and `}` that go with it.\r\n\r\n\r\n" - U5 if-else-if quiz grade_markdown_instruction: "# Quiz Grade\r\n\r\n**Prompt - the user for their quiz score (0-100) and tell them what letter grade (A-F) - they got.**\r\n\r\n**Example:** if the user enters `84` at the prompt your - program should output: `Your quiz grade is a B.` Here's the score-to-grade - breakdown:\r\n```\r\nLetter Grade: A B C D F\r\n Score - Range: 90-100 80-89 70-79 60-69 0-59\r\n```\r\n\r\n\r\n\r\nWe've started - you out with the prompt and the `console.log` statements you need. **Your - task is to add the *if-else-if* statements to make it work.\r\n\r\n**Remember:** - the order in which you check the boolean conditions *matters*.\r\n\r\n\r\n\r\n" 'U5 L1 - 3: Teaching and Student Support Plan_markdown_instruction': "<br><br>\r\n> **NOTE: before you start this task, make sure you’ve reviewed the lesson resources in this module, and have a good sense of how the lessons work. If you haven’t @@ -26620,20 +23874,135 @@ en: can elevate to a facilitator to review. You will always have a chance to address feedback from your reviewers and resubmit your task! Reviewer feedback will show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" + U5 Video compound booleans_markdown_instruction: "### Points to pay attention + to:\r\n\r\n* The \"Boolean operators\" are AND and OR. \r\n* In JavaScript + you write them as `&&` for AND and `||` for OR.\r\n* You use them to combine + boolean expressions into a single statement when you need to check multiple + conditions before executing a particular segment of code.\r\n\r\n" + U5 Video if-else-if_markdown_instruction: "### Points to pay attention to:\r\n\r\n* + **START at 2:20** \r\n This is the second half of the video you watched + earlier. \r\n\r\n* An If-else-if statement let's you check more than one + condition at a time.\r\n* The **order of conditions matters**. Since conditions + are checked sequentially from top to bottom, the code that gets executed will + be the *first* statement to evaluate to true.\r\n\r\n" + U5 compound boolean museum example_markdown_instruction: "## You Try It\r\n\r\n**Recreate + the museum price example from the video.**\r\n\r\n* We've setup everything + for you **except the boolean expression in the *if* statement is incomplete**\r\n\r\n**Modify + the boolean expression** (it just says `age < 21` right now) to use combinations + of `&&` and `||` to reflect the following condition:\r\n\r\n* IF *It's Tuesday + or Thursday or the age is between 12 and 21* they get a discount\r\n* ELSE + they pay full price\r\n\r\n**TIP:** switching to text mode might make this + easier to compose." + U5 if-else dropdown guess dice_markdown_instruction: "<img src=\"https://images.code.org/bd3094161d7d58800b1a6a981383fc6c-image-1479848098180.gif\" + style=\"float: right\">\r\n\r\n## You try it \r\n\r\nThis is a slightly more + involved example. You'll need to study the starting design and code a little + bit, but you only have to insert a single if-else statement and move some + lines of code into the appropriate if or else clause to make it work.\r\n\r\n## + Do this\r\n\r\n**Study the starting code first to see what it does**\r\n\r\n* + You *can* run it to see what happens before doing anything - it just won't + work right\r\n* **Notice** the function `reset()` - which hides the images. \r\n\t* + We made a function because we want to run this code from two different event + handlers.\r\n\r\n**Add an if-else statement in the *roll_btn* event handler** + to check if the random number that represents a dice roll matches the user's + guess in the dropdown\r\n\r\nIf they guessed correctly\r\n* Show the trophy + image\r\n* Add 6 to the score\r\n\r\nOtherwise:\r\n* Show the frowny face + image\r\n* Subtract 1 from the score\r\n\r\n**Setup Notes:**\r\n* All UI elements + are added for you (images are hidden) - flip to Design Mode to see.\r\n* All + lines of code *except* for the if-else statement and condition are also provided + - you'll need to move them around once you've added the if-else statement.\r\n* + Notice the global `score` variable which will keep track of the score between + clicks\r\n* We've added comments in the code to help you out - you can remove + them if you like.\r\n\r\n<details><summary>Hint: [click to expand]</summary>\r\n<br>\r\nThe + condition needs to us <code>==</code> compare <code>dieVal</code> with the + value in the dropdown. To get the value out of the dropdown you use <code>getNumber(\"guess_dropdown\")</code>.<br><br>(You + could use <code>getText(\"guess_dropdown\")</code> and it would still work, + because <code>==</code> tries to convert text to a number for comparison so + <code>\"6\"==6</code> is true. But since we're expecting a number in the + dropdown we should use <code>getNumber</code> so it makes sense when reading + the code.)\r\n</details>" + U5 if-else dropdown movie checker_markdown_instruction: "<img src=\"https://images.code.org/38b037a468dd7a9df53ce29b5b720a03-image-1479852997408.gif\" + style=\"float: right\">\r\n\r\n## You Try It\r\n\r\nThis example is very similar + to the worked example on the previous page - it is a version of the movie + age checker that uses a dropdown.\r\n\r\nWe've provided the starting UI elements, + including the dropdown - but none of the code.\r\n\r\n**Do this:**\r\nUsing + the examples on the previous page as a guide...\r\n\r\n* Add an event handler + for the *dropdown menu that triggers on *\"change\"*.\r\n* Add an if statement + to check if the age chosen in the dropdown is `>=` to 13 and set the text + in the *result_label*\r\n\t* if the age is 13 or over set the text to \"You + are old enough to see a PG-13 movie alone\"\r\n * Otherwise, set the text + to \"You are not old enough to see a PG-13 movie alone\"\r\n\r\n**Tip:** Use + `getNumber(id)` instead of `getText(id)` to get the value out of the dropdown\r\n\r\n* + One major difference from the example is that we want to compare the value + of the dropdown to a number using `>=` rather than with `==`\r\n* You should + to use `getNumber(\"age_dropdown\")` to extract the value *as a number rather + than text*. \r\n* This is the same reason we use `promptNum` instead of `prompt` + for simple console examples.\r\n* It will still work if you use `getText` + but isn't good form." + U5 if-else simple movie ratings example_markdown_instruction: "## You Try It\r\n\r\n**Recreate + the simple movie age example from the video.**\r\n\r\n* We've provided the + first line to prompt the user to enter their age.\r\n* Add and `if-else` statement + that checks to see if the age is `>=` 13 and \r\n* Use `console.log` to display + appropriate messages\r\n\r\nHere is pseudocode for what you should add\r\n\r\n```\r\nIF + age >= 13\r\n DISPLAY \"You can see a PG-13 movie alone\"\r\nELSE\r\n DISPLAY + \"You are not old enough to see a PG-13 movie alone\"\r\n```\r\n\r\n\r\n" + U5 if-else weeekend challenge_markdown_instruction: "<img src=\"https://images.code.org/42591321cf2bf9e4b90e89e0ea613c9f-image-1479909970655.gif\" + style=\"float: right\">\r\n\r\n## Challenge: It's the weekend!\r\n\r\n**Make + an app tells you whether to stay home or go to school based on what day of + the week it is.**\r\n\r\n\r\nIn this challenge you will:\r\n\r\n* Add your + own dropdown menu in design mode\r\n* Add an event handler for the dropdown\r\n* + Write an if-statement that's slightly tricky\r\n\r\n## Do this:\r\n\r\n* + In Design Mode **add a dropdown** menu and fill it with the days of the week: + *Monday, Tuesday,...,Sunday*\r\n* **Add an event handler** for that dropdown + that activates on *\"change\"*\r\n* **Add an `if-else` statement** to the + event handler that checks which day was selected and...\r\n\r\n\t* **If** + the day selected was a weekend day (*Saturday* or *Sunday*) then display a + message that says \"It's the weekend! Stay home!\"\r\n\r\n\t* **Otherwise** + (the day is a weekday) display a message that says \"It's a weekday. Go to + school\".\r\n* Your message should be displayed by setting the text of the + *msg_label* provided in design mode.\r\n\r\n## Testing:\r\n\r\n* Once you + have something functional, make sure you test *every* day of the week to verify + the output is correct\r\n* The if-statement here is trickier than before.\r\n\r\n<details><summary>HINT: + [click to expand]</summary>\r\n<br>\r\n\r\n<li>The trick here is that, unless + you want to check all seven days with individual if-statements, you need to + <strong>nest</strong> one if-statement inside another.</li>\r\n<li>The reason + is that in order to know it's a weekday you need to know <em>both</em> that + it's NOT Sunday <em>and</em> that it's not Saturday either. That's two + boolean conditions.</li>\r\n<li>Here is the skeleton of an if-else structure + that will work. Notice that the the if-statement that checks for Sunday is + <em>inside</em> the else clause of the statement that checks for Saturday</li>\r\n\r\n\r\n<pre>\r\n\r\nIF + it's saturday\r\n ...\r\nELSE\r\n IF it's sunday\r\n ...\r\n ELSE\r\n ...\r\n\r\n</pre>\r\n\r\n</details>\r\n\r\n" + U5 if-else-if movie example_markdown_instruction: "# *if-else-if*\r\n\r\nLet's + recreate the movie ratings example from the previous page (and video).\r\n\r\nAdd + an `if-else-if` statement with a series of `else-if`s to display the right + message based on the user's age.\r\n\r\nWe've started you out with code + that prompts the user for her age. We've also provided all the console.log + statements you need.\r\n\r\n**Your task:** Add an `if-else-if` statement with + the appropriate *Boolean expressions*, and move the `console.log` statements + into the right clause so the correct message gets displayed. Here is a reminder + of what is supposed to happen.\r\n\r\n* **If** the user's age is 17 or over, + they can see an R-rated movie\r\n* **else if** the user's age is 13 or over, + they can see a PG-13 movie\r\n* **else if** the user's age is 5 or over they + can see a PG movie\r\n* **else** display a message about the user being too + young\r\n\r\n* **Test out the program** to make sure your updates worked.\r\n\r\n## + Coding Tips\r\n\r\n**Create an `else-if`** by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. The first + <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> will add an `else`, the second will add an + `else-if`.\r\n\r\n**Remove an `else-if`** -- if you add an extra `else-if` + by accident, you can remove it by switching into text mode and deleting the + text. Don't forget to delete the curly-braces `{` and `}` that go with it.\r\n\r\n\r\n" + U5 if-else-if quiz grade_markdown_instruction: "# Quiz Grade\r\n\r\n**Prompt + the user for their quiz score (0-100) and tell them what letter grade (A-F) + they got.**\r\n\r\n**Example:** if the user enters `84` at the prompt your + program should output: `Your quiz grade is a B.` Here's the score-to-grade + breakdown:\r\n```\r\nLetter Grade: A B C D F\r\n Score + Range: 90-100 80-89 70-79 60-69 0-59\r\n```\r\n\r\n\r\n\r\nWe've started + you out with the prompt and the `console.log` statements you need. **Your + task is to add the *if-else-if* statements to make it work.\r\n\r\n**Remember:** + the order in which you check the boolean conditions *matters*.\r\n\r\n\r\n\r\n" U5 video Booleans_markdown_instruction: "### Points to pay attention to:\r\n\r\n1. What's a *Boolean Expression?*\r\n2. Why is it called a \"Boolean\"?\r\n3. Is this a legal expression? `10 > 25`?" - U5 Video compound booleans_markdown_instruction: "### Points to pay attention - to:\r\n\r\n* The \"Boolean operators\" are AND and OR. \r\n* In JavaScript - you write them as `&&` for AND and `||` for OR.\r\n* You use them to combine - boolean expressions into a single statement when you need to check multiple - conditions before executing a particular segment of code.\r\n\r\n" - U5 Video if-else-if_markdown_instruction: "### Points to pay attention to:\r\n\r\n* - **START at 2:20** \r\n This is the second half of the video you watched - earlier. \r\n\r\n* An If-else-if statement let's you check more than one - condition at a time.\r\n* The **order of conditions matters**. Since conditions - are checked sequentially from top to bottom, the code that gets executed will - be the *first* statement to evaluate to true.\r\n\r\n" U6 - Final Project - Project Level_markdown_instruction: "# Congratulations!\r\n\r\nYou've reached the end of the year! Now it's time to show off everything you've learned by creating a final project.\r\n\r\n# Do This:\r\n\r\n* Use this level @@ -26658,6 +24027,25 @@ en: are still printed to the console.\r\n* Open the Data Viewer and check that the record for \"Eye of the Tiger\" is now fully filled in.\r\n\r\n**Your code should end up looking similar to the code depicted in the image.**\r\n\r\n![](https://images.code.org/b95ac5c5c45942b3eef85823dee48c42-image-1455666651198.PNG)" + U6 - updateRecord - Contacts - Edit UI_markdown_instruction: "# Editing Contacts + in the Contacts App\r\n\r\nNow that you’re familiar with how `updateRecord` + works, it’s time to add in functionality to the Contacts App so you can edit + contacts in your database. First, you’ll need to do some work in Design Mode + to set up the UI elements you’ll need.\r\n\r\n# Do This:\r\n\r\n** Your code + and database from the Contacts App are provided.**\r\n\r\n* **Change the “Delete” + button on the “viewContactsScreen” to an “Edit” button.** Make sure you **change + the button text and ID to something descriptive**. You might also want to + change the style of the button.\r\n\t* **Note:** Leave the event handler for + the old “Delete” button as is. You’ll still use it later.\r\n* **Add a new + screen called “editContactsScreen”** and add UI elements that look similar + to the ones in the image. Don’t forget to give your UI elements **descriptive + and meaningful names**.\r\n\t* **Note:** Make sure the ID for your new “Delete” + button matches the ID in your event handler for the old delete button. If + you do this, your new “Delete” button should work without needing to change + anything in your event handler.\r\n\r\n| Updated \"viewContactsScreen\": | + New \"editContactsScreen\": |\r\n|------|------|\r\n| ![](https://images.code.org/aef7efbfea4493037d127ca97d83fcc6-image-1455919502578.png) + | ![](https://images.code.org/ee5ce040dd52239719c2b4c790134d08-image-1455919496715.png) + |\r\n\r\n" U6 - updateRecord - Contacts - Edit event handler_markdown_instruction: "# Event Handlers for “Edit” and “Go Back” Buttons\r\n\r\nNow that you have all the UI elements you need, it’s time to set up the event handlers. In this @@ -26679,25 +24067,6 @@ en: “Edit,” “Go Back,” and “Delete” buttons all work and that your preview image updates when you change the URL text.\r\n\r\n\r\n<details><summary><strong>Your code should look similar to this.</strong> (click to expand)</summary>\r\n![](https://images.code.org/74b697567fae902cad13d7df9e695b2b-image-1455921921229.png)\r\n</details>\r\n\r\n" - U6 - updateRecord - Contacts - Edit UI_markdown_instruction: "# Editing Contacts - in the Contacts App\r\n\r\nNow that you’re familiar with how `updateRecord` - works, it’s time to add in functionality to the Contacts App so you can edit - contacts in your database. First, you’ll need to do some work in Design Mode - to set up the UI elements you’ll need.\r\n\r\n# Do This:\r\n\r\n** Your code - and database from the Contacts App are provided.**\r\n\r\n* **Change the “Delete” - button on the “viewContactsScreen” to an “Edit” button.** Make sure you **change - the button text and ID to something descriptive**. You might also want to - change the style of the button.\r\n\t* **Note:** Leave the event handler for - the old “Delete” button as is. You’ll still use it later.\r\n* **Add a new - screen called “editContactsScreen”** and add UI elements that look similar - to the ones in the image. Don’t forget to give your UI elements **descriptive - and meaningful names**.\r\n\t* **Note:** Make sure the ID for your new “Delete” - button matches the ID in your event handler for the old delete button. If - you do this, your new “Delete” button should work without needing to change - anything in your event handler.\r\n\r\n| Updated \"viewContactsScreen\": | - New \"editContactsScreen\": |\r\n|------|------|\r\n| ![](https://images.code.org/aef7efbfea4493037d127ca97d83fcc6-image-1455919502578.png) - | ![](https://images.code.org/ee5ce040dd52239719c2b4c790134d08-image-1455919496715.png) - |\r\n\r\n" U6 - updateRecord - Contacts - Save edited contact_markdown_instruction: "# Saving an Updated Contact in the Database\r\n\r\nThe last step for your Contacts App is to save the updated information from the user in the database. You @@ -27440,46 +24809,2677 @@ en: What recommendations do you have for assessing student learning in Unit 1? \r\n\r\n<br>\r\n\r\nUse the space below to record your recommendations (you'll share them tomorrow). " - What is a Heuristic?_markdown_instruction: "## What is a Heuristic? \r\n\r\nIn - lesson 2 students will take on the challenge of compressing various pieces - of text. Over time, they will see that different types of text require different - approaches to compression. The lesson ends with an activity where students - develop a heuristic, or a rule of thumb, that can be applied to different - pieces of text in order to compress them. \r\n\r\nThere are three Essential - Knowledge Statements and one Exclusion Statement in the Framework dealing - with Heuristics: \r\n\r\n>- 4.2.1D Some problems can be solved but not in - a reasonable time. In these cases, heuristic approaches may be helpful to - find solutions in reasonable time. \r\n- 4.2.2A A heuristic is a technique - that may allow us to find an approximate solution when typical methods fail - to find an exact solution. \r\n- 4.2.2B Heuristics may be helpful for finding - an approximate solution more quickly when exact methods are too slow. \r\n- - Exclusion Statement (4.2.2B): Specific heuristic solutions are beyond the - scope of this course and the AP Exam.\r\n\r\nMany people are confused by the - difference between *algorithms* and *heuristics*. Check out the following - resource for some clarification about the overlaps and differences between - the two. " - What is the difference between formative and summative assessment?_markdown_instruction: "The - following link is a resource that provides definitions and examples of formative - and summative assessments:" - WhileAdventure_markdown_instruction: "Our adventurer wants to collect coins. But + What is a Heuristic?_markdown_instruction: "## What is a Heuristic? \r\n\r\nIn + lesson 2 students will take on the challenge of compressing various pieces + of text. Over time, they will see that different types of text require different + approaches to compression. The lesson ends with an activity where students + develop a heuristic, or a rule of thumb, that can be applied to different + pieces of text in order to compress them. \r\n\r\nThere are three Essential + Knowledge Statements and one Exclusion Statement in the Framework dealing + with Heuristics: \r\n\r\n>- 4.2.1D Some problems can be solved but not in + a reasonable time. In these cases, heuristic approaches may be helpful to + find solutions in reasonable time. \r\n- 4.2.2A A heuristic is a technique + that may allow us to find an approximate solution when typical methods fail + to find an exact solution. \r\n- 4.2.2B Heuristics may be helpful for finding + an approximate solution more quickly when exact methods are too slow. \r\n- + Exclusion Statement (4.2.2B): Specific heuristic solutions are beyond the + scope of this course and the AP Exam.\r\n\r\nMany people are confused by the + difference between *algorithms* and *heuristics*. Check out the following + resource for some clarification about the overlaps and differences between + the two. " + What is the difference between formative and summative assessment?_markdown_instruction: "The + following link is a resource that provides definitions and examples of formative + and summative assessments:" + WhileAdventure_markdown_instruction: "Our adventurer wants to collect coins. But + she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many + as she can using just 4 blocks?" + 'Widget: Black and White Pixelation_markdown_instruction': "# Make your own + image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* + Encode an image of anything you like.\r\n* You might want to do some planning + and sketching with graph paper first.\r\n* DO NOT simply make an abstract + pattern, like a checkerboard. \r\n* Depict something, perhaps your name written + out, your initials, an icon or logo of some sort.\r\n* Get creative! The image + doesn't have to be a perfect square, it can be long and skinny.\r\n* Optional: + for fun, send your image bits to a friend using the <a href =\"https://studio.code.org/s/cspunit1/stage/11/puzzle/2\" + target=\"_blank\">sending bits widget.</a> *(note: this is just a link to + the sending formatted text level from a couple of classes ago)*\r\n\r\n\r\n" + 'Widget: Color Pixelation_markdown_instruction': "# Personal Favicon\r\n**Requirements:**\r\n<img + src = \"https://images.code.org/28fc33ea82996a10863688702af55e65-image-1439596268865.png\" + align=right hspace=20>\r\n\r\n* The icon must be 16x16 pixels. \r\n* You must + use the Pixelation Widget to encode the bits of color information.\r\n* The + image must be encoded with at least 12 bits per pixel.\r\n\r\n" + 'Widget: Text Compression_markdown_instruction': "Look for patterns (repeated + words or phrases) in the text. Enter the patterns you see into the dictionary + on the right. As you type entries into the dictionary, the symbol for the + entry is inserted into the text in place of the pattern." + aE1_markdown_instruction: "<img src=\"https://images.code.org/fa3c416b74ff9071455535955bc4df35-image-1465507662295.gif\" + style=\"float:left; width:100px; margin: 0 20px 80px 100px;\"/>\r\n\r\n<div + style=\"color: #7665a0; font-size: 1.6em; line-height: 1.4em;\">\r\nFirst, + we need napkins!\r\n\r\nChoose your favorite shape:\r\n - Square (Easy)\r\n + - Triangle (Medium)\r\n - Pentagon (Hard)\r\n\r\n</div>\r\n<br/>\r\n\r\n" + aE2_markdown_instruction: "<img src=\"https://images.code.org/2a67ea28a0fb9f674fd764b350b297da-image-1465514320176.gif\" + style=\"width:400px; margin: 0 20px 20px 10px;\"/>\r\n\r\n<div style=\"color: + #7665a0; font-size: 1.6em; line-height: 1.4em;\" >Now we need enough for everyone!\r\n<br/><br/>\r\n\r\nLet's + take the shape we just made and line up a row of 14 napkins. \r\n<br/>\r\nIf + you place one loop inside another loop, we call that a nested loop. \r\n\r\nHow + can you loop all of the code from your last stage to make sure all 14 napkins + line up next to each other?</div>\r\n" + aE3_markdown_instruction: "<img src=\"https://images.code.org/e9fe83556eec68be9ebd7de9a16267b1-image-1465516277348.gif\" + style=\"width:400px; margin: 0 20px 20px 100px;\" loop=\"infinite\"/>\r\n\r\n<div + style=\"color: #7665a0; font-size: 1.6em; line-height: 1.4em;\" >\r\nWe've + got to have a tablecloth! <br/></br>\r\n\r\nTake your row of 14 napkins and + sew 14 of those together with another **outer loop** to make a cover for our + table.\r\n</div>\r\n\r\n" + aE3alternate_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nThis alternate shows what the image would + look like if the user chose pentagon napkins and modified line weight/color.\r\n</div>\r\n\r\n" + aE3alternateB_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nThis alternate shows what the image would + look like if the user chose triangle napkins and got bold with the code.\r\n</div>\r\n\r\n" + aE4_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: 1.6em; + line-height: 1.4em;\" >\r\nOh No! Our napkins are too small! \r\n<br/><br/>\r\nWe + need to have the napkins twice as big and still keep the tablecloth the same + size. What numbers can you change to make that happen?\r\n<br/><br/>\r\n(as + shown in triangles)\r\n</div>\r\n\r\n" + aE5_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: 1.6em; + line-height: 1.4em;\" >\r\nLet's pull the look together with some window + decorations!\r\n<br/><br/>\r\nHere is your original code for drawing a line + of napkins. Piece 4 lines together to make a pattern that goes around your + window frame.\r\n</div>\r\n\r\n" + aE6_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; line-height: + 1.4em;\" >\r\nThe guests are going to need something to sit on!\r\n<br/><br/>\r\nThe + artist has an idea to make some fun chairs. How many times do you need to + loop this to draw half of a circle?\r\n</div>" + aE7_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; line-height: + 1.4em;\" >\r\nHow about some streamers?\r\n<br/><br/>\r\nIf you create another + loop like this one, but turn left instead of right, what happens? \r\n\r\nCan + you repeat all of that to draw this wave?\r\n</div>" + aE8_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; line-height: + 1.4em;\" >\r\nThe artist wants to give picture frames as party favors!\r\n<br/><br/>\r\nLet's + loop the code from our streamers four times to create this frame. \r\n<br/><br/>We've + added a special block called `curvy corner` to give you fancy round corners!\r\n</div>" + aEfreeplay_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; + line-height: 1.4em;\" >\r\n<b>Free Play:</b>\r\nFor a final touch, we need + some ornaments to hang around the house.\r\n<br/><br/>\r\nCan you design a + decoration to spice up the party?\r\n</div>\r\n<br/>\r\n<h4>\r\n<details>\r\n<summary>Need + Ideas?</summary>\r\n<br/>\r\n<br/>\r\nTry making a tablecloth full of diamond + napkins! \r\n<img src=\"https://images.code.org/2c092ea5edbb33405c019110df3f5710-image-1466095499984.43.56.png\" + width=\"200px\"/> \r\n<hr/>\r\n<br/>\r\nMake an ornament! \r\n<img src=\"https://images.code.org/361d2ad667853418a040ec9383505169-image-1466096394561.56.12.png\" + width=\"200px\"/> \r\n<hr/>\r\n\r\n<br/>Make something completely new! \r\n<img + src=\"https://images.code.org/6809a1bd2a364ae7e0ff42745ec1fe1b-image-1466097871045.23.44.png\" + width=\"200px\"/> \r\n<hr/>\r\n\r\n\r\n</details>\r\n</h4>\r\n\r\n" + allthethings data blocks test_markdown_instruction: "Please sign in to test + applab levels (By design, applab levels only work if signed in. Normally, + we make people sign in, but this is only enforceable for a whole script and + would be annoying to do for the allthethings script)." + allthethings design mode elements_markdown_instruction: "Please sign in to + test applab levels (By design, applab levels only work if signed in. Normally, + we make people sign in, but this is only enforceable for a whole script and + would be annoying to do for the allthethings script).\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\nEnd + of instructions that are long." + allthethings level dataTables_markdown_instruction: "Please sign in to test + applab levels (By design, applab levels only work if signed in. Normally, + we make people sign in, but this is only enforceable for a whole script and + would be annoying to do for the allthethings script)." + allthethings_U3 - Simple Drawing - Rectangle Width and Height_markdown_instruction: "# + Drawing Rules\r\n\r\nSo what did you discover on the last level?\r\n\r\n* + What do each of the 4 openings control?\r\n\r\n\t* First Opening - controls + the **location of the rectangle from left to right** - we call this the **x + position**\r\n * Second Opening - controls the **location of the rectangle + from top to bottom** - we call this the **y position**\r\n * Third Opening + - controls the **width** of the rectangle\r\n * Fourth Opening - controls + the **height** of the rectangle\r\n\r\n* What is the size of the drawing area?\r\n\r\n\t* + Width - 400\r\n * Height - 400\r\n\r\n* So where is (0,0) or x = 0 and + y = 0?\r\n\r\n\t* The **upper left corner of the grid!**\r\n\r\n# Do This\r\n\r\nWe + have provided you with code for a rectangle that draws in the upper left corner + when you run the program. Using your new knowledge of the workspace and the + inputs for a rectangle:\r\n\r\n* **Change the width and height of the rectangle + so that it fills the whole drawing area**\r\n* **HINT:** Remember that the + rectangle block is `rect(x, y, width, height)` in that order" + allthethings_embed_video_markdown_instruction: "Siri is a digital assistant + built into Apple's iOS devices, including iPhones and iPads. Watch the advertisement + for Siri, below. \n\n<iframe width=\"637px\" height=\"375px\" src=\"https://www.youtube.com/embed/8ciagGASro0\" + frameborder=\"0\" allowfullscreen></iframe>\n\n<br/>\n__Reflect on the prompts + below:__ \n\n- What types of information does Siri respond to in the video?\n- + What do you think Siri is paying attention to in order to create these answers?\n" + allthethings_moviebot_markdown_instruction: "#Please sign in to test applab + levels (By design, applab levels only work if signed in. Normally, we make + people sign in, but this is only enforceable for a whole script and would + be annoying to do for the allthethings script).\n# Introduction to the Digital + Assistant\r\n\r\n__While digital assistants may seem like magic, they are + just elaborate computer programs that parse, or process, text__ looking for + combinations of words to make decisions about what to reply.\r\n\r\nOver the + next few lessons, __you're going to build up your own digital assistant that + responds \"intelligently\" to a user's question__, by making a decision about + what to reply based on the contents.\r\n\r\nYou'll now __explore a demo digital + assistant__, Movie Bot, that represents the kind of program that you'll build + up to. Try out some of the prompts below and also try your own. You'll quickly + find the limits of what this program can and can't do.\r\n\r\n# Do this\r\n__Run + Movie Bot. In the _'enter your question here'_ input, type each of the following + prompts and hit 'enter' __\r\n- 'help'\r\n- 'What is the best PG comedy + movie ever?'\r\n- 'What PG comedy movie should I watch next?'\r\n- 'Could + you please tell me the best romance movie?'\r\n- 'I waNT To WatCH a MovIE!!!'\r\n- + 'What is the capital of Kentucky?'\r\n- Play around! Ask more questions + of Movie Bot and make a prediction about what logic it's using to reply\r\n" + allthethings_template_backed1_markdown_instruction: "Backed by a template #1. + Please sign in to test applab levels (By design, applab levels only work if + signed in. Normally, we make people sign in, but this is only enforceable + for a whole script and would be annoying to do for the allthethings script). + " + allthethings_template_backed2_markdown_instruction: "Backed by a template #2. + Please sign in to test applab levels (By design, applab levels only work if + signed in. Normally, we make people sign in, but this is only enforceable + for a whole script and would be annoying to do for the allthethings script)." + artistDebugVideo1_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the + water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" + width=\"300\"/>\r\n" + artistLoopsK2_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nNow, use a `repeat` loop to draw this line + five times!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif\" + width=\"300\"/>\r\n" + artistLoopsK2gradek_artist_loops3_markdown_instruction: "<div style=\"color: + #7665a0; font-size: 1.6em; line-height: 1.4em;\" >\r\nNow, use a `repeat` + loop to draw this line five times!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif\" + width=\"300\"/>\r\n" + artistLoopsK3_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nDraw a line eight steps long. This will + become the land for our kingdom!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" + width=\"300\"/>\r\n" + artistLoopsK4_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nNow we need a castle with a draw bridge. Fix + the code so that the bridge lays straight instead of falling down.<br/><br/>\r\n</div>\r\n\r\n<img + src=\"https://images.code.org/84b93e1b9dad3ee52a46c767524d3558-image-1467935697224.gif\" + width=\"300\"/>\r\n" + artistLoopsK5_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nNow we need to fix the top of the castle. + Can you loop the code three times?<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/f418ccba20b7230baba1328143bd0092-image-1467935762464.gif\" + width=\"300\"/>\r\n" + artistLoopsK6_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nSomeone is stuck in the tower! Fix the + stairs to set them free.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/1efb95ca15f66b46145725769d3d279c-image-1467935856461.gif\" + width=\"300\"/>\r\n" + artistLoopsK7_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nThis tower is lovely, what is downstairs? + Build another staircase to find out!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/af040c27be11c3a639e18c440c8a047c-image-1467936046481.gif\" + width=\"300\"/>\r\n" + artistLoopsK8_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nWow! There's a garden over there! Help + fix these stairs so I can get to it.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/bf368872da36217b0d19261fc6b84bf6-image-1467936147116.gif\" + width=\"300\"/>\r\n" + artistLoopsK9_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** Lovely! Let's take a walk + around the garden.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/cb5646ef57f68b47fa6c2762253a7044-image-1467936260174.gif\" + width=\"300\"/>\r\n" + artistLoopsKA_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nThese stones are in the wrong place. Help + me move them so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" + width=\"300\"/>\r\n" + artistLoopsKB_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nLook! It's a theater. Help me set up + the chairs so we can all see the stage.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c4263306ebb0ad1d99fe6f200a790d0c-image-1467936424533.gif\" + width=\"300\"/>\r\n" + artistLoopsKFP_markdown_instruction: "Picture time! Use what you have learned + to draw a picture of what you think the Artist saw on stage.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + beeDebugVideo1_markdown_instruction: "Collect all of the nectar." + collector example_markdown_instruction: "Collect all the gold using the `collect` + block:\r\n\r\n<xml>\r\n <block type=\"collector_collect\"/></xml>" + collectorDebugVideo2_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe + blocks you need are already in the workspace, but not connected. \r\n\r\nPut + these blocks in order to collect all of the gold and solve the puzzle." + collectorSkinVideo1_markdown_instruction: "Move Laurel to the gold, then use + `collect` to pick it up.\r\n\r\nCollect one pile of gold to pass this level." + collectorSkinVideo2_markdown_instruction: "Move Laurel to the gold, then use + `collect` to pick it up.\r\n\r\nCollect one pile of gold to pass this level." + course2_playlab_stage17_11_markdown_instruction: "Create your own story. When + you're done, click Finish to let friends try your story on their phones.\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Who's + there?</strong> - Make characters appear with random images, so no one knows + who's showing up next.</li>\r\n <li><strong>Going on an Adventure</strong> + - Change the background, then have the characters talk about where they are + now. </li>\r\n <li><strong>Pinball</strong> - Make one character + move using the arrow keys (use `when up arrow`, `when down arrow` blocks), + then play random sounds when it collides with other characters on the screen. + </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + courseA_artist_loops10_markdown_instruction: "<div style=\"color: #7665a0; + font-size: 1.6em; line-height: 1.4em;\" >\r\nTime to head back to land. Help + me put down stones so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops11_markdown_instruction: "<div style=\"color: #7665a0; + font-size: 1.6em; line-height: 1.4em;\" >\r\nHelp me build steps to watch + the ship sail away.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/0dfa647dbc835fae09989a0fbfd798c7-image-1470871168220.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops12_markdown_instruction: "The artist saw something funny + in the distance. Draw what you think he saw.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + courseA_artist_loops2_markdown_instruction: "Help the artist draw this line + two times forward.\r\n\r\n![](https://images.code.org/7ddc7b43ef27197559c7defb0af56d03-image-1470776934855.gif)" + courseA_artist_loops3_markdown_instruction: "Our artist is trying to draw a + line five times, but can't get it right. Can you help?\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" + courseA_artist_loops4_markdown_instruction: "Now, use a `repeat` loop to draw + this line five times!\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" + courseA_artist_loops5_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nDraw a line seven steps long. This will + become our horizon.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops6_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nLet's put a nice hill in the back.<br/><br/>\r\n</div>\r\n\r\n<img + src=\"https://images.code.org/bbbd114642d829029fc3b0566a4437e3-image-1477107329933.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops7_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the + water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops8_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nWe need a ladder up to the boat.<br/>\r\n</div>\r\n<img + src=\"https://images.code.org/6e4dc767e55d11400f35c6680bbfe1e3-image-1470788284437.gif\" + width=\"300\"/>" + courseA_artist_loops9_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** The stairs down to the dock + are broken. Help me fix them.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/53c68133f897895caa0369b4afa3ec3b-image-1470789463684.gif\" + width=\"300\"/>\r\n" + courseA_collector_loops1_markdown_instruction: "**Free Play:** This is Laurel + the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag + blocks into the workspace and try to figure out how to get treasure. Get + at least one item to pass this level." + courseA_collector_loops2_markdown_instruction: "Move Laurel to the treasure, + then use `collect` to pick it up.\r\n\r\nCollect all three piles to pass this + level." + courseA_maze_seq1_markdown_instruction: "*\"Play with these blocks and try + to get me to the bad pig!\"*" + courseA_maze_seq10_markdown_instruction: "**Challenge:** Go around the TNT + to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/fa04813e9451e0bc070af50bc01d4a6b-image-1467932582838.gif\" + width=\"200px\"/>" + courseA_maze_seq11_markdown_instruction: "Time for a shorter puzzle! Move + one way, then another to get the bird to the pig.\r\n\r\n<img src=\"https://images.code.org/c2e2d7ea98a18d899c6de183ce6d82e1-image-1471385293382.gif\" + width=\"200px\"/>\r\n" + courseA_maze_seq12_markdown_instruction: "Get that pig!\r\n\r\n<img src=\"https://images.code.org/f908ff77eb81ee85d405a7ba66cc2986-image-1467933103380.gif\" + width=\"200px\"/>\r\n" + courseA_maze_seq2_markdown_instruction: "*\"A bug! Fix the code to get me to + the pig.\"*\r\n \r\n<img src=\"https://images.code.org/2843193ce2d869ad2f06f0f5b114c9d0-image-1467924400663.gif\" + width=\"200px\"/>" + courseA_maze_seq3_markdown_instruction: "*\"Fix the code to get me to the pig!\"*\r\n\r\n<img + src=\"https://images.code.org/629cddc754f9ad02929f06fc68462e4d-image-1467924800613.gif\" + width=\"200\"/>" + courseA_maze_seq4_markdown_instruction: "*\"Something is not quite right.\"* + \r\n\r\nREMOVE a block to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/dd6d92233199ee0f524caa4051b99275-image-1467920800577.gif\" + width=\"200px\"/>" + courseA_maze_seq5_markdown_instruction: "Try this one yourself from the beginning.\r\n\r\n<img + src=\"https://images.code.org/43001078c4df6feea1a6edf025192d85-image-1467929743355.gif\" + width=\"200px\"/>" + courseA_maze_seq6_markdown_instruction: "Move one way, then another to get + the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/0b324bc0f684f7a22171acd8b38c8d9f-image-1467931807767.gif\" + width=\"200px\"/>" + courseA_maze_seq7_markdown_instruction: "Figure out what is missing and then + add blocks to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/b9803e12911694d8bb18bd55304f85d5-image-1467932006704.gif\" + width=\"200px\"/>" + courseA_maze_seq8_markdown_instruction: "Solve this level and get the bird + to the pig!\r\n\r\n<img src=\"https://images.code.org/1eb9139e2887083dc80b98d9aeb3bef2-image-1467932105884.gif\" + width=\"200px\"/>" + courseA_maze_seq9_markdown_instruction: "**Challenge:** Debug this level by + adding blocks to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/810d7189bcd0767d37ea82319b4c678c-image-1467932445247.gif\" + width=\"200px\"/>" + courseA_playLab_events3_markdown_instruction: "Help Jorge the Dog get moving + by connecting the ![](https://images.code.org/b3d6215901969328333d6393f8101c5b-image-1478142333199.png) + block to the ![](https://images.code.org/4f2130b2a3053695414a02c3d39ef864-image-1478143461271.png) + event block that is already in the workspace." + courseA_playLab_events4_markdown_instruction: "Now, get Jorge to move right + when the ![](https://images.code.org/b99365eb23280f158e6ef570fe1c8a76-image-1478145132820.png) + button is clicked." + courseA_playLab_events5_markdown_instruction: "Add events to have Jorge move + up and down when the ![](https://images.code.org/379493b95d158b273f1424538b1c635a-image-1478145402316.png) + and ![](https://images.code.org/f490d78efd81c21ab74286aefe7af097-image-1478145385132.png) + buttons are pressed." + courseB_artist_loops10_markdown_instruction: "Use what you have learned to + draw a picture of what you think the artist saw when he got home.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + courseB_artist_loops6_markdown_instruction: "Behind the bushes there is a beautiful + vine full of flowers. Can you climb the vine and see where it goes?" + courseB_artist_loops7_markdown_instruction: "**Challenge:** It's a hidden + garden! Let's walk around." + courseB_collector_loops1_markdown_instruction: "**Free Play:** This is Laurel + the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag + blocks into the workspace and try to figure out how to get treasure. Get + at least one item to pass this level." + courseB_collector_loops2_markdown_instruction: "Move Laurel to the treasure, + then use `collect` to pick it up.\r\n\r\nCollect all four piles to pass this + level." + courseB_collector_loops3_markdown_instruction: "How can Laurel collect all + five piles of treasure using only one `E -->` block?" + courseB_collector_loops3_predict1_markdown_instruction: "How can Laurel collect + all five piles of gold using only one `E -->` block?" + courseB_collector_prog3_markdown_instruction: "How can Laurel collect all five + piles of gold using only one `E -->` block?" + courseB_maze_seq9_markdown_instruction: "**Challenge:** Move around the TNT + to get the bird to the pig." + courseB_maze_seqCold_markdown_instruction: "**Challenge:** Debug this level + by adding blocks to get the bird to the pig!" + courseB_playLab_events1_markdown_instruction: "This game is called \"Play Lab\". \r\n\r\n<br/>\r\nSee + if you can figure out what each block does." + courseB_playlab_events3_markdown_instruction: "Use an event to make Daisy the + Dragon switch to a random ![](https://images.code.org/c365e065614fea592612264f33624c09-image-1475698889081.17.53.png) + mood when you click on her.\r\n\r\n" + courseB_playlab_events4_markdown_instruction: "Knight time! \r\n\r\nAdd an + event so that the knight moves toward the dragon when the left arrow is clicked." + courseB_playlab_events6_markdown_instruction: "Help your knight get all of + the flags!\r\n\r\nTo do this, you'll need to add events to help the knight + move up and down." + courseB_playlab_events7_markdown_instruction: "Make this game fun by setting + the knight to vanish when he runs into the dragon! \r\n\r\nPlay a sound when + they collide to make it feel more real." + courseC_PlayLab_events8_markdown_instruction: "Can you have Waddles (actor + 1) say \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen + you're done, play the game to make that happen.\r\n\r\n![](https://images.code.org/a634f249021651f60a1acf37bf78d07d-image-1475342557950.gif)" + courseC_artist_prog1_markdown_instruction: "*\"Hi, I'm an artist. You can + write code to make me draw almost anything.\"*\r\n\r\nPlay with the blocks + in the toolbox to see what they do!" + courseC_artist_prog2_markdown_instruction: "*\"Let's make a cage for my pet + monster!\"*\r\n\r\nDrag blocks onto the screen to have the artist draw over + the grey lines in the picture. \r\n(Each line is 100 pixels long)" + courseC_artist_prog3_markdown_instruction: "*\"This spaceship needs a window!\"*\r\n\r\nEach + side of the inner square is 100 pixels and all of the angles are 90 degrees." + courseC_artist_prog4_markdown_instruction: "*\"Oh no! Starla's pet alien + just flew away! Let's help the spacewoman!\"*\r\n\r\nFinish Starla's rocket + so she can chase her pet. \r\n(Each side of the triangle is 100 pixels long + and has 120 degree outer angles.)" + courseC_artist_prog5_markdown_instruction: "*\"Maybe we should make a tag for + each of our pets in case they get lost!\"*\r\n\r\nFinish this tag by drawing + a rectangle around the outside. \r\n(The long sides are 200 pixels each and + the short sides are each 100 pixels)" + courseC_artist_prog6_markdown_instruction: "*\"Now a tag for Belle!\"*\r\n\r\nDraw + this diamond with 200 pixel sides." + courseC_artist_prog7_markdown_instruction: "**Challenge:** This tag is a special + one! \r\n\r\nCan you figure out how to draw the outline? \r\n(The long side + is 150 pixels and each of the short sides are 75 pixels.)" + courseC_artist_prog8_markdown_instruction: "One more tag. This is a triangle + for Pi. \r\n(Each side is 150 pixels)" + courseC_collector_prog1_markdown_instruction: "**Free Play:** This is Laurel + the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag + blocks into the workspace and try to figure out how to get treasure. Get + at least one item to pass this level." + courseC_collector_prog2_markdown_instruction: "Move Laurel to the treasure, + then use `collect` to pick it up." + courseC_collector_prog3_markdown_instruction: "*\"Sequence matters!\"* \r\n\r\nThe + blocks you need are already in the workspace, but not connected. \r\nOrder + these blocks to collect the treasure and solve the puzzle." + courseC_collector_prog4_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe + blocks you need are already in the workspace, but not connected. \r\n\r\nPut + these blocks in order to collect all of the treasure and solve the puzzle." + courseC_collector_prog5_markdown_instruction: "*\"Help me collect each bit + of treasure!\"*\r\n\r\nThese blocks are in the wrong order. Can you fix them?" + courseC_collector_prog6_markdown_instruction: "*\"Help me collect all of the + treasure!\"*\r\n\r\nThese blocks are in the wrong order. Reorder them to collect + all of the treasure." + courseC_collector_prog7_markdown_instruction: "**Challenge:** *\"What is going + on here?\"*\r\n\r\nEven if we put these in the right order, there will still + be some missing. \r\nUse blocks from the toolbox to collect all of the treasure." + courseC_collector_prog8_markdown_instruction: "*\"Keep up the good work! Help + me collect all of the treasure.\"*" + courseC_collector_prog9_markdown_instruction: "*\"Let's get all of the treasure!\"*" + courseC_collector_progA_markdown_instruction: "Help Laurel collect all of the + treasure." + courseC_collector_progB_markdown_instruction: "You're almost done! \r\n\r\nCollect + as many coins as you can to finish the stage!" + courseC_harvester_loops1_markdown_instruction: "Loops can be used to repeat + more than moves. \r\n\r\nUse loops to collect all of the pumpkins." + courseC_harvester_loops10_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops11_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops2_markdown_instruction: "Can you combine two different + loops to move toward the pumpkins, then collect them all?" + courseC_harvester_loops3_markdown_instruction: "Collect all of the pumpkins." + courseC_harvester_loops4_markdown_instruction: "Now there is corn growing, + too!\r\n\r\nCollect all of the corn and all of the pumpkins." + courseC_harvester_loops5_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops6_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops7_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops8_markdown_instruction: "**Challenge:** Collect all + of the corn and all of the pumpkins.\r\n\r\nYou can complete this challenge + any way you want, but it will either take a lot of work or a lot of thinking!" + courseC_harvester_loops9_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_maze_debugging1_markdown_instruction: "This code isn't quite right! \r\n\r\nFix + the code to help get Skrat get to the acorn." + courseC_maze_debugging3_markdown_instruction: "Something is not quite right. + \r\n\r\nRemove blocks to get Skrat to the acorn!" + courseC_maze_loops2_markdown_instruction: "Suddenly, a magical block appears! \r\nWith + the `repeat` block, you can loop code over and over.\r\n\r\nCan you get the + bird to the pig by creating a loop that uses only one `move forward` block + inside of a `repeat`?" + courseC_maze_loops2_predict1_markdown_instruction: "Suddenly, a magical block + appears! \r\nWith the `repeat` block, you can loop code over and over.\r\n\r\nCan + you get the bird to the pig by creating a loop that uses only one `move forward` + block inside of a `repeat`?" + courseC_maze_loops3_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nSolve + this puzzle by creating a loop!" + courseC_maze_loops4_markdown_instruction: "In this puzzle, two `repeat` loops + will help you get the bird to the pig with the fewest number of blocks!" + courseC_maze_loops5_markdown_instruction: "*\"Get me to the pig as quickly + as possible!\"*" + courseC_maze_loops6_markdown_instruction: "*\"This pig is ruffling my feathers!\"*\r\n\r\nLoops + even work with more than one block inside! Can you loop this sequence?" + courseC_maze_loops7_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nUse + what you learned in other puzzles!" + courseC_maze_loops8_markdown_instruction: "**Challenge:** Combine ideas from + the last few puzzles to complete this level." + courseC_maze_programming1_markdown_instruction: "For this puzzle, drag all + of the blocks together and click \"Run\" to watch it go!" + courseC_maze_programming2_markdown_instruction: "Drag an extra `move forward` + block out of the toolbox to finish your code." + courseC_maze_programming3_markdown_instruction: "*\"This pig is ruffling my + feathers.\"*\r\n\r\nThere is one extra block that is going to cause the bird + to crash. \r\nThrow it away by dragging it back to the toolbox." + courseC_maze_programming4_markdown_instruction: "*\"Trace the path and lead + me to the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" + courseC_maze_programming5_markdown_instruction: "*\"Follow this path to get + me to the pig!\"*\r\n\r\nAvoid the TNT." + courseC_maze_programming6_markdown_instruction: "*\"Keep calm and help me find + the bad pig. Otherwise I might get angry!\"*\r\n\r\nGet the bird to the pig + and avoid the TNT." + courseC_maze_programming7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** + This code has a lot of bugs. You'll need to remove some blocks and add others." + courseC_maze_programming8_markdown_instruction: "*\"Keep calm and help me find + the bad pig.\"*" + courseC_maze_programming8_predict1_markdown_instruction: "*\"Keep calm and + help me find the bad pig.\"*" + courseC_maze_programming9_markdown_instruction: "*\"Now, help me sneak up on + the pig any way you want to!\"*" + courseC_puppy_loops8_markdown_instruction: "**Challenge:** Combine ideas from + the last few puzzles to complete this level." + courseC_puppy_loops8courseC_maze_loops8_markdown_instruction: "**Challenge:** + Combine ideas from the last few puzzles to complete this level." + courseD_artist_binary1_markdown_instruction: "We've provided you with a grid + of \"pixels\" that you can walk through and make designs by turning on only + certain squares.\r\n\r\nUse the blocks below to have the artist draw \"01010101\" + in binary in the first row." + courseD_artist_binary2_markdown_instruction: "Here's a function that takes + a binary string of 1's and 0's and instructs the artist to follow them from + left to right, top to bottom. \r\n<hr/>\r\nThe artist will fill-in the squares + when it sees a 1 and ignore the square when it sees a 0. \r\n<hr/>\r\n**Run + this code to see how the artist uses binary to draw this pattern.**" + courseD_artist_functions10_markdown_instruction: "This time, use lines of 8 + hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the 6 + times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + courseD_artist_functions2_markdown_instruction: "Functions let you define new + blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a + function called `draw a square`. This time, use the `draw a square` function + to create the glasses. \r\n<hr/>\r\n\r\nThe squares are 75 pixels apart." + courseD_artist_functions3_markdown_instruction: "We will come back to functions + shortly. Let's take a break to practice making this star. \r\n\r\nYou can + make this drawing by adding a repeat block." + courseD_artist_functions4_markdown_instruction: "Now that you can draw a star, + try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels long\r\n- + Turn 45 degrees between branches\r\n- Jump 100 pixels between each star" + courseD_artist_functions5_markdown_instruction: "When is drawing three stars + harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw + only those three stars to finish this puzzle." + courseD_artist_functions6_markdown_instruction: "You are doing great! \r\n\r\nMake + this window by drawing a square, then turning 90 degrees before drawing another, + and so on." + courseD_artist_functions7_markdown_instruction: "Let's take the code for the + window and add it to function `draw a window`. Now, we can call the function + any time we need to draw a window without having to write the code again. + \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" + width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw + a window` and calling it five times. Watch out for the door!\r\n\r\n- The + top windows are 50 pixels away from each other. \r\n- The bottom windows + are 100 pixels below the top set." + courseD_artist_functions8_markdown_instruction: "**Challenge:** Create as many + functions as you think you need to make this drawing of 50 pixel squares." + courseD_artist_functions9_markdown_instruction: "Create this image using only + the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + courseD_artist_nestedLoops1a_markdown_instruction: "Now loop the triangle 6 + times. \r\n\r\nAfter each triangle, you'll need to turn 60 degrees before + drawing the next. " + courseD_artist_nestedLoops2_markdown_instruction: "This time, complete the + puzzle with the fewest number of blocks possible.\r\n\r\nAfter each triangle, + you'll need to turn 60 degrees before drawing the next.\r\nSee how much easier + this is with **nested loops**?" + courseD_artist_nestedLoops4_markdown_instruction: "Great! Do the same thing + with these circles. \r\n\r\n- Each circle is made by moving 1 pixel before + turning 1 degree, 360 times.\r\n- Each circle begins just 50 pixels from where + the last one ended" + courseD_artist_nestedLoops5_markdown_instruction: "What happens if you also + turn 90 degrees between circles?\r\n\r\n(To get this image, you still need + to jump 50 pixels between circles)" + courseD_artist_nestedLoops7_markdown_instruction: "Use what you've learned + to make this drawing.\r\n\r\n- The squares each have 100 pixel sides and 90 + degree angles\r\n- You will need to turn 60 degrees between each square" + courseD_artist_nestedLoops8_markdown_instruction: "Using what you have learned + in the last couple of puzzles, build this image from the beginning.\r\n\r\n- + Each hexagon has 50 pixel sides and 60 degree angles" + courseD_artist_nestedLoops9_markdown_instruction: "**Challenge:** Can you figure + out how to make a picture like this?\r\n\r\n- Both shapes have 50 pixel sides" + courseD_artist_nestedLoops9_predict1_markdown_instruction: "**Challenge:** + Can you figure out how to make a picture like this?\r\n\r\n- Both shapes have + 50 pixel sides" + courseD_artist_nestedLoopsFP_markdown_instruction: "Now it's your turn. Take + the skills you have learned and make something that you love!\r\n\r\nNeed + an idea? Try to make one of these:\r\n\r\n<img src=\"https://images.code.org/9257cbf61f238f5a749a949059731934-image-1478732674615.02.25.png\" + width=\"200px\"/><img src=\"https://images.code.org/31a85d4e5be5209240195d34b17a177b-image-1478732674613.32.53.png\" + width=\"200px\"/><img src=\"https://images.code.org/f654f1512860c6c8cf6795c961a8959c-image-1478732674616.02.58.png\" + width=\"200px\"/>\r\n" + courseD_artist_ramp11_markdown_instruction: "Great! Now let's make a square + using Artist! The blocks are a little different, but the idea is the same.\r\n<hr/>\r\nEach + side of the square has a length of 200 pixels, and you will need to turn 90 + degrees to make each angle." + courseD_artist_ramp12_markdown_instruction: "Use what you've learned to draw + this triangle inside of a square.\r\n<hr/>\r\nThe sides are each 200 pixels + long. You will need to turn 90 degrees to make the square and 120 degrees + to make the triangle." + courseD_bee_conditionals1_markdown_instruction: "*\"This cloud is blocking + my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. If there's + a flower, get nectar." + courseD_bee_conditionals10_markdown_instruction: "Conditionals can be helpful, + even when you know exactly what is in each spot!\r\n\r\nCollect all of the + nectar and make all of the honey." + courseD_bee_conditionals1_predict1_markdown_instruction: "*\"This cloud is + blocking my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. + If there's a flower, get nectar." + courseD_bee_conditionals2_markdown_instruction: "More clouds! \r\n\r\nCheck + underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + courseD_bee_conditionals3_markdown_instruction: "You can only collect nectar + from flowers, but you can check any space to see if there is a flower." + courseD_bee_conditionals4_markdown_instruction: "In this puzzle, we know that + every flower has exactly one nectar, but the flowers aren't spaced evenly.\r\n\r\nGet + all of the nectar using as few blocks as possible." + courseD_bee_conditionals6_markdown_instruction: "*\"Now I just want to make + honey.\"*\r\n\r\nSome of these clouds might have honeycombs under them. Be + sure to check if a honeycomb is hiding behind each cloud!" + courseD_bee_conditionals7_markdown_instruction: "Sometimes a cloud covers a + flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block to + collect nectar at flowers and make honey at honeycomb." + courseD_bee_conditionals7_predict2_markdown_instruction: "Sometimes a cloud + covers a flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` + block to collect nectar at flowers and make honey at honeycomb." + courseD_bee_conditionals8_markdown_instruction: "**Challenge:** There will + be either a flower or a honeycomb under each of those clouds!\r\n\r\nCollect + nectar if there is a flower.\r\nOtherwise, make honey (because there is a + honeycomb)." + courseD_bee_conditionals9_markdown_instruction: "Collect all of the nectar + or make all the honey. You can only collect nectar from flowers and make honey + from honeycombs. Check any space to see if there is a flower or honeycomb." + courseD_bee_debugging1_markdown_instruction: "*\"These blocks are really bugging + me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." + courseD_bee_debugging2_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix + the error(s) to collect all of the nectar." + courseD_bee_debugging3_markdown_instruction: "*\"These blocks are really bugging + me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of + the honey." + courseD_bee_debugging4_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix + the error(s) to make all of the honey." + courseD_bee_debugging5_markdown_instruction: "**Challenge:** *\"This puzzle + is making me loopy!\"*\r\n\r\nAll of the commands that you need are already + here...now use your debugging skills to figure out how to solve this puzzle." + courseD_bee_debugging6_markdown_instruction: "**Challenge:** Fix the errors + to collect all of the nectar and make all of the honey." + courseD_bee_debugging7_markdown_instruction: "*\"Such a sticky situation!\"*\r\n\r\nHelp + the bee find his mistakes." + courseD_bee_debugging8_markdown_instruction: "*\"So many lovely flowers!\"*\r\n\r\nHelp + the bee fix the code to get all the nectar." + courseD_bee_debugging9_markdown_instruction: "*\"It's nectar-topia!\"*\r\n\r\nHelp + the bee fix the code to get all the nectar." + courseD_bee_nestedLoops1_markdown_instruction: "*\"This is going to **BEE** + great!\"**\r\n\r\nHelp the bee collect all of the nectar." + courseD_bee_nestedLoops2_markdown_instruction: "This time, help the bee collect + all of the nectar using as few blocks as possible." + courseD_bee_nestedLoops2_predict1_markdown_instruction: "This time, help the + bee collect all of the nectar using as few blocks as possible." + courseD_bee_nestedLoops3_markdown_instruction: "*\"Can you BEE-lieve all of + these flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " + courseD_bee_nestedLoops5_markdown_instruction: "Collect all of the nectar from + each flower and make honey at the honeycomb. " + courseD_bee_nestedLoops6_markdown_instruction: "Make all of the nectar." + courseD_bee_nestedLoops7_markdown_instruction: "**Challenge:** Figure out how + to get all of the nectar using only the blocks available." + courseD_bee_nestedLoops8_markdown_instruction: "Collect all of the nectar from + each flower and make honey at the honeycomb. " + courseD_bee_nestedLoops9_markdown_instruction: "Make all of the honey." + courseD_bee_nestedLoops9_predict2_markdown_instruction: "Make all of the honey." + courseD_collector_ramp10_markdown_instruction: "Take the same path as before, + but this time collect all of the treasure as you find it.\r\n" + courseD_collector_ramp8_markdown_instruction: "This puzzle is a lot like the + last one, but now it stars Laurel the Adventurer!\r\n<hr/>\r\n\r\nTake the + same path as before, but this time, use a repeat loop to collect treasure + when you get to it.\r\n" + courseD_collector_ramp9_markdown_instruction: "Take the same path as before, + but this time collect all of the treasure as you find it.\r\n" + courseD_debugging_1_markdown_instruction: "*\"These blocks are really bugging + me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." + courseD_debugging_2_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix + the error(s) to collect all of the nectar." + courseD_debugging_3_markdown_instruction: "*\"These blocks are really bugging + me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of + the honey." + courseD_debugging_4_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix + the error(s) to make all of the honey." + courseD_debugging_5_markdown_instruction: "**Challenge:** *\"This puzzle is + making me loopy!\"*\r\n\r\nAll of the commands that you need are already here...now + use your debugging skills to figure out how to solve this puzzle." + courseD_debugging_6_markdown_instruction: "**Challenge:** Fix the errors to + collect all of the nectar and make all of the honey." + courseD_farmer_condLoops1_markdown_instruction: "*\"Corn you help me harvest + today?\"*\r\n\r\nUse conditionals to make sure that you pick all of the corn, + but don't disturb the stalks where nothing is growing yet." + courseD_farmer_condLoops2_markdown_instruction: "*\"Lettuce collect both crops + from this row!\"*\r\n\r\nHelp the farmer collect both corn and lettuce from + the field." + courseD_farmer_condLoops4_markdown_instruction: "*\"Gosh! Now the crops are + growing in clusters!\"* \r\n\r\nHelp the farmer pick all of the lettuce in + each cluster before moving on to the next bunch." + courseD_farmer_condLoops5_markdown_instruction: "*\"What a bountiful crop!\"*\r\n\r\nThis + field has clusters of corn, lettuce, and pumpkins all growing together. Can + you collect them all?" + courseD_farmer_condLoops6_markdown_instruction: "*\"Let's take this one step + further!\"*\r\n\r\nCan you figure out how to pick the pumpkin? Make sure + to collect all of the corn along the way!" + courseD_farmer_condLoops7_markdown_instruction: "**Challenge:** Collect all + of the corn and lettuce, then pick the pumpkin." + courseD_farmer_condLoops8_markdown_instruction: "Collect all of the corn and + lettuce, then pick the pumpkin." + courseD_farmer_condLoops9_markdown_instruction: "Collect all of the corn and + lettuce, then pick the pumpkin." + courseD_farmer_condLoops9_predict1_markdown_instruction: "Collect all of the + corn and lettuce, then pick the pumpkin." + courseD_farmer_conditionals1_markdown_instruction: "*\"Hi, I'm a farmer. I + need your help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove + to the pile of dirt and use the `remove` block to remove it." + courseD_farmer_conditionals3_markdown_instruction: "*\"Move to the pile of + dirt and tell me how many shovelfuls to remove.\"*\r\n\r\nUse as few blocks + as possible to solve this puzzle." + courseD_farmer_conditionals4_markdown_instruction: "*\"I don't know how much + dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using + a `while` loop." + courseD_farmer_conditionals6_markdown_instruction: "Look at all of those holes! Each + one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop + to easily fill them all!" + courseD_farmer_conditionals8_markdown_instruction: "**Challenge:** Fill all + of these holes using as few blocks as possible. " + courseD_farmer_while1_markdown_instruction: "*\"Hi, I'm a farmer. I need your + help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove + to the pile of dirt and use the `remove` block to remove it." + courseD_farmer_while3_markdown_instruction: "*\"Move to the pile of dirt and + tell me how many shovelfuls to remove.\"*\r\n\r\nUse as few blocks as possible + to solve this puzzle." + courseD_farmer_while4_markdown_instruction: "*\"I don't know how much dirt + is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using a + `while` loop." + courseD_farmer_while4_predict1_markdown_instruction: "*\"I don't know how + much dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile + using a `while` loop." + courseD_farmer_while6_markdown_instruction: "Look at all of those holes! Each + one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop + to easily fill them all!" + courseD_farmer_while8_markdown_instruction: "**Challenge:** Fill all of these + holes using as few blocks as possible. " + courseD_maze_nestedLoops3_markdown_instruction: "*\"Zombie hungry!\"*\r\n\r\nGet + the zombie to the sunflower using the fewest number of blocks possible." + courseD_maze_nestedLoops4_markdown_instruction: "Get the zombie to the sunflower + using the fewest blocks possible! " + courseD_maze_nestedLoops6_markdown_instruction: "*\"Must eat sunflower!\"*\r\n\r\nGet + the zombie to the sunflower using only the blocks available." + courseD_maze_ramp1_markdown_instruction: "For this puzzle, drag all of the + blocks together and click \"Run\" to watch it go!" + courseD_maze_ramp2_markdown_instruction: "Drag an extra `move forward` block + out of the toolbox to finish your code." + courseD_maze_ramp3_markdown_instruction: "*\"This pig is ruffling my feathers.\"*\r\n\r\nThere + is one extra block that is going to cause the bird to crash. \r\nThrow it + away by dragging it back to the toolbox." + courseD_maze_ramp4_markdown_instruction: "*\"Trace the path and lead me to + the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" + courseD_maze_ramp5_markdown_instruction: "*\"Follow this path to get me to + the pig!\"*\r\n\r\nAvoid the TNT." + courseD_maze_ramp6_markdown_instruction: "*\"Keep calm and help me find the + bad pig. Otherwise I might get angry!\"*\r\n\r\nWhen you have several blocks + in a row, try moving them inside of a `repeat` loop. This will do the same + thing with less code!" + courseD_maze_ramp7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** + Use what you've learned to get the bird to the pig!" + courseD_maze_until10_markdown_instruction: "Help the zombie get to the sunflower." + courseD_maze_until10_predict2_markdown_instruction: "Help the zombie get to + the sunflower." + courseD_maze_until2_markdown_instruction: "Now, use the `repeat until` loop + to do the same thing without specifying how many times to move forward and + turn." + courseD_maze_until4_markdown_instruction: "*\"Dear person. Me zombie. Me hungry. + Must... get... to sunflower...\"*\r\n\r\nCan you get the zombie to the sunflower + using only the blocks that are available?" + courseD_maze_until5_markdown_instruction: "Use the `if` block to help the zombie + decide when to turn, then get the zombie to the sunflower." + courseD_maze_until6_markdown_instruction: "Help the zombie get to the sunflower." + courseD_maze_until7_markdown_instruction: "Help the zombie get to the sunflower." + courseD_maze_until8_markdown_instruction: "Help the zombie get to the sunflower." + courseD_maze_until9_markdown_instruction: "**Challenge:** Avoid the chompers + and help the zombie get to the sunflower." + courseD_playLab_cond1_markdown_instruction: "To start our game, Pirate Pegleg + (actor 1) needs to be able to get around in all directions. Connect the + blocks to the correct events to get Pegleg moving.\r\n\r\nGet Pegleg to the + dragon to solve this puzzle." + courseD_playLab_cond2_markdown_instruction: "Time to add points! Give Pegleg + (actor 1) a point when he makes it to the dragon. " + courseD_playLab_cond3_markdown_instruction: "It's time to use what we've + learned about conditionals to make this game amazing. This challenge has two + parts:\r\n\r\n 1) Use a `repeat forever` loop to make the dragon (actor 2) + change between random emotions every second. \r\n \r\n 2) Add code so that + when Pegleg gets to the dragon, he gets two points *if* the dragon is happy. + Otherwise, he should get only one point added to his score." + courseD_playLab_cond4_markdown_instruction: "This is about to get interesting!\r\n\r\nAdd + some code so that the ninja (actor 3) starts chasing Pegleg as soon as the + game begins. End the game as a loss if the ninja catches him." + courseD_playLab_cond5_markdown_instruction: "Now we need a way to win.\r\n\r\nAdd + a `repeat forever` loop that continuously checks **if** the score is greater + than 5, then ends the game as a **win** when it is." + courseD_playLab_cond6_markdown_instruction: "Wow, this game is hard to win!\r\n\r\nLet's + customize this game to make it more fun. This challenge has three parts:\r\n<hr/>\r\n\r\n1) Slow + the ninja down before you set him to chase the pirate. \r\n\r\n2) Use a + `repeat forever` loop to check to see if the pirate is in the \"safe zone\" + beneath the line of octopuses (greater than 225 pixels down). If he is, set + the ninja to **flee** the pirate. Otherwise, set the ninja to **chase** the + pirate. \r\n\r\n3) We don't want the pirate to stay in the \"safe zone\" + too long! Add code to the `if` statement above so that if the pirate is in + the safe zone, the program will wait one second, then deduct a point as long + as he stays beneath the octopus line." + courseD_playLab_cond6cloneForTest_markdown_instruction: "Can we make this work?" + courseE_artist_concept1_markdown_instruction: "Recreate this image. \r\n\r\n- + The hexagons have sides of 50 pixels\r\n- The hexagons are 100 pixels apart\r\n- + The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." + courseE_artist_concept4_markdown_instruction: "Recreate this drawing using + 13 blocks or fewer." + courseE_artist_functions1_markdown_instruction: "*\"Me zombie artist. Me love + drawing!\"*\r\n\r\nHelp the zombie draw glasses using squares with sides of + 100 pixels. \r\nThe bridge between the glasses is 75 pixels long.\r\n\r\n" + courseE_artist_functions10_markdown_instruction: "This time, use lines of 8 + hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the side + 6 times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + courseE_artist_functions2_markdown_instruction: "Functions let you define new + blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a + function called `draw a square`. This time, use the `draw a square` function + to create the glasses. \r\n<hr/>\r\n\r\nThe squares are 75 pixels apart." + courseE_artist_functions3_markdown_instruction: "We will come back to functions + shortly. Let's take a break to practice making this star. \r\n\r\nYou can + make this drawing by adding a repeat block." + courseE_artist_functions4_markdown_instruction: "Now that you can draw a star, + try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels long\r\n- + Turn 45 degrees between branches\r\n- Jump 100 pixels between each star" + courseE_artist_functions5_markdown_instruction: "When is drawing three stars + harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw + only those three stars to finish this puzzle." + courseE_artist_functions6_markdown_instruction: "You are doing great! \r\n\r\nMake + this window by drawing a square, then turning 90 degrees before drawing another, + and so on." + courseE_artist_functions7_markdown_instruction: "Let's take the code for the + window and add it to function `draw a window`. Now, we can call the function + any time we need to draw a window without having to write the code again. + \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" + width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw + a window` and calling it five times. Watch out for the door!\r\n\r\n- The + top windows are 50 pixels away from each other. \r\n- The bottom windows + are 100 pixels below the top set." + courseE_artist_functions8_markdown_instruction: "**Challenge:** Did you know + that you can call functions from *inside* other functions?!\r\n\r\nCreate + as many functions as you think you need to make this drawing of 50 pixel squares." + courseE_artist_functions9_markdown_instruction: "Create this image using only + the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + courseE_artist_functions_predict1_markdown_instruction: "Here is a puzzle that + uses a function that we have defined. \r\n" + courseE_artist_ramp11_markdown_instruction: "Great! Now let's make a square + using Artist! The blocks are a little different, but the idea is the same.\r\n<hr/>\r\nEach + side of the square has a length of 200 pixels, and you will need to turn 90 + degrees to make each angle." + courseE_artist_ramp12_markdown_instruction: "Use what you've learned to draw + this triangle inside of a square.\r\n<hr/>\r\nThe sides are each 200 pixels + long. You will need to turn 90 degrees to make the square and 120 degrees + to make the triangle." + courseE_bee_concept1_markdown_instruction: "*\"Can you BEE-lieve all of these + flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " + courseE_bee_concept5_markdown_instruction: "Can you help the bee collect the + nectar from the flowers? \r\n\r\nYou can only collect nectar from flowers, + but you can check any space to see if there is a flower." + courseE_bee_functions10_markdown_instruction: "*\"Show me the HONEY!\"*\r\n\r\nSolve + this function by creating a function to turn, move forward and make all of + the honey, then return the bee to where it started and turn back." + courseE_bee_functions2_markdown_instruction: "Functions are blocks of code + that perform a task. \r\n\r\nUse the `get 2 nectar` function to collect the + nectar from each flower." + courseE_bee_functions3_markdown_instruction: "Build the `get 5` function to + use in this puzzle." + courseE_bee_functions4_markdown_instruction: "The `move and get nectar` function + turns the bee, collects nectar, and then returns the bee to where it started. \r\n\r\nUse + the `move and get nectar` function to collect all of the nectar." + courseE_bee_functions8_markdown_instruction: "**Challenge:** These flowers + can have a different amount of nectar each time you run the puzzle. \r\n\r\nCreate + a function that collects all of the nectar from each flower." + courseE_collector_ramp10_markdown_instruction: "Take the same path as before, + but this time collect all of the treasure as you find it.\r\n" + courseE_collector_ramp8_markdown_instruction: "This puzzle is a lot like the + last one, but now it stars Laurel the Adventurer!\r\n<hr/>\r\n\r\nTake the + same path as before, but this time, use a repeat loop to collect treasure + when you get to it.\r\n" + courseE_collector_ramp9_markdown_instruction: "Take the same path as before, + but this time collect all of the treasure as you find it.\r\n" + courseE_farmer_concept4_markdown_instruction: "Now let's go one level deeper! + We've nested that whole block of code into another loop, but you need to + get the artist back in place to draw the next line. Which of these code blocks + can you place at the end of the outermost loop to draw the whole grid?" + courseE_farmer_functions1_markdown_instruction: "*\"Have we met before? I'm + the farmer!\"*\r\n\r\nHelp the farmer get to the pumpkin and pick it." + courseE_farmer_functions10b_markdown_instruction: "Figure out which function + to use and which one to delete, then solve this puzzle!" + courseE_farmer_functions11_predict_markdown_instruction: "Figure out which + function to use and which one to delete, then solve this puzzle!" + courseE_farmer_functions1a_markdown_instruction: "*\"Oooh, veggies are cropping + up everywhere!\"*\r\n\r\nNow help the farmer pick the corn, lettuce, **and** + pumpkin." + courseE_farmer_functions2a_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nWe're + going to check lots of squares for crops in the next few puzzles. Let's + move everything into a function to make it easier." + courseE_farmer_functions2aALT_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nWe're + going to check lots of squares for crops in the next few puzzles. Let's + move everything into a function to make it easier." + courseE_farmer_functions2b_markdown_instruction: "Help the farmer pick the + corn, lettuce, and pumpkin." + courseE_farmer_functions3b_markdown_instruction: "*\"Oooh, veggies are cropping + up everywhere!\"*\r\n\r\nNow help the farmer pick the corn, lettuce, **and** + pumpkin." + courseE_farmer_functions3c_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nIt + seems silly to write that much code twice. Which set of blocks helps the + farmer check for produce and pick it when it is available? Drag that code + into a function, then call your function from inside the `while path ahead` + loops (after the `move forward` block)." + courseE_farmer_functions4b_markdown_instruction: "Use your new function to + solve this puzzle." + courseE_farmer_functions5b_markdown_instruction: "*\"They're multiplying!\"*\r\n\r\nThe + crops are now growing in clusters. Add some new `while` loops to your function + to make sure you get all of the produce." + courseE_farmer_functions5c_markdown_instruction: "Your function will come in + handy here." + courseE_farmer_functions6b_markdown_instruction: "Pick all of the produce." + courseE_farmer_functions6c_markdown_instruction: "What do you need to add this + program to collect all of the produce?" + courseE_farmer_functions7b_markdown_instruction: "Make a second function that + lets the farmer get all of the produce down a path, then brings her back to + where she began." + courseE_farmer_functions8b_markdown_instruction: "**Challenge:** Get the farmer + to the pumpkin and collect all of the lettuce and corn along the way. " + courseE_farmer_functions9b_markdown_instruction: "Collect all of the produce + to finish this stage." + courseE_maze_ramp1_markdown_instruction: "For this puzzle, drag all of the + blocks together and click \"Run\" to watch it go!" + courseE_maze_ramp2_markdown_instruction: "Drag an extra `move forward` block + out of the toolbox to finish your code." + courseE_maze_ramp3_markdown_instruction: "*\"This pig is ruffling my feathers.\"*\r\n\r\nThere + is one extra block that is going to cause the bird to crash. \r\nThrow it + away by dragging it back to the toolbox." + courseE_maze_ramp4_markdown_instruction: "*\"Trace the path and lead me to + the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" + courseE_maze_ramp5_markdown_instruction: "*\"Follow this path to get me to + the pig!\"*\r\n\r\nAvoid the TNT." + courseE_maze_ramp6_markdown_instruction: "*\"Keep calm and help me find the + bad pig. Otherwise I might get angry!\"*\r\n\r\nWhen you have several blocks + in a row, try moving them inside of a `repeat` loop. This will do the same + thing with less code!" + courseE_maze_ramp7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** + Use what you've learned to get the bird to the pig!" + courseE_playLab_scaffold1_markdown_instruction: "It is amazing how much you + have learned! Let's put it together to make a game, step by step. \r\n\r\nWe've + put these blocks in your tool box. Choose a random background, then pick an + actor to be your game's hero.\r\n\r\n![](https://images.code.org/745931ce34b3c47de19c36009e4a9c48-image-1471464938470.14.47 + PM.png)" + courseE_playLab_scaffold2_markdown_instruction: "Now let's get things moving! + \r\n\r\nUse event handlers and actions to make your hero move. Get the targets + to complete this puzzle.\r\n\r\n<hr/>\r\n\r\nWe've added these blocks to + your tool box to help you.\r\n\r\n![](https://images.code.org/6216c0559cfae16005ffb53e6532473b-image-1471472994205.23.54%20PM.png)" + courseE_playLab_scaffold3_markdown_instruction: "Now that your game has a hero, + add two or more additional actors to your game and make them move. \r\n\r\nDo + you want to have an actor patrol back and forth or chase your main character? + \r\nTry using a these new blocks to bring your game to life!\r\n\r\n<img src=\"https://images.code.org/8f82d0e0ceab3f4fba725800cb43f94d-image-1484023674541.46.14.png\" + width=\"300px\"/>" + courseE_playLab_scaffold4_markdown_instruction: "Getting the actors moving + is a great step, but we need to do more to make this feel like a real game. + A simple way to do this is to add or remove points when actors collide with + things. Find some interesting ways to change the score in your game.\r\n<hr/>\r\n\r\n*Don't + expect to get this right on the first try. Keep testing your game as you code. + You'll not only want a game that works, but one that is fun to play!*\r\n<hr/>\r\nWe've + added these blocks to your toolbox:\r\n\r\n![](https://images.code.org/ad0df96aa91c89e3d903dce2fe19517f-image-1472070105051.20.55 + PM.png)" + courseE_playLab_scaffold5_markdown_instruction: "Great job! You have all the + basic components of a working game. Now spend some time making sure the game + works the way you want. Try including a way to win or lose your game.\r\n<hr/>\r\n*Don't + forget: Keep testing your game as you code. You'll not only want a game that + works, but one that is fun to play!*\r\n<hr/>\r\nYour toolbox has been re-organized + to make it easier to find what you need. We've also added these blocks:\r\n\r\n![](https://images.code.org/59b92b4c288bd5fc0c3be355c968f3d1-image-1472074578380.27.57 + PM.png)" + courseE_playLab_scaffold6_markdown_instruction: "You've finished! Now you + can play your game or share it with your friends and classmates!" + courseF_artist_for1_markdown_instruction: "**Free Play:** Experiment with the + `for` loop and the `counter` variable. \r\n\r\nDrag out a few blocks and + see what happens. \r\n" + courseF_artist_for10_markdown_instruction: "**Free Play:** Try using the `counter` + variable with other drawing elements to make magical images like this one.\r\n\r\n<img + src=\"https://images.code.org/7910db8adf2ec7e4c5fdad0101c68368-image-1475911466143.24.03.png\" + width=\"400px\"/>" + courseF_artist_for2_markdown_instruction: "Use a `repeat` loops inside of a + `for` loop to create this stack of triangles that goes from 50 pixel to 100 + pixel sides." + courseF_artist_for3_markdown_instruction: "Create these triangles that go from + 20 pixel sides to 200 pixel sides, where each triangle is 20 pixels larger + than the last." + courseF_artist_for5_markdown_instruction: "Just one little change to the code + from the last image can create this drawing. Can you figure out what that + change is?\r\n<hr/>\r\nHint: You need to remove something!" + courseF_artist_for6_markdown_instruction: "If you turn a little bit more or + less than you normally would for a shape, it creates a neat effect.\r\n\r\nTry + using some of the code from the last level, but turning 89 degrees to create + this twisted square spiral." + courseF_artist_for7_markdown_instruction: "Make three small changes to the + code from the last level to get this! " + courseF_artist_for9_markdown_instruction: "Use the counter inside the `set + alpha` block to get this faded center. \r\n(This hexagon pattern was made + using a 60 degree turn.)" + courseF_artist_fwp1_markdown_instruction: "Today, we're going to try out a + powerful function editor. See if you can figure out how to edit the `draw + a square` function to find the bugs." + courseF_artist_fwp2_markdown_instruction: "Edit the function to accept a parameter + called `length`. \r\n\r\nThe sides of each square should be 25 pixels larger + than the last. The first square has 25 pixel sides. Replace the '???' with + the correct values to draw the picture." + courseF_artist_fwp2_predict1_markdown_instruction: "Edit the function to accept + a parameter called `length`. \r\n\r\nThe sides of each square should be 25 + pixels larger than the last. The first square has 25 pixel sides. Replace + the '???' with the correct values to draw the picture." + courseF_artist_fwp3_markdown_instruction: "Now try creating the function from + scratch! \r\n\r\nCreate a function called `draw a square` and use it to outline + these four boxes. \r\nMake sure to add a parameter for `length`!\r\n\r\n<hr/>\r\nStarting + from the upper right, the box widths are 50, 100, 150, and 200." + courseF_artist_fwp4_markdown_instruction: "Great job! Now edit this function + to add a parameter for the number of sides in your polygon.\r\n\r\nThe sides + of all the shapes are 100 pixels long." + courseF_artist_fwp5_markdown_instruction: "Use the function from the last puzzle + to draw this series of shapes. \r\n\r\n\r\nThe triangle has 21 pixel sides, + and the sides in each following shape are 7 pixels longer than the last. \r\nUse + the `multiplication`block to make this all happen with just one function call.\r\n<hr/>\r\nThe + `multipication` block looks like this ![](https://images.code.org/55e293447c6b26bbbcf29cda2036706b-image-1481322763779.png)\r\n\r\n" + courseF_artist_fwp6_markdown_instruction: "**Challenge:** Edit `draw a spiral + edge` to use `length` and `sides` parameters, then recreate these shapes.\r\n\r\n- + The square goes from 3 pixels to 90 pixels.\r\n- The hexagon goes from 3 pixels + to 100 pixels.\r\n- The triangle goes from 3 pixels to 105 pixels." + courseF_artist_fwp7_markdown_instruction: "Finish off the `draw a spiral edge` + function to also ask for a minimum length for the center of the spiral.\r\n\r\n- + The smallest side in the center of this square is 50 pixels long\r\n- The + longest side at the outside of this spiral is 200 pixels long\r\n" + courseF_artist_fwp8_markdown_instruction: "Can you figure out how to make this + drawing using the function that you just created?\r\n\r\n- The red spiral + goes from 50 to 200 pixels\r\n- The blue spiral goes from 25 to 125 pixels\r\n- + The green spiral goes from 100 to 300 pixels\r\n" + courseF_artist_fwp9_markdown_instruction: "**Freeplay:** Below there are functions + you've written, and more for you to play with. Play with the pen width to + see how different your drawings look!" + courseF_artist_variables10_markdown_instruction: "Here's your code from the + last puzzle. Try editing the variable in other ways. \r\n- What happens + if you start out with `length` less than 150? \r\n- What if you multiply + your variable by 1.25 each time through?\r\n- What will your code do if you + turn 119 degrees?" + courseF_artist_variables2_markdown_instruction: "Now use another loop to draw + three of those triangles right next to each other. \r\n\r\nYou can nest + the code from your last puzzle inside." + courseF_artist_variables3_markdown_instruction: "Before things get tricky, + can you move the length of 50 into a variable so we can use it in the next + few puzzles? \r\n<br/>\r\n\r\n<img src=\"https://images.code.org/e6eac1f6aeb68a9a7584516e28663c14-image-1477533059853.gif\" + width=\"65%\"/>" + courseF_artist_variables4_markdown_instruction: "Now, use the `length` variable + to have the artist jump forward and down by `length` pixels between triangles." + courseF_artist_variables6_markdown_instruction: "**OOPS!** \r\n\r\nWe actually + need the triangles to be 60 pixels wide, with 60 pixel jumps. \r\n\r\nAren't + you glad you're using a variable?" + courseF_artist_variables6a_markdown_instruction: "Use what you've learned + to build this design where the squares have 80 pixel sides and the artist + jumps 80 pixels over and down between each one." + courseF_artist_variables7_markdown_instruction: "Let's start this section + by drawing a triangle with 150 pixels sides. \r\n\r\nBe sure to use the `length` + variable and a repeat loop." + courseF_artist_variables8_markdown_instruction: "Rebuild the triangle code + from the last puzzle, but this time use the `set length to` block to reset + the `length` variable to `length`+10 at the end of each loop iteration.\r\n\r\n![](https://images.code.org/6525bebee31ee15b84a48761b2866f53-image-1477531948829.31.37.png)\r\n\r\nThe + length of the first side of the triangle is 150 pixels." + courseF_artist_variables9_markdown_instruction: "Time to make some art! \r\n\r\nSee + what happens when you repeat the code from the last puzzle **30** times instead + of only 3!\r\n\r\nFeel free to make your lines any color or pattern for some + extra zest." + courseF_artist_variablesFP_markdown_instruction: "**Freeplay:** Take what you've + learned and make your own drawing. \r\n\r\nHow can you use variables with + squares, pentagons, or hexagons?" + courseF_artist_variables_10_markdown_instruction: "Here's your code from the + last puzzle. Try editing the variable in other ways. \r\n- What happens + if you start out with `length` less than 150? \r\n- What if you multiply + your variable by 1.25 each time through?\r\n- What will your code do if you + turn 119 degrees?" + courseF_artist_variables_2_markdown_instruction: "Now use another loop to draw + three of those triangles right next to each other. \r\n\r\nYou can nest + the code from your last puzzle inside." + courseF_artist_variables_3_markdown_instruction: "Before things get tricky, + can you move the length of 50 into a variable so we can use it in the next + few puzzles? \r\n<br/>\r\n\r\n<img src=\"https://images.code.org/e6eac1f6aeb68a9a7584516e28663c14-image-1477533059853.gif\" + width=\"65%\"/>" + courseF_artist_variables_4_markdown_instruction: "Now, use the `length` variable + to have the artist jump forward and down by `length` pixels between triangles." + courseF_artist_variables_5_markdown_instruction: "Add another set of loops + at the end of your code to add three more triangles. This time, move forward + and up!" + courseF_artist_variables_6_markdown_instruction: "OOPS! We actually need the + triangles to be 60 pixels wide, with 60 pixel jumps. \r\nAren't you glad + you're using a variable?" + courseF_artist_variables_6a_markdown_instruction: "Use what you've learned + to build this design where the squares have 80 pixel sides and the artist + jumps 80 pixels over and down between each one." + courseF_artist_variables_7_markdown_instruction: "Let's start this section + by drawing a triangle with 150 pixels sides. \r\n\r\nBe sure to use the `length` + variable and a repeat loop." + courseF_artist_variables_8_markdown_instruction: "Rebuild the triangle code + from the last puzzle, but this time use the `set length to` block to reset + the `length` variable to `length`+10 at the end of each loop iteration.\r\n\r\n![](https://images.code.org/6525bebee31ee15b84a48761b2866f53-image-1477531948829.31.37.png)" + courseF_artist_variables_9_markdown_instruction: "Time to make some art! \r\nSee + what happens when you repeat the code from the last puzzle 30 times instead + of only 3!\r\n\r\nFeel free to make your lines any color or pattern for some + extra zest." + courseF_artist_variables_FP_markdown_instruction: "**Freeplay:** Take what + you've learned and make your own drawing. \r\n\r\nHow can you use variables + with squares, pentagons, or hexagons?" + courseF_bee_for10_markdown_instruction: "**Challenge:** Take what you've learned + about `for` loops and try to solve this problem. \r\n\r\nRemember: You may + have to run through solutions multiple times before you figure out all of + the steps.\r\n" + courseF_bee_for11_markdown_instruction: "If your loop is counting down, the + increment is **subtracted** from your counter variable each time through. + \r\n\r\nWhat should your increment be to collect 15, then 12, then 9, 6, 3 + nectar?" + courseF_bee_for2_markdown_instruction: "Write the code to help the bee collect + all of the nectar.\r\n\r\nYou will need lots of blocks for this challenge, + but we'll learn an easier way in the next puzzle." + courseF_bee_for3_markdown_instruction: "Ah, the `for` loop makes this much + easier! \r\n\r\nTry this puzzle using the `for` loop and the `counter` variable + to see how much shorter your code becomes." + courseF_bee_for6_markdown_instruction: "You can also use a `for` loop to count + down. \r\n\r\nTry gathering this nectar by counting down from **5** to **1** + by **1**." + courseF_bee_for7_markdown_instruction: "The last number in your `for` loop + is called the **\"increment\"**. Each time the loop is run, the counter variable + changes by the value of the **increment**.\r\n\r\nTry collecting these flowers + using an **increment** of 2." + courseF_bee_for8_markdown_instruction: "You've got this! \r\n\r\nWhat should + your **increment** be to collect 3, 6, 9, 12, 15 nectar?\r\n\r\n" + courseF_bee_for9_markdown_instruction: "Now, let's combine the `counter` variable + with a `math` block! \r\n\r\nHow can you use the `counter` variable to navigate + this garden with the fewest number of blocks possible?" + courseF_bee_fwp1_markdown_instruction: "Check beneath the clouds to see if + the flowers have any nectar." + courseF_bee_fwp2_markdown_instruction: "Here's some code that solves the last + puzzle. \r\nLet's pull it into a function, then call the function to check + this row for nectar. \r\n<hr/>\r\nThis may seem like a strange step now, + but it will be really helpful soon!" + courseF_bee_fwp3_markdown_instruction: "Time to put the function to the test! + \r\n\r\nLet's see if it makes collecting these three rows of nectar any easier." + courseF_bee_fwp4_markdown_instruction: "*\"How is your function holding up?\"* \r\n\r\nWe + need to make some adjustments here. Click \"edit\" to add a `length` parameter + to the function so that it will still work when the row is a different length." + courseF_bee_fwp5_markdown_instruction: "*\"You're doing great so far!\"*\r\n\r\nLet's + use this function to collect the nectar." + courseF_bee_fwp6_markdown_instruction: "You can make code shorter and more + efficient when you combine functions with other programming elements. \r\n<hr/>\r\nWhat + blocks can you use with your function to build a short and sweet solution + to this puzzle?" + courseF_bee_fwp7_markdown_instruction: "**Challenge:** Something looks a little + different. Modify your function to make honey as well." + courseF_playlab_variables0_markdown_instruction: "This is Pirate Pegleg. He's + awfully hard to understand these days! \r\n\r\nDecode his speech by changing + these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" + should be \"e\"\r\n\r\n" + courseF_playlab_variables1_markdown_instruction: "This is Pirate Pegleg. He's + awfully hard to understand these days! \r\n\r\nDecode his speech by changing + these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" + should be \"e\"\r\n\r\n" + courseF_playlab_variables1a_markdown_instruction: "Variables can be used to + store text that you want to use later. \r\n\r\nHave Kiki, the soccer player, scream + \"Goal!\" by assigning that text to the `shout` variable." + courseF_playlab_variables2_markdown_instruction: "Now, decode Pirate Pegleg's + speech by changing the value of the variables in just two places! \r\n- + \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" + courseF_playlab_variables2a_markdown_instruction: "Now, decode Pirate Pegleg's + speech by changing the value of the variables in just two places! \r\n- + \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" + courseF_playlab_variables2b_markdown_instruction: "We can make sentences more + interesting by mixing pieces of text with variables.\r\n\r\nInsert the variable + `color` into the middle of a sentence by putting it into the empty slot in + the `join` block." + courseF_playlab_variables3_markdown_instruction: "Great! Now that you understand + how to have a character use a variable to speak, we can introduce the `ask` + block. \r\n\r\nThe `ask` block will automatically store whatever the user + answers into the variable of your choice. \r\n\r\nRun this program and enter + something for Pegleg to say.\r\n\r\n" + courseF_playlab_variables3b_markdown_instruction: "Help Kiki have a conversation + with Brian by using the variable `A1` in all of the places where age `12` + should be used. " + courseF_playlab_variables4_markdown_instruction: "Now we're going to join + a variable to the beginning of Pegleg's next sentence using the `create text + with` block. \r\n\r\nCan you find the correct variable in the toolbox to fill + in the slot?\r\n\r\n" + courseF_playlab_variables4b_markdown_instruction: "Now, Pirate Pegleg has some + questions for Brian.\r\n\r\nThis code uses an `ask` block, so you can type + Brian's answers after you click \"Run\". \r\n\r\nPut the variables in the + correct places to create this conversation." + courseF_playlab_variables5_markdown_instruction: "Now we're going to add a + variable into the middle of Pegleg's sentence using more than one `create + text with` block. \r\n\r\nHere is how you link `create text with` blocks together + to form longer sentences:\r\n\r\n![](https://images.code.org/1c9bdc9e73d60b5ed053c3c4e9e1dcd4-image-1476993588379.gif)" + courseF_playlab_variables5b_markdown_instruction: "Pirate Pegleg is going to + ask **you** some questions.\r\n\r\nPut all of the variables in the correct + place so that his story makes sense." + courseF_playlab_variables6b_markdown_instruction: "You cannot fit much text + in an actor's speech bubble. Let's try building some text using the `show + title screen` block.\r\n\r\nWe have provided some starter questions and variables + for you. Join them together and put them in the title screen to make a fun + story." + courseF_playlab_variables7b_markdown_instruction: "Time to make your own project! \r\n\r\nCreate + some questions and weave the answers together into your very own story." + courseF_playlab_variables8b_markdown_instruction: "Use what you've learned + to create an improv scene between the actors.\r\n\r\n**Improv:** *A scene + that actors make up on stage using information from the audience.*" + course_playlab_variables1_markdown_instruction: "This is Pirate Pegleg. He's + awfully hard to understand these days! \r\n\r\nDecode his speech by changing + these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" + should be \"e\"\r\n\r\n" + course_playlab_variables2_markdown_instruction: "Now, decode Pirate Pegleg's + speech by changing the value of the variables in just two places! \r\n- + \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" + course_playlab_variables3_markdown_instruction: "Now, decode Pirate Pegleg's + speech by changing the value of the variables in just two places! \r\n- + \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" + cspu3_assess1_filltable_markdown_instruction: "Use Top-Down Design strategy + to fill in the table below. The first line is given to you. You may use as + many or as few rows in the table as you see fit.\r\n\r\n_NOTE: Use a new line + for each entry to the table. Write each line in the format of \"Function Name + : Description\"_\r\n\r\n**Top-Down Design Strategy:**\r\n\r\n* Look at the + big picture…\r\n* Identify a sub-task…\r\n* Break down that sub-task into + smaller sub-task(s)...\r\n* Keep going until you’re down to the commands you + already have access to.\r\n\r\n| Function Name | Description / Justification + |\r\n|-----------------|-----------------------------|\r\n| drawSnowflake() + | Draw a 6 pointed snowflake |\r\n| (Your answer) | (Your answer) |\r\n\r\n\r\n" + cspu3_assess1_freeresponse_markdown_instruction: "Explain how abstraction allows + for the creation of increasingly complex systems. Reference top-down design + strategy in your response." + cspu5_assess1_shortresponse_markdown_instruction: "**Short Response:** \r\n\r\nTwo + students, Kaleb and Hunter, are arguing in class about an App Lab project. + Kaleb states, “Huh, a button and an image are basically the same thing!”. Hunter + replies, “That doesn’t make any sense at all!”.\r\n\tExplain what Kaleb may + have meant by that statement." + cspu5_assess2_flowChart_markdown_instruction: "The human question below has + a yes/no answer. Create a flowchart that shows the logical progression of + the questions that need to be answered to arrive at yes or no. Your diagram + should consider the day of the week, time of day, and account for both possible + outcomes.\r\n\r\n| Question | Question |\r\n|----------------------------------|----------|\r\n| + Should I be at school right now? | (Input your flowchart here) |" + cspu5_assess2_match_markdown_instruction: "The following statements are true + about event handlers, if-statements, or both in App Lab. Place the letter + next to each statement into the appropriate area of the table below.\r\n\r\n**Statements:**\r\n\r\n* + A. Runs code in response to a user action\r\n* B. Runs code in response to + statement being evaluated to True\r\n* C. Evaluated sequentially once execution + is “inside” the statement\r\n* D. Can be triggered at any time\r\n* E. Used + to run a block of code\r\n\r\n_Note: Make a new line for each box._\r\n\r\n Event + Handlers: x, x\r\n if Statements: x, x\r\n Both: x, x\r\n" + cspu5_assess2_pseudocode2_markdown_instruction: "A _pseudocode_ program is + started below that asks the user for input and stores the value in a variable. Continue + writing pseudocode to accomplish this task: \r\n\r\nIf the hour is within + the school day (8 to 15) then display “Nice to see you!”, Otherwise, display + “It’s time to go home!\r\n\r\n DISPLAY (“Enter the hour of day (0-23)”)\r\n hour + <- INPUT ()" + cspu5_assess2_shortAnswer_markdown_instruction: "**Short answer:** When might + a programmer create a global variable instead of a local variable?" + cspu5_assess2_shortAnswer2_markdown_instruction: "**Short Answer:**\r\n\r\nIn + the previous class periods, you developed a digital assistant that is able + to “intelligently” respond to a limited set of questions and statements. Assume + you have created a much more robust digital assistant with capabilities similar + to those of Siri. Describe two possible user inputs: one question that a + digital assistant could “intelligently” answer easily, and another that it + could not. Explain what makes the first easy and the second difficult for + a digital assistant. (Consider the code used to develop your digital assistant.)" + cspu5_assess2_trueFalse_markdown_instruction: "For each expression below, circle + whether it evaluates to true or false. The variable temperature is initialized + as shown.\r\n\r\n var temperature = 30;\r\n\r\nExpressions:\r\n\r\n* (temperature + > 0) && (temperature < 32)\r\n* (temperature > 0) || (temperature < 32)\r\n* + (temperature != 0) && (temperature < 32)\r\n* (temperature == 0) || (temperature + > 32)\r\n* (temperature < 0) || (temperature > 32)\r\n\r\n_Note: Write \"true\" + or \"false\" on a new line for each expression._" + cspu5_assess3_shortAnswer_markdown_instruction: "**Short Answer:** Computer + models and simulations are used to formulate, refine, and test hypotheses. Describe + a scenario that could be modeled by a computer and explain one benefit and + one drawback of doing the simulation on a computer instead of real world. + \r\n" + cspu5_assess4_challenge_markdown_instruction: "**Challenge Question:** Imagine + a list that represents the height in feet of equidistant points along a mountainous + path. Here is an example of the data with a diagram that reflects the data. + For example: \r\n\r\n![](https://images.code.org/8046cbdb63d7e7d68eb133c58362b099-image-1477862090668.png)\r\n\r\nA + programmer wants to write a procedure that calculates the net elevation - total + number of feet a traveler goes up and down. For example, looking at the first + 3 segments of travel, the net elevation is 7 feet (up 3, up 1, down 3). \r\n\r\nWrite + procedure (in either JavaScript or pseudocode) called processPath(data) that:\r\n\r\n* + Accepts a list of elevation data as a parameter\r\n* For every value in the + list\r\n\t* Compute the absolute difference between that value and the value + next to it on the path\r\n\t* Add the difference to a running total\r\n* Return + the total elevation traveled\r\n\r\nIn writing your procedure you should assume + that you can call a function called _absDiff(a,b)_.\r\n\r\n![](https://images.code.org/0a7b91a830319d5d690ddf2efa264395-image-1477862205239.png)\r\n\r\nWrite + the full procedure below." + cspu5_assess4_scoreToGrade_markdown_instruction: "**Short Answer:** Jimmy wrote + the procedure scoreToGrade which accepts as a parameter score - a quiz score + in the range 0-100. The procedure is supposed to return a letter grade. He + feels confident his program is correct because he has tested it using the + scores 3, 29, and 67. Sally believes the program is incorrect because she + tested the values 73 and 86. The code is syntactically correct, and the programs + runs without generating an error, but the results are sometimes wrong. Why + does the procedure return the correct values for Jimmy’s tests but not Sally’s? + \r\n\r\n PROCEDURE scoreToGrade (percent)\r\n {\r\n IF (percent + < 60)\r\n {\r\n RETURN (\"F\")\r\n }\r\n ELSE + IF (percent >= 60)\r\n {\r\n \tRETURN (\"D\")\r\n }\r\n ELSE + IF (percent >= 70)\r\n {\r\n RETURN (\"C\")\r\n }\r\n ELSE + IF (percent >= 80)\r\n {\r\n RETURN (\"B\")\r\n }\r\n ELSE\r\n {\r\n \tRETURN + (\"A\")\r\n }\r\n }" + cspu5_assess4_shortAnswerShopping_markdown_instruction: "**Short Answer:** + Cecelia would like to write an app to help manage a trip to the grocery store. The + app will maintain a shopping list (a list of words) of all the items to buy. Describe + how Cecelia might use a second list in the app. What else might be tracked? + Describe how the list would be used and updated in the app.\r\n" + frozen circle function in circle_markdown_instruction: "Now let's create 20 + overlapping circles, turning 18 degrees between each circle." + frozen circle function with parameter_markdown_instruction: "Here's a ”Create + circle” block that can make circles of different sizes. Can you use this to + create a small circle of size 5 and a larger circle of size 10?" + frozen circle function_markdown_instruction: "Use the new “Create a circle” + block to create 10 overlapping circles. Don't forget to jump forward between + circles." + frozen circle_markdown_instruction: "A circle is a special shape. Can you figure + out what number to replace the question marks with to draw a circle?" + frozen cross rotate dense_markdown_instruction: "Let's repeat it 90 times! + How many times does 90 go into 360? Hint: It's a really small number." + frozen cross rotate_markdown_instruction: "Now try repeating it 10 times. How + many degrees do you need to turn between each line?" + frozen cross_markdown_instruction: "Wrap a “Repeat” block around these commands + to create a plus sign. Did you notice Elsa can move forward and backward?" + frozen diamond mini snowflake_markdown_instruction: "Did you know every snowflake + is a different shape? Let's create a new snowflake by using another “Repeat\" + block to repeat a parallelogram 4 times, turning right by 90 degrees between + each parallelogram." + frozen diamond snowflake_markdown_instruction: "Now, let's create a new snowflake + by using the repeat block to repeat a parallelogram 10 times, turning right + by 36 degrees between each one." + frozen diamond_markdown_instruction: "Use a repeat around these blocks to create + a parallelogram. It's just like a rectangle but has different angles. This + one has 60 degree and 120 degree angles instead of all 90 degree angles." + frozen freeplay_markdown_instruction: "You've officially become a master artist! + Create a winter wonderland." + frozen perpendicular_markdown_instruction: "Now let's see if we can create + two lines that are at a 90 degree angle to each other. You will need to use + the \"Turn\" block as well as the \"Move\" block." + frozen snowflake branch_markdown_instruction: "Try using the ”Create a snowflake + branch” block to create three branches, which starts to look like a snowflake." + frozen snowflake full_markdown_instruction: "Now let's repeat it 8 times to + make a beautiful snowflake!" + frozen snowflower_markdown_instruction: "Intricate snow patterns can be created + with very simple shapes. Can you make a pattern by repeating 5 circles of + size 5 and 5 circles of size 10?" + frozen square iterative_markdown_instruction: "It seems like we're halfway + to making a square. Let's put 4 lines together to create a square." + frozen square loop 3x_markdown_instruction: "Let's create three squares, turning + after each square. Be sure to turn by 120 degrees before each new square." + frozen square loop_markdown_instruction: "Hi, I’m Anna of Arendelle! Let’s + make a square with the “Repeat” block, which uses fewer blocks. How many times + (???) should the “Repeat” block loop the blocks inside it to make a square?" + frozen square snowflake_markdown_instruction: "Can you create a snowflake using + the “Repeat” block to make a square 10 times, and the “Turn” block to turn + 36 degrees between each square?" + grade1_adventurer_loops2_markdown_instruction: "How can Laurel collect all + five piles of gold using only one `E -->` block?" + grade1_artist_loops6_markdown_instruction: "**Challenge:** It's a hidden + garden! Let's walk around." + grade1_artist_loops7a_markdown_instruction: "**Challenge:** Lovely! Let's + take a walk around the garden." + grade1_artist_loopsFP_markdown_instruction: "Use what you have learned to draw + a picture of what you think the artist saw when he got home.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + grade1_maze_sequence8_markdown_instruction: "**Challenge:** Debug this level + by adding blocks to get me to the pig!" + grade1_maze_sequenceA_markdown_instruction: "**Challenge:** Move me around + the TNT to get to the pig." + grade1_playlab_events1_markdown_instruction: "This game is called \"Play Lab\". \r\n\r\n<br/>\r\nSee + if you can figure out what each block does." + grade1_playlab_eventsFP_markdown_instruction: "Use your imagination. What can + you do to make this game more fun?\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Conversation</strong> + - Add blocks so that the characters say \"Hello!\" when they run into each + other. </li>\r\n <li><strong>Where's the Dragon?</strong> - Have + the dragon dissapear when the up arrow key is pressed.</li>\r\n <li><strong>Super + Dragon</strong> - Make the dragon move at a faster speed and then try to catch + him with the knight. </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>" + grade2_CaringForNewPet_0_markdown_instruction: "For this puzzle, drag all of + the blocks together and click \"Run\" to watch it go!" + grade2_CaringForNewPet_1_markdown_instruction: "Drag an extra `move forward` + block out of the toolbox to finish your code." + grade2_CaringForNewPet_11_markdown_instruction: "*\"Keep calm and help me find + the bad pig.\"*" + grade2_CaringForNewPet_2_markdown_instruction: "*\"This pig is ruffling my + feathers.\"*\r\n\r\nThere is one extra block that is going to cause the bird + to crash. \r\nThrow it away by dragging it back to the toolbox." + grade2_CaringForNewPet_2courseC_maze_programming3_markdown_instruction: "*\"This + pig is ruffling my feathers.\"*\r\n\r\nThere is one extra block that is going + to cause the bird to crash. \r\nThrow it away by dragging it back to the + toolbox." + grade2_CaringForNewPet_3_markdown_instruction: "*\"Trace the path and lead + me to the silly pig. Avoid TNT or feathers will fly!\"*" + grade2_CaringForNewPet_3D_markdown_instruction: "*\"Follow this path to get + me to the pig!\"*" + grade2_CaringForNewPet_4_markdown_instruction: "*\"Keep calm and help me find + the bad pig. Otherwise I might get angry!\"*" + grade2_CaringForNewPet_6_markdown_instruction: "**Challenge:** Guide me to + the green evilness! (Watch out for TNT)" + grade2_CaringForNewPet_7D_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** + This code has a lot of bugs. You'll need to remove blocks and add blocks." + grade2_MakeDogTag_1_markdown_instruction: "*\"Let's make a cage for my pet + monster!\"*\r\n\r\nDrag blocks onto the screen to have the artist draw over + the grey lines in the picture. \r\n(Each line is 100 pixels long)" + grade2_MakeDogTag_10_markdown_instruction: "Now, draw anything you like!\r\n<br/><br/>\r\nHere + are some ideas you could try if you get stuck (the last one is a challenge):\r\n<br/>\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/c8748bea36ec8ea92ceb13d86cd862d2-image-1471033427162.13.51 + PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/57c582dca6126e30de36b5bef5517f78-image-1471033432715.03.46 + PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/9df13dec95da560686472580304d9ee3-image-1471033275008.55.15 + PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n\r\n\r\n" + grade2_MakeDogTag_2_markdown_instruction: "*\"This spaceship needs a window!\"*\r\n\r\nEach + side of the inner square is 100 pixels and all of the angles are 90 degrees." + grade2_MakeDogTag_3_markdown_instruction: "*\"Oh no! Starla's pet alien just + flew away! Let's help the spacewoman!\"*\r\n\r\nFinish Starla's rocket so + she can chase her pet. \r\n(Each side of the triangle is 100 pixels long + and has 120 degree outer angles)" + grade2_MakeDogTag_4_markdown_instruction: "*\"Maybe we should make a tag for + each of our pets in case they get lost!\"*\r\n\r\nFinish this tag by drawing + a rectangle around the outside. \r\n(The long sides are 200 pixels each and + the short sides are each 100 pixels)" + grade2_MakeDogTag_5_markdown_instruction: "*\"Now a tag for Belle!\"*\r\n\r\nDraw + this diamond with 200 pixel sides." + grade2_MakeDogTag_6_markdown_instruction: "**Challenge:** This tag is a special + one! Can you figure out how to draw the outline? \r\n(The long side is 150 + pixels and each of the short sides are 75 pixels.)" + grade2_MakeDogTag_7_markdown_instruction: "One more tag. This is a triangle + for Pi. \r\n(Each side is 150 pixels)" + grade2_MakeDogTag_8_markdown_instruction: "Now let's connect a bunch of V's + together in a loop." + grade2_MakeDogTag_9_markdown_instruction: "Time to make something snazzy! \r\n\r\nRebuild + the code from the last puzzle, but this time, add a left turn of 30 degrees + inside the loop. Now, repeat it 24 times instead of 8." + grade2_MakeDogTag_BFP_markdown_instruction: "*\"Hi, I'm an artist. You can + write code to make me draw almost anything.\"*\r\n\r\nPlay with the blocks + in the toolbox to see what they do!" + grade2_MakeDogTag_FP_markdown_instruction: "**Freeplay:** What shape will you + make the tag for your pet?\r\n<br/><br/>\r\n\r\n\r\nHere are some ideas you + could try if you get stuck:\r\n![](https://images.code.org/e36330061c21807fac24d804e301e572-image-1475814869558.26.01.png)" + grade2_PuppyLoops_10_markdown_instruction: "My teacher says that I should finish + what I start!\r\n\r\nHelp me finish my pinwheel. Can you figure out what's + wrong?" + grade2_PuppyLoops_2_markdown_instruction: "Suddenly, a magical block appears! With + the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to + the pig by creating a loop that uses only one `move forward` block inside + of a `repeat`?" + grade2_PuppyLoops_3_markdown_instruction: "Get me to the pig! Solve this puzzle + by creating a loop!" + grade2_PuppyLoops_4_markdown_instruction: "In this puzzle, two `repeat` loops + will help you get to the pig with the fewest number of blocks!" + grade2_PuppyLoops_8_markdown_instruction: "This code for the cat's whiskers + is wrong. \r\n\r\nFix this code to draw whiskers that are all the same length." + grade2_PuppyLoops_9_markdown_instruction: "Looks like the C in code is drawn + backwards!\r\n\r\nCan you make it look like a C again?" + grade2_collector_10_markdown_instruction: "You're almost done! \r\n\r\nCollect + as many pieces of treasure as you can to finish the stage!" + grade2_collector_2_markdown_instruction: "Move Laurel to the gold, then use + `collect` to pick it up." + grade2_collector_3_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe + blocks you need are already in the workspace, but not connected. Put these + blocks in order to collect all of the gold and solve the puzzle." + grade2_collector_4_markdown_instruction: "Sequence matters! The blocks you + need are already in the workspace, but not connected. Order these blocks + to solve the puzzle." + grade2_collector_5_markdown_instruction: "*\"Help me collect each gold coin!\"*\r\n\r\nThese + blocks are in the wrong order. Can you fix them?" + grade2_collector_6_markdown_instruction: "\"Help me collect all of the treasure!\"\r\n\r\nThese + blocks are in the wrong order. Reorder them to collect all of the treasure." + grade2_collector_7_markdown_instruction: "**Challenge:** What is going on here? \r\n\r\nEven + if we put these in the right order, there will still be some missing. \r\nUse + blocks from the toolbox to collect all of the treasure." + grade2_collector_8_markdown_instruction: "*\"Keep up the good work! Help me + collect all of the coins.\"*" + grade2_collector_9_markdown_instruction: "*\"Let's get all of the coins!\"*" + grade2_collector_9a_markdown_instruction: "**Challenge:** Grab all of the coins." + grade2_collector_A_markdown_instruction: "Help Laurel collect all of the treasure." + grade2_collector_pre1_markdown_instruction: "*\"Hi, I'm Laurel. Today I'm + searching for treasure at the dog park!\"* \r\n\r\nPlay around with the blocks + to see if you can help Laurel collect some gold." + grade2_link_RunMarco_partner_markdown_instruction: "<a href=\"https://www.allcancode.com/runmarco\"></a><img + src=\"https://images.code.org/c754e82a395ab69e5c1e3b2dfe8bf9ff-image-1486603338831.22.10.png\" + width=\"400px\"/></a>" + grade2_maze_debuggingFP_markdown_instruction: "*\"Now, help me sneak up on + the pig any way you want to!\"*" + grade2_maze_intro10_markdown_instruction: "Solve this puzzle." + grade2_maze_intro2_markdown_instruction: "Welcome to Code Studio! Here you + will learn to use blocks to build programs. Press `Ok`, then find the `Run` + button to run your first program." + grade2_maze_intro3_markdown_instruction: "The `workspace` is where you will + create all of your programs. Find the workspace, then see what the program + does." + grade2_maze_intro4_markdown_instruction: "The `toolbox` is where blocks are + stored. You can drag them into the `workspace` to create programs." + grade2_maze_intro6_markdown_instruction: "That’s it! Now we’re ready to try + to solve a few puzzles." + grade2_maze_intro7_markdown_instruction: "This time, try something a bit more + challenging." + grade2_maze_intro8_markdown_instruction: "This is a challenge puzzle. It is + meant to be hard and will probably take you a couple of tries to solve. If + you don’t solve it after several tries, don’t worry! It will be in the Play + Zone at the end of the stage and you can try it again when you’ve had more + practice." + grade2_maze_intro9_markdown_instruction: "Solve this puzzle." + grade2_playlab_project_3_markdown_instruction: "Can you have Waddles (actor + 1) say \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen + you're done, play the game to make that happen.\r\n\r\n![](https://images.code.org/a634f249021651f60a1acf37bf78d07d-image-1475342557950.gif)" + grade2_playlab_project_6_markdown_instruction: "<style>\r\n.hint{\r\n\tpadding: + 15px 15px 15px 40px; \r\n background-color:#eeeeee; \r\n border-radius:10px;\r\n}\r\n.hintInner{\r\n\tpadding: + 15px 15px 15px 15px; \r\n background-color:#FFFFFF; \r\n border-radius:10px;\r\n}\r\n\r\nimg{\r\n\tborder-radius: + 10px;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n</style>\r\n\r\nCreate + your own story. When you're done, click \"Finish\" to share with friends.\r\n<br/>\r\n\r\n<h5 + class=\"hint\">\r\n<details>\r\n<summary><b>Need some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5 + class=\"hintInner\">\r\n\t\t<ul>\r\n \t<li><strong>Who's there?</strong> + - Make characters appear with random images, so no one knows who's showing + up next.</li>\r\n <li><strong>Going on an Adventure</strong> - + Change the background, then have the characters talk about where they are + now. </li>\r\n <li><strong>Pinball</strong> - Make one character + move using the arrow keys (use `when up arrow`, `when down arrow` blocks), + then play random sounds when it collides with other characters on the screen. + </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + grade2_puppy_loops2_markdown_instruction: "Suddenly, a magical block appears! With + the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to + the pig by creating a loop that uses only one `move forward` block inside + of a `repeat`?" + grade2_puppy_loops3_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nSolve + this puzzle by creating a loop!" + grade2_puppy_loops4_markdown_instruction: "In this puzzle, two `repeat` loops + will help you get to the pig with the fewest number of blocks!" + grade2_puppy_loops5_markdown_instruction: "*\"Get me to the pig as quickly + as possible!\"*" + grade2_puppy_loops6_markdown_instruction: "*\"This pig is ruffling my feathers!\"*\r\n\r\nLoops + even work with more than one block inside! Can you loop this sequence?" + grade2_puppy_loops7_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nUse + what you learned in other puzzles!" + grade3_ConditionalsElse_1_markdown_instruction: "This cloud is blocking my + view! \r\n\r\nCheck to see if there's a flower under the cloud, and only + get nectar if there's a flower. \r\nBe careful, it can change!" + grade3_ConditionalsElse_2_markdown_instruction: "More clouds! \r\n\r\nCheck + underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade3_ConditionalsElse_4_markdown_instruction: "Sometimes this cloud covers + a flower, and sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block + to collect nectar only if it is a flower. \r\nElse, make honey (because it + is a honeycomb)." + grade3_ConditionalsElse_5_markdown_instruction: "There will be either a flower + or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block + to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade3_ConditionalsElse_6_markdown_instruction: "I am not sure how much nectar + this flower has, but I know it has either 1, 2, or 3 nectar. \r\n\r\nCombine + the conditional blocks (`if` and/or `if/else`) to only get as much nectar + as the flower has. \r\n\r\nRemember, the amount of nectar can change each + time you run the puzzle!" + grade3_ConditionalsElse_7_markdown_instruction: "These flowers can have 3, + 2, or 1 nectar. \r\n\r\nComplete the `check purple flower` function and use + it to collect all of the nectar at the flowers." + grade3_ConditionalsElse_8_markdown_instruction: "Write the function for `check + flower make honey`. \r\n\r\nYour function should check if the purple flower + has 3, 2, or 1 nectar and get all of the nectar. \r\nThen, move forward and + make honey." + grade3_ConditionalsElse_9_markdown_instruction: "**Assessment:** This cloud + is either hiding a flower with one nectar or a honeycomb that needs one honey. \r\n\r\nComplete + the `get nectar or make honey` function, then call it to collect the nectar + or honey. \r\n" + grade3_ConditionalsElse_TeacherIDo_markdown_instruction: "There will be either + a flower or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` + block to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade3_Conditionals_1_markdown_instruction: "I'm a hungry bee! \r\n\r\n\r\nHelp + me collect all of the nectar from the flowers using the fewest number of blocks." + grade3_Conditionals_10_markdown_instruction: "There's a lot happening here!\r\n\r\nUse + what you've learned to collect all of the nectar and then make the honey." + grade3_Conditionals_11 BAD_markdown_instruction: "**Assessment:** Use a `while` + loop to collect all of the nectar from these flowers." + grade3_Conditionals_11_markdown_instruction: "Let's put everything together!\r\n\r\nUse + what you've learned to help me collect nectar only from flowers that have + it, using as few blocks as possible. \r\n\r\nDon't forget to make honey + at the end." + grade3_Conditionals_12_markdown_instruction: "This stair step pattern should + look familiar. \r\n\r\nCan you collect nectar only from the flowers that + have some, using as few blocks as possible?" + grade3_Conditionals_13_markdown_instruction: "**Assessment:** Collect all of + the nectar. \r\nBe careful not to try to collect nectar from a purple flower + if it doesn't have any." + grade3_Conditionals_2_markdown_instruction: "Look at all of that nectar!\r\n\r\nHelp + me collect the nectar and make the honey using as few blocks as you can. " + grade3_Conditionals_3_markdown_instruction: "These magic purple flowers change!\r\n\r\nEach + time you try the puzzle, purple flowers can have either 1 nectar or none at + all...but you won't know the number until you run the code! \r\n\r\nBe careful + not to collect nectar from a purple flower if it doesn't have any. \r\nYou + must first check if the nectar is equal to 1 using the `if nectar` block." + grade3_Conditionals_8_markdown_instruction: "I wonder what's out there!\r\n\r\nHelp + me fly around the yard and collect nectar only from the flowers that have + some. " + grade3_Debugging_1_markdown_instruction: "These blocks are really bugging me!\r\n\r\nFix + the error(s) to collect all of the nectar." + grade3_Debugging_10_markdown_instruction: "**Challenge:** *\"This puzzle is + making me loopy!\"*\r\n\r\nAll of the commands that you need are already here...now + use your debugging skills to figure out how to solve this puzzle." + grade3_Debugging_11_markdown_instruction: "**Challenge:** Fix the errors to + collect all of the nectar and make all of the honey." + grade3_Debugging_2_markdown_instruction: "*\"These blocks are really bugging + me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." + grade3_Debugging_3_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix + the error(s) to collect all of the nectar." + grade3_Debugging_4_markdown_instruction: "*\"These blocks are really bugging + me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of + the honey." + grade3_Debugging_5_markdown_instruction: "That flower looks tasty! \r\n\r\nFix + the error(s) to collect all of the nectar. \r\nYou can now use both run and + step." + grade3_Debugging_6_markdown_instruction: "What a sweet challenge!\r\n\r\nFix + the error(s) to collect all of the nectar." + grade3_Debugging_8_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix + the error(s) to make all of the honey." + grade3_Debugging_9_markdown_instruction: "\"Bee\" patient with this one!\r\n\r\nYou + will need to fix a couple of things in this program to collect all of the + nectar and make all of the honey." + grade3_Loops_10_markdown_instruction: "Such a busy bee!\r\n\r\nHelp Bee collect + all of the nectar and make all of the honey with the fewest blocks possible." + grade3_Loops_11_markdown_instruction: "The shape of this path is different + from the others. \r\n\r\nCan you collect all of the nectar using as few blocks + as possible?" + grade3_Loops_3_markdown_instruction: "Use a `repeat` loop to collect all of + the nectar." + grade3_Loops_4_markdown_instruction: "Now use the `repeat` block to collect + all of the nectar and make all of the honey." + grade3_Loops_5_markdown_instruction: "What a beautiful field of flowers!\r\n\r\nHelp + the bee visit each one.\r\n\r\nCan you find a way to do it with fewer than + 7 blocks?" + grade3_Loops_6_markdown_instruction: "How many times can loops help you in + this puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete + this puzzle with the fewest blocks possible." + grade3_Loops_7_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + grade3_Loops_TeacherIDo_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + grade3_RunningFarm_1_markdown_instruction: "*\"Corn you help me harvest today?\"*\r\n\r\nUse + conditionals to make sure that you pick all of the corn, but don't disturb + the stalks where nothing is growing yet." + grade3_RunningFarm_10_markdown_instruction: "Collect all of the corn and lettuce, + then pick the pumpkin." + grade3_RunningFarm_11a_markdown_instruction: "Collect all of the corn and lettuce, + then pick the pumpkin." + grade3_RunningFarm_2_markdown_instruction: "*\"Lettuce collect both crops from + this row!\"*\r\n\r\nHelp the farmer collect both corn and lettuce from the + field." + grade3_RunningFarm_4_markdown_instruction: "*\"Gosh! Now the crops are growing + in clusters!\"* \r\n\r\nHelp the farmer pick all of the lettuce in each cluster + before moving on to the next bunch." + grade3_RunningFarm_5_markdown_instruction: "*\"What a bountiful crop!\"*\r\n\r\nThis + field has clusters of corn, lettuce, and pumpkins all growing together. Can + you collect them all?" + grade3_RunningFarm_6_markdown_instruction: "*\"Let's take this one step further!\"*\r\n\r\nCan + you figure out how to pick the pumpkin? Make sure to collect all of the corn + along the way!" + grade3_RunningFarm_7_markdown_instruction: "**Challenge:** Collect all of the + corn and lettuce, then pick the pumpkin." + grade3_RunningFarm_8_markdown_instruction: "Harvesting one type of crop at + a time takes too long. Can you help me harvest both wheat and potatoes in + one run? I wonder if you can stack another While There is... loop on top of + another one?" + grade3_RunningFarm_9_markdown_instruction: "Can you help me one last time? + I want to collect as many crops as I can before the weeds take over this field. + How many do you think we can get?" + grade3_bee_conditionals_new1a_markdown_instruction: "You can only collect nectar + from flowers, but you can check any space to see if there is a flower." + grade3_bee_conditionals_new2a_markdown_instruction: "In this puzzle, we know + that every flower has exactly one nectar, but the flowers aren't spaced evenly.\r\n\r\nGet + all of the nectar using as few blocks as possible." + grade3_bee_conditionals_new3b_markdown_instruction: "Conditionals can be helpful, + even when you know exactly what is in each spot!\r\n\r\nCollect all of the + nectar and make all of the honey." + grade3_bee_conditionals_quantum1_markdown_instruction: "*\"This cloud is blocking + my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. If there's + a flower, get nectar." + grade3_bee_conditionals_quantum2_markdown_instruction: "More clouds! \r\n\r\nCheck + underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade3_bee_conditionals_quantum3_markdown_instruction: "*\"Now I just want + to make honey.\"*\r\n\r\nSome of these clouds might have honeycombs under + them. Be sure to check if a honeycomb is hiding behind each cloud!" + grade3_bee_conditionals_quantum4_markdown_instruction: "Sometimes a cloud covers + a flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block + to collect nectar at flowers and make honey at honeycomb." + grade3_bee_conditionals_quantum5_markdown_instruction: "**Challenge:** There + will be either a flower or a honeycomb under each of those clouds!\r\n\r\nUse + the `if/else` block to collect nectar if there is a flower.\r\nOtherwise, + make honey (because there is a honeycomb)." + grade3_maze_Loop1_markdown_instruction: "**Assessment:** Get me to the sunflower + using only 5 blocks! " + grade3_maze_loops1_markdown_instruction: "*\"Must...eat...sunflower!\"*\r\n\r\nGet + the zombie to the sunflower." + grade3_maze_loops2_markdown_instruction: "Get the zombie to the sunflower using + the fewest blocks possible! " + grade3_maze_loops2a_markdown_instruction: "*\"Zombie hungry!\"*\r\n\r\nGet + the zombie to the sunflower using the fewest number of blocks possible." + grade3_maze_loops3_markdown_instruction: "*\"Must eat sunflower!\"*\r\n\r\nGet + the zombie to the sunflower using only the blocks available." + grade3_maze_nestedLoops2_markdown_instruction: "Suddenly, a magical block appears! With + the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to + the pig by creating a loop that uses only one `move forward` block inside + of a `repeat`?" + grade3_maze_nestedLoops3_markdown_instruction: "Get me to the pig! You can + only use one `move forward` block this time" + grade3_maze_nestedLoops4_markdown_instruction: "In this puzzle, two `repeat` + loops will help you get to the pig with the fewest number of blocks!" + grade4_arist_functions_star0_markdown_instruction: "Have you drawn something + like this star before? Practice making it one more time by adding a `turn` + and a `repeat` block." + grade4_arist_nested_loop_circles1_markdown_instruction: "**Assessment:** Use + a nested loop to complete the design." + grade4_arist_nested_loop_flags1_markdown_instruction: "Loop the given code + to create a windmill." + grade4_arist_nested_loop_polygons1_markdown_instruction: "Loop this design + 10 times. \r\n\r\nHow much do you have to turn each time you loop?" + grade4_arist_nested_loop_polygons2_markdown_instruction: "Loop this shape 6 + times. \r\n\r\nHow much do you have to turn each time you loop? " + grade4_arist_nested_loop_squares1_markdown_instruction: "Can you draw these + 10 squares of this sidewalk using a nested loop? \r\n\r\nEach square is 30 + pixels." + grade4_arist_nested_loop_triangles2_markdown_instruction: "Now nest this loop + inside another loop to draw 10 triangles. \r\nThis is called a \"nested\" + loop. " + grade4_arist_nested_loop_triangles3_markdown_instruction: "Can you draw a hexagon + by looping the triangle code?" + grade4_arist_nested_loop_triangles4_markdown_instruction: "Draw the teeth in + the alligator's mouth!" + grade4_arist_nested_loop_triangles5_markdown_instruction: "Create a sun by + nesting the starter code in another loop.\r\n\r\nTo get this cool design with + a hollow center, you'll need to jump forward by the length of the triangle + before turning." + grade4_arist_nested_loop_triangles6_markdown_instruction: "Can you draw these + 36 triangles using a nested loop?" + grade4_artist_freeplay_markdown_instruction: "Create your own project! This + creation will be saved to your Projects dashboard so that you can easily edit + it any time!" + grade4_artist_functions1_markdown_instruction: "*\"Me zombie artist. Me love + drawing!\"*\r\n\r\nHelp the zombie draw glasses using squares with sides of + 100 pixels. \r\nThe bridge between the glasses is 75 pixels long.\r\n\r\n" + grade4_artist_functions2_markdown_instruction: "Functions let you define new + blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a + function called `draw a square`. This time, use the `draw a square` function + to create the glasses. \r\n\r\nThe squares are 75 pixels apart." + grade4_artist_functions2a_markdown_instruction: "Create this image using only + the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + grade4_artist_functions3a_markdown_instruction: "Create this image using only + the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + grade4_artist_functions3b_markdown_instruction: "This time, use lines of 8 + hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the 6 + times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + grade4_artist_functionsChallenge0_markdown_instruction: "**Challenge:** Create + as many functions as you think you need to make this drawing of 50 pixel squares." + grade4_artist_functions_challenge_markdown_instruction: "**Functions Super + Challenge:** Use the suggested functions to draw four rows of hexagons. Notice + how our even numbered rows are shifted to the right?" + grade4_artist_functions_challenge2_markdown_instruction: "**Functions Super + Challenge:** Use the suggested functions to draw four rows of hexagons. Notice + how our even numbered rows are shifted to the right?" + grade4_artist_functions_freeplay_markdown_instruction: "Create your own project! + This creation will be saved to your Projects dashboard so that you can easily + edit it any time!\r\n<hr/>\r\n<h3>Here are some ideas if you are looking for + inspiration, or make your own function!</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/7e85601182e37a5331a17c0e29cf504d-image-1471042674372.42.08 + PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/6ae7664d92a706e852d92dc419836557-image-1471042678266.55.48 + PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n\r\n</tr>\r\n</table>" + grade4_artist_functions_stars0_markdown_instruction: "We will come back to + functions shortly. Let's take a break to practice making this star. \r\n\r\nYou + can make this drawing by adding a repeat block." + grade4_artist_functions_stars1_markdown_instruction: "Now that you can draw + a star, try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels + long\r\n- Turn 45 degrees between branches\r\n- Jump 100 pixels between each + star" + grade4_artist_functions_stars2_markdown_instruction: "When is drawing three + stars harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw + only those three stars to finish this puzzle." + grade4_artist_functions_stars3_markdown_instruction: "That last one is tough + if you only use loops. Let's try one more time and see if this new 'function' + makes it easier to **draw a star**." + grade4_artist_functions_windows0_markdown_instruction: "You are doing great! + \r\n\r\nMake this window by drawing a square, then turning 90 degrees before + drawing another, and so on." + grade4_artist_functions_windows1_markdown_instruction: "You just created a + nested loop! Let's repeat all of these commands with **another** `repeat` + block to draw windows on this house. Don't forget to `jump`!" + grade4_artist_functions_windows2_markdown_instruction: "Let's take the code + for the window and add it to function `draw a window`. Now, we can call the + function any time we need to draw a window without having to write the code + again. \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" + width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw + a window` and calling it five times. Watch out for the door!\r\n\r\n- The + top windows are 50 pixels away from each other. \r\n- The bottom windows + are 100 pixels below the top set." + grade4_artist_nestedLoops_challenge_markdown_instruction: "<img src=\"https://images.code.org/c876143212d195192013582f57c6df04-image-1445625392518.36.18.png\" + width=\"150px;\" style=\"mix-blend-mode: multiply;\" />\r\n\r\n**Play time:** Here + is the code for an interesting shape. \r\n\r\nWhat happens when you repeat + it multiple times, turning between each iteration? \r\n\r\nNotice that the + turns in this shape add up to *420 degrees*, which means that when your artist + is done drawing, it will be facing a different direction than when you started. That + new direction is exactly *60 degrees* to the *right* of where you began.\r\n\r\n<hr/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 4</b></summary>\r\n<br/>\r\nIf you want to come full circle in just 4 repetitions, + you need the artist to turn a total of **360 degrees/4 = 90 degrees** each + time. You can do that by adding an extra `turn right by 30 degrees` block + to the outer loop (since **60+30 = 90**.) \r\n<br/>\r\n<img src=\"https://images.code.org/9da67a628ed72e87520a02a0d917e2af-image-1440132370113.44.12.png\" + width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n<br/><br/>\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 6</b></summary>\r\n<br/>\r\nWhen you repeat the shape as-is 6 times, you get + a total rotation of **6x60 degrees** which is a full **360 degree** cycle. \r\n<img + src=\"https://images.code.org/b79f96b87097ce3afe8a6a5608d04e36-image-1440132287456.44.27.png\" width=\"500px;\" style=\"mix-blend-mode: + multiply;\" />\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 12</b></summary>\r\n<br/>\r\nIf you want to repeat the image 12 times, you + need the artist to turn a total of **360 degrees/12 = 30 degrees** each iteration. That + means you will need to adjust the artist back a bit with `turn left by 30 + degrees` before you repeat the shape again. <br/><br/>\r\n<img src=\"https://images.code.org/ad254952522674496918561096817c66-image-1440132424792.44.01.png\" + width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n</details>\r\n</h4>\r\n\r\nNow + it's your turn! Can you recreate each image by repeating the starting shape? " + grade4_artist_nestedLoops_challenge2_markdown_instruction: "<img src=\"https://images.code.org/6cac10470af71bbb5d75bf5e2669046f-image-1439939145211.png\" + width=\"200px\"/>\r\n\r\nNow for a challenge! \r\n\r\nHere is a design that + uses only blocks that you have already been shown. Can you figure out how + to recreate it? Feel free to use trial and error. You are not expected to + get it perfect the first time.\r\n\r\nThe repeated shape is almost identical + to the one from the last puzzle, except that the length used in the first + loop is a little smaller. " + grade4_artist_nested_loop_circles1_markdown_instruction: "**Assessment:** Use + a nested loop to complete the design." + grade4_artist_nested_loop_flags1_markdown_instruction: "Loop the given code + to create a windmill." + grade4_artist_nested_loop_polygons1_markdown_instruction: "Loop this design + 10 times. \r\n\r\nHow much do you have to turn each time you loop?" + grade4_artist_nested_loop_polygons2_markdown_instruction: "Hi, I'm the Artist! + Let's create some drawings together! For starters, try repeating this shape + 6 times. \r\n\r\nHow much do you have to turn each time you loop? " + grade4_artist_nested_loop_squares1_markdown_instruction: "Can you draw these + 10 squares of this sidewalk using a nested loop? \r\n\r\nEach square is 30 + pixels." + grade4_artist_nested_loop_triangles1_markdown_instruction: "Complete the code + to draw these triangles. The first one is done for you. Hint: 3 triangles + in a 360 degree rotation.\r\n\r\n" + grade4_artist_nested_loop_triangles2_markdown_instruction: "Let's make a quick + adjustment to get completely different image! \r\n<b>Hint:</b> ? × 10 = 360" + grade4_artist_nested_loop_triangles3_markdown_instruction: "Can you draw a + hexagon by looping the triangle code?\r\nHint: 6 × ? = 360" + grade4_artist_nested_loop_triangles4_markdown_instruction: "Let's try something + a little different! Can you help me draw the bottom teeth in the alligator's + mouth?" + grade4_artist_nested_loop_triangles5_markdown_instruction: "Create a sun by + nesting the starter code in another loop.\r\n\r\nTo get this cool design with + a hollow center, you'll need to jump forward by the length of the triangle + before turning." + grade4_artist_nested_loop_triangles6_markdown_instruction: "Can you draw these + 36 triangles using a nested loop?" + grade4_artist_parameters_squares1_markdown_instruction: "Click \"edit\" to + fill in the function definition of `draw a square` and add a parameter. \r\nIt + should take a length parameter just like the triangle. \r\n\r\n**This time, + draw 3 squares:** 25, 50 and 75 pixels in length. The lefthand corners are + each 100 pixels away from the last." + grade4_artist_parameters_triangles1_markdown_instruction: "Today, we're going + to try out a different, more powerful function editor. See if you can figure + out how to edit the `draw a triangle` function to find the bugs." + grade4_artist_parameters_triangles2_markdown_instruction: "Do you notice anything + different about these function blocks? Click “Run” to see what happens." + grade4_artist_parameters_triangles2b_markdown_instruction: "Can you complete + this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than + the last. \r\nThe first triangle has 25 pixel sides." + grade4_artist_parameters_triangles3_markdown_instruction: "Can you complete + this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than + the last. \r\nThe first triangle has 25 pixel sides." + grade4_artist_parameters_triangles4_markdown_instruction: "The code for this + triangle function is broken. \r\n\r\nCan you edit the function to fix it, + and then make triangles of length 25, 50, and 75?" + grade4_artist_parameters_trianglesx_markdown_instruction: "Can you complete + this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than + the last. \r\nThe first triangle has 25 pixel sides." + grade4_bee_conditionals_nested_loops_markdown_instruction: "**Assessment:** + Collect all of the nectar. \r\nBe careful not to try to collect nectar from + a purple flower if it doesn't have any." + grade4_bee_conditionals_new1_markdown_instruction: "**Assessment:** Collect + all of the nectar. \r\nBe careful not to try to collect nectar from a purple + flower if it doesn't have any." + grade4_bee_conditionals_quantum1_markdown_instruction: "This cloud is blocking + my view! \r\n\r\nCheck to see if there's a flower under the cloud, and only + get nectar if there's a flower. \r\nBe careful, it can change!" + grade4_bee_conditionals_quantum2_markdown_instruction: "More clouds! \r\n\r\nCheck + underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade4_bee_conditionals_quantum4_markdown_instruction: "Sometimes this cloud + covers a flower, and sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` + block to collect nectar only if it is a flower. \r\nElse, make honey (because + it is a honeycomb)." + grade4_bee_conditionals_quantum5_markdown_instruction: "There will be either + a flower or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` + block to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade4_bee_functions2_markdown_instruction: "Functions are blocks of code that + perform a task. \r\n\r\nUse the `get 2 nectar` function to collect the nectar + from each flower." + grade4_bee_functions3_markdown_instruction: "Build the `get 5` function to + use in this puzzle." + grade4_bee_functions4_markdown_instruction: "The `move and get nectar` function + turns the bee, collects nectar, and then returns the bee to where it started. \r\n\r\nUse + the `move and get nectar` function to collect all of the nectar." + grade4_bee_functions9_markdown_instruction: "**Challenge:** These flowers can + have a different amount of nectar each time you run the puzzle. \r\n\r\nCreate + a function that collects all of the nectar from each flower." + grade4_bee_nestedLoops1_markdown_instruction: "*\"Can you BEE-lieve all of + these flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " + grade4_bee_nestedLoops2_markdown_instruction: "**Challenge:** Figure out how + to get all of the nectar using only the blocks available." + grade4_bee_nestedLoops4_markdown_instruction: "Collect all of the nectar from + each flower and make honey at the honeycomb. " + grade4_bee_nestedLoops5_markdown_instruction: "**Challenge:** Collect all of + the nectar from each flower and make honey at each honeycomb. \r\n" + grade4_bee_nestedLoops_assess_markdown_instruction: "**Assessment:** Collect + all of the nectar and make all of the honey using loops.\r\n\r\n**Hint:** + *There are several possible solutions!*" + grade4_frozen_freeplay_markdown_instruction: "You've officially become a master + artist! Create a winter wonderland." + grade4_frozen_functions0_markdown_instruction: "A circle is a special shape. + Can you figure out what number to replace the question marks with to draw + a circle?" + grade4_frozen_functions1_markdown_instruction: "Use the new “dreate a circle” + `function` to create 10 overlapping circles. Don't forget to `jump` forward + between circles." + grade4_frozen_functions1a_markdown_instruction: "Use the new “Create a circle” + block to create 10 overlapping circles. Don't forget to jump forward between + circles." + grade4_frozen_functions2_markdown_instruction: "Now let's create 20 overlapping + circles, turning 18 degrees between each circle." + grade4_frozen_functions3_markdown_instruction: "Here's a ”Create circle” block + that can make circles of different sizes. Can you use this to create a small + circle of size 5 and a larger circle of size 10?" + grade4_frozen_functions4_markdown_instruction: "Intricate snow patterns can + be created with very simple shapes. Can you make a pattern by repeating 5 + circles of size 5 and 5 circles of size 10?" + grade4_frozen_nested_loop_diamonds1_markdown_instruction: "Let’s use a repeat + block to create a rhombus. Like a square, all sides are equal length, but + the angles are different. This one has 60 degree and 120 degree angles instead + of all 90 degree angles." + grade4_frozen_nested_loop_diamonds2_markdown_instruction: "Did you know every + snowflake is a different shape? Let's create a new snowflake by using another + “Repeat\" block to repeat a parallelogram 4 times, turning right by 90 degrees + between each parallelogram." + grade4_frozen_nested_loop_diamonds3_markdown_instruction: "Now, let's create + a new snowflake by using the repeat block to repeat a parallelogram 10 times, + turning right by 36 degrees between each one." + grade4_frozen_nested_loop_rectangle1_markdown_instruction: "Hi, I’m Anna of + Arendelle! Let’s use a repeat block to create a rectangle. This one is 200 + pixels long and 100 pixels tall. All of the corners are 90 degree angles." + grade4_frozen_square_markdown_instruction: "Hi, I’m Anna of Arendelle! Let’s + make a square with the “Repeat” block, which uses fewer blocks. How many times + (???) should the “Repeat” block loop the blocks inside it to make a square?" + grade4_frozen_square_loop1_markdown_instruction: "Hi, I’m Anna of Arendelle! + Let’s make a square with the “Repeat” block, which uses fewer blocks. How + many times (???) should the “Repeat” block loop the blocks inside it to make + a square?" + grade4_frozen_square_loop2_markdown_instruction: "Let's create three squares, + turning after each square. Be sure to turn by 120 degrees before each new + square." + grade4_frozen_square_loop3_markdown_instruction: "Can you create a snowflake + using the “Repeat” block to make a square 10 times, and the “Turn” block to + turn 36 degrees between each square?" + grade4_playlab_freeplay_markdown_instruction: "It's free play time! Have fun + with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> + - Have character 2 patrol and use your arrow keys to make character 1 chase + until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> + - Have a character constantly pop up at a random location. Award points for + clicking the sprite before it disappears. </li>\r\n <li><strong>Best + Guess</strong> - Make both characters disappear, change location to a random + spot, then reappear as a random character. Click on the first one and get + a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + grade4_playlab_test_markdown_instruction: "<h5><b>\r\nIn our game, how should + we score points? \r\n</b></h5> \r\n<br/>\r\n\r\n1. Add 1 to your `points` + variable each time Dog hits Cat with a piece of pie. <br/> <br/> \r\n2. + Use the `when actor 2 touches anything` event to trigger an update to your + score. You can increment your variable by setting `points = points + 1.` <br/> <br/> + \r\n3. Get your score up to 10 to pass the level.\r\n\r\n<br/><br/>\r\n<h4>\r\n**Note:** + Use the right arrow to throw pie!\r\n</h4>" + grade4_playlab_test2_markdown_instruction: "Here's a function called `jump` + that causes your main character to jump up 100 pixels. \r\n\r\nRun the program + and use the jump function to collect all of the flags by moving the dog with + the arrow keys." + grade4_review_artist1_markdown_instruction: "Hi, I'm an artist. You can write + code to make me draw almost anything. Use a few blocks to make me draw over + the grey lines in the picture. (Each line is 100 pixels long)\r\n\r\n<br> \r\n" + grade4_review_artist2_markdown_instruction: "This house needs a roof! Draw + the triangle. \r\n\r\nHint: all three sides are the same length.\r\n\r\n<img + src=\"https://images.code.org/8b10073fd1a7fe53b4da33ec2229894b-image-1468018903891.gif\" + width=\"300\"/>" + grade4_review_artist3_markdown_instruction: "The jump block moves the artist + without drawing. Draw the dashed line using both the `jump forward` and `move + forward` blocks. Each line is 50 pixels long." + grade4_review_bee1_markdown_instruction: "Now use the `repeat` block to collect + all of the nectar and make all of the honey." + grade4_review_bee3_markdown_instruction: "Such a busy bee!\r\n\r\nHelp Bee + collect all of the nectar and make all of the honey with the fewest blocks + possible." + grade4_scaffolded_project1_markdown_instruction: "It is amazing how much you + have learned! Let's put them together to make a game, step by step.\r\nTo + start, let's set up your game's space and actor. We've put these blocks + in your tool box. Choose a background and map, and pick an actor to be your + game's hero.\r\n\r\n![](https://images.code.org/745931ce34b3c47de19c36009e4a9c48-image-1471464938470.14.47 + PM.png)" + grade4_scaffolded_project2_markdown_instruction: "Now let's get things moving! + Use event handlers and actions to make your hero move.\r\n\r\nWe've added + these blocks to your tool box to help you.\r\n\r\n![](https://images.code.org/6216c0559cfae16005ffb53e6532473b-image-1471472994205.23.54 + PM.png)" + grade4_scaffolded_project3_markdown_instruction: "Now that your game has a + hero, it's time to start adding other actors and assigning them behaviors. + \r\n\r\nAdd two or more additional actors to your game and make them move. + Do you want to have an actor patrol back and forth? Try using a these new + blocks to bring these other components of your game to life!\r\n\r\n![](https://images.code.org/4cfffd476c6129891eb8bde246a711a8-image-1472065288448.00.42 + PM.png)\r\n\r\n**NOTE:** Chasing and fleeing behavior commands are coming + soon!" + grade4_scaffolded_project4_markdown_instruction: "Just getting the actors moving + is a great step, but we need to program some interactions to make this really + feel like a game. A simple way to do this is to add or remove points when + actors collide with projectiles or each other. Find some interesting ways + to change the score in your game.\r\n\r\n*Don't expect to get this right + on the first try. Keep testing your game as you code. You'll not only want + a game that works, but one that is fun to play!*\r\n\r\nWe've added these + blocks to your toolbox:\r\n\r\n![](https://images.code.org/ad0df96aa91c89e3d903dce2fe19517f-image-1472070105051.20.55 + PM.png)" + grade4_scaffolded_project4a_markdown_instruction: "Just getting the actors + moving is a great step, but we need to program some interactions to make this + really feel like a game. A simple way to do this is to add or remove points + when actors collide with projectiles or each other. Find some interesting + ways to change the score in your game.\r\n\r\n*Don't expect to get this right + on the first try. Keep testing your game as you code. You'll not only want + a game that works, but one that is fun to play!*\r\n\r\n![](https://images.code.org/876b13abf8a7984f94342dd9a5c8a8f0-image-1472069578010.42.30 + PM.png)" + grade4_scaffolded_project5_markdown_instruction: "Great job! You have all the + basic components of a working game. Now spend some time making sure the game + works the way you want. Try including a way to win or lose your game.\r\n\r\n*Don't + forget: Keep testing your game as you code. You'll not only want a game that + works, but one that is fun to play!*\r\n\r\nYour toolbox has been re-organized + to make it easier to find what you need. We've also added these blocks:\r\n\r\n![](https://images.code.org/59b92b4c288bd5fc0c3be355c968f3d1-image-1472074578380.27.57 + PM.png)" + grade4_scaffolded_project6_markdown_instruction: "You've finished! Now you + can play your game or share it with your friends and classmates!" + grade5_artist_binary1_markdown_instruction: "Binary is a way of representing + information using only two options. Here, we're going to use the options + \"off\" (represented by the number 0) and \"on\" (represented by the number + 1). \r\n\r\nWe've provided you with a grid of \"pixels\" that you can walk + through and make designs by turning on only certain squares. \r\n\r\n**Can + you have the artist draw \"01010101\" in binary in the first row?**" + grade5_artist_binary10_markdown_instruction: "<img src=\"https://images.code.org/0a30f23ff6138828d053267719d34fa8-image-1444435986654.00.22.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own. + \r\n<br/>\r\n" + grade5_artist_binary2_markdown_instruction: "Here's a function that takes + a binary string of 1's and 0's and instructs the artist to follow them from + left to right, top to bottom. \r\n\r\nThe artist will fill-in the squares + when it sees a 1 and ignore the square when it sees a 0. \r\n\r\n**Run this + code to see how the artist uses binary to draw this pattern.**" + grade5_artist_for_loops1_markdown_instruction: "Use a `for` loop to draw this + triangle that is 50 pixels wide. If you count from 1 to 3 by 1s, you can use + this just like a `repeat` loop." + grade5_artist_for_loops10_markdown_instruction: "**Challenge:** Can you figure + out how to use all of the things you've learned to create this image of polygons, + all with 40 pixel sides?" + grade5_artist_for_loops1a_markdown_instruction: "Try using a `for loop`to create + this triangular design. Don't worry that the numbers are different than the + last puzzle. As long as you turn by the right number of degrees, the artist + will make the correct shape!\r\n\r\n" + grade5_artist_for_loops1b_markdown_instruction: "**Free Play:** Experiment + with the `for` loop and the `counter` variable. \r\n\r\nDrag out a few blocks + and see what happens. \r\n\r\n<br/><br/>\r\n" + grade5_artist_for_loops2_markdown_instruction: "Use a `repeat` inside of a + `for` loop to create this stack of triangles that goes from 50 pixels to 100 + pixels." + grade5_artist_for_loops3_markdown_instruction: "These triangles go from 20 + pixel sides to 200 pixel sides, and each triangle is 20 pixels larger than + the last." + grade5_artist_for_loops4_markdown_instruction: "These squares start at 15 pixels + long, the largest is 300 pixels long, and each square is 15 pixels larger + than the last." + grade5_artist_for_loops5_markdown_instruction: "Just one little change to the + code from the last image can create this drawing. Can you figure out what + that change is?\r\n\r\nHint: You need to remove something!" + grade5_artist_for_loops6_markdown_instruction: "If you turn a little bit more + or less than you normally would for a shape, it creates a neat effect.\r\n\r\nTry + using some of the code from the last level, but turning 89 degrees to create + this twisted square spiral." + grade5_artist_for_loops7_markdown_instruction: "Make three small changes to + the code from the last level to get this! \r\n(This time, the `for` loop + increments by 2)" + grade5_artist_for_loops7a_markdown_instruction: "Take the angle down to 72 + degrees to get a spiraled pentagon." + grade5_artist_for_loops7b_markdown_instruction: "Use the counter inside the + `set alpha` block to get this faded center. \r\n(This hexagon pattern was + made using a 60 degree turn.)" + grade5_artist_for_loops8_markdown_instruction: "Remember back in a previous + stage when we used a variable to control the number of sides in a shape? We + are going to do the same thing with the `counter` variable now. \r\n\r\nThis + pattern starts with a triangle and adds one side at a time until it draws + a decagon (10 sides). Each side should be 100 pixels long. \r\n\r\nHow will + you use the `counter` variable from the `for` loop to recreate this drawing?" + grade5_artist_for_loops9_markdown_instruction: "Let's put it all together! \r\n\r\nUsing + your knowledge of `for` loops and the `counter` variable, create this drawing + where each shape has two more sides than the last. Make sure that each side + is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little + of the code has been provided for you." + grade5_artist_for_loopsfreeplay11_markdown_instruction: "<br/><br/>\r\n<img + src=\"https://images.code.org/9b5897e059bb29bd2faf8504659a3cfc-image-1440719685627.49.33.png\" + width=\"250px\"/> \r\n<br/><br/>\r\n**Free-Play Inspiration:** You've now + learned everything you need to know to make a pattern like this! If this picture + inspires you, try to make something similar. Otherwise, create something all + your own." + grade5_artist_for_loopsfreeplay12_markdown_instruction: "**Free Play:** Try + using the `counter` variable with other drawing elements to make magical images + like this one.\r\n\r\n<img src=\"https://images.code.org/7910db8adf2ec7e4c5fdad0101c68368-image-1475911466143.24.03.png\" + width=\"400px\"/>" + grade5_artist_freeplay_markdown_instruction: "Create your own project! This + creation will be saved to your Projects dashboard so that you can easily edit + it any time!" + grade5_artist_functionparameters10_markdown_instruction: "<img src=\"https://images.code.org/1df195df9d808f0dd539bef0f5c2958b-image-1443049871563.02.54.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own.\r\n\r\nNotice: + We've used the `set alpha` block to make the \"petals\" fade toward the outside." + grade5_artist_functionparameters11_markdown_instruction: "**Freeplay:** Below + there are functions you've written, and more for you to play with. Play with + the pen width to see how different your drawings look!" + grade5_artist_functionparameters7_markdown_instruction: "This image is similar + to the last. \r\n\r\nCan you use a `for` loop with your function to make + this design?" + grade5_artist_functionparameters8_markdown_instruction: "Use the function from + the last puzzle to draw this series of shapes. \r\n\r\n\r\nThe triangle has + 21 pixel sides, and the sides in each following shape are 7 pixels longer + than the last. \r\nUse the `multiplication`block to make this all happen + with just one function call.\r\n<hr/>\r\nBe sure to jump 100 pixels between + polygons. <br>\r\nThe multipication block looks like this ![](https://images.code.org/55e293447c6b26bbbcf29cda2036706b-image-1481322763779.png)\r\n\r\n" + grade5_artist_functionparameters9_markdown_instruction: "**Challenge:** Edit + `draw a spiral edge` to use `length` and `sides` parameters, then recreate + these shapes.\r\n\r\n- The square goes from 3 pixels to 90 pixels.\r\n- The + hexagon goes from 3 pixels to 100 pixels.\r\n- The triangle goes from 3 pixels + to 105 pixels." + grade5_artist_functionparameters9a_markdown_instruction: "Finish off the `draw + a spiral edge` function to also ask for a minimum length for the center of + the spiral.\r\n\r\n- The smallest side in the center of this square is 50 + pixels long\r\n- The longest side at the outside of this spiral is 200 pixels + long\r\n" + grade5_artist_functionparameters9b_markdown_instruction: "Can you figure out + how to make this drawing using the function that you just created?\r\n\r\n- + The red spiral goes from 50 to 200 pixels\r\n- The blue spiral goes from 25 + to 125 pixels\r\n- The green spiral goes from 100 to 300 pixels\r\n" + grade5_artist_functionparameters_6_markdown_instruction: "Great job! Now edit + this function to add a parameter for the number of sides in your polygon.\r\n\r\nThe + sides of all the shapes are 100 pixels long." + grade5_artist_parameters_squares1_markdown_instruction: "Click \"edit\" to + fill in the function definition of `draw a square` and add a parameter. \r\nIt + should take a length parameter just like the triangle. \r\n\r\n**This time, + draw 3 squares:** 25, 50 and 75 pixels in length. The lefthand corners are + each 100 pixels away from the last." + grade5_artist_parameters_squares1a_markdown_instruction: "Today, we're going + to try out a different, more powerful function editor. See if you can figure + out how to edit the `draw a square` function to find the bugs." + grade5_artist_parameters_squares2_markdown_instruction: "Now try creating the + function from scratch! \r\n\r\nCreate a function called `draw a square` and + use it to outline these four boxes. \r\nMake sure to add a parameter for + `length`!\r\n\r\n<hr/>\r\nStarting from the upper right, the box widths are + 50, 100, 150, and 200." + grade5_artist_parameters_squares2a_markdown_instruction: "Edit the function + to accept a parameter called `length`. \r\n\r\nThe sides of each square should + be 25 pixels larger than the last. The first square has 25 pixel sides. Replace + the '???' with the correct values to draw the picture." + grade5_artist_parameters_stars1_markdown_instruction: "That last one is tough + if you only use loops. Let's try one more time and see if this new 'function' + makes it easier to **draw a star**." + grade5_artist_parameters_triangles1_markdown_instruction: "Today, we're going + to try out a different, more powerful function editor. See if you can figure + out how to edit the `draw a square` function to find the bugs." + grade5_artist_parameters_triangles1a_markdown_instruction: "Today, we're going + to try out a different, more powerful function editor. See if you can figure + out how to edit the `draw a triangle` function to find the bugs." + grade5_artist_parameters_triangles1aa_markdown_instruction: "Click \"edit\" + to fill in the function definition of `draw a triangle` and add a parameter. \r\nIt + should take a length parameter just like the triangle. \r\n\r\n**This time, + draw 3 triangles:** 25, 50 and 75 pixels in length. The lefthand corners are + each 100 pixels away from the last." + grade5_artist_parameters_triangles2_markdown_instruction: "Can you complete + this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than + the last. \r\nThe first triangle has 25 pixel sides." + grade5_artist_parameters_triangles2a_markdown_instruction: "Do you notice anything + different about these function blocks? Click “Run” to see what happens." + grade5_artist_parameters_triangles3_markdown_instruction: "The code for this + triangle function is broken.\r\n\r\nCan you edit the function to fix it, and + then make triangles of length 25, 50, and 75?" + grade5_artist_parameters_triangles4_markdown_instruction: "The code for this + triangle function is broken. \r\n\r\nCan you edit the function to fix it, + and then make triangles of length 25, 50, and 75?" + grade5_artist_parameters_trianglesy_markdown_instruction: "The code for this + triangle function is broken.\r\n\r\nCan you edit the function to fix it, and + then make triangles of length 25, 50, and 75?" + grade5_artist_variables_freeplay10_markdown_instruction: "**Free Play:** Experiment + with the number of sides this shape has. Can you change the algorithm so that + the overall size of the shape stays the same, no matter how many sides it + has? " + grade5_artist_variables_freeplay14_markdown_instruction: "**Free Play**: Check + it out! Now your algorithm is nested within one more loop. Experiment with + changing the values of your two variables to draw cool patterns.\r\n\r\nFor + even more effect, try playing with color! Use random colors inside loops + to see how it changes your design." + grade5_artist_variables_freeplay15_markdown_instruction: "<img src=\"https://images.code.org/b5e28b084cb331ee030ea3853ed921bd-image-1440060815818.51.21.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! If this picture inspires you, + try to make something similar. Otherwise, create something all your own. " + grade5_artist_variables_freeplay16_markdown_instruction: "Still playing? \r\n\r\nHere + is a blank canvas where you can create whatever you want!\r\n\r\n<hr/>\r\n<h3>If + you're looking for ideas, try one of these:</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/2e8a6853ccb3ffe9bc6d25aaeea75514-image-1471047821651.10.45 + PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/0b63705c28ac282637a3a5b3cede8608-image-1471047826162.18.02 + PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>" + grade5_artist_variables_hexagons1_markdown_instruction: "Let's try it again! + \r\n\r\nCan you set the `length` variable to 60 to make this cool design with + hexagons?" + grade5_artist_variables_letterT11_markdown_instruction: "Here’s some more complicated + code using the same concepts from the last puzzle - what should you set the + `sides` variable to in order to draw this picture made of squares?\r\n\r\n<p + style=\"font-size:small; padding: 15px 15px 15px 40px; background-color:#dcf3f3; + border-radius:10px;\">\r\n\tJust for fun: Try using a few different numbers + to see what happens to the pattern!\r\n</p>" + grade5_artist_variables_octagons13_markdown_instruction: "When a shape has + lots of sides, each side needs to be shorter if you want the whole pattern + to fit on the screen. \r\n\r\nLet's recreate the algorithm for this amazing + pattern, but instead of manually setting the `length` variable, let's use + a math block with the `sides` variable inside to make sure that each shape + fits correctly. \r\n\r\nThe perimeter of each polygon is 300 pixels." + grade5_artist_variables_pentagon8_markdown_instruction: "Use what you learned + in the last puzzle to create this hexagon using the `sides` variable.\r\n\r\nSee + how you could change just one value to draw a triangle, square, pentagon, + or octagon?" + grade5_artist_variables_pentagon9_markdown_instruction: "Now, recreate the + algorithm from the last level and create a pentagon with sides of length 150." + grade5_artist_variables_pentagons1_markdown_instruction: "Draw this pattern + of pentagons with 100 pixel sides by setting the right value for `length` + and dropping the `length` variable into all of the the correct places. \r\n\r\nSee + how you only have to set the value for `length` once, and the code uses the + right value everywhere?" + grade5_artist_variables_pentagons12_markdown_instruction: "Let's set the `sides` + variable to 5. The more sides we add to this algorithm, the bigger this whole + pattern gets! \r\n\r\n<br/>\r\nNotice that there is another variable called + `length`. \r\nWe can now use that variable wherever we have a `move forward` + block. \r\n\r\nSet the `length` variable to 75 for this shape." + grade5_artist_variables_rectangle6_markdown_instruction: "Now I want to make + a rectangle that is twice as tall as it is wide. We've got a variable called + `width` that needs to be set to 100. Can you use the math blocks to complete + the code?" + grade5_artist_variables_square7_markdown_instruction: "Here’s some code that + can draw any regular polygon. \r\n\r\nThere’s a new variable called `sides` + that is set to 4. \r\n\r\nCan you use the `sides` variable (along with the + math block) to turn the right amount regardless of how many sides are in the + polygon?" + grade5_artist_variables_triangles1_markdown_instruction: "Let's draw an equilateral + triangle. \r\n\r\nIt has to be exactly 50 pixels long on each side.\r\n\r\n" + grade5_artist_variables_triangles2_markdown_instruction: "Instead of using + `move forward by 150`, the `move` block is now referencing a variable called + `length`. Can you set `length` to 150 to draw this new triangle?" + grade5_artist_variables_triangles3_markdown_instruction: "Drag a number block + to the `set length` block and to the `repeat _ times` block to draw a set + of 50 pixel triangles. " + grade5_bee_for_loops10_markdown_instruction: "If your loop is counting down, + the increment is **subtracted** from your counter variable each time through. + \r\n\r\nWhat should your increment be to collect 15, then 12, then 9, 6, 3 + nectar?" + grade5_bee_for_loops11_markdown_instruction: "**Challenge:** Take what you've + learned about `for` loops and try to solve this problem. \r\n\r\nRemember: + You may have to run through solutions multiple times before you figure out + all of the steps.\r\n" + grade5_bee_for_loops2_markdown_instruction: "Add the code necessary to make + sure the bee collects all the nectar.\r\n\r\nLook at how much code you need + for this puzzle! (We'll learn a simpler way in the next puzzle.)" + grade5_bee_for_loops3_markdown_instruction: "Ah, the `for` loop makes this + much easier! \r\n\r\nTry this puzzle using the `for` loop with `counter` + variable and see how much shorter your code becomes." + grade5_bee_for_loops4_markdown_instruction: "Help the bee collect all of the + nectar." + grade5_bee_for_loops5_markdown_instruction: "Now we need to `move forward` + `counter` times, then `get nectar` `counter` times. Can you use two `repeat` + loops to solve this challenge?" + grade5_bee_for_loops6_markdown_instruction: "You can also use a `for loop` + to count down. Try gathering this nectar by counting down from 5 to 1 by 1." + grade5_bee_for_loops7_markdown_instruction: "The last number in your `for` + loop is called the **\"increment\"**. Each time the loop is run, the counter + variable changes by the value of the increment.\r\n\r\nTry collecting these + flowers using an increment of 2." + grade5_bee_for_loops8_markdown_instruction: "You've got this! \r\n\r\nWhat + should your increment be to collect 3, 6, 9, 12, 15 nectar?\r\n\r\n" + grade5_bee_for_loops9_markdown_instruction: "Now, let's combine the `counter` + variable with a math block! \r\n\r\nHow can you use the `counter` variable + to navigate this garden with the fewest number of blocks possible?" + grade5_bee_parameters_new1_markdown_instruction: "Check beneath the clouds + to see if the flowers have any nectar." + grade5_bee_parameters_new2_markdown_instruction: "Here's some code that solves + the last puzzle. \r\nLet's turn it into a function, then call the function + to check this row for nectar. \r\n<hr/>\r\nThis may seem like a strange step + now, but it will be really helpful soon!" + grade5_bee_parameters_new3_markdown_instruction: "Time to put the function + to the test! \r\n\r\nLet's see if it makes collecting these three rows of + nectar any easier." + grade5_bee_parameters_new4_markdown_instruction: "*\"How is your function holding + up?\"* \r\n\r\nWe need to make some adjustments here. Click \"edit\" to + add a `length` parameter to the function so that it will still work when the + row is a different length." + grade5_bee_parameters_new5_markdown_instruction: "*\"You're doing great so + far!\"*\r\n\r\nLet's use this function to collect a lot of nectar." + grade5_bee_parameters_new6_markdown_instruction: "You can make code shorter + and more efficient when you combine functions with other programming elements. \r\n<hr/>\r\n<h3>What + blocks can you use with your function to build a short and sweet solution + to this puzzle?</h3>" + grade5_bee_parameters_new7_markdown_instruction: "**Challenge:** Something + looks a little different. Can you modify your function to make honey as well?" + grade5_bee_parameters_new8a_markdown_instruction: "Use your new function to + solve this spiral." + grade5_bee_parameters_new9a_markdown_instruction: "Use your new function to + solve this spiral." + grade5_pixelation_markdown_instruction: "# Make your own image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* + Encode an image of anything you like using `binary`.\r\n* The binary language + will be represented with `0` and `1` only.\r\n* You might want to do some + planning and sketching with graph paper first. \r\n* Depict something, perhaps + your name written out, your initials, an icon or logo of some sort.\r\n* Get + creative! The image doesn't have to be a perfect square, it can be long and + skinny." + grade5_playlab_freeplay_markdown_instruction: "It's free play time! Have fun + with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> + - Have character 2 patrol and use your arrow keys to make character 1 chase + until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> + - Have a character constantly pop up at a random location. Award points for + clicking the sprite before it disappears. </li>\r\n <li><strong>Best + Guess</strong> - Make both characters disappear, change location to a random + spot, then reappear as a random character. Click on the first one and get + a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + grade5_playlab_parameters_points1_markdown_instruction: "Here's the same game + but most of the code is hidden. We've added a new function called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nAdd + a new parameter called `points` to the `player_score` function. \r\n<br/>\r\nThe + `score_points` function should be able to both add and remove points from + `player_score` depending on which actor is hit.<br>\r\nChanging the score + by 1 will add a point, while changing the score by -1 will subtract a point.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: When + you're done, click \"Run\" to play. When Dog scores 6 points, you will move + on to the next puzzle.*" + grade5_playlab_variables1_markdown_instruction: "This time you don't have + to write any code, just hit `Run` to play the game! \r\n\r\n<br/>\r\nIn this + game, you're the dog who is trying to collect more flags than the cat. Use + the down arrow to control the dog. Press `Finish` when you're done playing." + grade5_playlab_variables10_markdown_instruction: "Edit the the `patrol` function + to add an `actor` parameter, so that we can call it for each of the actors + on the screen. Remember, the actors correspond to numbers 1, 2, and 3." + grade5_playlab_variables11_markdown_instruction: "Add another parameter called + `speed` to the `patrol` function. Try using a `set speed` block with the new + `speed` parameter to help Penguin get both flags before the other sprites + even get one." + grade5_playlab_variables12_markdown_instruction: "Let's have some fun! Look + at the code provided to see if you can figure out what each block does. \r\n\r\nWhen + you're done, use the arrow keys to control Dog and collect all of the flags.\r\n\r\n**NOTE:** + You don't need to make any changes to the program" + grade5_playlab_variables13_markdown_instruction: "Use the `when actor touches` + block to send Dog back to the top-left ONLY if Dog touches any of the other + actors." + grade5_playlab_variables14_markdown_instruction: "It's free play time! Have + fun with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> + - Have character 2 patrol and use your arrow keys to make character 1 chase + until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> + - Have a character constantly pop up at a random location. Award points for + clicking the sprite before it disappears. </li>\r\n <li><strong>Best + Guess</strong> - Make both characters disappear, change location to a random + spot, then reappear as a random character. Click on the first one and get + a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + grade5_playlab_variables1ask_markdown_instruction: "This time, when you press + 'run', you will see a 'prompt' asking you for a number. This number will + be stored in a variable used to set the dog's speed.\r\n\r\n\r\nPay attention + to how this program is written!" + grade5_playlab_variables2_markdown_instruction: "The race in that last puzzle + wasn't very fair! Change the `dog_speed` variable to make sure you can collect + more flags than Cat. The first to collect 10 flags wins!" + grade5_playlab_variables3_markdown_instruction: "Here's a new kind of game! + \r\n\r\nYou don't need to change anything on this level.\r\n\r\n**Directions:** + Use the left and right arrows to move, and the up arrow to jump. See if you + can collect all of the flags." + grade5_playlab_variables4_markdown_instruction: "Now we're using a variable + called `height` to control how high the dog can jump. Update the `height` + variable so that the dog can jump high enough to reach all the flags. \r\n" + grade5_playlab_variables6_markdown_instruction: "In our game, how should we + score points?\r\n\r\n1. Add 1 to your `points` variable each time Dog hits + Cat with a piece of pie.\r\n2. Use the `when actor 2 touches anything` event + to trigger an update to your score. You can increment your variable by setting + `points = points + 1.`\r\n3. Get your score up to 10 to pass the level.\r\n\r\n**Note:** + Use the right arrow to throw pie!" + grade5_playlab_variables6ask_markdown_instruction: "This time, you need 100 + points to win! Don't worry though, you can choose how many points you earn + each time you score a hit!\r\nTry adding the `ask` block and changing the + number 1 out for the variable `value`.\r\n\r\n**Note:** Use the right arrow + to throw pie!" + grade5_playlab_variables7_markdown_instruction: "Nice, now let's make sure + this game isn't too easy to play!\r\n\r\nAny time Dog (actor 1) gets hit + by a sandwich from Cat (actor 2), you should lose a point.\r\n\r\nStart with + 10 points so it's not too hard. Let your score drop down from 10 to 0 to + pass the level." + grade5_playlab_variables71_markdown_instruction: "Here's our game from an + earlier stage but most of the code is hidden. We've added a new function + called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nEdit the function + so that a new parameter called `points` is added to `player_score`. \r\n<br/>\r\nThe + variable `player_score` should increase each time Dog tags Cat with pie, and + decrease each time that Cat tags Dog with a sandwich.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: + When you're done, click \"Run\" to play. When Dog scores 6 points, you will + move on to the next puzzle.*" + grade5_playlab_variables81_markdown_instruction: "We've added one last function + for you.\r\n<hr/>\r\n\r\n<h4>\r\nUse an `if` statement to program your game + to call the `level_up` function only when `player_score` becomes greater than + a certain number.<br/><br/>\r\n</h4>\r\n<i>For example: `player_score` > 6</i>\r\n\r\n\r\n<hr/>\r\n<i>Play + the game, and make it to level 3 to move to the next puzzle.</i>" + grade5_playlab_variables9_markdown_instruction: "Here's a function called + `patrol`. \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 + pixels." + grade5_playlab_variables_freeplay_markdown_instruction: "Free Play time! Here + are all of the variables we've played with so far in this stage, as well + as a few more in case you want them. \r\n\r\nNotice that there are now so + many blocks in our toolbox that they need to be organized! Here, we've put + each piece into an appropriate category. Take some time to explore everything + that is available. When you're done browsing, make a game or story using + repeats, variables, and events. \r\n\r\n*Hint: scroll down to see all the + commands in the workspace.*" + grade5_playlab_variables_jump1_markdown_instruction: "This puzzle uses a hidden + function that makes the dog jump when the `up` arrow is pressed. The height + of the jumps can be set at the start of the game using the `jumpPower` variable. + Try to touch all of the flags!" + grade5_prompt_test_markdown_instruction: "Variables aren't always numbers. + What if you wanted to store a word or text? Experiment with the new `ask` + block." + gradeK_sequence_4_markdown_instruction: "Try this one yourself from the beginning.\r\n\r\n![](https://images.code.org/43001078c4df6feea1a6edf025192d85-image-1467929743355.gif)" + gradek_artist_loops1_markdown_instruction: "Help the artist draw this line + two times forward.\r\n\r\n![](https://images.code.org/7ddc7b43ef27197559c7defb0af56d03-image-1470776934855.gif)" + gradek_artist_loops2_markdown_instruction: "Our artist is trying to draw a + line five times, but can't get it right. Can you help?\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" + gradek_artist_loops3_markdown_instruction: "Now, use a `repeat` loop to draw + this line five times!\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" + gradek_artist_loops4_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nDraw a line seven steps long. This will + become our horizon.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" + width=\"300\"/>\r\n" + gradek_artist_loops5_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nLet's put a nice hill in the back.<br/><br/>\r\n</div>\r\n\r\n<img + src=\"https://images.code.org/bbbd114642d829029fc3b0566a4437e3-image-1477107329933.gif\" + width=\"300\"/>\r\n" + gradek_artist_loops6_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the + water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" + width=\"300\"/>\r\n" + gradek_artist_loops7_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nWe need a ladder up to the boat.<br/>\r\n</div>\r\n\r\n<img + src=\"https://images.code.org/6e4dc767e55d11400f35c6680bbfe1e3-image-1470788284437.gif\" + width=\"300\"/>" + gradek_artist_loops8_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** The stairs down to the dock + are broken. Help me fix them.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/53c68133f897895caa0369b4afa3ec3b-image-1470789463684.gif\" + width=\"300\"/>\r\n" + gradek_artist_loops9_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nTime to head back to land. Help me put down + stones so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" + width=\"300\"/>\r\n" + gradek_artist_loopsA_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nHelp me build steps to watch the ship sail + away.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/0dfa647dbc835fae09989a0fbfd798c7-image-1470871168220.gif\" + width=\"300\"/>\r\n" + gradek_artist_loopsFP_markdown_instruction: "The artist saw something funny + in the distance. Draw what you think he saw.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + gradek_playlab_events1c_markdown_instruction: "Jorge the Dog wants to say \"Hi + there.\" Can you help him?" + gradek_playlab_events2c_markdown_instruction: "Help Jorge the Dog get moving + by connecting the ![](https://images.code.org/b3d6215901969328333d6393f8101c5b-image-1478142333199.png) + block to the ![](https://images.code.org/4f2130b2a3053695414a02c3d39ef864-image-1478143461271.png) + event block that is already in the workspace." + gradek_playlab_events3c_markdown_instruction: "Now, get Jorge to move right + when the ![](https://images.code.org/b99365eb23280f158e6ef570fe1c8a76-image-1478145132820.png) + button is clicked." + gradek_playlab_events4c_markdown_instruction: "Add events to have Jorge move + up and down when the ![](https://images.code.org/379493b95d158b273f1424538b1c635a-image-1478145402316.png) + and ![](https://images.code.org/f490d78efd81c21ab74286aefe7af097-image-1478145385132.png) + buttons are pressed." + harvey_pixelation_markdown_instruction: "# Make your own image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* + Encode an image of anything you like using `binary`.\r\n* The binary language + will be represented with `0` and `1` only.\r\n* You might want to do some + planning and sketching with graph paper first. \r\n* Depict something, perhaps + your name written out, your initials, an icon or logo of some sort.\r\n* Get + creative! The image doesn't have to be a perfect square, it can be long and + skinny." + jessie-test_markdown_instruction: "# Cool\r\n\r\n## Markdown\r\n\r\n### Instructions\r\n\r\n#### + here\r\n\r\n##### now\r\n\r\n###### forever" + kikiTesta_markdown_instruction: "Our adventurer wants to collect coins. But she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many as she can using just 4 blocks?" - 'Widget: Black and White Pixelation_markdown_instruction': "# Make your own - image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* - Encode an image of anything you like.\r\n* You might want to do some planning - and sketching with graph paper first.\r\n* DO NOT simply make an abstract - pattern, like a checkerboard. \r\n* Depict something, perhaps your name written - out, your initials, an icon or logo of some sort.\r\n* Get creative! The image - doesn't have to be a perfect square, it can be long and skinny.\r\n* Optional: - for fun, send your image bits to a friend using the <a href =\"https://studio.code.org/s/cspunit1/stage/11/puzzle/2\" - target=\"_blank\">sending bits widget.</a> *(note: this is just a link to - the sending formatted text level from a couple of classes ago)*\r\n\r\n\r\n" - 'Widget: Color Pixelation_markdown_instruction': "# Personal Favicon\r\n**Requirements:**\r\n<img - src = \"https://images.code.org/28fc33ea82996a10863688702af55e65-image-1439596268865.png\" - align=right hspace=20>\r\n\r\n* The icon must be 16x16 pixels. \r\n* You must - use the Pixelation Widget to encode the bits of color information.\r\n* The - image must be encoded with at least 12 bits per pixel.\r\n\r\n" - 'Widget: Text Compression_markdown_instruction': "Look for patterns (repeated - words or phrases) in the text. Enter the patterns you see into the dictionary - on the right. As you type entries into the dictionary, the symbol for the - entry is inserted into the text in place of the pattern." + level 'grade3_Loops_10_markdown_instruction: "Such a busy bee!\r\n\r\nHelp + Bee collect all of the nectar and make all of the honey with the fewest blocks + possible." + level 'grade3_Loops_11_markdown_instruction: "The shape of this path is different + from the others. \r\n\r\nCan you collect all of the nectar using as few blocks + as possible?" + level 'grade3_Loops_3_markdown_instruction: "Use a `repeat` loop to collect + all of the nectar." + level 'grade3_Loops_4_markdown_instruction: "Now use the `repeat` block to + collect all of the nectar and make all of the honey." + level 'grade3_Loops_5_markdown_instruction: "What a beautiful field of flowers! \r\n\r\nHelp + the bee visit each one.\r\n\r\nCan you find a way to do it with fewer than + 7 blocks?" + level 'grade3_Loops_6_markdown_instruction: "How many times can loops help + you in this puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete + this puzzle with the fewest blocks possible." + level 'grade3_Loops_7_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + love_spring_1_markdown_instruction: "Let's celebrate Spring! \r\n\r\nWe have + put some seeds in the ground to prepare for the season's flowers. Can you + cover them up so that the birds don't eat them?" + love_spring_2_markdown_instruction: "Our flowers are in full bloom! \r\n\r\nNow + we need the bee to grab nectar from each one so he can make plenty of honey + back at his hive!" + love_spring_3_markdown_instruction: "<b>The sun is shining, the birds are chirping, + and now it's time to play!</b> <br/><br/>\r\n\r\nRobin has chosen a number + between 10 and 30. \r\nUse the up and down arrows to make a guess about what + it is. \r\nClick Robin to submit your guess.\r\n\r\n- Robin will move up + when your guess is too high\r\n- Robin will move down when your guess is too + low\r\n- Where do you change how far Robin moves each time?\r\n- Where would + you change the range of numbers to choose from?\r\n- Can you change the code + so that Robin chooses a number between 1 & 20?\r\n\r\n<br/>\r\n<b>When you're + ready, press \"Run\" and play until you guess Robin's number!</b>" + maker workshop final_markdown_instruction: "# Challenge: Explore!\r\n\r\nNow + that you've tested the waters a bit, go explore the full extent of this tool. + On this level you'll see lots of new blocks and even some completely new + areas of functionality (like a database backend!). Feel free to go back to + previous levels for inspiration, or go off and building something completely + your own." + mike3bit_markdown_instruction: "# 3-Bit Color\r\n**Directions:**\r\n\r\n* We + start you with the 4x2 image Maddie was creating, but we've left out the + last few pixels. \r\n* Finish off the image by figuring out which colors are + missing and encoding them.\r\n" + mike3bitbird_markdown_instruction: "# 3-Bit Color\r\nHere's an example of + an image made with 3-bit color. Try changing it to understand how it works. + \r\n\r\n*If you want to reset the image, press \"Start Over\".*\r\n" + mike3bitfreeplay_markdown_instruction: "# 3-Bit Color\r\n\r\nYou have one last + chance to experiment and get creative with the pixelation widget. Make something + awesome and share it with your classmates!\r\n\r\n* *Hint:* You can copy and + paste the value of a pixel to use it repeatedly." + mike3bitmario_markdown_instruction: "# 3-Bit Color\r\n \r\n**Challenge:** \r\n\r\nA + careless binary coder typed in ONE extra 0 or 1 somewhere within this image's + data. The extra bit that is causing Mario to glitch out! \r\n\r\nDelete the + extra bit to restore Mario back to normal!\r\n\r\n![](https://images.code.org/8b7c17ba204a1a4d33e1bd6de7f01d76-image-1477306657312.54.57 + AM.png)" + multi-lesson Teaching and Student Support Plan_markdown_instruction: "<br><br>\r\n> + **NOTE: before you start this task, make sure you’ve reviewed the lesson resources + in this module, and have a good sense of how the lesson works. If you haven’t + already reviewed the materials, do that now and come back to this task later.**\r\n\r\n# + Teaching and Student Support Plan\r\n\r\n## Task Description\r\n\r\nNow that + you have a better sense of this lessons in this sequence, let’s think about + the types of supports students will need in order to be successful. Since + the curriculum is based on inquiry learning, lessons feature activities that + engage students in discovering core concepts themselves. It’s important to + think through implementation plans and student support. In this task you will + make a plan for teaching and student support **for one of the lessons in this + sequence** that takes into account differentiation strategies and make-up + work for absent students. Your teaching and student support plan should cover + the following: \r\n\r\n\r\n- **Which lesson in the sequence are you discussing?** + \r\n\r\n- **Details on how you will implement and differentiate the lesson:**\r\n\r\n + - An outline of any changes you will need to make to the lesson to fit your + local constraints or context (for example: pacing and time, dealing with classroom + setup, etc). \r\n - An overview of the types of student needs you’ll likely + need to support in your classroom (for example: students who are struggling + to understand the underlying concept; students who are already familiar with + the concept, but still have room to learn more; etc)\r\n - Your plan for addressing + each of the needs outlined above (for example: integrating extension activities + or other materials for students who already know something about the topic)\r\n + - How will you address or emphasize the connection between lessons in this + sequence? \r\n\r\n<br>\r\n- **Plan for catching up absent students:**\r\n\r\n + - How will absent students catch up on activities they missed? \r\n - How + will you use the fact that the lessons in this sequence are related and build + on one another to address make-up work? \r\n\r\nYou can type out your teaching + and student support plan in the box below, or you can upload a word doc or + pdf file. \r\n\r\n## Getting Credit for Completing this Task\r\n\r\n#### Task + Review Details\r\n\r\nIf this module is listed as your “focus area”, then + your response to the prompt above will be shared anonymously and reviewed + by your peers, and you will review the work done by other teachers. Reviewers + will be looking for thoughtful and thorough answers that demonstrate that + you have spent time considering how the lesson will play out in your own classroom. + Reviewers will have an opportunity to give feedback on your submission, and + you can respond to that feedback and resubmit. \r\n\r\nIn order to get credit + for completing this task, two reviewers need to agree that you have responded + to the prompts fully. If reviewers don’t feel comfortable making a decision + about your task submission, they can elevate to a facilitator to review. You + will always have a chance to address feedback from your reviewers and resubmit + your task! Reviewer feedback will show up at the bottom of this page, once + it’s available. \r\n\r\n<br><br>" + name 'CSD U3 Keypress Boolean Predict'_markdown_instruction: "# Make a Prediction: + keyDown()\r\nThe `keyDown()` block is the first of a new set of blocks that + will let us get input from the user. This is the first step on our road to + actually making games! See if you can figure out how the `keyDown()` block + works.\r\n\r\nWhat do you think will happen when you run the program and press + the \"up\" arrow? Write your prediction below and then run the program to + see if your prediction was accurate." + playEventsK1_markdown_instruction: "This game is called \"Play Lab\".\r\n\r\nSee + if you can figure out what each block does." + playEventsK2_markdown_instruction: "Jorge wants to say \"Hi there.\"\r\n\r\nCan + you help?\r\n\r\n![](https://images.code.org/f32d285fa6f45e1f8d042c04c55f32c8-image-1467988839292.gif)" + playEventsK3_markdown_instruction: "Jorge wants to be scratched behind the + ears!\r\n\r\nCan you make it so that when you click Jorge he is happy?\r\n\r\n![](https://images.code.org/04fb37990455b215e0f20884363092d0-image-1467988943134.gif)" + playEventsK4_markdown_instruction: "Can you make it so that Jorge the dog chases + Robin the bird when you click the up arrow?\r\n\r\n![](https://images.code.org/2fbf6c793bb77a961fa7a52f27e4c59d-image-1467989013878.gif)" + playEventsK5_markdown_instruction: "Now add code so that Robin flies away when + you click the forward arrow.\r\n\r\n![](https://images.code.org/a7e224c5f13e39e5342011f8a76d3b6b-image-1467989101328.gif)" + playEventsK6_markdown_instruction: "Have Robin talk back to Jorge when you + click on her.\r\n\r\n![](https://images.code.org/fc80b1febbb7a472026b6bf2c535b2f4-image-1467989171517.gif)" + playEventsK7_markdown_instruction: "What else can you do in this fun scene?\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Conversation</strong> + - Have the sprites talk to eachother when you click on them.</li>\r\n <li><strong>Pinball</strong> + - Make one sprite play a noise when the other runs into it.</li>\r\n <li><strong>Arrows</strong> + - Write a program so when each arrow key is pressed, the sprite moves in that + direction!</li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>" + pre-assessment survey q24A_markdown_instruction: "What computer science skills + do you use in your everyday life? " + pre-assessment survey q25A_markdown_instruction: "If yes, what computer science + course(s) had you taken before your current computer science class? " + sample1_markdown_instruction: "Our adventurer wants to collect coins. But + she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many + as she can using just 4 blocks?" + sample10a_markdown_instruction: "<h4>You have helped the adventurer and her + bee! \r\nAs a reward, please stay and play around in my magical village. \r\n<br/>\r\n\r\nYou + should have everything you need to create a game of your own.</h4>" + sample4_markdown_instruction: "Our adventurer has found a stash of coins in + this cave.\r\n\r\nCan you help her grab as many as she can using just 7 blocks?" + sample6_markdown_instruction: "**Challenge:** Help bee get all of the nectar.\r\n\r\nThis + puzzle is meant to be hard. You may need to try lots of times." + sample8_markdown_instruction: "Look at this trove of coins! \r\n\r\nHow many + can you get the adventurer to grab?" + test externallink_markdown_instruction: "# Creative Commons\r\n\r\nHead to + the Creative Commons website to learn more about CC licensing models." + test peer review_markdown_instruction: "At this point you've seen 7 of the + 14 lessons from unit 1. Thinking about those lessons, and looking across the + other lessons in <a href=\"curriculum.code.org/csp/unit1/\" target=_blank>unit + 1</a> work with your partner to develop a set of recommendations for using + group work and peer learning in Unit 1. Your recommendations should include:\r\n\r\n- + Which lessons or activities provide opportunities for group work and peer + learning? \r\n- What recommendations do you have for using group work and + peer learning in Unit 1 lessons? \r\n\r\nUse the space below to record any + recommendations or commentary you have for others. Once you submit, another + participant will review chance to send you feedback! \r\n\r\n" + test_anonymous_student_survey_next_class_markdown_instruction: "What you will + do next after this class?" + test_anonymous_student_survey_why_class_markdown_instruction: "Why are you + doing this class? Give at least two reasons." + test_sarah_markdown_instruction: "hi" + test_sarah_freeresponse_markdown_instruction: "This is the question at hand...." + testing code callout_markdown_instruction: "# Click the link!\r\n[Show me where + the sprite moves](#triggercallout=code_triggered)\r\n" + the Journal of Peer Learning_markdown_instruction: "The following link is to + a journal out of Australia that focuses on publishing scholarly research that + investigates innovations in peer learning and the implementation and evaluations + of peer learning programs:" diff --git a/i18n/locales/source/dashboard/authored_hints.yml b/i18n/locales/source/dashboard/authored_hints.yml index 364ed6dcd978a..04ca764828d44 100644 --- a/i18n/locales/source/dashboard/authored_hints.yml +++ b/i18n/locales/source/dashboard/authored_hints.yml @@ -257,40 +257,6 @@ en: **360 / 6 = ?** 4-5 While Loops 8_authored_hint: 4-5_While_Loops_8_a: Each item will need its own `while` loop. - aE1_authored_hint: {} - aE2_authored_hint: - aE2_a: Notice that since the napkins are 20 pixels long, you'll need to jump 20 pixels before you start your next loop. - aE3_authored_hint: - aE3_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. - aE3_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" - aE3_c: When you're all done, your **nested loops** should be three repeats deep. - aE3_d: If your code becomes too confusing, you can always click "Start Over" and try again! - aE3alternate_authored_hint: - aE3alternate_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. - aE3alternate_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" - aE3alternate_c: When you're all done, your **nested loops** should be three repeats deep. - aE3alternate_d: If your code becomes too confusing, you can always click "Start Over" and try again! - aE3alternateB_authored_hint: - aE4alternateB_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. - aE4alternateB_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" - aE4alternateB_c: When you're all done, your **nested loops** should be three repeats deep. - aE4alternateB_d: If your code becomes too confusing, you can always click "Start Over" and try again! - aE4_authored_hint: - aE4_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. - aE4_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" - aE4_c: When you're all done, your **nested loops** should be three repeats deep. - aE4_d: If your code becomes too confusing, you can always click "Start Over" and try again! - aE5_authored_hint: {} - aE6_authored_hint: - aE6_a: |- - If there are 180 degrees in a semicircle and each loop the artist makes turns 3 degrees, how many times would you need to loop to draw half of a full circle? - - **180 ÷ 3 = ?** - aE7_authored_hint: - aE7_a: Draw the bottom half of a circle and then the top half of a circle to make one segment. - aE7_b: You will need 4 segments to complete this puzzle. - aE8_authored_hint: - aE8_a: "To make a square from your line, you will need to: \n- draw the line \n- use the curvy corner\n\nRepeat these steps 4 times." Artist Inspiration_authored_hint: brush_width: We set the brush width to 1, then the color to blue before we did anything else. double_loop: Try putting a `for loop` inside of a `repeat` loop. @@ -301,32 +267,6 @@ en: ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) - artistDebugVideo1_authored_hint: - courseA_artist_loops7_a: Can't figure out where to put the loop? Try writing the code step-by-step and look for a pattern. - artistFunctionsVideo1_authored_hint: {} - artistLoopsK2_authored_hint: - artistLoopsK2_a: If you want the loop to repeat more than 4 times, you can change the number at the top of the block. - artistLoopsK2gradek_artist_loops3_authored_hint: - artistLoopsK2_a: If you want the loop to repeat more than 4 times, you can change the number at the top of the block. - artistLoopsK3_authored_hint: - artistLoopsK3_a: Try using what you've learned about repeat blocks to complete this puzzle! - artistLoopsK4_authored_hint: - artistLoopsK4_a: Stuck? Try running the code to see which block is incorrect. - artistLoopsK5_authored_hint: - artistLoopsK5_a: All 4 of the starting blocks should go inside of your repeat block to solve this puzzle. - artistLoopsK6_authored_hint: - artistLoopsK6_a: Try running the code to see where there is a bug. - artistLoopsK7_authored_hint: - artistLoopsK7_a: All of the blocks you need for this puzzle are already in your workspace! - artistLoopsK8_authored_hint: - artistLoopsK8_a: Try running the code to see where there is a bug. - artistLoopsK9_authored_hint: - artistLoopsK9_a: This challenge uses FOUR loops, one right after another! - artistLoopsKA_authored_hint: - artistLoopsKA_a: Use the jump block to move forward without drawing a line. - artistLoopsKB_authored_hint: - artistLoopsKB_a: There should be 3 blocks inside of your loop to solve this puzzle. - artistLoopsKFP_authored_hint: {} Bergeron Robot Maze1_authored_hint: 2-3_Maze_1_a: To use a `move forward` block, drag it from the toolbar area out into the workspace and connect it to the `when run` block. Course 4 Artist 11_authored_hint: @@ -381,17 +321,17 @@ en: Course_4_Artist_For_Loops_inspire_b: Try a `for` loop that goes from 3 to 10 with an increment of 1. Course_4_Artist_For_Loops_inspire_c: There are two iterations of the same repeat loop inside the `for` loop, but the second repeat turns the opposite direction. Course_4_Artist_For_Loops_inspire_d: "**Solution:** \n\n![Solution](https://images.code.org/418dfd57794706de541f1c162911a6e2-image-1469641233597.png)" - Course 4 Artist Functions challenge_authored_hint: - Course_4_Artist_Functions_challenge_a: Part of understanding how to use functions is figuring out which ones you need, and which ones you don't. - Course_4_Artist_Functions_challenge_b: Use a `for loop`, then use its counter variable inside of a nested `repeat` loop. - Course_4_Artist_Functions_challenge_c: Each iteration, you should draw a square then jump forward. - Course_4_Artist_Functions_challenge_d: You will need to turn left by 90 degrees outside of your `repeat`, but still inside the `for loop`. Course 4 Artist Functions Inspiration_authored_hint: Course_4_Artist_Functions_Inspiration_a: Start with the code from the last puzzle and add an extra `turn right` of three degrees inside the repeat loop. Course_4_Artist_Functions_Inspiration_b: Try turning by more than 90 degrees outside of the `repeat loop`, but still inside the `for loop`. Course_4_Artist_Functions_Inspiration_c: |- **Solution:** ![Solution](https://images.code.org/0c94bcde33a00595aa099fea964ca80e-image-1469641309381.png) + Course 4 Artist Functions challenge_authored_hint: + Course_4_Artist_Functions_challenge_a: Part of understanding how to use functions is figuring out which ones you need, and which ones you don't. + Course_4_Artist_Functions_challenge_b: Use a `for loop`, then use its counter variable inside of a nested `repeat` loop. + Course_4_Artist_Functions_challenge_c: Each iteration, you should draw a square then jump forward. + Course_4_Artist_Functions_challenge_d: You will need to turn left by 90 degrees outside of your `repeat`, but still inside the `for loop`. Course 4 Artist Inspire_authored_hint: Course_4_Artist_Inspire_a: After you complete one square, try jumping forward half of it's length before turning and making another. Course_4_Artist_Inspire_b: Each square and jump is repeated four times (using a left turn inbetween) to make a full pinwheel-like unit. @@ -588,6 +528,181 @@ en: **Solution:** ![Solution](https://images.code.org/72f0ce970999deffe87bd93af0db959f-image-1469642214408.png) + Farmer for Authored Hint testing_authored_hint: + first_hint: |- + This is the first hint. + + It has *some* **basic** `markup` + second_hint: |- + This is the second hint. It has an image. + + ![](https://images.code.org/cab43107265a683a6216e18faab2353f-image-1452027548372.png) + last_hint: This is the third and final hint. It doesn't have anything special. + Farmer for TTS testing_authored_hint: + first_hint: |- + This is the first hint. + + It has *some* **basic** `markup` + second_hint: |- + This is the second hint. It has an image. + + ![](https://images.code.org/cab43107265a683a6216e18faab2353f-image-1452027548372.png) + last_hint: This is the third and final hint. It doesn't have anything special. + Harvesting_authored_hint: + pointer_harvester_test: What kind of block can I use to check something and make a decision? + Inspirational Artwork_authored_hint: + brush_width: We set the brush width to 1, then the color to blue before we did anything else. + double_loop: Try putting a `for loop` inside of a `repeat` loop. + specifics: "The `for loop` runs from three to seventeen for each of the six \"petals\" before moving on to create the next, drawing shapes with only an odd number of sides.\n \nThe `set alpha` block uses division to fade the color as the counter gets higher." + after: When you're done with each "petal", be sure to `move forward` 20 pixels before you make a 60 degree rotation. + solution: |- + **Solution** + + + ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) + InspirationalArtwork_authored_hint: {} + K2.0 sequence 1_authored_hint: + K2.0_sequence_1_a: This program is missing one block. Can you figure out which one? + K2.0 sequence 10_authored_hint: + K2.0_sequence_10_a: If you're having trouble, try writing down the steps on a piece of paper first. + K2.0_sequence_10_b: You will need three different kinds of arrows to solve this puzzle. + K2.0 sequence 12_authored_hint: + K2.0_sequence_12_a: If the pig isn't moving far enough, try adding another block. + K2.0 sequence 2_authored_hint: + K2.0_sequence_2_a: One of the blocks is moving the bird in the wrong direction. Can you figure out which one and replace it with the correct block? + K2.0 sequence 3_authored_hint: + K2.0_sequence_3_a: If you are having trouble, try to figure out what the correct path is and then remove the block that doesn't fit. + K2.0 sequence 4_authored_hint: + K2.0_sequence_4_a: Use 2 different arrow blocks to solve this puzzle! + K2.0 sequence 5_authored_hint: + K2.0_sequence_5: Your final code should have three movement blocks. + K2.0 sequence 6_authored_hint: + K2.0_sequence_6_a: There is 1 block that you need to add to move the bird to the pig. + K2.0_sequence_6_b: If you can't figure out what to do, try drawing the puzzle on paper and use your finger to figure out which way to move. + K2.0 sequence 7_authored_hint: + K2.0_sequence_7_a: If you're stuck, try drawing the image on paper to see how the bird should move. + K2.0 sequence 8_authored_hint: + K2.0_sequence_8_a: Stuck? Try tracing the bird's path with your finger. + K2.0 sequence 9_authored_hint: + K2.0_sequence_9_a: If you're having trouble, try writing down the steps on a piece of paper first. + K2.0_sequence_9_b: You will need to go three different directions to solve this puzzle. + K2.0 sequence FP_authored_hint: + K2.0_sequence_FP_a: If the path you need is unclear, use your finger to trace your way from the bird to the pig. + K2.0 sequence pre_authored_hint: + K2.0_sequence_pre_a: If you are having trouble getting the bird to move, make sure blocks are connected under `when run`. + MikeStar_authored_hint: + hint1: Don't give up! + MikeStarHard_authored_hint: + hint1: Don't give up! + MikeStarNested_authored_hint: + hint1: Don't give up! + NEW Course 4 Artist Functions 13_authored_hint: + NEW_Course_4_Artist_Functions_13_a: Edit the `draw a line of squares` function so that you don't have to call it twice. + NEW_Course_4_Artist_Functions_13_b: Notice, you'll have to move forward by 60 pixels and turn 144 degrees. + NEW_Course_4_Artist_Functions_13_c: What code would you need if you were going to try to make a star with regular lines? + NEW Course 4 Artist Functions 4_authored_hint: + NEW_Course_4_Artist_Functions_4_a: You will have to use a `turn right by 120 degrees` block after each square. + NEW Course 4 Artist Functions 9_authored_hint: + NEW_Course_4_Artist_Functions_9_a: Try running the code before you add any blocks. What makes the drawing look a little off? + NEW_Course_4_Artist_Functions_9_b: If you can't quite put your finger on what's going wrong, try slowing down the artist's by moving the slider to the left. + NEW Course 4 Artist Params 11_authored_hint: + NEW_Course_4_Artist_Params_11_a: There is more than one number that needs to be replaced by a variable inside the function. + NEW Course 4 Artist Params 13_authored_hint: + NEW_Course_4_Artist_Params_13_a: 'You will need to divide the *perimeter* by the number of sides in order to keep the shapes the same size overall. ' + NEW Course 4 Artist Params 14_authored_hint: + NEW_Course_4_Artist_Params_14_a: It's okay to run the program a few times to figure out how the function works with different parameters. + NEW Course 4 Artist Params inspire_authored_hint: + brush_width: We set the brush width to 1, then the color to blue before we did anything else. + double_loop: Try putting a `for loop` inside of a `repeat` loop. + specifics: "The `for loop` runs from three to seventeen for each of the six \"petals\" before moving on to create the next, drawing shapes with only an odd number of sides.\n \nThe `set alpha` block uses division to fade the color as the counter gets higher." + after: When you're done with each "petal", be sure to `move forward` 20 pixels before you make a 60 degree rotation. + solution: |- + **Solution** + + + ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) + NEW Course 4 Bee For Loops 10a_authored_hint: + NEW_Course_4_Bee_For_Loops_10a_a: Can you find a pattern between the number of steps you need to take and the number of nectars to gather? + NEW_Course_4_Bee_For_Loops_10a_b: You'll need to have 2 repeats, one will use a math block. + NEW Course 4 Bee For Loops 7_authored_hint: + NEW_Course_4_Bee_For_Loops_7_a: |- + Try doing some math with the counter variable. + + What do you have to do to the counter at each flower to equal the amount of nectar you need to collect? + NEW Course 4 Bee For Loops 8_authored_hint: + NEW_Course_4_Bee_For_Loops_8_a: "If your loop is counting up, the increment is added to your counter variable each time through. \n\nWhat do you need to add to each number to get the number after it?" + Pattern Bee 1_authored_hint: + conditional_pointer: |- + Start by thinking about this part: what's different each step of the way? What kind of block can you use to make a *decision* about whether you're at a flower or honeycomb? + + ![](https://images.code.org/a4883ea91c2f879ca1bb281d7944ed87-image-1471477752512.48.07 PM.png) + turn_at_honeycomb_pointer: Other than making honey, do you see anything different that you have to do at each honeycomb? + Planning Farmer_authored_hint: + conditional_pointer: |- + Start by thinking about this part: what's different each step of the way? What kind of block can you use to make a *decision* about whether you're at a flower or honeycomb? + + ![](https://images.code.org/a4883ea91c2f879ca1bb281d7944ed87-image-1471477752512.48.07 PM.png) + turn_at_honeycomb_pointer: Other than making honey, do you see anything different that you have to do at each honeycomb? + aE1_authored_hint: {} + aE2_authored_hint: + aE2_a: Notice that since the napkins are 20 pixels long, you'll need to jump 20 pixels before you start your next loop. + aE3_authored_hint: + aE3_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. + aE3_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" + aE3_c: When you're all done, your **nested loops** should be three repeats deep. + aE3_d: If your code becomes too confusing, you can always click "Start Over" and try again! + aE3alternate_authored_hint: + aE3alternate_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. + aE3alternate_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" + aE3alternate_c: When you're all done, your **nested loops** should be three repeats deep. + aE3alternate_d: If your code becomes too confusing, you can always click "Start Over" and try again! + aE3alternateB_authored_hint: + aE4alternateB_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. + aE4alternateB_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" + aE4alternateB_c: When you're all done, your **nested loops** should be three repeats deep. + aE4alternateB_d: If your code becomes too confusing, you can always click "Start Over" and try again! + aE4_authored_hint: + aE4_a: After you run your **nested loop** from the last stage, you need to jump back to the start of the line. + aE4_b: "Don't forget to move the artist down before you start a new row of shapes! \n\nTo move the artist down and get him facing the right way again, make sure to:\n- Turn 90 degrees (to face down)\n- Jump 20 pixels (to get to new row)\n- Turn back 90 degrees (to face right again)" + aE4_c: When you're all done, your **nested loops** should be three repeats deep. + aE4_d: If your code becomes too confusing, you can always click "Start Over" and try again! + aE5_authored_hint: {} + aE6_authored_hint: + aE6_a: |- + If there are 180 degrees in a semicircle and each loop the artist makes turns 3 degrees, how many times would you need to loop to draw half of a full circle? + + **180 ÷ 3 = ?** + aE7_authored_hint: + aE7_a: Draw the bottom half of a circle and then the top half of a circle to make one segment. + aE7_b: You will need 4 segments to complete this puzzle. + aE8_authored_hint: + aE8_a: "To make a square from your line, you will need to: \n- draw the line \n- use the curvy corner\n\nRepeat these steps 4 times." + artistDebugVideo1_authored_hint: + courseA_artist_loops7_a: Can't figure out where to put the loop? Try writing the code step-by-step and look for a pattern. + artistFunctionsVideo1_authored_hint: {} + artistLoopsK2_authored_hint: + artistLoopsK2_a: If you want the loop to repeat more than 4 times, you can change the number at the top of the block. + artistLoopsK2gradek_artist_loops3_authored_hint: + artistLoopsK2_a: If you want the loop to repeat more than 4 times, you can change the number at the top of the block. + artistLoopsK3_authored_hint: + artistLoopsK3_a: Try using what you've learned about repeat blocks to complete this puzzle! + artistLoopsK4_authored_hint: + artistLoopsK4_a: Stuck? Try running the code to see which block is incorrect. + artistLoopsK5_authored_hint: + artistLoopsK5_a: All 4 of the starting blocks should go inside of your repeat block to solve this puzzle. + artistLoopsK6_authored_hint: + artistLoopsK6_a: Try running the code to see where there is a bug. + artistLoopsK7_authored_hint: + artistLoopsK7_a: All of the blocks you need for this puzzle are already in your workspace! + artistLoopsK8_authored_hint: + artistLoopsK8_a: Try running the code to see where there is a bug. + artistLoopsK9_authored_hint: + artistLoopsK9_a: This challenge uses FOUR loops, one right after another! + artistLoopsKA_authored_hint: + artistLoopsKA_a: Use the jump block to move forward without drawing a line. + artistLoopsKB_authored_hint: + artistLoopsKB_a: There should be 3 blocks inside of your loop to solve this puzzle. + artistLoopsKFP_authored_hint: {} courseA_artist_loops10_authored_hint: courseA_artist_loops10_a: Use the jump block to move forward without drawing a line. courseA_artist_loops11_authored_hint: @@ -814,6 +929,39 @@ en: This is the block you need to make the knight vanish: ![](https://images.code.org/f468611cbe51e1cb35531334f625395a-image-1475624478204.41.02.png) + courseC_PlayLab_events3_authored_hint: + courseC_PlayLab_events3_a: You only need to move Jorge to the right by about 25 pixels to solve this puzzle. + courseC_PlayLab_events4_authored_hint: + courseC_PlayLab_events4_b: Jorge needs to move right 100 pixels to reach the cat. + courseC_PlayLab_events4_a: You will need to attach a block to the `when actor touches` event to solve this puzzle. + courseC_PlayLab_events5_authored_hint: + courseC_PlayLab_events5_a: You will need to click the dropdown menu in the `actor say` block to find the text "What's new?" + courseC_PlayLab_events7_authored_hint: + courseC_PlayLab_events7_a: 'Use both the `move actor 2 up 400 pixels` block and the `move actor 2 down 400 pixels` block inside the `repeat forever` loop to solve this puzzle. ' + courseC_PlayLab_events8_authored_hint: + courseC_PlayLab_events8_a: You will need to connect blocks to the `when actor touches` block to make this happen correctly. + courseC_PlayLab_events8_b: The `actor say` and `play sound` blocks in the toolbox should help you out! + courseC_PlayLab_events9_authored_hint: + courseC_PlayLab_events9_a: The `score point` block will help you to solve this puzzle. + courseC_PlayLab_eventsA_authored_hint: + courseC_PlayLab_eventsA_a: Use the `set background` block and the `set actor to a ____ speed` block to solve this puzzle. + courseC_PlayLab_eventsFP_authored_hint: + idea1: |- + *Need an idea?* + + **Who's there?** Make characters appear with random images, so no one knows who's showing up next. + + ![](https://images.code.org/a56e03479801995d93ad5a4e4384a79e-image-1475340154498.gif) + idea2: |- + *Need an idea?* + + **Going on an Adventure** - Change the background, then have the characters talk about where they are now. + + ![](https://images.code.org/010c4d919f841d6049caf9211ab65ccc-image-1475340583052.gif) + idea3: |- + *Need an idea?* + + **Pinball** - Make one character move using the arrow keys (use `when up arrow`, `when down arrow` blocks), then play random sounds when it collides with other characters on the screen. courseC_artist_prog1_authored_hint: {} courseC_artist_prog2_authored_hint: courseC_artist_prog2_a: If you use the block to have me `move forward by 100 pixels`, I will draw a line automatically. @@ -958,39 +1106,6 @@ en: courseC_maze_programming8_authored_hint: {} courseC_maze_programming8_predict1_authored_hint: {} courseC_maze_programming9_authored_hint: {} - courseC_PlayLab_events3_authored_hint: - courseC_PlayLab_events3_a: You only need to move Jorge to the right by about 25 pixels to solve this puzzle. - courseC_PlayLab_events4_authored_hint: - courseC_PlayLab_events4_b: Jorge needs to move right 100 pixels to reach the cat. - courseC_PlayLab_events4_a: You will need to attach a block to the `when actor touches` event to solve this puzzle. - courseC_PlayLab_events5_authored_hint: - courseC_PlayLab_events5_a: You will need to click the dropdown menu in the `actor say` block to find the text "What's new?" - courseC_PlayLab_events7_authored_hint: - courseC_PlayLab_events7_a: 'Use both the `move actor 2 up 400 pixels` block and the `move actor 2 down 400 pixels` block inside the `repeat forever` loop to solve this puzzle. ' - courseC_PlayLab_events8_authored_hint: - courseC_PlayLab_events8_a: You will need to connect blocks to the `when actor touches` block to make this happen correctly. - courseC_PlayLab_events8_b: The `actor say` and `play sound` blocks in the toolbox should help you out! - courseC_PlayLab_events9_authored_hint: - courseC_PlayLab_events9_a: The `score point` block will help you to solve this puzzle. - courseC_PlayLab_eventsA_authored_hint: - courseC_PlayLab_eventsA_a: Use the `set background` block and the `set actor to a ____ speed` block to solve this puzzle. - courseC_PlayLab_eventsFP_authored_hint: - idea1: |- - *Need an idea?* - - **Who's there?** Make characters appear with random images, so no one knows who's showing up next. - - ![](https://images.code.org/a56e03479801995d93ad5a4e4384a79e-image-1475340154498.gif) - idea2: |- - *Need an idea?* - - **Going on an Adventure** - Change the background, then have the characters talk about where they are now. - - ![](https://images.code.org/010c4d919f841d6049caf9211ab65ccc-image-1475340583052.gif) - idea3: |- - *Need an idea?* - - **Pinball** - Make one character move using the arrow keys (use `when up arrow`, `when down arrow` blocks), then play random sounds when it collides with other characters on the screen. courseC_puppy_loops10_authored_hint: courseC_puppy_loops9_1: I need to move two or three time between each turn. courseC_puppy_loops11_authored_hint: {} @@ -1276,21 +1391,6 @@ en: Where do things go wrong? courseD_debugging_6_b: It looks like all of the right steps are here, you just need more of them. How can you repeat the `get nectar` and `make honey` actions multiple times? - courseD_farmer_conditionals10_authored_hint: {} - courseD_farmer_conditionals4_authored_hint: - courseD_farmer_conditionals4_a: Instead of using a `repeat` loop, use a `while` loop to keep digging until the pile is gone. - courseD_farmer_conditionals5_authored_hint: - courseD_farmer_conditionals5a: Try nesting a `while` loop inside of a `repeat` loop. - courseD_farmer_conditionals6_authored_hint: - courseD_farmer_conditionals6_a: Make sure you're using the `while` loop to figure out how many times to fill each hole. - courseD_farmer_conditionals6_b: Notice that the farmer needs to move forward and down several times in a stair-step pattern. - courseD_farmer_conditionals7_authored_hint: - courseD_farmer_conditionals8_a: The `while path ahead` block lets you keep going, even if you don't know how many squares are in a path. - courseD_farmer_conditionals8_authored_hint: - courseD_farmer_conditionals8_a: You are going to need to use more than one `while` loop. - courseD_farmer_conditionals8_b: Every hole is at the end of a path, so use `while path ahead` before using `while there is a hole`. - courseD_farmer_conditionals8_c: Notice that you need to repeat the `while path ahead`, `while there is a hole` code six times. - courseD_farmer_conditionals9_authored_hint: {} courseD_farmer_condLoops1_authored_hint: courseD_farmer_condLoops1_a: You will need to look for corn 5 times, using a repeat loop. courseD_farmer_condLoops1_b: Make sure to use an `if at corn` block or you might try to pick something that's not there! @@ -1326,6 +1426,21 @@ en: courseD_farmer_condLoops9_a: You shouldn't need the `while path ahead` loop this time. courseD_farmer_condLoops9_predict1_authored_hint: courseD_farmer_condLoops9_a: You shouldn't need the `while path ahead` loop this time. + courseD_farmer_conditionals10_authored_hint: {} + courseD_farmer_conditionals4_authored_hint: + courseD_farmer_conditionals4_a: Instead of using a `repeat` loop, use a `while` loop to keep digging until the pile is gone. + courseD_farmer_conditionals5_authored_hint: + courseD_farmer_conditionals5a: Try nesting a `while` loop inside of a `repeat` loop. + courseD_farmer_conditionals6_authored_hint: + courseD_farmer_conditionals6_a: Make sure you're using the `while` loop to figure out how many times to fill each hole. + courseD_farmer_conditionals6_b: Notice that the farmer needs to move forward and down several times in a stair-step pattern. + courseD_farmer_conditionals7_authored_hint: + courseD_farmer_conditionals8_a: The `while path ahead` block lets you keep going, even if you don't know how many squares are in a path. + courseD_farmer_conditionals8_authored_hint: + courseD_farmer_conditionals8_a: You are going to need to use more than one `while` loop. + courseD_farmer_conditionals8_b: Every hole is at the end of a path, so use `while path ahead` before using `while there is a hole`. + courseD_farmer_conditionals8_c: Notice that you need to repeat the `while path ahead`, `while there is a hole` code six times. + courseD_farmer_conditionals9_authored_hint: {} courseD_farmer_while10_authored_hint: {} courseD_farmer_while10_predict2_authored_hint: {} courseD_farmer_while4_authored_hint: @@ -1734,26 +1849,6 @@ en: triangle_geometry_hint: 'Remember: an equilateral triangle has three sides, with a 60 degree turn between each!' repeat_pointer: You have to draw a side and turn 3 times...what block can you use to run the same instructions many times? repeat_bottom_out: Use a `repeat 3 times` block! - Farmer for Authored Hint testing_authored_hint: - first_hint: |- - This is the first hint. - - It has *some* **basic** `markup` - second_hint: |- - This is the second hint. It has an image. - - ![](https://images.code.org/cab43107265a683a6216e18faab2353f-image-1452027548372.png) - last_hint: This is the third and final hint. It doesn't have anything special. - Farmer for TTS testing_authored_hint: - first_hint: |- - This is the first hint. - - It has *some* **basic** `markup` - second_hint: |- - This is the second hint. It has an image. - - ![](https://images.code.org/cab43107265a683a6216e18faab2353f-image-1452027548372.png) - last_hint: This is the third and final hint. It doesn't have anything special. grade1_adventurer_loops10_authored_hint: grade1_adventurer_loops10_a: You'll need three `repeat` loops to solve this puzzle. grade1_adventurer_loops2_authored_hint: @@ -1847,8 +1942,6 @@ en: grade2_CaringForNewPet_6_a: You don't have to code the whole solution at once! Try running the code as you go to make sure it works at each step. grade2_CaringForNewPet_7D_authored_hint: grade2_CaringForNewPet_7D_a: Don't forget to use the "Step" button to go through block by block and look for errors. - grade2_collector_2_authored_hint: - hint1: You can use four `move forward` blocks or use the `repeat 4 times` block to make your program shorter. grade2_MakeDogTag_1_authored_hint: 2-3_Artist_1_new_a: If you use the block to have me `move forward by 100 pixels`, I will draw a line automatically. 2-3_Artist_1_new_b: Having trouble turning the corner? Use the `turn right 90 degrees` block. @@ -1873,6 +1966,31 @@ en: ![](https://images.code.org/e5c7492f509dd41efe2888c7e7895c28-image-1461177002636.29.02.png) 2-3_Artist_Loops_New_11_b: Your new turn should go at the **end** of the code inside the loop. grade2_MakeDogTag_BFP_authored_hint: {} + grade2_PuppyLoops_10_authored_hint: + 2-3_Artist_Debugging_8_a: |- + How many times did my shape repeat? + + How many times *should* the shape repeat? + + Where can you change that in the program? + grade2_PuppyLoops_3_authored_hint: + hint1: This puzzle is very similar to the last one. + hint2: Use a `repeat 5 times` block to create the loop. + hint3: Place a `move forward` block inside the `repeat block`. + grade2_PuppyLoops_5_authored_hint: + hint1: The best solution uses two `move forward` commands and one loop. + grade2_PuppyLoops_6_authored_hint: + 2-3_Maze_16_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. + 2-3_Maze_16_b: "To put lots of blocks inside a `repeat` loop, just drag a loop out into the workspace, then drag all of the blocks from the starting program inside of it. \n\nConnect it all back to the `when run` block and you're good to go!" + grade2_PuppyLoops_7_authored_hint: + 2-3_Maze_Loops_17_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. + 2-3_Maze_Loops_17_b: Did the starting code get deleted? Click `start over` to get it back! + grade2_PuppyLoops_8_authored_hint: + 2-3_Artist_Debugging_2_a: 'Hint: Each whisker is 75 pixels long.' + grade2_PuppyLoops_9_authored_hint: + 2-3_Artist_Debugging_7_a: What happens if you have the artist move or jump backward after he draws the first line? + grade2_collector_2_authored_hint: + hint1: You can use four `move forward` blocks or use the `repeat 4 times` block to make your program shorter. grade2_maze_debuggingFP_authored_hint: {} grade2_maze_intro4_authored_hint: hint_1: Connect a "move forward" block to the bottom of the program. @@ -1912,49 +2030,12 @@ en: 2-3_Maze_16_b: "To put lots of blocks inside a `repeat` loop, just drag a loop out into the workspace, then drag all of the blocks from the starting program inside of it. \n\nConnect it all back to the `when run` block and you're good to go!" grade2_puppy_loops7_authored_hint: 2-3_Maze_Loops_17_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. - grade2_PuppyLoops_10_authored_hint: - 2-3_Artist_Debugging_8_a: |- - How many times did my shape repeat? - - How many times *should* the shape repeat? - - Where can you change that in the program? - grade2_PuppyLoops_3_authored_hint: - hint1: This puzzle is very similar to the last one. - hint2: Use a `repeat 5 times` block to create the loop. - hint3: Place a `move forward` block inside the `repeat block`. - grade2_PuppyLoops_5_authored_hint: - hint1: The best solution uses two `move forward` commands and one loop. - grade2_PuppyLoops_6_authored_hint: - 2-3_Maze_16_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. - 2-3_Maze_16_b: "To put lots of blocks inside a `repeat` loop, just drag a loop out into the workspace, then drag all of the blocks from the starting program inside of it. \n\nConnect it all back to the `when run` block and you're good to go!" - grade2_PuppyLoops_7_authored_hint: - 2-3_Maze_Loops_17_a: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. - 2-3_Maze_Loops_17_b: Did the starting code get deleted? Click `start over` to get it back! - grade2_PuppyLoops_8_authored_hint: - 2-3_Artist_Debugging_2_a: 'Hint: Each whisker is 75 pixels long.' - grade2_PuppyLoops_9_authored_hint: - 2-3_Artist_Debugging_7_a: What happens if you have the artist move or jump backward after he draws the first line? - grade3_bee_conditionals_new1a_authored_hint: - grade3_bee_conditionals_new1a_a: Be sure to use an `if` statement to check each space to see if it has a flower or nothing. - grade3_bee_conditionals_new2a_authored_hint: - grade3_bee_conditionals_new2a_a: You can still treat every space as if there is a cloud over it, even though you can see the whole path. - grade3_bee_conditionals_new2a_b: 'Use an `if` statement inside your loop to check each space. ' - grade3_bee_conditionals_new3a_authored_hint: - grade3_bee_conditionals_new3a_a: In this puzzle, you know that each square has either a flower or a honeycomb. That means you can repeat your `if/else` conditional at each square. - grade3_bee_Conditionals_new4_authored_hint: - grade3_bee_Conditionals_new4_a: Don't forget that you can use loops for shorter code! - grade3_bee_conditionals_quantum1_authored_hint: - grade3_bee_conditionals_quantum1_a: You will need to use an `if` block to check to see if there is a flower beneath the cloud before you try to get nectar. - grade3_bee_conditionals_quantum2_authored_hint: - grade3_bee_conditionals_quantum2_a: Sometimes a flower will be there, sometimes it won't. If you want your code to run in both cases, make sure to use an `if` statement. - grade3_bee_conditionals_quantum3_authored_hint: - grade3_bee_conditionals_quantum3: Make sure to use an `if` statement to check for honeycomb beneath each cloud. - grade3_bee_conditionals_quantum4_authored_hint: - remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if/else`) to solve the challenge." - grade3_bee_conditionals_quantum5_authored_hint: + grade3_ConditionalsElse_4_authored_hint: + remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." + grade3_ConditionalsElse_5_authored_hint: + remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." + grade3_ConditionalsElse_TeacherIDo_authored_hint: remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." - grade3_bee_conditionals_quantum5_a: This puzzle is tricky, because you can't check blank squares, nectar *and* honey with a single conditional. grade3_Conditionals_10 BAD_authored_hint: 4-5_Bee_Nested_Loops_Rows_a: Try treating this puzzle like a long rectangle where the bee needs to move forward, then turn left several times to complete the path. grade3_Conditionals_11_authored_hint: @@ -1969,12 +2050,6 @@ en: 2-3_Bee_Conditionals_6_a: 'Remember: Purple flowers change between 0 and 1 nectar when you run your program!' grade3_Conditionals_TeacherIDo_authored_hint: 2-3_Bee_Conditionals_6_a: 'Remember: Purple flowers change between 0 and 1 nectar when you run your program!' - grade3_ConditionalsElse_4_authored_hint: - remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." - grade3_ConditionalsElse_5_authored_hint: - remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." - grade3_ConditionalsElse_TeacherIDo_authored_hint: - remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." grade3_Debugging_1_authored_hint: 2-3_Bee_Debugging_1_a: Once you find and fix the incorrect block, do you see any patterns that could be made more simple using a `repeat` loop? grade3_Debugging_10_authored_hint: @@ -2043,38 +2118,6 @@ en: 2-3_Bee_Loops_2_a: You should end up with four blocks inside your loop. grade3_Loops_9_authored_hint: 2-3_Bee_Loops_3_a: You should have 6 blocks inside your loop. - grade3_maze_loops1_authored_hint: - grade3_maze_loops1_a: Try using the "Step" button to find errors. - grade3_maze_loops2_authored_hint: - grade3_maze_loops2_a: |- - Try using this path through the maze. - - ![](https://images.code.org/6a8b4b97a8eef813d8a827b0b7b2d36b-image-1480446509692.05.22.png) - grade3_maze_loops2_b: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. - grade3_maze_loops2_c: Try using one `repeat` loop inside of another to cut down on the amount of code you need. - grade3_maze_loops2a_authored_hint: - grade3_maze_loops2a_a: To solve this puzzle, you will need to "nest" one `repeat` loop inside of another `repeat` loop. - grade3_maze_loops3_authored_hint: - 2-3_Maze_Loops_19_a: If you are stuck, try writing out the code out on paper without loops first and look for patterns. - 2-3_Maze_Loops_19_b: Nesting `repeat` loops can help decrease the number of blocks used. - 2-3_Maze_Loops_19_c: It will take two sets of nested `repeat` loops to solve this puzzle. - grade3_maze_loops4_authored_hint: - 2-3_Maze_Loops_20_a: Look for a stair-step pattern in this maze to find where a nested loop can be used. - grade3_maze_loops5_authored_hint: - 2-3_Maze_Loops_21_a: If you are having trouble finding the stair-step pattern, try covering the blocked paths with your finger. - grade3_robotFarmer_ConditionalsIntro_10a_authored_hint: {} - grade3_robotFarmer_ConditionalsIntro_11a_authored_hint: {} - grade3_robotFarmer_ConditionalsIntro_5_authored_hint: - grade3_robotFarmer_ConditionalsIntro_5a: Try nesting a `while` loop inside of a `repeat` loop. - grade3_robotFarmer_ConditionalsIntro_7_authored_hint: - grade3_robotFarmer_ConditionalsIntro_7_a: Make sure you're using the `while` loop to figure out how many times to fill each hole. - grade3_robotFarmer_ConditionalsIntro_7_b: Notice that the farmer needs to move forward and down several times in a stair-step pattern. - grade3_robotFarmer_ConditionalsIntro_8_authored_hint: - grade3_robotFarmer_ConditionalsIntro_8_a: The `while path ahead` block lets you keep going, even if you don't know how many squares are in a path. - grade3_robotFarmer_ConditionalsIntro_9_authored_hint: - grade3_robotFarmer_ConditionalsIntro_9_a: You are going to need to use more than one `while` loop. - grade3_robotFarmer_ConditionalsIntro_9_b: Every hole is at the end of a path, so use `while path ahead` before using `while there is a hole`. - grade3_robotFarmer_ConditionalsIntro_9_c: Notice that you need to repeat the `while path ahead`, `while there is a hole` code six times. grade3_RunningFarm_1_authored_hint: grade3_RunningFarm_1_a: You will need to look for corn 5 times, using a repeat loop. grade3_RunningFarm_1_b: Make sure to use an `if at corn` block or you might try to pick something that's not there! @@ -2108,6 +2151,58 @@ en: ![](https://images.code.org/ba8b8c624f21ade9ac823b045085c435-image-1479364378437.png) grade3_RunningFarm_7_b: Try using `when path ahead` to keep the farmer moving the right number of steps. grade3_RunningFarm_7_c: 'Use nested `if` statements and `while there is` loops to check each space for corn and lettuce, then pick only a single pumpkin at the end. ' + grade3_bee_Conditionals_new4_authored_hint: + grade3_bee_Conditionals_new4_a: Don't forget that you can use loops for shorter code! + grade3_bee_conditionals_new1a_authored_hint: + grade3_bee_conditionals_new1a_a: Be sure to use an `if` statement to check each space to see if it has a flower or nothing. + grade3_bee_conditionals_new2a_authored_hint: + grade3_bee_conditionals_new2a_a: You can still treat every space as if there is a cloud over it, even though you can see the whole path. + grade3_bee_conditionals_new2a_b: 'Use an `if` statement inside your loop to check each space. ' + grade3_bee_conditionals_new3a_authored_hint: + grade3_bee_conditionals_new3a_a: In this puzzle, you know that each square has either a flower or a honeycomb. That means you can repeat your `if/else` conditional at each square. + grade3_bee_conditionals_quantum1_authored_hint: + grade3_bee_conditionals_quantum1_a: You will need to use an `if` block to check to see if there is a flower beneath the cloud before you try to get nectar. + grade3_bee_conditionals_quantum2_authored_hint: + grade3_bee_conditionals_quantum2_a: Sometimes a flower will be there, sometimes it won't. If you want your code to run in both cases, make sure to use an `if` statement. + grade3_bee_conditionals_quantum3_authored_hint: + grade3_bee_conditionals_quantum3: Make sure to use an `if` statement to check for honeycomb beneath each cloud. + grade3_bee_conditionals_quantum4_authored_hint: + remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if/else`) to solve the challenge." + grade3_bee_conditionals_quantum5_authored_hint: + remember_quantum: "**Remember:** This puzzle changes each time it's run. \n\nYou'll want to use a conditional block (`if` or `if/else`) to solve the challenge." + grade3_bee_conditionals_quantum5_a: This puzzle is tricky, because you can't check blank squares, nectar *and* honey with a single conditional. + grade3_maze_loops1_authored_hint: + grade3_maze_loops1_a: Try using the "Step" button to find errors. + grade3_maze_loops2_authored_hint: + grade3_maze_loops2_a: |- + Try using this path through the maze. + + ![](https://images.code.org/6a8b4b97a8eef813d8a827b0b7b2d36b-image-1480446509692.05.22.png) + grade3_maze_loops2_b: If the pattern is hard to see, try coding it all out first and see what things repeat over and over before you put the loops in. + grade3_maze_loops2_c: Try using one `repeat` loop inside of another to cut down on the amount of code you need. + grade3_maze_loops2a_authored_hint: + grade3_maze_loops2a_a: To solve this puzzle, you will need to "nest" one `repeat` loop inside of another `repeat` loop. + grade3_maze_loops3_authored_hint: + 2-3_Maze_Loops_19_a: If you are stuck, try writing out the code out on paper without loops first and look for patterns. + 2-3_Maze_Loops_19_b: Nesting `repeat` loops can help decrease the number of blocks used. + 2-3_Maze_Loops_19_c: It will take two sets of nested `repeat` loops to solve this puzzle. + grade3_maze_loops4_authored_hint: + 2-3_Maze_Loops_20_a: Look for a stair-step pattern in this maze to find where a nested loop can be used. + grade3_maze_loops5_authored_hint: + 2-3_Maze_Loops_21_a: If you are having trouble finding the stair-step pattern, try covering the blocked paths with your finger. + grade3_robotFarmer_ConditionalsIntro_10a_authored_hint: {} + grade3_robotFarmer_ConditionalsIntro_11a_authored_hint: {} + grade3_robotFarmer_ConditionalsIntro_5_authored_hint: + grade3_robotFarmer_ConditionalsIntro_5a: Try nesting a `while` loop inside of a `repeat` loop. + grade3_robotFarmer_ConditionalsIntro_7_authored_hint: + grade3_robotFarmer_ConditionalsIntro_7_a: Make sure you're using the `while` loop to figure out how many times to fill each hole. + grade3_robotFarmer_ConditionalsIntro_7_b: Notice that the farmer needs to move forward and down several times in a stair-step pattern. + grade3_robotFarmer_ConditionalsIntro_8_authored_hint: + grade3_robotFarmer_ConditionalsIntro_8_a: The `while path ahead` block lets you keep going, even if you don't know how many squares are in a path. + grade3_robotFarmer_ConditionalsIntro_9_authored_hint: + grade3_robotFarmer_ConditionalsIntro_9_a: You are going to need to use more than one `while` loop. + grade3_robotFarmer_ConditionalsIntro_9_b: Every hole is at the end of a path, so use `while path ahead` before using `while there is a hole`. + grade3_robotFarmer_ConditionalsIntro_9_c: Notice that you need to repeat the `while path ahead`, `while there is a hole` code six times. grade4_arist_nested_loop_polygons1_authored_hint: 4-5_Nested_Loops_7_a: |- This design will loop 10 times over 360 degrees. @@ -2143,6 +2238,13 @@ en: grade4_artist_functions2a_a: To get around using multiple `move forward` blocks, create a `draw triangle` function and call that multiple times. grade4_artist_functions3b_authored_hint: grade4_artist_functions2a_a: To get around using multiple `move forward` blocks, create a `draw hexagon` function and call that multiple times. + grade4_artist_functionsChallenge0_authored_hint: + grade4_artist_functionsChallenge0_a: |- + Start by making a function for a square, then try making a function for a line of squares. + + How would you use the `draw a line of squares` function to make this image? + grade4_artist_functionsChallenge0_b: After your first line of squares, you need to move the artist down and back before you start your second line of squares. + grade4_artist_functionsChallenge0_c: You should move the artist back a different number of pixels for even lines than for odd ones. grade4_artist_functions_challenge_authored_hint: Course_4_SCF_1_a: Each hexagon has 40 pixel sides. Course_4_SCF_1_b: There is a 120 pixel jump between each hexagon in each horizontal line. @@ -2179,13 +2281,9 @@ en: grade4_artist_functions_windows2_authored_hint: grade4_artist_functions_windows2_a: Try creating your function first then adding in windows one at a time. grade4_artist_functions_windows2_b: You shouldn't need to add any extra repeat loops. Just jump the artist 100 pixels forward for each top window, and 150 pixels down to get the bottom windows. - grade4_artist_functionsChallenge0_authored_hint: - grade4_artist_functionsChallenge0_a: |- - Start by making a function for a square, then try making a function for a line of squares. - - How would you use the `draw a line of squares` function to make this image? - grade4_artist_functionsChallenge0_b: After your first line of squares, you need to move the artist down and back before you start your second line of squares. - grade4_artist_functionsChallenge0_c: You should move the artist back a different number of pixels for even lines than for odd ones. + grade4_artist_nestedLoops_challenge2_authored_hint: + Course_4_Artist_11_a: 'The half-hexagon has a **length of 30** and turns right by **60 degrees**. ' + Course_4_Artist_11_b: 'The 2/3 triangle has a **length of 80** and turns right by **120 degrees**. ' grade4_artist_nested_loop_polygons1_authored_hint: 4-5_Nested_Loops_7_a: |- This design will loop 10 times over 360 degrees. @@ -2206,9 +2304,6 @@ en: **6 x ? = 360** grade4_artist_nested_loop_triangles6_authored_hint: 4-5_Nested_Loops_12_a: "**360 / 36 = ?**" - grade4_artist_nestedLoops_challenge2_authored_hint: - Course_4_Artist_11_a: 'The half-hexagon has a **length of 30** and turns right by **60 degrees**. ' - Course_4_Artist_11_b: 'The 2/3 triangle has a **length of 80** and turns right by **120 degrees**. ' grade4_bee_conditionals_new1a_authored_hint: grade4_bee_conditionals_new1a_a: An `if` block will help you out in this puzzle. grade4_bee_conditionals_new2_authored_hint: @@ -2437,6 +2532,8 @@ en: grade5_bee_parameters_new9a_b: For each stair, you'll need to call the function once, turn right, call the function again, then turn left. grade5_playlab_variables2_authored_hint: Course_4_Play_Lab_Vars_2_a: Make sure to set the number for `dog_speed` to something larger than `cat_speed`. + gradeK_sequence_4_authored_hint: + gradeK_sequence_4_a: Try writing down the steps on paper to find a solution! gradek_adventurer_loops3_authored_hint: gradek_adventurer_loops3_a: To change how far the adventurer goes, change the number of times that the loop runs. gradek_adventurer_loops3_b: Don't forget that the adventurer needs to walk down and collect gold after she finishes the `repeat` loop! @@ -2515,50 +2612,6 @@ en: 2) Play a random sound when you click the actor. Now, make sure both of those actions are attached underneath the same event! - gradeK_sequence_4_authored_hint: - gradeK_sequence_4_a: Try writing down the steps on paper to find a solution! - Harvesting_authored_hint: - pointer_harvester_test: What kind of block can I use to check something and make a decision? - Inspirational Artwork_authored_hint: - brush_width: We set the brush width to 1, then the color to blue before we did anything else. - double_loop: Try putting a `for loop` inside of a `repeat` loop. - specifics: "The `for loop` runs from three to seventeen for each of the six \"petals\" before moving on to create the next, drawing shapes with only an odd number of sides.\n \nThe `set alpha` block uses division to fade the color as the counter gets higher." - after: When you're done with each "petal", be sure to `move forward` 20 pixels before you make a 60 degree rotation. - solution: |- - **Solution** - - - ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) - InspirationalArtwork_authored_hint: {} - K2.0 sequence 1_authored_hint: - K2.0_sequence_1_a: This program is missing one block. Can you figure out which one? - K2.0 sequence 10_authored_hint: - K2.0_sequence_10_a: If you're having trouble, try writing down the steps on a piece of paper first. - K2.0_sequence_10_b: You will need three different kinds of arrows to solve this puzzle. - K2.0 sequence 12_authored_hint: - K2.0_sequence_12_a: If the pig isn't moving far enough, try adding another block. - K2.0 sequence 2_authored_hint: - K2.0_sequence_2_a: One of the blocks is moving the bird in the wrong direction. Can you figure out which one and replace it with the correct block? - K2.0 sequence 3_authored_hint: - K2.0_sequence_3_a: If you are having trouble, try to figure out what the correct path is and then remove the block that doesn't fit. - K2.0 sequence 4_authored_hint: - K2.0_sequence_4_a: Use 2 different arrow blocks to solve this puzzle! - K2.0 sequence 5_authored_hint: - K2.0_sequence_5: Your final code should have three movement blocks. - K2.0 sequence 6_authored_hint: - K2.0_sequence_6_a: There is 1 block that you need to add to move the bird to the pig. - K2.0_sequence_6_b: If you can't figure out what to do, try drawing the puzzle on paper and use your finger to figure out which way to move. - K2.0 sequence 7_authored_hint: - K2.0_sequence_7_a: If you're stuck, try drawing the image on paper to see how the bird should move. - K2.0 sequence 8_authored_hint: - K2.0_sequence_8_a: Stuck? Try tracing the bird's path with your finger. - K2.0 sequence 9_authored_hint: - K2.0_sequence_9_a: If you're having trouble, try writing down the steps on a piece of paper first. - K2.0_sequence_9_b: You will need to go three different directions to solve this puzzle. - K2.0 sequence FP_authored_hint: - K2.0_sequence_FP_a: If the path you need is unclear, use your finger to trace your way from the bird to the pig. - K2.0 sequence pre_authored_hint: - K2.0_sequence_pre_a: If you are having trouble getting the bird to move, make sure blocks are connected under `when run`. level 'grade3_Loops_10_authored_hint: 2-3_Bee_Loops_4_a: You should end up with five blocks inside your loop. level 'grade3_Loops_11_authored_hint: @@ -2579,59 +2632,6 @@ en: 2-3_Bee_Loops_2_a: You should end up with four blocks inside your loop. level 'grade3_Loops_9_authored_hint: 2-3_Bee_Loops_3_a: You should have 6 blocks inside your loop. - MikeStar_authored_hint: - hint1: Don't give up! - MikeStarHard_authored_hint: - hint1: Don't give up! - MikeStarNested_authored_hint: - hint1: Don't give up! - NEW Course 4 Artist Functions 13_authored_hint: - NEW_Course_4_Artist_Functions_13_a: Edit the `draw a line of squares` function so that you don't have to call it twice. - NEW_Course_4_Artist_Functions_13_b: Notice, you'll have to move forward by 60 pixels and turn 144 degrees. - NEW_Course_4_Artist_Functions_13_c: What code would you need if you were going to try to make a star with regular lines? - NEW Course 4 Artist Functions 4_authored_hint: - NEW_Course_4_Artist_Functions_4_a: You will have to use a `turn right by 120 degrees` block after each square. - NEW Course 4 Artist Functions 9_authored_hint: - NEW_Course_4_Artist_Functions_9_a: Try running the code before you add any blocks. What makes the drawing look a little off? - NEW_Course_4_Artist_Functions_9_b: If you can't quite put your finger on what's going wrong, try slowing down the artist's by moving the slider to the left. - NEW Course 4 Artist Params 11_authored_hint: - NEW_Course_4_Artist_Params_11_a: There is more than one number that needs to be replaced by a variable inside the function. - NEW Course 4 Artist Params 13_authored_hint: - NEW_Course_4_Artist_Params_13_a: 'You will need to divide the *perimeter* by the number of sides in order to keep the shapes the same size overall. ' - NEW Course 4 Artist Params 14_authored_hint: - NEW_Course_4_Artist_Params_14_a: It's okay to run the program a few times to figure out how the function works with different parameters. - NEW Course 4 Artist Params inspire_authored_hint: - brush_width: We set the brush width to 1, then the color to blue before we did anything else. - double_loop: Try putting a `for loop` inside of a `repeat` loop. - specifics: "The `for loop` runs from three to seventeen for each of the six \"petals\" before moving on to create the next, drawing shapes with only an odd number of sides.\n \nThe `set alpha` block uses division to fade the color as the counter gets higher." - after: When you're done with each "petal", be sure to `move forward` 20 pixels before you make a 60 degree rotation. - solution: |- - **Solution** - - - ![Image of Solution Blocks](https://images.code.org/d85a18bd31a09f87b41a818fc8d6c1cc-image-1469641375258.png) - NEW Course 4 Bee For Loops 10a_authored_hint: - NEW_Course_4_Bee_For_Loops_10a_a: Can you find a pattern between the number of steps you need to take and the number of nectars to gather? - NEW_Course_4_Bee_For_Loops_10a_b: You'll need to have 2 repeats, one will use a math block. - NEW Course 4 Bee For Loops 7_authored_hint: - NEW_Course_4_Bee_For_Loops_7_a: |- - Try doing some math with the counter variable. - - What do you have to do to the counter at each flower to equal the amount of nectar you need to collect? - NEW Course 4 Bee For Loops 8_authored_hint: - NEW_Course_4_Bee_For_Loops_8_a: "If your loop is counting up, the increment is added to your counter variable each time through. \n\nWhat do you need to add to each number to get the number after it?" - Pattern Bee 1_authored_hint: - conditional_pointer: |- - Start by thinking about this part: what's different each step of the way? What kind of block can you use to make a *decision* about whether you're at a flower or honeycomb? - - ![](https://images.code.org/a4883ea91c2f879ca1bb281d7944ed87-image-1471477752512.48.07 PM.png) - turn_at_honeycomb_pointer: Other than making honey, do you see anything different that you have to do at each honeycomb? - Planning Farmer_authored_hint: - conditional_pointer: |- - Start by thinking about this part: what's different each step of the way? What kind of block can you use to make a *decision* about whether you're at a flower or honeycomb? - - ![](https://images.code.org/a4883ea91c2f879ca1bb281d7944ed87-image-1471477752512.48.07 PM.png) - turn_at_honeycomb_pointer: Other than making honey, do you see anything different that you have to do at each honeycomb? playLabDebugVideo1_authored_hint: courseA_playLab_events2_a: "Here is the block you should connect to the `when run` block: \n\n![](https://images.code.org/ae72d1270ad210cd00fae7e0dfb3549a-image-1478144412134.png)" sample3_authored_hint: diff --git a/i18n/locales/source/dashboard/callouts.yml b/i18n/locales/source/dashboard/callouts.yml index 3bc2b2fe164f8..01096710d2d21 100644 --- a/i18n/locales/source/dashboard/callouts.yml +++ b/i18n/locales/source/dashboard/callouts.yml @@ -13,31 +13,8 @@ en: 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. 4-5 Bee Conditionals 2_callout: 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. - aE1_callout: - aE1_1: There will only be two of these and two turns - aE2_callout: - aE2_1: Still only two of these and two turns - aE3_callout: - aE3_1: Only a handful of these available - aE3alternate_callout: - aE3_1: Only a handful of these available - aE3alternateB_callout: - aE3_1: Only a handful of these available - aE4_callout: - aE3_1: Only a handful of these available - aE5_callout: - aE3_1: Only a handful of these available - aE6_callout: - aE6_1: Only 1 move forward and 1 turn block - aEfreeplay_callout: - aEfreeplay_1: Note that starting the artist in the middle can be awkward. We're looking at adding actions that can move the artist to absolute positions. - allthethings_U3 - Simple Drawing - Rectangle Width and Height_callout: {} - Applab test_callout: {} AppLab_test02_callout: {} - artistLoopsK2_callout: - artistLoopsK2_1: This number tells you how many of these blocks you can use in this puzzle. - artistLoopsK2gradek_artist_loops3_callout: - artistLoopsK2_1: This number tells you how many of these blocks you can use in this puzzle. + Applab test_callout: {} Big Game Animation 1 (copy 1)_callout: {} Big Game Animation 1_callout: {} Big Game Animation 2 (copy 1)_callout: @@ -79,6 +56,152 @@ en: big_game_bg: Click "edit" to change the background image of your game Big Game Vars 4 (copy 1)_callout: {} Big Game Vars 4_callout: {} + CSD U3 - complex - compound conditionals_callout: {} + CSD U3 - complex - key up and down_callout: {} + CSD U3 - complex - mouse down_callout: {} + CSD U3 - complex - mouse move_callout: {} + CSD U3 - complex - nested conditional_callout: {} + CSD U3 - conditionals - first conditional 2_callout: {} + CSD U3 - conditionals - first conditional_callout: {} + CSD U3 - conditionals - transition 2_callout: {} + CSD U3 - conditionals - transition_callout: + CSD_U3_L8_S6_C1: Put the console log statement here + CSD U3 - images - first sprite with image_callout: {} + CSD U3 Boolean Modify_callout: {} + CSD U3 Boolean Predict_callout: {} + CSD U3 Compound Nested Challenge_callout: {} + CSD U3 Compound Nested Examples_callout: {} + CSD U3 Conditional Project_callout: {} + CSD U3 Direction Animations_callout: {} + CSD U3 Direction Arrows_callout: {} + CSD U3 Else_callout: {} + CSD U3 If Else_callout: {} + CSD U3 Keypress Boolean_callout: {} + CSD U3 Keypress Watchers_callout: {} + CSD U3 Property Conditional Multi_callout: {} + CSD U3 Property Conditional_callout: {} + CSD U3 Random Choice_callout: {} + CSD U3 Random Intro_callout: {} + CSD U3 Random Min Max_callout: {} + CSD U3 Simple Drawing - Animation 2_callout: {} + CSD U3 Sprites intro sprites_callout: {} + CSD U3 UP_ARROW_callout: {} + CSD U3 Variables TEMPLATE square_callout: {} + CSD U3 Variables make a big square_callout: {} + CSD U3 Variables make a square_callout: {} + CSD U3 abstraction accelerateX_callout: + CSD_U3_L11_S6_C1: Add your code here. + CSD U3 abstraction accelerateY_callout: + CSD_U3_L11_S7_C1: Add your code here. + CSD U3 abstraction change velocityX_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 abstraction change velocityXY_callout: + CSD_U3_L12_S4_C1: The velocity is updated here. + CSD U3 abstraction change velocityY_callout: + CSD_U3_L11_S6_C1: Add your block here. + CSD U3 abstraction circle_callout: + CSD_U3_L12_S7_C1: Look at this line. + CSD U3 abstraction dragonfly (OLD)_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 abstraction dragonfly OLD_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 abstraction horse_callout: + CSD_U3_L11_S13_C1: Set your sprite's velocityX and velocityY here + CSD_U3_L11_S13_C2: Change your sprite's velocityY here. + CSD U3 abstraction horse2_callout: + CSD_U3_L11_S15_C1: Set your sprite's velocityY here + CSD U3 abstraction horse3_callout: + CSD_U3_L11_S16_C1: Use the counter pattern to make the horse fall here. + CSD_U3_L11_S16_C2: Stop the horse from falling here. + CSD U3 abstraction jump_callout: + CSD_U3_L11_S17_C1: Look at this if statement + CSD_U3_L11_S17_C2: Send the frog back down here + CSD U3 abstraction jumper intro_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction jumper template_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction jumping_callout: + CSD_U3_L13_S8_C1: Set the velocity here + CSD U3 abstraction looping_callout: + CSD_U3_L11_S17_C1: Look at this if statement + CSD U3 abstraction parabola_callout: + CSD_U3_L11_S13_C1: Add your block here. + CSD U3 abstraction rotation accelerate_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD_U3_L11_S5_C2: Add your code here. + CSD U3 abstraction rotation control_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD U3 abstraction rotation_callout: + CSD_U3_L11_S4_C1: Use the rotationSpeed block here + CSD U3 abstraction setSpeed accelerate_callout: + CSD_U3_L11_S14_C1: Add your code here. + CSD U3 abstraction sidescroll intro_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction sidescroll template_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction sidescroll_callout: + CSD_U3_L11_S17_C1: Set the sprite's starting position here. + CSD_U3_L11_S17_C2: Set the hay bale's velocity here + CSD_U3_L11_S17_C3: Add your if statement here. + CSD U3 abstraction tumbleweed_callout: + CSD_U3_L11_S17_C1: Look at this if statement + CSD U3 abstraction velocityX control_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD U3 abstraction velocityX if-statements_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD U3 abstraction velocityX_callout: + CSD_U3_L11_S4_C1: Add your block here. + CSD U3 abstraction velocityY 2_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 abstraction velocityY control_callout: + CSD_U3_L11_S5_C1: Look at this code. + CSD U3 abstraction velocityY_callout: + CSD_U3_L11_S5_C1: Add your block here. + CSD U3 collisions getSpeed_callout: + CSD_U3_L11_S2_C1: Add your code for the compass here. + CSD_U3_L11_S2_C2: Change the code to display speed here. + CSD U3 collisions isTouching intro_callout: + CSD_U3_L12_S2_C1: Add your block here. + CSD U3 collisions pinball2_callout: + CSD_U3_L14_S16_C1: Sprite interactions go in this function. + CSD U3 collisions scoreboard_callout: + CSD_U3_L12_S8_C1: These blocks display the score. + CSD_U3_L12_S8_C2: The blocks that determine whether the bunny has caught the carrot go here. + CSD U3 collisions try blocks_callout: + CSD_U3_L13_S6_C1: Change this block. + CSD U3 collisions types_callout: + CSD_U3_L13_S6_C1: Add your code here. + CSD U3 game backgrounds_callout: + CSD_U3_S18_L4_C1: This block calls your function. + CSD_U3_L18_S4_C2: Functions area + CSD U3 game variables_callout: + CSD_U3_S18_L3_C1: This block creates a new variable. + CSD_U3_L18_S3_C2: Variables area + CSD U3 platform background1_callout: + CSD_U3_L16_S3_C1: the function that draws the background + CSD_U3_L16_S3_C2: the code that calls the function + CSD_U3_L16_S3_C3: Change this function. + CSD U3 platform platform1_callout: + CSD_U3_S17_L8_C1: This block creates a new sprite. + CSD U3 platform scoreboard_callout: + CSD_U3_L17_S7_C1: Score is printed here. + CSD U3 platform variable1_callout: + callout: This block creates a variable. + CSDU4 - Design Mode - 3_callout: {} + CSPU5_U3L16 - setPosition to fixed location_callout: + firstTimeSetPosition: Drag this inside the event handler function. Then click the arrows to get rid of the width and height parameters. + CSPU5_U3L16 - setPosition to move button_callout: + randNumReminder: Use this as the the value for the x and y coordinates in setPosition. Just drag it into the parameter you want. + CSPU5_setPosition to fixed location_callout: + firstTimeSetPosition: Drag this inside the event handler function. Then click the arrows to get rid of the width and height parameters. Calc Circles of Eval .1_callout: Calc Circles of Eval .1: This is the evaluation block. Click on the drop down box to change the number Calc Circles of Eval .2_callout: @@ -183,91 +306,298 @@ en: Course 4 Playlab For Loops 6b_callout: {} Course 4 SCV 6_callout: Course_4_SCV_6: This block allows you to customize your color to almost anything you want to see! Play around with the numbers to see what happens! - course_playlab_variables2_callout: - course_playlab_variables2_1: This is how you set the value of your variable. Change the text connected to this block to change what is being held in your variable. - course_playlab_variables3_callout: - course_playlab_variables3_1: This is how you set the value of your variable. - courseA_artist_loops4_callout: - courseA_artist_loops4_1: This number tells you how many of these blocks you can use in this puzzle. - courseA_artist_loops8_callout: - courseA_artist_loops8_1: Did you know that you can draw back over a line whenever you need to? - courseA_collector_loops1_callout: - courseA_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. - courseA_collector_loops3_callout: - gradek_adventurer_loops2_1: This number tells you how many of these blocks you can use in this puzzle. - courseA_collector_loops3_predict1_callout: {} - courseA_playLab_events2_callout: {} - courseA_playLab_events3_callout: {} - courseA_playLab_events4_callout: {} - courseA_playLab_events5_callout: {} - courseA_playLab_events6_callout: - courseA_playLab_events6_1: This let's you choose a "random" sound, which means that you don't know what you are going to get until you hear it! - courseB_artist_loops3_callout: - courseB_artist_loops3_1: There is only one of these blocks in the toolbox. How will you use it? - courseB_collector_loops1_callout: - courseB_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. - courseB_maze_seq7_callout: - courseB_maze_seq7_1: These grey blocks are made of stone! That means that they can't be trashed. - courseC_artist_prog1_callout: {} - courseC_artist_prog2_callout: {} - courseC_collector_prog1_callout: - courseC_collector_prog1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. - courseC_collector_prog7_callout: - courseC_collector_prog7_1: You can take more blocks from the toolbox if you need them! - courseC_collector_prog8_callout: {} - courseC_collector_prog9_callout: {} - courseC_collector_progA_callout: {} - courseC_collector_progB_callout: {} - courseC_maze_loops2_callout: - courseC_maze_loops2_1: You only have one of these blocks available in this puzzle. - courseC_maze_loops2_predict1_callout: {} - courseC_maze_programming1_callout: - grade2_CaringForNewPet_0_1: After connecting all the blocks, press "Run" to start your program. - courseC_maze_programming2_callout: - courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. - courseC_maze_programming3_callout: - courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. - courseC_maze_programming4_callout: - courseC_maze_programming4_1: This is your block limit. It tells you how many of these blocks you have left to use. - courseC_maze_programming5_callout: {} - courseC_maze_programming7_callout: - courseC_maze_programming7_1: This is your first challenge puzzle! These are meant to be hard and may take several tries. - courseD_artist_functions2_callout: - courseD_artist_functions2_1: When this green block runs, all of the code in the function will run. What should the artist do after drawing the first square? - courseD_artist_functions8_callout: - courseD_artist_functions8_1: Your blocks to create functions have been moved under this label in the toolbox. - courseD_artist_ramp11_callout: - courseD_artist_ramp11_1: You can change this number. - courseD_artist_ramp11_2: Click here to type in the number of times to repeat your code. - courseD_artist_ramp12_callout: {} - courseD_bee_conditionals2_callout: - 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. - courseD_collector_ramp10_callout: {} - courseD_collector_ramp8_callout: - courseD_collector_ramp8_1: 'Use this block to collect a single piece of treasure. ' - courseD_collector_ramp9_callout: {} - courseD_maze_ramp1_callout: - grade2_CaringForNewPet_0_1: After connecting all the blocks, press "Run" to start your program. - courseD_maze_ramp2_callout: - courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. - courseD_maze_ramp3_callout: - courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. - courseD_maze_ramp4_callout: - courseC_maze_programming4_1: This is your block limit. It tells you how many of these blocks you have left to use. - courseD_maze_ramp5_callout: {} - courseD_maze_ramp6_callout: - courseD_maze_ramp6_1: Whatever code you put in here will repeat as many times as you tell it to, then continue to run the rest of the program. - courseD_maze_ramp7_callout: - courseD_maze_ramp7_1: This is your first challenge puzzle! These are meant to be hard and may take several tries. - courseD_playLab_condFP_callout: - courseD_playLab_condFP_1: we have organized the blocks into categories to give you more code to play with! Click here to see where everything went. - courseE_artist_functions1_callout: - courseD_artist_functions1_1: Let's start by using this block to help create the first square. - courseE_artist_functions2_callout: - courseD_artist_functions2_1: When this green block runs, all of the code in the function will run. What should the artist do after drawing the first square? - courseE_artist_functions8_callout: - courseD_artist_functions8_1: Your blocks to create functions have been moved under this label in the toolbox. - courseE_artist_functions_predict1_callout: {} + Eval Booleans 2_callout: + Eval Booleans 2 1: Select a number that will make this expression evaluate to true + Eval Cond 1_callout: + Eval Cond 1 1: Click edit to change the value of this variable + Eval Define Funcs 2_callout: + Eval Define Funcs 2 triangle: Change the triangle's style here + Eval Define Funcs 3_callout: + Eval Define Funcs 3: Make our function use the radius parameter instead of always having a radius of 50. + Eval Define Funcs 4_callout: + Eval Define Funcs 4: Go to the Functions drawer to "Create a Function" + Eval Define Funcs 4B: Click "Add" to add a domain radius, of type Number + Eval Define Funcs 4C: Set the range to Image + Eval Define Funcs Test_callout: + Eval Define Funcs 3: Make our function use the radius parameter instead of always having a radius of 50. + Eval Design Recipe .1_callout: + edit_function: Click here to edit your function. + Eval Design Recipe 3_callout: + eval_design_recipe_3: This is your function definition. This code runs every time you use the 'wide-rect' function + Eval Strings Images .1_callout: + type_string: 'Drag this string into the evaluate block in the workspace. ' + Eval Strings Images .2_callout: {} + Eval Strings Images 1_callout: + purple_image_block: Purple colored blocks output Image values + Eval Strings Images 2_callout: + string_block_color: Try typing in a color as a String here + Eval Strings Images 3_callout: + Eval Strings Images 3: Use this style block and select "outline" + Eval Strings Images 5_callout: + Eval Strings Images 5_callout1: Overlay a triangle by filling in this slot + Eval Strings Images 7_callout: {} + Geometric Pattern_callout: + 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! + Geometric Sun_callout: + 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! + Infinity_move_collide_callout: + Infinity_move_collide_callout: Play a sound when this event occurs. + Infinity_move_directions_callout: + Infinity_move_directions_callout: Which block will make Baymax move up when the up arrow is pressed? + Infinity_move_directions_callout_arrow: Use these arrows to steer + Infinity_move_right_callout: + Infinity_move_right_runbutton: Add move block here + Infinity_repeat_callout: + Infinity_repeat_callout: Place Move blocks inside here + Luigi's Pizza 1 (copy 1)_callout: + luigi's pizza 1: Try ordering a pepperoni pizza + Luigi's Pizza 1_callout: + luigi's pizza 1: Try ordering a pepperoni pizza + Luigi's Pizza 2 (copy 1)_callout: + luigi's pizza 2: Edit this function to add your own toppings + Luigi's Pizza 2_callout: + luigi_pizza_2: Edit this function to add your own toppings + Luigi's Pizza 3 (copy 1)_callout: {} + Luigi's Pizza 3_callout: {} + Luigi's Pizza 4_callout: {} + MC HOC 2016 Level 1_callout: {} + MC HOC 2016 Level 2-2_callout: + craft2_run_button_callout: When you are ready, hit "Run" to try your program. + MC HOC 2016 Level 6_callout: {} + MC HOC 2016 Nerop_callout: {} + MC HOC 2016 New Drop_callout: {} + MC HOC 2016 New Spawn_callout: {} + MC HOC 2016 New Walk_callout: + MC_HOC_2016_New_Walk_callout2: Hit "Run" to start moving. + MC HOC 2016 New pn_callout: {} + MSM Defining Vars 2_callout: + MSM Defining Vars 2_callout1: Click "edit" to open the function editor to update the function + MSM Defining Vars 2_callout2: Define the triangle here + MSM Defining Vars 3_callout: + MSM Defining Vars 3: Click here to find your variables + Mike Playlab Project_callout: + New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program + New Play Lab Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + Modular Arithmetic_callout: {} + NEW Course 4 Artist Functions 10_callout: {} + NEW Course 4 Artist Functions 3_callout: + NEW_Course_4_Artist_Functions_3_1: Click here to edit the new function so that it creates a square. + NEW Course 4 Artist Functions 5_callout: + edit_function: Click here to edit your function. + function_editor_draw_square: This is your function definition. These blocks run everytime you use the "draw a square" block + NEW Course 4 Artist Functions 7_callout: + edit_function: Click here to edit your function. + NEW Course 4 Artist Functions 8_callout: + edit_function: Click here to edit your function. + NEW Course 4 Artist Params 10_callout: + create_function: Click here to open the "Functions" flyout, then click the "Create a Function" button. + NEW Course 4 Artist Params 2_callout: + create_function: + name_function: + write_draw_triangle_function: + NEW Course 4 Artist Params 9_callout: + edit_add_parameter: Click edit to add a parameter in your function + add_and_drag_parameter: Write in the name of your parameter here, click add, and then drag it into your function definition + NEW Course 4 Artist Vars 6_callout: + place_length_variable: Drag the length variable here to replace the question marks + NEW Course 4 Bee For Loops 4_callout: + bee_for_loop: Enter the largest number of nectar you want the bee to collect here + NEW Course 4 Bee For Loops 5_callout: + actions_category: The tool box got a new look! The "Actions" blocks are in here now. + New App Lab Project_callout: {} + New Artist Project_callout: + New Artist Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace to add them to your program + New Artist Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + New Maker Lab Project_callout: {} + New Play Lab Project_callout: + New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program + New Play Lab Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + Ninjacat Demo B_callout: + Ninjacat Demo B: Click `Run` to try out the game + Ninjacat Demo No Animate_callout: + Ninjacat Demo B: Click `Run` to try out the game + Overworld Chop Trees_callout: + craft_callout_preplaced: We've put some blocks here to get you started + Overworld House Frame Chosen_callout: + craft_callout_preplaced_house: This code will start building your house. Can you finish it? + Overworld Move to Sheep_callout: + craft_run_button_callout: Hit "Run" to try your program + craft_drag_block_callout: Drag a "move forward" block and snap it below the other block + Overworld Place Wall_callout: + craft_inside_repeat: Repeat actions by placing blocks in here + PDAlg 13-16 Sam Extension Puzzle_callout: {} + PDAlg 17-20 Luigi Extension Puzzle_callout: {} + PDAlg Big Game History_callout: {} + PDAlg Big Game Remix_callout: {} + PDAlg Design Recipe Delete_callout: {} + PS copy 2-3 Bee Conditionals 5_callout: + Bee_Cond_5_1a: Purple flowers can have either 1 or 0 nectar...but you won't know until you run the code! + Pizza on a Plate_callout: + 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! + Play Lab Rocket 2_callout: + pass_function: This start(function) block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! + play lab rocket 2: Define your rocket-height function here + Play Lab Rocket 2B_callout: + pass_function: This black block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! + Play Lab Rocket 3_callout: + Play Lab Rocket 3 1: Update the purpose statement before moving on to the examples and definition. + Play Lab Rocket Free Play_callout: {} + Poorva copy U3L2 Using Simple Commands_callout: {} + Rock Paper Scissors_callout: + New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program + New Play Lab Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + Rocket Height Course A_callout: + pass_function: This start(function) block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! + Ryan - 4-5 Bee Conditionals 2_callout: + 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. + Ryan - Bee Conditionals_callout: + 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. + Sam the Butterfly 3_callout: + Sam the Butterfly 3 1: Edit this function to keep Sam from going off the right side + Sam the Butterfly 5_callout: {} + Test Play Lab Project With Walls_callout: + New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program + New Play Lab Project_callout2: Hit "Run" to save and run your program + sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! + TestLab_callout: {} + U3 - Simple Drawing - Ellipse and No Fill_callout: {} + U3 - Simple Drawing - Fill_callout: {} + U3 - Simple Drawing - No Fill_callout: {} + U3 - Simple Drawing - Order of Blocks_callout: {} + U3 - Simple Drawing - Oval_callout: {} + U3 - Simple Drawing - Rectangle Width and Height_callout: {} + U3 - Simple Drawing - Rectangle_callout: {} + U3 - Simple Drawing - Stroke and Stroke Weight_callout: {} + U3 - Simple Drawing - X and Y values_callout: {} + U3 - Simple Drawing - regular polygon_callout: {} + U3 - Simple Drawing - text_callout: {} + U3 - Sprites - Intro Sprites_callout: {} + U3 Variables flower example_callout: {} + U3 Variables gray square_callout: {} + U3 Variables make a square_callout: {} + U3L05_3x3GridEfficiencyChallenge_callout: {} + U3L05_draw3x3GridEfficiently_callout: {} + U3L2 Using Simple Commands (no tooltips)_callout: {} + U3L2 Using Simple Commands_callout: {} + U3L2_Turtle3by3Grid_callout: {} + U3L2_TurtleSquare_right_callout: {} + U5 ColorSleuth Template_callout: {} + Underground Avoiding Lava_callout: + craft_callout_moveforward: This code will check for lava, can you add a command to move forward? + Underground Iron_callout: + craft_what_is_iron: Mine this iron! + WebLab PS test - 1-12_callout: + version_history_button: Check out version history + WhileAdventure_callout: + sample1_1: This will be an adventurer collecting coins, not a farmer digging. + aE1_callout: + aE1_1: There will only be two of these and two turns + aE2_callout: + aE2_1: Still only two of these and two turns + aE3_callout: + aE3_1: Only a handful of these available + aE3alternate_callout: + aE3_1: Only a handful of these available + aE3alternateB_callout: + aE3_1: Only a handful of these available + aE4_callout: + aE3_1: Only a handful of these available + aE5_callout: + aE3_1: Only a handful of these available + aE6_callout: + aE6_1: Only 1 move forward and 1 turn block + aEfreeplay_callout: + aEfreeplay_1: Note that starting the artist in the middle can be awkward. We're looking at adding actions that can move the artist to absolute positions. + allthethings_U3 - Simple Drawing - Rectangle Width and Height_callout: {} + artistLoopsK2_callout: + artistLoopsK2_1: This number tells you how many of these blocks you can use in this puzzle. + artistLoopsK2gradek_artist_loops3_callout: + artistLoopsK2_1: This number tells you how many of these blocks you can use in this puzzle. + courseA_artist_loops4_callout: + courseA_artist_loops4_1: This number tells you how many of these blocks you can use in this puzzle. + courseA_artist_loops8_callout: + courseA_artist_loops8_1: Did you know that you can draw back over a line whenever you need to? + courseA_collector_loops1_callout: + courseA_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. + courseA_collector_loops3_callout: + gradek_adventurer_loops2_1: This number tells you how many of these blocks you can use in this puzzle. + courseA_collector_loops3_predict1_callout: {} + courseA_playLab_events2_callout: {} + courseA_playLab_events3_callout: {} + courseA_playLab_events4_callout: {} + courseA_playLab_events5_callout: {} + courseA_playLab_events6_callout: + courseA_playLab_events6_1: This let's you choose a "random" sound, which means that you don't know what you are going to get until you hear it! + courseB_artist_loops3_callout: + courseB_artist_loops3_1: There is only one of these blocks in the toolbox. How will you use it? + courseB_collector_loops1_callout: + courseB_collector_loops1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. + courseB_maze_seq7_callout: + courseB_maze_seq7_1: These grey blocks are made of stone! That means that they can't be trashed. + courseC_artist_prog1_callout: {} + courseC_artist_prog2_callout: {} + courseC_collector_prog1_callout: + courseC_collector_prog1_1: Do you see some new blocks in the toolbox? Don't worry, we will show you how to use them later in the stage. + courseC_collector_prog7_callout: + courseC_collector_prog7_1: You can take more blocks from the toolbox if you need them! + courseC_collector_prog8_callout: {} + courseC_collector_prog9_callout: {} + courseC_collector_progA_callout: {} + courseC_collector_progB_callout: {} + courseC_maze_loops2_callout: + courseC_maze_loops2_1: You only have one of these blocks available in this puzzle. + courseC_maze_loops2_predict1_callout: {} + courseC_maze_programming1_callout: + grade2_CaringForNewPet_0_1: After connecting all the blocks, press "Run" to start your program. + courseC_maze_programming2_callout: + courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. + courseC_maze_programming3_callout: + courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. + courseC_maze_programming4_callout: + courseC_maze_programming4_1: This is your block limit. It tells you how many of these blocks you have left to use. + courseC_maze_programming5_callout: {} + courseC_maze_programming7_callout: + courseC_maze_programming7_1: This is your first challenge puzzle! These are meant to be hard and may take several tries. + courseD_artist_functions2_callout: + courseD_artist_functions2_1: When this green block runs, all of the code in the function will run. What should the artist do after drawing the first square? + courseD_artist_functions8_callout: + courseD_artist_functions8_1: Your blocks to create functions have been moved under this label in the toolbox. + courseD_artist_ramp11_callout: + courseD_artist_ramp11_1: You can change this number. + courseD_artist_ramp11_2: Click here to type in the number of times to repeat your code. + courseD_artist_ramp12_callout: {} + courseD_bee_conditionals2_callout: + 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. + courseD_collector_ramp10_callout: {} + courseD_collector_ramp8_callout: + courseD_collector_ramp8_1: 'Use this block to collect a single piece of treasure. ' + courseD_collector_ramp9_callout: {} + courseD_maze_ramp1_callout: + grade2_CaringForNewPet_0_1: After connecting all the blocks, press "Run" to start your program. + courseD_maze_ramp2_callout: + courseC_maze_programming2_1: This is the toolbox. It’s where you’ll find extra blocks to complete your puzzles. + courseD_maze_ramp3_callout: + courseC_maze_programming3_2: You can drag extra blocks to the toolbox to throw them away. + courseD_maze_ramp4_callout: + courseC_maze_programming4_1: This is your block limit. It tells you how many of these blocks you have left to use. + courseD_maze_ramp5_callout: {} + courseD_maze_ramp6_callout: + courseD_maze_ramp6_1: Whatever code you put in here will repeat as many times as you tell it to, then continue to run the rest of the program. + courseD_maze_ramp7_callout: + courseD_maze_ramp7_1: This is your first challenge puzzle! These are meant to be hard and may take several tries. + courseD_playLab_condFP_callout: + courseD_playLab_condFP_1: we have organized the blocks into categories to give you more code to play with! Click here to see where everything went. + courseE_artist_functions1_callout: + courseD_artist_functions1_1: Let's start by using this block to help create the first square. + courseE_artist_functions2_callout: + courseD_artist_functions2_1: When this green block runs, all of the code in the function will run. What should the artist do after drawing the first square? + courseE_artist_functions8_callout: + courseD_artist_functions8_1: Your blocks to create functions have been moved under this label in the toolbox. + courseE_artist_functions_predict1_callout: {} courseE_artist_ramp11_callout: courseD_artist_ramp11_1: You can change this number. courseD_artist_ramp11_2: Click here to type in the number of times to repeat your code. @@ -315,239 +645,67 @@ en: courseF_artist_for4_callout: {} courseF_artist_fwp1_callout: courseF_artist_fwp1_1: Click the "edit" button to change the code inside the function. - courseF_artist_fwp4_callout: - courseF_artist_fwp4_1: To complete your polygon, make sure you are always turning by 360 ÷ `sides` degrees. - courseF_artist_fwp5_callout: - courseF_artist_fwp5_1: You will find the polygon function in here. - courseF_artist_variables1_callout: - courseF_artist_variables1_1: Notice that blocks now have a new way to enter numbers. These `math` blocks can be pulled out and moved around! - courseF_artist_variables10_callout: {} - courseF_artist_variables2_callout: {} - courseF_artist_variables3_callout: - courseF_artist_variables3_a: Use this to set the value of the variable `length` - courseF_artist_variables3a_predict1_callout: {} - courseF_artist_variables4_callout: {} - courseF_artist_variables5_callout: {} - courseF_artist_variables6_callout: - courseF_artist_variables6_1: Variables can be helpful when you have to change a lot of copies of the same number. - courseF_artist_variables6a_callout: - courseF_artist_variables6a_1: Variables can be helpful when you have to change a lot of copies of the same number. - courseF_artist_variables7_callout: {} - courseF_artist_variables8_callout: {} - courseF_artist_variables9_callout: {} - courseF_artist_variables_10_callout: {} - courseF_artist_variables_2_callout: {} - courseF_artist_variables_3_callout: - courseF_artist_variables_3_a: Use this to set the value of the variable `length` - courseF_artist_variables_4_callout: {} - courseF_artist_variables_5_callout: {} - courseF_artist_variables_6_callout: - courseF_artist_variables_6_1: Variables can be helpful when you have to change a lot of copies of the same number. - courseF_artist_variables_6a_callout: - courseF_artist_variables6a_1: Variables can be helpful when you have to change a lot of copies of the same number. - courseF_artist_variables_7_callout: {} - courseF_artist_variables_8_callout: {} - courseF_artist_variables_9_callout: {} - courseF_artist_variables_FP_callout: {} - courseF_artist_variablesFP_callout: {} - courseF_bee_for3_callout: - courseF_bee_for3_1: The `for` loop is so wide that we have changed the toolbox into category mode to save space. You will find the new `for` loop in here! - courseF_bee_for3_predict1_callout: {} - courseF_bee_for4_callout: {} - courseF_bee_for6_callout: {} - courseF_bee_for9_callout: - courseF_bee_for9_1: You will find the `math` block in here. - courseF_bee_fwp1_callout: - courseF_bee_fwp1_1: You can find `if` statements in here. - courseF_bee_fwp3_callout: - courseF_bee_fwp3_1: This same function can be used when checking for empty spaces as well as clouds. - courseF_bee_fwp4_callout: - courseF_bee_fwp4_1: Press the "edit" button to add a parameter to this function. - courseF_playlab_variables1a_callout: - courseF_playlab_variables1a_1: The toolbox has been organized into categories to make it easier to find the blocks you need. - courseF_playlab_variables2_callout: - course_playlab_variables2_1: This is how you set the value of your variable. Change the text connected to this block to change what is being held in your variable. - courseF_playlab_variables2a_callout: {} - courseF_playlab_variables3_callout: {} - courseF_playlab_variables4_callout: {} - courseF_playlab_variables5_callout: {} - CSD U3 - complex - compound conditionals_callout: {} - CSD U3 - complex - key up and down_callout: {} - CSD U3 - complex - mouse down_callout: {} - CSD U3 - complex - mouse move_callout: {} - CSD U3 - complex - nested conditional_callout: {} - CSD U3 - conditionals - first conditional 2_callout: {} - CSD U3 - conditionals - first conditional_callout: {} - CSD U3 - conditionals - transition 2_callout: {} - CSD U3 - conditionals - transition_callout: - CSD_U3_L8_S6_C1: Put the console log statement here - CSD U3 - images - first sprite with image_callout: {} - CSD U3 abstraction accelerateX_callout: - CSD_U3_L11_S6_C1: Add your code here. - CSD U3 abstraction accelerateY_callout: - CSD_U3_L11_S7_C1: Add your code here. - CSD U3 abstraction change velocityX_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 abstraction change velocityXY_callout: - CSD_U3_L12_S4_C1: The velocity is updated here. - CSD U3 abstraction change velocityY_callout: - CSD_U3_L11_S6_C1: Add your block here. - CSD U3 abstraction circle_callout: - CSD_U3_L12_S7_C1: Look at this line. - CSD U3 abstraction dragonfly (OLD)_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 abstraction dragonfly OLD_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 abstraction horse_callout: - CSD_U3_L11_S13_C1: Set your sprite's velocityX and velocityY here - CSD_U3_L11_S13_C2: Change your sprite's velocityY here. - CSD U3 abstraction horse2_callout: - CSD_U3_L11_S15_C1: Set your sprite's velocityY here - CSD U3 abstraction horse3_callout: - CSD_U3_L11_S16_C1: Use the counter pattern to make the horse fall here. - CSD_U3_L11_S16_C2: Stop the horse from falling here. - CSD U3 abstraction jump_callout: - CSD_U3_L11_S17_C1: Look at this if statement - CSD_U3_L11_S17_C2: Send the frog back down here - CSD U3 abstraction jumper intro_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction jumper template_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction jumping_callout: - CSD_U3_L13_S8_C1: Set the velocity here - CSD U3 abstraction looping_callout: - CSD_U3_L11_S17_C1: Look at this if statement - CSD U3 abstraction parabola_callout: - CSD_U3_L11_S13_C1: Add your block here. - CSD U3 abstraction rotation accelerate_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD_U3_L11_S5_C2: Add your code here. - CSD U3 abstraction rotation control_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD U3 abstraction rotation_callout: - CSD_U3_L11_S4_C1: Use the rotationSpeed block here - CSD U3 abstraction setSpeed accelerate_callout: - CSD_U3_L11_S14_C1: Add your code here. - CSD U3 abstraction sidescroll intro_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction sidescroll template_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction sidescroll_callout: - CSD_U3_L11_S17_C1: Set the sprite's starting position here. - CSD_U3_L11_S17_C2: Set the hay bale's velocity here - CSD_U3_L11_S17_C3: Add your if statement here. - CSD U3 abstraction tumbleweed_callout: - CSD_U3_L11_S17_C1: Look at this if statement - CSD U3 abstraction velocityX control_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD U3 abstraction velocityX if-statements_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD U3 abstraction velocityX_callout: - CSD_U3_L11_S4_C1: Add your block here. - CSD U3 abstraction velocityY 2_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 abstraction velocityY control_callout: - CSD_U3_L11_S5_C1: Look at this code. - CSD U3 abstraction velocityY_callout: - CSD_U3_L11_S5_C1: Add your block here. - CSD U3 Boolean Modify_callout: {} - CSD U3 Boolean Predict_callout: {} - CSD U3 collisions getSpeed_callout: - CSD_U3_L11_S2_C1: Add your code for the compass here. - CSD_U3_L11_S2_C2: Change the code to display speed here. - CSD U3 collisions isTouching intro_callout: - CSD_U3_L12_S2_C1: Add your block here. - CSD U3 collisions pinball2_callout: - CSD_U3_L14_S16_C1: Sprite interactions go in this function. - CSD U3 collisions scoreboard_callout: - CSD_U3_L12_S8_C1: These blocks display the score. - CSD_U3_L12_S8_C2: The blocks that determine whether the bunny has caught the carrot go here. - CSD U3 collisions try blocks_callout: - CSD_U3_L13_S6_C1: Change this block. - CSD U3 collisions types_callout: - CSD_U3_L13_S6_C1: Add your code here. - CSD U3 Compound Nested Challenge_callout: {} - CSD U3 Compound Nested Examples_callout: {} - CSD U3 Conditional Project_callout: {} - CSD U3 Direction Animations_callout: {} - CSD U3 Direction Arrows_callout: {} - CSD U3 Else_callout: {} - CSD U3 game backgrounds_callout: - CSD_U3_S18_L4_C1: This block calls your function. - CSD_U3_L18_S4_C2: Functions area - CSD U3 game variables_callout: - CSD_U3_S18_L3_C1: This block creates a new variable. - CSD_U3_L18_S3_C2: Variables area - CSD U3 If Else_callout: {} - CSD U3 Keypress Boolean_callout: {} - CSD U3 Keypress Watchers_callout: {} - CSD U3 platform background1_callout: - CSD_U3_L16_S3_C1: the function that draws the background - CSD_U3_L16_S3_C2: the code that calls the function - CSD_U3_L16_S3_C3: Change this function. - CSD U3 platform platform1_callout: - CSD_U3_S17_L8_C1: This block creates a new sprite. - CSD U3 platform scoreboard_callout: - CSD_U3_L17_S7_C1: Score is printed here. - CSD U3 platform variable1_callout: - callout: This block creates a variable. - CSD U3 Property Conditional Multi_callout: {} - CSD U3 Property Conditional_callout: {} - CSD U3 Random Choice_callout: {} - CSD U3 Random Intro_callout: {} - CSD U3 Random Min Max_callout: {} - CSD U3 Simple Drawing - Animation 2_callout: {} - CSD U3 Sprites intro sprites_callout: {} - CSD U3 UP_ARROW_callout: {} - CSD U3 Variables make a big square_callout: {} - CSD U3 Variables make a square_callout: {} - CSD U3 Variables TEMPLATE square_callout: {} - CSDU4 - Design Mode - 3_callout: {} - CSPU5_setPosition to fixed location_callout: - firstTimeSetPosition: Drag this inside the event handler function. Then click the arrows to get rid of the width and height parameters. - CSPU5_U3L16 - setPosition to fixed location_callout: - firstTimeSetPosition: Drag this inside the event handler function. Then click the arrows to get rid of the width and height parameters. - CSPU5_U3L16 - setPosition to move button_callout: - randNumReminder: Use this as the the value for the x and y coordinates in setPosition. Just drag it into the parameter you want. + courseF_artist_fwp4_callout: + courseF_artist_fwp4_1: To complete your polygon, make sure you are always turning by 360 ÷ `sides` degrees. + courseF_artist_fwp5_callout: + courseF_artist_fwp5_1: You will find the polygon function in here. + courseF_artist_variables1_callout: + courseF_artist_variables1_1: Notice that blocks now have a new way to enter numbers. These `math` blocks can be pulled out and moved around! + courseF_artist_variables10_callout: {} + courseF_artist_variables2_callout: {} + courseF_artist_variables3_callout: + courseF_artist_variables3_a: Use this to set the value of the variable `length` + courseF_artist_variables3a_predict1_callout: {} + courseF_artist_variables4_callout: {} + courseF_artist_variables5_callout: {} + courseF_artist_variables6_callout: + courseF_artist_variables6_1: Variables can be helpful when you have to change a lot of copies of the same number. + courseF_artist_variables6a_callout: + courseF_artist_variables6a_1: Variables can be helpful when you have to change a lot of copies of the same number. + courseF_artist_variables7_callout: {} + courseF_artist_variables8_callout: {} + courseF_artist_variables9_callout: {} + courseF_artist_variablesFP_callout: {} + courseF_artist_variables_10_callout: {} + courseF_artist_variables_2_callout: {} + courseF_artist_variables_3_callout: + courseF_artist_variables_3_a: Use this to set the value of the variable `length` + courseF_artist_variables_4_callout: {} + courseF_artist_variables_5_callout: {} + courseF_artist_variables_6_callout: + courseF_artist_variables_6_1: Variables can be helpful when you have to change a lot of copies of the same number. + courseF_artist_variables_6a_callout: + courseF_artist_variables6a_1: Variables can be helpful when you have to change a lot of copies of the same number. + courseF_artist_variables_7_callout: {} + courseF_artist_variables_8_callout: {} + courseF_artist_variables_9_callout: {} + courseF_artist_variables_FP_callout: {} + courseF_bee_for3_callout: + courseF_bee_for3_1: The `for` loop is so wide that we have changed the toolbox into category mode to save space. You will find the new `for` loop in here! + courseF_bee_for3_predict1_callout: {} + courseF_bee_for4_callout: {} + courseF_bee_for6_callout: {} + courseF_bee_for9_callout: + courseF_bee_for9_1: You will find the `math` block in here. + courseF_bee_fwp1_callout: + courseF_bee_fwp1_1: You can find `if` statements in here. + courseF_bee_fwp3_callout: + courseF_bee_fwp3_1: This same function can be used when checking for empty spaces as well as clouds. + courseF_bee_fwp4_callout: + courseF_bee_fwp4_1: Press the "edit" button to add a parameter to this function. + courseF_playlab_variables1a_callout: + courseF_playlab_variables1a_1: The toolbox has been organized into categories to make it easier to find the blocks you need. + courseF_playlab_variables2_callout: + course_playlab_variables2_1: This is how you set the value of your variable. Change the text connected to this block to change what is being held in your variable. + courseF_playlab_variables2a_callout: {} + courseF_playlab_variables3_callout: {} + courseF_playlab_variables4_callout: {} + courseF_playlab_variables5_callout: {} + course_playlab_variables2_callout: + course_playlab_variables2_1: This is how you set the value of your variable. Change the text connected to this block to change what is being held in your variable. + course_playlab_variables3_callout: + course_playlab_variables3_1: This is how you set the value of your variable. drawings!_callout: {} - Eval Booleans 2_callout: - Eval Booleans 2 1: Select a number that will make this expression evaluate to true - Eval Cond 1_callout: - Eval Cond 1 1: Click edit to change the value of this variable - Eval Define Funcs 2_callout: - Eval Define Funcs 2 triangle: Change the triangle's style here - Eval Define Funcs 3_callout: - Eval Define Funcs 3: Make our function use the radius parameter instead of always having a radius of 50. - Eval Define Funcs 4_callout: - Eval Define Funcs 4: Go to the Functions drawer to "Create a Function" - Eval Define Funcs 4B: Click "Add" to add a domain radius, of type Number - Eval Define Funcs 4C: Set the range to Image - Eval Define Funcs Test_callout: - Eval Define Funcs 3: Make our function use the radius parameter instead of always having a radius of 50. - Eval Design Recipe .1_callout: - edit_function: Click here to edit your function. - Eval Design Recipe 3_callout: - eval_design_recipe_3: This is your function definition. This code runs every time you use the 'wide-rect' function - Eval Strings Images .1_callout: - type_string: 'Drag this string into the evaluate block in the workspace. ' - Eval Strings Images .2_callout: {} - Eval Strings Images 1_callout: - purple_image_block: Purple colored blocks output Image values - Eval Strings Images 2_callout: - string_block_color: Try typing in a color as a String here - Eval Strings Images 3_callout: - Eval Strings Images 3: Use this style block and select "outline" - Eval Strings Images 5_callout: - Eval Strings Images 5_callout1: Overlay a triangle by filling in this slot - Eval Strings Images 7_callout: {} frozen circle function with parameter_callout: frozen_circle_function_with_parameter_circle: Use the "create a circle" block and change the size. frozen cross rotate_callout: @@ -576,10 +734,6 @@ en: replace_questions: Use the drop-down to replace "???" with a number frozen square snowflake_callout: replace_questions: Use the drop-down to replace "???" with a number - Geometric Pattern_callout: - 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! - Geometric Sun_callout: - 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! grade1_artist_loops2_callout: grade1_artist_loops2_1: There is only one of these blocks in the toolbox. How will you use it? grade1_maze_sequence6_callout: @@ -598,6 +752,8 @@ en: grade2_CaringForNewPet_3D_callout: {} grade2_CaringForNewPet_7D_callout: grade2_CaringForNewPet_7D: This is your first challenge puzzle! These are meant to be harder and may take several tries. + grade2_MakeDogTag_1_callout: {} + grade2_MakeDogTag_BFP_callout: {} grade2_collector_10_callout: {} grade2_collector_7_callout: grade2_collector_7_1: You can take more blocks from the toolbox if you need them! @@ -606,8 +762,6 @@ en: grade2_collector_9a_callout: {} grade2_collector_A_callout: {} grade2_collector_A_predict1_callout: {} - grade2_MakeDogTag_1_callout: {} - grade2_MakeDogTag_BFP_callout: {} grade2_maze_intro10_callout: {} grade2_maze_intro2_callout: grade2_maze_intro2_callout1: This is the run button. Press this button to run your program. @@ -623,11 +777,11 @@ en: grade2_maze_intro9_callout: {} grade2_puppy_loops2_callout: grade2_puppy_loops2_callout1: You only have one of these blocks available in this puzzle. - grade3_bee_conditionals_quantum2_callout: + grade3_ConditionalsElse_2_callout: 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. grade3_Conditionals_3_callout: Bee_Cond_5_1a: Purple flowers can have either 1 or 0 nectar...but you won't know until you run the code! - grade3_ConditionalsElse_2_callout: + grade3_bee_conditionals_quantum2_callout: 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. grade3_playLab_buildGame_1_callout: Playlab_cond_1_1: Think of this block as the computer's way of rolling a die, and you get to decide how many sides the die has. @@ -744,128 +898,9 @@ en: gradek_playlab_events4c_callout: {} gradek_playlab_events5c_callout: gradek_playlab_events5c_1: This let's you choose a "random" sound, which means that you don't know what you are going to get until you hear it! - Infinity_move_collide_callout: - Infinity_move_collide_callout: Play a sound when this event occurs. - Infinity_move_directions_callout: - Infinity_move_directions_callout: Which block will make Baymax move up when the up arrow is pressed? - Infinity_move_directions_callout_arrow: Use these arrows to steer - Infinity_move_right_callout: - Infinity_move_right_runbutton: Add move block here - Infinity_repeat_callout: - Infinity_repeat_callout: Place Move blocks inside here kikiTesta_callout: sample1_1: This will be an adventurer collecting coins, not a farmer digging. - Luigi's Pizza 1 (copy 1)_callout: - luigi's pizza 1: Try ordering a pepperoni pizza - Luigi's Pizza 1_callout: - luigi's pizza 1: Try ordering a pepperoni pizza - Luigi's Pizza 2 (copy 1)_callout: - luigi's pizza 2: Edit this function to add your own toppings - Luigi's Pizza 2_callout: - luigi_pizza_2: Edit this function to add your own toppings - Luigi's Pizza 3 (copy 1)_callout: {} - Luigi's Pizza 3_callout: {} - Luigi's Pizza 4_callout: {} - MC HOC 2016 Level 1_callout: {} - MC HOC 2016 Level 2-2_callout: - craft2_run_button_callout: When you are ready, hit "Run" to try your program. - MC HOC 2016 Level 6_callout: {} - MC HOC 2016 Nerop_callout: {} - MC HOC 2016 New Drop_callout: {} - MC HOC 2016 New pn_callout: {} - MC HOC 2016 New Spawn_callout: {} - MC HOC 2016 New Walk_callout: - MC_HOC_2016_New_Walk_callout2: Hit "Run" to start moving. - Mike Playlab Project_callout: - New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program - New Play Lab Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! - Modular Arithmetic_callout: {} - MSM Defining Vars 2_callout: - MSM Defining Vars 2_callout1: Click "edit" to open the function editor to update the function - MSM Defining Vars 2_callout2: Define the triangle here - MSM Defining Vars 3_callout: - MSM Defining Vars 3: Click here to find your variables - New App Lab Project_callout: {} - New Artist Project_callout: - New Artist Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace to add them to your program - New Artist Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! - NEW Course 4 Artist Functions 10_callout: {} - NEW Course 4 Artist Functions 3_callout: - NEW_Course_4_Artist_Functions_3_1: Click here to edit the new function so that it creates a square. - NEW Course 4 Artist Functions 5_callout: - edit_function: Click here to edit your function. - function_editor_draw_square: This is your function definition. These blocks run everytime you use the "draw a square" block - NEW Course 4 Artist Functions 7_callout: - edit_function: Click here to edit your function. - NEW Course 4 Artist Functions 8_callout: - edit_function: Click here to edit your function. - NEW Course 4 Artist Params 10_callout: - create_function: Click here to open the "Functions" flyout, then click the "Create a Function" button. - NEW Course 4 Artist Params 2_callout: - create_function: - name_function: - write_draw_triangle_function: - NEW Course 4 Artist Params 9_callout: - edit_add_parameter: Click edit to add a parameter in your function - add_and_drag_parameter: Write in the name of your parameter here, click add, and then drag it into your function definition - NEW Course 4 Artist Vars 6_callout: - place_length_variable: Drag the length variable here to replace the question marks - NEW Course 4 Bee For Loops 4_callout: - bee_for_loop: Enter the largest number of nectar you want the bee to collect here - NEW Course 4 Bee For Loops 5_callout: - actions_category: The tool box got a new look! The "Actions" blocks are in here now. - New Maker Lab Project_callout: {} - New Play Lab Project_callout: - New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program - New Play Lab Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! - Ninjacat Demo B_callout: - Ninjacat Demo B: Click `Run` to try out the game - Ninjacat Demo No Animate_callout: - Ninjacat Demo B: Click `Run` to try out the game - Overworld Chop Trees_callout: - craft_callout_preplaced: We've put some blocks here to get you started - Overworld House Frame Chosen_callout: - craft_callout_preplaced_house: This code will start building your house. Can you finish it? - Overworld Move to Sheep_callout: - craft_run_button_callout: Hit "Run" to try your program - craft_drag_block_callout: Drag a "move forward" block and snap it below the other block - Overworld Place Wall_callout: - craft_inside_repeat: Repeat actions by placing blocks in here - PDAlg 13-16 Sam Extension Puzzle_callout: {} - PDAlg 17-20 Luigi Extension Puzzle_callout: {} - PDAlg Big Game History_callout: {} - PDAlg Big Game Remix_callout: {} - PDAlg Design Recipe Delete_callout: {} - Pizza on a Plate_callout: - 4-5_Artist_Patterns_Free_Play_1: All of your favorite blocks are now organized into categories. Click on these words to see where everything went! - Play Lab Rocket 2_callout: - pass_function: This start(function) block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! - play lab rocket 2: Define your rocket-height function here - Play Lab Rocket 2B_callout: - pass_function: This black block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! - Play Lab Rocket 3_callout: - Play Lab Rocket 3 1: Update the purpose statement before moving on to the examples and definition. - Play Lab Rocket Free Play_callout: {} playLabDebugVideo1_callout: {} - Poorva copy U3L2 Using Simple Commands_callout: {} - PS copy 2-3 Bee Conditionals 5_callout: - Bee_Cond_5_1a: Purple flowers can have either 1 or 0 nectar...but you won't know until you run the code! - Rock Paper Scissors_callout: - New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program - New Play Lab Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! - Rocket Height Course A_callout: - pass_function: This start(function) block lets you pass your function (not the value your function returns with some input) into the rocket animation library. The animation you see on screen is actually using your function to move the rocket! - Ryan - 4-5 Bee Conditionals 2_callout: - 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. - Ryan - Bee Conditionals_callout: - 4_5_Bee_Conditionals_2_1: Remember, check to see if EVERY cloud has a FLOWER. You don't have to check for honeycombs at all. - Sam the Butterfly 3_callout: - Sam the Butterfly 3 1: Edit this function to keep Sam from going off the right side - Sam the Butterfly 5_callout: {} sample1_callout: sample1_1: This will be an adventurer collecting coins, not a farmer digging. sample10a_callout: {} @@ -885,40 +920,5 @@ en: sample9_1: This should be something other than artist, but it's here to connect the previous levels to freeplay sample9a_callout: sample9a_1: This would be a puzzle to connect stage to freeplay, but playlab does not have "turn" or "move forward". Also, the goals are not flexible (size or sprites). - Test Play Lab Project With Walls_callout: - New Play Lab Project_callout1: Click the categories to see the blocks in your toolbox! Drag blocks to the workspace add them to your program - New Play Lab Project_callout2: Hit "Run" to save and run your program - sign_in_to_save_project: Want to access your project later? Sign in to save this project to your account! testing code callout_callout: testing_code_callout: This makes the sprite move! - TestLab_callout: {} - U3 - Simple Drawing - Ellipse and No Fill_callout: {} - U3 - Simple Drawing - Fill_callout: {} - U3 - Simple Drawing - No Fill_callout: {} - U3 - Simple Drawing - Order of Blocks_callout: {} - U3 - Simple Drawing - Oval_callout: {} - U3 - Simple Drawing - Rectangle Width and Height_callout: {} - U3 - Simple Drawing - Rectangle_callout: {} - U3 - Simple Drawing - regular polygon_callout: {} - U3 - Simple Drawing - Stroke and Stroke Weight_callout: {} - U3 - Simple Drawing - text_callout: {} - U3 - Simple Drawing - X and Y values_callout: {} - U3 - Sprites - Intro Sprites_callout: {} - U3 Variables flower example_callout: {} - U3 Variables gray square_callout: {} - U3 Variables make a square_callout: {} - U3L05_3x3GridEfficiencyChallenge_callout: {} - U3L05_draw3x3GridEfficiently_callout: {} - U3L2 Using Simple Commands (no tooltips)_callout: {} - U3L2 Using Simple Commands_callout: {} - U3L2_Turtle3by3Grid_callout: {} - U3L2_TurtleSquare_right_callout: {} - U5 ColorSleuth Template_callout: {} - Underground Avoiding Lava_callout: - craft_callout_moveforward: This code will check for lava, can you add a command to move forward? - Underground Iron_callout: - craft_what_is_iron: Mine this iron! - WebLab PS test - 1-12_callout: - version_history_button: Check out version history - WhileAdventure_callout: - sample1_1: This will be an adventurer collecting coins, not a farmer digging. diff --git a/i18n/locales/source/dashboard/failure_message_overrides.yml b/i18n/locales/source/dashboard/failure_message_overrides.yml index dcb165323d9db..62eed36849395 100644 --- a/i18n/locales/source/dashboard/failure_message_overrides.yml +++ b/i18n/locales/source/dashboard/failure_message_overrides.yml @@ -40,14 +40,9 @@ en: should get to their flags in the same number of moves!" Course 4 Playlab For Loops 5b_failure_message_override: "Remember, both characters need to stop in the same place." - courseE_playLab_scaffold3_failure_message_override: "You must add two or more - new actors to your game and program them to move." Eval Strings Images .2_failure_message_override: "Make sure you append the string \"Universe\" to make the code create \"Hello, Universe\"" - grade4_scaffolded_project3_failure_message_override: "You must add two or more - new actors that move to your game." Kiki_StarWars_Test_5_failure_message_override: "Game over!" - kikiTesta_failure_message_override: "Congratulations! You gathered X coins!" MC HOC 2016 Level 1_failure_message_override: "To go on, you’ll need to collect wool. To collect the wool, use the arrow keys to walk to the sheep and then press the spacebar or click the game to shear the sheep. And, don’t forget @@ -80,22 +75,27 @@ en: MC HOC 2016 New Drop_failure_message_override: "Use the arrow keys to walk to the sheep and press space bar or click the game board to use the sheep. And, don’t forget to add the 'Drop' block to your code." - MC HOC 2016 New pn_failure_message_override: "To go on, you’ll need to collect - wool. To collect the wool, use the arrow keys to walk to the sheep and then - press the spacebar or click the game to shear the sheep. And, don’t forget - to add the “Drop Wool” block to your code." MC HOC 2016 New Spawn_failure_message_override: "Place `spawn sheep` under `when run`." MC HOC 2016 New Walk_failure_message_override: "To open the door, press the space bar or touch the game board while facing it. Walk inside to continue." + MC HOC 2016 New pn_failure_message_override: "To go on, you’ll need to collect + wool. To collect the wool, use the arrow keys to walk to the sheep and then + press the spacebar or click the game to shear the sheep. And, don’t forget + to add the “Drop Wool” block to your code." MC HOC 2016 SCORE LEVEL_failure_message_override: "If you're having trouble tagging 5 Golems, try changing the score to 2 per tag." MC HOC 2016 Village Test_failure_message_override: "You need to make the Iron Golem chase and attack the zombies to win." + WhileAdventure_failure_message_override: "Congratulations! You gathered X + coins!" + courseE_playLab_scaffold3_failure_message_override: "You must add two or more + new actors to your game and program them to move." + grade4_scaffolded_project3_failure_message_override: "You must add two or more + new actors that move to your game." + kikiTesta_failure_message_override: "Congratulations! You gathered X coins!" sample1_failure_message_override: "Congratulations! You gathered X coins!" sample4_failure_message_override: "Congratulations! You gathered X coins!" sample6_failure_message_override: "Not quite. Keep trying! [Move to Play Zone]" sample8_failure_message_override: "Congratulations! You gathered X coins!" - WhileAdventure_failure_message_override: "Congratulations! You gathered X - coins!" diff --git a/i18n/locales/source/dashboard/instructions.yml b/i18n/locales/source/dashboard/instructions.yml index 1195420f6ae4e..8efc6b8af5b4a 100644 --- a/i18n/locales/source/dashboard/instructions.yml +++ b/i18n/locales/source/dashboard/instructions.yml @@ -374,15 +374,6 @@ en: him!" 2-3 Maze sq10_instruction: "Get me to the pig! What blocks got repeated?" 2-3 Maze sq10v2_instruction: "Get me to the pig! What blocks got repeated?" - 2-3 maze sq11_instruction: "Get me to the pig! What blocks got repeated?" - 2-3 maze sq12_instruction: "Can you replace the previous answer with a loop - by using a \"repeat times\" block?" - 2-3 maze sq13_instruction: "Dear person. Me zombie. Must... get... to sunflower. - Create loop with \"repeat until\" block." - 2-3 maze sq14_instruction: "Can you get to the sunflower using only four blocks?" - 2-3 maze sq15_instruction: "Can you get to the sunflower using only five blocks?" - 2-3 maze sq16_instruction: "Ok, this is similar, but slightly different. Can - you do it in only five blocks?" 2-3 Maze sq2_instruction: "Trace the path and lead me to the silly pig. Avoid the TNT or the feathers will fly!" 2-3 Maze sq3_instruction: "Guide me to the green evilness! (Watch out for TNT)" @@ -396,6 +387,15 @@ en: 2-3 Maze sq8_instruction: "Get me to the pig! (Where is that \"repeat times\" block when I need it?)" 2-3 Maze sq9_instruction: "Create loops to get to the pig using less blocks." + 2-3 maze sq11_instruction: "Get me to the pig! What blocks got repeated?" + 2-3 maze sq12_instruction: "Can you replace the previous answer with a loop + by using a \"repeat times\" block?" + 2-3 maze sq13_instruction: "Dear person. Me zombie. Must... get... to sunflower. + Create loop with \"repeat until\" block." + 2-3 maze sq14_instruction: "Can you get to the sunflower using only four blocks?" + 2-3 maze sq15_instruction: "Can you get to the sunflower using only five blocks?" + 2-3 maze sq16_instruction: "Ok, this is similar, but slightly different. Can + you do it in only five blocks?" 2-3_instruction: "Purple flowers may have either 1 or 0 nectar. Be careful not to collect nectar from a purple flower if it doesn't have any." 2-3level1_instruction: "Help the bird catch the naughty pig by moving it forward" @@ -823,63 +823,18 @@ en: the ground flat?" 4-5 While Loops Assessment 1_instruction: "There are a lot of holes and piles. Help me to fill and remove them to make the ground flat." - aE1_instruction: "You chose to make a square napkin! \r\n\r\nTo finish, draw - a square with 20 pixel sides. " - aE2_instruction: "If you place your square loop inside another loop, we call - that a nested loop. What do you need to add as an outer loop to make sure - all 14 napkins line up next to each other?" - aE3_instruction: "We've got to have a tablecloth! \r\n\r\nTake your row of - 14 napkins and sew 14 of those together with another **outer loop** to make - a cover for our table." - aE3alternate_instruction: "Alternate" - aE3alternateB_instruction: "Alternate" - aE4_instruction: "Alternate" - aE5_instruction: "Example of puzzle using highest difficulty level shape." - aE6_instruction: "How many times do you need to loop this to draw half of - a circle? " - aE7_instruction: "If you create another loop like this one, but turn left instead - of right, what happens? \r\n\r\nCan you repeat all of that to draw this wave?" - aE8_instruction: "Now let's loop that whole thing four times to create this - picture frame. Watch out for the corners - you can't just turn 90 degrees! - \r\n\r\nIf looping a 3 degree turn 60 times makes a half circle, which of - these blocks of code will make an additional quarter circle for the corners?" - aEfreeplay_instruction: "Free Play!" AlgPD DR Free Play_instruction: "Create a function based on your own word problem." Alien Defender_instruction: "Project Idea: Make a defender game in Play Lab!" AllTheThings Applab - Turtle move with button_instruction: "Add a button that moves the turtle when clicked. (Click to see full instructions)" - allthethings data blocks test_instruction: "Please sign in to test applab levels - (By design, applab levels only work if signed in. Normally, we make people - sign in, but this is only enforceable for a whole script and would be annoying - to do for the allthethings script)." - allthethings design mode elements_instruction: "Please sign in to test applab - levels (By design, applab levels only work if signed in. Normally, we make - people sign in, but this is only enforceable for a whole script and would - be annoying to do for the allthethings script)." - allthethings level dataTables_instruction: "Please sign in to test applab levels - (By design, applab levels only work if signed in. Normally, we make people - sign in, but this is only enforceable for a whole script and would be annoying - to do for the allthethings script)." - allthethings_moviebot_instruction: "This level cloned from \"U3 Digital Assistant - Target\"" - allthethings_template_backed1_instruction: "Backed by a template #1. Please - sign in to test applab levels (By design, applab levels only work if signed - in. Normally, we make people sign in, but this is only enforceable for a whole - script and would be annoying to do for the allthethings script). " - allthethings_template_backed2_instruction: "Backed by a template #2. Please - sign in to test applab levels (By design, applab levels only work if signed - in. Normally, we make people sign in, but this is only enforceable for a whole - script and would be annoying to do for the allthethings script)." - allthethings_U3 - Simple Drawing - Rectangle Width and Height_instruction: "Do - This" App Lab test_instruction: "test" + AppLab_test02_instruction: "One sentence summary of the activity. Click to + view full instructions." Applab allthethings onRecordEvent_instruction: "Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and would be annoying to do for the allthethings script)." Applab test_instruction: "This level is submittable. For testing only!" - AppLab_test02_instruction: "One sentence summary of the activity. Click to - view full instructions." Artist - Nested Loops 1_instruction: "Complete the code to draw these triangles. The first one is done for you. Hint: 3 triangles in a 360 degree rotation." Artist - Nested Loops 10_instruction: "Draw the last row of stars on this flag @@ -908,35 +863,6 @@ en: everything you need to know to make a pattern like this! If this picture inspires you, try to make something similar. Otherwise, create something all your own.\r\n \r\nWant to know how our inspiration pattern was made? " - artistDebugVideo1_instruction: "Use the `repeat` loop to add waves to the water." - artistFunctionsVideo1_instruction: "Follow the instructions to make your own - function." - artistLoopsK1_instruction: "This is a new type of puzzle called \"Artist\". - Play with the level and draw something fun." - artistLoopsK2_instruction: "Now, use a `repeat` loop to draw this line five - times!" - artistLoopsK2gradek_artist_loops3_instruction: "Now, use a `repeat` loop to - draw this line five times!" - artistLoopsK3_instruction: "Draw a line eight steps long. This will become - the land for our kingdom!" - artistLoopsK4_instruction: "Now we need a castle with a draw bridge. Fix the - code so that the bridge lays straight instead of falling down." - artistLoopsK5_instruction: "Now we need to fix the top of the castle. Can you - loop the code three times?" - artistLoopsK6_instruction: "Someone is stuck in the tower! Fix the stairs - to set them free. " - artistLoopsK7_instruction: "This tower is lovely, what is downstairs? Build - another staircase to find out! " - artistLoopsK8_instruction: "Wow! There's a garden over there! Help fix these - stairs so I can get to it." - artistLoopsK9_instruction: "**Challenge:** Lovely! Let's take a walk around - the garden." - artistLoopsKA_instruction: "These stones are in the wrong place. Help me move - them so I don't fall in!" - artistLoopsKB_instruction: "Look! It's a theater. Help me set up the chairs - so we can all see the stage. " - artistLoopsKFP_instruction: "Picture time! Use what you have learned to draw - a picture of what you think the Artist saw on stage." Auto Open Function Editor_instruction: "You can call functions from inside other functions! Using your \"shape\" function as a base, create 3 house shapes each 20 pixels larger than the last starting at 50 pixels in length. Using @@ -945,7 +871,6 @@ en: or 0 nectar, but you don't know which one! Be careful not to collect nectar from a purple flower if it doesn't have any. Check if the nectar is equal to 1 by using the if block." - beeDebugVideo1_instruction: "Use a `repeat` loop to collect all of the nectar." Bergeron Robot Maze1_instruction: "Can you help me catch the naughty pig? Stack a couple of `move forward` blocks below the `when run` block and press \"Run\". " @@ -1060,16 +985,12 @@ en: your Player, Target, and Danger. Feel free to play with all of the variables at this point to make your game look like you'd like it to. Click \"Finish\" when you're done." - birdsDebugVideo1_instruction: "Trace the path and lead me to the silly pig. - Avoid TNT or feathers will fly!" Brad Spooky House Copy_instruction: "Freeplay: Here are the functions you've written, and some more for you to play with. Draw something awesome! Play with the pen width to see how different your drawings look!" Brad Spooky House_instruction: "Freeplay: Here are the functions you've written, and some more for you to play with. Draw something awesome! Play with the pen width to see how different your drawings look!" - brendan hackathon level_instruction: "these are the instructions for my level. you - should do this level and have a good time." Building a Foundation Assessment_instruction: "Build a three level pyramid, there are no other directions, so just play with the pieces until you get it!" @@ -1098,4154 +1019,1901 @@ en: make the ground flat? Hint: Use the while loop for both." C3-Farmer While Loops Assessment 1_instruction: "There are a lot of holes and piles. Help me to fill and remove them to make the ground flat." - Calc Circles of Eval .1_instruction: "You’ll be writing a kind of code called - Evaluation Blocks, because each block of code evaluates to a single value. - Change the ??? in this code so that the block evaluates to 5." - Calc Circles of Eval .2_instruction: "This Evaluation Block is a multiplication - function which takes two numbers and returns the product of those numbers. - Edit this block so that it multiplies 2 * 5" - Calc Circles of Eval .3_instruction: "Here's a function for addition which - takes two numbers and returns their sum. Use this Addition Block to add 3 - + 6." - Calc Circles of Eval .4_instruction: "Here we've nested an Addition Block - inside a Multiplication Block. Complete this code so it multiplies 3 by (4 - + 1)" - Calc Circles of Eval 1 (copy 1)_instruction: "Convert this statement to <some_shape> - of evaluation." - Calc Circles of Eval 1_instruction: "Every mathematical operator (+, -, *, - /, and so on) can be represented by an Evaluation Block in code. Change the - Evaluation Block to match the expression." - Calc Circles of Eval 2 (copy 1)_instruction: "Convert this statement to <some_shape> - of evaluation." - Calc Circles of Eval 2_instruction: "Use a Multiplication Block to complete - this code." - Calc Circles of Eval 3_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval 4_instruction: "This code is missing a couple of Evaluation - Blocks - make sure you put everything in the right order." - Calc Circles of Eval 5_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval 6_instruction: "Complete the Evaluation Blocks to match - this expression." - Calc Circles of Eval 7_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval 8_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval 9_instruction: "Complete the Evaluation Blocks to match - this statement." - Calc Circles of Eval Free Play_instruction: "Free Play: Try using the Evaluation - Blocks to write some equations of your own. How does nesting the blocks in - different ways impact their evaluation?" - Calc Define Funcs 1 (copy 1)_instruction: "Let's look at some more algebraic - functions now. Here's a function translated from the simple algebraic function - f(x) = x + 1. What would you expect this function to output if provided an - input of 15?" - Calc Define Funcs 1_instruction: "Let's look at some more traditional algebraic - functions now. Here's a function translated from the simple algebraic function - f(x) = x + 1. What would you expect this function to output if provided an - input of 15?" - Calc Define Funcs 2_instruction: "Write a function f that takes a parameter - x and returns x - 10. Test your function using f(15)." - Calc Define Funcs 3_instruction: "We don't have to call our function f every - time; create a function called times-ten that should take a parameter x and - return x * 10. Once you've created the function, run times-ten(50)." - Calc Define Funcs 4_instruction: "Write a function called half that takes a - number x and returns half that number. Once you've written the function, - use it to calculate half(21)" - Calc Define Funcs 5 - multiply 1_instruction: "Oh no! We lost our multiply - block! We'll have to create a function to multiply for us. To start off, - write a function \"f\" that takes a parameter \"x\" and returns x*5. Test - your function using f(3)." - Calc Design Recipe 1_instruction: "Let's use the Design Recipe to create a - function called cube - this function should take in a Number and return that - number to the power of 3. Make sure to write two example cases! When you're - done, use your new function to calculate cube(7)." - Calc Design Recipe 2_instruction: "Your school is holding a bake sale, and - you need to track the cost of making each cookie, the money paid, and the - total profit. Cookies cost $0.25 each to make, and sell for $1.50/cookie.\r\n\r\nWrite - the function cost, which takes in the number of cookies you intend to sell, - and returns the cost of making those cookies.\r\n\r\nTest your function by - calculating the cost of 42 cookies" - Calc Design Recipe 3_instruction: "Write the function sales which takes in - the number of cookies sold, and produces the amount of money customers spent - to buy those cookies (each cookie is sold at $1.50).\r\n\r\nTest your function - by calculating the sales for 135 cookies" - Calc Design Recipe 4_instruction: "Using the two functions we just wrote, write - the function profit, which takes in the number of cookies you sold, and gives - you back the total profit you make from selling your cookies, accounting for - the cost of baking them.\r\n\r\nTest your function by calculating the total - profit for 15 cookies." - Calc Free Play_instruction: "Free Play: Write functions and algorithms of your - own design!" - Calc Rocket 1 (copy 1)_instruction: "In the last puzzle you wrote a contract - for the function \"rocket-height\" that states it has a range of Number, domain - of Number, and should return the height of the rocket traveling at 15 m/s - after a given number of seconds. Let's write an example case now for the - height of the rocket at 3 seconds.\r\n\r\n\r\n\r\n \r\n\r\n" - Calc Rocket 1_instruction: "In the last puzzle you wrote a contract for the - function rocket-height that states it has a range of Number, domain of Number, - and should return the height of the rocket traveling at 15 m/s after a given - number of seconds. Let's write an example case now for the height of the - rocket at 3 seconds." - Calc Rocket 2_instruction: "Great, let's do one more example before writing - the function - what should the rocket height be after 30 seconds?" - Calc Vars 1.1_instruction: "Here we've set the age variable to 17 years. Can - you write an expression that calculates age in days?" - Calc Vars 1_instruction: "Variables allow us to name values so that we can - easily refer to them repeatedly throughout our programs. Here's a variable - called age. Set its value to your age and click run." - Calc Vars 2 (copy 1)_instruction: "Here we've set the \"age\" variable to - 17 - can you write an expression that calculates \"age\" in months?" - Calc Vars 2.1_instruction: "Here's a new variable called age-in-months. Use - the variable age to set age-in-months." - Calc Vars 2_instruction: "Can you write an expression that calculates age in - months?" - Calc Vars 3 (copy 1)_instruction: "Can you add to this code so that it calculates - how many hours there are in \"age\" years?" - Calc Vars 3_instruction: "Can you add to this code so that it uses the \"age\" - variable to calculate age in hours?" - Calc Vars 4_instruction: "We can also set variables by using other variables. - Let's say you have a brother who is two years younger than you - can you - set a new variable \"brother-age\" using your \"age\" variable?" - Choose Your Own Adventure_instruction: "You can do whatever you want in play - lab! Here's an example of choose your own adventure story in play lab." - Code Studio Puzzle Challenge 1 - Artist_instruction: "Draw the line. It is - 200 pixels long. " - Code Studio Puzzle Challenge 1 Artist1_instruction: "Draw the line. It is 200 - pixels long. " - Code Studio Puzzle Challenge 10 - Bee (copy 1)_instruction: "Move the Bee to - the flower and get all of the nectar." - Code Studio Puzzle Challenge 10 - Bee_instruction: "Move the Bee to the flower - and get all of the nectar." - Code Studio Puzzle Challenge 10b - Bee_instruction: "Move the Bee to the flowers - and get all of the nectar at each." - Code Studio Puzzle Challenge 11 - Artist_instruction: "Draw this line by using - the variable \"length\". Each line segment is 75 pixels long." - Code Studio Puzzle Challenge 11b - Artist_instruction: "Draw a square by using - the variable length provided." - Code Studio Puzzle Challenge 12 - Artist_instruction: "The code provided draws - one triangle. Add to it to draw triangles in a hexagon pattern." - Code Studio Puzzle Challenge 12a - Artist_instruction: "The code provided draws - one triangle. Add to it to draw triangles in a hexagon pattern." - Code Studio Puzzle Challenge 13 - Artist_instruction: "This is just like a - \"for\" loop. Complete the code to draw six lines that grow from 50, 60, 70, - 80, 90, to 100 pixels long. " - Code Studio Puzzle Challenge 14 - Artist_instruction: "This is just like a - \"for\" loop. Complete the loop to draw 4 squares that grow from 80, 100, - 120, to 140 pixels. " - Code Studio Puzzle Challenge 2 - Artist_instruction: "Now add a turn and another - line. The lines are 200 pixels long." - Code Studio Puzzle Challenge 3 - Artist_instruction: "Draw the square. Each - side is 100 pixels long." - Code Studio Puzzle Challenge 4 - Artist_instruction: "Draw the octagon. Each - side is 100 pixels long." - Code Studio Puzzle Challenge 5 - Bee (copy 1)_instruction: "Move the Bee to - the flower and get the nectar." - Code Studio Puzzle Challenge 5 - Bee_instruction: "Flowers contain a specific - amount of nectar. Move the Bee to the flower and collect nectar with the get - nectar block." - Code Studio Puzzle Challenge 6 - Bee_instruction: "Honeycombs can hold a specific - amount of honey. Get the nectar from the flower and make some honey." - Code Studio Puzzle Challenge 7 - Bee_instruction: "Move the Bee to the flower - and get the nectar." - Code Studio Puzzle Challenge 8 - Bee_instruction: "The cloud could be hiding - a flower or a honeycomb. Only get nectar from flowers. Only make honey at - honeycombs." - Code Studio Puzzle Challenge 9 - Bee_instruction: "The cloud could be hiding - a flower or a honeycomb. Only get nectar from flowers. Only make honey at - honeycombs." - Code Studio Puzzle Challenge Artist Screencast (copy 1)_instruction: "Draw - the line. Each segment is 100 pixels long. " - Code Studio Puzzle Challenge Artist Screencast 2_instruction: "Complete the - code to draw the line. Each segment is 100 pixels long. " - Code Studio Puzzle Challenge Artist Screencast_instruction: "Draw the line. - Each segment is 100 pixels long. " - Code Studio Puzzle Challenge Bee Screencast_instruction: "Move the Bee to the - flowers and get all of the nectar." - Code Studio Puzzle Challenge Square - Artist_instruction: "Draw a square by - using the variable length provided." - Code Studio Puzzle Challenge Var - Artist_instruction: "Draw a line by using - a variable \"length\" set to 180." - Collector Demo_instruction: "Look at all this loot! Help me get as many coins - as I can so I can improve my farm. I can only use 9 blocks though!" - collector example_instruction: "Put these blocks in order to collect all of - the gold and solve the puzzle." - Collector Test_instruction: "Collect all the gold!" - collectorDebugVideo2_instruction: "Put these blocks in order to collect all - of the gold and solve the puzzle." - collectorSkinVideo1_instruction: "Collect all four piles to pass this level." - collectorSkinVideo2_instruction: "Collect one pile of gold to pass this level." - Course 2 Bee Loops 1_instruction: "Hi, I'm a bee. Can you help me collect - the nectar from these flowers? " - Course 2 Bee Loops 13_instruction: "Assessment: Use the repeat block to collect - all of the nectar." - Course 2 Bee Loops 2_instruction: "Can you do the same task more easily with - a loop?" - Course 2 Bee Loops 3_instruction: "Now use the new repeat block to collect - all of the nectar and make all of the honey." - Course 2 Bee Loops 3__instruction: "Can you use a loop to collect all that - nectar?" - Course 2 Bee Loops 4_instruction: "What happens if you loop this sequence 3 - times? Don't forget to make the honey at the end!" - Course 2 Maze Loops 1_instruction: "Can you get me to the pig using 5 blocks?" - Course 4 2_instruction: "The bee only wants nectar right now. Remember, not - all objects are flowers, so check to gather nectar only at flowers." - Course 4 Artist 1_instruction: "Help me draw a box. (Each line is 200 pixels - long) " - Course 4 Artist 10_instruction: "Click here to see the full instructions again!\r\n\r\nHere - is the code for an interesting shape. What happens when you repeat it multiple - times, turning between each iteration? Notice that the turns in this shape - add up to 420 degrees, which means that when your artist is done drawing, - it will be facing a different direction than when you started. That new direction - is exactly 60 degrees to the right of where you began." - Course 4 Artist 11_instruction: "Now for a challenge! Feel free to use trial - and error. You are not expected to get the image perfect the first time. Want - to see more hints? Click here!" - Course 4 Artist 12_instruction: "Want a second peek at the inspiration design - or the hints? Click here!\r\n\r\nOtherwise, make a design all your own!" - Course 4 Artist 13_instruction: "Still playing? Here is a blank canvas where - you can design anything you want!" - Course 4 Artist 2_instruction: "Can you use a loop to draw the greyed out square? (Each - side is 300px long)" - Course 4 Artist 20_instruction: "Still playing? Here is a blank canvas where - you can create whatever you want!" - Course 4 Artist 3_instruction: "Try to figure out what happens if you run this - code (or press \"Run\" to test it). Then, repeat it enough times to complete - the drawing." - Course 4 Artist 4_instruction: "How many degrees are in a circle? Fill in - the repeat block with that number to create a circle of colors." - Course 4 Artist 5_instruction: "Draw the other half of this design so it's - symmetrical. The triangles are equilateral and are 50 pixels long. Hint: You - may have to run the code several times to figure out all of the blocks that - need to be added." - Course 4 Artist 6_instruction: "Complete the code to draw these three, equilateral - triangles." - Course 4 Artist 7_instruction: "Now nest this loop inside another loop to draw - 10 triangles. This is called a nested loop. Hint: All 10 triangles complete - a 360 degree rotation. " - Course 4 Artist 8_instruction: "Draw this sun by looping this whole block of - code multiple times." - Course 4 Artist 8a_instruction: "Remember this shape? Now we're going to - let you build it without giving you any blocks to start!" - Course 4 Artist 9_instruction: "Loop this design 10 times and make sure to - turn between each shape that's drawn. \r\n" - Course 4 Artist Binary 1_instruction: "Here's a function that takes a binary - string of 1's and 0's and instructs the artist to follow them from left - to right, top to bottom. The artist will fill-in the squares when it sees - a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how - the artist uses binary to draw this pattern." - Course 4 Artist Binary 1a_instruction: "Here's a function that takes a binary - string of 1's and 0's and instructs the artist to follow them from left - to right, top to bottom. The artist will fill-in the squares when it sees - a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how - the artist uses binary to draw this pattern." - Course 4 Artist Binary 2_instruction: "Which of these binary strings could - you loop 8 times to draw this image?" - Course 4 Artist Binary 3_instruction: "Can you draw this pattern by looping - just three binary digits (0s and 1s)?" - Course 4 Artist Binary 4_instruction: "Each binary string represents one row - of this picture. Can you rearrange them so it draws a smiley face instead - of a frowny face?" - Course 4 Artist Binary 5_instruction: "Which 6 digit binary string, repeated - 11 times, will draw this image?" - Course 4 Artist Binary 6_instruction: "What is the shortest binary string that - you can repeat to draw this image?" - Course 4 Artist Binary 7_instruction: "Finish this drawing." - Course 4 Artist Binary Free Play 2_instruction: "Free Play: Here's a blank - canvas for you to draw on. Have fun!" - Course 4 Artist Binary Free Play 2a_instruction: "Here's a higher resolution - canvas to draw on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we - start to get creative with the bits?" - Course 4 Artist Binary Free Play 2b_instruction: "Click here to see hints." - Course 4 Artist Binary Free Play_instruction: "Free Play: Draw whatever you - like with binary!" - Course 4 Artist Binary pre1_instruction: "Use the blocks below to have the - artist draw \"01010101\" in binary in the first row." - Course 4 Artist Binary ryan_instruction: "Binary is a way of representing information - using only two options. Here, we're going to use the options \"off\" (represented - by the number 0) and \"on\" (represented by the number 1). \r\n\r\nWe've - provided you with a grid of \"pixels\" that you can walk through and make - designs by turning on only certain squares. Can you have the artist draw - \"01010101\" in binary in the first row?" - Course 4 Artist For Functions 10_instruction: "Let's Step it up a little, - can you draw a Star shape using the \"Draw a Square Line\" function? Good - luck!" - Course 4 Artist For Functions 11_instruction: "Let's Step it up a little, - can you draw a Star shape using the \"Draw a Square Line\" function? Good - luck!" - Course 4 Artist For Loops 1_instruction: "Use a repeat block to draw this triangle - that is 50 pixels wide." - Course 4 Artist For Loops 10_instruction: "Free Play Time! Have fun drawing - whatever you like with the blocks you have learned how to use" - Course 4 Artist For Loops 11_instruction: "Remember back in a previous stage - when we used a variable to control the number of sides in a shape? We are - going to do the same thing with the `counter` variable now. This pattern starts - with a triangle and adds one side at a time until it draws a decagon (10 sides). - Each side should be 100 pixels long. " - Course 4 Artist For Loops 11a_instruction: "Let's put it all together! Using - your knowledge of `for` loops and the `counter` variable, create this drawing - where each shape has two more sides than the last. Make sure that each side - is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little - of the code has been provided for you." - Course 4 Artist For Loops 12_instruction: "That looked pretty cool, but now - I'd like to draw each shape next to the last one. This time each side is - 20 pixels. Use a jump block to jump forward 40 pixels after each shape. " - Course 4 Artist For Loops 13_instruction: "Hmmm, those shapes are getting bigger - every time! Didn't we already solve this problem with variables? How can - we use the counter variable to make the sides smaller as there are more of - them? Instead of moving forward by a set amount, try moving forward (100 / - counter) pixels." - Course 4 Artist For Loops 14_instruction: "If you turn a little bit more or - less than you normally would for a shape, it creates a neat effect. Try using - some of the code from the last level, but turning 89 degrees to create this - twisted square spiral." - Course 4 Artist For Loops 15_instruction: "Free Play: Try making some drawings - of your own using \"for loops\". We've added a few useful variables for you - as well." - Course 4 Artist For Loops 2_instruction: "I've put the code for drawing a - triangle inside a for loop that counts from 50 to 100 by 10. NOTE: Make sure - you look at the code before you hit \"Run\"." - Course 4 Artist For Loops 3_instruction: "Use the last puzzle as a reference - to complete this one. The smallest triangle has 20 pixel sides, the largest - has 200 pixel sides, and each triangle is 20 pixels larger than the last. - " - Course 4 Artist For Loops 4_instruction: "How would you modify what you've - learned to draw these squares? They start at 15 pixels long, the largest is - 300 pixels long, and each square is 15 pixels larger than the last. " - Course 4 Artist For Loops 5_instruction: "Good job on the last puzzle! Let's - use that \"counter\" variable block again to draw this cool picture. " - Course 4 Artist For Loops 6_instruction: "Free Play! Try using a for loop to - draw a growing shape pattern of your own design." - Course 4 Artist For Loops 6a_instruction: "Make three small changes to the - code from the last level to get this!" - Course 4 Artist For Loops 7_instruction: "What happens if you remove the \"Repeat - 3\" from this algorithm, keeping the \"move\" and \"turn\" blocks in the for - loop? In this spiraling triangle, each side is 20 pixels longer than the last." - Course 4 Artist For Loops 8_instruction: "Just one little change to the code - from the last image can create this drawing. Can you figure out what that - change is?\r\n\r\nHint: You need to remove something!" - Course 4 Artist For Loops 8a_instruction: "Just one little change to the code - from the last image can create this image. Can you figure out what that change - is?" - Course 4 Artist For Loops 9_instruction: "Can you make a spiral? Move forward - from 1 to 75 pixels, increasing by 1 pixel each time." - Course 4 Artist For Loops Challenge_instruction: "**Challenge:** Can you figure - out how to use all of the things you've learned to create this image of polygons, - all with 40 pixel sides?" - Course 4 Artist For Loops Challenge_a_instruction: "Can you figure out how - to use all of the things you've learned to create this image?\r\n\r\nNeed - a hint? Click here." - Course 4 Artist For Loops inspire_instruction: "Free-Play Inspiration: You've - now learned everything you need to know to make a pattern like this! If this - picture inspires you, try to make something similar. Otherwise, create something - all your own.\r\n\r\nNeed a hint? Click here." - Course 4 Artist Functions 1_instruction: "Can you draw a square that is 100 - pixels in length, using a loop?" - Course 4 Artist Functions 10_instruction: "Which block do you need to add to - get the triangle to sit on top of the square?" - Course 4 Artist Functions 11_instruction: "Check out this code that draws a - cube - can you move it into a function called \"Draw a Cube\"" - Course 4 Artist Functions 12.1_instruction: "Let's create a function called - \"draw an octagon 20\" that draws an octagon where each side is 20 pixels - long." - Course 4 Artist Functions 12_instruction: "Loop square function to draw a line" - Course 4 Artist Functions 13.1_instruction: "Now, let's make a function called - \"jump to upper right\" that moves the artist to the upper-right of the octagon - that you just drew so we can finish this pattern.\r\n\r\nHint: To get yourself - to the upper-right corner, try jumping in a pattern that makes just 3/8 of - the octagon." - Course 4 Artist Functions 13_instruction: "Check it out we have a new function - called \"draw a line of squares\". Feel free to take a look inside the function - block to see how we built it. Click on \"Run\" when your are ready for the - next puzzle." - Course 4 Artist Functions 14.1_instruction: "Now, let's make a function called - \"jump to upper right\" that moves the artist to the top-right of the octagon - that you just drew so we can finish this pattern." - Course 4 Artist Functions 14_instruction: "You're doing great! Let's use - your new \"Draw a line of squares\" function to draw a Square shape. Remember - each square is 40 pixels in length." - Course 4 Artist Functions 15_instruction: "Let's Step it up a little, can - you draw a star shape using the \"draw a line of squares\" function? Good - luck! Hint: you may have to turn 144 degrees" - Course 4 Artist Functions 2_instruction: "Can you draw 3 squares 20 pixels - apart from one another? Hint: each square is 100 pixels in size" - Course 4 Artist Functions 3_instruction: "Using the \"draw a square\" function - block, can you draw this picture? Hint: each square is 120 pixels apart.\r\n" - Course 4 Artist Functions 4_instruction: "Are you ready to create your own - \"Function Block\"? Click on the \"Functions\" block in the tool box, name - it \"draw a triangle\", then create a triangle as you have done before with - the Action and Loops blocks. Then click on the Save and Close in the upper - right hand corner. Hint: Create a triangle that is 100 pixels in length. Good - luck!" - Course 4 Artist Functions 5 OLD_instruction: "Let's try to use our two functions - to draw a house - what needs to be fixed in this code to draw the house properly?" - Course 4 Artist Functions 5_instruction: "Using the \"draw a square\" function - block, can you draw this picture? Hint: each square is 120 pixels apart.\r\n" - Course 4 Artist Functions 6_instruction: "Which block do you need to add to - get the triangle to sit on top of the square?" - Course 4 Artist Functions 7_instruction: "Can you draw a line of squares using - a Square function? Each square is 40 pixel's in length." - Course 4 Artist Functions 8_instruction: "Are you getting the hang of how to - use function blocks? Let's modify this square so that it is 200 pixels in - size. Hint: click on \"edit\" to change the size of the \"draw a square\" - function editor. Remember to click on \"save and close\" to get out of the - function editor. " - Course 4 Artist Functions 9_instruction: "We have given you most of the code - to create a function. However there seems to be something missing. Can you - make this function block complete?" - Course 4 Artist Functions challenge_instruction: "Click here to see the hints - again." - Course 4 Artist Functions Inspiration_instruction: "Click here to see the hints - again." - Course 4 Artist Functions inspire_instruction: "Click here to see the inspiration - picture again." - Course 4 Artist Inspire_instruction: "Want a second peek at the inspiration - design or the hints? Click here!\r\n\r\nOtherwise, make a design all your - own!" - Course 4 Artist Params 1_instruction: "Let's edit a function that draws a - square with 50 pixel sides" - Course 4 Artist Params 10_instruction: "You can call functions from inside - other functions! Using your \"shape\" function as a base, create 3 house shapes - each 20 pixels larger than the last starting at 50 pixels in length. Using - a counter loop might be helpful. " - Course 4 Artist Params 11_instruction: "How about a function called \"pinwheel\" - that takes three parameters - \"sides,\" \"length\" and \"repeat.\" You can - calculate how much to turn after each shape using the same math you used to - figure out the turns for a shape of \"sides\". Can you recreate this picture? - Here's a tip each shape is 100 pixel's in length." - Course 4 Artist Params 12_instruction: "Use your \"pinwheel\" function to draw - each of these shapes. The side length for each image is 50." - Course 4 Artist Params 13_instruction: "Freeplay: Here are the functions you've - written, and some more for you to play with. Draw something awesome!" - Course 4 Artist Params 2_instruction: "That triangle function would be a whole - lot more useful if it could draw triangles of different sizes. I've added - a parameter for line length, but it doesn't do anything yet. Can you update - the function so it uses the \"length\" parameter when it draws each side? - The triangle sizes are 150 pixels, 75 pixels and 25 pixels." - Course 4 Artist Params 3_instruction: "Awesome, can you draw each of these - triangles with that new function? The first is 25 pixels long, the second - is 50, and the third is 75. " - Course 4 Artist Params 4_instruction: "Can you add a new function called square? - It should also take a length parameter, just like the triangle. This time - draw 3 squares 25, 50 and 75 pixels in length,100 pixels apart." - Course 4 Artist Params 5_instruction: "Use both of your new functions to draw - this picture. To make this easier you use a loop with a \"counter\" parameter. - " - Course 4 Artist Params 6_instruction: "Let's edit this \"draw a shape\" function. - It already has a \"length\" parameter. Now, let's edit the function to also - add a \"sides\" parameter. Remember the angle to turn for a given shape is - 360 divided by the sides it has. Hint: lengths for each shape are the triangle - is 100 pixels, the hexagon is 25 pixels and the square is 50 pixels. " - Course 4 Artist Params 7_instruction: "Can you draw these shapes by filling - in the \"???\" The square and triangle are 100 pixels in size while the hexagon - is 75 pixels in size. " - Course 4 Artist Params 8_instruction: "Can you figure out how to draw this - shape? Here's a hint create a new function with 6 sides called a hexagon. - " - Course 4 Artist Params 9_instruction: "Do you remember when we used the counter - loop but removed a loop within? Let's have some fun and use the \"draw a - shape\" function with \"sides\" and \"length\" parameters. Can you re create - these shapes? The square counter should be 5/100/5, the triangle counter should - be 10/100/10 and the hexagon is 2/100/2." - Course 4 Artist Var 9_instruction: "Here's the algorithm to draw a triangle, - modify it so it uses the \"sides\" variable instead. Replace the number 3 - with the \"sides\" variable. Hint: remember to use the \"set sides to\" block." - Course 4 Artist Vars 1_instruction: "Let's draw an equilateral triangle. \r\n\r\nIt - has to be exactly 100 pixels long on each side." - Course 4 Artist Vars 10_instruction: "Here's an algorithm that draws a triangle - out of smaller triangles. Can you modify it so that it uses the \"sides\" - variable to draw each triangle? Look through the code, and every time you - see the number 3, replace it with your \"sides\" variable. Remember to use - the \"set sides\" block." - Course 4 Artist Vars 11_instruction: "Here’s more complicated code using the - same concepts from the last puzzle - what should you set the \"sides\" variable - to in order to draw this picture made of squares?" - Course 4 Artist Vars 12_instruction: "Let's set the \"sides\" variable to - 5. The more sides we add to this algorithm, the bigger this whole pattern - gets! Notice that there is another variable called \"length\". We can now - use that wherever we have a \"move forward.\" Set the \"length\" variable - to 75 for this shape." - Course 4 Artist Vars 13_instruction: "When a shape has lots of sides, each - side needs to be shorter if you want the whole pattern to fit on the screen. - \r\nLet's recreate the algorithm for this amazing pattern, but instead of - manually setting the `length` variable, let's use a math block with the `sides` - variable inside to make sure that each shape fits correctly. The perimeter - of each polygon is 300 pixels.\r\nNeed some hints? Click here." - Course 4 Artist Vars 14_instruction: "Free Play: Check it out! Now your algorithm - is nested within one more loop. Experiment with changing the values of your - two variables to draw cool patterns.\r\n\r\nFor even more effect, try playing - with color! Use random colors inside loops to see how it changes your design." - Course 4 Artist Vars 2_instruction: "Instead of using \"move forward by 150,\" - the \"move\" block is now referencing a variable called \"length.\" Can you - set \"length\" to 150 to draw this new triangle?" - Course 4 Artist Vars 3_instruction: "Here's a loop that draws a square, but - something's missing. Can you fix it so that it uses the variable \"length\" - to figure out how long each side should be? " - Course 4 Artist Vars 4_instruction: "Now I want to make a rectangle that is - twice as tall as it is wide. We've got a variable called \"width\" that needs - to be set to 100. Can you use the math blocks to complete the code?" - Course 4 Artist Vars 5_instruction: "Use the variable \"sides\" to control - how many times this loop gets run." - Course 4 Artist Vars 6_instruction: "Here’s some code that can draw any regular - polygon. There’s a new variable called sides that is set to 4. Can you use - the sides variable (along with the math block) to turn the right amount regardless - of how many sides there are in the polygon?\r\n\r\nClick here to go back to - the hint!" - Course 4 Artist Vars 7_instruction: "Use what you learned in the last puzzle - to create this hexagon using the \"sides\" variable.\r\n\r\nSee how you could - change just one value to draw a triangle, square, pentagon, or octagon?" - Course 4 Artist Vars 8_instruction: "Free Play: Experiment with the number - of sides this shape has. Can you change the algorithm so that the overall - size of the shape stays the same, no matter how many sides it has? Hint: If - you divide your starting length by the number of sides, the length of each - side will get shorter as the number of sides gets higher." - Course 4 Artist Vars 9_instruction: "Modify this algorithm so it uses the \"sides\" - variable instead of a fixed number to draw a triangle. Don't forget to use - the \"set sides to\" block." - Course 4 Bee 1_instruction: "The bee can't tell what's under the cloud! \r\n\r\nUse - the `if` block to check whether there is a flower under the cloud. \r\n\r\nGet - nectar one time, ONLY if there is a flower." - Course 4 Bee 2_instruction: "Use the \"if/else\" block to check each object - to see if it's a flower or a honeycomb . If it's a flower, collect one nectar...otherwise, - make one honey!" - Course 4 Bee 3_instruction: "The unknown object is either a flower or a honeycomb. - This time, use the if/else block to collect one nectar if it is a flower, - else make one honey (because then it would be a honeycomb)." - Course 4 Bee 4_instruction: "This purple flower may have either 3, 2, or 1 - nectar. Here an if/else block is combined with another if/else block to create - an \"if/else-if/else\" statement. Complete the solution to collect the unknown - amount of nectar." - Course 4 Bee 5_instruction: "This purple flower may have either 3, 2, or 1 - nectar. Add an if-else block to create an if, else-if, else block. Complete - the solution to collect the unknown amount of nectar." - Course 4 Bee 6_instruction: "This purple flower may have either 3, 2, or 1 - nectar. Create an if, else-if, else block to collect the unknown amount of - nectar." - Course 4 Bee 7_instruction: "Use everything you have learned so far to collect - all the nectar. The purple flower may have either 3, 2, or 1 nectar." - Course 4 Bee For Loops 1_instruction: "Use a loop to collect the nectar from - each flower." - Course 4 Bee For Loops 10_instruction: "If your loop is counting down, the - increment is subtracted from your counter variable each loop. What should - your increment be to collect 9, then 6, and then 3 nectar?" - Course 4 Bee For Loops 11_instruction: "What's wrong with this loop? See if - you can fix it and make the bee collect all the nectar." - Course 4 Bee For Loops 2_instruction: "Here's a new kind of loop, called the - \"for\" loop. This particular for loop will count from 1 to 5 by 1, and run - the contents of the loop each time it counts. Help the Bee get the nectar." - Course 4 Bee For Loops 3_instruction: "You can solve this puzzle by using a - for loop to count from 1 to 3 by 1. Now let's go get some nectar!" - Course 4 Bee For Loops 4_instruction: "Collect all of the nectar from these - flowers. I wonder if there's an easier way to do this..." - Course 4 Bee For Loops 5_instruction: "Ah, the for loop makes this much easier! - Using the \"counter\" variable from the for loop to loop the \"get nectar\" - block the same number of times as the loop. Whew! That's a lot of loops. - All the code you need it there, take a look at how it is put together then - click on Run and see how it works. " - Course 4 Bee For Loops 6_instruction: "You can also use a for loop to count - down. Try gathering this nectar by counting down from 5 to 1 by 1." - Course 4 Bee For Loops 7_instruction: "Use your for loop \"counter\" variable - to control how far to move horizontally." - Course 4 Bee For Loops 8_instruction: "Can you use the loop variable to control - movement and nectar collection?" - Course 4 Bee For Loops 9_instruction: "The last number in your for loop is - called the \"increment,\" and each time the loop is run the counter variable - changes by the increment. Try collecting these flowers using an increment - of 2." - Course 4 Bee Loops 5 NEW_instruction: "Here are three flowers. Can you find - the pattern of instructions that you need to repeat 3 times to collect the - nectar with the fewest number of blocks?" - Course 4 Bee Loops 5a NEW_instruction: "Now, use loops to help the bee collect - all the nectar on its way to the honeycomb with as few blocks as possible. When - you get there, don't forget to make honey!" - Course 4 Bee Params 1_instruction: "Write a sequence to collect all of the - nectar using `get 3 nectar` which turns, moves to collect the nectar, and - then returns to the original location." - Course 4 Bee Params 2_instruction: "Modify the \"get 3 nectar\" function so - it makes me turn right instead of left to the flowers." - Course 4 Bee Params 3 (copy 1)_instruction: "Now there are flowers on both - sides! Maybe you can use a parameter so that the same function works for flowers - on either side. I've added a parameter called \"direction\" to the function. - If the \"direction\" parameter equals 0 I should turn left, if it's 1 I should - turn right." - Course 4 Bee Params 3_instruction: "Now there are flowers on both sides! We've - added variables called \"left\" and \"right\" for you to use, and added a - parameter called \"direction\" to \"get 3 nectar\". Edit \"get 3 nectar\" - so that the bee turns the correct direction when the variables \"left\" or - \"right\" are passed into the function. " - Course 4 Bee Params 4 (copy 1)_instruction: "Try using your new function to - collect all of the flowers. Remember, 0 = left and 1 = right." - Course 4 Bee Params 4 - Two WhenRun_instruction: "Try using your new function - to collect all of the flowers. Remember to use the left and right variables." - Course 4 Bee Params 4 backup_instruction: "Wouldn't it be nice if we could - collect all of these nectars with the a single function? Try adding a new - parameter to your function called \"nectars\" to control the amount of nectar - to collect. You'll probably want to rename the function too!" - Course 4 Bee Params 4_instruction: "Try using your new function to collect - nectar from all of the flowers. Remember to use the left and right variables." - Course 4 Bee Params 5_instruction: "Let's start from scratch - can you create - a new function called \"get 5 nectar\" with a direction parameter?" - Course 4 Bee Params 6 (copy 1)_instruction: "Try using your new function to - collect all of this nectar." - Course 4 Bee Params 6_instruction: "Wouldn't it be nice if we could collect - all of these nectars with a single function? Try adding a new parameter to - your function called \"nectar units\" to control the amount of nectar to collect. - You'll probably want to rename the function too!" - Course 4 Bee Params 7 (copy 1)_instruction: "Try using your new function to - collect all of this nectar." - Course 4 Bee Params 7_instruction: "Try using your new function to collect - all of this nectar." - Course 4 Bee Params 8 Clone 2_instruction: "Oooh, now there's honey to deal - with too! How could you update your function to either get nectar or make - honey." - Course 4 Bee Params 8 clone 3_instruction: "Oooh, now there's honey to deal - with too! How could you update your function to either get nectar or make - honey." - Course 4 Bee Params 8 Clone_instruction: "Oooh, now there's honey to deal - with too! How could you update your function to either get nectar or make - honey." - Course 4 Bee Params 8 new_instruction: "Oooh, now there's honey to deal with - too! How could you update your function to either get nectar or make honey." - Course 4 Bee Params 8_instruction: "Challenge: Now there's honey to deal with - too! Rewrite your function to use both the number of honey units and the number - of nectar units. How would you use those numbers to decide what you should - do?" - Course 4 Bee Params Ex_instruction: "Try using your new function to collect - all of this nectar." - Course 4 Binary 1_instruction: "Here's a function that takes a binary string - of 1's and 0's and instructs the farmer to turn on the go from left to right, - top to bottom, turning on the squares where the number has a zero. Run the - code provided to see how the farmers uses binary to draw an image." - Course 4 Binary 2_instruction: "What binary string could you loop 8 times to - draw this image? Hint: the number \"1\" fills a hole." - Course 4 Binary 3_instruction: "Can you draw this pattern by looping a single - binary string?" - Course 4 Binary 5 (copy 1)_instruction: "Which binary string, repeated 10 times, - will draw this image?" - Course 4 Binary 5_instruction: "Which binary string, repeated 10 times, will - draw this image?" - Course 4 Binary 6 (copy 1)_instruction: "Which binary string, repeated 10 times, - will draw this image?" - Course 4 Binary 6_instruction: "Which binary string, repeated 10 times, will - draw this image?" - Course 4 Binary 7_instruction: "Which binary string, repeated 10 times, will - draw this image?" - Course 4 Binary 8_instruction: "You can complete the most of this image by - looping a 5 bit binary number - then you'll need one more 4 bit number to - get the bottom right-hand corner." - Course 4 EC 1a_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 1b_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 2a_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 2b_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 2c_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 2d_instruction: "No rules. No clues. Just the challenge!" - Course 4 EC 3_instruction: "Use what you learned in the previous level to draw - an image like this. Note: The code becomes more simple if you incorporate - parameters. " - Course 4 EC 3a_instruction: "Extreme Challenge: No rules. No clues. Just the - challenge!" - Course 4 Maze 1_instruction: "Get the angry bird to the pig!" - Course 4 Maze 2_instruction: "Avoid the TNT!" - Course 4 Maze 3_instruction: "Program the angry bird to get to the pig. " - Course 4 Maze 4_instruction: "Try the \"repeat\" block to use fewer blocks - when solving this puzzle..." - Course 4 Maze 5_instruction: "Can you solve this puzzle using the fewest number - of blocks possible?" - Course 4 Maze 6_instruction: "Can you solve this puzzle using the fewest number - of blocks possible?" - Course 4 Play Lab For Loops 2_instruction: "This time, let's try counting - the odd numbers from 1 to 100." - Course 4 Play Lab Params 1_instruction: "Here's a function called `jump` that - causes your main character to jump up 100 pixels. Run the program and use - the jump function to collect all of the flags by moving the dog with the arrow - keys." - Course 4 Play Lab Params 10_instruction: "We've added one last function for - you. \r\n\r\nUse an \"if\" statement to program your game to call the \"level_up\" - function only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor - example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 - to move to the next puzzle. " - Course 4 Play Lab Params 2_instruction: "Now we've got flags that are too - high for our current jump! Let's use both the \"up\" and \"down\" arrows - so that we can have multiple jump heights. \r\n\r\nWe need to add a parameter - to our jump function called \"height\". The up arrow should cause the dog - to jump 200 pixels and the down arrow should make it jump only 100 pixels. - " - Course 4 Play Lab Params 3_instruction: "We have added another parameter to - the jump function so that we can use it with other actors. Each actor is represented - by a number, starting from one. Edit the \"jump\" function so that it uses - the \"actor\" parameter to make the correct character jump. " - Course 4 Play Lab Params 4_instruction: "Here's a function called `patrol`. - \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 pixels." - Course 4 Play Lab Params 5_instruction: "Edit the the \"patrol\" function to - add an \"actor\" parameter, so that we can call it for each of the actors - on the screen. Remember, the actors correspond to numbers 1, 2, and 3." - Course 4 Play Lab Params 6_instruction: "Add another parameter called \"speed\" - to the \"patrol\" function. Try using a \"set speed\" block with the new \"speed\" - parameter to help Penguin get both flags before the other sprites even get - one." - Course 4 Play Lab Params 7_instruction: "Let's have some fun! Look at the - code provided to see if you can figure out what each block does. \r\nWhen - you're done, use the arrow keys to control Dog and collect all of the flags.\r\nNOTE: - You don't need to make any changes to the program" - Course 4 Play Lab Params 8_instruction: "Use the `when actor touches` block - to send Dog back to the top-left ONLY if Dog touches any of the other actors." - Course 4 Play Lab Params 9_instruction: "Here's our game from an earlier stage, - but most of the code is hidden. There’s a new function `score_points.`\r\n\r\nEdit - the function so that a new parameter called `points` can be added to `player_score`. - \r\n\r\nThe variable `player_score` should increase each time Dog tags Cat - with pie, and decrease each time that Cat tags Dog with a sandwich.\r\n\r\nNote: - When you're done, click \"Run\" to play. When Dog scores 6 points, you will - move on to the next puzzle. " - Course 4 Play Lab Vars 1_instruction: "This time you don't have to write any - code, just hit \"Run\" to play the game! In this game, you're the dog who - is trying to collect more flags than the cat. Use the down arrow to control - the dog. Press \"Finish\" when you're done playing." - Course 4 Play Lab Vars 2_instruction: "The race in that last puzzle wasn't - very fair! Change the `dog_speed` variable to make sure you can collect more - flags than Cat. The first to collect 10 flags wins!" - Course 4 Play Lab Vars 3_instruction: "Use the left and right arrows to move, - and the up arrow to jump. See if you can collect all of the flags." - Course 4 Play Lab Vars 4_instruction: "Now we're using a variable called \"height\" - to control how high the dog can jump. Update the \"height\" variable so that - the dog can jump high enough to reach all the flags." - Course 4 Play Lab Vars 5_instruction: "Let's build a game! First we'll need - a score. Rebuild the code that you saw in the last level to set the score - to 10. " - Course 4 Play Lab Vars 6 (copy 1)_instruction: "Cool, now we've got our score - variable, but how are we going to make it useful? How about adding to your - score variable each time you hit the enemy with a fireball? Use the \"when - actor 2 touches anything\" event to trigger an update to your score when your - fireballs hit the cat. You can increment the score by setting score = score - + 1. Get your score up to 10 (going one at a time!) to pass the level." - Course 4 Play Lab Vars 6_instruction: "Use the right arrow to throw pie.\r\n\r\nIn - our game, how should we score points? Add 1 to your \"points\" variable each - time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" - event to trigger an update to your score. You can increment your variable - by setting \"points = points + 1.\" Get your score up to 10 (going one at - a time!) to pass the level." - Course 4 Play Lab Vars 7_instruction: "Nice, now let's make sure this game - isn't too easy to play. Any time Dog (actor 1) gets hit by a sandwich from - Cat (actor 2), you should lose a point. Start with 10 points so it's not - too hard. Let your score drop down from 10 to 0 to pass the level." - Course 4 Play Lab Vars 8 (copy 1)_instruction: "Alright, one last thing for - this game - let's set it up so the player can win (or lose). Use a forever - loop to check the value of score - if score is ever greater that 20, make - the enemy vanish. If the score is every less than 0, make the player vanish. - Click \"Finish\" when the game works like you'd like it to." - Course 4 Play Lab Vars 8_instruction: "Let's set up this game so the Dog can - win (or lose). Use a forever loop to check the value of score - if score is - ever greater that 20, make the enemy (the Cat) vanish. If the score is ever - less than 0, make the player (the Dog) vanish. Click \"Finish\" when the game - works like you'd like it to." - Course 4 Play Lab Vars 9_instruction: "Free Play time! Here are all of the - variables we've played with so far in this stage, as well as a few more in - case you want them. \r\n\r\nNotice that there are now so many blocks in our - toolbox that they need to be organized! Here, we've put each piece into - an appropriate category. Take some time to explore everything that is available. - When you're done browsing, make a game or story using repeats, variables, - and events. \r\n\r\nHint: scroll down to see all the commands in the workspace." - Course 4 Play Lab Vars_instruction: "Alright, one last thing for this game - - let's set it up so the player can win (or lose). Use a forever loop to - check the value of score - if score is ever greater that 20, make the emeny - vanish. If the score is every less than 0, make the player vanish." - Course 4 Play Labs For Loops 1_instruction: "Let's make the dog speak every - number from 1 to 100. Use a `for` loop and the counter block to speak the - counter variable each time the loop is run." - Course 4 Play Labs For Loops 2_instruction: "This time, help Olive the Cat - count only the odd numbers from 1 to 101." - Course 4 Play Labs For Loops 3_instruction: "If we count by larger numbers, - we count even higher in the same amount of time. Try making Pirate Pegleg - count from 10 up to 1000, adding 10 at a time." - Course 4 Play Labs For Loops 4_instruction: "Changing the increment can be - helpful, but we're still counting linearly (each number is the same distance - from the last) What if I wanted to count exponentially? Without changing the - settings in this for loop, can you count 1, 4, 9 , 16, 25... (counter squared)?" - Course 4 Play Labs For Loops 4a_instruction: "Now, let's blend the variables - from Stage 7 together with your \"counter\" variable to make some magic happen. \r\n\r\nIn - this puzzle, Dog will count from 0 to 1000 by \"increment\". Set the \"increment\" - variable to 10 at the beginning of your code to see what happens." - Course 4 Play Labs For Loops 5_instruction: "In the last stage we counted the - square of each number. Try changing \"counter ^ 2\" to \"counter ^ 3\" to - count the cube of each number (1, 8, 27, 64, 125, 216, 343…)" - Course 4 Play Labs For Loops 5a_instruction: "In this puzzle, Dog will be your - time keeper.\r\n\r\nDog will count from 0 to 30 by \"increment\". The \"increment\" - variable will begin with a value of 1.\r\n\r\nCan you make it so that each - time you click Dog, the increment increases by 2? Click the forward arrow - to run the for loop.\r\n\r\nRun the loop a couple of times, clicking Dog before - each one." - Course 4 Play Labs For Loops 6_instruction: "You may recall that a prime number - is any whole number that is only divisible by itself and 1. Use the \"is_prime\" - function to speak out only the prime numbers from 1 to 100." - Course 4 Play Labs For Loops 6a_instruction: "Dog will still keep time by counting - with our \"for loop\" by \"increment\", but this time, we will add The Wizard - into the mix. Can you change the code so that \"increment\" goes up by two - each time The Wizard is clicked?\r\n\r\nWatch out! The Wizard moves quickly!" - Course 4 Play Labs For Loops 7_instruction: "Could you use a for loop to help - me speak the sequence 1, 4, 7, 10, 13, 16, 19, 22, 25?" - Course 4 Play Labs For Loops 7a_instruction: "Now we're getting somewhere! What - if we start counting how many times we can click The Wizard before Dog gets - to 30? \r\n\r\nFinish adding blocks to The Wizard so that every time he's - clicked the variable \"clicked\" increases by one. You can ignore \"increment\" - for now.\r\n\r\nDog will start counting when you click \"Run\"." - Course 4 Play Labs For Loops 8_instruction: "Now, help the actors move as they - count. \r\n\r\nDog should move and count by adding 2 (counter + 2) each time. Cat - will move and count by multiplying by 2 (counter * 2) each time. Penguin - will move and count to the power of 2 (counter ^ 2) each time. Who will reach - their flag first?" - Course 4 Play Labs For Loops 8a_instruction: "To finish our game, we need to - bring back the \"increment\" variable! Let's tie it to the level of the - game.\r\n\r\n1) Keep track of the number of times The Wizard is clicked.\r\n2) - If The Wizard is clicked at least 10 times before Dog counts to 30, raise - \"increment\" by 1 and start again.\r\n3) If The Wizard does not get clicked - at least 10 times, the game is over." - Course 4 Playlab For Loop Freeplay_instruction: "Freeplay: Use everything you've - learned so far to make a game that includes a `for` loop!" - Course 4 Playlab For Loops 4b_instruction: "Can you change the **increment** - in one of the loops so that the race is a tie?" - Course 4 Playlab For Loops 5b_instruction: "Adjust the interval on these `for` - loops so that the two characters end in the exact same place." - Course 4 Playlab For Loops 6b_instruction: "Edit this `for` loop to create - a game that's fun for you to play! \r\nPress \"Run\" and click Madame Unicorn - as many times as you can. Can you beat our score of 24? " - Course 4 SCF 1_instruction: "Use the suggested functions to draw four rows - of hexagons. Notice how our even numbered rows are shifted to the right?" - Course 4 SCF 1a_instruction: "Can you figure out how to collect all of this - nectar with the fewest blocks possible?" - Course 4 SCF 1b_instruction: "Can you figure out how to collect all of this - honey with the fewest blocks possible?" - Course 4 SCF 2_instruction: "Use what you learned in the previous level to - draw an image like this. Note: The code becomes more simple if you incorporate - parameters. " - Course 4 SCF 3 Fail 1_instruction: "Can you figure out how to..." - Course 4 SCF 3 Fail 2_instruction: "Can you figure out how to..." - Course 4 SCF 3_instruction: "Use what you learned in the previous level to - draw an image like this. Note: The code becomes more simple if you incorporate - parameters. " - Course 4 SCFL 1_instruction: "Solve this puzzle using the fewest number of - blocks possible." - Course 4 SCFL 1a_instruction: "Can you get Skrat to his acorn using as few - blocks as possible?" - Course 4 SCFL 1b_instruction: "Can you get Skrat to his acorn using as few - blocks as possible?" - Course 4 SCFL 2_instruction: "Solve this puzzle using the fewest number of - blocks possible." - Course 4 SCFL 3_instruction: "Can you figure out how to re-create this drawing?" - Course 4 SCFL 4_instruction: "Can you figure out how to re-create this drawing?" - Course 4 SCFL 5_instruction: "Can you figure out how to re-create this drawing?" - Course 4 SCFL 6_instruction: "Can you figure out how to re-create this drawing - with a single loop?" - Course 4 SCFL 7_instruction: "The artist wants to catch some waves! Can you - figure out how to re-create this drawing?" - Course 4 SCFP 1_instruction: "Create a function with parameters that allows - the artist to jump backward and forward by x pixels, and also up and down - by y pixels (using positive and negative numbers)." - Course 4 SCV 1_instruction: "Click here to view the instructions again." - Course 4 SCV 2_instruction: "Click here to view the instructions again." - Course 4 SCV 3_instruction: "Now for a game of tag! Tag Cat to get 2 points. - Tag Penguin to get 3 points. Get exactly 10 points to win!\r\nBut be careful, - when Cat and Penguin tag each other, they take points away.\r\n\r\nAdd the - blocks necessary to make this game work the way it's been explained. How - will you get Dog to move in all directions using the arrow keys? How will - you add points when Dog tags Cat or Penguin? How will you subtract points - when Cat and Penguin touch?" - Course 4 SCV 4_instruction: "Solve this puzzle with the fewest number of blocks - possible." - Course 4 SCV 5_instruction: "Solve this puzzle with the fewest number of blocks - possible." - Course 4 SCV 6_instruction: "Click here to view the instructions again." - Course 4 SCVP 1_instruction: "Create a function with parameters that allows - the artist to jump backward and forward by x pixels, and also up and down - by y pixels (using positive and negative numbers)." - Course 4 Variables Assessment_instruction: "Can you create this image using - a variable for sides? Each line should be 50 pixels long." - Course1BeePuzzle12_instruction: "Get three nectars and then make two honey" - Course1MazeAssessment1_instruction: "This is a test!\r\nMove one way, then - another to get me to the pig" - Course1MazeAssessment2_instruction: "This is a test!\r\nMove one way, then - another to get me to the pig." - course2_playlab_stage17_1_instruction: "Can you make Jorge the Dog (actor 1) - say \"Hi\"?" - course2_playlab_stage17_10_instruction: "Add blocks to the `when run` event - to change the background and the speed of Waddles.\r\n\r\nPlay the game and - move Waddles with the arrows until you score." - course2_playlab_stage17_11_instruction: "Create your own story. When you're - done, click Finish to let friends try your story on their phones." - course2_playlab_stage17_2_instruction: "Can you make Jorge (actor 1) say something, - then have Olive the Cat (actor 2) say something?" - course2_playlab_stage17_3_instruction: "Can you write a program to make Jorge - (actor 1) move toward Olive the Cat?" - course2_playlab_stage17_4_instruction: "Can you write a program that makes - Jorge (actor 1) move to Olive the Cat, and have Olive say \"Hello\" when Jorge - reaches her?" - course2_playlab_stage17_5_instruction: "Can you write a program to make Octavia - say \"Hi\" when she is clicked?" - course2_playlab_stage17_6_instruction: "Now, write a program to make Waddles - move around using the up / down / left /right keys to hit all of the targets!" - course2_playlab_stage17_7_instruction: "The `repeat forever` block allows you - to run code over and over forever. Can you attach blocks to move Chomp the - Dino (actor 2) up and down forever?" - course2_playlab_stage17_8_instruction: "Can you have Waddles (actor 1) say - \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen you're - done, play the game to make that happen." - course2_playlab_stage17_9_instruction: "Can you add a block to score a point - when Waddles runs into Octavia (actor 3)? \r\nPlay the game and move Waddles - with the arrows until you score!" - course3_playlab_stage16_1_instruction: "Can you make this dog say \"hello world\"?" - course3_playlab_stage16_2_instruction: "Can you make the dog say something - and then have the cat say something afterwards?" - course3_playlab_stage16_3_instruction: "Can you write a program to make this - dog move to the cat?" - course3_playlab_stage16_4_instruction: "Can you write a program that makes - the dog move to the cat, and have the cat say \"hello\" when the dog reaches - him?" - course3_playlab_stage16_5_instruction: "Can you add a block to make the octopus - happy?" - course3_playlab_stage16_6_instruction: "Create your own story. When you're - done, click Finish to let friends try your story on their phones." - course3_playlab_stage17_1_instruction: "Can you write a program to make the - octopus say \"hello\" when it is clicked?" - course3_playlab_stage17_2_instruction: "Can you write a program to make Waddles - move around using the up / down / left /right keys to hit all of the targets?" - course3_playlab_stage17_3_instruction: "The \"repeat forever\" block allows - you to run code continuously. Can you attach blocks to move this dinosaur - up and down repeatedly?" - course3_playlab_stage17_4_instruction: "Can you have Waddles say \"Ouch!\" - and play a \"hit\" sound if he runs into the dinosaur, and then move him with - the arrows to make that happen?" - course3_playlab_stage17_5_instruction: "Can you add a block to score a point - when Waddles runs into the octopus, and then move him with the arrows until - you score?" - course3_playlab_stage17_6_instruction: "Can you add blocks to change the background - and the speed of Waddles, and then move him with the arrows until you score?" - course3_playlab_stage17_7_instruction: "Create your own story. When you're - done, click Finish to let friends try your story on their phones." - course_playlab_variables1_instruction: "This is Pirate Pegleg. He's awfully - hard to understand these days!" - course_playlab_variables2_instruction: "Now, decode Pirate Pegleg's speech - by changing the value of the variables in just two places! \r\n" - course_playlab_variables3_instruction: "Now, decode Pirate Pegleg's speech - by changing the value of the variables in just two places! \r\n" - courseA_artist_loops1_instruction: "This is a new type of puzzle called \"Artist\". - Play with the level and draw something fun." - courseA_artist_loops10_instruction: "Help me put down stones so I don't fall - in!" - courseA_artist_loops11_instruction: "Help me build steps to watch the ship - sail away." - courseA_artist_loops12_instruction: "The artist saw something funny in the - distance. Draw what you think he saw." - courseA_artist_loops2_instruction: "Help the artist draw this line two times - forward." - courseA_artist_loops3_instruction: "Draw a line forward five times." - courseA_artist_loops4_instruction: "Now, use a `repeat` loop to draw this line - five times!" - courseA_artist_loops5_instruction: "Draw a line seven steps long. This will - become our horizon." - courseA_artist_loops6_instruction: "Let's put a nice hill in the back." - courseA_artist_loops7_instruction: "Use the `repeat` loop to add waves to the - water." - courseA_artist_loops8_instruction: "We need a ladder up to the boat." - courseA_artist_loops9_instruction: "Challenge: Fix the stairs." - courseA_collector_loops1_instruction: "Move Laurel around and get as much treasure - as you can!" - courseA_collector_loops10_instruction: "Help Laurel get all of the treasure - from this deep valley." - courseA_collector_loops11_instruction: "Help Laurel get all of the treasure - from this cave." - courseA_collector_loops12_instruction: "Eureka! Collect as much treasure as - you can!" - courseA_collector_loops2_instruction: "Collect all three piles to pass this - level." - courseA_collector_loops3_instruction: "How can Laurel collect all five piles - of treasure using only one `[E-->]` block?" - courseA_collector_loops4_instruction: "Fix Laurel's path to get all of this - treasure." - courseA_collector_loops5_instruction: "Use what you learned to get all of the - treasure." - courseA_collector_loops6_instruction: "Add blocks to this code to collect all - of the treasure." - courseA_collector_loops7_instruction: "What should you add to this code to - get all of the treasure?" - courseA_collector_loops8_instruction: "Write the code to get all of this treasure." - courseA_collector_loops9_instruction: "**Challenge:** The treasure goes all - the way up these stairs! Write the code to help Laurel get it all." - courseA_maze_seq1_instruction: "Get the bird to the bad pig!" - courseA_maze_seq10_instruction: "Challenge: Go around the TNT to get the bird - to the pig! " - courseA_maze_seq11_instruction: "Move one way, then another to get the bird - to the pig." - courseA_maze_seq12_instruction: "Get that pig! " - courseA_maze_seq13_instruction: "Get the pig any way you can!" - courseA_maze_seq2_instruction: "Fix the code to get the bird to the pig." - courseA_maze_seq3_instruction: "Fix the code to get the bird to the pig!" - courseA_maze_seq4_instruction: "REMOVE a block to get the bird to the pig!" - courseA_maze_seq5_instruction: "Try this one yourself from the beginning." - courseA_maze_seq6_instruction: "Move one way, then another to get the bird - to the pig!" - courseA_maze_seq7_instruction: "Figure out what is missing and then add blocks - to get the bird to the pig!" - courseA_maze_seq8_instruction: "Solve this level and get the bird to the pig!" - courseA_maze_seq9_instruction: "Debug this level by adding blocks to get the - bird to the pig!" - courseA_playLab_events1_instruction: "This is a Play Lab level. Move blocks - to the workspace and see what happens!" - courseA_playLab_events2_instruction: "Jorge the Dog wants to say \"Hi there.\" Can - you help him?" - courseA_playLab_events3_instruction: "Connect the `move left` block to the - `when left` event block that is already in the workspace." - courseA_playLab_events4_instruction: "Now, get Jorge to move right when the - `right` button is clicked." - courseA_playLab_events5_instruction: "Add events to have Jorge move up and - down when the `up` and `down` buttons are pressed." - courseA_playLab_events6_instruction: "Make this more interesting by changing - the background and playing a random sound when Jorge is clicked." - courseA_playLab_events7_instruction: "Add anything you want to this game. Can - you make the dinosaur disappear when Jorge runs into him?" - courseA_video_events_instruction: "Need a better playlab/events combo" - courseB_artist_loops1_instruction: "This is a new type of puzzle called \"Artist\". - Play with the level and draw something fun." - courseB_artist_loops10_instruction: "Use what you have learned to draw a picture - of what you think the artist saw when he got home." - courseB_artist_loops2_instruction: "The Artist is trying to draw a line six - times, but can't get it right. Can you help?" - courseB_artist_loops3_instruction: "Help the artist draw a line 7 times to - make a garden wall." - courseB_artist_loops4_instruction: "Now we need to get the soil ready to plant. - Find the bugs in the code and help the artist prepare the ground. " - courseB_artist_loops5_instruction: "Time to fix the stairs! Repeat this pattern - five times so the artist can reach the top of the bushes." - courseB_artist_loops6_instruction: "Climb the vine and see where it goes?" - courseB_artist_loops7_instruction: "**Challenge:** It's a hidden garden! - Let's walk around." - courseB_artist_loops8_instruction: "Time to head home. Can you fix this ladder - to help the artist get down?" - courseB_artist_loops9_instruction: "Let's take the short way home, over the - pond. Can you help the artist stay on the stones?" - courseB_collector_loops1_instruction: "This is Laurel the Adventurer! Can - you move her around and get treasure?" - courseB_collector_loops10_instruction: "Help Laurel get all of the treasure - from this cave." - courseB_collector_loops11_instruction: "Eureka! Collect as much treasure as - you can!" - courseB_collector_loops2_instruction: "Collect all four piles to pass this - level." - courseB_collector_loops3_instruction: "How can Laurel collect all five piles - of treasure using only one `E -->` block?" - courseB_collector_loops3_predict1_instruction: "How can Laurel collect all - five piles of gold using only one `E -->` block?" - courseB_collector_loops4_instruction: "Fix Laurel's path to get all of this - treasure!" - courseB_collector_loops5_instruction: "Add to the code from the last puzzle - to get all of the treasure. " - courseB_collector_loops6_instruction: "Figure out the code to help Laurel get - all of the treasure!" - courseB_collector_loops7_instruction: "Write the code to get all of this treasure." - courseB_collector_loops8_instruction: "**Challenge: ** The treasure goes all - the way down these stairs! Write the code to help Laurel get it all." - courseB_collector_loops9_instruction: "*\"Help me get the treasure from this - deep valley.\"*" - courseB_collector_prog1_instruction: "This is Laurel the Adventurer! Can you - move her around and get gold?" - courseB_collector_prog2_instruction: "Four piles of gold! Collect all four." - courseB_collector_prog3_instruction: "How can Laurel collect all five piles - of gold using only one `E -->` block?" - courseB_maze_seq1_instruction: "Play with these blocks to see what they make - the bird do!" - courseB_maze_seq10_instruction: "Fix the bugs to get the bird to the pig." - courseB_maze_seq11_instruction: "It's all you! Get the bird to the pig." - courseB_maze_seq12_instruction: "Now get that pig any way you can!" - courseB_maze_seq2_instruction: "*\"A bug! Fix the code to get me to the pig.\"*" - courseB_maze_seq3_instruction: "*\"Fix the code to get me to the pig!\"*" - courseB_maze_seq4_instruction: "Add 2 blocks to get the bird to the pig." - courseB_maze_seq5_instruction: "Now try this puzzle from the start!" - courseB_maze_seq6_instruction: "Move one way, then another to get the bird - to the pig!" - courseB_maze_seq7_instruction: "Figure out what is missing and then add blocks - to get the bird to the pig!" - courseB_maze_seq8_instruction: "Your turn! What do you need to do to get the - bird to the pig?" - courseB_maze_seq9_instruction: "Challenge: Move around the TNT to get the bird - to the pig." - courseB_maze_seqCold_instruction: "Challenge: Debug this level by adding blocks - to get the bird to the pig!" - courseB_maze_seqOld_instruction: "Go around the TNT to get the bird to the - pig! " - courseB_playLab_events1_instruction: "See if you can figure out what each block - does." - courseB_playlab_events2_instruction: "Have Daisy the Dragon say something when - you click \"Run\"." - courseB_playlab_events3_instruction: "Use an event to make Daisy the Dragon - switch to a random mood when you click on her." - courseB_playlab_events4_instruction: "Knight time! Add an event so that the - knight moves toward the dragon when the left arrow is clicked." - courseB_playlab_events5_instruction: "Now add an event so that the knight runs - away from the dragon when you press the right arrow." - courseB_playlab_events6_instruction: "Help your knight get all of the flags!\r\n\r\nTo - do this, you'll need to add events to help the knight move up and down." - courseB_playlab_events7_instruction: "Make this game fun by setting the knight - to vanish when he runs into the dragon! Play a sound when they collide to - make it feel more real." - courseB_playlab_events8_instruction: "Use your imagination. What can you do - to make this game more fun?" - courseB_playlab_eventsFP_instruction: "Use your imagination. What can you do - to make this game more fun?" - courseB_playlab_eventsToolbox_instruction: "Finish by playing a sound and making - the knight vanish when he runs into the dragon!" - courseC_artist_prog1_instruction: "Play with the blocks in the toolbox to see - what they do!" - courseC_artist_prog2_instruction: "Drag blocks onto the screen to have the - artist draw over the grey lines in the picture. (Each line is 100 pixels long)" - courseC_artist_prog3_instruction: "Each side of the inner square is 100 pixels - and all of the angles are 90 degrees." - courseC_artist_prog4_instruction: "Finish Starla's rocket so she can chase - her pet." - courseC_artist_prog5_instruction: "Finish this tag by drawing a rectangle around - the outside.\r\n(The long sides are 200 pixels each and the short sides are - each 100 pixels)" - courseC_artist_prog6_instruction: "Draw this diamond with 200 pixel sides." - courseC_artist_prog7_instruction: "**Challenge:** This tag is a special one! Can - you figure out how to draw the outline?" - courseC_artist_prog8_instruction: "One more tag. This is a triangle for Pi.\r\n(Each - side is 150 pixels)" - courseC_collector_prog1_instruction: "Play around with the blocks to see if - you can help Laurel collect some treasure." - courseC_collector_prog2_instruction: "Move Laurel to the treasure, then use - `collect` to pick it up." - courseC_collector_prog3_instruction: "Order these blocks to collect the treasure - and solve the puzzle." - courseC_collector_prog4_instruction: "Put these blocks in order to collect - all of the treasure and solve the puzzle." - courseC_collector_prog5_instruction: "These blocks are in the wrong order. - Can you fix them?" - courseC_collector_prog6_instruction: "Reorder the blocks to collect all of - the treasure." - courseC_collector_prog7_instruction: "Use blocks from the toolbox to collect - all of the treasure." - courseC_collector_prog8_instruction: "*\"Keep up the good work! Help me collect - all of the treasure.\"*" - courseC_collector_prog9_instruction: "*\"Let's get all of the treasure!\"*" - courseC_collector_progA_instruction: "Help Laurel collect all of the treasure." - courseC_collector_progB_instruction: "Collect as many coins as you can to finish - the stage!" - courseC_harvester_loops1_instruction: "Use loops to pick all of the pumpkins." - courseC_harvester_loops10_instruction: "Collect all of the corn and all of - the pumpkins." - courseC_harvester_loops11_instruction: "Collect all of the corn and all of - the pumpkins." - courseC_harvester_loops2_instruction: "Can you combine two different loops - to move toward the pumpkins, then collect them all?" - courseC_harvester_loops3_instruction: "Collect all of the pumpkins." - courseC_harvester_loops4_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_harvester_loops5_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_harvester_loops6_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_harvester_loops7_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_harvester_loops8_instruction: "**Challenge:** Collect all of the corn - and all of the pumpkins." - courseC_harvester_loops9_instruction: "Collect all of the corn and all of the - pumpkins." - courseC_maze_debugging1_instruction: "Fix the code to help get Skrat get to - the acorn." - courseC_maze_debugging10_instruction: "Debug this level by rearranging and - changing blocks to get me to the pig!" - courseC_maze_debugging2_instruction: "Use your debugging skills to get Skrat - to the acorn." - courseC_maze_debugging3_instruction: "Remove blocks to get Skrat to the acorn!" - courseC_maze_debugging4_instruction: "Someone has their directions mixed up! - Can you help?" - courseC_maze_debugging5_instruction: "Debug this level by rearranging and changing - blocks." - courseC_maze_debugging6_instruction: "Figure out what is wrong and get Skrat - to the acorn." - courseC_maze_debugging7_instruction: "**Challenge:** Debug this level by rearranging, - adding, and deleting blocks." - courseC_maze_debugging8_instruction: "Debug this level to get Skrat to the - acorn." - courseC_maze_debugging9_instruction: "Debug this level to get Skrat to the - acorn." - courseC_maze_loops1_instruction: "Can you get the bird to the pig using 5 of - the same kind of blocks?" - courseC_maze_loops10_instruction: "You are doing great! Keep it up!" - courseC_maze_loops11_instruction: "You are almost there! This time, choose - any path you like!" - courseC_maze_loops2_instruction: "Can you get the bird to the pig by creating - a loop that uses only one `move forward` block inside of a `repeat`?" - courseC_maze_loops3_instruction: "Solve this puzzle by creating a loop!" - courseC_maze_loops4_instruction: "In this puzzle, two `repeat` loops will help - you get the bird to the pig with the fewest number of blocks!" - courseC_maze_loops5_instruction: "*\"Get me to the pig as quickly as possible!\"*" - courseC_maze_loops6_instruction: "Loops even work with more than one block - inside! Can you loop this sequence?" - courseC_maze_loops7_instruction: "Use what you learned in other puzzles!" - courseC_maze_loops8_instruction: "Challenge: Combine ideas from the last few - puzzles to complete this level." - courseC_maze_loops9_instruction: "You are doing great! Keep it up!" - courseC_maze_programming1_instruction: "For this puzzle, drag all of the blocks - together and click \"Run\" to watch it go!" - courseC_maze_programming2_instruction: "Drag an extra `move forward` block - out of the toolbox to finish your code." - courseC_maze_programming3_instruction: "There is one extra block that is going - to cause the bird to crash. Throw it away by dragging it back to the toolbox." - courseC_maze_programming4_instruction: "Avoid TNT or feathers will fly!" - courseC_maze_programming5_instruction: "Avoid the TNT." - courseC_maze_programming6_instruction: "\"Keep calm and help me find the bad - pig. Otherwise I might get angry!\"" - courseC_maze_programming7_instruction: "**Challenge:** This code has a lot - of bugs. You'll need to remove some blocks and add others." - courseC_maze_programming8_instruction: "*\"Keep calm and help me find the bad - pig.\"*" - courseC_maze_programming8_predict1_instruction: "*\"Keep calm and help me find - the bad pig.\"*" - courseC_maze_programming9_instruction: "*\"Now, help me sneak up on the pig - any way you want to!\"*" - courseC_PlayLab_events1_instruction: "Make Jorge the Dog (actor 1) say \"Hi - there.\"" - courseC_PlayLab_events2_instruction: "Can you make Jorge (actor 1) say something, - then have Olive the Cat (actor 2) say something afterward?" - courseC_PlayLab_events3_instruction: "Can you write a program to make Jorge - (actor 1) move toward Olive the Cat?" - courseC_PlayLab_events4_instruction: "Can you write a program that makes Jorge - (actor 1) move to Olive the Cat, and have Olive say \"Hi there.\" when Jorge - reaches her?" - courseC_PlayLab_events5_instruction: "Can you write a program to make Octavia - say \"What's new?\" when she is clicked?" - courseC_PlayLab_events6_instruction: "Now, write a program to make Waddles - move around using the up / down / left / right keys to hit all of the targets!" - courseC_PlayLab_events7_instruction: "The `repeat forever` block allows you - to run code over and over forever. Use this block to move Chomp the Dino - (actor 2) up and down by 400 pixels forever." - courseC_PlayLab_events8_instruction: "Can you have Waddles (actor 1) say \"Ouch!\" - and play a \"hit\" sound if he runs into Chomp? \r\nWhen you're done, play - the game to make that happen." - courseC_PlayLab_events9_instruction: "Can you add a block to score a point - when Waddles (actor1) runs into Octavia (actor 3)? \r\nPlay the game and move - Waddles with the arrows until you score!" - courseC_PlayLab_eventsA_instruction: "Add blocks to the `when run` event to - change the background scene and the speed of Waddles.\r\n\r\nPlay the game - and move Waddles with the arrows until you score." - courseC_PlayLab_eventsFP_instruction: "Create your own story. When you're - done, click \"Finish\" to share with friends." - courseC_puppy_loops10_instruction: "You are doing great! Keep it up!" - courseC_puppy_loops11_instruction: "You are almost there! This time, choose - any path you like!" - courseC_puppy_loops8_instruction: "Challenge: Combine ideas from the last few - puzzles to complete this level." - courseC_puppy_loops8courseC_maze_loops8_instruction: "Challenge: Combine ideas - from the last few puzzles to complete this level." - courseC_puppy_loops9_instruction: "You are doing great! Keep it up!" - courseD_artist_binary1_instruction: "Use the blocks below to have the artist - draw \"01010101\" in binary in the first row." - courseD_artist_binary2_instruction: "Run this code to see how the artist uses - binary to draw this pattern." - courseD_artist_binary3_instruction: "Which of the binary strings below could - you loop 8 times to draw this image?" - courseD_artist_binary4_instruction: "Can you draw this pattern by looping just - three binary digits (0s and 1s)?" - courseD_artist_binary5_instruction: "Each binary string below represents one - row of this picture. \r\n\r\nCan you rearrange them so it draws a smiley face - instead of a frown?" - courseD_artist_binary6_instruction: "Which 6 digit binary string, repeated - 11 times, will draw this image?" - courseD_artist_binary7_instruction: "What is the shortest binary string that - you can repeat to draw this image?" - courseD_artist_binary8_instruction: "Finish the code to create this drawing." - courseD_artist_binary8_predict1_instruction: "Finish the code to create this - drawing." - courseD_artist_binaryFP_instruction: "Here's a higher resolution canvas to - draw on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we start to - get creative with the bits!" - courseD_artist_functions10_instruction: "This time, use lines of 8 hexagons - with 25 pixel sides." - courseD_artist_functions2_instruction: "This time, use the `draw a square` - function to create the glasses. \r\n" - courseD_artist_functions3_instruction: "You can make this drawing by adding - a repeat block." - courseD_artist_functions4_instruction: "Now that you can draw a star, try drawing - four stars!" - courseD_artist_functions5_instruction: "Draw only those three stars to finish - this puzzle." - courseD_artist_functions6_instruction: "Make this window by drawing a square, - then turning 90 degrees before drawing another, and so on." - courseD_artist_functions7_instruction: "Try solving this puzzle by creating - `draw a window` and calling it five times. Watch out for the door!" - courseD_artist_functions8_instruction: "Challenge: Create as many functions - as you think you need to make this drawing of 50 pixel squares." - courseD_artist_functions9_instruction: "Create this image using only the blocks - provided." - courseD_artist_nestedLoops1_instruction: "Draw a triangle to kickstart this - stage. \r\n(Each side is 100 pixels long and you'll need to turn 120 degrees - for each exterior angle.)" - courseD_artist_nestedLoops10_instruction: "Take the squares from before, but - this time only make 7 of them, and lay them out in a row." - courseD_artist_nestedLoops1a_instruction: "Now loop the triangle 6 times. " - courseD_artist_nestedLoops2_instruction: "This time, complete the puzzle with - the fewest number of blocks possible." - courseD_artist_nestedLoops3_instruction: "Use your new skills to quickly draw - the last row of windows for this building.\r\n\r\nThe windows are 20 pixel - squares, each 20 pixels apart." - courseD_artist_nestedLoops4_instruction: "Great! Do the same thing with these - circles.\r\n" - courseD_artist_nestedLoops5_instruction: "What happens if you also turn 90 - degrees between circles?" - courseD_artist_nestedLoops6_instruction: "Edit blocks within your existing - code to make this image." - courseD_artist_nestedLoops7_instruction: "Use what you've learned to make - this drawing.\r\n" - courseD_artist_nestedLoops8_instruction: "Using what you have learned in the - last couple of puzzles, build this image from the beginning." - courseD_artist_nestedLoops9_instruction: "**Challenge:** Can you figure out - how to make a picture like this?" - courseD_artist_nestedLoops9_predict1_instruction: "**Challenge:** Can you figure - out how to make a picture like this?" - courseD_artist_nestedLoopsFP_instruction: "Now it's your turn. Take the skills - you have learned and make something that you love!" - courseD_artist_nestedLoopsPre1_instruction: "Create a triangle to kickstart - this stage." - courseD_artist_ramp11_instruction: "Now make a square using Artist!" - courseD_artist_ramp12_instruction: "Use what you've learned to draw this triangle - inside of a square." - courseD_bee_conditionals1_instruction: "Check to see if there's a flower under - the cloud. If there's a flower, get nectar." - courseD_bee_conditionals10_instruction: "Collect all of the nectar and make - all of the honey." - courseD_bee_conditionals1_predict1_instruction: "Check to see if there's a - flower under the cloud. If there's a flower, get nectar." - courseD_bee_conditionals2_instruction: "Check underneath every cloud to see - if it is hiding a flower before you get nectar. \r\n" - courseD_bee_conditionals3_instruction: "Help the bee collect all of the nectar. - \r\n\r\nYou can only collect nectar from flowers, but you can check any space - to see if there is a flower." - courseD_bee_conditionals4_instruction: "Get all of the nectar using as few - blocks as possible." - courseD_bee_conditionals5_instruction: "Collect all of the nectar using as - few blocks as possible" - courseD_bee_conditionals6_instruction: "Some of these clouds might have honeycombs - under them. Be sure to check if a honeycomb is hiding behind each cloud!" - courseD_bee_conditionals7_instruction: "Use the `if/else` block to collect - nectar at flowers and make honey at honeycomb." - courseD_bee_conditionals7_predict2_instruction: "Use the `if/else` block to - collect nectar at flowers and make honey at honeycomb." - courseD_bee_conditionals8_instruction: "Collect nectar if there is a flower.\r\nOtherwise, - make honey (because there is a honeycomb)." - courseD_bee_conditionals9_instruction: "Collect all of the nectar or make all - the honey." - courseD_bee_debugging1_instruction: "Fix the error(s) to collect all of the - nectar." - courseD_bee_debugging2_instruction: "Fix the error(s) to collect all of the - nectar." - courseD_bee_debugging3_instruction: "Fix the error(s) to collect all of the - nectar and make all of the honey." - courseD_bee_debugging4_instruction: "Fix the error(s) to make all of the honey." - courseD_bee_debugging5_instruction: "Challenge: All of the commands that you - need are already here...now use your debugging skills to figure out how to - solve this puzzle." - courseD_bee_debugging6_instruction: "Challenge: Fix the errors to collect - all of the nectar and make all of the honey." - courseD_bee_debugging9_instruction: "Help the bee fix the code to get all the - nectar." - courseD_bee_nestedLoops1_instruction: "Help the bee collect all of the nectar." - courseD_bee_nestedLoops2_instruction: "This time, help the bee collect all - of the nectar using as few blocks as possible." - courseD_bee_nestedLoops2_predict1_instruction: "This time, help the bee collect - all of the nectar using as few blocks as possible." - courseD_bee_nestedLoops3_instruction: "Collect all of the nectar from each - flower." - courseD_bee_nestedLoops5_instruction: "Collect all of the nectar from each - flower and make honey at the honeycomb. " - courseD_bee_nestedLoops6_instruction: "Make all of the nectar." - courseD_bee_nestedLoops7_instruction: "Challenge: Figure out how to get all - of the nectar using only the blocks available." - courseD_bee_nestedLoops8_instruction: "Collect all of the nectar from each - flower and make honey at the honeycomb. " - courseD_bee_nestedLoops9_instruction: "Make all of the honey." - courseD_bee_nestedLoops9_predict2_instruction: "Make all of the honey." - courseD_collector_ramp10_instruction: "Help Laurel collect all of the treasure." - courseD_collector_ramp8_instruction: "Help Laurel collect all of the treasure." - courseD_collector_ramp9_instruction: "Help Laurel collect all of the treasure." - courseD_debugging_1_instruction: "Fix the error(s) to collect all of the nectar." - courseD_debugging_2_instruction: "Fix the error(s) to collect all of the nectar." - courseD_debugging_3_instruction: "Fix the error(s) to collect all of the nectar - and make all of the honey." - courseD_debugging_4_instruction: "Fix the error(s) to make all of the honey." - courseD_debugging_5_instruction: "Challenge: All of the commands that you need - are already here...now use your debugging skills to figure out how to solve - this puzzle." - courseD_debugging_6_instruction: "Challenge: Fix the errors to collect all - of the nectar and make all of the honey." - courseD_farmer_conditionals1_instruction: "Move to the pile of dirt and use - the `remove` block to remove it." - courseD_farmer_conditionals10_instruction: "Flatten all of these piles using - as few blocks as possible. " - courseD_farmer_conditionals2_instruction: "Move to the hole and fill it with - six shovelfuls of dirt, using the `fill` block." - courseD_farmer_conditionals3_instruction: "Use as few blocks as possible to - solve this puzzle." - courseD_farmer_conditionals4_instruction: "Help the farmer remove this entire - pile using a `while` loop." - courseD_farmer_conditionals5_instruction: "Help me remove all of this dirt. - " - courseD_farmer_conditionals6_instruction: "Use the `while` loop to easily fill - all of the holes." - courseD_farmer_conditionals7_instruction: "Fill in the hole at the end of each - of these paths." - courseD_farmer_conditionals8_instruction: "Challenge: Fill all of these holes - using as few blocks as possible. " - courseD_farmer_conditionals9_instruction: "Flatten all of these piles using - as few blocks as possible. " - courseD_farmer_condLoops1_instruction: "Use conditionals to make sure that - you pick all of the corn, but don't disturb the stalks where nothing is growing - yet." - courseD_farmer_condLoops2_instruction: "Help the farmer collect both corn and - lettuce from the field." - courseD_farmer_condLoops3_instruction: "*\"Corn, lettuce, AND pumpkins! Help - me harvest them all.\"*" - courseD_farmer_condLoops4_instruction: "Help the farmer pick all of the lettuce - in each cluster before moving on to the next bunch." - courseD_farmer_condLoops5_instruction: "This field has clusters of corn, lettuce, - and pumpkins all growing together. Can you collect them all?" - courseD_farmer_condLoops6_instruction: "Can you figure out how to pick the - pumpkin? Make sure to collect all of the corn along the way!" - courseD_farmer_condLoops7_instruction: "Challenge: Collect all of the corn - and lettuce, then pick the pumpkin." - courseD_farmer_condLoops8_instruction: "Collect all of the corn and lettuce, - then pick the pumpkin." - courseD_farmer_condLoops9_instruction: "Collect all of the corn and lettuce, - then pick the pumpkin." - courseD_farmer_condLoops9_predict1_instruction: "Collect all of the corn and - lettuce, then pick the pumpkin." - courseD_farmer_while1_instruction: "Move to the pile of dirt and use the `remove` - block to remove it." - courseD_farmer_while10_instruction: "Flatten all of these piles using as few - blocks as possible. " - courseD_farmer_while10_predict2_instruction: "Flatten all of these piles using - as few blocks as possible. " - courseD_farmer_while2_instruction: "Move to the hole and fill it with six shovelfuls - of dirt, using the `fill` block." - courseD_farmer_while3_instruction: "Use as few blocks as possible to solve - this puzzle." - courseD_farmer_while4_instruction: "Help the farmer remove this entire pile - using a `while` loop." - courseD_farmer_while4_predict1_instruction: "Help the farmer remove this entire - pile using a `while` loop." - courseD_farmer_while5_instruction: "Help me remove all of this dirt. " - courseD_farmer_while6_instruction: "Use the `while` loop to easily fill all - of the holes." - courseD_farmer_while7_instruction: "Fill in the hole at the end of each of - these paths." - courseD_farmer_while8_instruction: "Challenge: Fill all of these holes using - as few blocks as possible. " - courseD_farmer_while9_instruction: "Flatten all of these piles using as few - blocks as possible. " - courseD_maze_nestedLoops3_instruction: "Get the zombie to the sunflower using - the fewest number of blocks possible." - courseD_maze_nestedLoops4_instruction: "Get the zombie to the sunflower using - the fewest blocks possible! " - courseD_maze_nestedLoops5_instruction: "Get the zombie to the sunflower using - the fewest number of blocks possible!" - courseD_maze_nestedLoops6_instruction: "Get the zombie to the sunflower using - only the blocks available." - courseD_maze_ramp1_instruction: "For this puzzle, drag all of the blocks together - and click \"Run\" to watch it go!" - courseD_maze_ramp2_instruction: "Drag an extra `move forward` block out of - the toolbox to finish your code." - courseD_maze_ramp3_instruction: "There is one extra block that is going to - cause the bird to crash. Throw it away by dragging it back to the toolbox." - courseD_maze_ramp4_instruction: "Avoid TNT or feathers will fly!" - courseD_maze_ramp5_instruction: "Avoid the TNT." - courseD_maze_ramp6_instruction: "\"Keep calm and help me find the bad pig. - Otherwise I might get angry!\"" - courseD_maze_ramp7_instruction: "**Challenge:** Get the bird to the pig!" - courseD_maze_until1_instruction: "Get the angry bird to the pig." - courseD_maze_until10_instruction: "Help the zombie get to the sunflower." - courseD_maze_until10_predict2_instruction: "Help the zombie get to the sunflower." - courseD_maze_until2_instruction: "Now, use the `repeat until` loop to do the - same thing without specifying how many times to move forward and turn." - courseD_maze_until3_instruction: "Get the bird to the pig." - courseD_maze_until4_instruction: "Can you get the zombie to the sunflower using - only the blocks that are available?" - courseD_maze_until5_instruction: "Use the `if` block to help the zombie decide - when to turn, then get the zombie to the sunflower." - courseD_maze_until6_instruction: "Help the zombie get to the sunflower." - courseD_maze_until7_instruction: "Help the zombie get to the sunflower." - courseD_maze_until8_instruction: "Help the zombie get to the sunflower." - courseD_maze_until9_instruction: "**Challenge:** Avoid the chompers and help - the zombie get to the sunflower." - courseD_playLab_cond1_instruction: "Get Pegleg to the dragon to solve this - puzzle." - courseD_playLab_cond2_instruction: "Give Pegleg a point every time he makes - it to the dragon. " - courseD_playLab_cond3_instruction: "1) Make the dragon change between random - emotions every second. \r\n2) Make it so when Pegleg gets to the dragon, - he gets 2 points if the dragon is happy and 1 otherwise." - courseD_playLab_cond4_instruction: "Add some code so that the ninja (actor - 3) starts chasing Pegleg as soon as the game begins. End the game as a loss - if the ninja catches him." - courseD_playLab_cond5_instruction: "Add a `repeat forever` loop that continuously - checks if the score is greater than 5, then ends the game as a win when it - is." - courseD_playLab_cond6_instruction: "1) Slow the ninja down before you set - him to chase the pirate. \r\n\r\n2) If the pirate is greater than 225 pixels - down, set the ninja to **flee** the pirate. Otherwise, set the ninja to **chase** - the pirate. \r\n\r\n3) If the pirate is in the safe zone, wait one second, - then deduct a point as long as he stays beneath the octopus line." - courseD_playLab_cond6cloneForTest_instruction: "Testing" - courseD_playLab_condFP_instruction: "Now, build your own game to show off to - your friends!" - courseE_artist_concept1_instruction: "Recreate this image. " - courseE_artist_concept4_instruction: "Recreate this drawing using 13 blocks - or fewer." - courseE_artist_functions1_instruction: "Help the zombie draw glasses using - squares with sides of 100 pixels. \r\nThe bridge between the glasses is 75 - pixels long." - courseE_artist_functions10_instruction: "This time, use lines of 8 hexagons - with 25 pixel sides." - courseE_artist_functions2_instruction: "This time, use the `draw a square` - function to create the glasses. \r\n" - courseE_artist_functions3_instruction: "You can make this drawing by adding - a repeat block." - courseE_artist_functions4_instruction: "Now that you can draw a star, try drawing - four stars!" - courseE_artist_functions5_instruction: "Draw only those three stars to finish - this puzzle." - courseE_artist_functions6_instruction: "Make this window by drawing a square, - then turning 90 degrees before drawing another, and so on." - courseE_artist_functions7_instruction: "Try solving this puzzle by creating - `draw a window` and calling it five times. Watch out for the door!" - courseE_artist_functions8_instruction: "Challenge: Create as many functions - as you think you need to make this drawing of 50 pixel squares." - courseE_artist_functions9_instruction: "Create this image using only the blocks - provided." - courseE_artist_ramp11_instruction: "Now make a square using Artist!" - courseE_artist_ramp12_instruction: "Use what you've learned to draw this triangle - inside of a square." - courseE_bee_concept1_instruction: "Collect all of the nectar from each flower." - courseE_bee_concept2_instruction: "Help the bee make all of the honey. You - can only make honey at a honeycomb, but you can check any space to see if - there is a honeycomb." - courseE_bee_concept3_instruction: "Collect all of the nectar using as few - blocks as possible." - courseE_bee_concept4_instruction: "Uh oh! The bee is not sure if he should - collect nectar or make honey. Can you help him out?" - courseE_bee_concept5_instruction: "Help the bee collect the nectar from the - flowers?" - courseE_bee_functions1_instruction: "Collect all the nectar from each flower." - courseE_bee_functions10_instruction: "Solve this function by creating a function - to turn, move forward and make all of the honey, then return the bee to where - it started and turn back." - courseE_bee_functions2_instruction: "Use the `get 2 nectar` function to collect - the nectar from each flower." - courseE_bee_functions3_instruction: "Build the `get 5` function to use in this - puzzle." - courseE_bee_functions4_instruction: "Use the `move and get nectar` function - to collect all of the nectar." - courseE_bee_functions5_instruction: "Now write the function to collect nectar - from the flowers." - courseE_bee_functions6_instruction: "Create a function and call it to collect - nectar at each flower and make honey at each honeycomb." - courseE_bee_functions7_instruction: "Create your own function that goes down - a path, gets nectar, makes honey, and then returns the bee to the top of the - path. Collect all the nectar and make all the honey!" - courseE_bee_functions8_instruction: "Create a function that collects all of - the nectar from each flower." - courseE_bee_functions9_instruction: "Create a function to collect all of the - nectar from each flower." - courseE_collector_ramp10_instruction: "Help Laurel collect all of the treasure." - courseE_collector_ramp8_instruction: "Help Laurel collect all of the treasure." - courseE_collector_ramp9_instruction: "Help Laurel collect all of the treasure." - courseE_farmer_concept1_instruction: "Can you write a program that fills these - holes until the ground is even?" - courseE_farmer_concept2_instruction: "Collect all of the pumpkins." - courseE_farmer_concept3_instruction: "Fill in the hole at the end of each of - these paths." - courseE_farmer_concept4_instruction: "Now let's go one level deeper! We've - nested that whole block of code into another loop, but you need to get the - artist back in place to draw the next line. Which of these code blocks can - you place at the end of the outermost loop to draw the whole grid?" - courseE_farmer_functions1_instruction: "Help the farmer get to the pumpkin - and pick it." - courseE_farmer_functions10_instruction: "No one knows what these sprouts will - become. Use `if` statements to write the code to check and harvest each one. " - courseE_farmer_functions10b_instruction: "Figure out which function to use - and which one to delete, then solve this puzzle!" - courseE_farmer_functions1a_instruction: "Now help the farmer pick the corn, - lettuce, **and** pumpkin." - courseE_farmer_functions2_instruction: "Now, there will be a different number - of pumpkins each time you run the program. \r\n\r\nUse the `while` block - to pick only as many pumpkins as you need." - courseE_farmer_functions2a_instruction: "We're going to check lots of squares - for crops in the next few puzzles. Let's move everything into a function - to make it easier." - courseE_farmer_functions2aALT_instruction: "We're going to check lots of squares - for crops in the next few puzzles. Let's move everything into a function - to make it easier." - courseE_farmer_functions2b_instruction: "Help the farmer pick the corn, lettuce, - and pumpkin." - courseE_farmer_functions3_instruction: "What happens when the paths to the - pumpkins are all different lengths? \r\n\r\nGet them all with as few blocks - as possible." - courseE_farmer_functions3b_instruction: "Now help the farmer pick the corn, - lettuce, **and** pumpkin." - courseE_farmer_functions3c_instruction: "Which set of blocks helps the farmer - check for produce and pick it when it is available? Drag that code into a - function, then call your function from inside the `while path ahead` loops - (after the `move forward` block)." - courseE_farmer_functions4_instruction: "Great! Now you have code that will - work to get pumpkins from any size path.\r\n\r\nLet's drag that code into - a function so we can use it in lots of ways...but first use it to solve this - puzzle again." - courseE_farmer_functions4b_instruction: "Use your new function to solve this - puzzle." - courseE_farmer_functions5_instruction: "How can you change your program to - get this function to work for each of these paths?" - courseE_farmer_functions5a_instruction: "How can you change your program to - get this function to work for each of these paths?" - courseE_farmer_functions5b_instruction: "The crops are now growing in clusters. Add - some new `while` loops to your function to make sure you get all of the produce." - courseE_farmer_functions5c_instruction: "Your function will come in handy here." - courseE_farmer_functions6_instruction: "*\"Lettuce try something new!\"*\r\n\r\nHere's - some code to collect all of the lettuce. Move it into a function so we can - use it later." - courseE_farmer_functions6b_instruction: "Pick all of the produce." - courseE_farmer_functions6c_instruction: "What do you need to add this program - to collect all of the produce?" - courseE_farmer_functions7_instruction: "Use your functions to solve this puzzle." - courseE_farmer_functions7b_instruction: "Make a second function that lets the - farmer get all of the produce down a path, then brings her back to where she - began." - courseE_farmer_functions8_instruction: "**Challenge:** Solve this puzzle with - as few blocks as possible." - courseE_farmer_functions8b_instruction: "**Challenge:** Get the farmer to the - pumpkin and collect all of the lettuce and corn along the way. " - courseE_farmer_functions9_instruction: "Use conditionals to simplify your program." - courseE_maze_ramp1_instruction: "For this puzzle, drag all of the blocks together - and click \"Run\" to watch it go!" - courseE_maze_ramp2_instruction: "Drag an extra `move forward` block out of - the toolbox to finish your code." - courseE_maze_ramp3_instruction: "There is one extra block that is going to - cause the bird to crash. Throw it away by dragging it back to the toolbox." - courseE_maze_ramp4_instruction: "Avoid TNT or feathers will fly!" - courseE_maze_ramp5_instruction: "Avoid the TNT." - courseE_maze_ramp6_instruction: "\"Keep calm and help me find the bad pig. - Otherwise I might get angry!\"" - courseE_maze_ramp7_instruction: "**Challenge:** Get the bird to the pig!" - courseE_playLab_exampleProject2_instruction: "Here's all of your code to choose - a card - try adding some other fun features!" - courseE_playLab_scaffold1_instruction: "Choose a background and map, and pick - an actor to be your game's hero." - courseE_playLab_scaffold2_instruction: "Use event handlers and actions to make - your hero move.\r\n" - courseE_playLab_scaffold3_instruction: "Add two or more additional actors to - your game and make them move." - courseE_playLab_scaffold4_instruction: "Find some interesting ways to change - the score in your game." - courseE_playLab_scaffold5_instruction: "Now spend some time making sure the - game works the way you want. Try including a way to win or lose your game." - courseE_playLab_scaffold6_instruction: "You've finished! Now you can play - your game or share it with your friends and classmates!" - courseE_video_createFunctions_instruction: "We don't have a video for creating - functions, yet. This is a placeholder." - courseF_artist_for1_instruction: "Experiment with the `for` loop and play with - the `counter` variable." - courseF_artist_for10_instruction: "Free Play: Try using the `counter` variable - with other drawing elements to make magical images like this one." - courseF_artist_for2_instruction: "Create this stack of triangles that goes - from 50 pixel to 100 pixel sides." - courseF_artist_for3_instruction: "These triangles go from 20 pixel sides to - 200 pixel sides, and each triangle is 20 pixels larger than the last. " - courseF_artist_for4_instruction: "These squares start at 15 pixels long. The - largest is 300 pixels long, and each square is 15 pixels larger than the last. - " - courseF_artist_for5_instruction: "Just one little change to the code from the - last image can create this drawing. Can you figure out what that change is?" - courseF_artist_for6_instruction: "Try using some of the code from the last - level, but turning 89 degrees to create this twisted square spiral." - courseF_artist_for7_instruction: "Make three small changes to the code from - the last level to get this!" - courseF_artist_for8_instruction: "Take the angle down to 72 degrees to get - a spiraled pentagon." - courseF_artist_for9_instruction: "Use the counter inside the `set alpha` block - to get this faded center." - courseF_artist_fwp1_instruction: "Edit the function 'draw a square' to find - bugs." - courseF_artist_fwp2_instruction: "Edit the function to accept a parameter called - `length`." - courseF_artist_fwp2_predict1_instruction: "Edit the function to accept a parameter - called `length`." - courseF_artist_fwp3_instruction: "Create a function called 'draw a square' - and use it to outline these four boxes using parameters." - courseF_artist_fwp4_instruction: "Edit this function to add a parameter for - the number of sides in your polygon." - courseF_artist_fwp5_instruction: "Use the function from the last puzzle to - draw this series of shapes. " - courseF_artist_fwp6_instruction: "Challenge: Edit `draw a spiral edge` to use - `length` and `sides` parameters, then recreate these shapes." - courseF_artist_fwp7_instruction: "Finish off the `draw a spiral edge` function - to also ask for a minimum length for the center of the spiral." - courseF_artist_fwp8_instruction: "Can you figure out how to make this drawing - using the function that you just created?" - courseF_artist_fwp9_instruction: "Freeplay: Draw something awesome! Play with - the pen width to see how different your drawings look!" - courseF_artist_variables1_instruction: "Let's draw an equilateral triangle - that is exactly 50 pixels long on each side." - courseF_artist_variables10_instruction: "Here's your code from the last puzzle. Try - editing the variable in other ways. " - courseF_artist_variables2_instruction: "Now draw three of those triangles right - next to each other. " - courseF_artist_variables3_instruction: "Move the length of 50 into a variable - so we can use it in the next few puzzles." - courseF_artist_variables4_instruction: "Now, use the `length` variable to have - the artist jump forward and down by `length` pixels between triangles." - courseF_artist_variables5_instruction: "Add another set of loops at the end - of your code to add three more triangles. This time, move forward and up!" - courseF_artist_variables6_instruction: "Now make the triangles to be 60 pixels - wide, with 60 pixel jumps. " - courseF_artist_variables6a_instruction: "Build this design where the squares - have 80 pixel sides and the artist jumps 80 pixels over and down between each - one." - courseF_artist_variables7_instruction: "Draw a triangle with 150 pixels sides. - " - courseF_artist_variables8_instruction: "Rebuild the triangle code from the - last puzzle, but this time use the `set length to` block to reset the `length` - variable to `length`+10 at the end of each loop iteration." - courseF_artist_variables9_instruction: "See what happens when you repeat the - code from the last puzzle 30 times instead of only 3! Feel free to make your - lines any color or pattern for some extra zest." - courseF_artist_variables_10_instruction: "Here's your code from the last puzzle. Try - editing the variable in other ways. " - courseF_artist_variables_2_instruction: "Now use another loop to draw three - of those triangles right next to each other. \r\nYou can nest the code from - your last puzzle inside.\r\n" - courseF_artist_variables_5_instruction: "Add another set of loops at the end - of your code to add three more triangles. This time, move forward and up!" - courseF_artist_variables_6_instruction: "OOPS! We actually need the triangles - to be 60 pixels wide, with 60 pixel jumps. \r\nAren't you glad you're using - a variable?" - courseF_artist_variables_6a_instruction: "Build this design where the squares - have 80 pixel sides and the artist jumps 80 pixels over and down between each - one." - courseF_artist_variables_9_instruction: "See what happens when you repeat the - code from the last puzzle 30 times instead of only 3!\r\n\r\nFeel free to - make your lines any color or pattern for some extra zest." - courseF_artist_variables_FP_instruction: "**Freeplay:** Take what you've learned - and make your own drawing. \r\n\r\nHow can you use variables with squares, - pentagons, or hexagons?" - courseF_artist_variablesFP_instruction: "**Freeplay:** Take what you've learned - and make your own drawing. " - courseF_bee_for1_instruction: "Collect the nectar from each flower using the - fewest blocks possible." - courseF_bee_for10_instruction: "**Challenge:** Take what you've learned about - `for` loops and try to solve this problem. " - courseF_bee_for11_instruction: "What should your increment be to collect 15, - then 12, then 9, 6, 3 nectar?" - courseF_bee_for2_instruction: "Write the code to help the bee collect all of - the nectar.\r\n" - courseF_bee_for3_instruction: "Try this puzzle using the `for` loop and the - `counter` variable to see how much shorter your code becomes." - courseF_bee_for4_instruction: "Help the bee collect all of the nectar." - courseF_bee_for5_instruction: "Use the `counter` variable twice to solve this - puzzle." - courseF_bee_for6_instruction: "Try gathering this nectar by counting down from - 5 to 1 by 1." - courseF_bee_for7_instruction: "Try collecting these flowers using an increment - of 2." - courseF_bee_for8_instruction: "You've got this! What should your increment - be to collect 3, 6, 9, 12, 15 nectar?" - courseF_bee_for9_instruction: "Use the `counter` variable to navigate this - garden with the fewest number of blocks possible." - courseF_bee_fwp2_instruction: "Pull this code into a function, then call the - function to check this row for nectar." - courseF_bee_fwp3_instruction: "Let's see if the function makes collecting - these three rows of nectar any easier." - courseF_bee_fwp4_instruction: "Add a `length` parameter to the function so - that it will still work when the row is a different length." - courseF_bee_fwp5_instruction: "Use this function to collect the nectar." - courseF_bee_fwp6_instruction: "Build a short and sweet solution to this puzzle." - courseF_bee_fwp7_instruction: "**Challenge:** Modify your function to make - honey as well." - courseF_bee_fwp8_instruction: "Use your new function to solve this spiral." - courseF_bee_fwp9_instruction: "Use your new function to solve this puzzle." - courseF_bee_fwp9_predict1_instruction: "Use your new function to solve this - puzzle." - coursef_explore_CYOA_Witch_instruction: "You can do whatever you want in play - lab! Here's an example of choose your own adventure story in play lab." - coursef_explore_playlab2_instruction: "You can do whatever you want in play - lab! Here's an example of story in play lab." - coursef_explore_playlab_cat_game_instruction: "You can do whatever you want - in play lab! Here's an example of game you can make." - courseF_playlab_variables0_instruction: "This is Pirate Pegleg. He's awfully - hard to understand these days!" - courseF_playlab_variables1_instruction: "This is Pirate Pegleg. He's awfully - hard to understand these days!" - courseF_playlab_variables1a_instruction: "Variables can be used to store text - that you want to use later. Have Kiki, the soccer player, scream \"Goal!\" - by assigning that text to the `shout` variable." - courseF_playlab_variables2_instruction: "Now, decode Pirate Pegleg's speech - by changing the value of the variables in just two places! \r\n" - courseF_playlab_variables2a_instruction: "Now, decode Pirate Pegleg's speech - by changing the value of the variables in just two places! \r\n" - courseF_playlab_variables2b_instruction: "Insert the variable `color` into - the middle of a sentence by putting it into the empty slot in the `join` block." - courseF_playlab_variables3_instruction: "The `ask` block will automatically - store whatever the user answers into the variable of your choice." - courseF_playlab_variables3b_instruction: "Help Kiki have a conversation with - Brian by using the variable `A1` in all of the places where age `12` should - be used. " - courseF_playlab_variables4_instruction: "Can you find the correct variable - in the toolbox to fill in the slot?" - courseF_playlab_variables4b_instruction: "Put the variables in the correct - places to create this conversation." - courseF_playlab_variables5_instruction: "Can you find the correct variable - in the toolbox to fill in the slot?" - courseF_playlab_variables5b_instruction: "Put all of the variables in the correct - place so that Pegleg's story makes sense." - courseF_playlab_variables6b_instruction: "We have provided some starter questions - and variables for you. Join them together and put them in the title screen - to make a fun story." - courseF_playlab_variables7b_instruction: "Create some questions and weave the - answers together into your very own story." - courseF_playlab_variables8b_instruction: "Use what you've learned to create - an improv scene between the actors." - Crack a Caesar Cipher_instruction: "Instructions" - Crack Random Substitution_instruction: "Instructions" - CSD Hackathon Pt 1_instruction: "(Click to see full instructions)" - CSD Hackathon Pt 2_instruction: "(Click to see full instructions)" - CSD Hackathon Week 1_instruction: "(Click to see full instructions)" - CSD Hackathon Week 2_instruction: "(Click to see full instructions)" - CSD U3 Background Discuss_instruction: "Here's a program that looks pretty - similar to what you've been writing, but may behave quite differently. You'll - want to stop and discuss with the class before moving on." - CSD U3 Background Experiment_instruction: "Here's a program that looks pretty - similar to what you've been writing, but may behave quite differently. You'll - want to stop and discuss with the class before moving on." - CSD U3 Boolean Modify_instruction: "Modify the code so that all of the console.log - commands print true" - CSD U3 Boolean Predict_instruction: "What do you think this code will do when - it is run? Predict what each console.log() command will print, then run the - program to check your predictions." - CSD U3 Draw Loop Discuss_instruction: "Here's a program that looks pretty - similar to what you've been writing, but may behave quite differently. You'll - want to stop and discuss with the class before moving on." - CSD U3 Draw Loop Experiment_instruction: "Try using some of the other shape - functions you've learned in the draw loop. What happens when you use randomNumber() - to generate some of the inputs?You'll want to stop and discuss with the class - before moving on." - CSD U3 Expressions calculator_instruction: "Add the numbers 1 through 10. Multiply - the numbers 1 through 10. Check your answers with a neighbor." - CSD U3 Frame Rate_instruction: "Slow down Gamelab Gary's animation with frameRate()" - CSD U3 Keypress Boolean_instruction: "Modify the code so that all of the console.log - commands print true" - CSD U3 Keypress Watchers_instruction: "Modify the code so that all of the console.log - commands print true" - CSD U3 Random Animation_instruction: "Use randomNumber() to animate Gary's - mouth." - CSD U3 Random Choice_instruction: "Use the randomNumber() block to generate - either 0 or 1" - CSD U3 Random Color_instruction: "Could you use randomNumber() to pick random - colors as well? Try setting one or more of the channels in the rgb block with - a random number. What should the maximum value be?" - CSD U3 Random Intro_instruction: "What do you think this code will do when - it is run? Make a prediction, then run this code 5 - 10 times, recording the - output each time. Share your results with your neighbor." - CSD U3 Random Min Max_instruction: "Using console.log() write a program that - randomly returns a number in a range you define." - CSD U3 Random Width Height_instruction: "Pick a shape block and use calls to - randomNumber() in place of one or more of the parameters. Maker sure you run - it a few times so you can see the effect of randomization." - CSD U3 Simple Drawing - Animation 2_instruction: "Use randomNumber() on the - x position and width of your cloud ellipses to introduce a bit of animation." - CSD U3 Simple Drawing - Animation_instruction: "Use randomNumber() on the x - position and width of your cloud ellipses to introduce a bit of animation." - CSD U3 Simple Drawing - Background_instruction: "Put all of your code into - a draw() loop and then add set the background to blue with the background() - block." - CSD U3 Simple Drawing - Personal Animation_instruction: "DO This" - CSD U3 Sprites intro sprites_instruction: "Do This" - CSD U3 Variable Arithmetic pt2_instruction: "Predict: What two numbers will - be displayed in the console?" - CSD U3 Variable Arithmetic_instruction: "Change the value \"size\" initialized - to make a larger square." - CSD U3 Variable Incrementation pt2_instruction: "Predict: What two numbers - will be displayed in the console?" - CSD U3 Variable Incrementation_instruction: "Predict: What two numbers will - be displayed in the console?" - CSD U3 Variables CHALLENGE gamelab gary_instruction: "Use variables to animate - Game Lab Gary" - CSD U3 Variables create and assign_instruction: "Create and assign size in - a single line of code." - CSD U3 Variables draw loop newVars_instruction: "Extend this project to create - your own random art visualization with variables." - CSD U3 Variables draw loop rgb_instruction: "Assign the variables x1 and y1 - random values inside the draw loop and use them to control where the square - is drawn." - CSD U3 Variables draw loop xy_instruction: "Assign the variables x1 and y1 - random values inside the draw loop and use them to control where the square - is drawn." - CSD U3 Variables eyeBrows_instruction: "Predict what will happen when you move - the assignment of eyeSize inside the draw loop. Then try it out" - CSD U3 Variables Initialize_instruction: "Predict: What will get displayed - in the console?" - CSD U3 Variables Intro_instruction: "Create your own variable " - CSD U3 Variables make a big square_instruction: "Change the value of size multiple - times. How does it change your drawing?" - CSD U3 Variables make a square_instruction: "Change the value of size multiple - times. How does it change your drawing?" - CSD U3 Variables multiple assignments_instruction: "Change the value of petalSize - multiple times. How does it change your drawing?" - CSD U3 Variables naming rules_instruction: "Change the value of petalSize multiple - times. How does it change your drawing?" - CSD U3 Variables random assignment_instruction: "Change the value of petalSize - multiple times. How does it change your drawing?" - CSD U3 Variables random draw loop_instruction: "Predict what will happen when - you move the assignment of eyeSize inside the draw loop. Then try it out" - CSD U3 Variables random drawing exemplar_instruction: "Check out this example - randomized drawing." - CSD U3 Variables Random_instruction: "Predict: What will get displayed in the - console?" - CSD U3 Variables Reassign pt2_instruction: "Create and assign a new variable - in a single line." - CSD U3 Variables Reassign_instruction: "Predict: What will get displayed in - the console?" - CSD U3 Variables Square Random Loop_instruction: "Test your predictions from - the last level." - CSD U3 Variables Square Random_instruction: "Change the value \"size\" initialized - to make a larger square." - CSD U3 Variables Square_instruction: "Change the value \"size\" initialized - to make a larger square." - CSD U3 Variables TEMPLATE square_instruction: "Change the value of petalSize - multiple times. How does it change your drawing?" - CSD U3 Variables use value rect_instruction: "Predict: What will get displayed - in the console?" - CSD U3 Variables write_instruction: "Use the write block to display the value - of size" - CSD U3 Variables2 expressions in commands_instruction: "Use expressions inside - a drawing command" - CSD U3 Variables2 expressions in variables_instruction: "Assign the value of - each expression to a variable and console.log that variable." - CSD U3 Variables2 expressions_instruction: "Use console.log to display the - results of each expression. Then create your own." - CSD U4 - Events Template_instruction: "Add a large red button to your screen - using Design Mode. (Click for full instructions.)" - CSDU4 - AppLab - 1_instruction: "Read the documentation for penColor() and - penWidth() before using them to draw the blue square." - CSDU4 - AppLab - 2_instruction: "Write a program that acts as a simple calculator. - (click to see full instructions)" - CSDU4 - AppLab - 3_instruction: "Use console to check the ending value of num. - (Click to see full instructions)" - CSDU4 - AppLab - 4_instruction: " Use the Debug Commands to make a list of - all the values rolled before a 6. (Click to see full instructions)" - CSDU4 - Design Mode - 1_instruction: "Add a button that moves the turtle when - clicked. (Click to see full instructions)" - CSDU4 - Design Mode - 10_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - CSDU4 - Design Mode - 11_instruction: "Experiment with different event types - and select the one that you think is best. (Click to see full instructions)" - CSDU4 - Design Mode - 12_instruction: "Use the textLabel command to replace - the button in your program with a text label. (Click to see full instructions)" - CSDU4 - Design Mode - 16_instruction: "Add an event handler for the button - using the \"Insert and show\" link in the Design Mode Events tab. (Click to - see full instructions)." - CSDU4 - Design Mode - 17_instruction: "Update the ID names and `console.log` - messages to match the correct button. (Click to see full instructions.)" - CSDU4 - Design Mode - 18_instruction: "Fix the layout of the bullseye game. - (Click to see full instructions)" - CSDU4 - Design Mode - 2_instruction: "Run a program with two buttons that have - the same id to see the warning message in the console. Change the ids to make - the program run without getting a warning message." - CSDU4 - Design Mode - 24_instruction: "Add an Text Input box for the name and - age. (Click to see full instructions)" - CSDU4 - Design Mode - 25_instruction: "Add an event handler to the Submit button - so that when the button is clicked it will display the name entered in the - text box to the console. Use getText to get the value out of the text box. - (Click to see full instructions)" - CSDU4 - Design Mode - 26_instruction: "Save the age and name of the user in - variables (Click to see full instructions)" - CSDU4 - Design Mode - 27_instruction: "Output a message to the 'textArea' - (Click to see full instructions)" - CSDU4 - Design Mode - 28_instruction: "Write a greeting to the user when they - hit 'enter' in the text input, using the 'change' event. (Click to see - full instructions)" - CSDU4 - Design Mode - 29_instruction: "Add a dropdown for their guess instead - of promptNum (Click to see full instructions)" - CSDU4 - Design Mode - 30_instruction: "Show different die images for the random - number generated. (Click to see full instructions)" - CSDU4 - Design Mode - 31_instruction: "Set up an event handler to respond to - keypress events, and display event.key in the console. Hit keys on the keyboard - to see what happens. (Click to see full instructions)" - CSDU4 - Design Mode - 32_instruction: "Try out the keyup and keydown events - to see how they are different from keypress. (Click to see full instructions)" - CSDU4 - Design Mode - 33_instruction: "Change the code so the sound will only - play when the up arrow is pressed. (Click to see full instructions)" - CSDU4 - Design Mode - 4_instruction: "Improve the button by choosing a descriptive - and meaningful ID. (Click to see full instructions)" - CSDU4 - Design Mode - 5_instruction: "Debug the program by verifying your IDs - are being referenced properly. (Click to see full instructions)" - CSDU4 - Design Mode - 6_instruction: "Debug the program by properly ordering - your button commands and event handlers. (Click to see full instructions)" - CSDU4 - Design Mode - 7_instruction: "Debug the program by fixing the logical - error within the program. (Click to see full instructions)" - CSDU4 - Design Mode - 8_instruction: "Move the button to the middle of the - screen. (Click to see full instructions)" - CSDU4 nameAgeTemplate_instruction: "Add an Text Input box for the name and - age. (Click to see full instructions)" - CSDU6 - Arrays - expressionsAsIndexes_instruction: "Write a program that displays - a randomly chosen color from the array. (Click to see full instructions)" - CSDU6 - Arrays - indexPractice_instruction: "Write the contents of the array - to the screen in numerical order. (Click to see full instructions)" - CSDU6 - Arrays - length_instruction: "Use list.length to determine the length - of each array. (Click to see full instructions)" - CSDU6 - Arrays - lengthMinus1_instruction: "Use list.length - 1 to log the - last item in the array to the console. (Click to see full instructions)" - CSDU6 - for loop - color buttons with for_instruction: "Write the contents - of the array to the screen in numerical order. (Click to see full instructions)" - CSDU6 - for loop - color buttons_instruction: "Write the contents of the array - to the screen in numerical order. (Click to see full instructions)" - CSDU6 - for loop - why for_instruction: "Write the contents of the array to - the screen in numerical order. (Click to see full instructions)" - CSP Data Unit - Counting Multiple Things_instruction: "If you can count one - thing you can count multiple things\r\n\r\nFind out how many people like something - other than dogs and cats\r\n\r\nCount dogs\r\nCount cats\r\nCount total\r\nDo - the math\r\n\r\nblank/ blank toal\r\n\r\nCan also use this to find percents - from this\r\n\r\nx% are dog lovers" - CSP Data Unit -Counting Records - Easy Way_instruction: "ReadRecords with specific - criteria \r\nfind the length of an array\r\n" - CSP Data Unit -Counting Records - Hard Way_instruction: "\r\n1. ReadRecords - for all records\r\n2. Way to loop through and count\r\n" - CSP U4 - JSON Object Intro - Bad Way_instruction: "Trigger both the keyboard - and mouse event and examine the event objects displayed in the console. Why - might an object be the best way to store this information? (Click to see full - instructions)" - CSP U4 - JSON Object Intro - Good Way_instruction: "Create an object with at - least 5 values including at least one string and one number. (Click to see - full instructions) " - CSP U4 - Objects - createObject_instruction: "Create an object with at least - 5 values including at least one string and one number. (Click to see full - instructions) " - CSPU5 Add a 2nd Screen_instruction: "Make a 2 screen app with a black screen - and a white screen. (Click to see detailed instructions)" - CSPU5 Add full screen image to bg of chaser game_instruction: "Recreate the - game from the \"Chaser Game\" with a Welcome Screen and Game Over Screen. - (Click to see full instructions.)" - CSPU5 Add game over screen_instruction: "Recreate the game from the \"Chaser - Game\" with a Welcome Screen and Game Over Screen. (Click to see full instructions.)" - CSPU5 Add onEvent from Design Mode_instruction: "Add an event handler for the - button using the \"Insert and show\" link in the Design Mode Events tab. (Click - to see full instructions)." - CSPU5 Add Screens to Chaser Game_instruction: "Recreate the game from the \"Chaser - Game\" with a Welcome Screen and Game Over Screen. (Click to see full instructions.)" - CSPU5 Add welcome screen to chaser game_instruction: "Recreate the game from - the \"Chaser Game\" with a Welcome Screen and Game Over Screen. (Click to - see full instructions.)" - CSPU5 Adding Screens Template_instruction: "Make a 2 screen app with a black - screen and a white screen. (Click to see detailed instructions)" - CSPU5 Debugging Overlapping Objects and Screen Events_instruction: "Recreate - the \"Chaser Game\" from the last lesson using Design Mode. (Click to see - full instructions.)" - CSPU5 First Time Console.log_instruction: "Add a 3 console.log messages and - test them out. (Click to see full instructions.)" - CSPU5 Layering and Deleting in Design Mode_instruction: "Fix the layout of - the bullseye game. (Click to see full instructions)" - CSPU5 Project - Multi Screen App_instruction: "Create your multi-screen app. - (Click to see full instructions.)" - CSPU5 Use Console.log to update IDs_instruction: "Update the ID names and `console.log` - messages to match the correct button. (Click to see full instructions.)" - CSPU5 Use setScreen for first time_instruction: "Make a 2 screen app which - can switch back and forth between a black screen and a white screen using - buttons. (Click to see detailed instructions.)" - CSPU5_addDescriptiveIDsToTurtleDriver_instruction: "Improve the button by choosing - a descriptive and meaningful ID. (Click to see full instructions)" - CSPU5_AddImage_andMakeChaserGame_instruction: "Introducing the setPosition - command! Replace the moveTo in the button-click event handler to use setPosition - to move the button itself to a random location when it's clicked." - CSPU5_AddImageToChaserGame_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - CSPU5_AddLabelToChaserGame_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - CSPU5_basic if - check driving age_instruction: "Use console.log to print out - the different boolean expressions below to see what information they return. - (Click to see full instructions)" - CSPU5_basic if - DIY secret number_instruction: "Use console.log to print out - the different boolean expressions below to see what information they return. - (Click to see full instructions)" - CSPU5_basic if - voting examle_instruction: "Use console.log to print out the - different boolean expressions below to see what information they return. (Click - to see full instructions)" - CSPU5_basic if-else - driving age_instruction: "Use console.log to print out - the different boolean expressions below to see what information they return. - (Click to see full instructions)" - CSPU5_clickerGame_v1_template_instruction: "Create your own \"Chaser App\". - (Click to see full instructions)" - CSPU5_Debugging predict unexpected behavior - two onEvents to one ID_instruction: "Predict - what will happen. Once you've made a prediction, run the code to see what - happens. (Click to see full instructions)" - CSPU5_FinalizeChaserGame_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - CSPU5_moveTurtleOnButtonClick_instruction: "Add an event handler to the button - to move the turtle forward. (Click to see full instructions)" - CSPU5_playWithEventTypes_instruction: "Debug the program by fixing the logical - error within the program. (Click to see full instructions)" - CSPU5_Project - Multi Screen App_instruction: "Create your multi-screen app. - (Click to see full instructions.)" - CSPU5_setPosition to fixed location_instruction: "Introducing the setPosition - command! Replace the moveTo in the button-click event handler to use setPosition - to move the button itself to a random location when it's clicked." - CSPU5_turtleDriver_add2ndButton_instruction: "Debug the program by verifying - your IDs are being referenced properly. (Click to see full instructions)" - CSPU5_U3 - Arrays - appendItem_instruction: "Create an array of odd numbers - 1-11 by using appendItem. (Click to see full instructions)" - CSPU5_U3 - Arrays - assignment_instruction: "Use indexes to change the values - in this array from 1 to 0. (Click to see full instructions)" - CSPU5_U3 - Arrays - assignment2_instruction: "Calculate the sum of three values - stored in an array. (Click to see full instructions)" - CSPU5_U3 - Arrays - assignment3_instruction: "Increase the value of each value - in the randomly generated array by 1. (Click to see full instructions)" - CSPU5_U3 - Arrays - createFirstArray_instruction: "Create an array of the even - numbers from 0 to 10 and display its contents with console.log. (Click to - see full instructions)" - CSPU5_U3 - Arrays - Demo App_instruction: "Use the \"My Favorite Things\" app. - How might this app be making use of an array? (Click to see full instructions)" - CSPU5_U3 - Arrays - expressionsAsIndexes_instruction: "Write a program that - displays a randomly chosen color from the array. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings addItem_instruction: "Write code that allows - a user to add their own favorite things to the list. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings bounds_instruction: "Add if statements to your - event handlers that prevent the global index from going out of bounds. (Click - to see full instructions)" - CSPU5_U3 - Arrays - favThings Counting Variable_instruction: "Create a global - variable for the current index and use it to display the first item in the - array. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings createArray_instruction: "Create an array of - words describing your favorite things. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings firstOutput_instruction: "Use setText to display - the first item in the array. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings giveIDs_instruction: "Give your UI elements descriptive - and meaningful IDs. (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings keepPlaying_instruction: "Make any other improvements - you want! (Click to see full instructions)" - CSPU5_U3 - Arrays - favThings Next_instruction: "Write code that allows the - user to move forward through your list by clicking the \"Next\" button. (Click - to see full instructions)" - CSPU5_U3 - Arrays - favThings Prev_instruction: "Write code that allows the - user to move backward through your list by clicking the \"Last\" button. (Click - to see full instructions)" - CSPU5_U3 - Arrays - indexPractice_instruction: "Write the contents of the array - to the screen in numerical order. (Click to see full instructions)" - CSPU5_U3 - Arrays - insertingItems_instruction: "Insert items into an array - to form a complete sentence. (Click to see full instructions)" - CSPU5_U3 - Arrays - insertionErrors_instruction: "Run each command that references - indexes that are out of bounds and observe the results. (Click to see full - instructions)" - CSPU5_U3 - Arrays - introIndex_instruction: "Display the first and last element - in the array. Display the number 5 from the array. (Click to see full instructions)" - CSPU5_U3 - Arrays - length_instruction: "Use list.length to determine the length - of each array. (Click to see full instructions)" - CSPU5_U3 - Arrays - lengthMinus1_instruction: "Use list.length - 1 to log the - last item in the array to the console. (Click to see full instructions)" - CSPU5_U3 - Arrays - remove_instruction: "Remove items from an array to form - a complete sentence. (Click to see full instructions)" - CSPU5_U3 - Arrays - stringsInArrays_instruction: "Write a sentence word by - word by adding strings to an array. (Click to see full instructions)" - CSPU5_U3 - Canvas - 200dots_instruction: "Add a loop to your program that draws - 200 dots on your canvas. (Click to see full instructions)" - CSPU5_U3 - Canvas - appendToArray_instruction: "Create an array to store each - event parameter. Append each event parameter to this array within your event - handler. (Click to see full instructions)" - CSPU5_U3 - Canvas - changeToMouseMove_instruction: "Change your program so - that dots are drawn at the location of the mouse as the user moves the mouse - on the canvas. (Click to see full instructions)" - CSPU5_U3 - Canvas - clickToAdd_instruction: "Change your program so that dots - are added to the canvas when the user clicks on it. (Click to see full instructions)" - CSPU5_U3 - Canvas - delete_instruction: "Create a button that deletes the drawing - by clearing the canvas and removing all stored values. (Click to see full - instructions)" - CSPU5_U3 - Canvas - draw at click point_instruction: "Change your program so - that dots are drawn at the location of the mouse click. (Click to see full - instructions)" - CSPU5_U3 - Canvas - freePlay_instruction: "Extend the functionality of one - of the effects, or create an entirely new one of your own. (Click to see full - instructions)" - CSPU5_U3 - Canvas - introCanvas_instruction: "Add a canvas to your app and - set it to be the active canvas. Then add a large dot to your canvas. (Click - to see full instructions)" - CSPU5_U3 - Canvas - movementFunction fix Orig_instruction: "Modify the \"Original\" - button event handler so that it takes the movement of the mouse into account. - (Click to see full instructions)" - CSPU5_U3 - Canvas - movementFunction_instruction: "Write a function that takes - the movement of the mouse as input and generates a line width as output. (Click - to see full instructions)" - CSPU5_U3 - Canvas - One Dot sprayPaint_instruction: "Write code that redraws - your image using a dot whose x and y locations use offsetX and offsetY with - a small random value added. (Click to see full instructions)" - CSPU5_U3 - Canvas - redrawOriginal_instruction: "Write a function that processes - your array, redrawing the dots as they originally appeared. (Click to see - full instructions)" - CSPU5_U3 - Canvas - redrawRandom_instruction: "Set up a button and event handler - for the random function. (Click to see full instructions)" - CSPU5_U3 - Canvas - redrawRandom2_instruction: "Write a function that processes - your array, redrawing every dot with a random size. (Click to see full instructions)" - CSPU5_U3 - Canvas - shiftKey_instruction: "Add an if statement to your event - handler so dots are only drawn when the shift key is pressed. (Click to see - full instructions)" - CSPU5_U3 - Canvas - sketch_instruction: "Write code that redraws your image - using a sketch effect. (Click to see full instructions)" - CSPU5_U3 - Canvas - sprayPaint_instruction: "Update the spray paint code so - that it redraws your image using multiple random dots instead of using a nested - for loop. (Click to see full instructions)" - CSPU5_U3 - Canvas - transparentDots_instruction: "Change the colors of your - dots so they have a fully transparent stroke and partially transparent fill. - (Click to see full instructions)" - CSPU5_U3 - Canvas - usingOffsetXY_instruction: "Add a console.log command inside - the function of your event handler. Use it to display the event parameter. - Click on the screen to see the contents of the event parameter (Click to see - full instructions)" - CSPU5_U3 - Conditional Basics - 6_instruction: "Add a setText after the if - statement to \"Nope. Guess again.\" (Click to see full instructions)" - CSPU5_U3 - Conditionals - Combine AND OR and NOT_instruction: "Write an if - statement that uses AND and OR to display \"Time to go to school!\" if it's - not the weekend and the user is under 18. (Click to see full instructions.)" - CSPU5_U3 - Conditionals - Combine AND OR Simple_instruction: "Write an if statement - that uses AND and OR to display \"Sleep in!\" if it's the weekend and the - user is a teenager. (Click to see full instructions." - CSPU5_U3 - Conditionals - Simple AND_instruction: "Write an if statement that - uses AND to display \"You are a teenager.\" if the user enters an age between - 13 and 19. (Click to see full instructions)" - CSPU5_U3 - Conditionals - Simple OR_instruction: "Write an if statement that - uses OR to display \"It's the weekend!\" if the user enters a weekend day - at the prompt. (Click to see full instructions)" - CSPU5_U3 - Design Mode - Console Log_instruction: "Update the ID names and - `console.log` messages to match the correct button. (Click to see full instructions.)" - CSPU5_U3 - Design Mode - Layers and Delete_instruction: "Fix the layout of - the bullseye game. (Click to see full instructions)" - CSPU5_U3 - Design Mode - Multi Screens 2_instruction: "Make a 2 screen app - which can switch back and forth between a black screen and a white screen - using buttons. (Click to see detailed instructions.)" - CSPU5_U3 - Design Mode - Multi Screens_instruction: "Make a 2 screen app with - a black screen and a white screen. (Click to see detailed instructions)" - CSPU5_U3 - Design Mode - WTF Console Log_instruction: "Add a 3 console.log - messages and test them out. (Click to see full instructions.)" - CSPU5_U3 - Design Mode -Recreate Beyond Buttons_instruction: "Recreate the - game from the \"Chaser Game\" with a Welcome Screen and Game Over Screen. - (Click to see full instructions.)" - CSPU5_U3 - Design Mode 1_instruction: "Add a large red button to your screen - using Design Mode. (Click for full instructions.)" - CSPU5_U3 - Dice - Dropdown and Score_instruction: "Add guess and score to the - Dice Game (Click to see full instructions)" - CSPU5_U3 - Dice - Dropdown with Strings_instruction: "Add a dropdown for difficulty - level that prints the difficulty level in the console. (Click to see full - instructions)" - CSPU5_U3 - Dice - If_instruction: "Show different die images for the random - number generated. (Click to see full instructions)" - CSPU5_U3 - Dice - Nested_instruction: "Use nested if statements to make the - scoring different for the different game levels. (Click to see full instructions)" - CSPU5_U3 - High Low - Debug_instruction: "Debug the order of the conditionals - so that it will actually tell the user when their guess is close. (Click to - see full instructions)" - CSPU5_U3 - High Low - Dropdown_instruction: "Add a dropdown for their guess - instead of promptNum (Click to see full instructions)" - CSPU5_U3 - High Low - Else if_instruction: "Add an else-if statement in order - to tell the user if their guess is high or low instead of just wrong. (Click - to see full instructions)" - CSPU5_U3 - High Low - Else_instruction: "Add an else statement so that the - program will tell the user when they are right and when they are wrong. (Click - to see full instructions)\r\n" - CSPU5_U3 - High Low - If_instruction: "Add code to the if statement that indicates - the user guessed the secret number. (Click to see full instructions)" - CSPU5_U3 - Keys - Add Image URLs_instruction: "Add image URLs to your array. - Replace the text area with an image and setText with setImageURL. Then test - your app! (Click to see full instructions)" - CSPU5_U3 - Keys - Buttons and Keys_instruction: "Have the program respond the - same way for both clicking images on the screen and hitting the up and down - keys on the keyboard. (Click to see full instructions)" - CSPU5_U3 - Keys - Demo App_instruction: "Play with the image scroller. Press - the left and right arrows to progress through the images." - CSPU5_U3 - Keys - Final Image Scroller_instruction: "Update the image scroller - to respond to buttons and key presses. (Click to see full instructions)" - CSPU5_U3 - Keys - Functions_instruction: "Write doUpArrow and doDownArrow functions - and call the functions instead of duplicating the code. (Click to see full - instructions)" - CSPU5_U3 - Keys - Key Up and Down_instruction: "Try out the keyup and keydown - events to see how they are different from keypress. (Click to see full instructions)" - CSPU5_U3 - Keys - Multiple Keys_instruction: "Play a different sound when the - down arrow is pressed. (Click to see full instructions)" - CSPU5_U3 - Loops - Complex Condition_instruction: "Change the boolean expression - for the while loop so that it will stop when both dice are greater than or - equal to 5. (Click to see full instructions)" - CSPU5_U3 - Loops - 1_instruction: "Change the condition for the while loop - to check if the variable num is less than 90. (Click to see full instructions)" - CSPU5_U3 - Loops - 10_instruction: "Write a program that simulates the rolling - of two dice. Roll the dice repeatedly until the sum of the dice is either - 7 or 11." - CSPU5_U3 - Loops - 11_instruction: "Fix the condition so that it keeps rolling - the die as long as the value is not a 2 or a 3 instead of rolling infinitely. - (Click to see full instructions)" - CSPU5_U3 - Loops - 12_instruction: "Change the code so that it prints the string - \"Hi\" 5 times. (Click to see full instructions)" - CSPU5_U3 - Loops - 14_instruction: "Change the loop condition to prevent the - infinite loop and stop counting once the count is past 30. (Click to see full - instructions)" - CSPU5_U3 - Loops - 15_instruction: "Count the number of times the sum of the - dice is 12. (Click to see full instructions)" - CSPU5_U3 - Loops - 2_instruction: "Try creating an infinite loop using !=, - > and <. (Click to see full instructions)" - CSPU5_U3 - Loops - 3_instruction: "Change the if statement to a while loop - so the program will run until it rolls a 6. (Click to see full instructions)" - CSPU5_U3 - Loops - 4_instruction: " Use the Debug Commands to make a list of - all the values rolled before a 6. (Click to see full instructions)" - CSPU5_U3 - Loops - 5_instruction: "Add code inside the while loop which will - update the variable num so that the condition will eventually become false. - (Click to see full instructions)" - CSPU5_U3 - Loops - 6_instruction: "Fix the problem so the loop will run at - least once. Change the initial value of num to a dummy value such as -1. (Click - to see full instructions)" - CSPU5_U3 - Loops - 7_instruction: "Without adding any lines of code, reorder - the code so that it prints all the values of num. (Click to see full instructions)" - CSPU5_U3 - Loops - 8_instruction: "Debug which number is not getting printed - and add a write statement to display that value. (Click to see full instructions)" - CSPU5_U3 - Loops - 9_instruction: " Modify the condition so that it keeps rolling - as long as both are less than 3. (Click to see full instructions)" - CSPU5_U3 - Loops - minus = operator_instruction: "Update the code to use the - -= operator to count from 30 down to 0 by 3's. (Click to see full instructions)" - CSPU5_U3 - Loops - Minus Minus_instruction: "Change the code to count down - from 10 to 1. (Click to see full instructions)" - CSPU5_U3 - Loops - plus and minus = operator_instruction: "Update the code - to use the += operator. (Click to see full instructions)" - CSPU5_U3 - Loops - Plus Plus_instruction: "Change the code to use count++ instead - of count = count + 1. (Click to see full instructions)" - CSPU5_U3 - Loops - Typing in Console_instruction: "Use console to check the - ending value of num. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Add 5_instruction: "Add 5 to all the values in - an array (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Counting Times_instruction: "Count the number - of times 5 appears in an array. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Divid by 2_instruction: "Divide every value in - the array by 2. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Find Min_instruction: "Complete the findMinVal - function to find and display the smallest value in an array (Click to see - full instructions)" - CSPU5_U3 - Loops And Arrays - General Search Param_instruction: "Add a second - parameter to the search function for the value to search for. (Click to see - full instructions)" - CSPU5_U3 - Loops And Arrays - Intro For Loop_instruction: "Add a for loop with - a console.log inside and test out the 3 pieces of the for loop. (Click to - see full instructions)" - CSPU5_U3 - Loops And Arrays - Linear Search_instruction: "Visit every element - in the array and display \"true\" if the value is a 5, and \"false\" otherwise. - (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Loop Array If_instruction: "Use an if statement - to only display the values in the array that are greater than 5. (Click to - see full instructions)" - CSPU5_U3 - Loops And Arrays - Make it a Function - add list parameter_instruction: "Create - a function that takes a list parameter and prints if the list contains a 5. - (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Make it a Function_instruction: "Move the code - that searches the list for a 5 into a function called \"search\". (Click to - see full instructions)" - CSPU5_U3 - Loops And Arrays - Print Array_instruction: "Use a for loop to print - out all the values in an array. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Printing Single True_instruction: "Process the - array and display a single \"true\" if the array contains a 5 or a single - \"false\" if it does not. (Click to see full instructions)" - CSPU5_U3 - Loops And Arrays - Search with Boolean Var_instruction: "Make a - boolean variable to use as a flag to keep track of whether there is a 5 in - the array. (Click to see full instructions)" - CSPU5_U3 - Movie Bot - Multiple If Sequences_instruction: "Add another set - of if, else if, and else statements inside the question if statement to check - for keywords for movie ratings (G, PG, PG-13, and R). (Click to see full instructions)" - CSPU5_U3 - Movie Bot - Nested Motivation_instruction: "Add a separate set of - if statements to check for a \"?\" in the input. (Click to see full instructions)" - CSPU5_U3 - Movie Bot - toLowerCase_instruction: "Use the toLowerCase command - to change all user input into lowercase letters after they enter it. (Click - to see full instructions)" - CSPU5_U3 - Movie Bot - When Multiple If Statements_instruction: "Add an if - and else-if statement that checks for please and thank you. (Click to see - full instructions)" - CSPU5_U3 - Practice Create Performance Task_instruction: "Design and implement - your practice Create Performance Task. (Click to see full instructions)" - CSPU5_U3 - Return Values - constrainTurtle_instruction: "Use constrain in this - simple app to keep the turtle from driving off the screen. (Click to see - full instructions)" - CSPU5_U3 - Return Values - debuggingConstrain_instruction: "Correct the error - in constrain so that it returns the appropriate value. (Click to see full - instructions)" - CSPU5_U3 - Return Values - debuggingMaxVal_instruction: "Correct the error - in maxVal so that it correctly reports the maximum value. (Click to see full - instructions)" - CSPU5_U3 - Return Values - useMinVal_instruction: "Call minVal within the console.log - statement to calculate the minimum of two values. (Click to see full instructions)" - CSPU5_U3 - Return Values - wrapTurtle_instruction: "Write wrap in this simple - app to let the turtle \"wrap\" to the other side of the screen when it goes - off. (Click to see full instructions)" - CSPU5_U3 - Return Values - writeMaxVal_instruction: "Write the function maxVal - and then use it within the console.log statement to calculate the maximum - of two values. (Click to see full instructions)" - CSPU5_U3 - Simulation - 1_instruction: "Use a while loop to \"flip a coin 10 - times\" and write the values to the screen. (Click to see full instructions)" - CSPU5_U3 - Simulation - 2.1_instruction: "Change your looping condition so - the simulation runs until there are 5 heads flipped. (Click to see full instructions)" - CSPU5_U3 - Simulation - 2.5_instruction: "Run your simulation to get the full - 10,000 heads! How long did it take? (Click to see full instructions)" - CSPU5_U3 - Simulation - 2_instruction: "Keep track of how many heads (1's) - your program generates and print the results to the screen. (Click to see - full instructions)" - CSPU5_U3 - Simulation - 3_instruction: "Add functionality that counts how many - heads in a row are flipped. (Click to see full instructions)\r\n" - CSPU5_U3 - Simulation - 4_instruction: "Update your while loop's condition - so the the coin flips until there are three heads in a row. (Click to see - full instructions)" - CSPU5_U3 - Simulation - 5_instruction: "Change your while loop to run until - you get a streak of 12 heads. How many flips did it take? (Click to see full - instructions)" - CSPU5_U3 - Simulation - 6_instruction: "Keep adding to your simulation. What - do you want to explore next? (Click to see full instructions)" - CSPU5_U3 - User Input - Save getText To Variable_instruction: "Save the age - and name of the user in variables (Click to see full instructions)" - CSPU5_U3 - Variables - Set to Expression with Other Variables_instruction: "Write - an expression that calculates the player's total score and stores it in the - totalScore variable. The calculation is: the player's points times lives - divided by the total time. (click to see full instructions)" - CSPU5_U3 - Variables - Set to Expression_instruction: "Test out the new expressions. - (Click to see full instructions)" - CSPU5_U3 Digital Assistant Design_instruction: "Pick a topic for your Digital - Assistant and create the basic layout with a text input and text area. (Click - to show full instructions)" - CSPU5_U3 Digital Assistant Set Text_instruction: "Have your digital assistant - repeat back what the user types and include a canned response. (Click to see - full instructions)" - CSPU5_U3 Digital Assistant Target_instruction: "Try out a demo of the Digital - Assistant!" - CSPU5_U3 full clicker demo_instruction: "Clicker game - Try it out!" - CSPU5_U3- Variables - Create And Assign_instruction: "On one line add a variable - called \"lives\" and assign it the value 3. Print it to the console. (Click - to see full instructions)" - CSPU5_U3- Variables - Text Mode_instruction: "1. Switch to text mode and type - instructions; 2. drag blocks out into text mode; 3. experiment with code completion" - CSPU5_U3-Design Mode-ID and Event Handler_instruction: "Add an event handler - for the button using the \"Insert and show\" link in the Design Mode Events - tab. (Click to see full instructions)." - CSPU5_U3-Design Mode-Image_instruction: "Recreate the \"Chaser Game\" from - the last lesson using Design Mode. (Click to see full instructions.)" - CSPU5_U313 drag Two Buttons_instruction: "Run a program with two buttons that - have the same id to see the warning message in the console. Change the ids - to make the program run without getting a warning message." - CSPU5_U313 Two Buttons with Ids_instruction: "Predict what will happen. Once - you've made a prediction, run the code to see what happens. (Click to see - full instructions)" - CSPU5_U3L13 - Debug Id Problem_instruction: "Improve the button by choosing - a descriptive and meaningful ID. (Click to see full instructions)" - CSPU5_U3L13 - Debugging 1_instruction: "Debug the program by verifying your - IDs are being referenced properly. (Click to see full instructions)" - CSPU5_U3L13 - Debugging 2_instruction: "Debug the program by properly ordering - your button commands and event handlers. (Click to see full instructions)" - CSPU5_U3L13 - Debugging 3_instruction: "Debug the program by fixing the logical - error within the program. (Click to see full instructions)" - CSPU5_U3L13 - Debugging IDs case sensitive_instruction: "Debug the program - by verifying your IDs are being referenced properly. (Click to see full instructions)" - CSPU5_U3L13 - Project_instruction: "Create your multi-screen app. (Click to - see full instructions.)" - CSPU5_U3L13 - Turtle Driver Project_instruction: "Create a \"turtle driver\" - that includes buttons to move the turtle forward and turn it left and right. - (Click to see full instructions)" - CSPU5_U3L13 - Turtle move with button_instruction: "Add a button that moves - the turtle when clicked. (Click to see full instructions)" - CSPU5_U3L13 eventsDetails_instruction: "Add an event handler to the button - to move the turtle forward. (Click to see full instructions)" - CSPU5_U3L14 - Assigning Random Value_instruction: "Write a program that simulates - the rolling of two dice and reports their individual values as well as the - sum. (click to see full instructions)" - CSPU5_U3L14 - concatenate simple_instruction: "Modify the write statement on - line 3 to combine text and variables together to make the app display a single - line of text that shows the player's lives and score. (click to see full - instructions)" - CSPU5_U3L14 - Mini Calculator embed_instruction: "You will be prompted for - two numbers, one right after the other. See what happens. Enter different - numbers until you get the idea." - CSPU5_U3L14 - moving memory challenge1_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge2_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge3_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge4_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge5_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - moving memory challenge6_instruction: "Using only the variables - provided, assignment (=) and arithmetic (+ - * /) re-assign the values to - make the console.log statement display the correct value(s). (Click to see - full instructions)" - CSPU5_U3L14 - User Input Division calculator_instruction: "Write a program - that acts as a simple calculator. (click to see full instructions)" - CSPU5_U3L14 - Variable ReAssignment pt2_instruction: "Trace the code and predict - what you think will be printed to the console. Then add a console.log statement - at the end of the program to see the last value of someNum to see if your - full prediction is correct. (click to see full Instructions)" - CSPU5_U3L15 - add code to make count down work_instruction: "Write code to - make the down arrow work as expected. (Click to see full instructions)" - CSPU5_U3L15 - Add reset button to UpDown app_instruction: "Add code so that - clicking the start over button will reset the game and send you back to the - main screen. (Click to see full instructions)" - CSPU5_U3L15 - count upDown bug forget to set text_instruction: "Find the bug - in the program and fix it. (Click to see full instructions)" - CSPU5_U3L15 - count upDown bug logic error wrong update_instruction: "Find - the bug in the program and fix it. (Click to see full instructions)" - CSPU5_U3L15 - count upDown bug var not created globally_instruction: "Find - the bug in the program and fix it. (Click to see full instructions)" - CSPU5_U3L15 - Debug forget to update var on reset in UpDown app_instruction: "Run - the app, and click the up or down button until you get to the gameOverScreen. - Click 'Start Over' and try the app again. Find and fix the issue in the - code. (Click to see full instructions)" - CSPU5_U3L15 - Debug if never triggers in UpDown app_instruction: "Run the app - and use the up and down arrows to try to hit the gameOverScreen. You can't! - Find and fix the issue in the code. (Click to see full instructions)" - CSPU5_U3L15 - Debugging Simple If-statements =v==_instruction: "Run the app, - and click the up button. Then restart and run it again, and click the down - button. Find and fix the issue in the code. (Click to see full instructions)" - CSPU5_U3L15 - DEMO up down count practice app_instruction: "Try out the demo - app (Click to see full instructions)" - CSPU5_U3L15 - global var example count up_instruction: "Look at the code for - this app and see how the code works to update the count variable when the - up arrow is clicked. (Click to see full instructions)." - CSPU5_U3L15 - mini clicker update score_instruction: "Add code to update the - score when the apple is clicked. (Click to see full instructions)" - CSPU5_U3L15 - practice with setText_instruction: "Use setText to complete the - click event handler for the down arrow. (Click to see full instructions)" - CSPU5_U3L15 - Simple If-statements in UpDown App_instruction: "Add an if statement - so that the app changes screens when the count reaches -5. (Click to see full - instructions)" - CSPU5_U3L15 - variable scoping problem debugging_instruction: "See if you can - figure out why the code is no longer working. (Click to see full instructions)" - CSPU5_U3L15 click add lives_instruction: "Add lives to the clicker game that - decrement by 1 when the background image is clicked (Click to see full instructions)" - CSPU5_U3L15 full clicker app_instruction: "Complete your clicker game! (Click - to see full instructions)" - CSPU5_U3L16 - challenge say hi app_instruction: "Write a greeting to the user - when they hit 'enter' in the text input, using the 'change' event. (Click - to see full instructions)" - CSPU5_U3L16 - chaserApp_instruction: "Create your own \"Chaser Game.\" (Click - to see full instructions)" - CSPU5_U3L16 - chooseImages_instruction: "Replace the image in your application - with one of your own. (Click to see full instructions)" - CSPU5_U3L16 - doubleQuotes_instruction: "Save a string inside a variable and - log it to the console. (Click to see full instructions)" - CSPU5_U3L16 - intro getText_instruction: "Add an event handler to the Submit - button so that when the button is clicked it will display the name entered - in the text box to the console. Use getText to get the value out of the text - box. (Click to see full instructions)" - CSPU5_U3L16 - introSetPosition_instruction: "Move the buttons to the bottom - of the screen. (Click to see full instructions)" - CSPU5_U3L16 - introStrings_instruction: "Save a string inside a variable and - log it to the console. (Click to see full instructions)" - CSPU5_U3L16 - newEventTypes_instruction: "Experiment with different event types - and select the one that you think is best. (Click to see full instructions)" - CSPU5_U3L16 - outputWithTextArea_instruction: "Output a message to the 'textArea' - (Click to see full instructions)" - CSPU5_U3L16 - setPosition to fixed location_instruction: "Introducing the setPosition - command! Replace the moveTo in the button-click event handler to use setPosition - to move the button itself to a random location when it's clicked." - CSPU5_U3L16 - setPosition to move button_instruction: "Introducing the setPosition - command! Replace the moveTo in the button-click event handler to use setPosition - to move the button itself to a random location when it's clicked." - CSPU5_U3L16 - singleSetPosition_instruction: "Move the button to the middle - of the screen. (Click to see full instructions)" - CSPU5_U3L16 - text labels_instruction: "Use the textLabel command to replace - the button in your program with a text label. (Click to see full instructions)" - CSPU5_U3L16 - textInput getText write_instruction: "Add an Text Input box for - the name and age. (Click to see full instructions)" - CSPU5_U3L16 - toUpper_instruction: "Make the name of the user appear in uppercase - (Click to see full instructions)" - CSPU5_U3L16 - use images_instruction: "Use the image command to replace the - text label in your program with an image. (Click to see full instructions)" - CSPU5_U3L16 Mad Lib Clear Input_instruction: "Clear the user's previous text - when the Play Again button is clicked (Click to see full instructions) " - CSPU5_U3L16 Mad Lib Demo_instruction: "Mad Libs Demo - Try it out!" - CSPU5_U3L16 Mad Lib getText_instruction: "Before setting the text area with - your Mad Libs outline, get the user's text and incorporate their responses. - (Click to see full instructions) " - CSPU5_U3L16 Mad Lib setText_instruction: "When the Next button is clicked, - set the text area to have the main outline of your How-to Mad Libs (without - the user's input). (Click to see full instructions) " - CSPU5_U3L16 Mad Lib Student Setup_instruction: "Back to Mad Libs: To get started, - set up the two screens for your Mad Libs app (Click to show full instructions)" - CSPU5_U3L16 Mad Lib toUpper_instruction: "Apply the toUpperCase and toLowerCase - string functions to the user's text. (Click to see full instructions) " - CSPU5_U3L18 comparison operators_instruction: "Use console.log to print out - the different boolean expressions below to see what information they return. - (Click to see full instructions)" - CSPU5_U3L19 - fix the var name syntax error v2_instruction: "Fix the error - and get it to print the value of both variables (Click to see full instructions)" - CSPU5_U3L19 - test reassignment of two vars_instruction: "Predict the value - of a and b. Add console.log statements to find out the actual value of a and - b. (Click for full instructions)" - CSPU5_U3L19 - three basic ops of variables_instruction: "Add another variable - called \"lives\" and set the value to 3. Print the value of the variable to - the console. (Click to see full instructions)" - CSPU5_U3L19 - variable reassignment challenge pt2_instruction: "Make a prediction - about the ending values of a, b, and c. Then use console.log to check your - understanding (Click to see full instructions)" - CSPU5_U3L19 - write var and string with same name v2_instruction: "Fix the - code so that the values of both variables print to the console. (Click to - see full instructions)" - CSPU5_U3L23 Chatbot Conditionals 1_instruction: "Add if, else if, and else - statements to detect the movie genres Comedy, Romance, Action, and Horror. - (Click to see full instructions)" - CSPU5_U3L24 Chatbot Basic Conditionals_instruction: "Check out the project - description for instructions. (Click to see full instructions.)" - CSPU5_U3L24 introIncludes_instruction: "Practice using the includes command. - (Click to see full instructions)" - CSPU5_U3L24 Nested Conditionals 1_instruction: "Change all of the boolean expressions - to use includes instead of ==. (Click to see full instructions)" - CSPU5_U3L24 Nested Conditionals 2_instruction: "Nest your movie genre if statements - inside the if statements to check for a ? in the input. " - CSPU5_U3L25 - drag out key event_instruction: "Set up an event handler to respond - to keypress events, and display event.key in the console. Hit keys on the - keyboard to see what happens. (Click to see full instructions)" - CSPU5_U3L25 - play sound when up key_instruction: "Change the code so the sound - will only play when the up arrow is pressed. (Click to see full instructions)" - CSPU5_U3L26 AND operator_instruction: "Update the genre and rating if statements - to give only one movie suggestion at a time. (Click to see full instructions)" - CSPU5_U3L26 OR operator_instruction: "Update the if statement to use an OR - to check for a \"?\" as well as who, what, where, when, why, how in the user - input. (Click to see full instructions)" - drawings!_instruction: "Draw the equilateral triangle - all the sides are the - same!" - ECSPD Binary Odometer_instruction: "This is another resource you could use - with your students." - Eval Booleans 1_instruction: "Boolean operators (like >, <, =) allow us to - compare different values, returning either true or false. Click \"Run\" to - see how this expression evaluates." - Eval Booleans 2_instruction: "Can you set the values so that this expression - evaluates as true?" - Eval Booleans 3_instruction: "The string-length function returns the number - of characters in a string (including spaces!) - make this code evaluate to - true." - Eval Booleans 4_instruction: "Here's an Evaluation Block called AND - it returns - true if both of its parameters are true, otherwise it returns false. Edit - the x variable so that this expression returns true." - Eval Booleans 5_instruction: "This OR block returns true if either of its parameters - is true. Otherwise, if both parameters are false it will return false. Set - the y variable to a value that will cause this expression to return false." - Eval Booleans 6_instruction: "Here's one more boolean block called NOT. This - block flips true to false, or false to true. If you wrap this block of code - in a NOT block, it should return true (because we are asking if the two expressions - do NOT produce equal values)." - Eval Booleans Free Play_instruction: "Free Play: Try out some creations of - your own using Booleans." - Eval Booleans_instruction: "Booleans allow us to compare different values, - returning \"true\" if the are equal, or \"false\" if they are not. What do - you think this code will evaluate to?" - Eval Cond 1_instruction: "The cond block checks the boolean expressions in - the left column, and as soon as it finds one that returns \"true\" it runs - the corresponding code on the right. If none of the expressions evaluate to - \"true,\" it runs the bottom block. Update the \"temperature\" variable so - that this block returns \"It's just right.\"" - Eval Cond 2 (copy 1)_instruction: "This condition returns a different shape - based on the value of the \"sides\" variable - change the value of \"sides\" - so that the conditional returns a triangle." - Eval Cond 2_instruction: "This condition returns a different shape based on - the value of the \"sides\" variable - change the value of \"sides\" so that - the conditional returns a triangle." - Eval Cond 3 (copy 1)_instruction: "Can you write a conditional that checks - the variable \"age\" and returns \"Old enough to vote and drive\" if age > - 17, \"Old enough to drive\" if age is > 15, and \"Can't drive or vote\" if - neither conditions is true. Hint: The first condition to return \"true\" wins - - make sure you put your conditions in the right order." - Eval Cond 3_instruction: "Can you write a conditional that checks the variable - \"age\" and returns \"Old enough to vote and drive\" if age > 17, \"Old enough - to drive\" if age is > 15, and \"Can't drive or vote\" if neither conditions - is true. Hint: The first condition to return \"true\" wins - make sure you - put your conditions in the right order." - Eval Cond 4_instruction: "We can use the string=? function to make conditionals - that respond to text input. Here's a function called green shape that takes - a string for the type of shape. Complete the conditions so that the correct - solid green shape is returned when the function is run with \"circle\", \"triangle\", - \"square\", or \"rectangle\"." - Eval Cond 5_instruction: "Here's a similar function red shape with an additional - variable for size. Complete the conditionals so the correct solid red image - of a given size is drawn for \"circle\", \"triangle\", and \"star\"." - Eval Cond 6_instruction: "Write a function called food-critic, which takes - in the name of a food and produces a String that says how you feel about that - food. For example, (food-critic “pizza”) might evaluate to “delicious”, but - (food-critic “rotten eggs”) might evaluate to “gross!”. Choose at least two - foods to review, but you can you write more if you like! Don’t forget to - add an “else” clause!\r\nOne example - and part of the definition - has already - been done for you!" - Eval Cond 7_instruction: "Free Play: Write a function called green-shape, which - takes in the name of a shape and produces a solid green shape. Your function - should work with at least “circle”, “star” and “rectangle”, but you can add - other shapes if you like. You can choose the size of each shape. Don’t forget - to add an “else” clause!\r\nOne example - and part of the definition - has - already been done for you!\r\n" - Eval Cond 8_instruction: "Free Play: Suppose you want to own a car at 21, or - have your own business by 30. Write a function called life-goals, which takes - in an age and produces a string that describes your life goals by then. Don’t - forget to add an “else” clause!\r\n" - Eval Contracts 1_instruction: "Use the \"star\" function to produce a red star - with a 60 pixel radius" - Eval Contracts 10A_instruction: "Alright let's complete this puzzle with a - Green Square that is 175 pixels in size." - Eval Contracts 11A_instruction: "Can you complete this puzzle to read \"Hello - World\" in the banner?" - Eval Contracts 2_instruction: "Check out the \"rotate\" function - can you - use it to rotate this 90 pixel green square by 45 degrees?" - Eval Contracts 3_instruction: "Try using the \"text\" function to write this - teal text at size 40." - Eval Contracts 4 A_instruction: "The \"scale\" function returns an image that - is scaled either larger or smaller than the input image. Try scaling this - circle by a factor of 10 - how is the resulting image different than if you'd - just made a circle of that size in the first place?" - Eval Contracts 4_instruction: "The scale function returns an image that is - either larger or smaller than the input image. Try scaling this circle by - a factor of 10. How is the returned image different than if you'd just made - a circle of that size in the first place?" - Eval Contracts 8A_instruction: "Can you complete this puzzle? The big-triangle - is 200 pixels in size and purple?" - Eval Contracts A_instruction: "Use the star function to produce a solid red - star with a 60 pixel radius" - Eval Contracts C_instruction: "Check out the rotate function - can you use - it to rotate this 90 pixel green square by 45 degrees?" - Eval Contracts E_instruction: "Try using the text function to write \"Hello, - world!\" in teal at size 40." - Eval Contracts shrink_instruction: "Can you complete this image using the \"shrink\" - function block? The radius is 20. " - Eval Define Funcs 1_instruction: "Here's a new function called green-triangle - that takes a single Number for size and produces a green triangle. Use the - new function to create a 125 pixel green triangle." - Eval Define Funcs 2_instruction: "Let's look inside that green-triangle function - to see how it works. Can you modify it so that the green-triangle function - always draws outlined green triangles?" - Eval Define Funcs 3_instruction: "Here's the start of another new function - called purple-circle with a domain of one Number (the radius) and a range - of Image. The body of the function is broken though - fix it and then make - a purple circle with 150 pixel radius" - Eval Define Funcs 4_instruction: "Create a new function called aqua-star that - has a Domain of a single Number for radius and returns an aqua star of the - given radius. Run your new function with a radius of 75." - Eval Define Funcs 5_instruction: "Let's use that aqua-star function to make - a row of different sized stars. From left to right, the stars should have - radii of 25, 50, and 75." - Eval Define Funcs Test_instruction: "Here's the start of another new function - called purple-circle with a domain of one Number (the radius) and a range - of Image. The body of the function is broken though - fix it and then make - a purple circle with 150 pixel radius" - Eval Defining Vars Free Play 1_instruction: "Free Play: We've provided a function - that fills your screen with my-image. Change my-image to see what patterns - you can make." - Eval Design Recipe .1_instruction: "Here's a Design Recipe for a function - called square-circle with domain Number String and range Image. Click Edit - to write the function definition (you will see two examples provided)." - Eval Design Recipe 1 (copy 1)_instruction: "We're going to write a function - that draws a solid rectangle of any color that is twice wide as it is high. - Start with an example - draw a solid green rectangle that has a height on - 100 pixels." - Eval Design Recipe 1_instruction: "Alright, now given the Contract wide-rect: - Number String -> Image, write an example - draw a solid green rectangle that - has a height of 100 pixels." - Eval Design Recipe 2 (copy 1)_instruction: "Let's do one more example before - writing the function definition - this time draw a solid red rectangle with - a height of 75 pixels." - Eval Design Recipe 2_instruction: "Let's do one more example before writing - the function definition - this time draw a solid red rectangle with a height - of 75 pixels." - Eval Design Recipe 3_instruction: "The Design Recipe for wide-rect already - has a contract and one example. Can you write a second example and then complete - the definition? The wide-rect function should produce a rectangle of given - color that is twice as wide as it is high." - Eval Design Recipe 4_instruction: "Use the Design Recipe to create a function - starburst. When given a number of points and an outer radius, starburst returns - a yellow radial star with given points, and an inner radius that is half the - outer radius." - Eval Design Recipe 5_instruction: "Using the Design Recipe, write a function - striped-flag that takes two colors and produces a flag that is 250 pixels - wide, 150 pixels tall, with three even horizontal stripes of given colors, - in the order color2, color1, color2." - Eval Design Recipe 6_instruction: "Write a function large-polygon that should - output a solid polygon of given sides and color that takes up most of the - window, regardless of the number of sides. To make sure that the polygon doesn't - get too large as you increase the number of sides, side length should be inversely - proportional to side number, with a length of (800/sides)." - Eval Design Recipe Free Play_instruction: "Free Play: Use the Design Recipe - to create some functions of your own design" - Eval Free Play_instruction: "Free Play: Make art with code!" - Eval Strings Images .1_instruction: "So far we've only dealt with a single - type of data, Numbers. Another type of data is a String, which is any combination - of letters, numbers, or other characters wrapped in quotation marks. Run the - String \"Hello, world!\" and see what happens." - Eval Strings Images .2_instruction: "The string-append function takes two Strings - and returns a single combined String. Add a String \"Universe\" to the second - argument of string-append." - Eval Strings Images 1_instruction: "The third type of data we're going to - use is an Image. This star function takes in a Number and two Strings, and - it evaluates to an Image. Use this function to make a solid red star with - radius of 100." - Eval Strings Images 2_instruction: "Free Play: Every Evaluation Block is color-coded - to let you know which data type it returns and which types it needs for its - parameters. The last parameter of the triangle function takes a String that - controls its color - try some different colors to see what works." - Eval Strings Images 3_instruction: "Some functions can only take a specific - set of Strings, such as the second argument of this circle function, which - controls its style. Draw this orange outline circle using the special String - block with a dropdown to make sure you only use valid styles." - Eval Strings Images 4_instruction: "Try using the rectangle block to draw this - solid, red rectangle - it is 175 pixels wide and 100 pixels tall." - Eval Strings Images 5_instruction: "Try using this new Evaluation Block called - overlay to place a 100 pixel white triangle on top of a 200 pixel red circle." - Eval Strings Images 6_instruction: "Use the overlay block to place a 75 pixel - radius yellow star on top of a 150 pixel long blue square." - Eval Strings Images 7_instruction: "The offset block lets you move an image - relative to where it would normally be placed. Use this block to offset the - square by 100 pixels on the y-axis." - Eval Strings Images 8_instruction: "Here's a different kind of star block - - it's called radial-star and it allows you to draw stars with any number - of points! Use it to create a 7 point solid orange star with an inner radius - of 75 pixels and an outer radius of 175 pixels." - Eval Strings Images Free Play_instruction: "Free Play: Explore the blocks available - to create something interesting. Make sure to share your favorite creations." - eventsIntro_instruction: "Need a better playlab/events combo" - Farmer for Authored Hint testing_instruction: "Wow, I found a really deep hole! - I don't know how many shovelfuls of dirt it needs. Can you write a program - that fills it until the ground is even? Hint: Try using the while loop this - time." - Farmer for TTS testing_instruction: "Wow, I found a really deep hole! I don't - know how many shovelfuls of dirt it needs. Can you write a program that fills - it until the ground is even? Hint: Try using the while loop this time." - Finalize Your Chaser Game v.1_instruction: "Introducing the setPosition command! - Replace the moveTo in the button-click event handler to use setPosition to - move the button itself to a random location when it's clicked." - Food Fight!_instruction: "We've added one last function for you. \r\n\r\nUse - an \"if\" statement to program your game to call the \"level_up\" function - only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor - example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 - to move to the next puzzle. " - Food Fight_instruction: "You can make whatever you want in play lab! This is - an example of a game you can make in play lab." - FoodFight_instruction: "This is an example of a game you can make in play lab." - Frequency Analysis_instruction: "Test" - frozen circle function in circle_instruction: "Now let's create 20 overlapping - circles, turning 18 degrees between each circle." - frozen circle function with parameter_instruction: "Here's a ”Create circle” - block that can make circles of different sizes. Can you use this to create - a small circle of size 5 and a larger circle of size 10?" - frozen circle function_instruction: "Use the new “Create a circle” block to - create 10 overlapping circles. Don't forget to jump forward between circles." - frozen circle_instruction: "A circle is a special shape. Can you figure out - what number to replace the question marks with to draw a circle?" - frozen cross rotate dense_instruction: "Let's repeat it 90 times! How many - times does 90 go into 360? Hint: It's a really small number." - frozen cross rotate_instruction: "Now try repeating it 10 times. How many degrees - do you need to turn between each line?" - frozen cross_instruction: "Wrap a “Repeat” block around these commands to create - a plus sign. Did you notice Elsa can move forward and backward?" - frozen diamond mini snowflake_instruction: "Did you know every snowflake is - a different shape? Let's create a new snowflake by using another “Repeat\" - block to repeat a parallelogram 4 times, turning right by 90 degrees between - each parallelogram." - frozen diamond snowflake_instruction: "Now, let's create a new snowflake by - using the repeat block to repeat a parallelogram 10 times, turning right by - 36 degrees between each one." - frozen diamond_instruction: "Use a repeat around these blocks to create a parallelogram. - It's just like a rectangle but has different angles. This one has 60 degree - and 120 degree angles instead of all 90 degree angles." - frozen freeplay_instruction: "You've officially become a master artist! Create - a winter wonderland." - frozen line_instruction: "Hi! I'm Elsa of Arendelle. Help me create a single - line." - frozen perpendicular_instruction: "Now let's see if we can create two lines - that are at a 90 degree angle to each other. You will need to use the \"Turn\" - block as well as the \"Move\" block." - frozen snowflake branch_instruction: "Try using the ”Create a snowflake branch” - block to create three branches, which starts to look like a snowflake." - frozen snowflake full_instruction: "Now let's repeat it 8 times to make a - beautiful snowflake!" - frozen snowflower_instruction: "Intricate snow patterns can be created with - very simple shapes. Can you make a pattern by repeating 5 circles of size - 5 and 5 circles of size 10?" - frozen square iterative_instruction: "It seems like we're halfway to making - a square. Let's put 4 lines together to create a square." - frozen square loop 3x_instruction: "Let's create three squares, turning after - each square. Be sure to turn by 120 degrees before each new square." - frozen square loop_instruction: "Hi, I’m Anna of Arendelle! Let’s make a square - with the “Repeat” block, which uses fewer blocks. How many times (???) should - the “Repeat” block loop the blocks inside it to make a square?" - frozen square snowflake_instruction: "Can you create a snowflake using the - “Repeat” block to make a square 10 times, and the “Turn” block to turn 36 - degrees between each square?" - 'Game Lab Workshop: Random_instruction': "Pick a shape block and use calls - to randomNumber() in place of one or more of the parameters. Maker sure you - run it a few times so you can see the effect of randomization." - Geometric Pattern_instruction: "Project Idea: Create a pattern using geometric - ideas like shapes. This requires persistence and planning!" - Geometric Sun_instruction: "Project Idea: Create a pattern using geometric - ideas like shapes. This requires persistence and planning!" - 'Grade 4 Example PlayLab Project #1_instruction': "Take a look at this project. Do - you see how it was made?" - 'Grade 4 Example PlayLab Project #2_instruction': "Take a look at this project. Do - you see how it was made?" - grade1_adventurer_loops1_instruction: "Four piles of gold! Collect all four." - grade1_adventurer_loops10_instruction: "Help me get all of the gold from this - cave." - grade1_adventurer_loops2_instruction: "How can Laurel collect all five piles - of gold using only one `E -->` block?" - grade1_adventurer_loops3_instruction: "Can you fix Laurel's path to get all - of this gold?" - grade1_adventurer_loops4_instruction: "Add to the code from the last puzzle - to get all of the gold. " - grade1_adventurer_loops5_instruction: "What should you add to this code to - get all of the gold?" - grade1_adventurer_loops6_instruction: "Write the code to get all of this gold." - grade1_adventurer_loops7_challenge_instruction: "**Challenge: ** The gold goes - all the way down these stairs! Write the code to help me get it all." - grade1_adventurer_loops8_challenge_instruction: "Challenge: Try this staircase - now! It has an extra spike at the end you'll have to climb." - grade1_adventurer_loops9_instruction: "Help me get the gold from this deep - valley." - grade1_adventurer_loopsFP_instruction: "Eureka! Collect as much gold as you - can!" - grade1_adventurer_loopsPre_instruction: "This is Laurel the Adventurer! Can - you move her around and get gold?" - grade1_artist_loops1_instruction: "The Artist is trying to draw a line six - times, but can't get it right. Can you help?" - grade1_artist_loops2_instruction: "Help the artist draw a line 7 times to make - a garden wall." - grade1_artist_loops3_instruction: "Now we need to get the soil ready to plant. - Find the bugs in the code and help the artist prepare the ground. " - grade1_artist_loops4_instruction: "Time to fix the stairs! Repeat this pattern - five times so the artist can reach the top of the bushes." - grade1_artist_loops5_instruction: "Behind the bushes there is a beautiful vine - full of flowers. Can you climb the vine and see where it goes?" - grade1_artist_loops6_instruction: "**Challenge:** It's a hidden garden! Let's - walk around." - grade1_artist_loops7_instruction: "The flowers down here are so pretty. Let's - take a closer look." - grade1_artist_loops7a_instruction: "**Challenge:** Lovely! Let's take a walk - around the garden." - grade1_artist_loops7b_instruction: "Time to head home. Can you fix this ladder - to help the artist get down?" - grade1_artist_loops8_instruction: "Let's take the short way home, over the - pond. Can you help the artist stay on the stones?" - grade1_artist_loops9_instruction: "I still need a story for this puzzle" - grade1_artist_loopsFP_instruction: "Use what you have learned to draw a picture - of what you think the artist saw when he got home." - grade1_maze_sequence1_instruction: "A bug! Fix the code to get me to the pig." - grade1_maze_sequence10_instruction: "Move me around the TNT to get to the pig." - grade1_maze_sequence2_instruction: "Fix the code to get me to the pig!" - grade1_maze_sequence3_instruction: "Add 2 blocks to get the bird to the pig." - grade1_maze_sequence4_instruction: "Now try this puzzle from the start!" - grade1_maze_sequence5_instruction: "Move one way, then another to get me to - the pig!" - grade1_maze_sequence6_instruction: "Figure out what is missing and then add - blocks to get me to the pig!" - grade1_maze_sequence7_instruction: "Your turn! What do you need to do to get - the bird to the pig?" - grade1_maze_sequence8_instruction: "Debug this level by adding blocks to get - me to the pig!" - grade1_maze_sequence9_instruction: "Go around the TNT to get me to the pig! - " - grade1_maze_sequenceA_instruction: "Challenge: Move me around the TNT to get - to the pig." - grade1_maze_sequenceB_instruction: "Fix the bugs to get the bird to the pig." - grade1_maze_sequenceC_instruction: "It's all you! Get the bird to the pig." - grade1_maze_sequenceD_instruction: "Now head any which way to get that pig!" - grade1_playlab_events1_instruction: "This game is called \"Play Lab\". See - if you can figure out what each block does." - grade1_playlab_events1a_instruction: "Make your robot say \"Hello!\" when the - button is clicked." - grade1_playlab_events2_instruction: "This program makes Robin fly. Can you - get her to vanish when you click her?" - grade1_playlab_events2a_instruction: "Edit the code so that when the second - bird is clicked, your program plays a sound!" - grade1_playlab_events3_instruction: "This program makes Robin fly. Can you - make the robot jump when you press the up button?\r\n" - grade1_playlab_events3a_instruction: "When the third bird is clicked, the background - should change to a city. Can you add code to make this happen?" - grade1_playlab_events4_instruction: "Add a block to make Robin vanish when - she collides with the robot." - grade1_playlab_events4a_instruction: "Add code to make something happen when - the fourth bird is clicked. Be creative!" - grade1_playlab_events5_instruction: "Add a block to the 'when run' event - that starts the dragon flying." - grade1_playlab_events5a_instruction: "About My Robot Project! Write code so - that clicking on each bird shows a new fact about your robot." - grade1_playlab_events6_instruction: "Add a block to the 'when actor 1 clicked' - event that makes the dragon return to the middle of the screen." - grade1_playlab_events7_instruction: "Add a block so that when you push the - left arrow button, the knight surges toward the dragon." - grade1_playlab_events8_instruction: "Add a block so that when the knight collides - with the dragon, it plays a sound." - grade1_playlab_events9 RYAN COPY_instruction: "Now, have Robin wait a second, - then come back after she vanishes." - grade1_playlab_events9_instruction: "Now, add a block to keep score each time - the knight hits the dragon." - grade1_playlab_eventsFP_instruction: "Use your imagination. What can you do - to make this game more fun?" - grade1_sequence_pre_instruction: "Play with these blocks to see what they make - the bird do!" - grade1_video_frustrationRainbow_instruction: "This video describes the rainbow - of frustration and introduces persistence." - grade2_CaringForNewPet_0_instruction: "For this puzzle, drag all of the blocks - together and click \"Run\" to watch it go!" - grade2_CaringForNewPet_1_instruction: "Drag an extra `move forward` block out - of the toolbox to finish your code." - grade2_CaringForNewPet_10_instruction: "Get me to the pig!" - grade2_CaringForNewPet_11_instruction: "\"Keep calm and help me find the bad - pig.\"" - grade2_CaringForNewPet_2_instruction: "\"This pig is ruffling my feathers.\"\r\n\r\nThere - is one extra block that is going to cause the bird to crash. Throw it away - by dragging it back to the toolbox." - grade2_CaringForNewPet_2courseC_maze_programming3_instruction: "There is one - extra block that is going to cause the bird to crash. Throw it away by dragging - it back to the toolbox." - grade2_CaringForNewPet_3_instruction: "\"Trace the path and lead me to the - silly pig. Avoid TNT or feathers will fly!\"" - grade2_CaringForNewPet_3D_instruction: "\"Follow this path to get me to the - pig!\"" - grade2_CaringForNewPet_4_instruction: "\"Keep calm and help me find the bad - pig. Otherwise I might get angry!\"" - grade2_CaringForNewPet_5_instruction: "Get me to the pig!" - grade2_CaringForNewPet_6_instruction: "Challenge: Guide me to the green evilness! - (Watch out for TNT)" - grade2_CaringForNewPet_7D_instruction: "Challenge: This code has a lot of bugs. - You'll need to remove blocks and add blocks." - grade2_collector_10_instruction: "You're almost done! Collect as many pieces - of treasure as you can to finish the stage!" - grade2_collector_2_instruction: "Move Laurel to the gold, then use `collect` - to pick it up." - grade2_collector_3_instruction: "Put these blocks in order to collect all of - the gold and solve the puzzle." - grade2_collector_4_instruction: "Sequence matters! The blocks you need are - already in the workspace, but not connected. Order these blocks to solve - the puzzle." - grade2_collector_5_instruction: "These blocks are in the wrong order. Can you - fix them?" - grade2_collector_6_instruction: "Reorder the blocks to collect all of the treasure." - grade2_collector_7_instruction: "Challenge puzzle! Use blocks from the toolbox - to collect all of the treasure." - grade2_collector_8_instruction: "\"Keep up the good work! Help me collect all - of the coins.\"" - grade2_collector_9_instruction: "*\"Let's get all of the coins!\"*" - grade2_collector_9a_instruction: "**Challenge:** Grab all of the coins." - grade2_collector_A_instruction: "Help Laurel collect all of the treasure." - grade2_collector_pre1_instruction: "\"Hi, I'm Laurel. Today I'm searching - for treasure at the dog park!\" \r\n\r\nPlay around with the blocks to see - if you can help Laurel collect some gold." - grade2_MakeDogTag_1_instruction: "Drag blocks onto the screen to have the artist - draw over the grey lines in the picture. (Each line is 100 pixels long)" - grade2_MakeDogTag_10_instruction: "Now, draw anything you like!" - grade2_MakeDogTag_2_instruction: "This spaceship needs a window!\r\n\r\nEach - side of the inner square is 100 pixels and all of the angles are 90 degrees." - grade2_MakeDogTag_3_instruction: "\"Oh no! Starla's pet alien just flew away! - Let's help the spacewoman!\"\r\n\r\nFinish Starla's rocket so she can chase - her pet." - grade2_MakeDogTag_4_instruction: "Finish this tag by drawing a rectangle around - the outside.\r\n(The long sides are 200 pixels each and the short sides are - each 100 pixels)" - grade2_MakeDogTag_5_instruction: "\"Now a tag for Belle!\"\r\n\r\nDraw this - diamond with 200 pixel sides." - grade2_MakeDogTag_6_instruction: "Challenge: This tag is a special one! Can - you figure out how to draw the outline?" - grade2_MakeDogTag_7_instruction: "One more tag. This is a triangle for Pi.\r\n(Each - side is 150 pixels)" - grade2_MakeDogTag_8_instruction: "Now let's connect a bunch of V's together - in a loop." - grade2_MakeDogTag_9_instruction: "Rebuild the code from the last puzzle, but - this time, add a left turn of 30 degrees inside the loop. Now, repeat it 24 - times instead of 8." - grade2_MakeDogTag_BFP_instruction: "\"Hi, I'm an artist. You can write code - to make me draw almost anything.\"\r\n\r\nPlay with the blocks in the toolbox - to see what they do!" - grade2_MakeDogTag_FP_instruction: "Freeplay: What shape will you make the tag - for your pet?" - grade2_maze_debuggingFP_instruction: "\"Now, help me sneak up on the pig any - way you want to!\"" - grade2_maze_debuggingPre_instruction: "Play with these blocks to see what they - make the bird do!" - grade2_maze_intro10_instruction: "Solve this puzzle." - grade2_maze_intro2_instruction: "Welcome to Code Studio! Here you will learn - to use blocks to build programs. Press `Run` to run a program now!" - grade2_maze_intro3_instruction: "The `workspace` is where you will create all - of your programs. Can you guess what this program does? Press the “Run” button - to find out." - grade2_maze_intro4_instruction: "Drag a block from the toolbox into the workspace. - Connect it to the other blocks." - grade2_maze_intro6_instruction: "That’s it! Now we’re ready to try to solve - a few puzzles. " - grade2_maze_intro7_instruction: "This time, try something a bit more challenging." - grade2_maze_intro8_instruction: "This is a challenge puzzle. It is meant to - be hard and will probably take you a couple of tries to solve. If you don’t - solve it after several tries, don’t worry! It will be in the Play Zone at - the end of the stage and you can try it again when you’ve had more practice." - grade2_maze_intro9_instruction: "Solve this puzzle." - grade2_playlab_project_1_instruction: "Now, write a program to make Waddles - move around using the up / down / left /right keys to hit all of the targets!" - grade2_playlab_project_2_instruction: "The `repeat forever` block allows you - to run code over and over forever. Can you attach blocks to move Chomp the - Dino (actor 2) up and down forever?" - grade2_playlab_project_3_instruction: "Can you have Waddles (actor 1) say \"Ouch!\" - and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen you're done, - play the game to make that happen." - grade2_playlab_project_4_instruction: "Can you add a block to score a point - when Waddles runs into Octavia (actor 3)? \r\nPlay the game and move Waddles - with the arrows until you score!" - grade2_playlab_project_5_instruction: "Add blocks to the `when run` event to - change the background and the speed of Waddles.\r\n\r\nPlay the game and move - Waddles with the arrows until you score." - grade2_playlab_project_6_instruction: "Create your own story. When you're - done, click \"Finish\" to share with friends." - grade2_puppy_loops2_instruction: "Can you get to the pig by creating a loop - that uses only one `move forward` block inside of a `repeat`?" - grade2_puppy_loops3_instruction: "\"Get me to the pig!\"\r\n\r\n Solve this - puzzle by creating a loop!" - grade2_puppy_loops4_instruction: "In this puzzle, two `repeat` loops will help - you get to the pig with the fewest number of blocks!" - grade2_puppy_loops5_instruction: "\"Get me to the pig as quickly as possible!\"" - grade2_puppy_loops6_instruction: "\"This pig is ruffling my feathers!\"\r\n\r\nLoops - even work with more than one block inside! Can you loop this sequence?" - grade2_puppy_loops7_instruction: "\"Get me to the pig!\"\r\n\r\nUse what you - learned in other puzzles!" - grade2_PuppyLoops_1_instruction: "Can you get me to the pig using 5 of the - same kind of blocks?" - grade2_PuppyLoops_10_instruction: "My teacher says that I should finish what - I start!\r\n\r\nHelp me finish my pinwheel. Can you figure out what's wrong?" - grade2_PuppyLoops_2_instruction: "Can you get to the pig by creating a loop - that uses only one `move forward` block inside of a `repeat`?" - grade2_PuppyLoops_3_instruction: "Get me to the pig! Solve this puzzle by creating - a loop!" - grade2_PuppyLoops_4_instruction: "In this puzzle, two `repeat` loops will help - you get to the pig with the fewest number of blocks!" - grade2_PuppyLoops_5_instruction: "Can you figure out the fastest way to get - me to the pig?" - grade2_PuppyLoops_6_instruction: "Loops even work with more than one block - inside! Can you loop this sequence to get me to the pig?" - grade2_PuppyLoops_7_instruction: "Use what you learned to get me to the sunflower!" - grade2_PuppyLoops_8_instruction: "This code for the cat's whiskers is wrong. - \r\n\r\nFix this code to draw whiskers that are all the same length." - grade2_PuppyLoops_9_instruction: "Looks like the C in code is drawn backwards!\r\n\r\nCan - you make it look like a C again?" - grade3_AboutMyRobot_1_instruction: "Make your robot say \"Hello!\" when the - button is clicked." - grade3_AboutMyRobot_2_instruction: "Edit the code so that when the second bird - is clicked, your program plays a sound!" - grade3_AboutMyRobot_3_instruction: "When the third bird is clicked, the background - should change to a city. Can you add code to make this happen?" - grade3_AboutMyRobot_4_instruction: "Add code to make something happen when - the fourth bird is clicked. Be creative!" - grade3_AboutMyRobot_5_instruction: "About My Robot Project! Write code so that - clicking on each bird shows a new fact about your robot." - grade3_AboutMyRobot_TeacherIDo_instruction: "Run this puzzle and click on the - robot to see what happens!" - grade3_bee_conditionals_new1a_instruction: "Help the bee collect all of the - nectar. \r\n\r\nYou can only collect nectar from flowers, but you can check - any space to see if there is a flower." - grade3_bee_conditionals_new1b_instruction: "Help the bee collect all of the - nectar. You can only collect nectar from flowers, but you can check any space - to see if there is a flower." - grade3_bee_conditionals_new2_instruction: "Collect all of the nectar using - as few blocks as possible" - grade3_bee_conditionals_new2a_instruction: "Get all of the nectar using as - few blocks as possible." - grade3_bee_conditionals_new2b_instruction: "Collect all of the nectar. You - can only collect nectar from flowers, but you can check any space to see if - there is a flower." - grade3_bee_conditionals_new3a_instruction: "Collect all of the nectar or make - all the honey. You can only collect nectar from flowers and make honey from - honeycombs. Check any space to see if there is a flower or honeycomb." - grade3_bee_conditionals_new3b_instruction: "Collect all of the nectar and make - all of the honey." - grade3_bee_conditionals_new3c_instruction: "Help the bee collect all of the - nectar and make all of the honey! Hint: Try using one loop inside of another - loop." - grade3_bee_Conditionals_new4_instruction: "Now try checking all of these flowers - with \"if\" blocks to see if there is any nectar available." - grade3_bee_conditionals_quantum1_instruction: "Check to see if there's a flower - under the cloud. If there's a flower, get nectar." - grade3_bee_conditionals_quantum2_instruction: "Check underneath every cloud - to see if it is hiding a flower before you get nectar. \r\n" - grade3_bee_conditionals_quantum3_instruction: "Some of these clouds might have - honeycombs under them. Be sure to check if a honeycomb is hiding behind each - cloud!" - grade3_bee_conditionals_quantum4_instruction: "Use the `if/else` block to collect - nectar at flowers and make honey at honeycomb." - grade3_bee_conditionals_quantum5_instruction: "Use the `if/else` block to collect - nectar if there is a flower.\r\nOtherwise, make honey (because there is a - honeycomb)." - grade3_Conditionals_1 BAD_instruction: "Use a loop to collect all of the nectar." - grade3_Conditionals_1_instruction: "I'm a hungry bee! \r\nHelp me collect - all of the nectar from the flowers using the fewest number of blocks." - grade3_Conditionals_10 BAD_instruction: "Gather nectar from the rows of flowers! - Use a nested loop." - grade3_Conditionals_10_instruction: "There's a lot happening here!\r\n\r\nUse - what you've learned to collect all of the nectar and then make the honey." - grade3_Conditionals_11 BAD_instruction: "Assessment: Use a `while` loop to - collect all of the nectar from these flowers." - grade3_Conditionals_11_instruction: "Let's put everything together!\r\n\r\nUse - what you've learned to help me collect nectar only from flowers that have - it, using as few blocks as possible. Don't forget to make honey at the end." - grade3_Conditionals_12_instruction: "This stair step pattern should look familiar. \r\n\r\nCan - you collect nectar only from the flowers that have some, using as few blocks - as possible?" - grade3_Conditionals_13_instruction: "Assessment: Collect all of the nectar. - Be careful not to try to collect nectar from a purple flower if it doesn't - have any." - grade3_Conditionals_2_instruction: "Look at all of that nectar!\r\n\r\nHelp - me collect the nectar and make the honey using as few blocks as you can. " - grade3_Conditionals_3_instruction: "Be careful not to collect nectar from a - purple flower if it doesn't have any. \r\nYou must first check if the nectar - is equal to 1 using the `if nectar` block." - grade3_Conditionals_4_instruction: "Check this flower with an \"if\" block - to see if there is any nectar available." - grade3_Conditionals_5_instruction: "Collect nectar from each flower only if - it has any." - grade3_Conditionals_6_instruction: "This field has red and purple flowers. - Red flowers have a known nectar amount, but purple flower nectar is unknown. - Collect all the nectar." - grade3_Conditionals_7_instruction: "Collect all the nectar from each flower." - grade3_Conditionals_8_instruction: "I wonder what's out there!\r\n\r\nHelp - me fly around the yard and collect nectar only from the flowers that have - some. " - grade3_Conditionals_9_instruction: "Help me find all of the nectar using as - few blocks as possible!" - grade3_Conditionals_TeacherIDo_instruction: "Check this flower with an \"if\" - block to see if there is any nectar available." - grade3_ConditionalsElse_1_instruction: "This cloud is blocking my view! Check - to see if there's a flower under the cloud, and only get nectar if there's - a flower. Be careful, it can change!" - grade3_ConditionalsElse_2_instruction: "More clouds! \r\n\r\nCheck underneath - every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade3_ConditionalsElse_3_instruction: "Now I just want to make honey. Some - of these clouds might have honeycombs under them. Be sure to check each cloud!" - grade3_ConditionalsElse_4_instruction: "Sometimes this cloud covers a flower, - and sometimes it covers a honeycomb! Use the if/else block to collect nectar - if it is a flower, else to make honey (because it is a honeycomb)." - grade3_ConditionalsElse_5_instruction: "There will be either a flower or a - honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block to collect - nectar if there is a flower.\r\nOtherwise, make honey (because there is a - honeycomb)." - grade3_ConditionalsElse_6_instruction: "I am not sure how much nectar this - flower has, but I know it has either 1, 2, or 3 nectar. \r\n\r\nCombine the - conditional blocks (`if` and/or `if/else`) to only get as much nectar as the - flower has. \r\n\r\nRemember, the amount of nectar can change each time you - run the puzzle!" - grade3_ConditionalsElse_7_instruction: "These flowers can have 3, 2, or 1 nectar. - \r\n\r\nComplete the `check purple flower` function and use it to collect - all of the nectar at the flowers." - grade3_ConditionalsElse_8_instruction: "Write the function for `check flower - make honey`. \r\n\r\nYour function should check if the purple flower has 3, - 2, or 1 nectar and get all of the nectar. \r\nThen, move forward and make - honey." - grade3_ConditionalsElse_9_instruction: "**Assessment:** This cloud is either - hiding a flower with one nectar or a honeycomb that needs one honey. \r\n\r\nComplete - the `get nectar or make honey` function, then call it to collect the nectar - or honey. \r\n" - grade3_ConditionalsElse_TeacherIDo_instruction: "There will be either a flower - or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block - to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade3_Debugging_1_instruction: "These blocks are really bugging me. Fix the - error(s) to collect all of the nectar." - grade3_Debugging_5_instruction: "That flower looks tasty! \r\n\r\nFix the error(s) - to collect all of the nectar. You can now use both run and step." - grade3_Debugging_6_instruction: "What a sweet challenge!\r\n\r\nFix the error(s) - to collect all of the nectar." - grade3_Debugging_7_instruction: "Fix the error(s) to collect all of the nectar - and make all of the honey." - grade3_Debugging_9_instruction: "\"Bee\" patient with this one!\r\n\r\nYou - will need to fix a couple of things in this program to collect all of the - nectar and make all of the honey." - grade3_Debugging_TeacherIDo_instruction: "These blocks are really bugging me. - Fix the error(s) to collect all of the nectar and make all of the honey." - grade3_Loops_1_instruction: "Can you help me collect the nectar from these - flowers? " - grade3_Loops_10_instruction: "Such a busy bee!\r\n\r\nHelp bee collect all - of the nectar and make all of the honey with the fewest blocks possible." - grade3_Loops_11_instruction: "The shape of this path is different than the - others. \r\n\r\nCan you collect all of the nectar using as few blocks as possible?" - grade3_Loops_12_instruction: "Can you find the quickest way for the bee to - collect all of the nectar and make all of the honey?" - grade3_Loops_2_instruction: "This time, use a loop to gather all of the nectar." - grade3_Loops_3_instruction: "Use a `repeat` loop to collect all of the nectar." - grade3_Loops_4_instruction: "Now use the `repeat` block to collect all of the - nectar and make all of the honey." - grade3_Loops_5_instruction: "What a beautiful field of flowers! Help the - bee visit each one. Can you find a way to do it with fewer than 7 blocks?" - grade3_Loops_6_instruction: "How many times can loops help you in this puzzle? \r\n\r\nLoops - are your friend! Use a few of them to complete this puzzle with the fewest - blocks possible." - grade3_Loops_7_instruction: "Those flowers look tasty!\r\n\r\nCollect nectar - from each of the flowers using the fewest blocks possible." - grade3_Loops_8_instruction: "Collect all the nectar and make all of the honey - using the fewest blocks possible." - grade3_Loops_9_instruction: "Collect nectar from each flower and make honey - at each honeycomb using the fewest blocks possible." - grade3_Loops_TeacherIDo_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." - grade3_maze_Loop1_instruction: "Assessment: Get me to the sunflower using - only 5 blocks! " - grade3_maze_loops1_instruction: "Get the zombie to the sunflower." - grade3_maze_loops2_instruction: "Get the zombie to the sunflower using the - fewest blocks possible! " - grade3_maze_loops2a_instruction: "Get the zombie to the sunflower using the - fewest number of blocks possible." - grade3_maze_loops3_instruction: "Get the zombie to the sunflower using only - the blocks available." - grade3_maze_loops4_instruction: "Get the zombe to the sunflower using the fewest - number of blocks possible!" - grade3_maze_loops5_instruction: "Get me to the sunflower using the fewest blocks - possible!" - grade3_maze_nestedLoops1_instruction: "Can you get me to the pig using 5 of - the same kind of blocks?" - grade3_maze_nestedLoops2_instruction: "Can you get to the pig by creating a - loop that uses only one `move forward` block inside of a `repeat`?" - grade3_maze_nestedLoops3_instruction: "Get me to the pig! You can only use - one move forward block this time" - grade3_maze_nestedLoops4_instruction: "In this puzzle, two `repeat` loops will - help you get to the pig with the fewest number of blocks!" - grade3_playLab_buildGame_1_instruction: "There is a new block in this lesson, - the `random integer` block. It is used to choose a random number. Write a - program where the robot says a random number between 1 and 100!" - grade3_playLab_buildGame_2_instruction: "We have already created a random integer, - \"j\", which is either 1 or 0. Now, we need to use it to decide whether our - card is red or black. Add a second if statement to the code under `when run` - to complete this code." - grade3_playLab_buildGame_3_instruction: "There are 13 different card values - in a deck of cards, so we'll need to have 13 options. Under the empty `when - run` block, add a line that sets the placeholder \"i\" to a random integer - between 1 and 13." - grade3_playLab_buildGame_4_instruction: "In a deck of cards, a card with value - 1 isn't actually called a \"1\", there's a special name. Write an if statement - that checks if the random number is a 1, then tell the computer that the value - of that card is \"Ace\"." - grade3_playLab_buildGame_5_instruction: "We can just call the cards from 2 - to 10 by their numbers, so add an if statement that checks whether the number - generated is within those numbers, then sets the card value to the number - generated." - grade3_playLab_buildGame_6_instruction: "There are three more cards with special - names in the deck. Add to your code so that a card number 11 is called a \"Jack\", - a 12 is a \"Queen\" and a 13 is a \"King\"" - grade3_playLab_buildGame_7_instruction: "You already know what color your card - is, but what suit is it? Add code to the conditional statement \"if card is - Red\" to choose hearts or diamonds." - grade3_playLab_buildGame_8_instruction: "Add the second part of the code to - choose a suit, copying what you made for a Red card." - grade3_playLab_buildGame_final_instruction: "Final stage for playlab conditionals - level (could hide entire function so that students just work with point scoring)" - grade3_playLab_buildGame_final2_instruction: "Here's all of your code to choose - a card - try adding some other fun features!" - grade3_robotFarmer_ConditionalsIntro4_instruction: "Help the farmer remove - this entire pile using a `while` loop." - grade3_robotFarmer_ConditionalsIntro_1_instruction: "*\"Hi, I'm a farmer. - I need your help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove - to the pile of dirt and use the `remove` block to remove it." - grade3_robotFarmer_ConditionalsIntro_10_instruction: "I'm working late, so - it's dark out, and I can't tell how large the piles are. Now I don't have - all the options I used to have on the while block. Move me along the field, - and if there is a pile, remove it" - grade3_robotFarmer_ConditionalsIntro_10a_instruction: "Flatten all of these - piles using as few blocks as possible. " - grade3_robotFarmer_ConditionalsIntro_11_instruction: "It's still dark outside. - Move me along the field. If there is a pile, remove it, and if there is a - hole, fill it in. Hint: use the dropdown menu of options on the \"if\" block." - grade3_robotFarmer_ConditionalsIntro_11a_instruction: "Flatten all of these - piles using as few blocks as possible. " - grade3_robotFarmer_ConditionalsIntro_2_instruction: "Next, move to the hole - and fill it with six shovelfuls of dirt, using the `fill` block." - grade3_robotFarmer_ConditionalsIntro_3_instruction: "*\"Move to the pile of - dirt and tell me how many shovelfuls to remove using as few blocks as possible.\"*" - grade3_robotFarmer_ConditionalsIntro_4_instruction: "*\"I don't know how much - dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using - a `while` loop." - grade3_robotFarmer_ConditionalsIntro_5_instruction: "Help me remove all of - this dirt. " - grade3_robotFarmer_ConditionalsIntro_6_instruction: "Remove all the piles of - dirt, using as few blocks as possible. The new options in the dropdown menu - on the \"while\" block tell me if I'm standing on a pile or a hole." - grade3_robotFarmer_ConditionalsIntro_7_instruction: "Look at all of those holes! Each - one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop - to easily fill them all!" - grade3_robotFarmer_ConditionalsIntro_8_instruction: "Fill in the hole at the - end of each of these paths." - grade3_robotFarmer_ConditionalsIntro_9_instruction: "**Challenge:** Fill all - of these holes using as few blocks as possible. " - grade3_robotFarmer_ConditionalsIntro_TeacherIDo1_instruction: "Help me fill - in all these holes with 5 shovelfuls of dirt. Hint: you can put a \"repeat\" - block inside the \"while\" block." - grade3_robotFarmer_ConditionalsIntro_TeacherIDo2_instruction: "I'm working - late, so it's dark out, and I can't tell how large the piles are. Now I - don't have all the options I used to have on the while block. Move me along - the field, and if there is a pile, remove it" - grade3_RunningFarm_1_instruction: "Use conditionals to make sure that you pick - all of the corn, but don't disturb the stalks where nothing is growing yet." - grade3_RunningFarm_10_instruction: "Collect all of the corn and lettuce, then - pick the pumpkin." - grade3_RunningFarm_11a_instruction: "Collect all of the corn and lettuce, then - pick the pumpkin." - grade3_RunningFarm_2_instruction: "Help the farmer collect both corn and lettuce - from the field." - grade3_RunningFarm_3_instruction: "*\"Corn, lettuce, AND pumpkins! Help me - harvest them all.\"*" - grade3_RunningFarm_4_instruction: "Help the farmer pick all of the lettuce - in each cluster before moving on to the next bunch." - grade3_RunningFarm_5_instruction: "This field has clusters of corn, lettuce, - and pumpkins all growing together. Can you collect them all?" - grade3_RunningFarm_6_instruction: "Can you figure out how to pick the pumpkin? Make - sure to collect all of the corn along the way!" - grade3_RunningFarm_7_instruction: "**Challenge:** Collect all of the corn and - lettuce, then pick the pumpkin." - grade3_RunningFarm_8_instruction: "Have wheat and potatoes planted randomly - at various growth stages. Now we introduce multiple while loops (stacked) - nested inside a loop. The two while loops in the solution represent different - while loops (while there is potato and while there is wheat)" - grade3_RunningFarm_9_instruction: "Add Weeds element. Weeds start out in random - spots in the field and spread more and more rapidly as time goes on.. This - puzzle is the culminating game-like puzzle. Students should have the event - blocks (up, down, left, right, spacebar) available in the toolbox to use if - they want. The entire field should be planted randomly with mostly wheat, - potatoes, and a few weeds." - grade3_RunningFarm_TeacherIDo_instruction: "Teacher I Do: Show students how - they can use loops and conditionals to plant and harvest 2 rows of crops." - grade3_RunningFarm_TeacherIDo2_instruction: "Teacher I Do: Show students how - to use loops to harvest many crops." - grade4_arist_functions_star0_instruction: "Have you drawn something like this - star before? Practice making it one more time by adding a turn and a repeat - block." - grade4_arist_nested_loop_circles1_instruction: "Assessment: Use a nested loop - to complete the design." - grade4_arist_nested_loop_flags1_instruction: "Loop the given code to create - a windmill." - grade4_arist_nested_loop_polygons1_instruction: "Loop this design 10 times. - \r\n\r\nHow much do you have to turn each time you loop?" - grade4_arist_nested_loop_polygons2_instruction: "Loop this shape 6 times. \r\n\r\nHow - much do you have to turn each time you loop? " - grade4_arist_nested_loop_squares1_instruction: "Can you draw these 10 squares - of this sidewalk using a nested loop? Each square is 30 pixels." - grade4_arist_nested_loop_triangles2_instruction: "Now nest this loop inside - another loop to draw 10 triangles. This is called a \"nested\" loop. " - grade4_arist_nested_loop_triangles3_instruction: "Can you draw a hexagon by - looping the triangle code?" - grade4_arist_nested_loop_triangles4_instruction: "Draw the teeth in the alligator's - mouth!" - grade4_arist_nested_loop_triangles5_instruction: "Create a sun by nesting the - starter code in another loop.\r\n\r\nTo get this cool design with a hollow - center, you'll need to jump forward by the length of the triangle before - turning." - grade4_arist_nested_loop_triangles6_instruction: "Can you draw these 36 triangles - using a nested loop?" - grade4_artist_freeplay_instruction: "You are on your own now! Try out any of - the functions you used in this stage or try this new function that will automatically - give your image a beautiful background color! This creation will be saved - to your Projects dashboard so that you can easily edit it any time!" - grade4_artist_functions1_instruction: "Help the zombie draw glasses using squares - with sides of 100 pixels. \r\nThe bridge between the glasses is 75 pixels - long." - grade4_artist_functions2_instruction: "Functions let you define new blocks! - \r\n\r\nWe've moved the blocks needed for drawing a square into a function - called `draw a square`. This time, use the `draw a square` function to create - the glasses. \r\n\r\nThe squares are 75 pixels apart." - grade4_artist_functions2a_instruction: "Create this image using only the blocks - provided." - grade4_artist_functions3a_instruction: "Create this image using only the blocks - provided." - grade4_artist_functions3b_instruction: "This time, use lines of 8 hexagons - with 25 pixel sides." - grade4_artist_functions_challenge_instruction: "Use the suggested functions - to draw four rows of hexagons. Notice how our even numbered rows are shifted - to the right?" - grade4_artist_functions_challenge2_instruction: "Use the suggested functions - to draw four rows of hexagons. Notice how our even numbered rows are shifted - to the right?" - grade4_artist_functions_freeplay_instruction: "You are on your own now! Try - out any of the functions you used in this stage or try this new function that - will automatically give your image a beautiful background color! This creation - will be saved to your Projects dashboard so that you can easily edit it any - time!" - grade4_artist_functions_stars0_instruction: "You can make this drawing by adding - a repeat block." - grade4_artist_functions_stars1_instruction: "Now that you can draw a star, - try drawing four stars!" - grade4_artist_functions_stars2_instruction: "Draw only those three stars to - finish this puzzle." - grade4_artist_functions_stars3_instruction: "That last one is tough if you - only use loops. Let's try drawing the same picture using this new 'function' - that will help to **draw a star**." - grade4_artist_functions_windows0_instruction: "Make this window by drawing - a square, then turning 90 degrees before drawing another, and so on." - grade4_artist_functions_windows1_instruction: "If you can draw one window, - you can draw three! Try using your choice of a nested loop or a function here. - Don't forget the jump block!" - grade4_artist_functions_windows2_instruction: "Try solving this puzzle by creating - `draw a window` and calling it five times. Watch out for the door!\r\n\r\n- - The top windows are 50 pixels away from each other. \r\n- The bottom windows - are 100 pixels below the top set." - grade4_artist_functionsChallenge0_instruction: "**Challenge:** Create as many - functions as you think you need to make this drawing of 50 pixel squares." - grade4_artist_nested_loop_circles1_instruction: "Assessment: Use a nested loop - to complete the design." - grade4_artist_nested_loop_flags1_instruction: "Loop the given code to create - a windmill." - grade4_artist_nested_loop_polygons1_instruction: "Loop this design 10 times. - \r\n\r\nHow much do you have to turn each time you loop?" - grade4_artist_nested_loop_polygons2_instruction: "Hi, I'm the Artist! Let's - create some drawings together! For starters, try repeating this shape 6 times. - \r\n\r\nHow much do you have to turn each time you loop? " - grade4_artist_nested_loop_squares1_instruction: "Can you draw these 10 squares - of this sidewalk using a nested loop? Each square is 30 pixels." - grade4_artist_nested_loop_triangles1_instruction: "Complete the code to draw - these triangles. The first one is done for you. Hint: 3 triangles in a - 360 degree rotation." - grade4_artist_nested_loop_triangles2_instruction: "Let's make a quick adjustment - to get completely different image! \r\nHint: ? × 10 = 360" - grade4_artist_nested_loop_triangles3_instruction: "Can you draw a hexagon by - looping the triangle code?\r\nHint: 6 × ? = 360" - grade4_artist_nested_loop_triangles4_instruction: "Hi! I'm the Artist. Let's - try some different types of drawings together. Can you help me draw the bottom - teeth in the alligator's mouth?" - grade4_artist_nested_loop_triangles5_instruction: "Create a sun by nesting - the starter code in another loop.\r\n\r\nTo get this cool design with a hollow - center, you'll need to jump forward by the length of the triangle before - turning." - grade4_artist_nested_loop_triangles6_instruction: "Can you draw these 36 triangles - using a nested loop?" - grade4_artist_nestedLoops_challenge_instruction: "Click here to see the full - instructions again!\r\n\r\nHere is the code for an interesting shape. What - happens when you repeat it multiple times, turning between each iteration? Notice - that the turns in this shape add up to 420 degrees, which means that when - your artist is done drawing, it will be facing a different direction than - when you started. That new direction is exactly 60 degrees to the right of - where you began." - grade4_artist_nestedLoops_challenge2_instruction: "Now for a challenge! Feel - free to use trial and error. You are not expected to get the image perfect - the first time. Want to see more hints? Click here!" - grade4_artist_parameters_squares1_instruction: "Click \"edit\" to fill in the - function definition of \"draw a square\" and add a parameter. It should take - a length parameter, just like the triangle. This time, draw 3 squares: 25, - 50 and 75 pixels in length, each 100 pixels apart." - grade4_artist_parameters_triangles1_instruction: "Today, we're going to try - out a different, more powerful function editor. See if you can figure out - how to edit the function 'draw a triangle' to find the bugs." - grade4_artist_parameters_triangles2_instruction: "Do you notice anything different - about these function blocks? Click “Run” to see what happens." - grade4_artist_parameters_triangles2b_instruction: "Can you complete this drawing? - The sides of each triangle are 25 pixels larger than the last. The first - triangle has 25 pixel sides." - grade4_artist_parameters_triangles3_instruction: "Can you complete this drawing? - The sides of each triangle are 25 pixels larger than the last. The first - triangle has 25 pixel sides." - grade4_artist_parameters_triangles4_instruction: "The code for this triangle - function is broken. Can you edit the function to fix it, and then make triangles - of length 25, 50, and 75?" - grade4_artist_parameters_trianglesx_instruction: "Can you complete this drawing? - The sides of each triangle are 25 pixels larger than the last. The first - triangle has 25 pixel sides." - grade4_bee_conditionals_nested_loops_instruction: "Collect all of the nectar. - You can only collect nectar from flowers, but you can check any space to see - if there is a flower." - grade4_bee_conditionals_new1_instruction: "Collect all of the nectar. You can - only collect nectar from flowers, but you can check any space to see if there - is a flower." - grade4_bee_conditionals_new1a_instruction: "Help the bee make all of the honey. - You can only make honey at a honeycomb, but you can check any space to see - if there is a honeycomb." - grade4_bee_conditionals_new2_instruction: "Can you help the bee collect the - nectar from the flowers? You can only collect nectar from flowers, but you - can check any space to see if there is a flower." - grade4_bee_conditionals_new2a_instruction: "Make all of the honey. It's actually - more efficient to check each space for a honey comb, even when you know some - are empty." - grade4_bee_conditionals_new3a_instruction: "Collect all of the nectar or make - all the honey. You can only collect nectar from flowers and make honey from - honeycombs. Check any space to see if there is a flower or honeycomb." - grade4_bee_conditionals_new3b_instruction: "Uh oh! The bee is not sure if he - should collect nectar or make honey. Can you help him out?" - grade4_bee_conditionals_new3c_instruction: "Help the bee collect all of the - nectar and make all of the honey! Hint: Try using one loop inside of another - loop." - grade4_bee_conditionals_quantum1_instruction: "This cloud is blocking my view! - Check to see if there's a flower under the cloud, and only get nectar if - there's a flower. Be careful, it can change!" - grade4_bee_conditionals_quantum2_instruction: "More clouds! \r\n\r\nCheck underneath - every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade4_bee_conditionals_quantum3_instruction: "Now I just want to make honey. - Some of these clouds might have honeycombs under them. The way we've been - going about things won't work here. Be sure to check if a honeycomb is hiding - behind each cloud!" - grade4_bee_conditionals_quantum4_instruction: "Sometimes this cloud covers - a flower, and sometimes it covers a honeycomb! Use the if/else block to collect - nectar if it is a flower, else to make honey (because it is a honeycomb)." - grade4_bee_conditionals_quantum5_instruction: "There will be either a flower - or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block - to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade4_bee_functions_instruction: "Have we met before? I'm the farmer! Please - help me remove this pile of dirt and fill this hole." - grade4_bee_functions1_instruction: "Collect all the nectar from each flower." - grade4_bee_functions10_instruction: "Create a function to collect all of the - nectar from each flower." - grade4_bee_functions11_instruction: "Solve this function by creating a function - to turn, move forward and make all of the honey, then return the bee to where - it started and turn back." - grade4_bee_functions2_instruction: "Functions are blocks of code that perform - a task. Use the \"get 2 nectar\" function to collect the nectar from each - flower." - grade4_bee_functions3_instruction: "Build the `get 5` function to use in this - puzzle." - grade4_bee_functions4_instruction: "Use the `move and get nectar` function - to collect all of the nectar." - grade4_bee_functions5_instruction: "This puzzle will be deleted!" - grade4_bee_functions6_instruction: "Now write the function to collect nectar - from the flowers." - grade4_bee_functions7_instruction: "Create a function and call it to collect - nectar at each flower and make honey at each honeycomb." - grade4_bee_functions8_instruction: "Create your own function that goes down - a path, gets nectar, makes honey, and then returns the bee to the top of the - path. Then collect all the nectar and make all the honey!" - grade4_bee_functions9_instruction: "Create a function that collects all of - the nectar from each flower." - grade4_bee_nestedLoops0_instruction: "Use a loop to collect all of the nectar." - grade4_bee_nestedLoops1_instruction: "Collect all of the nectar from each flower." - grade4_bee_nestedLoops2_instruction: "**Challenge:** Figure out how to get - all of the nectar using only the blocks available." - grade4_bee_nestedLoops2a_instruction: "Collect all of the nectar using as - few blocks as possible." - grade4_bee_nestedLoops3_instruction: "Collect all of the nectar by creating - a nested loop." - grade4_bee_nestedLoops4_instruction: "Collect all of the nectar from each flower - and make honey at the honeycomb. " - grade4_bee_nestedLoops_assess_instruction: "**Assessment:** Collect all of - the nectar and make all of the honey using loops.\r\n\r\nHint: There are several - possible solutions!" - grade4_designProcess_vid_instruction: "Prepare to build a project within some - given parameters." - grade4_farmer_functions1_instruction: "*\"Have we met before? I'm the farmer!\"*\r\n\r\nHelp - the farmer get to the pumpkins and pick them." - grade4_farmer_functions2_instruction: "Take the code you just wrote it and - use it to define a new function. Call the function twice to complete the puzzle." - grade4_farmer_functions3_instruction: "Try using a couple of repeat blocks - within your function definition." - grade4_farmer_functions4_instruction: "Swap out your repeat loops for more - versatile while loops." - grade4_farmer_functions5_instruction: "Things are going to start getting trickier, - but don't give up! You can use the same while loops to check both spaces - in each pass." - grade4_farmer_functions6_instruction: "The paths are a different length. You - can use a different type of while loop to keep the pattern going as long as - you need to." - grade4_frozen_freeplay_instruction: "You've officially become a master artist! - Create a winter wonderland." - grade4_frozen_functions0_instruction: "Can you figure out what number to replace - the question marks with to draw a circle?" - grade4_frozen_functions1_instruction: "Use the new “draw a circle” function - to create 10 overlapping circles. Don't forget to jump forward between circles." - grade4_frozen_functions1a_instruction: "Use the new “Create a circle” block - to create 10 overlapping circles. Don't forget to jump forward between circles." - grade4_frozen_functions2_instruction: "Now let's create 20 overlapping circles, - turning 18 degrees between each circle." - grade4_frozen_functions3_instruction: "Here's a ”Create circle” block that - can make circles of different sizes. Can you use this to create a small circle - of size 5 and a larger circle of size 10?" - grade4_frozen_functions4_instruction: "Intricate snow patterns can be created - with very simple shapes. Can you make a pattern by repeating 5 circles of - size 5 and 5 circles of size 10?" - grade4_frozen_nested_loop_diamonds1_instruction: "Let’s use a repeat block - to create a rhombus. Like a square, all sides are equal length, but the angles - are different. This one has 60 degree and 120 degree angles instead of all - 90 degree angles." - grade4_frozen_nested_loop_diamonds2_instruction: "Did you know every snowflake - is a different shape? Let's create a new snowflake by using another “Repeat\" - block to repeat a parallelogram 4 times, turning right by 90 degrees between - each parallelogram." - grade4_frozen_nested_loop_diamonds3_instruction: "Now, let's create a new - snowflake by using the repeat block to repeat a parallelogram 10 times, turning - right by 36 degrees between each one." - grade4_frozen_nested_loop_rectangle1_instruction: "Hi, I’m Anna of Arendelle! - Let’s use a repeat block to create a rectangle. This one is 200 pixels long - and 100 pixels tall. All of the corners are 90 degree angles." - grade4_frozen_square_instruction: "Hi, I’m Anna of Arendelle! Let’s make a - square with the “Repeat” block, which uses fewer blocks. How many times (???) - should the “Repeat” block loop the blocks inside it to make a square?" - grade4_frozen_square_loop1_instruction: "Hi, I’m Anna of Arendelle! Let’s make - a square with the “Repeat” block, which uses fewer blocks. How many times - (???) should the “Repeat” block loop the blocks inside it to make a square?" - grade4_frozen_square_loop2_instruction: "Let's create three squares, turning - after each square. Be sure to turn by 120 degrees before each new square." - grade4_frozen_square_loop3_instruction: "Can you create a snowflake using the - “Repeat” block to make a square 10 times, and the “Turn” block to turn 36 - degrees between each square?" - grade4_playlab_freeplay_instruction: "It's free play time! Have fun with all - the blocks in your tool box. " - grade4_playLab_proj_example1_instruction: "instructions" - grade4_playLab_proj_example1a_instruction: "Take a look at this project. Do - you see how it was made?" - grade4_playLab_proj_example2a_instruction: "Take a look at this project. Do - you see how it was made?" - grade4_playlab_test_instruction: "Use the right arrow to throw pie.\r\n\r\nIn - our game, how should we score points? Add 1 to your \"points\" variable each - time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" - event to trigger an update to your score. You can increment your variable - by setting \"points = points + 1.\" Get your score up to 10 (going one at - a time!) to pass the level." - grade4_playlab_test2_instruction: "Here's a function called `jump` that causes - your main character to jump up 100 pixels. Run the program and use the jump - function to collect all of the flags by moving the dog with the arrow keys." - grade4_prompt_test_instruction: "This is a test play lab level." - grade4_review_artist1_instruction: "Hi, I'm an artist. You can write code - to make me draw almost anything. Use a few blocks to make me draw over the - grey lines in the picture. (Each line is 100 pixels long)" - grade4_review_artist2_instruction: "This house needs a roof! Draw the triangle. Hint: - all three sides are the same length." - grade4_review_artist3_instruction: "The jump block moves the artist without - drawing. Draw the dashed line using both the `jump forward` and `move forward` - blocks. Each line is 50 pixels long." - grade4_review_bee1_instruction: "Now use the `repeat` block to collect all - of the nectar and make all of the honey." - grade4_review_bee2_instruction: "Collect nectar from each flower and make honey - at each honeycomb using the fewest blocks possible." - grade4_review_bee3_instruction: "Such a busy bee!\r\n\r\nHelp bee collect all - of the nectar and make all of the honey with the fewest blocks possible." - grade4_scaffolded_project1_instruction: "It is amazing how much you have learned! - Let's put them together to make a game, step by step." - grade4_scaffolded_project2_instruction: "Now let's get things moving! Use - event handlers and actions to make your hero move.\r\n\r\nWe've added these - blocks to your tool box to help you.\r\n" - grade4_scaffolded_project3_instruction: "Now that your game has a hero, it's - time to start adding other actors and assigning them behaviors. \r\n\r\nAdd - two or more additional actors to your game and make them move. Do you want - to have an actor patrol back and forth? Try using a these new blocks to bring - these other components of your game to life!" - grade4_scaffolded_project4_instruction: "Just getting the actors moving is - a great step, but we need to program some interactions to make this really - feel like a game. A simple way to do this is to add or remove points when - actors collide with projectiles or each other. Find some interesting ways - to change the score in your game." - grade4_scaffolded_project4a_instruction: "Just getting the actors moving is - a great step, but we need to program some interactions to make this really - feel like a game. A simple way to do this is to add or remove points when - actors collide with projectiles or each other. Find some interesting ways - to change the score in your game." - grade4_scaffolded_project5_instruction: "Now spend some time making sure the - game works the way you want. Try including a way to win or lose your game." - grade4_scaffolded_project6_instruction: "You've finished! Now you can play - your game or share it with your friends and classmates!" - grade5_artist_binary1_instruction: "Binary is a way of representing information - using only two options. Here, we're going to use the options \"off\" (represented - by the number 0) and \"on\" (represented by the number 1). \r\n\r\nWe've - provided you with a grid of \"pixels\" that you can walk through and make - designs by turning on only certain squares. Can you have the artist draw - \"01010101\" in binary in the first row?" - grade5_artist_binary10_instruction: "Click here to see hints." - grade5_artist_binary11_instruction: "Free Play: Here's a blank canvas for - you to draw on. Have fun!" - grade5_artist_binary2_instruction: "Here's a function that takes a binary - string of 1's and 0's and instructs the artist to follow them from left - to right, top to bottom. The artist will fill-in the squares when it sees - a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how - the artist uses binary to draw this pattern." - grade5_artist_binary3_instruction: "Which of these binary strings could you - loop 8 times to draw this image?" - grade5_artist_binary4_instruction: "Can you draw this pattern by looping just - three binary digits (0s and 1s)?" - grade5_artist_binary5_instruction: "Each binary string represents one row of - this picture. Can you rearrange them so it draws a smiley face instead of - a frowny face?" - grade5_artist_binary6_instruction: "Which 6 digit binary string, repeated 11 - times, will draw this image?" - grade5_artist_binary7_instruction: "What is the shortest binary string that - you can repeat to draw this image?" - grade5_artist_binary8_instruction: "Finish this drawing." - grade5_artist_binary9_instruction: "Here's a higher resolution canvas to draw - on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we start to get - creative with the bits?" - grade5_artist_for_loops1_instruction: "Use a `for` loop to draw this triangle - that is 50 pixels wide. If you count from 1 to 3 by 1s, you can use this just - like a `repeat` loop." - grade5_artist_for_loops10_instruction: "Can you figure out how to use all of - the things you've learned to create this image?\r\n\r\nNeed a hint? Click - here." - grade5_artist_for_loops1a_instruction: "Try using a `for loop`to create this - triangular design. Don't worry that the numbers are different than the last - puzzle. As long as you turn by the right number of degrees, the artist will - make the correct shape!" - grade5_artist_for_loops1b_instruction: "Experiment with the `for` loop and - play with the `counter` variable." - grade5_artist_for_loops2_instruction: "Use a `repeat` inside of a `for` loop - to create this stack of triangles that goes from 50 pixels to 100 pixels." - grade5_artist_for_loops3_instruction: "These triangles go from 20 pixel sides - to 200 pixel sides, and each triangle is 20 pixels larger than the last. " - grade5_artist_for_loops4_instruction: "These squares start at 15 pixels long, - the largest is 300 pixels long, and each square is 15 pixels larger than the - last. " - grade5_artist_for_loops5_instruction: "Just one little change to the code from - the last image can create this drawing. Can you figure out what that change - is?\r\n\r\nHint: You need to remove something!" - grade5_artist_for_loops6_instruction: "If you turn a little bit more or less - than you normally would for a shape, it creates a neat effect. Try using some - of the code from the last level, but turning 89 degrees to create this twisted - square spiral." - grade5_artist_for_loops7_instruction: "Make three small changes to the code - from the last level to get this!" - grade5_artist_for_loops7a_instruction: "Take the angle down to 72 degrees to - get a spiraled pentagon." - grade5_artist_for_loops7b_instruction: "Use the counter inside the `set alpha` - block to get this faded center.\r\n(This hexagon pattern was made using a - 60 degree turn.)" - grade5_artist_for_loops8_instruction: "Remember back in a previous stage when - we used a variable to control the number of sides in a shape? We are going - to do the same thing with the `counter` variable now. This pattern starts - with a triangle and adds one side at a time until it draws a decagon (10 sides). - Each side should be 100 pixels long. " - grade5_artist_for_loops9_instruction: "Let's put it all together! Using your - knowledge of `for` loops and the `counter` variable, create this drawing where - each shape has two more sides than the last. Make sure that each side is - 10 times as long as the number of sides in the polygon.\r\n\r\nVery little - of the code has been provided for you." - grade5_artist_for_loopsfreeplay11_instruction: "Free-Play Inspiration: You've - now learned everything you need to know to make a pattern like this! If this - picture inspires you, try to make something similar. Otherwise, create something - all your own.\r\n\r\nNeed a hint? Click here." - grade5_artist_for_loopsfreeplay12_instruction: "Free Play: Try using the `counter` - variable with other drawing elements to make magical images like this one." - grade5_artist_freeplay_instruction: "Create your own project! This creation - will be saved to your Projects dashboard so that you can easily edit it any - time!" - grade5_artist_functionparameters10_instruction: "Free Play Inspiration: You've - now learned everything you need to know to make a pattern like this! If this - picture inspires you, try to make something similar. Otherwise, create something - all your own.\r\n \r\nWant to know how our inspiration pattern was made? " - grade5_artist_functionparameters11_instruction: "Freeplay: Below there are - functions you've written, and more for you to play with. Draw something awesome! - Play with the pen width to see how different your drawings look!" - grade5_artist_functionparameters7_instruction: "This image is similar to the - last. Can you use a `for` loop with your function to make this design?" - grade5_artist_functionparameters8_instruction: "The triangle has 21 pixel sides, - and the sides in each following shape are 7 pixels longer than the last. Use - the `multiplication` block to make this all happen with just one function - call. Be sure to jump 100 pixels between polygons." - grade5_artist_functionparameters9_instruction: "Challenge: Edit `draw a spiral - edge` to use `length` and `sides` parameters, then recreate these shapes." - grade5_artist_functionparameters9a_instruction: "Finish off the `draw a spiral - edge` function to also ask for a minimum length for the center of the spiral." - grade5_artist_functionparameters9b_instruction: "Can you figure out how to - make this drawing using the function that you just created?" - grade5_artist_functionparameters_6_instruction: "Edit this function to add - a parameter for the number of sides in your polygon.\r\n\r\nThe sides of all - the shapes are 100 pixels long." - grade5_artist_parameters_squares1_instruction: "Click \"edit\" to fill in the - function definition of \"draw a square\" and add a parameter. It should take - a length parameter, just like the triangle. This time, draw 3 squares: 25, - 50 and 75 pixels in length, each 100 pixels apart." - grade5_artist_parameters_squares1a_instruction: "This program looks okay from - here, but something isn't working right. See if you can figure out how to - edit the function 'draw a square' to find the bug." - grade5_artist_parameters_squares2_instruction: "Create a function called 'draw - a square' and use it to outline these four boxes. Make sure to add a parameter - for 'length'! Starting from the upper right, the box widths are 50, 100, - 150, and 200." - grade5_artist_parameters_squares2a_instruction: "Edit the function to accept - a parameter called `length`." - grade5_artist_parameters_stars1_instruction: "That last one is tough if you - only use loops. Let's try drawing the same picture using this new 'function' - that will help to **draw a star**." - grade5_artist_parameters_triangles1_instruction: "This program looks okay from - here, but something isn't working right. See if you can figure out how to - edit the function 'draw a square' to find the bug." - grade5_artist_parameters_triangles1a_instruction: "Today, we're going to try - out a different, more powerful function editor. See if you can figure out - how to edit the function 'draw a triangle' to find the bugs." - grade5_artist_parameters_triangles1aa_instruction: "Click \"edit\" to fill - in the function definition of \"draw a triangle\" and add a parameter. It - should take a length parameter, just like the triangle. This time, draw 3 - triangles: 25, 50 and 75 pixels in length, each 100 pixels apart." - grade5_artist_parameters_triangles2_instruction: "This drawing can be easily - created using a new type of function that includes a parameter. The sides - of each triangle are 25 pixels larger than the last. The first triangle has - 25 pixel sides. Replace the '???' with the correct values to draw the picture." - grade5_artist_parameters_triangles2a_instruction: "Do you notice anything different - about these function blocks? Click “Run” to see what happens." - grade5_artist_parameters_triangles3_instruction: "The code for this triangle - function is broken.\r\n\r\nCan you edit the function to fix it, and then make - triangles of length 150, 75, 25?" - grade5_artist_parameters_triangles4_instruction: "The code for this triangle - function is broken. Can you edit the function to fix it, and then make triangles - of length 25, 50, and 75?" - grade5_artist_parameters_trianglesy_instruction: "The code for this triangle - function is broken.\r\n\r\nCan you edit the function to fix it, and then make - triangles of length 150, 75, 25?" - grade5_artist_variables_freeplay10_instruction: "Free Play: Experiment with - the number of sides this shape has. Can you change the algorithm so that the - overall size of the shape stays the same, no matter how many sides it has? - Hint: If you divide your starting length by the number of sides, the length - of each side will get shorter as the number of sides gets higher." - grade5_artist_variables_freeplay14_instruction: "Free Play: Check it out! Now - your algorithm is nested within one more loop. Experiment with changing the - values of your two variables to draw cool patterns.\r\n\r\nFor even more effect, - try playing with color! Use random colors inside loops to see how it changes - your design." - grade5_artist_variables_freeplay15_instruction: "Want a second peek at the - inspiration design or the hints? Click here!\r\n\r\nOtherwise, make a design - all your own!" - grade5_artist_variables_freeplay16_instruction: "Still playing? Here is a - blank canvas where you can create whatever you want!" - grade5_artist_variables_hexagons1_instruction: "Let's try it again! \r\n\r\nCan - you set the `length` variable to 60 to make this cool design with hexagons?" - grade5_artist_variables_letterT11_instruction: "Here’s more complicated code - using the same concepts from the last puzzle - what should you set the \"sides\" - variable to in order to draw this picture made of squares?" - grade5_artist_variables_new1_instruction: "Here is a program that will create - an image. There are a few things that are wrong with it." - grade5_artist_variables_octagons13_instruction: "When a shape has lots of sides, - each side needs to be shorter if you want the whole pattern to fit on the - screen. \r\nLet's recreate the algorithm for this amazing pattern, but instead - of manually setting the `length` variable, let's use a math block with the - `sides` variable inside to make sure that each shape fits correctly. The perimeter - of each polygon is 300 pixels.\r\nNeed some hints? Click here." - grade5_artist_variables_pentagon8_instruction: "Use what you learned in the - last puzzle to create this hexagon using the \"sides\" variable.\r\n\r\nSee - how you could change just one value to draw a triangle, square, pentagon, - or octagon?" - grade5_artist_variables_pentagon9_instruction: "Now, recreate the algorithm - from the last level and create a pentagon with sides of length 150." - grade5_artist_variables_pentagons1_instruction: "Draw this pattern of pentagons - with 100 pixel sides by setting the right value for `length` and dropping - the `length` variable into all of the the correct places. \r\n\r\nSee how - you only have to set the value for `length` once, and the code uses the right - value everywhere?" - grade5_artist_variables_pentagons12_instruction: "Let's set the \"sides\" - variable to 5. The more sides we add to this algorithm, the bigger this whole - pattern gets! Notice that there is another variable called \"length\". We - can now use that wherever we have a \"move forward.\" Set the \"length\" variable - to 75 for this shape." - grade5_artist_variables_rectangle6_instruction: "Now I want to make a rectangle - that is twice as tall as it is wide. We've got a variable called \"width\" - that needs to be set to 100. Can you use the math blocks to complete the code?" - grade5_artist_variables_square7_instruction: "Here’s some code that can draw - any regular polygon. There’s a new variable called sides that is set to 4. - Can you use the sides variable (along with the math block) to turn the right - amount regardless of how many sides there are in the polygon?\r\n\r\nClick - here to go back to the hint!" - grade5_artist_variables_triangles2_instruction: "Instead of using \"move forward - by 150,\" the \"move\" block is now referencing a variable called \"length.\" - Can you set \"length\" to 150 to draw this new triangle?" - grade5_artist_variables_triangles3_instruction: "Drag a number block to both - the `set length` block and the `repeat _ times` block to draw a set of 50 - pixel triangles. " - grade5_bee_for_loops1_instruction: "Use a loop to collect the nectar from each - flower." - grade5_bee_for_loops10_instruction: "What should your increment be to collect - 15, then 12, then 9, 6, 3 nectar?" - grade5_bee_for_loops11_instruction: "**Challenge:** Take what you've learned - about `for` loops and try to solve this problem. " - grade5_bee_for_loops2_instruction: "Add the code necessary to make sure the - bee collects all the nectar. Look at how much code you need for this puzzle! - (We'll learn a simpler way in the next puzzle.)" - grade5_bee_for_loops3_instruction: "Try this puzzle using the `for` loop with - `counter` variable and see how much shorter your code becomes." - grade5_bee_for_loops4_instruction: "Help the bee collect all of the nectar." - grade5_bee_for_loops6_instruction: "You can also use a \"for loop\" to count + CSD Hackathon Pt 1_instruction: "(Click to see full instructions)" + CSD Hackathon Pt 2_instruction: "(Click to see full instructions)" + CSD Hackathon Week 1_instruction: "(Click to see full instructions)" + CSD Hackathon Week 2_instruction: "(Click to see full instructions)" + CSD U3 Background Discuss_instruction: "Here's a program that looks pretty + similar to what you've been writing, but may behave quite differently. You'll + want to stop and discuss with the class before moving on." + CSD U3 Background Experiment_instruction: "Here's a program that looks pretty + similar to what you've been writing, but may behave quite differently. You'll + want to stop and discuss with the class before moving on." + CSD U3 Boolean Modify_instruction: "Modify the code so that all of the console.log + commands print true" + CSD U3 Boolean Predict_instruction: "What do you think this code will do when + it is run? Predict what each console.log() command will print, then run the + program to check your predictions." + CSD U3 Draw Loop Discuss_instruction: "Here's a program that looks pretty + similar to what you've been writing, but may behave quite differently. You'll + want to stop and discuss with the class before moving on." + CSD U3 Draw Loop Experiment_instruction: "Try using some of the other shape + functions you've learned in the draw loop. What happens when you use randomNumber() + to generate some of the inputs?You'll want to stop and discuss with the class + before moving on." + CSD U3 Expressions calculator_instruction: "Add the numbers 1 through 10. Multiply + the numbers 1 through 10. Check your answers with a neighbor." + CSD U3 Frame Rate_instruction: "Slow down Gamelab Gary's animation with frameRate()" + CSD U3 Keypress Boolean_instruction: "Modify the code so that all of the console.log + commands print true" + CSD U3 Keypress Watchers_instruction: "Modify the code so that all of the console.log + commands print true" + CSD U3 Random Animation_instruction: "Use randomNumber() to animate Gary's + mouth." + CSD U3 Random Choice_instruction: "Use the randomNumber() block to generate + either 0 or 1" + CSD U3 Random Color_instruction: "Could you use randomNumber() to pick random + colors as well? Try setting one or more of the channels in the rgb block with + a random number. What should the maximum value be?" + CSD U3 Random Intro_instruction: "What do you think this code will do when + it is run? Make a prediction, then run this code 5 - 10 times, recording the + output each time. Share your results with your neighbor." + CSD U3 Random Min Max_instruction: "Using console.log() write a program that + randomly returns a number in a range you define." + CSD U3 Random Width Height_instruction: "Pick a shape block and use calls to + randomNumber() in place of one or more of the parameters. Maker sure you run + it a few times so you can see the effect of randomization." + CSD U3 Simple Drawing - Animation 2_instruction: "Use randomNumber() on the + x position and width of your cloud ellipses to introduce a bit of animation." + CSD U3 Simple Drawing - Animation_instruction: "Use randomNumber() on the x + position and width of your cloud ellipses to introduce a bit of animation." + CSD U3 Simple Drawing - Background_instruction: "Put all of your code into + a draw() loop and then add set the background to blue with the background() + block." + CSD U3 Simple Drawing - Personal Animation_instruction: "DO This" + CSD U3 Sprites intro sprites_instruction: "Do This" + CSD U3 Variable Arithmetic pt2_instruction: "Predict: What two numbers will + be displayed in the console?" + CSD U3 Variable Arithmetic_instruction: "Change the value \"size\" initialized + to make a larger square." + CSD U3 Variable Incrementation pt2_instruction: "Predict: What two numbers + will be displayed in the console?" + CSD U3 Variable Incrementation_instruction: "Predict: What two numbers will + be displayed in the console?" + CSD U3 Variables CHALLENGE gamelab gary_instruction: "Use variables to animate + Game Lab Gary" + CSD U3 Variables Initialize_instruction: "Predict: What will get displayed + in the console?" + CSD U3 Variables Intro_instruction: "Create your own variable " + CSD U3 Variables Random_instruction: "Predict: What will get displayed in the + console?" + CSD U3 Variables Reassign pt2_instruction: "Create and assign a new variable + in a single line." + CSD U3 Variables Reassign_instruction: "Predict: What will get displayed in + the console?" + CSD U3 Variables Square Random Loop_instruction: "Test your predictions from + the last level." + CSD U3 Variables Square Random_instruction: "Change the value \"size\" initialized + to make a larger square." + CSD U3 Variables Square_instruction: "Change the value \"size\" initialized + to make a larger square." + CSD U3 Variables TEMPLATE square_instruction: "Change the value of petalSize + multiple times. How does it change your drawing?" + CSD U3 Variables create and assign_instruction: "Create and assign size in + a single line of code." + CSD U3 Variables draw loop newVars_instruction: "Extend this project to create + your own random art visualization with variables." + CSD U3 Variables draw loop rgb_instruction: "Assign the variables x1 and y1 + random values inside the draw loop and use them to control where the square + is drawn." + CSD U3 Variables draw loop xy_instruction: "Assign the variables x1 and y1 + random values inside the draw loop and use them to control where the square + is drawn." + CSD U3 Variables eyeBrows_instruction: "Predict what will happen when you move + the assignment of eyeSize inside the draw loop. Then try it out" + CSD U3 Variables make a big square_instruction: "Change the value of size multiple + times. How does it change your drawing?" + CSD U3 Variables make a square_instruction: "Change the value of size multiple + times. How does it change your drawing?" + CSD U3 Variables multiple assignments_instruction: "Change the value of petalSize + multiple times. How does it change your drawing?" + CSD U3 Variables naming rules_instruction: "Change the value of petalSize multiple + times. How does it change your drawing?" + CSD U3 Variables random assignment_instruction: "Change the value of petalSize + multiple times. How does it change your drawing?" + CSD U3 Variables random draw loop_instruction: "Predict what will happen when + you move the assignment of eyeSize inside the draw loop. Then try it out" + CSD U3 Variables random drawing exemplar_instruction: "Check out this example + randomized drawing." + CSD U3 Variables use value rect_instruction: "Predict: What will get displayed + in the console?" + CSD U3 Variables write_instruction: "Use the write block to display the value + of size" + CSD U3 Variables2 expressions in commands_instruction: "Use expressions inside + a drawing command" + CSD U3 Variables2 expressions in variables_instruction: "Assign the value of + each expression to a variable and console.log that variable." + CSD U3 Variables2 expressions_instruction: "Use console.log to display the + results of each expression. Then create your own." + CSD U4 - Events Template_instruction: "Add a large red button to your screen + using Design Mode. (Click for full instructions.)" + CSDU4 - AppLab - 1_instruction: "Read the documentation for penColor() and + penWidth() before using them to draw the blue square." + CSDU4 - AppLab - 2_instruction: "Write a program that acts as a simple calculator. + (click to see full instructions)" + CSDU4 - AppLab - 3_instruction: "Use console to check the ending value of num. + (Click to see full instructions)" + CSDU4 - AppLab - 4_instruction: " Use the Debug Commands to make a list of + all the values rolled before a 6. (Click to see full instructions)" + CSDU4 - Design Mode - 1_instruction: "Add a button that moves the turtle when + clicked. (Click to see full instructions)" + CSDU4 - Design Mode - 10_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + CSDU4 - Design Mode - 11_instruction: "Experiment with different event types + and select the one that you think is best. (Click to see full instructions)" + CSDU4 - Design Mode - 12_instruction: "Use the textLabel command to replace + the button in your program with a text label. (Click to see full instructions)" + CSDU4 - Design Mode - 16_instruction: "Add an event handler for the button + using the \"Insert and show\" link in the Design Mode Events tab. (Click to + see full instructions)." + CSDU4 - Design Mode - 17_instruction: "Update the ID names and `console.log` + messages to match the correct button. (Click to see full instructions.)" + CSDU4 - Design Mode - 18_instruction: "Fix the layout of the bullseye game. + (Click to see full instructions)" + CSDU4 - Design Mode - 2_instruction: "Run a program with two buttons that have + the same id to see the warning message in the console. Change the ids to make + the program run without getting a warning message." + CSDU4 - Design Mode - 24_instruction: "Add an Text Input box for the name and + age. (Click to see full instructions)" + CSDU4 - Design Mode - 25_instruction: "Add an event handler to the Submit button + so that when the button is clicked it will display the name entered in the + text box to the console. Use getText to get the value out of the text box. + (Click to see full instructions)" + CSDU4 - Design Mode - 26_instruction: "Save the age and name of the user in + variables (Click to see full instructions)" + CSDU4 - Design Mode - 27_instruction: "Output a message to the 'textArea' + (Click to see full instructions)" + CSDU4 - Design Mode - 28_instruction: "Write a greeting to the user when they + hit 'enter' in the text input, using the 'change' event. (Click to see + full instructions)" + CSDU4 - Design Mode - 29_instruction: "Add a dropdown for their guess instead + of promptNum (Click to see full instructions)" + CSDU4 - Design Mode - 30_instruction: "Show different die images for the random + number generated. (Click to see full instructions)" + CSDU4 - Design Mode - 31_instruction: "Set up an event handler to respond to + keypress events, and display event.key in the console. Hit keys on the keyboard + to see what happens. (Click to see full instructions)" + CSDU4 - Design Mode - 32_instruction: "Try out the keyup and keydown events + to see how they are different from keypress. (Click to see full instructions)" + CSDU4 - Design Mode - 33_instruction: "Change the code so the sound will only + play when the up arrow is pressed. (Click to see full instructions)" + CSDU4 - Design Mode - 4_instruction: "Improve the button by choosing a descriptive + and meaningful ID. (Click to see full instructions)" + CSDU4 - Design Mode - 5_instruction: "Debug the program by verifying your IDs + are being referenced properly. (Click to see full instructions)" + CSDU4 - Design Mode - 6_instruction: "Debug the program by properly ordering + your button commands and event handlers. (Click to see full instructions)" + CSDU4 - Design Mode - 7_instruction: "Debug the program by fixing the logical + error within the program. (Click to see full instructions)" + CSDU4 - Design Mode - 8_instruction: "Move the button to the middle of the + screen. (Click to see full instructions)" + CSDU4 nameAgeTemplate_instruction: "Add an Text Input box for the name and + age. (Click to see full instructions)" + CSDU6 - Arrays - expressionsAsIndexes_instruction: "Write a program that displays + a randomly chosen color from the array. (Click to see full instructions)" + CSDU6 - Arrays - indexPractice_instruction: "Write the contents of the array + to the screen in numerical order. (Click to see full instructions)" + CSDU6 - Arrays - length_instruction: "Use list.length to determine the length + of each array. (Click to see full instructions)" + CSDU6 - Arrays - lengthMinus1_instruction: "Use list.length - 1 to log the + last item in the array to the console. (Click to see full instructions)" + CSDU6 - for loop - color buttons with for_instruction: "Write the contents + of the array to the screen in numerical order. (Click to see full instructions)" + CSDU6 - for loop - color buttons_instruction: "Write the contents of the array + to the screen in numerical order. (Click to see full instructions)" + CSDU6 - for loop - why for_instruction: "Write the contents of the array to + the screen in numerical order. (Click to see full instructions)" + CSP Data Unit - Counting Multiple Things_instruction: "If you can count one + thing you can count multiple things\r\n\r\nFind out how many people like something + other than dogs and cats\r\n\r\nCount dogs\r\nCount cats\r\nCount total\r\nDo + the math\r\n\r\nblank/ blank toal\r\n\r\nCan also use this to find percents + from this\r\n\r\nx% are dog lovers" + CSP Data Unit -Counting Records - Easy Way_instruction: "ReadRecords with specific + criteria \r\nfind the length of an array\r\n" + CSP Data Unit -Counting Records - Hard Way_instruction: "\r\n1. ReadRecords + for all records\r\n2. Way to loop through and count\r\n" + CSP U4 - JSON Object Intro - Bad Way_instruction: "Trigger both the keyboard + and mouse event and examine the event objects displayed in the console. Why + might an object be the best way to store this information? (Click to see full + instructions)" + CSP U4 - JSON Object Intro - Good Way_instruction: "Create an object with at + least 5 values including at least one string and one number. (Click to see + full instructions) " + CSP U4 - Objects - createObject_instruction: "Create an object with at least + 5 values including at least one string and one number. (Click to see full + instructions) " + CSPU5 Add Screens to Chaser Game_instruction: "Recreate the game from the \"Chaser + Game\" with a Welcome Screen and Game Over Screen. (Click to see full instructions.)" + CSPU5 Add a 2nd Screen_instruction: "Make a 2 screen app with a black screen + and a white screen. (Click to see detailed instructions)" + CSPU5 Add full screen image to bg of chaser game_instruction: "Recreate the + game from the \"Chaser Game\" with a Welcome Screen and Game Over Screen. + (Click to see full instructions.)" + CSPU5 Add game over screen_instruction: "Recreate the game from the \"Chaser + Game\" with a Welcome Screen and Game Over Screen. (Click to see full instructions.)" + CSPU5 Add onEvent from Design Mode_instruction: "Add an event handler for the + button using the \"Insert and show\" link in the Design Mode Events tab. (Click + to see full instructions)." + CSPU5 Add welcome screen to chaser game_instruction: "Recreate the game from + the \"Chaser Game\" with a Welcome Screen and Game Over Screen. (Click to + see full instructions.)" + CSPU5 Adding Screens Template_instruction: "Make a 2 screen app with a black + screen and a white screen. (Click to see detailed instructions)" + CSPU5 Debugging Overlapping Objects and Screen Events_instruction: "Recreate + the \"Chaser Game\" from the last lesson using Design Mode. (Click to see + full instructions.)" + CSPU5 First Time Console.log_instruction: "Add a 3 console.log messages and + test them out. (Click to see full instructions.)" + CSPU5 Layering and Deleting in Design Mode_instruction: "Fix the layout of + the bullseye game. (Click to see full instructions)" + CSPU5 Project - Multi Screen App_instruction: "Create your multi-screen app. + (Click to see full instructions.)" + CSPU5 Use Console.log to update IDs_instruction: "Update the ID names and `console.log` + messages to match the correct button. (Click to see full instructions.)" + CSPU5 Use setScreen for first time_instruction: "Make a 2 screen app which + can switch back and forth between a black screen and a white screen using + buttons. (Click to see detailed instructions.)" + CSPU5_AddImageToChaserGame_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + CSPU5_AddImage_andMakeChaserGame_instruction: "Introducing the setPosition + command! Replace the moveTo in the button-click event handler to use setPosition + to move the button itself to a random location when it's clicked." + CSPU5_AddLabelToChaserGame_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + CSPU5_Debugging predict unexpected behavior - two onEvents to one ID_instruction: "Predict + what will happen. Once you've made a prediction, run the code to see what + happens. (Click to see full instructions)" + CSPU5_FinalizeChaserGame_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + CSPU5_Project - Multi Screen App_instruction: "Create your multi-screen app. + (Click to see full instructions.)" + CSPU5_U3 - Arrays - Demo App_instruction: "Use the \"My Favorite Things\" app. + How might this app be making use of an array? (Click to see full instructions)" + CSPU5_U3 - Arrays - appendItem_instruction: "Create an array of odd numbers + 1-11 by using appendItem. (Click to see full instructions)" + CSPU5_U3 - Arrays - assignment_instruction: "Use indexes to change the values + in this array from 1 to 0. (Click to see full instructions)" + CSPU5_U3 - Arrays - assignment2_instruction: "Calculate the sum of three values + stored in an array. (Click to see full instructions)" + CSPU5_U3 - Arrays - assignment3_instruction: "Increase the value of each value + in the randomly generated array by 1. (Click to see full instructions)" + CSPU5_U3 - Arrays - createFirstArray_instruction: "Create an array of the even + numbers from 0 to 10 and display its contents with console.log. (Click to + see full instructions)" + CSPU5_U3 - Arrays - expressionsAsIndexes_instruction: "Write a program that + displays a randomly chosen color from the array. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings Counting Variable_instruction: "Create a global + variable for the current index and use it to display the first item in the + array. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings Next_instruction: "Write code that allows the + user to move forward through your list by clicking the \"Next\" button. (Click + to see full instructions)" + CSPU5_U3 - Arrays - favThings Prev_instruction: "Write code that allows the + user to move backward through your list by clicking the \"Last\" button. (Click + to see full instructions)" + CSPU5_U3 - Arrays - favThings addItem_instruction: "Write code that allows + a user to add their own favorite things to the list. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings bounds_instruction: "Add if statements to your + event handlers that prevent the global index from going out of bounds. (Click + to see full instructions)" + CSPU5_U3 - Arrays - favThings createArray_instruction: "Create an array of + words describing your favorite things. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings firstOutput_instruction: "Use setText to display + the first item in the array. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings giveIDs_instruction: "Give your UI elements descriptive + and meaningful IDs. (Click to see full instructions)" + CSPU5_U3 - Arrays - favThings keepPlaying_instruction: "Make any other improvements + you want! (Click to see full instructions)" + CSPU5_U3 - Arrays - indexPractice_instruction: "Write the contents of the array + to the screen in numerical order. (Click to see full instructions)" + CSPU5_U3 - Arrays - insertingItems_instruction: "Insert items into an array + to form a complete sentence. (Click to see full instructions)" + CSPU5_U3 - Arrays - insertionErrors_instruction: "Run each command that references + indexes that are out of bounds and observe the results. (Click to see full + instructions)" + CSPU5_U3 - Arrays - introIndex_instruction: "Display the first and last element + in the array. Display the number 5 from the array. (Click to see full instructions)" + CSPU5_U3 - Arrays - length_instruction: "Use list.length to determine the length + of each array. (Click to see full instructions)" + CSPU5_U3 - Arrays - lengthMinus1_instruction: "Use list.length - 1 to log the + last item in the array to the console. (Click to see full instructions)" + CSPU5_U3 - Arrays - remove_instruction: "Remove items from an array to form + a complete sentence. (Click to see full instructions)" + CSPU5_U3 - Arrays - stringsInArrays_instruction: "Write a sentence word by + word by adding strings to an array. (Click to see full instructions)" + CSPU5_U3 - Canvas - 200dots_instruction: "Add a loop to your program that draws + 200 dots on your canvas. (Click to see full instructions)" + CSPU5_U3 - Canvas - One Dot sprayPaint_instruction: "Write code that redraws + your image using a dot whose x and y locations use offsetX and offsetY with + a small random value added. (Click to see full instructions)" + CSPU5_U3 - Canvas - appendToArray_instruction: "Create an array to store each + event parameter. Append each event parameter to this array within your event + handler. (Click to see full instructions)" + CSPU5_U3 - Canvas - changeToMouseMove_instruction: "Change your program so + that dots are drawn at the location of the mouse as the user moves the mouse + on the canvas. (Click to see full instructions)" + CSPU5_U3 - Canvas - clickToAdd_instruction: "Change your program so that dots + are added to the canvas when the user clicks on it. (Click to see full instructions)" + CSPU5_U3 - Canvas - delete_instruction: "Create a button that deletes the drawing + by clearing the canvas and removing all stored values. (Click to see full + instructions)" + CSPU5_U3 - Canvas - draw at click point_instruction: "Change your program so + that dots are drawn at the location of the mouse click. (Click to see full + instructions)" + CSPU5_U3 - Canvas - freePlay_instruction: "Extend the functionality of one + of the effects, or create an entirely new one of your own. (Click to see full + instructions)" + CSPU5_U3 - Canvas - introCanvas_instruction: "Add a canvas to your app and + set it to be the active canvas. Then add a large dot to your canvas. (Click + to see full instructions)" + CSPU5_U3 - Canvas - movementFunction fix Orig_instruction: "Modify the \"Original\" + button event handler so that it takes the movement of the mouse into account. + (Click to see full instructions)" + CSPU5_U3 - Canvas - movementFunction_instruction: "Write a function that takes + the movement of the mouse as input and generates a line width as output. (Click + to see full instructions)" + CSPU5_U3 - Canvas - redrawOriginal_instruction: "Write a function that processes + your array, redrawing the dots as they originally appeared. (Click to see + full instructions)" + CSPU5_U3 - Canvas - redrawRandom_instruction: "Set up a button and event handler + for the random function. (Click to see full instructions)" + CSPU5_U3 - Canvas - redrawRandom2_instruction: "Write a function that processes + your array, redrawing every dot with a random size. (Click to see full instructions)" + CSPU5_U3 - Canvas - shiftKey_instruction: "Add an if statement to your event + handler so dots are only drawn when the shift key is pressed. (Click to see + full instructions)" + CSPU5_U3 - Canvas - sketch_instruction: "Write code that redraws your image + using a sketch effect. (Click to see full instructions)" + CSPU5_U3 - Canvas - sprayPaint_instruction: "Update the spray paint code so + that it redraws your image using multiple random dots instead of using a nested + for loop. (Click to see full instructions)" + CSPU5_U3 - Canvas - transparentDots_instruction: "Change the colors of your + dots so they have a fully transparent stroke and partially transparent fill. + (Click to see full instructions)" + CSPU5_U3 - Canvas - usingOffsetXY_instruction: "Add a console.log command inside + the function of your event handler. Use it to display the event parameter. + Click on the screen to see the contents of the event parameter (Click to see + full instructions)" + CSPU5_U3 - Conditional Basics - 6_instruction: "Add a setText after the if + statement to \"Nope. Guess again.\" (Click to see full instructions)" + CSPU5_U3 - Conditionals - Combine AND OR Simple_instruction: "Write an if statement + that uses AND and OR to display \"Sleep in!\" if it's the weekend and the + user is a teenager. (Click to see full instructions." + CSPU5_U3 - Conditionals - Combine AND OR and NOT_instruction: "Write an if + statement that uses AND and OR to display \"Time to go to school!\" if it's + not the weekend and the user is under 18. (Click to see full instructions.)" + CSPU5_U3 - Conditionals - Simple AND_instruction: "Write an if statement that + uses AND to display \"You are a teenager.\" if the user enters an age between + 13 and 19. (Click to see full instructions)" + CSPU5_U3 - Conditionals - Simple OR_instruction: "Write an if statement that + uses OR to display \"It's the weekend!\" if the user enters a weekend day + at the prompt. (Click to see full instructions)" + CSPU5_U3 - Design Mode - Console Log_instruction: "Update the ID names and + `console.log` messages to match the correct button. (Click to see full instructions.)" + CSPU5_U3 - Design Mode - Layers and Delete_instruction: "Fix the layout of + the bullseye game. (Click to see full instructions)" + CSPU5_U3 - Design Mode - Multi Screens 2_instruction: "Make a 2 screen app + which can switch back and forth between a black screen and a white screen + using buttons. (Click to see detailed instructions.)" + CSPU5_U3 - Design Mode - Multi Screens_instruction: "Make a 2 screen app with + a black screen and a white screen. (Click to see detailed instructions)" + CSPU5_U3 - Design Mode - WTF Console Log_instruction: "Add a 3 console.log + messages and test them out. (Click to see full instructions.)" + CSPU5_U3 - Design Mode -Recreate Beyond Buttons_instruction: "Recreate the + game from the \"Chaser Game\" with a Welcome Screen and Game Over Screen. + (Click to see full instructions.)" + CSPU5_U3 - Design Mode 1_instruction: "Add a large red button to your screen + using Design Mode. (Click for full instructions.)" + CSPU5_U3 - Dice - Dropdown and Score_instruction: "Add guess and score to the + Dice Game (Click to see full instructions)" + CSPU5_U3 - Dice - Dropdown with Strings_instruction: "Add a dropdown for difficulty + level that prints the difficulty level in the console. (Click to see full + instructions)" + CSPU5_U3 - Dice - If_instruction: "Show different die images for the random + number generated. (Click to see full instructions)" + CSPU5_U3 - Dice - Nested_instruction: "Use nested if statements to make the + scoring different for the different game levels. (Click to see full instructions)" + CSPU5_U3 - High Low - Debug_instruction: "Debug the order of the conditionals + so that it will actually tell the user when their guess is close. (Click to + see full instructions)" + CSPU5_U3 - High Low - Dropdown_instruction: "Add a dropdown for their guess + instead of promptNum (Click to see full instructions)" + CSPU5_U3 - High Low - Else if_instruction: "Add an else-if statement in order + to tell the user if their guess is high or low instead of just wrong. (Click + to see full instructions)" + CSPU5_U3 - High Low - Else_instruction: "Add an else statement so that the + program will tell the user when they are right and when they are wrong. (Click + to see full instructions)\r\n" + CSPU5_U3 - High Low - If_instruction: "Add code to the if statement that indicates + the user guessed the secret number. (Click to see full instructions)" + CSPU5_U3 - Keys - Add Image URLs_instruction: "Add image URLs to your array. + Replace the text area with an image and setText with setImageURL. Then test + your app! (Click to see full instructions)" + CSPU5_U3 - Keys - Buttons and Keys_instruction: "Have the program respond the + same way for both clicking images on the screen and hitting the up and down + keys on the keyboard. (Click to see full instructions)" + CSPU5_U3 - Keys - Demo App_instruction: "Play with the image scroller. Press + the left and right arrows to progress through the images." + CSPU5_U3 - Keys - Final Image Scroller_instruction: "Update the image scroller + to respond to buttons and key presses. (Click to see full instructions)" + CSPU5_U3 - Keys - Functions_instruction: "Write doUpArrow and doDownArrow functions + and call the functions instead of duplicating the code. (Click to see full + instructions)" + CSPU5_U3 - Keys - Key Up and Down_instruction: "Try out the keyup and keydown + events to see how they are different from keypress. (Click to see full instructions)" + CSPU5_U3 - Keys - Multiple Keys_instruction: "Play a different sound when the + down arrow is pressed. (Click to see full instructions)" + CSPU5_U3 - Loops - Complex Condition_instruction: "Change the boolean expression + for the while loop so that it will stop when both dice are greater than or + equal to 5. (Click to see full instructions)" + CSPU5_U3 - Loops - 1_instruction: "Change the condition for the while loop + to check if the variable num is less than 90. (Click to see full instructions)" + CSPU5_U3 - Loops - 10_instruction: "Write a program that simulates the rolling + of two dice. Roll the dice repeatedly until the sum of the dice is either + 7 or 11." + CSPU5_U3 - Loops - 11_instruction: "Fix the condition so that it keeps rolling + the die as long as the value is not a 2 or a 3 instead of rolling infinitely. + (Click to see full instructions)" + CSPU5_U3 - Loops - 12_instruction: "Change the code so that it prints the string + \"Hi\" 5 times. (Click to see full instructions)" + CSPU5_U3 - Loops - 14_instruction: "Change the loop condition to prevent the + infinite loop and stop counting once the count is past 30. (Click to see full + instructions)" + CSPU5_U3 - Loops - 15_instruction: "Count the number of times the sum of the + dice is 12. (Click to see full instructions)" + CSPU5_U3 - Loops - 2_instruction: "Try creating an infinite loop using !=, + > and <. (Click to see full instructions)" + CSPU5_U3 - Loops - 3_instruction: "Change the if statement to a while loop + so the program will run until it rolls a 6. (Click to see full instructions)" + CSPU5_U3 - Loops - 4_instruction: " Use the Debug Commands to make a list of + all the values rolled before a 6. (Click to see full instructions)" + CSPU5_U3 - Loops - 5_instruction: "Add code inside the while loop which will + update the variable num so that the condition will eventually become false. + (Click to see full instructions)" + CSPU5_U3 - Loops - 6_instruction: "Fix the problem so the loop will run at + least once. Change the initial value of num to a dummy value such as -1. (Click + to see full instructions)" + CSPU5_U3 - Loops - 7_instruction: "Without adding any lines of code, reorder + the code so that it prints all the values of num. (Click to see full instructions)" + CSPU5_U3 - Loops - 8_instruction: "Debug which number is not getting printed + and add a write statement to display that value. (Click to see full instructions)" + CSPU5_U3 - Loops - 9_instruction: " Modify the condition so that it keeps rolling + as long as both are less than 3. (Click to see full instructions)" + CSPU5_U3 - Loops - Minus Minus_instruction: "Change the code to count down + from 10 to 1. (Click to see full instructions)" + CSPU5_U3 - Loops - Plus Plus_instruction: "Change the code to use count++ instead + of count = count + 1. (Click to see full instructions)" + CSPU5_U3 - Loops - Typing in Console_instruction: "Use console to check the + ending value of num. (Click to see full instructions)" + CSPU5_U3 - Loops - minus = operator_instruction: "Update the code to use the + -= operator to count from 30 down to 0 by 3's. (Click to see full instructions)" + CSPU5_U3 - Loops - plus and minus = operator_instruction: "Update the code + to use the += operator. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Add 5_instruction: "Add 5 to all the values in + an array (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Counting Times_instruction: "Count the number + of times 5 appears in an array. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Divid by 2_instruction: "Divide every value in + the array by 2. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Find Min_instruction: "Complete the findMinVal + function to find and display the smallest value in an array (Click to see + full instructions)" + CSPU5_U3 - Loops And Arrays - General Search Param_instruction: "Add a second + parameter to the search function for the value to search for. (Click to see + full instructions)" + CSPU5_U3 - Loops And Arrays - Intro For Loop_instruction: "Add a for loop with + a console.log inside and test out the 3 pieces of the for loop. (Click to + see full instructions)" + CSPU5_U3 - Loops And Arrays - Linear Search_instruction: "Visit every element + in the array and display \"true\" if the value is a 5, and \"false\" otherwise. + (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Loop Array If_instruction: "Use an if statement + to only display the values in the array that are greater than 5. (Click to + see full instructions)" + CSPU5_U3 - Loops And Arrays - Make it a Function - add list parameter_instruction: "Create + a function that takes a list parameter and prints if the list contains a 5. + (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Make it a Function_instruction: "Move the code + that searches the list for a 5 into a function called \"search\". (Click to + see full instructions)" + CSPU5_U3 - Loops And Arrays - Print Array_instruction: "Use a for loop to print + out all the values in an array. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Printing Single True_instruction: "Process the + array and display a single \"true\" if the array contains a 5 or a single + \"false\" if it does not. (Click to see full instructions)" + CSPU5_U3 - Loops And Arrays - Search with Boolean Var_instruction: "Make a + boolean variable to use as a flag to keep track of whether there is a 5 in + the array. (Click to see full instructions)" + CSPU5_U3 - Movie Bot - Multiple If Sequences_instruction: "Add another set + of if, else if, and else statements inside the question if statement to check + for keywords for movie ratings (G, PG, PG-13, and R). (Click to see full instructions)" + CSPU5_U3 - Movie Bot - Nested Motivation_instruction: "Add a separate set of + if statements to check for a \"?\" in the input. (Click to see full instructions)" + CSPU5_U3 - Movie Bot - When Multiple If Statements_instruction: "Add an if + and else-if statement that checks for please and thank you. (Click to see + full instructions)" + CSPU5_U3 - Movie Bot - toLowerCase_instruction: "Use the toLowerCase command + to change all user input into lowercase letters after they enter it. (Click + to see full instructions)" + CSPU5_U3 - Practice Create Performance Task_instruction: "Design and implement + your practice Create Performance Task. (Click to see full instructions)" + CSPU5_U3 - Return Values - constrainTurtle_instruction: "Use constrain in this + simple app to keep the turtle from driving off the screen. (Click to see + full instructions)" + CSPU5_U3 - Return Values - debuggingConstrain_instruction: "Correct the error + in constrain so that it returns the appropriate value. (Click to see full + instructions)" + CSPU5_U3 - Return Values - debuggingMaxVal_instruction: "Correct the error + in maxVal so that it correctly reports the maximum value. (Click to see full + instructions)" + CSPU5_U3 - Return Values - useMinVal_instruction: "Call minVal within the console.log + statement to calculate the minimum of two values. (Click to see full instructions)" + CSPU5_U3 - Return Values - wrapTurtle_instruction: "Write wrap in this simple + app to let the turtle \"wrap\" to the other side of the screen when it goes + off. (Click to see full instructions)" + CSPU5_U3 - Return Values - writeMaxVal_instruction: "Write the function maxVal + and then use it within the console.log statement to calculate the maximum + of two values. (Click to see full instructions)" + CSPU5_U3 - Simulation - 1_instruction: "Use a while loop to \"flip a coin 10 + times\" and write the values to the screen. (Click to see full instructions)" + CSPU5_U3 - Simulation - 2.1_instruction: "Change your looping condition so + the simulation runs until there are 5 heads flipped. (Click to see full instructions)" + CSPU5_U3 - Simulation - 2.5_instruction: "Run your simulation to get the full + 10,000 heads! How long did it take? (Click to see full instructions)" + CSPU5_U3 - Simulation - 2_instruction: "Keep track of how many heads (1's) + your program generates and print the results to the screen. (Click to see + full instructions)" + CSPU5_U3 - Simulation - 3_instruction: "Add functionality that counts how many + heads in a row are flipped. (Click to see full instructions)\r\n" + CSPU5_U3 - Simulation - 4_instruction: "Update your while loop's condition + so the the coin flips until there are three heads in a row. (Click to see + full instructions)" + CSPU5_U3 - Simulation - 5_instruction: "Change your while loop to run until + you get a streak of 12 heads. How many flips did it take? (Click to see full + instructions)" + CSPU5_U3 - Simulation - 6_instruction: "Keep adding to your simulation. What + do you want to explore next? (Click to see full instructions)" + CSPU5_U3 - User Input - Save getText To Variable_instruction: "Save the age + and name of the user in variables (Click to see full instructions)" + CSPU5_U3 - Variables - Set to Expression with Other Variables_instruction: "Write + an expression that calculates the player's total score and stores it in the + totalScore variable. The calculation is: the player's points times lives + divided by the total time. (click to see full instructions)" + CSPU5_U3 - Variables - Set to Expression_instruction: "Test out the new expressions. + (Click to see full instructions)" + CSPU5_U3 Digital Assistant Design_instruction: "Pick a topic for your Digital + Assistant and create the basic layout with a text input and text area. (Click + to show full instructions)" + CSPU5_U3 Digital Assistant Set Text_instruction: "Have your digital assistant + repeat back what the user types and include a canned response. (Click to see + full instructions)" + CSPU5_U3 Digital Assistant Target_instruction: "Try out a demo of the Digital + Assistant!" + CSPU5_U3 full clicker demo_instruction: "Clicker game - Try it out!" + CSPU5_U3- Variables - Create And Assign_instruction: "On one line add a variable + called \"lives\" and assign it the value 3. Print it to the console. (Click + to see full instructions)" + CSPU5_U3- Variables - Text Mode_instruction: "1. Switch to text mode and type + instructions; 2. drag blocks out into text mode; 3. experiment with code completion" + CSPU5_U3-Design Mode-ID and Event Handler_instruction: "Add an event handler + for the button using the \"Insert and show\" link in the Design Mode Events + tab. (Click to see full instructions)." + CSPU5_U3-Design Mode-Image_instruction: "Recreate the \"Chaser Game\" from + the last lesson using Design Mode. (Click to see full instructions.)" + CSPU5_U313 Two Buttons with Ids_instruction: "Predict what will happen. Once + you've made a prediction, run the code to see what happens. (Click to see + full instructions)" + CSPU5_U313 drag Two Buttons_instruction: "Run a program with two buttons that + have the same id to see the warning message in the console. Change the ids + to make the program run without getting a warning message." + CSPU5_U3L13 - Debug Id Problem_instruction: "Improve the button by choosing + a descriptive and meaningful ID. (Click to see full instructions)" + CSPU5_U3L13 - Debugging 1_instruction: "Debug the program by verifying your + IDs are being referenced properly. (Click to see full instructions)" + CSPU5_U3L13 - Debugging 2_instruction: "Debug the program by properly ordering + your button commands and event handlers. (Click to see full instructions)" + CSPU5_U3L13 - Debugging 3_instruction: "Debug the program by fixing the logical + error within the program. (Click to see full instructions)" + CSPU5_U3L13 - Debugging IDs case sensitive_instruction: "Debug the program + by verifying your IDs are being referenced properly. (Click to see full instructions)" + CSPU5_U3L13 - Project_instruction: "Create your multi-screen app. (Click to + see full instructions.)" + CSPU5_U3L13 - Turtle Driver Project_instruction: "Create a \"turtle driver\" + that includes buttons to move the turtle forward and turn it left and right. + (Click to see full instructions)" + CSPU5_U3L13 - Turtle move with button_instruction: "Add a button that moves + the turtle when clicked. (Click to see full instructions)" + CSPU5_U3L13 eventsDetails_instruction: "Add an event handler to the button + to move the turtle forward. (Click to see full instructions)" + CSPU5_U3L14 - Assigning Random Value_instruction: "Write a program that simulates + the rolling of two dice and reports their individual values as well as the + sum. (click to see full instructions)" + CSPU5_U3L14 - Mini Calculator embed_instruction: "You will be prompted for + two numbers, one right after the other. See what happens. Enter different + numbers until you get the idea." + CSPU5_U3L14 - User Input Division calculator_instruction: "Write a program + that acts as a simple calculator. (click to see full instructions)" + CSPU5_U3L14 - Variable ReAssignment pt2_instruction: "Trace the code and predict + what you think will be printed to the console. Then add a console.log statement + at the end of the program to see the last value of someNum to see if your + full prediction is correct. (click to see full Instructions)" + CSPU5_U3L14 - concatenate simple_instruction: "Modify the write statement on + line 3 to combine text and variables together to make the app display a single + line of text that shows the player's lives and score. (click to see full + instructions)" + CSPU5_U3L14 - moving memory challenge1_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge2_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge3_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge4_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge5_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L14 - moving memory challenge6_instruction: "Using only the variables + provided, assignment (=) and arithmetic (+ - * /) re-assign the values to + make the console.log statement display the correct value(s). (Click to see + full instructions)" + CSPU5_U3L15 - Add reset button to UpDown app_instruction: "Add code so that + clicking the start over button will reset the game and send you back to the + main screen. (Click to see full instructions)" + CSPU5_U3L15 - DEMO up down count practice app_instruction: "Try out the demo + app (Click to see full instructions)" + CSPU5_U3L15 - Debug forget to update var on reset in UpDown app_instruction: "Run + the app, and click the up or down button until you get to the gameOverScreen. + Click 'Start Over' and try the app again. Find and fix the issue in the + code. (Click to see full instructions)" + CSPU5_U3L15 - Debug if never triggers in UpDown app_instruction: "Run the app + and use the up and down arrows to try to hit the gameOverScreen. You can't! + Find and fix the issue in the code. (Click to see full instructions)" + CSPU5_U3L15 - Debugging Simple If-statements =v==_instruction: "Run the app, + and click the up button. Then restart and run it again, and click the down + button. Find and fix the issue in the code. (Click to see full instructions)" + CSPU5_U3L15 - Simple If-statements in UpDown App_instruction: "Add an if statement + so that the app changes screens when the count reaches -5. (Click to see full + instructions)" + CSPU5_U3L15 - add code to make count down work_instruction: "Write code to + make the down arrow work as expected. (Click to see full instructions)" + CSPU5_U3L15 - count upDown bug forget to set text_instruction: "Find the bug + in the program and fix it. (Click to see full instructions)" + CSPU5_U3L15 - count upDown bug logic error wrong update_instruction: "Find + the bug in the program and fix it. (Click to see full instructions)" + CSPU5_U3L15 - count upDown bug var not created globally_instruction: "Find + the bug in the program and fix it. (Click to see full instructions)" + CSPU5_U3L15 - global var example count up_instruction: "Look at the code for + this app and see how the code works to update the count variable when the + up arrow is clicked. (Click to see full instructions)." + CSPU5_U3L15 - mini clicker update score_instruction: "Add code to update the + score when the apple is clicked. (Click to see full instructions)" + CSPU5_U3L15 - practice with setText_instruction: "Use setText to complete the + click event handler for the down arrow. (Click to see full instructions)" + CSPU5_U3L15 - variable scoping problem debugging_instruction: "See if you can + figure out why the code is no longer working. (Click to see full instructions)" + CSPU5_U3L15 click add lives_instruction: "Add lives to the clicker game that + decrement by 1 when the background image is clicked (Click to see full instructions)" + CSPU5_U3L15 full clicker app_instruction: "Complete your clicker game! (Click + to see full instructions)" + CSPU5_U3L16 - challenge say hi app_instruction: "Write a greeting to the user + when they hit 'enter' in the text input, using the 'change' event. (Click + to see full instructions)" + CSPU5_U3L16 - chaserApp_instruction: "Create your own \"Chaser Game.\" (Click + to see full instructions)" + CSPU5_U3L16 - chooseImages_instruction: "Replace the image in your application + with one of your own. (Click to see full instructions)" + CSPU5_U3L16 - doubleQuotes_instruction: "Save a string inside a variable and + log it to the console. (Click to see full instructions)" + CSPU5_U3L16 - intro getText_instruction: "Add an event handler to the Submit + button so that when the button is clicked it will display the name entered + in the text box to the console. Use getText to get the value out of the text + box. (Click to see full instructions)" + CSPU5_U3L16 - introSetPosition_instruction: "Move the buttons to the bottom + of the screen. (Click to see full instructions)" + CSPU5_U3L16 - introStrings_instruction: "Save a string inside a variable and + log it to the console. (Click to see full instructions)" + CSPU5_U3L16 - newEventTypes_instruction: "Experiment with different event types + and select the one that you think is best. (Click to see full instructions)" + CSPU5_U3L16 - outputWithTextArea_instruction: "Output a message to the 'textArea' + (Click to see full instructions)" + CSPU5_U3L16 - setPosition to fixed location_instruction: "Introducing the setPosition + command! Replace the moveTo in the button-click event handler to use setPosition + to move the button itself to a random location when it's clicked." + CSPU5_U3L16 - setPosition to move button_instruction: "Introducing the setPosition + command! Replace the moveTo in the button-click event handler to use setPosition + to move the button itself to a random location when it's clicked." + CSPU5_U3L16 - singleSetPosition_instruction: "Move the button to the middle + of the screen. (Click to see full instructions)" + CSPU5_U3L16 - text labels_instruction: "Use the textLabel command to replace + the button in your program with a text label. (Click to see full instructions)" + CSPU5_U3L16 - textInput getText write_instruction: "Add an Text Input box for + the name and age. (Click to see full instructions)" + CSPU5_U3L16 - toUpper_instruction: "Make the name of the user appear in uppercase + (Click to see full instructions)" + CSPU5_U3L16 - use images_instruction: "Use the image command to replace the + text label in your program with an image. (Click to see full instructions)" + CSPU5_U3L16 Mad Lib Clear Input_instruction: "Clear the user's previous text + when the Play Again button is clicked (Click to see full instructions) " + CSPU5_U3L16 Mad Lib Demo_instruction: "Mad Libs Demo - Try it out!" + CSPU5_U3L16 Mad Lib Student Setup_instruction: "Back to Mad Libs: To get started, + set up the two screens for your Mad Libs app (Click to show full instructions)" + CSPU5_U3L16 Mad Lib getText_instruction: "Before setting the text area with + your Mad Libs outline, get the user's text and incorporate their responses. + (Click to see full instructions) " + CSPU5_U3L16 Mad Lib setText_instruction: "When the Next button is clicked, + set the text area to have the main outline of your How-to Mad Libs (without + the user's input). (Click to see full instructions) " + CSPU5_U3L16 Mad Lib toUpper_instruction: "Apply the toUpperCase and toLowerCase + string functions to the user's text. (Click to see full instructions) " + CSPU5_U3L18 comparison operators_instruction: "Use console.log to print out + the different boolean expressions below to see what information they return. + (Click to see full instructions)" + CSPU5_U3L19 - fix the var name syntax error v2_instruction: "Fix the error + and get it to print the value of both variables (Click to see full instructions)" + CSPU5_U3L19 - test reassignment of two vars_instruction: "Predict the value + of a and b. Add console.log statements to find out the actual value of a and + b. (Click for full instructions)" + CSPU5_U3L19 - three basic ops of variables_instruction: "Add another variable + called \"lives\" and set the value to 3. Print the value of the variable to + the console. (Click to see full instructions)" + CSPU5_U3L19 - variable reassignment challenge pt2_instruction: "Make a prediction + about the ending values of a, b, and c. Then use console.log to check your + understanding (Click to see full instructions)" + CSPU5_U3L19 - write var and string with same name v2_instruction: "Fix the + code so that the values of both variables print to the console. (Click to + see full instructions)" + CSPU5_U3L23 Chatbot Conditionals 1_instruction: "Add if, else if, and else + statements to detect the movie genres Comedy, Romance, Action, and Horror. + (Click to see full instructions)" + CSPU5_U3L24 Chatbot Basic Conditionals_instruction: "Check out the project + description for instructions. (Click to see full instructions.)" + CSPU5_U3L24 Nested Conditionals 1_instruction: "Change all of the boolean expressions + to use includes instead of ==. (Click to see full instructions)" + CSPU5_U3L24 Nested Conditionals 2_instruction: "Nest your movie genre if statements + inside the if statements to check for a ? in the input. " + CSPU5_U3L24 introIncludes_instruction: "Practice using the includes command. + (Click to see full instructions)" + CSPU5_U3L25 - drag out key event_instruction: "Set up an event handler to respond + to keypress events, and display event.key in the console. Hit keys on the + keyboard to see what happens. (Click to see full instructions)" + CSPU5_U3L25 - play sound when up key_instruction: "Change the code so the sound + will only play when the up arrow is pressed. (Click to see full instructions)" + CSPU5_U3L26 AND operator_instruction: "Update the genre and rating if statements + to give only one movie suggestion at a time. (Click to see full instructions)" + CSPU5_U3L26 OR operator_instruction: "Update the if statement to use an OR + to check for a \"?\" as well as who, what, where, when, why, how in the user + input. (Click to see full instructions)" + CSPU5_addDescriptiveIDsToTurtleDriver_instruction: "Improve the button by choosing + a descriptive and meaningful ID. (Click to see full instructions)" + CSPU5_basic if - DIY secret number_instruction: "Use console.log to print out + the different boolean expressions below to see what information they return. + (Click to see full instructions)" + CSPU5_basic if - check driving age_instruction: "Use console.log to print out + the different boolean expressions below to see what information they return. + (Click to see full instructions)" + CSPU5_basic if - voting examle_instruction: "Use console.log to print out the + different boolean expressions below to see what information they return. (Click + to see full instructions)" + CSPU5_basic if-else - driving age_instruction: "Use console.log to print out + the different boolean expressions below to see what information they return. + (Click to see full instructions)" + CSPU5_clickerGame_v1_template_instruction: "Create your own \"Chaser App\". + (Click to see full instructions)" + CSPU5_moveTurtleOnButtonClick_instruction: "Add an event handler to the button + to move the turtle forward. (Click to see full instructions)" + CSPU5_playWithEventTypes_instruction: "Debug the program by fixing the logical + error within the program. (Click to see full instructions)" + CSPU5_setPosition to fixed location_instruction: "Introducing the setPosition + command! Replace the moveTo in the button-click event handler to use setPosition + to move the button itself to a random location when it's clicked." + CSPU5_turtleDriver_add2ndButton_instruction: "Debug the program by verifying + your IDs are being referenced properly. (Click to see full instructions)" + Calc Circles of Eval .1_instruction: "You’ll be writing a kind of code called + Evaluation Blocks, because each block of code evaluates to a single value. + Change the ??? in this code so that the block evaluates to 5." + Calc Circles of Eval .2_instruction: "This Evaluation Block is a multiplication + function which takes two numbers and returns the product of those numbers. + Edit this block so that it multiplies 2 * 5" + Calc Circles of Eval .3_instruction: "Here's a function for addition which + takes two numbers and returns their sum. Use this Addition Block to add 3 + + 6." + Calc Circles of Eval .4_instruction: "Here we've nested an Addition Block + inside a Multiplication Block. Complete this code so it multiplies 3 by (4 + + 1)" + Calc Circles of Eval 1 (copy 1)_instruction: "Convert this statement to <some_shape> + of evaluation." + Calc Circles of Eval 1_instruction: "Every mathematical operator (+, -, *, + /, and so on) can be represented by an Evaluation Block in code. Change the + Evaluation Block to match the expression." + Calc Circles of Eval 2 (copy 1)_instruction: "Convert this statement to <some_shape> + of evaluation." + Calc Circles of Eval 2_instruction: "Use a Multiplication Block to complete + this code." + Calc Circles of Eval 3_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval 4_instruction: "This code is missing a couple of Evaluation + Blocks - make sure you put everything in the right order." + Calc Circles of Eval 5_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval 6_instruction: "Complete the Evaluation Blocks to match + this expression." + Calc Circles of Eval 7_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval 8_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval 9_instruction: "Complete the Evaluation Blocks to match + this statement." + Calc Circles of Eval Free Play_instruction: "Free Play: Try using the Evaluation + Blocks to write some equations of your own. How does nesting the blocks in + different ways impact their evaluation?" + Calc Define Funcs 1 (copy 1)_instruction: "Let's look at some more algebraic + functions now. Here's a function translated from the simple algebraic function + f(x) = x + 1. What would you expect this function to output if provided an + input of 15?" + Calc Define Funcs 1_instruction: "Let's look at some more traditional algebraic + functions now. Here's a function translated from the simple algebraic function + f(x) = x + 1. What would you expect this function to output if provided an + input of 15?" + Calc Define Funcs 2_instruction: "Write a function f that takes a parameter + x and returns x - 10. Test your function using f(15)." + Calc Define Funcs 3_instruction: "We don't have to call our function f every + time; create a function called times-ten that should take a parameter x and + return x * 10. Once you've created the function, run times-ten(50)." + Calc Define Funcs 4_instruction: "Write a function called half that takes a + number x and returns half that number. Once you've written the function, + use it to calculate half(21)" + Calc Define Funcs 5 - multiply 1_instruction: "Oh no! We lost our multiply + block! We'll have to create a function to multiply for us. To start off, + write a function \"f\" that takes a parameter \"x\" and returns x*5. Test + your function using f(3)." + Calc Design Recipe 1_instruction: "Let's use the Design Recipe to create a + function called cube - this function should take in a Number and return that + number to the power of 3. Make sure to write two example cases! When you're + done, use your new function to calculate cube(7)." + Calc Design Recipe 2_instruction: "Your school is holding a bake sale, and + you need to track the cost of making each cookie, the money paid, and the + total profit. Cookies cost $0.25 each to make, and sell for $1.50/cookie.\r\n\r\nWrite + the function cost, which takes in the number of cookies you intend to sell, + and returns the cost of making those cookies.\r\n\r\nTest your function by + calculating the cost of 42 cookies" + Calc Design Recipe 3_instruction: "Write the function sales which takes in + the number of cookies sold, and produces the amount of money customers spent + to buy those cookies (each cookie is sold at $1.50).\r\n\r\nTest your function + by calculating the sales for 135 cookies" + Calc Design Recipe 4_instruction: "Using the two functions we just wrote, write + the function profit, which takes in the number of cookies you sold, and gives + you back the total profit you make from selling your cookies, accounting for + the cost of baking them.\r\n\r\nTest your function by calculating the total + profit for 15 cookies." + Calc Free Play_instruction: "Free Play: Write functions and algorithms of your + own design!" + Calc Rocket 1 (copy 1)_instruction: "In the last puzzle you wrote a contract + for the function \"rocket-height\" that states it has a range of Number, domain + of Number, and should return the height of the rocket traveling at 15 m/s + after a given number of seconds. Let's write an example case now for the + height of the rocket at 3 seconds.\r\n\r\n\r\n\r\n \r\n\r\n" + Calc Rocket 1_instruction: "In the last puzzle you wrote a contract for the + function rocket-height that states it has a range of Number, domain of Number, + and should return the height of the rocket traveling at 15 m/s after a given + number of seconds. Let's write an example case now for the height of the + rocket at 3 seconds." + Calc Rocket 2_instruction: "Great, let's do one more example before writing + the function - what should the rocket height be after 30 seconds?" + Calc Vars 1.1_instruction: "Here we've set the age variable to 17 years. Can + you write an expression that calculates age in days?" + Calc Vars 1_instruction: "Variables allow us to name values so that we can + easily refer to them repeatedly throughout our programs. Here's a variable + called age. Set its value to your age and click run." + Calc Vars 2 (copy 1)_instruction: "Here we've set the \"age\" variable to + 17 - can you write an expression that calculates \"age\" in months?" + Calc Vars 2.1_instruction: "Here's a new variable called age-in-months. Use + the variable age to set age-in-months." + Calc Vars 2_instruction: "Can you write an expression that calculates age in + months?" + Calc Vars 3 (copy 1)_instruction: "Can you add to this code so that it calculates + how many hours there are in \"age\" years?" + Calc Vars 3_instruction: "Can you add to this code so that it uses the \"age\" + variable to calculate age in hours?" + Calc Vars 4_instruction: "We can also set variables by using other variables. + Let's say you have a brother who is two years younger than you - can you + set a new variable \"brother-age\" using your \"age\" variable?" + Choose Your Own Adventure_instruction: "You can do whatever you want in play + lab! Here's an example of choose your own adventure story in play lab." + Code Studio Puzzle Challenge 1 - Artist_instruction: "Draw the line. It is + 200 pixels long. " + Code Studio Puzzle Challenge 1 Artist1_instruction: "Draw the line. It is 200 + pixels long. " + Code Studio Puzzle Challenge 10 - Bee (copy 1)_instruction: "Move the Bee to + the flower and get all of the nectar." + Code Studio Puzzle Challenge 10 - Bee_instruction: "Move the Bee to the flower + and get all of the nectar." + Code Studio Puzzle Challenge 10b - Bee_instruction: "Move the Bee to the flowers + and get all of the nectar at each." + Code Studio Puzzle Challenge 11 - Artist_instruction: "Draw this line by using + the variable \"length\". Each line segment is 75 pixels long." + Code Studio Puzzle Challenge 11b - Artist_instruction: "Draw a square by using + the variable length provided." + Code Studio Puzzle Challenge 12 - Artist_instruction: "The code provided draws + one triangle. Add to it to draw triangles in a hexagon pattern." + Code Studio Puzzle Challenge 12a - Artist_instruction: "The code provided draws + one triangle. Add to it to draw triangles in a hexagon pattern." + Code Studio Puzzle Challenge 13 - Artist_instruction: "This is just like a + \"for\" loop. Complete the code to draw six lines that grow from 50, 60, 70, + 80, 90, to 100 pixels long. " + Code Studio Puzzle Challenge 14 - Artist_instruction: "This is just like a + \"for\" loop. Complete the loop to draw 4 squares that grow from 80, 100, + 120, to 140 pixels. " + Code Studio Puzzle Challenge 2 - Artist_instruction: "Now add a turn and another + line. The lines are 200 pixels long." + Code Studio Puzzle Challenge 3 - Artist_instruction: "Draw the square. Each + side is 100 pixels long." + Code Studio Puzzle Challenge 4 - Artist_instruction: "Draw the octagon. Each + side is 100 pixels long." + Code Studio Puzzle Challenge 5 - Bee (copy 1)_instruction: "Move the Bee to + the flower and get the nectar." + Code Studio Puzzle Challenge 5 - Bee_instruction: "Flowers contain a specific + amount of nectar. Move the Bee to the flower and collect nectar with the get + nectar block." + Code Studio Puzzle Challenge 6 - Bee_instruction: "Honeycombs can hold a specific + amount of honey. Get the nectar from the flower and make some honey." + Code Studio Puzzle Challenge 7 - Bee_instruction: "Move the Bee to the flower + and get the nectar." + Code Studio Puzzle Challenge 8 - Bee_instruction: "The cloud could be hiding + a flower or a honeycomb. Only get nectar from flowers. Only make honey at + honeycombs." + Code Studio Puzzle Challenge 9 - Bee_instruction: "The cloud could be hiding + a flower or a honeycomb. Only get nectar from flowers. Only make honey at + honeycombs." + Code Studio Puzzle Challenge Artist Screencast (copy 1)_instruction: "Draw + the line. Each segment is 100 pixels long. " + Code Studio Puzzle Challenge Artist Screencast 2_instruction: "Complete the + code to draw the line. Each segment is 100 pixels long. " + Code Studio Puzzle Challenge Artist Screencast_instruction: "Draw the line. + Each segment is 100 pixels long. " + Code Studio Puzzle Challenge Bee Screencast_instruction: "Move the Bee to the + flowers and get all of the nectar." + Code Studio Puzzle Challenge Square - Artist_instruction: "Draw a square by + using the variable length provided." + Code Studio Puzzle Challenge Var - Artist_instruction: "Draw a line by using + a variable \"length\" set to 180." + Collector Demo_instruction: "Look at all this loot! Help me get as many coins + as I can so I can improve my farm. I can only use 9 blocks though!" + Collector Test_instruction: "Collect all the gold!" + Course 2 Bee Loops 1_instruction: "Hi, I'm a bee. Can you help me collect + the nectar from these flowers? " + Course 2 Bee Loops 13_instruction: "Assessment: Use the repeat block to collect + all of the nectar." + Course 2 Bee Loops 2_instruction: "Can you do the same task more easily with + a loop?" + Course 2 Bee Loops 3_instruction: "Now use the new repeat block to collect + all of the nectar and make all of the honey." + Course 2 Bee Loops 3__instruction: "Can you use a loop to collect all that + nectar?" + Course 2 Bee Loops 4_instruction: "What happens if you loop this sequence 3 + times? Don't forget to make the honey at the end!" + Course 2 Maze Loops 1_instruction: "Can you get me to the pig using 5 blocks?" + Course 4 2_instruction: "The bee only wants nectar right now. Remember, not + all objects are flowers, so check to gather nectar only at flowers." + Course 4 Artist 1_instruction: "Help me draw a box. (Each line is 200 pixels + long) " + Course 4 Artist 10_instruction: "Click here to see the full instructions again!\r\n\r\nHere + is the code for an interesting shape. What happens when you repeat it multiple + times, turning between each iteration? Notice that the turns in this shape + add up to 420 degrees, which means that when your artist is done drawing, + it will be facing a different direction than when you started. That new direction + is exactly 60 degrees to the right of where you began." + Course 4 Artist 11_instruction: "Now for a challenge! Feel free to use trial + and error. You are not expected to get the image perfect the first time. Want + to see more hints? Click here!" + Course 4 Artist 12_instruction: "Want a second peek at the inspiration design + or the hints? Click here!\r\n\r\nOtherwise, make a design all your own!" + Course 4 Artist 13_instruction: "Still playing? Here is a blank canvas where + you can design anything you want!" + Course 4 Artist 2_instruction: "Can you use a loop to draw the greyed out square? (Each + side is 300px long)" + Course 4 Artist 20_instruction: "Still playing? Here is a blank canvas where + you can create whatever you want!" + Course 4 Artist 3_instruction: "Try to figure out what happens if you run this + code (or press \"Run\" to test it). Then, repeat it enough times to complete + the drawing." + Course 4 Artist 4_instruction: "How many degrees are in a circle? Fill in + the repeat block with that number to create a circle of colors." + Course 4 Artist 5_instruction: "Draw the other half of this design so it's + symmetrical. The triangles are equilateral and are 50 pixels long. Hint: You + may have to run the code several times to figure out all of the blocks that + need to be added." + Course 4 Artist 6_instruction: "Complete the code to draw these three, equilateral + triangles." + Course 4 Artist 7_instruction: "Now nest this loop inside another loop to draw + 10 triangles. This is called a nested loop. Hint: All 10 triangles complete + a 360 degree rotation. " + Course 4 Artist 8_instruction: "Draw this sun by looping this whole block of + code multiple times." + Course 4 Artist 8a_instruction: "Remember this shape? Now we're going to + let you build it without giving you any blocks to start!" + Course 4 Artist 9_instruction: "Loop this design 10 times and make sure to + turn between each shape that's drawn. \r\n" + Course 4 Artist Binary 1_instruction: "Here's a function that takes a binary + string of 1's and 0's and instructs the artist to follow them from left + to right, top to bottom. The artist will fill-in the squares when it sees + a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how + the artist uses binary to draw this pattern." + Course 4 Artist Binary 1a_instruction: "Here's a function that takes a binary + string of 1's and 0's and instructs the artist to follow them from left + to right, top to bottom. The artist will fill-in the squares when it sees + a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how + the artist uses binary to draw this pattern." + Course 4 Artist Binary 2_instruction: "Which of these binary strings could + you loop 8 times to draw this image?" + Course 4 Artist Binary 3_instruction: "Can you draw this pattern by looping + just three binary digits (0s and 1s)?" + Course 4 Artist Binary 4_instruction: "Each binary string represents one row + of this picture. Can you rearrange them so it draws a smiley face instead + of a frowny face?" + Course 4 Artist Binary 5_instruction: "Which 6 digit binary string, repeated + 11 times, will draw this image?" + Course 4 Artist Binary 6_instruction: "What is the shortest binary string that + you can repeat to draw this image?" + Course 4 Artist Binary 7_instruction: "Finish this drawing." + Course 4 Artist Binary Free Play 2_instruction: "Free Play: Here's a blank + canvas for you to draw on. Have fun!" + Course 4 Artist Binary Free Play 2a_instruction: "Here's a higher resolution + canvas to draw on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we + start to get creative with the bits?" + Course 4 Artist Binary Free Play 2b_instruction: "Click here to see hints." + Course 4 Artist Binary Free Play_instruction: "Free Play: Draw whatever you + like with binary!" + Course 4 Artist Binary pre1_instruction: "Use the blocks below to have the + artist draw \"01010101\" in binary in the first row." + Course 4 Artist Binary ryan_instruction: "Binary is a way of representing information + using only two options. Here, we're going to use the options \"off\" (represented + by the number 0) and \"on\" (represented by the number 1). \r\n\r\nWe've + provided you with a grid of \"pixels\" that you can walk through and make + designs by turning on only certain squares. Can you have the artist draw + \"01010101\" in binary in the first row?" + Course 4 Artist For Functions 10_instruction: "Let's Step it up a little, + can you draw a Star shape using the \"Draw a Square Line\" function? Good + luck!" + Course 4 Artist For Functions 11_instruction: "Let's Step it up a little, + can you draw a Star shape using the \"Draw a Square Line\" function? Good + luck!" + Course 4 Artist For Loops 1_instruction: "Use a repeat block to draw this triangle + that is 50 pixels wide." + Course 4 Artist For Loops 10_instruction: "Free Play Time! Have fun drawing + whatever you like with the blocks you have learned how to use" + Course 4 Artist For Loops 11_instruction: "Remember back in a previous stage + when we used a variable to control the number of sides in a shape? We are + going to do the same thing with the `counter` variable now. This pattern starts + with a triangle and adds one side at a time until it draws a decagon (10 sides). + Each side should be 100 pixels long. " + Course 4 Artist For Loops 11a_instruction: "Let's put it all together! Using + your knowledge of `for` loops and the `counter` variable, create this drawing + where each shape has two more sides than the last. Make sure that each side + is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little + of the code has been provided for you." + Course 4 Artist For Loops 12_instruction: "That looked pretty cool, but now + I'd like to draw each shape next to the last one. This time each side is + 20 pixels. Use a jump block to jump forward 40 pixels after each shape. " + Course 4 Artist For Loops 13_instruction: "Hmmm, those shapes are getting bigger + every time! Didn't we already solve this problem with variables? How can + we use the counter variable to make the sides smaller as there are more of + them? Instead of moving forward by a set amount, try moving forward (100 / + counter) pixels." + Course 4 Artist For Loops 14_instruction: "If you turn a little bit more or + less than you normally would for a shape, it creates a neat effect. Try using + some of the code from the last level, but turning 89 degrees to create this + twisted square spiral." + Course 4 Artist For Loops 15_instruction: "Free Play: Try making some drawings + of your own using \"for loops\". We've added a few useful variables for you + as well." + Course 4 Artist For Loops 2_instruction: "I've put the code for drawing a + triangle inside a for loop that counts from 50 to 100 by 10. NOTE: Make sure + you look at the code before you hit \"Run\"." + Course 4 Artist For Loops 3_instruction: "Use the last puzzle as a reference + to complete this one. The smallest triangle has 20 pixel sides, the largest + has 200 pixel sides, and each triangle is 20 pixels larger than the last. + " + Course 4 Artist For Loops 4_instruction: "How would you modify what you've + learned to draw these squares? They start at 15 pixels long, the largest is + 300 pixels long, and each square is 15 pixels larger than the last. " + Course 4 Artist For Loops 5_instruction: "Good job on the last puzzle! Let's + use that \"counter\" variable block again to draw this cool picture. " + Course 4 Artist For Loops 6_instruction: "Free Play! Try using a for loop to + draw a growing shape pattern of your own design." + Course 4 Artist For Loops 6a_instruction: "Make three small changes to the + code from the last level to get this!" + Course 4 Artist For Loops 7_instruction: "What happens if you remove the \"Repeat + 3\" from this algorithm, keeping the \"move\" and \"turn\" blocks in the for + loop? In this spiraling triangle, each side is 20 pixels longer than the last." + Course 4 Artist For Loops 8_instruction: "Just one little change to the code + from the last image can create this drawing. Can you figure out what that + change is?\r\n\r\nHint: You need to remove something!" + Course 4 Artist For Loops 8a_instruction: "Just one little change to the code + from the last image can create this image. Can you figure out what that change + is?" + Course 4 Artist For Loops 9_instruction: "Can you make a spiral? Move forward + from 1 to 75 pixels, increasing by 1 pixel each time." + Course 4 Artist For Loops Challenge_instruction: "**Challenge:** Can you figure + out how to use all of the things you've learned to create this image of polygons, + all with 40 pixel sides?" + Course 4 Artist For Loops Challenge_a_instruction: "Can you figure out how + to use all of the things you've learned to create this image?\r\n\r\nNeed + a hint? Click here." + Course 4 Artist For Loops inspire_instruction: "Free-Play Inspiration: You've + now learned everything you need to know to make a pattern like this! If this + picture inspires you, try to make something similar. Otherwise, create something + all your own.\r\n\r\nNeed a hint? Click here." + Course 4 Artist Functions 1_instruction: "Can you draw a square that is 100 + pixels in length, using a loop?" + Course 4 Artist Functions 10_instruction: "Which block do you need to add to + get the triangle to sit on top of the square?" + Course 4 Artist Functions 11_instruction: "Check out this code that draws a + cube - can you move it into a function called \"Draw a Cube\"" + Course 4 Artist Functions 12.1_instruction: "Let's create a function called + \"draw an octagon 20\" that draws an octagon where each side is 20 pixels + long." + Course 4 Artist Functions 12_instruction: "Loop square function to draw a line" + Course 4 Artist Functions 13.1_instruction: "Now, let's make a function called + \"jump to upper right\" that moves the artist to the upper-right of the octagon + that you just drew so we can finish this pattern.\r\n\r\nHint: To get yourself + to the upper-right corner, try jumping in a pattern that makes just 3/8 of + the octagon." + Course 4 Artist Functions 13_instruction: "Check it out we have a new function + called \"draw a line of squares\". Feel free to take a look inside the function + block to see how we built it. Click on \"Run\" when your are ready for the + next puzzle." + Course 4 Artist Functions 14.1_instruction: "Now, let's make a function called + \"jump to upper right\" that moves the artist to the top-right of the octagon + that you just drew so we can finish this pattern." + Course 4 Artist Functions 14_instruction: "You're doing great! Let's use + your new \"Draw a line of squares\" function to draw a Square shape. Remember + each square is 40 pixels in length." + Course 4 Artist Functions 15_instruction: "Let's Step it up a little, can + you draw a star shape using the \"draw a line of squares\" function? Good + luck! Hint: you may have to turn 144 degrees" + Course 4 Artist Functions 2_instruction: "Can you draw 3 squares 20 pixels + apart from one another? Hint: each square is 100 pixels in size" + Course 4 Artist Functions 3_instruction: "Using the \"draw a square\" function + block, can you draw this picture? Hint: each square is 120 pixels apart.\r\n" + Course 4 Artist Functions 4_instruction: "Are you ready to create your own + \"Function Block\"? Click on the \"Functions\" block in the tool box, name + it \"draw a triangle\", then create a triangle as you have done before with + the Action and Loops blocks. Then click on the Save and Close in the upper + right hand corner. Hint: Create a triangle that is 100 pixels in length. Good + luck!" + Course 4 Artist Functions 5 OLD_instruction: "Let's try to use our two functions + to draw a house - what needs to be fixed in this code to draw the house properly?" + Course 4 Artist Functions 5_instruction: "Using the \"draw a square\" function + block, can you draw this picture? Hint: each square is 120 pixels apart.\r\n" + Course 4 Artist Functions 6_instruction: "Which block do you need to add to + get the triangle to sit on top of the square?" + Course 4 Artist Functions 7_instruction: "Can you draw a line of squares using + a Square function? Each square is 40 pixel's in length." + Course 4 Artist Functions 8_instruction: "Are you getting the hang of how to + use function blocks? Let's modify this square so that it is 200 pixels in + size. Hint: click on \"edit\" to change the size of the \"draw a square\" + function editor. Remember to click on \"save and close\" to get out of the + function editor. " + Course 4 Artist Functions 9_instruction: "We have given you most of the code + to create a function. However there seems to be something missing. Can you + make this function block complete?" + Course 4 Artist Functions Inspiration_instruction: "Click here to see the hints + again." + Course 4 Artist Functions challenge_instruction: "Click here to see the hints + again." + Course 4 Artist Functions inspire_instruction: "Click here to see the inspiration + picture again." + Course 4 Artist Inspire_instruction: "Want a second peek at the inspiration + design or the hints? Click here!\r\n\r\nOtherwise, make a design all your + own!" + Course 4 Artist Params 1_instruction: "Let's edit a function that draws a + square with 50 pixel sides" + Course 4 Artist Params 10_instruction: "You can call functions from inside + other functions! Using your \"shape\" function as a base, create 3 house shapes + each 20 pixels larger than the last starting at 50 pixels in length. Using + a counter loop might be helpful. " + Course 4 Artist Params 11_instruction: "How about a function called \"pinwheel\" + that takes three parameters - \"sides,\" \"length\" and \"repeat.\" You can + calculate how much to turn after each shape using the same math you used to + figure out the turns for a shape of \"sides\". Can you recreate this picture? + Here's a tip each shape is 100 pixel's in length." + Course 4 Artist Params 12_instruction: "Use your \"pinwheel\" function to draw + each of these shapes. The side length for each image is 50." + Course 4 Artist Params 13_instruction: "Freeplay: Here are the functions you've + written, and some more for you to play with. Draw something awesome!" + Course 4 Artist Params 2_instruction: "That triangle function would be a whole + lot more useful if it could draw triangles of different sizes. I've added + a parameter for line length, but it doesn't do anything yet. Can you update + the function so it uses the \"length\" parameter when it draws each side? + The triangle sizes are 150 pixels, 75 pixels and 25 pixels." + Course 4 Artist Params 3_instruction: "Awesome, can you draw each of these + triangles with that new function? The first is 25 pixels long, the second + is 50, and the third is 75. " + Course 4 Artist Params 4_instruction: "Can you add a new function called square? + It should also take a length parameter, just like the triangle. This time + draw 3 squares 25, 50 and 75 pixels in length,100 pixels apart." + Course 4 Artist Params 5_instruction: "Use both of your new functions to draw + this picture. To make this easier you use a loop with a \"counter\" parameter. + " + Course 4 Artist Params 6_instruction: "Let's edit this \"draw a shape\" function. + It already has a \"length\" parameter. Now, let's edit the function to also + add a \"sides\" parameter. Remember the angle to turn for a given shape is + 360 divided by the sides it has. Hint: lengths for each shape are the triangle + is 100 pixels, the hexagon is 25 pixels and the square is 50 pixels. " + Course 4 Artist Params 7_instruction: "Can you draw these shapes by filling + in the \"???\" The square and triangle are 100 pixels in size while the hexagon + is 75 pixels in size. " + Course 4 Artist Params 8_instruction: "Can you figure out how to draw this + shape? Here's a hint create a new function with 6 sides called a hexagon. + " + Course 4 Artist Params 9_instruction: "Do you remember when we used the counter + loop but removed a loop within? Let's have some fun and use the \"draw a + shape\" function with \"sides\" and \"length\" parameters. Can you re create + these shapes? The square counter should be 5/100/5, the triangle counter should + be 10/100/10 and the hexagon is 2/100/2." + Course 4 Artist Var 9_instruction: "Here's the algorithm to draw a triangle, + modify it so it uses the \"sides\" variable instead. Replace the number 3 + with the \"sides\" variable. Hint: remember to use the \"set sides to\" block." + Course 4 Artist Vars 1_instruction: "Let's draw an equilateral triangle. \r\n\r\nIt + has to be exactly 100 pixels long on each side." + Course 4 Artist Vars 10_instruction: "Here's an algorithm that draws a triangle + out of smaller triangles. Can you modify it so that it uses the \"sides\" + variable to draw each triangle? Look through the code, and every time you + see the number 3, replace it with your \"sides\" variable. Remember to use + the \"set sides\" block." + Course 4 Artist Vars 11_instruction: "Here’s more complicated code using the + same concepts from the last puzzle - what should you set the \"sides\" variable + to in order to draw this picture made of squares?" + Course 4 Artist Vars 12_instruction: "Let's set the \"sides\" variable to + 5. The more sides we add to this algorithm, the bigger this whole pattern + gets! Notice that there is another variable called \"length\". We can now + use that wherever we have a \"move forward.\" Set the \"length\" variable + to 75 for this shape." + Course 4 Artist Vars 13_instruction: "When a shape has lots of sides, each + side needs to be shorter if you want the whole pattern to fit on the screen. + \r\nLet's recreate the algorithm for this amazing pattern, but instead of + manually setting the `length` variable, let's use a math block with the `sides` + variable inside to make sure that each shape fits correctly. The perimeter + of each polygon is 300 pixels.\r\nNeed some hints? Click here." + Course 4 Artist Vars 14_instruction: "Free Play: Check it out! Now your algorithm + is nested within one more loop. Experiment with changing the values of your + two variables to draw cool patterns.\r\n\r\nFor even more effect, try playing + with color! Use random colors inside loops to see how it changes your design." + Course 4 Artist Vars 2_instruction: "Instead of using \"move forward by 150,\" + the \"move\" block is now referencing a variable called \"length.\" Can you + set \"length\" to 150 to draw this new triangle?" + Course 4 Artist Vars 3_instruction: "Here's a loop that draws a square, but + something's missing. Can you fix it so that it uses the variable \"length\" + to figure out how long each side should be? " + Course 4 Artist Vars 4_instruction: "Now I want to make a rectangle that is + twice as tall as it is wide. We've got a variable called \"width\" that needs + to be set to 100. Can you use the math blocks to complete the code?" + Course 4 Artist Vars 5_instruction: "Use the variable \"sides\" to control + how many times this loop gets run." + Course 4 Artist Vars 6_instruction: "Here’s some code that can draw any regular + polygon. There’s a new variable called sides that is set to 4. Can you use + the sides variable (along with the math block) to turn the right amount regardless + of how many sides there are in the polygon?\r\n\r\nClick here to go back to + the hint!" + Course 4 Artist Vars 7_instruction: "Use what you learned in the last puzzle + to create this hexagon using the \"sides\" variable.\r\n\r\nSee how you could + change just one value to draw a triangle, square, pentagon, or octagon?" + Course 4 Artist Vars 8_instruction: "Free Play: Experiment with the number + of sides this shape has. Can you change the algorithm so that the overall + size of the shape stays the same, no matter how many sides it has? Hint: If + you divide your starting length by the number of sides, the length of each + side will get shorter as the number of sides gets higher." + Course 4 Artist Vars 9_instruction: "Modify this algorithm so it uses the \"sides\" + variable instead of a fixed number to draw a triangle. Don't forget to use + the \"set sides to\" block." + Course 4 Bee 1_instruction: "The bee can't tell what's under the cloud! \r\n\r\nUse + the `if` block to check whether there is a flower under the cloud. \r\n\r\nGet + nectar one time, ONLY if there is a flower." + Course 4 Bee 2_instruction: "Use the \"if/else\" block to check each object + to see if it's a flower or a honeycomb . If it's a flower, collect one nectar...otherwise, + make one honey!" + Course 4 Bee 3_instruction: "The unknown object is either a flower or a honeycomb. + This time, use the if/else block to collect one nectar if it is a flower, + else make one honey (because then it would be a honeycomb)." + Course 4 Bee 4_instruction: "This purple flower may have either 3, 2, or 1 + nectar. Here an if/else block is combined with another if/else block to create + an \"if/else-if/else\" statement. Complete the solution to collect the unknown + amount of nectar." + Course 4 Bee 5_instruction: "This purple flower may have either 3, 2, or 1 + nectar. Add an if-else block to create an if, else-if, else block. Complete + the solution to collect the unknown amount of nectar." + Course 4 Bee 6_instruction: "This purple flower may have either 3, 2, or 1 + nectar. Create an if, else-if, else block to collect the unknown amount of + nectar." + Course 4 Bee 7_instruction: "Use everything you have learned so far to collect + all the nectar. The purple flower may have either 3, 2, or 1 nectar." + Course 4 Bee For Loops 1_instruction: "Use a loop to collect the nectar from + each flower." + Course 4 Bee For Loops 10_instruction: "If your loop is counting down, the + increment is subtracted from your counter variable each loop. What should + your increment be to collect 9, then 6, and then 3 nectar?" + Course 4 Bee For Loops 11_instruction: "What's wrong with this loop? See if + you can fix it and make the bee collect all the nectar." + Course 4 Bee For Loops 2_instruction: "Here's a new kind of loop, called the + \"for\" loop. This particular for loop will count from 1 to 5 by 1, and run + the contents of the loop each time it counts. Help the Bee get the nectar." + Course 4 Bee For Loops 3_instruction: "You can solve this puzzle by using a + for loop to count from 1 to 3 by 1. Now let's go get some nectar!" + Course 4 Bee For Loops 4_instruction: "Collect all of the nectar from these + flowers. I wonder if there's an easier way to do this..." + Course 4 Bee For Loops 5_instruction: "Ah, the for loop makes this much easier! + Using the \"counter\" variable from the for loop to loop the \"get nectar\" + block the same number of times as the loop. Whew! That's a lot of loops. + All the code you need it there, take a look at how it is put together then + click on Run and see how it works. " + Course 4 Bee For Loops 6_instruction: "You can also use a for loop to count down. Try gathering this nectar by counting down from 5 to 1 by 1." - grade5_bee_for_loops7_instruction: "Try collecting these flowers using an increment + Course 4 Bee For Loops 7_instruction: "Use your for loop \"counter\" variable + to control how far to move horizontally." + Course 4 Bee For Loops 8_instruction: "Can you use the loop variable to control + movement and nectar collection?" + Course 4 Bee For Loops 9_instruction: "The last number in your for loop is + called the \"increment,\" and each time the loop is run the counter variable + changes by the increment. Try collecting these flowers using an increment of 2." - grade5_bee_for_loops8_instruction: "You've got this! What should your increment - be to collect 3, 6, 9, 12, 15 nectar?" - grade5_bee_for_loops9_instruction: "Use the `counter` variable to navigate - this garden with the fewest number of blocks possible." - grade5_bee_parameters_new8_instruction: "That's a great function you've created! - You are officially on your own now. Collect all the nectar. Make all the honey." - grade5_bee_parameters_new9_instruction: "Bonus Challenge! If you are feeling - ambitious, try this puzzle. It is possible to collect all of the nectar and - make all of the honey using only a For loop, a Repeat loop, a function call, - and a turn. Try it all on your own, or view the hints to build it step-by-step. - Great job with this stage!" - grade5_pixelation_instruction: "Encode an image of anything you like using - binary. The binary language will be represented with '0' and '1' only." - grade5_playlab_freeplay_instruction: "It's free play time! Have fun with all - the blocks in your tool box. " - grade5_playlab_parameters_points1_instruction: "Here's the same game but most - of the code is hidden. We've added a new function called `score_points.`\r\n\r\nAdd - a new parameter called `points` to the `player_score` function. \r\n\r\nThe - `score_points` function should be able to both add and remove points from - `player_score` depending on which actor is hit.\r\nChanging the score by 1 - will add a point, while changing the score by -1 will subtract a point.\r\n\r\nWhen - you're done, click \"Run\" to play. When Dog scores 6 points, you will move - on to the next puzzle. " - grade5_playlab_variables1_instruction: "This time you don't have to write - any code, just hit \"Run\" to play the game! In this game, you're the dog - who is trying to collect more flags than the cat. Use the down arrow to control - the dog. Press \"Finish\" when you're done playing." - grade5_playlab_variables10_instruction: "Edit the the \"patrol\" function to + Course 4 Bee Loops 5 NEW_instruction: "Here are three flowers. Can you find + the pattern of instructions that you need to repeat 3 times to collect the + nectar with the fewest number of blocks?" + Course 4 Bee Loops 5a NEW_instruction: "Now, use loops to help the bee collect + all the nectar on its way to the honeycomb with as few blocks as possible. When + you get there, don't forget to make honey!" + Course 4 Bee Params 1_instruction: "Write a sequence to collect all of the + nectar using `get 3 nectar` which turns, moves to collect the nectar, and + then returns to the original location." + Course 4 Bee Params 2_instruction: "Modify the \"get 3 nectar\" function so + it makes me turn right instead of left to the flowers." + Course 4 Bee Params 3 (copy 1)_instruction: "Now there are flowers on both + sides! Maybe you can use a parameter so that the same function works for flowers + on either side. I've added a parameter called \"direction\" to the function. + If the \"direction\" parameter equals 0 I should turn left, if it's 1 I should + turn right." + Course 4 Bee Params 3_instruction: "Now there are flowers on both sides! We've + added variables called \"left\" and \"right\" for you to use, and added a + parameter called \"direction\" to \"get 3 nectar\". Edit \"get 3 nectar\" + so that the bee turns the correct direction when the variables \"left\" or + \"right\" are passed into the function. " + Course 4 Bee Params 4 (copy 1)_instruction: "Try using your new function to + collect all of the flowers. Remember, 0 = left and 1 = right." + Course 4 Bee Params 4 - Two WhenRun_instruction: "Try using your new function + to collect all of the flowers. Remember to use the left and right variables." + Course 4 Bee Params 4 backup_instruction: "Wouldn't it be nice if we could + collect all of these nectars with the a single function? Try adding a new + parameter to your function called \"nectars\" to control the amount of nectar + to collect. You'll probably want to rename the function too!" + Course 4 Bee Params 4_instruction: "Try using your new function to collect + nectar from all of the flowers. Remember to use the left and right variables." + Course 4 Bee Params 5_instruction: "Let's start from scratch - can you create + a new function called \"get 5 nectar\" with a direction parameter?" + Course 4 Bee Params 6 (copy 1)_instruction: "Try using your new function to + collect all of this nectar." + Course 4 Bee Params 6_instruction: "Wouldn't it be nice if we could collect + all of these nectars with a single function? Try adding a new parameter to + your function called \"nectar units\" to control the amount of nectar to collect. + You'll probably want to rename the function too!" + Course 4 Bee Params 7 (copy 1)_instruction: "Try using your new function to + collect all of this nectar." + Course 4 Bee Params 7_instruction: "Try using your new function to collect + all of this nectar." + Course 4 Bee Params 8 Clone 2_instruction: "Oooh, now there's honey to deal + with too! How could you update your function to either get nectar or make + honey." + Course 4 Bee Params 8 Clone_instruction: "Oooh, now there's honey to deal + with too! How could you update your function to either get nectar or make + honey." + Course 4 Bee Params 8 clone 3_instruction: "Oooh, now there's honey to deal + with too! How could you update your function to either get nectar or make + honey." + Course 4 Bee Params 8 new_instruction: "Oooh, now there's honey to deal with + too! How could you update your function to either get nectar or make honey." + Course 4 Bee Params 8_instruction: "Challenge: Now there's honey to deal with + too! Rewrite your function to use both the number of honey units and the number + of nectar units. How would you use those numbers to decide what you should + do?" + Course 4 Bee Params Ex_instruction: "Try using your new function to collect + all of this nectar." + Course 4 Binary 1_instruction: "Here's a function that takes a binary string + of 1's and 0's and instructs the farmer to turn on the go from left to right, + top to bottom, turning on the squares where the number has a zero. Run the + code provided to see how the farmers uses binary to draw an image." + Course 4 Binary 2_instruction: "What binary string could you loop 8 times to + draw this image? Hint: the number \"1\" fills a hole." + Course 4 Binary 3_instruction: "Can you draw this pattern by looping a single + binary string?" + Course 4 Binary 5 (copy 1)_instruction: "Which binary string, repeated 10 times, + will draw this image?" + Course 4 Binary 5_instruction: "Which binary string, repeated 10 times, will + draw this image?" + Course 4 Binary 6 (copy 1)_instruction: "Which binary string, repeated 10 times, + will draw this image?" + Course 4 Binary 6_instruction: "Which binary string, repeated 10 times, will + draw this image?" + Course 4 Binary 7_instruction: "Which binary string, repeated 10 times, will + draw this image?" + Course 4 Binary 8_instruction: "You can complete the most of this image by + looping a 5 bit binary number - then you'll need one more 4 bit number to + get the bottom right-hand corner." + Course 4 EC 1a_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 1b_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 2a_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 2b_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 2c_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 2d_instruction: "No rules. No clues. Just the challenge!" + Course 4 EC 3_instruction: "Use what you learned in the previous level to draw + an image like this. Note: The code becomes more simple if you incorporate + parameters. " + Course 4 EC 3a_instruction: "Extreme Challenge: No rules. No clues. Just the + challenge!" + Course 4 Maze 1_instruction: "Get the angry bird to the pig!" + Course 4 Maze 2_instruction: "Avoid the TNT!" + Course 4 Maze 3_instruction: "Program the angry bird to get to the pig. " + Course 4 Maze 4_instruction: "Try the \"repeat\" block to use fewer blocks + when solving this puzzle..." + Course 4 Maze 5_instruction: "Can you solve this puzzle using the fewest number + of blocks possible?" + Course 4 Maze 6_instruction: "Can you solve this puzzle using the fewest number + of blocks possible?" + Course 4 Play Lab For Loops 2_instruction: "This time, let's try counting + the odd numbers from 1 to 100." + Course 4 Play Lab Params 1_instruction: "Here's a function called `jump` that + causes your main character to jump up 100 pixels. Run the program and use + the jump function to collect all of the flags by moving the dog with the arrow + keys." + Course 4 Play Lab Params 10_instruction: "We've added one last function for + you. \r\n\r\nUse an \"if\" statement to program your game to call the \"level_up\" + function only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor + example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 + to move to the next puzzle. " + Course 4 Play Lab Params 2_instruction: "Now we've got flags that are too + high for our current jump! Let's use both the \"up\" and \"down\" arrows + so that we can have multiple jump heights. \r\n\r\nWe need to add a parameter + to our jump function called \"height\". The up arrow should cause the dog + to jump 200 pixels and the down arrow should make it jump only 100 pixels. + " + Course 4 Play Lab Params 3_instruction: "We have added another parameter to + the jump function so that we can use it with other actors. Each actor is represented + by a number, starting from one. Edit the \"jump\" function so that it uses + the \"actor\" parameter to make the correct character jump. " + Course 4 Play Lab Params 4_instruction: "Here's a function called `patrol`. + \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 pixels." + Course 4 Play Lab Params 5_instruction: "Edit the the \"patrol\" function to add an \"actor\" parameter, so that we can call it for each of the actors on the screen. Remember, the actors correspond to numbers 1, 2, and 3." - grade5_playlab_variables11_instruction: "Add another parameter called \"speed\" + Course 4 Play Lab Params 6_instruction: "Add another parameter called \"speed\" to the \"patrol\" function. Try using a \"set speed\" block with the new \"speed\" parameter to help Penguin get both flags before the other sprites even get one." - grade5_playlab_variables12_instruction: "Let's have some fun! Look at the - code provided to see if you can figure out what each block does. \r\nWhen - you're done, use the arrow keys to control Dog and collect all of the flags.\r\nNOTE: - You don't need to make any changes to the program" - grade5_playlab_variables13_instruction: "Use the `when actor touches` block - to send Dog back to the top-left ONLY if Dog touches any of the other actors." - grade5_playlab_variables14_instruction: "It's free play time! Have fun with - all the blocks in your tool box. " - grade5_playlab_variables1ask_instruction: "This time, when you press 'run', - you will see a 'prompt' asking you for a number. This number will be stored - in a variable used to set the dog's speed.\r\n\r\n\r\nPay attention to how - this program is written!" - grade5_playlab_variables2_instruction: "The race in that last puzzle wasn't + Course 4 Play Lab Params 7_instruction: "Let's have some fun! Look at the + code provided to see if you can figure out what each block does. \r\nWhen + you're done, use the arrow keys to control Dog and collect all of the flags.\r\nNOTE: + You don't need to make any changes to the program" + Course 4 Play Lab Params 8_instruction: "Use the `when actor touches` block + to send Dog back to the top-left ONLY if Dog touches any of the other actors." + Course 4 Play Lab Params 9_instruction: "Here's our game from an earlier stage, + but most of the code is hidden. There’s a new function `score_points.`\r\n\r\nEdit + the function so that a new parameter called `points` can be added to `player_score`. + \r\n\r\nThe variable `player_score` should increase each time Dog tags Cat + with pie, and decrease each time that Cat tags Dog with a sandwich.\r\n\r\nNote: + When you're done, click \"Run\" to play. When Dog scores 6 points, you will + move on to the next puzzle. " + Course 4 Play Lab Vars 1_instruction: "This time you don't have to write any + code, just hit \"Run\" to play the game! In this game, you're the dog who + is trying to collect more flags than the cat. Use the down arrow to control + the dog. Press \"Finish\" when you're done playing." + Course 4 Play Lab Vars 2_instruction: "The race in that last puzzle wasn't very fair! Change the `dog_speed` variable to make sure you can collect more flags than Cat. The first to collect 10 flags wins!" - grade5_playlab_variables3_instruction: "Use the left and right arrows to move, + Course 4 Play Lab Vars 3_instruction: "Use the left and right arrows to move, and the up arrow to jump. See if you can collect all of the flags." - grade5_playlab_variables4_instruction: "Now we're using a variable called - \"height\" to control how high the dog can jump. Update the \"height\" variable - so that the dog can jump high enough to reach all the flags." - grade5_playlab_variables5_instruction: "You've seen now how a variable can - be used to set the height of an actor's jump. How else could you use a variable?\r\n\r\nLet's - build a game! First we'll need a score. Try setting the 'points' variable - to give yourself 10 free points!" - grade5_playlab_variables6_instruction: "Use the right arrow to throw pie.\r\n\r\nIn + Course 4 Play Lab Vars 4_instruction: "Now we're using a variable called \"height\" + to control how high the dog can jump. Update the \"height\" variable so that + the dog can jump high enough to reach all the flags." + Course 4 Play Lab Vars 5_instruction: "Let's build a game! First we'll need + a score. Rebuild the code that you saw in the last level to set the score + to 10. " + Course 4 Play Lab Vars 6 (copy 1)_instruction: "Cool, now we've got our score + variable, but how are we going to make it useful? How about adding to your + score variable each time you hit the enemy with a fireball? Use the \"when + actor 2 touches anything\" event to trigger an update to your score when your + fireballs hit the cat. You can increment the score by setting score = score + + 1. Get your score up to 10 (going one at a time!) to pass the level." + Course 4 Play Lab Vars 6_instruction: "Use the right arrow to throw pie.\r\n\r\nIn our game, how should we score points? Add 1 to your \"points\" variable each time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" event to trigger an update to your score. You can increment your variable by setting \"points = points + 1.\" Get your score up to 10 (going one at a time!) to pass the level." - grade5_playlab_variables6ask_instruction: "This time, you need 100 points to - win! Don't worry though, you can choose how many points you earn each time - you score a hit!\r\nTry adding the `ask` block and changing the number 1 out - for the variable `value`." - grade5_playlab_variables7_instruction: "Nice, now let's make sure this game + Course 4 Play Lab Vars 7_instruction: "Nice, now let's make sure this game isn't too easy to play. Any time Dog (actor 1) gets hit by a sandwich from Cat (actor 2), you should lose a point. Start with 10 points so it's not too hard. Let your score drop down from 10 to 0 to pass the level." - grade5_playlab_variables71_instruction: "Here's our game from an earlier stage, - but most of the code is hidden. There’s a new function `score_points.`\r\n\r\nEdit - the function so that a new parameter called `points` can be added to `player_score`. - \r\n\r\nThe variable `player_score` should increase each time Dog tags Cat - with pie, and decrease each time that Cat tags Dog with a sandwich.\r\n\r\nNote: - When you're done, click \"Run\" to play. When Dog scores 6 points, you will - move on to the next puzzle. " - grade5_playlab_variables81_instruction: "We've added one last function for - you. \r\n\r\nUse an \"if\" statement to program your game to call the \"level_up\" - function only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor + Course 4 Play Lab Vars 8 (copy 1)_instruction: "Alright, one last thing for + this game - let's set it up so the player can win (or lose). Use a forever + loop to check the value of score - if score is ever greater that 20, make + the enemy vanish. If the score is every less than 0, make the player vanish. + Click \"Finish\" when the game works like you'd like it to." + Course 4 Play Lab Vars 8_instruction: "Let's set up this game so the Dog can + win (or lose). Use a forever loop to check the value of score - if score is + ever greater that 20, make the enemy (the Cat) vanish. If the score is ever + less than 0, make the player (the Dog) vanish. Click \"Finish\" when the game + works like you'd like it to." + Course 4 Play Lab Vars 9_instruction: "Free Play time! Here are all of the + variables we've played with so far in this stage, as well as a few more in + case you want them. \r\n\r\nNotice that there are now so many blocks in our + toolbox that they need to be organized! Here, we've put each piece into + an appropriate category. Take some time to explore everything that is available. + When you're done browsing, make a game or story using repeats, variables, + and events. \r\n\r\nHint: scroll down to see all the commands in the workspace." + Course 4 Play Lab Vars_instruction: "Alright, one last thing for this game + - let's set it up so the player can win (or lose). Use a forever loop to + check the value of score - if score is ever greater that 20, make the emeny + vanish. If the score is every less than 0, make the player vanish." + Course 4 Play Labs For Loops 1_instruction: "Let's make the dog speak every + number from 1 to 100. Use a `for` loop and the counter block to speak the + counter variable each time the loop is run." + Course 4 Play Labs For Loops 2_instruction: "This time, help Olive the Cat + count only the odd numbers from 1 to 101." + Course 4 Play Labs For Loops 3_instruction: "If we count by larger numbers, + we count even higher in the same amount of time. Try making Pirate Pegleg + count from 10 up to 1000, adding 10 at a time." + Course 4 Play Labs For Loops 4_instruction: "Changing the increment can be + helpful, but we're still counting linearly (each number is the same distance + from the last) What if I wanted to count exponentially? Without changing the + settings in this for loop, can you count 1, 4, 9 , 16, 25... (counter squared)?" + Course 4 Play Labs For Loops 4a_instruction: "Now, let's blend the variables + from Stage 7 together with your \"counter\" variable to make some magic happen. \r\n\r\nIn + this puzzle, Dog will count from 0 to 1000 by \"increment\". Set the \"increment\" + variable to 10 at the beginning of your code to see what happens." + Course 4 Play Labs For Loops 5_instruction: "In the last stage we counted the + square of each number. Try changing \"counter ^ 2\" to \"counter ^ 3\" to + count the cube of each number (1, 8, 27, 64, 125, 216, 343…)" + Course 4 Play Labs For Loops 5a_instruction: "In this puzzle, Dog will be your + time keeper.\r\n\r\nDog will count from 0 to 30 by \"increment\". The \"increment\" + variable will begin with a value of 1.\r\n\r\nCan you make it so that each + time you click Dog, the increment increases by 2? Click the forward arrow + to run the for loop.\r\n\r\nRun the loop a couple of times, clicking Dog before + each one." + Course 4 Play Labs For Loops 6_instruction: "You may recall that a prime number + is any whole number that is only divisible by itself and 1. Use the \"is_prime\" + function to speak out only the prime numbers from 1 to 100." + Course 4 Play Labs For Loops 6a_instruction: "Dog will still keep time by counting + with our \"for loop\" by \"increment\", but this time, we will add The Wizard + into the mix. Can you change the code so that \"increment\" goes up by two + each time The Wizard is clicked?\r\n\r\nWatch out! The Wizard moves quickly!" + Course 4 Play Labs For Loops 7_instruction: "Could you use a for loop to help + me speak the sequence 1, 4, 7, 10, 13, 16, 19, 22, 25?" + Course 4 Play Labs For Loops 7a_instruction: "Now we're getting somewhere! What + if we start counting how many times we can click The Wizard before Dog gets + to 30? \r\n\r\nFinish adding blocks to The Wizard so that every time he's + clicked the variable \"clicked\" increases by one. You can ignore \"increment\" + for now.\r\n\r\nDog will start counting when you click \"Run\"." + Course 4 Play Labs For Loops 8_instruction: "Now, help the actors move as they + count. \r\n\r\nDog should move and count by adding 2 (counter + 2) each time. Cat + will move and count by multiplying by 2 (counter * 2) each time. Penguin + will move and count to the power of 2 (counter ^ 2) each time. Who will reach + their flag first?" + Course 4 Play Labs For Loops 8a_instruction: "To finish our game, we need to + bring back the \"increment\" variable! Let's tie it to the level of the + game.\r\n\r\n1) Keep track of the number of times The Wizard is clicked.\r\n2) + If The Wizard is clicked at least 10 times before Dog counts to 30, raise + \"increment\" by 1 and start again.\r\n3) If The Wizard does not get clicked + at least 10 times, the game is over." + Course 4 Playlab For Loop Freeplay_instruction: "Freeplay: Use everything you've + learned so far to make a game that includes a `for` loop!" + Course 4 Playlab For Loops 4b_instruction: "Can you change the **increment** + in one of the loops so that the race is a tie?" + Course 4 Playlab For Loops 5b_instruction: "Adjust the interval on these `for` + loops so that the two characters end in the exact same place." + Course 4 Playlab For Loops 6b_instruction: "Edit this `for` loop to create + a game that's fun for you to play! \r\nPress \"Run\" and click Madame Unicorn + as many times as you can. Can you beat our score of 24? " + Course 4 SCF 1_instruction: "Use the suggested functions to draw four rows + of hexagons. Notice how our even numbered rows are shifted to the right?" + Course 4 SCF 1a_instruction: "Can you figure out how to collect all of this + nectar with the fewest blocks possible?" + Course 4 SCF 1b_instruction: "Can you figure out how to collect all of this + honey with the fewest blocks possible?" + Course 4 SCF 2_instruction: "Use what you learned in the previous level to + draw an image like this. Note: The code becomes more simple if you incorporate + parameters. " + Course 4 SCF 3 Fail 1_instruction: "Can you figure out how to..." + Course 4 SCF 3 Fail 2_instruction: "Can you figure out how to..." + Course 4 SCF 3_instruction: "Use what you learned in the previous level to + draw an image like this. Note: The code becomes more simple if you incorporate + parameters. " + Course 4 SCFL 1_instruction: "Solve this puzzle using the fewest number of + blocks possible." + Course 4 SCFL 1a_instruction: "Can you get Skrat to his acorn using as few + blocks as possible?" + Course 4 SCFL 1b_instruction: "Can you get Skrat to his acorn using as few + blocks as possible?" + Course 4 SCFL 2_instruction: "Solve this puzzle using the fewest number of + blocks possible." + Course 4 SCFL 3_instruction: "Can you figure out how to re-create this drawing?" + Course 4 SCFL 4_instruction: "Can you figure out how to re-create this drawing?" + Course 4 SCFL 5_instruction: "Can you figure out how to re-create this drawing?" + Course 4 SCFL 6_instruction: "Can you figure out how to re-create this drawing + with a single loop?" + Course 4 SCFL 7_instruction: "The artist wants to catch some waves! Can you + figure out how to re-create this drawing?" + Course 4 SCFP 1_instruction: "Create a function with parameters that allows + the artist to jump backward and forward by x pixels, and also up and down + by y pixels (using positive and negative numbers)." + Course 4 SCV 1_instruction: "Click here to view the instructions again." + Course 4 SCV 2_instruction: "Click here to view the instructions again." + Course 4 SCV 3_instruction: "Now for a game of tag! Tag Cat to get 2 points. + Tag Penguin to get 3 points. Get exactly 10 points to win!\r\nBut be careful, + when Cat and Penguin tag each other, they take points away.\r\n\r\nAdd the + blocks necessary to make this game work the way it's been explained. How + will you get Dog to move in all directions using the arrow keys? How will + you add points when Dog tags Cat or Penguin? How will you subtract points + when Cat and Penguin touch?" + Course 4 SCV 4_instruction: "Solve this puzzle with the fewest number of blocks + possible." + Course 4 SCV 5_instruction: "Solve this puzzle with the fewest number of blocks + possible." + Course 4 SCV 6_instruction: "Click here to view the instructions again." + Course 4 SCVP 1_instruction: "Create a function with parameters that allows + the artist to jump backward and forward by x pixels, and also up and down + by y pixels (using positive and negative numbers)." + Course 4 Variables Assessment_instruction: "Can you create this image using + a variable for sides? Each line should be 50 pixels long." + Course1BeePuzzle12_instruction: "Get three nectars and then make two honey" + Course1MazeAssessment1_instruction: "This is a test!\r\nMove one way, then + another to get me to the pig" + Course1MazeAssessment2_instruction: "This is a test!\r\nMove one way, then + another to get me to the pig." + Crack Random Substitution_instruction: "Instructions" + Crack a Caesar Cipher_instruction: "Instructions" + ECSPD Binary Odometer_instruction: "This is another resource you could use + with your students." + Eval Booleans 1_instruction: "Boolean operators (like >, <, =) allow us to + compare different values, returning either true or false. Click \"Run\" to + see how this expression evaluates." + Eval Booleans 2_instruction: "Can you set the values so that this expression + evaluates as true?" + Eval Booleans 3_instruction: "The string-length function returns the number + of characters in a string (including spaces!) - make this code evaluate to + true." + Eval Booleans 4_instruction: "Here's an Evaluation Block called AND - it returns + true if both of its parameters are true, otherwise it returns false. Edit + the x variable so that this expression returns true." + Eval Booleans 5_instruction: "This OR block returns true if either of its parameters + is true. Otherwise, if both parameters are false it will return false. Set + the y variable to a value that will cause this expression to return false." + Eval Booleans 6_instruction: "Here's one more boolean block called NOT. This + block flips true to false, or false to true. If you wrap this block of code + in a NOT block, it should return true (because we are asking if the two expressions + do NOT produce equal values)." + Eval Booleans Free Play_instruction: "Free Play: Try out some creations of + your own using Booleans." + Eval Booleans_instruction: "Booleans allow us to compare different values, + returning \"true\" if the are equal, or \"false\" if they are not. What do + you think this code will evaluate to?" + Eval Cond 1_instruction: "The cond block checks the boolean expressions in + the left column, and as soon as it finds one that returns \"true\" it runs + the corresponding code on the right. If none of the expressions evaluate to + \"true,\" it runs the bottom block. Update the \"temperature\" variable so + that this block returns \"It's just right.\"" + Eval Cond 2 (copy 1)_instruction: "This condition returns a different shape + based on the value of the \"sides\" variable - change the value of \"sides\" + so that the conditional returns a triangle." + Eval Cond 2_instruction: "This condition returns a different shape based on + the value of the \"sides\" variable - change the value of \"sides\" so that + the conditional returns a triangle." + Eval Cond 3 (copy 1)_instruction: "Can you write a conditional that checks + the variable \"age\" and returns \"Old enough to vote and drive\" if age > + 17, \"Old enough to drive\" if age is > 15, and \"Can't drive or vote\" if + neither conditions is true. Hint: The first condition to return \"true\" wins + - make sure you put your conditions in the right order." + Eval Cond 3_instruction: "Can you write a conditional that checks the variable + \"age\" and returns \"Old enough to vote and drive\" if age > 17, \"Old enough + to drive\" if age is > 15, and \"Can't drive or vote\" if neither conditions + is true. Hint: The first condition to return \"true\" wins - make sure you + put your conditions in the right order." + Eval Cond 4_instruction: "We can use the string=? function to make conditionals + that respond to text input. Here's a function called green shape that takes + a string for the type of shape. Complete the conditions so that the correct + solid green shape is returned when the function is run with \"circle\", \"triangle\", + \"square\", or \"rectangle\"." + Eval Cond 5_instruction: "Here's a similar function red shape with an additional + variable for size. Complete the conditionals so the correct solid red image + of a given size is drawn for \"circle\", \"triangle\", and \"star\"." + Eval Cond 6_instruction: "Write a function called food-critic, which takes + in the name of a food and produces a String that says how you feel about that + food. For example, (food-critic “pizza”) might evaluate to “delicious”, but + (food-critic “rotten eggs”) might evaluate to “gross!”. Choose at least two + foods to review, but you can you write more if you like! Don’t forget to + add an “else” clause!\r\nOne example - and part of the definition - has already + been done for you!" + Eval Cond 7_instruction: "Free Play: Write a function called green-shape, which + takes in the name of a shape and produces a solid green shape. Your function + should work with at least “circle”, “star” and “rectangle”, but you can add + other shapes if you like. You can choose the size of each shape. Don’t forget + to add an “else” clause!\r\nOne example - and part of the definition - has + already been done for you!\r\n" + Eval Cond 8_instruction: "Free Play: Suppose you want to own a car at 21, or + have your own business by 30. Write a function called life-goals, which takes + in an age and produces a string that describes your life goals by then. Don’t + forget to add an “else” clause!\r\n" + Eval Contracts 1_instruction: "Use the \"star\" function to produce a red star + with a 60 pixel radius" + Eval Contracts 10A_instruction: "Alright let's complete this puzzle with a + Green Square that is 175 pixels in size." + Eval Contracts 11A_instruction: "Can you complete this puzzle to read \"Hello + World\" in the banner?" + Eval Contracts 2_instruction: "Check out the \"rotate\" function - can you + use it to rotate this 90 pixel green square by 45 degrees?" + Eval Contracts 3_instruction: "Try using the \"text\" function to write this + teal text at size 40." + Eval Contracts 4 A_instruction: "The \"scale\" function returns an image that + is scaled either larger or smaller than the input image. Try scaling this + circle by a factor of 10 - how is the resulting image different than if you'd + just made a circle of that size in the first place?" + Eval Contracts 4_instruction: "The scale function returns an image that is + either larger or smaller than the input image. Try scaling this circle by + a factor of 10. How is the returned image different than if you'd just made + a circle of that size in the first place?" + Eval Contracts 8A_instruction: "Can you complete this puzzle? The big-triangle + is 200 pixels in size and purple?" + Eval Contracts A_instruction: "Use the star function to produce a solid red + star with a 60 pixel radius" + Eval Contracts C_instruction: "Check out the rotate function - can you use + it to rotate this 90 pixel green square by 45 degrees?" + Eval Contracts E_instruction: "Try using the text function to write \"Hello, + world!\" in teal at size 40." + Eval Contracts shrink_instruction: "Can you complete this image using the \"shrink\" + function block? The radius is 20. " + Eval Define Funcs 1_instruction: "Here's a new function called green-triangle + that takes a single Number for size and produces a green triangle. Use the + new function to create a 125 pixel green triangle." + Eval Define Funcs 2_instruction: "Let's look inside that green-triangle function + to see how it works. Can you modify it so that the green-triangle function + always draws outlined green triangles?" + Eval Define Funcs 3_instruction: "Here's the start of another new function + called purple-circle with a domain of one Number (the radius) and a range + of Image. The body of the function is broken though - fix it and then make + a purple circle with 150 pixel radius" + Eval Define Funcs 4_instruction: "Create a new function called aqua-star that + has a Domain of a single Number for radius and returns an aqua star of the + given radius. Run your new function with a radius of 75." + Eval Define Funcs 5_instruction: "Let's use that aqua-star function to make + a row of different sized stars. From left to right, the stars should have + radii of 25, 50, and 75." + Eval Define Funcs Test_instruction: "Here's the start of another new function + called purple-circle with a domain of one Number (the radius) and a range + of Image. The body of the function is broken though - fix it and then make + a purple circle with 150 pixel radius" + Eval Defining Vars Free Play 1_instruction: "Free Play: We've provided a function + that fills your screen with my-image. Change my-image to see what patterns + you can make." + Eval Design Recipe .1_instruction: "Here's a Design Recipe for a function + called square-circle with domain Number String and range Image. Click Edit + to write the function definition (you will see two examples provided)." + Eval Design Recipe 1 (copy 1)_instruction: "We're going to write a function + that draws a solid rectangle of any color that is twice wide as it is high. + Start with an example - draw a solid green rectangle that has a height on + 100 pixels." + Eval Design Recipe 1_instruction: "Alright, now given the Contract wide-rect: + Number String -> Image, write an example - draw a solid green rectangle that + has a height of 100 pixels." + Eval Design Recipe 2 (copy 1)_instruction: "Let's do one more example before + writing the function definition - this time draw a solid red rectangle with + a height of 75 pixels." + Eval Design Recipe 2_instruction: "Let's do one more example before writing + the function definition - this time draw a solid red rectangle with a height + of 75 pixels." + Eval Design Recipe 3_instruction: "The Design Recipe for wide-rect already + has a contract and one example. Can you write a second example and then complete + the definition? The wide-rect function should produce a rectangle of given + color that is twice as wide as it is high." + Eval Design Recipe 4_instruction: "Use the Design Recipe to create a function + starburst. When given a number of points and an outer radius, starburst returns + a yellow radial star with given points, and an inner radius that is half the + outer radius." + Eval Design Recipe 5_instruction: "Using the Design Recipe, write a function + striped-flag that takes two colors and produces a flag that is 250 pixels + wide, 150 pixels tall, with three even horizontal stripes of given colors, + in the order color2, color1, color2." + Eval Design Recipe 6_instruction: "Write a function large-polygon that should + output a solid polygon of given sides and color that takes up most of the + window, regardless of the number of sides. To make sure that the polygon doesn't + get too large as you increase the number of sides, side length should be inversely + proportional to side number, with a length of (800/sides)." + Eval Design Recipe Free Play_instruction: "Free Play: Use the Design Recipe + to create some functions of your own design" + Eval Free Play_instruction: "Free Play: Make art with code!" + Eval Strings Images .1_instruction: "So far we've only dealt with a single + type of data, Numbers. Another type of data is a String, which is any combination + of letters, numbers, or other characters wrapped in quotation marks. Run the + String \"Hello, world!\" and see what happens." + Eval Strings Images .2_instruction: "The string-append function takes two Strings + and returns a single combined String. Add a String \"Universe\" to the second + argument of string-append." + Eval Strings Images 1_instruction: "The third type of data we're going to + use is an Image. This star function takes in a Number and two Strings, and + it evaluates to an Image. Use this function to make a solid red star with + radius of 100." + Eval Strings Images 2_instruction: "Free Play: Every Evaluation Block is color-coded + to let you know which data type it returns and which types it needs for its + parameters. The last parameter of the triangle function takes a String that + controls its color - try some different colors to see what works." + Eval Strings Images 3_instruction: "Some functions can only take a specific + set of Strings, such as the second argument of this circle function, which + controls its style. Draw this orange outline circle using the special String + block with a dropdown to make sure you only use valid styles." + Eval Strings Images 4_instruction: "Try using the rectangle block to draw this + solid, red rectangle - it is 175 pixels wide and 100 pixels tall." + Eval Strings Images 5_instruction: "Try using this new Evaluation Block called + overlay to place a 100 pixel white triangle on top of a 200 pixel red circle." + Eval Strings Images 6_instruction: "Use the overlay block to place a 75 pixel + radius yellow star on top of a 150 pixel long blue square." + Eval Strings Images 7_instruction: "The offset block lets you move an image + relative to where it would normally be placed. Use this block to offset the + square by 100 pixels on the y-axis." + Eval Strings Images 8_instruction: "Here's a different kind of star block + - it's called radial-star and it allows you to draw stars with any number + of points! Use it to create a 7 point solid orange star with an inner radius + of 75 pixels and an outer radius of 175 pixels." + Eval Strings Images Free Play_instruction: "Free Play: Explore the blocks available + to create something interesting. Make sure to share your favorite creations." + Farmer for Authored Hint testing_instruction: "Wow, I found a really deep hole! + I don't know how many shovelfuls of dirt it needs. Can you write a program + that fills it until the ground is even? Hint: Try using the while loop this + time." + Farmer for TTS testing_instruction: "Wow, I found a really deep hole! I don't + know how many shovelfuls of dirt it needs. Can you write a program that fills + it until the ground is even? Hint: Try using the while loop this time." + Finalize Your Chaser Game v.1_instruction: "Introducing the setPosition command! + Replace the moveTo in the button-click event handler to use setPosition to + move the button itself to a random location when it's clicked." + Food Fight!_instruction: "We've added one last function for you. \r\n\r\nUse + an \"if\" statement to program your game to call the \"level_up\" function + only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 to move to the next puzzle. " - grade5_playlab_variables9_instruction: "Here's a function called `patrol`. - \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 pixels." - grade5_playlab_variables_freeplay_instruction: "Free Play time! Here are all - of the variables we've played with so far in this stage, as well as a few - more in case you want them. \r\n\r\nNotice that there are now so many blocks - in our toolbox that they need to be organized! Here, we've put each piece - into an appropriate category. Take some time to explore everything that is - available. When you're done browsing, make a game or story using repeats, - variables, and events. \r\n\r\nHint: scroll down to see all the commands - in the workspace." - grade5_playlab_variables_jump1_instruction: "This puzzle uses a hidden function - that makes the dog jump when the 'up' arrow is pressed. The height of the - jumps can be set at the start of the game using the 'jumpPower' variable. - Try to touch all of the flags!" - grade5_prompt_test_instruction: "Variables aren't always numbers. What if - you wanted to store a word or text? Experiment with the new `ask` block." - gradek_adventurer_loops1_instruction: "Three piles of gold! Collect all three." - gradek_adventurer_loops10_instruction: "Help me get all of the gold from this - cave." - gradek_adventurer_loops2_instruction: "How can Laurel collect all five piles - of gold using only one `[E-->]` block?" - gradek_adventurer_loops3_instruction: "Can you fix Laurel's path to get all - of this gold?" - gradek_adventurer_loops4_instruction: "Use what you learned to get all of the - coins." - gradek_adventurer_loops4a_instruction: "Add to this code to collect all of - the coins." - gradek_adventurer_loops5_instruction: "What should you add to this code to - get all of the gold?" - gradek_adventurer_loops6_instruction: "Write the code to get all of this gold." - gradek_adventurer_loops7_instruction: "Write the code to get all of this gold." - gradek_adventurer_loops7_challenge_instruction: "**Challenge:** The gold goes - all the way up these stairs! Write the code to help me get it all." - gradek_adventurer_loops8_instruction: "Help me get all of the gold from this - deep valley." - gradek_adventurer_loops9_instruction: "Help me get all of the gold from this - cave." - gradek_adventurer_loopsFP_instruction: "Eureka! Collect as much gold as you - can!" - gradek_adventurer_loopsPre_instruction: "This is Laurel the Adventurer. Mover - her around and get as much gold as you can!" - gradek_artist_loops1_instruction: "Help the artist draw this line two times - forward." - gradek_artist_loops2_instruction: "Our artist is trying to draw a line five - times, but can't get it right. Can you help?" - gradek_artist_loops3_instruction: "Now, use a `repeat` loop to draw this line - five times!" - gradek_artist_loops4_instruction: "Draw a line seven steps long. This will - become our horizon." - gradek_artist_loops5_instruction: "Let's put a nice hill in the back." - gradek_artist_loops6_instruction: "Use the `repeat` loop to add waves to the - water." - gradek_artist_loops7_instruction: "We need a ladder up to the boat." - gradek_artist_loops8_instruction: "Challenge: The stairs down to the dock are - broken. Help me fix them." - gradek_artist_loops9_instruction: "Time to head back to land. Help me put down - stones so I don't fall in!" - gradek_artist_loopsA_instruction: "Help me build steps to watch the ship sail - away." - gradek_artist_loopsFP_instruction: "The artist saw something funny in the distance. Draw - what you think he saw." - gradek_artist_loopsPre_instruction: "This is a new type of puzzle called \"Artist\". - Play with the level and draw something fun." - gradek_playlab_events1_instruction: "Make your robot say \"Hello!\" when the - button is clicked." - gradek_playlab_events1a_instruction: "Add a block so that when you click the - \"up\" button, Olive the Cat walks up." - gradek_playlab_events1c_instruction: "Jorge the Dog wants to say \"Hi there.\" Can - you help him?" - gradek_playlab_events2_instruction: "Edit the code so that when the second - bird is clicked, your program plays a sound!" - gradek_playlab_events2a_instruction: "Add a block so that when you click \"down\" - Olive the Cat walks down." - gradek_playlab_events2c_instruction: "Help Jorge the Dog get moving by connecting - the `move left` block to the `when left` event block that is already in the - workspace." - gradek_playlab_events3_instruction: "When the third bird is clicked, the background - should change to a city. Can you add code to make this happen?" - gradek_playlab_events3a_instruction: "When the third bird is clicked, the background - should change to a city. Can you add code to make this happen?" - gradek_playlab_events3b_instruction: "Add a button so that Olive the Cat moves - right when you click the \"right\" button." - gradek_playlab_events3c_instruction: "Now, get Jorge to move right when the - `right` button is clicked." - gradek_playlab_events4_instruction: "Add code to make something happen when - the fourth bird is clicked. Be creative!" - gradek_playlab_events4a_instruction: "Add a block so that Olive the Cat moves - left when you click the \"left\" button." - gradek_playlab_events4c_instruction: "Add events to have Jorge move up and - down when the `up` and `down` buttons are pressed." - gradek_playlab_events5_instruction: "About My Robot Project! Write code so - that clicking on each bird shows a new fact about your robot." - gradek_playlab_events5a_instruction: "About My Robot Project! Write code so - that clicking on each bird shows a new fact about your robot." - gradek_playlab_events5c_instruction: "Make this more interesting by changing - the background and playing a random sound when Jorge is clicked." - gradek_playlab_eventsA_instruction: "Now, have the cat change to a random size - AND have it play a random sound when you click the center button." - gradek_playlab_eventsFP_instruction: "Add anything you want to this game. Can - you make the dinosaur disappear when Jorge runs into him?" - gradek_playlab_eventsPre_instruction: "This is a Play Lab level. Move blocks - to the workspace and see what happens!" - gradeK_sequence_4_instruction: "Try this one yourself from the beginning." - group test_instruction: "Make a game" + Food Fight_instruction: "You can make whatever you want in play lab! This is + an example of a game you can make in play lab." + FoodFight_instruction: "This is an example of a game you can make in play lab." + Frequency Analysis_instruction: "Test" + 'Game Lab Workshop: Random_instruction': "Pick a shape block and use calls + to randomNumber() in place of one or more of the parameters. Maker sure you + run it a few times so you can see the effect of randomization." + Geometric Pattern_instruction: "Project Idea: Create a pattern using geometric + ideas like shapes. This requires persistence and planning!" + Geometric Sun_instruction: "Project Idea: Create a pattern using geometric + ideas like shapes. This requires persistence and planning!" + 'Grade 4 Example PlayLab Project #1_instruction': "Take a look at this project. Do + you see how it was made?" + 'Grade 4 Example PlayLab Project #2_instruction': "Take a look at this project. Do + you see how it was made?" Guess The Number_instruction: "Build whatever you want. This is an example of a number-guessing game!" Harvester Test_instruction: "It's harvest time! But I forgot what crop I planted @@ -5254,8 +2922,6 @@ en: Harvesting_instruction: "Uh oh, I lost my map and can't remember what I planted. Every sprout could grow up to be corn, beans, or pumpkins. Can you write some code to pick all the crops, no matter what they are?" - harvey_pixelation_instruction: "Encode an image of anything you like using - binary. The binary language will be represented with '0' and '1' only." Infinity_catch_instruction: "Can you make Elsa (\"actor 2\") catch up with Anna by using the arrow keys?" Infinity_finale_instruction: "Create anything you like and share it!" @@ -5318,13 +2984,9 @@ en: 'Internet Simulator: Sending Text_instruction': "Work with a partner or in a small team to develop a protocol that allows you to send formatted text. See the worksheet handed out by your teacher for more detailed instructions!" - jessie-test_instruction: "Lots of instructions" Just for Testing_instruction: "Test instructions" K-1 Artist 1 Assessment 1_instruction: "Draw a short line up and a long one to the right!" - K-1 artist 1 level 10_instruction: "Draw the dashed line by using both the - jump and draw blocks" - K-1 artist 1 level 9_instruction: "Draw this using three lines" K-1 Artist Loops 1_instruction: "Draw this line by moving East 4 times." K-1 Artist Loops 2_instruction: "Now, draw the same line using a loop." K-1 Artist Loops 3_instruction: "Can you loop these blocks to draw 6 lines?" @@ -5410,7 +3072,6 @@ en: K-1 Building a Foundation Assessment_instruction: "Build a three level pyramid, there are no other directions, so just play with the pieces until you get it!" - k-1 maze 1_instruction: "Can you make me move West to get to the pig?" K-1 Maze 10_instruction: "Go around the TNT to get me to the pig! " K-1 Maze 11_instruction: "Trace the path and lead me to the silly pig. Avoid TNT or the feathers will fly! Hint: He's South of me." @@ -5426,29 +3087,6 @@ en: K-1 Maze Assessment 12_instruction: "Assessment Level" K-1 Maze Assessment 13_instruction: "Assessment Level" K-1 Maze Assessment 2_instruction: "Assessment -- Get me to the pig!" - K-1 maze debug 1_instruction: "Change the code to get me to the pig!" - K-1 maze debug 10_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 maze debug 11_instruction: "This is a test!\r\nDebug this level by rearranging - and changing blocks to get me to the pig" - K-1 maze debug 2_instruction: "Figure out what is missing and then add blocks - to get me to the pig!" - K-1 maze debug 3_instruction: "Something is not quite right. REMOVE blocks - to get me to the pig!" - K-1 maze debug 4_instruction: "Run through these blocks and fix them! I think - I might be going in the wrong direction." - K-1 maze debug 5_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 maze debug 6_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 maze debug 7_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 maze debug 8_instruction: "Debug this level by rearranging and adding blocks - to get me to the pig!" - K-1 maze debug 9_instruction: "Debug this level by rearranging and changing - blocks to get me to the pig!" - K-1 Maze debug Assessment 1_instruction: "Assessment -- Debug this level by - rearranging and adding blocks to get me to the pig!" K-1 Maze Loops 1_instruction: "Get me to the pig!" K-1 Maze Loops 10_instruction: "Get me to the pig! Using the `repeat` loop will make it much easier." @@ -5474,6 +3112,32 @@ en: one way, then another to get me to the pig." K-1 Maze Sequence Assessment 2_instruction: "Move one way, then another to get me to the pig." + K-1 Maze debug Assessment 1_instruction: "Assessment -- Debug this level by + rearranging and adding blocks to get me to the pig!" + K-1 artist 1 level 10_instruction: "Draw the dashed line by using both the + jump and draw blocks" + K-1 artist 1 level 9_instruction: "Draw this using three lines" + K-1 maze debug 1_instruction: "Change the code to get me to the pig!" + K-1 maze debug 10_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" + K-1 maze debug 11_instruction: "This is a test!\r\nDebug this level by rearranging + and changing blocks to get me to the pig" + K-1 maze debug 2_instruction: "Figure out what is missing and then add blocks + to get me to the pig!" + K-1 maze debug 3_instruction: "Something is not quite right. REMOVE blocks + to get me to the pig!" + K-1 maze debug 4_instruction: "Run through these blocks and fix them! I think + I might be going in the wrong direction." + K-1 maze debug 5_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" + K-1 maze debug 6_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" + K-1 maze debug 7_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" + K-1 maze debug 8_instruction: "Debug this level by rearranging and adding blocks + to get me to the pig!" + K-1 maze debug 9_instruction: "Debug this level by rearranging and changing + blocks to get me to the pig!" K2.0 sequence 1_instruction: "A bug! Fix the code to get me to the pig." K2.0 sequence 10_instruction: "Challenge: Move me around the TNT to get to the pig." @@ -5496,55 +3160,16 @@ en: can!" K2.0 sequence pre_instruction: "Play with these blocks to see if you can get me to the pig!" - Kiki_StarWars_Test_3_instruction: "Text" - Kiki_StarWars_Test_4_instruction: "Text" - Kiki_StarWars_Test_5_instruction: "Text" - kikiTesta_instruction: "Our adventurer wants to collect coins. But she can - only use 4 blocks to get them.\r\n\r\nCan you help her grab as many as she - can using just 4 blocks?" - kikiTesting_instruction: "See all angles of Stevie and Jorge" KTest1_instruction: "Can you make me move South once more to get to the pig?" KTest2_instruction: "Trace the path and lead me to the silly pig. Avoid TNT or the feathers will fly!" + Kiki_StarWars_Test_3_instruction: "Text" + Kiki_StarWars_Test_4_instruction: "Text" + Kiki_StarWars_Test_5_instruction: "Text" LaurelDebugging4Video1_instruction: "Move Laurel around and get as much gold as you can!" - level 'grade3_Loops_10_instruction: "Such a busy bee!\r\n\r\nHelp bee collect - all of the nectar and make all of the honey with the fewest blocks possible." - level 'grade3_Loops_11_instruction: "The shape of this path is different than - the others. \r\n\r\nCan you collect all of the nectar using as few blocks - as possible?" - level 'grade3_Loops_12_instruction: "Can you find the quickest way for the - bee to collect all of the nectar and make all of the honey?" - level 'grade3_Loops_2_instruction: "This time, use a loop to gather all of - the nectar." - level 'grade3_Loops_3_instruction: "Use a `repeat` loop to collect all of the - nectar." - level 'grade3_Loops_4_instruction: "Now use the `repeat` block to collect all - of the nectar and make all of the honey." - level 'grade3_Loops_5_instruction: "What a beautiful field of flowers! Help - the bee visit each one. Can you find a way to do it with fewer than 7 blocks?" - level 'grade3_Loops_6_instruction: "How many times can loops help you in this - puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete this - puzzle with the fewest blocks possible." - level 'grade3_Loops_7_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." - level 'grade3_Loops_8_instruction: "Collect all the nectar and make all of - the honey using the fewest blocks possible." - level 'grade3_Loops_9_instruction: "Collect nectar from each flower and make - honey at each honeycomb using the fewest blocks possible." - level grade3_Loops_2_instruction: "This time, use a loop to gather all of the - nectar." Limited Quantity of Blocks Test_instruction: "Get me to the pig by adding only one block" - love_spring_1_instruction: "Let's celebrate Spring! We have put some seeds - in the ground to prepare for the season's flowers. Can you cover them up - so that the birds don't eat them?" - love_spring_2_instruction: "Our flowers are in full bloom! Now we need the - bee to grab nectar from each one so he can make plenty of honey back at his - hive!" - love_spring_3_instruction: "Figure out how to change this code so that Robin - chooses a number between 1 and 20. \r\n\r\nWhen you're ready, press \"Run\" - and play until you guess Robin's number!" Luigi's Pizza 1_instruction: "Welcome to Luigi's Pizza! To order a pizza, type the name of a topping into the cost function, and we'll return the price of that pizza. Try ordering a pepperoni pizza to start." @@ -5603,162 +3228,77 @@ en: Try getting inside the house by using the door to continue." MC HOC 2016 New Drop_instruction: "In Minecraft, sheep drop wool. Place the `drop` block in `when used`, then walk over and use the sheep to drop an item." - MC HOC 2016 New pn_instruction: "Now let's explore our world! Use the arrows - to walk around and press the space bar or tap the game space to 'use' items. - Try getting inside the house by using the door to continue." MC HOC 2016 New Spawn_instruction: "Now you can fill the world with what you want! Place`spawn` blocks under `when run` to spawn things when the game starts." MC HOC 2016 New Walk_instruction: "Let's explore our world! Move with the arrows, and press the space bar or tap the game board to use items. Use the door to get inside the house." + MC HOC 2016 New pn_instruction: "Now let's explore our world! Use the arrows + to walk around and press the space bar or tap the game space to 'use' items. + Try getting inside the house by using the door to continue." MC HOC 2016 SCORE LEVEL_instruction: "Some games let you keep score. Play tag with these Iron Golems and use the `add 1 to score` block to give yourself a point when you tag them. Reach five points to win!" MC HOC 2016 Village Test_instruction: "Oh no! Zombies have trapped you inside! Code the Iron Golem to chase and attack the zombies!" - Middle School Hackathon Pt 1_instruction: "(Click to see full instructions)" - Middle School Hackathon Pt 2_instruction: "(Click to see full instructions)" - Mike Pair Programming_instruction: "Here are the instructions" - Mike Test Bee Conditionals 1_instruction: "This cloud is blocking my view! - Check to see if there's a flower under the cloud, and only get nectar if - there's a flower. Be careful, it can change!" - Mike Test Bee Conditionals 2_instruction: "Collect all of the nectar. You can - only collect nectar from flowers, but you can check any space to see if there - is a flower." - mike3bit_instruction: "We start you with the 4x2 image Maddie was creating, - but we've left out the last few pixels. Finish off the image by figuring - out which colors are missing and encoding them." - mike3bitbird_instruction: "Here's an example of an image made with 3-bit color. - Try changing it to understand how it works. If you want to reset the image, - press \"Start Over\"." - mike3bitfreeplay_instruction: "Make something awesome and share it with your - classmates! You can copy and paste the value of a pixel to use it repeatedly." - mike3bitmario_instruction: "A careless binary coder typed in ONE extra 0 or - 1 somewhere within this image's data. The extra bit that is causing Mario - to glitch out! \r\n\r\nDelete the extra bit to restore Mario back to normal!" - MikeAssessment1_instruction: "Now do it right!" - MikeStar_instruction: "Draw this." - MikeStarHard_instruction: "Draw this." - MikeStarNested_instruction: "Draw this." - MikeTest1_instruction: "Who knows what you should do?!?!" - MikeTest2_instruction: "Draw something!" - MikeTest3_instruction: "Build Something" - MSM Big Game Empty_instruction: "All variables and functions are currently - empty stubs. Each puzzle progression will be focused on defining and handful - of them, and therefore adding functionality." - MSM Big Game Vars 1 (copy 1)_instruction: "In the Variables toolbox you'll - see several variables that define how your game characters look, move, and - interact" - MSM Big Game Vars 1_instruction: "In the Variables toolbox you'll see several - variables that define how your game characters look, move, and interact" - MSM Big Game Vars Backup_instruction: "In the Variables toolbox you'll see - several variables that define how your game characters look, move, and interact" - MSM Defining Vars 1 (copy 1)_instruction: "Write a program that produces a - 50 pixel solid green triangle." - MSM Defining Vars 1_instruction: "Write a program that produces a 50 pixel - solid green triangle." - MSM Defining Vars 2 (copy 1)_instruction: "If we wanted to make fifty green - triangles, it would be a pain to repeat that block of code 50 times. Let's - create a variable called \"my-shape\" and put the code for a 50 pixel solid - green triangle inside." - MSM Defining Vars 2_instruction: "If we wanted to make fifty green triangles, - it would be a pain to repeat that block of code 50 times. Let's create a - variable called my-shape and put the code for a 50 pixel solid green triangle - inside." - MSM Defining Vars 3 (copy 1)_instruction: "Take your \"my-shape\" variable - and use it with this provided code to draw two identical green triangles." - MSM Defining Vars 3_instruction: "Take your my-shape variable and use it with - this provided code to draw two identical green triangles that are 50 pixels - in size." - MSM Defining Vars 4_instruction: "Edit your my-shape variable so that it draws - 75 pixel solid red stars." - MSM Play Lab Butterfly 1_instruction: "Help Sam stay on the screen so that - you can always see at least a little piece of him. Using the arrow keys, see - how far Sam can go to the left while still staying onscreen. You’ll find that - Sam is onscreen as long as his x-coordinate is greater than -50. Then, fill - in the code to make Sam stay on the screen." - MSM Play Lab Butterfly 2_instruction: "Now make Sam stay on the right side - of the screen. You'll have to experiment to see how far he can go and still - be partially visible on the screen." - MSM Play Lab Butterfly 3_instruction: "Now, combine your work to make Sam stay - on both sides of the screen." - MSM Play Lab Game 2_instruction: "Variables can also be used to control the - speed of players in a game. Set the player speed and the enemy speed and see - how the movement changes. Speed can be between 2 and 12." - NetSim Standalone Automatic DNS_instruction: "In this version of the Internet - Simulator, a Domain Name System (DNS) is provided for you and knows the IP - addresses of all connected computers. Send a message in the form GET [hostname] - to the DNS service at address <yourRouterNumber>.15 to get a student's address." - NetSim Standalone Broadcast_instruction: "In this version of the Internet Simulator, - you can connect to up to 5 other people in a room. When you send messages - in the room, everyone receives them. What are some of the challenges of this - system, and how might you solve them?\r\n" - NetSim Standalone Classroom Routers_instruction: "In this version of the Internet - Simulator, everyone connects to a router and has a specific address. To send - messages, you have to address your message to the specific address of the - recipient, and the router will take care of delivering it to the right computer. - If there are other routers created in your class, ask for the address of one - of your classmates and send them a message! View the Log Router to see the - path the messages have taken through the network." - NetSim Standalone Freeplay_instruction: "In this configuration, most of the - options are turned on, and you can play with them. Have fun!" - NetSim Standalone Manual DNS_instruction: "In this version of the simulator - you can't see the other students' addresses. Instead, one of you must act - as a name service, to help share addresses with each other." - NetSim Standalone Packets TCP_instruction: "Messages on the Internet can take - many paths to get to their destination, and sometimes along the way the message - gets dropped. In this version of the Internet Simulator, there is a 10% chance - of a packet being dropped, multiple packets may take different paths to the - destination, and the default max packet size is set to 6 additional characters. - " - NetSim Standalone Routers Addresses_instruction: "For this activity, connect - to a router with the others in your group. Important note: The router will - only properly route messages where the first 4 bits are the To: address and - the second 4 bits are the From: address.\r\n\r\n[TODO: NetSim needs to support - hierarchical addresses. For now, level is set up for 4 bit to and from addresses]" - NetSim Standalone SendAB_instruction: "You and your partner share a single - wire that can only be in state A or state B. You can set the wire to either - state at any time, and you can read the state of the wire at any time. Can - you figure out a way to effectively communicate with just this system?" - NetSim Standalone Sending Numbers Ascii_instruction: "Now that you've transmitted - information represented as decimal numbers, you can map those numbers to text - characters to send text-based information back and forth. With a text-based - protocol, you can easily represent and communicate all kinds of information. - " - NetSim Standalone Sending Numbers_instruction: "You and your partner can now - reliably send messages back and forth without extra coordination! While you're - always sending bits back and forth, you can also represent those bits as decimal - numbers. What kinds of information can you represent with this system? " - NetSim_AddressingMessages_instruction: "In this version of the simulator, you - will connect to a Router instead of directly to another student. Enter an - address in the \"To\" box to send a message to another student." - NetSim_AutomaticDNS_instruction: "In this version of the simulator a DNS service - is provided for you. Send a message in the form GET [hostname] to the DNS - service at address 15 to get a student's address." - NetSim_ManualDNS_instruction: "In this version of the simulator you can't - see the other students' addresses. Instead, one of you must act as a name - service, to help share addresses with each other." - NetSim_SendAB_instruction: "Connect to another student. Each of you can set - the value of the wire between you to \"A\" or \"B\". See if you can send - a complete message!" - NetSim_SendAscii_instruction: "In this version of the simulator, you can send - numbers or ASCII characters to one another, one bit at a time." - NetSim_SendBits_instruction: "Connect to another student. You can now set - your wire to \"0\" or \"1\". Send a message to your partner!" - NetSim_SendingABTest_instruction: "This is Sarah's test of making a netsim - level" - NetSim_SendNumbers_instruction: "In this version of the simulator, you can - view the decimal representations of the binary you are sending." - NetSim_Superuser_instruction: "You have loaded NetSim in superuser mode." - NetSim_Variant1_instruction: "NetSim: Variant 1 allows students to manually - work out the timing of sending bits back and forth." - NetSim_Variant2_instruction: "NetSim: Variant 2: Students connect directly - to one another and send entire packets back and forth, exploring systems of - encoding data." - NetSim_Variant3_instruction: "NetSim: Variant 3: Connects groups of 2-6 students - with a router, and explores issues in routing and DNS" - New Artist Project_instruction: "Draw something awesome! Your code is saved - as a project that you can return to at any time." + MSM Big Game Empty_instruction: "All variables and functions are currently + empty stubs. Each puzzle progression will be focused on defining and handful + of them, and therefore adding functionality." + MSM Big Game Vars 1 (copy 1)_instruction: "In the Variables toolbox you'll + see several variables that define how your game characters look, move, and + interact" + MSM Big Game Vars 1_instruction: "In the Variables toolbox you'll see several + variables that define how your game characters look, move, and interact" + MSM Big Game Vars Backup_instruction: "In the Variables toolbox you'll see + several variables that define how your game characters look, move, and interact" + MSM Defining Vars 1 (copy 1)_instruction: "Write a program that produces a + 50 pixel solid green triangle." + MSM Defining Vars 1_instruction: "Write a program that produces a 50 pixel + solid green triangle." + MSM Defining Vars 2 (copy 1)_instruction: "If we wanted to make fifty green + triangles, it would be a pain to repeat that block of code 50 times. Let's + create a variable called \"my-shape\" and put the code for a 50 pixel solid + green triangle inside." + MSM Defining Vars 2_instruction: "If we wanted to make fifty green triangles, + it would be a pain to repeat that block of code 50 times. Let's create a + variable called my-shape and put the code for a 50 pixel solid green triangle + inside." + MSM Defining Vars 3 (copy 1)_instruction: "Take your \"my-shape\" variable + and use it with this provided code to draw two identical green triangles." + MSM Defining Vars 3_instruction: "Take your my-shape variable and use it with + this provided code to draw two identical green triangles that are 50 pixels + in size." + MSM Defining Vars 4_instruction: "Edit your my-shape variable so that it draws + 75 pixel solid red stars." + MSM Play Lab Butterfly 1_instruction: "Help Sam stay on the screen so that + you can always see at least a little piece of him. Using the arrow keys, see + how far Sam can go to the left while still staying onscreen. You’ll find that + Sam is onscreen as long as his x-coordinate is greater than -50. Then, fill + in the code to make Sam stay on the screen." + MSM Play Lab Butterfly 2_instruction: "Now make Sam stay on the right side + of the screen. You'll have to experiment to see how far he can go and still + be partially visible on the screen." + MSM Play Lab Butterfly 3_instruction: "Now, combine your work to make Sam stay + on both sides of the screen." + MSM Play Lab Game 2_instruction: "Variables can also be used to control the + speed of players in a game. Set the player speed and the enemy speed and see + how the movement changes. Speed can be between 2 and 12." + Middle School Hackathon Pt 1_instruction: "(Click to see full instructions)" + Middle School Hackathon Pt 2_instruction: "(Click to see full instructions)" + Mike Pair Programming_instruction: "Here are the instructions" + Mike Test Bee Conditionals 1_instruction: "This cloud is blocking my view! + Check to see if there's a flower under the cloud, and only get nectar if + there's a flower. Be careful, it can change!" + Mike Test Bee Conditionals 2_instruction: "Collect all of the nectar. You can + only collect nectar from flowers, but you can check any space to see if there + is a flower." + MikeAssessment1_instruction: "Now do it right!" + MikeStar_instruction: "Draw this." + MikeStarHard_instruction: "Draw this." + MikeStarNested_instruction: "Draw this." + MikeTest1_instruction: "Who knows what you should do?!?!" + MikeTest2_instruction: "Draw something!" + MikeTest3_instruction: "Build Something" NEW Course 4 Artist Functions 1_instruction: "Can you draw a square that is 100 pixels in length, using a repeat loop?" NEW Course 4 Artist Functions 10.1_instruction: "Use the functions from the @@ -5800,8 +3340,6 @@ en: only one block?" NEW Course 4 Artist Functions inspire_instruction: "Click here to see the inspiration picture again." - New Course 4 Artist Functions Level 4_instruction: "Use the \"draw a square\" - function to draw this pattern." NEW Course 4 Artist Params 1_instruction: "Let's define this function to draw a square with 50 pixel sides. Click \"edit\" to get started." NEW Course 4 Artist Params 10_instruction: "Create a `draw a hexagon` function @@ -5925,6 +3463,82 @@ en: NEW Course 4 Play Labs For Loops 8a_instruction: "Challenge: How would you use the \"for loop\" to get every actor to go around and say their actor number, then vanish from the screen? " + NetSim Standalone Automatic DNS_instruction: "In this version of the Internet + Simulator, a Domain Name System (DNS) is provided for you and knows the IP + addresses of all connected computers. Send a message in the form GET [hostname] + to the DNS service at address <yourRouterNumber>.15 to get a student's address." + NetSim Standalone Broadcast_instruction: "In this version of the Internet Simulator, + you can connect to up to 5 other people in a room. When you send messages + in the room, everyone receives them. What are some of the challenges of this + system, and how might you solve them?\r\n" + NetSim Standalone Classroom Routers_instruction: "In this version of the Internet + Simulator, everyone connects to a router and has a specific address. To send + messages, you have to address your message to the specific address of the + recipient, and the router will take care of delivering it to the right computer. + If there are other routers created in your class, ask for the address of one + of your classmates and send them a message! View the Log Router to see the + path the messages have taken through the network." + NetSim Standalone Freeplay_instruction: "In this configuration, most of the + options are turned on, and you can play with them. Have fun!" + NetSim Standalone Manual DNS_instruction: "In this version of the simulator + you can't see the other students' addresses. Instead, one of you must act + as a name service, to help share addresses with each other." + NetSim Standalone Packets TCP_instruction: "Messages on the Internet can take + many paths to get to their destination, and sometimes along the way the message + gets dropped. In this version of the Internet Simulator, there is a 10% chance + of a packet being dropped, multiple packets may take different paths to the + destination, and the default max packet size is set to 6 additional characters. + " + NetSim Standalone Routers Addresses_instruction: "For this activity, connect + to a router with the others in your group. Important note: The router will + only properly route messages where the first 4 bits are the To: address and + the second 4 bits are the From: address.\r\n\r\n[TODO: NetSim needs to support + hierarchical addresses. For now, level is set up for 4 bit to and from addresses]" + NetSim Standalone SendAB_instruction: "You and your partner share a single + wire that can only be in state A or state B. You can set the wire to either + state at any time, and you can read the state of the wire at any time. Can + you figure out a way to effectively communicate with just this system?" + NetSim Standalone Sending Numbers Ascii_instruction: "Now that you've transmitted + information represented as decimal numbers, you can map those numbers to text + characters to send text-based information back and forth. With a text-based + protocol, you can easily represent and communicate all kinds of information. + " + NetSim Standalone Sending Numbers_instruction: "You and your partner can now + reliably send messages back and forth without extra coordination! While you're + always sending bits back and forth, you can also represent those bits as decimal + numbers. What kinds of information can you represent with this system? " + NetSim_AddressingMessages_instruction: "In this version of the simulator, you + will connect to a Router instead of directly to another student. Enter an + address in the \"To\" box to send a message to another student." + NetSim_AutomaticDNS_instruction: "In this version of the simulator a DNS service + is provided for you. Send a message in the form GET [hostname] to the DNS + service at address 15 to get a student's address." + NetSim_ManualDNS_instruction: "In this version of the simulator you can't + see the other students' addresses. Instead, one of you must act as a name + service, to help share addresses with each other." + NetSim_SendAB_instruction: "Connect to another student. Each of you can set + the value of the wire between you to \"A\" or \"B\". See if you can send + a complete message!" + NetSim_SendAscii_instruction: "In this version of the simulator, you can send + numbers or ASCII characters to one another, one bit at a time." + NetSim_SendBits_instruction: "Connect to another student. You can now set + your wire to \"0\" or \"1\". Send a message to your partner!" + NetSim_SendNumbers_instruction: "In this version of the simulator, you can + view the decimal representations of the binary you are sending." + NetSim_SendingABTest_instruction: "This is Sarah's test of making a netsim + level" + NetSim_Superuser_instruction: "You have loaded NetSim in superuser mode." + NetSim_Variant1_instruction: "NetSim: Variant 1 allows students to manually + work out the timing of sending bits back and forth." + NetSim_Variant2_instruction: "NetSim: Variant 2: Students connect directly + to one another and send entire packets back and forth, exploring systems of + encoding data." + NetSim_Variant3_instruction: "NetSim: Variant 3: Connects groups of 2-6 students + with a router, and explores issues in routing and DNS" + New Artist Project_instruction: "Draw something awesome! Your code is saved + as a project that you can return to at any time." + New Course 4 Artist Functions Level 4_instruction: "Use the \"draw a square\" + function to draw this pattern." Ninjacat Demo B (copy 1)_instruction: "\r\nLet’s begin by exploring a simple videogame, and then figuring out how it works. You can use the arrow keys to move the ninja left, right and jump - try to catch the unicorn and avoid @@ -5937,12 +3551,12 @@ en: and then figuring out how it works. You can use the arrow keys to move the ninja up and down - try to catch the unicorn and avoid the dragon! When you think you've figured out how the game works, click \"Finish\"" + October15 JoL 1_instruction: "Program the artist to design a face for your + jack-o-lantern!" October15 bat_instruction: "Freeplay: Here are some functions to play with. Can you draw a bat?\r\n" October15 ghost 1_instruction: "Give the ghost eyes, using the \"draw a circle\" function." - October15 JoL 1_instruction: "Program the artist to design a face for your - jack-o-lantern!" October15 pumpkin 1_instruction: "Finish this jack-o-lantern by drawing the eyes and nose in any style you would like." October15 stars 1_instruction: "Use loops and the \"random integer\" block @@ -5995,8 +3609,6 @@ en: the door of your house." Overworld Shear Sheep_instruction: "Sheep-shearing time! Use the “shear” command to gather wool from both sheep." - Pattern Bee 1_instruction: "What a strange field of goodies! I wonder if there's - a pattern here..." PDAlg 13-16 Sam Extension Puzzle_instruction: "Add a second parameter to \"onscreen?\" for Sam's y coordinate and update the function so it keeps him safe on all four sides." @@ -6005,16 +3617,16 @@ en: and coupon code and returns the cost of a pizza with that topping. If the coupon code is correct (you get to decide what it is), apply a 30% discount to the pizza." + PDAlg 8-12 Rocket Height Puzzle_instruction: "Let's write a \"rocket-height\" + function with simple acceleration. Write a function that ensures the rocket + is at 15 meters at 1 second, 45 meters at 2 seconds, 95 at 3 seconds, and + 165 at 4 seconds." PDAlg 8-12 ex dr 1_instruction: "The definition in this Design Recipe doesn't match both examples. Test each example to see which is failing, and then fix the definition to match." PDAlg 8-12 ex dr 2_instruction: "This student has created two examples for the function \"apples\" but something's not quite right. How would you direct this student to correct their mistake?" - PDAlg 8-12 Rocket Height Puzzle_instruction: "Let's write a \"rocket-height\" - function with simple acceleration. Write a function that ensures the rocket - is at 15 meters at 1 second, 45 meters at 2 seconds, 95 at 3 seconds, and - 165 at 4 seconds." PDAlg Big Game History_instruction: "Now that you've played through a Big Game level you should see a new entry in your history. Click the Version History button and you should see at least one version. Each time you go back to a @@ -6067,6 +3679,16 @@ en: PDK5 Loops 3_instruction: "Here's another puzzle to practice loops. What happens if you use the repeat block to run the code already provided on the workspace 4 times?" + PS FR test 7-25_instruction: "Here are your instructions for this free response. " + PS Log test - Define and use turnAround_instruction: "Define a function called + turnAround. Call the function and then move the turtle forward. (Click to + see full instructions)" + PS copy 2-3 Bee Conditionals 5_instruction: "Be careful not to collect nectar + from a purple flower if it doesn't have any. \r\nYou must first check if + the nectar is equal to 1 using the `if nectar` block." + PS predictive Applab level test_instruction: "Here are some instructions. " + Pattern Bee 1_instruction: "What a strange field of goodies! I wonder if there's + a pattern here..." Pixelation - Lesson 14 - Fix bit offset v.2_instruction: "Something happened to the bits in this image! Find the error and fix it! Hint: a few extra bits were added. You should only need to remove some bits." @@ -6148,21 +3770,6 @@ en: Play Lab Rocket Free Play_instruction: "Free Play: Experiment with your rocket-height function to make the rocket fly in different ways. Click \"Finish\" when you are done." - playEventsK1_instruction: "This game is called \"Play Lab\". See if you can - figure out what each block does." - playEventsK2_instruction: "Jorge wants to say \"Hi there.\"\r\n\r\nCan you - help?" - playEventsK3_instruction: "Jorge wants to be scratched behind the ears! Can - you make it so that when you click Jorge he is happy?" - playEventsK4_instruction: "Can you make it so that Jorge the dog chases Robin - the bird when you click the up arrow?" - playEventsK5_instruction: "Now add code so that Robin flies away when you click - the forward arrow." - playEventsK6_instruction: "Have Robin talk back to Jorge when you click on - her." - playEventsK7_instruction: "What else can you do in this fun scene?" - playLabDebugVideo1_instruction: "Jorge the Dog wants to say \"Hi there.\" Can - you help him?" Poorva copy U3L2 Using Simple Commands_instruction: "Draw a 1x1 square above and to the left of the turtle's starting position. Click to see full instructions." Poorva-test_instruction: "Here are regular instructions for a level. There @@ -6175,14 +3782,6 @@ en: app. (Click to see full instructions.)" Prompt Test_instruction: "Build whatever you want. This is an example of a number-guessing game!" - PS copy 2-3 Bee Conditionals 5_instruction: "Be careful not to collect nectar - from a purple flower if it doesn't have any. \r\nYou must first check if - the nectar is equal to 1 using the `if nectar` block." - PS FR test 7-25_instruction: "Here are your instructions for this free response. " - PS Log test - Define and use turnAround_instruction: "Define a function called - turnAround. Call the function and then move the turtle forward. (Click to - see full instructions)" - PS predictive Applab level test_instruction: "Here are some instructions. " Quantum Bee - Ryan_instruction: "These clouds are bugging me! Some of the clouds have flowers inside, and some don't. I should check each cloud, and only get nectar from the flowers." @@ -6223,79 +3822,31 @@ en: arrow keys to move Sam around his yard, making note of Sam's coordinates at different locations. Click \"Finish\" when you're ready to move on." Sam the Butterfly 2_instruction: "Sam's mom wants to make sure that she can - always see at least a bit of him, so lets write some functions that help make - sure he doesn't go too far out of the yard. Here's a function called safe-left? - - it should take a Number for its domain that represents Sam's x-coordinates - and return true if he's completely visible on screen. If your function works, - Sam shouldn't be able to leave the yard from the left side." - Sam the Butterfly 3_instruction: "In the last puzzle we kept Sam from leaving - on the left, now let's do the same thing on the right. Complete the safe-right? - function to make sure Sam can't go off the right side of the screen." - Sam the Butterfly 4_instruction: "Huh, we can keep Sam from leaving on the - left, or we can keep him from leaving on the right, but how can we keep him - safe from leaving both directions? Try using the and block to program the - function on-screen? to check if Sam is safe-left? and safe-right?" - Sam the Butterfly 5_instruction: "Free Play: Awesome, we've kept Sam safe - on the left and right! Use this free play stage to experiment with your functions - and further improve onscreen?" - Sam the Butterfly 6_instruction: "We've added a new parameter \"y\" to the - \"on-screen?\" function. Update the function so that it checks that \"safe-left?\" - AND \"safe-right?\" AND \"safe-up?\" are all true. When you've fixed the - function, try going out of the yard from the left, right, and top sides." - Sam the Butterfly 7_instruction: "Only one last direction to worry about! Create - a \"safe-down?\" function and update the \"on-screen?\" function so that it - checks up, down, left, and right." - Sam the Butterfly Complete_instruction: "Only one last direction to worry about! - Create a \"safe-down?\" function and update the \"on-screen?\" function so - that it checks up, down, left, and right." - sample1_instruction: "Our adventurer wants to collect coins. But she can only - use 4 blocks to get them.\r\n\r\nCan you help her grab as many as she can - using just 4 blocks?" - sample10_instruction: "Now you can use loops to draw whatever you like!" - sample10a_instruction: "You have helped the adventurer and her bee! As a reward, - please stay and play around in my magical village. \r\n\r\nYou should have - everything you need to create a game of your own." - sample2_instruction: "Use what you've learned to help bee gather all of this - honey using only the blocks that you have here." - sample2a_instruction: "Use what you've learned to help bee gather all of this - honey using only 4 blocks." - sample3_instruction: "Now you can help bee make all of the honey using just - the blocks in the toolbox." - sample3assessment_instruction: "Can you figure out how to gather all of this - nectar in just one try?" - sample4_instruction: "Our adventurer has found a stash of coins in this cave.\r\n\r\nCan - you help her grab as many as she can using just 7 blocks?" - sample5_instruction: "Help bee make all of the honey." - sample6_instruction: "Challenge: Help bee get all of the nectar." - sample7assessment_instruction: "Can you help bee make all of the honey in just - one try?" - sample8_instruction: "Look at this trove of coins! How many can you get the - adventurer to grab?" - sample9_instruction: "Use loops to help the artist connect all of the dots. - " - sample9a_instruction: "The wizard has found his potions! Use everything you - have learned to help him collect them." - scrat 16 (copy 1)_instruction: "Acorn! Acorn! Acorn! Use an \"if\" block to - get me there with the fewest number of blocks." - scrat 16_instruction: "Acorn! Acorn! Acorn! Use an \"if\" block to get me there - with the fewest number of blocks." - scrat 17 (copy 1)_instruction: "Ok, let's do that again for practice - this - isn't very different, but watch out for the <insert obstacle name for Scrat>!" - scrat 17_instruction: "Ok, let's do that again for practice - this isn't - very different, but watch out for the wall!" - scrat 18 (copy 1)_instruction: "The \"If-else\" blocks checks a condition, - and then does one thing OR another. To get me to the acorn try to use this - new block." - scrat 18_instruction: "The \"If-else\" blocks checks a condition, and then - does one thing OR another. To get me to the acorn try to use this new block." - scrat 19 (copy 1)_instruction: "One more practice of the \"if-else\" block, - can you get it right on your first try?" - scrat 19_instruction: "One more practice of the \"if-else\" block, can you - get it right on your first try?" - scrat 20_instruction: "Can you add just 3 blocks to help me solve a more complex - maze? If you do it right, I can walk any curvy path no matter the length. - Hurry! The ice is melting!" - skratDebugVideo1_instruction: "Get Skrat to the Acorn." + always see at least a bit of him, so lets write some functions that help make + sure he doesn't go too far out of the yard. Here's a function called safe-left? + - it should take a Number for its domain that represents Sam's x-coordinates + and return true if he's completely visible on screen. If your function works, + Sam shouldn't be able to leave the yard from the left side." + Sam the Butterfly 3_instruction: "In the last puzzle we kept Sam from leaving + on the left, now let's do the same thing on the right. Complete the safe-right? + function to make sure Sam can't go off the right side of the screen." + Sam the Butterfly 4_instruction: "Huh, we can keep Sam from leaving on the + left, or we can keep him from leaving on the right, but how can we keep him + safe from leaving both directions? Try using the and block to program the + function on-screen? to check if Sam is safe-left? and safe-right?" + Sam the Butterfly 5_instruction: "Free Play: Awesome, we've kept Sam safe + on the left and right! Use this free play stage to experiment with your functions + and further improve onscreen?" + Sam the Butterfly 6_instruction: "We've added a new parameter \"y\" to the + \"on-screen?\" function. Update the function so that it checks that \"safe-left?\" + AND \"safe-right?\" AND \"safe-up?\" are all true. When you've fixed the + function, try going out of the yard from the left, right, and top sides." + Sam the Butterfly 7_instruction: "Only one last direction to worry about! Create + a \"safe-down?\" function and update the \"on-screen?\" function so that it + checks up, down, left, and right." + Sam the Butterfly Complete_instruction: "Only one last direction to worry about! + Create a \"safe-down?\" function and update the \"on-screen?\" function so + that it checks up, down, left, and right." SpecialFrozenLevel_instruction: "You've officially become a master artist! Create a winter wonderland." Standalone_Artist_1_instruction: "Welcome to Artist! First off, let's try @@ -6332,11 +3883,7 @@ en: to make a simple square using the turn right block and move forward block. Each side should be 100 pixels long." StepIntro_instruction: "Here's how to use the \"Step\" button." - template test_instruction: "what's up" Test Play Lab_instruction: "This is a test play lab level." - test_sarah_instruction: "hi hi" - testArtistForTestK_instruction: "The Artist is trying to draw a line five times, - but can't get it right. Can you help?" Testing Quantum Farmer_instruction: "Wow, look at that! \r\n\r\nI don't know how many shovelfuls of dirt this hole needs. \r\nCan you write a program that keeps using the `fill` block until the ground is even? " @@ -6368,10 +3915,10 @@ en: U1L8 NetSim numbers with decimal_instruction: "With your partner, develop a protocol or set of rules for communicating a drawing using only bits. See the worksheet handed out by your teacher for more detailed instructions!" + U2 Vigenere_instruction: "Test" U2 frequency caesar_instruction: "Instructions" U2 frequency random sub_instruction: "Instructions" U2 vigenere cipher_instruction: "Instructions" - U2 Vigenere_instruction: "Test" U2L04 - NetSim Routers with Addresses_instruction: "Send messages with your classmates (Click to see full instructions)" U2L05 - NetSim - Packets and Building TCP_instruction: "Develop a Protocol @@ -6405,6 +3952,8 @@ en: U2L7 NetSim Need for Packets_instruction: "Transfer your favicon to a partner across a network in which the larger a packet grows, the more likely it is to be dropped." + U3 - Arrays - Demo App_instruction: "Use the \"My Favorite Things\" app. How + might this app be making use of an array? (Click to see full instructions)" U3 - Arrays - appendItem_instruction: "Create an array of odd numbers 1-11 by using appendItem. (Click to see full instructions)" U3 - Arrays - assignment_instruction: "Use indexes to change the values in @@ -6416,18 +3965,22 @@ en: U3 - Arrays - createFirstArray_instruction: "Create an array of the even numbers from 0 to 10 and display its contents with console.log. (Click to see full instructions)" - U3 - Arrays - Demo App_instruction: "Use the \"My Favorite Things\" app. How - might this app be making use of an array? (Click to see full instructions)" U3 - Arrays - expressionsAsIndexes_instruction: "Write a program that displays a randomly chosen color from the array. (Click to see full instructions)" + U3 - Arrays - favThings Counting Variable_instruction: "Create a global variable + for the current index and use it to display the first item in the array. (Click + to see full instructions)" + U3 - Arrays - favThings Next_instruction: "Write code that allows the user + to move forward through your list by clicking the \"Next\" button. (Click + to see full instructions)" + U3 - Arrays - favThings Prev_instruction: "Write code that allows the user + to move backward through your list by clicking the \"Last\" button. (Click + to see full instructions)" U3 - Arrays - favThings addItem_instruction: "Write code that allows a user to add their own favorite things to the list. (Click to see full instructions)" U3 - Arrays - favThings bounds_instruction: "Add if statements to your event handlers that prevent the global index from going out of bounds. (Click to see full instructions)" - U3 - Arrays - favThings Counting Variable_instruction: "Create a global variable - for the current index and use it to display the first item in the array. (Click - to see full instructions)" U3 - Arrays - favThings createArray_instruction: "Create an array of words describing your favorite things. (Click to see full instructions)" U3 - Arrays - favThings firstOutput_instruction: "Use setText to display the @@ -6436,12 +3989,6 @@ en: and meaningful IDs. (Click to see full instructions)" U3 - Arrays - favThings keepPlaying_instruction: "Make any other improvements you want! (Click to see full instructions)" - U3 - Arrays - favThings Next_instruction: "Write code that allows the user - to move forward through your list by clicking the \"Next\" button. (Click - to see full instructions)" - U3 - Arrays - favThings Prev_instruction: "Write code that allows the user - to move backward through your list by clicking the \"Last\" button. (Click - to see full instructions)" U3 - Arrays - favThings template_instruction: "Give your UI elements descriptive and meaningful IDs. (Click to see full instructions)" U3 - Arrays - globalVariableIndex_instruction: "Give your UI elements descriptive @@ -6465,6 +4012,9 @@ en: adding strings to an array. (Click to see full instructions)" U3 - Canvas - 200dots_instruction: "Add a loop to your program that draws 200 dots on your canvas. (Click to see full instructions)" + U3 - Canvas - One Dot sprayPaint_instruction: "Write code that redraws your + image using a dot whose x and y locations use offsetX and offsetY with a small + random value added. (Click to see full instructions)" U3 - Canvas - appendToArray_instruction: "Create an array to store each event parameter. Append each event parameter to this array within your event handler. (Click to see full instructions)" @@ -6489,9 +4039,6 @@ en: U3 - Canvas - movementFunction_instruction: "Write a function that takes the movement of the mouse as input and generates a line width as output. (Click to see full instructions)" - U3 - Canvas - One Dot sprayPaint_instruction: "Write code that redraws your - image using a dot whose x and y locations use offsetX and offsetY with a small - random value added. (Click to see full instructions)" U3 - Canvas - redrawOriginal_instruction: "Write a function that processes your array, redrawing the dots as they originally appeared. (Click to see full instructions)" @@ -6515,25 +4062,25 @@ en: full instructions)" U3 - Conditional Basics - 6_instruction: "Add a setText after the if statement to \"Nope. Guess again.\" (Click to see full instructions)" - U3 - Conditionals - Combine AND and OR_instruction: "Write an if statement - that uses AND and OR to display \"Time to go to school!\" if it's not the - weekend and the user is under 18. (Click to see full instrucitons." - U3 - Conditionals - Combine AND OR and NOT_instruction: "Write an if statement - that uses AND and OR to display \"Time to go to school!\" if it's not the - weekend and the user is under 18. (Click to see full instructions.)" U3 - Conditionals - Combine AND OR Simple_instruction: "Write an if statement that uses AND and OR to display \"Sleep in!\" if it's the weekend and the user is a teenager. (Click to see full instructions." - U3 - Conditionals - intoOr_instruction: "Add 2 if statements that use the OR - operator. (Click to see full instructions)" - U3 - Conditionals - introAND_instruction: "Add 2 if statements that use the - OR operator. (Click to see full instructions)" + U3 - Conditionals - Combine AND OR and NOT_instruction: "Write an if statement + that uses AND and OR to display \"Time to go to school!\" if it's not the + weekend and the user is under 18. (Click to see full instructions.)" + U3 - Conditionals - Combine AND and OR_instruction: "Write an if statement + that uses AND and OR to display \"Time to go to school!\" if it's not the + weekend and the user is under 18. (Click to see full instrucitons." U3 - Conditionals - Simple AND_instruction: "Write an if statement that uses AND to display \"You are a teenager.\" if the user enters an age between 13 and 19. (Click to see full instructions)" U3 - Conditionals - Simple OR_instruction: "Write an if statement that uses OR to display \"It's the weekend!\" if the user enters a weekend day at the prompt. (Click to see full instructions)" + U3 - Conditionals - intoOr_instruction: "Add 2 if statements that use the OR + operator. (Click to see full instructions)" + U3 - Conditionals - introAND_instruction: "Add 2 if statements that use the + OR operator. (Click to see full instructions)" U3 - Design Mode - Console Log_instruction: "Update the ID names and `console.log` messages to match the correct button. (Click to see full instructions.)" U3 - Design Mode - Layers and Delete_instruction: "Fix the layout of the bullseye @@ -6575,7 +4122,6 @@ en: see full instructions)\r\n" U3 - High Low - If_instruction: "Add code to the if statement that indicates the user guessed the secret number. (Click to see full instructions)" - U3 - images - bee free play_instruction: "Do this" U3 - Keys - Add Image URLs_instruction: "Add image URLs to your array. Replace the text area with an image and setText with setImageURL. Then test your app! (Click to see full instructions)" @@ -6642,16 +4188,16 @@ en: as long as both are less than 3. (Click to see full instructions)" U3 - Loops - Continue_instruction: " Use the Debug Commands to to make a list of all the values rolled before a 6. (Click to see full instructions)" - U3 - Loops - minus = operator_instruction: "Update the code to use the -= operator - to count from 30 down to 0 by 3's. (Click to see full instructions)" U3 - Loops - Minus Minus_instruction: "Change the code to count down from 10 to 1. (Click to see full instructions)" - U3 - Loops - plus and minus = operator_instruction: "Update the code to use - the += operator. (Click to see full instructions)" U3 - Loops - Plus Plus_instruction: "Change the code to use count++ instead of count = count + 1. (Click to see full instructions)" U3 - Loops - Typing in Console_instruction: "Use console to check the ending value of num. (Click to see full instructions)" + U3 - Loops - minus = operator_instruction: "Update the code to use the -= operator + to count from 30 down to 0 by 3's. (Click to see full instructions)" + U3 - Loops - plus and minus = operator_instruction: "Update the code to use + the += operator. (Click to see full instructions)" U3 - Loops And Arrays - Add 5_instruction: "Add 5 to all the values in an array (Click to see full instructions)" U3 - Loops And Arrays - Challenge 1_instruction: "Write a function that finds @@ -6709,11 +4255,11 @@ en: keywords for movie ratings (G, PG, PG-13, and R). (Click to see full instructions)" U3 - Movie Bot - Nested Motivation_instruction: "Add a separate set of if statements to check for a \"?\" in the input. (Click to see full instructions)" + U3 - Movie Bot - When Multiple If Statements_instruction: "Add an if and else-if + statement that checks for please and thank you. (Click to see full instructions)" U3 - Movie Bot - toLowerCase_instruction: "Use the toLowerCase command to change all user input into lowercase letters after they enter it. (Click to see full instructions)" - U3 - Movie Bot - When Multiple If Statements_instruction: "Add an if and else-if - statement that checks for please and thank you. (Click to see full instructions)" U3 - Practice Create Performance Task_instruction: "Design and implement your practice Create Performance Task. (Click to see full instructions)" U3 - Read Record - 1.2_instruction: "Console.log the records returned by a @@ -6781,13 +4327,13 @@ en: U3 - Simple Drawing - Personal Drawing_instruction: "DO This" U3 - Simple Drawing - Rectangle Width and Height_instruction: "Do This" U3 - Simple Drawing - Rectangle_instruction: "Do This" - U3 - Simple Drawing - regular polygon_instruction: "Do this" U3 - Simple Drawing - Road Ellipse_instruction: "Do This" U3 - Simple Drawing - Road Rects and Color_instruction: "Do This" U3 - Simple Drawing - Simple Shape Drawing_instruction: "Do This" U3 - Simple Drawing - Stroke and Stroke Weight_instruction: "Do this" - U3 - Simple Drawing - text_instruction: "Do This" U3 - Simple Drawing - X and Y values_instruction: "Do This" + U3 - Simple Drawing - regular polygon_instruction: "Do this" + U3 - Simple Drawing - text_instruction: "Do This" U3 - Simulation - 1_instruction: "Use a while loop to \"flip a coin 10 times\" and write the values to the screen. (Click to see full instructions)" U3 - Simulation - 2.1_instruction: "Change your looping condition so the simulation @@ -6817,9 +4363,9 @@ en: U3 - Sprites and Mod - Rand Around Mouse_instruction: "Do this" U3 - Sprites and Mod - Rand Shape Color_instruction: "Do This" U3 - Sprites and Mod - Shape Color_instruction: "Do This" - U3 - Sprites and Mod - two sprites_instruction: "Do This" U3 - Sprites and Mod - Wrap Many Squares_instruction: "Do This" U3 - Sprites and Mod - X and Y Prop_instruction: "Do This" + U3 - Sprites and Mod - two sprites_instruction: "Do This" U3 - User Input - Save getText To Variable_instruction: "Save the age and name of the user in variables (Click to see full instructions)" U3 - User Input - Saving After Input_instruction: "Save the age of the user @@ -6858,6 +4404,7 @@ en: full)" U3 - Variables - Set to Expression_instruction: "Test out the new expressions. (Click to see full instructions)" + U3 - images - bee free play_instruction: "Do this" U3 Digital Assistant Design_instruction: "Pick a topic for your Digital Assistant and create the basic layout with a text input and text area. (Click to show full instructions)" @@ -6871,8 +4418,6 @@ en: U3 Digital_instruction: "Choose a specialization topic for your digital assistant. Create a basic digital assistant that takes the user's input and displays back a default response." - U3 full clicker demo_instruction: "Clicker game - Try it out!" - U3 mehal's clone_instruction: "Try out a demo of the Digital Assistant!" U3 Variables consolelog_instruction: "Use the write block to display the value of size" U3 Variables flower example_instruction: "Change the value of petalSize multiple @@ -6887,6 +4432,8 @@ en: multiple times. How does it change your drawing?" U3 Variables write_instruction: "Use the write block to display the value of size" + U3 full clicker demo_instruction: "Clicker game - Try it out!" + U3 mehal's clone_instruction: "Try out a demo of the Digital Assistant!" U3- Variables - Assign Random For Turtle Draw_instruction: "Try writing the same code in text mode." U3- Variables - Changing the Value_instruction: "Update the value of 'turnAmount' @@ -6904,38 +4451,38 @@ en: ID and update the code to match. (Click to see detail instructions)." U3-Design Mode-Image_instruction: "Recreate the \"Chaser Game\" from the last lesson using Design Mode. (Click to see full instructions.)" + U313 Two Buttons with Ids_instruction: "Predict what will happen. Once you've + made a prediction, run the code to see what happens. (Click to see full instructions)" U313 drag Two Buttons_instruction: "Run a program with two buttons that have the same id to see the warning message in the console. Change the ids to make the program run without getting a warning message." U313 eventsDetails_instruction: "Run a program with two buttons that have the same id to see the warning message in the console. Change the ids to make the program run without getting a warning message." - U313 Two Buttons with Ids_instruction: "Predict what will happen. Once you've - made a prediction, run the code to see what happens. (Click to see full instructions)" U3L03 - draw rect function_instruction: "Write a function called drawRectangle().\r\n(Click to see full instructions)" U3L03 - draw step_instruction: "Write the drawStep function. (Click to see full instructions)" + U3L03 Creating Procedures 1_instruction: "Write the turnAround() function and + use it to make the turtle move as depicted. see: U3L03-turnAndDown.gif" + U3L03 Define and use turnAround_instruction: "Define a function called turnAround. + Call the function and then move the turtle forward. (Click to see full instructions)" + U3L03 Draw a T using turnAround_instruction: "Draw a plus sign using the provided + version of turnAround(). (Click to see full instructions)" + U3L03 Three Steps_instruction: "Define a function called drawSide() which draws + three steps and moves the turtle to prepare for the next side (Click to see + full instructions)" U3L03 choose your own drawing_instruction: "Now choose your own! Pick one of the three drawings shown here and attempt to create it on your own, making smart decisions about how to break the problem down into re-usable functions. You will review your work with a peer using \"procedures peer review rubric.\" Check it for the requirements. GIF: U3L3-ProceduresChooseOne.png" - U3L03 Creating Procedures 1_instruction: "Write the turnAround() function and - use it to make the turtle move as depicted. see: U3L03-turnAndDown.gif" - U3L03 Define and use turnAround_instruction: "Define a function called turnAround. - Call the function and then move the turtle forward. (Click to see full instructions)" U3L03 define turnRight and draw a rectangle_instruction: "Define a function called right() that turns the turtle to the right. Then use this function to draw a rectangle, as shown below. (Click to see full instructions)" - U3L03 Draw a T using turnAround_instruction: "Draw a plus sign using the provided - version of turnAround(). (Click to see full instructions)" U3L03 draw diamond_instruction: "Create a function called drawDiamond() that makes use of your previous work to draw the complete diamond. (Click to see full instructions)" - U3L03 Three Steps_instruction: "Define a function called drawSide() which draws - three steps and moves the turtle to prepare for the next side (Click to see - full instructions)" U3L04 - 3 by 3 with functions_instruction: "Make the 3x3 square as efficiently as you can. (Click to see full instructions)" U3L04 - snowflake_instruction: "Create the design by breaking it down into @@ -6981,6 +4528,15 @@ en: draw a smiley face. (Click to see full instructions)" U3L06 Challenge 8 make your own_instruction: "Create a drawing of your own. (Click to see full instructions)" + U3L07 - Free Play Loops and Random_instruction: "Free Play! Use what you learned + from loops and random to make your own little scene. Have fun." + U3L07 - Starry Night Starter Code_instruction: "You are going to use loops + and random numbers to generate an image of starry night sky similar to one + shown here. We have given you some starter code to generate the ground and + sky (just two giant dots), you will add code to this project to make the stars, + grass, and moon. All of the effects are clever applications of turtle dots, + lines, and colors. To get started, follow the series of steps suggested in + the accompanying worksheet. " U3L07 - allSeaGrass_instruction: "Add 50 pieces of seagrass to the image by writing drawAllSeagrass with a loop. (Click to see full instructions)" U3L07 - bubbles_instruction: "Add 200 bubbles to the image by writing drawAllBubbles @@ -6992,8 +4548,6 @@ en: full instructions)" U3L07 - fish_instruction: "Add 15 fish to the image by writing drawAllFish with a loop. (Click to see full instructions)" - U3L07 - Free Play Loops and Random_instruction: "Free Play! Use what you learned - from loops and random to make your own little scene. Have fun." U3L07 - introSquare_instruction: "Use a loop to draw a square. Then add another loop to draw many squares each one rotated some amount. (Click to see full instructions)" @@ -7007,34 +4561,27 @@ en: the number of waves in the grass. (Click to see full instructions)" U3L07 - seaStar_instruction: "Add 5 sea stars to the image by writing drawAllSeaStars with a loop. (Click to see full instructions)" - U3L07 - Starry Night Starter Code_instruction: "You are going to use loops - and random numbers to generate an image of starry night sky similar to one - shown here. We have given you some starter code to generate the ground and - sky (just two giant dots), you will add code to this project to make the stars, - grass, and moon. All of the effects are clever applications of turtle dots, - lines, and colors. To get started, follow the series of steps suggested in - the accompanying worksheet. " U3L07 - sunBeams_instruction: "Add 100 sunbeams to the image by writing drawAllSunbeams with a loop. (Click to see full instructions)" U3L07 - topDownDesign_instruction: "Get comfortable with the structure of this program, then move on to the next exercise. (Click to see full instructions)" + U3L08 - Enchantment Under the Sea_instruction: "You have been provided with + starter code for an “Under the Sea” scene which includes three functions, + one each for the starfish, seagrass, and fish. Create versions of these functions + which accept parameters to allow you to add more variation to your scene. The + student worksheet provides more details and guidance." U3L08 - createTwoParamTriangle_instruction: "Define a function called drawTriangle() that accepts two parameters to set the size and width of the triangle. (Click to see full instructions)" U3L08 - digitalScene_instruction: "Create the functions you were assigned as part of your digital scene. (Click to see full instructions)" - U3L08 - drawSquaresWithParams_instruction: "Write drawSmallSquare() to draw - a 25px square. (Click to see full instructions)" U3L08 - drawSquareWithParam - for video_instruction: "Use drawSquare() to recreate the image of both squares, this time using parameters. (Click to see full instructions)" U3L08 - drawSquareWithParam_instruction: "Use drawSquare() to recreate the image of both squares, this time using parameters. (Click to see full instructions)" - U3L08 - Enchantment Under the Sea_instruction: "You have been provided with - starter code for an “Under the Sea” scene which includes three functions, - one each for the starfish, seagrass, and fish. Create versions of these functions - which accept parameters to allow you to add more variation to your scene. The - student worksheet provides more details and guidance." + U3L08 - drawSquaresWithParams_instruction: "Write drawSmallSquare() to draw + a 25px square. (Click to see full instructions)" U3L08 - fish_instruction: "Add a parameter to drawFish that changes the size of the fish drawn. (Click to see full instructions)" U3L08 - freePlay_instruction: "Keep adding to your image by making more calls @@ -7068,6 +4615,8 @@ en: U3L13 - Button with ID_instruction: "Drag a button out onto the screen and set its text to \"Go forth!\". Run the program to make sure you can see the button." + U3L13 - Debug Id Problem_instruction: "Improve the button by choosing a descriptive + and meaningful ID. (Click to see full instructions)" U3L13 - Debug Id plus logic problem_instruction: "The last problem was an example of syntax error. App Lab did not understand which object it should be listening to for a \"click\" event so it showed an error message in the console to let @@ -7075,8 +4624,6 @@ en: but it's not doing what you want it to do.\r\n\r\nThis program has 2 errors. A (tricky) syntax error and logical error. Find them, fix them, and make the program work as expected." - U3L13 - Debug Id Problem_instruction: "Improve the button by choosing a descriptive - and meaningful ID. (Click to see full instructions)" U3L13 - Debugging 1_instruction: "Debug the program by verifying your IDs are being referenced properly. (Click to see full instructions)" U3L13 - Debugging 2_instruction: "Debug the program by properly ordering your @@ -7095,13 +4642,22 @@ en: U3L14 - Assigning Random Value_instruction: "Write a program that simulates the rolling of two dice and reports their individual values as well as the sum. (click to see full instructions)" + U3L14 - Mini Calculator embed_instruction: "You will be prompted for two numbers, + one right after the other. See what happens. Enter different numbers until + you get the idea." + U3L14 - Unfortunate Events Free Play_instruction: "Follow the \"Unfortunate + Events\" Worksheet and enter your code here to experiment. We've pre-loaded + the code you need to start." + U3L14 - User Input Division calculator_instruction: "Write a program that acts + as a simple calculator. (click to see full instructions)" + U3L14 - Variable ReAssignment pt2_instruction: "Trace the code and predict + what you think will be printed to the console. Then add a console.log statement + at the end of the program to see the last value of someNum to see if your + full prediction is correct. (click to see full Instructions)" U3L14 - concatenate simple_instruction: "Modify the write statement on line 3 to combine text and variables together to make the app display a single line of text that shows the player's lives and score. (click to see full instructions)" - U3L14 - Mini Calculator embed_instruction: "You will be prompted for two numbers, - one right after the other. See what happens. Enter different numbers until - you get the idea." U3L14 - moving memory challenge1_instruction: "Using only the variables provided, assignment (=) and arithmetic (+ - * /) re-assign the values to make the console.log statement display the correct value(s). (Click to see full instructions)" @@ -7120,28 +4676,11 @@ en: U3L14 - moving memory challenge6_instruction: "Using only the variables provided, assignment (=) and arithmetic (+ - * /) re-assign the values to make the console.log statement display the correct value(s). (Click to see full instructions)" - U3L14 - Unfortunate Events Free Play_instruction: "Follow the \"Unfortunate - Events\" Worksheet and enter your code here to experiment. We've pre-loaded - the code you need to start." - U3L14 - User Input Division calculator_instruction: "Write a program that acts - as a simple calculator. (click to see full instructions)" - U3L14 - Variable ReAssignment pt2_instruction: "Trace the code and predict - what you think will be printed to the console. Then add a console.log statement - at the end of the program to see the last value of someNum to see if your - full prediction is correct. (click to see full Instructions)" - U3L15 - add code to make count down work_instruction: "Write code to make the - down arrow work as expected. (Click to see full instructions)" U3L15 - Add reset button to UpDown app_instruction: "Add code so that clicking the start over button will reset the game and send you back to the main screen. (Click to see full instructions)" - U3L15 - clicker update score_instruction: "Add code to update the score when - the apple is clicked. (Click to see full instructions)" - U3L15 - count upDown bug forget to set text_instruction: "Find the bug in the - program and fix it. (Click to see full instructions)" - U3L15 - count upDown bug logic error wrong update_instruction: "Find the bug - in the program and fix it. (Click to see full instructions)" - U3L15 - count upDown bug var not created globally_instruction: "Find the bug - in the program and fix it. (Click to see full instructions)" + U3L15 - DEMO up down count practice app_instruction: "Try out the demo app + (Click to see full instructions)" U3L15 - Debug forget to update var on reset in UpDown app_instruction: "Run the app, and click the up or down button until you get to the gameOverScreen. Click 'Start Over' and try the app again. Find and fix the issue in the @@ -7152,8 +4691,19 @@ en: U3L15 - Debugging Simple If-statements =v==_instruction: "Run the app, and click the up button. Then restart and run it again, and click the down button. Find and fix the issue in the code. (Click to see full instructions)" - U3L15 - DEMO up down count practice app_instruction: "Try out the demo app - (Click to see full instructions)" + U3L15 - Simple If-statements in UpDown App_instruction: "Add an if statement + so that the app changes screens when the count reaches -5. (Click to see full + instructions)" + U3L15 - add code to make count down work_instruction: "Write code to make the + down arrow work as expected. (Click to see full instructions)" + U3L15 - clicker update score_instruction: "Add code to update the score when + the apple is clicked. (Click to see full instructions)" + U3L15 - count upDown bug forget to set text_instruction: "Find the bug in the + program and fix it. (Click to see full instructions)" + U3L15 - count upDown bug logic error wrong update_instruction: "Find the bug + in the program and fix it. (Click to see full instructions)" + U3L15 - count upDown bug var not created globally_instruction: "Find the bug + in the program and fix it. (Click to see full instructions)" U3L15 - global var example count up_instruction: "Look at the code for this app and see how the code works to update the count variable when the up arrow is clicked. (Click to see full instructions)." @@ -7161,9 +4711,6 @@ en: when the apple is clicked. (Click to see full instructions)" U3L15 - practice with setText_instruction: "Use setText to complete the click event handler for the down arrow. (Click to see full instructions)" - U3L15 - Simple If-statements in UpDown App_instruction: "Add an if statement - so that the app changes screens when the count reaches -5. (Click to see full - instructions)" U3L15 - variable scoping problem debugging_instruction: "See if you can figure out why the code is no longer working. (Click to see full instructions)" U3L15 click add lives_instruction: "Add lives to the clicker game that decrement @@ -7246,14 +4793,14 @@ en: U3L16 Mad Lib Clear Input_instruction: "Clear the user's previous text when the Play Again button is clicked (Click to see full instructions) " U3L16 Mad Lib Demo_instruction: "Mad Libs Demo - Try it out!" + U3L16 Mad Lib Student Setup_instruction: "Back to Mad Libs: To get started, + set up the two screens for your Mad Libs app (Click to show full instructions)" U3L16 Mad Lib getText_instruction: "Before setting the text area with your Mad Libs outline, get the user's text and incorporate their responses. (Click to see full instructions) " U3L16 Mad Lib setText_instruction: "When the Next button is clicked, set the text area to have the main outline of your How-to Mad Libs (without the user's input). (Click to see full instructions) " - U3L16 Mad Lib Student Setup_instruction: "Back to Mad Libs: To get started, - set up the two screens for your Mad Libs app (Click to show full instructions)" U3L16 Mad Lib toUpper_instruction: "Apply the toUpperCase and toLowerCase string functions to the user's text. (Click to see full instructions) " U3L17 - getAndSetKeyValue_instruction: "Create an image like app. (Click to @@ -7284,11 +4831,16 @@ en: of the things you might not have used yet. Feel free to explore then and experiment if you want to. Everything else you need should be shown. Have fun!" + U3L19 - DEMO up down count practice app_instruction: "Try out the demo app + (Click to see full instructions)" U3L19 - Debugging with consoleLog_instruction: "Add console.log() statements to find out the value of a and b after the first reassignment statement a = b; (Click to see full instructions)" - U3L19 - DEMO up down count practice app_instruction: "Try out the demo app - (Click to see full instructions)" + U3L19 - Simple If-statements in UpDown App_instruction: "Add an if statement + so that the app changes screens when the count reaches -5. (Click to see full + instructions)" + U3L19 - Target Clicker App_instruction: "Investigate the new elements of the + 'chaser-game'" U3L19 - do concatenate string with var_instruction: "We've given you a piece of code from the previous screen. Try changing the value assigned to foo to see the string change. \r\nDo this: \r\n1. Try changing the value assigned @@ -7304,11 +4856,6 @@ en: is clicked. (Click to see full instructions)." U3L19 - practice with setText_instruction: "Add another button that changes the text to the value of a new variable. (Click to see full instructions)" - U3L19 - Simple If-statements in UpDown App_instruction: "Add an if statement - so that the app changes screens when the count reaches -5. (Click to see full - instructions)" - U3L19 - Target Clicker App_instruction: "Investigate the new elements of the - 'chaser-game'" U3L19 - test reassignment of two vars_instruction: "Predict the value of a and b. Add console.log statements to find out the actual value of a and b. (Click for full instructions)" @@ -7395,8 +4942,6 @@ en: digital assistant's keywords/phrases." U3L24 Chatbot Nested Conditionals_instruction: "Add a chained conditional with at least 3 \"else if\" statements to your personal assistant." - U3L24 introIncludes_instruction: "Practice using the includes command. (Click - to see full instructions)" U3L24 Nested Conditionals 1_instruction: "Change all of the boolean expressions to use includes instead of ==. (Click to see full instructions)" U3L24 Nested Conditionals 2_instruction: "Nest your movie genre if statements @@ -7408,6 +4953,8 @@ en: U3L24 Nested Conditionals Bugs_instruction: "Expose the bugs in this problem by typing inputs into the user-input box. Track which inputs cause unexpected outputs." + U3L24 introIncludes_instruction: "Practice using the includes command. (Click + to see full instructions)" U3L25 - drag out key event_instruction: "Set up an event handler to respond to keypress events, and display event.key in the console. Hit keys on the keyboard to see what happens. (Click to see full instructions)" @@ -7466,22 +5013,8 @@ en: location, facing its original direction. (Click to see full instructions)" U3L2_TurtleSquare_right_instruction: "Draw a square to the front and to the right of the starting location. (Click to show full instructions)" - U4 - add createRecord to contacts App_instruction: "Add code to your contacts - app so that newly-added contacts are saved in a table. (Click to see full - instructions)" U4 - Add Row By Hand_instruction: "Add a new record to your table in the Data Viewer. (Click to see full instructions)" - U4 - Charts - drawChartFromRecords 1_instruction: "Use the drawChartFromRecords - block to create a scatter plot from the table in the database. (Click to see - full instructions)" - U4 - Charts - drawChartFromRecords Options 1_instruction: "Add a title to your - chart and change the colors of your lines using the options parameter of drawChartFromRecords. - (Click to see full instructions)" - U4 - Charts - drawChartFromRecords Options 2_instruction: "Look through the - drawChartFromRecords API and choose some more options to customize. (Click - to see full instructions)" - U4 - Charts - drawChartsFromRecords 1_instruction: "Add screen element, pull - out drawCharts block, run the program!" U4 - Charts - Export Data_instruction: "Export the data from the “ages” table as a CSV file, then remix this app and import the CSV file. (Click to see full instructions)" @@ -7501,6 +5034,17 @@ en: see what happened to the data. (Click to see full instructions)" U4 - Charts - Scatter Chart_instruction: "Create a scatter plot of the “rottenTomatoes” table, using the new table and column names. (Click to see full instructions)" + U4 - Charts - drawChartFromRecords 1_instruction: "Use the drawChartFromRecords + block to create a scatter plot from the table in the database. (Click to see + full instructions)" + U4 - Charts - drawChartFromRecords Options 1_instruction: "Add a title to your + chart and change the colors of your lines using the options parameter of drawChartFromRecords. + (Click to see full instructions)" + U4 - Charts - drawChartFromRecords Options 2_instruction: "Look through the + drawChartFromRecords API and choose some more options to customize. (Click + to see full instructions)" + U4 - Charts - drawChartsFromRecords 1_instruction: "Add screen element, pull + out drawCharts block, run the program!" U4 - CreateRecord - 1_instruction: "Add a createRecord command and run the program. (Click to see full instructions)" U4 - CreateRecord - 2.5_instruction: "Change the table name in createRecord @@ -7516,6 +5060,99 @@ en: U4 - CreateRecord - 5_instruction: "Add a property to the JavaScript object, then run the program. View the data table and see how changing the object affects the data table. (Click to see full instructions)" + U4 - Edit Data Table by Hand_instruction: "View the data table and click edit + next to each row. Add the artists names for each song by hand. (Click to + see full instructions)" + U4 - Exploring Data Tools - Template_instruction: "Use createRecord to add + the song object as a record to a table. (Click to see full instructions)" + U4 - Objects - accessingPropertiesInArray_instruction: "Access the properties + of the objects stored in an array. (Click to see full instructions)" + U4 - Objects - arraysOfObjects_instruction: "Create an array called \"students\" + and add all 5 student objects to the array. (Click to see full instructions)" + U4 - Objects - createContactObject_instruction: "Construct a new object from + the user inputs, and append it to your array. (Click to see full instructions)" + U4 - Objects - createContactsData_instruction: "Add values to the three contact + objects provided in the starter code. (Click to see full instructions)" + U4 - Objects - createDotNotation_instruction: "Create a student Object yourself. + Add properties to your object one at a time using dot notation. (Click to + see full instructions)" + U4 - Objects - createObject_instruction: "Create an object with at least 3 + properties and display it in the Debug Console. (Click to see full instructions) + " + U4 - Objects - dotNotation_instruction: "Use dot notation to display individual + properties of the object. (Click to see full instructions)" + U4 - Objects - eventHandlersToSwitchScreen_instruction: "Attach event handlers + to the \"Add Contact\" and \"Go Back\" buttons that allow the user to switch + screens. (Click to see full instructions)" + U4 - Objects - eventParameter_instruction: "Trigger both the keyboard and mouse + event and examine the event objects displayed in the console. Why might an + object be the best way to store this information? (Click to see full instructions)" + U4 - Objects - exemplarContactsApp_instruction: "Use the Contacts app and then + add a contact of your own. (Click to see full instructions)" + U4 - Objects - loopingArray_instruction: "Loop over your array of students + and print the name of every students. (Click to see full instructions)" + U4 - Objects - loopingArray2_instruction: "Loop over your array of students + and print the name and grade of every student. (Click to see full instructions)" + U4 - Objects - loopingCompoundConditions_instruction: "Loop over the array + of students and display the information of students who are present and in + the 11th grade. (Click to see full instructions)" + U4 - Objects - loopingConditions_instruction: "Loop over your array of student + objects and display the names of every student who is present in class. (Click + to see full instructions)" + U4 - Objects - pullValues_instruction: "Create an event handler for the \"Save + Contact\" button that displays the contents of the 4 text input fields in + the console. (Click to see full instructions)" + U4 - Objects - readStarterCode_instruction: "Familiarize yourself with the + starter code and UI elements provided. (Click to see full instructions)" + U4 - Objects - resetIndexAndShow_instruction: "Add code to your event handler + for the \"Save Contact\" button so that when a new contact is added, the inputs + are cleared, the screen is switched, and the correct contact is shown. (Click + to see full instructions)" + U4 - Objects - showContact1_instruction: "Add code to the showCurrentContact + function to show the name of the contact stored at the currentIndex of your + array. (Click to see full instructions)" + U4 - Objects - showContact2_instruction: "Add the phone number and birthday + text to your text area. (Click to see full instructions)" + U4 - Objects - showContact3_instruction: "Display the image information for + each contact. (Click to see full instructions)" + U4 - Objects - showSampleImage_instruction: "Attach an event handler to the + image URL text input so that the user can confirm their image will work as + expected. (Click to see full instructions)" + U4 - Objects - writeWrap_instruction: "Use the wrap function to prevent currentIndex + from leaving the bounds of your array. (Click to see full instructions)" + U4 - Read Record - 1.2_instruction: "Place a console.log command below the + readRecords command. (Click to see full instructions)\r\n" + U4 - Read Record - 1.3_instruction: "Add a console.log command inside the callback + function. (Click to see full instructions)\r\n" + U4 - Read Record - 1_instruction: "Use console.log to display the records returned + by a call to readRecords. (Click to see full instructions)\r\n" + U4 - Read Record - 2_instruction: "Change the table name so that the records + are read from the new table. (Click to see full instructions)\r\n" + U4 - Read Record - 3_instruction: "Change the name of the table in a readRecords + command to read from a table that does not exist. (Click to see full instructions)\r\n" + U4 - Read Record - 4.1_instruction: "Use indexes and dot notation to reference + values in the response from the database. (Click to see full instructions)\r\n" + U4 - Read Record - 4_instruction: "Print out each record return from the readRecords + call individually. (Click to see full instructions)\r\n" + U4 - Read Record - 5_instruction: "Using a for loop, display the title of each + movie in your database. (Click to see full instructions)\r\n" + U4 - Read Record - part 1 - template_instruction: "Use console.log to display + the records returned by a call to readRecords. (Click to see full instructions)\r\n" + U4 - ReadRecords - Contacts App 1_instruction: "Use readRecords to copy the + data in your database into your \"contacts\" global variable and call showCurrentContact. + (Click to see full instructions)" + U4 - ReadRecords - Contacts App 2_instruction: "Create a function called refreshLocalData. + (Click to see full instructions)" + U4 - ReadRecords - Contacts App 3_instruction: "Add a call to \"refreshLocalData\" + to the callback function of the createRecord you use to add a new contact + to your database. (Click to see full instructions)" + U4 - ReadRecords - Contacts App 4_instruction: "Create a \"Delete\" button. + (Click to see full instructions)" + U4 - ReadRecords - Contacts App 5 make delete work_instruction: "Create an + event handler for the \"Delete\" button you created. (Click to see full instructions)" + U4 - add createRecord to contacts App_instruction: "Add code to your contacts + app so that newly-added contacts are saved in a table. (Click to see full + instructions)" U4 - debug column names are case sensitive_instruction: "Change song.title to song.Title (capital T). And run the program. Check the data table (Click to see full instructions)" @@ -7530,11 +5167,6 @@ en: U4 - deleteRecords 2_instruction: "Using the data viewer, find the id of a a record you want to delete. Use the deleteRecord command to delete it. (Click for full instructions)." - U4 - Edit Data Table by Hand_instruction: "View the data table and click edit - next to each row. Add the artists names for each song by hand. (Click to - see full instructions)" - U4 - Exploring Data Tools - Template_instruction: "Use createRecord to add - the song object as a record to a table. (Click to see full instructions)" U4 - fix contacts by hand in data table_instruction: "Use the data viewer to add rows to the data table. Add the original hard-coded contacts from your app to the database. (Click to see full instructions)" @@ -7542,178 +5174,2546 @@ en: you add are saved to the database. Verify that after restarting your app, the contacts you added no longer show in the app, but still exist in the database. (Click to see full instructions)" - U4 - Objects - accessingPropertiesInArray_instruction: "Access the properties - of the objects stored in an array. (Click to see full instructions)" - U4 - Objects - arraysOfObjects_instruction: "Create an array called \"students\" - and add all 5 student objects to the array. (Click to see full instructions)" - U4 - Objects - createContactObject_instruction: "Construct a new object from - the user inputs, and append it to your array. (Click to see full instructions)" - U4 - Objects - createContactsData_instruction: "Add values to the three contact - objects provided in the starter code. (Click to see full instructions)" - U4 - Objects - createDotNotation_instruction: "Create a student Object yourself. - Add properties to your object one at a time using dot notation. (Click to - see full instructions)" - U4 - Objects - createObject_instruction: "Create an object with at least 3 - properties and display it in the Debug Console. (Click to see full instructions) + U4 vigenere cipher 2_instruction: "Instructions" + U4L02 - Objects - Template1_instruction: "Template" + U4L02 - Objects - createObject_instruction: "Create an object with at least + 5 values including at least one string and one number. (Click to see full + instructions) " + U4L02 - Objects - eventParameter_instruction: "Trigger both the keyboard and + mouse event and examine the event objects displayed in the console. Why might + an object be the best way to store this information? (Click to see full instructions)" + U4L06 Data Storage 1_instruction: "Fill in your name instead of \"Enter Your + Name\", run the app and click the button. Run it multiple times with different + names! Watch the console and use the ‘View Data” button to see how the table + is updated. As you play around make sure you can explain the purpose of each + of the circled parts of the diagram.\r\n\r\n" + U4L06 Data Storage 2_instruction: "The app is a continuation of the previous + one we started. Add a text label to collect the users name and use that as + the data input for the record.\r\n\r\nRun the app and click the button multiple + times and see what happens. Is there a problem you notice? " + U4L06 Data Storage 3_instruction: "We want to improve the user experience. + Once they have submitted their data for storage, it would be nice to clear + the textbox. Update your app to clear the textbox after the data is stored." + U4L06 Data Storage 4_instruction: "Add a label and drop down box, to your app + and save the data to your JSON object and add it to your table. Make sure + to reset the dropdown after the data is stored." + U4L06 Data Storage 5_instruction: "Add a couple radio buttons or checkboxes + to our app. Then find a way to collect the data from those. " + U4L06 Data Storage 6_instruction: " Use one of the getTime() and getUserId() + blocks to collect additional data. " + U4L06 Data Storage 7_instruction: "Add a second screen to the sample app we + have been building to capture an image from a user. Return to screen 1 after + the JSON object has been stored in the table." + U4L15 Read Data 1_instruction: "Run the level and see what happens. Then edit + the code to make it print a different column of information." + U4L15 Read Data 2_instruction: "Student should create a sentence which puts + together all the pieces from a record.\r\n\r\n<<Name>> is <<Age>> years old + and like <<Food>>" + U4L15 Read Data 3_instruction: "Print the sentence using the first JSON object + in the array\r\n\r\n" + U4L15 Read Data 4_instruction: "\r\nUse a random record from the list of records + to display your sentence." + U5 if-else-if movie example_instruction: "Add an else-if statement in order + to tell the user if their guess is high or low instead of just wrong. (Click + to see full instructions)" + U6 - Final Project - Project Level_instruction: "Build your final project here. + (Click to see full instructions)" + U6 - updateRecord - Callback Success Parameter_instruction: "Add an if-else + block inside the callback function for updateRecord. (Click to see full instructions)" + U6 - updateRecord - Contacts - Edit UI_instruction: "Set up the UI elements + needed to edit contacts. (Click to see full instructions)" + U6 - updateRecord - Contacts - Edit event handler_instruction: "Write event + handlers for the Edit Contacts UI elements. (Click to see full instructions)" + U6 - updateRecord - Contacts - Save edited contact_instruction: "Use updateRecord + to store the user's edits in the database. (Click to see full instructions)" + U6 - updateRecord - Default Block_instruction: "Use updateRecord to change + the record for \"Eye of the Tiger.\" (Click to see full instructions)" + U6 - updateRecord - Update Nonexistent Record_instruction: "Force updateRecord + to fail by changing the ID of songToUpdate. (Click to see full instructions)" + Underground Avoiding Lava_instruction: "Lava is hiding beneath some of these + blocks, which you'll need to cover up before moving forward. An \"if\" command + will come in handy here. Add a \"move forward\" command in the correct place + to mine these blocks." + Underground If Statements_instruction: "Now things are getting tricky. Mine + 3 redstone, but don’t fall in the lava. Use an \"If\" command to place cobblestone + over any lava you uncover." + Underground Iron_instruction: "Walking into molten lava is a bad idea. Place + cobblestone to create a bridge, then mine at least two of the iron blocks." + Underground Mine in a Circle_instruction: "Find a way to get 5 diamond and + 7 redstone! Try using a repeat command inside a repeat command to walk in + a square.\r\n" + Underground Mining Coal_instruction: "You’ll find the most valuable resources + underground, but it can get dark. Place at least 2 torches and mine at least + 2 coal." + Underground Test Level_instruction: "Collect all of the minerals!" + Unicorn Tag_instruction: "Take a look at this project. Do you see how it was + made?" + Vigenere_instruction: "Test" + WhileAdventure_instruction: "Our adventurer wants to collect coins. Can you + help her grab as many as she can using only one remove 1 block?" + 'Widget: Black and White Pixelation_instruction': "Now make your own image! + We've started you off with a 10x10 canvas but you can make it whatever size + you want. Happy pixeling!" + 'Widget: Color Pixelation_instruction': "Requirements: The icon must be 16x16 + pixels. You must use the Pixelation Widget to encode the bits of color information. + The image must be encoded with at least 12 bits per pixel." + 'Widget: Text Compression_instruction': "Look for patterns (repeated words + or phrases) in the text. Enter the patterns you see into the dictionary on + the right. As you type entries into the dictionary, the symbol for the entry + is inserted into the text in place of the pattern." + XML Scratchpad_instruction: "Using this test level to grab xml for unit tests" + aE1_instruction: "You chose to make a square napkin! \r\n\r\nTo finish, draw + a square with 20 pixel sides. " + aE2_instruction: "If you place your square loop inside another loop, we call + that a nested loop. What do you need to add as an outer loop to make sure + all 14 napkins line up next to each other?" + aE3_instruction: "We've got to have a tablecloth! \r\n\r\nTake your row of + 14 napkins and sew 14 of those together with another **outer loop** to make + a cover for our table." + aE3alternate_instruction: "Alternate" + aE3alternateB_instruction: "Alternate" + aE4_instruction: "Alternate" + aE5_instruction: "Example of puzzle using highest difficulty level shape." + aE6_instruction: "How many times do you need to loop this to draw half of + a circle? " + aE7_instruction: "If you create another loop like this one, but turn left instead + of right, what happens? \r\n\r\nCan you repeat all of that to draw this wave?" + aE8_instruction: "Now let's loop that whole thing four times to create this + picture frame. Watch out for the corners - you can't just turn 90 degrees! + \r\n\r\nIf looping a 3 degree turn 60 times makes a half circle, which of + these blocks of code will make an additional quarter circle for the corners?" + aEfreeplay_instruction: "Free Play!" + allthethings data blocks test_instruction: "Please sign in to test applab levels + (By design, applab levels only work if signed in. Normally, we make people + sign in, but this is only enforceable for a whole script and would be annoying + to do for the allthethings script)." + allthethings design mode elements_instruction: "Please sign in to test applab + levels (By design, applab levels only work if signed in. Normally, we make + people sign in, but this is only enforceable for a whole script and would + be annoying to do for the allthethings script)." + allthethings level dataTables_instruction: "Please sign in to test applab levels + (By design, applab levels only work if signed in. Normally, we make people + sign in, but this is only enforceable for a whole script and would be annoying + to do for the allthethings script)." + allthethings_U3 - Simple Drawing - Rectangle Width and Height_instruction: "Do + This" + allthethings_moviebot_instruction: "This level cloned from \"U3 Digital Assistant + Target\"" + allthethings_template_backed1_instruction: "Backed by a template #1. Please + sign in to test applab levels (By design, applab levels only work if signed + in. Normally, we make people sign in, but this is only enforceable for a whole + script and would be annoying to do for the allthethings script). " + allthethings_template_backed2_instruction: "Backed by a template #2. Please + sign in to test applab levels (By design, applab levels only work if signed + in. Normally, we make people sign in, but this is only enforceable for a whole + script and would be annoying to do for the allthethings script)." + artistDebugVideo1_instruction: "Use the `repeat` loop to add waves to the water." + artistFunctionsVideo1_instruction: "Follow the instructions to make your own + function." + artistLoopsK1_instruction: "This is a new type of puzzle called \"Artist\". + Play with the level and draw something fun." + artistLoopsK2_instruction: "Now, use a `repeat` loop to draw this line five + times!" + artistLoopsK2gradek_artist_loops3_instruction: "Now, use a `repeat` loop to + draw this line five times!" + artistLoopsK3_instruction: "Draw a line eight steps long. This will become + the land for our kingdom!" + artistLoopsK4_instruction: "Now we need a castle with a draw bridge. Fix the + code so that the bridge lays straight instead of falling down." + artistLoopsK5_instruction: "Now we need to fix the top of the castle. Can you + loop the code three times?" + artistLoopsK6_instruction: "Someone is stuck in the tower! Fix the stairs + to set them free. " + artistLoopsK7_instruction: "This tower is lovely, what is downstairs? Build + another staircase to find out! " + artistLoopsK8_instruction: "Wow! There's a garden over there! Help fix these + stairs so I can get to it." + artistLoopsK9_instruction: "**Challenge:** Lovely! Let's take a walk around + the garden." + artistLoopsKA_instruction: "These stones are in the wrong place. Help me move + them so I don't fall in!" + artistLoopsKB_instruction: "Look! It's a theater. Help me set up the chairs + so we can all see the stage. " + artistLoopsKFP_instruction: "Picture time! Use what you have learned to draw + a picture of what you think the Artist saw on stage." + beeDebugVideo1_instruction: "Use a `repeat` loop to collect all of the nectar." + birdsDebugVideo1_instruction: "Trace the path and lead me to the silly pig. + Avoid TNT or feathers will fly!" + brendan hackathon level_instruction: "these are the instructions for my level. you + should do this level and have a good time." + collector example_instruction: "Put these blocks in order to collect all of + the gold and solve the puzzle." + collectorDebugVideo2_instruction: "Put these blocks in order to collect all + of the gold and solve the puzzle." + collectorSkinVideo1_instruction: "Collect all four piles to pass this level." + collectorSkinVideo2_instruction: "Collect one pile of gold to pass this level." + course2_playlab_stage17_1_instruction: "Can you make Jorge the Dog (actor 1) + say \"Hi\"?" + course2_playlab_stage17_10_instruction: "Add blocks to the `when run` event + to change the background and the speed of Waddles.\r\n\r\nPlay the game and + move Waddles with the arrows until you score." + course2_playlab_stage17_11_instruction: "Create your own story. When you're + done, click Finish to let friends try your story on their phones." + course2_playlab_stage17_2_instruction: "Can you make Jorge (actor 1) say something, + then have Olive the Cat (actor 2) say something?" + course2_playlab_stage17_3_instruction: "Can you write a program to make Jorge + (actor 1) move toward Olive the Cat?" + course2_playlab_stage17_4_instruction: "Can you write a program that makes + Jorge (actor 1) move to Olive the Cat, and have Olive say \"Hello\" when Jorge + reaches her?" + course2_playlab_stage17_5_instruction: "Can you write a program to make Octavia + say \"Hi\" when she is clicked?" + course2_playlab_stage17_6_instruction: "Now, write a program to make Waddles + move around using the up / down / left /right keys to hit all of the targets!" + course2_playlab_stage17_7_instruction: "The `repeat forever` block allows you + to run code over and over forever. Can you attach blocks to move Chomp the + Dino (actor 2) up and down forever?" + course2_playlab_stage17_8_instruction: "Can you have Waddles (actor 1) say + \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen you're + done, play the game to make that happen." + course2_playlab_stage17_9_instruction: "Can you add a block to score a point + when Waddles runs into Octavia (actor 3)? \r\nPlay the game and move Waddles + with the arrows until you score!" + course3_playlab_stage16_1_instruction: "Can you make this dog say \"hello world\"?" + course3_playlab_stage16_2_instruction: "Can you make the dog say something + and then have the cat say something afterwards?" + course3_playlab_stage16_3_instruction: "Can you write a program to make this + dog move to the cat?" + course3_playlab_stage16_4_instruction: "Can you write a program that makes + the dog move to the cat, and have the cat say \"hello\" when the dog reaches + him?" + course3_playlab_stage16_5_instruction: "Can you add a block to make the octopus + happy?" + course3_playlab_stage16_6_instruction: "Create your own story. When you're + done, click Finish to let friends try your story on their phones." + course3_playlab_stage17_1_instruction: "Can you write a program to make the + octopus say \"hello\" when it is clicked?" + course3_playlab_stage17_2_instruction: "Can you write a program to make Waddles + move around using the up / down / left /right keys to hit all of the targets?" + course3_playlab_stage17_3_instruction: "The \"repeat forever\" block allows + you to run code continuously. Can you attach blocks to move this dinosaur + up and down repeatedly?" + course3_playlab_stage17_4_instruction: "Can you have Waddles say \"Ouch!\" + and play a \"hit\" sound if he runs into the dinosaur, and then move him with + the arrows to make that happen?" + course3_playlab_stage17_5_instruction: "Can you add a block to score a point + when Waddles runs into the octopus, and then move him with the arrows until + you score?" + course3_playlab_stage17_6_instruction: "Can you add blocks to change the background + and the speed of Waddles, and then move him with the arrows until you score?" + course3_playlab_stage17_7_instruction: "Create your own story. When you're + done, click Finish to let friends try your story on their phones." + courseA_artist_loops1_instruction: "This is a new type of puzzle called \"Artist\". + Play with the level and draw something fun." + courseA_artist_loops10_instruction: "Help me put down stones so I don't fall + in!" + courseA_artist_loops11_instruction: "Help me build steps to watch the ship + sail away." + courseA_artist_loops12_instruction: "The artist saw something funny in the + distance. Draw what you think he saw." + courseA_artist_loops2_instruction: "Help the artist draw this line two times + forward." + courseA_artist_loops3_instruction: "Draw a line forward five times." + courseA_artist_loops4_instruction: "Now, use a `repeat` loop to draw this line + five times!" + courseA_artist_loops5_instruction: "Draw a line seven steps long. This will + become our horizon." + courseA_artist_loops6_instruction: "Let's put a nice hill in the back." + courseA_artist_loops7_instruction: "Use the `repeat` loop to add waves to the + water." + courseA_artist_loops8_instruction: "We need a ladder up to the boat." + courseA_artist_loops9_instruction: "Challenge: Fix the stairs." + courseA_collector_loops1_instruction: "Move Laurel around and get as much treasure + as you can!" + courseA_collector_loops10_instruction: "Help Laurel get all of the treasure + from this deep valley." + courseA_collector_loops11_instruction: "Help Laurel get all of the treasure + from this cave." + courseA_collector_loops12_instruction: "Eureka! Collect as much treasure as + you can!" + courseA_collector_loops2_instruction: "Collect all three piles to pass this + level." + courseA_collector_loops3_instruction: "How can Laurel collect all five piles + of treasure using only one `[E-->]` block?" + courseA_collector_loops4_instruction: "Fix Laurel's path to get all of this + treasure." + courseA_collector_loops5_instruction: "Use what you learned to get all of the + treasure." + courseA_collector_loops6_instruction: "Add blocks to this code to collect all + of the treasure." + courseA_collector_loops7_instruction: "What should you add to this code to + get all of the treasure?" + courseA_collector_loops8_instruction: "Write the code to get all of this treasure." + courseA_collector_loops9_instruction: "**Challenge:** The treasure goes all + the way up these stairs! Write the code to help Laurel get it all." + courseA_maze_seq1_instruction: "Get the bird to the bad pig!" + courseA_maze_seq10_instruction: "Challenge: Go around the TNT to get the bird + to the pig! " + courseA_maze_seq11_instruction: "Move one way, then another to get the bird + to the pig." + courseA_maze_seq12_instruction: "Get that pig! " + courseA_maze_seq13_instruction: "Get the pig any way you can!" + courseA_maze_seq2_instruction: "Fix the code to get the bird to the pig." + courseA_maze_seq3_instruction: "Fix the code to get the bird to the pig!" + courseA_maze_seq4_instruction: "REMOVE a block to get the bird to the pig!" + courseA_maze_seq5_instruction: "Try this one yourself from the beginning." + courseA_maze_seq6_instruction: "Move one way, then another to get the bird + to the pig!" + courseA_maze_seq7_instruction: "Figure out what is missing and then add blocks + to get the bird to the pig!" + courseA_maze_seq8_instruction: "Solve this level and get the bird to the pig!" + courseA_maze_seq9_instruction: "Debug this level by adding blocks to get the + bird to the pig!" + courseA_playLab_events1_instruction: "This is a Play Lab level. Move blocks + to the workspace and see what happens!" + courseA_playLab_events2_instruction: "Jorge the Dog wants to say \"Hi there.\" Can + you help him?" + courseA_playLab_events3_instruction: "Connect the `move left` block to the + `when left` event block that is already in the workspace." + courseA_playLab_events4_instruction: "Now, get Jorge to move right when the + `right` button is clicked." + courseA_playLab_events5_instruction: "Add events to have Jorge move up and + down when the `up` and `down` buttons are pressed." + courseA_playLab_events6_instruction: "Make this more interesting by changing + the background and playing a random sound when Jorge is clicked." + courseA_playLab_events7_instruction: "Add anything you want to this game. Can + you make the dinosaur disappear when Jorge runs into him?" + courseA_video_events_instruction: "Need a better playlab/events combo" + courseB_artist_loops1_instruction: "This is a new type of puzzle called \"Artist\". + Play with the level and draw something fun." + courseB_artist_loops10_instruction: "Use what you have learned to draw a picture + of what you think the artist saw when he got home." + courseB_artist_loops2_instruction: "The Artist is trying to draw a line six + times, but can't get it right. Can you help?" + courseB_artist_loops3_instruction: "Help the artist draw a line 7 times to + make a garden wall." + courseB_artist_loops4_instruction: "Now we need to get the soil ready to plant. + Find the bugs in the code and help the artist prepare the ground. " + courseB_artist_loops5_instruction: "Time to fix the stairs! Repeat this pattern + five times so the artist can reach the top of the bushes." + courseB_artist_loops6_instruction: "Climb the vine and see where it goes?" + courseB_artist_loops7_instruction: "**Challenge:** It's a hidden garden! + Let's walk around." + courseB_artist_loops8_instruction: "Time to head home. Can you fix this ladder + to help the artist get down?" + courseB_artist_loops9_instruction: "Let's take the short way home, over the + pond. Can you help the artist stay on the stones?" + courseB_collector_loops1_instruction: "This is Laurel the Adventurer! Can + you move her around and get treasure?" + courseB_collector_loops10_instruction: "Help Laurel get all of the treasure + from this cave." + courseB_collector_loops11_instruction: "Eureka! Collect as much treasure as + you can!" + courseB_collector_loops2_instruction: "Collect all four piles to pass this + level." + courseB_collector_loops3_instruction: "How can Laurel collect all five piles + of treasure using only one `E -->` block?" + courseB_collector_loops3_predict1_instruction: "How can Laurel collect all + five piles of gold using only one `E -->` block?" + courseB_collector_loops4_instruction: "Fix Laurel's path to get all of this + treasure!" + courseB_collector_loops5_instruction: "Add to the code from the last puzzle + to get all of the treasure. " + courseB_collector_loops6_instruction: "Figure out the code to help Laurel get + all of the treasure!" + courseB_collector_loops7_instruction: "Write the code to get all of this treasure." + courseB_collector_loops8_instruction: "**Challenge: ** The treasure goes all + the way down these stairs! Write the code to help Laurel get it all." + courseB_collector_loops9_instruction: "*\"Help me get the treasure from this + deep valley.\"*" + courseB_collector_prog1_instruction: "This is Laurel the Adventurer! Can you + move her around and get gold?" + courseB_collector_prog2_instruction: "Four piles of gold! Collect all four." + courseB_collector_prog3_instruction: "How can Laurel collect all five piles + of gold using only one `E -->` block?" + courseB_maze_seq1_instruction: "Play with these blocks to see what they make + the bird do!" + courseB_maze_seq10_instruction: "Fix the bugs to get the bird to the pig." + courseB_maze_seq11_instruction: "It's all you! Get the bird to the pig." + courseB_maze_seq12_instruction: "Now get that pig any way you can!" + courseB_maze_seq2_instruction: "*\"A bug! Fix the code to get me to the pig.\"*" + courseB_maze_seq3_instruction: "*\"Fix the code to get me to the pig!\"*" + courseB_maze_seq4_instruction: "Add 2 blocks to get the bird to the pig." + courseB_maze_seq5_instruction: "Now try this puzzle from the start!" + courseB_maze_seq6_instruction: "Move one way, then another to get the bird + to the pig!" + courseB_maze_seq7_instruction: "Figure out what is missing and then add blocks + to get the bird to the pig!" + courseB_maze_seq8_instruction: "Your turn! What do you need to do to get the + bird to the pig?" + courseB_maze_seq9_instruction: "Challenge: Move around the TNT to get the bird + to the pig." + courseB_maze_seqCold_instruction: "Challenge: Debug this level by adding blocks + to get the bird to the pig!" + courseB_maze_seqOld_instruction: "Go around the TNT to get the bird to the + pig! " + courseB_playLab_events1_instruction: "See if you can figure out what each block + does." + courseB_playlab_events2_instruction: "Have Daisy the Dragon say something when + you click \"Run\"." + courseB_playlab_events3_instruction: "Use an event to make Daisy the Dragon + switch to a random mood when you click on her." + courseB_playlab_events4_instruction: "Knight time! Add an event so that the + knight moves toward the dragon when the left arrow is clicked." + courseB_playlab_events5_instruction: "Now add an event so that the knight runs + away from the dragon when you press the right arrow." + courseB_playlab_events6_instruction: "Help your knight get all of the flags!\r\n\r\nTo + do this, you'll need to add events to help the knight move up and down." + courseB_playlab_events7_instruction: "Make this game fun by setting the knight + to vanish when he runs into the dragon! Play a sound when they collide to + make it feel more real." + courseB_playlab_events8_instruction: "Use your imagination. What can you do + to make this game more fun?" + courseB_playlab_eventsFP_instruction: "Use your imagination. What can you do + to make this game more fun?" + courseB_playlab_eventsToolbox_instruction: "Finish by playing a sound and making + the knight vanish when he runs into the dragon!" + courseC_PlayLab_events1_instruction: "Make Jorge the Dog (actor 1) say \"Hi + there.\"" + courseC_PlayLab_events2_instruction: "Can you make Jorge (actor 1) say something, + then have Olive the Cat (actor 2) say something afterward?" + courseC_PlayLab_events3_instruction: "Can you write a program to make Jorge + (actor 1) move toward Olive the Cat?" + courseC_PlayLab_events4_instruction: "Can you write a program that makes Jorge + (actor 1) move to Olive the Cat, and have Olive say \"Hi there.\" when Jorge + reaches her?" + courseC_PlayLab_events5_instruction: "Can you write a program to make Octavia + say \"What's new?\" when she is clicked?" + courseC_PlayLab_events6_instruction: "Now, write a program to make Waddles + move around using the up / down / left / right keys to hit all of the targets!" + courseC_PlayLab_events7_instruction: "The `repeat forever` block allows you + to run code over and over forever. Use this block to move Chomp the Dino + (actor 2) up and down by 400 pixels forever." + courseC_PlayLab_events8_instruction: "Can you have Waddles (actor 1) say \"Ouch!\" + and play a \"hit\" sound if he runs into Chomp? \r\nWhen you're done, play + the game to make that happen." + courseC_PlayLab_events9_instruction: "Can you add a block to score a point + when Waddles (actor1) runs into Octavia (actor 3)? \r\nPlay the game and move + Waddles with the arrows until you score!" + courseC_PlayLab_eventsA_instruction: "Add blocks to the `when run` event to + change the background scene and the speed of Waddles.\r\n\r\nPlay the game + and move Waddles with the arrows until you score." + courseC_PlayLab_eventsFP_instruction: "Create your own story. When you're + done, click \"Finish\" to share with friends." + courseC_artist_prog1_instruction: "Play with the blocks in the toolbox to see + what they do!" + courseC_artist_prog2_instruction: "Drag blocks onto the screen to have the + artist draw over the grey lines in the picture. (Each line is 100 pixels long)" + courseC_artist_prog3_instruction: "Each side of the inner square is 100 pixels + and all of the angles are 90 degrees." + courseC_artist_prog4_instruction: "Finish Starla's rocket so she can chase + her pet." + courseC_artist_prog5_instruction: "Finish this tag by drawing a rectangle around + the outside.\r\n(The long sides are 200 pixels each and the short sides are + each 100 pixels)" + courseC_artist_prog6_instruction: "Draw this diamond with 200 pixel sides." + courseC_artist_prog7_instruction: "**Challenge:** This tag is a special one! Can + you figure out how to draw the outline?" + courseC_artist_prog8_instruction: "One more tag. This is a triangle for Pi.\r\n(Each + side is 150 pixels)" + courseC_collector_prog1_instruction: "Play around with the blocks to see if + you can help Laurel collect some treasure." + courseC_collector_prog2_instruction: "Move Laurel to the treasure, then use + `collect` to pick it up." + courseC_collector_prog3_instruction: "Order these blocks to collect the treasure + and solve the puzzle." + courseC_collector_prog4_instruction: "Put these blocks in order to collect + all of the treasure and solve the puzzle." + courseC_collector_prog5_instruction: "These blocks are in the wrong order. + Can you fix them?" + courseC_collector_prog6_instruction: "Reorder the blocks to collect all of + the treasure." + courseC_collector_prog7_instruction: "Use blocks from the toolbox to collect + all of the treasure." + courseC_collector_prog8_instruction: "*\"Keep up the good work! Help me collect + all of the treasure.\"*" + courseC_collector_prog9_instruction: "*\"Let's get all of the treasure!\"*" + courseC_collector_progA_instruction: "Help Laurel collect all of the treasure." + courseC_collector_progB_instruction: "Collect as many coins as you can to finish + the stage!" + courseC_harvester_loops1_instruction: "Use loops to pick all of the pumpkins." + courseC_harvester_loops10_instruction: "Collect all of the corn and all of + the pumpkins." + courseC_harvester_loops11_instruction: "Collect all of the corn and all of + the pumpkins." + courseC_harvester_loops2_instruction: "Can you combine two different loops + to move toward the pumpkins, then collect them all?" + courseC_harvester_loops3_instruction: "Collect all of the pumpkins." + courseC_harvester_loops4_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_harvester_loops5_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_harvester_loops6_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_harvester_loops7_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_harvester_loops8_instruction: "**Challenge:** Collect all of the corn + and all of the pumpkins." + courseC_harvester_loops9_instruction: "Collect all of the corn and all of the + pumpkins." + courseC_maze_debugging1_instruction: "Fix the code to help get Skrat get to + the acorn." + courseC_maze_debugging10_instruction: "Debug this level by rearranging and + changing blocks to get me to the pig!" + courseC_maze_debugging2_instruction: "Use your debugging skills to get Skrat + to the acorn." + courseC_maze_debugging3_instruction: "Remove blocks to get Skrat to the acorn!" + courseC_maze_debugging4_instruction: "Someone has their directions mixed up! + Can you help?" + courseC_maze_debugging5_instruction: "Debug this level by rearranging and changing + blocks." + courseC_maze_debugging6_instruction: "Figure out what is wrong and get Skrat + to the acorn." + courseC_maze_debugging7_instruction: "**Challenge:** Debug this level by rearranging, + adding, and deleting blocks." + courseC_maze_debugging8_instruction: "Debug this level to get Skrat to the + acorn." + courseC_maze_debugging9_instruction: "Debug this level to get Skrat to the + acorn." + courseC_maze_loops1_instruction: "Can you get the bird to the pig using 5 of + the same kind of blocks?" + courseC_maze_loops10_instruction: "You are doing great! Keep it up!" + courseC_maze_loops11_instruction: "You are almost there! This time, choose + any path you like!" + courseC_maze_loops2_instruction: "Can you get the bird to the pig by creating + a loop that uses only one `move forward` block inside of a `repeat`?" + courseC_maze_loops3_instruction: "Solve this puzzle by creating a loop!" + courseC_maze_loops4_instruction: "In this puzzle, two `repeat` loops will help + you get the bird to the pig with the fewest number of blocks!" + courseC_maze_loops5_instruction: "*\"Get me to the pig as quickly as possible!\"*" + courseC_maze_loops6_instruction: "Loops even work with more than one block + inside! Can you loop this sequence?" + courseC_maze_loops7_instruction: "Use what you learned in other puzzles!" + courseC_maze_loops8_instruction: "Challenge: Combine ideas from the last few + puzzles to complete this level." + courseC_maze_loops9_instruction: "You are doing great! Keep it up!" + courseC_maze_programming1_instruction: "For this puzzle, drag all of the blocks + together and click \"Run\" to watch it go!" + courseC_maze_programming2_instruction: "Drag an extra `move forward` block + out of the toolbox to finish your code." + courseC_maze_programming3_instruction: "There is one extra block that is going + to cause the bird to crash. Throw it away by dragging it back to the toolbox." + courseC_maze_programming4_instruction: "Avoid TNT or feathers will fly!" + courseC_maze_programming5_instruction: "Avoid the TNT." + courseC_maze_programming6_instruction: "\"Keep calm and help me find the bad + pig. Otherwise I might get angry!\"" + courseC_maze_programming7_instruction: "**Challenge:** This code has a lot + of bugs. You'll need to remove some blocks and add others." + courseC_maze_programming8_instruction: "*\"Keep calm and help me find the bad + pig.\"*" + courseC_maze_programming8_predict1_instruction: "*\"Keep calm and help me find + the bad pig.\"*" + courseC_maze_programming9_instruction: "*\"Now, help me sneak up on the pig + any way you want to!\"*" + courseC_puppy_loops10_instruction: "You are doing great! Keep it up!" + courseC_puppy_loops11_instruction: "You are almost there! This time, choose + any path you like!" + courseC_puppy_loops8_instruction: "Challenge: Combine ideas from the last few + puzzles to complete this level." + courseC_puppy_loops8courseC_maze_loops8_instruction: "Challenge: Combine ideas + from the last few puzzles to complete this level." + courseC_puppy_loops9_instruction: "You are doing great! Keep it up!" + courseD_artist_binary1_instruction: "Use the blocks below to have the artist + draw \"01010101\" in binary in the first row." + courseD_artist_binary2_instruction: "Run this code to see how the artist uses + binary to draw this pattern." + courseD_artist_binary3_instruction: "Which of the binary strings below could + you loop 8 times to draw this image?" + courseD_artist_binary4_instruction: "Can you draw this pattern by looping just + three binary digits (0s and 1s)?" + courseD_artist_binary5_instruction: "Each binary string below represents one + row of this picture. \r\n\r\nCan you rearrange them so it draws a smiley face + instead of a frown?" + courseD_artist_binary6_instruction: "Which 6 digit binary string, repeated + 11 times, will draw this image?" + courseD_artist_binary7_instruction: "What is the shortest binary string that + you can repeat to draw this image?" + courseD_artist_binary8_instruction: "Finish the code to create this drawing." + courseD_artist_binary8_predict1_instruction: "Finish the code to create this + drawing." + courseD_artist_binaryFP_instruction: "Here's a higher resolution canvas to + draw on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we start to + get creative with the bits!" + courseD_artist_functions10_instruction: "This time, use lines of 8 hexagons + with 25 pixel sides." + courseD_artist_functions2_instruction: "This time, use the `draw a square` + function to create the glasses. \r\n" + courseD_artist_functions3_instruction: "You can make this drawing by adding + a repeat block." + courseD_artist_functions4_instruction: "Now that you can draw a star, try drawing + four stars!" + courseD_artist_functions5_instruction: "Draw only those three stars to finish + this puzzle." + courseD_artist_functions6_instruction: "Make this window by drawing a square, + then turning 90 degrees before drawing another, and so on." + courseD_artist_functions7_instruction: "Try solving this puzzle by creating + `draw a window` and calling it five times. Watch out for the door!" + courseD_artist_functions8_instruction: "Challenge: Create as many functions + as you think you need to make this drawing of 50 pixel squares." + courseD_artist_functions9_instruction: "Create this image using only the blocks + provided." + courseD_artist_nestedLoops1_instruction: "Draw a triangle to kickstart this + stage. \r\n(Each side is 100 pixels long and you'll need to turn 120 degrees + for each exterior angle.)" + courseD_artist_nestedLoops10_instruction: "Take the squares from before, but + this time only make 7 of them, and lay them out in a row." + courseD_artist_nestedLoops1a_instruction: "Now loop the triangle 6 times. " + courseD_artist_nestedLoops2_instruction: "This time, complete the puzzle with + the fewest number of blocks possible." + courseD_artist_nestedLoops3_instruction: "Use your new skills to quickly draw + the last row of windows for this building.\r\n\r\nThe windows are 20 pixel + squares, each 20 pixels apart." + courseD_artist_nestedLoops4_instruction: "Great! Do the same thing with these + circles.\r\n" + courseD_artist_nestedLoops5_instruction: "What happens if you also turn 90 + degrees between circles?" + courseD_artist_nestedLoops6_instruction: "Edit blocks within your existing + code to make this image." + courseD_artist_nestedLoops7_instruction: "Use what you've learned to make + this drawing.\r\n" + courseD_artist_nestedLoops8_instruction: "Using what you have learned in the + last couple of puzzles, build this image from the beginning." + courseD_artist_nestedLoops9_instruction: "**Challenge:** Can you figure out + how to make a picture like this?" + courseD_artist_nestedLoops9_predict1_instruction: "**Challenge:** Can you figure + out how to make a picture like this?" + courseD_artist_nestedLoopsFP_instruction: "Now it's your turn. Take the skills + you have learned and make something that you love!" + courseD_artist_nestedLoopsPre1_instruction: "Create a triangle to kickstart + this stage." + courseD_artist_ramp11_instruction: "Now make a square using Artist!" + courseD_artist_ramp12_instruction: "Use what you've learned to draw this triangle + inside of a square." + courseD_bee_conditionals1_instruction: "Check to see if there's a flower under + the cloud. If there's a flower, get nectar." + courseD_bee_conditionals10_instruction: "Collect all of the nectar and make + all of the honey." + courseD_bee_conditionals1_predict1_instruction: "Check to see if there's a + flower under the cloud. If there's a flower, get nectar." + courseD_bee_conditionals2_instruction: "Check underneath every cloud to see + if it is hiding a flower before you get nectar. \r\n" + courseD_bee_conditionals3_instruction: "Help the bee collect all of the nectar. + \r\n\r\nYou can only collect nectar from flowers, but you can check any space + to see if there is a flower." + courseD_bee_conditionals4_instruction: "Get all of the nectar using as few + blocks as possible." + courseD_bee_conditionals5_instruction: "Collect all of the nectar using as + few blocks as possible" + courseD_bee_conditionals6_instruction: "Some of these clouds might have honeycombs + under them. Be sure to check if a honeycomb is hiding behind each cloud!" + courseD_bee_conditionals7_instruction: "Use the `if/else` block to collect + nectar at flowers and make honey at honeycomb." + courseD_bee_conditionals7_predict2_instruction: "Use the `if/else` block to + collect nectar at flowers and make honey at honeycomb." + courseD_bee_conditionals8_instruction: "Collect nectar if there is a flower.\r\nOtherwise, + make honey (because there is a honeycomb)." + courseD_bee_conditionals9_instruction: "Collect all of the nectar or make all + the honey." + courseD_bee_debugging1_instruction: "Fix the error(s) to collect all of the + nectar." + courseD_bee_debugging2_instruction: "Fix the error(s) to collect all of the + nectar." + courseD_bee_debugging3_instruction: "Fix the error(s) to collect all of the + nectar and make all of the honey." + courseD_bee_debugging4_instruction: "Fix the error(s) to make all of the honey." + courseD_bee_debugging5_instruction: "Challenge: All of the commands that you + need are already here...now use your debugging skills to figure out how to + solve this puzzle." + courseD_bee_debugging6_instruction: "Challenge: Fix the errors to collect + all of the nectar and make all of the honey." + courseD_bee_debugging9_instruction: "Help the bee fix the code to get all the + nectar." + courseD_bee_nestedLoops1_instruction: "Help the bee collect all of the nectar." + courseD_bee_nestedLoops2_instruction: "This time, help the bee collect all + of the nectar using as few blocks as possible." + courseD_bee_nestedLoops2_predict1_instruction: "This time, help the bee collect + all of the nectar using as few blocks as possible." + courseD_bee_nestedLoops3_instruction: "Collect all of the nectar from each + flower." + courseD_bee_nestedLoops5_instruction: "Collect all of the nectar from each + flower and make honey at the honeycomb. " + courseD_bee_nestedLoops6_instruction: "Make all of the nectar." + courseD_bee_nestedLoops7_instruction: "Challenge: Figure out how to get all + of the nectar using only the blocks available." + courseD_bee_nestedLoops8_instruction: "Collect all of the nectar from each + flower and make honey at the honeycomb. " + courseD_bee_nestedLoops9_instruction: "Make all of the honey." + courseD_bee_nestedLoops9_predict2_instruction: "Make all of the honey." + courseD_collector_ramp10_instruction: "Help Laurel collect all of the treasure." + courseD_collector_ramp8_instruction: "Help Laurel collect all of the treasure." + courseD_collector_ramp9_instruction: "Help Laurel collect all of the treasure." + courseD_debugging_1_instruction: "Fix the error(s) to collect all of the nectar." + courseD_debugging_2_instruction: "Fix the error(s) to collect all of the nectar." + courseD_debugging_3_instruction: "Fix the error(s) to collect all of the nectar + and make all of the honey." + courseD_debugging_4_instruction: "Fix the error(s) to make all of the honey." + courseD_debugging_5_instruction: "Challenge: All of the commands that you need + are already here...now use your debugging skills to figure out how to solve + this puzzle." + courseD_debugging_6_instruction: "Challenge: Fix the errors to collect all + of the nectar and make all of the honey." + courseD_farmer_condLoops1_instruction: "Use conditionals to make sure that + you pick all of the corn, but don't disturb the stalks where nothing is growing + yet." + courseD_farmer_condLoops2_instruction: "Help the farmer collect both corn and + lettuce from the field." + courseD_farmer_condLoops3_instruction: "*\"Corn, lettuce, AND pumpkins! Help + me harvest them all.\"*" + courseD_farmer_condLoops4_instruction: "Help the farmer pick all of the lettuce + in each cluster before moving on to the next bunch." + courseD_farmer_condLoops5_instruction: "This field has clusters of corn, lettuce, + and pumpkins all growing together. Can you collect them all?" + courseD_farmer_condLoops6_instruction: "Can you figure out how to pick the + pumpkin? Make sure to collect all of the corn along the way!" + courseD_farmer_condLoops7_instruction: "Challenge: Collect all of the corn + and lettuce, then pick the pumpkin." + courseD_farmer_condLoops8_instruction: "Collect all of the corn and lettuce, + then pick the pumpkin." + courseD_farmer_condLoops9_instruction: "Collect all of the corn and lettuce, + then pick the pumpkin." + courseD_farmer_condLoops9_predict1_instruction: "Collect all of the corn and + lettuce, then pick the pumpkin." + courseD_farmer_conditionals1_instruction: "Move to the pile of dirt and use + the `remove` block to remove it." + courseD_farmer_conditionals10_instruction: "Flatten all of these piles using + as few blocks as possible. " + courseD_farmer_conditionals2_instruction: "Move to the hole and fill it with + six shovelfuls of dirt, using the `fill` block." + courseD_farmer_conditionals3_instruction: "Use as few blocks as possible to + solve this puzzle." + courseD_farmer_conditionals4_instruction: "Help the farmer remove this entire + pile using a `while` loop." + courseD_farmer_conditionals5_instruction: "Help me remove all of this dirt. + " + courseD_farmer_conditionals6_instruction: "Use the `while` loop to easily fill + all of the holes." + courseD_farmer_conditionals7_instruction: "Fill in the hole at the end of each + of these paths." + courseD_farmer_conditionals8_instruction: "Challenge: Fill all of these holes + using as few blocks as possible. " + courseD_farmer_conditionals9_instruction: "Flatten all of these piles using + as few blocks as possible. " + courseD_farmer_while1_instruction: "Move to the pile of dirt and use the `remove` + block to remove it." + courseD_farmer_while10_instruction: "Flatten all of these piles using as few + blocks as possible. " + courseD_farmer_while10_predict2_instruction: "Flatten all of these piles using + as few blocks as possible. " + courseD_farmer_while2_instruction: "Move to the hole and fill it with six shovelfuls + of dirt, using the `fill` block." + courseD_farmer_while3_instruction: "Use as few blocks as possible to solve + this puzzle." + courseD_farmer_while4_instruction: "Help the farmer remove this entire pile + using a `while` loop." + courseD_farmer_while4_predict1_instruction: "Help the farmer remove this entire + pile using a `while` loop." + courseD_farmer_while5_instruction: "Help me remove all of this dirt. " + courseD_farmer_while6_instruction: "Use the `while` loop to easily fill all + of the holes." + courseD_farmer_while7_instruction: "Fill in the hole at the end of each of + these paths." + courseD_farmer_while8_instruction: "Challenge: Fill all of these holes using + as few blocks as possible. " + courseD_farmer_while9_instruction: "Flatten all of these piles using as few + blocks as possible. " + courseD_maze_nestedLoops3_instruction: "Get the zombie to the sunflower using + the fewest number of blocks possible." + courseD_maze_nestedLoops4_instruction: "Get the zombie to the sunflower using + the fewest blocks possible! " + courseD_maze_nestedLoops5_instruction: "Get the zombie to the sunflower using + the fewest number of blocks possible!" + courseD_maze_nestedLoops6_instruction: "Get the zombie to the sunflower using + only the blocks available." + courseD_maze_ramp1_instruction: "For this puzzle, drag all of the blocks together + and click \"Run\" to watch it go!" + courseD_maze_ramp2_instruction: "Drag an extra `move forward` block out of + the toolbox to finish your code." + courseD_maze_ramp3_instruction: "There is one extra block that is going to + cause the bird to crash. Throw it away by dragging it back to the toolbox." + courseD_maze_ramp4_instruction: "Avoid TNT or feathers will fly!" + courseD_maze_ramp5_instruction: "Avoid the TNT." + courseD_maze_ramp6_instruction: "\"Keep calm and help me find the bad pig. + Otherwise I might get angry!\"" + courseD_maze_ramp7_instruction: "**Challenge:** Get the bird to the pig!" + courseD_maze_until1_instruction: "Get the angry bird to the pig." + courseD_maze_until10_instruction: "Help the zombie get to the sunflower." + courseD_maze_until10_predict2_instruction: "Help the zombie get to the sunflower." + courseD_maze_until2_instruction: "Now, use the `repeat until` loop to do the + same thing without specifying how many times to move forward and turn." + courseD_maze_until3_instruction: "Get the bird to the pig." + courseD_maze_until4_instruction: "Can you get the zombie to the sunflower using + only the blocks that are available?" + courseD_maze_until5_instruction: "Use the `if` block to help the zombie decide + when to turn, then get the zombie to the sunflower." + courseD_maze_until6_instruction: "Help the zombie get to the sunflower." + courseD_maze_until7_instruction: "Help the zombie get to the sunflower." + courseD_maze_until8_instruction: "Help the zombie get to the sunflower." + courseD_maze_until9_instruction: "**Challenge:** Avoid the chompers and help + the zombie get to the sunflower." + courseD_playLab_cond1_instruction: "Get Pegleg to the dragon to solve this + puzzle." + courseD_playLab_cond2_instruction: "Give Pegleg a point every time he makes + it to the dragon. " + courseD_playLab_cond3_instruction: "1) Make the dragon change between random + emotions every second. \r\n2) Make it so when Pegleg gets to the dragon, + he gets 2 points if the dragon is happy and 1 otherwise." + courseD_playLab_cond4_instruction: "Add some code so that the ninja (actor + 3) starts chasing Pegleg as soon as the game begins. End the game as a loss + if the ninja catches him." + courseD_playLab_cond5_instruction: "Add a `repeat forever` loop that continuously + checks if the score is greater than 5, then ends the game as a win when it + is." + courseD_playLab_cond6_instruction: "1) Slow the ninja down before you set + him to chase the pirate. \r\n\r\n2) If the pirate is greater than 225 pixels + down, set the ninja to **flee** the pirate. Otherwise, set the ninja to **chase** + the pirate. \r\n\r\n3) If the pirate is in the safe zone, wait one second, + then deduct a point as long as he stays beneath the octopus line." + courseD_playLab_cond6cloneForTest_instruction: "Testing" + courseD_playLab_condFP_instruction: "Now, build your own game to show off to + your friends!" + courseE_artist_concept1_instruction: "Recreate this image. " + courseE_artist_concept4_instruction: "Recreate this drawing using 13 blocks + or fewer." + courseE_artist_functions1_instruction: "Help the zombie draw glasses using + squares with sides of 100 pixels. \r\nThe bridge between the glasses is 75 + pixels long." + courseE_artist_functions10_instruction: "This time, use lines of 8 hexagons + with 25 pixel sides." + courseE_artist_functions2_instruction: "This time, use the `draw a square` + function to create the glasses. \r\n" + courseE_artist_functions3_instruction: "You can make this drawing by adding + a repeat block." + courseE_artist_functions4_instruction: "Now that you can draw a star, try drawing + four stars!" + courseE_artist_functions5_instruction: "Draw only those three stars to finish + this puzzle." + courseE_artist_functions6_instruction: "Make this window by drawing a square, + then turning 90 degrees before drawing another, and so on." + courseE_artist_functions7_instruction: "Try solving this puzzle by creating + `draw a window` and calling it five times. Watch out for the door!" + courseE_artist_functions8_instruction: "Challenge: Create as many functions + as you think you need to make this drawing of 50 pixel squares." + courseE_artist_functions9_instruction: "Create this image using only the blocks + provided." + courseE_artist_ramp11_instruction: "Now make a square using Artist!" + courseE_artist_ramp12_instruction: "Use what you've learned to draw this triangle + inside of a square." + courseE_bee_concept1_instruction: "Collect all of the nectar from each flower." + courseE_bee_concept2_instruction: "Help the bee make all of the honey. You + can only make honey at a honeycomb, but you can check any space to see if + there is a honeycomb." + courseE_bee_concept3_instruction: "Collect all of the nectar using as few + blocks as possible." + courseE_bee_concept4_instruction: "Uh oh! The bee is not sure if he should + collect nectar or make honey. Can you help him out?" + courseE_bee_concept5_instruction: "Help the bee collect the nectar from the + flowers?" + courseE_bee_functions1_instruction: "Collect all the nectar from each flower." + courseE_bee_functions10_instruction: "Solve this function by creating a function + to turn, move forward and make all of the honey, then return the bee to where + it started and turn back." + courseE_bee_functions2_instruction: "Use the `get 2 nectar` function to collect + the nectar from each flower." + courseE_bee_functions3_instruction: "Build the `get 5` function to use in this + puzzle." + courseE_bee_functions4_instruction: "Use the `move and get nectar` function + to collect all of the nectar." + courseE_bee_functions5_instruction: "Now write the function to collect nectar + from the flowers." + courseE_bee_functions6_instruction: "Create a function and call it to collect + nectar at each flower and make honey at each honeycomb." + courseE_bee_functions7_instruction: "Create your own function that goes down + a path, gets nectar, makes honey, and then returns the bee to the top of the + path. Collect all the nectar and make all the honey!" + courseE_bee_functions8_instruction: "Create a function that collects all of + the nectar from each flower." + courseE_bee_functions9_instruction: "Create a function to collect all of the + nectar from each flower." + courseE_collector_ramp10_instruction: "Help Laurel collect all of the treasure." + courseE_collector_ramp8_instruction: "Help Laurel collect all of the treasure." + courseE_collector_ramp9_instruction: "Help Laurel collect all of the treasure." + courseE_farmer_concept1_instruction: "Can you write a program that fills these + holes until the ground is even?" + courseE_farmer_concept2_instruction: "Collect all of the pumpkins." + courseE_farmer_concept3_instruction: "Fill in the hole at the end of each of + these paths." + courseE_farmer_concept4_instruction: "Now let's go one level deeper! We've + nested that whole block of code into another loop, but you need to get the + artist back in place to draw the next line. Which of these code blocks can + you place at the end of the outermost loop to draw the whole grid?" + courseE_farmer_functions1_instruction: "Help the farmer get to the pumpkin + and pick it." + courseE_farmer_functions10_instruction: "No one knows what these sprouts will + become. Use `if` statements to write the code to check and harvest each one. " + courseE_farmer_functions10b_instruction: "Figure out which function to use + and which one to delete, then solve this puzzle!" + courseE_farmer_functions1a_instruction: "Now help the farmer pick the corn, + lettuce, **and** pumpkin." + courseE_farmer_functions2_instruction: "Now, there will be a different number + of pumpkins each time you run the program. \r\n\r\nUse the `while` block + to pick only as many pumpkins as you need." + courseE_farmer_functions2a_instruction: "We're going to check lots of squares + for crops in the next few puzzles. Let's move everything into a function + to make it easier." + courseE_farmer_functions2aALT_instruction: "We're going to check lots of squares + for crops in the next few puzzles. Let's move everything into a function + to make it easier." + courseE_farmer_functions2b_instruction: "Help the farmer pick the corn, lettuce, + and pumpkin." + courseE_farmer_functions3_instruction: "What happens when the paths to the + pumpkins are all different lengths? \r\n\r\nGet them all with as few blocks + as possible." + courseE_farmer_functions3b_instruction: "Now help the farmer pick the corn, + lettuce, **and** pumpkin." + courseE_farmer_functions3c_instruction: "Which set of blocks helps the farmer + check for produce and pick it when it is available? Drag that code into a + function, then call your function from inside the `while path ahead` loops + (after the `move forward` block)." + courseE_farmer_functions4_instruction: "Great! Now you have code that will + work to get pumpkins from any size path.\r\n\r\nLet's drag that code into + a function so we can use it in lots of ways...but first use it to solve this + puzzle again." + courseE_farmer_functions4b_instruction: "Use your new function to solve this + puzzle." + courseE_farmer_functions5_instruction: "How can you change your program to + get this function to work for each of these paths?" + courseE_farmer_functions5a_instruction: "How can you change your program to + get this function to work for each of these paths?" + courseE_farmer_functions5b_instruction: "The crops are now growing in clusters. Add + some new `while` loops to your function to make sure you get all of the produce." + courseE_farmer_functions5c_instruction: "Your function will come in handy here." + courseE_farmer_functions6_instruction: "*\"Lettuce try something new!\"*\r\n\r\nHere's + some code to collect all of the lettuce. Move it into a function so we can + use it later." + courseE_farmer_functions6b_instruction: "Pick all of the produce." + courseE_farmer_functions6c_instruction: "What do you need to add this program + to collect all of the produce?" + courseE_farmer_functions7_instruction: "Use your functions to solve this puzzle." + courseE_farmer_functions7b_instruction: "Make a second function that lets the + farmer get all of the produce down a path, then brings her back to where she + began." + courseE_farmer_functions8_instruction: "**Challenge:** Solve this puzzle with + as few blocks as possible." + courseE_farmer_functions8b_instruction: "**Challenge:** Get the farmer to the + pumpkin and collect all of the lettuce and corn along the way. " + courseE_farmer_functions9_instruction: "Use conditionals to simplify your program." + courseE_maze_ramp1_instruction: "For this puzzle, drag all of the blocks together + and click \"Run\" to watch it go!" + courseE_maze_ramp2_instruction: "Drag an extra `move forward` block out of + the toolbox to finish your code." + courseE_maze_ramp3_instruction: "There is one extra block that is going to + cause the bird to crash. Throw it away by dragging it back to the toolbox." + courseE_maze_ramp4_instruction: "Avoid TNT or feathers will fly!" + courseE_maze_ramp5_instruction: "Avoid the TNT." + courseE_maze_ramp6_instruction: "\"Keep calm and help me find the bad pig. + Otherwise I might get angry!\"" + courseE_maze_ramp7_instruction: "**Challenge:** Get the bird to the pig!" + courseE_playLab_exampleProject2_instruction: "Here's all of your code to choose + a card - try adding some other fun features!" + courseE_playLab_scaffold1_instruction: "Choose a background and map, and pick + an actor to be your game's hero." + courseE_playLab_scaffold2_instruction: "Use event handlers and actions to make + your hero move.\r\n" + courseE_playLab_scaffold3_instruction: "Add two or more additional actors to + your game and make them move." + courseE_playLab_scaffold4_instruction: "Find some interesting ways to change + the score in your game." + courseE_playLab_scaffold5_instruction: "Now spend some time making sure the + game works the way you want. Try including a way to win or lose your game." + courseE_playLab_scaffold6_instruction: "You've finished! Now you can play + your game or share it with your friends and classmates!" + courseE_video_createFunctions_instruction: "We don't have a video for creating + functions, yet. This is a placeholder." + courseF_artist_for1_instruction: "Experiment with the `for` loop and play with + the `counter` variable." + courseF_artist_for10_instruction: "Free Play: Try using the `counter` variable + with other drawing elements to make magical images like this one." + courseF_artist_for2_instruction: "Create this stack of triangles that goes + from 50 pixel to 100 pixel sides." + courseF_artist_for3_instruction: "These triangles go from 20 pixel sides to + 200 pixel sides, and each triangle is 20 pixels larger than the last. " + courseF_artist_for4_instruction: "These squares start at 15 pixels long. The + largest is 300 pixels long, and each square is 15 pixels larger than the last. + " + courseF_artist_for5_instruction: "Just one little change to the code from the + last image can create this drawing. Can you figure out what that change is?" + courseF_artist_for6_instruction: "Try using some of the code from the last + level, but turning 89 degrees to create this twisted square spiral." + courseF_artist_for7_instruction: "Make three small changes to the code from + the last level to get this!" + courseF_artist_for8_instruction: "Take the angle down to 72 degrees to get + a spiraled pentagon." + courseF_artist_for9_instruction: "Use the counter inside the `set alpha` block + to get this faded center." + courseF_artist_fwp1_instruction: "Edit the function 'draw a square' to find + bugs." + courseF_artist_fwp2_instruction: "Edit the function to accept a parameter called + `length`." + courseF_artist_fwp2_predict1_instruction: "Edit the function to accept a parameter + called `length`." + courseF_artist_fwp3_instruction: "Create a function called 'draw a square' + and use it to outline these four boxes using parameters." + courseF_artist_fwp4_instruction: "Edit this function to add a parameter for + the number of sides in your polygon." + courseF_artist_fwp5_instruction: "Use the function from the last puzzle to + draw this series of shapes. " + courseF_artist_fwp6_instruction: "Challenge: Edit `draw a spiral edge` to use + `length` and `sides` parameters, then recreate these shapes." + courseF_artist_fwp7_instruction: "Finish off the `draw a spiral edge` function + to also ask for a minimum length for the center of the spiral." + courseF_artist_fwp8_instruction: "Can you figure out how to make this drawing + using the function that you just created?" + courseF_artist_fwp9_instruction: "Freeplay: Draw something awesome! Play with + the pen width to see how different your drawings look!" + courseF_artist_variables1_instruction: "Let's draw an equilateral triangle + that is exactly 50 pixels long on each side." + courseF_artist_variables10_instruction: "Here's your code from the last puzzle. Try + editing the variable in other ways. " + courseF_artist_variables2_instruction: "Now draw three of those triangles right + next to each other. " + courseF_artist_variables3_instruction: "Move the length of 50 into a variable + so we can use it in the next few puzzles." + courseF_artist_variables4_instruction: "Now, use the `length` variable to have + the artist jump forward and down by `length` pixels between triangles." + courseF_artist_variables5_instruction: "Add another set of loops at the end + of your code to add three more triangles. This time, move forward and up!" + courseF_artist_variables6_instruction: "Now make the triangles to be 60 pixels + wide, with 60 pixel jumps. " + courseF_artist_variables6a_instruction: "Build this design where the squares + have 80 pixel sides and the artist jumps 80 pixels over and down between each + one." + courseF_artist_variables7_instruction: "Draw a triangle with 150 pixels sides. + " + courseF_artist_variables8_instruction: "Rebuild the triangle code from the + last puzzle, but this time use the `set length to` block to reset the `length` + variable to `length`+10 at the end of each loop iteration." + courseF_artist_variables9_instruction: "See what happens when you repeat the + code from the last puzzle 30 times instead of only 3! Feel free to make your + lines any color or pattern for some extra zest." + courseF_artist_variablesFP_instruction: "**Freeplay:** Take what you've learned + and make your own drawing. " + courseF_artist_variables_10_instruction: "Here's your code from the last puzzle. Try + editing the variable in other ways. " + courseF_artist_variables_2_instruction: "Now use another loop to draw three + of those triangles right next to each other. \r\nYou can nest the code from + your last puzzle inside.\r\n" + courseF_artist_variables_5_instruction: "Add another set of loops at the end + of your code to add three more triangles. This time, move forward and up!" + courseF_artist_variables_6_instruction: "OOPS! We actually need the triangles + to be 60 pixels wide, with 60 pixel jumps. \r\nAren't you glad you're using + a variable?" + courseF_artist_variables_6a_instruction: "Build this design where the squares + have 80 pixel sides and the artist jumps 80 pixels over and down between each + one." + courseF_artist_variables_9_instruction: "See what happens when you repeat the + code from the last puzzle 30 times instead of only 3!\r\n\r\nFeel free to + make your lines any color or pattern for some extra zest." + courseF_artist_variables_FP_instruction: "**Freeplay:** Take what you've learned + and make your own drawing. \r\n\r\nHow can you use variables with squares, + pentagons, or hexagons?" + courseF_bee_for1_instruction: "Collect the nectar from each flower using the + fewest blocks possible." + courseF_bee_for10_instruction: "**Challenge:** Take what you've learned about + `for` loops and try to solve this problem. " + courseF_bee_for11_instruction: "What should your increment be to collect 15, + then 12, then 9, 6, 3 nectar?" + courseF_bee_for2_instruction: "Write the code to help the bee collect all of + the nectar.\r\n" + courseF_bee_for3_instruction: "Try this puzzle using the `for` loop and the + `counter` variable to see how much shorter your code becomes." + courseF_bee_for4_instruction: "Help the bee collect all of the nectar." + courseF_bee_for5_instruction: "Use the `counter` variable twice to solve this + puzzle." + courseF_bee_for6_instruction: "Try gathering this nectar by counting down from + 5 to 1 by 1." + courseF_bee_for7_instruction: "Try collecting these flowers using an increment + of 2." + courseF_bee_for8_instruction: "You've got this! What should your increment + be to collect 3, 6, 9, 12, 15 nectar?" + courseF_bee_for9_instruction: "Use the `counter` variable to navigate this + garden with the fewest number of blocks possible." + courseF_bee_fwp2_instruction: "Pull this code into a function, then call the + function to check this row for nectar." + courseF_bee_fwp3_instruction: "Let's see if the function makes collecting + these three rows of nectar any easier." + courseF_bee_fwp4_instruction: "Add a `length` parameter to the function so + that it will still work when the row is a different length." + courseF_bee_fwp5_instruction: "Use this function to collect the nectar." + courseF_bee_fwp6_instruction: "Build a short and sweet solution to this puzzle." + courseF_bee_fwp7_instruction: "**Challenge:** Modify your function to make + honey as well." + courseF_bee_fwp8_instruction: "Use your new function to solve this spiral." + courseF_bee_fwp9_instruction: "Use your new function to solve this puzzle." + courseF_bee_fwp9_predict1_instruction: "Use your new function to solve this + puzzle." + courseF_playlab_variables0_instruction: "This is Pirate Pegleg. He's awfully + hard to understand these days!" + courseF_playlab_variables1_instruction: "This is Pirate Pegleg. He's awfully + hard to understand these days!" + courseF_playlab_variables1a_instruction: "Variables can be used to store text + that you want to use later. Have Kiki, the soccer player, scream \"Goal!\" + by assigning that text to the `shout` variable." + courseF_playlab_variables2_instruction: "Now, decode Pirate Pegleg's speech + by changing the value of the variables in just two places! \r\n" + courseF_playlab_variables2a_instruction: "Now, decode Pirate Pegleg's speech + by changing the value of the variables in just two places! \r\n" + courseF_playlab_variables2b_instruction: "Insert the variable `color` into + the middle of a sentence by putting it into the empty slot in the `join` block." + courseF_playlab_variables3_instruction: "The `ask` block will automatically + store whatever the user answers into the variable of your choice." + courseF_playlab_variables3b_instruction: "Help Kiki have a conversation with + Brian by using the variable `A1` in all of the places where age `12` should + be used. " + courseF_playlab_variables4_instruction: "Can you find the correct variable + in the toolbox to fill in the slot?" + courseF_playlab_variables4b_instruction: "Put the variables in the correct + places to create this conversation." + courseF_playlab_variables5_instruction: "Can you find the correct variable + in the toolbox to fill in the slot?" + courseF_playlab_variables5b_instruction: "Put all of the variables in the correct + place so that Pegleg's story makes sense." + courseF_playlab_variables6b_instruction: "We have provided some starter questions + and variables for you. Join them together and put them in the title screen + to make a fun story." + courseF_playlab_variables7b_instruction: "Create some questions and weave the + answers together into your very own story." + courseF_playlab_variables8b_instruction: "Use what you've learned to create + an improv scene between the actors." + course_playlab_variables1_instruction: "This is Pirate Pegleg. He's awfully + hard to understand these days!" + course_playlab_variables2_instruction: "Now, decode Pirate Pegleg's speech + by changing the value of the variables in just two places! \r\n" + course_playlab_variables3_instruction: "Now, decode Pirate Pegleg's speech + by changing the value of the variables in just two places! \r\n" + coursef_explore_CYOA_Witch_instruction: "You can do whatever you want in play + lab! Here's an example of choose your own adventure story in play lab." + coursef_explore_playlab2_instruction: "You can do whatever you want in play + lab! Here's an example of story in play lab." + coursef_explore_playlab_cat_game_instruction: "You can do whatever you want + in play lab! Here's an example of game you can make." + drawings!_instruction: "Draw the equilateral triangle - all the sides are the + same!" + eventsIntro_instruction: "Need a better playlab/events combo" + frozen circle function in circle_instruction: "Now let's create 20 overlapping + circles, turning 18 degrees between each circle." + frozen circle function with parameter_instruction: "Here's a ”Create circle” + block that can make circles of different sizes. Can you use this to create + a small circle of size 5 and a larger circle of size 10?" + frozen circle function_instruction: "Use the new “Create a circle” block to + create 10 overlapping circles. Don't forget to jump forward between circles." + frozen circle_instruction: "A circle is a special shape. Can you figure out + what number to replace the question marks with to draw a circle?" + frozen cross rotate dense_instruction: "Let's repeat it 90 times! How many + times does 90 go into 360? Hint: It's a really small number." + frozen cross rotate_instruction: "Now try repeating it 10 times. How many degrees + do you need to turn between each line?" + frozen cross_instruction: "Wrap a “Repeat” block around these commands to create + a plus sign. Did you notice Elsa can move forward and backward?" + frozen diamond mini snowflake_instruction: "Did you know every snowflake is + a different shape? Let's create a new snowflake by using another “Repeat\" + block to repeat a parallelogram 4 times, turning right by 90 degrees between + each parallelogram." + frozen diamond snowflake_instruction: "Now, let's create a new snowflake by + using the repeat block to repeat a parallelogram 10 times, turning right by + 36 degrees between each one." + frozen diamond_instruction: "Use a repeat around these blocks to create a parallelogram. + It's just like a rectangle but has different angles. This one has 60 degree + and 120 degree angles instead of all 90 degree angles." + frozen freeplay_instruction: "You've officially become a master artist! Create + a winter wonderland." + frozen line_instruction: "Hi! I'm Elsa of Arendelle. Help me create a single + line." + frozen perpendicular_instruction: "Now let's see if we can create two lines + that are at a 90 degree angle to each other. You will need to use the \"Turn\" + block as well as the \"Move\" block." + frozen snowflake branch_instruction: "Try using the ”Create a snowflake branch” + block to create three branches, which starts to look like a snowflake." + frozen snowflake full_instruction: "Now let's repeat it 8 times to make a + beautiful snowflake!" + frozen snowflower_instruction: "Intricate snow patterns can be created with + very simple shapes. Can you make a pattern by repeating 5 circles of size + 5 and 5 circles of size 10?" + frozen square iterative_instruction: "It seems like we're halfway to making + a square. Let's put 4 lines together to create a square." + frozen square loop 3x_instruction: "Let's create three squares, turning after + each square. Be sure to turn by 120 degrees before each new square." + frozen square loop_instruction: "Hi, I’m Anna of Arendelle! Let’s make a square + with the “Repeat” block, which uses fewer blocks. How many times (???) should + the “Repeat” block loop the blocks inside it to make a square?" + frozen square snowflake_instruction: "Can you create a snowflake using the + “Repeat” block to make a square 10 times, and the “Turn” block to turn 36 + degrees between each square?" + grade1_adventurer_loops1_instruction: "Four piles of gold! Collect all four." + grade1_adventurer_loops10_instruction: "Help me get all of the gold from this + cave." + grade1_adventurer_loops2_instruction: "How can Laurel collect all five piles + of gold using only one `E -->` block?" + grade1_adventurer_loops3_instruction: "Can you fix Laurel's path to get all + of this gold?" + grade1_adventurer_loops4_instruction: "Add to the code from the last puzzle + to get all of the gold. " + grade1_adventurer_loops5_instruction: "What should you add to this code to + get all of the gold?" + grade1_adventurer_loops6_instruction: "Write the code to get all of this gold." + grade1_adventurer_loops7_challenge_instruction: "**Challenge: ** The gold goes + all the way down these stairs! Write the code to help me get it all." + grade1_adventurer_loops8_challenge_instruction: "Challenge: Try this staircase + now! It has an extra spike at the end you'll have to climb." + grade1_adventurer_loops9_instruction: "Help me get the gold from this deep + valley." + grade1_adventurer_loopsFP_instruction: "Eureka! Collect as much gold as you + can!" + grade1_adventurer_loopsPre_instruction: "This is Laurel the Adventurer! Can + you move her around and get gold?" + grade1_artist_loops1_instruction: "The Artist is trying to draw a line six + times, but can't get it right. Can you help?" + grade1_artist_loops2_instruction: "Help the artist draw a line 7 times to make + a garden wall." + grade1_artist_loops3_instruction: "Now we need to get the soil ready to plant. + Find the bugs in the code and help the artist prepare the ground. " + grade1_artist_loops4_instruction: "Time to fix the stairs! Repeat this pattern + five times so the artist can reach the top of the bushes." + grade1_artist_loops5_instruction: "Behind the bushes there is a beautiful vine + full of flowers. Can you climb the vine and see where it goes?" + grade1_artist_loops6_instruction: "**Challenge:** It's a hidden garden! Let's + walk around." + grade1_artist_loops7_instruction: "The flowers down here are so pretty. Let's + take a closer look." + grade1_artist_loops7a_instruction: "**Challenge:** Lovely! Let's take a walk + around the garden." + grade1_artist_loops7b_instruction: "Time to head home. Can you fix this ladder + to help the artist get down?" + grade1_artist_loops8_instruction: "Let's take the short way home, over the + pond. Can you help the artist stay on the stones?" + grade1_artist_loops9_instruction: "I still need a story for this puzzle" + grade1_artist_loopsFP_instruction: "Use what you have learned to draw a picture + of what you think the artist saw when he got home." + grade1_maze_sequence1_instruction: "A bug! Fix the code to get me to the pig." + grade1_maze_sequence10_instruction: "Move me around the TNT to get to the pig." + grade1_maze_sequence2_instruction: "Fix the code to get me to the pig!" + grade1_maze_sequence3_instruction: "Add 2 blocks to get the bird to the pig." + grade1_maze_sequence4_instruction: "Now try this puzzle from the start!" + grade1_maze_sequence5_instruction: "Move one way, then another to get me to + the pig!" + grade1_maze_sequence6_instruction: "Figure out what is missing and then add + blocks to get me to the pig!" + grade1_maze_sequence7_instruction: "Your turn! What do you need to do to get + the bird to the pig?" + grade1_maze_sequence8_instruction: "Debug this level by adding blocks to get + me to the pig!" + grade1_maze_sequence9_instruction: "Go around the TNT to get me to the pig! + " + grade1_maze_sequenceA_instruction: "Challenge: Move me around the TNT to get + to the pig." + grade1_maze_sequenceB_instruction: "Fix the bugs to get the bird to the pig." + grade1_maze_sequenceC_instruction: "It's all you! Get the bird to the pig." + grade1_maze_sequenceD_instruction: "Now head any which way to get that pig!" + grade1_playlab_events1_instruction: "This game is called \"Play Lab\". See + if you can figure out what each block does." + grade1_playlab_events1a_instruction: "Make your robot say \"Hello!\" when the + button is clicked." + grade1_playlab_events2_instruction: "This program makes Robin fly. Can you + get her to vanish when you click her?" + grade1_playlab_events2a_instruction: "Edit the code so that when the second + bird is clicked, your program plays a sound!" + grade1_playlab_events3_instruction: "This program makes Robin fly. Can you + make the robot jump when you press the up button?\r\n" + grade1_playlab_events3a_instruction: "When the third bird is clicked, the background + should change to a city. Can you add code to make this happen?" + grade1_playlab_events4_instruction: "Add a block to make Robin vanish when + she collides with the robot." + grade1_playlab_events4a_instruction: "Add code to make something happen when + the fourth bird is clicked. Be creative!" + grade1_playlab_events5_instruction: "Add a block to the 'when run' event + that starts the dragon flying." + grade1_playlab_events5a_instruction: "About My Robot Project! Write code so + that clicking on each bird shows a new fact about your robot." + grade1_playlab_events6_instruction: "Add a block to the 'when actor 1 clicked' + event that makes the dragon return to the middle of the screen." + grade1_playlab_events7_instruction: "Add a block so that when you push the + left arrow button, the knight surges toward the dragon." + grade1_playlab_events8_instruction: "Add a block so that when the knight collides + with the dragon, it plays a sound." + grade1_playlab_events9 RYAN COPY_instruction: "Now, have Robin wait a second, + then come back after she vanishes." + grade1_playlab_events9_instruction: "Now, add a block to keep score each time + the knight hits the dragon." + grade1_playlab_eventsFP_instruction: "Use your imagination. What can you do + to make this game more fun?" + grade1_sequence_pre_instruction: "Play with these blocks to see what they make + the bird do!" + grade1_video_frustrationRainbow_instruction: "This video describes the rainbow + of frustration and introduces persistence." + grade2_CaringForNewPet_0_instruction: "For this puzzle, drag all of the blocks + together and click \"Run\" to watch it go!" + grade2_CaringForNewPet_1_instruction: "Drag an extra `move forward` block out + of the toolbox to finish your code." + grade2_CaringForNewPet_10_instruction: "Get me to the pig!" + grade2_CaringForNewPet_11_instruction: "\"Keep calm and help me find the bad + pig.\"" + grade2_CaringForNewPet_2_instruction: "\"This pig is ruffling my feathers.\"\r\n\r\nThere + is one extra block that is going to cause the bird to crash. Throw it away + by dragging it back to the toolbox." + grade2_CaringForNewPet_2courseC_maze_programming3_instruction: "There is one + extra block that is going to cause the bird to crash. Throw it away by dragging + it back to the toolbox." + grade2_CaringForNewPet_3_instruction: "\"Trace the path and lead me to the + silly pig. Avoid TNT or feathers will fly!\"" + grade2_CaringForNewPet_3D_instruction: "\"Follow this path to get me to the + pig!\"" + grade2_CaringForNewPet_4_instruction: "\"Keep calm and help me find the bad + pig. Otherwise I might get angry!\"" + grade2_CaringForNewPet_5_instruction: "Get me to the pig!" + grade2_CaringForNewPet_6_instruction: "Challenge: Guide me to the green evilness! + (Watch out for TNT)" + grade2_CaringForNewPet_7D_instruction: "Challenge: This code has a lot of bugs. + You'll need to remove blocks and add blocks." + grade2_MakeDogTag_1_instruction: "Drag blocks onto the screen to have the artist + draw over the grey lines in the picture. (Each line is 100 pixels long)" + grade2_MakeDogTag_10_instruction: "Now, draw anything you like!" + grade2_MakeDogTag_2_instruction: "This spaceship needs a window!\r\n\r\nEach + side of the inner square is 100 pixels and all of the angles are 90 degrees." + grade2_MakeDogTag_3_instruction: "\"Oh no! Starla's pet alien just flew away! + Let's help the spacewoman!\"\r\n\r\nFinish Starla's rocket so she can chase + her pet." + grade2_MakeDogTag_4_instruction: "Finish this tag by drawing a rectangle around + the outside.\r\n(The long sides are 200 pixels each and the short sides are + each 100 pixels)" + grade2_MakeDogTag_5_instruction: "\"Now a tag for Belle!\"\r\n\r\nDraw this + diamond with 200 pixel sides." + grade2_MakeDogTag_6_instruction: "Challenge: This tag is a special one! Can + you figure out how to draw the outline?" + grade2_MakeDogTag_7_instruction: "One more tag. This is a triangle for Pi.\r\n(Each + side is 150 pixels)" + grade2_MakeDogTag_8_instruction: "Now let's connect a bunch of V's together + in a loop." + grade2_MakeDogTag_9_instruction: "Rebuild the code from the last puzzle, but + this time, add a left turn of 30 degrees inside the loop. Now, repeat it 24 + times instead of 8." + grade2_MakeDogTag_BFP_instruction: "\"Hi, I'm an artist. You can write code + to make me draw almost anything.\"\r\n\r\nPlay with the blocks in the toolbox + to see what they do!" + grade2_MakeDogTag_FP_instruction: "Freeplay: What shape will you make the tag + for your pet?" + grade2_PuppyLoops_1_instruction: "Can you get me to the pig using 5 of the + same kind of blocks?" + grade2_PuppyLoops_10_instruction: "My teacher says that I should finish what + I start!\r\n\r\nHelp me finish my pinwheel. Can you figure out what's wrong?" + grade2_PuppyLoops_2_instruction: "Can you get to the pig by creating a loop + that uses only one `move forward` block inside of a `repeat`?" + grade2_PuppyLoops_3_instruction: "Get me to the pig! Solve this puzzle by creating + a loop!" + grade2_PuppyLoops_4_instruction: "In this puzzle, two `repeat` loops will help + you get to the pig with the fewest number of blocks!" + grade2_PuppyLoops_5_instruction: "Can you figure out the fastest way to get + me to the pig?" + grade2_PuppyLoops_6_instruction: "Loops even work with more than one block + inside! Can you loop this sequence to get me to the pig?" + grade2_PuppyLoops_7_instruction: "Use what you learned to get me to the sunflower!" + grade2_PuppyLoops_8_instruction: "This code for the cat's whiskers is wrong. + \r\n\r\nFix this code to draw whiskers that are all the same length." + grade2_PuppyLoops_9_instruction: "Looks like the C in code is drawn backwards!\r\n\r\nCan + you make it look like a C again?" + grade2_collector_10_instruction: "You're almost done! Collect as many pieces + of treasure as you can to finish the stage!" + grade2_collector_2_instruction: "Move Laurel to the gold, then use `collect` + to pick it up." + grade2_collector_3_instruction: "Put these blocks in order to collect all of + the gold and solve the puzzle." + grade2_collector_4_instruction: "Sequence matters! The blocks you need are + already in the workspace, but not connected. Order these blocks to solve + the puzzle." + grade2_collector_5_instruction: "These blocks are in the wrong order. Can you + fix them?" + grade2_collector_6_instruction: "Reorder the blocks to collect all of the treasure." + grade2_collector_7_instruction: "Challenge puzzle! Use blocks from the toolbox + to collect all of the treasure." + grade2_collector_8_instruction: "\"Keep up the good work! Help me collect all + of the coins.\"" + grade2_collector_9_instruction: "*\"Let's get all of the coins!\"*" + grade2_collector_9a_instruction: "**Challenge:** Grab all of the coins." + grade2_collector_A_instruction: "Help Laurel collect all of the treasure." + grade2_collector_pre1_instruction: "\"Hi, I'm Laurel. Today I'm searching + for treasure at the dog park!\" \r\n\r\nPlay around with the blocks to see + if you can help Laurel collect some gold." + grade2_maze_debuggingFP_instruction: "\"Now, help me sneak up on the pig any + way you want to!\"" + grade2_maze_debuggingPre_instruction: "Play with these blocks to see what they + make the bird do!" + grade2_maze_intro10_instruction: "Solve this puzzle." + grade2_maze_intro2_instruction: "Welcome to Code Studio! Here you will learn + to use blocks to build programs. Press `Run` to run a program now!" + grade2_maze_intro3_instruction: "The `workspace` is where you will create all + of your programs. Can you guess what this program does? Press the “Run” button + to find out." + grade2_maze_intro4_instruction: "Drag a block from the toolbox into the workspace. + Connect it to the other blocks." + grade2_maze_intro6_instruction: "That’s it! Now we’re ready to try to solve + a few puzzles. " + grade2_maze_intro7_instruction: "This time, try something a bit more challenging." + grade2_maze_intro8_instruction: "This is a challenge puzzle. It is meant to + be hard and will probably take you a couple of tries to solve. If you don’t + solve it after several tries, don’t worry! It will be in the Play Zone at + the end of the stage and you can try it again when you’ve had more practice." + grade2_maze_intro9_instruction: "Solve this puzzle." + grade2_playlab_project_1_instruction: "Now, write a program to make Waddles + move around using the up / down / left /right keys to hit all of the targets!" + grade2_playlab_project_2_instruction: "The `repeat forever` block allows you + to run code over and over forever. Can you attach blocks to move Chomp the + Dino (actor 2) up and down forever?" + grade2_playlab_project_3_instruction: "Can you have Waddles (actor 1) say \"Ouch!\" + and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen you're done, + play the game to make that happen." + grade2_playlab_project_4_instruction: "Can you add a block to score a point + when Waddles runs into Octavia (actor 3)? \r\nPlay the game and move Waddles + with the arrows until you score!" + grade2_playlab_project_5_instruction: "Add blocks to the `when run` event to + change the background and the speed of Waddles.\r\n\r\nPlay the game and move + Waddles with the arrows until you score." + grade2_playlab_project_6_instruction: "Create your own story. When you're + done, click \"Finish\" to share with friends." + grade2_puppy_loops2_instruction: "Can you get to the pig by creating a loop + that uses only one `move forward` block inside of a `repeat`?" + grade2_puppy_loops3_instruction: "\"Get me to the pig!\"\r\n\r\n Solve this + puzzle by creating a loop!" + grade2_puppy_loops4_instruction: "In this puzzle, two `repeat` loops will help + you get to the pig with the fewest number of blocks!" + grade2_puppy_loops5_instruction: "\"Get me to the pig as quickly as possible!\"" + grade2_puppy_loops6_instruction: "\"This pig is ruffling my feathers!\"\r\n\r\nLoops + even work with more than one block inside! Can you loop this sequence?" + grade2_puppy_loops7_instruction: "\"Get me to the pig!\"\r\n\r\nUse what you + learned in other puzzles!" + grade3_AboutMyRobot_1_instruction: "Make your robot say \"Hello!\" when the + button is clicked." + grade3_AboutMyRobot_2_instruction: "Edit the code so that when the second bird + is clicked, your program plays a sound!" + grade3_AboutMyRobot_3_instruction: "When the third bird is clicked, the background + should change to a city. Can you add code to make this happen?" + grade3_AboutMyRobot_4_instruction: "Add code to make something happen when + the fourth bird is clicked. Be creative!" + grade3_AboutMyRobot_5_instruction: "About My Robot Project! Write code so that + clicking on each bird shows a new fact about your robot." + grade3_AboutMyRobot_TeacherIDo_instruction: "Run this puzzle and click on the + robot to see what happens!" + grade3_ConditionalsElse_1_instruction: "This cloud is blocking my view! Check + to see if there's a flower under the cloud, and only get nectar if there's + a flower. Be careful, it can change!" + grade3_ConditionalsElse_2_instruction: "More clouds! \r\n\r\nCheck underneath + every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade3_ConditionalsElse_3_instruction: "Now I just want to make honey. Some + of these clouds might have honeycombs under them. Be sure to check each cloud!" + grade3_ConditionalsElse_4_instruction: "Sometimes this cloud covers a flower, + and sometimes it covers a honeycomb! Use the if/else block to collect nectar + if it is a flower, else to make honey (because it is a honeycomb)." + grade3_ConditionalsElse_5_instruction: "There will be either a flower or a + honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block to collect + nectar if there is a flower.\r\nOtherwise, make honey (because there is a + honeycomb)." + grade3_ConditionalsElse_6_instruction: "I am not sure how much nectar this + flower has, but I know it has either 1, 2, or 3 nectar. \r\n\r\nCombine the + conditional blocks (`if` and/or `if/else`) to only get as much nectar as the + flower has. \r\n\r\nRemember, the amount of nectar can change each time you + run the puzzle!" + grade3_ConditionalsElse_7_instruction: "These flowers can have 3, 2, or 1 nectar. + \r\n\r\nComplete the `check purple flower` function and use it to collect + all of the nectar at the flowers." + grade3_ConditionalsElse_8_instruction: "Write the function for `check flower + make honey`. \r\n\r\nYour function should check if the purple flower has 3, + 2, or 1 nectar and get all of the nectar. \r\nThen, move forward and make + honey." + grade3_ConditionalsElse_9_instruction: "**Assessment:** This cloud is either + hiding a flower with one nectar or a honeycomb that needs one honey. \r\n\r\nComplete + the `get nectar or make honey` function, then call it to collect the nectar + or honey. \r\n" + grade3_ConditionalsElse_TeacherIDo_instruction: "There will be either a flower + or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block + to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade3_Conditionals_1 BAD_instruction: "Use a loop to collect all of the nectar." + grade3_Conditionals_1_instruction: "I'm a hungry bee! \r\nHelp me collect + all of the nectar from the flowers using the fewest number of blocks." + grade3_Conditionals_10 BAD_instruction: "Gather nectar from the rows of flowers! + Use a nested loop." + grade3_Conditionals_10_instruction: "There's a lot happening here!\r\n\r\nUse + what you've learned to collect all of the nectar and then make the honey." + grade3_Conditionals_11 BAD_instruction: "Assessment: Use a `while` loop to + collect all of the nectar from these flowers." + grade3_Conditionals_11_instruction: "Let's put everything together!\r\n\r\nUse + what you've learned to help me collect nectar only from flowers that have + it, using as few blocks as possible. Don't forget to make honey at the end." + grade3_Conditionals_12_instruction: "This stair step pattern should look familiar. \r\n\r\nCan + you collect nectar only from the flowers that have some, using as few blocks + as possible?" + grade3_Conditionals_13_instruction: "Assessment: Collect all of the nectar. + Be careful not to try to collect nectar from a purple flower if it doesn't + have any." + grade3_Conditionals_2_instruction: "Look at all of that nectar!\r\n\r\nHelp + me collect the nectar and make the honey using as few blocks as you can. " + grade3_Conditionals_3_instruction: "Be careful not to collect nectar from a + purple flower if it doesn't have any. \r\nYou must first check if the nectar + is equal to 1 using the `if nectar` block." + grade3_Conditionals_4_instruction: "Check this flower with an \"if\" block + to see if there is any nectar available." + grade3_Conditionals_5_instruction: "Collect nectar from each flower only if + it has any." + grade3_Conditionals_6_instruction: "This field has red and purple flowers. + Red flowers have a known nectar amount, but purple flower nectar is unknown. + Collect all the nectar." + grade3_Conditionals_7_instruction: "Collect all the nectar from each flower." + grade3_Conditionals_8_instruction: "I wonder what's out there!\r\n\r\nHelp + me fly around the yard and collect nectar only from the flowers that have + some. " + grade3_Conditionals_9_instruction: "Help me find all of the nectar using as + few blocks as possible!" + grade3_Conditionals_TeacherIDo_instruction: "Check this flower with an \"if\" + block to see if there is any nectar available." + grade3_Debugging_1_instruction: "These blocks are really bugging me. Fix the + error(s) to collect all of the nectar." + grade3_Debugging_5_instruction: "That flower looks tasty! \r\n\r\nFix the error(s) + to collect all of the nectar. You can now use both run and step." + grade3_Debugging_6_instruction: "What a sweet challenge!\r\n\r\nFix the error(s) + to collect all of the nectar." + grade3_Debugging_7_instruction: "Fix the error(s) to collect all of the nectar + and make all of the honey." + grade3_Debugging_9_instruction: "\"Bee\" patient with this one!\r\n\r\nYou + will need to fix a couple of things in this program to collect all of the + nectar and make all of the honey." + grade3_Debugging_TeacherIDo_instruction: "These blocks are really bugging me. + Fix the error(s) to collect all of the nectar and make all of the honey." + grade3_Loops_1_instruction: "Can you help me collect the nectar from these + flowers? " + grade3_Loops_10_instruction: "Such a busy bee!\r\n\r\nHelp bee collect all + of the nectar and make all of the honey with the fewest blocks possible." + grade3_Loops_11_instruction: "The shape of this path is different than the + others. \r\n\r\nCan you collect all of the nectar using as few blocks as possible?" + grade3_Loops_12_instruction: "Can you find the quickest way for the bee to + collect all of the nectar and make all of the honey?" + grade3_Loops_2_instruction: "This time, use a loop to gather all of the nectar." + grade3_Loops_3_instruction: "Use a `repeat` loop to collect all of the nectar." + grade3_Loops_4_instruction: "Now use the `repeat` block to collect all of the + nectar and make all of the honey." + grade3_Loops_5_instruction: "What a beautiful field of flowers! Help the + bee visit each one. Can you find a way to do it with fewer than 7 blocks?" + grade3_Loops_6_instruction: "How many times can loops help you in this puzzle? \r\n\r\nLoops + are your friend! Use a few of them to complete this puzzle with the fewest + blocks possible." + grade3_Loops_7_instruction: "Those flowers look tasty!\r\n\r\nCollect nectar + from each of the flowers using the fewest blocks possible." + grade3_Loops_8_instruction: "Collect all the nectar and make all of the honey + using the fewest blocks possible." + grade3_Loops_9_instruction: "Collect nectar from each flower and make honey + at each honeycomb using the fewest blocks possible." + grade3_Loops_TeacherIDo_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + grade3_RunningFarm_1_instruction: "Use conditionals to make sure that you pick + all of the corn, but don't disturb the stalks where nothing is growing yet." + grade3_RunningFarm_10_instruction: "Collect all of the corn and lettuce, then + pick the pumpkin." + grade3_RunningFarm_11a_instruction: "Collect all of the corn and lettuce, then + pick the pumpkin." + grade3_RunningFarm_2_instruction: "Help the farmer collect both corn and lettuce + from the field." + grade3_RunningFarm_3_instruction: "*\"Corn, lettuce, AND pumpkins! Help me + harvest them all.\"*" + grade3_RunningFarm_4_instruction: "Help the farmer pick all of the lettuce + in each cluster before moving on to the next bunch." + grade3_RunningFarm_5_instruction: "This field has clusters of corn, lettuce, + and pumpkins all growing together. Can you collect them all?" + grade3_RunningFarm_6_instruction: "Can you figure out how to pick the pumpkin? Make + sure to collect all of the corn along the way!" + grade3_RunningFarm_7_instruction: "**Challenge:** Collect all of the corn and + lettuce, then pick the pumpkin." + grade3_RunningFarm_8_instruction: "Have wheat and potatoes planted randomly + at various growth stages. Now we introduce multiple while loops (stacked) + nested inside a loop. The two while loops in the solution represent different + while loops (while there is potato and while there is wheat)" + grade3_RunningFarm_9_instruction: "Add Weeds element. Weeds start out in random + spots in the field and spread more and more rapidly as time goes on.. This + puzzle is the culminating game-like puzzle. Students should have the event + blocks (up, down, left, right, spacebar) available in the toolbox to use if + they want. The entire field should be planted randomly with mostly wheat, + potatoes, and a few weeds." + grade3_RunningFarm_TeacherIDo_instruction: "Teacher I Do: Show students how + they can use loops and conditionals to plant and harvest 2 rows of crops." + grade3_RunningFarm_TeacherIDo2_instruction: "Teacher I Do: Show students how + to use loops to harvest many crops." + grade3_bee_Conditionals_new4_instruction: "Now try checking all of these flowers + with \"if\" blocks to see if there is any nectar available." + grade3_bee_conditionals_new1a_instruction: "Help the bee collect all of the + nectar. \r\n\r\nYou can only collect nectar from flowers, but you can check + any space to see if there is a flower." + grade3_bee_conditionals_new1b_instruction: "Help the bee collect all of the + nectar. You can only collect nectar from flowers, but you can check any space + to see if there is a flower." + grade3_bee_conditionals_new2_instruction: "Collect all of the nectar using + as few blocks as possible" + grade3_bee_conditionals_new2a_instruction: "Get all of the nectar using as + few blocks as possible." + grade3_bee_conditionals_new2b_instruction: "Collect all of the nectar. You + can only collect nectar from flowers, but you can check any space to see if + there is a flower." + grade3_bee_conditionals_new3a_instruction: "Collect all of the nectar or make + all the honey. You can only collect nectar from flowers and make honey from + honeycombs. Check any space to see if there is a flower or honeycomb." + grade3_bee_conditionals_new3b_instruction: "Collect all of the nectar and make + all of the honey." + grade3_bee_conditionals_new3c_instruction: "Help the bee collect all of the + nectar and make all of the honey! Hint: Try using one loop inside of another + loop." + grade3_bee_conditionals_quantum1_instruction: "Check to see if there's a flower + under the cloud. If there's a flower, get nectar." + grade3_bee_conditionals_quantum2_instruction: "Check underneath every cloud + to see if it is hiding a flower before you get nectar. \r\n" + grade3_bee_conditionals_quantum3_instruction: "Some of these clouds might have + honeycombs under them. Be sure to check if a honeycomb is hiding behind each + cloud!" + grade3_bee_conditionals_quantum4_instruction: "Use the `if/else` block to collect + nectar at flowers and make honey at honeycomb." + grade3_bee_conditionals_quantum5_instruction: "Use the `if/else` block to collect + nectar if there is a flower.\r\nOtherwise, make honey (because there is a + honeycomb)." + grade3_maze_Loop1_instruction: "Assessment: Get me to the sunflower using + only 5 blocks! " + grade3_maze_loops1_instruction: "Get the zombie to the sunflower." + grade3_maze_loops2_instruction: "Get the zombie to the sunflower using the + fewest blocks possible! " + grade3_maze_loops2a_instruction: "Get the zombie to the sunflower using the + fewest number of blocks possible." + grade3_maze_loops3_instruction: "Get the zombie to the sunflower using only + the blocks available." + grade3_maze_loops4_instruction: "Get the zombe to the sunflower using the fewest + number of blocks possible!" + grade3_maze_loops5_instruction: "Get me to the sunflower using the fewest blocks + possible!" + grade3_maze_nestedLoops1_instruction: "Can you get me to the pig using 5 of + the same kind of blocks?" + grade3_maze_nestedLoops2_instruction: "Can you get to the pig by creating a + loop that uses only one `move forward` block inside of a `repeat`?" + grade3_maze_nestedLoops3_instruction: "Get me to the pig! You can only use + one move forward block this time" + grade3_maze_nestedLoops4_instruction: "In this puzzle, two `repeat` loops will + help you get to the pig with the fewest number of blocks!" + grade3_playLab_buildGame_1_instruction: "There is a new block in this lesson, + the `random integer` block. It is used to choose a random number. Write a + program where the robot says a random number between 1 and 100!" + grade3_playLab_buildGame_2_instruction: "We have already created a random integer, + \"j\", which is either 1 or 0. Now, we need to use it to decide whether our + card is red or black. Add a second if statement to the code under `when run` + to complete this code." + grade3_playLab_buildGame_3_instruction: "There are 13 different card values + in a deck of cards, so we'll need to have 13 options. Under the empty `when + run` block, add a line that sets the placeholder \"i\" to a random integer + between 1 and 13." + grade3_playLab_buildGame_4_instruction: "In a deck of cards, a card with value + 1 isn't actually called a \"1\", there's a special name. Write an if statement + that checks if the random number is a 1, then tell the computer that the value + of that card is \"Ace\"." + grade3_playLab_buildGame_5_instruction: "We can just call the cards from 2 + to 10 by their numbers, so add an if statement that checks whether the number + generated is within those numbers, then sets the card value to the number + generated." + grade3_playLab_buildGame_6_instruction: "There are three more cards with special + names in the deck. Add to your code so that a card number 11 is called a \"Jack\", + a 12 is a \"Queen\" and a 13 is a \"King\"" + grade3_playLab_buildGame_7_instruction: "You already know what color your card + is, but what suit is it? Add code to the conditional statement \"if card is + Red\" to choose hearts or diamonds." + grade3_playLab_buildGame_8_instruction: "Add the second part of the code to + choose a suit, copying what you made for a Red card." + grade3_playLab_buildGame_final_instruction: "Final stage for playlab conditionals + level (could hide entire function so that students just work with point scoring)" + grade3_playLab_buildGame_final2_instruction: "Here's all of your code to choose + a card - try adding some other fun features!" + grade3_robotFarmer_ConditionalsIntro4_instruction: "Help the farmer remove + this entire pile using a `while` loop." + grade3_robotFarmer_ConditionalsIntro_1_instruction: "*\"Hi, I'm a farmer. + I need your help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove + to the pile of dirt and use the `remove` block to remove it." + grade3_robotFarmer_ConditionalsIntro_10_instruction: "I'm working late, so + it's dark out, and I can't tell how large the piles are. Now I don't have + all the options I used to have on the while block. Move me along the field, + and if there is a pile, remove it" + grade3_robotFarmer_ConditionalsIntro_10a_instruction: "Flatten all of these + piles using as few blocks as possible. " + grade3_robotFarmer_ConditionalsIntro_11_instruction: "It's still dark outside. + Move me along the field. If there is a pile, remove it, and if there is a + hole, fill it in. Hint: use the dropdown menu of options on the \"if\" block." + grade3_robotFarmer_ConditionalsIntro_11a_instruction: "Flatten all of these + piles using as few blocks as possible. " + grade3_robotFarmer_ConditionalsIntro_2_instruction: "Next, move to the hole + and fill it with six shovelfuls of dirt, using the `fill` block." + grade3_robotFarmer_ConditionalsIntro_3_instruction: "*\"Move to the pile of + dirt and tell me how many shovelfuls to remove using as few blocks as possible.\"*" + grade3_robotFarmer_ConditionalsIntro_4_instruction: "*\"I don't know how much + dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using + a `while` loop." + grade3_robotFarmer_ConditionalsIntro_5_instruction: "Help me remove all of + this dirt. " + grade3_robotFarmer_ConditionalsIntro_6_instruction: "Remove all the piles of + dirt, using as few blocks as possible. The new options in the dropdown menu + on the \"while\" block tell me if I'm standing on a pile or a hole." + grade3_robotFarmer_ConditionalsIntro_7_instruction: "Look at all of those holes! Each + one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop + to easily fill them all!" + grade3_robotFarmer_ConditionalsIntro_8_instruction: "Fill in the hole at the + end of each of these paths." + grade3_robotFarmer_ConditionalsIntro_9_instruction: "**Challenge:** Fill all + of these holes using as few blocks as possible. " + grade3_robotFarmer_ConditionalsIntro_TeacherIDo1_instruction: "Help me fill + in all these holes with 5 shovelfuls of dirt. Hint: you can put a \"repeat\" + block inside the \"while\" block." + grade3_robotFarmer_ConditionalsIntro_TeacherIDo2_instruction: "I'm working + late, so it's dark out, and I can't tell how large the piles are. Now I + don't have all the options I used to have on the while block. Move me along + the field, and if there is a pile, remove it" + grade4_arist_functions_star0_instruction: "Have you drawn something like this + star before? Practice making it one more time by adding a turn and a repeat + block." + grade4_arist_nested_loop_circles1_instruction: "Assessment: Use a nested loop + to complete the design." + grade4_arist_nested_loop_flags1_instruction: "Loop the given code to create + a windmill." + grade4_arist_nested_loop_polygons1_instruction: "Loop this design 10 times. + \r\n\r\nHow much do you have to turn each time you loop?" + grade4_arist_nested_loop_polygons2_instruction: "Loop this shape 6 times. \r\n\r\nHow + much do you have to turn each time you loop? " + grade4_arist_nested_loop_squares1_instruction: "Can you draw these 10 squares + of this sidewalk using a nested loop? Each square is 30 pixels." + grade4_arist_nested_loop_triangles2_instruction: "Now nest this loop inside + another loop to draw 10 triangles. This is called a \"nested\" loop. " + grade4_arist_nested_loop_triangles3_instruction: "Can you draw a hexagon by + looping the triangle code?" + grade4_arist_nested_loop_triangles4_instruction: "Draw the teeth in the alligator's + mouth!" + grade4_arist_nested_loop_triangles5_instruction: "Create a sun by nesting the + starter code in another loop.\r\n\r\nTo get this cool design with a hollow + center, you'll need to jump forward by the length of the triangle before + turning." + grade4_arist_nested_loop_triangles6_instruction: "Can you draw these 36 triangles + using a nested loop?" + grade4_artist_freeplay_instruction: "You are on your own now! Try out any of + the functions you used in this stage or try this new function that will automatically + give your image a beautiful background color! This creation will be saved + to your Projects dashboard so that you can easily edit it any time!" + grade4_artist_functions1_instruction: "Help the zombie draw glasses using squares + with sides of 100 pixels. \r\nThe bridge between the glasses is 75 pixels + long." + grade4_artist_functions2_instruction: "Functions let you define new blocks! + \r\n\r\nWe've moved the blocks needed for drawing a square into a function + called `draw a square`. This time, use the `draw a square` function to create + the glasses. \r\n\r\nThe squares are 75 pixels apart." + grade4_artist_functions2a_instruction: "Create this image using only the blocks + provided." + grade4_artist_functions3a_instruction: "Create this image using only the blocks + provided." + grade4_artist_functions3b_instruction: "This time, use lines of 8 hexagons + with 25 pixel sides." + grade4_artist_functionsChallenge0_instruction: "**Challenge:** Create as many + functions as you think you need to make this drawing of 50 pixel squares." + grade4_artist_functions_challenge_instruction: "Use the suggested functions + to draw four rows of hexagons. Notice how our even numbered rows are shifted + to the right?" + grade4_artist_functions_challenge2_instruction: "Use the suggested functions + to draw four rows of hexagons. Notice how our even numbered rows are shifted + to the right?" + grade4_artist_functions_freeplay_instruction: "You are on your own now! Try + out any of the functions you used in this stage or try this new function that + will automatically give your image a beautiful background color! This creation + will be saved to your Projects dashboard so that you can easily edit it any + time!" + grade4_artist_functions_stars0_instruction: "You can make this drawing by adding + a repeat block." + grade4_artist_functions_stars1_instruction: "Now that you can draw a star, + try drawing four stars!" + grade4_artist_functions_stars2_instruction: "Draw only those three stars to + finish this puzzle." + grade4_artist_functions_stars3_instruction: "That last one is tough if you + only use loops. Let's try drawing the same picture using this new 'function' + that will help to **draw a star**." + grade4_artist_functions_windows0_instruction: "Make this window by drawing + a square, then turning 90 degrees before drawing another, and so on." + grade4_artist_functions_windows1_instruction: "If you can draw one window, + you can draw three! Try using your choice of a nested loop or a function here. + Don't forget the jump block!" + grade4_artist_functions_windows2_instruction: "Try solving this puzzle by creating + `draw a window` and calling it five times. Watch out for the door!\r\n\r\n- + The top windows are 50 pixels away from each other. \r\n- The bottom windows + are 100 pixels below the top set." + grade4_artist_nestedLoops_challenge_instruction: "Click here to see the full + instructions again!\r\n\r\nHere is the code for an interesting shape. What + happens when you repeat it multiple times, turning between each iteration? Notice + that the turns in this shape add up to 420 degrees, which means that when + your artist is done drawing, it will be facing a different direction than + when you started. That new direction is exactly 60 degrees to the right of + where you began." + grade4_artist_nestedLoops_challenge2_instruction: "Now for a challenge! Feel + free to use trial and error. You are not expected to get the image perfect + the first time. Want to see more hints? Click here!" + grade4_artist_nested_loop_circles1_instruction: "Assessment: Use a nested loop + to complete the design." + grade4_artist_nested_loop_flags1_instruction: "Loop the given code to create + a windmill." + grade4_artist_nested_loop_polygons1_instruction: "Loop this design 10 times. + \r\n\r\nHow much do you have to turn each time you loop?" + grade4_artist_nested_loop_polygons2_instruction: "Hi, I'm the Artist! Let's + create some drawings together! For starters, try repeating this shape 6 times. + \r\n\r\nHow much do you have to turn each time you loop? " + grade4_artist_nested_loop_squares1_instruction: "Can you draw these 10 squares + of this sidewalk using a nested loop? Each square is 30 pixels." + grade4_artist_nested_loop_triangles1_instruction: "Complete the code to draw + these triangles. The first one is done for you. Hint: 3 triangles in a + 360 degree rotation." + grade4_artist_nested_loop_triangles2_instruction: "Let's make a quick adjustment + to get completely different image! \r\nHint: ? × 10 = 360" + grade4_artist_nested_loop_triangles3_instruction: "Can you draw a hexagon by + looping the triangle code?\r\nHint: 6 × ? = 360" + grade4_artist_nested_loop_triangles4_instruction: "Hi! I'm the Artist. Let's + try some different types of drawings together. Can you help me draw the bottom + teeth in the alligator's mouth?" + grade4_artist_nested_loop_triangles5_instruction: "Create a sun by nesting + the starter code in another loop.\r\n\r\nTo get this cool design with a hollow + center, you'll need to jump forward by the length of the triangle before + turning." + grade4_artist_nested_loop_triangles6_instruction: "Can you draw these 36 triangles + using a nested loop?" + grade4_artist_parameters_squares1_instruction: "Click \"edit\" to fill in the + function definition of \"draw a square\" and add a parameter. It should take + a length parameter, just like the triangle. This time, draw 3 squares: 25, + 50 and 75 pixels in length, each 100 pixels apart." + grade4_artist_parameters_triangles1_instruction: "Today, we're going to try + out a different, more powerful function editor. See if you can figure out + how to edit the function 'draw a triangle' to find the bugs." + grade4_artist_parameters_triangles2_instruction: "Do you notice anything different + about these function blocks? Click “Run” to see what happens." + grade4_artist_parameters_triangles2b_instruction: "Can you complete this drawing? + The sides of each triangle are 25 pixels larger than the last. The first + triangle has 25 pixel sides." + grade4_artist_parameters_triangles3_instruction: "Can you complete this drawing? + The sides of each triangle are 25 pixels larger than the last. The first + triangle has 25 pixel sides." + grade4_artist_parameters_triangles4_instruction: "The code for this triangle + function is broken. Can you edit the function to fix it, and then make triangles + of length 25, 50, and 75?" + grade4_artist_parameters_trianglesx_instruction: "Can you complete this drawing? + The sides of each triangle are 25 pixels larger than the last. The first + triangle has 25 pixel sides." + grade4_bee_conditionals_nested_loops_instruction: "Collect all of the nectar. + You can only collect nectar from flowers, but you can check any space to see + if there is a flower." + grade4_bee_conditionals_new1_instruction: "Collect all of the nectar. You can + only collect nectar from flowers, but you can check any space to see if there + is a flower." + grade4_bee_conditionals_new1a_instruction: "Help the bee make all of the honey. + You can only make honey at a honeycomb, but you can check any space to see + if there is a honeycomb." + grade4_bee_conditionals_new2_instruction: "Can you help the bee collect the + nectar from the flowers? You can only collect nectar from flowers, but you + can check any space to see if there is a flower." + grade4_bee_conditionals_new2a_instruction: "Make all of the honey. It's actually + more efficient to check each space for a honey comb, even when you know some + are empty." + grade4_bee_conditionals_new3a_instruction: "Collect all of the nectar or make + all the honey. You can only collect nectar from flowers and make honey from + honeycombs. Check any space to see if there is a flower or honeycomb." + grade4_bee_conditionals_new3b_instruction: "Uh oh! The bee is not sure if he + should collect nectar or make honey. Can you help him out?" + grade4_bee_conditionals_new3c_instruction: "Help the bee collect all of the + nectar and make all of the honey! Hint: Try using one loop inside of another + loop." + grade4_bee_conditionals_quantum1_instruction: "This cloud is blocking my view! + Check to see if there's a flower under the cloud, and only get nectar if + there's a flower. Be careful, it can change!" + grade4_bee_conditionals_quantum2_instruction: "More clouds! \r\n\r\nCheck underneath + every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade4_bee_conditionals_quantum3_instruction: "Now I just want to make honey. + Some of these clouds might have honeycombs under them. The way we've been + going about things won't work here. Be sure to check if a honeycomb is hiding + behind each cloud!" + grade4_bee_conditionals_quantum4_instruction: "Sometimes this cloud covers + a flower, and sometimes it covers a honeycomb! Use the if/else block to collect + nectar if it is a flower, else to make honey (because it is a honeycomb)." + grade4_bee_conditionals_quantum5_instruction: "There will be either a flower + or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block + to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade4_bee_functions_instruction: "Have we met before? I'm the farmer! Please + help me remove this pile of dirt and fill this hole." + grade4_bee_functions1_instruction: "Collect all the nectar from each flower." + grade4_bee_functions10_instruction: "Create a function to collect all of the + nectar from each flower." + grade4_bee_functions11_instruction: "Solve this function by creating a function + to turn, move forward and make all of the honey, then return the bee to where + it started and turn back." + grade4_bee_functions2_instruction: "Functions are blocks of code that perform + a task. Use the \"get 2 nectar\" function to collect the nectar from each + flower." + grade4_bee_functions3_instruction: "Build the `get 5` function to use in this + puzzle." + grade4_bee_functions4_instruction: "Use the `move and get nectar` function + to collect all of the nectar." + grade4_bee_functions5_instruction: "This puzzle will be deleted!" + grade4_bee_functions6_instruction: "Now write the function to collect nectar + from the flowers." + grade4_bee_functions7_instruction: "Create a function and call it to collect + nectar at each flower and make honey at each honeycomb." + grade4_bee_functions8_instruction: "Create your own function that goes down + a path, gets nectar, makes honey, and then returns the bee to the top of the + path. Then collect all the nectar and make all the honey!" + grade4_bee_functions9_instruction: "Create a function that collects all of + the nectar from each flower." + grade4_bee_nestedLoops0_instruction: "Use a loop to collect all of the nectar." + grade4_bee_nestedLoops1_instruction: "Collect all of the nectar from each flower." + grade4_bee_nestedLoops2_instruction: "**Challenge:** Figure out how to get + all of the nectar using only the blocks available." + grade4_bee_nestedLoops2a_instruction: "Collect all of the nectar using as + few blocks as possible." + grade4_bee_nestedLoops3_instruction: "Collect all of the nectar by creating + a nested loop." + grade4_bee_nestedLoops4_instruction: "Collect all of the nectar from each flower + and make honey at the honeycomb. " + grade4_bee_nestedLoops_assess_instruction: "**Assessment:** Collect all of + the nectar and make all of the honey using loops.\r\n\r\nHint: There are several + possible solutions!" + grade4_designProcess_vid_instruction: "Prepare to build a project within some + given parameters." + grade4_farmer_functions1_instruction: "*\"Have we met before? I'm the farmer!\"*\r\n\r\nHelp + the farmer get to the pumpkins and pick them." + grade4_farmer_functions2_instruction: "Take the code you just wrote it and + use it to define a new function. Call the function twice to complete the puzzle." + grade4_farmer_functions3_instruction: "Try using a couple of repeat blocks + within your function definition." + grade4_farmer_functions4_instruction: "Swap out your repeat loops for more + versatile while loops." + grade4_farmer_functions5_instruction: "Things are going to start getting trickier, + but don't give up! You can use the same while loops to check both spaces + in each pass." + grade4_farmer_functions6_instruction: "The paths are a different length. You + can use a different type of while loop to keep the pattern going as long as + you need to." + grade4_frozen_freeplay_instruction: "You've officially become a master artist! + Create a winter wonderland." + grade4_frozen_functions0_instruction: "Can you figure out what number to replace + the question marks with to draw a circle?" + grade4_frozen_functions1_instruction: "Use the new “draw a circle” function + to create 10 overlapping circles. Don't forget to jump forward between circles." + grade4_frozen_functions1a_instruction: "Use the new “Create a circle” block + to create 10 overlapping circles. Don't forget to jump forward between circles." + grade4_frozen_functions2_instruction: "Now let's create 20 overlapping circles, + turning 18 degrees between each circle." + grade4_frozen_functions3_instruction: "Here's a ”Create circle” block that + can make circles of different sizes. Can you use this to create a small circle + of size 5 and a larger circle of size 10?" + grade4_frozen_functions4_instruction: "Intricate snow patterns can be created + with very simple shapes. Can you make a pattern by repeating 5 circles of + size 5 and 5 circles of size 10?" + grade4_frozen_nested_loop_diamonds1_instruction: "Let’s use a repeat block + to create a rhombus. Like a square, all sides are equal length, but the angles + are different. This one has 60 degree and 120 degree angles instead of all + 90 degree angles." + grade4_frozen_nested_loop_diamonds2_instruction: "Did you know every snowflake + is a different shape? Let's create a new snowflake by using another “Repeat\" + block to repeat a parallelogram 4 times, turning right by 90 degrees between + each parallelogram." + grade4_frozen_nested_loop_diamonds3_instruction: "Now, let's create a new + snowflake by using the repeat block to repeat a parallelogram 10 times, turning + right by 36 degrees between each one." + grade4_frozen_nested_loop_rectangle1_instruction: "Hi, I’m Anna of Arendelle! + Let’s use a repeat block to create a rectangle. This one is 200 pixels long + and 100 pixels tall. All of the corners are 90 degree angles." + grade4_frozen_square_instruction: "Hi, I’m Anna of Arendelle! Let’s make a + square with the “Repeat” block, which uses fewer blocks. How many times (???) + should the “Repeat” block loop the blocks inside it to make a square?" + grade4_frozen_square_loop1_instruction: "Hi, I’m Anna of Arendelle! Let’s make + a square with the “Repeat” block, which uses fewer blocks. How many times + (???) should the “Repeat” block loop the blocks inside it to make a square?" + grade4_frozen_square_loop2_instruction: "Let's create three squares, turning + after each square. Be sure to turn by 120 degrees before each new square." + grade4_frozen_square_loop3_instruction: "Can you create a snowflake using the + “Repeat” block to make a square 10 times, and the “Turn” block to turn 36 + degrees between each square?" + grade4_playLab_proj_example1_instruction: "instructions" + grade4_playLab_proj_example1a_instruction: "Take a look at this project. Do + you see how it was made?" + grade4_playLab_proj_example2a_instruction: "Take a look at this project. Do + you see how it was made?" + grade4_playlab_freeplay_instruction: "It's free play time! Have fun with all + the blocks in your tool box. " + grade4_playlab_test_instruction: "Use the right arrow to throw pie.\r\n\r\nIn + our game, how should we score points? Add 1 to your \"points\" variable each + time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" + event to trigger an update to your score. You can increment your variable + by setting \"points = points + 1.\" Get your score up to 10 (going one at + a time!) to pass the level." + grade4_playlab_test2_instruction: "Here's a function called `jump` that causes + your main character to jump up 100 pixels. Run the program and use the jump + function to collect all of the flags by moving the dog with the arrow keys." + grade4_prompt_test_instruction: "This is a test play lab level." + grade4_review_artist1_instruction: "Hi, I'm an artist. You can write code + to make me draw almost anything. Use a few blocks to make me draw over the + grey lines in the picture. (Each line is 100 pixels long)" + grade4_review_artist2_instruction: "This house needs a roof! Draw the triangle. Hint: + all three sides are the same length." + grade4_review_artist3_instruction: "The jump block moves the artist without + drawing. Draw the dashed line using both the `jump forward` and `move forward` + blocks. Each line is 50 pixels long." + grade4_review_bee1_instruction: "Now use the `repeat` block to collect all + of the nectar and make all of the honey." + grade4_review_bee2_instruction: "Collect nectar from each flower and make honey + at each honeycomb using the fewest blocks possible." + grade4_review_bee3_instruction: "Such a busy bee!\r\n\r\nHelp bee collect all + of the nectar and make all of the honey with the fewest blocks possible." + grade4_scaffolded_project1_instruction: "It is amazing how much you have learned! + Let's put them together to make a game, step by step." + grade4_scaffolded_project2_instruction: "Now let's get things moving! Use + event handlers and actions to make your hero move.\r\n\r\nWe've added these + blocks to your tool box to help you.\r\n" + grade4_scaffolded_project3_instruction: "Now that your game has a hero, it's + time to start adding other actors and assigning them behaviors. \r\n\r\nAdd + two or more additional actors to your game and make them move. Do you want + to have an actor patrol back and forth? Try using a these new blocks to bring + these other components of your game to life!" + grade4_scaffolded_project4_instruction: "Just getting the actors moving is + a great step, but we need to program some interactions to make this really + feel like a game. A simple way to do this is to add or remove points when + actors collide with projectiles or each other. Find some interesting ways + to change the score in your game." + grade4_scaffolded_project4a_instruction: "Just getting the actors moving is + a great step, but we need to program some interactions to make this really + feel like a game. A simple way to do this is to add or remove points when + actors collide with projectiles or each other. Find some interesting ways + to change the score in your game." + grade4_scaffolded_project5_instruction: "Now spend some time making sure the + game works the way you want. Try including a way to win or lose your game." + grade4_scaffolded_project6_instruction: "You've finished! Now you can play + your game or share it with your friends and classmates!" + grade5_artist_binary1_instruction: "Binary is a way of representing information + using only two options. Here, we're going to use the options \"off\" (represented + by the number 0) and \"on\" (represented by the number 1). \r\n\r\nWe've + provided you with a grid of \"pixels\" that you can walk through and make + designs by turning on only certain squares. Can you have the artist draw + \"01010101\" in binary in the first row?" + grade5_artist_binary10_instruction: "Click here to see hints." + grade5_artist_binary11_instruction: "Free Play: Here's a blank canvas for + you to draw on. Have fun!" + grade5_artist_binary2_instruction: "Here's a function that takes a binary + string of 1's and 0's and instructs the artist to follow them from left + to right, top to bottom. The artist will fill-in the squares when it sees + a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to see how + the artist uses binary to draw this pattern." + grade5_artist_binary3_instruction: "Which of these binary strings could you + loop 8 times to draw this image?" + grade5_artist_binary4_instruction: "Can you draw this pattern by looping just + three binary digits (0s and 1s)?" + grade5_artist_binary5_instruction: "Each binary string represents one row of + this picture. Can you rearrange them so it draws a smiley face instead of + a frowny face?" + grade5_artist_binary6_instruction: "Which 6 digit binary string, repeated 11 + times, will draw this image?" + grade5_artist_binary7_instruction: "What is the shortest binary string that + you can repeat to draw this image?" + grade5_artist_binary8_instruction: "Finish this drawing." + grade5_artist_binary9_instruction: "Here's a higher resolution canvas to draw + on - 16 pixels by 16 pixels!\r\n\r\nSee what happens when we start to get + creative with the bits?" + grade5_artist_for_loops1_instruction: "Use a `for` loop to draw this triangle + that is 50 pixels wide. If you count from 1 to 3 by 1s, you can use this just + like a `repeat` loop." + grade5_artist_for_loops10_instruction: "Can you figure out how to use all of + the things you've learned to create this image?\r\n\r\nNeed a hint? Click + here." + grade5_artist_for_loops1a_instruction: "Try using a `for loop`to create this + triangular design. Don't worry that the numbers are different than the last + puzzle. As long as you turn by the right number of degrees, the artist will + make the correct shape!" + grade5_artist_for_loops1b_instruction: "Experiment with the `for` loop and + play with the `counter` variable." + grade5_artist_for_loops2_instruction: "Use a `repeat` inside of a `for` loop + to create this stack of triangles that goes from 50 pixels to 100 pixels." + grade5_artist_for_loops3_instruction: "These triangles go from 20 pixel sides + to 200 pixel sides, and each triangle is 20 pixels larger than the last. " + grade5_artist_for_loops4_instruction: "These squares start at 15 pixels long, + the largest is 300 pixels long, and each square is 15 pixels larger than the + last. " + grade5_artist_for_loops5_instruction: "Just one little change to the code from + the last image can create this drawing. Can you figure out what that change + is?\r\n\r\nHint: You need to remove something!" + grade5_artist_for_loops6_instruction: "If you turn a little bit more or less + than you normally would for a shape, it creates a neat effect. Try using some + of the code from the last level, but turning 89 degrees to create this twisted + square spiral." + grade5_artist_for_loops7_instruction: "Make three small changes to the code + from the last level to get this!" + grade5_artist_for_loops7a_instruction: "Take the angle down to 72 degrees to + get a spiraled pentagon." + grade5_artist_for_loops7b_instruction: "Use the counter inside the `set alpha` + block to get this faded center.\r\n(This hexagon pattern was made using a + 60 degree turn.)" + grade5_artist_for_loops8_instruction: "Remember back in a previous stage when + we used a variable to control the number of sides in a shape? We are going + to do the same thing with the `counter` variable now. This pattern starts + with a triangle and adds one side at a time until it draws a decagon (10 sides). + Each side should be 100 pixels long. " + grade5_artist_for_loops9_instruction: "Let's put it all together! Using your + knowledge of `for` loops and the `counter` variable, create this drawing where + each shape has two more sides than the last. Make sure that each side is + 10 times as long as the number of sides in the polygon.\r\n\r\nVery little + of the code has been provided for you." + grade5_artist_for_loopsfreeplay11_instruction: "Free-Play Inspiration: You've + now learned everything you need to know to make a pattern like this! If this + picture inspires you, try to make something similar. Otherwise, create something + all your own.\r\n\r\nNeed a hint? Click here." + grade5_artist_for_loopsfreeplay12_instruction: "Free Play: Try using the `counter` + variable with other drawing elements to make magical images like this one." + grade5_artist_freeplay_instruction: "Create your own project! This creation + will be saved to your Projects dashboard so that you can easily edit it any + time!" + grade5_artist_functionparameters10_instruction: "Free Play Inspiration: You've + now learned everything you need to know to make a pattern like this! If this + picture inspires you, try to make something similar. Otherwise, create something + all your own.\r\n \r\nWant to know how our inspiration pattern was made? " + grade5_artist_functionparameters11_instruction: "Freeplay: Below there are + functions you've written, and more for you to play with. Draw something awesome! + Play with the pen width to see how different your drawings look!" + grade5_artist_functionparameters7_instruction: "This image is similar to the + last. Can you use a `for` loop with your function to make this design?" + grade5_artist_functionparameters8_instruction: "The triangle has 21 pixel sides, + and the sides in each following shape are 7 pixels longer than the last. Use + the `multiplication` block to make this all happen with just one function + call. Be sure to jump 100 pixels between polygons." + grade5_artist_functionparameters9_instruction: "Challenge: Edit `draw a spiral + edge` to use `length` and `sides` parameters, then recreate these shapes." + grade5_artist_functionparameters9a_instruction: "Finish off the `draw a spiral + edge` function to also ask for a minimum length for the center of the spiral." + grade5_artist_functionparameters9b_instruction: "Can you figure out how to + make this drawing using the function that you just created?" + grade5_artist_functionparameters_6_instruction: "Edit this function to add + a parameter for the number of sides in your polygon.\r\n\r\nThe sides of all + the shapes are 100 pixels long." + grade5_artist_parameters_squares1_instruction: "Click \"edit\" to fill in the + function definition of \"draw a square\" and add a parameter. It should take + a length parameter, just like the triangle. This time, draw 3 squares: 25, + 50 and 75 pixels in length, each 100 pixels apart." + grade5_artist_parameters_squares1a_instruction: "This program looks okay from + here, but something isn't working right. See if you can figure out how to + edit the function 'draw a square' to find the bug." + grade5_artist_parameters_squares2_instruction: "Create a function called 'draw + a square' and use it to outline these four boxes. Make sure to add a parameter + for 'length'! Starting from the upper right, the box widths are 50, 100, + 150, and 200." + grade5_artist_parameters_squares2a_instruction: "Edit the function to accept + a parameter called `length`." + grade5_artist_parameters_stars1_instruction: "That last one is tough if you + only use loops. Let's try drawing the same picture using this new 'function' + that will help to **draw a star**." + grade5_artist_parameters_triangles1_instruction: "This program looks okay from + here, but something isn't working right. See if you can figure out how to + edit the function 'draw a square' to find the bug." + grade5_artist_parameters_triangles1a_instruction: "Today, we're going to try + out a different, more powerful function editor. See if you can figure out + how to edit the function 'draw a triangle' to find the bugs." + grade5_artist_parameters_triangles1aa_instruction: "Click \"edit\" to fill + in the function definition of \"draw a triangle\" and add a parameter. It + should take a length parameter, just like the triangle. This time, draw 3 + triangles: 25, 50 and 75 pixels in length, each 100 pixels apart." + grade5_artist_parameters_triangles2_instruction: "This drawing can be easily + created using a new type of function that includes a parameter. The sides + of each triangle are 25 pixels larger than the last. The first triangle has + 25 pixel sides. Replace the '???' with the correct values to draw the picture." + grade5_artist_parameters_triangles2a_instruction: "Do you notice anything different + about these function blocks? Click “Run” to see what happens." + grade5_artist_parameters_triangles3_instruction: "The code for this triangle + function is broken.\r\n\r\nCan you edit the function to fix it, and then make + triangles of length 150, 75, 25?" + grade5_artist_parameters_triangles4_instruction: "The code for this triangle + function is broken. Can you edit the function to fix it, and then make triangles + of length 25, 50, and 75?" + grade5_artist_parameters_trianglesy_instruction: "The code for this triangle + function is broken.\r\n\r\nCan you edit the function to fix it, and then make + triangles of length 150, 75, 25?" + grade5_artist_variables_freeplay10_instruction: "Free Play: Experiment with + the number of sides this shape has. Can you change the algorithm so that the + overall size of the shape stays the same, no matter how many sides it has? + Hint: If you divide your starting length by the number of sides, the length + of each side will get shorter as the number of sides gets higher." + grade5_artist_variables_freeplay14_instruction: "Free Play: Check it out! Now + your algorithm is nested within one more loop. Experiment with changing the + values of your two variables to draw cool patterns.\r\n\r\nFor even more effect, + try playing with color! Use random colors inside loops to see how it changes + your design." + grade5_artist_variables_freeplay15_instruction: "Want a second peek at the + inspiration design or the hints? Click here!\r\n\r\nOtherwise, make a design + all your own!" + grade5_artist_variables_freeplay16_instruction: "Still playing? Here is a + blank canvas where you can create whatever you want!" + grade5_artist_variables_hexagons1_instruction: "Let's try it again! \r\n\r\nCan + you set the `length` variable to 60 to make this cool design with hexagons?" + grade5_artist_variables_letterT11_instruction: "Here’s more complicated code + using the same concepts from the last puzzle - what should you set the \"sides\" + variable to in order to draw this picture made of squares?" + grade5_artist_variables_new1_instruction: "Here is a program that will create + an image. There are a few things that are wrong with it." + grade5_artist_variables_octagons13_instruction: "When a shape has lots of sides, + each side needs to be shorter if you want the whole pattern to fit on the + screen. \r\nLet's recreate the algorithm for this amazing pattern, but instead + of manually setting the `length` variable, let's use a math block with the + `sides` variable inside to make sure that each shape fits correctly. The perimeter + of each polygon is 300 pixels.\r\nNeed some hints? Click here." + grade5_artist_variables_pentagon8_instruction: "Use what you learned in the + last puzzle to create this hexagon using the \"sides\" variable.\r\n\r\nSee + how you could change just one value to draw a triangle, square, pentagon, + or octagon?" + grade5_artist_variables_pentagon9_instruction: "Now, recreate the algorithm + from the last level and create a pentagon with sides of length 150." + grade5_artist_variables_pentagons1_instruction: "Draw this pattern of pentagons + with 100 pixel sides by setting the right value for `length` and dropping + the `length` variable into all of the the correct places. \r\n\r\nSee how + you only have to set the value for `length` once, and the code uses the right + value everywhere?" + grade5_artist_variables_pentagons12_instruction: "Let's set the \"sides\" + variable to 5. The more sides we add to this algorithm, the bigger this whole + pattern gets! Notice that there is another variable called \"length\". We + can now use that wherever we have a \"move forward.\" Set the \"length\" variable + to 75 for this shape." + grade5_artist_variables_rectangle6_instruction: "Now I want to make a rectangle + that is twice as tall as it is wide. We've got a variable called \"width\" + that needs to be set to 100. Can you use the math blocks to complete the code?" + grade5_artist_variables_square7_instruction: "Here’s some code that can draw + any regular polygon. There’s a new variable called sides that is set to 4. + Can you use the sides variable (along with the math block) to turn the right + amount regardless of how many sides there are in the polygon?\r\n\r\nClick + here to go back to the hint!" + grade5_artist_variables_triangles2_instruction: "Instead of using \"move forward + by 150,\" the \"move\" block is now referencing a variable called \"length.\" + Can you set \"length\" to 150 to draw this new triangle?" + grade5_artist_variables_triangles3_instruction: "Drag a number block to both + the `set length` block and the `repeat _ times` block to draw a set of 50 + pixel triangles. " + grade5_bee_for_loops1_instruction: "Use a loop to collect the nectar from each + flower." + grade5_bee_for_loops10_instruction: "What should your increment be to collect + 15, then 12, then 9, 6, 3 nectar?" + grade5_bee_for_loops11_instruction: "**Challenge:** Take what you've learned + about `for` loops and try to solve this problem. " + grade5_bee_for_loops2_instruction: "Add the code necessary to make sure the + bee collects all the nectar. Look at how much code you need for this puzzle! + (We'll learn a simpler way in the next puzzle.)" + grade5_bee_for_loops3_instruction: "Try this puzzle using the `for` loop with + `counter` variable and see how much shorter your code becomes." + grade5_bee_for_loops4_instruction: "Help the bee collect all of the nectar." + grade5_bee_for_loops6_instruction: "You can also use a \"for loop\" to count + down. Try gathering this nectar by counting down from 5 to 1 by 1." + grade5_bee_for_loops7_instruction: "Try collecting these flowers using an increment + of 2." + grade5_bee_for_loops8_instruction: "You've got this! What should your increment + be to collect 3, 6, 9, 12, 15 nectar?" + grade5_bee_for_loops9_instruction: "Use the `counter` variable to navigate + this garden with the fewest number of blocks possible." + grade5_bee_parameters_new8_instruction: "That's a great function you've created! + You are officially on your own now. Collect all the nectar. Make all the honey." + grade5_bee_parameters_new9_instruction: "Bonus Challenge! If you are feeling + ambitious, try this puzzle. It is possible to collect all of the nectar and + make all of the honey using only a For loop, a Repeat loop, a function call, + and a turn. Try it all on your own, or view the hints to build it step-by-step. + Great job with this stage!" + grade5_pixelation_instruction: "Encode an image of anything you like using + binary. The binary language will be represented with '0' and '1' only." + grade5_playlab_freeplay_instruction: "It's free play time! Have fun with all + the blocks in your tool box. " + grade5_playlab_parameters_points1_instruction: "Here's the same game but most + of the code is hidden. We've added a new function called `score_points.`\r\n\r\nAdd + a new parameter called `points` to the `player_score` function. \r\n\r\nThe + `score_points` function should be able to both add and remove points from + `player_score` depending on which actor is hit.\r\nChanging the score by 1 + will add a point, while changing the score by -1 will subtract a point.\r\n\r\nWhen + you're done, click \"Run\" to play. When Dog scores 6 points, you will move + on to the next puzzle. " + grade5_playlab_variables1_instruction: "This time you don't have to write + any code, just hit \"Run\" to play the game! In this game, you're the dog + who is trying to collect more flags than the cat. Use the down arrow to control + the dog. Press \"Finish\" when you're done playing." + grade5_playlab_variables10_instruction: "Edit the the \"patrol\" function to + add an \"actor\" parameter, so that we can call it for each of the actors + on the screen. Remember, the actors correspond to numbers 1, 2, and 3." + grade5_playlab_variables11_instruction: "Add another parameter called \"speed\" + to the \"patrol\" function. Try using a \"set speed\" block with the new \"speed\" + parameter to help Penguin get both flags before the other sprites even get + one." + grade5_playlab_variables12_instruction: "Let's have some fun! Look at the + code provided to see if you can figure out what each block does. \r\nWhen + you're done, use the arrow keys to control Dog and collect all of the flags.\r\nNOTE: + You don't need to make any changes to the program" + grade5_playlab_variables13_instruction: "Use the `when actor touches` block + to send Dog back to the top-left ONLY if Dog touches any of the other actors." + grade5_playlab_variables14_instruction: "It's free play time! Have fun with + all the blocks in your tool box. " + grade5_playlab_variables1ask_instruction: "This time, when you press 'run', + you will see a 'prompt' asking you for a number. This number will be stored + in a variable used to set the dog's speed.\r\n\r\n\r\nPay attention to how + this program is written!" + grade5_playlab_variables2_instruction: "The race in that last puzzle wasn't + very fair! Change the `dog_speed` variable to make sure you can collect more + flags than Cat. The first to collect 10 flags wins!" + grade5_playlab_variables3_instruction: "Use the left and right arrows to move, + and the up arrow to jump. See if you can collect all of the flags." + grade5_playlab_variables4_instruction: "Now we're using a variable called + \"height\" to control how high the dog can jump. Update the \"height\" variable + so that the dog can jump high enough to reach all the flags." + grade5_playlab_variables5_instruction: "You've seen now how a variable can + be used to set the height of an actor's jump. How else could you use a variable?\r\n\r\nLet's + build a game! First we'll need a score. Try setting the 'points' variable + to give yourself 10 free points!" + grade5_playlab_variables6_instruction: "Use the right arrow to throw pie.\r\n\r\nIn + our game, how should we score points? Add 1 to your \"points\" variable each + time Dog hits Cat with a piece of pie. Use the \"when actor 2 touches anything\" + event to trigger an update to your score. You can increment your variable + by setting \"points = points + 1.\" Get your score up to 10 (going one at + a time!) to pass the level." + grade5_playlab_variables6ask_instruction: "This time, you need 100 points to + win! Don't worry though, you can choose how many points you earn each time + you score a hit!\r\nTry adding the `ask` block and changing the number 1 out + for the variable `value`." + grade5_playlab_variables7_instruction: "Nice, now let's make sure this game + isn't too easy to play. Any time Dog (actor 1) gets hit by a sandwich from + Cat (actor 2), you should lose a point. Start with 10 points so it's not + too hard. Let your score drop down from 10 to 0 to pass the level." + grade5_playlab_variables71_instruction: "Here's our game from an earlier stage, + but most of the code is hidden. There’s a new function `score_points.`\r\n\r\nEdit + the function so that a new parameter called `points` can be added to `player_score`. + \r\n\r\nThe variable `player_score` should increase each time Dog tags Cat + with pie, and decrease each time that Cat tags Dog with a sandwich.\r\n\r\nNote: + When you're done, click \"Run\" to play. When Dog scores 6 points, you will + move on to the next puzzle. " + grade5_playlab_variables81_instruction: "We've added one last function for + you. \r\n\r\nUse an \"if\" statement to program your game to call the \"level_up\" + function only when \"player_score\" becomes greater than a certain number.\r\n\r\nFor + example: \"player_score\" > 6\r\n\r\nPlay the game, and make it to level 3 + to move to the next puzzle. " + grade5_playlab_variables9_instruction: "Here's a function called `patrol`. + \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 pixels." + grade5_playlab_variables_freeplay_instruction: "Free Play time! Here are all + of the variables we've played with so far in this stage, as well as a few + more in case you want them. \r\n\r\nNotice that there are now so many blocks + in our toolbox that they need to be organized! Here, we've put each piece + into an appropriate category. Take some time to explore everything that is + available. When you're done browsing, make a game or story using repeats, + variables, and events. \r\n\r\nHint: scroll down to see all the commands + in the workspace." + grade5_playlab_variables_jump1_instruction: "This puzzle uses a hidden function + that makes the dog jump when the 'up' arrow is pressed. The height of the + jumps can be set at the start of the game using the 'jumpPower' variable. + Try to touch all of the flags!" + grade5_prompt_test_instruction: "Variables aren't always numbers. What if + you wanted to store a word or text? Experiment with the new `ask` block." + gradeK_sequence_4_instruction: "Try this one yourself from the beginning." + gradek_adventurer_loops1_instruction: "Three piles of gold! Collect all three." + gradek_adventurer_loops10_instruction: "Help me get all of the gold from this + cave." + gradek_adventurer_loops2_instruction: "How can Laurel collect all five piles + of gold using only one `[E-->]` block?" + gradek_adventurer_loops3_instruction: "Can you fix Laurel's path to get all + of this gold?" + gradek_adventurer_loops4_instruction: "Use what you learned to get all of the + coins." + gradek_adventurer_loops4a_instruction: "Add to this code to collect all of + the coins." + gradek_adventurer_loops5_instruction: "What should you add to this code to + get all of the gold?" + gradek_adventurer_loops6_instruction: "Write the code to get all of this gold." + gradek_adventurer_loops7_instruction: "Write the code to get all of this gold." + gradek_adventurer_loops7_challenge_instruction: "**Challenge:** The gold goes + all the way up these stairs! Write the code to help me get it all." + gradek_adventurer_loops8_instruction: "Help me get all of the gold from this + deep valley." + gradek_adventurer_loops9_instruction: "Help me get all of the gold from this + cave." + gradek_adventurer_loopsFP_instruction: "Eureka! Collect as much gold as you + can!" + gradek_adventurer_loopsPre_instruction: "This is Laurel the Adventurer. Mover + her around and get as much gold as you can!" + gradek_artist_loops1_instruction: "Help the artist draw this line two times + forward." + gradek_artist_loops2_instruction: "Our artist is trying to draw a line five + times, but can't get it right. Can you help?" + gradek_artist_loops3_instruction: "Now, use a `repeat` loop to draw this line + five times!" + gradek_artist_loops4_instruction: "Draw a line seven steps long. This will + become our horizon." + gradek_artist_loops5_instruction: "Let's put a nice hill in the back." + gradek_artist_loops6_instruction: "Use the `repeat` loop to add waves to the + water." + gradek_artist_loops7_instruction: "We need a ladder up to the boat." + gradek_artist_loops8_instruction: "Challenge: The stairs down to the dock are + broken. Help me fix them." + gradek_artist_loops9_instruction: "Time to head back to land. Help me put down + stones so I don't fall in!" + gradek_artist_loopsA_instruction: "Help me build steps to watch the ship sail + away." + gradek_artist_loopsFP_instruction: "The artist saw something funny in the distance. Draw + what you think he saw." + gradek_artist_loopsPre_instruction: "This is a new type of puzzle called \"Artist\". + Play with the level and draw something fun." + gradek_playlab_events1_instruction: "Make your robot say \"Hello!\" when the + button is clicked." + gradek_playlab_events1a_instruction: "Add a block so that when you click the + \"up\" button, Olive the Cat walks up." + gradek_playlab_events1c_instruction: "Jorge the Dog wants to say \"Hi there.\" Can + you help him?" + gradek_playlab_events2_instruction: "Edit the code so that when the second + bird is clicked, your program plays a sound!" + gradek_playlab_events2a_instruction: "Add a block so that when you click \"down\" + Olive the Cat walks down." + gradek_playlab_events2c_instruction: "Help Jorge the Dog get moving by connecting + the `move left` block to the `when left` event block that is already in the + workspace." + gradek_playlab_events3_instruction: "When the third bird is clicked, the background + should change to a city. Can you add code to make this happen?" + gradek_playlab_events3a_instruction: "When the third bird is clicked, the background + should change to a city. Can you add code to make this happen?" + gradek_playlab_events3b_instruction: "Add a button so that Olive the Cat moves + right when you click the \"right\" button." + gradek_playlab_events3c_instruction: "Now, get Jorge to move right when the + `right` button is clicked." + gradek_playlab_events4_instruction: "Add code to make something happen when + the fourth bird is clicked. Be creative!" + gradek_playlab_events4a_instruction: "Add a block so that Olive the Cat moves + left when you click the \"left\" button." + gradek_playlab_events4c_instruction: "Add events to have Jorge move up and + down when the `up` and `down` buttons are pressed." + gradek_playlab_events5_instruction: "About My Robot Project! Write code so + that clicking on each bird shows a new fact about your robot." + gradek_playlab_events5a_instruction: "About My Robot Project! Write code so + that clicking on each bird shows a new fact about your robot." + gradek_playlab_events5c_instruction: "Make this more interesting by changing + the background and playing a random sound when Jorge is clicked." + gradek_playlab_eventsA_instruction: "Now, have the cat change to a random size + AND have it play a random sound when you click the center button." + gradek_playlab_eventsFP_instruction: "Add anything you want to this game. Can + you make the dinosaur disappear when Jorge runs into him?" + gradek_playlab_eventsPre_instruction: "This is a Play Lab level. Move blocks + to the workspace and see what happens!" + group test_instruction: "Make a game" + harvey_pixelation_instruction: "Encode an image of anything you like using + binary. The binary language will be represented with '0' and '1' only." + jessie-test_instruction: "Lots of instructions" + k-1 maze 1_instruction: "Can you make me move West to get to the pig?" + kikiTesta_instruction: "Our adventurer wants to collect coins. But she can + only use 4 blocks to get them.\r\n\r\nCan you help her grab as many as she + can using just 4 blocks?" + kikiTesting_instruction: "See all angles of Stevie and Jorge" + level 'grade3_Loops_10_instruction: "Such a busy bee!\r\n\r\nHelp bee collect + all of the nectar and make all of the honey with the fewest blocks possible." + level 'grade3_Loops_11_instruction: "The shape of this path is different than + the others. \r\n\r\nCan you collect all of the nectar using as few blocks + as possible?" + level 'grade3_Loops_12_instruction: "Can you find the quickest way for the + bee to collect all of the nectar and make all of the honey?" + level 'grade3_Loops_2_instruction: "This time, use a loop to gather all of + the nectar." + level 'grade3_Loops_3_instruction: "Use a `repeat` loop to collect all of the + nectar." + level 'grade3_Loops_4_instruction: "Now use the `repeat` block to collect all + of the nectar and make all of the honey." + level 'grade3_Loops_5_instruction: "What a beautiful field of flowers! Help + the bee visit each one. Can you find a way to do it with fewer than 7 blocks?" + level 'grade3_Loops_6_instruction: "How many times can loops help you in this + puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete this + puzzle with the fewest blocks possible." + level 'grade3_Loops_7_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + level 'grade3_Loops_8_instruction: "Collect all the nectar and make all of + the honey using the fewest blocks possible." + level 'grade3_Loops_9_instruction: "Collect nectar from each flower and make + honey at each honeycomb using the fewest blocks possible." + level grade3_Loops_2_instruction: "This time, use a loop to gather all of the + nectar." + love_spring_1_instruction: "Let's celebrate Spring! We have put some seeds + in the ground to prepare for the season's flowers. Can you cover them up + so that the birds don't eat them?" + love_spring_2_instruction: "Our flowers are in full bloom! Now we need the + bee to grab nectar from each one so he can make plenty of honey back at his + hive!" + love_spring_3_instruction: "Figure out how to change this code so that Robin + chooses a number between 1 and 20. \r\n\r\nWhen you're ready, press \"Run\" + and play until you guess Robin's number!" + mike3bit_instruction: "We start you with the 4x2 image Maddie was creating, + but we've left out the last few pixels. Finish off the image by figuring + out which colors are missing and encoding them." + mike3bitbird_instruction: "Here's an example of an image made with 3-bit color. + Try changing it to understand how it works. If you want to reset the image, + press \"Start Over\"." + mike3bitfreeplay_instruction: "Make something awesome and share it with your + classmates! You can copy and paste the value of a pixel to use it repeatedly." + mike3bitmario_instruction: "A careless binary coder typed in ONE extra 0 or + 1 somewhere within this image's data. The extra bit that is causing Mario + to glitch out! \r\n\r\nDelete the extra bit to restore Mario back to normal!" + playEventsK1_instruction: "This game is called \"Play Lab\". See if you can + figure out what each block does." + playEventsK2_instruction: "Jorge wants to say \"Hi there.\"\r\n\r\nCan you + help?" + playEventsK3_instruction: "Jorge wants to be scratched behind the ears! Can + you make it so that when you click Jorge he is happy?" + playEventsK4_instruction: "Can you make it so that Jorge the dog chases Robin + the bird when you click the up arrow?" + playEventsK5_instruction: "Now add code so that Robin flies away when you click + the forward arrow." + playEventsK6_instruction: "Have Robin talk back to Jorge when you click on + her." + playEventsK7_instruction: "What else can you do in this fun scene?" + playLabDebugVideo1_instruction: "Jorge the Dog wants to say \"Hi there.\" Can + you help him?" + sample1_instruction: "Our adventurer wants to collect coins. But she can only + use 4 blocks to get them.\r\n\r\nCan you help her grab as many as she can + using just 4 blocks?" + sample10_instruction: "Now you can use loops to draw whatever you like!" + sample10a_instruction: "You have helped the adventurer and her bee! As a reward, + please stay and play around in my magical village. \r\n\r\nYou should have + everything you need to create a game of your own." + sample2_instruction: "Use what you've learned to help bee gather all of this + honey using only the blocks that you have here." + sample2a_instruction: "Use what you've learned to help bee gather all of this + honey using only 4 blocks." + sample3_instruction: "Now you can help bee make all of the honey using just + the blocks in the toolbox." + sample3assessment_instruction: "Can you figure out how to gather all of this + nectar in just one try?" + sample4_instruction: "Our adventurer has found a stash of coins in this cave.\r\n\r\nCan + you help her grab as many as she can using just 7 blocks?" + sample5_instruction: "Help bee make all of the honey." + sample6_instruction: "Challenge: Help bee get all of the nectar." + sample7assessment_instruction: "Can you help bee make all of the honey in just + one try?" + sample8_instruction: "Look at this trove of coins! How many can you get the + adventurer to grab?" + sample9_instruction: "Use loops to help the artist connect all of the dots. " - U4 - Objects - dotNotation_instruction: "Use dot notation to display individual - properties of the object. (Click to see full instructions)" - U4 - Objects - eventHandlersToSwitchScreen_instruction: "Attach event handlers - to the \"Add Contact\" and \"Go Back\" buttons that allow the user to switch - screens. (Click to see full instructions)" - U4 - Objects - eventParameter_instruction: "Trigger both the keyboard and mouse - event and examine the event objects displayed in the console. Why might an - object be the best way to store this information? (Click to see full instructions)" - U4 - Objects - exemplarContactsApp_instruction: "Use the Contacts app and then - add a contact of your own. (Click to see full instructions)" - U4 - Objects - loopingArray_instruction: "Loop over your array of students - and print the name of every students. (Click to see full instructions)" - U4 - Objects - loopingArray2_instruction: "Loop over your array of students - and print the name and grade of every student. (Click to see full instructions)" - U4 - Objects - loopingCompoundConditions_instruction: "Loop over the array - of students and display the information of students who are present and in - the 11th grade. (Click to see full instructions)" - U4 - Objects - loopingConditions_instruction: "Loop over your array of student - objects and display the names of every student who is present in class. (Click - to see full instructions)" - U4 - Objects - pullValues_instruction: "Create an event handler for the \"Save - Contact\" button that displays the contents of the 4 text input fields in - the console. (Click to see full instructions)" - U4 - Objects - readStarterCode_instruction: "Familiarize yourself with the - starter code and UI elements provided. (Click to see full instructions)" - U4 - Objects - resetIndexAndShow_instruction: "Add code to your event handler - for the \"Save Contact\" button so that when a new contact is added, the inputs - are cleared, the screen is switched, and the correct contact is shown. (Click - to see full instructions)" - U4 - Objects - showContact1_instruction: "Add code to the showCurrentContact - function to show the name of the contact stored at the currentIndex of your - array. (Click to see full instructions)" - U4 - Objects - showContact2_instruction: "Add the phone number and birthday - text to your text area. (Click to see full instructions)" - U4 - Objects - showContact3_instruction: "Display the image information for - each contact. (Click to see full instructions)" - U4 - Objects - showSampleImage_instruction: "Attach an event handler to the - image URL text input so that the user can confirm their image will work as - expected. (Click to see full instructions)" - U4 - Objects - writeWrap_instruction: "Use the wrap function to prevent currentIndex - from leaving the bounds of your array. (Click to see full instructions)" - U4 - Read Record - 1.2_instruction: "Place a console.log command below the - readRecords command. (Click to see full instructions)\r\n" - U4 - Read Record - 1.3_instruction: "Add a console.log command inside the callback - function. (Click to see full instructions)\r\n" - U4 - Read Record - 1_instruction: "Use console.log to display the records returned - by a call to readRecords. (Click to see full instructions)\r\n" - U4 - Read Record - 2_instruction: "Change the table name so that the records - are read from the new table. (Click to see full instructions)\r\n" - U4 - Read Record - 3_instruction: "Change the name of the table in a readRecords - command to read from a table that does not exist. (Click to see full instructions)\r\n" - U4 - Read Record - 4.1_instruction: "Use indexes and dot notation to reference - values in the response from the database. (Click to see full instructions)\r\n" - U4 - Read Record - 4_instruction: "Print out each record return from the readRecords - call individually. (Click to see full instructions)\r\n" - U4 - Read Record - 5_instruction: "Using a for loop, display the title of each - movie in your database. (Click to see full instructions)\r\n" - U4 - Read Record - part 1 - template_instruction: "Use console.log to display - the records returned by a call to readRecords. (Click to see full instructions)\r\n" - U4 - ReadRecords - Contacts App 1_instruction: "Use readRecords to copy the - data in your database into your \"contacts\" global variable and call showCurrentContact. - (Click to see full instructions)" - U4 - ReadRecords - Contacts App 2_instruction: "Create a function called refreshLocalData. - (Click to see full instructions)" - U4 - ReadRecords - Contacts App 3_instruction: "Add a call to \"refreshLocalData\" - to the callback function of the createRecord you use to add a new contact - to your database. (Click to see full instructions)" - U4 - ReadRecords - Contacts App 4_instruction: "Create a \"Delete\" button. - (Click to see full instructions)" - U4 - ReadRecords - Contacts App 5 make delete work_instruction: "Create an - event handler for the \"Delete\" button you created. (Click to see full instructions)" - U4 vigenere cipher 2_instruction: "Instructions" - U4L02 - Objects - createObject_instruction: "Create an object with at least - 5 values including at least one string and one number. (Click to see full - instructions) " - U4L02 - Objects - eventParameter_instruction: "Trigger both the keyboard and - mouse event and examine the event objects displayed in the console. Why might - an object be the best way to store this information? (Click to see full instructions)" - U4L02 - Objects - Template1_instruction: "Template" - U4L06 Data Storage 1_instruction: "Fill in your name instead of \"Enter Your - Name\", run the app and click the button. Run it multiple times with different - names! Watch the console and use the ‘View Data” button to see how the table - is updated. As you play around make sure you can explain the purpose of each - of the circled parts of the diagram.\r\n\r\n" - U4L06 Data Storage 2_instruction: "The app is a continuation of the previous - one we started. Add a text label to collect the users name and use that as - the data input for the record.\r\n\r\nRun the app and click the button multiple - times and see what happens. Is there a problem you notice? " - U4L06 Data Storage 3_instruction: "We want to improve the user experience. - Once they have submitted their data for storage, it would be nice to clear - the textbox. Update your app to clear the textbox after the data is stored." - U4L06 Data Storage 4_instruction: "Add a label and drop down box, to your app - and save the data to your JSON object and add it to your table. Make sure - to reset the dropdown after the data is stored." - U4L06 Data Storage 5_instruction: "Add a couple radio buttons or checkboxes - to our app. Then find a way to collect the data from those. " - U4L06 Data Storage 6_instruction: " Use one of the getTime() and getUserId() - blocks to collect additional data. " - U4L06 Data Storage 7_instruction: "Add a second screen to the sample app we - have been building to capture an image from a user. Return to screen 1 after - the JSON object has been stored in the table." - U4L15 Read Data 1_instruction: "Run the level and see what happens. Then edit - the code to make it print a different column of information." - U4L15 Read Data 2_instruction: "Student should create a sentence which puts - together all the pieces from a record.\r\n\r\n<<Name>> is <<Age>> years old - and like <<Food>>" - U4L15 Read Data 3_instruction: "Print the sentence using the first JSON object - in the array\r\n\r\n" - U4L15 Read Data 4_instruction: "\r\nUse a random record from the list of records - to display your sentence." - U5 if-else-if movie example_instruction: "Add an else-if statement in order - to tell the user if their guess is high or low instead of just wrong. (Click - to see full instructions)" - U6 - Final Project - Project Level_instruction: "Build your final project here. - (Click to see full instructions)" - U6 - updateRecord - Callback Success Parameter_instruction: "Add an if-else - block inside the callback function for updateRecord. (Click to see full instructions)" - U6 - updateRecord - Contacts - Edit event handler_instruction: "Write event - handlers for the Edit Contacts UI elements. (Click to see full instructions)" - U6 - updateRecord - Contacts - Edit UI_instruction: "Set up the UI elements - needed to edit contacts. (Click to see full instructions)" - U6 - updateRecord - Contacts - Save edited contact_instruction: "Use updateRecord - to store the user's edits in the database. (Click to see full instructions)" - U6 - updateRecord - Default Block_instruction: "Use updateRecord to change - the record for \"Eye of the Tiger.\" (Click to see full instructions)" - U6 - updateRecord - Update Nonexistent Record_instruction: "Force updateRecord - to fail by changing the ID of songToUpdate. (Click to see full instructions)" - Underground Avoiding Lava_instruction: "Lava is hiding beneath some of these - blocks, which you'll need to cover up before moving forward. An \"if\" command - will come in handy here. Add a \"move forward\" command in the correct place - to mine these blocks." - Underground If Statements_instruction: "Now things are getting tricky. Mine - 3 redstone, but don’t fall in the lava. Use an \"If\" command to place cobblestone - over any lava you uncover." - Underground Iron_instruction: "Walking into molten lava is a bad idea. Place - cobblestone to create a bridge, then mine at least two of the iron blocks." - Underground Mine in a Circle_instruction: "Find a way to get 5 diamond and - 7 redstone! Try using a repeat command inside a repeat command to walk in - a square.\r\n" - Underground Mining Coal_instruction: "You’ll find the most valuable resources - underground, but it can get dark. Place at least 2 torches and mine at least - 2 coal." - Underground Test Level_instruction: "Collect all of the minerals!" - Unicorn Tag_instruction: "Take a look at this project. Do you see how it was - made?" - Vigenere_instruction: "Test" + sample9a_instruction: "The wizard has found his potions! Use everything you + have learned to help him collect them." + scrat 16 (copy 1)_instruction: "Acorn! Acorn! Acorn! Use an \"if\" block to + get me there with the fewest number of blocks." + scrat 16_instruction: "Acorn! Acorn! Acorn! Use an \"if\" block to get me there + with the fewest number of blocks." + scrat 17 (copy 1)_instruction: "Ok, let's do that again for practice - this + isn't very different, but watch out for the <insert obstacle name for Scrat>!" + scrat 17_instruction: "Ok, let's do that again for practice - this isn't + very different, but watch out for the wall!" + scrat 18 (copy 1)_instruction: "The \"If-else\" blocks checks a condition, + and then does one thing OR another. To get me to the acorn try to use this + new block." + scrat 18_instruction: "The \"If-else\" blocks checks a condition, and then + does one thing OR another. To get me to the acorn try to use this new block." + scrat 19 (copy 1)_instruction: "One more practice of the \"if-else\" block, + can you get it right on your first try?" + scrat 19_instruction: "One more practice of the \"if-else\" block, can you + get it right on your first try?" + scrat 20_instruction: "Can you add just 3 blocks to help me solve a more complex + maze? If you do it right, I can walk any curvy path no matter the length. + Hurry! The ice is melting!" + skratDebugVideo1_instruction: "Get Skrat to the Acorn." + template test_instruction: "what's up" + testArtistForTestK_instruction: "The Artist is trying to draw a line five times, + but can't get it right. Can you help?" + test_sarah_instruction: "hi hi" weird_playLab_instruction: "About My Robot Project! Write code so that clicking on each bird shows a new fact about your robot." - WhileAdventure_instruction: "Our adventurer wants to collect coins. Can you - help her grab as many as she can using only one remove 1 block?" - 'Widget: Black and White Pixelation_instruction': "Now make your own image! - We've started you off with a 10x10 canvas but you can make it whatever size - you want. Happy pixeling!" - 'Widget: Color Pixelation_instruction': "Requirements: The icon must be 16x16 - pixels. You must use the Pixelation Widget to encode the bits of color information. - The image must be encoded with at least 12 bits per pixel." - 'Widget: Text Compression_instruction': "Look for patterns (repeated words - or phrases) in the text. Enter the patterns you see into the dictionary on - the right. As you type entries into the dictionary, the symbol for the entry - is inserted into the text in place of the pattern." - XML Scratchpad_instruction: "Using this test level to grab xml for unit tests" diff --git a/i18n/locales/source/dashboard/markdown_instructions.yml b/i18n/locales/source/dashboard/markdown_instructions.yml index 8007ba4be9e37..095083314d0ab 100644 --- a/i18n/locales/source/dashboard/markdown_instructions.yml +++ b/i18n/locales/source/dashboard/markdown_instructions.yml @@ -455,62 +455,6 @@ en: 4-5 While Loops 4_markdown_instruction: "Wow, look at that! \r\n\r\nI don't know how many shovelfuls of dirt this hole needs. \r\nCan you write a program that keeps using the `fill` block until the ground is even? " - aE1_markdown_instruction: "<img src=\"https://images.code.org/fa3c416b74ff9071455535955bc4df35-image-1465507662295.gif\" - style=\"float:left; width:100px; margin: 0 20px 80px 100px;\"/>\r\n\r\n<div - style=\"color: #7665a0; font-size: 1.6em; line-height: 1.4em;\">\r\nFirst, - we need napkins!\r\n\r\nChoose your favorite shape:\r\n - Square (Easy)\r\n - - Triangle (Medium)\r\n - Pentagon (Hard)\r\n\r\n</div>\r\n<br/>\r\n\r\n" - aE2_markdown_instruction: "<img src=\"https://images.code.org/2a67ea28a0fb9f674fd764b350b297da-image-1465514320176.gif\" - style=\"width:400px; margin: 0 20px 20px 10px;\"/>\r\n\r\n<div style=\"color: - #7665a0; font-size: 1.6em; line-height: 1.4em;\" >Now we need enough for everyone!\r\n<br/><br/>\r\n\r\nLet's - take the shape we just made and line up a row of 14 napkins. \r\n<br/>\r\nIf - you place one loop inside another loop, we call that a nested loop. \r\n\r\nHow - can you loop all of the code from your last stage to make sure all 14 napkins - line up next to each other?</div>\r\n" - aE3_markdown_instruction: "<img src=\"https://images.code.org/e9fe83556eec68be9ebd7de9a16267b1-image-1465516277348.gif\" - style=\"width:400px; margin: 0 20px 20px 100px;\" loop=\"infinite\"/>\r\n\r\n<div - style=\"color: #7665a0; font-size: 1.6em; line-height: 1.4em;\" >\r\nWe've - got to have a tablecloth! <br/></br>\r\n\r\nTake your row of 14 napkins and - sew 14 of those together with another **outer loop** to make a cover for our - table.\r\n</div>\r\n\r\n" - aE3alternate_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nThis alternate shows what the image would - look like if the user chose pentagon napkins and modified line weight/color.\r\n</div>\r\n\r\n" - aE3alternateB_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nThis alternate shows what the image would - look like if the user chose triangle napkins and got bold with the code.\r\n</div>\r\n\r\n" - aE4_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: 1.6em; - line-height: 1.4em;\" >\r\nOh No! Our napkins are too small! \r\n<br/><br/>\r\nWe - need to have the napkins twice as big and still keep the tablecloth the same - size. What numbers can you change to make that happen?\r\n<br/><br/>\r\n(as - shown in triangles)\r\n</div>\r\n\r\n" - aE5_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: 1.6em; - line-height: 1.4em;\" >\r\nLet's pull the look together with some window - decorations!\r\n<br/><br/>\r\nHere is your original code for drawing a line - of napkins. Piece 4 lines together to make a pattern that goes around your - window frame.\r\n</div>\r\n\r\n" - aE6_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; line-height: - 1.4em;\" >\r\nThe guests are going to need something to sit on!\r\n<br/><br/>\r\nThe - artist has an idea to make some fun chairs. How many times do you need to - loop this to draw half of a circle?\r\n</div>" - aE7_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; line-height: - 1.4em;\" >\r\nHow about some streamers?\r\n<br/><br/>\r\nIf you create another - loop like this one, but turn left instead of right, what happens? \r\n\r\nCan - you repeat all of that to draw this wave?\r\n</div>" - aE8_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; line-height: - 1.4em;\" >\r\nThe artist wants to give picture frames as party favors!\r\n<br/><br/>\r\nLet's - loop the code from our streamers four times to create this frame. \r\n<br/><br/>We've - added a special block called `curvy corner` to give you fancy round corners!\r\n</div>" - aEfreeplay_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; - line-height: 1.4em;\" >\r\n<b>Free Play:</b>\r\nFor a final touch, we need - some ornaments to hang around the house.\r\n<br/><br/>\r\nCan you design a - decoration to spice up the party?\r\n</div>\r\n<br/>\r\n<h4>\r\n<details>\r\n<summary>Need - Ideas?</summary>\r\n<br/>\r\n<br/>\r\nTry making a tablecloth full of diamond - napkins! \r\n<img src=\"https://images.code.org/2c092ea5edbb33405c019110df3f5710-image-1466095499984.43.56.png\" - width=\"200px\"/> \r\n<hr/>\r\n<br/>\r\nMake an ornament! \r\n<img src=\"https://images.code.org/361d2ad667853418a040ec9383505169-image-1466096394561.56.12.png\" - width=\"200px\"/> \r\n<hr/>\r\n\r\n<br/>Make something completely new! \r\n<img - src=\"https://images.code.org/6809a1bd2a364ae7e0ff42745ec1fe1b-image-1466097871045.23.44.png\" - width=\"200px\"/> \r\n<hr/>\r\n\r\n\r\n</details>\r\n</h4>\r\n\r\n" AlgPD DR Free Play_markdown_instruction: "Using a word problem from your existing curriculum or elswhere, complete the Design Recipe and program a function. Use a Design Recipe form from your workbook or download a copy [here]('https://code.org/curriculum/algebra/docs/worksheets/design_recipe.pdf')." @@ -533,70 +477,10 @@ en: what you should do - you can come back to watch this as many times as you need to get it right.\r\n<img src=\"https://images.code.org/1cdc8cfbcef2a43f84b11ebdf14aed0c-image-1444061731350.gif\" style=\"border: solid 1px black; width: 500px; margin: auto\">" - allthethings data blocks test_markdown_instruction: "Please sign in to test - applab levels (By design, applab levels only work if signed in. Normally, - we make people sign in, but this is only enforceable for a whole script and - would be annoying to do for the allthethings script)." - allthethings design mode elements_markdown_instruction: "Please sign in to - test applab levels (By design, applab levels only work if signed in. Normally, - we make people sign in, but this is only enforceable for a whole script and - would be annoying to do for the allthethings script).\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\nEnd - of instructions that are long." - allthethings level dataTables_markdown_instruction: "Please sign in to test - applab levels (By design, applab levels only work if signed in. Normally, - we make people sign in, but this is only enforceable for a whole script and - would be annoying to do for the allthethings script)." - allthethings_embed_video_markdown_instruction: "Siri is a digital assistant - built into Apple's iOS devices, including iPhones and iPads. Watch the advertisement - for Siri, below. \n\n<iframe width=\"637px\" height=\"375px\" src=\"https://www.youtube.com/embed/8ciagGASro0\" - frameborder=\"0\" allowfullscreen></iframe>\n\n<br/>\n__Reflect on the prompts - below:__ \n\n- What types of information does Siri respond to in the video?\n- - What do you think Siri is paying attention to in order to create these answers?\n" - allthethings_moviebot_markdown_instruction: "#Please sign in to test applab - levels (By design, applab levels only work if signed in. Normally, we make - people sign in, but this is only enforceable for a whole script and would - be annoying to do for the allthethings script).\n# Introduction to the Digital - Assistant\r\n\r\n__While digital assistants may seem like magic, they are - just elaborate computer programs that parse, or process, text__ looking for - combinations of words to make decisions about what to reply.\r\n\r\nOver the - next few lessons, __you're going to build up your own digital assistant that - responds \"intelligently\" to a user's question__, by making a decision about - what to reply based on the contents.\r\n\r\nYou'll now __explore a demo digital - assistant__, Movie Bot, that represents the kind of program that you'll build - up to. Try out some of the prompts below and also try your own. You'll quickly - find the limits of what this program can and can't do.\r\n\r\n# Do this\r\n__Run - Movie Bot. In the _'enter your question here'_ input, type each of the following - prompts and hit 'enter' __\r\n- 'help'\r\n- 'What is the best PG comedy - movie ever?'\r\n- 'What PG comedy movie should I watch next?'\r\n- 'Could - you please tell me the best romance movie?'\r\n- 'I waNT To WatCH a MovIE!!!'\r\n- - 'What is the capital of Kentucky?'\r\n- Play around! Ask more questions - of Movie Bot and make a prediction about what logic it's using to reply\r\n" - allthethings_template_backed1_markdown_instruction: "Backed by a template #1. - Please sign in to test applab levels (By design, applab levels only work if - signed in. Normally, we make people sign in, but this is only enforceable - for a whole script and would be annoying to do for the allthethings script). - " - allthethings_template_backed2_markdown_instruction: "Backed by a template #2. - Please sign in to test applab levels (By design, applab levels only work if - signed in. Normally, we make people sign in, but this is only enforceable - for a whole script and would be annoying to do for the allthethings script)." - allthethings_U3 - Simple Drawing - Rectangle Width and Height_markdown_instruction: "# - Drawing Rules\r\n\r\nSo what did you discover on the last level?\r\n\r\n* - What do each of the 4 openings control?\r\n\r\n\t* First Opening - controls - the **location of the rectangle from left to right** - we call this the **x - position**\r\n * Second Opening - controls the **location of the rectangle - from top to bottom** - we call this the **y position**\r\n * Third Opening - - controls the **width** of the rectangle\r\n * Fourth Opening - controls - the **height** of the rectangle\r\n\r\n* What is the size of the drawing area?\r\n\r\n\t* - Width - 400\r\n * Height - 400\r\n\r\n* So where is (0,0) or x = 0 and - y = 0?\r\n\r\n\t* The **upper left corner of the grid!**\r\n\r\n# Do This\r\n\r\nWe - have provided you with code for a rectangle that draws in the upper left corner - when you run the program. Using your new knowledge of the workspace and the - inputs for a rectangle:\r\n\r\n* **Change the width and height of the rectangle - so that it fills the whole drawing area**\r\n* **HINT:** Remember that the - rectangle block is `rect(x, y, width, height)` in that order" App Lab test_markdown_instruction: "<a href=\"https://docs.google.com/document/d/1HgSfQeUI1zxo-3bL-9jhff0jI2um2A-3vwpvy3JAD38\" target=\"_blank\">Innovation Project</a>" + AppLab_test02_markdown_instruction: "#This is the title \r\n\r\n- bullet 1 + \r\n- do this\r\n- then this\r\n\r\n![](https://images.code.org/982f9167cf54c24251922fbd0a7f60b3-image-1436470853351.png)" Applab allthethings onRecordEvent_markdown_instruction: "Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and @@ -605,73 +489,11 @@ en: Please sign in to test applab levels (By design, applab levels only work if signed in. Normally, we make people sign in, but this is only enforceable for a whole script and would be annoying to do for the allthethings script)." - AppLab_test02_markdown_instruction: "#This is the title \r\n\r\n- bullet 1 - \r\n- do this\r\n- then this\r\n\r\n![](https://images.code.org/982f9167cf54c24251922fbd0a7f60b3-image-1436470853351.png)" Artist Inspiration_markdown_instruction: "<img src=\"https://images.code.org/1df195df9d808f0dd539bef0f5c2958b-image-1443049871563.02.54.png\" width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything you need to know to make a pattern like this! \r\n\r\nIf this picture inspires you, try to make something similar. Otherwise, create something all your own.\r\n\r\nNotice: We've used the `set alpha` block to make the \"petals\" fade toward the outside." - artistDebugVideo1_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the - water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" - width=\"300\"/>\r\n" - artistLoopsK2_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nNow, use a `repeat` loop to draw this line - five times!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif\" - width=\"300\"/>\r\n" - artistLoopsK2gradek_artist_loops3_markdown_instruction: "<div style=\"color: - #7665a0; font-size: 1.6em; line-height: 1.4em;\" >\r\nNow, use a `repeat` - loop to draw this line five times!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif\" - width=\"300\"/>\r\n" - artistLoopsK3_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nDraw a line eight steps long. This will - become the land for our kingdom!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" - width=\"300\"/>\r\n" - artistLoopsK4_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nNow we need a castle with a draw bridge. Fix - the code so that the bridge lays straight instead of falling down.<br/><br/>\r\n</div>\r\n\r\n<img - src=\"https://images.code.org/84b93e1b9dad3ee52a46c767524d3558-image-1467935697224.gif\" - width=\"300\"/>\r\n" - artistLoopsK5_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nNow we need to fix the top of the castle. - Can you loop the code three times?<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/f418ccba20b7230baba1328143bd0092-image-1467935762464.gif\" - width=\"300\"/>\r\n" - artistLoopsK6_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nSomeone is stuck in the tower! Fix the - stairs to set them free.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/1efb95ca15f66b46145725769d3d279c-image-1467935856461.gif\" - width=\"300\"/>\r\n" - artistLoopsK7_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nThis tower is lovely, what is downstairs? - Build another staircase to find out!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/af040c27be11c3a639e18c440c8a047c-image-1467936046481.gif\" - width=\"300\"/>\r\n" - artistLoopsK8_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nWow! There's a garden over there! Help - fix these stairs so I can get to it.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/bf368872da36217b0d19261fc6b84bf6-image-1467936147116.gif\" - width=\"300\"/>\r\n" - artistLoopsK9_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** Lovely! Let's take a walk - around the garden.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/cb5646ef57f68b47fa6c2762253a7044-image-1467936260174.gif\" - width=\"300\"/>\r\n" - artistLoopsKA_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nThese stones are in the wrong place. Help - me move them so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" - width=\"300\"/>\r\n" - artistLoopsKB_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nLook! It's a theater. Help me set up - the chairs so we can all see the stage.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c4263306ebb0ad1d99fe6f200a790d0c-image-1467936424533.gif\" - width=\"300\"/>\r\n" - artistLoopsKFP_markdown_instruction: "Picture time! Use what you have learned - to draw a picture of what you think the Artist saw on stage.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" - width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" - width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" - width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" - width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" - beeDebugVideo1_markdown_instruction: "Collect all of the nectar." Bergeron Robot Maze1_markdown_instruction: "Can you help me catch the naughty pig? \r\n\r\nStack a couple of `move forward` blocks below the `when run` block and press \"Run\". " @@ -781,14652 +603,12374 @@ en: how different your drawings look!\r\n\r\n" Brand Book Example_markdown_instruction: "# Brand Book\r\n\r\nCheck out the example of a brand book\r\n\r\n" - Calc Circles of Eval .1_markdown_instruction: "You’ll be writing a kind of - code called Evaluation Blocks, because each block of code evaluates to a single - value. Change the ??? in this code so that the block evaluates to 5." - Calc Circles of Eval .2_markdown_instruction: "This Evaluation Block is a multiplication - function which takes two numbers and returns the product of those numbers. - Edit this block so that it multiplies 2 * 5" - Calc Circles of Eval .3_markdown_instruction: "Here's a function for addition - which takes two numbers and returns their sum. Use this Addition Block to - add 3 + 6." - Calc Circles of Eval .4_markdown_instruction: "Here we've nested an Addition - Block inside a Multiplication Block. Complete this code so it multiplies 3 - by (4 + 1)" - Calc Circles of Eval 2_markdown_instruction: "Use a Multiplication Block to - complete this code." - Calc Circles of Eval 3_markdown_instruction: "Complete the Evaluation Blocks - to match this statement." - Calc Circles of Eval 4_markdown_instruction: "This code is missing a couple - of Evaluation Blocks - make sure you put everything in the right order." - Calc Circles of Eval 7_markdown_instruction: "Complete the Evaluation Blocks - to match this statement." - Calc Circles of Eval 8_markdown_instruction: "Complete the Evaluation Blocks - to match this statement." - Calc Circles of Eval 9_markdown_instruction: "Complete the Evaluation Blocks - to match this statement." - Calc Circles of Eval Free Play_markdown_instruction: "Free Play: Try using - the Evaluation Blocks to write some equations of your own. How does nesting - the blocks in different ways impact their evaluation?" - Calc Define Funcs 1_markdown_instruction: "Let's look at some more traditional - algebraic functions now. Here's a function translated from the simple algebraic - function `f(x) = x + 1`. What would you expect this function to output if - provided an input of 15?" - Calc Define Funcs 2_markdown_instruction: "Write a function `f` that takes - a parameter `x` and returns `x - 10`. Test your function using `f(15)`." - Calc Define Funcs 3_markdown_instruction: "We don't have to call our function - `f` every time; create a function called `times-ten` that should take a parameter - `x` and return `x * 10`. Once you've created the function, run `times-ten(50)`." - Calc Define Funcs 4_markdown_instruction: "Write a function called `half` that - takes a number `x` and returns half that number. Once you've written the - function, use it to calculate `half(21)`" - Calc Design Recipe 1_markdown_instruction: "Let's use the Design Recipe to - create a function called `cube` - this function should take in a Number and - return that number to the power of 3. Make sure to write two example cases! - When you're done, use your new function to calculate `cube(7)`." - Calc Design Recipe 2_markdown_instruction: "Your school is holding a bake sale, - and you need to track the cost of making each cookie, the money paid, and - the total profit. Cookies cost $0.25 each to make, and sell for $1.50/cookie.\r\nWrite - the function `cost`, which takes in the number of cookies you intend to sell, - and returns the cost of making those cookies.\r\n\r\n_Test your function by - calculating the cost of 42 cookies_" - Calc Design Recipe 3_markdown_instruction: "Write the function `sales` which - takes in the number of cookies sold, and produces the amount of money customers - spent to buy those cookies (each cookie is sold at $1.50).\r\n\r\n_Test your - function by calculating the sales for 135 cookies_" - Calc Design Recipe 4_markdown_instruction: "Using the two functions we just - wrote, write the function `profit`, which takes in the number of cookies you - sold, and gives you back the total profit you make from selling your cookies, - accounting for the cost of baking them.\r\n\r\n_Test your function by calculating - the total profit for 15 cookies_" - Calc Rocket 1_markdown_instruction: "In the last puzzle you wrote a contract - for the function `rocket-height` that states it has a range of Number, domain - of Number, and should return the height of the rocket traveling at 15 m/s - after a given number of seconds. Let's write an example case now for the - height of the rocket at 3 seconds." - Calc Rocket 2_markdown_instruction: "Great, let's do one more example before - writing the function - what should the rocket height be after 30 seconds?" - Calc Vars 1.1_markdown_instruction: "Here we've set the `age` variable to - 17 years. Can you write an expression that calculates `age` in days?" - Calc Vars 1_markdown_instruction: "Variables allow us to name values so that - we can easily refer to them repeatedly throughout our programs. Here's a - variable called `age`. Set its value to your age and click run." - Calc Vars 2.1_markdown_instruction: "Here's a new variable called `age-in-months`. - Use the variable `age` to set `age-in-months`." - Calc Vars 2_markdown_instruction: "Can you write an expression that calculates - `age` in months?" - 'Challenge: Buzzer and LED_markdown_instruction': "# Challenge\r\n\r\nCheck - with your teacher before starting the challenge.\r\n\r\nNow that you know - how to use the LED and buzzer, try creating an app that can play a variety - of different sounds and which uses the LED. You could make a keyboard or synthesizer - that plays various sounds when you click different buttons." - 'Challenge: Input and UI_markdown_instruction': "# Stop\r\n\r\nYou have reached - the end of the lesson. Check in with your teacher to see if you should work - on the challenge level before you start. This is an extra challenge to practice - your skills if you have time. If you don't have time for it no big deal!\r\n\r\n# - Challenge\r\n\r\nGo to <a href=\"studio.code.org/p/gamelab\" target=\"_blank\"> - Full Game Lab </a> and try to make your own profile creator like the example - program on this level." - 'Challenge: Lights Picker_markdown_instruction': "# Challenge: More Patterns\r\n\r\nAdd - some more patterns to your app. Find a partner and add their pattern as an - option. Make sure to put each pattern into its own function." - 'Challenge: List of Notes_markdown_instruction': "# Challenge: \r\n\r\nCheck - with your teacher before starting the challenge.\r\n\r\n**Starter Code:** - An array with the name of the 30 buttons on the screen (not including the - New Pattern button) is provided for you. \r\n\r\n**Write Code:** Each time - the New Pattern button is clicked at least one random button from the list - is set to a random color.\r\n" - 'Challenge: Random Button Colors_markdown_instruction': "# Challenge: Random - Button Colors\r\n\r\nCheck with your teacher before starting the challenge.\r\n\r\n**Starter - Code:** An array with the name of the 30 buttons on the screen (not including - the New Pattern button) is provided for you. \r\n\r\n**Write Code:** Each - time the New Pattern button is clicked at least one random button from the - list is set to a random color.\r\n" - 'Challenge: Sunset with Counters_markdown_instruction': "# Challenge: Nightfall\r\n\r\nThink - you've got drawing with counters down? Try this challenge.\r\n\r\nThe color - block can take a 4th input that controls the opacity of the color. You can - click the arrows on the side of the color block to expand this 4th input.\r\n\r\n![](https://images.code.org/7844f8cb46eade7cec452b7a4d98124b-image-1484964689007.10.08 - PM.png)\r\n\r\n# Do This\r\n\r\nThis is your same sunset animation from before. - Can you make the scene slowly change to night?\r\n\r\n![](https://images.code.org/b055142110b0d0ed092d6496447aad6e-image-1463079830043.gif)\r\n\r\n" - Classroom Assessment Techniques_markdown_instruction: "The following link is - a resource that presents the process of designing and using classroom assessment - techniques:" - Classroom Management Tips for School Computer Labs_markdown_instruction: "## - Strategies for Managing a Computer Lab\r\n\r\n\r\nIf you're new to teaching - a computer lab, consider implementing some of the 7 tips for establishing - strong instructional routines, outlined in this article by Angela Watson. - \r\n\r\n<br><br>" - 'Collaborative Learning and Group Work: Description and Strategies_markdown_instruction': "The - following link to Cornell University Center for Teaching Excellence provides - a brief description of group learning along with a handful of specific techniques - for designing and implementing group work activities: " - collector example_markdown_instruction: "Collect all the gold using the `collect` - block:\r\n\r\n<xml>\r\n <block type=\"collector_collect\"/></xml>" - collectorDebugVideo2_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe - blocks you need are already in the workspace, but not connected. \r\n\r\nPut - these blocks in order to collect all of the gold and solve the puzzle." - collectorSkinVideo1_markdown_instruction: "Move Laurel to the gold, then use - `collect` to pick it up.\r\n\r\nCollect one pile of gold to pass this level." - collectorSkinVideo2_markdown_instruction: "Move Laurel to the gold, then use - `collect` to pick it up.\r\n\r\nCollect one pile of gold to pass this level." - Color Blindness Filter_markdown_instruction: "# Color Blindness Filter\r\n\r\n\r\n\r\n" - Color Contrast Checker_markdown_instruction: "# Color Contrast\r\n\r\nPeople - need to be able to see and read the content on your web page for it to be - useful. Some people might have bad eye sight, others are color blind. How - do you design with these differences in mind? \r\n\r\nOne of the easiest ways - to insure that many people will be able to read the content on your website - is to make sure their is enough contrast between the different colors you - are using together on your site.\r\n\r\nhttp://gomedia.com/zine/tutorials/rule-three-contrast-contrast-contrast/\r\n\r\n\r\n# - Do This\r\n\r\n* Use the color contrast checker to see the difference in contrast - of the different colors you are using together on your site." - Considerations for the 1-to-1 Classroom_markdown_instruction: "## 1-1 Classroom\r\n\r\nIf - you're new to managing a classroom with computers, check out this article - in Education Week, which outlines some important considerations.\r\n\r\n<br><br>" - Course 4 Artist 1_markdown_instruction: "Help me draw a box. \r\n(Each line - is 200 pixels long) \r\n\r\n<br/><br/>\r\n\r\n" - Course 4 Artist 10_markdown_instruction: "<img src=\"https://images.code.org/c876143212d195192013582f57c6df04-image-1445625392518.36.18.png\" - width=\"150px;\" style=\"mix-blend-mode: multiply;\" />\r\n\r\n**Play time:** Here - is the code for an interesting shape. \r\n\r\nWhat happens when you repeat - it multiple times, turning between each iteration? \r\n\r\nNotice that the - turns in this shape add up to *420 degrees*, which means that when your artist - is done drawing, it will be facing a different direction than when you started. That - new direction is exactly *60 degrees* to the *right* of where you began.\r\n\r\n<hr/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat - 4</b></summary>\r\n<br/>\r\nIf you want to come full circle in just 4 repetitions, - you need the artist to turn a total of **360 degrees/4 = 90 degrees** each - time. You can do that by adding an extra `turn right by 30 degrees` block - to the outer loop (since **60+30 = 90**.) \r\n<br/>\r\n<img src=\"https://images.code.org/9da67a628ed72e87520a02a0d917e2af-image-1440132370113.44.12.png\" - width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n<br/><br/>\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat - 6</b></summary>\r\n<br/>\r\nWhen you repeat the shape as-is 6 times, you get - a total rotation of **6x60 degrees** which is a full **360 degree** cycle. \r\n<img - src=\"https://images.code.org/b79f96b87097ce3afe8a6a5608d04e36-image-1440132287456.44.27.png\" width=\"500px;\" style=\"mix-blend-mode: - multiply;\" />\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat - 12</b></summary>\r\n<br/>\r\nIf you want to repeat the image 12 times, you - need the artist to turn a total of **360 degrees/12 = 30 degrees** each iteration. That - means you will need to adjust the artist back a bit with `turn left by 30 - degrees` before you repeat the shape again. <br/><br/>\r\n<img src=\"https://images.code.org/ad254952522674496918561096817c66-image-1440132424792.44.01.png\" - width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n</details>\r\n</h4>\r\n\r\nNow - it's your turn! Can you recreate each image by repeating the starting shape? " - Course 4 Artist 11_markdown_instruction: "<img src=\"https://images.code.org/6cac10470af71bbb5d75bf5e2669046f-image-1439939145211.png\" - width=\"200px\"/>\r\n\r\nNow for a challenge! \r\n\r\nHere is a design that - uses only blocks that you have already been shown. Can you figure out how - to recreate it? Feel free to use trial and error. You are not expected to - get it perfect the first time.\r\n\r\nThe repeated shape is almost identical - to the one from the last puzzle, except that the length used in the first - loop is a little smaller. " - Course 4 Artist 12_markdown_instruction: "<img src=\"https://images.code.org/70795d84048767ae7fb65883f476b27c-image-1440050836837.01.09.png\" - width=\"250px\"/>\r\n\r\nFree Play Inspiration: You've now learned everything - you need to know to make a pattern like this! If this picture inspires you, - try to make something similar. Otherwise, create something all your own. \r\n\r\n<br/>\r\n" - Course 4 Artist 13_markdown_instruction: "Still playing? Here is a blank canvas - where you can design anything you want!" - Course 4 Artist 2_markdown_instruction: "Can you use a loop to draw the greyed - out square? \r\n(Each side is 300px long)" - Course 4 Artist 20_markdown_instruction: "Still playing? \r\n\r\nHere is a - blank canvas where you can create whatever you want!" - Course 4 Artist 3_markdown_instruction: "Try to figure out what happens if - you run this code (or press \"Run\" to test it). \r\n\r\nThen, repeat it - enough times to complete the drawing." - Course 4 Artist 4_markdown_instruction: "How many degrees are in a circle? \r\nFill - in the repeat block with that number to create a circle of colors." - Course 4 Artist 5_markdown_instruction: "Draw the other half of this design - so it's symmetrical. \r\nThe triangles are equilateral and are 50 pixels - long. \r\n\r\nYou may have to run the code several times to figure out all - of the blocks that need to be added." - Course 4 Artist 6_markdown_instruction: "Complete the code to draw these three, - equilateral triangles." - Course 4 Artist 7_markdown_instruction: "Now nest this loop inside another - loop to draw 10 triangles. " - Course 4 Artist 8_markdown_instruction: "Draw this sun by looping this whole - block of code multiple times." - Course 4 Artist 8a_markdown_instruction: "Remember this shape? Now we're - going to let you build it without giving you any blocks to start!" - Course 4 Artist 9_markdown_instruction: "Loop this design 10 times and make - sure to turn between each shape that's drawn. " - Course 4 Artist Binary 1_markdown_instruction: "Here's a function that takes - a binary string of 1's and 0's and instructs the artist to follow them from - left to right, top to bottom. \r\n\r\nThe artist will fill-in the squares - when it sees a 1 and ignore the square when it sees a 0. \r\n\r\n**Run this - code to see how the artist uses binary to draw this pattern.**" - Course 4 Artist Binary 1a_markdown_instruction: "Here's a function that takes - a binary string of 1's and 0's and instructs the artist to follow them from - left to right, top to bottom. The artist will fill-in the squares when it - sees a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to - see how the artist uses binary to draw this pattern." - Course 4 Artist Binary Free Play 2b_markdown_instruction: "<img src=\"https://images.code.org/0a30f23ff6138828d053267719d34fa8-image-1444435986654.00.22.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own. - \r\n<br/>\r\n" - Course 4 Artist Binary pre1_markdown_instruction: "Binary is a way of representing - information using only two options. In this case, <b>off</b> and <b>on</b>.\r\n<br/>\r\nHere, - we're going to use the number <b>0</b> as code for \"off\" and the number - <b>1</b> as code for \"on\".\r\n<hr/>\r\nWe've provided you with a grid of - \"pixels\" that you can walk through and make designs by turning on only certain - squares.\r\n\r\n<b>Use the blocks below to have the artist draw \"01010101\" - in binary in the first row.</b>" - Course 4 Artist Binary ryan_markdown_instruction: "Binary is a way of representing - information using only two options. Here, we're going to use the options - \"off\" (represented by the number 0) and \"on\" (represented by the number - 1). \r\n\r\nWe've provided you with a grid of \"pixels\" that you can walk - through and make designs by turning on only certain squares. Can you have - the artist draw \"01010101\" in binary in the first row?" - Course 4 Artist For Loops 1_markdown_instruction: "Use a repeat block to draw - this triangle that is 50 pixels wide.\r\n\r\n" - Course 4 Artist For Loops 10_markdown_instruction: "Free Play Time! Have fun - drawing whatever you like with the blocks you have learned how to use." - Course 4 Artist For Loops 11_markdown_instruction: "Remember back in a previous - stage when we used a variable to control the number of sides in a shape? We - are going to do the same thing with the `counter` variable now. \r\n\r\nThis - pattern starts with a triangle and adds one side at a time until it draws - a decagon (10 sides). Each side should be 100 pixels long. \r\n\r\nHow will - you use the `counter` variable from the `for` loop to recreate this drawing?" - Course 4 Artist For Loops 11a_markdown_instruction: "Let's put it all together! \r\n\r\nUsing - your knowledge of `for` loops and the `counter` variable, create this drawing - where each shape has two more sides than the last. Make sure that each side - is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little - of the code has been provided for you." - Course 4 Artist For Loops 12_markdown_instruction: "That looked pretty cool, - but now I'd like to draw each shape next to the last one. This time each - side is 20 pixels. Use a jump block to jump forward 40 pixels after each shape." - Course 4 Artist For Loops 13_markdown_instruction: "Hmmm, those shapes are - getting bigger every time! Didn't we already solve this problem with variables? - How can we use the counter variable to make the sides smaller as there are - more of them? Instead of moving forward by a set amount, try moving forward - (100 / counter) pixels." - Course 4 Artist For Loops 14_markdown_instruction: "If you turn a little bit - more or less than you normally would for a shape, it creates a neat effect. - \r\n\r\nTry using some of the code from the last level, but turning 89 degrees - to create this twisted square spiral." - Course 4 Artist For Loops 15_markdown_instruction: "**Free Play:** Try making - some drawings of your own using `for loops`. We've added a few useful variables - for you as well." - Course 4 Artist For Loops 2_markdown_instruction: "I've put the code for drawing - a triangle inside a `for loop` that counts from 50 to 100 by 10. \r\n\r\n<br/>\r\n<strong>NOTE:</strong> - Make sure you look at the code *before* you hit \"Run\"." - Course 4 Artist For Loops 3_markdown_instruction: "Use the last puzzle as a - reference to complete this one. The smallest triangle has 20 pixel sides, - the largest has 200 pixel sides, and each triangle is 20 pixels larger than - the last." - Course 4 Artist For Loops 4_markdown_instruction: "How would you modify what - you've learned to draw these squares? They start at 15 pixels long, the largest - is 300 pixels long, and each square is 15 pixels larger than the last. " - Course 4 Artist For Loops 5_markdown_instruction: "Good job on the last puzzle! - Let's use that \"counter\" variable block again to draw this cool picture. - \r\n\r\n" - Course 4 Artist For Loops 6_markdown_instruction: "Free Play! Try using a for - loop to draw a growing shape pattern of your own design." - Course 4 Artist For Loops 6a_markdown_instruction: "Make three small changes - to the code from the last level to get this!" - Course 4 Artist For Loops 7_markdown_instruction: "What happens if you remove - the \"Repeat 3\" from this algorithm, keeping the \"move\" and \"turn\" blocks - in the for loop? \r\n\r\n<br/>\r\nIn this spiraling triangle, each side is - 20 pixels longer than the last.\r\n\r\n" - Course 4 Artist For Loops 8_markdown_instruction: "Just one little change to - the code from the last image can create this drawing. Can you figure out what - that change is?\r\n\r\nHint: You need to remove something! " - Course 4 Artist For Loops 8a_markdown_instruction: "Just one little change - to the code from the last image can create this image. Can you figure out - what that change is?" - Course 4 Artist For Loops 9_markdown_instruction: "Can you make a spiral? Move - forward from 1 to 75 pixels, increasing by 1 pixel each time.\r\n\r\n" - Course 4 Artist For Loops Challenge_markdown_instruction: "**Challenge:** Can - you figure out how to use all of the things you've learned to create this - image of polygons, all with 40 pixel sides?\r\n\r\nRemember, in order to create - a spiral, you cannot close the polygon. This means that each shape will need - to have one fewer sides than usual." - Course 4 Artist For Loops Challenge_a_markdown_instruction: "**Challenge:** - Can you figure out how to use all of the things you've learned to create - this image of polygons, all with 40 pixel sides?" - Course 4 Artist For Loops inspire_markdown_instruction: "<br/><br/>\r\n<img - src=\"https://images.code.org/9b5897e059bb29bd2faf8504659a3cfc-image-1440719685627.49.33.png\" - width=\"250px\"/> \r\n<br/><br/>\r\n**Free-Play Inspiration:** You've now - learned everything you need to know to make a pattern like this! If this picture - inspires you, try to make something similar. Otherwise, create something all - your own." - Course 4 Artist Functions 12.1_markdown_instruction: "Let's create a function - called `draw an octagon 20` that draws an octagon where each side is 20 pixels - long." - Course 4 Artist Functions 13.1_markdown_instruction: "Now, let's make a function - called `jump to upper right` that moves the artist to the upper-right of the - octagon that you just drew so we can finish this pattern. \r\n<br/>\r\n*Hint: To - get yourself to the upper-right corner, try jumping in a pattern that makes - just 3/8 of the octagon.* " - Course 4 Artist Functions 14.1_markdown_instruction: "Now, let's make a function - called `jump to upper right` that moves the artist to the top-right of the - octagon that you just drew so we can finish this pattern. " - Course 4 Artist Functions challenge_markdown_instruction: "<img src=\"https://images.code.org/69f1c2b415f907c86aaa6ed2534c3682-image-1442870371171.13.38.png\" - width=\"250px\"/>\r\n\r\n**Challenge Level:** Use what you've learned in - this stage and others to figure out how to make the drawing above. " - Course 4 Artist Functions Inspiration_markdown_instruction: "<img src=\"https://images.code.org/cf373e03bede480ae54aec72ce823454-image-1442951867535.54.11.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own. - " - Course 4 Artist Functions inspire_markdown_instruction: "<img src=\"https://images.code.org/6c6ff8e3b5a763926102033a94720f8b-image-1441300952649.19.47.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own. \r\n<br/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Hints</b></summary>\r\n\t<br/><br/>\r\n\t<h5>\r\n\t<details>\r\n\t<summary><b>Hint - #1</b></summary>\r\n \t<br/>\r\n \tUse a `for loop`, then use its counter - variable inside of a nested `repeat` loop. \r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint - #2</b></summary>\r\n \t<br/>\r\n \tEach iteration, you should `draw - a square` then jump forward.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint - #3</b></summary>\r\n \t<br/>\r\n \tYou will need to turn left by 90 - degrees outside of your `repeat`, but still inside the `for loop`.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Solution</b></summary>\r\n \t<br/>\r\n \t<br/>\r\n \t<img - src=\"https://images.code.org/6b07c5de58a1fa573bef19182105f516-image-1441300922567.14.00.png\" - width=\"450px\"/>\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n</details>\r\n</h4>\r\n\r\n<br/>\r\nWhat - happens if you make the squares a little bigger or smaller? How about if - you turn right instead of left?" - Course 4 Artist Inspire_markdown_instruction: "<img src=\"https://images.code.org/b5e28b084cb331ee030ea3853ed921bd-image-1440060815818.51.21.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! If this picture inspires you, - try to make something similar. Otherwise, create something all your own. " - Course 4 Artist Vars 1_markdown_instruction: "Let's draw an equilateral triangle. - \r\n\r\nIt has to be exactly 100 pixels long on each side.\r\n\r\n<br/>\r\n" - Course 4 Artist Vars 10_markdown_instruction: "Here's an algorithm that draws - a triangle out of smaller triangles. Can you modify it so that it uses the - `sides` variable to draw each triangle? \r\n\r\n</br>\r\nLook through the - code, and every time you see the number 3, replace it with your `sides` variable. - Remember to use the `set sides` block." - Course 4 Artist Vars 11_markdown_instruction: "Here’s some more complicated - code using the same concepts from the last puzzle - what should you set the - `sides` variable to in order to draw this picture made of squares?\r\n\r\n<p - style=\"font-size:small; padding: 15px 15px 15px 40px; background-color:#dcf3f3; - border-radius:10px;\">\r\n\tJust for fun: Try using a few different numbers - to see what happens to the pattern!\r\n</p>" - Course 4 Artist Vars 12_markdown_instruction: "Let's set the `sides` variable - to 5. The more sides we add to this algorithm, the bigger this whole pattern - gets! \r\n\r\n<br/>\r\nNotice that there is another variable called `length`. - \r\nWe can now use that variable wherever we have a `move forward` block. - \r\n\r\nSet the `length` variable to 75 for this shape." - Course 4 Artist Vars 13_markdown_instruction: "When a shape has lots of sides, - each side needs to be shorter if you want the whole pattern to fit on the - screen. \r\n\r\nLet's recreate the algorithm for this amazing pattern, but - instead of manually setting the `length` variable, let's use a math block - with the `sides` variable inside to make sure that each shape fits correctly. \r\n\r\nThe - perimeter of each polygon is 300 pixels." - Course 4 Artist Vars 14_markdown_instruction: "**Free Play**: Check it out! - Now your algorithm is nested within one more loop. Experiment with changing - the values of your two variables to draw cool patterns.\r\n\r\nFor even more - effect, try playing with color! Use random colors inside loops to see how - it changes your design." - Course 4 Artist Vars 2_markdown_instruction: "Instead of using `move forward - by 150`, the `move` block is now referencing a variable called `length`. Can - you set `length` to 150 to draw this new triangle?" - Course 4 Artist Vars 3_markdown_instruction: "Here's a loop that draws a square, - but something's missing. Can you fix it so that it uses the variable \"length\" - to figure out how long each side should be? " - Course 4 Artist Vars 4_markdown_instruction: "Now I want to make a rectangle - that is twice as tall as it is wide. We've got a variable called `width` - that needs to be set to 100. Can you use the math blocks to complete the code?" - Course 4 Artist Vars 6_markdown_instruction: "Here’s some code that can draw - any regular polygon. \r\n\r\nThere’s a new variable called `sides` that is - set to 4. \r\n\r\nCan you use the `sides` variable (along with the math block) - to turn the right amount regardless of how many sides are in the polygon?" - Course 4 Artist Vars 7_markdown_instruction: "Use what you learned in the last - puzzle to create this hexagon using the `sides` variable.\r\n\r\nSee how you - could change just one value to draw a triangle, square, pentagon, or octagon?" - Course 4 Artist Vars 8_markdown_instruction: "**Free Play:** Experiment with - the number of sides this shape has. Can you change the algorithm so that the - overall size of the shape stays the same, no matter how many sides it has? - " - Course 4 Artist Vars 9_markdown_instruction: "Modify this algorithm so it uses - the `sides` variable instead of a fixed number to draw a triangle. Don't - forget to use the `set sides to` block." - Course 4 Bee 1_markdown_instruction: "The bee can't tell what's under the - cloud! \r\n\r\nUse the `if` block to check whether there is a flower under - the cloud. \r\n\r\nGet nectar one time, **ONLY** if there is a flower." - Course 4 Bee 2_markdown_instruction: "Use the `if/else` block to check each - object to see if it's a flower or a honeycomb. \r\n\r\nIf it's a flower, - collect one nectar...otherwise, make one honey!" - Course 4 Bee 3_markdown_instruction: "The unknown object is either a flower - or a honeycomb. \r\n\r\nThis time, use the `if/else` block to collect one - nectar **if** it is a flower, **else** make one honey (because then it would - be a honeycomb)." - Course 4 Bee 4_markdown_instruction: "This purple flower may have either 3, - 2, or 1 nectar. \r\n\r\nHere an `if/else` block is combined with another `if/else` - block to create an `if/else-if/else` statement. \r\n\r\nComplete the solution - to collect the unknown amount of nectar." - Course 4 Bee 5_markdown_instruction: "This purple flower may have either 3, - 2, or 1 nectar. Add an `if-else` block to create an `if, else-if, else` block. - Complete the solution to collect the unknown amount of nectar." - Course 4 Bee 6_markdown_instruction: "This purple flower may have either 3, - 2, or 1 nectar. Create an `if, else-if, else` block to collect the unknown - amount of nectar." - Course 4 Bee 7_markdown_instruction: "Use everything you have learned so far - to collect all the nectar. The purple flower may have either 3, 2, or 1 nectar." - Course 4 Bee For Loops 11_markdown_instruction: "What's wrong with this loop? - See if you can fix it and make the bee collect all the nectar." - Course 4 Bee Params 1_markdown_instruction: "Write a sequence to collect all - of the nectar using `get 3 nectar` which turns, moves to collect the nectar, - and then returns to the original location." - Course 4 Bee Params 2_markdown_instruction: "Modify the `get 3 nectar` function - so it makes me turn right instead of left to the flowers." - Course 4 Bee Params 3_markdown_instruction: "Now there are flowers on both - sides! \r\n\r\nWe've added variables called `left` and `right` for you to - use, and now there is a parameter called `direction` inside `get 3 nectar`. - \r\n\r\n**Edit `get 3 nectar` so that the bee turns the correct direction - when the variables `left` or `right` are passed into the function.**" - Course 4 Bee Params 5_markdown_instruction: "Let's start from scratch - can - you create a new function called `get 5 nectar` with a direction parameter?" - Course 4 Bee Params 6_markdown_instruction: "Wouldn't it be nice if we could - collect all of these nectars with a single function? \r\n\r\n<br/>\r\nTry - adding a new parameter to your function called `nectar units` to control the - amount of nectar to collect. You'll probably want to rename the function - too!" - Course 4 Bee Params 7_markdown_instruction: "Try using your new function to - collect all of this nectar.\r\n\r\n<br/>\r\n" - Course 4 Bee Params 8_markdown_instruction: "**Challenge:** Now there's honey - to deal with too! \r\n\r\nRewrite your function to use both the number of - honey units and the number of nectar units. How would you use those numbers - to decide what you should do?" - Course 4 EC 1a_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 1b_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 2a_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 2b_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 2c_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 2d_markdown_instruction: "**Extreme Challenge:** No rules. No - clues. Just the challenge!" - Course 4 EC 3_markdown_instruction: "**Functions Super Challenge:** Use what - you learned in the previous level to draw an image like this.\r\n\r\n*Note: - The code becomes more simple if you incorporate parameters.*\r\n\r\n<br/>\r\n<img - src=\"https://images.code.org/d3d6a51fafdcc0a09a5c6b0e0f3c2b92-image-1446239805818.08.59.png\" - width=\"300px\"/>\r\n<br/> \r\n\r\n\r\n" - Course 4 EC 3a_markdown_instruction: "**Extreme Challenge:** No rules. No clues. - Just the challenge!\r\n\r\n<br/>\r\n<img src=\"https://images.code.org/d3d6a51fafdcc0a09a5c6b0e0f3c2b92-image-1446239805818.08.59.png\" - width=\"300px\"/>\r\n<br/> \r\n\r\n\r\n" - Course 4 Maze 4_markdown_instruction: "Try the `repeat` block to use fewer - blocks when solving this puzzle..." - Course 4 Play Lab Params 1_markdown_instruction: "Here's a function called - `jump` that causes your main character to jump up 100 pixels. \r\n\r\nRun - the program and use the jump function to collect all of the flags by moving - the dog with the arrow keys." - Course 4 Play Lab Params 10_markdown_instruction: "We've added one last function - for you.\r\n<hr/>\r\n\r\n<h4>\r\nUse an `if` statement to program your game - to call the `level_up` function only when `player_score` becomes greater than - a certain number.<br/><br/>\r\n</h4>\r\n<i>For example: `player_score` > 6</i>\r\n\r\n\r\n<hr/>\r\n<i>Play - the game, and make it to level 3 to move to the next puzzle.</i>" - Course 4 Play Lab Params 2_markdown_instruction: "Now we've got flags that - are too high for our current jump! Let's use both the \"up\" and \"down\" - arrows so that we can have multiple jump heights. \r\n\r\nWe need to add - a parameter to our jump function called `height`. \r\n- The up arrow should - cause the dog to jump 200 pixels \r\n- The down arrow should make it jump - only 100 pixels. \r\n" - Course 4 Play Lab Params 3_markdown_instruction: "We have added another parameter - to the jump function so that we can use it with other actors. Each actor is - represented by a number, starting from one. \r\n\r\n<br/>\r\nEdit the `jump` - function so that it uses the `actor` parameter to make the correct character - jump. " - Course 4 Play Lab Params 4_markdown_instruction: "Here's a function called - `patrol`. \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 - pixels." - Course 4 Play Lab Params 5_markdown_instruction: "Edit the the `patrol` function - to add an `actor` parameter, so that we can call it for each of the actors - on the screen. Remember, the actors correspond to numbers 1, 2, and 3." - Course 4 Play Lab Params 6_markdown_instruction: "Add another parameter called - `speed` to the `patrol` function. Try using a `set speed` block with the new - `speed` parameter to help Penguin get both flags before the other sprites - even get one." - Course 4 Play Lab Params 7_markdown_instruction: "Let's have some fun! Look - at the code provided to see if you can figure out what each block does. \r\n\r\nWhen - you're done, use the arrow keys to control Dog and collect all of the flags.\r\n\r\n**NOTE:** - You don't need to make any changes to the program" - Course 4 Play Lab Params 8_markdown_instruction: "Use the `when actor touches` - block to send Dog back to the top-left ONLY if Dog touches any of the other - actors." - Course 4 Play Lab Params 9_markdown_instruction: "Here's our game from an - earlier stage but most of the code is hidden. We've added a new function - called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nEdit the function - so that a new parameter called `points` is added to `player_score`. \r\n<br/>\r\nThe - variable `player_score` should increase each time Dog tags Cat with pie, and - decrease each time that Cat tags Dog with a sandwich.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: - When you're done, click \"Run\" to play. When Dog scores 6 points, you will - move on to the next puzzle.*" - Course 4 Play Lab Vars 1_markdown_instruction: "This time you don't have to - write any code, just hit `Run` to play the game! \r\n\r\n<br/>\r\nIn this - game, you're the dog who is trying to collect more flags than the cat. Use - the down arrow to control the dog. Press `Finish` when you're done playing." - Course 4 Play Lab Vars 2_markdown_instruction: "The race in that last puzzle - wasn't very fair! Change the `dog_speed` variable to make sure you can collect - more flags than Cat. The first to collect 10 flags wins!" - Course 4 Play Lab Vars 3_markdown_instruction: "Here's a new kind of game! - \r\n\r\nYou don't need to change anything on this level.\r\n\r\n**Directions:** - Use the left and right arrows to move, and the up arrow to jump. See if you - can collect all of the flags." - Course 4 Play Lab Vars 4_markdown_instruction: "Now we're using a variable - called `height` to control how high the dog can jump. Update the `height` - variable so that the dog can jump high enough to reach all the flags. \r\n" - Course 4 Play Lab Vars 6_markdown_instruction: "<h5><b>\r\nIn our game, how - should we score points? \r\n</b></h5> \r\n<br/>\r\n\r\n1. Add 1 to your `points` - variable each time Dog hits Cat with a piece of pie. <br/> <br/> \r\n2. - Use the `when actor 2 touches anything` event to trigger an update to your - score. You can increment your variable by setting `points = points + 1.` <br/> <br/> - \r\n3. Get your score up to 10 to pass the level.\r\n\r\n<br/><br/>\r\n<h4>\r\n**Note:** - Use the right arrow to throw pie!\r\n</h4>" - Course 4 Play Lab Vars 7_markdown_instruction: "Nice, now let's make sure - this game isn't too easy to play! \r\n\r\nAny time Dog (actor 1) gets hit - by a sandwich from Cat (actor 2), you should lose a point. \r\n\r\nStart with - 10 points so it's not too hard. Let your score drop down from 10 to 0 to - pass the level." - Course 4 Play Lab Vars 9_markdown_instruction: "Free Play time! Here are all - of the variables we've played with so far in this stage, as well as a few - more in case you want them. \r\n\r\nNotice that there are now so many blocks - in our toolbox that they need to be organized! Here, we've put each piece - into an appropriate category. Take some time to explore everything that is - available. When you're done browsing, make a game or story using repeats, - variables, and events. \r\n\r\n*Hint: scroll down to see all the commands - in the workspace.*" - Course 4 Play Labs For Loops 1_markdown_instruction: "Let's make the dog speak - every number from 1 to 100. Use a `for` loop and the counter block to speak - the counter variable each time the loop is run." - Course 4 Play Labs For Loops 4_markdown_instruction: "Changing the increment - can be helpful, but we're still counting linearly (each number is the same - distance from the last) What if I wanted to count exponentially? \r\n\r\n<br/>\r\nWithout - changing the settings in this for loop, can you count 1, 4, 9, 16, 25... (counter - squared)?" - Course 4 Play Labs For Loops 4a_markdown_instruction: "Now, let's blend the - variables from Stage 7 together with your `counter` variable to make some - magic happen. \r\n\r\nIn this puzzle, Dog will count from **0** to **1000** - by `increment`. Set the `increment` variable to **10** at the beginning of - your code to see what happens." - Course 4 Play Labs For Loops 5_markdown_instruction: "In the last stage we - counted the square of each number. Try changing `counter ^ 2` to `counter - ^ 3` to count the cube of each number (1, 8, 27, 64, 125, 216, 343…)" - Course 4 Play Labs For Loops 5a_markdown_instruction: "In this puzzle, Dog - will be your time keeper.\r\n\r\nDog will count from **0** to **30** by `increment`. The - `increment` variable will begin with a value of **1**.\r\n\r\nCan you make - it so that each time you click Dog, `increment` increases by **2**? Click - the forward arrow to run the `for loop`. \r\n\r\n**Note:** Run the loop a - couple of times, clicking Dog before each one." - Course 4 Play Labs For Loops 6a_markdown_instruction: "Now that we've seen - how to control our `for loop` using variables inside of our program, let's - make a game!\r\n\r\nDog will still keep time by counting with our `for loop` - by `increment`, but this time we will add The Wizard into the mix. Can you - change the code so that `increment` goes up by two each time The Wizard is - clicked?\r\n\r\nWatch out! The Wizard moves quickly!" - Course 4 Play Labs For Loops 7a_markdown_instruction: "Now we're getting somewhere! What - if we start counting how many times we can click The Wizard before Dog gets - to 30? \r\n\r\nFinish adding blocks to The Wizard so that every time he's - clicked the variable `clicked` increases by one. You can ignore `increment` - for now.\r\n\r\n**Note:** Dog will start counting when you click `Run`." - Course 4 Play Labs For Loops 8_markdown_instruction: "Now, help the actors - move as they count. \r\n\r\nDog should move and count by adding 2 (`counter - + 2`) each time. Cat will move and count by multiplying by 2 (`counter *2`) each - time. Penguin will move and count to the power of 2 (`counter ^ 2`) each time. Who - will reach their flag first?" - Course 4 Play Labs For Loops 8a_markdown_instruction: "To finish our game, - we need to bring back the `increment` variable! Let's tie it to the level - of the game.\r\n\r\n1) Keep track of the number of times The Wizard is clicked. \r\n2) - If The Wizard is clicked at least 10 times before Dog counts to 30, raise - `increment` by 1 and start again. \r\n3) If The Wizard does not get clicked - at least 10 times, the game is over. " - Course 4 Playlab For Loop Freeplay_markdown_instruction: "**Freeplay:** Use - everything you've learned so far to make a game that includes a `for` loop!" - Course 4 Playlab For Loops 4b_markdown_instruction: "Now, these two characters - are going to race! \r\n\r\nEach of them will move `counter` steps at a time, - but their counters will have different values because of the `for` loops. \r\n\r\nCan - you change the **increment** in one of the loops so that the race is a tie?" - Course 4 Playlab For Loops 5b_markdown_instruction: "Adjust the interval on - these `for` loops so that the two characters end in the exact same place." - Course 4 Playlab For Loops 6b_markdown_instruction: "Now we're going to use - `for` loops in a whole different way!\r\n\r\nThis game gets hard quickly because - the time between disappearances shrinks fast!\r\n\r\n<hr/>\r\n\r\n**Edit this - `for` loop to create a game that's fun for you to play!** \r\n\r\n<hr/>\r\n\r\nPress - \"Run\" and click Madame Unicorn as many times as you can. Can you beat our - score of 24? " - Course 4 SCF 1_markdown_instruction: "**Functions Super Challenge:** Use the - suggested functions to draw four rows of hexagons. Notice how our even numbered - rows are shifted to the right?" - Course 4 SCF 1a_markdown_instruction: "**Functions Super Challenge:** Can you - figure out how to collect all of this nectar with the fewest blocks possible?\r\n" - Course 4 SCF 1b_markdown_instruction: "**Functions Super Challenge:** Can you - figure out how to collect all of this honey with the fewest blocks possible?\r\n\r\n" - Course 4 SCF 2_markdown_instruction: "**Functions Super Challenge:** Use what - you learned in the previous level to draw an image like this.\r\n\r\n*Note: - The code becomes more simple if you incorporate parameters.* " - Course 4 SCF 3 Fail 1_markdown_instruction: "**Functions Super Challenge #1:** - \r\n\r\n" - Course 4 SCF 3 Fail 2_markdown_instruction: "**Functions Super Challenge #1:** - \r\n\r\n" - Course 4 SCF 3_markdown_instruction: "**Functions Super Challenge:** Use what - you learned in the previous level to draw an image like this.\r\n\r\n*Note: - The code becomes more simple if you incorporate parameters.*\r\n\r\n<br/>\r\n<img - src=\"https://images.code.org/d3d6a51fafdcc0a09a5c6b0e0f3c2b92-image-1446239805818.08.59.png\" - width=\"300px\"/>\r\n<br/> " - Course 4 SCFL 1_markdown_instruction: "**For-Loops Super Challenge:** Solve - this puzzle with the fewest number of blocks possible." - Course 4 SCFL 1a_markdown_instruction: "**For Loops Super Challenge:** Can - you get Skrat to his acorn using as few blocks as possible?\r\n\r\n" - Course 4 SCFL 1b_markdown_instruction: "**For Loops Super Challenge:** Can - you get Skrat to his acorn using as few blocks as possible?\r\n" - Course 4 SCFL 2_markdown_instruction: "**For-Loops Super Challenge:** Solve - this puzzle with the fewest number of blocks possible. \r\n<br/>\r\n" - Course 4 SCFL 3_markdown_instruction: "**For-Loops Super Challenge:** Can you - figure out how to re-create this drawing? \r\n\r\n<img src=\"https://images.code.org/724b2efa8aefe863bd0d6491a3f1590f-image-1445563707400.26.50.png\" - width=\"350px\"/>\r\n" - Course 4 SCFL 4_markdown_instruction: "**For-Loops Super Challenge:** Can you - figure out how to re-create this drawing? \r\n\r\n<img src=\"https://images.code.org/407f502735beec686187451bdf67aada-image-1446002848700.59.34.png\" - width=\"350px\"/>" - Course 4 SCFL 5_markdown_instruction: "**For-Loops Super Challenge #5:** Can - you figure out how to re-create this drawing? \r\n\r\n<img src=\"https://images.code.org/407f502735beec686187451bdf67aada-image-1446002848700.59.34.png\" - width=\"350px\"/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Hints</b></summary>\r\n\t<br/><br/>\r\n\t<h5>\r\n\t<details>\r\n\t<summary><b>Hint - #1</b></summary>\r\n \t<br/>\r\n \tThe color change happens using the - `set color with red, green, blue` block. Red is always the value of `counter`, - green is always `255 - counter`, and blue remains constant at 255 exactly.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint - #2</b></summary>\r\n \t<br/>\r\n \tEach shape is a square with sides - that are `counter` pixels long, starting with 5px, and increasing by 5px all - the way up to 200px.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint - #3</b></summary>\r\n \t<br/>\r\n \tThe artist turns 15 degrees between - each square.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Solution</b></summary>\r\n \t<br/>\r\n \t<br/>\r\n \t<img - src=\"https://images.code.org/0bf4c87e33459f832258939ec53ad595-image-1446002848701.59.15.png\" - width=\"450px\"/>\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n</details>\r\n</h4>" - Course 4 SCFL 6_markdown_instruction: "**For-Loops Super Challenge:** Can you - figure out how to re-create this drawing with a single loop? \r\n\r\n<img - src=\"https://images.code.org/b0d15d06465d645c5ca533e5da6387b3-image-1446075597132.36.04.png\" - width=\"350px\"/>" - Course 4 SCFL 7_markdown_instruction: "**For-Loops Super Challenge:** The artist - wants to catch some waves! Can you figure out how to re-create this drawing? - \r\n\r\n<img src=\"https://images.code.org/fba3423f2e9a405d4d3859de32cdb0f3-image-1446102880655.13.36.png\" - width=\"350px\"/>" - Course 4 SCFP 1_markdown_instruction: "Create a function with parameters that - allows the artist to jump backward and forward by x pixels, and also up and - down by y pixels (using positive and negative numbers)." - Course 4 SCV 1_markdown_instruction: "<img src=\"https://images.code.org/7469d6b9aaaae532d864caecb65bd2cc-image-1444706295435.54.39.png\" - width=\"250px\"/>\r\n\r\n**Variables Super Challenge:** You've now learned - everything you need to know to make a pattern like this! This puzzle is meant - to be difficult. Can you stick with it until you figure out the solution?" - Course 4 SCV 2_markdown_instruction: "<img src=\"https://images.code.org/85f0b27009edd86eff78692004b9ed52-image-1444712655590.02.32.png\" - width=\"250px\"/>\r\n\r\n**Variables Super Challenge:** You've now learned - everything you need to know to make a pattern like this! This puzzle is meant - to be difficult. Can you stick with it until you figure out the solution?" - Course 4 SCV 3_markdown_instruction: "**Variables Super Challenge:** You've - now learned everything you need to know to solve this puzzle! This game is - meant to be difficult. Can you stick with it until you figure out the solution?\r\n\r\n<hr/>\r\n\r\nNow - for a game of tag! Tag Cat to get 2 points. Tag Penguin to get 3 points. Get - exactly 10 points to win!\r\nBut be careful, when Cat and Penguin tag each - other, they take points away.\r\n\r\n<strong>\r\nAdd the blocks necessary - to make this game work the way it's been explained. \r\n- How will you get - Dog to move in all directions using the arrow keys? \r\n- How will you add - points when Dog tags Cat or Penguin? \r\n- How will you subtract points when - Cat and Penguin touch?\r\n</strong>\r\n\r\n<hr/>\r\n\r\n" - Course 4 SCV 4_markdown_instruction: "**Variables Super Challenge:** Solve - this puzzle with the fewest number of blocks possible.\r\n" - Course 4 SCV 5_markdown_instruction: "**Variables Super Challenge:** Solve - this puzzle with the fewest number of blocks possible.\r\n\r\n" - Course 4 SCV 6_markdown_instruction: "<img src=\"https://images.code.org/499fc71a0a06bacb68a9789ad57f8148-image-1445574373673.16.44.png\" - width=\"250px\"/>\r\n\r\n**Variables Super Challenge:** You've now learned - everything you need to know to make a pattern like this! This puzzle is meant - to be difficult. Can you stick with it until you figure out the solution? " - Course 4 SCVP 1_markdown_instruction: "Create a function with parameters that - allows the artist to jump backward and forward by x pixels, and also up and - down by y pixels (using positive and negative numbers)." - Course 4 Variables Assessment_markdown_instruction: "Can you create this image - using a variable for `sides`? Each line should be 50 pixels long." - course2_playlab_stage17_11_markdown_instruction: "Create your own story. When - you're done, click Finish to let friends try your story on their phones.\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Who's - there?</strong> - Make characters appear with random images, so no one knows - who's showing up next.</li>\r\n <li><strong>Going on an Adventure</strong> - - Change the background, then have the characters talk about where they are - now. </li>\r\n <li><strong>Pinball</strong> - Make one character - move using the arrow keys (use `when up arrow`, `when down arrow` blocks), - then play random sounds when it collides with other characters on the screen. - </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" - course_playlab_variables1_markdown_instruction: "This is Pirate Pegleg. He's - awfully hard to understand these days! \r\n\r\nDecode his speech by changing - these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" - should be \"e\"\r\n\r\n" - course_playlab_variables2_markdown_instruction: "Now, decode Pirate Pegleg's - speech by changing the value of the variables in just two places! \r\n- - \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" - course_playlab_variables3_markdown_instruction: "Now, decode Pirate Pegleg's - speech by changing the value of the variables in just two places! \r\n- - \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" - courseA_artist_loops10_markdown_instruction: "<div style=\"color: #7665a0; - font-size: 1.6em; line-height: 1.4em;\" >\r\nTime to head back to land. Help - me put down stones so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" - width=\"300\"/>\r\n" - courseA_artist_loops11_markdown_instruction: "<div style=\"color: #7665a0; - font-size: 1.6em; line-height: 1.4em;\" >\r\nHelp me build steps to watch - the ship sail away.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/0dfa647dbc835fae09989a0fbfd798c7-image-1470871168220.gif\" - width=\"300\"/>\r\n" - courseA_artist_loops12_markdown_instruction: "The artist saw something funny - in the distance. Draw what you think he saw.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" - width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" - width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" - width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" - width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" - courseA_artist_loops2_markdown_instruction: "Help the artist draw this line - two times forward.\r\n\r\n![](https://images.code.org/7ddc7b43ef27197559c7defb0af56d03-image-1470776934855.gif)" - courseA_artist_loops3_markdown_instruction: "Our artist is trying to draw a - line five times, but can't get it right. Can you help?\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" - courseA_artist_loops4_markdown_instruction: "Now, use a `repeat` loop to draw - this line five times!\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" - courseA_artist_loops5_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nDraw a line seven steps long. This will - become our horizon.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" - width=\"300\"/>\r\n" - courseA_artist_loops6_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nLet's put a nice hill in the back.<br/><br/>\r\n</div>\r\n\r\n<img - src=\"https://images.code.org/bbbd114642d829029fc3b0566a4437e3-image-1477107329933.gif\" - width=\"300\"/>\r\n" - courseA_artist_loops7_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the - water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" - width=\"300\"/>\r\n" - courseA_artist_loops8_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nWe need a ladder up to the boat.<br/>\r\n</div>\r\n<img - src=\"https://images.code.org/6e4dc767e55d11400f35c6680bbfe1e3-image-1470788284437.gif\" - width=\"300\"/>" - courseA_artist_loops9_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** The stairs down to the dock - are broken. Help me fix them.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/53c68133f897895caa0369b4afa3ec3b-image-1470789463684.gif\" - width=\"300\"/>\r\n" - courseA_collector_loops1_markdown_instruction: "**Free Play:** This is Laurel - the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag - blocks into the workspace and try to figure out how to get treasure. Get - at least one item to pass this level." - courseA_collector_loops2_markdown_instruction: "Move Laurel to the treasure, - then use `collect` to pick it up.\r\n\r\nCollect all three piles to pass this - level." - courseA_maze_seq1_markdown_instruction: "*\"Play with these blocks and try - to get me to the bad pig!\"*" - courseA_maze_seq10_markdown_instruction: "**Challenge:** Go around the TNT - to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/fa04813e9451e0bc070af50bc01d4a6b-image-1467932582838.gif\" - width=\"200px\"/>" - courseA_maze_seq11_markdown_instruction: "Time for a shorter puzzle! Move - one way, then another to get the bird to the pig.\r\n\r\n<img src=\"https://images.code.org/c2e2d7ea98a18d899c6de183ce6d82e1-image-1471385293382.gif\" - width=\"200px\"/>\r\n" - courseA_maze_seq12_markdown_instruction: "Get that pig!\r\n\r\n<img src=\"https://images.code.org/f908ff77eb81ee85d405a7ba66cc2986-image-1467933103380.gif\" - width=\"200px\"/>\r\n" - courseA_maze_seq2_markdown_instruction: "*\"A bug! Fix the code to get me to - the pig.\"*\r\n \r\n<img src=\"https://images.code.org/2843193ce2d869ad2f06f0f5b114c9d0-image-1467924400663.gif\" - width=\"200px\"/>" - courseA_maze_seq3_markdown_instruction: "*\"Fix the code to get me to the pig!\"*\r\n\r\n<img - src=\"https://images.code.org/629cddc754f9ad02929f06fc68462e4d-image-1467924800613.gif\" - width=\"200\"/>" - courseA_maze_seq4_markdown_instruction: "*\"Something is not quite right.\"* - \r\n\r\nREMOVE a block to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/dd6d92233199ee0f524caa4051b99275-image-1467920800577.gif\" - width=\"200px\"/>" - courseA_maze_seq5_markdown_instruction: "Try this one yourself from the beginning.\r\n\r\n<img - src=\"https://images.code.org/43001078c4df6feea1a6edf025192d85-image-1467929743355.gif\" - width=\"200px\"/>" - courseA_maze_seq6_markdown_instruction: "Move one way, then another to get - the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/0b324bc0f684f7a22171acd8b38c8d9f-image-1467931807767.gif\" - width=\"200px\"/>" - courseA_maze_seq7_markdown_instruction: "Figure out what is missing and then - add blocks to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/b9803e12911694d8bb18bd55304f85d5-image-1467932006704.gif\" - width=\"200px\"/>" - courseA_maze_seq8_markdown_instruction: "Solve this level and get the bird - to the pig!\r\n\r\n<img src=\"https://images.code.org/1eb9139e2887083dc80b98d9aeb3bef2-image-1467932105884.gif\" - width=\"200px\"/>" - courseA_maze_seq9_markdown_instruction: "**Challenge:** Debug this level by - adding blocks to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/810d7189bcd0767d37ea82319b4c678c-image-1467932445247.gif\" - width=\"200px\"/>" - courseA_playLab_events3_markdown_instruction: "Help Jorge the Dog get moving - by connecting the ![](https://images.code.org/b3d6215901969328333d6393f8101c5b-image-1478142333199.png) - block to the ![](https://images.code.org/4f2130b2a3053695414a02c3d39ef864-image-1478143461271.png) - event block that is already in the workspace." - courseA_playLab_events4_markdown_instruction: "Now, get Jorge to move right - when the ![](https://images.code.org/b99365eb23280f158e6ef570fe1c8a76-image-1478145132820.png) - button is clicked." - courseA_playLab_events5_markdown_instruction: "Add events to have Jorge move - up and down when the ![](https://images.code.org/379493b95d158b273f1424538b1c635a-image-1478145402316.png) - and ![](https://images.code.org/f490d78efd81c21ab74286aefe7af097-image-1478145385132.png) - buttons are pressed." - courseB_artist_loops10_markdown_instruction: "Use what you have learned to - draw a picture of what you think the artist saw when he got home.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" - width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" - width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" - width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" - width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" - courseB_artist_loops6_markdown_instruction: "Behind the bushes there is a beautiful - vine full of flowers. Can you climb the vine and see where it goes?" - courseB_artist_loops7_markdown_instruction: "**Challenge:** It's a hidden - garden! Let's walk around." - courseB_collector_loops1_markdown_instruction: "**Free Play:** This is Laurel - the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag - blocks into the workspace and try to figure out how to get treasure. Get - at least one item to pass this level." - courseB_collector_loops2_markdown_instruction: "Move Laurel to the treasure, - then use `collect` to pick it up.\r\n\r\nCollect all four piles to pass this - level." - courseB_collector_loops3_markdown_instruction: "How can Laurel collect all - five piles of treasure using only one `E -->` block?" - courseB_collector_loops3_predict1_markdown_instruction: "How can Laurel collect - all five piles of gold using only one `E -->` block?" - courseB_collector_prog3_markdown_instruction: "How can Laurel collect all five - piles of gold using only one `E -->` block?" - courseB_maze_seq9_markdown_instruction: "**Challenge:** Move around the TNT - to get the bird to the pig." - courseB_maze_seqCold_markdown_instruction: "**Challenge:** Debug this level - by adding blocks to get the bird to the pig!" - courseB_playLab_events1_markdown_instruction: "This game is called \"Play Lab\". \r\n\r\n<br/>\r\nSee - if you can figure out what each block does." - courseB_playlab_events3_markdown_instruction: "Use an event to make Daisy the - Dragon switch to a random ![](https://images.code.org/c365e065614fea592612264f33624c09-image-1475698889081.17.53.png) - mood when you click on her.\r\n\r\n" - courseB_playlab_events4_markdown_instruction: "Knight time! \r\n\r\nAdd an - event so that the knight moves toward the dragon when the left arrow is clicked." - courseB_playlab_events6_markdown_instruction: "Help your knight get all of - the flags!\r\n\r\nTo do this, you'll need to add events to help the knight - move up and down." - courseB_playlab_events7_markdown_instruction: "Make this game fun by setting - the knight to vanish when he runs into the dragon! \r\n\r\nPlay a sound when - they collide to make it feel more real." - courseC_artist_prog1_markdown_instruction: "*\"Hi, I'm an artist. You can - write code to make me draw almost anything.\"*\r\n\r\nPlay with the blocks - in the toolbox to see what they do!" - courseC_artist_prog2_markdown_instruction: "*\"Let's make a cage for my pet - monster!\"*\r\n\r\nDrag blocks onto the screen to have the artist draw over - the grey lines in the picture. \r\n(Each line is 100 pixels long)" - courseC_artist_prog3_markdown_instruction: "*\"This spaceship needs a window!\"*\r\n\r\nEach - side of the inner square is 100 pixels and all of the angles are 90 degrees." - courseC_artist_prog4_markdown_instruction: "*\"Oh no! Starla's pet alien - just flew away! Let's help the spacewoman!\"*\r\n\r\nFinish Starla's rocket - so she can chase her pet. \r\n(Each side of the triangle is 100 pixels long - and has 120 degree outer angles.)" - courseC_artist_prog5_markdown_instruction: "*\"Maybe we should make a tag for - each of our pets in case they get lost!\"*\r\n\r\nFinish this tag by drawing - a rectangle around the outside. \r\n(The long sides are 200 pixels each and - the short sides are each 100 pixels)" - courseC_artist_prog6_markdown_instruction: "*\"Now a tag for Belle!\"*\r\n\r\nDraw - this diamond with 200 pixel sides." - courseC_artist_prog7_markdown_instruction: "**Challenge:** This tag is a special - one! \r\n\r\nCan you figure out how to draw the outline? \r\n(The long side - is 150 pixels and each of the short sides are 75 pixels.)" - courseC_artist_prog8_markdown_instruction: "One more tag. This is a triangle - for Pi. \r\n(Each side is 150 pixels)" - courseC_collector_prog1_markdown_instruction: "**Free Play:** This is Laurel - the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag - blocks into the workspace and try to figure out how to get treasure. Get - at least one item to pass this level." - courseC_collector_prog2_markdown_instruction: "Move Laurel to the treasure, - then use `collect` to pick it up." - courseC_collector_prog3_markdown_instruction: "*\"Sequence matters!\"* \r\n\r\nThe - blocks you need are already in the workspace, but not connected. \r\nOrder - these blocks to collect the treasure and solve the puzzle." - courseC_collector_prog4_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe - blocks you need are already in the workspace, but not connected. \r\n\r\nPut - these blocks in order to collect all of the treasure and solve the puzzle." - courseC_collector_prog5_markdown_instruction: "*\"Help me collect each bit - of treasure!\"*\r\n\r\nThese blocks are in the wrong order. Can you fix them?" - courseC_collector_prog6_markdown_instruction: "*\"Help me collect all of the - treasure!\"*\r\n\r\nThese blocks are in the wrong order. Reorder them to collect - all of the treasure." - courseC_collector_prog7_markdown_instruction: "**Challenge:** *\"What is going - on here?\"*\r\n\r\nEven if we put these in the right order, there will still - be some missing. \r\nUse blocks from the toolbox to collect all of the treasure." - courseC_collector_prog8_markdown_instruction: "*\"Keep up the good work! Help - me collect all of the treasure.\"*" - courseC_collector_prog9_markdown_instruction: "*\"Let's get all of the treasure!\"*" - courseC_collector_progA_markdown_instruction: "Help Laurel collect all of the - treasure." - courseC_collector_progB_markdown_instruction: "You're almost done! \r\n\r\nCollect - as many coins as you can to finish the stage!" - courseC_harvester_loops1_markdown_instruction: "Loops can be used to repeat - more than moves. \r\n\r\nUse loops to collect all of the pumpkins." - courseC_harvester_loops10_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops11_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops2_markdown_instruction: "Can you combine two different - loops to move toward the pumpkins, then collect them all?" - courseC_harvester_loops3_markdown_instruction: "Collect all of the pumpkins." - courseC_harvester_loops4_markdown_instruction: "Now there is corn growing, - too!\r\n\r\nCollect all of the corn and all of the pumpkins." - courseC_harvester_loops5_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops6_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops7_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_harvester_loops8_markdown_instruction: "**Challenge:** Collect all - of the corn and all of the pumpkins.\r\n\r\nYou can complete this challenge - any way you want, but it will either take a lot of work or a lot of thinking!" - courseC_harvester_loops9_markdown_instruction: "Collect all of the corn and - all of the pumpkins." - courseC_maze_debugging1_markdown_instruction: "This code isn't quite right! \r\n\r\nFix - the code to help get Skrat get to the acorn." - courseC_maze_debugging3_markdown_instruction: "Something is not quite right. - \r\n\r\nRemove blocks to get Skrat to the acorn!" - courseC_maze_loops2_markdown_instruction: "Suddenly, a magical block appears! \r\nWith - the `repeat` block, you can loop code over and over.\r\n\r\nCan you get the - bird to the pig by creating a loop that uses only one `move forward` block - inside of a `repeat`?" - courseC_maze_loops2_predict1_markdown_instruction: "Suddenly, a magical block - appears! \r\nWith the `repeat` block, you can loop code over and over.\r\n\r\nCan - you get the bird to the pig by creating a loop that uses only one `move forward` - block inside of a `repeat`?" - courseC_maze_loops3_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nSolve - this puzzle by creating a loop!" - courseC_maze_loops4_markdown_instruction: "In this puzzle, two `repeat` loops - will help you get the bird to the pig with the fewest number of blocks!" - courseC_maze_loops5_markdown_instruction: "*\"Get me to the pig as quickly - as possible!\"*" - courseC_maze_loops6_markdown_instruction: "*\"This pig is ruffling my feathers!\"*\r\n\r\nLoops - even work with more than one block inside! Can you loop this sequence?" - courseC_maze_loops7_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nUse - what you learned in other puzzles!" - courseC_maze_loops8_markdown_instruction: "**Challenge:** Combine ideas from - the last few puzzles to complete this level." - courseC_maze_programming1_markdown_instruction: "For this puzzle, drag all - of the blocks together and click \"Run\" to watch it go!" - courseC_maze_programming2_markdown_instruction: "Drag an extra `move forward` - block out of the toolbox to finish your code." - courseC_maze_programming3_markdown_instruction: "*\"This pig is ruffling my - feathers.\"*\r\n\r\nThere is one extra block that is going to cause the bird - to crash. \r\nThrow it away by dragging it back to the toolbox." - courseC_maze_programming4_markdown_instruction: "*\"Trace the path and lead - me to the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" - courseC_maze_programming5_markdown_instruction: "*\"Follow this path to get - me to the pig!\"*\r\n\r\nAvoid the TNT." - courseC_maze_programming6_markdown_instruction: "*\"Keep calm and help me find - the bad pig. Otherwise I might get angry!\"*\r\n\r\nGet the bird to the pig - and avoid the TNT." - courseC_maze_programming7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** - This code has a lot of bugs. You'll need to remove some blocks and add others." - courseC_maze_programming8_markdown_instruction: "*\"Keep calm and help me find - the bad pig.\"*" - courseC_maze_programming8_predict1_markdown_instruction: "*\"Keep calm and - help me find the bad pig.\"*" - courseC_maze_programming9_markdown_instruction: "*\"Now, help me sneak up on - the pig any way you want to!\"*" - courseC_PlayLab_events8_markdown_instruction: "Can you have Waddles (actor - 1) say \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen - you're done, play the game to make that happen.\r\n\r\n![](https://images.code.org/a634f249021651f60a1acf37bf78d07d-image-1475342557950.gif)" - courseC_puppy_loops8_markdown_instruction: "**Challenge:** Combine ideas from - the last few puzzles to complete this level." - courseC_puppy_loops8courseC_maze_loops8_markdown_instruction: "**Challenge:** - Combine ideas from the last few puzzles to complete this level." - courseD_artist_binary1_markdown_instruction: "We've provided you with a grid - of \"pixels\" that you can walk through and make designs by turning on only - certain squares.\r\n\r\nUse the blocks below to have the artist draw \"01010101\" - in binary in the first row." - courseD_artist_binary2_markdown_instruction: "Here's a function that takes - a binary string of 1's and 0's and instructs the artist to follow them from - left to right, top to bottom. \r\n<hr/>\r\nThe artist will fill-in the squares - when it sees a 1 and ignore the square when it sees a 0. \r\n<hr/>\r\n**Run - this code to see how the artist uses binary to draw this pattern.**" - courseD_artist_functions10_markdown_instruction: "This time, use lines of 8 - hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the 6 - times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - courseD_artist_functions2_markdown_instruction: "Functions let you define new - blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a - function called `draw a square`. This time, use the `draw a square` function - to create the glasses. \r\n<hr/>\r\n\r\nThe squares are 75 pixels apart." - courseD_artist_functions3_markdown_instruction: "We will come back to functions - shortly. Let's take a break to practice making this star. \r\n\r\nYou can - make this drawing by adding a repeat block." - courseD_artist_functions4_markdown_instruction: "Now that you can draw a star, - try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels long\r\n- - Turn 45 degrees between branches\r\n- Jump 100 pixels between each star" - courseD_artist_functions5_markdown_instruction: "When is drawing three stars - harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw - only those three stars to finish this puzzle." - courseD_artist_functions6_markdown_instruction: "You are doing great! \r\n\r\nMake - this window by drawing a square, then turning 90 degrees before drawing another, - and so on." - courseD_artist_functions7_markdown_instruction: "Let's take the code for the - window and add it to function `draw a window`. Now, we can call the function - any time we need to draw a window without having to write the code again. - \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" - width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw - a window` and calling it five times. Watch out for the door!\r\n\r\n- The - top windows are 50 pixels away from each other. \r\n- The bottom windows - are 100 pixels below the top set." - courseD_artist_functions8_markdown_instruction: "**Challenge:** Create as many - functions as you think you need to make this drawing of 50 pixel squares." - courseD_artist_functions9_markdown_instruction: "Create this image using only - the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - courseD_artist_nestedLoops1a_markdown_instruction: "Now loop the triangle 6 - times. \r\n\r\nAfter each triangle, you'll need to turn 60 degrees before - drawing the next. " - courseD_artist_nestedLoops2_markdown_instruction: "This time, complete the - puzzle with the fewest number of blocks possible.\r\n\r\nAfter each triangle, - you'll need to turn 60 degrees before drawing the next.\r\nSee how much easier - this is with **nested loops**?" - courseD_artist_nestedLoops4_markdown_instruction: "Great! Do the same thing - with these circles. \r\n\r\n- Each circle is made by moving 1 pixel before - turning 1 degree, 360 times.\r\n- Each circle begins just 50 pixels from where - the last one ended" - courseD_artist_nestedLoops5_markdown_instruction: "What happens if you also - turn 90 degrees between circles?\r\n\r\n(To get this image, you still need - to jump 50 pixels between circles)" - courseD_artist_nestedLoops7_markdown_instruction: "Use what you've learned - to make this drawing.\r\n\r\n- The squares each have 100 pixel sides and 90 - degree angles\r\n- You will need to turn 60 degrees between each square" - courseD_artist_nestedLoops8_markdown_instruction: "Using what you have learned - in the last couple of puzzles, build this image from the beginning.\r\n\r\n- - Each hexagon has 50 pixel sides and 60 degree angles" - courseD_artist_nestedLoops9_markdown_instruction: "**Challenge:** Can you figure - out how to make a picture like this?\r\n\r\n- Both shapes have 50 pixel sides" - courseD_artist_nestedLoops9_predict1_markdown_instruction: "**Challenge:** - Can you figure out how to make a picture like this?\r\n\r\n- Both shapes have - 50 pixel sides" - courseD_artist_nestedLoopsFP_markdown_instruction: "Now it's your turn. Take - the skills you have learned and make something that you love!\r\n\r\nNeed - an idea? Try to make one of these:\r\n\r\n<img src=\"https://images.code.org/9257cbf61f238f5a749a949059731934-image-1478732674615.02.25.png\" - width=\"200px\"/><img src=\"https://images.code.org/31a85d4e5be5209240195d34b17a177b-image-1478732674613.32.53.png\" - width=\"200px\"/><img src=\"https://images.code.org/f654f1512860c6c8cf6795c961a8959c-image-1478732674616.02.58.png\" - width=\"200px\"/>\r\n" - courseD_artist_ramp11_markdown_instruction: "Great! Now let's make a square - using Artist! The blocks are a little different, but the idea is the same.\r\n<hr/>\r\nEach - side of the square has a length of 200 pixels, and you will need to turn 90 - degrees to make each angle." - courseD_artist_ramp12_markdown_instruction: "Use what you've learned to draw - this triangle inside of a square.\r\n<hr/>\r\nThe sides are each 200 pixels - long. You will need to turn 90 degrees to make the square and 120 degrees - to make the triangle." - courseD_bee_conditionals1_markdown_instruction: "*\"This cloud is blocking - my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. If there's - a flower, get nectar." - courseD_bee_conditionals10_markdown_instruction: "Conditionals can be helpful, - even when you know exactly what is in each spot!\r\n\r\nCollect all of the - nectar and make all of the honey." - courseD_bee_conditionals1_predict1_markdown_instruction: "*\"This cloud is - blocking my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. - If there's a flower, get nectar." - courseD_bee_conditionals2_markdown_instruction: "More clouds! \r\n\r\nCheck - underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - courseD_bee_conditionals3_markdown_instruction: "You can only collect nectar - from flowers, but you can check any space to see if there is a flower." - courseD_bee_conditionals4_markdown_instruction: "In this puzzle, we know that - every flower has exactly one nectar, but the flowers aren't spaced evenly.\r\n\r\nGet - all of the nectar using as few blocks as possible." - courseD_bee_conditionals6_markdown_instruction: "*\"Now I just want to make - honey.\"*\r\n\r\nSome of these clouds might have honeycombs under them. Be - sure to check if a honeycomb is hiding behind each cloud!" - courseD_bee_conditionals7_markdown_instruction: "Sometimes a cloud covers a - flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block to - collect nectar at flowers and make honey at honeycomb." - courseD_bee_conditionals7_predict2_markdown_instruction: "Sometimes a cloud - covers a flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` - block to collect nectar at flowers and make honey at honeycomb." - courseD_bee_conditionals8_markdown_instruction: "**Challenge:** There will - be either a flower or a honeycomb under each of those clouds!\r\n\r\nCollect - nectar if there is a flower.\r\nOtherwise, make honey (because there is a - honeycomb)." - courseD_bee_conditionals9_markdown_instruction: "Collect all of the nectar - or make all the honey. You can only collect nectar from flowers and make honey - from honeycombs. Check any space to see if there is a flower or honeycomb." - courseD_bee_debugging1_markdown_instruction: "*\"These blocks are really bugging - me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." - courseD_bee_debugging2_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix - the error(s) to collect all of the nectar." - courseD_bee_debugging3_markdown_instruction: "*\"These blocks are really bugging - me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of - the honey." - courseD_bee_debugging4_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix - the error(s) to make all of the honey." - courseD_bee_debugging5_markdown_instruction: "**Challenge:** *\"This puzzle - is making me loopy!\"*\r\n\r\nAll of the commands that you need are already - here...now use your debugging skills to figure out how to solve this puzzle." - courseD_bee_debugging6_markdown_instruction: "**Challenge:** Fix the errors - to collect all of the nectar and make all of the honey." - courseD_bee_debugging7_markdown_instruction: "*\"Such a sticky situation!\"*\r\n\r\nHelp - the bee find his mistakes." - courseD_bee_debugging8_markdown_instruction: "*\"So many lovely flowers!\"*\r\n\r\nHelp - the bee fix the code to get all the nectar." - courseD_bee_debugging9_markdown_instruction: "*\"It's nectar-topia!\"*\r\n\r\nHelp - the bee fix the code to get all the nectar." - courseD_bee_nestedLoops1_markdown_instruction: "*\"This is going to **BEE** - great!\"**\r\n\r\nHelp the bee collect all of the nectar." - courseD_bee_nestedLoops2_markdown_instruction: "This time, help the bee collect - all of the nectar using as few blocks as possible." - courseD_bee_nestedLoops2_predict1_markdown_instruction: "This time, help the - bee collect all of the nectar using as few blocks as possible." - courseD_bee_nestedLoops3_markdown_instruction: "*\"Can you BEE-lieve all of - these flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " - courseD_bee_nestedLoops5_markdown_instruction: "Collect all of the nectar from - each flower and make honey at the honeycomb. " - courseD_bee_nestedLoops6_markdown_instruction: "Make all of the nectar." - courseD_bee_nestedLoops7_markdown_instruction: "**Challenge:** Figure out how - to get all of the nectar using only the blocks available." - courseD_bee_nestedLoops8_markdown_instruction: "Collect all of the nectar from - each flower and make honey at the honeycomb. " - courseD_bee_nestedLoops9_markdown_instruction: "Make all of the honey." - courseD_bee_nestedLoops9_predict2_markdown_instruction: "Make all of the honey." - courseD_collector_ramp10_markdown_instruction: "Take the same path as before, - but this time collect all of the treasure as you find it.\r\n" - courseD_collector_ramp8_markdown_instruction: "This puzzle is a lot like the - last one, but now it stars Laurel the Adventurer!\r\n<hr/>\r\n\r\nTake the - same path as before, but this time, use a repeat loop to collect treasure - when you get to it.\r\n" - courseD_collector_ramp9_markdown_instruction: "Take the same path as before, - but this time collect all of the treasure as you find it.\r\n" - courseD_debugging_1_markdown_instruction: "*\"These blocks are really bugging - me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." - courseD_debugging_2_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix - the error(s) to collect all of the nectar." - courseD_debugging_3_markdown_instruction: "*\"These blocks are really bugging - me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of - the honey." - courseD_debugging_4_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix - the error(s) to make all of the honey." - courseD_debugging_5_markdown_instruction: "**Challenge:** *\"This puzzle is - making me loopy!\"*\r\n\r\nAll of the commands that you need are already here...now - use your debugging skills to figure out how to solve this puzzle." - courseD_debugging_6_markdown_instruction: "**Challenge:** Fix the errors to - collect all of the nectar and make all of the honey." - courseD_farmer_conditionals1_markdown_instruction: "*\"Hi, I'm a farmer. I - need your help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove - to the pile of dirt and use the `remove` block to remove it." - courseD_farmer_conditionals3_markdown_instruction: "*\"Move to the pile of - dirt and tell me how many shovelfuls to remove.\"*\r\n\r\nUse as few blocks - as possible to solve this puzzle." - courseD_farmer_conditionals4_markdown_instruction: "*\"I don't know how much - dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using - a `while` loop." - courseD_farmer_conditionals6_markdown_instruction: "Look at all of those holes! Each - one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop - to easily fill them all!" - courseD_farmer_conditionals8_markdown_instruction: "**Challenge:** Fill all - of these holes using as few blocks as possible. " - courseD_farmer_condLoops1_markdown_instruction: "*\"Corn you help me harvest - today?\"*\r\n\r\nUse conditionals to make sure that you pick all of the corn, - but don't disturb the stalks where nothing is growing yet." - courseD_farmer_condLoops2_markdown_instruction: "*\"Lettuce collect both crops - from this row!\"*\r\n\r\nHelp the farmer collect both corn and lettuce from - the field." - courseD_farmer_condLoops4_markdown_instruction: "*\"Gosh! Now the crops are - growing in clusters!\"* \r\n\r\nHelp the farmer pick all of the lettuce in - each cluster before moving on to the next bunch." - courseD_farmer_condLoops5_markdown_instruction: "*\"What a bountiful crop!\"*\r\n\r\nThis - field has clusters of corn, lettuce, and pumpkins all growing together. Can - you collect them all?" - courseD_farmer_condLoops6_markdown_instruction: "*\"Let's take this one step - further!\"*\r\n\r\nCan you figure out how to pick the pumpkin? Make sure - to collect all of the corn along the way!" - courseD_farmer_condLoops7_markdown_instruction: "**Challenge:** Collect all - of the corn and lettuce, then pick the pumpkin." - courseD_farmer_condLoops8_markdown_instruction: "Collect all of the corn and - lettuce, then pick the pumpkin." - courseD_farmer_condLoops9_markdown_instruction: "Collect all of the corn and - lettuce, then pick the pumpkin." - courseD_farmer_condLoops9_predict1_markdown_instruction: "Collect all of the - corn and lettuce, then pick the pumpkin." - courseD_farmer_while1_markdown_instruction: "*\"Hi, I'm a farmer. I need your - help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove - to the pile of dirt and use the `remove` block to remove it." - courseD_farmer_while3_markdown_instruction: "*\"Move to the pile of dirt and - tell me how many shovelfuls to remove.\"*\r\n\r\nUse as few blocks as possible - to solve this puzzle." - courseD_farmer_while4_markdown_instruction: "*\"I don't know how much dirt - is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using a - `while` loop." - courseD_farmer_while4_predict1_markdown_instruction: "*\"I don't know how - much dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile - using a `while` loop." - courseD_farmer_while6_markdown_instruction: "Look at all of those holes! Each - one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop - to easily fill them all!" - courseD_farmer_while8_markdown_instruction: "**Challenge:** Fill all of these - holes using as few blocks as possible. " - courseD_maze_nestedLoops3_markdown_instruction: "*\"Zombie hungry!\"*\r\n\r\nGet - the zombie to the sunflower using the fewest number of blocks possible." - courseD_maze_nestedLoops4_markdown_instruction: "Get the zombie to the sunflower - using the fewest blocks possible! " - courseD_maze_nestedLoops6_markdown_instruction: "*\"Must eat sunflower!\"*\r\n\r\nGet - the zombie to the sunflower using only the blocks available." - courseD_maze_ramp1_markdown_instruction: "For this puzzle, drag all of the - blocks together and click \"Run\" to watch it go!" - courseD_maze_ramp2_markdown_instruction: "Drag an extra `move forward` block - out of the toolbox to finish your code." - courseD_maze_ramp3_markdown_instruction: "*\"This pig is ruffling my feathers.\"*\r\n\r\nThere - is one extra block that is going to cause the bird to crash. \r\nThrow it - away by dragging it back to the toolbox." - courseD_maze_ramp4_markdown_instruction: "*\"Trace the path and lead me to - the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" - courseD_maze_ramp5_markdown_instruction: "*\"Follow this path to get me to - the pig!\"*\r\n\r\nAvoid the TNT." - courseD_maze_ramp6_markdown_instruction: "*\"Keep calm and help me find the - bad pig. Otherwise I might get angry!\"*\r\n\r\nWhen you have several blocks - in a row, try moving them inside of a `repeat` loop. This will do the same - thing with less code!" - courseD_maze_ramp7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** - Use what you've learned to get the bird to the pig!" - courseD_maze_until10_markdown_instruction: "Help the zombie get to the sunflower." - courseD_maze_until10_predict2_markdown_instruction: "Help the zombie get to - the sunflower." - courseD_maze_until2_markdown_instruction: "Now, use the `repeat until` loop - to do the same thing without specifying how many times to move forward and - turn." - courseD_maze_until4_markdown_instruction: "*\"Dear person. Me zombie. Me hungry. - Must... get... to sunflower...\"*\r\n\r\nCan you get the zombie to the sunflower - using only the blocks that are available?" - courseD_maze_until5_markdown_instruction: "Use the `if` block to help the zombie - decide when to turn, then get the zombie to the sunflower." - courseD_maze_until6_markdown_instruction: "Help the zombie get to the sunflower." - courseD_maze_until7_markdown_instruction: "Help the zombie get to the sunflower." - courseD_maze_until8_markdown_instruction: "Help the zombie get to the sunflower." - courseD_maze_until9_markdown_instruction: "**Challenge:** Avoid the chompers - and help the zombie get to the sunflower." - courseD_playLab_cond1_markdown_instruction: "To start our game, Pirate Pegleg - (actor 1) needs to be able to get around in all directions. Connect the - blocks to the correct events to get Pegleg moving.\r\n\r\nGet Pegleg to the - dragon to solve this puzzle." - courseD_playLab_cond2_markdown_instruction: "Time to add points! Give Pegleg - (actor 1) a point when he makes it to the dragon. " - courseD_playLab_cond3_markdown_instruction: "It's time to use what we've - learned about conditionals to make this game amazing. This challenge has two - parts:\r\n\r\n 1) Use a `repeat forever` loop to make the dragon (actor 2) - change between random emotions every second. \r\n \r\n 2) Add code so that - when Pegleg gets to the dragon, he gets two points *if* the dragon is happy. - Otherwise, he should get only one point added to his score." - courseD_playLab_cond4_markdown_instruction: "This is about to get interesting!\r\n\r\nAdd - some code so that the ninja (actor 3) starts chasing Pegleg as soon as the - game begins. End the game as a loss if the ninja catches him." - courseD_playLab_cond5_markdown_instruction: "Now we need a way to win.\r\n\r\nAdd - a `repeat forever` loop that continuously checks **if** the score is greater - than 5, then ends the game as a **win** when it is." - courseD_playLab_cond6_markdown_instruction: "Wow, this game is hard to win!\r\n\r\nLet's - customize this game to make it more fun. This challenge has three parts:\r\n<hr/>\r\n\r\n1) Slow - the ninja down before you set him to chase the pirate. \r\n\r\n2) Use a - `repeat forever` loop to check to see if the pirate is in the \"safe zone\" - beneath the line of octopuses (greater than 225 pixels down). If he is, set - the ninja to **flee** the pirate. Otherwise, set the ninja to **chase** the - pirate. \r\n\r\n3) We don't want the pirate to stay in the \"safe zone\" - too long! Add code to the `if` statement above so that if the pirate is in - the safe zone, the program will wait one second, then deduct a point as long - as he stays beneath the octopus line." - courseD_playLab_cond6cloneForTest_markdown_instruction: "Can we make this work?" - courseE_artist_concept1_markdown_instruction: "Recreate this image. \r\n\r\n- - The hexagons have sides of 50 pixels\r\n- The hexagons are 100 pixels apart\r\n- - The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." - courseE_artist_concept4_markdown_instruction: "Recreate this drawing using - 13 blocks or fewer." - courseE_artist_functions1_markdown_instruction: "*\"Me zombie artist. Me love - drawing!\"*\r\n\r\nHelp the zombie draw glasses using squares with sides of - 100 pixels. \r\nThe bridge between the glasses is 75 pixels long.\r\n\r\n" - courseE_artist_functions10_markdown_instruction: "This time, use lines of 8 - hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the side - 6 times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - courseE_artist_functions2_markdown_instruction: "Functions let you define new - blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a - function called `draw a square`. This time, use the `draw a square` function - to create the glasses. \r\n<hr/>\r\n\r\nThe squares are 75 pixels apart." - courseE_artist_functions3_markdown_instruction: "We will come back to functions - shortly. Let's take a break to practice making this star. \r\n\r\nYou can - make this drawing by adding a repeat block." - courseE_artist_functions4_markdown_instruction: "Now that you can draw a star, - try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels long\r\n- - Turn 45 degrees between branches\r\n- Jump 100 pixels between each star" - courseE_artist_functions5_markdown_instruction: "When is drawing three stars - harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw - only those three stars to finish this puzzle." - courseE_artist_functions6_markdown_instruction: "You are doing great! \r\n\r\nMake - this window by drawing a square, then turning 90 degrees before drawing another, - and so on." - courseE_artist_functions7_markdown_instruction: "Let's take the code for the - window and add it to function `draw a window`. Now, we can call the function - any time we need to draw a window without having to write the code again. - \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" - width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw - a window` and calling it five times. Watch out for the door!\r\n\r\n- The - top windows are 50 pixels away from each other. \r\n- The bottom windows - are 100 pixels below the top set." - courseE_artist_functions8_markdown_instruction: "**Challenge:** Did you know - that you can call functions from *inside* other functions?!\r\n\r\nCreate - as many functions as you think you need to make this drawing of 50 pixel squares." - courseE_artist_functions9_markdown_instruction: "Create this image using only - the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - courseE_artist_functions_predict1_markdown_instruction: "Here is a puzzle that - uses a function that we have defined. \r\n" - courseE_artist_ramp11_markdown_instruction: "Great! Now let's make a square - using Artist! The blocks are a little different, but the idea is the same.\r\n<hr/>\r\nEach - side of the square has a length of 200 pixels, and you will need to turn 90 - degrees to make each angle." - courseE_artist_ramp12_markdown_instruction: "Use what you've learned to draw - this triangle inside of a square.\r\n<hr/>\r\nThe sides are each 200 pixels - long. You will need to turn 90 degrees to make the square and 120 degrees - to make the triangle." - courseE_bee_concept1_markdown_instruction: "*\"Can you BEE-lieve all of these - flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " - courseE_bee_concept5_markdown_instruction: "Can you help the bee collect the - nectar from the flowers? \r\n\r\nYou can only collect nectar from flowers, - but you can check any space to see if there is a flower." - courseE_bee_functions10_markdown_instruction: "*\"Show me the HONEY!\"*\r\n\r\nSolve - this function by creating a function to turn, move forward and make all of - the honey, then return the bee to where it started and turn back." - courseE_bee_functions2_markdown_instruction: "Functions are blocks of code - that perform a task. \r\n\r\nUse the `get 2 nectar` function to collect the - nectar from each flower." - courseE_bee_functions3_markdown_instruction: "Build the `get 5` function to - use in this puzzle." - courseE_bee_functions4_markdown_instruction: "The `move and get nectar` function - turns the bee, collects nectar, and then returns the bee to where it started. \r\n\r\nUse - the `move and get nectar` function to collect all of the nectar." - courseE_bee_functions8_markdown_instruction: "**Challenge:** These flowers - can have a different amount of nectar each time you run the puzzle. \r\n\r\nCreate - a function that collects all of the nectar from each flower." - courseE_collector_ramp10_markdown_instruction: "Take the same path as before, - but this time collect all of the treasure as you find it.\r\n" - courseE_collector_ramp8_markdown_instruction: "This puzzle is a lot like the - last one, but now it stars Laurel the Adventurer!\r\n<hr/>\r\n\r\nTake the - same path as before, but this time, use a repeat loop to collect treasure - when you get to it.\r\n" - courseE_collector_ramp9_markdown_instruction: "Take the same path as before, - but this time collect all of the treasure as you find it.\r\n" - courseE_farmer_concept4_markdown_instruction: "Now let's go one level deeper! - We've nested that whole block of code into another loop, but you need to - get the artist back in place to draw the next line. Which of these code blocks - can you place at the end of the outermost loop to draw the whole grid?" - courseE_farmer_functions1_markdown_instruction: "*\"Have we met before? I'm - the farmer!\"*\r\n\r\nHelp the farmer get to the pumpkin and pick it." - courseE_farmer_functions10b_markdown_instruction: "Figure out which function - to use and which one to delete, then solve this puzzle!" - courseE_farmer_functions11_predict_markdown_instruction: "Figure out which - function to use and which one to delete, then solve this puzzle!" - courseE_farmer_functions1a_markdown_instruction: "*\"Oooh, veggies are cropping - up everywhere!\"*\r\n\r\nNow help the farmer pick the corn, lettuce, **and** - pumpkin." - courseE_farmer_functions2a_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nWe're - going to check lots of squares for crops in the next few puzzles. Let's - move everything into a function to make it easier." - courseE_farmer_functions2aALT_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nWe're - going to check lots of squares for crops in the next few puzzles. Let's - move everything into a function to make it easier." - courseE_farmer_functions2b_markdown_instruction: "Help the farmer pick the - corn, lettuce, and pumpkin." - courseE_farmer_functions3b_markdown_instruction: "*\"Oooh, veggies are cropping - up everywhere!\"*\r\n\r\nNow help the farmer pick the corn, lettuce, **and** - pumpkin." - courseE_farmer_functions3c_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nIt - seems silly to write that much code twice. Which set of blocks helps the - farmer check for produce and pick it when it is available? Drag that code - into a function, then call your function from inside the `while path ahead` - loops (after the `move forward` block)." - courseE_farmer_functions4b_markdown_instruction: "Use your new function to - solve this puzzle." - courseE_farmer_functions5b_markdown_instruction: "*\"They're multiplying!\"*\r\n\r\nThe - crops are now growing in clusters. Add some new `while` loops to your function - to make sure you get all of the produce." - courseE_farmer_functions5c_markdown_instruction: "Your function will come in - handy here." - courseE_farmer_functions6b_markdown_instruction: "Pick all of the produce." - courseE_farmer_functions6c_markdown_instruction: "What do you need to add this - program to collect all of the produce?" - courseE_farmer_functions7b_markdown_instruction: "Make a second function that - lets the farmer get all of the produce down a path, then brings her back to - where she began." - courseE_farmer_functions8b_markdown_instruction: "**Challenge:** Get the farmer - to the pumpkin and collect all of the lettuce and corn along the way. " - courseE_farmer_functions9b_markdown_instruction: "Collect all of the produce - to finish this stage." - courseE_maze_ramp1_markdown_instruction: "For this puzzle, drag all of the - blocks together and click \"Run\" to watch it go!" - courseE_maze_ramp2_markdown_instruction: "Drag an extra `move forward` block - out of the toolbox to finish your code." - courseE_maze_ramp3_markdown_instruction: "*\"This pig is ruffling my feathers.\"*\r\n\r\nThere - is one extra block that is going to cause the bird to crash. \r\nThrow it - away by dragging it back to the toolbox." - courseE_maze_ramp4_markdown_instruction: "*\"Trace the path and lead me to - the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" - courseE_maze_ramp5_markdown_instruction: "*\"Follow this path to get me to - the pig!\"*\r\n\r\nAvoid the TNT." - courseE_maze_ramp6_markdown_instruction: "*\"Keep calm and help me find the - bad pig. Otherwise I might get angry!\"*\r\n\r\nWhen you have several blocks - in a row, try moving them inside of a `repeat` loop. This will do the same - thing with less code!" - courseE_maze_ramp7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** - Use what you've learned to get the bird to the pig!" - courseE_playLab_scaffold1_markdown_instruction: "It is amazing how much you - have learned! Let's put it together to make a game, step by step. \r\n\r\nWe've - put these blocks in your tool box. Choose a random background, then pick an - actor to be your game's hero.\r\n\r\n![](https://images.code.org/745931ce34b3c47de19c36009e4a9c48-image-1471464938470.14.47 - PM.png)" - courseE_playLab_scaffold2_markdown_instruction: "Now let's get things moving! - \r\n\r\nUse event handlers and actions to make your hero move. Get the targets - to complete this puzzle.\r\n\r\n<hr/>\r\n\r\nWe've added these blocks to - your tool box to help you.\r\n\r\n![](https://images.code.org/6216c0559cfae16005ffb53e6532473b-image-1471472994205.23.54%20PM.png)" - courseE_playLab_scaffold3_markdown_instruction: "Now that your game has a hero, - add two or more additional actors to your game and make them move. \r\n\r\nDo - you want to have an actor patrol back and forth or chase your main character? - \r\nTry using a these new blocks to bring your game to life!\r\n\r\n<img src=\"https://images.code.org/8f82d0e0ceab3f4fba725800cb43f94d-image-1484023674541.46.14.png\" - width=\"300px\"/>" - courseE_playLab_scaffold4_markdown_instruction: "Getting the actors moving - is a great step, but we need to do more to make this feel like a real game. - A simple way to do this is to add or remove points when actors collide with - things. Find some interesting ways to change the score in your game.\r\n<hr/>\r\n\r\n*Don't - expect to get this right on the first try. Keep testing your game as you code. - You'll not only want a game that works, but one that is fun to play!*\r\n<hr/>\r\nWe've - added these blocks to your toolbox:\r\n\r\n![](https://images.code.org/ad0df96aa91c89e3d903dce2fe19517f-image-1472070105051.20.55 - PM.png)" - courseE_playLab_scaffold5_markdown_instruction: "Great job! You have all the - basic components of a working game. Now spend some time making sure the game - works the way you want. Try including a way to win or lose your game.\r\n<hr/>\r\n*Don't - forget: Keep testing your game as you code. You'll not only want a game that - works, but one that is fun to play!*\r\n<hr/>\r\nYour toolbox has been re-organized - to make it easier to find what you need. We've also added these blocks:\r\n\r\n![](https://images.code.org/59b92b4c288bd5fc0c3be355c968f3d1-image-1472074578380.27.57 - PM.png)" - courseE_playLab_scaffold6_markdown_instruction: "You've finished! Now you - can play your game or share it with your friends and classmates!" - courseF_artist_for1_markdown_instruction: "**Free Play:** Experiment with the - `for` loop and the `counter` variable. \r\n\r\nDrag out a few blocks and - see what happens. \r\n" - courseF_artist_for10_markdown_instruction: "**Free Play:** Try using the `counter` - variable with other drawing elements to make magical images like this one.\r\n\r\n<img - src=\"https://images.code.org/7910db8adf2ec7e4c5fdad0101c68368-image-1475911466143.24.03.png\" - width=\"400px\"/>" - courseF_artist_for2_markdown_instruction: "Use a `repeat` loops inside of a - `for` loop to create this stack of triangles that goes from 50 pixel to 100 - pixel sides." - courseF_artist_for3_markdown_instruction: "Create these triangles that go from - 20 pixel sides to 200 pixel sides, where each triangle is 20 pixels larger - than the last." - courseF_artist_for5_markdown_instruction: "Just one little change to the code - from the last image can create this drawing. Can you figure out what that - change is?\r\n<hr/>\r\nHint: You need to remove something!" - courseF_artist_for6_markdown_instruction: "If you turn a little bit more or - less than you normally would for a shape, it creates a neat effect.\r\n\r\nTry - using some of the code from the last level, but turning 89 degrees to create - this twisted square spiral." - courseF_artist_for7_markdown_instruction: "Make three small changes to the - code from the last level to get this! " - courseF_artist_for9_markdown_instruction: "Use the counter inside the `set - alpha` block to get this faded center. \r\n(This hexagon pattern was made - using a 60 degree turn.)" - courseF_artist_fwp1_markdown_instruction: "Today, we're going to try out a - powerful function editor. See if you can figure out how to edit the `draw - a square` function to find the bugs." - courseF_artist_fwp2_markdown_instruction: "Edit the function to accept a parameter - called `length`. \r\n\r\nThe sides of each square should be 25 pixels larger - than the last. The first square has 25 pixel sides. Replace the '???' with - the correct values to draw the picture." - courseF_artist_fwp2_predict1_markdown_instruction: "Edit the function to accept - a parameter called `length`. \r\n\r\nThe sides of each square should be 25 - pixels larger than the last. The first square has 25 pixel sides. Replace - the '???' with the correct values to draw the picture." - courseF_artist_fwp3_markdown_instruction: "Now try creating the function from - scratch! \r\n\r\nCreate a function called `draw a square` and use it to outline - these four boxes. \r\nMake sure to add a parameter for `length`!\r\n\r\n<hr/>\r\nStarting - from the upper right, the box widths are 50, 100, 150, and 200." - courseF_artist_fwp4_markdown_instruction: "Great job! Now edit this function - to add a parameter for the number of sides in your polygon.\r\n\r\nThe sides - of all the shapes are 100 pixels long." - courseF_artist_fwp5_markdown_instruction: "Use the function from the last puzzle - to draw this series of shapes. \r\n\r\n\r\nThe triangle has 21 pixel sides, - and the sides in each following shape are 7 pixels longer than the last. \r\nUse - the `multiplication`block to make this all happen with just one function call.\r\n<hr/>\r\nThe - `multipication` block looks like this ![](https://images.code.org/55e293447c6b26bbbcf29cda2036706b-image-1481322763779.png)\r\n\r\n" - courseF_artist_fwp6_markdown_instruction: "**Challenge:** Edit `draw a spiral - edge` to use `length` and `sides` parameters, then recreate these shapes.\r\n\r\n- - The square goes from 3 pixels to 90 pixels.\r\n- The hexagon goes from 3 pixels - to 100 pixels.\r\n- The triangle goes from 3 pixels to 105 pixels." - courseF_artist_fwp7_markdown_instruction: "Finish off the `draw a spiral edge` - function to also ask for a minimum length for the center of the spiral.\r\n\r\n- - The smallest side in the center of this square is 50 pixels long\r\n- The - longest side at the outside of this spiral is 200 pixels long\r\n" - courseF_artist_fwp8_markdown_instruction: "Can you figure out how to make this - drawing using the function that you just created?\r\n\r\n- The red spiral - goes from 50 to 200 pixels\r\n- The blue spiral goes from 25 to 125 pixels\r\n- - The green spiral goes from 100 to 300 pixels\r\n" - courseF_artist_fwp9_markdown_instruction: "**Freeplay:** Below there are functions - you've written, and more for you to play with. Play with the pen width to - see how different your drawings look!" - courseF_artist_variables10_markdown_instruction: "Here's your code from the - last puzzle. Try editing the variable in other ways. \r\n- What happens - if you start out with `length` less than 150? \r\n- What if you multiply - your variable by 1.25 each time through?\r\n- What will your code do if you - turn 119 degrees?" - courseF_artist_variables2_markdown_instruction: "Now use another loop to draw - three of those triangles right next to each other. \r\n\r\nYou can nest - the code from your last puzzle inside." - courseF_artist_variables3_markdown_instruction: "Before things get tricky, - can you move the length of 50 into a variable so we can use it in the next - few puzzles? \r\n<br/>\r\n\r\n<img src=\"https://images.code.org/e6eac1f6aeb68a9a7584516e28663c14-image-1477533059853.gif\" - width=\"65%\"/>" - courseF_artist_variables4_markdown_instruction: "Now, use the `length` variable - to have the artist jump forward and down by `length` pixels between triangles." - courseF_artist_variables6_markdown_instruction: "**OOPS!** \r\n\r\nWe actually - need the triangles to be 60 pixels wide, with 60 pixel jumps. \r\n\r\nAren't - you glad you're using a variable?" - courseF_artist_variables6a_markdown_instruction: "Use what you've learned - to build this design where the squares have 80 pixel sides and the artist - jumps 80 pixels over and down between each one." - courseF_artist_variables7_markdown_instruction: "Let's start this section - by drawing a triangle with 150 pixels sides. \r\n\r\nBe sure to use the `length` - variable and a repeat loop." - courseF_artist_variables8_markdown_instruction: "Rebuild the triangle code - from the last puzzle, but this time use the `set length to` block to reset - the `length` variable to `length`+10 at the end of each loop iteration.\r\n\r\n![](https://images.code.org/6525bebee31ee15b84a48761b2866f53-image-1477531948829.31.37.png)\r\n\r\nThe - length of the first side of the triangle is 150 pixels." - courseF_artist_variables9_markdown_instruction: "Time to make some art! \r\n\r\nSee - what happens when you repeat the code from the last puzzle **30** times instead - of only 3!\r\n\r\nFeel free to make your lines any color or pattern for some - extra zest." - courseF_artist_variables_10_markdown_instruction: "Here's your code from the - last puzzle. Try editing the variable in other ways. \r\n- What happens - if you start out with `length` less than 150? \r\n- What if you multiply - your variable by 1.25 each time through?\r\n- What will your code do if you - turn 119 degrees?" - courseF_artist_variables_2_markdown_instruction: "Now use another loop to draw - three of those triangles right next to each other. \r\n\r\nYou can nest - the code from your last puzzle inside." - courseF_artist_variables_3_markdown_instruction: "Before things get tricky, - can you move the length of 50 into a variable so we can use it in the next - few puzzles? \r\n<br/>\r\n\r\n<img src=\"https://images.code.org/e6eac1f6aeb68a9a7584516e28663c14-image-1477533059853.gif\" - width=\"65%\"/>" - courseF_artist_variables_4_markdown_instruction: "Now, use the `length` variable - to have the artist jump forward and down by `length` pixels between triangles." - courseF_artist_variables_5_markdown_instruction: "Add another set of loops - at the end of your code to add three more triangles. This time, move forward - and up!" - courseF_artist_variables_6_markdown_instruction: "OOPS! We actually need the - triangles to be 60 pixels wide, with 60 pixel jumps. \r\nAren't you glad - you're using a variable?" - courseF_artist_variables_6a_markdown_instruction: "Use what you've learned - to build this design where the squares have 80 pixel sides and the artist - jumps 80 pixels over and down between each one." - courseF_artist_variables_7_markdown_instruction: "Let's start this section - by drawing a triangle with 150 pixels sides. \r\n\r\nBe sure to use the `length` - variable and a repeat loop." - courseF_artist_variables_8_markdown_instruction: "Rebuild the triangle code - from the last puzzle, but this time use the `set length to` block to reset - the `length` variable to `length`+10 at the end of each loop iteration.\r\n\r\n![](https://images.code.org/6525bebee31ee15b84a48761b2866f53-image-1477531948829.31.37.png)" - courseF_artist_variables_9_markdown_instruction: "Time to make some art! \r\nSee - what happens when you repeat the code from the last puzzle 30 times instead - of only 3!\r\n\r\nFeel free to make your lines any color or pattern for some - extra zest." - courseF_artist_variables_FP_markdown_instruction: "**Freeplay:** Take what - you've learned and make your own drawing. \r\n\r\nHow can you use variables - with squares, pentagons, or hexagons?" - courseF_artist_variablesFP_markdown_instruction: "**Freeplay:** Take what you've - learned and make your own drawing. \r\n\r\nHow can you use variables with - squares, pentagons, or hexagons?" - courseF_bee_for10_markdown_instruction: "**Challenge:** Take what you've learned - about `for` loops and try to solve this problem. \r\n\r\nRemember: You may - have to run through solutions multiple times before you figure out all of - the steps.\r\n" - courseF_bee_for11_markdown_instruction: "If your loop is counting down, the - increment is **subtracted** from your counter variable each time through. - \r\n\r\nWhat should your increment be to collect 15, then 12, then 9, 6, 3 - nectar?" - courseF_bee_for2_markdown_instruction: "Write the code to help the bee collect - all of the nectar.\r\n\r\nYou will need lots of blocks for this challenge, - but we'll learn an easier way in the next puzzle." - courseF_bee_for3_markdown_instruction: "Ah, the `for` loop makes this much - easier! \r\n\r\nTry this puzzle using the `for` loop and the `counter` variable - to see how much shorter your code becomes." - courseF_bee_for6_markdown_instruction: "You can also use a `for` loop to count - down. \r\n\r\nTry gathering this nectar by counting down from **5** to **1** - by **1**." - courseF_bee_for7_markdown_instruction: "The last number in your `for` loop - is called the **\"increment\"**. Each time the loop is run, the counter variable - changes by the value of the **increment**.\r\n\r\nTry collecting these flowers - using an **increment** of 2." - courseF_bee_for8_markdown_instruction: "You've got this! \r\n\r\nWhat should - your **increment** be to collect 3, 6, 9, 12, 15 nectar?\r\n\r\n" - courseF_bee_for9_markdown_instruction: "Now, let's combine the `counter` variable - with a `math` block! \r\n\r\nHow can you use the `counter` variable to navigate - this garden with the fewest number of blocks possible?" - courseF_bee_fwp1_markdown_instruction: "Check beneath the clouds to see if - the flowers have any nectar." - courseF_bee_fwp2_markdown_instruction: "Here's some code that solves the last - puzzle. \r\nLet's pull it into a function, then call the function to check - this row for nectar. \r\n<hr/>\r\nThis may seem like a strange step now, - but it will be really helpful soon!" - courseF_bee_fwp3_markdown_instruction: "Time to put the function to the test! - \r\n\r\nLet's see if it makes collecting these three rows of nectar any easier." - courseF_bee_fwp4_markdown_instruction: "*\"How is your function holding up?\"* \r\n\r\nWe - need to make some adjustments here. Click \"edit\" to add a `length` parameter - to the function so that it will still work when the row is a different length." - courseF_bee_fwp5_markdown_instruction: "*\"You're doing great so far!\"*\r\n\r\nLet's - use this function to collect the nectar." - courseF_bee_fwp6_markdown_instruction: "You can make code shorter and more - efficient when you combine functions with other programming elements. \r\n<hr/>\r\nWhat - blocks can you use with your function to build a short and sweet solution - to this puzzle?" - courseF_bee_fwp7_markdown_instruction: "**Challenge:** Something looks a little - different. Modify your function to make honey as well." - courseF_playlab_variables0_markdown_instruction: "This is Pirate Pegleg. He's - awfully hard to understand these days! \r\n\r\nDecode his speech by changing - these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" - should be \"e\"\r\n\r\n" - courseF_playlab_variables1_markdown_instruction: "This is Pirate Pegleg. He's - awfully hard to understand these days! \r\n\r\nDecode his speech by changing - these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" - should be \"e\"\r\n\r\n" - courseF_playlab_variables1a_markdown_instruction: "Variables can be used to - store text that you want to use later. \r\n\r\nHave Kiki, the soccer player, scream - \"Goal!\" by assigning that text to the `shout` variable." - courseF_playlab_variables2_markdown_instruction: "Now, decode Pirate Pegleg's - speech by changing the value of the variables in just two places! \r\n- - \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" - courseF_playlab_variables2a_markdown_instruction: "Now, decode Pirate Pegleg's - speech by changing the value of the variables in just two places! \r\n- - \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" - courseF_playlab_variables2b_markdown_instruction: "We can make sentences more - interesting by mixing pieces of text with variables.\r\n\r\nInsert the variable - `color` into the middle of a sentence by putting it into the empty slot in - the `join` block." - courseF_playlab_variables3_markdown_instruction: "Great! Now that you understand - how to have a character use a variable to speak, we can introduce the `ask` - block. \r\n\r\nThe `ask` block will automatically store whatever the user - answers into the variable of your choice. \r\n\r\nRun this program and enter - something for Pegleg to say.\r\n\r\n" - courseF_playlab_variables3b_markdown_instruction: "Help Kiki have a conversation - with Brian by using the variable `A1` in all of the places where age `12` - should be used. " - courseF_playlab_variables4_markdown_instruction: "Now we're going to join - a variable to the beginning of Pegleg's next sentence using the `create text - with` block. \r\n\r\nCan you find the correct variable in the toolbox to fill - in the slot?\r\n\r\n" - courseF_playlab_variables4b_markdown_instruction: "Now, Pirate Pegleg has some - questions for Brian.\r\n\r\nThis code uses an `ask` block, so you can type - Brian's answers after you click \"Run\". \r\n\r\nPut the variables in the - correct places to create this conversation." - courseF_playlab_variables5_markdown_instruction: "Now we're going to add a - variable into the middle of Pegleg's sentence using more than one `create - text with` block. \r\n\r\nHere is how you link `create text with` blocks together - to form longer sentences:\r\n\r\n![](https://images.code.org/1c9bdc9e73d60b5ed053c3c4e9e1dcd4-image-1476993588379.gif)" - courseF_playlab_variables5b_markdown_instruction: "Pirate Pegleg is going to - ask **you** some questions.\r\n\r\nPut all of the variables in the correct - place so that his story makes sense." - courseF_playlab_variables6b_markdown_instruction: "You cannot fit much text - in an actor's speech bubble. Let's try building some text using the `show - title screen` block.\r\n\r\nWe have provided some starter questions and variables - for you. Join them together and put them in the title screen to make a fun - story." - courseF_playlab_variables7b_markdown_instruction: "Time to make your own project! \r\n\r\nCreate - some questions and weave the answers together into your very own story." - courseF_playlab_variables8b_markdown_instruction: "Use what you've learned - to create an improv scene between the actors.\r\n\r\n**Improv:** *A scene - that actors make up on stage using information from the audience.*" - Crack a Caesar Cipher_markdown_instruction: "# Crack a Caesar cipher!\r\n\r\nThis - tool lets you play with text and do Caesar ciphers. You can use this to either - encrypt a message or decrypt it.\r\n\r\n# Do this\r\n- Load a **Sample message** - from the message dropdown. This will load a message that has been encrypted - with a Caesar cipher.\r\n\r\n![](https://images.code.org/347139486c8c729bf3c6e72ce67da878-image-1476286380409.gif)\r\n\r\n- - Using the buttons in the Caesar substitution tab, you can shift the alphabet - forwards or backwards to try to unscramble the message.\r\n\r\n![](https://images.code.org/ef9ebc16d2f1442dc46fba9bd48b5d43-image-1476285966821.gif)\r\n\r\nSee - how long it takes you to crack the cipher! Is this a good method of encrypting - secret data?\r\n\r\n<img src=\"http://code.org/api/hour/begin_encryption.png\">\r\n\r\n" - Crack Random Substitution_markdown_instruction: "# Break a random substitution - cipher!\r\n\r\nThis version of the tool gives you more information about the - encrypted text and more options for how to try out different substitutions.\r\n\r\n### - Different ways to analyze text\r\n- Play with some of the sorting options - available in the Random substitution cipher tab to get different views on - the letter frequencies in the input text as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\n### - Different ways to substitute\r\n- To substitute a letter you can drag a blue - letter of the alphabet directly underneath the orange letter you want changed - in the original ciphertext.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n### - Play. Always play.\r\n- There are other ways to analyze and substitute characters - that you can find by clicking on the buttons and trying out whatever you like.\r\n- - Remember: you can't break it :)\r\n\r\nSee how long it takes you to crack - the cipher! Is this a good method of encrypting secret data?\r\n\r\n<img src=\"http://code.org/api/hour/finish_encryption.png\">" - CSD - for loop - on off_markdown_instruction: "# For Loops with Color LEDs\r\n\r\nFor - loops can make doing something to all the `colorLed`s easier. \r\n\r\n**Starter - Program:** There are two buttons one to turn all the `colorLeds` on and one - to turn them all off. \r\n\r\nCan you fill in the functions for each of these - task using a for loop to write your algorithm." - CSD - Predict - Array Length List Printing_markdown_instruction: "# For Loop - - Using List Length in For Loop\r\n\r\nOne of the most common ways that for - loops are used is with lists. In this example the condition is dependent on - list. \r\n\r\nWhat will this print in the console?" - CSD - Predict List Accessing_markdown_instruction: "# Predict\r\n\r\nThe code - below has 4 things it will log to the console. What do you think will print - in the console as a result of this code?\r\n" - CSD For Loops - Check For Understanding_markdown_instruction: "# Check In\r\n\r\nIn - the box below explain the 3 different parts of the for loop. Why is each important?\r\n" - CSD Hackathon Pt 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe - blocks you've been provided are those that a student in CS Discoveries would - likely have available after a week or so of using Game Lab. No sprites yet, - but you've **just been introduced to some powerful programming constructs - like generating random numbers, storing values in a variable, and looping.** - You'll also be pretty familiar with the drawing commands at this point.\r\n\r\n# - Do This\r\n\r\n* Using only the tools provided to you, **make something awesome!!**\r\n* - The likely project at this point would be an **animated card** but feel free - to go other directions if you like.\r\n* **Avoid complex variable arithmetic** - if you can. You \"don't know it\" yet.\r\n* **Avoid referencing the iterator - in your for loops**. At this point it's just a repeat loop." - CSD Hackathon Pt 2_markdown_instruction: "# MS Hackathon: Sprites and Interactivity\r\n\r\nYou - now can **create sprites, add images, manipulate their properties, and perform - simple variable arithmetic to update their values (e.g. `sprite.scale = sprite.scale - + 1;`)**. You've also been introduced to conditional statements and know - how to use them to get some interactive behavior with the mouse and keyboard.\r\n\r\n# - Do This\r\n\r\n* Using only the tools provided to you **make something awesome!**\r\n* - The likely target project here might be a **simple game** or **interactive - visualization**.\r\n* You don't yet know about **groups, loops, collisions**, - or more magical properties like **velocity or rotationSpeed**\r\n\r\n**These - commands are not in the block palette but feel free to use**\r\n\r\n* `mySprite.mouseActive - = true;` will make your sprite track mouse events\r\n* `mySprite.mouseIsOver` - and `mySprite.mouseIsPressed` are booleans you can now use to sense mouse-to-sprite - interactions.\r\n\r\n**To add sprites to images follow the pattern below**\r\n\r\n```\r\nvar - spriteImage, sprite;\r\n\r\n//You'll need to create a preload function to - load the image.\r\nfunction preload(){\t\t\t\r\n spriteImage = loadImage(\"imageURL\");\r\n}\r\n\r\n//Create - your sprite and add the image\r\nfunction setup(){\r\n sprite = createSprite(200,200,10,10);\r\n sprite.addImage(\"someName\", - spriteImage);\r\n}\r\n\r\n//Draw your sprites.\r\nfunction draw(){\r\n\tbackground(255,255,255);\r\n\tdrawSprites();\r\n}\r\n```" - CSD Hackathon Week 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe - blocks you've been provided are those that a student in CS Discoveries would - likely have available after a week or so of using Game Lab. No sprites yet, - but you've **just been introduced to some powerful programming constructs - like generating random numbers, storing values in a variable, and looping.** - You'll also be pretty familiar with the drawing commands at this point.\r\n\r\n# - Do This\r\n\r\n* Using only the tools provided to you, **make something awesome!!**\r\n* - The likely project at this point would be an **animated card** but feel free - to go other directions if you like.\r\n* **Avoid complex variable arithmetic** - if you can. You \"don't know it\" yet.\r\n* **Avoid referencing the iterator - in your for loops**. At this point it's just a repeat loop." - CSD Hackathon Week 2_markdown_instruction: "# MS Hackathon: Sprites and Interactivity\r\n\r\nYou - now can **create sprites, add images, manipulate their properties, and perform - simple variable arithmetic to update their values (e.g. `sprite.scale = sprite.scale - + 1;`)**. You've also been introduced to conditional statements and know - how to use them to get some interactive behavior with the mouse and keyboard.\r\n\r\n# - Do This\r\n\r\n* Using only the tools provided to you **make something awesome!**\r\n* - The likely target project here might be a **simple game** or **interactive - visualization**.\r\n* You don't yet know about **groups, loops, collisions**, - or more magical properties like **velocity or rotationSpeed**\r\n\r\n**These - commands are not in the block palette but feel free to use**\r\n\r\n* `mySprite.mouseActive - = true;` will make your sprite track mouse events\r\n* `mySprite.mouseIsOver` - and `mySprite.mouseIsPressed` are booleans you can now use to sense mouse-to-sprite - interactions.\r\n\r\n**To add sprites to images follow the pattern below**\r\n\r\n```\r\nvar - spriteImage, sprite;\r\n\r\n//You'll need to create a preload function to - load the image.\r\nfunction preload(){\t\t\t\r\n spriteImage = loadImage(\"imageURL\");\r\n}\r\n\r\n//Create - your sprite and add the image\r\nfunction setup(){\r\n sprite = createSprite(200,200,10,10);\r\n sprite.addImage(\"someName\", - spriteImage);\r\n}\r\n\r\n//Draw your sprites.\r\nfunction draw(){\r\n\tbackground(255,255,255);\r\n\tdrawSprites();\r\n}\r\n```" - CSD U1 - Image Filter Demo show Binary_markdown_instruction: "# Oh Noes\r\nThis - tree should be green, but it's blue instead. Can you use the filter blocks - to change all of the blue pixels to green?" - CSD U1 - Image Filter Demo_markdown_instruction: "# Oh Noes\r\nThis tree should - be green, but it's blue instead. Can you use the filter blocks to change - all of the blue pixels to green?" - CSD U1 - PixFilter 1x1 Filter_markdown_instruction: "# Filtering Images\r\nIf - you've ever used Instragram you've probably encountered an image filter. - Image filters read in each pixel, process it in some way, and the return the - filtered pixel. In this tool we're going to start by filtering just a single - pixel before moving on to a full image.\r\n\r\nYou’ll notice there are three - drop downs under the picture. A red replace, a green replace, and a blue replace. - Next to it are drop downs for the colors. How many bits are we working with? - Yes, we’re working with 3. We also learned that the bits control the colors. - First bit controls R, second bit controls G, third bit controls B.\r\n\r\n\r\n# - Do This\r\nTry changing the color drop downs next to replace. Based on how - the bits change, can you formulate what replace is doing? Talk to your partner - and see if you can figure it out.\r\n\r\n" - CSD U1 - PixFilter 1x1 intro_markdown_instruction: "# 3 Bit Colors\r\nEach - pixel is a square on a screen that emits light. Each pixel can have a certain - number of bits assigned to it, and bits per pixel determine the colors that - can be rendered.\r\n\r\nIn this tool we're using 3 bits to define the one - large black pixel. The first bit affects the red tint. The second bit affects - the green tint. The third bit affects the blue tint.\r\n\r\n# Do This\r\n\r\n* - Click the \"Run\" button to start the widget\r\n* Click on the light bulbs - to turn on or off each color and see what happens to your pixel\r\n* See how - many different colors you can create with just three bits\r\n* Write down - the binary associated with each color you come up with\r\n" - CSD U1 - PixFilter Filter Intro_markdown_instruction: "# Filtering Pixels\r\nIf - you've ever used Instagram you've probably encountered an image filter. - Image filters read in each pixel, process it in some way, and the return the - filtered pixel. In this tool we're going to start by filtering just a single - pixel before moving on to a full image.\r\n\r\n# Do This\r\n\r\n* Try changing - the color drop downs in the Filter section\r\n* Click on the top row of lightbulbs - in the Diagram section to see how the filter will convert the input (top bulbs) - to the output (bottom bulbs)\r\n* Look at how the numbers in the Binary section - reflect changes to the colors\r\n* Based on how the bits change, can you formulate - what replace is doing? Talk to your partner and see if you can figure it out.\r\n* - Complete the Level 2 table in your Activity Guide\r\n\r\n" - CSD U1 - PixFilter Filter Revisit_markdown_instruction: "# Combining Filters\r\nNow - that you've played with filtering a single color channel, it's time to see - what happens if we filter more than one color.\r\n\r\n# Do This\r\n\r\n* Using - the color dropdowns in the filter section, build a filter that changes the - value of more than one color channel\r\n* Click on the top row of lightbulbs - in the Diagram section to see how the filter will convert the input (top bulbs) - to the output (bottom bulbs)\r\n* Look at how the numbers in the Binary section - reflect changes to the colors\r\n* Complete the Level 4 table in your Activity - Guide\r\n\r\n" - CSD U1 - PixFilter FreePlay_markdown_instruction: "# Free Play\r\n\r\nDo as - you will, make something awesome" - CSD U1 - PixFilter Full_markdown_instruction: "# Instructions Go Here" - CSD U1 - PixFilter Mario_markdown_instruction: "# Combining Filters\r\n\r\nSometimes - you'll need to filter more than one pixel to get the color change that you - want.\r\n\r\n# Do This\r\nCheck out Mario, he's lookin' pretty good in his - red hat and overalls. Your job it to set up the filter so he looks like Luigi, - with a green hat and overalls.\r\n\r\n* First, determine which bit(s) needs - to change in order to the change you want\r\n* Once you've figured out which - bit needs changing, set the filter dropdown appropriately\r\n* After you've - got the filter working so that, try to come up with other filters that change - *only* his hat and overalls - how many different clothing colors can you come - up with?\r\n\r\n_How many tries did it take you to find the right filter?_\r\n\r\n\r\n\r\n" - CSD U1 - PixFilter Mushroom_markdown_instruction: "# Filtering Images\r\nNow - that we've seen how a single pixel can be filtered to change its color, let's - try applying a filter to an image made of multiple pixels. The filter you - create will be applied to each pixel in the image - and you still have the - light bulbs available to experiment with how your filter will work with individual - colors.\r\n\r\n\r\n# Do This\r\nHere's a picture of a red mushroom - you're - going to try and turn it into a yellow mushroom.\r\n\r\n* First, determine - which bit needs to change in order to turn red into yellow\r\n* Once you've - figured out which bit needs changing, use the filter dropdowns to make all - of the red areas turn yellow\r\n* After you've got the filter working so - that the red has turned yellow, see if you can come up with filters that turn - the mushroom other colors\r\n\r\n_How many tries did it take you to find the - right filter?_\r\n\r\n\r\n\r\n" - CSD U1 - PixFilter UnFilter_markdown_instruction: "# UnFiltering\r\n\r\nBit - filters can be used to _undo_ filtering as well. Here's an image of a bird - that's been filtered from it's original colors. Can you get it back to normal?\r\n\r\n# - Do This\r\n\r\n<img src=\"https://images.code.org/c15636bda16e8792c59ac955332e37a5-image-1471372091393.22.56.png\" - style=\"float:right; width: 200px\"/>\r\nHere's what our bird should look - like. Use the filter to get him back to normal.\r\n\r\n* Decide which colors - (and so which bits) you need to change. You might need to write your thoughts - with pencil and paper.\r\n* Once you know which bits need changing, set the - filter dropdown appropriately to test your answer\r\n* After you've fixed - the image, write down both your process and your final filter in the Level - 6 section of your Activity Guide\r\n\r\n_How many tries did it take you to - find the right filter?_\r\n" - CSD U1 - Single Pixel_markdown_instruction: "# 3 Bit Colors\r\nEach pixel is - a square on a screen that emits light. Each pixel can have a certain number - of bits assigned to it, and bits per pixel determine the colors that can be - rendered.\r\n\r\nIn this tool we're using 3 bits to define the one large - blue pixel pixel. The first bit affects the red tint. The second bit affects - the green tint. The third bit affects the blue tint.\r\n\r\n# Do This\r\n\r\n* - Click on the light bulbs to turn on or off each color and see what happens - to your pixel\r\n* See how many different colors you can create with just - three bits\r\n" - CSD U2 layout style body_markdown_instruction: "<div style=\"float: right; - height: 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What - is a CSS rule-set?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**What - is a selector?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**What - is a declaration block?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**what - is a property-value pair?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**How - do I create a new rule-set?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n</div>\r\n# The Body Element\r\n\r\n* Find the `body` - rule-set in \"style.css\"\r\n* Discuss with a partner what you think will - happen if you add `text-align`, `color`, or other text properties to the `body` - rule set.\r\n* Try out some different properties to check your guesses." - CSD U2 layout style textalign_markdown_instruction: "<div style=\"float: right; - height: 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What - is a CSS rule-set?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**What - is a selector?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**What - is a declaration block?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**what - is a property-value pair?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**How - do I create a new rule-set?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n</div>\r\n# Text Align\r\n\r\n* Find the `text-align` - property in \"style.css\" in the `p` rule-set.\r\n* Change the text-align - value to `center` or `right`.\r\n* Add a `text-align` rule in the `body` rule - set" - CSD U2 add file_markdown_instruction: "<div style=\"float: right; height: 250px; - width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - is a style sheet?**</summary>\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n</details>\r\n<details>\r\n<summary>**How - do I create a new style sheet?**</summary>\r\nTo create a new style sheet, - click on the \"Add CSS\" button above the code area.\r\n</details>\r\n<details>\r\n<summary>**What - should I name my style sheet?**</summary>\r\nYou can name your style sheet - anything, but it's better to choose a relevant name, such as \"style.css\" - or \"aboutmestyles.css\" so that it's clear what the file is. Your file - should always end in the \".css\" extension.\r\n</details>\r\n<details>\r\n<summary>**How - do I rename a file?**</summary>\r\nTo rename a file, you can right click (or - control click) on the file name and choose the \"Rename\" option. This will - allow you to type in a new file name. Clicking on a file name after it is - already highlighted will also allow you to rename the file.\r\n</details>\r\n<details>\r\n<summary>**How - do I add a style sheet to a web page?**</summary>\r\nTo add a style sheet - to a web page, open up the code for the web page. Inside the head tag, add - the following code `<link rel=\"stylesheet\" href=\"style.css\">`. Then change - \"style.css\" to the name of your style sheet.\r\n</details>\r\n</div>\r\n# - Adding a Style Sheet\r\n\r\nThis is your About Me page from before. In the - next level, you'll have a chance to add some different styles to it, but - first, you need to add a style sheet, name it, and link it to your html page.\r\n\r\n1. - Create a new style sheet for your project.\r\n2. Rename the style sheet file.\r\n3. - Add your style sheet to your HTML page.\r\n\r\n<img src=\"https://images.code.org/63ed91b7de4365f59f0f4d652f8dd8fc-image-1481639763979.png\" - style=\"width:50%px\">" - CSD U2 classes modify_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nFor the code to work, you need to both - create a winter class and add elements to the class.\r\n\r\nThe class is created - in the style sheet, with the following code.\r\n\r\n<pre>.winter {\r\n color: - rgb(195,230,255);\r\n}</pre>\r\n\r\nThis code creates a class called `winter` - and makes everything in the class our winter blue, which has the RGB values - of (195,230,255).\r\n\r\nThe code that adds a `h5` element to the winter class - is `<h5 class=\"winter\">`. The `class=winter` inside the opening tag adds - everything inside the tag to the class.\r\n</details>\r\n<details>\r\n<summary>**What - rules can be added to a class rule-set?**</summary>\r\nA class rule-set can - have the same rules as any other type of selector. If a rule does not apply - to the content of the class (for example, using `font-size` on an element - with no text), then the computer will ignore that rule, but still use the - rules that work.\r\n</details>\r\n<details>\r\n<summary>**Why does the selector - have a period in front of it?**</summary>\r\nIn CSS, a period in front of - a selector means that the selector is the name of a class. If there is no - period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why - would a web developer use classes?**</summary>\r\nA web developer uses classes - when some elements should be styled differently than others, even if they - are the same tag. Classes can also be used to give elements that have different - tags the same style.\r\n</details>\r\n<details>\r\n<summary>**I got different - RGB values, but mine are right, too.**</summary>\r\nBecause RGB creates millions - of different colors, some are so similar that people have a hard time telling - them apart. That means that there are multiple RGB values that are close - enough to work for our winter color.\r\n\r\n</details>\r\n</div>\r\n# Adding - Rules\r\n\r\nYour winter words should all have the same color and font.\r\n\r\n* - Find the CSS rule-set in the style sheet that gives the winter words their - style.\r\n* Add a rule that changes the font of the winter words. It can - be any font, but it will need to be different from that of the other three - seasons.\r\n* Add any other rules you'd like for your winter words." - CSD U2 classes sample_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nFor the code to work, you need to both - create a winter class and add elements to the class.\r\n\r\nThe class is created - in the style sheet, with the following code.\r\n\r\n<pre>.winter {\r\n color: - rgb(195,230,255);\r\n}</pre>\r\n\r\nThis code creates a class called `winter` - and makes everything in the class our winter blue, which has the RGB values - of (195,230,255).\r\n\r\nThe code that adds a `h5` element to the winter class - is `<h5 class=\"winter\">`. The `class=winter` inside the opening tag adds - everything inside the tag to the class.\r\n</details>\r\n<details>\r\n<summary>**Why - does the selector have a period in front of it?**</summary>\r\nIn CSS, a period - in front of a selector means that the selector is the name of a class. If - there is no period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why - would a web developer use classes?**</summary>\r\nA web developer uses classes - when some elements should be styled differently than others, even if they - are the same tag. Classes can also be used to give elements that have different - tags the same style.\r\n</details>\r\n<details>\r\n<summary>**I got different - RGB values, but mine are right, too.**</summary>\r\nBecause RGB creates millions - of different colors, some are so similar that people have a hard time telling - them apart. That means that there are multiple RGB values that are close - enough to work for our winter color.\r\n\r\n</details>\r\n</div>\r\n# Classes\r\n\r\nIn - this page, the web developer has used classes to give some of the words our - winter color.\r\n\r\n* Look at the HTML code for the winter words. Why is - \"snowy\" the only winter word without the winter color?\r\n* Add code to - the HTML that will give \"snowy\" the same winter blue as the other words.\r\n* - Look inside the style sheet to find the rule that makes all the words in the - winter class blue, and check whether your RGB numbers are close to the ones - in the style sheet. \r\n* Discuss with your partner how the code works." - CSD U2 classes spring_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nFor the code to work, you need to both - create a spring class and add elements to the class.\r\n\r\nThe spring class - is already created in the style sheet, but it doesn't have any rules.\r\n\r\n<pre>.spring - {\r\n color: rgb(195,230,255);\r\n}</pre>\r\n\r\nLook at the rules in the - `winter` class for clues to how to make rules for the summer class.\r\n\r\nYou - will also need to add some elements to the spring class inside your HTML file.\r\n\r\nThe - code in the HTML file that adds a `h5` element to the winter class is `<h5 - class=\"winter\">`. Use this pattern to add elements to the spring class, - too.\r\n</details>\r\n<details>\r\n<summary>**What rules can be added to a - class rule-set?**</summary>\r\nA class rule-set can have the same rules as - any other type of selector. If a rule does not apply to the content of the - class (for example, using `font-size` on an element with no text), then the - computer will ignore that rule, but still use the rules that work.\r\n</details>\r\n<details>\r\n<summary>**Why - does the selector have a period in front of it?**</summary>\r\nIn CSS, a period - in front of a selector means that the selector is the name of a class. If - there is no period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why - would a web developer use classes?**</summary>\r\nA web developer uses classes - when some elements should be styled differently than others, even if they - are the same tag. Classes can also be used to give elements that have different - tags the same style.\r\n</details>\r\n</div>\r\n# Spring Class\r\n\r\nNow - that your winter class is ready, you can start on the other seasons.\r\n\r\n* - Find the empty CSS rule-set in the style sheet that gives the spring words - their style.\r\n* Add two rules, one to give the text your spring color for - earlier in the lesson, and another to give the text a different font, font - size, or decoration.\r\n* Add the spring class to the spring elements in the - HTML page." - CSD U2 classes summer_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nFor the code for the winter class to work, - it needs to both create a winter class and add elements to the class.\r\n\r\nThe - class is created in the style sheet, with the following code.\r\n\r\n<pre>.winter - {\r\n color: rgb(195,230,255);\r\n}</pre>\r\n\r\nThis code creates a class - called `winter` and makes everything in the class our winter blue, which has - the RGB values of (195,230,255).\r\n\r\nThe code that adds a `h5` element - to the winter class is `<h5 class=\"winter\">`. The `class=winter` inside - the opening tag adds everything inside the tag to the class.\r\n</details>\r\n<details>\r\n<summary>**How - do I create a new rule-set?**</summary>\r\nYou can create a new rule-set by - following the pattern that the `winter` and `spring` classes used in the style - sheet.\r\n<pre>.winter {\r\n color: rgb(195,230,255);\r\n}</pre>\r\n\r\nThe - selector name and the color values will be different, but the following pattern - is always the same.\r\n\r\n<pre>.classname {\r\n property1: value1;\r\n property2: - value2;\r\n}</pre>\r\n\r\n</details>\r\n<details>\r\n<summary>**Why does the - selector have a period in front of it?**</summary>\r\nIn CSS, a period in - front of a selector means that the selector is the name of a class. If there - is no period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why - would a web developer use classes?**</summary>\r\nA web developer uses classes - when some elements should be styled differently than others, even if they - are the same tag. Classes can also be used to give elements that have different - tags the same style.\r\n</details>\r\n</div>\r\n# Summer and Autumn Classes\r\n\r\n* - Inside the style sheet, create a new rule-set for a \"summer\" class.\r\n* - Add a rule to set the text in the summer class to your summer RGB color.\r\n* - Add the summer class to the summer elements in the HTML page.\r\n* Do the - same for the autumn class." - CSD U2 layout style bgcolor_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is making the background - of the page blue:\r\n\r\n<pre>body {\r\n background-color: lightblue;\r\n}</pre>\r\n\r\n* - `body` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the body element is the entire - page.\r\n* `background-color: lightblue;` is the rule that makes the entire - page light blue.\r\n * `background-color` is the _property_. It explains - what the rule is about, in this case the color of the background.\r\n * `lightblue` - is the _value_. It explains how the rule should be applied, in this case - making the background light blue.\r\n</details>\r\n<details>\r\n<summary>**What - colors can I use in CSS?**</summary>\r\nCSS includes most common color names - (red, blue, green, etc.), and many uncommon ones. You can see a full list - of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools - - HTML Color Names</a>. You can still use colors that are not included in - the named list, but you will need to use their RGB values. You can read more - about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools - - CSS Legal Color Values</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `background-color` property do?**</summary>\r\nThe `background-color` - property determines the color of the background of an element. You can read - more about the property at <a href=\"http://www.w3schools.com/cssref/pr_background-color.asp\">W3Schools - - CSS background-color Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - if an element inside the page has a different background color from the body?**</summary>\r\nYou - can see the answer to this question by adding a `background-color` rule to - the `p` tag. The paragraphs will have the background color in the rule for - the `p` tag, and the rest of the page will follow the rule for the `body` - tag.\r\n</details>\r\n<details>\r\n<summary>**What is a style sheet?**</summary>\r\nA - style sheet is a document that controls how a web page will appear. External - style sheets are separate files that are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n#Background - Color\r\n\r\n* Find the code in the style sheet that is making the background - of the entire page light blue.\r\n* Change the code to make the page a different - color.\r\n* Try to change the background color of just the paragraphs." - CSD U2 layout style body_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n\r\n<details>\r\n<summary>**What - does the `body` selector do?**</summary>\r\nBecause the content of the web - page is all inside the `body` tag, the body selector gives style rules for - everything on the web page.\r\n</details>\r\n<details>\r\n<summary>**What - does the `color` property do?**</summary>\r\nThe `color` property specifies - the color of the text. If there’s no text, it won’t do anything. Read more - at <a href=\"http://www.w3schools.com/cssref/pr_text_color.asp\"> W3Schools - - CSS color Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does - the `text-align` property do?**</summary>\r\nThe `text-align` property aligns - the text to the left, right, or center. You can read more at <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3Schools - - CSS text-align Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `text-decoration` property do?**</summary>\r\nThe `text-decoration` - property puts a line over, under, or through a piece of text. You can read - more about the property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3Schools - - CSS text-decoration Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `font-family` property do?**</summary>\r\nThe `font-family` property - changes the font of the text. It gives a general description of the type - of font that should be used, but each browser might display the font slightly - differently. Read more at <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\">W3chools - - CSS font-family Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `font-size` property do?**</summary>\r\nThe `font-size` property - changes the size of the text. You can use general terms, such as `small`, - `medium`, and `large`, or you can specify the exact size in pixels, such as - `20px`. Read more at <a href=\"http://www.w3schools.com/cssref/pr_font_font-size.asp\">W3Schools - - CSS font-size Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - is a stylesheet?**</summary>\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n# - The Body Element\r\n\r\n* Find the `body` rule-set in the style sheet.\r\n* - Discuss with a partner what you think will happen if you add `text-align`, - `color`, or other text properties to the `body` rule set.\r\n* Try out some - different properties to check your guesses." - CSD U2 layout style border_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - colors can I use in CSS?**</summary>\r\nCSS includes most common color names - (red, blue, green, etc.), and many uncommon ones. You can see a full list - of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools - - HTML Color Names</a>. You can still use colors that are not included in - the named list, but you will need to use their RGB values. You can read more - about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools - - CSS Legal Color Values</a>\r\n</details>\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is making the image - borders:\r\n\r\n<pre>img {\r\n border-color: saddlebrown;\r\n border-width: - 4px;\r\n border-style: solid;\r\n border-radius: 10px;\r\n}</pre>\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `border-color: - saddlebrown;`,`border-width: 4px;`,`border-style: solid;`, and `border-radius: - 10px;` are the rules that make the border.\r\n</details>\r\n<details>\r\n<summary>**What - does the `border-style` property do?**</summary>\r\nThe `border-style` property - determines what kind of border (solid, dotted, etc.) the element has. You - can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_border-style.asp\">W3Schools - - CSS border-style Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `border-radius` property do?**</summary>\r\nThe `border-radius` property - determines the radius of the curves at the corners of the element. A bigger - radius makes a bigger, softer curve, and a smaller radius makes a smaller, - sharper curve. A radius of zero makes a regular corner. You can read more - about this property at <a href=\"http://www.w3schools.com/cssref/css3_pr_border-radius.asp\">W3Schools - - CSS3 border-radius property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `float` property do?**</summary>\r\nThe `float` property makes an - element \"float\", meaning that the elements that come after it all flow around - it. If the `float` value is `left`, the element will float to the left, and - the elements after it will show up on its right. If the `float` value is - `right`, the element will float to the right, and the elements after it will - show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools - - CSS float Property</a>\r\n</details>\r\n</div>\r\n\r\n# Borders\r\n\r\n* - Find the rules in the style sheet that set image borders color and width.\r\n* - Change the color and width of your borders.\r\n* Try out some different border - styles.\r\n * Choose from `dotted`, `dashed`, `solid`, and `double`\r\n* - Put a border on another type of page element, such as one of the headers or - the paragraphs." - CSD U2 layout style borderradius_markdown_instruction: "<div style=\"float: - right; height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is making the image - borders:\r\n\r\n<pre>img {\r\n border-color: saddlebrown;\r\n border-width: - 4px;\r\n border-style: solid;\r\n border-radius: 10px;\r\n}</pre>\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `border-color: - saddlebrown;`,`border-width: 4px;`,`border-style: solid;`, and `border-radius: - 10px;` are the rules that make the border.\r\n</details>\r\n<details>\r\n<summary>**What - does the `border-style` property do?**</summary>\r\nThe `border-style` property - determines what kind of border (solid, dotted, etc.) the element has. You - can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_border-style.asp\">W3Schools - - CSS border-style Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `border-radius` property do?**</summary>\r\nThe `border-radius` property - determines the radius of the curves at the corners of the element. A bigger - radius makes a bigger, softer curve, and a smaller radius makes a smaller, - sharper curve. A radius of zero makes a regular corner. You can read more - about this property at <a href=\"http://www.w3schools.com/cssref/css3_pr_border-radius.asp\">W3Schools - - CSS3 border-radius property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `float` property do?**</summary>\r\nThe `float` property makes an - element \"float\", meaning that the elements that come after it all flow around - it. If the `float` value is `left`, the element will float to the left, and - the elements after it will show up on its right. If the `float` value is - `right`, the element will float to the right, and the elements after it will - show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools - - CSS float Property</a>\r\n</details>\r\n</div>\r\n\r\n# Border Radius\r\n\r\n* - Look at the `border-radius` property inside your `img` rule-set\r\n* Discuss - with your partner what you think the property does.\r\n* Try different values - for border radius and decide which one you like the best." - CSD U2 layout style float_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is making the image - float on the left hand side of the page:\r\n\r\n<pre>img {\r\n float: left;\r\n}</pre>\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `float: - left;` is the rule that makes the image float to the left.\r\n</details>\r\n<details>\r\n<summary>**What - does the `float` property do?**</summary>\r\nThe `float` property makes an - element \"float\", meaning that the elements that come after it all flow around - it. If the `float` value is `left`, the element will float to the left, and - the elements after it will show up on its right. If the `float` value is - `right`, the element will float to the right, and the elements after it will - show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools - - CSS float Property</a>\r\n</details>\r\n</div>\r\n\r\n# Float\r\n\r\n* Look - at the `float` property inside your `img` rule-set\r\n* Discuss with your - partner what you think the property does.\r\n* Change the value from `left` - to `right`." - CSD U2 layout style freeplay_markdown_instruction: "# About Me Page\r\n\r\nTry - out these some new CSS properties on your About Me page.\r\n\r\n* Add styling - of your choice to your About Me Page. Be sure to use at least 3 new CSS properties.\r\n\r\n# - Checklist\r\n\r\n* At least 3 of the following CSS Properties are used:\r\n\r\n - * `background-color`\r\n * `height`\r\n * `width`\r\n * `border-style`\r\n - * `border-radius`\r\n * `border-width`\r\n * `float`\r\n * `margin`\r\n\r\n\r\nIf - you’ve used at least 3 of the properties from the checklist, you can explore - some additional CSS properties to add to your About Me page." - CSD U2 layout style margin_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is putting extra - space around the images:\r\n\r\n<pre>img {\r\n\tmargin: 10px;\r\n}</pre>\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `margin: - 10px;` is the rule that puts 10 pixels of space around the image.\r\n</details>\r\n<details>\r\n<summary>**What - does the `margin` property do?**</summary>\r\nThe `margin` property determines - how much space will be around the image. Most of the time, you will define - in the margin in pixels. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_margin.asp\">W3Schools - - CSS margin Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does - `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated `px`, - is how elements are measured in CSS. It’s the size of a single point of light - on the screen.\r\n</details>\r\n</div>\r\n# Margin\r\n\r\nMargins specify - how much space should be around an element.\r\n\r\n* Find the `margin` property - in the `img` rule-set.\r\n* Change the margin to be larger, and discuss the - effect with a partner.\r\n* Choose another element type and give it a margin, - too." - CSD U2 layout style sample_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n\r\n<details>\r\n<summary>**What - does the `body` selector do?**</summary>\r\nBecause the content of the web - page is all inside the `body` tag, the body selector gives style rules for - everything on the web page.\r\n</details>\r\n<details>\r\n<summary>**What - does the `border-style` property do?**</summary>\r\nThe `border-style` property - determines what kind of border (solid, dotted, dashed, etc.) the element has. You - can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_border-style.asp\">W3Schools - - CSS border-style Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `border-radius` property do?**</summary>\r\nThe `border-radius` property - determines the radius of the curves at the corners of the element. A bigger - radius makes a bigger, softer curve, and a smaller radius makes a smaller, - sharper curve. A radius of zero makes a regular corner. You can read more - about this property at <a href=\"http://www.w3schools.com/cssref/css3_pr_border-radius.asp\">W3Schools - - CSS3 border-radius property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `float` property do?**</summary>\r\nThe `float` property makes an - element \"float\", meaning that the elements that come after it all flow around - it. If the `float` value is `left`, the element will float to the left, and - the elements after it will show up on its right. If the `float` value is - `right`, the element will float to the right, and the elements after it will - show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools - - CSS float Property</a>\r\n</details>\r\n</div>\r\n# Layout and Style\r\n\r\n* - Look through web page below for new styles.\r\n* Open the style sheet\r\n* - With your partner, discuss which parts of the CSS code you think are making - the page appear different.\r\n * What makes the entire page blue?\r\n * How - are the images positioned to the left of all the other elements?\r\n * What - made the image corners rounded?\r\n\r\nIn the next few puzzles, you'll be - changing and adding new styles on this page." - CSD U2 layout style width_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is making the image - its current size:\r\n\r\n<pre>img {\r\n\twidth: 250px;\r\n}</pre>\r\n\r\n* - `img` is the _selector_. It specifies which elements will have to follow - the rules inside the curly braces, in this case, the images.\r\n* `width: - 250px` is the rule that makes the image 250 pixels wide. It also changes - the height so that the image does not stretch.\r\n</details>\r\n<details>\r\n<summary>**What - does the `width` property do?**</summary>\r\nThe `width` property determines - how wide the element will be. Most of the time, you will define in the width - in pixels, which makes the element take up an exact amount of space on the - screen. Defining the width will also change the height so that the image - does not stretch, unless you have also defined the height. You can read more - about this property at <a href=\"http://www.w3schools.com/cssref/pr_dim_width.asp\">W3Schools - - CSS width Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does - the `height` property do?**</summary>\r\nThe `height` property determines - how tall the element will be. Most of the time, you will define in the height - in pixels, which makes the element take up an exact amount of space on the - screen. Defining the height will also change the width so that the image - does not stretch, unless you have also defined the width. You can read more - about this property at <a href=\"http://www.w3schools.com/cssref/pr_dim_height.asp\">W3Schools - - CSS width Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does - `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated `px`, - is how elements are measured in CSS. It’s the size of a single point of light - on the screen.\r\n</details>\r\n<details>\r\n<summary>**Why does using a width - and height rule at the same time sometimes stretch out the image?**</summary>\r\nWhen - the width of an images changes, the height must change by the same percentage, - otherwise the image will stretch. For example, if you double the width of - an image, you must also double the height, or the image will be stretched - horizonally. When you only define the width or the height, the computer will - automatically change the other property so that the image looks the same.\r\n</details>\r\n</div>\r\n\r\n# - Width and Height\r\n\r\n* Find the property in the style sheet that controls - the width of the images.\r\n* Change the width of the images to be larger - or smaller.\r\n* Create a new rule with a `height` property to control the - height of the images.\r\n* Use the `width` property in the `p` rule-set to - change the width of your paragraphs." - CSD U2 RGB intro_markdown_instruction: "# RGB Colors\r\n\r\nAll colors, whether - they have names or not, can be described by the level of red, green, and blue - light it takes to make them. This is called an RGB value (short for Red-Green-Blue). You - can use the widget on your left to try out different RGB values and see what - colors they make.\r\n\r\n* **Click \"Run\" to start the widget on the left,** - and use the sliders to adjust the levels of red, green, and blue light.\r\n* - For each of the colors below, match it to its RGB value.\r\n\r\nA) red: 216, - green: 191, blue: 216 - rgb(216,191,216)\r\n\r\nB) red: 255, green: 239, blue: - 213 - rgb(255,239,213)\r\n\r\nC) red: 255, green: 140, blue: 105 - rgb(255,140,105)\r\n\r\nD) - red: 123, green: 104, blue: 238 - rgb(123,104,238)\r\n\r\nE) red: 107, green: - 142, blue: 35 - rgb(107,142,35)\r\n\r\n\r\n<div style=\"font-size: 16px\">\r\n<br - />\r\n<details>\r\n<summary>**Why do red and green make yellow?**</summary>\r\n<p>When - you mix paint, red and green make brown, but RGB color mixing uses light instead - of paint, so the colors mix differently. RGB uses _additive color mixing_. In - additive color mixing, red and green make yellow, red and blue make magenta, - and blue and green make cyan. When you mix the three primary colors together - (red, green, and blue), they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia - - Additive Color</a>\r\n</p> </details>\r\n<details>\r\n<summary>**How many - colors can I make with RGB color mixing?**</summary>\r\n<p>\r\nYou can make - make over sixteen million different colors with RGB color mixing.\r\n</p></details>\r\n</div>" - CSD U2 RGB others_markdown_instruction: "# Spring and Autumn Colors\r\n\r\nChoose - RGB values for spring and autumn colors.\r\n\r\n* Click \"Run\" to start the - widget.\r\n* Adjust the levels until you find a spring color you like, then - write down the values on your activity guide.\r\n* Do the same for an autumn - color. You will need the RGB values for the next activity.\r\n\r\n\r\n<div - style=\"font-size: 16px\">\r\n<br />\r\n<details><summary>**Where can I see - the whole range of color types?**</summary>\r\nYou can find many options for - colors at <a href=\"http://www.w3schools.com/colors/colors_picker.asp\">W3Schools - - HTML Color Picker</a></details>\r\n<details>\r\n<summary>**Why do red and - green make yellow?**</summary>\r\n<p>When you mix paint, red and green make - brown, but RGB color mixing uses light instead of paint, so the colors mix - differently. RGB uses _additive color mixing_. In additive color mixing, - red and green make yellow, red and blue make magenta, and blue and green make - cyan. When you mix the three primary colors together (red, green, and blue), - they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia - - Additive Color</a></p> </details>\r\n<details>\r\n<summary>**How many colors - can I make with RGB color mixing?**</summary>\r\n<p>You can make make over - sixteen million different colors with RGB color mixing.</p></details>\r\n</div>" - CSD U2 RGB summer_markdown_instruction: "# Summer Color\r\n\r\nFind the RGB - values for a summery yellow color.\r\n\r\n* Click \"Run\" to start the widget.\r\n* - Adjust the levels until you match the summery yellow at the bottom of the - widget.\r\n* Write the RGB values on your activity guide. You will need them - in the next activity.\r\n\r\n\r\n<div style=\"font-size: 16px\">\r\n<br />\r\n<summary>**Why - do red and green make yellow?**</summary>\r\n<p>When you mix paint, red and - green make brown, but RGB color mixing uses light instead of paint, so the - colors mix differently. RGB uses _additive color mixing_. In additive color - mixing, red and green make yellow, red and blue make magenta, and blue and - green make cyan. When you mix the three primary colors together (red, green, - and blue), they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia - - Additive Color</a></p> </details>\r\n<details>\r\n<summary>**How many colors - can I make with RGB color mixing?**</summary>\r\n<p>You can make make over - sixteen million different colors with RGB color mixing.</p></details>\r\n</div>" - CSD U2 RGB winter_markdown_instruction: "# Winter Color\r\n\r\nIn the next - few levels, you'll be finding seasonal colors for a website. Here, you'll - need to find the RGB values for a wintery blue color.\r\n\r\n* Click \"Run\" - to start the widget.\r\n* Adjust the levels until you match the wintery blue - color at the bottom of the widget.\r\n* Write the RGB values on your activity - guide. You will need them in the next activity.\r\n\r\n\r\n<div style=\"font-size: - 16px\">\r\n<br />\r\n<details><summary>**How do I make a color lighter?**</summary>\r\n<p>To - make a color lighter, you need to add more light (increase the level of the - slider). If you have already added the maximum amount of blue light, you - will need to add more red and green light to make your blue lighter.</p></details>\r\n<details>\r\n<summary>**Why - do red and green make yellow?**</summary>\r\n<p>When you mix paint, red and - green make brown, but RGB color mixing uses light instead of paint, so the - colors mix differently. RGB uses _additive color mixing_. In additive color - mixing, red and green make yellow, red and blue make magenta, and blue and - green make cyan. When you mix the three primary colors together (red, green, - and blue), they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia - - Additive Color</a></p> </details>\r\n<details>\r\n<summary>**How many colors - can I make with RGB color mixing?**</summary>\r\n<p>You can make make over - sixteen million different colors with RGB color mixing.</p></details>\r\n</div>" - CSD U2 style background_markdown_instruction: "<div style=\"float: right; height: - 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What - is a CSS rule-set?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**What - is a selector?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**What - is a declaration block?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**what - is a property-value pair?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**How - do I create a new rule-set?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n</div>\r\n# Text Alignment\r\n\r\n* Find the \"text-align\" - property in the paragraph tag.\r\n* Change the paragraph alignment.\r\n * - Choose from \"left\", \"right\", and \"center\"" - CSD U2 text style bgcolor_markdown_instruction: "<div style=\"float: right; - height: 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What - colors can I choose?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nblah blah - answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file - in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n</div>\r\n#Background - Color\r\n\r\n* Find the code in \"style.css\" that is making the background - of the entire page light blue.\r\n* Change the code to make the page a different - color.\r\n* Try to change the background color of just the paragraphs." - CSD U2 text style decoration_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that makes the `h1` elements - underlined:\r\n\r\n<pre>h1 {\r\n text-decoration: underline;\r\n}</pre>\r\n\r\n* - `h1` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces. The `p` stands for paragraph.\r\n* `text-decoration: - underline;` is the rule that makes the text inside the `h1` tag underlined.\r\n - * `text-decoration` is the _property_. It explains what the rule is about, - in this case where the line goes.\r\n * `underline` is the _value_. It explains - how the rule should be applied, in this case making the test underlined.\r\n</details>\r\n<details>\r\n<summary>**What - are the possible values for text decoration?**</summary>\r\nYou can choose - between \"underline\", \"overline\", and \"line-through\". You can read more - about the text-decoration property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3Schools - - CSS text-decoration Property</a>\r\n</details>\r\n<details>\r\n<summary>**Why - do I need all the punctuation?**</summary>\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the stylesheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What - is a stylesheet?**</summary>\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n# - Underlining\r\n\r\n* Find the code in the style sheet that makes the h1 tag - underlined.\r\n* Change the text decoration and see which one you like.\r\n * - Choose from \"underline\", \"overline\", and \"line-through\"\r\n* Add a text - decoration rule for the paragraph or h3 tag." - CSD U2 text style font family_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is controlling the - paragraph font:\r\n\r\n<pre>p {\r\n font-family: cursive;\r\n}</pre>\r\n\r\n* - `p` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces. The `p` stands for paragraph.\r\n* `font-family: - cursive;` is the rule that makes the text inside the `p` tags a particular - font.\r\n * `font-family` is the _property_. It explains what the rule is - about, in this case the font.\r\n * `cursive` is the _value_. It explains - how the rule should be applied, in this case making the text cursive.\r\n</details>\r\n<details>\r\n<summary>**What - are the possible values for font family?**</summary>\r\nYou can choose between - \"serif\", \"sans-serif\", \"cursive\", \"fantasy\", and \"monospace\". You - can also try more specific fonts as described in <a href=\"http://www.w3schools.com/cssref/css_websafe_fonts.asp\">W3Schools - - CSS Web Safe Font Combinations</a>\r\n</details>\r\n<details>\r\n<summary>**Why - do I need all the punctuation?**</summary>\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the stylesheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What - is a stylesheet?**</summary>\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n#Changing - the Font\r\n\r\n* Find the CSS rule-set in the style sheet that determines - the style for the paragraph tag.\r\n* Change the font family and choose which - one you like the best.\r\n * Choose from \"serif\", \"sans-serif\", \"cursive\", - \"fantasy\", and \"monospace\"\r\n* Add a font family rule for the h1 or h3 - tags." - CSD U2 text style freeplay_markdown_instruction: "# About Me Page\r\n\r\nNow - you can style the text on your About Me page!\r\n\r\n* Open your style sheet - and add styling of your choice to your About Me Page. Be sure to use at least - 3 different CSS properties.\r\n\r\n# Checklist\r\n\r\n* At least 3 of the - following CSS Properties are used:\r\n * `font-size`\r\n * `font-family`\r\n - * `color`\r\n * `text-decoration`\r\n * `text-align`\r\n\r\nIf you’ve used - at least 3 of the properties from the checklist, you can explore some additional - text properties to add to your About Me page." - CSD U2 text style h1_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - colors can I use in CSS?**</summary>\r\nCSS includes most common color names - (red, blue, green, etc.), and many uncommon ones. You can see a full list - of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools - - HTML Color Names</a>. You can still use colors that are not included in - the named list, but you will need to use their RGB values. You can read more - about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools - - CSS Legal Color Values</a>\r\n</details><details>\r\n<summary>**How does - the code work?**</summary>\r\nHere is the code that is making the `h1` header - red:\r\n\r\n<pre>h1 {\r\n color: red;\r\n}</pre>\r\n\r\n* `h1` is the _selector_. It - specifies which elements will have to follow the rules inside the curly braces.\r\n* - `color: red;` is the rule that makes the text inside the `h1` tags red.\r\n - * `color` is the _property_. It explains what the rule is about, in this - case the text color.\r\n * `red` is the _value_. It explains how the rule - should be applied, in this case making the text red.\r\n</details>\r\n<details>\r\n<summary>**Why - do I need all the punctuation?**</summary>\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the style sheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What - is a style sheet?**</summary>\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n}\r\n</pre>\r\n\r\nIn - this example, `h2` is the selector, `color` and `font-family` are properties, - and `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n# - CSS and Text Color\r\n\r\nThis HTML file uses a style sheet (\"style.css\") - to give the page a particular style. The style sheet contain information - about what each of the HTML elements should look like.\r\n\r\n* Find the code - in the style sheet (click on \"style.css\" in the files area) that is making - the h1 header red.\r\n* Change the code for the color of the h1 header from - `red` to a different color." - CSD U2 text style h3_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - colors can I use in CSS?**</summary>\r\nCSS includes most common color names - (red, blue, green, etc.), and many uncommon ones. You can see a full list - of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools - - HTML Color Names</a>. You can still use colors that are not included in - the named list, but you will need to use their RGB values. You can read more - about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools - - CSS Legal Color Values</a>\r\n</details>\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is making the `h1` - header red:\r\n\r\n<pre>h1 {\r\n color: red;\r\n}</pre>\r\n\r\n* `h1` is - the _selector_. It specifies which elements will have to follow the rules - inside the curly braces.\r\n* `color: red;` is the rule that makes the text - inside the `h1` tags red.\r\n * `color` is the _property_. It explains what - the rule is about, in this case the text color.\r\n * `red` is the _value_. It - explains how the rule should be applied, in this case making the text red.\r\n</details>\r\n<details>\r\n<summary>**How - do I make a new rule-set?**</summary>\r\nTo make a new rule set, you'll need - a selector and a list of rules. The selector is the name of the tag you want - the rules to be applied to. The rules are a list of property and value pairs. You'll - also need to pay careful attention to the punctuation in the rule set. Look - at the code below for an example of how the code should look. You'll need - to change the specifics for your page.\r\n\r\n<pre>h1 {\r\n color: red;\r\n}</pre>\r\n\r\n\r\n* - `h1` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces.\r\n* `color: red;` is the rule that makes the - text inside the `h1` tags red.\r\n * `color` is the _property_. It explains - what the rule is about, in this case the text color.\r\n * `red` is the _value_. It - explains how the rule should be applied, in this case making the text red.\r\n</details>\r\n<details>\r\n<summary>**Why - do I need all the punctuation?**</summary>\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the style sheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What - is a style sheet?**</summary>\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n#Making - a new CSS rule-set\r\n\r\nThe block of code that gives rules for a particular - tag is called a _rule-set_. You can make a new rule set by copying the pattern - you see in the rule-set for the `h1` tag.\r\n\r\n* Find the CSS rule-set in - the style sheet that determines the styles for the h1 tag.\r\n* Using the - same pattern, write a new CSS rule-set that will determine the styles for - the h3 tag.\r\n* Add code to make the text in all h3 tags a different color." - CSD U2 text style sample_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - is a style sheet?**</summary>\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n</details>\r\n<details>\r\n<summary>**Why - is the \"style.css\" file in a different language?**</summary>\r\nWeb developers - intentionally separate content and style to make their code easier to maintain. - HTML is the language used to structure the content of a web page. CSS is a - language that adds style to a web page. \r\n</details>\r\n<details>\r\n<summary>**What - does `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated - `px`, is how elements are measured in CSS. It’s the size of a single point - of light on the screen.\r\n</details>\r\n<details>\r\n<summary>**What does - the `text-decoration` property do?**</summary>\r\nThe `text-decoration` property - puts a line over, under, or through a piece of text. You can read more about - the property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3Schools - - CSS text-decoration Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `text-align` property do?**</summary>\r\nThe `text-align` property - aligns the text to the left, right, or center. You can read more at <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3Schools - - CSS text-align Property</a>\r\n</details>\r\n<details>\r\n<summary>**What - does the `font-family` property do?**</summary>\r\nThe `font-family` property - changes the font of the text. It gives a general description of the type - of font that should be used, but each browser might display the font slightly - differently. Read more at <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\">W3chools - - CSS font-family Property</a>\r\n</details>\r\n</div>\r\n#CSS and Style sheets\r\n\r\n* - Look at the web page below and find some different types of text stylings - that you don't know how to code yet.\r\n* Click on the style sheet (\"style.css\" - in the files area) and look at the code inside the file.\r\n* With your partner, - discuss which parts of the code you think are making the text appear differently - than before.\r\n\r\nIn the next few lessons, you'll be changing and adding - new styles on this page.\r\n\r\n" - CSD U2 text style size_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is controlling the - paragraph text size:\r\n\r\n<pre>p {\r\n font-size: 14px;\r\n}</pre>\r\n\r\n* - `p` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces. The `p` stands for paragraph.\r\n* `font-size: - 14px;` is the rule that makes the text inside the `p` tags a particular size.\r\n - * `font-size` is the _property_. It explains what the rule is about, in this - case the text size.\r\n * `14px` is the _value_. It explains how the rule - should be applied, in this case making the text 14 pixels big.\r\n</details>\r\n<details>\r\n<summary>**What - does `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated - `px`, is how elements are measured in CSS. It’s the size of a single point - of light on the screen.\r\n</details>\r\n<details>\r\n<summary>**Why do I - need all the punctuation?**</summary>\r\nThe punctuation, such as the curly - braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand - the rules in the style sheet. The curly braces hold all the rules for a particular - selector. Each rule should end in a semicolon, and the properties and values - are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What - is a style sheet?**</summary>\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n\r\n# - Changing text size\r\n\r\nYou can control other things besides colors by using - other properties.\r\n\r\n* Find the CSS rule-set in the style sheet that determines - the style for the paragraph tag.\r\n* Change the text size of the paragraphs - to be bigger.\r\n* Add a new rule to your rule-set for your h3 tag to make - the text bigger or smaller." - CSD U2 text style text align_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - does the code work?**</summary>\r\nHere is the code that is controlling the - paragraph text alignment:\r\n\r\n<pre>p {\r\n text-align: left;\r\n}</pre>\r\n\r\n* - `p` is the _selector_. It specifies which elements will have to follow the - rules inside the curly braces. The `p` stands for paragraph.\r\n* `text-align: - left;` is the rule that makes the text inside the `p` tags align to the left - side of the paragraph.\r\n * `text-align` is the _property_. It explains - what the rule is about, in this case the text alignment.\r\n * `left` is the - _value_. It explains how the rule should be applied, in this case making - the text align to the left side of the paragraph.\r\n</details>\r\n<details>\r\n<summary>**Why - doesn't `text-align: left;` do anything?**</summary>\r\nMost properties have - default values. The default values are the styles that an element will have - automatically, before you add your style sheet. The default value for `text-align` - is `left`, so it doesn't change from how it already looked.\r\n</details>\r\n<details>\r\n<summary>**What - are the possible values for text align?**</summary>\r\nYou can choose between - \"left\", \"right\", and \"center\". You can read more about the text-align - property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3Schools - - CSS text-align Property</a>\r\n</details>\r\n<details>\r\n<summary>**Why - do I need all the punctuation?**</summary>\r\nThe punctuation, such as the - curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer - to understand the rules in the style sheet. The curly braces hold all the - rules for a particular selector. Each rule should end in a semicolon, and - the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What - is a style sheet?**</summary>\r\nA style sheet is a document that controls - how a web page will appear. External style sheets are separate files that - are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What - is CSS?**</summary>\r\nCSS is a language that controls the way content on - a web site appears. It uses rule-sets to change the look of a page. Each - rule set has a selector, which specifies which elements on the page will be - affected, and the rules, which explain how to display the elements. Each - rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s - an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 - {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this - example, `h2` is the selector, `color` and `font-family` are properties, and - `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</details>\r\n</div>\r\n# - Text Alignment\r\n\r\nThe `text-align` property sets the horizontal (side - to side) position of the text within each line.\r\n\r\n* Find the \"text-align\" - property in the paragraph tag.\r\n* Change the paragraph alignment.\r\n * - Choose from \"left\", \"right\", and \"center\"" - CSD U3 - Booleans Video_markdown_instruction: "# Boolean Expressions Video" - CSD U3 - complex - compound conditionals_markdown_instruction: "# Possible - Solution #2 - Compound Conditionals\r\n\r\nAnother way that you might have - phrased the challenge problem is:\r\n\r\n\tIf the up arrow was pressed AND - the sprite hasn't gone off the top of the screen, move up.\r\n\r\nThis structure - of asking both questions at the same time is accomplished using a **compound - conditional**. Compound conditionals use the boolean operators `AND` and `OR` - to ask multiple questions at once. `AND` only returns true if _both_ of the - questions it's asking are true, while `OR` will return true if _either_ of - its questions are true. In JavaScript (and many other languages) `AND` is - represented by two ampersands (`&&`) while `OR` is represented by two pipes - (`||`) - their blocks look like this: \r\n\r\n![](https://images.code.org/c7ab68cb4091472f05d7c862a52730c6-image-1466785066210.48.02.png)\r\n\r\nWe - could pseudocode this solution as \r\n\r\n\tIf the up arrow was pressed AND - sprite.y > 0\t// Both Questions\r\n \tmove up\t\t\t\t\t\t\t\t\t // Only - runs if both questions were true\r\n\r\n\r\n# Do This\r\n\r\nHere's the same - code from the challenge again, but this time the up arrow uses a compound - conditional. \r\n\r\n* Use the same compound conditional pattern on the other - three arrow keys.\r\n" - CSD U3 - complex - key up and down_markdown_instruction: "# Responding to a - Single Click\r\n\r\nEarlier we learned that `keyWentDown` and `keyWentUp` - can be used to respond to a keypress a single time. The blocks `mouseWentUp` - and `mouseWentDown` allow you to do that for the mouse!\r\n\r\n# Do This\r\n\r\nLet's - make a simple game that counts how many times you've clicked. We've already - provided a variable `clicks` that you can use to track how many times the - user has clicked.\r\n\r\n* Add a conditional that checks if the mouse went - down.\r\n* Inside your conditional, add to the `clicks` variable.\r\n\r\n_Challenge: - Can you add a sprite that responds to `mouseWentDown` as well? Add an image - of your choice and increase the sprite's size each time the mouse is clicked._" - CSD U3 - complex - mouse down_markdown_instruction: "# Mouse Clicks\r\n\r\nKeypresses - are great, but sometimes you want users to interact through mouse clicks. - There's a new block called `mouseDown` which, similar to `keyDown`, checks - whether the left or right mouse buttons is being pressed. If you are using - a computer with a mouse or trackpad that has only one button, you'll want - to always use `mouseDown(\"left\")`. \r\n\r\n# Do This\r\nHere's a program - that drops a balloon down the screen - you're going to program the mouse - button to raise the balloon back up while it's clicked.\r\n\r\n* Add an if - else statment that checks for `mouseDown`\r\n* Inside the conditional, move - the balloon up one pixel if the mouse is down otherwise move the balloon down - \r\n\r\n_Hint: You'll need to move the code that drops the balloon for this - to work - you only want it to run if `mouseDown` is `false`_\r\n\r\n_Challenge: - Can you make the balloon drift randomly to the left and right as it raises - and falls?_" - CSD U3 - complex - mouse move_markdown_instruction: "# mouseDidMove\r\n\r\nWe - can also use Boolean expressions to check whether or not the mouse has moved. - The `mouseDidMove` block will return `false` if the mouse is still, but `true` - if the mouse has been moving.\r\n\r\n# Do This\r\nRight now, this program - just displays a salt shaker sprite. You'll need to use `mouseDidMove` so - that you can \"shake\" the salt by moving the mouse back and forth.\r\n\r\n* - Add a conditional that checks if `mouseDidMove`.\r\n* If the conditional is - true, rotate the salt sprite randomly to the left or right.\r\n\r\n_Challenge: - Can you keep track of how many times the `mouseDidMove` shakes the salt, and - then rotate it right side up after 100 shakes?_" - CSD U3 - complex - nested conditional_markdown_instruction: "# Possible Solution - #1 - Nested Conditionals\r\n\r\nThe way you phrase the previous challenge - says a lot about how you might approach solving it. For example, you might - have phrased moving up and staying on screen as:\r\n\r\n\tIf the up arrow - was pressed then check if the sprite hasn't gone off the top of the screen - and move up.\r\n\r\nThis structure of first asking one question, and then - asking a second question if the first was true is accomplished using a **nested - if statement**. Nested if statements put one if statement inside another if - statement. You can think of this as asking a question and then based on the - answer asking another question before making a decision. We could pseudocode - the previous phrase as:\r\n\r\n\tIf the up arrow was pressed\t// First Question\r\n \tIf - my y > 0\t\t\t\t// Second Question\r\n \tmove up\t\t\t\t// Only runs - if both questions were true\r\n\r\n\r\n# Do This\r\n\r\nHere's the same code - from the challenge, with the up arrow using a nested conditional. \r\n\r\n* - Use the same nested conditional pattern on the other 3 arrow keys.\r\n" - CSD U3 - conditionals - arrows and gears_markdown_instruction: "# Gears with - Conditionals\r\n\r\nLet's make the gears spin only when the space key is - being held down.\r\n\r\n# Do This\r\n\r\n* Add an `if` statement.\r\n* Use - `keyDown` as input to the if statement to check when the space key is pressed.\r\n* - Move the code that makes the gears rotate inside the `if`." - CSD U3 - conditionals - first conditional 2_markdown_instruction: "<img src=\"https://images.code.org/abd459d8d1477ac2f582417f4334cdaa-image-1466107090414.gif\" - style=\"width:200px;float:right\">\r\n# Visible\r\n\r\nNow that you have conditionals - and images, sometimes it's useful to hide the image for a while and then - show it again. You can do this using the `visible` property. The visible property - is a little different from other properties you have seen in the past: It - is a Boolean value, either `true` (the sprite is visible) or `false` (the - sprite is **not** visible). By default, visible is set to `true`.\r\n\r\n# - Do This\r\nMake the balloon pop when it hits the edge of the game area!\r\n\r\n* - Add an `if` statement that checks to see if the balloon has hit the edge.\r\n\t* - Use a watcher on `balloon.scale` to help you out\r\n* Create a pop sprite - which uses the \"pop\" visual in the animation tab.\r\n* Set the pop's `visible` - property to `false` to start.\r\n* Inside the if add two statements.\r\n\t* - One that sets the `visible` property to hide the balloon sprite.\r\n * - One that sets the `visible` property to show the pop sprite." - CSD U3 - conditionals - first conditional_markdown_instruction: "<img src=\"https://images.code.org/36c5543076622c96f7dabce8bc37f995-image-1468425774455.54.03 - PM.png\" style=\"float:right;width:100px\">\r\n# If Statement\r\n\r\nThe Boolean - expressions we tested on the last level allow us to ask questions. In order - to use the answers we need to use something called an **if statement**. If - statements take a Boolean expression as input and check whether it is true - or false. If the Boolean expression is true, then the computer executes the - code inside the if statement.\r\n\r\nFor example, the code below checks whether - the sprite's width is greater than 100. If it is, it prints \"This is a - wide sprite\" to the console log.\r\n\t\r\n\tif( sprite.width > 100 ){\r\n \tconsole.log(\"This - is a wide sprite\");\r\n }\r\n\r\nIf statements usually go inside your - draw loop because we want to check them each time the loop runs. \r\n\r\n# - Do This\r\n\r\nThe race car program you wrote earlier is loaded here for you.\r\n\r\n* - Add an `if` statement after you update the position of the race car. \r\n* - Move the boolean expression from the console.log statement to the input of - the if statement.\r\n* Inside the `if` statement add a statement to draw text - on the screen to say \"Winner\".\r\n" - CSD U3 - conditionals - transition 2_markdown_instruction: "# More Practice - With Booleans\r\n\r\nLet's use one more Boolean expression to check the condition - of a sprite.\r\n\r\n# Do This\r\nThere is a growing balloon sprite created - for you. Can you create an expression to check when the balloon hits the edge - of the game area?\r\n\r\n* Add a `console.log` statement.\r\n* Add a Boolean - expression inside the `console.log` that checks whether the balloon has hit - the edge of the game area.\r\n* Hint: Use the scale of the balloon. You might - have to do some guess and check testing to find the right scale." - CSD U3 - conditionals - transition_markdown_instruction: "# Booleans\r\n\r\nIn - the past few levels, we have been comparing values of sprites to find out - whether something is true or false. Let's start putting that in the context - of an animation.\r\n\r\n# Do This\r\nThe program draws a race car and a finish - line. We are going to figure out when the race car crosses the finish line. - The sprites have all been set up for you.\r\n\r\n* Add a `console.log` statement - inside the draw loop. [Show me where](#triggercallout=callout)\r\n* Add an - Boolean expression inside the `console.log` that asks \"Is the x position - of the race car less than the x position of the finish line?\" (You can look - at [this level](/s/csd3/stage/8/puzzle/2) to see what the statement might - look like.)\r\n* Look at the output of the program as the car moves. When - does the output change? Why?" - CSD U3 - images - animations_markdown_instruction: "# Animations\r\n\r\nYou - have seen through out this Unit that when you put together a set of images - and play them close together back to back it looks like movement! Well sprites - make that animation easier! You can put together a set of images to create - an animation. There are pre-loaded animations for you in the animations manager. - \r\n\r\nSet the animation with setAnimation.\r\n\r\n# Do This\r\n\r\n* Create - a sprite\r\n* Add the animation." - CSD U3 - images - changing scene_markdown_instruction: "# Images\r\n\r\nUse - the animations tab to finish making all three sprites fish images.\r\n\r\n<img - src=\"https://images.code.org/f947fc6800cd1abda023b08c20a2ee87-image-1477679298953.gif\" - style=\"float:right\">\r\n\r\n# Do This\r\nYour goal is to finish the underwater - scene so all three sprites are fish like the example on the right. \r\n\r\n* - There is a rectangle sprite already created for you for each fish.\r\n* Run - the code to see how it works.\r\n* Add a `setAnimation` command to change - the look for the remaining two fish. \r\n* Run it to see that your rectangle - is now an image!\r\n" - CSD U3 - images - Embed Project_markdown_instruction: "Example of the Final - Project" - CSD U3 - images - first image_markdown_instruction: "# Images\r\n\r\nUp until - now all of your sprites have been rectangles. No longer! Now you can use pictures - for your sprites instead.\r\n\r\nCheck out the animations tab by clicking - the <img src=\"https://images.code.org/9471c62f11f3c6065c0d2da523f2ac89-image-1465515854142.43.49 - PM.png\" style=\"width:100px\"> button above the display area.\r\n\r\nThere - is an image there that have been loaded for you!\r\n\r\nIn order to use that - image you will need to use the `setAnimation` command. You have to create - the sprite before you can set its animation.\r\n\r\n# Do This\r\n\r\nThere - is a rectangle sprite already created for you. All you need to do is change - it to an image.\r\n\r\n* Add a call to `setAnimation` to set the animation - to the image provided\r\n* Run it to see that your rectangle is now an image!" - CSD U3 - images - first sprite with image_markdown_instruction: "# Images\r\n\r\nRectangles - are great, but if you're going to make animations and games that really look - great, you'll need some way to add more interesting images to your sprites.\r\n\r\nOver - on the **Animations Tab** you'll see three images that have been loaded for - you! You can get to the animations tab by clicking the <img src=\"https://images.code.org/9471c62f11f3c6065c0d2da523f2ac89-image-1465515854142.43.49 - PM.png\" style=\"width:100px\"> button above the display area.\r\n\r\n<img - src=\"https://images.code.org/f694a37bbadcf0533e7b19d8c0f5309b-image-1465580394090.35.11 - PM.png\" style=\"width:300px;float:right\">\r\n\r\nOnce you have created a - sprite you can **use the `setAnimation()` command to change the look of your - sprite from a rectangle to a picture.** The blocks make this super easy to - do as the names of all the images you have loaded in the animation tab show - up in the `setAnimation()` dropdown. The alien is set up for you as an example.\r\n\r\n# - Do This\r\nChange the sprite to your favorite image from the animations tab.\r\n\r\n* - A sprite that is set to an image has already been created for you.\r\n* Run - the code to see how it works.\r\n* Change the input to the `setAnimation` - command to change the look of the sprite.\r\n* Try out all the different images." - CSD U3 - images - fish free play_markdown_instruction: "# Fish Free Play\r\n\r\nHere - are the swimming fish you have been working on. Continue to improve the animation!\r\n\r\n# - Do This\r\n\r\n* Add another sea creature to the scene.\r\n* Make the sea - creature move.\r\n* Make one of the fish follow the mouse.\r\n* Add more ideas - of your own!" - CSD U3 - images - fish with arrows_markdown_instruction: "# Fish With Arrows\r\n\r\nThe - fish are back. Can you make the fish move left only when the left arrow key - is pressed down?\r\n\r\n# Do This\r\n\r\n* Add an if statement to check when - the left arrow key is pressed down.\r\n* Move the statements for moving the - fish inside the if statement." - CSD U3 - images - kite free play_markdown_instruction: "# Kite Free Play\r\n\r\nHere - is the flying kite you have been working on. Continue to improve the animation!\r\n\r\n# - Do This\r\n\r\n* Add at least 1 other sprite.\r\n* Make the sprite move.\r\n* - Improve the background by adding clouds or other objects.\r\n* Add more ideas - of your own!" - CSD U3 - images - kiteFlying_markdown_instruction: "# Flying Kite\r\n\r\nNow - that you have a kite, make it fly around.\r\n\r\nTo do this we will need to - move the kite and update the end position of the line that is the string. - You have done similar things with variables before but now you will be using - properties.\r\n\r\n# Do This\r\n\r\n* Make the kite move around the top right - corner of the screen randomly.\r\n* Move the code for the string of the kite - to the Draw Animations section since it is now moving!\r\n* Update the end - position of the line so that one end of string stays at the center of the - kite." - CSD U3 - images - nextFrame_markdown_instruction: "# Next Frame\r\n\r\nOn the - last level the animation you used continously looped through the animation - and never stopped. Sometimes we want to control when the animation changes. When - you want to create a sequence but not have it loop you can click the button - in the anmations tab *** show example***. Then in the code you can control - when you move to the next frame using `nextFrame`. \r\n\r\n\r\n# Do This\r\n\r\nThere - is a sprite already created for you and 4 images loaded into the animations - tab. Make the sprite change frames each time the space bar is pressed down.\r\n\r\n* - Create a conditional to respond to the space bar\r\n* Inside the conditional - call `nextFrame` to move the sprite to the next frame" - CSD U3 - images - race images_markdown_instruction: "# Race Cars\r\n\r\nYou - made a racing game in the last lesson. You can now make those rectangles look - like race cars!\r\n\r\n# Do This\r\n\r\n* Use the race car images in the animations - tab to update your racing animation." - CSD U3 - images - random movement_markdown_instruction: "<img src=\"https://images.code.org/fccef5d23434917c0a22361cb6e69666-image-1477679738105.gif\" - style=\"float:right\">\r\n\r\n# Updating Fish\r\n\r\nThe same thing you did - on the last level will help your fish look more like they are swimming. Update - your scene to make the fish look like they don't swim in a perfectly straight - line. \r\n\r\n# Do This\r\nYour goal is to finish the underwater scene so - all three sprites are fish like the example on the right. \r\n\r\n* Use a - small random rotation to **make your fish wiggle**.\r\n" - CSD U3 - images - review_markdown_instruction: "# Sprites Review\r\n\r\nYou - have learned a lot about sprites already and conditionals. Can you use those - skills to create a square that moves in all 4 directions in response to the - arrow keys?\r\n\r\n# Do This\r\n\r\n* Create a sprite\r\n* Make the sprite - move up, down, left, and right in response to the arrow keys" - CSD U3 - images - scale_markdown_instruction: "# Upload your own image\r\n\r\nSo - the image you uploaded probably was not the size you wanted was it? You can - fix that! There is a property for sprites called `scale`. **Scale controls - the width and the height of the sprite at once.** Using scale is better than using - width and height for images because...\r\n1. It's one property instead of - two.\r\n2. You keep the image ratio and it doesn't distort it.\r\n\r\n**To - make the image smaller you want to use a scale less than 1. To make the image - bigger you want to use a number greater than 1. A scale of 1 would keep it - the same.**\r\n\r\n# Do This\r\n\r\n* Resize your kite using `scale` to better - fit the picture." - CSD U3 - images - setAnimation_markdown_instruction: "# Upload your own image\r\n\r\nYou - can also use the Animation tab to upload your own image.\r\n\r\n# Do This\r\nYou - are going to make a flying kite. The first step is to pick out a kite you - like.\r\n\r\n* Find an image of a kite you want to use. It works best if - it has a clear background.\r\n* Open the animations tab.\r\n* Click <img src=\"https://images.code.org/346f6657dba57b0c3bd5deb534f76b69-image-1466194432449.13.05 - PM.png\" style=\"width:50px\">\r\n* Click <img src=\"https://images.code.org/60c0371b45b29f10a3c8530db9154428-image-1466194434329.13.16 - PM.png\" style=\"width:50px\">\r\n* Select a file from your computer.\r\n* - Rename your image so it has a name that is easy to remember. To rename it - click the text below the image. <img src=\"https://images.code.org/c7809f27743bcb4cd86e46a4493c5c7a-image-1466194516357.15.04 - PM.png\" style=\"width:60px\">\r\n* Set the kite sprite to display your image.\r\n\r\nDon't - worry if your kite image is too big! You'll learn how to fix that in the - next level." - CSD U3 - images - switch the picture_markdown_instruction: "# Switching Images\r\n\r\nYou - don't have to keep the same image the whole time. In fact since your *image* - was moving around the screen it would be cool to have it fact the correct - direction as it moves.\r\n\r\n# Do This\r\n\r\nYour work was copied here as - well\r\n\r\n* Add a call to `setAnimation` inside each if statement to the - correct image" - CSD U3 - images - visible_markdown_instruction: "# Visible\r\n\r\nNow that - you have conditionals and images sometimes it appropriate to hide the image - for a while and then show it again. You can do this using the `visible` property. - The visible property is a little different than some of the other properties - you have seen in the past. It is a boolean value. So visible is either true - or false. By default visible is set to true.\r\n\r\n\r\n# Do This\r\n\r\n* - In response to something set the sprite to visible and invisible.\r\n" - CSD U3 - sprites - motiviation_markdown_instruction: "# How Many Variables?\r\n\r\nIn - the last lesson you learned how to use the **counter pattern** (`x = x + 1`, - `x = x - 0.5`, `x = x - 1`, etc.) to create smooth animations. Using this - pattern in many different ways allows you to create interesting and complex - animations.\r\n\r\nWatch the animation here. With a partner discuss: \r\n\r\n* - How many counter variables would you need to create to make this animation? - What are they used to animate?\r\n* What would you name your variables?\r\n* - What are the challenges of using counter variables in a scene like this?" - CSD U3 - Sprites - Sprite v Rect_markdown_instruction: "# Sprites vs Rect\r\n\r\nCurently - sprites and rectangles seem really similar. It will become clear later on - why sprites are more powerful than basic shapes. Before you get there though - it is important to call out a major difference in the way sprites and rectangles - draw.\r\n\r\n# Do This\r\nCan you will figure out the difference by just trying - this?\r\n\r\n* Create a rectangle with a width and height of 30\r\n* Set the - fill for the rectangle to a different color than gray (So its clear which - is the rectangle)\r\n* Create a sprite and give it the same x and y values - as you gave the rectangle\r\n* Make sure to call `drawSprites` in the draw - loop\r\n* Run the program\r\n* Can you see the difference?" - CSD U3 abstraction accelerateX_markdown_instruction: "# Velocity and the Counter - Pattern\r\n\r\nAs you just saw, using a `sprite.velocityX` property with the - counter pattern will change a sprite's velocity during the program. This - makes the sprite speed up. Do a little practice using this pattern yourself.\r\n\r\n# - Do This\r\n\r\nThis program already makes a car move across the screen, but - it's going very slowly\r\n\r\n* Use the counter pattern with the sprite's - velocityX property to make the car speed up. [Show me where](#triggercallout=code_triggered)" - CSD U3 abstraction accelerateY up_markdown_instruction: "# Rising Bubble\r\n\r\nThis - program makes a bubble rise up the water. Can you make it get faster as it - rises?\r\n\r\n# Do This\r\n\r\n* Use the counter pattern and the sprite's - y velocity to make the bubble move up more quickly." - CSD U3 abstraction accelerateY_markdown_instruction: "# Falling Rock\r\n\r\nThe - rock should speed up as it falls down the screen. Can you use the same counter - pattern with `velocityY` inside the draw loop to make the rock go faster and - faster as it falls?\r\n\r\n# Do This\r\n\r\n* Use the counter pattern with - the sprite's y velocity to make the rock speed up as it falls. [Show me - where](#triggercallout=code_triggered)\r\n\r\n*Challenge: Can you make the - rock spin as it falls?*" - CSD U3 abstraction add coin_markdown_instruction: "# Add a Coin\r\n\r\nIn the - next few levels you'll add to your program to make a simple game. In this - game the player will collect points to increase the score. This is a good - chance to see how different kinds of movement can affect the way a game feels, - and it will also just help you practice programming skills.\r\n\r\n# Do This\r\n\r\nIn - this level you'll just be adding a new coin sprite to the game. You should - be working at the top of your program, outside the draw loop.\r\n\r\n* Use - the `createSprite()` block to create a new sprite. Make sure to give it a - descriptive name like **coin**\r\n* Use the `sprite.x` and `sprite.y` properties - of the sprite to give it a random X and Y position between 0 and 400\r\n* - In the Animation Tab there is already a coin animation. Use the `sprite.setAnimation()` - block to give your sprite this animation.\r\n\r\nTest your code before moving - on. When you run the game you should see a coin sprite appear somewhere randomly - on the screen." - CSD U3 abstraction animation circle_markdown_instruction: "# Animate the Satellite\r\n\r\nNow - you are ready for the final piece of the drawing: making the satellite circle - the moon.\r\n\r\n#Do This\r\n\r\nUse `setSpeed()` and `getDirection()` to - make the satellite circle the moon. " - CSD U3 abstraction animation rotate_markdown_instruction: "# Rotation\r\n\r\nMake - earth rotate using the `rotationSpeed` property." - CSD U3 abstraction animation setSpeed_markdown_instruction: "# Animate Your - Picture\r\n\r\n<img style=\"float:right\" src=\"https://images.code.org/d2ad362f37d0e5f9b98691654256d2fb-image-1469469372823.gif\">\r\n\r\nNow - that everything is in the right place, you can make them move using the properties - and methods you have learned.\r\n\r\n# Do This\r\n\r\nUse `rotationSpeed`, - `rotationToDirection`, `getSpeed`, `getDirection`, and `setSpeed` to animate - your scene, as seen in the image to the right. " - CSD U3 abstraction animation setup_markdown_instruction: "# Setting up your - picture\r\n<img style=\"float: right; margin: 4px;\" src=\"https://images.code.org/b90748874dc9094386134be8ec1b95e5-image-1469228306235.png\">\r\nBefore - you make anything move, you'll need to start all your sprites off in the - right place. The Earth has already been positioned for you.\r\n\r\n# Do This\r\n\r\nCreate - sprites for the moon, spaceship, and satellite. Use `setAnimation` to add - a picture to each one, and use the `x` and `y` properties to put them in the - right place on the screen.\r\n\r\n" - CSD U3 abstraction animation_markdown_instruction: "# Setting up your picture\r\n<img - style=\"float: right; margin: 4px;\" src=\"https://images.code.org/b90748874dc9094386134be8ec1b95e5-image-1469228306235.png\">\r\nBefore - you make anything move, you'll need to start all your sprites off in the - right place. The Earth has already been positioned for you.\r\n\r\n# Do This\r\n\r\nCreate - sprites for the moon, spaceship, and satellite. Use `setAnimation` to add - a picture to each one, and use the `x` and `y` properties to put them in the - right place on the screen.\r\n\r\n" - CSD U3 abstraction bug template_markdown_instruction: "# velocityY\r\n\r\n`velocityY` - is like `velocityX`, but it moves things up and down. Can you use it to make - the dragonfly walk up the screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` to - make the sprite go up the screen.\r\n\r\n*Hint: Should velocity by positive - or negative to move the sprite up the screen?*" - CSD U3 abstraction car rotation_markdown_instruction: "# rotateToDirection\r\n\r\nHere's - the car you just made move. It stayed on the road, but it was not pointing - in the right direction. You can tell the sprite to always point in the direction - that it's moving by adding `car.rotateToDirection = true` outside the draw - loop, right after you create your sprite.\r\n\r\n# Do This\r\n\r\nUse the - `rotateToDirection` property to make your car face the direction it's moving." - CSD U3 abstraction car template_markdown_instruction: "# Moving at an Angle\r\n\r\nIf - you use `velocityX` and `velocityY` at the same time, you can move your sprite - at an angle. See if you can keep the car on the road by using these two properties.\r\n\r\n# - Do This\r\n\r\nUse `velocityX` and `velocityY` to make the car move along - the road." - CSD U3 abstraction change velocityX_markdown_instruction: "# Moving Faster\r\n\r\nRemember - when you used the counter pattern `sprite.x = sprite.x + 1` to change your - sprite's position inside the draw loop? Now you can use the same type of - counter pattern with `sprite.velocityX` to change your sprite's speed as - your program runs. Can you add a line of code in the draw loop to make the - sprite swim faster and faster?\r\n\r\n# Do This\r\n\r\nMake the fish get faster - by adding `fish.velocityX = fish.velocityX + 1` inside the draw loop. [Show - me where](#triggercallout=code_triggered)" - CSD U3 abstraction change velocityXY_markdown_instruction: "# Getting faster - at an angle\r\n\r\nHere's a different car that uses the same counter pattern - we used in the last lesson to make the car go faster, but it changes both - `velocityX` and `velocityY`. ([Show me where](#triggercallout=code_triggered)) It - also prints the speed and direction to the debug console. What do you think - will happen when you run the code?\r\n\r\n# Do This\r\n\r\nDiscuss with your - partner what you think will happen when the code runs, then run it and see - whether you were right. Why do you think the car moves in this way?\r\n\r\n[//]: - #(https://images.code.org/4d1af9cc274f30b9d9263a47f9f64f13-image-1470941637433.png)" - CSD U3 abstraction change velocityY_markdown_instruction: "# Moving Faster\r\n\r\nJust - as you can change `velocityX` inside the draw loop, you can change `velocityY` - to make your sprite move faster up or down. Can you add code into the draw - loop to make the dragonfly go faster?\r\n\r\n# Do This\r\n\r\nUse the `velocityY` - property to make the dragonfly fly faster and faster up the screen. [Show - me where](#triggercallout=code_triggered)" - CSD U3 abstraction circle_markdown_instruction: "# getDirection()\r\n\r\nYou've - been using `getSpeed` and `setSpeedAndDirection` to change the speed of a - sprite in a particular direction. What do you think will happen if you keep - the speed the same, but use `getDirection` and `setSpeedAndDirection` to change - the direction? Look at the code below and predict what it will do. After - you've run it, try changing the direction by different amounts to see what - happens.\r\n\r\n# Do This\r\n* Read the code where the direction is changed - and predict what it will do [Show me where](#triggercallout=code_triggered)\r\n* - Run the program and observe what it does\r\n* Modify the program to make the - car spin in large circles\r\n* Modify the program to make the car move in - the opposite direction\r\n\r\n[//]: #(https://images.code.org/63b04e63fc4bc21700b64ef3d6c6b8b7-image-1471475653020.png)" - CSD U3 abstraction decelerateX_markdown_instruction: "# Slowing Things Down\r\n\r\nNow - that you've had some practice speeding things up, can you use the counter - pattern to slow sprites down? \r\n\r\n# Do This\r\n\r\nThe car is going to - run into the water! You'll need to use the counter pattern to slow it down.\r\n\r\n* - Use the `sprite.velocityX` block with a counter pattern to slow the car down - by 0.25 as it moves across the screen. \r\n* Discuss with your Partner: What - do you think will happen when the car finally stops?\r\n\r\n*Challenge: Add - code that makes the car slow down only if his velocityX is greater than 0*\r\n" - CSD U3 abstraction decelerateY_markdown_instruction: "# Simulating Gravity\r\n\r\nIn - the last level you slowed down the car with the `sprite.velocityX` block and - the counter pattern. It almost looked like the car was getting pulled to the - left.\r\n\r\nIf you use this same pattern with the `sprite.velocityY` block - it will look like your sprite is always being pulled down, which is exactly - what gravity does!\r\n\r\n# Do This\r\n\r\nThe rock is thrown in the air but - it never falls back down.\r\n\r\n* Use the `sprite.velocityY` block with the - counter pattern to make the rock slow down and then fall in the other direction.\r\n* - Experiment with different values in your counter pattern. Do you want the - rock to slow down quickly or gradually? What looks most realistic to you?\r\n* - Discuss with your partner: Why are you setting the rock's initial velocity - outside the draw loop? Why are you changing the sprite's velocity inside - the draw loop?" - CSD U3 abstraction demo pic_markdown_instruction: "# Space Animation\r\n\r\nIn - the next few puzzles, you'll be building the space animation on the left. You - can use your activity guide to help you plan how to make the different type - of movements you see.\r\n\r\n# Do This\r\n\r\n* Click \"Run\" to see the animation.\r\n* - Look at how all the different sprites are moving and update your activity - guide with any ideas you have.\r\n* Discuss with a partner how you might make - this picture." - CSD U3 abstraction dragonfly (OLD)_markdown_instruction: "# velocityY\r\n\r\n`velocityY` - is like `velocityX`, but it moves things up and down. Can you use it to make - the feather float the down screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` - to make the sprite go down the screen.   [Show me where](#triggercallout=code_triggered)" - CSD U3 abstraction dragonfly OLD_markdown_instruction: "# velocityY\r\n\r\n`velocityY` - is like `velocityX`, but it moves things up and down. Can you use it to make - the dragonfly walk up the screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` to - make the sprite go up the screen.   [Show me where](#triggercallout=code_triggered)\r\n\r\n*Hint: - Should velocity be positive or negative to move the sprite up the screen?*" - CSD U3 abstraction drive_markdown_instruction: "# Race Your Car\r\n\r\nNow - that you can steer, you need to control the speed of your car. Use the `setSpeed` - method to make the car go faster when you push the up arrow and slower when - you push the down arrow.\r\n\r\n# Do This\r\n\r\nAdd two conditionals to your - car program. \r\n\r\n* The first should check whether the up arrow is pressed, - and increase the speed of the car. \r\n* The second should check whether the - down arrow is pressed and decrease the speed of the car.\r\n\r\n*Hint: What's - the difference between `keyDown` and `keyWentDown`? Which do you think will - work better for changing the speed of the car?*" - CSD U3 abstraction fish template_markdown_instruction: "# velocityX\r\n\r\nLast - time you made the fish move, you did it by changing its `x` property in the - draw loop. Now, you can use `velocityX` to make your sprites move left or - right by a certain amount each time they are drawn.\r\n\r\n# Do This\r\n\r\nUse - the `velocityX` block to make the sprite go across the screen.\r\n" - CSD U3 abstraction horse_markdown_instruction: "# Horse\r\n\r\nThe horse is - trying to make its escape. Can you use the `velocityX` and `velocityY` blocks - to make the horse jump over the fence?\r\n\r\n\r\n# Do This\r\n\r\n* Set the - starting `velocityX` and `velocityY` values outside the draw loop [Show me - where](#triggercallout=code_triggered1)\r\n* Change your sprite's `velocityY` - using a counter pattern inside the draw loop [Show me where](#triggercallout=code_triggered2)\r\n" - CSD U3 abstraction horse2_markdown_instruction: "# Better Horse\r\n\r\nIf you're - making a game, you'll want the horse to jump according to user input. This - program automatically moves the horse to the right, but the horse should jump - when the user presses the up arrow key. You will need to add three lines - of code to make this work. First, you'll need to check whether the up arrow - key has been pressed, and make the horse move up if it has. \r\n\r\n\r\n# - Do This\r\n\r\n* Inside the `if` block that checks whether the up arrow key - has been pressed, use the `velocityY` block to make the horse move up by 4 - each time. [Show me where](#triggercallout=code_triggered)\r\n\r\n" - CSD U3 abstraction horse3_markdown_instruction: "# Better Horse\r\n\r\nNext, - you'll make the horse fall back down to the ground. You'll need to check - whether the horse is in the air by looking at its y position. If it's in - the air it should fall down, but once it touches the ground it should stop. - The `if/else` block has already been provided for you.\r\n\r\n# Do This\r\n\r\nLook - at the `if/else` block that checks whether the horse's position is less than - 325. [Show me where](#triggercallout=code_triggered1)\r\n\r\n* If the horse's - y position is less than 325, use a counter pattern to change the horse's - velocityY by 0.1 on each tick of the draw loop. \r\n* If the horse's y position - is not less than 325, use the `velocityY` to change its vertical velocity - to zero. [Show me where](#triggercallout=code_triggered2)\r\n\r\n" - CSD U3 abstraction jump_markdown_instruction: "# Jumping\r\n\r\nYou now have - all the blocks you need to make your sprite jump!\r\n\r\nJust as you checked - whether your fish was at the left edge, you'll need to check whether the - frog is on the ground. If it is, it could either jump up or stay still, so - you'll need one more `if` block to check whether the user has pressed the - up arrow ([Show me where](#triggercallout=code_triggered1)).\r\n\r\nYou'll - also need to check whether the frog has reached its highest point, and send - it back down if it has.\r\n\r\n# Do this\r\n\r\n* Find the `if` statement - that checks whether the sprite is on the ground, and look at the `if` statement - inside of it that checks whether the user has pressed the \"up\" arrow key. - [Show me where](#triggercallout=code_triggered1)\r\n\t* Use the `velocityY` - block to make the frog jump up when the user presses the arrow key.\r\n\t* - Use the `velocityY` block to make the frog stop moving otherwise.\r\n* Add - an if statement that does the following [Show me where](#triggercallout=code_triggered2)\r\n * - Checks whether the frog sprite has reached its highest point.\r\n * If so, - use the `velocityY` block to make the sprite fall back down.\r\n\r\n" - CSD U3 abstraction jumper intro_markdown_instruction: "# Horse Jumper\r\n\r\nNow - that you've learned these new blocks, you can start to make a horse jumper - game. Press \"Run\" to play the game on the left. You can use the up arrow - to jump over the tumbleweed. What block will you need to make the tumbleweed - move? How many different ways does the horse move?\r\n\r\n\r\n" - CSD U3 abstraction jumper template_markdown_instruction: "# Horse Jumper\r\n\r\nNow - that you've learned these new blocks, you can start to make a horse jumper - game. Press \"Run\" to play the game on the left. You can use the up arrow - to jump over the tumbleweed. What block will you need to make the tumbleweed - move? How many different ways does the horse move?\r\n\r\n\r\n" - CSD U3 abstraction jumping advanced_markdown_instruction: "# Jumping with the - Counter Pattern\r\n\r\nIn the last level you just set the sprite's velocity - to -5 to make it jump. Eventually the sprite slows down and then starts falling - again. Now you'll build a slightly more realistic jump by using the counter - pattern with the sprite's y velocity.\r\n\r\n# Do This\r\n\r\nInside the - `if` block you should have code that sets the sprite's y velocity to a number.\r\n\r\n* - Replace that line of code with new code, `flyer.velocityY = flyer.velocityY - - 5`\r\n* Discuss with Your Partner: How did this change affect the way the - sprite moves? How does subtracting a different amount change the way your - sprite moves? Do you prefer one or the other type of jump?" - CSD U3 abstraction jumping template_markdown_instruction: "# Jumping\r\n\r\nIncreasing - a sprite's y velocity inside the counter pattern can simulate gravity. By - adding user interactions you can make your sprite appear to jump as well. - For starters you'll make a simple jump and then make it more realistic looking - in the next level.\r\n\r\n# Do This\r\n\r\nA sprite has already been created - for you that falls because its y velocity is increased inside the draw loop. - You'll need to make this sprite appear to jump.\r\n\r\n* Inside the draw - loop add an `if` block\r\n* Use the `keyWentDown` block to make the block - respond to the \"up\" arrow being pressed\r\n* Inside your `if` block set - the sprite's y velocity to -5\r\n\r\nRun the code to make sure it works. - Then experiment with different values. How could you make your sprite jump - higher or lower?" - CSD U3 abstraction jumping_markdown_instruction: "# Jumping\r\n\r\nIncreasing - a sprite's y velocity inside the counter pattern can simulate gravity. By - adding user interactions you can make your sprite appear to jump as well. - For starters you'll make a simple jump, and then make it more realistic looking - in the next level.\r\n\r\n# Do This\r\n\r\nA sprite has already been created - for you that falls because its y velocity is increased inside the draw loop. - You'll need to make this sprite appear to jump.\r\n\r\n* Inside the `if` - block that checks whether the up arrow has been pressed, set the sprite's - y velocity to -5. [Show me where](#triggercallout=callout1)\r\n* Discuss with - a neighbor: Why does this code run the way it does? How would using a number - besides -5 affect the way the code works? How could you jump higher or lower?" - CSD U3 abstraction left right counter 2_markdown_instruction: "# Floating Left\r\n\r\nIn - the last level you got detailed instructions on how to make your sprite start - floating to the right. This time you'll need to make your sprite float to - the left on your own. You should be pretty comfortable with using velocity - and the counter pattern together at this point. If you're having trouble, - talk to a neighbor or review some of the past levels.\r\n\r\n# Do This\r\n\r\n* - Add code to your draw loop that will make the sprite start moving to the left - when the \"left\" arrow is down.\r\n* Make sure you're using velocity and - the counter pattern together.\r\n\r\nOnce your code is working share what - you wrote with a partner. Is your sprite easy to control? Does changing the - amount you add or subtract in the counter patterns you wrote affect the way - the game feels? What kind of game might be fun to make with a player that - moves like this?" - CSD U3 abstraction left right counter_markdown_instruction: "# Floating Right\r\n\r\nYou're - now using the counter pattern with the sprite's Y velocity to simulate gravity - and jumping. If you use the sprite's X velocity in the counter pattern then - you can make your sprite float from side to side as well.\r\n\r\n# Do This\r\n\r\nIn - this level you'll make your sprite start floating to the right when the right - arrow is pressed\r\n\r\n* Add an `if` statement inside your draw loop below - the one you created for the \"up\" arrow\r\n* Use the `keyDown` block to make - the `if` statement respond to when the \"right\" arrow is pressed\r\n* Inside - the `if` block use the counter pattern with the `sprite.velocityX` block to - add 0.1 to the sprite's X velocity\r\n\r\nRun your code to see how it works. - The sprite should start floating to the right when you press the right arrow - and jump when you press \"up\". You'll make the left arrow work in the next - level." - CSD U3 abstraction looping_markdown_instruction: "# Looping\r\n\r\nThe game - will be more fun if the frog can jump more than once. You can make the mushroom - \"loop\" by checking whether it's moved past the left edge and moving it - back to the right edge when it has.\r\n\r\n# Do this\r\n* Find the `if` statement - that checks whether the mushroom has passed the left edge. [Show me where](#triggercallout=code_triggered1)\r\n* - Use the `sprite.x` block to set the mushroom's position back to the right - edge if it has.\r\n\r\n" - CSD U3 abstraction make it your own_markdown_instruction: "# Make It Your Own\r\n\r\nYou - now have the basic mechanics of your game in place, so it's time to make - it your own. What do you want to happen? Should the character get points every - time it collects a coin? Can you add a scoreboard like you learned in the - last lesson? Do you want to make another coin? What about a \"bad coin\" that - takes away points?\r\n\r\n# Do This\r\n\r\nMake at least one improvement to - the game that makes it your own. Be prepared to share your changes and improvements - with your classmate." - CSD U3 abstraction parabola_markdown_instruction: "# Basketball\r\n\r\nHere's - a basketball that's thrown up, then falls back down. Can you use the `velocityX` - block to make it go through the hoop?\r\n\r\n\r\n# Do This\r\n\r\nUse the - `velocityX` block outside the draw loop to make the ball move to the right - by 3 each time. [Show me where](#triggercallout=code_triggered)\r\n\r\n[//]: - #(https://images.code.org/119358fc8705640a24d2138439ea7cc1-image-1472496770816.png)" - CSD U3 abstraction race template_markdown_instruction: "Template for the race - game" - CSD U3 abstraction reset coin_markdown_instruction: "# Reset Coin\r\n\r\nWhen - your character touches the coin you should reset it somewhere on the screen.\r\n\r\n# - Do This\r\n\r\n* Place an `if` block inside of your draw loop\r\n* Use the - `sprite.isTouching()` block as the condition to detect when the character - touches the coin\r\n* Inside the `if` block write code that sets the coin's - X and Y position to random numbers between 0 and 400\r\n\t* *Hint: You've - already written this code elsewhere in your program*\r\n\r\nTest your code - before moving on. When your player touches the coin it should move somewhere - else on the screen." - CSD U3 abstraction rotation accelerate_markdown_instruction: "# Speeding up\r\n\r\nNow - that you've used `rotationSpeed` outside the draw loop to start your sprite - rotating at a certain speed, you can also use `rotationSpeed` inside the draw - loop to change how fast the sprite rotates. Look at the code inside the draw - loop. It uses the counter pattern to make the wheel speed up when the up - arrow is pressed. Can you use a different counter pattern to make the wheel - slow down when the down arrow is pressed?\r\n\r\n# Do This\r\n\r\n* Look at - the code that makes the wheel spin faster when the up arrow is pressed [Show - me where](#triggercallout=code_triggered1)\r\n* Add code that makes the wheel - spin slower when the down arrow is pressed [Show me where](#triggercallout=code_triggered2)" - CSD U3 abstraction rotation control_markdown_instruction: "# Controlling Speed\r\n\r\nYou - used `rotatationSpeed` outside the draw loop to make your sprite rotate when - your program started. You can also use `rotationSpeed` **inside** the draw - loop to change the speed of the sprite during the game. For example, a sprite - can start rotating when the user presses the space bar, and it will keep rotating - until it's told to stop.\r\n\r\n# Do This\r\n\r\n* Look at the `if` statement - inside the draw loop that checks whether the space bar has been pressed. [Show - me where](#triggercallout=code_triggered1)\r\n* Use the `rotationSpeed` block - to make the color wheel start spinning when the user presses the space bar." - CSD U3 abstraction rotation_markdown_instruction: "# rotationSpeed\r\n\r\nYou've - already learned how to make your sprite spin by using the `rotation` block. For - example, when you wanted your sprite to rotate by two degrees each time it - was drawn, you put `sprite.rotation = sprite.rotation + 2` inside the draw - loop.\r\n\r\nNow, you can use `rotationSpeed` to make your sprites rotate - by a certain amount each time they are drawn. If you want your sun to rotate - by two degrees each time it's drawn, you can use `sun.rotationSpeed = 2` - before the draw loop, after you create your sprite.\r\n\r\n# Do This\r\n\r\nMake - the sun rotate by 3 degrees each time using the `rotationSpeed` block. [Show - me where](#triggercallout=callout1)" - CSD U3 abstraction setSpeed accelerate_markdown_instruction: "# Moving faster - and faster\r\n\r\nNow that you've started your car off in the right direction, - you can make it go faster and faster by using a counter pattern inside the - draw loop. Because the sprite does not store its speed as it would a property, - you'll need to use the `getSpeed` block inside the `setSpeedAndDirection` - block to add one to the speed each time. The code `car.setSpeedAndDirection(car.getSpeed() - + 1, -20)` will get the speed of the car, add one to it, and set the new speed - to be the sum. Even though it looks different from using a counter pattern - on a property or variable, the basic pattern of adding one each time is the - same.\r\n\r\n# Do this\r\n\r\nUse the `getSpeed` and `setSpeedAndDirection` - blocks to add one to the speed each time the draw loop is called. [Show me - where](#triggercallout=code_triggered)" - CSD U3 abstraction setSpeed fish_markdown_instruction: "# Save the Fish\r\n<img - style=\"float: right; height: 200px;\" src=\"https://images.code.org/c92db34c78faa59c2d8a3f0df7fe92aa-image-1472492951133.gif\" - />\r\nYour fish is in danger! The shark is swimming faster than the fish, - but we can use the counter pattern to make the fish get faster as the program - runs. Can use use the counter pattern inside the draw loop to change the - program to match the animation on the right?\r\n\r\n# Do This\r\nUse `setSpeedAndDirection` - inside the draw loop to increase the speed of the sprite by 1 each time the - draw loop is called.\r\n\r\n[//]: # (https://images.code.org/a87dac6c803751292c6fb11a63623e3f-image-1471466985600.png)\r\n\r\n[//]: - # (https://images.code.org/b63256ffb19a98d9d20f3b3b79364006-image-1471467188241.png)\r\n\r\n[//]: - # (https://images.code.org/c92db34c78faa59c2d8a3f0df7fe92aa-image-1472492951133.gif)" - CSD U3 abstraction setSpeed intro_markdown_instruction: "# getSpeed() and getDirection()\r\n\r\nWhen - you move around the world, you probably don't normally think about your velocityX - and velocityY. You probably just think about how fast you are going in the - direction you are heading. You can figure out a sprite's speed and direction - with math, but it's faster to teach the computer to do those calculations - for you. `getSpeed()` and `getDirection()` are methods that use the information - in `velocityX` and `velocityY` to find your speed and direction.\r\n\r\n# - Do this\r\n\r\n* For each of the three sprites in this animation: Look at - its `velocityX` and `velocityY` and guess what its speed and direction are. \r\n* - Then run the code and see the answers in the debug console.\r\n" - CSD U3 abstraction setSpeed_markdown_instruction: "# setSpeedAndDirection()\r\n\r\nJust - as you can use the `getSpeed` and `getDirection` blocks to see how your sprite - is moving, you can use the `setSpeedAndDirection` block to tell the computer - how you want your sprite to move. This block takes in two numbers, first - the new speed of your sprite, then the angle of its direction.\r\n\r\nBefore, - you did this by setting your `velocityX` and `velocityY` properties, but `setSpeedAndDirection` - lets you input the exact speed and direction of your sprite. The computer - calculates the matching `velocityX` and `velocityY` values and sets them for - you, according to code that another programmer already wrote.\r\n\r\n# Do - this\r\n\r\nUse `setSpeedAndDirection` to make the car stay on the road. You - can see the effect on your sprite's `velocityX` and `velocityY` in the debug - console.\r\n\r\n*Hint: The angle of the road is -20 degrees*\r\n\r\n*Challenge: - Make the car point in the correct direction.*" - CSD U3 abstraction sidescroll intro_markdown_instruction: "# Horse Jumper\r\n\r\nNow - that you've learned these new blocks, you can start to make a horse jumper - game. Press \"Run\" to play the game on the left. You can use the up arrow - to jump over the tumbleweed. What block will you need to make the tumbleweed - move? How many different ways does the horse move?\r\n\r\n\r\n" - CSD U3 abstraction sidescroll_markdown_instruction: "# Side Scroller\r\n\r\nNow - that you can make your sprite jump, you're ready to start a simple side scroller. In - a side scroller game, the main sprite stays at the same x location, and the - background and obstacles slide past it. In this first part of the project, - you'll make a hay bale slide across the screen so that your horse can jump - over it. You can do this by creating the hay bale off the right hand side - of the screen, but setting its velocity so that it moves to the left. Then, - when the hay bale is completely off the left hand side of the screen, move - it back to where it started so it can scroll across the screen again.\r\n\r\n# - Do this\r\n\r\n* Change the line of code where the hay sprite is created to - make it start off the right side of the screen. [Show me where](#triggercallout=code_triggered1)\r\n* - Add a line of code to make the sprite move across the screen toward the left. - [Show me where](#triggercallout=code_triggered2)\r\n* Add an if statement - that does the following [Show me where](#triggercallout=code_triggered3)\r\n * - Checks whether the sprite has gone off the left side of the screen.\r\n * - If so, moves the sprite back to its initial position off the right side of - the screen.\r\n\r\n\r\n_Challenge: Can you make the hay bale come out from - different places on the right hand side of the screen?_\r\n\r\n_Extra fun: - You can choose your own images to use, rather than the horse and hay bale, - and draw a new background._\r\n\r\n[](https://images.code.org/0a265cf4c22f69463200dce05989e8e4-image-1474609853181.png)" - CSD U3 abstraction space animation_markdown_instruction: "# Your choice\r\n\r\n<img - style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow - that you have everything moving in the correct way, you can add your own sprite. You - can choose between the star and astronaut animations in the animations tab\r\n\r\n# - Do This\r\n\r\n* Add a new sprite to the picture using the star or astronaut - in the animations tab\r\n* Make your sprite move in a new way based on what - you have learned\r\n* Share your picture with a classmate and compare your - animations" - CSD U3 abstraction space comet_markdown_instruction: "# Animate The Comet\r\n\r\n<img - style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow - that your sprites are in the right place, you can make them move using the - properties and methods you have learned. In this level, you can make the - comet fly across the sky in a curve. If you want to animate another sprite, - you can click on the following links:\r\n\r\n* [Animate the Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* - [Animate the Spaceship](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/14)\r\n* - [Animate the Satellite](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# - Do This\r\n\r\nUse the correct blocks to make the comet fly across the sky - as in the picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/13) - for clues.*" - CSD U3 abstraction space earth_markdown_instruction: "# Animate The Earth\r\n\r\n<img - style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow - that everything is in the right place, you can make the sprites move using - the properties and methods you have learned. In this level, you can make - the earth rotate. If you want to animate another sprite, you can click on - the following links:\r\n* [Animate the Comet](s/CSDU3-Draft/stage/12/puzzle/13)\r\n* - [Animate the Spaceship](s/CSDU3-Draft/stage/12/puzzle/14)\r\n* [Animate the - Satellite](s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# Do This\r\n\r\nUse the - correct blocks to make the earth rotate as in the picture.\r\n" - CSD U3 abstraction space satellite_markdown_instruction: "# Animate The Satellite\r\n\r\n<img - style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow - that everything is in the right place, you can make the sprites move using - the properties and methods you have learned. In this level, you can make - the satellite revolve around the moon. If you want to animate another sprite, - you can click on the following links:\r\n\r\n* [Animate the Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* - [Animate the Comet](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/13)\r\n* - [Animate the Spaceship](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/14)\r\n\r\n# - Do This\r\n\r\nUse the correct blocks to make the satellite move as in the - picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) - for clues.*" - CSD U3 abstraction space setup_markdown_instruction: "# Setting up your picture\r\n<img - style=\"float: right; margin: 4px;\" src=\"https://images.code.org/aabf67f8692c025f62a43e54d4bfd830-image-1472408773491.png\">\r\nBefore - you make anything move, you'll need to start all your sprites off in the - right place. The Earth has already been positioned for you, and all the images - are loaded for you in the animations tab.\r\n\r\n# Do This\r\n\r\n* Create - sprites for the moon, spaceship, and satellite.\r\n* Use `setAnimation` to - add a picture to each sprite.\r\n* Use the `x` and `y` properties to put the - sprites in the right place on the screen.\r\n" - CSD U3 abstraction space spaceship_markdown_instruction: "# Animate The Spaceship\r\n\r\n<img - style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow - that everything is in the right place, you can make the sprites move using - the properties and methods you have learned. In this level, you can make - the spaceship speed up as it takes off from Earth. If you want to animate - another sprite, you can click on the following links:\r\n\r\n* [Animate the - Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* - [Animate the Comet](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/13)\r\n* - [Animate the Satellite](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# - Do This\r\n\r\nUse the correct blocks to make the spaceship take off as in - the picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/6) - for clues.*" - CSD U3 abstraction space template_markdown_instruction: "![](https://images.code.org/b449da443093a6b7fb872c0b65d4ea39-image-1472234725048.png)\r\n\r\n![](https://images.code.org/87f39110a8cec7a6ca1978989f1d8eaf-image-1472235414354.png)\r\n\r\n![](https://images.code.org/69cb2daab7d1eec824b8bd2d2b117116-image-1472235429548.png)" - CSD U3 abstraction steer_markdown_instruction: "# Steering your car\r\n\r\nNow - you have enough information to control your car with the keyboard using conditionals. Every - time the left arrow key is pressed, the car will turn to the left. Can you - use the `if` block to make the car turn to the right when the right arrow - key is pressed? (Don't worry about speeding up and slowing down. You will - do that on the next level.)\r\n\r\n# Do This\r\n\r\nInside the draw loop:\r\n* - check whether the right arrow key is pressed\r\n* if it's pressed, turn the - car to the right\r\n\r\n*Challenge: Can you modify the code so that the car - turns faster?*" - CSD U3 abstraction teaser_markdown_instruction: "# Space Animation\r\n\r\nLook - at the space animation on the left.\r\n\r\n* What sorts of movements are the - different sprites making? \r\n* Which types of movement do you already know - how to program?\r\n* Is there anything you're not sure how to do? \r\n* Discuss - with a partner how you might make this picture.\r\n\r\n# Do This\r\n\r\n* - Click \"Run\" to see the space animation.\r\n* With your partner, discuss - the different types of movement and how you might code your sprites.\r\n* - Fill out the activity guide with your notes on the different movements." - CSD U3 abstraction tumbleweed_markdown_instruction: "# Mushroom\r\n\r\nNow - you just need something for your sprite to jump over. This program already - has a mushroom just past the right edge of the screen, but it needs to move - toward your frog.\r\n\r\n# Do this\r\n* Use the `velocityX` block to make - the mushroom move left across the screen.\r\n\r\n*Hint: The mushroom should - start moving at the very beginning of the game, and never change, so should - it be inside or outside the draw loop?*\r\n\r\n" - CSD U3 abstraction velocityX control_markdown_instruction: "# Multiple Controls\r\n\r\nAs - you saw in the last level, you can change the sprite's velocity with multiple - `if` statements. In this program, the fish has three different types of movement, - each of which should be controlled by its own `if` statement.\r\n\r\n# Do - This\r\n* Look at the three `if` statements inside the draw loop.\r\n\r\n* - Use a `sprite.velocityX` block inside each `if` statement to make the three - following movements:\r\n * If the user presses the right arrow key, move the - fish to the right.\r\n * If the fish gets to the right hand side of the screen, - move the fish to the left.\r\n * If the fish gets to the left hand side of - the screen, stop the fish." - CSD U3 abstraction velocityX if-statements_markdown_instruction: "# Changing - Velocity with Position\r\n\r\nOne advantage to using the velocity blocks inside - conditionals (`if` blocks) is that your sprite keeps moving, even after the - condition stops being true. For example, you only had to press a key once - to launch your fly man, and he kept flying forever.\r\n\r\nYou can do the - same when you check a sprite's position. In the code below, the fish sprite - moves to the left when it hits the right edge, and to the right when it hits - the left edge. The `if` block only sets the velocity when the sprite hits - the edge, but the sprite keeps moving in the same direction, even when it's - not touching the edge anymore.\r\n\r\n# Do This\r\n\r\n* Look at `if` statements - that check the sprite's position and set its velocity.\r\n* With your partner, - discuss how the sprite knows which way to move when neither of the `if` statements - are true (the sprite is in the middle of the screen)." - CSD U3 abstraction velocityX_markdown_instruction: "# velocityX\r\n\r\nOne - way to move sprites in Game Lab is with the counter pattern. For example `sprite1.x - = sprite1.x + 1` moves a sprite by 1 pixel each frame of the draw loop. This - pattern is so common that sprites have a `velocityX` property that does this - for you.\r\n\r\n# Do This\r\n\r\n* Drag a `sprite.velocityX` block directly - below where your sprite is created.       [Show me - where](#triggercallout=code_triggered)\r\n* Write the name of your sprite - in the block.\r\n* Assign the `velocityX` property a value of 1.\r\n* Run - the code. What happens?\r\n* Re-run the code giving the `velocityX` property - a different value. What's changing?\r\n" - CSD U3 abstraction velocityXY_markdown_instruction: "# Moving at an Angle\r\n\r\nFor - the next several levels you'll use the `sprite.velocityX` and `sprite.velocityY` - blocks to create some interesting sprite movements. As you do so ask yourself - whether you need the code to run just once (outside the draw loop) or on every - frame (inside the draw loop).\r\n\r\n# Do This\r\n\r\nThis car sprite should - move along the diagonal road.\r\n\r\n* Set both the X and Y velocities of - the car to make it move along the road.\r\n* Discuss with a Neighbor: Did - you set the velocity inside or outside the draw loop? Does it make a difference? - Why might one be better than the other?" - CSD U3 abstraction velocityY 2_markdown_instruction: "# velocityY\r\n\r\n`velocityY` - is like `velocityX`, but it moves things up and down. Can you use it to make - the feather float the down screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` - to make the sprite go down the screen.   [Show me where](#triggercallout=code_triggered)" - CSD U3 abstraction velocityY control_markdown_instruction: "# Controlling Speed\r\n\r\nYour - code before the draw loop sets up the beginning of your game. Your code inside - the draw loop controls how the game will change while it's being played. In - this game, the helicopter man starts off at the bottom of the screen, but - when the space key is pressed, he flies up.\r\n\r\n# Do This\r\n\r\n* Use - an `if` statement inside the draw loop to check when the space bar is pressed.\r\n* - Use the `velocityY` block to make the sprite fly up when the user presses - the space bar." - CSD U3 abstraction velocityY_markdown_instruction: "# Moving Down\r\n\r\nHere - is a feather sprite that should be floating down the screen. If `velocityX` - makes a sprite move to the right, can you find the block that will make the - feather move down?\r\n\r\n#Do This\r\n\r\nFind the block that will make the - feather sprite go down the screen, and use it outside the draw loop.   [Show - me where](#triggercallout=code_triggered)" - CSD U3 AnimationsMulti defender animate cake enemies_markdown_instruction: "# - Getting Started: Set Animations\r\n\r\nYou should have already reviewed the - planning guide for this project. A lot of the work to turn this project guide - into a working game has already been started. Based on the project guide you're - going to do the rest of this work.\r\n\r\n# Do This\r\n\r\nBefore we get started - you'll want some better animations for each of your sprites.\r\n\r\n* In - the Animation Tab are animations for each of your sprites. Go look at what - they are.\r\n* In your code give each sprite its appropriate animation. **Use - the ones provided for now** but later you'll be able to go change them.\r\n* - Head to [Level 4](/s/csd3/stage/16/puzzle/4) if you need help remembering - how to do this." - CSD U3 AnimationsMulti defender animate player_markdown_instruction: "# Change - Player Animations\r\n\r\nRight now your player is always facing the same direction. - You can make things look a lot more realistic by switching between animations. - Your player should switch between a left-facing and right-facing animation - depending on which key was last pressed. Remember, you can quickly copy and - edit animations inside the Animation Tab.\r\n\r\n# Do This\r\n\r\n* Inside - the Animation Tab copy the animation of your player sprite.\r\n* Flip each - frame of the new animation so that the sprite is facing in the opposite direction\r\n* - Rename your new animation\r\n* Use the `setAnimation` command inside the `movePlayer` - function so that the player changes the direction it is facing when the \"left\" - and \"right\" arrows are pressed." - CSD U3 AnimationsMulti defender create set enemies_markdown_instruction: "# - Creating Functions\r\n\r\n<img src=\"https://images.code.org/126982cbde9ae62e9a77ca1e53c92024-image-1476291567280.58.00 - AM.png\" style=\"float:right; height:90px\">\r\n\r\nYour program now includes - code in two places to set the enemies on the left side of the screen at a - random y location. You can create functions to reset each of your two enemies - to remove repetitions from your program. This will make your program easier - to read, allow you to change it more easily, and allow you to quickly reset - your sprites at other points in your program if you need to.\r\n\r\n# Do This\r\n\r\n<img - src=\"https://images.code.org/01a2f4d9725162482fda9f74734c992c-image-1476461412974.09.52 - AM.png\" style=\"\r\nfloat:right; height:70px\">\r\n\r\n* At the bottom of - your program create two new functions, `setEnemy1` and `setEnemy2`.\r\n* Inside - each of these functions place the code that sets the enemies on the left side - of the screen and gives them a random y position\r\n* Wherever the code for - `setEnemy1` and `setEnemy2` appears in your program replace them with a call - to the functions you just created." - CSD U3 AnimationsMulti defender displace enemies_markdown_instruction: "# Displace - Enemies\r\n\r\nIt's time to write code for some more sprite interactions. - Your player sprite should displace the enemy sprites.\r\n\r\n# Do This\r\n\r\nFor - this level you'll be writing code inside the `displaceEnemies` function.\r\n\r\n* - Write code that makes player displace both enemy sprites.\r\n* Test your program - to make sure your player is displacing enemies but they keep moving right - after the player moves away.\r\n\r\n_Hint: You can use `sprite.debug` to see - your sprites' colliders if you need to debug your program_" - CSD U3 AnimationsMulti defender enemies move_markdown_instruction: "# Moving - The Enemies\r\n\r\nIt's time to start writing the code that will move your - sprites. To begin you'll need to get your enemy sprites to a random position - and moving across the screen.\r\n\r\n# Do This\r\n\r\nAt the top of your program, - after you create each enemy sprite, write code that will move it to the correct - position and give it the correct velocity.\r\n\r\n* Use `sprite.x` to set - the x position to 0\r\n* Use `sprite.y` to set the y position should be a - random number between 150 and 250\r\n* Use `sprite.velocityX` to set the x - velocity to 2\r\n\r\nTest your program. Your enemy sprites should now be moving - across the bridge." - CSD U3 AnimationsMulti defender enemies touch cake sprite2_markdown_instruction: "# - Touching the Cake: Second Ladybug\r\n\r\nYour first enemy sprite should now - be resetting when it gets to the cake. Now you'll want the other ladybug - to reset as well.\r\n\r\n# Do This\r\n\r\nInside the `enemiesTouchCake` function - you should have written code that resets enemy1\r\n\r\n* Copy the entire if-statement - you wrote in the last level (Ctrl-C)\r\n* Paste the code inside of the `enemiesTouchCake` - function, just below the last one (Ctrl-V)\r\n* Change the name of the sprite - in that code from `enemy1` to `enemy2`\r\n \r\nTest your code. Now both bugs - should reset when they touch the cake." - CSD U3 AnimationsMulti defender enemies touch cake_markdown_instruction: "# - Touching the Cake\r\n\r\nIf the enemies get all the way across to the cake - you should place them back at the left side of the screen and decrease the - score. To start you'll **write code for only one of your enemies**.\r\n\r\n# - Do This\r\n\r\nInside the `enemiesTouchCake` function you'll need to write - code that checks when a ladybug is touching the cake, resets its position, - and changes the score.\r\n\r\n* Use an `if` and `isTouching` to detect whether - enemy1 has touched the cake.\r\n* Inside your `if` block place code that...\r\n * - Sets enemy1's x position back to 0\r\n * Sets enemy1's y position to a - random number between 150 and 250\r\n * _Hint: You can reuse some code you - already wrote_\r\n * Use the counter pattern to decrease the score by 2\r\n \r\nTest - your code. One of your ladybugs should now reset when it gets across to the - cake, and the score should go down by 2." - CSD U3 AnimationsMulti defender make it your own_markdown_instruction: "# Make - It Your Own\r\n\r\nYou just walked through someone else's plan for creating - a game, so now it's time to make it your own. What additional features or - challenges do you want to create?\r\n\r\n# Do This\r\n\r\nSelect one of the - challenges below to add to the game or come up with a challenge of your own.\r\n\r\n* - Change the visuals of the game so that your player, enemies, or cake look - different\r\n* End the game when the enemies get to the cake and print the - score. For an extra challenge end the game only after 3 enemies get through\r\n* - Randomize the speed of the enemies\r\n* Create a new background that shows - up when players reach a higher score." - CSD U3 AnimationsMulti defender move player_markdown_instruction: "# Moving - Left and Right\r\n\r\nNow that your enemy sprites are moving correctly, it's - time to write the code to move your player. For now you'll just need to get - your character moving left and right and changing its animations.\r\n\r\n# - Do This\r\n\r\nFor this level you'll be writing code inside the `movePlayer` - function.\r\n\r\n* Use an `if` block along with `keyDown` to detect when the - \"right\" arrow is pressed\r\n* Use `sprite.x` and the counter pattern increase - the player's x position by 3\r\n* Use another `if` block to move the player - to the left when the \"left\" arrow is pressed. This time you'll need to - decrease the player's x position.\r\n\r\nTest your game. Your character sprite - should now move left and right when you press the left and right arrows." - CSD U3 AnimationsMulti defender move up down_markdown_instruction: "# Moving - Up and Down\r\n\r\nYou'll want your player sprite to move up and down as - well.\r\n\r\n# Do This\r\n\r\nFor this level you'll still be writing code - inside the `movePlayer` function.\r\n\r\n* Use an `if` block along with `keyDown` - to detect when the \"up\" arrow is pressed\r\n* Use `sprite.y` to increase - the player's y position by 3 using the counter pattern\r\n* Use another `if` - block to move the player down when the \"down\" arrow is pressed\r\n\r\nTest - your code. Your character should now move in all 4 directions." - CSD U3 AnimationsMulti defender template_markdown_instruction: "# Play and - Pause\r\n\r\nYou can use the `sprite.play` and `sprite.pause` commands to - play and pause a sprite's animation. If the animation is already playing - or paused, using these commands twice in a row has no effect. There's one - important exception, however, which is that **play will restart a non-looping - animation if it has finished**. We're going to look at some cool behavior - this lets us create.\r\n\r\n# Do This\r\n\r\n* Use the `sprite.play` command - after each of your `setAnimation` commands. This will restart the walk animations - as long as the keys are pressed." - CSD U3 AnimationsMulti defender touch water_markdown_instruction: "# Touching - the Water\r\n\r\nThe last part of the game that you'll need to write is the - code to reset the sprites when they touch the water. Luckily you should have - already written functions that reset each sprite, so you'll just need a good - way to know when either sprite leaves the bridge. Start by writing the code - for a single enemy and then copy-paste and make small changes to create code - for your second enemy.\r\n\r\n# Do This\r\n\r\nFor this level you'll be writing - code inside the `enemiesTouchWater` function.\r\n\r\n* Use an `if` statement - to check whether enemy1 is off the top of the bridge by checking whether its - y value is below 140. Within your if statement...\r\n * Use your `setEnemy1` - function to reset the sprite\r\n * Add 1 to the score\r\n* Use an if statement - to check whether enemy1 is off the bottom of the bridge by checking whether - its y value is above 260. Within your if statement...\r\n\t* Use your `setEnemy1` - function to reset the sprite\r\n * Add 1 to the score\r\n* Test your program - for the first enemy sprite. Make sure the sprite is resetting and the score - goes up.\r\n* Once it is working copy and paste the code you wrote to create - the same behavior for `enemy2`. You'll need to change the name of the sprite - and the name of the functions you use." - CSD U3 AnimationsMulti introducing multiframe template_markdown_instruction: "# - Using Multiframe Animations\r\n\r\nYou probably noticed in the last game that - the sprites themselves were animated. Have some fun choosing some of the animations - from the library.\r\n\r\n\r\n# Do This\r\n\r\nThis program already includes - several sprites but they don't yet have any animations.\r\n\r\n* Go to the - Animation tab and check out the multi-frame animations already added to your - project. Choose one for each of your characters.\r\n" - CSD U3 AnimationsMulti introducing multiframe_markdown_instruction: "# Using - Multiframe Animations\r\n\r\nIn the sample defender game the sprites themselves - were animated. Before getting started on programming this game take a minute - to get familiar with this new way of animating sprites.\r\n\r\n# Do This\r\n\r\nThis - program already includes several sprites but they don't yet have any animations.\r\n\r\n* - Go to the Animation tab and check out the multi-frame animations already added - to your project. Choose one for each of your characters.\r\n* Remember you - can use `setAnimation` to give your sprites animations you've created in - the Animation Tab\r\n" - CSD U3 AnimationsMulti mirror animation_markdown_instruction: "# Editing Multiframe - Animations\r\n\r\nYour sprites will look a lot more realistic if they turn - around when they're moving. You can switch back and forth between multiframe - animations when the user presses different keys.\r\n\r\n# Do This\r\n\r\nRead - this code and run the program. Make sure you know how the sprite responds - to the arrow keys.\r\n\r\n* In the Animation Tab create a copy of the alien - animation ![](https://images.code.org/aee81f9cd3f63bb8a9c91ac3ab250a87-image-1475699896387.38.09 - PM.png)\r\n* Use the tool to flip your animation. Make sure you flip both - frames. ![](https://images.code.org/3b10b4a612f9a7c640dc7bb18f4c2b91-image-1475699599617.33.03 - PM.png) \r\n* Rename your new animation\r\n* Use your new animation and old - animation so that the alien faces the correct direction when moving. Where - do you think you'll need to set the sprite's animation in your code?" - CSD U3 AnimationsMulti no loop_markdown_instruction: "# Preventing Animations - from Looping\r\n\r\nBy default your animations keep replaying in a loop. You - can have you animation only play once by clicking this button below your animation.\r\n\r\n# - Do This\r\n\r\n* Set both the animations in your project to non-looping.\r\n* - Run the program and confirm your sprite only takes 1 step when it changes - directions" - CSD U3 AnimationsMulti Play Defender_markdown_instruction: "# Defend Your Cake!\r\n\r\nThis - is an example of a defender game that you'll build by the end of this lesson. - Move the alien with arrow keys to keep the ladybugs from getting to your cake. - How high of a score can you get?\r\n\r\n# Do This\r\n\r\nTurn to a classmate - and make a list of the following information.\r\n\r\n* How many sprites are - there in this game. Which are they?\r\n* What variables are needed to make - this game? What do they store?\r\n* If you were to split the code of this - game into functions what do you think they would be? What are the major pieces - of behavior you'd need to create in your code?" - CSD U3 AnimationsMulti play pause_markdown_instruction: "# Play and Pause\r\n\r\nYou - can use the `sprite.play` and `sprite.pause` commands to play and pause a - sprite's animation. If the animation is already playing or paused, using - these commands twice in a row has no effect. There's one important exception, - however, which is that **play will restart a non-looping animation if it has - finished**. We're going to look at some cool behavior this lets us create.\r\n\r\n# - Do This\r\n\r\n* Use the `sprite.play` command after each of your `setAnimation` - commands. This will restart the walk animations as long as the keys are pressed." - CSD U3 AnimationsMulti slow down_markdown_instruction: "# Slow Down\r\n\r\nNice - work! Time to start learning how to control these multiframe animations.\r\n\r\n# - Do This\r\n\r\nYour sprites should be animated but they're moving really - quickly. \r\n\r\n* Head back to the Animation Tab. Underneath each animation - you should see a slider. ![](https://images.code.org/169e11c1f6f55b607937fe9cb7e5e390-image-1476209267457.07.26 - AM.png)\r\n* Use these sliders to slow down your animations so they look more - realistic.\r\n\r\n" - CSD U3 Background Discuss_markdown_instruction: "<i class=\"fa fa-hand-paper-o\" - aria-hidden=\"true\" style=\"color:red; float: right; font-size: 200px; font-weight: - 800;\"></i>\r\n\r\n# Animation\r\nUsing the draw loop opens up the potential - to make some neat animations, but it's a bit troublesome that every time - the loop is run it just draws on top of the last drawing. What if we could - make this behave more like a flip book animation?\r\n\r\n# Do This Together\r\n\r\n* - **Run** the provided program together\r\n* **Hypothesize** how does the draw - loop work?\r\n* **Brainstorm** how could we make it so that we only see the - most recently drawn rectangle?" - CSD U3 Background Experiment_markdown_instruction: "# Background\r\nWe could - draw a 400 pixel white square each time the `draw()` loop runs, but there's - actually a built-in command that works even better. The `background()` block - just takes one input, the color of your background, and fills the whole canvas - with that color. The nice thing about using `background()` instead of `rect()` - is that it will fill the screen regardless of how big it is, making your code - more flexible and usable in more scenarios (like when you get a new phone - with a bigger screen).\r\n\r\n# Do This\r\nPlace the `background()` block - inside your `draw()` loop before any other shapes are drawn. Choose a background - color of your choice and then test your code to make sure it only shows a - single rectangle at a time." - CSD U3 Boolean Modify_markdown_instruction: "# Boolean Expressions\r\n\r\nThe - simplest Boolean expressions are questions that the computer can answer with - true or false. These expressions are made using **comparison operators**, - as shown below.\r\n\r\n|Comparison Operator | Boolean Expression | Meaning - |\r\n|:---:|:---:|:---:|\r\n| <img src=\"https://images.code.org/1a0798d75d4242715e7608d825f95101-image-1447271431312.png\" - style=\"width: 100px\"> | `1 < 9` | Is 1 less than 9? | \r\n| <img src=\"https://images.code.org/5ff460ac121f0ac51b569e96a4404c57-image-1447271431310.png\" - style=\"width: 100px\"> | `1 > 9` | Is 1 greater than 9 ? | \r\n| <img src=\"https://images.code.org/a4daa9efccea2278e165592efe343c1a-image-1447271431308.png\" - style=\"width: 100px\">| `1 == 9` | Is 1 equal to 9?| \r\n<br>\r\n**Note:** - If you saw the statement 3 < 2 in math class, you'd think something was terribly - wrong, but this is not math class. In computer science, the comparison operators - **ask a question** that the computer will answer with `true` or `false`. So - you can read 3 < 2 as **\"Is 3 less than 2?\"** The answer in this case is - no, or `false`. \r\n\r\nAnother way to say this is that the Boolean expression - `3 < 2` **evaluates** to `false`.\r\n\r\n# Do This\r\nCan you modify the values - of the sprite properties so that each of the Boolean expressions evaluates - to `true`?\r\n\r\n- Read through the entire program to see how `sprite1` and - `sprite2` are being created and which properties are compared.\r\n- For each - of the Boolean expressions, identify the sprite properties being compared.\r\n- - Change the code _in the first **13** lines only_ so that each of the `console.log()` - statements print `true`." - CSD U3 Boolean Predict_markdown_instruction: "# Boolean Expressions\r\n\r\nDecision-making - in computers is based on statements called **boolean expressions**. A boolean - expression is **any expression that can only evaluate to either `TRUE` or - `FALSE`**. This can be particularly useful when used to compare the properties - of two sprites. For example, you could figure out which one is larger or placed - higher up. In the next few puzzles, we'll use simple boolean expressions - to compare sprite properties.\r\n\r\n# Predict\r\n\r\nRead the code below. - There are some new symbols in it which you haven't been introduced to. Take - a guess at what they mean and try to answer the following question.\r\n\r\nWhich - result will be printed in the console by this program?\r\n\r\n1.\r\n \r\n true\r\n false\r\n true\r\n2.\r\n - \r\n 200\r\n 10\r\n -20\r\n \r\n3.\r\n \r\n true\r\n error\r\n true\r\n4.\r\n - \r\n false\r\n true\r\n false" - CSD U3 collisions bounce birds_markdown_instruction: "# bounce()\r\n\r\nThe - birds are fighting for space on the wire. Can you change the code so that - the green bird pushes the yellow bird off the wire?\r\n\r\n# Do This\r\n\r\nUse - the `bounce` block to the green bird sprite bounce against the yellow bird - sprite.\r\n" - CSD U3 collisions bounce intro_markdown_instruction: "# bounce()\r\n\r\nYou - can also make sprites bounce when they touch each other, as in the code below. - Read the code and run it with a partner. Can you change the code so that - the green bird pushes the yellow bird off the wire?\r\n\r\n# Do This\r\n\r\nUse - the `bounce` block to make the green bird sprite bounce against the yellow - bird sprite.\r\n" - CSD U3 collisions bounce_markdown_instruction: "# Billiards\r\n\r\nChanging - your sprites' velocities will change the ways that they bounce when they - touch each other. Read the code and run it with a partner, then try out different - intial velocities for your sprites. After each change, discuss with your - partner what you think will happen before you run the code.\r\n\r\n# Do This\r\nDiscuss - with your partner what you think will happen when you run the code, then try - it again with the following changes:\r\n* set the purple ball's velocity - to 0\r\n* set the purple ball's velocity to 4\r\n* switch the purple and - red balls so it says `red_ball.bounce(purple_ball)`\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: - # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" - CSD U3 collisions bounceOff intro_markdown_instruction: "# Basketball\r\n\r\nRun - the code below and see what happens. You want the basketball to bounce, but - the floor should not move! See if you can find a different block that you - can use to make the basketball bounce off the floor.\r\n\r\n# Do This\r\n\r\nReplace - `bounce` with a different block so that the floor sprite does not move, and - the basketball sprite bounces off it.\r\n\r\n[//]: # (https://images.code.org/24355fc6377cfafdce3ce2b3568a33c3-image-1470343728940.png)\r\n\r\n[//]: - # (https://images.code.org/87e4306e0371c7975b8fb2583657ee4a-image-1470343728942.png)" - CSD U3 collisions bounceOff_markdown_instruction: "# Mouse\r\n\r\nThe mouse - should be running back and forth between the two walls. Can you use the `bounceOff` - block to make it move in the right way?\r\n\r\n# Do This\r\n\r\nUse the `bounceOff` - block to make the mouse sprite bounce off the wall sprites.\r\n\r\n[//]: # - (https://images.code.org/e542bc5decf5f57d3184a8d5449776d2-image-1470413949810.png)\r\n\r\n[//]: - # (https://images.code.org/fcd40235d2a4285723eecec1df041edc-image-1470413965009.png)\r\n\r\n[//]: - # (https://images.code.org/c3f6298b05a9eb51772c8c03a06abe54-image-1470414415864.png)\r\n\r\n[//]: - # (https://images.code.org/e89b80c63658eb3607478fe91aceda47-image-1470414741858.png)" - CSD U3 collisions bounciness_markdown_instruction: "# Bounciness\r\n\r\nSo - far, `bounceOff` has made sprites bounce away from other objects as fast as - they bounced into them. In the real world, almost everything slows down just - a little bit when it bounces off something else. You can use the `bounciness` - block to tell your sprite how much to slow down or speed up when it bounces - off something else.\r\n\r\n# Do This\r\n\r\n* Read the code below and press - \"Run\" to see the behavior of the basketball and pool ball.\r\n* Use a `bounciness` - block to set the bounciness of your soccer ball.\r\n* Run the code again to - see how the sprites bounce off the floor.\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: - # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)\r\n\r\n[//]: - # (https://images.code.org/0e4e9c26bed0d31d14f6b3f8f8bb4c27-image-1475786966986.png)" - CSD U3 collisions build isTouching_markdown_instruction: "# Balloon\r\n\r\nThe - code below will change the balloon sprite's animation when the tack touches - it. Use the arrow keys to move the tack until it touches the balloon.\r\n\r\n# - Do This\r\n\r\n* You do not need to change any code on this level.\r\n* Read - the if statements inside the draw loop and discuss with your partner how they - work.\r\n\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: - # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: - # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)" - CSD U3 collisions bumper_markdown_instruction: "# Bumper Cars\r\n\r\nThe bumper - cars are almost ready, but they still don't bump into each other. Can you - choose the right method to make the cars behave like they do in the picture?\r\n\r\n# - Do This\r\n\r\nUse `displace`, `collide`, `bounce`, or `bounceOff` to make - the sprites interact in the right way.\r\n\r\n[//]: # (https://images.code.org/682567536f824cc930ebed5c1b936e5f-image-1470415888369.png)\r\n\r\n[//]: - # (https://images.code.org/8a6915fe703f4fe097094cad1e754a6f-image-1470415888371.png)\r\n\r\n[//]: - # (https://images.code.org/0b9f5ca88dc99fc08d472fdba87d6e32-image-1470417254115.png)\r\n\r\n[//]: - # (https://images.code.org/2085e5de29f7170465b0c7bd5e6b56e9-image-1470417254116.png)" - CSD U3 collisions car intro_markdown_instruction: "# Frog Jump\r\n\r\nLook - at the frog jumping game to the left. It looks like the game from the last - lesson, but the frog moves the mushroom if it hits it. What code do you think - would help the computer to know whether two sprites are touching?\r\n\r\n[//]: - # (https://images.code.org/ee9b677e93213846fe12abb3b34f563c-image-1469742494237.png)\r\n\r\n[//]: - # (https://images.code.org/5f738da1a2b1ef8af124e4470e2babe7-image-1469742830481.png)\r\n\r\n[//]: - # (https://images.code.org/f22e6b1a636337820e53fb37a137b3d1-image-1469742992179.png)" - CSD U3 collisions car_markdown_instruction: "# Improve Your Game\r\n\r\nNow - that you know how to use `isTouching` and `playSound`, you can make some fun - things happen when your sprites run into each other.\r\n\r\n# Do This\r\n\r\nUse - the `if`, `isTouching`, `playsound`, and any other blocks you want to add - effects when your sprites collide. You should have at least two effects.\r\n\r\n_Challenge: - Can you add a score board to the top of the screen? How would your game keep - score, and how would the score be displayed?_" - CSD U3 collisions collide_markdown_instruction: "# Save your treasure\r\n\r\nThe - pirate is trying to steal your treasure! Use the arrow keys to move the pirate - around the screen. Can you change the code so the pirate can't get past - the wall?\r\n\r\n# Do This\r\n\r\nUse the `collide` block to make the pirate - sprite collide into the wall.\r\n\r\n[//]: #(https://images.code.org/04a7b28f7228570602238fed87420aab-image-1470944619236.png)\r\n\r\n[//]: - #(https://images.code.org/8f7ec18621c97ce98d22337a1e21ddab-image-1470944619234.png)\r\n\r\n[//]: - #(https://images.code.org/6b749a05857ea1e88fa46f7e2740c77c-image-1470944619235.png)" - CSD U3 collisions debug isTouching_markdown_instruction: "# Debugging Collisions\r\n\r\nThe - balloon is popping before the tack touches it. When sprites aren't doing - what you expect, you can use the `debug` block to get more information about - why the sprites are behaving that way. Can you find out what's wrong in - the code below?\r\n\r\n# Do This\r\n* Run the code and use the arrow keys - to move the tack to pop the balloon.\r\n* In the code below, change `balloon.debug - = false` to `balloon.debug = true`.\r\n* Add a new `debug` block to the code - and set the tack sprite's debug property to `true`.\r\n* Run the code again, - then discuss with your partner why the balloon is popping early.\r\n\r\n*Challenge: - Can you use the animations tab to resize the balloon picture so it pops at - the correct time?*\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: - # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: - # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)\r\n\r\n[//]: - # (https://images.code.org/2892e65635d7a43d0664bb8ff58eb698-image-1471200175665.png)\r\n\r\n[//]: - # (https://images.code.org/9ffeb3f543033353d073794071316860-image-1471200179449.png)" - CSD U3 collisions debug_markdown_instruction: "# Debug\r\n\r\nSometimes sprites - will behave in ways that are unexpected. There is a special `sprite.debug` - property you can use to better understand why the sprites interact the way - that they do.\r\n\r\n# Do This\r\n\r\nThese two coins are round, so you would - expect them to bounce in a certain way. Something weird is happening though!\r\n\r\n* - Run the code and watch the way that the coins interact.\r\n* Use the `sprite.debug` - block to make debug 'true' for both the sprites and run the code again.\r\n* - Change the gold coin's starting x position to 51 and run the code again.\r\n* - Discuss with a partner: Why do you think the balls are bouncing strangely?" - CSD U3 collisions displace diagonal_markdown_instruction: "# Diagonal Elevator\r\n\r\nLast - time we saw balloon, it pushed the feather all the way off screen. What do - you think will happen when the balloon moves away from the feather while it's - moving it?\r\n\r\n# Do This\r\n\r\nUse the `displace` block to make the balloon - sprite push the feather sprite, and watch what happens when the sprites stop - touching each other.\r\n\r\n[//]: # (https://images.code.org/a6c891b044cea1b6d8649a153e13739b-image-1470316517410.png)\r\n\r\n[//]: - # (https://images.code.org/af2df53196186e50a58f64f6559a53ca-image-1470316589121.png)\r\n\r\n[//]: - # (https://images.code.org/fb739254c4d2f6745977a26e0481162a-image-1470316780326.png)\r\n\r\n[//]: - # (https://images.code.org/341bb1ce73ba812f2bd0afeb01e08aad-image-1470316853020.png)" - CSD U3 collisions displace intro_markdown_instruction: "# Displace\r\n\r\nThe - interaction you've been programming is so common that there's a block designed - to do the interaction for you. `sprite.displace()` that will make one sprite - push the other when they touch. The code underlying this block might look - a lot like what you just wrote, but now you no longer need to worry about - writing those details yourself.\r\n\r\n# Do This\r\n\r\nSomeone tried to use - the `sprite.displace()` block to make the **elephant push the hippo**, but - there is a bug. Can you change the code so that the elephant pushes the hippo - off the screen?\r\n\r\n* Find the line of code where the `sprite.displace()` - block is used and fix the error." - CSD U3 collisions displace x_markdown_instruction: "# Program a Sprite Interaction\r\n\r\nYou - should have discussed with your classmates how you could create the sprite - interaction you saw in the last level. Now it's your turn to program it yourself. - How can you make the giraffe move the monkey off the screen?\r\n\r\n# Do This\r\n\r\nThe - giraffe is already moving across the screen toward the monkey but the sprite - interaction itself hasn't been programmed.\r\n\r\n* Use the plan you developed - with your classmates on the last level to program the sprite interaction yourself.\r\n\r\n[//]: - # (https://images.code.org/2e6b993747a39cd5076dce219037903d-image-1470319674401.png)\r\n\r\n[//]: - # (https://images.code.org/d44d7c1aa87ea7eeceea9e9b023408f9-image-1470319674396.png)" - CSD U3 collisions displace y_markdown_instruction: "# Write Your Own Sprite - Interaction\r\n\r\nIn the last level you should have written code for a sprite - interaction that you developed with your classmates. This time try to write - the program on your own, but you can use the patterns you saw in the last - level.\r\n\r\n# Do This\r\n\r\nThe elephant should **push the hippo off the - screen**. Notice that the elephant moves at a random Y velocity each time - the program runs.\r\n\r\n* Using the patterns from the last level, write code - that makes the elephant push the hippo off the screen." - CSD U3 collisions egg template_markdown_instruction: "# Template Level\r\n\r\n[//]: - # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: - # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: - # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: - # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: - # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: - # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" - CSD U3 collisions egg_markdown_instruction: "# Applesauce\r\n\r\nWhen the apple - hits the blender, the blender should turn on.\r\n\r\n# Do This\r\n\r\nUse - the `isTouching` block to make the blender shake back and forth when the apple - sprite touches the blender sprite. The shaking motion is already coded using - the random block, so you just have to check when the two sprites are touching.\r\n\r\n*Challenge: - Can you make the apple disappear when it touches the blender?*\r\n\r\n[//]: - # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: - # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: - # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: - # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: - # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: - # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" - CSD U3 collisions egg2_markdown_instruction: "# Making Sounds\r\n\r\nYou can - also use code to play a blender sound.\r\n\r\n# Do This\r\n\r\nUse the `playSound` - block from the \"Game Lab\" drawer to play the \"https://docs.code.org/sounds/blender.mp3\" - sound when the apple touches the blender. You will need to paste the address - of the sound into the block, so it looks like this: ![](https://images.code.org/8376df7a92ff8e6ba0a2d6e51c24547e-image-1484091385498.34.57 - PM.png)\r\n\r\n[//]: # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: - # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: - # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: - # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: - # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: - # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)\r\n\r\n[//]: - # (https://images.code.org/8376df7a92ff8e6ba0a2d6e51c24547e-image-1484091385498.34.57 - PM.png)" - CSD U3 collisions flyman add obstacles_markdown_instruction: "# Flyer Game - - Add Obstacle\r\n\r\nThis is the flyer game you built in the last lesson. - For the next several levels you'll be adding an obstacle sprite to the game, - using some of the sprite interactions you just learned. At the end you'll - have a chance to keep adding on ideas of your own.\r\n\r\n<img src=\"https://images.code.org/47f8c130ca668080d48520ef9aced093-image-1477069764142.08.58 - AM.png\" style=\"float:right;width:200px\">\r\n\r\n# Do This\r\n\r\nAdd an - obstacle sprite to the game. You can use whatever image you like from the - animation tab but the example shown here uses a sun. Right now you just need - to add the sprite to your game and give it an animation.\r\n\r\n* Add a new - sprite to your game called \"obstacle\"\r\n* In the animation tab create a - new animation for your obstacle. In the example a sun image was chosen\r\n* - Use the `sprite.setAnimation()` block to give your sprite the image you chose.\r\n* - Run the code and make sure the sprite appears where you want it on the screen. - You may need to set its X, Y, and scale properties to get it to look the way - you want." - CSD U3 collisions flyman bounceOff_markdown_instruction: "# Flyer Game - Interacting - with the Obstacle\r\n\r\nYou don't want your player to be able to move through - the obstacle, so you'll need to use one of the sprite interactions.\r\n\r\n# - Do This\r\n\r\n* Add code to your game that prevents your player from moving - through the obstacle.\r\n* If you use one of the bounce interactions, decide - if you want to reset the bounciness of your character.\r\n* Discuss with a - Neighbor: Which sprite interaction did you decide to use? Is there more than - one sprite interaction that works the way you'd expect?" - CSD U3 collisions flyman change colliders_markdown_instruction: "# Flyer Game - - Change Colliders\r\n\r\nRight now your colliders are all rectangular. Switch - them over to circles to get more interesting and realistic bounces and collisions.\r\n\r\n# - Do This\r\n\r\n* Use the `sprite.setCollider()` block to change the colliders - of your sprites to circles.\r\n* Set your sprites' debug properties to `true` - to make sure your game is working the way you want.\r\n* Play your game to - make sure it's working the way you want." - CSD U3 collisions flyman displace coin_markdown_instruction: "# Flyer Game - - Coin Behind the Obstacle\r\n\r\nRight now your coin is moving to random - locations. That means sometimes it even will appear behind your obstacle, - so your character can't get to it. Using sprite interactions you can fix - this problem.\r\n\r\n# Do This\r\n\r\n* Add code to your game that prevents - the coin from moving behind the obstacle. Don't be afraid to try out ideas - and just see how they work.\r\n* Discuss with a Neighbor: Which sprite interaction - did you decide to use? Is there more than one sprite interaction that works - the way you'd expect?" - CSD U3 collisions flyman make it your own_markdown_instruction: "# Flyer Game - - Make It Your Own\r\n\r\nTime to make this game your own by using what you've - learned about sprite interactions.\r\n\r\n# Do This\r\n\r\nAdd at least one - more aspect to your game that uses sprite interactions. There's some ideas - below or you can choose to add features of your own. Make sure you're ready - to share your ideas with your classmates.\r\n\r\n* Create \"edge\" sprites - to keep your character from bouncing out\r\n* Add platforms to the game for - your character to navigate around\r\n* Add another obstacle to your game\r\n* - Create another idea of your own." - CSD U3 collisions getSpeed_markdown_instruction: "# Dashboard\r\n\r\nHere's - a car that can be controlled with the arrow keys. The dashboard at the bottom - should show the car's speed and direction, even when it is off the screen.\r\n\r\n# - Do This\r\n\r\n* Use the `getDirection()` block to turn the compass needle - to the car's current direction. [Show me where](#triggercallout=code_triggered1)\r\n* - Use the `getSpeed()` block to display the car's current speed on the dashboard, - instead of 0. [Show me where](#triggercallout=code_triggered2)\r\n\r\n*Challenge: - Can you also show the car's current location on the dashboard?*\r\n\r\n[//]: - #(https://images.code.org/b87e51b8ed026ca239cbf629c9a58b26-image-1472571454000.png)\r\n\r\n[//]: - #(https://images.code.org/669fd48b2a28602220c2d07b717c1ace-image-1472571454002.png)\r\n\r\n[//]: - #(https://images.code.org/e3013d8428f54f7fbde63d0a4a8eaafb-image-1472571782304.png)" - CSD U3 collisions horse_markdown_instruction: "# Rainbow Horse\r\n\r\nWhen - the rainbow touches the horse, it should turn into a unicorn.\r\n\r\n# Do - This\r\n\r\nUse the `if`, `isTouching`, and `setAnimation` blocks to change - the horse sprite's image when the rainbow touches it. The unicorn image - is already loaded in the animations tab for you.\r\n\r\n[//]: # (https://images.code.org/4d1d0e36e574117140ecc377d406c1de-image-1470256869920.png)\r\n\r\n[//]: - # (https://images.code.org/b913bc2ee2231b908892472240a70105-image-1470256869922.png)\r\n\r\n[//]: - # (https://images.code.org/558b42903bf40cc26410e651a85de922-image-1470256869923.png)\r\n\r\n[//]: - # (https://images.code.org/1d41d2e5b3b55037911b8f73bdc2ff48-image-1470257277875.png)" - CSD U3 collisions isTouching intro_markdown_instruction: "# isTouching()\r\n\r\nWriting - out the math each time you want to check whether two sprites are touching - can take a while, so a programmer created the `isTouching` block, which can - check whether one sprite is touching another sprite (the *target*). The computer - is still doing the same math as in the previous program, but you don't have - to worry about it because another programmer already did that work.\r\n\r\n# - Do This\r\n\r\nInside the draw loop, drag the `isTouching` block into the - `if` block.    [Show me where](#triggercallout=code_triggered)\r\n\r\n*Hint: - Don't forget to change the \"sprite\" to \"balloon\" and the \"target\" to - \"tack\".*\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: - # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: - # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)" - CSD U3 collisions obstacle_markdown_instruction: "# Mouse Maze\r\n\r\nThe mouse - needs to find its way through the maze to get to the cheese, but right now - it passes through the walls. Can you change the code so that the mouse is - blocked by the walls?\r\n\r\n# Do This\r\n\r\nAdd a `displace`, `collide`, - `bounce`, or `bounceOff` block in the draw loop to make the sprites interact - in the right way.\r\n\r\n[//]: # (https://images.code.org/cefb99d244b9167314128578e477808c-image-1470948228670.png)\r\n\r\n[//]: - # (https://images.code.org/e0cf14ae384355129b32b73ef64ed77e-image-1470948281047.png)" - CSD U3 collisions open_markdown_instruction: "# Your Choice\r\n\r\nYou've - seen sprites do many things when they collide with each other: rotate, disappear, - change animation, or even make a new sprite appear on the screen. Now it's - your turn to choose what the sprites can do. Decide what two animations you - want to use for your sprite, and what you want to happen when they touch each - other, then code your choice. You may also choose to change the position, - speed, and direction of your sprites.\r\n\r\n# Do This\r\n* Decide what your - sprites should look like, and use `setAnimation` to give them that image\r\n* - Change the starting position of your sprites in the `createSprite` block\r\n* - Use `setSpeedAndDirection` or `velocityX` and `velocityY` to make your sprites - move how you want\r\n* Use the `if` block, with `isTouching` and `rotate`, - `visible`, `setAnimation` or any other block to make your sprites react when - they collide." - CSD U3 collisions overlap x_markdown_instruction: "# Turtle Race\r\n\r\nThe - turtle moves forward every time you press the left key. When he touches the - finish line, he should get a trophy. The trophy will appear when `isTouchingX` - is true. Can you add code to make sure it is set to true when the turtle - gets to the finish line?\r\n\r\n# Do This\r\n\r\nAdd code inside the draw - loop to set the values of the variables that have been created for you. Then, - test your program by playing the game.\r\n\r\n\r\n[//]: # (https://images.code.org/af2cffe952997258eb6b5573cfe9a29f-image-1470188585528.png)\r\n\r\n[//]: - # (https://images.code.org/d2eb9684743d45ef1e10ff4602936107-image-1470188590517.png)\r\n\r\n[//]: - # (https://images.code.org/98aee1ed11c7e00cd66718b4c232ab66-image-1470190293465.png)\r\n\r\n[//]: - # (https://images.code.org/fb129d34e3089763f35dfc8980d705ea-image-1470191576501.png)\r\n\r\n[//]: - # (https://images.code.org/3fc6da739dfd31b256618a560c12a076-image-1470191923150.png)" - CSD U3 collisions overlap y_markdown_instruction: "# Fried Egg\r\n\r\nIt's - breakfast time! When the egg hits the pan, it should start to fry. Can you - add code so that isTouchingX is set to true at the right time?\r\n\r\n# Do - This\r\n\r\nSet the values of the variables so that `isTouchingX` is true - when the egg hits the pan.\r\n\r\n[//]: # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: - # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: - # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: - # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: - # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: - # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" - CSD U3 collisions overlap_markdown_instruction: "# IDEK\r\n\r\nThis is Tracey's - idea. Apparently horses turn into unicorns when they go through rainbows? Use - your arrow keys to aim the rainbow at the unicorn, then hit the space bar - to make it fly toward the horse.\r\n\r\n# Do This\r\n\r\nUse two `if` blocks - together to change the sprite's animation when the two sprites touch each - other. Then play the game to test your code.\r\n\r\n[//]: # (https://images.code.org/4d1d0e36e574117140ecc377d406c1de-image-1470256869920.png)\r\n\r\n[//]: - # (https://images.code.org/b913bc2ee2231b908892472240a70105-image-1470256869922.png)\r\n\r\n[//]: - # (https://images.code.org/558b42903bf40cc26410e651a85de922-image-1470256869923.png)\r\n\r\n[//]: - # (https://images.code.org/1d41d2e5b3b55037911b8f73bdc2ff48-image-1470257277875.png)" - CSD U3 collisions pinball_markdown_instruction: "# Panda Game\r\n\r\nPress - \"Run\" to try out the game on the left. You can use the left and right arrow - keys to control the paddle. What types of sprite interactions do you see? Which - ones will use the `isTouching` block? Which interactions have their own blocks?\r\n\r\n# - Do This\r\n\r\nPlay the game a few times and discuss with your partner what - how you would program the different sprite interactions.\r\n" - CSD U3 collisions pinball2_markdown_instruction: "# Panda Game\r\n\r\nHere - is the same game, but missing most of the interactions. All of the missing - interactions should be inside the \"spriteInteractions\" function. ([Show - me where](#triggercallout=code_triggered)) The comments will help you remember - which interactions are missing.\r\n\r\n# Do This\r\n\r\nUse the blocks you - know to program back the missing interactions.\r\n" - CSD U3 collisions pirate_markdown_instruction: "# Hide your treasure\r\n<img - style=\"float: right\" src=\"https://images.code.org/2bcf0ba8d5efe69c4531627f2c4d2a1f-image-1472600812452.gif\" - />\r\nYour enemies are still after your treasure. Use the arrow keys to move - the person around the screen. Can you change the code so that she can push - the treasure behind the tree?\r\n\r\n# Do This\r\n\r\nUse `displace`, `collide`, - `bounce`, or `bounceOff` to make the sprites interact in the right way.\r\n\r\n[//]: - # (https://images.code.org/732942eef4d0c288bf445a4478aee6ec-image-1470947222110.png)\r\n\r\n[//]: - # (https://images.code.org/1458d90cb97f3bd37508fa0ec3d997f8-image-1470947222109.png)\r\n\r\n[//]: - # (https://images.code.org/56da2ef5cef40080e0d677c86aec3901-image-1470947222108.png)" - CSD U3 collisions predict set velocity code_markdown_instruction: "# Sprite - Interactions\r\n\r\nSo far you've been able to create simple sprite interactions - by using the `sprite.isTouching()` block. For example, you've reset a coin - to a different location on the screen when a character touches it. Now it's - time to start making sprites have more complex interactions.\r\n\r\n# Do This\r\n\r\n* - Run the program and observe the interaction between the two sprites\r\n* Discuss - with a Neighbor: Using only the commands you already know how could you create - this kind of interaction? There's many ways to do it, but here are some blocks - to consider.\r\n\t* `sprite.isTouching()`\r\n * `sprite.velocityX`\r\n * - `sprite.velocityY`\r\n * `sprite.x`\r\n * `sprite.y`\r\n\r\nBe ready - to share your ideas with your classmates." - CSD U3 collisions predict set velocity_markdown_instruction: "# Setting Velocity\r\n\r\nThis - program creates two sprites, one that's standing still in the middle of the - screen and the other that moves towards it. Notice the one important line - of code in this program\r\n\r\n\tif(sprite1.isTouching(sprite2)){\r\n\t\tsprite2.velocityX - = sprite1.velocityX;\r\n }\r\n\r\n# Predict\r\n\r\nWhat do you think will - happen when the two sprites touch? Write your answer and reasonings in the - space below. Then run the code to see for yourself.\r\n\r\n" - CSD U3 collisions scoreboard_markdown_instruction: "# Scoreboard\r\n\r\nYou - can also use `isTouching` to decide whether you should increase the score. In - this game, the score is stored inside the 'score' variable. It is displayed - on the screen using the `text` block. [Show me where](#triggercallout=code_triggered)\r\n\r\n# - Do This\r\n\r\n* Use the `if` and `isTouching` blocks to determine whether - the bunny has caught the carrot. [Show me where](#triggercallout=code_triggered2)\r\n* - If it has, do the following three things:\r\n * use the counter pattern on - the score variable to increase the score.\r\n * reset the carrot's x position - off the right hand side of the screen\r\n * set the carrot's y position to - a random number between 10 and 390" - CSD U3 collisions setCollider_markdown_instruction: "# setCollider\r\n\r\nSprites - interact based on the size and shape of their collider, not the images that - are assigned to them. You can only see the collider when debug mode is turned - on. You can change the shape of the collider using the `sprite.setCollider()` - block, which lets you pick between a \"rectangle\" or a \"circle\". By default - all colliders are \"rectangle\".\r\n\r\n# Do This\r\n\r\n* Find the `sprite.setCollider()` - block for the gold coin, and change it from \"rectangle\" to \"circle\"\r\n* - Add a new `sprite.setCollider()` block for the silver coin, and choose \"circle\" - for the shape of the collider\r\n* Run the code again to see how the sprites - bounce.\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: - # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" - CSD U3 collisions sidescroll2_markdown_instruction: "# Improve Your Game\r\n\r\nNow - that you know how to use `isTouching` and `playSound`, you can make some fun - things happen when your sprites run into each other.\r\n\r\n# Do This\r\n\r\n* - Add at least two effects when your sprites collide.\r\n\r\n*Challenge: Add - a scoreboard to the top of your screen.*\r\n" - CSD U3 collisions sundae_markdown_instruction: "# collide()\r\n\r\nThe `collide` - block is similar to `displace`, but it makes the sprite that uses it stop - when it is touching the other sprite. Can you use this to make the cherry - stop when it gets to the top of the ice cream sundae?\r\n\r\n# Do This\r\n\r\nUse - the `collide` block to make the cherry sprite stop when it runs into the ice - cream sprite.\r\n\r\n[//]: # (https://images.code.org/491fb8bff907a183bd1cf0061689d193-image-1470419927625.png)\r\n\r\n[//]: - # (https://images.code.org/ea2066d640e74284b8c48e382f56bf1b-image-1470419927627.png)" - CSD U3 collisions tennis_markdown_instruction: "# Tennis\r\n\r\nComplete the - tennis game by making sure the ball and the racket interact in the right way. - You can use your up and down arrows to control the racket.\r\n\r\n# Do This\r\n\r\nAdd - a `displace`, `collide`, `bounce`, or `bounceOff` block in the draw loop to - make the sprites interact as they do in the picture.\r\n\r\n_Challenge: Can - you add a scoreboard that will add a point every time the ball is hit, and - subtract one every time it's missed?_\r\n\r\n[//]: # (https://images.code.org/8d8cf039f50114c07a21e73bbc1c8dfe-image-1470418244037.png)\r\n\r\n[//]: - # (https://images.code.org/d05be653ae7e4717353dffd08af9c656-image-1470418244039.png)" - CSD U3 collisions try blocks_markdown_instruction: "# More Collision Blocks\r\n\r\nThree - new types of sprite interactions have been added to the toolbox, `sprite.collide()`, - `sprite.bounce()`, and `sprite.bounceOff()`. How do you think they'll affect - the sprites?\r\n\r\n# Do This\r\n\r\n* Switch out the displace block for the - `sprite.collide()`, `sprite.bounce()`, and `sprite.bounceOff()` blocks. [Show - me where](#triggercallout=code_triggered)\r\n\t* *Hint: If you're having - trouble doing this with blocks then switch over to text mode*\r\n* Discuss - with a neighbor: What is the difference between the four different sprite - interactions? What do you think the purpose of each block is?\r\n\r\n\r\n[//]: - # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: - # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" - CSD U3 collisions turtle_markdown_instruction: "# Debugging Sprite Interactions\r\n\r\nSprite - interactions just run some code when they're called. The interactions are - not \"remembered\" by the game. If you want one sprite to bounce or collide - with another then it needs to be a part of the draw loop. If you forget then - this can lead to unexpected behavior.\r\n\r\n# Do This\r\n\r\nThe turtle can - be moved with the arrow keys. It's not supposed to be able to walk through - the tree, but something is wrong in the code. Can you find and correct the - bug in the code?\r\n\r\n* Run the code and try to make the turtle collide - with the tree.\r\n* Look through the code and discuss with your partner what - the problem is.\r\n* Correct the code, then run it again to make sure it works." - CSD U3 collisions types_markdown_instruction: "# Collision Types\r\n\r\nThere - are four types of collisions that we use in Game Lab. These blocks will cause - a certain type of interaction between the _sprite_ and its _target_.\r\n\r\n## - displace\r\n\r\nThe `displace` block causes the sprite to push the target - as long as they are touching each other. The sprite keeps moving normally.\r\n\r\n## - collide\r\n\r\nThe `collide` block makes the sprite stop when it runs into - the target. If the target is moving, it will push the sprite with it. The - target keeps moving normally.\r\n\r\n## bounce\r\n\r\nThe `bounce` block makes - the sprite and the target bounce when they touch each other. Both the sprite - and the target change how they are moving.\r\n\r\n## bounceOff\r\n\r\nThe - `bounceOff` block makes the sprite bounce off the target. The target keeps - moving normally.\r\n\r\n\r\n\r\n# Do This\r\n\r\nChoose the best block to - model the basketball bouncing off the floor. [Show me where](#triggercallout=code_triggered)\r\n\r\n[//]: - # (https://images.code.org/24355fc6377cfafdce3ce2b3568a33c3-image-1470343728940.png)\r\n\r\n[//]: - # (https://images.code.org/87e4306e0371c7975b8fb2583657ee4a-image-1470343728942.png)" - CSD U3 Complex Movement counter prediction_markdown_instruction: "# Velocity - and the Counter Pattern\r\n\r\nUsing the counter pattern with a sprite's - x and y property makes a sprite move smoothly across the screen. In this program - **the counter pattern is being used with the `sprite.velocityX` property** - instead.\r\n\r\n# Predict\r\n\r\nWhat do you think will happen when the code - is run? Why? Once you're ready you can run the code to find out." - CSD U3 Compound Nested Challenge_markdown_instruction: "# Checking for Multiple - Conditions\r\n\r\nSo far we've looked at a lot of ways to check if a single - condition is true, but often a program needs to check the state of many conditions - simultaneously before making a decision. For this challenge, let's assume - the following scenario:\r\n\r\n- The sprite should move up, down, left, and - right if the corresponding arrow key is pressed.\r\n- The sprite should _not_ - go all the way off the screen in any direction.\r\n\r\n# Do This Together\r\n\r\nBefore - you tackle writing this program, you'll need to figure out how to check multiple - conditions at once.\r\n\r\n* **Brainstorm** with your neighbors ways you might - check for more than one condition.\r\n* **Share** back with the whole class - so you can see other potential approaches.\r\n* **Explore** the toolbox for - blocks that might help (pay extra attention to the Math and Control drawers).\r\n* - **Program** your proposed solution.\r\n* **Test** your program to make sure - it's actually checking all of the conditions you intended.\r\n" - CSD U3 Compound Nested Examples_markdown_instruction: "# Multiple Paths to - the Same Outcome\r\n\r\nYou may have seen several different approaches to - solving the previous challenge - one of the beatiful things about programming - is that it is as much about personal expression as it is about problem solving. - You could have 10 people attempt to create the same program, and each would - be unique and reflective of the person who programmed it!\r\n\r\nThere are - two primary approaches to checking for multiple conditions:\r\n\r\n### Nesting - Conditionals\r\n\r\nIf you think about asking one question first, and then - asking the second question only if the first was true, you could nest your - conditionals, like so:\r\n\r\n```javascript\r\nif (keyDown('up') {\r\n if - (sprite.y > 0) {\r\n sprite.y = sprite.y - 1;\r\n }\r\n}\r\n```\r\n\r\n### - Compound Booleans\r\n\r\nIf you think about asking if both the first and second - question are true at the same time, you could use `&&` (and) to combine booleans, - like so:\r\n\r\n```javascript\r\nif (keyDown('up') && sprite.y < 0) {\r\n\tsprite.y - = sprite.y - 1;\r\n}\r\n```\r\n\r\n# Do This\r\n\r\nThis program uses a nested - conditional to check the up arrow and a compound boolean to check the down - arrow. Use one (or both) techniques to check the left and right arrows as - well." - CSD U3 Conditional Predict_markdown_instruction: "# Prediction\r\n\r\nIn this - program, the animation has different reactions when the user presses different - keys. One reaction is a new kind of behavior you haven't seen before. Look - at the following inputs and match them to their outputs. Once you have made - your prediction you will be able to test it out.\r\n\r\n| Input |\r\n| ------------- - | \r\n| Press the _space_ bar | \r\n| Press the _w_ key | \r\n| Press the - _j_ key |\r\n| Press the _j_ and _k_ keys | \r\n| Press the _k_ key |\r\n\r\n\r\n| - Output |\r\n| ------------------------- |\r\n| blue_sprite rotates clockwise |\r\n| - red_sprite moves up and blue_sprite moves down |\r\n| The sprites don't - change |\r\n| red_sprite rotates counter clockwise |\r\n| red_sprite gets - bigger and blue_sprite gets smaller |\r\n" - CSD U3 Conditional Project_markdown_instruction: "# Get Creative\r\n\r\nAt - this point you have all of the tools necessary to make an interactive animation - or simple game of your own design! This is your chance practice using all - of the blocks you've seen so far, and to experiment with blocks you haven't - used yet.\r\n\r\n# Do This\r\n\r\nDesign an interactive animation of your - own. Your program should -\r\n\r\n- Use conditionals to get keyboard input\r\n- - Use conditionals to react to a sprite's properties\r\n- Allow a user to move - one or more sprites around the screen\r\n- Change multiple sprite properties - through conditionals\r\n\r\n_You might notice some new blocks in the Sprites - drawer, experiment with them and see if you can incorporate them into your - conditionals._" - CSD U3 Counters assigning an expression_markdown_instruction: "# Assignment - and Expressions\r\n\r\nYou know that **variables can hold a single value**. - You also know that **expressions are always evaluated to a single value**. - Why don't we try storing that single value in a variable so that we can use - it many times in our programs.\r\n\r\n# Do This\r\n\r\nThis program generates - a random multiple of 10 (10, 20, 30, 40 etc) and stores it in the variable - `size`\r\n\r\n* **Run the progam** to see how it works\r\n* **Change the numbers - used in the expression on line 3** to see how it affects this simple animation" - CSD U3 Counters counter colors_markdown_instruction: "# Counters in Colors\r\n\r\nThe - counter pattern you've been using is incredibly useful for changing many - different aspects of your images, not just the position of shapes. **Anything - that normally would be drawn with a number can easily be animated with a counter - variable.**\r\n\r\n# Do This\r\n\r\nThe goal of this program is to use two - variables as counters to **transition a circle's color slowly from blue to - red**.\r\n\r\n* **Run the program** to see what happens.\r\n\t* The `red` - value **already counts up by 1**\r\n\t* The `blue` value **doesn't change** - and so the circle becomes purple, not red.\r\n* Use what you know about counters - to **add code that will make the circle transition smoothly to red**\r\n* - **Note:** When the `color` command sees a value outside the range of 0 - 255 - it just rounds. For example, 300 becomes 255 and -100 becomes 0." - CSD U3 Counters counter square movement_markdown_instruction: "# Animating - with Counters\r\n\r\nThe counter pattern can be used to increase the value - of a variable each time the draw loop runs. You can use this to create smooth - motion in your programs. You're going to try out a few ways of using this.\r\n\r\n# - Do This\r\n\r\nThis program uses the counter pattern with a variable called - `xPos`.\r\n\r\n* **Read the program** and make a prediction of how it will - run.\r\n* **Run the program** to check your prediction\r\n* **Change the code** - so that `xPos` changes by different amounts each draw loop. For example instead - of `xPos = xPos + 1` you could try:\r\n\t* `xPos = xPos + 2`\r\n * `xPos - = xPos + 5`\r\n * `xPos = xPos + 0.1`" - CSD U3 Counters counter subtraction_markdown_instruction: "# Counting Down\r\n\r\nSometimes - you won't want to count up, you'll want to count down. You can **subtract** - from a variable's value just as easily as you add. ![](https://images.code.org/8b98effa437da54090926c3451af204d-image-1465325587949.52.49 - PM.png)\r\n\r\n\t// counter pattern, counting down\r\n counter = counter - - 1;\r\n\r\nKeep getting practice using counters to animate, but this time - try counting down.\r\n# Do This\r\n\r\nThis program uses the counter pattern - with a variable called `xPos`.\r\n\r\n* The square currently starts in the - center and **goes off the right side** of the screen\r\n* **Change the program** - so that the square **goes off the left side of the screen** instead.\r\n\r\n" - CSD U3 Counters counters expressions_markdown_instruction: "# Using One Counter - Many Times\r\n\r\nYou've already seen and used commands like `x = x + 1` - often to update the value of `x`. Sometimes though we want to **do some math - with a variable without actually changing that variable's value**. \r\n\r\nThis - program draws a rectangle **100 pixels to the right of `x` without changing - the value of `x`**. Here's the steps your computer goes through to run that - second line of code.\r\n\r\n![](https://images.code.org/8f33bbb0189c5e1b854c5b1786168225-image-1465503000293.09.49 - PM.png)\r\n\r\nUsing this pattern allows you to use a single counter to animate - multiple objects, as you're about to see.\r\n\r\n# Do This\r\n\r\nThis program - creates a counter variable called `xPos` and uses it to animate 3 rectangles.\r\n\r\n* - **Run the program** to see what happens.\r\n* **The red and orange rectangles - move across the screen but the yellow one doesn't yet.**\r\n* **Write code - following the pattern shown above** so that the yellow rectangle will move - across the screen with the others.\r\n* **Hint:** How was the orange rectangle - made to move?\r\n\r\n![](https://images.code.org/822941874e7add509bb80266718efb94-image-1463080462625.gif)" - CSD U3 Counters counters sunset night_markdown_instruction: "# Challenge: Nightfall\r\n\r\nThink - you've got drawing with counters down? Try this challenge.\r\n\r\nThe color - block can take a 4th input that controls the opacity of the color. You can - click the arrows on the side of the color block to expand this 4th input.\r\n\r\n![](https://images.code.org/7844f8cb46eade7cec452b7a4d98124b-image-1484964689007.10.08 - PM.png)\r\n\r\n# Do This\r\n\r\nThis is your same sunset animation from before. - Can you make the scene slowly change to night?\r\n\r\n![](https://images.code.org/b055142110b0d0ed092d6496447aad6e-image-1463079830043.gif)\r\n\r\n" - CSD U3 Counters counters sunset_markdown_instruction: "# Animate a Sunset\r\n\r\nYou - now know a little bit about programming with variables. You've seen that - they can **store a value to use many times in a program**. You've seen how - the **counter pattern can allow you to perform smooth animations**. It's - now time to put everything you've learned together.\r\n\r\n<img src = \"https://images.code.org/d0a1386297fae9f21fc046da62b13248-image-1462997082538.gif\" - style=\"float: right; height: 200px\">\r\n# Do This\r\n\r\nThis program is - designed to **animate a sunset**. Some starter code is provided that **creates - all the counter variables you'll need to run your animation**. You need to - decide how to use them to animate this image.\r\n\r\n* **Run the program to - see how it works**\r\n* **Add code** that will:\r\n\t* Make the sun go down\r\n * - Change the color of the sky from blue to red\r\n * Make the cloud go across - the screen\r\n \r\n<details><Summary>Need help?</Summary>\r\n<ul>\r\n<li>For - help animating the sun go check out level 10</li>\r\n<li>For help animating - the sky go check out level 12</li>\r\n<li>For help animating the cloud go - check out level 13</li>\r\n</ul>\r\n\r\n</details>" - CSD U3 Counters explaining counters contained 2_markdown_instruction: "# The - Counter Pattern\r\n\r\nThis pattern is one of the most important ones in all - of programming. \r\n\r\n![](https://images.code.org/83af2e40443ab294ba635f2a01a48ac7-image-1465506512065.06.56 - PM.png)\r\n \r\nIt is used to increase the value of a variable by 1. You - might call it the **counter pattern** since it can be used to make a variable - that counts up. You'll use this pattern a lot, especially with the draw loop. - Let's see what that looks like.\r\n\r\n# Do This\r\n\r\nThis program creates - a variable `counter` and then uses the **counter pattern** to make it count - up. When you run the program what do you think you'll see on the screen?\r\n\r\n* - **Read the program** and make a prediction of what the output will be.\r\n* - **Run the program** to check your prediction.\r\n* **Discuss with a neighbor**. - Can you explain what you observed?\r\n\r\n" - CSD U3 Counters explaining counters_markdown_instruction: "# The Counter Pattern\r\n\r\nThis - pattern is one of the most important ones in all of programming. \r\n\r\n![](https://images.code.org/83af2e40443ab294ba635f2a01a48ac7-image-1465506512065.06.56 - PM.png)\r\n \r\nIt is used to increase the value of a variable by 1. You - might call it the **counter pattern** since it can be used to make a variable - that counts up. You'll use this pattern a lot, especially with the draw loop. - Let's see what that looks like.\r\n\r\n# Do This\r\n\r\nThis program creates - a variable `counter` and then uses the **counter pattern** to make it count - up. When you run the program what do you think you'll see on the screen?\r\n\r\n* - **Read the program** and make a prediction of what the output will be.\r\n* - **Run the program** to check your prediction.\r\n* **Discuss with a neighbor**. - Can you explain what you observed?\r\n\r\n" - CSD U3 Counters expressions_markdown_instruction: "# Expressions\r\n\r\nWe're - going to start learning about **expressions** and how to use them in programs. - Here are two expressions, a short one and a longer one.\r\n\r\n`1 + 2`\r\n\r\n`(1000 - - 400) / (3 * 20)`\r\n\r\nThese expressions have two important components:\r\n\r\n* - **values:** numbers, text, or information in your program \r\n* **operators:** - commands telling the computer to perform an action with those value `+`, `-`, - `*`, `/`\r\n\r\nDon't worry if this is a lot of vocabulary all at once. Try - using some expressions first to get a feel for how they work.\r\n\r\n# Do - This: \r\n\r\nThis program draws a rectangle using 4 separate expressions. - \r\n\r\n* **Run the program** to see what happens\r\n* **Change some of the - values and operators in the 4 expressions**. How does it change the rectangle?\r\n* - Move on once you've changed a few expressions. It's fine if your program - didn't run properly." - CSD U3 Counters long expressions_markdown_instruction: "# Expressions Evaluate - to a Single Value\r\n\r\nAs you probably just noticed expressions can be used - in places where you might normally use a number. That's because your computer - can **evaluate or calculate the single number that is the result of the expression**. - When your computer runs the command\r\n\r\n`strokeWeight(10 + 20)`\r\n\r\nIt - will first calculate the value of the expression `10 + 20` to be `30` and - use that value to set the strokeWeight. In fact, **every expression will eventually - be evaluated to a single value**.\r\n\r\n# Do This\r\n\r\nThis program uses - console.log to show the single value of a couple long expressions.\r\n\r\n* - **Run the program** to see that the expressions result in a single value\r\n* - **Create and display the results of some expressions of your own**. It doesn't - matter what they are, just throw in something long and complex and convince - yourself a single value always comes out." - CSD U3 Counters random expressions_markdown_instruction: "# Random Numbers - in Expressions\r\n\r\nYou can **use random numbers inside of expressions** - too. For example, \r\n\r\n`10 * randomNumber(1,5)`\r\n\r\nis a perfectly valid - expression. This is because **`randomNumber` will generate a single random - value** that can then be used in the expression just like a number.\r\n\r\n# - Do This\r\n\r\nThis program displays random multiples of 10 between 10 and - 50.\r\n\r\n* **Run the program** to see how it works\r\n* **Change the program** - so that it displays **random multiples of 10 between 10 and 100**.\r\n* Change - the expression with a random number in it more if you like. Once you're comfortable - with how it works move on." - CSD U3 Counters sunset template_markdown_instruction: "# Animate a Sunset\r\n\r\nYou - now know a little bit about how **expressions can be used to create variables - that count** and you've used these in some simple programs. Try using counter - variables to animate a more complex scene.\r\n\r\n# Do This\r\n\r\nThis program - is designed to **animate a sunset**. Some starter code is provided but you'll - need to fill in the rest.\r\n\r\n* **Run the program to see how it works**\r\n* - **Add code** that will:\r\n\t* Make the sun go down\r\n * Make the cloud - go across the screen\r\n * Change the color of the sky from blue to red\r\n \r\n<details><Summary>Want - a hint?</Summary>\r\n<ul>\r\n<li>For help animating the sun go check out level - [[blah]]</li>\r\n<li>For help animating the cloud go check out level [[blah]]</li>\r\n<li>For - help animating the sky go check out level [[blah]]</li>\r\n</ul>\r\n\r\n</details>\r\n\r\n![](https://images.code.org/d0a1386297fae9f21fc046da62b13248-image-1462997082538.gif)" - CSD U3 Counters variables as counters_markdown_instruction: "# x = x + 1\r\n\r\nThe - following line of code **is the most important one to understand in this lesson**.\r\n\r\n`x - = x + 1;`\r\n\r\nTry it out in a program first, then move on to **learn more - about what this command is doing**.\r\n\r\n# Do This:\r\n\r\n* **Read the - program to get a sense of how it should run**\r\n* **Run the program** and - observe how it works\r\n* **Discuss with a neighbor** what you observe and - why you think it is happening. Once you've talked, move on." - CSD U3 Counters variables in expressions_markdown_instruction: "# Variables - in Expressions\r\n\r\nYou just saw that **the result of an expression can - be stored in a variable**. Get ready though, because we're about to get even - more interesting.\r\n\r\n**Variables can be used in expressions**. All of - these expressions are valid (assuming the variables have been created):\r\n\r\n`age - + 1`\r\n`height / 2`\r\n`(time * speed) + 100`\r\n\r\nIn each case **the variable's - value is used when its label appears**.\r\n\r\n# Do This\r\n\r\nThis program - generates a random multiple of 10 (10, 20, 30, 40 etc) and stores it in the - variable `size`\r\n\r\n* **Run the progam** to see how it works\r\n* **The - variable `size` appears in two expressions on lines 7 and 8.**\r\n* **Change - the values in these expressions** to see how they affect the way your program - works" - CSD U3 Counters watchers_markdown_instruction: "# Debugging: Watchers\r\n\r\nOnce - you have multiple counter variables it can become difficult to keep track - of how your program is running. **If you want to debug your code, it's useful - to be able to see the values of your different variables as they change.**\r\n\r\nYou - can add a **watcher** to a variable at any time by typing `$watch` followed - by the name of your variable into the Debug Console. This example shows how - you would create watchers for the variables `x` and `y`. Notice they've now - **been added to the \"Watch\" window** to the right.\r\n\r\n![](https://images.code.org/c5cddda5572e73e3f082287aa076e4a8-image-1465327628344.25.11 - PM.png)\r\n\r\nWhile your program is running, the values of `x` and `y` in - the \"Watch\" window will update to show their current value.\r\n\r\n# Do - This\r\n\r\nThis program draws a dot that slowly grows in size. You want to - know **the value of `size` when the dot totally covers the screen.**\r\n\r\n* - **Create a watcher** for `size` by running the command `$watch size` in the - Debug Console.\r\n* **Run the program** and observe the value of `size` change - in the \"Watch\" window.\r\n* **Talk to a neighbor**. How large is `size` - when the dot covers the whole screen?" - CSD U3 Direction Animations_markdown_instruction: "# Changing Images as you - Move\r\nRight now your conditionals only do one thing (change your sprite's - x or y), but you can actually put as much code as you want inside a conditional. - A common thing to do in games is to change your character's image depending - on which direction they're walking.\r\n\r\n# Do This\r\nUsing the provided - program and images:\r\n\r\n- Click on the bug image you are using.\r\n- Use - the Duplicate Button <img src=\"https://images.code.org/f8628b1d4393760d72ea625a93aceb66-image-1481036707819.04.47 - AM.png\" style=\"width:30px\"> in the Animation Tab to make 4 copies of the - bug image you are using.\r\n- Make each copy face a different way and give - it a good descriptive name.\r\n- You should now have 4 images of the bug in - your animation tab, each facing a different way\r\n- Write code that uses - `sprite.setAnimation()` to change the image on your bug sprite when different - arrow keys are pressed\r\n\t- The up arrow should switch to up facing bug - image\r\n\t- The down arrow should switch to down facing bug image\r\n\t- - The left arrow should switch to left facing bug image\r\n\t- The right arrow - should switch to right facing bug image" - CSD U3 Direction Arrows_markdown_instruction: "# Move in All Directions\r\nOnce - you've got your sprite moving in one direction by responding to a `keyDown`, - getting it to move in all four directions should be more of the same. The - basic keyboard control that you're developing here will become the basis - for many of the games you make down the road.\r\n\r\n# Do This\r\nThe bug - sprite you made that responds to the up arrow has been brought to this level. - Add the interaction for the other three arrow keys!\r\n\r\n- Add three if - statements - one for each arrow.\r\n- Each if statement should move the sprite - in the direction of the arrow.\r\n- HINT: As you're working, make sure you - consider both which axis (x or y) your sprite should be moving depending on - the key, and whether or not you should be increasing or decreasing to go in - the desired direction." - CSD U3 Draw Loop Discuss_markdown_instruction: "# Draw()ing\r\nHere's a program - that looks pretty similar to what you've been writing, but may behave quite - differently. You'll want to **stop and discuss** with the class before moving - on.\r\n\r\n# Do This Together\r\nYou will **not write any code** in this level, - and you should be working as a whole class.\r\n* **Read** the provided program - together.\r\n* **Identify** elements that are different than those you have - seen before.\r\n* **Predict** what the provided program will do. **Be specific!**\r\n* - **Run** the program several times and **record** the results.\r\n* **Discuss - with a neighbor.** Was your prediction correct?\r\n* **Hypothesize** what - is happening when this code is run." - CSD U3 Draw Loop Experiment_markdown_instruction: "# Do This\r\nTry using some - of the other shape functions you've learned in the draw loop. What happens - when you use `randomNumber()` to generate some of the inputs?\r\n\r\n# Challenge\r\nExperiment - with adding code before and after the `draw()` loop. Can you figure out what - gets called when?" - CSD U3 Else_markdown_instruction: "# What If My Condition Isn't True?\r\n\r\n<img - src=\"https://images.code.org/1a997d78fcd88efeb9e6dc5a02aa88e8-image-1464706463138.53.58.png\" - width=\"125px\" style=\"float:right\">\r\n\r\nSometimes we want to tell our - program what to do if a condition is `true`, but also what to do if it's - `false`. Pressing the plus button at the bottom of your conditional block - will give you another section called `else`. This `else` section is a fallback - - it will get called whenever the condition in the `if` before it is `false`.\r\n\r\n# - Do This\r\nThe gears are back again. The last time you worked with them, you - made them spin when the space bar is pressed. Instead of the gears only spinning - when the space key is pressed, we want them to spin one way when the space - key is pressed and spin the other way when it's not pressed.\r\n<img src=\"https://images.code.org/b074d47ca8dfa5ab3bfd08344b4f4e42-image-1464706389475.gif\" - style=\"float:right\">\r\n\r\n* Click the _plus_ button at the bottom of the - if block to add an else.\r\n* Add commands to make the gears spin opposite - of the direction that they do when the space bar is pressed." - CSD U3 Expressions calculator_markdown_instruction: "# Adding and Multiplying\r\n\r\nYour - computer can calculate the results of many math problems. Try out this example, - where we add and multiply a few numbers. Then extend it yourself to the numbers - 1 - 10.\r\n\r\n# Do This\r\n\r\n* Run the program code once to see how it - works\r\n* Following the examples, write a program that **multiplys the numbers - 1 - 10** and **adds the numbers 1 - 10**\r\n* **When you're done confirm - your results with a neighbor**" - CSD U3 finishing touches_markdown_instruction: "# Finishing Touches\r\n\r\nNow - that you have the basis for your game, it's time to add some finishing touches.\r\n\r\nTo - make your game even better, try making at least two improvements to it. You - can use the list below to help you, or you can come up with your own improvements - that you'd like to make.\r\n\r\n* Find a way to keep your player from going - off the edges of the screen.\r\n* Add a different item for your player to - collect or avoid that are worth different point values.\r\n* Make a variable - to keep track of how many lives your player has, and then end the game when - the lives run out.\r\n* Add sprites that move in the background of your game.\r\n* - Make another background to switch to when the score gets even higher, or when - the game ends.\r\n* Give your game a way to end. Possible events to end your - game could be the score reaching a certain value, or the amount of lives to - keep the game running runs out.\r\n* If your game has platforms, try making - the objects in your game interact with these platforms in some way." - CSD U3 Frame Rate_markdown_instruction: "# Too Fast, Slow Down!\r\n<img src=\"https://images.code.org/f249b981ead9d196b0f136c402dd0c41-image-1478803334302.gif\" - style=\"float:right; width:200px\"/>\r\n\r\nThe animation is working, but - it's a bit too fast. We're flipping the pages in our virtual flipbook too - often, so we'll need to slow that down.\r\n\r\nThe frequency that our draw - loop is run is called the **frame rate** - the number of times per second - the screen is refreshed.\r\n\r\nThe default frame rate for Game Lab is 30 - frames per second (or FPS), which is great for a video game, but not so good - for our animation. We can slow down the frame rate using the `Game.frameRate` - block.\r\n\r\n# Do This\r\n\r\n* Use the `Game.frameRate` block at the very - beginning of your program, setting it to a number (frames per second) that - slows the animation down a bit. \r\n* Test it out with different numbers to - see which frame rate you like (the default is 30, and it can't go any higher - than 60)." - CSD U3 Functions Add Change Background tmp_markdown_instruction: "# Change - the Background with the Score\r\n\r\nOnce you've caught 10 coins it's time - to celebrate. You should change the background to be something fun.\r\n\r\n<img - src=\"https://images.code.org/943c67e59502334fc65a25e690076bdb-image-1475030156530.33.54 - PM.png\" style=\"float:right; height:100px\">\r\n\r\n# Do This\r\n\r\n* Use - an **if-statement** and two separate functions to draw your backgrounds\r\n* - Then go write your functions outside your draw loop. You get to decide what - a \"simple\" or \"crazy\" background are. Have fun with it!" - CSD U3 Functions Add Change Background_markdown_instruction: "# Change the - Background with the Score\r\n\r\nOnce you've caught 10 coins it's time to - celebrate. You should change the background to be something fun.\r\n\r\n<img - src=\"https://images.code.org/943c67e59502334fc65a25e690076bdb-image-1475030156530.33.54 - PM.png\" style=\"float:right; height:100px\">\r\n\r\n# Do This\r\n\r\n* Use - an **if-statement** and two separate functions to draw your backgrounds\r\n* - Then go write your functions outside your draw loop. You get to decide what - a \"simple\" or \"crazy\" background are. Have fun with it!" - CSD U3 Functions Add IsTouching_markdown_instruction: "# Catch the Coin, Increase - the Score\r\n\r\nLet's make that score change now too to complete the game. - You'll need to be able to tell when the bunny is touching the coin and the - reset it.\r\n\r\n# Do This\r\n\r\n* Use an **if-statement** and the **isTouching** - block to increase the score when the bunny catches the coin\r\n* Make sure - you're **calling your function** to reset the coin once it's been caught.\r\n* - Play the game and **randomize the velocity of the coin** to a range that you - think is fun" - CSD U3 Functions Call Draw Loop_markdown_instruction: "# Calling Functions - in the Draw Loop\r\n\r\nYou can call a function inside the draw loop, just - as you would anywhere else in your code.\r\n\r\n# Do This\r\n\r\nA function - that will draw a background has been created for you. A sprite has been created - to move across the background.\r\n\r\n* **Call the function inside the draw - loop** so that the sprite appears on top of the background.\r\n* **Note:** - Don't create functions inside the draw loop. Make them at the bottom of your - code." - CSD U3 Functions Call Function_markdown_instruction: "# Calling Functions\r\n\r\nFunctions - let you build your own blocks and decide what code goes inside of them. This - is the command that lets you create a new function.\r\n\r\n![](https://images.code.org/2493f74065d4e642ca51429b8832e431-image-1474913839061.17.09 - PM.png)\r\n\r\nYou use or \"call\" your function like any other block by using - the name you gave it.\r\n\r\n![](https://images.code.org/61a6eb716e263b580ecd63fab0de7547-image-1474913770359.16.00 - PM.png)\r\n\r\nThe blocks to create and call functions can be found in the - \"Functions\" tab of the palette.\r\n\r\n![](https://images.code.org/a570a05be61297ee9f0d79a02df8db6e-image-1474922721897.44.36 - PM.png)\r\n\r\n# Do This\r\n\r\nThis program has already created 2 functions. - Only one of them is being called.\r\n\r\n* **Call the second function** to - reveal the full image. Use the function that is being called as a guide.\r\n* - **Tip:** Just like with all other blocks, spelling and capitalization is important - here" - CSD U3 Functions Create Function_markdown_instruction: "# Creating Functions - to Organize Code\r\n\r\nIn Game Lab all the action is happening in the draw - loop, but too much complex code makes it really confusing to read. To keep - your draw loop easy to read, begin by writing functions for larger chunks - of code. You can then go write them below. This is a really good example of - using **abstraction** to think about problems at a high level and worry about - details later.\r\n\r\n<img src=\"https://images.code.org/1a5beeaad6e55c5b27a43604be4f039a-image-1475199750468.42.07 - PM.png\" style=\"float:right;width:150px\">\r\n\r\n# Do This\r\n\r\nThis program - should draw a daytime scene or a nighttime scene, depending on the location - of the mouse. The draw loop describes what needs to happen but one of the - functions hasn't been written yet.\r\n\r\n* **Write the `drawNight` function** - which has been created but is empty\r\n* Hint: Look at the picture to the - right for how your night image should look. Can you use the `drawDay` function - to help you at all?" - CSD U3 Functions Improve Side Scroller_markdown_instruction: "# Finish Your - Side Scroller\r\n\r\nTime to use functions to finish off you side-scroller!\r\n\r\n# - Do This\r\n\r\n* Change the background of your game depending on the score. - Use functions to move the code for your background out of your draw loop\r\n* - Use functions to make sure you're not repeating code when you reset your - obstacle\r\n\r\n_Challenge: Add another sprite to your game and define how - it will interact with your main character. It might be another obstacle to - avoid or some kind of goal to collect_" - CSD U3 Functions isTouching_markdown_instruction: "# Making Changes to Functions\r\n\r\nA - nice benefit of using functions to remove repeated code is that you can now - easily make changes to multiple places in your code. Just change how you create - the functions, and your program will now use the new code everywhere your - function is called.\r\n\r\n# Do This\r\n\r\nMake changes to the `setFlyman` - function so that he starts at a random Y location between 0 and 400, and moves - at a random speed every time he restarts." - CSD U3 Functions Order Functions_markdown_instruction: "# Reordering Code\r\n\r\nPlacing - code inside functions makes it easy to read and make changes to. Good names - for functions indicate what your program is doing to a reader. You can call - your functions in a different order to quickly make significant changes to - how your program runs.\r\n\r\n# Do This\r\n\r\nThis program has already created - 4 functions that draw parts of a scene. Unfortunately it's not coming out - right.\r\n\r\n* **Read the of the 4 functions** to know what they do\r\n* - **Call the functions** in an order that draws the scene in the way that looks - best to you" - CSD U3 Functions Prediction Order of Create Call_markdown_instruction: "# When - Can Your Define Functions?\r\n\r\nSo far you've only seen functions created - at the bottom of your code. What do you think happens if we create the function - before we call it?\r\n\r\n# Do This\r\n\r\n" - CSD U3 Functions Randomize Sprite_markdown_instruction: "# Making Changes to - Functions\r\n\r\nA nice benefit of using functions to remove repeated code - is that you can now easily make changes to multiple places in your code. Just - change how you create the functions, and your program will now use the new - code everywhere your function is called.\r\n\r\n# Do This\r\n\r\nMake changes - to the `setFlyman` function so that he starts at a random Y location between - 0 and 400, and moves at a random velocity every time he is reset." - CSD U3 Functions Reset Sprite_markdown_instruction: "# Calling Functions Multiple - Times\r\n\r\nYou'll often want to use the same code at many places in your - program. Once you've created a function you can call it as many times as - you like.\r\n\r\n# Do This\r\n\r\nThis code creates a sprite that moves across - the screen once. How can you make it go back across the screen.\r\n\r\n* **Note:** - The function is already called once at the beginning of your program\r\n* - Read the condition of the **if-statement** inside the draw loop. Why do you - think it's there?\r\n* Use this if-statement and the function written for - you to make the sprite move across the screen multiple times." - CSD U3 Functions Template Flyman_markdown_instruction: "# Calling Functions - Multiple Times\r\n\r\nOften times you'll want to use the same code at many - places in your program. Once you've created a function you can call it as - many times as you like.\r\n\r\n# Do This\r\n\r\nThis code creates a sprite - that moves across the screen once. How can you make it go back across the - screen.\r\n\r\n* Read the condition of the **if-statement** inside the draw - loop. Why do you think it's there?\r\n* Use this if-statement and the function - written for you to make the sprite move across the screen multiple times." - CSD U3 Functions Write Reset_markdown_instruction: "# Write Your Own Function\r\n\r\nTime - to practice writing functions of your own. This is a very simple game in which - coins fall from the sky and the bunny tries to catch them. All you need to - do is write the function that sets up the coin.\r\n\r\n# Do This\r\n\r\n* - **Read and run the code** that already exists to make sure you know how it - works\r\n* **Write the code for the `setCoin`** function to make the coin - fall from the sky.\r\n* You can go look at some of the previous levels if - you need help" - CSD U3 Functions Write Your Own_markdown_instruction: "# Write Your Own Function\r\n\r\nTry - writing your own function to add something to the scene!\r\n\r\n# Do This\r\n\r\nThis - is the same program you wrote in the last level.\r\n\r\n* **Create and call** - a function that adds something to the scene. No need to get too complex, but - make sure you get some practice writing a function\r\n* **Share your code** - with a neighbor. Do they think your function's name clearly describes what - it does? Make changes if you need to." - CSD U3 game animations_markdown_instruction: "# Create your Animations\r\n\r\nNext - you will create your animations in the animation tab. Don't forget to make - multiple animations if you want your sprite to change appearance according - to how it's moving.\r\n" - CSD U3 game backgrounds_markdown_instruction: "# Create your Backgrounds\r\n\r\nNext, - you'll create all of the background functions that you need for your game. Some - games only have one background, and others have more than one that's chosen - according to user score or another aspect of gameplay. You'll need to create - a function for each separate background in your game. You'll write the code - to choose the correct background in the next level.\r\n\r\n* [Show me the - block to create a new function](#triggercallout=callout1)\r\n* [Show me the - area in the code to put my function](#triggercallout=callout2)\r\n\r\nAfter - you create your functions, test them by calling them inside the draw loop, - one background per test.\r\n\r\n* [show me the block to call my function](#triggercallout=callout3)" - CSD U3 game choose background_markdown_instruction: "# Choose your Backgrounds\r\n\r\nNow - that you have the backgrounds that you need, you'll write the code to choose - the correct background. You've seen this done in [Stage 15 Level 11](/s/csd3/stage/15/puzzle/11).\r\n\r\nAfter - you've written the code, test it by changing the starting value of your variables - and making sure the correct background shows up.\r\n" - CSD U3 game create sprites_markdown_instruction: "# Create your Sprites\r\n\r\nNext - you will create your sprites and give them starting properties in the \"Create - Sprites\" area of your code. For each sprite your should:\r\n\r\n* Create - the sprite in the correct place on the screen\r\n* Set its animation (or color - and size)\r\n* Set its velocity and rotation speed, if needed\r\n* Set its - collider and bounciness, if needed\r\n\r\nAfter you create each sprite, test - it before making the next one. If your sprite starts off screen, first place - it on the screen to test it, them move it back off screen once you know that - it looks right.\r\n\r\nIf your sprites position will need to be reset later - in your game, it's a good idea to make a function that sets the position - of this sprite that you can use again later.\r\n" - CSD U3 game display boards_markdown_instruction: "# Display Boards\r\n\r\nNow - that your backgrounds are working, you can add your display boards. Most - games have a score board, but you might also want to display information about - player level or lives remaining. Look at [Stage 12 Puzzle 9](/s/csd3/stage/12/puzzle/9) - for an example of how to make a scoreboard.\r\n\r\nFor each display board:\r\n* - Create a function to display the information\r\n* Call the function in the - draw loop\r\n\r\nBe sure to test your boards by changing the starting value - of your variables and making sure the board also changes when you run the - code.\r\n" - CSD U3 game interactions_markdown_instruction: "# Sprite Interactions\r\n\r\nThe - last step is to create the functions that make your sprites interact in the - right ways. You'll need a function for each type of sprite interaction. - You can use the `collectItems` in [Stage 17 Puzzle 17](/s/csd3/stage/17/puzzle/17) - and `displaceEnemies` in [Stage 16 Puzzle 15](/s/csd3/stage/16/puzzle/15) - as examples.\r\n\r\nFor each interaction:\r\n* Create a function in the functions - area of your code\r\n* Call the function inside the draw loop\r\n\r\nAfter - you make each function, run the code to test it before making another.\r\n" - CSD U3 game sprite movement_markdown_instruction: "# Sprite Movement Functions\r\n\r\nNow - you'll make the functions that make the sprite move in different ways as - the game is played. Some examples of functions that you've written are `loopPlatforms` - in [Stage 17 Puzzle 9](/s/csd3/stage/17/puzzle/9) and `playerFall` in [Stage - 17 Puzzle 14](/s/csd3/stage/17/puzzle/14).\r\n\r\nFor each movement:\r\n* - Create a function that will make the sprite move in that way\r\n* Call the - function inside the draw loop\r\n" - CSD U3 game user controls_markdown_instruction: "# User Controls\r\n\r\nNext, - you'll want to make sure your user controls are working. Create a function - that makes your sprites respond to user controls as defined in your project - guide. You can use the function in in [Stage 16 Puzzle 13](/s/csd3/stage/16/puzzle/13) - as an example.\r\n" - CSD U3 game variables_markdown_instruction: "# Create your Variables\r\n\r\nFirst, - you'll need to create all of your variables and put them in the variables - area of your code.\r\n* [Show me the block](#triggercallout=callout1)\r\n* - [Show me the area in the code](#triggercallout=callout2)\r\n\r\nDon't forget, - each variable needs a label (name) and a starting value. You can change the - value of the variable later in your code." - CSD U3 If Else_markdown_instruction: "# When to Provide a Fallback\r\n\r\nThe - else clause is useful as a fallback to the main condition that you're checking - - that is, if you _care_ what happens when your primary condition is `false`, - you should provide an else clause to take care of it.\r\n\r\n<img src=\"https://images.code.org/730a895b50375781e72c95f5fa21d09d-image-1477681109870.gif\" - style=\"float:right;\">\r\n\r\n# Do This\r\nClick \"Run\" to see the swarm - of bees created for you and a flower on the left side of the screen. Make - the swarm of bees **appear when the mouse is near the flower** (on the left - side of the screen) and **disappear when the mouse is away from the flower** - (on the right side of the screen). Look at the example on the right.\r\n\r\n* - Add an `if else` statement after you update the position of the bees.\r\n* - In the input of the if use a boolean to check if the x position of the mouse - is on the side of the screen with the flower.\r\n* Set the `visible` property - of each bee inside both the if and else statements appropriately to make the - bees only show near the flower." - CSD U3 Interactive Card Background_markdown_instruction: "# Laying Out Your - Background\r\nBefore beginning this project, you should have already completed - the Interactive Card Planning activity, and you'll want to have that paper - with you as you develop your program. Preparation is one of the **most important** - elements of successfully creating a program!\r\n\r\n# Do This\r\nRefer to - your planning activity sheet to help you lay out the shapes that will become - the background to your card.\r\n\r\n* First, figure out what the lowest layer - in your image is (this should use the `background()` block) and add it to - the very top of the `draw()` loop\r\n* Next, layer each additional drawing - block in the order you want them to appear in the stack\r\n* Finally, add - a comment to the top of this section of code to describe what it does, and - if you have any particularly complicated chunks of code within (such as code - to draw a tree or a house), add a descriptive comment to that as well\r\n\r\n**Challenge:** - Can you use variables or `randomNumber()` to add some subtle animation to - your background layer?" - CSD U3 Interactive Card Exemplar_markdown_instruction: "# Example Project\r\n\r\nRun - the program a few times and answer the following questions:\r\n\r\n1) Which - elements appear to use drawing commands?\r\n\r\n2) Which elements appear to - be Sprites?\r\n\r\n3) For each Sprite, which properties are being updated?\r\n\r\n4) - Where do you see conditionals being used?\r\n\r\n5) Are there elements that - you don’t understand?" - CSD U3 Interactive Card Final_markdown_instruction: "# Finishing Touches\r\nNow's - your chance to put some finishing touches on your card. We've included some - new blocks that you haven't seen before, so take some time to look around - and try out some new blocks.\r\n\r\n# Do This\r\nConsider adding any of the - following to finish up your card:\r\n\r\n* Text (add it after the `drawSprites()` - block if you want it on top of everything)\r\n* Additional images for your - Sprites\r\n* Subtle animation in the background\r\n* Sound effects (can you - figure out how to do this?)\r\n* More ways for a user to interact with your - card" - CSD U3 Interactive Card Other Conditionals_markdown_instruction: "# Other Conditionals\r\nThe - _surprise_ in your card comes from conditionals that don't directly respond - to user input, but to some other element of your card. This could be triggered - by a variable that gets updated as the user interacts with your card, or a - Sprite moving into a certain part of the screen.\r\n\r\n# Do This\r\nFor each - of the remaining items on your interactions table:\r\n\r\n* Add an `if` block - (or `if-else` block if you need a fallback action) inside the `draw()` loop\r\n* - Add the appropriate boolean comparison block to the condition (eg. `<`, `>`, - or `==`)\r\n* Add the necessary actions inside the `if` block\r\n\r\n**Challenge:** - Can you create more sophisticated conditionals by nesting them or using compound - booleans?" - CSD U3 Interactive Card Sprites_markdown_instruction: "# Adding Sprites\r\nNow - that you have the more static elements of your card layed out, it's time - to add the Sprites. Your Sprites should provide the primary animations and - interactions for your card - so feel free to get creative here and have fun.\r\n\r\n# - Do This\r\nCheck out the Sprites table on the back of your planning sheet. - For each Sprite in your table:\r\n\r\n* Initialize the Sprite at the top of - your program with `createSprite()`.\r\n* Find or create the image(s) for the - Sprite and set it with `setAnimation()`.\r\n* Inside the `draw()` loop update - any Sprite properties that we will be constantly animating (we'll deal with - conditionals in a minute)." - CSD U3 Interactive Card User Input_markdown_instruction: "# User Input\r\nYou've - got a background, you've got Sprites, now it's time to give your user something - to do!\r\n\r\n# Do This\r\nOn the interactions table from your planning sheet, - find all of the interactions that rely on user input (key presses and mouse - movements). For each of those interactions:\r\n\r\n* Add an `if` block (or - `if-else` block if you need a fallback action) inside the `draw()` loop.\r\n* - Add the appropriate input block for your condition (such as `keyDown()` or - `mouseDown()`).\r\n* Add the necessary actions inside the `if` block.\r\n\r\n**Challenge:** - Can you create more sophisticated conditionals by nesting them or using compound - booleans?" - CSD U3 Keypress Boolean Predict_markdown_instruction: "# Make a Prediction: - keyDown()\r\nThe `keyDown()` block is the first of a new set of blocks that - will let us get input from the user. This is the first step on our road to - actually making games! See if you can figure out how the `keyDown()` block - works.\r\n\r\nWhat do you think will happen when you run the program and press - the \"up\" arrow? Write your prediction below and then run the program to - see if your prediction was accurate." - CSD U3 Keypress Boolean_markdown_instruction: "# keyDown()\r\nThe `keyDown()` - block is the first of a new set of blocks that will let us get input from - the user. This is the first step on our road to actually making games! See - if you can figure out how the `keyDown()` block works.\r\n\r\n# Do This\r\n\r\nYou - will **not write any code** in this program.\r\n\r\n* Read the program and - see if you can guess what will happen.\r\n* Run the program.\r\n* While the - program is running, press the up arrow on your keyboard.\r\n* Observe what - happens." - CSD U3 Keypress Watchers Predict_markdown_instruction: "# Make a Prediction: - User Input\r\n\r\nSo far you've used `keyDown` as a way to let users control - your programs, but that's just one of many ways to take input. In fact, just - one of many ways _to detect keypresses_! Depending on how you want to react - to a keypress, there are a few other blocks you might want to use.\r\n\r\nRead - the program and predict below what will happen when you press each of the - up, down, left, and right arrows.\r\n\r\nAfter making your prediction, run - the code and write down or share with your neighbor your observations.\r\n\r\n* - What seems to be the difference between `keyDown()`, `keyWentDown()`, and - `keyWentUp()`?\r\n* What do you think the exclamation mark (`!`) on line 10 - does?\r\n* How might you use the different keypress blocks in a game?" - CSD U3 Keypress Watchers_markdown_instruction: "# More Ways to Get User Input\r\n\r\nSo - far you've used `keyDown` as a way to let users control your programs, but - that's just one of many ways to take input. In fact, just one of many ways - _to detect keypresses_! Depending on how you want to react to a keypress, - there are a few other blocks you might want to use.\r\n\r\n# Do This\r\n\r\nYou - will **not write any code** in this program.\r\n\r\n* Read the program and - see if you can guess what will happen.\r\n* While the program is running, - press the arrow keys and observe how the screen responds.\r\n* Write down - or share with your neighbor your observations.\r\n\t* What seems to be the - difference between `keyDown()`, `keyWentDown()`, and `keyWentUp()`?\r\n * - What do you think the exclamation mark (`!`) on line 10 does?\r\n * How - might you use the different keypress blocks in a game?" - CSD U3 platform background1_markdown_instruction: "# Background\r\n\r\nThe - first thing that you will create for your game is the background. The sample - game had two different backgrounds that were chosen according to the user's - score. The first background has already been created for you. Look at the - `background1` function in the code below to see how it works. [Show me where](#triggercallout=code_triggered1)\r\n\r\nIn - order for the background function to do something, you have to call it inside - the draw loop. [Show me where](#triggercallout=code_triggered2)\r\n\r\nThere - is also an empty function named `background2`. [Show me where](#triggercallout=code_triggered3) You - will need to fill that function with new code to make a different background, - then test the code by calling the function inside the draw loop.\r\n\r\n# - Do this\r\n\r\n* Read the code for `background1`\r\n* Fill the `background2` - function with new code for a second background.\r\n* Test your `background2` - function by calling it inside the draw loop.\r\n\r\n_Hint: It's much easier - to copy, paste, and make small changes to your code in text mode._" - CSD U3 platform background2_markdown_instruction: "# Choosing your Background\r\n\r\nNow - that you have your score variable, you can use it to choose the right background - for your game. You can see an example of changing your background according - to your score in [Stage 15 Level 11](/s/csd3/stage/15/puzzle/11)\r\n\r\n# - Do This\r\n\r\n\r\n* Inside the draw loop, use an `if` statement and your - two background functions to draw your background according to your score level.\r\n* - Test your code by changing the start score to 100, then running to code to - see whether the background changes.\r\n\r\n_Challenge: If you have a third - background, you can click the plus sign at the bottom of the `if` block. Another - space will appear for your third background function, as well as a place to - check the score again._\r\n" - CSD U3 platform challenge_markdown_instruction: "# Improve Your Game\r\n\r\nImprove - your game by adding in two or more of the features you saw in the last two - examples. You can use the list below to help you.\r\n\r\n* Choose new animations - for your player, platform, and items.\r\n* Prevent your player from going - off the side of the screen.\r\n* Add a different type of item for the player - to collect or avoid.\r\n* Add a variable that keeps track of how many lives - the player has, and end the game if the player runs out.\r\n* Make your player's - animation change direction when the player changes direction.\r\n* Change - the player to only jump when it is on a platform.\r\n* Add another background - and make it appear when the score gets even higher.\r\n* Make your items interact - with the platforms in some way." - CSD U3 platform challenge1_markdown_instruction: "# Collect Items\r\n\r\nLast, - you'll want your player to collect the items falling from the top of the - screen.\r\n\r\n# Do This\r\n\r\n* Create a `collectItems` function and add - it to the \"functions\" area of your code.\r\n* Use the `if` and `isTouching` - blocks to change the x and y position of the items when the player touches - them. You can look at the `loopItem` function for clues in how to reset the - item position.\r\n* Inside your `if` statement, add a counter pattern that - will increase the score every time the player touches an item. Look at [Stage - 12 Puzzle 8](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) - for an example.\r\n* Call the function inside the draw loop, in the \"update - sprites\" area of your code.\r\n* Run the code to test your function." - CSD U3 platform draw loop_markdown_instruction: "# Draw Loop\r\n\r\nOnce you - have functions that can draw what you want, you can put them inside a draw - loop.\r\n\r\n# Do This\r\n\r\n* Add the `function draw() {}` (draw loop) block - into the workspace.\r\n* Inside the draw loop, use an `if` block to choose - the correct background function to use [Remind me how](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/13/puzzle/10)\r\n* - After the if statement, use the function you wrote to display the current - information\r\n* Test your code by changing the starting value of your variables - and running it to see whether the correct information and background are drawn." - CSD U3 platform items_markdown_instruction: "# Create your Items\r\n\r\nNext, - you need to add in the items that fall from the top of the screen. In [Stage - 11 Puzzle 6](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/6), - you modeled falling using the counter pattern on `velocityY`. You can use - the same pattern to make your items fall from the sky. In our sample game, - our carrots rotated and bounced off the platforms, but you can choose to add - any other type of interaction that you like in the next level.\r\n\r\n# Do - This\r\n\r\n* Create an item sprite with the label and starting position that - you put on your worksheet.\r\n* Give the sprite the starting properties you - wrote on your worksheet.\r\n* Run the code to test your sprite.\r\n* Create - a function that checks whether the sprite is off the bottom of the screen, - and loops it back to the top of the screen if it is. (Look at [Stage 11 Bubble - 16](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/16) - to see an example of code that loops a sprite.)\r\n* Run the code to test - your sprite." - CSD U3 platform items1_markdown_instruction: "# Create an Item\r\n\r\n<img - src=\"https://images.code.org/2cdb64a2e23e68c8a86296240642cd13-image-1476211650103.gif\" - style=\"float:right;\">\r\n\r\nNext, you need to add the items that fall from - the top of the screen. These move just like the platforms, but faster. In - order to make the game more interesting, the items start at a random location - above the screen. For the sample game, the item's x position is a random - number between 50 and 350, and the y position is a random number between -30 - and -60.\r\n\r\n# Do This\r\n\r\n* Use the `createSprite` block to make an - item sprite in the \"create sprites\" section of your code.\r\n* Use the `randomNumber` - block inside your `createSprite` block to start the item at a random x and - y position.\r\n* Use `setAnimation` and `velocityY` to give your sprite the - correct image and make it fall from the top of the screen.\r\n* Run the code - to test your sprite." - CSD U3 platform items2_markdown_instruction: "# Loop your Item\r\n\r\n<img - src=\"https://images.code.org/bf06ad06acbba65dfd48b63608a08c90-image-1476212006882.gif\" - style=\"float:right\">\r\nNow that your item is falling, you can add code - to loop it back to the top. This is similar to what you did for the platform - sprite, but the item sprite will loop back to a random x and y location when - it goes to the top of the screen.\r\n\r\n# Do This\r\n\r\n* Create a `loopItems` - function that uses an `if` block to check whether the item sprite is off the - bottom of the screen, then sends the item back to a random x and y position, - just as it did when you first created the sprite.\r\n* Call the function inside - the draw loop\r\n* Run the code to test your sprite." - CSD U3 platform items3_markdown_instruction: "# Make your Second Item\r\n\r\n<img - src=\"https://images.code.org/dfd53f2ea4b4380c126dde8035bcdc45-image-1476212495388.gif\" - style=\"float: right\">\r\n\r\nNext, you'll copy and paste the code for your - first item to create a second item. Remember that this is a lot easier in - **text mode**, so be sure to try it out if you haven't already.\r\n\r\nYou'll - need to copy two parts of your code: the part at the beginning where you made - the item, and the part in your `loopItem` function, where you looped the item - back to the top of the screen.\r\n\r\n# Do This\r\n\r\n* Copy the code you - used to create the first item sprite (`createSprite`, `setAnimation`, and - `velocityY`), and paste it directly beneath the original code.\r\n* Change - the names of the sprite in the new lines. For example, if you named your - original sprite \"star\", you could name this one \"star2\".\r\n* Inside your - `loopItems` function, copy the if statement, then paste it directly underneath - the original code, inside the function.\r\n* Change the sprite name in the - new lines of code.\r\n* Run your code to test it.\r\n" - CSD U3 platform platform1_markdown_instruction: "# Create a Platform Sprite\r\n\r\n<img - src=\"https://images.code.org/6e5aa80eb72809d761a695fae1b42b81-image-1476210749306.gif\" - style=\"float: right;\"> \r\n\r\nNow that you have your background and your - variables, it's time to create your sprites. Usually, it will be easiest - to start with the sprites that are part of the environment, such as your platforms. The - sample game had two platform sprites, but you'll make just one first, then - test it before copying and pasting the code to make the second.\r\n\r\n# Do - This\r\n\r\n* Look at your worksheet and choose a platform sprite to create.\r\n* - In the \"Create sprites\" area at the top of your code, create your new sprite - with the `createSprite` block, giving it the correct position and label (name). - ([Show me the block](#triggercallout=callout))\r\n* Use the `setAnimation` - and `velocityY` blocks to give your sprite the correct image and downward - velocity.\r\n* Test the sprite to make sure that it's moving in the correct - way. You might need to adjust its velocity.\r\n\r\n_Hint: The sprite will - go off the screen and not come back. You'll make it loop back around in - the next level._\r\n" - CSD U3 platform platform2_markdown_instruction: "# Loop the Platform Sprite\r\n\r\n<img - src=\"https://images.code.org/6bfe6dd078b2022315a7f54a38c90826-image-1476211068588.gif\" - style=\"float: right;\">\r\n\r\nRight now, your platform sprite moves down, - but it doesn't loop back up to the top of the screen. You can look at [Stage - 11 Bubble 12](/s/csd3/stage/11/puzzle/12) to see an example of a sprite looping - around a screen.\r\n\r\n# Do This\r\n\r\n* Use the `function` block to create - a `loopPlatforms` function at the bottom of your code.\r\n* Use the `if` block - inside the function to check whether the platform has gone off the bottom - of screen and, if it has, move it back to the top of the screen.\r\n* Call - the function inside the draw loop, in the \"update sprites\" area.\r\n* Run - the code to test your sprite.\r\n\r\n_Hint: What will platform.y be when the - sprite moves off the bottom of the screen? What should platform.y be when - you put it back at the top of the screen?_\r\n" - CSD U3 platform platform3_markdown_instruction: "# Make your Second Platform\r\n\r\n<img - src=\"https://images.code.org/94abf92949a82f6ba18a8cfafb9231b1-image-1476211447371.gif\" - style=\"float:right;\">\r\n\r\nMaking a second platform will be easier than - making the first, because you can copy and paste a lot of the code, then make - a few small changes. This is a lot easier in *text mode*, so be sure to try - it out if you haven't already.\r\n\r\nYou'll need to copy two parts of your - code: the part at the beginning where you made the platform, and the part - in your `loopPlatforms` function, where you looped the platform back to the - top of the screen.\r\n\r\n# Do This\r\n\r\n* Copy the code you used to create - the first platform sprite (`createSprite`, `setAnimation`, and `velocityY`), - and paste it directly beneath the original code.\r\n* Change the names of - the sprite in the new lines. For example, if you named your original sprite - \"platform\", you could name this one \"platform2\".\r\n* Change the starting - position of your new platform sprite.\r\n* Inside your `loopPlatforms` function, - copy the if statement, then paste it directly underneath the original code, - inside the function.\r\n* Change the sprite name in the new lines of code.\r\n* - Run your code to test it.\r\n\r\n_Challenge: You can make your platforms appear - at random x positions when they loop back to the top of the screen._\r\n" - CSD U3 platform player1_markdown_instruction: "# Create your Player\r\n\r\n<img - src=\"https://images.code.org/8358b8d2eef2461e113e0b3093da7403-image-1476212944204.gif\" - style=\"float:right\">\r\n\r\nNow you can create your player sprite. Just - like the item sprites, the player sprite will fall from the top of the screen. Unlike - the items, your player sprite will get faster as it falls, just like real - falling objects. This is what allows it to jump up, and fall back down.\r\n\r\n# - Do This\r\n\r\n* Use the `createSprite` block to make a player sprite with - the label and starting position that you put on your worksheet.\r\n* Use `setAnimation` - to give it the correct image.\r\n* Create a `playerFall` function that makes - the sprite fall from the top of the screen. The code inside the function - should use `velocityY` in a counter pattern, just as when you made the falling - rock in [Stage 13 Puzzle 4](/s/csd3/stage/13/puzzle/4).\r\n* Call the `playerFall` - function inside the draw loop.\r\n* Run the code to test your sprite." - CSD U3 platform player2_markdown_instruction: "# User Controls\r\n\r\nNext, - you should add user controls so that you can move your player around. Your - player needs to move to the left when the left arrow key is pressed, to the - right when the right arrow key is pressed, and jump when the space bar is - pressed.\r\n\r\n# Do This\r\n\r\n* Create a new `controlPlayer` function in - the \"functions\" area of your code.\r\n* Inside the `controlPlayer` function, - use the `if`, `keyDown`, and `sprite.x` blocks to make your player move to - the left and right according to the arrow keys. Look at <a href=\"/s/csd3/stage/8/puzzle/15\" - target=\"_blank\"> Stage 8 Puzzle 15 </a> for examples.\r\n* Inside the `controlPlayer` - function, use the `if`, `keyDown`, and `velocityY` blocks to make your player - jump when the up arrow is pressed. Look at <a href=\"/s/csd3/stage/11/puzzle/10\" - target=\"_blank\"> Stage 11 Puzzle 10 </a> for an example.\r\n* Call the `controlPlayer` - function inside the draw loop.\r\n* Run the game and test your code.\r\n" - CSD U3 platform player2b_markdown_instruction: "# Add Reset\r\n\r\nNow that - your player is falling, you can add code to reset him when he gets to the - top.\r\n\r\n# Do This\r\n\r\n* Create a function that checks whether the player - sprite is off the bottom of the screen, and decreases the number of lives - by one if it is.\r\n* Use the function inside the draw loop.\r\n* Run the - code to test your function.\r\n* Once you have decreased the lives, you need - to check whether the player has run out. Add code to your function that checks - to see whether the player's lives equals 0. If they do equal zero, use the - `text` block to write \"GAME OVER\" in the middle of the screen. Otherwise, - reset the sprite to the top of the screen.\r\n" - CSD U3 platform player3_markdown_instruction: "# Player Interactions\r\n\r\nThe - last part of making your game is programming the player interactions with - the other sprites. First, your player needs to land on the platforms.\r\n\r\n# - Do This\r\n\r\n* Create a `playerLands` function and add it to the \"functions\" - area of your code.\r\n* Inside the function, use the `collide` block so that - your player can land on both the platforms.\r\n* Call the function inside - the draw loop.\r\n* Run the code to test your function.\r\n" - CSD U3 platform player4_markdown_instruction: "# Collect Items\r\n\r\nLast, - you'll want your player to collect the items falling from the top of the - screen.\r\n\r\n# Do This\r\n\r\n* Create a `collectItems` function and add - it to the \"functions\" area of your code.\r\n* Use the `if` and `isTouching` - blocks to change the x and y position of the items when the player touches - them. You can look at the `loopItem` function for clues in how to reset the - item position.\r\n* Inside your `if` statement, add a counter pattern that - will increase the score every time the player touches an item. Look at [Stage - 12 Puzzle 9](/s/csd3/stage/12/puzzle/9) for an example.\r\n* Call the function - inside the draw loop, in the \"update sprites\" area of your code.\r\n* Run - the code to test your function." - CSD U3 platform sample_markdown_instruction: "# Platform Jumper\r\n\r\nThe - game on the left is an example of a platform jumper. Press \"Run\" to play - it. You can make the bunny bump with the space bar, and move it to the left - and right with the arrow keys. You score by collecting carrots, and if you - score high enough, the background will change.\r\n\r\nYou have three lives, - so if you fall to the bottom of the screen three times, the game will be over.\r\n\r\nYou - already know how to use all the blocks you need to make a game just like this - one, and you'll be making your own platform jumper in this lesson." - CSD U3 platform sample1_markdown_instruction: "# Platform Jumper\r\n\r\nThe - game on the left is an example of a platform jumper. Press \"Run\" to play - it. You can make the alien jump with the up arrow, and move it to the left - and right with the arrow keys. You score by collecting stars, and if you - score high enough, the background will change.\r\n\r\nYou already know how - to use all the blocks you need to make a game just like this one, and you'll - be making your own platform jumper in this lesson.\r\n\r\nYou can see other - examples of platform jumpers in the next two levels." - CSD U3 platform sample2_markdown_instruction: "# Plane Jumper\r\n\r\nHere's - another example of a platform jumper, but it has a few more features. You - can use it to get ideas to improve your own game. For example, there is a - coin sprite that gives the player an extra life.\r\n\r\nChoose one or more - of the following changes and add them to your game.\r\n* Choose new animations - for your player, platform, and items.\r\n* Make it impossible for your player - to go off the left or right of the screen.\r\n* Add a different type of item - for the player to collect or avoid.\r\n* Add a variable that keeps track of - how many lives the player has, and end the game if the player runs out.\r\n\r\n" - CSD U3 platform sample3_markdown_instruction: "# Bunny Jumper\r\n\r\nHere's - another example of a jumper. In this one, the items get faster when they - fall, and bounce off the platforms.\r\n\r\nChoose one or more of the following - changes and add them to your game.\r\n* Make your player's animation change - direction when the player changes direction.\r\n* Add another background and - make it appear when the score gets even higher.\r\n* Make your items interact - with the platforms in some way.\r\n\r\n" - CSD U3 platform scoreboard_markdown_instruction: "# Make the Scoreboard\r\n\r\n<img - src=\"https://images.code.org/ea490a1915a70676fd3a783adce93cdd-image-1476142534609.png\" - style=\"float:right;\">\r\n\r\nYou'll also need a scoreboard so the player - can keep track of the score. There's already a `showScore` function written, - but it only shows the text \"Score\" and not the actual score. ([Show me where](#triggercallout=code_triggered)) You - can see an example of a working scoreboard in [Stage 12 Puzzle 9](/s/csd3/stage/12/puzzle/9).\r\n\r\n# - Do this\r\n\r\n* Read the code in the `showScore` function.\r\n* Call the - function inside the draw loop, right after you draw the backgrounds.\r\n* - Use the `text` block to display the score at the top of the screen." - CSD U3 platform variable1_markdown_instruction: "# Score Variable\r\n\r\nNow - that you've created your backgrounds, you'll need to choose when each background - is drawn. For that, you'll need a score variable to hold information about - your player's score.\r\n\r\nYou should always give your variables a starting - value at the very beginning of the program. That way, they are available - for any code that comes after.\r\n\r\n# Do This\r\n\r\n* Create a score variable - at the beginning of your game program. [Show me the block](#triggercallout=callout)\r\n* - Set the score equal to 0." - CSD U3 platform variables_markdown_instruction: "# Variables and Display\r\n\r\nIn - our sample game, we kept track of the score and the number of lives left, - then displayed them at the top of the screen. For your game, you'll need - to create a variable for each piece of information you want to keep track - of during the game. Once you have your variables, you can create a function - to display information at the top of the screen for the player.\r\n\r\n# Do - This\r\n\r\n* Create the variables that you listed on your planning sheet - and give them starting values.\r\n* Use the `text` block to display information - about the variables on the screen. You can use `textSize` and `fill` to change - the way the text looks.\r\n* Make a new function and put the code that displays - the information inside of it.\r\n\r\n_Hint: You can look at [Stage 12 Bubble - 8](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) to - see a working scoreboard. Scroll down in the code until you see the comment - \"draw score\"_" - CSD U3 Property Conditional Multi_markdown_instruction: "# Get Creative\r\n\r\nNow - that you've seen how we can use conditionals both to take input from the - keyboard and to react to changes is sprite properties, it's time to come - up with a cool use of conditionals on your own. You'll want to brainstorm - with a partner to come up with the sprite properties you want to change, and - the conditions that will decide when they get changed.\r\n\r\n# Do This\r\n- - Decide which sprite properties will be controlled by conditionals eg:\r\n\t- - Position (x and y)\r\n - Rotation\r\n - Color\r\n - Size (width, - height, or scale)\r\n - etc\r\n- For each sprite property, decide on a - conditional that will impact it:\r\n\t- Keyboard input (`keyDown()`, `keyWentDown()`, - etc)\r\n - Sprite position\r\n - Mouse position\r\n - Other variables - or properties\r\n- One at a time, write and test each conditional\r\n\r\n**Challenge** - - Can you make a single conditional impact multiple properties?\r\n" - CSD U3 Property Conditional_markdown_instruction: "# Doing More With Conditionals\r\nUsing - conditionals to figure out which key was pressed is pretty useful, but we - can also use conditionals with any value in our program, including sprite - properties!\r\n\r\nWith your neighbor, discuss the kinds of boolean questions - you could use with the following sprite properties:\r\n\r\n- `sprite.x` and - `sprite.y`\r\n- `sprite.width` and `sprite.height`\r\n- `sprite.shapeColor`\r\n- - `sprite.visibility`\r\n\r\n# Do This\r\nHere's a program similar to one you - just made, it uses `keyDown()` to move the sprite around the screen when you - click the arrow keys. You're going to add some additional conditionals to - this program to do the following:\r\n\r\n- Change the color of the sprite - if it goes into the top quarter of the screen\r\n- Rotate the sprite if it - goes into the left quarter of the screen\r\n- Make the sprite invisible if - it goes into the bottom quarter of the screen\r\n- Make the sprite larger - if it goes into the right quarter of the screen\r\n\r\n_BTW, if you're looking - for the `keyDown()` block, you'll notice that it's now in the 'Game Lab' - category._ \r\n" - CSD U3 Random Animation_markdown_instruction: "<img src=\"https://images.code.org/f249b981ead9d196b0f136c402dd0c41-image-1478803334302.gif\" - style=\"float:right; width:200px\"/>\r\n# Animation\r\n\r\nLook at this face - made from some simple shapes. We put it in the `draw()` loop so that we could - animate it, but it doesn't seem to be doing anything. We want the mouth to - move like the image on the right, so that it looks like it's talking\r\n\r\n# - Do This\r\n* Find the code that draws the mouth and replace the width and - height with calls to `randomNumber()`\r\n* Experiment with different ranges - of random numbers to get the kind of animation you're looking for.\r\n\r\nHint: - Don't worry if it's going too fast. You'll slow it down on the next level." - CSD U3 Random Choice_markdown_instruction: "# Making Random Choices\r\n\r\nYou - probably noticed that the code from the last puzzle did a few things.\r\n* - Always produced a whole number (also called an **integer**).\r\n* The lowest - number that could be produced was 0, which is the first **input** we passed - to the `randomNumber` block.\r\n* The highest number that could be produced - was 10, which is the second **input** to the block.\r\n\r\nLet's create a - program that can randomly make decisions for us. We'll use a **binary** representation - where `0` means `false` and `1` means `true`.\r\n\r\n# Do This\r\n\r\n* Write - a program that randomly writes out either 0 or 1 using `console.log()`.\r\n* - Have your partner ask some true/false or yes/no questions and use your program - to randomly answer." - CSD U3 Random Color_markdown_instruction: "# Randomized Colors\r\n\r\nCould - you use `randomNumber()` to pick random colors as well? Back in unit 2 you - learned that colors can be composed of Red, Green, and Blue channel values - - each of which is represented by a number value. What's the maximum and - minimum that those channels can be set to?\r\n\r\n# Do This\r\n\r\nUsing the - `color()` function, set the `fill` or `stroke` of your shape to a random color.\r\n\r\n# - Challenge\r\n\r\nCan you generate random colors that are limited to a narrow - range of colors, such as a random shade or purple, or a random shade of teal?" - CSD U3 Random FreeResponse_markdown_instruction: "# Randomness\r\n\r\nSometimes - you will want your programs to run a bit differently every time, and a simple - way to do this is to generate **random numbers**. The `randomNumber()` block - allows you to write programs with a little bit of randomization in them, which - is also helpful when you you want images that look more natural - for example - drawing a lots of stars in the sky in random positions, instead of selecting - the x and y for each star.\r\n\r\n# console.log() \r\nThe `console.log()` - block is a useful tool for testing and debugging - anything that you place - into `console.log()` block's input will be printed to the debug console, - which you can find below your code.\r\n\r\n# Do This\r\n\r\nYou will **not - write any code** in this level.\r\n\r\n* Read the program provided\r\n* **Predict** - what the provided program will do and write your prediction in the box below. - **Be specific!**\r\n* Run the program several times and **record** the results.\r\n* - **Discuss the results with a neighbor**. Was your prediction correct?" - CSD U3 Random Intro_markdown_instruction: "# Randomness\r\n\r\nSometimes you - will want your programs to run a bit differently every time, and a simple - way to do this is to generate **random numbers**. The `randomNumber()` block - allows you to write programs with a little bit of randomization in them, which - is also helpful when you you want images that look more natural - for example - drawing a lots of stars in the sky in random positions, instead of selecting - the x and y for each star.\r\n\r\n# console.log() \r\nThe `console.log()` - block is a useful tool for testing and debugging - anything that you place - into `console.log()` block's input will be printed to the debug console, - which you can find below your code.\r\n\r\n# Do This\r\n\r\nYou will **not - write any code** in this level.\r\n\r\n* Read the program provided\r\n* **Predict** - what the provided program will do. **Be specific!**\r\n* Run the program several - times and **record** the results.\r\n* **Discuss the results with a neighbor**. - Was your prediction correct?" - CSD U3 Random Min Max_markdown_instruction: "# Changing the minimum\r\n\r\nSo - far we've only generated numbers from 0 up to some other value, but what - if we wanted a different minimum? For example, if we want to use `randomNumber()` - to create circles that have a radius somewhere between 50 and 100 pixels, - how might we do it?\r\n\r\nThe first input (also called an **argument**) of - the `randomNumber()` block defines the lowest number that will be randomly - generated. In the previous levels we always used 0, but you could use any - integer as the lower bound (even negative numbers!)\r\n\r\n# Do This\r\n\r\nUsing - `console.log()` write a program that randomly returns a number in a range - you define. Try coming up with an interesting range of numbers for your program, - for example:\r\n* Randomly generate a month number\r\n* Randomly generate - a temperature below boiling but above freezing\r\n* Randomly generate a year - you were alive in\r\n\r\nCan you come up with a range that includes negative - numbers? What about both positive and negative ones?" - CSD U3 Random Width Height_markdown_instruction: "# Randomized Shapes\r\n\r\nLet's - see how we can use randomization in our drawings. Each of the inputs from - the shape blocks you've seen can be replaced with calls to `randomNumber()`. - Try drawing some images that are slightly randomized each time. You might - try changing the position randomly by using `randomNumber()` in place of the - x or y inputs, or you could change the size of the shape itself by randomizing - the length or width inputs.\r\n\r\n# Do This\r\n\r\nPick a shape command (`ellipse()`, - `rect()` or `regularPolygon()`) and use `randomNumber()` in place of one or - more of the inputs. Make sure you run it a few times so you can see the effect - of randomization.\r\n\r\n_Notice that the `console.log()` block is now in - the Variables drawer and the `randomNumber()` block is in the Math drawer._" - CSD U3 Simple Drawing - Animation 2_markdown_instruction: "# Rays of Sunshine\r\n\r\nLet's - add a little bit more animation to the scene. The `line()` block takes in - two pairs of x,y coordinates and draws a line between them.\r\n\r\nDraw 5 - yellow lines that all start from the center of the sun and move out to a random - point around the top half.\r\n\r\n# Do This\r\n\r\n* Create 5 lines, each - of which should start at the center of the sun and go out to a random point. - You can pick your own random ranges, but you might try:\r\n * `randomNumber(115,135), - randomNumber(10,20)`\r\n * `randomNumber(145,165), randomNumber(20,30)`\r\n * - `randomNumber(85, 105), randomNumber(20,30)`\r\n * `randomNumber(165,185), - randomNumber(40,50)`\r\n * `randomNumber(65, 85 ), randomNumber(40,50)`\r\n* - Don't forget to set the `strokeColor()` before you draw your lines and to - reset to `noStroke()` afterwards." - CSD U3 Simple Drawing - Animation_markdown_instruction: "# Clouds in the Wind\r\n\r\nNow - that our image is in the draw loop, let's make use of that feature to add - a little bit of animation. We're going to make our clouds look as though - they're shifting in the breeze by randomizing their position and size a little - bit each time the `draw()` loop is run.\r\n\r\n# Do This\r\n\r\n* Replace - the x input of each cloud ellipse with a call to `randomNumber`\r\n * `randomNumber` - should vary the x position by + or - 5 pixels. So if your x position was 50, - replace it with `randomNumber(45,55)`\r\n* Replace the width input of each - cloud ellipse with a call to `randomNumber`\r\n * `randomNumber` should vary - the width by + 5 pixels. So if your width was 50, replace it with `randomNumber(50,55)`\r\n* - Change the **frame rate** to something slower (try 5 or 10 FPS)" - CSD U3 Simple Drawing - Background_markdown_instruction: "# Draw()ing your - street image\r\n\r\nHere's the street image you started working on in the - last lesson. We're going to get it ready to add some animation.\r\n\r\nFor - the animation to work you'll need to wrap all of your current code in the - `draw()` loop, adding a call to `background()` at the top of the loop.\r\n\r\n# - Do This\r\n\r\n* Add a `draw()` block and move all of your current code inside - it\r\n* Replace the rectangle that draws your background with a call to the - `background()` block" - CSD U3 Simple Drawing - Personal Animation_markdown_instruction: "# Your Own - Animation\r\n\r\nHere's the drawing you planned and started in the last lesson - - let's animate it!\r\n\r\n# Do This\r\n\r\n* Move all of your code into - a `draw()` loop\r\n* Use `randomNumber()` in the inputs of some of your shapes\r\n* - Set the speed of your animation using the `Game.frameRate` block\r\n" - CSD U3 Sprites animating with sprites_markdown_instruction: "# Animating with - Sprites\r\n\r\n**Sprite properties can be used in the counter pattern too**.\r\n\r\n\t// - Counter Pattern with variables\r\n x = x + 1;\r\n \r\n // Counter - Pattern with sprite properties\r\n mySprite.x = mySprite.x + 1\r\n\r\nIf - you call ![](https://images.code.org/16810be94cc61ea828e0acce5b642468-image-1466009389700.19.16 - AM.png) inside the draw loop then you can use this counter pattern to animate - sprites as well.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/a34d5c36c98c2d61ce341be59cbcf315-image-1466534169200.gif\" - style=\"float:right; width:200px\">\r\n\r\n\r\nThis program creates 2 sprites - and then animates one of them to move across the screen using the counter - pattern.\r\n\r\n* Inside the draw loop **add code that uses the counter pattern - to make the orange sprite move across the screen**.\r\n* Hint: How can you - use the counter pattern here? Look at the code for the redSprite if you need - help.\r\n* Your animation should look like the example at the right." - CSD U3 Sprites createSprite params_markdown_instruction: "# createSprite() - with parameters\r\n\r\nWhen you create a variable you often want to set its - value right away. That's why the command `var x =` exists, to let you perform - both commands at once.\r\n\r\nIt's very common to want to set the x and y - of your sprite in a single command. To help, the createSprite command accepts - 2 parameters or values that set these properties right away. Instead of writing - \r\n\r\n \tvar mySprite = createSprite();\r\n \tmySprite.x = 100;\r\n \tmySprite.y - = 200; \r\n\r\nyou can just write the command\r\n\r\n\tvar mySprite = createSprite(100, - 200);\r\n\r\nThis code does exactly the same thing, but it's much easier - to write. \r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 - AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis is your code from - earlier. Note that a new, larger version of `createSprite` is now available.\r\n\r\n<img - src=\"https://images.code.org/4a2e6bf1ffbd9782ce637b3e997004e3-image-1468337207497.25.20 - AM.png\" style=\" width:350px\">\r\n\r\n* Update your code to use this new - version of `createSprite`\r\n* Your program should only be **9 total lines**\r\n* - You're still trying to make your image look as close as possible to the image - at the right." - CSD U3 Sprites debug background_markdown_instruction: "# Debug: Ordering in - the Draw Loop\r\n\r\nAs you start animating with sprites you'll have more - complex code in your draw loop. It's important to stay organized if you don't - want your code to be confusing.\r\n\r\nHere's the way you should structure - your draw loop when animating with sprites:\r\n\r\n\tfunction draw(){\r\n \t// - Draw Background\r\n \r\n \t// Update Sprite Properties\r\n \r\n // - Draw Animations\r\n \r\n }\r\n \r\nThis strategy will work for most - cases but not all.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/df08c0bb7290e9d255f1cc51be35954d-image-1472665837101.gif\" - style=\"float:right; width:200px\">\r\n\r\nThis program is supposed to animate - a sprite moving across the screen, but **there's a problem that's preventing - it from running properly**.\r\n\r\n* **Run the program** to see how it works.\r\n* - **Debug the program** to find the error that prevents it from working properly.\r\n* - Your animation should look like the example at the right.\r\n* Hint: Order - matters a lot when drawing.\r\n" - CSD U3 Sprites debug dot notation_markdown_instruction: "# Debugging: Dot Notation\r\n\r\n**Dot - Notation:** Sprites all have the same properties, which is really useful. - It means that once you know the label of a sprite, you know the labels of - its properties. All you need to do is combine the name of your sprite and - the name of your property with a period or \"dot\" in between. This is also - referred to as **dot notation**. For example, a sprite called `bob` will have - the properties `bob.x`, `bob.y`, and so on.\r\n\r\nWhen using dot notation - it's important that **you spell the label of your sprite and your property - correctly.** Just like with variables, keep an eye out for:\r\n\r\nRule | - Example\r\n---|---\r\nCorrect capitalization|`sprite.x` is not `sprite.X`\r\nCorrect - spelling|`sprite.y` is not `sprte.y`\r\nWhether the label you're trying to - use actually exists|`sprite.xlocation` does not exist\r\nThe sprite's label - comes before the property's label|`x.sprite` will not work\r\n\r\n# Do This\r\n\r\n<img - src=\"https://images.code.org/5c6019e343bc58650c45f66c3e3c9bc5-image-1466089712070.08.20 - AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program tries to - use dot notation to change the properties of two sprites. Unfortunately, errors - are preventing the program from running correctly.\r\n\r\n* **Use dot notation - correctly** to fix the errors in this program\r\n* When your program works - correctly, it should draw the image to the right" - CSD U3 Sprites debug watchers_markdown_instruction: "# Debug: Watchers\r\n\r\nYou - can place watchers on a sprite property just like you would a regular variable.\r\n\r\n![](https://images.code.org/291b83de4b7d540017df382944474c16-image-1466017776084.09.27 - PM.png)\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/1a1a724338e983c2124b0e97d43469a2-image-1466024475859.gif\" - style=\"float:right; width:200px\">\r\n\r\nThis program is supposed to animate - a sprite moving across the screen but **there's a problem that's preventing - it from running properly**.\r\n\r\n* **Run the program** to see how it works.\r\n* - **Add a watcher** if you like to help you check individual properties.\r\n* - **Debug the program** to find the error that prevents it from working properly.\r\n* - Your animation should look like the example at the right.\r\n* Hint: Read - the code carefully. Is there a logical error?" - CSD U3 Sprites intro sprites_markdown_instruction: "# Sprites\r\n\r\n**Sprites** - make it easier to keep track of all of those values that you've been using - separate variables for. You are going to start creating animations with **sprites**. - A sprite is like a character in your animations, and each sprite keeps track - of its own x and y coordinates (and lots of other values too). Your program - will control how your sprites move and appear on the screen.\r\n\r\n**Creating - Sprites:** The <img src = \"https://images.code.org/92e06cddc5355dc37aa2c6a033793dd0-image-1466027030772.43.41 - PM.png\" style = \"height:30px\"> block creates a new sprite and gives it - any label you like. This label is how you'll refer to your sprite in your - code.\r\n\r\n**Drawing Sprites:** Sprites only appear on the screen when you - draw them there. Whenever you call the ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 - AM.png) command, all the sprites you've created will be drawn on the screen.\r\n\r\n# - Do This\r\n\r\nThis program includes comments that let you know where to place - code but otherwise is blank\r\n\r\n* Beneath the \"Creating Sprites\" comment - drag in a <img src = \"https://images.code.org/92e06cddc5355dc37aa2c6a033793dd0-image-1466027030772.43.41 - PM.png\" style = \"height:30px\"> block and give your new sprite any label - you like.\r\n* Beneath the \"Drawing\" comment drag in a ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 - AM.png) command\r\n* **Run the code** to draw your first sprite on the screen." - CSD U3 Sprites make template_markdown_instruction: "# Make Your Own Sprite\r\n\r\nYou - now know how to create a sprite, set its properties with dot notation, and - draw sprites using `drawSprites`. It's time to put all these pieces together - on your own.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 - AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program creates a - red sprite in the bottom right hand corner of the screen.\r\n\r\n* **Write - code** that creates a new separate sprite in the top left corner of the screen.\r\n* - Be careful with your dot notation, and use the code for the first sprite as - a guide.\r\n* Try to make your image look as close as possible to the image - at the right." - CSD U3 Sprites make your own sprite_markdown_instruction: "# Make Your Own - Sprite\r\n\r\nYou now know how to create a sprite, set its properties with - dot notation, and draw sprites using `drawSprites`. It's time to put all - these pieces together on your own.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 - AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program creates a - red sprite in the bottom right hand corner of the screen.\r\n\r\n* **Write - code** that creates a new separate sprite in the top left corner of the screen.\r\n* - Be careful with your dot notation, and use the code for the first sprite as - a guide.\r\n* Try to make your image look as close as possible to the image - at the right." - CSD U3 Sprites motivation_markdown_instruction: "# How Many Counter Variables?\r\n\r\nYou - can use counter variables (`x = x + 1` , `x = x - 1` , `x = x + 0.5`, etc.) - to animate a scene. What happens when scenes start to get larger and more - complicated? \r\n\r\nWatch this animation. With a partner: \r\n\r\n* Decide - how many counter variables you would need to create this scene\r\n* Decide - what you would name your counter variables\r\n* **Draw a Labels-Values-Connectors** - diagram of your variables at the first frame of this scene. Don't worry about - getting the values exactly correct.\r\n* Share your answer with another group - **and be ready to share your ideas with the class**" - CSD U3 Sprites race create sprites_markdown_instruction: "# Putting it All - Together\r\n\r\nLet's put all of this together in a fun way. You're going - to make three sprites \"race\" across the screen by combining the counter - pattern, random numbers, and sprite properties.\r\n\r\n# Do This\r\n\r\n<img - src=\"https://images.code.org/1ee52eac731176211c286023c87c166a-image-1466021038288.03.29 - PM.png\" style=\"float:right; width:200px\">\r\n\r\nTo begin with, make three - different sprites and put them in a row on the left side of your screen.\r\n\r\n* - **Create three sprites** and give them labels.\r\n* **Add code to the \"Draw - Background\" section of the draw loop that draws the background**.\r\n* **Add - code to the \"Draw Animations\" section of the draw loop that draws your sprites**.\r\n* - Your picture should look like the example at the right." - CSD U3 Sprites race finish_markdown_instruction: "# Make It Your Own\r\n\r\nKeep - adding to this project and make it your own. Do you want to add a finish line? - Do you want to make one racer a little bit faster than the others? Maybe you - could add some text and give your race a name. There's a ton of ways you - can make this animation a lot more interesting and exciting!\r\n\r\n<img src - = \"https://images.code.org/387aec833f243632735c97b56ae6e64e-image-1466022313176.gif\" - style=\"float:right; width:200px\">\r\n# Do This\r\n\r\n* **Keep adding your - own touches to your race** using what you already know about drawing, sprites, - and animation." - CSD U3 Sprites race movement_markdown_instruction: "# Get Those Sprites Moving!\r\n\r\nNow - that you have three sprites on the screen, it's time to make them \"race\" - across the screen. For now, the race will just be a tie, so focus mainly on - **making sure your code is organized** and that **you use sprite properties - with the counter pattern correctly**.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/a935615480098eb0a8e7723d87b2308c-image-1466021329937.gif\" - style=\"float:right; width:200px\">\r\n\r\n* **Add code to the \"Update Properties\" - section** that makes the sprites move across the screen together.\r\n* Your - animation should look like the example at the right." - CSD U3 Sprites race random_markdown_instruction: "# Random Movement\r\n\r\nRight - now your race isn't very interesting. Let's make one small change to make - it a lot more exciting. Instead of your sprites moving the same amount forward - every frame, **they will now move a random amount**. This will make use of - what we'll call the **random counter pattern**. Here's what the code might - look like.\r\n\r\n\t// Random Counter Pattern\r\n mySprite.x = mySprite.x - + randomNumber(0,2);\r\n \r\nInstead of adding the same amount every time - it will move forward by some random amount between 0 and 2.\r\n\r\n# Do This\r\n\r\n<img - src=\"https://images.code.org/accadb669e88a7c2aff8a29b6305da55-image-1466021491106.gif\" - style=\"float:right; width:200px\">\r\n\r\n* **Use the random counter pattern** - to make your sprites move forward by a random amount in each frame.\r\n* **Run - the program** to make sure your sprites now move a random amount. Is your - race predictable anymore?\r\n* Your animation should look similar to the example - at the right." - CSD U3 Sprites setting properties_markdown_instruction: "# Properties\r\n\r\n<img - src=\"https://images.code.org/9567c9df55163104ff91df0920457ad3-image-1466047307713.21.28 - PM.png\" style=\"float:right\">\r\n\r\n**Properties:** When you create a sprite - it will automatically be given many special variables called properties. Properties - keep track of information about the sprite, which is used when you draw it - on the screen. For example, these two properties keep track of a sprite's - x and y position on the screen.\r\n\r\n**Changing Properties:** Properties - are just variables, so you can change their values using `=` just like any - other variable. Here's an example of how you might change the `x` property - of a sprite called `myFavoriteSprite`.\r\n\r\n![](https://images.code.org/6976d707cba95e92369831729cdb7435-image-1466085767357.02.35 - AM.png)\r\n\r\n<img src=\"https://images.code.org/2743e55cef5da23bf61db1556c88f174-image-1466049906667.04.41 - PM.png\" style=\"float:right;width:150px\">\r\n\r\n# Do This\r\n\r\nThis program - creates a new sprite, gives it a label, and then sets its `x` and `y` properties.\r\n\r\n* - **Read the code**. Notice that the label given to the sprite is used in the - sprite's property.\r\n* **Change the values given to the `x` and `y` properties** - to move the sprite to the bottom right corner of the screen." - CSD U3 Sprites shapeColor_markdown_instruction: "# shapeColor\r\n\r\n**shapeColor:** - Another useful property is ![](https://images.code.org/538b61640803ec3b333d7cb2d9a162f5-image-1466050497196.14.46 - PM.png) which can be used to change the color of the sprite. It can be assigned - values in different ways. For example, you could use the name of a color\r\n\r\n<img - src=\"https://images.code.org/e5ffaee2a40c1690958b5c35a1d74719-image-1466086033266.06.45 - AM.png\" style=\"height:30px\">\r\n\r\nor you can use the rgb block\r\n\r\n<img - src=\"https://images.code.org/670af2867af02830979ff95356ba87d6-image-1488480027884.39.53 - PM.png\" style=\"height:30px\">\r\n\r\nTo make it easier to program with blocks, - **when you drag a sprite property onto its own line it will automatically - be placed inside an \"=\" block.**\r\n\r\n<img src=\"https://images.code.org/9790f3285269e9cf909fb820679a472e-image-1466091972429.46.00 - AM.png\" style=\"float:right;width:150px\">\r\n\r\n# Do This\r\n\r\nThis program - creates two sprites and places them on the screen. Currently they are still - gray.\r\n\r\n* Beneath the \"Setting Properties\" comment add code to **set - the shapeColor of these two sprites**\r\n\t* Make sure you use dot notation - correctly. Use the code already written as a guide.\r\n * Try assigning - one sprite a **named color** and another sprite a color using the **rgb block**.\r\n* - Your finished work should look something like the image to the right." - CSD U3 Sprites sprites vs rects_markdown_instruction: "# Sprites vs. Rectangles\r\n\r\nSprites - may seem a lot like fancy rectangles right now. In time you'll see that sprites - are **much more powerful**. But for now, there's one key difference you need - to know about.\r\n\r\nSprites have an `x` and a `y` location just like a rectangle. - The key difference is that **a sprite's `x` and `y` are in the middle of - the sprite, not the top left corner**. \r\n\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/b1b38266c674e43687148a1ec4fd8e82-image-1466007512332.17.59 - AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program creates a - red sprite and a green rectangle that are the same size and have the same - `x` and `y`. **The sprite does not cover the rectangle since its `x` and `y` - are at its center**.\r\n\r\n* Change the `x` and `y` properties of the sprite - so that it entirely covers the green rectangle.\r\n* When your program works - correctly, it should draw the image to the right." - CSD U3 Sprites Template race_markdown_instruction: "# Putting it All Together\r\n\r\nLet's - put all of this together in a fun way. We're going to make three sprites - \"race\" across the screen by combining the counter pattern, random numbers, - and sprite properties.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 - AM.png\" style=\"float:right; width:200px\">\r\n\r\nTo begin with make three - different sprites and put them in a row on the left side of your screen.\r\n\r\n* - **Create three sprites** and give them labels\r\n* **Add code to the \"Drawing\" - section of the draw loop that draws the background and your sprites**\r\n* - Your animation should look like the example at the right.\r\n\r\n" - CSD U3 Sprites width and height_markdown_instruction: "# Setting Properties\r\n\r\nYou - are going to start programming with **sprites**. A sprite is made up of many - pieces of information called **properties**. The ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 - AM.png) command can be called whenever you like. It uses the properties of - your sprites to draw them all at once.\r\n\r\nSprites have **lots and lots - of properties** but to get started let's just look at three.\r\n\r\n![](https://images.code.org/4d0f35bc60aa9d1c80e6dda4db16abc4-image-1466004005360.19.30 - AM.png)\r\n\r\n<img src=\"https://images.code.org/cb14a5f6add86bf3c0bcf12901366794-image-1466004148640.22.16 - AM.png\" style=\"float:right; width:200px\">\r\n# Do This\r\n\r\nThis program - creates a sprite and gives it the label `mySprite`. Then it sets the properties - `shapeColor`, `x`, and `y` of the sprite. When `drawSprites` is called, this - information is used to draw the sprite in the correct location and color.\r\n\r\n* - **Change the values given to each property** so that:\r\n\t* The sprite is - now in the bottom right corner of the screen\r\n * The sprite is \"orange\" - rather than \"red\"" - CSD U3 Sprites width height_markdown_instruction: "# Width and Height\r\n\r\nWhen - you create a sprite, it is automatically set up with all its properties having - default values. If you know the names of these properties, you can use dot - notation to change them. This will change the way your sprite looks when you - draw it.\r\n\r\nHere are two new properties:\r\n\r\n![](https://images.code.org/158421dbb4f9640ee852d994d2b4a7d6-image-1466006293357.40.26 - AM.png)\r\n\r\nBy default each sprite starts with a width and height of 100.\r\n\r\n# - Do This\r\n\r\nThis program creates a sprite and sets its `x`, `y`, and `shapeColor` - properties.\r\n\r\n* Use the new `width` and `height` properties to make the - sprite fill up most of the screen.\r\n* Make sure you're using dot notation - correctly.\r\n* **Note:** If you drag the property block onto a new line it - will change to include the `=` command automatically.\r\n\r\n![](https://images.code.org/77d0a16f19a2a7b2c2f1f6b88cda17b3-image-1466006474149.41.53 - AM.png)" - CSD U3 UP_ARROW_markdown_instruction: "# Moving Sprites\r\n\r\nYou saw on the - last level that `keyDown` returns `true` while you are holding a key down - and `false` when the key is not pressed down.\r\n\r\nWe can use `keyDown` - as an input to an `if` statement to change our animations based on key presses!\r\n\r\nThe - input for the `keyDown` command is the name of key you want to check in quotes. - Some examples are \"x\", \"up\" and \"space\".\r\n\r\n# Do This\r\nYou have - been provided with the start of a bug sprite. You need to pick the bug picture - you want to use from the animation tab.\r\n\r\n* Set the animation of the - sprite to your favorite bug.\r\n* Add an `if` statement inside your draw loop\r\n* - Add a call to `keyDown` as the input to the `if` statement to check if the - **up** arrow was pressed\r\n* Add code inside the conditional to move the - sprite up if the up arrow is down.\r\n\r\n_Do you need to change sprite's - x or y property to move it up?_" - CSD U3 Variable Arithmetic pt2_markdown_instruction: "# Variable Arithmetic - Pt2\r\n\r\nAs we saw in the last level, **you can add, subtract, multiply, - or divide** your variable **without changing its value**. The only time a - variable's value will change is when you use the `=` or **gets** command.\r\n\r\nTry - another example highlighting another common misconception.\r\n\r\n# Do This\r\n\r\n* - Read the program provided\r\n* **Predict:** What two numbers will get displayed? - Why? **Explain your reasoning to a neighbor**.\r\n* Run the program. Were - you surpised by what happened? **Compare notes with a neighbor**." - CSD U3 Variable Arithmetic_markdown_instruction: "# Variable Arithmetic\r\n\r\nYou - can use the values stored in a variable to perform **addition, subtraction, - multiplication, and division**. Let's have a look at some common misconceptions.\r\n\r\n# - Do This\r\n\r\n* Read the program provided\r\n* **Predict:** what will displayed - when you run the program? Why? **Explain your reasoning to a neighbor**.\r\n* - Run the program. Were you surpised by what happened? **Compare notes with - a neighbor**." - CSD U3 Variable Incrementation pt2_markdown_instruction: "# Variable Reassignment\r\n\r\nThis - example is starting to get a little more complex. Work through it with a partner. - Why do you get the output you do?\r\n\r\n# Do This\r\n\r\n* Read the program - provided\r\n* **Predict:** What two numbers will get displayed? Why? **Explain - your reasoning to a neighbor**.\r\n* Run the program. Were you surpised by - what happened? **Compare notes with a neighbor**." - CSD U3 Variable Incrementation_markdown_instruction: "# Variable Incrementation\r\n\r\nTo - **increment** something means to add something to a value. In programming - if you want to increase or increment the value in a variable you need to use - the **gets** command to store the new value.\r\n\r\nAs you work through this - example try to discuss with your partner, **What's the difference between - the left side and the right side of the `=` command?**\r\n\r\n# Do This\r\n\r\n* - Read the program provided\r\n* **Predict:** What two numbers will get displayed? - Why? **Explain your reasoning to a neighbor**.\r\n* Run the program. Were - you surpised by what happened? **Compare notes with a neighbor**." - CSD U3 Variables CHALLENGE gamelab gary_markdown_instruction: "# Challenge: - Variables and Game Lab Gary\r\n\r\n* You've been provided code that draws - a simple version of Game Lab Gary\r\n* **Use variables to animate Gary**. - How can you extend them?\r\n* [[Question that leads towards incrementation]]" - CSD U3 Variables create and assign_markdown_instruction: "# Create and Assign\r\n\r\nWhen - you create a new variable you will often want to assign it a value right away. - You can **create and assign a value** to a variable in a single command as - shown below.\r\n\r\n![](https://images.code.org/2110bcf19415401434a876503ddecab5-image-1462472203840.16.37 - PM.png)\r\n\r\n# Do This\r\n\r\nThis program needs you to **create and assign - a value to the variable `size`** in order to draw a square.\r\n\r\n* Use the - block shown above to create the rectangle and assign it a value in a single - line of code.\r\n\r\n" - CSD U3 Variables draw loop newVars_markdown_instruction: "# Keep going!\r\n\r\n**Keep - using the patterns we just explored to build your own visualization**\r\n\r\n# - Do This\r\n\r\n* Extend your project to create a **personal randomized piece - of art**\r\n* Some techniques you might try:\r\n\t* Use **new shapes** like - `rect`, `regularPolygon`, or `line`\r\n * Use **variables in unexpected - ways**, (e.g. `red` also controls the size of your ellipse)\r\n * Create - **new variables** to control new parts of your program\r\n * Pick **new - ranges** for your random values\r\n * Switch which variables are assigned - values **inside or outside the draw loop**" - CSD U3 Variables draw loop rgb_markdown_instruction: "# Using variables in - the draw loop\r\n\r\nNow try randomizing the `red`, `green`, and `blue` variables. - Try setting their values to random numbers **before the draw loop** or **inside - the draw loop** like you did with `x1` and `y1` in the previous level. \r\n\r\n# - Do This\r\n\r\n* Randomize the values of `red`, `green`, and `blue`, changing - some **before the draw loop** and some **inside the draw loop**\r\n* Find - a visual effect you really like and share with a neighbor before moving on" - CSD U3 Variables draw loop xy_markdown_instruction: "# Using variables in the - draw loop\r\n\r\nAs you saw in the last example, **you can update a value - repeatedly within the draw loop**. Using this allows you to redraw an image - with random changes every time. By storing these random values in a variable - you can **use the same random value multiple times**.\r\n\r\n# Do This\r\n\r\n* - Add to the starter code provided so that the variables `x1` and `y1` are updated - randomly in the draw loop.\r\n* Use these values to redraw the ellipses at - random locations." - CSD U3 Variables eyeBrows_markdown_instruction: "# Create Your Own\r\n\r\nThe - pattern you just saw is very common. The steps were:\r\n\r\n* **Create** a - variable **outside** the draw loop\r\n* **Assign** the variable a new value - **inside** the draw loop\r\n* **Use** the new value **inside** the draw loop - to draw the current frame\r\n\r\nLet's see if you can put together everything - you've done so far to use this pattern yourself.\r\n\r\n# Do This\r\n\r\nYou - will be adding **eyebrows that move up and down together** to your smiley - face.\r\n\r\n* **Create** a variable **outside** the draw loop with a good - label. Remember this variable will control **the height of the eyebrows**\r\n* - **Assign** your variable a new random value **inside** your draw loop\r\n* - **Use** your value inside the draw loop to create **two new ellipses**. The - value in your variable should control the height\r\n\r\n**Hints and Tips:**\r\n\r\n* - The x values of your eyes can help you line up your eyebrows. \r\n* Don't - be afraid to work **iteratively** here (that means try something and keep - improving). It's ok to have something not work the first time.\r\n* Talk - with a neighbor if you're having trouble, or go check your work from earlier - in the lesson.\r\n\r\n![](https://images.code.org/05e5ea214c8ccc37fc8dd4223569602a-image-1462474590368.gif)" - CSD U3 Variables Initialize_markdown_instruction: "# Using a Variable's Value\r\n\r\nThis - program creates a variable called `size`. You will need to **assign it a value**. - It will then be used to set the size of a square on the screen.\r\n\r\n# Do - This\r\n\r\n* **Assign the variable `size` a value** and run the program to - see how its value is used\r\n* **Change the value** and rerun the program - to see how it affects the output of your program." - CSD U3 Variables Intro_markdown_instruction: "# Your first variable\r\n\r\nThe - `var` command **creates a new variable**. You only need to use it once with - each variable you create.\r\n\r\n# Do This\r\n\r\n* Create a new variable - with a **name of your choosing**, as shown in the starter code." - CSD U3 Variables make a big square_markdown_instruction: "# Replacing Labels - with Values \r\n\r\nThe last command in the program you just ran is:\r\n\r\n\tconsole.log(size);\r\n\r\nBut - the output you saw was\r\n\r\n\t10\r\n \r\nThe reason is that **variables - are replaced with their values before running almost all commands.** The only - exceptions are the commands `var size` and `size = `.\r\n\r\n# Do This\r\n\r\nThis - program is very similar to the one you just ran, except now you'll be using - a variable to draw. **Can you fill the entire screen?**\r\n\r\n* **Predict** - what this program will do.\r\n\t* Does it generate an error? What will it - draw?\r\n* **Run** the program and check your prediction.\r\n* **Change the - value** assigned on line 2 so that **the rectangle drawn fills the whole screen**.\r\n\r\n" - CSD U3 Variables make a square_markdown_instruction: "# Drawing with Variables\r\n\r\nA - **variable** is a named piece of information in a program. You can think of - it as a **label** that identifies a **value** that we wish to use and update - many times in our programs. In the previous lesson, you learned two important - commands with variables.\r\n\r\n\tvar size; // Creates a new label - (or variable) called size\r\n size = 10; // size \"gets\" 10. The - label score is now connected to the value 10\r\n \r\nOnce these connections - have been formed, we can use them to make much more interesting drawings and - animations.\r\n\r\n# Do This\r\n\r\nThis program creates a variable called - `size` and assigns it the value `10`. These two commands are familiar, but - line 3 should look new to you. What do you think will happen?\r\n\r\n* **Predict** - what this program will do.\r\n\t* Does it generate an error? Output some text? - Output a value? Why do you think so?\r\n* **Run** the program and check your - prediction.\r\n* **Change the value** that size \"gets\" on line 2 and re-run - your program. Notice anything?" - CSD U3 Variables multiple assignments_markdown_instruction: "# Multiple Assignments\r\n\r\nA - variable contains a single piece of information called its **value**. To tell - variables apart each one has a **label** or name. In your last program, the - variable had the label `size` and originally had a value of `10`. **Here's - how each command you just saw works**\r\n\r\n![](https://images.code.org/a8d2c5a88a8fbb8284a18bcb7464cb9b-image-1462301535506.51.32 - PM.png) **Create a new variable** with the label `size`\r\n\r\n![](https://images.code.org/d2a2578e6d0190f7db69872c1ad64572-image-1462301539050.51.43 - PM.png) **Assign the value `10`** to the variable `size`\r\n\r\n![](https://images.code.org/84b01d13b210c8cca8a71934b77acc56-image-1462301542169.51.53 - PM.png) **Use the value in `size`** as the width and height of the rectangle. - (Since they're the same we end up with a square)\r\n\r\n# Do This\r\n\r\nThis - program is similar to the first but it assigns multiple values to `size` before - drawing the rectangle.\r\n\r\n* **Run the program once** to see how it works\r\n* - **One at a time change the values assigned to `size` in lines 2-4 and rerun - the program** \r\n* **Discuss / Reflect:**\r\n\t* Which lines is changing - the rectangle drawn? How can you tell?\r\n * Can you explain what you're - seeing?" - CSD U3 Variables naming rules_markdown_instruction: "# Choosing Labels\r\n\r\nGood - labels **indicate how the variable will be used in the program**. The label - `size` is a good choice for a variable that controls the size of something. - You could always choose `potato` or `s`, but confusing or unclear names make - your program hard to read for you and others.\r\n\r\nThere are a **few rules** - when choosing labels:\r\n\r\n* Labels **cannot include spaces**. For example, - `size of rectangle` would generate an error.\r\n* Labels with multiple words - can be easier to read in **camelCase**. CamelCase looks like `sizeOfRectangle` - or `aReallyLongLabelName`\r\n* Labels **cannot begin with a number**. `4sides` - and `2morrow` will generate errors.\r\n* Be very careful with **spelling**.\r\n* - Labels are **case-sensitive**. `size` is not the same as `Size` or `SIZE`.\r\n\r\n\r\n<img - src=\"https://images.code.org/39340782150ad1635f6274f6edadb114-image-1462314883756.34.32 - PM.png\" style=\"float:right; height:200px\"> \r\n\r\n# Do This\r\n\r\nThis - program has multiple errors caused by bad label names.\r\n\r\n* **Correct - the errors by picking new names that follow the rules listed above.**\r\n* - **Note:** The errors prevent the program from being viewed in block mode.\r\n* - If your program works it should draw the image on the right.\r\n\r\n" - CSD U3 Variables random assignment_markdown_instruction: "# Random Assignment\r\n\r\nVariables - are really helpful when you want to **store a number that you'll use many - times in your program**. For example, if you generate a random number you - could store it in a variable so that you can use that same random number as - many times as you wish, like this.\r\n\r\n\tvar randomSize; // - Create variable randomSize\r\n randomSize = randomNumber(10,100); // randomSize - \"gets\" a randomly generated number between 10 and 100\r\n\r\n# Do This\r\n\r\nThis - program **assigns a random number** to `eyeSize` on line 1. It's already - being used to change the size of one of the eyes on the smiley face, but not - the other. **Can you get both eyes to always be the same random size?**\r\n\r\n* - **Run the program** to see how it works\r\n* **Change the program** so that - both eyes are always the same random size. Check line 12 if you need some - help.\r\n\r\nNote: Read the documentation about the `arc` command if you want - to know more about how the mouth on the smiley was made." - CSD U3 Variables random draw loop_markdown_instruction: "# Variables and the - Draw Loop\r\n\r\nYou already know that draw loop **runs over and over again - so long as your program is running**. If you assign a value to a variable - outside the draw loop it will not change while the draw loop runs. If your - assignment happens **inside the draw loop the variable will be constantly - updated, once for each time the loop runs**. \r\n\r\n# Do This\r\n\r\nThis - program draws a smiley face with randomly sized eyes. You are going to **move - the assignment of `eyeSize` inside of the draw loop, but first...**\r\n\r\n* - **Run the program** without making changes to remind yourself how it works\r\n* - **Predict what will happen** when you move the assignment statement inside - the draw loop\r\n* **Move the assignment inside the draw loop** and run your - program\r\n* **Discuss / Reflect:**\r\n\t* Was your prediction correct?\r\n * - Can you explain what you see?\r\n * Try changing the range of random values - to get a different effect." - CSD U3 Variables random drawing exemplar_markdown_instruction: "# Exemplar: - Random Drawing\r\n\r\nTo practice using **variables with the draw loop** you - will be building your own **randomized art project**. Check out the exemplar - to see one possible outcome. Then move on to get started building your own." - CSD U3 Variables Random_markdown_instruction: "# Variables random values\r\n\r\nYou - can use a variable to store a **randomly generated number**.\r\n\r\n# Do This\r\n\r\n* - In the starter code a variable is **initialized with a random number** and - then **displayed twice**\r\n* **Predict:** Will the value displayed change - between the two `console.log` statements?\r\n* Run the program. Was your prediction - correct? Were you surprised?\r\n* **Compare notes with a neighbor**" - CSD U3 Variables Reassign Predict_markdown_instruction: "# Make a Prediction\n\nThis - program **creates a variable** and then sets its value twice in a row. **What - value will be displayed when the console.log() statement runs?**\n\n![](https://images.code.org/0375d4215c5cc4b937c9333390deb81c-image-1460404063955.47.09 - PM.png)\n\n**Once you've submitted your answer be prepared to discuss your - reasoning with your classmates.**\n" - CSD U3 Variables Reassign pt2_markdown_instruction: "# Creating and assigning - in one line\r\n\r\nYou can use `var` and `=` in a single line to **assign - a value to a variable as soon as it is created**, for example: `var size = - 10;`\r\n\r\n# Do This\r\n\r\n* **Create a new variable and assign it a value** - in a single line." - CSD U3 Variables Reassign_markdown_instruction: "# Assiging a Variable\r\n\r\nVariables - **store a single piece of information that can change throughout your program**. - The `=` command gives a variable a new value.\r\n\r\nYou read the command - `size = 10;` as \"size gets the value 10\". You can also say \"size gets 10\".\r\n\r\n# - Do This\r\n\r\n**Use the `=` command** to assign a value to the variable `numberOfDogs`" - CSD U3 Variables Square Random Loop_markdown_instruction: "# Random Values - and the Draw Loop\r\n\r\nIn the last level you should have **made a prediction** - about the difference between two programs. They are both available here, with - the second one commented out.\r\n\r\n# Do This\r\n\r\n* Run the first program\r\n* - **Comment out** the first program and **uncomment** the second program\r\n* - Run the second program\r\n* **Compare what you observed to your prediction. - Discuss the results with a neighbor**" - CSD U3 Variables Square Random_markdown_instruction: "# Variables and Random - Drawing\r\n\r\nVariables can be used to **store a randomly generated value** - that you want to use many times in your program.\r\n\r\n# Do This\r\n\r\n* - Assign size a **random number between 1 and 200**.\r\n* **Run the program - multiple times**\r\n* **Discuss with a neighbor:** Can you explain why the - program always drawing a square?" - CSD U3 Variables Square_markdown_instruction: "# Variables and Drawing\r\n\r\nVariables - allow you to **use the same value multiple times in your program**. If a value - will always be used many times in a program it is really useful to place that - value in a variabnle. This lets you **quickly change the same value at many - places in your program**. It also can make move obvious **how that value is - used**.\r\n\r\n# Do This\r\n\r\n* Change the value that `size` is initialized - to so that the program draws a **larger square**" - CSD U3 Variables TEMPLATE square_markdown_instruction: "# Drawing with Variables\r\n\r\n**Get - excited because you're about to see your first variable used in a program!** - This program uses a variable in three separate ways.\r\n\r\n* `var size;` - Creates a new variable with the label size\r\n* `size = 50;` Assigns the value - 50 to size\r\n* `rect(200, 200, size, size);` Uses the value in size to draw - a rectangle with equal width and height.\r\n\r\n# Do This\r\n\r\n* Run the - program once to see how it works\r\n* **Change the value assigned to size - in line 2** and rerun the program to see what changed." - CSD U3 Variables use value rect_markdown_instruction: "# Using a Variable's - Value\r\n\r\nThis program creates a variable called `size`. You will need - to **assign it a value**. It will then be used to set the size of a square - on the screen.\r\n\r\n# Do This\r\n\r\n* **Assign the variable `size` a value** - and run the program to see how its value is used\r\n* **Change the value** - and rerun the program to see how it affects the output of your program." - CSD U3 Variables write_markdown_instruction: "# Displaying a Variable's Value\r\n\r\nOften - you want to see the exact value contained in a variable, especially if it - was randomly generated. Both `console.log` and `text` can be used with variables - to specifically see their values. This is an important skill when **debugging** - your programs.\r\n\r\n# Do This\r\n\r\nThis program uses a variable `size` - to draw a square with a randomly generated value.\r\n\r\n* **Use the `text` - command** to display the value of `size` on the screen.\r\n* **Use the `console.log` - command** to display the value of `size` in the debug console." - CSD U3 Variables2 expressions in commands_markdown_instruction: "# Expressions - inside commands\r\n\r\n**When your computer sees an expression in a program - it will calculate its value before using it**. This means you can even use - expressions in unexpected places, like inside drawing commands.\r\n\r\n\tstrokeWeight(4 - * 5);\r\n rect(10 + 10, 5 * 50, 30, 30);\r\n \r\nNotice that the commas - still separate each expression. This is just further evidence that **even - though an expression may have multiple parts, it will eventually get treated - as a single value.**\r\n\r\n# Do This\r\n\r\nTry writing more complex expressions - inside of the drawing commands provided." - CSD U3 Variables2 expressions in variables_markdown_instruction: "# Do This\r\n\r\n* - Use the `=` (assignment operator) to store the value of each expression in - a variable\r\n* Use `console.log` to display each value\r\n* Repeat the pattern - with some expressions of your own. What do you want to calculate?" - CSD U3 Variables2 expressions_markdown_instruction: "# Do This\r\n\r\n* Place - each expression inside of a `console.log` command to display their results\r\n* - What other expressions can you make? Try writing 3 of your own.\r\n" - CSD U4 - Design Mode Input Widgets_markdown_instruction: "# Input Elements\r\n\r\n<img - src=\"https://images.code.org/108fcc6fc89bf88edde00353afb33d75-image-1469814642375.49.23.png\" - style=\"float: right; width: 150px\"/>\r\nButtons are a great way to navigate - around your app, and text labels are the primary way to display content in - your app. When it comes to taking input from your users, sometimes you need - a place for them to type or boxes to check. The **Text Input**, **Dropdown**, - **Radio Button**, and **Checkbox** elements all provide ways for your users - to input information to your app.\r\n\r\n# Do This\r\n\r\nChoose at least - two of the input elements, and for each one:\r\n\r\n* Drag it out and position - it on the screen\r\n* Change the id to something meaningful\r\n* Read through - the properties and experiment with them\r\n* Add a label element next to each - that describes what they do (don't forget to give it an id too!)\r\n\r\n" - CSD U4 - Design Mode Project_markdown_instruction: "# Mocking Up Your App\r\n\r\nNow - that you have some practice laying out elements in App Lab you can start working - on mocking your own app. With your group divvy up the screens so that everyone - is working on a different screen. Because you'll be dividing the work up - you'll want to do some planning ahead of time to deicde on a common look - and feel for your pages. For example, you'll want to agree on things such - as:\r\n\r\n* Where do navigation buttons go?\r\n* What colors will you use - for backgrounds, text, and buttons\r\n* What's the general style and layout?\r\n\r\n# - Do This\r\n\r\n* Decide on a _namespace_ for your page, this will be something - you add to the beginning of every id so that your element ids don't conflict - with others when you merge everyone's screens together\r\n\t* For example, - if you are making the home page, you might use \"home_\" as your namespace - - leading to ids such as:\r\n \t* \"home_title\"\r\n * \"home_loginButton\"\r\n * - \"home_logo\"\r\n* Use the built-in elements to lay out your app screen\r\n* - For any components of your app that can't be recreated with the built in - elements you can either:\r\n\t* Redesign to utilize built in elements\r\n * - Find an image to use in place of your element\r\n * Draw the element using - your preferred image editor\r\n* Share your design regularly with your teammates - to ensure consistent style" - CSD U4 - Design Mode Text_markdown_instruction: "# Adding Text\r\n<img src=\"https://images.code.org/86ba633e04f90f3ca47dff3dcd064847-image-1469812708683.15.36.png\" - style=\"float: right; width: 75px\"/>\r\nThe label element lets you add any - text you'd like to your app. Just drag out a label block and set its \"text\" - property. \r\n\r\n# Do This\r\nUse a label element to create a title for this - app.\r\n\r\n* Drag out a label and place it on the top of the screen\r\n* - Change the id to \"titleLabel\"\r\n* Change the text to \"My App\"\r\n* Increase - the font size\r\n* Choose a color you like for the title\r\n\r\n" - CSD U5 black white images pixelation_markdown_instruction: "# Do This\r\n\r\nUse - the pixelation widget to draw something a smiley face" - CSD U5 collection UPS_markdown_instruction: "<img src=\"https://images.code.org/db7d21a8d28df27dee3449939038c7a9-image-1488501564775.jpg\" - style=\"float:right;height:250px\">\r\n### Plan a Route\r\n\r\nRoutz is a - company that helps people navigate traffic. It has maps of locations all around - the world and knows real-time information about traffic conditions. When you - type in a destination you want to go, it will give you the best route it can - find.\r\n\r\nRoutz wants to improve its data to provide even better directions. - Your job is to help the company decide what data it could collect to improve - those directions.\r\n\r\n**What data should Routz collect to improve its recommendations - AND where could it get that data?**\r\n\r\n" - CSD U5 collection videos_markdown_instruction: "<img src=\"https://images.code.org/dbefd53cc9aaa2ee1c54f25afc88d860-image-1488492606296.jpg\" - style=\"float:right;height:300px\">\r\n\r\n### Make a Recommendation\r\n\r\nMeScreen - is a website where users can watch videos uploaded from all over the world. - It has millions of videos and users and new ones every day.\r\n\r\nMeScreen - recommends a Top Video to each of its users every day. You job is to collect - information about your users and your videos to make the best recommendation - you can.\r\n\r\n**What kinds of information should you collect AND how could - you get it?**" - CSD U5 color image_markdown_instruction: "# Paint by Numbers\r\n\r\nLook at - the binary code below. Use the patterns of ones and zeros to create the picture - the code represents. To paint each square, click on the color you want to - use, then click on the square.\r\n\r\n\r\n`011 011 011 011 011 011 011 011 - 110 110`\r\n\r\n`011 011 111 111 111 011 011 011 110 110`\r\n\r\n`011 111 - 111 111 111 111 011 011 011 011`\r\n\r\n`011 011 111 111 111 011 011 011 011 - 011`\r\n\r\n`011 011 011 011 011 011 011 010 011 011`\r\n\r\n`011 011 011 - 011 011 011 010 010 010 011`\r\n\r\n`011 011 011 011 011 011 010 010 010 011`\r\n\r\n`011 - 011 011 011 011 011 011 000 011 011`\r\n\r\n`001 001 001 010 010 010 010 000 - 010 010`\r\n\r\n`001 001 001 001 010 010 010 010 010 010`" - 'CSD: Boolean Expressions_markdown_instruction': "# Boolean Expressions Video" - 'CSD: Cake Defender Exemplar_markdown_instruction': "# Defend Your Cake!\r\n\r\nThis - is an example of a defender game that you'll build by the end of this lesson. - Move the alien with arrow keys to keep the ladybugs from getting to your cake. - How high of a score can you get?\r\n\r\n# Do This\r\n\r\nTurn to a classmate - and make a list of the following information.\r\n\r\n* How many sprites are - there in this game. Which are they?\r\n* What variables are needed to make - this game? What do they store?\r\n* If you were to split the code of this - game into functions what do you think they would be? What are the major pieces - of behavior you'd need to create in your code?" - 'CSD: Platform Jumper Exemplar_markdown_instruction': "# Platform Jumper\r\n\r\nThe - game on the left is an example of a platform jumper. Press \"Run\" to play - it. You can make the alien jump with the up arrow, and move it to the left - and right with the arrow keys. You score by collecting stars, and if you - score high enough, the background will change.\r\n\r\nYou already know how - to use all the blocks you need to make a game just like this one, and you'll - be making your own platform jumper in this lesson.\r\n\r\nYou can see other - examples of platform jumpers in the next two levels." - 'CSD: Slider Example_markdown_instruction': "# RGB Slider\r\n\r\nOver the next - couple levels you are going to learn about using sliders to get user input. - You will be creating this slider which controls the color of a button. You - will return to this project in later lessons to control lights!" - CSDU2 - 2nd Validator issue_markdown_instruction: "# Add head and title tags\r\n\r\nYou - should have ended up on this level because of one of the following errors:\r\n\r\n* - Element head is missing a required instance of child element title.\r\n* Element - title must not be empty.\r\n\r\nBoth of these error messages point out that - **every web page needs a title**. The title is more than just putting a header - on your page. A computer won't be able to easily go through the content of - your web page to find your header (it could be in lots of different types - of tags). So instead **every web page includes a title element marked by a - <title> tag.** This title does not show up anywhere on your page so - it is not part of the content of your page.\r\n\r\nSince the title is not - part of web page content it goes in a special area at the top. This area is - for all information about your web page that is not content. This information - is often called **metadata**. **Metadata goes in the head element marked - by a <head> tag.** The title element is a child element of the head - element so the title element goes inside the head element.\r\n\r\nExample:\r\n\r\n<pre>\r\n<head>\r\n <title> - My Awesome Website </title>\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* - Add a <head> element above the first content in your page\r\n* Add a - <title> element inside the <head> element. Makes sure to give - your page a descriptive title.\r\n* Once you have done this return to the - <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/3\">validator level</a>" - CSDU2 - About Me Page start_markdown_instruction: "# About Me Page\r\n\r\nYou - are going to make another page for your portfolio. This one will be your About - Me page. The project has been loaded with 6 different images. Two pictures - are associated with each question below.\r\n\r\n* Do you prefer chocolate - or vanilla ice cream?\r\n* Are you a dog or a cat person?\r\n* Do you prefer - watching a movie or reading a book?\r\n\r\nCreate a website that tells your - user more about you by answering the 3 questions and showing pictures for - each answer.\r\n\r\n# Checklist\r\n\r\n* At least three images\r\n* A large - header with the name of the page\r\n* Descriptions of your image choices for - each category inside a paragraph element\r\n* HTML document uses the correct - structure. (Doctype, html, head, and body)" - CSDU2 - About Me Page Styling_markdown_instruction: "# About Me Page\r\n\r\nThere - are many CSS properties and values that can be applied to HTML elements in - order to change their style. Use the checklist below to add style to the text, - image, and body elements. Remember to think about how your styling choices - will impact users view of the web page.\r\n\r\n# Do This\r\n\r\n* Add `<head>` - and `<body>` elements to your page\r\n* Add a `<title>` element to your page - inside the `<head>` element\r\n* Add a `<style>` element to your page\r\n* - Add styling of your choice to your About Me Page. Be sure to use at least - 5 different CSS properties.\r\n\r\n# Checklist\r\n\r\n* All content contained - in body element\r\n* All style contained in head element\r\n* At least 5 of - the following CSS Properties are used:\r\n\r\n| Color Properties | Text Properties - | Images Properties |\r\n| --------------- | --------------- |----------------- |\r\n| - `color` <br> `background-color` | `text-align` <br> `text-decoration` <br> - `font-family` <br> `font-size` | `height` <br> `width` <br> `border-width` - <br> `border-color` <br> `border-style` |\r\n\r\nIf you’ve used at least 5 - of the properties from the checklist, you can explore some additional text - and image CSS properties to add to your About Me page." - CSDU2 - Add doctype and html_markdown_instruction: "# Doctype and HTML tag\r\n\r\nWhen - a web browswer is trying to read your document it looks for alerts which tell - it which language you are using. In order to let the web browser know that - this is an html document you need to do two things:\r\n\r\n1. Add <!DOCTYPE - html> at the very top of your html file. <!DOCTYPE html> is always - the first thing in an html document because it notifies the computer that - this is an html document and to interpret it as such. <!DOCTYPE html> - is not technically a tag but instead an instruction to the web browser. \r\n\r\n2. - Wrap all the content of the file in an HTML element using the <html> - tag. The <html> tag notifies the computer where the html starts and - ends. The <html> tag is the container for all other HTML elements (except - for the <!DOCTYPE html> tag). So you need an opening and closing <html> - tag.\r\n\r\n# Do This\r\nThis is your Hobbies page from the last lesson.\r\n\r\n* - Add <!DOCTYPE html> at the top of your index.html file\r\n* Add <html> - right underneath <!DOCTYPE html> and add a closing </html> tag - at the end of index.html" - CSDU2 - add header to content_markdown_instruction: "# Adding Content Part - 2\r\n\r\nLet's add some headers to the document.\r\n\r\n# Do This\r\n\r\n* - Add a \"Favorite Animal\" title above your paragraph about your favorite animal.\r\n* - Add a \"Favorite Way to Travel\" title above your paragraph about your favorite - way to travel (car, plane, train, etc.)." - CSDU2 - Adding Personal Cause_markdown_instruction: "# Personal Cause\r\n\r\n**Circulate:** - As students are working on their research and website, check to make sure - that thay are using appropriately licensed media and proving accurate attribution. - Spot check by asking for the license details of specific images.\r\n\r\n\r\n# - Do This\r\n\r\n* Finish your personal website" - CSDU2 - body tags_markdown_instruction: "# Body Element\r\n\r\nAs mentioned - on the last level the `<body>`element can be useful for more than breaking - up your code. What if you wanted to put a background color on the whole page? - Since the `<body>` element contains all the content of the web page, styling - its `background-color` property will give the whole page a background color.\r\n\r\n# - Do This\r\n\r\n* Use a selector for the `<body>` element to set the `background-color` - of the page to something other than white" - CSDU2 - Classes on ESS_markdown_instruction: "# Classes in External Style Sheets\r\nYou - may have also noticed these issues appearing.\r\n\r\n\t1.\tThe styling of - the `<img>` elements on one page should be different than the other\r\n\t2.\tFor - the `<h1>` headers, on one page we want to style them and on the other we - don't.\r\n\r\nLuckily you know classes and we can fix these with classes!\r\n\r\n# - Do This\r\n\r\n* Put the image on the home page in the \"home-image\" class\r\n* - Find the old style rule for images on the home page (width: 600px) and change - the selector so it will style the \"home-image\" class instead\r\n* Put all - the images on the technology page in the \"tech-images\" class\r\n* Find the - old style rule for images on the technology page (width: 100px) and change - the selector so it will style the \"tech-images\" class instead\r\n* Find - the h1 element on the technology page and put it in the class \"page-header\"\r\n* - Change the secltor for the style rule for h1 elements to be just a style rule - for the page-header class" - CSDU2 - Classes_markdown_instruction: "# Classes\r\n\r\nSometimes you only - want to style one specific element of a certain type instead of all elements - of one type. **Classes are HTML attributes that can be added to any HTML element - to group it with other elements. Classes allow for the group of elements to - have their own unique style.** This applies to elements on the same page or - on separate pages.\r\n\r\nTo style using classes:\r\n\r\n1. First you need - to mark the elements in html that will be in that class. \r\n2. Second you - need to write a style rule for that class. To write a rule for a class of - elements, the selector for the rule is a `.` before the class name. \r\n\r\nFor - example the code below would style the fancy class which has been set up for - a paragraph element:\r\n\r\n| HTML file | CSS File | Result |\r\n| --------- - | -------- | ------ |\r\n| <pre> <p class=\"fancy\">Good Day</p></pre> - |<pre>.fancy {<br> color: darkblue;<br> font-family: cursive;<br>} </pre>|<img - src=\"https://images.code.org/05110876c62dafe72a7d0ddf34f7ae07-image-1475009963479.58.30 - PM.png\" alt=\"result image\"> | \r\n\r\n# Do This\r\n\r\nThere are lots of - different `<h5>` elements on the page. We want to style them differently depending - on what season they are associated with.\r\n\r\n* For each season put all - the `<h5>` elements for that season in a class specific to that season. For - example all the winter `<h5>` elements would be in the class \"winter\".\r\n* - Style each class of `<h5>` elements with a different `color`" - CSDU2 - Copy Code_markdown_instruction: "# Adding HTML and CSS\r\n\r\nNow that - you have the files set up bring over your code for your Guinness Book of World - Records page.\r\n\r\n## Copy Code\r\n* Go to <a href=\"https://studio.code.org/s/csd2/stage/7/puzzle/8\" - target=\"_blank\">this level</a> and copy all the code from the HTML file. - Paste the code into the HTML file you just created.\r\n* Copy the CSS code - from the style sheet at <a href=\"https://studio.code.org/s/csd2/stage/7/puzzle/8\" - target=\"_blank\">this level</a> and copy it into the CSS file you just created." - CSDU2 - Debug images_markdown_instruction: "# Debug\r\n\r\n\r\n\r\n# Do This\r\n* - Look through at the src attribute and determine the cause. \r\n* Your goal - is to have an HTML page that displays 5 images. \r\n* Notice that the “alt” - attribute serves as a placeholder in case the image doesn’t load\r\n* It’s - also helpful to know what the picture should be about in case there’s a problem - with the file path" - CSDU2 - Debugging 1_markdown_instruction: "# Debugging\r\n\r\nComputer code - is written by humans and humans make mistakes. All computer scientists make - mistakes. So part of being a good computer scientists is about being able - to find your mistakes and fix them. In computer science we call mistakes **bugs**. - Bugs can be anything in code which causes it not to work as planned. The process - of finding and fixing those bugs is called **debugging**. Debugging is a - problem solving process so use your problem solving steps as you try to debug. - Over the next couple levels you are going to work on your debugging skills.\r\n\r\n<img - src=\"https://images.code.org/ed7cb1f2e093b9c36b82bfbf9bbcd76b-image-1474383288840.54.26 - AM.png\" style=\"float:right;border:black solid 5px;width:200px\">\r\n\r\nThe - desired web page is on the right. There are two issues with the starter web - page:\r\n\r\n1. The header won't show up as an h1 header.\r\n2. The list - doesn't seem to be formatting correctly.\r\n\r\n# Do This\r\n\r\n* Find and - fix all bugs in the starting HTML\r\n* Check that the final result matches - the image on the right." - CSDU2 - Debugging 2_markdown_instruction: "# Debugging\r\n<img src=\"https://images.code.org/61190513dba270c731251df168b98f80-image-1474383960371.02.38 - AM.png\" style=\"float:right;border:5px black solid;width:250px\">\r\n\r\nMore - debugging practice! This page is a little more challenging to debug than - the last one.\r\n\r\n# Do This\r\n\r\nFix the HTML so that the web page makes - the example on the right.\r\n\r\n* Find and fix all bugs in the starting HTML\r\n* - You will know you have found all the bugs when your page matches the one on - the right." - CSDU2 - Debugging 3_markdown_instruction: "# Debugging\r\n\r\nThis page has - images in it. Images make finding bugs a little more tricky. Can you debug - this page?\r\n\r\nAs you are debugging you may notice a new set of symbols - that look something like this:\r\n<pre>\r\n<!-- this is a comment -->\r\n</pre>\r\n\r\nThis - is a **comment**. Comments are written by computer scientists creating web - pages for themselves and other humans who might look at their HTML file. Comments - explain the different parts of the code and what it should create. Comments - might be able to help you debug.\r\n\r\n# Do This\r\n\r\n* Find and fix all - bugs in the starting HTML\r\n* You know you’ve found all of the bugs when - your page matches the <a href=\"https://thimbleprojects.org/danimcavoy/103295/\" - target=\"_blank\"> Target Page</a>." - CSDU2 - Debugging 4_markdown_instruction: "# Debugging\r\n\r\nSometimes bugs - in code aren't obvious in how the page displays. Remember that you want your - web page to display on any browswer so even though it displays nicely in one - place may not mean that it works everywhere. \r\n\r\n# Do This\r\n\r\n* Find - and fix all bugs in the starting HTML\r\n* You know you’ve found all of the - bugs when your page match’s the <a href=\"https://thimbleprojects.org/danimcavoy/103456\" - target=\"_blank\"> Target Page</a>" - CSDU2 - Developing Brand Style_markdown_instruction: "# Developing Brand Style\r\n\r\nAlright - now its time to start writing the style rules for your brand!\r\n\r\nYou will - notice that all the different basic elements you could have used on your web - pages are included on this page and you are given a style rule for each to - start with.\r\n\r\nIn addition there is a style rule for two classes: header - and content. You will be setting up these classes on all the pages of your - website using divs. The header class contains the title of the website as - well as the navigation to get around it. The content class contains everything - else.\r\n\r\n# Do This\r\n\r\n* Look up your colors RGB values from your <a - href=\"https://studio.code.org/s/csd2/stage/10/puzzle/4\" target=\"_blank\"> - Color Choice Level </a> and copy the RGB values into the block comment to - make it easier to style your page\r\n* Create style rules for all the basic - elements of a web page that might be included on your website\r\n* Create - style rules for the header and content classes. Consider having background - colors and borders on these sections to make them stand out from the background." - CSDU2 - Div_markdown_instruction: "# Div Element\r\n\r\nHTML elements allow - you to group together content on your web page that is connected. However - sometimes you want to group together multiple HTML elements into one connected - chunk and give it a style. To connect a set of HTML elements inside one element - you can use the `<div>` element.\r\n\r\nFor your Personal Website you are - going to start out by using this to group together the header section you - want to go on every page of your website. This will include the title of your - website as well as any navigation. Once you do this you can put a background - color on the whole div to make it look like one connected block.\r\n\r\n<pre>\r\n<div>\r\n <h1> - Title of Website </h1>\r\n <a href=\"index.html\"> Home </a>\r\n <a - href=\"page1.html\"> Page 1 </a>\r\n <a href=\"page2.html\"> - Page 1 </a>\r\n <a href=\"page3.html\"> Page 1</a>\r\n</div>\r\n</pre>\r\n\r\n# - Do This\r\n\r\n* Put all the navigation hyperlinks and page title in `<div>` - element\r\n* Add a `background-color` for the `<div>` element" - CSDU2 - External Style Sheets_markdown_instruction: "# External Style Sheet\r\n\r\nNow - that you have your colors and fonts, you can begin to think more about the - style rules of your brand. This is a simple template page that contains the - features your website might contain. You will use this page to play around - with the style rules until you find the right set of style rules for your - brand. These style rules will be common across all the pages on your website. - They will promote your own personal brand. Since they will be common across - all the web pages it would be nice if they could all be written in one place - instead of duplicating them on every page.\r\n\r\nYou can get clearer separation - of content and style by putting content and style in separate files. The new - file for CSS will be called an **external style sheet**. Most of the time - the file name will be **style.css**. Since the file ends in .css the web browswer - already knows that this is CSS code so we no longer need the `<style>` element - around it. \r\n\r\n# Do This\r\n\r\n* Add a new CSS file called style.css\r\n* - Copy all the CSS from inside the `<style>` element from the .html file to - the .css file\r\n* Delete the `<style>` element from the .html file" - CSDU2 - Finalize Personal Website_markdown_instruction: "# Consistent Style\r\n\r\nYour - site’s pages might look crazy since you pulled together the style of all the - pages in the last level. It is time to work on that. It will be up to you - to determine the style rules for your page. Remember best practice is to - only have one rule per html element. If you want to keep two different styles - for certain elements remember you can use classes. In addition you should - have taken time to plan out your consistent style design for website.\r\n\r\n# - Do This\r\n\r\n* Work on creating a consistent style for your website using - the external style sheet and style rules.\r\n* Use classes to make parts of - your website stand out." - CSDU2 - Finish Recipe_markdown_instruction: "# Finishing Recipe Page\r\n\r\nNow - its time to finish off your Recipe Page.\r\n\r\n* Add any more information - to your recipe page you think would be helpful such as how long it takes to - make or what meal of the day you usually eat it.\r\n* Finalize your Recipe - Page. Use the checklist below to make sure your page is complete. Remember - you can always go back and look at the example page.\r\n\r\n## Checklist\r\n\r\n* - All text contained in an HTML tag (header, paragraph, or list)\r\n* Unordered - list of ingredients\r\n* Ordered list of directions\r\n* Paragraph description - of the dish\r\n* Headers for each section\r\n* Title header at the top of - the page" - CSDU2 - First Debug_markdown_instruction: "# Debug\r\n\r\nMistakes happen when - you are programming. The great thing is that these mistakes help your code - get better and you become a better developer as you learn how to find the - mistakes. Mistakes in code are called **bugs** and the process of fixing the - bugs is called **debugging**. \r\n\r\n# Do This\r\nThe creator of this website - is having trouble so trouble. Debug this page so that it matches the example - on the next level. Your teacher may also be displaying the website at the - front of the room.\r\n\r\nAs you work to debug look specifically at:\r\n\r\n* - header elements\r\n* list elements\r\n* list item elements" - CSDU2 - First-Weblab_markdown_instruction: "# Adding Content\r\n\r\nStart creating - your first web page! Try to create a page with a title and two paragraphs.\r\n\r\n# - Do This\r\n\r\n* Write a sentence about your favorite animal\r\n* On a separate - line write another sentence about your least favorite animal.\r\n* Above both - sentences try adding a title that says \"Animals\"\r\n* Don't forget to click - <img src=\"https://images.code.org/6a35d13b10ed2029a9323c9cb555e39e-image-1477681291001.01.12 - PM.png\" style=\"width:100px\">\r\n* **What do you notice about the structure - of your content?**" - CSDU2 - font properties_markdown_instruction: "# Font Properties\r\nThe way - text looks is called a font. Two properties that control font are `font-family` - and `font-size`.\r\n\r\n## font-family\r\nThere are 5 fonts that will look - the same across any browser:\r\n\r\n* serif\r\n* sans-serif\r\n* monospace\r\n* - cursive\r\n* fantasy\r\n\r\nWe will focus on using those font families to - start. To read more about font families you can go to <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\"> - W3 Schools - CSS font-family</a>\r\n\r\n## font-size\r\nThere are many values - that can be used to determine font-size. Pixels are the easiest to use. A - pixel is one tiny square on the screen. So when a font is 14px that means - its 14 pixels tall.\r\n\r\nFor more details on font properties go to <a href=\"http://www.w3schools.com/cssref/pr_font_font-size.asp\">W3 - Schools - font-size</a>.\r\n\r\n# Do This\r\n\r\n* Add a font-family property - to h1 style to make the font cursive\r\n* Make the text in all the paragraph - elements larger." - CSDU2 - Footer_markdown_instruction: "# Recreating Page\r\n\r\nAt the beginning - of class you looked at a web page and figured out which elements were styled - similarly. Using those guesses and the classes in the starter code can you - recreate the original page?\r\n\r\n# Do This\r\n* Look at the class style - rules to see what they do. Don't worry if you don't know every property - yet. Just use the ones you do know.\r\n* Put elements in the appropriate classes - to recreate the <a href=\"https://studio.code.org/s/csd2/stage/9/puzzle/2\" - target=\"_blank\"> original page </a>" - CSDU2 - head and body tag intro_markdown_instruction: "<div style=\"float: - right; height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**Why - do I need to structure the HTML document this way?**</summary>\r\nAlthough - many modern web browsers can make good assumptions about what language you - are writing in and where to find different information in your document, you - don't want to leave the display of you web page up to chance. To guarantee - the best results for displaying your web page on all computers you need to - assist the computer in figuring out where to find information. <br> <br>\r\n\r\nAs - you go forward you are going to need two different sections in your HTML file. - They will serve different purposes.\r\n<br><br>\r\n1. Content of the page<br>\r\n2. - Information about the page<br>\r\n<br>\r\nBy breaking up a web page this way - it is clear where to find the code that is creating the physical output on - the web page and which code is just information for the computer about the - page.<br><br>\r\n\r\nIn creating web pages we differentiate between these - two areas using the <head> and <body> elements. The <head> - element contains all the information about the page. The <body> element - contains all the content for a web page.\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What - is a head element?**</summary>\r\nThe <head> element contains all the - information about the page. This is extra information that is helpful for - the computer in displaying your web page but is not the physical content of - the web page. \r\n\r\nThe <head> element usually comes above the body - element but inside the <html> element. For right now it will be blank - but later we will learn important things that are added to the head.\r\n</details>\r\n\r\n<details>\r\n<summary>**How - is the head element different than the header elements? **</summary>\r\nThe - header elements (<h1> to <h6>) are used to display headers directly - on your web page for your user to see. The head tag marks the information - that is not user facing in your HTML document. \r\n</details>\r\n\r\n<details>\r\n<summary>**What - is the body element? **</summary>\r\n\r\n The <body> element contains - all the content for a web page. The HTML elements for your headers, paragraphs, - and lists should all go inside the <body> element.\r\n\r\n</details>\r\n</div>\r\n\r\n# - Head and Body\r\n\r\nFormat your HTML document with two sections using the - <head> and <body> elements as shown in the image below. From this - point forward anything you add to an HTML document should go inside either - the <head> or the <body> elements. Put all the content and structure - you have created so far inside the <body> element.\r\n\r\n<img src=\"https://images.code.org/2513d8f7c31e76c2ee5427e512a54a1c-image-1481559174341.png\" - style=\"width:300px\">" - CSDU2 - head body_markdown_instruction: "# Head and Body\r\n\r\nThere are now - two different sections of code in our HTML file:\r\n\r\n1. Content of the - page\r\n2. Information about the page (for right now just how to style it).\r\n\r\nIn - creating web pages we differentiate between these two areas using the <head> - and <body> elements. These elements are important for creating maintainable - code but will also be useful for other things as well. The <head> element - contains all the information about the page, also sometimes called **metadata**. The - <body> element contains all the content for a web page.\r\n\r\nOutline - of the structure of your web page:\r\n\r\n<pre>\r\n<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<style>\r\n \t\t<!--Styling - Goes Here-->\r\n\t\t</style>\r\n\t</head>\r\n\r\n\t<body>\r\n\t\t<!--Content - Goes Here-->\r\n\t</body>\r\n \r\n</html>\r\n</pre>\r\n\r\n\r\n# - Do This\r\n\r\n* Add a <head> element surrounding the styling for the - web page.\r\n* Add a <body> element surrounding the content for the - web page." - CSDU2 - Header of Page_markdown_instruction: "# Header Area\r\n\r\nWebsites - usually have the same navigation bar across all of their pages so you can - get back and forth between things on the site. To do this you need to add - the navigation links to all the pages on your website.\r\n\r\n# Do This\r\n\r\n* - Copy the navigation links section onto all the web pages.\r\n* Copy any styles - you need into the style sheets for those pages." - CSDU2 - Headers_markdown_instruction: "<div style=\"float: right; height: 250px; - width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - are headers?**</summary>\r\nHeaders are the different sized section titles - throughout a web page. Headers add structure to your web page by breaking - it up so its easier for a user to read.\r\n</details>\r\n<details>\r\n<summary>**How - do I create a header?**</summary>\r\nYou can make something a header element - by surrounding it by header tags. For example:\r\n<pre> <h1> Header - Text </h1> </pre> <br> <br>\r\n\r\nNotice how there is a the opening - tag (<h1>) and closing tag (</h1>). The closing tag is the same - as the opening tag except it has `/` after the opening angle bracket. The - text you want to show as the header goes in the middle of the two tags.\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example: \r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is. HTML tags - add structure to the content of a web page.\r\n</details>\r\n<details>\r\n<summary>**Why - do you need an opening and closing tag?**</summary>\r\nYou need both an opening - and closing tag for many HTML elements because it marks where that structure - starts and stops. You don't want all the text on your web page to be a title.\r\n</details>\r\n</div>\r\n\r\n# - Headers\r\n\r\nYou may have noticed on the last level that everything you - type into the editor is getting smashed together. In order to differentiate - between these different parts we use HTML elements to mark the different parts - of a web page. In your investigation with the inspector did you come across - something that made headers?\r\n\r\n# Do This\r\n\r\n* Make your header \"Animals\" - stand out using the `<h1>` header element." - CSDU2 - Hobbies Valid Update_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - is Doctype and how do I use it? **</summary>\r\n<!DOCTYPE html> is always - the first thing in an html document because it notifies the computer that - this is an html document and to interpret it as such. <!DOCTYPE html> - is not technically a tag but instead an instruction to the web browser. <br> - <br>\r\n\r\nAdd <!DOCTYPE html> at the very top of your html file. \r\n</details>\r\n\r\n<details>\r\n<summary>**What - is the <html> element and how do I use it? **</summary>\r\n\r\nThe <html> - tag notifies the computer where the html starts and ends. The <html> - tag is the container for all other HTML elements (The <!DOCTYPE html> - tag does NOT go inside the html element). You will need an opening and closing - <html> tag. This will also make your preview of your website update - automatically if there are no issues with your code! <br> <br>\r\n \r\nWrap - all the content of the file in an HTML element using the <html> tag.\r\n\r\n</details>\r\n<details>\r\n<summary>**Why - do I need to structure the HTML document this way?**</summary>\r\nAlthough - many modern web browsers can make good assumptions about what language you - are writing in and where to find different information in your document, you - don't want to leave the display of you web page up to chance. To guarantee - the best results for displaying your web page on all computers you need to - assist the computer in figuring out where to find information. <br> <br>\r\n\r\nAs - you go forward you are going to need two different sections in your HTML file. - They will serve different purposes.\r\n<br><br>\r\n1. Content of the page<br>\r\n2. - Information about the page<br>\r\n<br>\r\nBy breaking up a web page this way - it is clear where to find the code that is creating the physical output on - the web page and which code is just information for the computer about the - page.<br><br>\r\n\r\nIn creating web pages we differentiate between these - two areas using the <head> and <body> elements. The <head> - element contains all the information about the page. The <body> element - contains all the content for a web page.\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What - is a head element?**</summary>\r\nThe <head> element contains all the - information about the page. This is extra information that is helpful for - the computer in displaying your web page but is not the physical content of - the web page. \r\n\r\nThe <head> element usually comes above the body - element but inside the <html> element. For right now it will be blank - but later we will learn important things that are added to the head.\r\n</details>\r\n\r\n<details>\r\n<summary>**How - is the head element different than the header elements? **</summary>\r\nThe - header elements (<h1> to <h6>) are used to display headers directly - on your web page for your user to see. The head tag marks the information - that is not user facing in your HTML document. \r\n</details>\r\n\r\n<details>\r\n<summary>**What - is the body element? **</summary>\r\n\r\n The <body> element contains - all the content for a web page. The HTML elements for your headers, paragraphs, - and lists should all go inside the <body> element.\r\n\r\n</details>\r\n\r\n</div>\r\n\r\n# - Update Hobbies Page\r\n\r\n<!DOCTYPE html>, <html>, <head>, - and <body> are important to add to your web page. Practice adding them - to update your Hobbies page. In all future levels they will be included for - you so you won't need to add themselves." - CSDU2 - HobbiesPage_markdown_instruction: "# Hobbies Page\r\n\r\nIn this level, - you’ll use what you’ve learned to create your Hobbies page. Get creative with - your Hobbies Page but make sure it meets the basic requirements in the Checklist - first.\r\n\r\n# Checklist\r\n\r\n* 1 title with large header size\r\n* At - least 3 medium headers with each hobby name\r\n* At least 3 small headers - with the amount of time you’ve been doing each hobby\r\n* At least a 2 to - 3 sentence description of each hobby under the hobby’s time inside paragraph - tags" - CSDU2 - HobbiesPageExample_markdown_instruction: "# Example Hobbies Page\r\n\r\nTO - DO: Make this an embed level\r\n\r\nOn the next level you are going to work - on creating your own Hobbies Page. This is an example of the type of page - you are working to create. Come back to this level for reference as needed - while creating your page." - CSDU2 - image properties_markdown_instruction: "# Image Properties\r\n\r\nImages - elements also have properties that can change their style.\r\n\r\n## Size\r\nOne - of the image properties is size. You can control size of an image using the - `width` and `height` properties. The size is determined by the number of pixels - tall and wide an image is. Pixels is abbreviated to `px`. For example to - make all the images 100 pixels wide you would use:\r\n\r\n<pre>\r\nimg {\r\n\twidth: - 100px;\r\n}\r\n</pre>\r\n\r\nAlthough you can control both width and height - it is best practice to only set either width and height since setting both - can distort the image.\r\n\r\n\r\n\r\n## Borders\r\nBorders are a common property - for many elements including images. Borders consist of three properties: `border-style`, - `border-width` and `border-color`.\r\n\r\n<pre>\r\nimg {\r\n border-style: - dashed;\r\n border-width: 5px;\r\n border-color: blue;\r\n}\r\n</pre>\r\n\r\nFor - more information about borders go to <a href=\"http://www.w3schools.com/css/css_border.asp\"> - W3 Schools - Border Properties</a>.\r\n\r\n# Do This\r\n\r\n* Add a rule to - style img elements\r\n* Use the rule to set the width of all images to 200 - pixels\r\n* Add borders to all images. Be creative and try different border - styles and colors." - CSDU2 - Inspector Warm Up_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**<span> - How do I use the Inspector Tool? </span>**</summary>\r\nThe Inspector Tool - is a great way to figure out what unfamiliar code in Web Lab. To turn on the - Inspector Tool click the <img src=\"https://images.code.org/188579d7c6e7645d0d2edd203a33bd63-image-1480361561351.31.56 - PM.png\" style=\"width:100px\">. You will know that the Inspector Tool is - on because the button will turn white and say Inspector: On. Once you turn - on the Inspector Tool you can hover over any element in the preview area and - Web Lab will highlight the associated code.\r\n</details>\r\n\r\n</div>\r\n\r\n# - Language Detective\r\n\r\nUse the Inspector Tool to check out the code for - this website someone created on Web Lab! Focus on the index.html file open - for now.\r\n\r\nTry to answer the following questions:\r\n\r\n* In what ways - is this language similar to or different from the languages your groups invented - in the last lesson?\r\n* What are the rules of this language?\r\n* How does - this language add structure to the website?\r\n\r\n**Wait for instructions - from your teacher before going on to the next level.**" - CSDU2 - Internet Speed Test_markdown_instruction: "# Peer Review\r\n\r\nToday - you are going to have other people look at your website and give feedback - on it.\r\n\r\n# Do This\r\n\r\n* Leave this open on your screen so your peer - reviewers can look at your work" - CSDU2 - Intro to CSS_markdown_instruction: "# Style Element\r\n\r\nUp until - now you have only been able to add content to your page. In Web Developers - intentionally separate content and style to make their code easier to maintain. HTML - is the language used to add content to a web page. CSS is a language that - adds style to a web page. \r\n\r\nIn CSS style rules are used to style certain - elements of HTML. Style rules explicitly call out certain properties of the - element to be styled. To add CSS style rules to an HTML page, you need to - first add an HTML `<style>` element. This signals to the web browser that - all the stuff inside the `<style>` element is CSS styling instructions. \r\n\r\n\r\n# - Do This\r\n\r\n* Add the `<style>` element right below the opening `<html>` - tag. \r\n\r\nWe will add CSS to change the look of the page on the next level!" - CSDU2 - Intro to Validator_markdown_instruction: "# Validator\r\n\r\nThe validator - is a tool that allows you to check if a page is following good HTML fundamentals - and will work consistently across many different computers and web browsers.\r\n\r\n# - Do This\r\n\r\nUse the validator to check if the web page on this level meets - the requirements for consistent web pages. To use the validator, it’s important - to work on it one error at a time.\r\n\r\n1. Open up the <a href=\"https://validator.w3.org/\" - target=\"_blank\">W3 validator</a>.\r\n2. Click **\"Validate by Direct Input\"**\r\n3.** - Copy and paste the contents of index.html** file into the box.\r\n4. Click - **“Check”**\r\n5. If there is an error message click the top error below:\r\n\r\n\t* - <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> Unable to Determine - Parse Mode! </a>\r\n\t* <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> - No DOCTYPE found, and unknown root element. Aborting validation. </a>\r\n * - <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/5\"> Element head - is missing a required instance of child element title. </a>\r\n * <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/5\"> - Element title must not be empty.</a>\r\n * <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> - Start tag seen without seeing a doctype first. Expected e.g. <!DOCTYPE html>.</a>\r\n\r\n\tOnce - you fix the error start again at step 1.\r\n\r\n6. If there are no error messages - <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/6\">click here </a> - to head to the next set of levels!" - CSDU2 - Link and Nav_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - are hyperlinks?**</summary>\r\nHyperlinks can connect to local web pages or - external web pages. To add navigation to your website you will need to add - hyperlinks which connect your individual web pages. You can **add hyperlinks - to your web page using the `<a>` element**. The text you want to display - as the hyperlink goes between the opening and closing hyperlink tags. The - `<a>` element has an attribute `href` which is the location to link to. The - location of a local page is just the file path for that page. <br> <br>\r\n\r\nFor - example to link to the unique houses page you would add the following code - inside your `<body>` element. <br><br>\r\n\r\n<pre>\r\n<a href=”houses.html”> - Unique Houses </a>\r\n</pre>\r\n\r\n</details>\r\n<details>\r\n<summary>**How - do I add a hyperlink?**</summary>\r\nYou can **add hyperlinks to your web - page using the `<a>` element**. The text you want to display as the hyperlink - goes between the opening and closing hyperlink tags. The `<a>` element has - an attribute `href` which is the location to link to. The location of a local - page is just the file path for that page. <br> <br>\r\n\r\nFor example to - link to the unique houses page you would add the following code inside your - `<body>` element. <br><br>\r\n\r\n<pre>\r\n<a href=”houses.html”> Unique - Houses </a>\r\n</pre>\r\n\r\n</details>\r\n</div>\r\n\r\n# Hyperlink - Element\r\n\r\n* In the index.html file, find the line of code that says that - says `<a href=\"houses.html\">Odd Houses</a>`. This is a link that will take - you to the Odd Houses page at `houses.html`.\r\n* Discuss with a partner how - the code works.\r\n * Where does the file name go?\r\n * Where does the label - of the link go?\r\n* Below the hyperlink to the Odd Houses page add two new - hyperlinks (`<a>`) to the following pages:\r\n * Crazy Signs Page\r\n * - Guinness Book of World Records Page\r\n* Test it out to see if clicking the - links take you to the other pages of your site." - CSDU2 - Link Tag_markdown_instruction: "# Link Element\r\n\r\nIn the last level - you moved your style out into an external style sheet. You may have noticed - though that the style was no longer appearing on the page. To get the style - to apply to the web page we need to connect the html and css files.\r\n\r\n**To - link sheets you will need to add a `<link>` element.** The `<link>` element - goes inside the `<head>` element since it is information about the page and - not content of the page. You can link a stylesheet to multiple pages if you - want them all to have the same style.\r\n\r\n`<link>` element has two main - attributes: `rel` and `href`.\r\n\r\n* As you learned before for images the - `href` attribute is the file path, in this case just the same of the CSS file. \r\n* - The `rel` attribute indicates the relationship that the linked file has to - the current file, in this case its a stylesheet.\r\n\r\nFor example:\r\n<pre>\r\n<head>\r\n <link - rel=\"stylesheet\" href=\"styles.css\">\r\n</head>\r\n</pre>\r\n\r\n# - Do This\r\n\r\n* For the index.html link the css file using the `<link>` element - in the `<head>` element" - CSDU2 - Local Images_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - do I add images?**</summary>\r\nThe `<img>` tag allows you to show images - on your web page. <br><br>\r\n\r\nExample:\r\n<pre><img src=\"dog.png\" - alt=\"dog jumping\"/></pre><br><br>\r\n\r\nIn order to tell the browser - which file to use, extra information, called an **attribute**, is added to - the <img> tag inside the brackets. The attribute `src` stands for **s**ou**rc**e - and tell the name of the image. Image files names include extensions which - tell the computer which type of image they are working with. Common extensions - are .jpg, .jpeg, .png. <br><br>\r\n\r\nIn addition to have the src attribute, - image elements also have the `alt` attribute which describe the image. This - is important in case the image doesn’t load or for people who have trouble - with their eyesight. <br><br>\r\n\r\nAn `<img>` tag is an example of a **void - element** because it starts and closes in one tag. To mark this we put the - `/` which usually goes in the close tag at the end of the image tag.\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is a void tag?**</summary>\r\nAn `<img>` tag is an example of a **void element** - because it starts and closes in one tag. To mark this we put the `/` which - usually goes in the close tag at the end of the image tag. Void tags do not - need a closing tag because there is no text content which must be wrapped - in tags. The content that shows on the screen is specified through the tags - attributes.\r\n</details>\r\n<details>\r\n<summary>**Why does an image tag - not have a closing tag?**</summary>\r\nAn image tag is a void tag and void - tags do not need a closing tag because there is no text content which must - be wrapped in tags. The content that shows on the screen is specified through - the tags attributes.\r\n</details>\r\n<details>\r\n<summary>**What is an attribute?**</summary>\r\nAttributes - are extra information included in a tag. Attributes have names and values. - The name tells what type of information is being provided and then the value - gives the specific information for that tag. \r\n\r\nFor example <img> - tags have two attributes, src and alt. src specifies the name of the image - file and alt tells the browser in readable text what the image is.\r\n</details>\r\n</div>\r\n\r\n# - Images\r\n\r\nA Dog vs Cat web page has been started for you. The dog image - has already been added to the below web page. Use an image tag to add the - cat.jpeg image to the page below the cat header." - CSDU2 - Matching Class Style Checker_markdown_instruction: "# Check your matching - answers\r\n\r\nTest out your guesses from the matching activity by applying - the class styling to the elements and see if it produces the same result. - The results from the slide show are shown below.\r\n\r\n| Question 1 | Question - 2 | Question 3 | Question 4 | Question 5 |\r\n| ---------- | --------- | - ---------- | ---------- | ---------- |\r\n| <img src=\"https://images.code.org/702e804602dbf28874f516f1578fd883-image-1475259238611.54.05 - PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/7f6a2c9561213f6b5c8c9285f94ae850-image-1475259241204.25.16 - PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/291f01b170f9242a26f04f8eb8296471-image-1475259238611.52.46 - PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/81c9db1d1258f0fd709ba4508806388c-image-1475259238611.53.08 - PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/43df26d786235bf2402854b56c8bbcf5-image-1475259238610.50.22 - PM.png\" style=\"width:250px\"> |" - CSDU2 - Missing Home Link_markdown_instruction: "# Missing Home Link\r\n\r\nCopying - your hyperlinks to all your pages allowed you to get to most of the pages - on your website from any other page. One hyperlink is missing - the one to - get you to your home page (index.html).\r\n\r\n**Add a hyperlink to your home - page from all the pages, even your home page itself.** Adding it to your home - page will keep your navigation header consistent on all pages." - CSDU2 - Multi Site First_markdown_instruction: "# Making a Multi-page Site\r\n\r\nA - web site should include more than one web page, and they should connect to - each other. The first multi-page site you make will be a site of Odd Stuff. Most - of the site is already here, but you will need to add your Guinness Book of - World Records page.\r\n\r\n* In the list of project files, find index.html - and click on it. **index.html is used in Web Lab to mark the home page of - a website**, the first page that your visitors will see.\r\n* Click on some - of the other HTML files. These are also web pages, but they have different - names. **Every file needs a unique name that will help you know what it is.**\r\n* - Look around through all the files provided. Can you figure out which style - sheets go with which web pages?" - CSDU2 - Nav add to Personal Site_markdown_instruction: "# Navigation on Personal - Website\r\n\r\nNow that you have all the files for your website, connect them - together!\r\n\r\n# Do This\r\n\r\n* Add hyperlinks at the top of your index.html - file for every page on your site (including the index.html page).\r\n* In - your style sheet, create a rule-set for the `a` tag that gives it the style - that you want.\r\n* Copy the hyperlinks and put them in every page.\r\n\r\n\r\n* - Add the `a` rule-set to every style sheet, or combine your style sheets to - make your entire page have the same look and feel!\r\n\r\nOnce your website - is set up and connected, feel free to make improvements to any pages on your - website.\r\n\r\nBefore leaving this level:\r\n* Take a screenshot of your - home page and save it somewhere on your computer so you can find it later - (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Check List\r\n\r\n* All of your web pages are individual - HTML files in this Portfolio Project" - CSDU2 - Nav on Personal Website_markdown_instruction: "# Multi-Page Personal - Website\r\n\r\nNow that you know how to set up a website, go ahead and set - up your own personal website.\r\n\r\n# Do This\r\nYour personal website is - back. So far you have just your personal home page.\r\n\r\n* Add html files - for each of the Hobbies Page, Recipe Page, and About Me page\r\n* Copy the - code from the following levels <a href=\"https://studio.code.org/s/csd2/stage/4/puzzle/14\" - target=\"_blank\">Hobbies Page</a>, <a href=\"https://studio.code.org/s/csd2/stage/4/puzzle/17\" - target=\"_blank\">Recipe Page</a>, and <a href=\"https://studio.code.org/s/csd2/stage/8/puzzle/12\" - target=\"_blank\">About Me page</a> into the files you created.\r\n* Add a - CSS file for your <a href=\"https://studio.code.org/s/csd2/stage/8/puzzle/12\" - target=\"_blank\">\"About Me\" page style sheet</a>." - CSDU2 - New Class Files_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**Why - is the style sheet not working? **</summary>\r\nCheck in the HTML of the records - page to make sure that your link (`<link rel=\"stylesheet\" href=\"nameofstylesheet.css\">`) - is linking to the correct CSS file.\r\n</details>\r\n</div>\r\n# Making a - Multi-page Site\r\n\r\nYou may notice that your styles for your Guinness Book - of World Records don't seem to be working. Can you figure out why? \r\n\r\n**Hint:** - When you brought over your code you had to change the name of the style sheet - from \"style.css\" to something else." - CSDU2 - New Html Files_markdown_instruction: "# Adding HTML and CSS\r\n\r\nYou - will need to add your Guinness Book of World Records page. First create an - HTML and CSS file. On the next level you will bring over the code.\r\n\r\n## - Adding File\r\n* Add a new HTML file by clicking the \"Add HTML\" button.\r\n* - Rename the file, either by right clicking it and choosing \"Rename\", or by - clicking on it when it's already highlighted. **Make sure the name is unique, - descriptive and ends in \".html\"**.\r\n* Create a new CSS file and rename - it, too." - CSDU2 - ordered Lists_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - are the two types of lists?**</summary>\r\n There are two types of lists in - HTML, ordered and unordered lists.\r\n</details>\r\n<details>\r\n<summary>**What - is an unordered list?**</summary>\r\nAn unordered list is just a set of bulleted - items.\r\n</details>\r\n<details>\r\n<summary>**How do I make an unordered - list?**</summary>\r\n\r\nAn unordered list element has the tag <ul> - . Notice that this is an abbreviation for <strong>U</strong>nordered <strong>L</strong>ist. - Each item on the list is marked by a list item element <li>. Notice - that this is also an abbreviation for <strong>L</strong>ist <strong>I</strong>tem. The - list item element is a child element which means that you don't use it on - its own. It is contained inside a list element. It can be helpful to indent - your <li> tags so its clear that is contained in the <ul> tags.\r\n\r\n<table - border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> - <ul> <br> <li>Red </li> <br> <li>Green </li> - <br> <li>Blue</li> <br> </ul> </pre></td>\r\n<td><img - src=\"https://images.code.org/25d4dfc9b6c448d0da305df66aa1dfb7-image-1473444368948.05.32 - PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is an ordered list?**</summary>\r\nAn ordered list is a set of bulleted items - which are numbered.\r\n</details>\r\n\r\n<details>\r\n<summary>**How do I - make an ordered list?**</summary>\r\n\r\nAn ordered list element has the tag - <ol> . Notice that this is an abbreviation for <strong>O</strong>rdered - <strong>L</strong>ist. Each item on the list is marked by a list item element - <li>. Notice that this is also an abbreviation for <strong>L</strong>ist - <strong>I</strong>tem. The list item element is a child element which means - that you don't use it on its own. It is contained inside a list element. - It can be helpful to indent your <li> tags so its clear that is contained - in the <ul> tag.\r\n\r\n<table border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> - <ol> <br> <li>Step 1 </li> <br> <li>Step 2 </li> - <br> <li>Step 3 </li> <br> </ol> </pre></td>\r\n<td><img - src=\"https://images.code.org/3ef357cfad8ac98a8b30beb229ebcb78-image-1473446360428.39.04 - PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is. HTML tags - add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# - Ordered Lists\r\n\r\nCreate an ordered list for each step in your recipe under - the Directions header" - CSDU2 - p tags_markdown_instruction: "# Background Color\r\n\r\nAnother common - CSS property used to style pages is `background-color`. This property will - set the background color of a specific element. You can use any of the CSS - colors for background color.\r\n\r\nFor example the code below will set the - text color of all h1 elements to blue and the background color to red.\r\n\r\n<pre>\r\nh1 - {\r\n\tcolor: blue;\r\n\tbackground-color: red;\r\n}\r\n</pre>\r\n\r\n# Do - This\r\nTry out the `background-color` property with paragraphs.\r\n\r\n* - Give all the paragraphs (`<p>`) elements a background color of your choice." - CSDU2 - Paragraphs 2_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - is a paragraph element?**</summary>\r\nParagraphs are marked by opening(`<p>`) - and closing(`</p>`) tags as well. Paragraphs in HTML can be any length of - text from one word to a bunch of sentences. All of your text in your web page - should be contained in an HTML element (headers or paragraphs). Paragraphs - group together sets of sentences and put some space between that group of - text and the next group of text.\r\n</details>\r\n<details>\r\n<summary>**How - do I create multiple paragraphs?**</summary>\r\nParagraphs are marked by opening(`<p>`) - and closing(`</p>`) tags as well. To create more than one paragraph you will - want multiple sets of opening and closing `<p>` tags. For example\r\n<pre>\r\n\t<p>\r\n \tThis - is a paragraph.\r\n </p>\r\n\t<p>\r\n \tThis is another - paragraph.\r\n </p>\r\n</pre>\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example: \r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is.\r\n</details>\r\n</div>\r\n\r\n# - Paragraphs\r\n\r\nNow that you have a header try to separate the two sentences - like the example below using the paragraph element.\r\n\r\n<img src=\"https://images.code.org/12f8d4230fcd2144a5880815c8375149-image-1480364278934.12.18 - PM.png\" style=\"width:300px\">" - CSDU2 - Paragraphs 3_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - do I make different sized headers?**</summary>\r\nHeaders come in 6 different - sizes. So far you have primarily used the biggest one <h1>. The number - 1 in the HTML tag designates that this is the biggest header. The smallest - header is <h6>. You can also try the <h2>, <h3>, <h4>, - and <h5> tags which get smaller as the number gets larger.\r\n</h1>\r\n</details>\r\n<details>\r\n<summary>**What - are headers?**</summary>\r\nHeaders are the different sized section titles - throughout a web page. Headers add structure to your web page by breaking - it up so its easier for a user to read.\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example: \r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is.\r\n</details>\r\n</div>\r\n\r\n# - Header Sizes\r\nAdd the names of your favorite animals above the sentence - they go with. Make the names of the animals smaller headers than the \"Animals\" - title for the page. See the example below.\r\n\r\n<img src=\"https://images.code.org/1462f452bd2d983902f47e275da9fa90-image-1481137414337.03.11 - PM.png\" style=\"width:250px\">" - CSDU2 - Priority of CSS Rules_markdown_instruction: "# Priority of CSS Rules\r\n\r\nOn - the last level you moved all the style rules to one style.css file that is - linked to both web pages on the website. You may have noticed that the way - some of the styling of the elements on the two pages changed. Over the next - couple levels you will be working to fix this.\r\n\r\n## Multiple Rules for - One Element\r\n\r\nBy copying the style rules from two different pages into - one style sheet we created a couple cases where we have two style rules for - one element. Style rules are applied from top to bottom so when there are - multiple style-rules for the same properties of one element the one closer - to the bottom is the one that will appear.\r\n\r\nFor example if you had the - following style rules.\r\n\r\n<pre>\r\np{\r\n background-color: blue;\r\n}\r\np{\r\n background-color: - red;\r\n}\r\n</pre>\r\n\r\nThe pargraph elements would have a red background.\r\n\r\nTo - fix this issue the best thing to do is have one rule for each type of element.\r\n\r\n# - Do This\r\n\r\n* There are two style rules for `<div>` elements. They are - both the same. Delete one of them.\r\n* There are two style rules for `<body>` - elements. They are **different** but both just control the `background-color` - decide which of the two you would like to keep and get rid of the other one.\r\n* - Leave the duplicate `<img>` element style rules for now we will deal with - them on the next level." - CSDU2 - PW - Class Style Personal Site_markdown_instruction: "# Free Play Styling\r\n\r\nYour - turn to decide what you want to style! Play with the classes styling and RGB - colors to improve your personal website.\r\n\r\n* Make sure you have completed - the checklist below \r\n* Take a screenshot of your home page and save it - somewhere on your computer so you can find it later (*Need help with how to - screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Checklist\r\n\r\n* On your hobby page, give each hobby its - own text color using RGB values.\r\n* On your recipe page, give all the parts - of the ingredients list the same background color, including the title.\r\n* - Use classes to style at least 2 other elements of your personal website" - CSDU2 - PW - Classes on Recipe_markdown_instruction: "# Classes on Recipe Page\r\n\r\nIn - the next few levels, as a little more practice with style, you will style - some of the elements on your recipe page in order to give the appearance of - a notecard. You will want to make the background of the ingredients list and - the directions lists look like notecards.\r\n\r\n# Do This\r\n\r\n* In the - recipe page add the ordered list for directions to the \"notecard\" class\r\n* - In the recipe page add the unordered list for the ingredients to the \"notecard\" - class\r\n* Add a style rule for the notecard class but don't put anything - in it. You will start working on it on the next level." - CSDU2 - PW - Consistent Personal Site Style_markdown_instruction: "# Consistent - Style\r\n\r\nYour site’s pages might look crazy since you pulled together - the style of all the pages in the last level. It is time to work on that by - creating classes for style exceptions.\r\n\r\n# Do This\r\n\r\n* Identify - the exceptions to the style rules such as the note card styling\r\n* Use classes - to separate the styling of those unique elements\r\n* Move the styling for - those classes into your style.css file\r\n* Get ride of all `<style>` elements - and the style rules inside them\r\n* Your website should now have a consistent - look!" - CSDU2 - PW - Divs to break up the page_markdown_instruction: "# Header and - Content Divs\r\n\r\nGrouping together the different sections of a web page - will make styling the web page easier. It also helps make clear to the user - where to look for different content. You saw an example of this earlier in - the levels.\r\n\r\n# Do This\r\n\r\n* Put all the elements for the navigation - of the website and the title of the website in div if it not already\r\n* - Set the class of that div to be \"header\"\r\n* Put all the rest of the elements - on the page in a different div \r\n* Set the class for the second div to be - \"content\"\r\n* These will get styled on the next level!" - CSDU2 - PW - ESS Final touches_markdown_instruction: "# Finalizing Styling\r\n\r\nYou - should have completed styling your page with an external style sheet. Now - it is time to finish up anything you still want to work on.\r\n\r\n# Do This\r\n\r\n* - Go over the checklist below to make sure you have completed everything\r\n* - Work on continuing to improve your website!\r\n* Take a screenshot of your - home page and save it somewhere on your computer so you can find it later - (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Checklist\r\n\r\n* Picked and used a font pair consistently - across your website\r\n* Pick and used a color set of no more than 4 primary - colors across your website. It is okay if you use different shades of those - colors as well.\r\n* All style rules are in an external style sheet named - style.css\r\n* The style.css file is linked to all pages on the website\r\n* - Each page has:\r\n\t* Header div with the title of the website, the logo for - your website, and the navigation bar\r\n * Content div with the main content - of the web page\r\n * The logo as the favicon for that page\r\n* Clicking - the logo on any page will take you back to the home page" - CSDU2 - PW - External Style Sheets_markdown_instruction: "# External Style - Sheet\r\n\r\nAlright you just learned how to add an external style sheet to - create consistent style across a website. When there are specific things you - want to style differently you have practiced using classes. It is time to - use these in your Personal Website. To start, get all the style into one external - style sheet linked to each web page.\r\n\r\nYou can mark the different sections - of the .css file with comments. Comments in CSS use different notation than - comments in HTML. Comments in CSS look like this: `/* This is a comment */`\r\n\r\n# - Do This\r\n\r\n* Create a CSS file and name it style.css\r\n* Cut/Paste the - CSS code from your <a href=\"\" target=\"_blank\">style tester level</a> to - style.css\r\n* Link the stylesheet to each document in a project." - CSDU2 - PW - Favicon_markdown_instruction: "# Favicon\r\n\r\nSince you have - a logo for your website it would also be cool to have it be small image associated - your website. The small image associate with your website is called a **favicons**. - Favicon is short for favorite icon. It displays in the tab for a website, - when a website is bookmarked, and sometimes in the browsers address bar.\r\n\r\nFor - example when you open a tab for Code.org it might look like this. The icon - on the left is the favicon.\r\n\r\n<img src=\"https://images.code.org/9db8bd43bf27355cd6ed799358775140-image-1475697356699.55.40 - PM.png\">\r\n\r\nFavicons are metadata for the website since they are used - by the web browser and not content on the web page itself. Therefor they are - included in the `<head>` element. To add the favicon you use the `<link>` - element. The `href` still is the file path but the `rel` is \"shortcut icon\".\r\n\r\nFor - Example:\r\n\r\n<pre>\r\n<head>\r\n\t<link rel=\"shortcut icon\" - href=\"logo.png\" />\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* - Set your icon to be the favicon for your website. You need to add it to every - page for it show up on each page." - CSDU2 - PW - Final Classes Style_markdown_instruction: "# Note Card Styling\r\n\r\nNow - that you have the background of the note cards, you can finish up the styling - of the note card. \r\n\r\nBefore you start styling it is important to know - something about borders. So far you have controlled all four-sides of a border - at the same time. Sometimes you want to style just one border edge at a time. - To do this we just add the name of the side to the property. For example:\r\n\r\n<pre>\r\np - {\r\n\tborder-top-color: green;\r\n\tborder-bottom-style: solid;\r\n\tborder-right-width: - 20px;\r\n}\r\n</pre>\r\n\r\n# Do This\r\n<img src=\"https://images.code.org/b38ebda06d6ce76bd59aa93fa050290c-image-1475159743251.30.18 - AM.png\" style=\"width:400px;float:right\">\r\n\r\nStyle the note card so - it looks similar to the image on the right.\r\n\r\n* Make the writing on the - note card look like handwriting by using the font-family property and coloring - it different than the rest of the text on the page\r\n* Make all note cards - have a fixed width by setting the width of the notecard class to 500 pixels\r\n* - Make the note card pop and look 3D using border properties.\r\n\t* Set the - border color to the same color as the background of the card.\r\n * Set - the style to `outset`\r\n * Set the width to a small number of pixels\r\n* - Style the bottom border of all li elements to be black, solid, and 1 pixel.\r\n* - Style the bottom border of all h3 elements to be red, solid, and 1 pixel." - CSDU2 - PW - Image as A Link_markdown_instruction: "# Image as a Link\r\n\r\nNow - that you have a logo lets add it to your website. It will go on every individual - page in your header with your navigation and website title. Often clicking - on the logo of a website will take you back to the home page of a website. - So we will set that up as well.\r\n\r\nTo make an image also a link we just - wrap the `<img>` element in a `<a>` element.\r\n\r\n<pre>\r\n<a href=\"index.html\"> - <img src=\"logo.png\" alt=\"logo\"> </a>\r\n</pre>\r\n\r\n# Do - This\r\n\r\n* Upload your logo to your project.\r\n* Insert the logo using - an `<img>` element in the header div of each page\r\n* Make the image a link - by surronding the `<img>` element in an `<a>` element that directs to the - index.html page" - CSDU2 - PW - Pre Publishing 2_markdown_instruction: "# HTML Tags Check\r\n\r\nThe - next check should be for bugs or issues with your HTML. \r\n\r\n# Do This\r\n\r\n* - Make sure you are viewing your index.html file on Web Lab\r\n* Open your Web - Development Practices to page 2\r\n* Read through the list of basic HTML tags - you have seen\r\n* Check through your page to make sure you are using the - tags correctly and not missing tags" - CSDU2 - PW - Pre Publishing 3_markdown_instruction: "# Bugs Check\r\n\r\nThe - next check should be for general bugs.\r\n\r\n# Do This\r\n\r\n* Open your - Web Development Practices to page 3\r\n* Read through the list of bugs you - have seen\r\n* Check through your page to make sure none of those bugs are - appearing in your current website" - CSDU2 - PW - Pre Publishing 4_markdown_instruction: "# CSS Properties Check\r\n\r\nThe - next check should be for styles you still want to add or fix.\r\n\r\n# Do - This\r\n\r\n* Make sure you are viewing your style.css file on Web Lab\r\n* - Open your Web Development Practices to page 4\r\n* Read through the list of - basic CSS properties you have seen\r\n* Think about if there are styles you - still want to add or improve" - CSDU2 - PW - Pre Publishing 5_markdown_instruction: "# Personally Identifiable - Information Check\r\n\r\nEarlier in this lesson you made a list of information - you would not want to give away on your website. Use that list to check your - site. This is the most important step before publishing your website for all - to see.\r\n\r\n# Do This\r\n\r\n* Open your Web Development Practices to page - 5\r\n* Read through your list of rules for protecting your PII\r\n* Be a sleuth - on your own page and make sure people can not find out that important information - you want to protect.\r\n* Remove the information you don't want people to - know. This doesn’t have to mean stripping all of the personal importance out - of your site, it can be as simple as cropping an image to remove faces or - replacing your school’s name with “my school”." - CSDU2 - PW - Pre Publishing 6_markdown_instruction: "# Publishing!\r\n\r\nIt - is time to share your website!\r\n\r\n# Do This\r\n\r\n* Check your website - one more time to make sure you are ready to share it with others\r\n* Notice - the \"Share\" button has appeared at the top of the screen.\r\n* Click the - share button and copy the URL for your website.\r\n* Send that URL to friends - and family as instructed by your teacher.\r\n\r\nIf you made changes to your - home page during class make sure to take a screenshot of your home page and - save it somewhere on your computer so you can find it later (*Need help with - how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)" - CSDU2 - PW - Pre Publishing Access_markdown_instruction: "# Accessibility Check\r\n\r\nThe - next check should be for accessibility issues.\r\n\r\n# Do This\r\n\r\n* Open - your Web Development Practices to page 5\r\n* Read through the list of accessibility - issues you had identified\r\n* Make sure you fixed all the issues you had - listed\r\n* Check for any new content you have added for accessibility issues" - CSDU2 - PW - Pre Publishing Check_markdown_instruction: "# High Quality Features - Check\r\n\r\nUse your Web Development Practices - Project Guide to review - your website for publishing. First you will look at the list of features you - said you thought made something a high quality website to make sure you are - doing those things.\r\n\r\n# Do This\r\n\r\n* Open your Web Development Practices - to page 1\r\n* Read through the feature list\r\n* Pick a couple features you - might want to improve after reading the list" - CSDU2 - PW - Publish It_markdown_instruction: "# Publish It\r\n\r\n\r\n# Do - This\r\n\r\n* Publish it" - CSDU2 - PW - RGB color_markdown_instruction: "# RGB Color\r\n\r\nIn order to - get a nice “fake” notecard color, you will have to break out from the named - color values given in Web Lab. \r\nInstead, you will be using the RGB function, - which takes three values, the amount of red, green and blue you want in your - color. Each component of the color (red, green, blue) can have a value of - 0 to 255. Where 0 means the component color is not present or dark and 255 - means it is full present or bright.\r\n\r\nFor example:\r\n\r\n<pre>\r\n\r\nh1 - {\r\n\tcolor: rgb(120, 0, 255);\r\n}\r\n</pre>\r\n\r\nTo explore RGB colors - go to <a href=\"http://www.w3schools.com/colors/colors_rgb.asp\">W3 Schools - - RGB Colors </a>. There is a tool for you to play around with different RGB - values.\r\n\r\n# Do This\r\n\r\n* Play with the <a href=\"http://www.w3schools.com/colors/colors_rgb.asp\">W3 - Schools - RGB Colors </a> tool and find a color similar to this color: <img - src=\"https://images.code.org/2de78dc9667e9e6c77dc5e28b1de6b0d-image-1475095252137.40.30 - PM.png\" style=\"width:50px\">\r\n\r\n* Set the `background-color` of the - notecard class to the yellow you just created.\r\n\r\n*Hint: Yellow is a **bright** - color with **equal amounts of red and green**. *" - CSDU2 - PW - Title for Your Site_markdown_instruction: "# Website Title\r\n\r\nin - head element need to add title element with your title\r\n\r\nshows up in - the name of the tab\r\n\r\n# Do This\r\n\r\n* Stuff" - CSDU2 - PW - Validate Your Website_markdown_instruction: "# Validator\r\n\r\nThe - HTML is designed to display the same way on all computers, but sometimes you’ll - notice that different web browsers, or even different versions of the same - browser, display a website differently. Often this is because you either missed - a rule of HTML, or didn’t describe your content specifically enough. Fortunately - there’s a tool called the Validator that can check your code for errors!\r\n\r\n# - Do This\r\n\r\n* Open up the <a href=\"https://validator.w3.org/#validate_by_input\" - target=\"_blank\">Validator - Website</a>\r\n* For each html file in your - project\r\n\t* Copy the html into the box\r\n * Click check to see if there - are an error\r\n\t* Make a list of all unique errors.\r\n * For each error, - write in your own words what you think it means\r\n * For each error, search - to find a potential solution." - CSDU2 - Recipe Page Start_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is. HTML tags - add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# - Recipe Page\r\n\r\nYou are going to start a new web page. This will be a favorite - recipe page. It will take a couple levels to build the page. Use your knowledge - from earlier in class to start getting it set up.\r\n\r\n# Do This\r\n\r\n* - Take out your recipe you picked.\r\n* Using a large header tag, put the name - of the recipe at the top of the page.\r\n* Create three smaller headers: Description, - Ingredients, and Instructions.\r\n* Add a paragraph element under the \"Description\" - describing the dish the recipe creates." - CSDU2 - Recipe Valid Update_markdown_instruction: "<div style=\"float: right; - height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How - do I alert the web browser what language I'm writing in?**</summary>\r\n\r\nYou - will need to add two things to your HTML document, Doctype and an html element. - \r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**Why do I need to add these - elements?**</summary>\r\n\r\nWhen a web browser is trying to read your document - it looks for alerts which tell it which language you are using. In order to - let the web browser know that this is an html document you need to tell it - what type of document it is deal with (Doctype) and where to find the code - (inside the html element).\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What - is DOCTYPE and how do I use it? **</summary>\r\n<!DOCTYPE html> is always - the first thing in an html document because it notifies the computer that - this is an html document and to interpret it as such. <!DOCTYPE html> - is not technically a tag but instead an instruction to the web browser. <br> - <br>\r\n\r\nAdd <!DOCTYPE html> at the very top of your html file. \r\n</details>\r\n\r\n<details>\r\n<summary>**What - is the HTML element and how do I use it? **</summary>\r\n\r\nThe <html> - tag notifies the computer where the html starts and ends. The <html> - tag is the container for all other HTML elements (The <!DOCTYPE html> - tag does NOT go inside the html element). You will need an opening and closing - <html> tag. This will also make your preview of your website update - automatically if there are no issues with your code! <br> <br>\r\n \r\nWrap - all the content of the file in an HTML element using the <html> tag.\r\n\r\n</details>\r\n\r\n</div>\r\n\r\n# - Doctype and HTML tag\r\n\r\nThis is your Recipe page from the last lesson. - Update it with elements that alert your browser which language the document - was written in by adding DOCTYPE and <html> elements.\r\n\r\n![](https://images.code.org/f75e718b8e40870e7b6d87c0efdfc0ae-image-1481320053480.png)" - CSDU2 - Selector and Property_markdown_instruction: "# CSS Style Rules\r\n\r\nStyle - rules consists of two main parts: the selector and the property. All style - rules go inside the `<style>` element.\r\n\r\n# Selector\r\nThe selectors - can be any part of the web page you want to style. One way you can identify - parts of the web page is using the names of the element. Selecting an element - will make all elements of that type have the given styling. The selector name - for HTML elements is the name of the tag with the brackets removed. In the - below example the selector is `h1` and it will style all the h1 tags with - the properties inside the `{ }`.\r\n\r\n# Property\r\nThe property describes - which style component of the selected element to change. There are lots of - different style properties you can change about your web page. Not all properties - can be used for all elements.\r\n\r\nThe first property we will use is the - `color` property. The **`color` property sets the color of text** and works - for any text elements including paragraphs, lists and headers. There are tons - of colors you can choose. Luckily Web Lab pops up a list as you type. You - can also look at the full list of colors at <a href=\"http://www.w3schools.com/cssref/css_colors.asp\">W3 - Schools - CSS Colors</a>.\r\n\r\nExample:\r\n\r\nThe below style will make - all the h1 headers on the page have blue text.\r\n\r\n<pre>\r\n <style>\r\n h1{\r\n color:blue;\r\n }\r\n </style>\r\n</pre>\r\n\r\n# - Do This\r\n\r\n* Add a style rule for h1 headers so the text is green.\r\n* - Add another rule that defines the color of h3 headers. Pick any color you - would like." - CSDU2 - SEO 1_markdown_instruction: "# Personal Website: Search Engine Optimization\r\n\r\nYou - are going to update your website to optimize for finding it on a search engine. - It is important to know that your website it might not be easy to find on - a search engine. This might be partially a result of improvements you could - make to your website. However since your website is hosted by Code.org and - does not have a descriptive URL it might be harder to find.\r\n\r\n# Do This\r\n\r\n* - Run your website through the <a href=\"http://www.seocentro.com/tools/seo/seo-analyzer.html\" - target=\"_blank\"> SEO </a>\r\n* Write down the issues it highlights with - your website\r\n* We will learn how to fix some of those issues in the next - couple levels however some may be things you want to investigate on your own - later such as Social Media presence." - CSDU2 - SEO 2_markdown_instruction: "# Search Engine Optimization: Title\r\n\r\nOne - piece of metadata that should be included in every web page you create is - the website title. Although you may put an `<h1>` element on your page content - with the title of your website, the computer does not necessarily know that - is the title as there may be multiple `<h1>` tags on your page. To make clear - to the computer what the title is the `<title>` element is added as metadata - in the `<head>` element. Every page on your website needs it own title.\r\n\r\nExample:\r\n<pre>\r\n<head>\r\n\t<title> - My Website Title</title>\r\n</head>\r\n</pre>\r\n\r\nThis `<title>` - element is not displayed anywhere on the page but the browser may use it to - put a name in the tab of your web browser or display it when someone searches - for your website. In fact titles are very important to search engines because - titles are often a primary piece of information looked at by users to decide - which websites fulfill their needs.\r\n\r\n*Sometimes search engines will - still generate their own title for your page based on the user search and - what the algorithm of the search engine thinks is best for supporting what - the user is looking for.*\r\n\r\n## Guidelines for Creating Good Titles\r\n\r\nSince - titles are so important you will want to make sure you have good titles for - all the pages of your website. Here are a couple practices for making good - titles. \r\n\r\nMake your title:\r\n* **Descriptive:** Make sure your title - explains what someone will find on that page.\r\n* **Concise:** Keep your - title short. 5 words or less.\r\n* **Individual:** Don't use the same title - for multiple pages.\r\n\r\n# Do This\r\n\r\n* Add a `<title>` element to each - web page on your website" - CSDU2 - SEO 3_markdown_instruction: "# Search Engine Optimization: Description\r\n\r\nAnother - important piece of meta data used by search engines is the description. The - description is added using the `<meta>` element. It has two attributes, the - name and the content. The content is where the actual description goes. **Every - page should have its own description.**\r\n\r\n<pre>\r\n<head> \r\n\t<meta - name=\"description\" content=\"Your meta description goes here \" />\r\n</head>\r\n</pre>\r\n\r\nJust - like the title tag this will not show up physically on the page but will be - used by search engines to display information about your page. Sometimes the - description will also be used when you share the link on social media platforms. - \r\n\r\n*Just like titles the search engine might decide it knows best and - generate a description for the page that is different than the one you provided.*\r\n\r\n## - What goes in a description?\r\n\r\nA good description will follow these guidelines:\r\n\r\n* - **Descriptive:** Unique description of what someone will find on this page\r\n* - **Keywords:** Uses keywords in full sentence descriptions which someone might - use to search for your page\r\n* **Short:** Less than 150 characters\r\n* - **Avoid Special Characters:** Don't use special characters such as ‘”<>{}[]()\r\n* - **Enticing:** It makes someone want to look at your web page.\r\n\r\n# Do - This\r\n\r\n* Add descriptions to each web page on your website using the - `<meta>` tag \r\n* Test it out!\r\n\t* Open <a href=\"http://www.seocentro.com/tools/seo/seo-analyzer.html\" - target=\"_blank\"> SEO </a>\r\n * Re-load the results for your page to - use the most updated version\r\n * Under the <img src=\"https://images.code.org/01e0d19ff0278ba750efc3b3824b31b0-image-1477075078800.37.19 - PM.png\" style=\"width:80px\"> section there is a preview of the Google Search - results.\r\n \r\n*Remember that the search engine might still decide to - use something else as your description. Its not a big deal and its still important - to have a description.*" - CSDU2 - SEO 4_markdown_instruction: "# Search Engine Optimization: Keywords\r\n\r\n\r\n\r\n\r\n# - Do This\r\n\r\n* Meta name =”keywords” content=”blah” (http://searchengineland.com/meta-keywords-tag-101-how-to-legally-hide-words-on-your-pages-for-search-engines-12099)" - CSDU2 - SEO 5_markdown_instruction: "# Search Engine Optimization: Viewport\r\n\r\nYour - website can be used on many different devices. Those devices have different - screen sizes. Viewport tells the browser how to load your website depending - on the size of the browser. To get the browser to display your web page at - the width of the device you can use the `<meta>` element with the attributes - below. The `<meta>` element should go inside the `<head>` element with all - the other meta data.\r\n\r\n<pre>\r\n<meta name=\"viewport\" content=\"width=device-width, - initial-scale=1\">\r\n</pre>\r\n\r\n# Do This\r\n\r\n* Set the viewport - of your website using the above code." - CSDU2 - SEO Final_markdown_instruction: "# Search Engine Optimization: Final\r\n\r\nIn - the past levels you added metadata to your website to improve your search - engine optimization. Go back to your list of issues the Search Engine Optimizer - identified and see if there are any others you can solve.\r\n\r\n# Do This\r\n\r\n* - Check to make sure you have completed the checklist below\r\n* Continue to - optimize your site for better search engine results\r\n* Take a screenshot - of your home page and save it somewhere on your computer so you can find it - later (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Checklist\r\n\r\n* Every web page has metadata for title, - description and viewport to improve search engine optimization." - CSDU2 - Separate Content and Style_markdown_instruction: "# Separate Content - and Style\r\n\r\nSoon you will get to apply your new brand style rules to - your website. Before you do that, though, let's investigate how to style - a multi-page website.\r\n\r\nAs already mentioned, from this point forward - we will be using external style sheets instead of styling inside the HTML - file because this keeps all the styling for the website in one place. However, - in order to do this you are going to have to pay extra close attention as - you remove your old styling. Even though you want consistent style on your - website, you will have exceptions to the style rules in certain cases. Exceptions - to the style rules might include the note card styling, which you worked on - in the last lesson. We would not want every list to have the note card styling, - just those specific ones on the recipe page.\r\n\r\nYou will never want to - have duplicate rules for the same selector. So there should not be two stylings - with `p` as the selector. Instead you need to leverage the ability to make - classes in order to have multiple styles for `<p>` elements. \r\n\r\nTo practice - this, we have a website with an external style sheet that also still has styling. - You will need to figure out how to keep the unique elements of the individual - web pages while getting a more consistent style across the pages.\r\n\r\nUnique - Elements You Want to Keep:\r\n\r\n\t1.\tThe styling of the `<img>` elements - on one page should be different than the other\r\n\t2.\tFor the `<h1>` headers, - on one page we want to style them and on the other we don't.\r\n\r\n# Do - This\r\n\r\n* Put the image on the home page in the \"home-image\" class\r\n* - Find the old style rule for images on the home page (width: 600px) and change - the selector so it will style the \"home-image\" class instead\r\n* Put all - the images on the technology page in the \"tech-images\" class\r\n* Find the - old style rule for images on the technology page (width: 100px) and change - the selector so it will style the \"tech-images\" class instead\r\n* Find - the h1 element on the technology page and put it in the class \"page-header\"\r\n* - Change the secltor for the style rule for h1 elements to be just a style rule - for the page-header class\r\n* Copy the three new style rules you created - into your style.css file.\r\n* Delete the `<style>` element and its contents - from both pages." - CSDU2 - SizeOfHeaders_markdown_instruction: "# Size of Headers\r\n\r\nThere - are different sized headers which are marked by the number next to the h in - the header tag. They go from <h1> to <h6> .\r\n\r\n| Example | - Result |\r\n| ------- | ------ |\r\n| <pre><h1> Shoulders </h1> - <br> <h2> Knees </h2> <br> <h3> Toes </h3></pre> | - <img src=\"https://images.code.org/4f252e3dce84a14e1bfdab373d3edbad-image-1473432674187.50.43 - AM.png\" style=\"width:200px\"> |\r\n\r\n# Do This\r\n* Predict what the result - of the code in the index.html file will look like. Pick from one of the 4 - options below.\r\n\r\n| Option 1 | Option 2 | Option 3 | Option 4 |\r\n| -------- - | -------- | -------- | -------- |\r\n| <img src=\"https://images.code.org/a4e973cc13db380ca1e1efeb4263974f-image-1473432905067.53.47 - AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/1c660b4e54a3e835250597cb261d8e17-image-1473432905068.54.08 - AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/22e9ae6a04afd8251b29939a6fa63411-image-1473432905069.54.25 - AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/0eee565202089d44a6bb5633603c45e0-image-1473432905069.54.50 - AM.png\" style=\"width:200px\"> |" - CSDU2 - Starting Personal Home Page_markdown_instruction: "# Starting Your - Home Page\r\n\r\nIn this lesson we are going to start putting together your - personal website! In order to do this you need to create your personal home - page.\r\n\r\n# Do This\r\n\r\nUsing your sketch of your personal home page - and personal web development practice packet as a guide:\r\n* Create as much - of the home page design as you currently know how to.\r\n* Take a screenshot - of your work and save it somewhere on your computer so you can find it later - (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)" - CSDU2 - Style to Personal Site_markdown_instruction: "# Style on Personal Website\r\n\r\nNow - that you have navigation on each page, you need to figure out how you want - to style your website. You have two choices:\r\n\r\n1. Make a style sheet - for each web page on your website\r\n2. Have one style sheet for your whole - website to give it a more consistent feel.\r\n\r\nPick one of the two choices - and style your website appropriately. Make sure to link the style sheet to - the page(s) you want it to apply to. Also make sure that the `a` rule-set - you created on the last level is applied to all your `a` tags.\r\n\r\nOnce - your website is set up and connected, feel free to make improvements to any - pages on your website.\r\n\r\nBefore leaving this level:\r\n* Take a screenshot - of your home page and save it somewhere on your computer so you can find it - later (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Check List\r\n\r\n* All of your web pages are individual - HTML files in this Portfolio Project\r\n* Navigation to all the pages exists - at the top of each individual page\r\n* Style has been applied to all pages - on the website" - CSDU2 - Sub Folders_markdown_instruction: "# Images\r\n\r\nWhen you have a - bunch of images in your project its good to put them all in a folder to help - organize your files.\r\n\r\nOnce files are in a folder you need to help the - computer find them by giving both the folder name and the file name. For - example to display the dog.png file in the folder called images we would use:\r\n\r\n<pre> - <img src=\"images/dog.png\" alt=\"dog jumping\" /> </pre>\r\n\r\nThe - folder names comes first follow by the image name. We separate them with a - / .\r\n\r\n# Do This\r\n* Add a folder called pictures\r\n* Move all the image - files into the pictures folder\r\n* Notice how all the pictures no longer - show but the text in the alt attribute does.\r\n* Update the links to the - images so they display again" - CSDU2 - testing something_markdown_instruction: "# Welcome to Web Lab!\r\n\r\nHTML - is a language to express content on the web. HTML stands for Hypertext Markup - Language. This means you are just using special sets of characters to define - the content of a website.\r\n\r\nThe platform you are in is called Web Lab. - It lets you write HTML on one side of the screen and see the results on the - other.\r\n\r\n# Do This\r\n\r\n* Use the Inspector Tool to find where the - HTML code for “Welcome to Web Lab” appears.\r\n* Try to change the text from - \"Welcome to Web Lab\" to something different.\r\n* Try typing something else - on the page and see what happens." - CSDU2 - text properties_markdown_instruction: "# Text Properties\r\n\r\nColor - properties are just one type of property. Another is text properties. Text - properties can be used on an text element (`<p>`, `<h1>` to `<h6>`, `<ul>`, - `<ol>`, `<li>`).\r\n\r\n* text-align - sets the horizontal (side to side) - position of the text within each line\r\n* text-decoration - can add a line - above, below or through the text\r\n\r\nFor more details on text properties - go to <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3 - Schools - Text Decoration</a> or <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3 - Schools - Text Align</a>.\r\n\r\nExample:\r\n\r\nThe below example will make - all the paragraphs be right aligned with a green text color and a line through - all the text.\r\n<pre>\r\np {\r\n\ttext-decoration: line-through;\r\n\tcolor: - green;\r\n text-align: right;\r\n}\r\n</pre>\r\n\r\n# Do This\r\nRead the - W3 resources and figure out how to add the following styles on your page.\r\n\r\n* - Add an underline to all of the smaller headers by using the text-decoration - property.\r\n* Use the “text-align” property on paragraphs to align them on - the page so that each line has the same width." - CSDU2 - title element in head_markdown_instruction: "# Title Element\r\n\r\nOne - piece of metadata that should be included in every web page you create is - the website title. Although you may put an `<h1>` element on your page content - with the title of your website, the computer does not necessarily know that - is the title as there may be multiple `<h1>` tags on your page.\r\n\r\nTo - make clear what the title of a website is for the computer the `<title>` element - is added as metadata in the `<head>` element. This title is not displayed - on the page anywhere as a result of the title tag but the browser may use - it to put a name in the tab of your web browser or when someone searches for - your website.\r\n\r\nExample:\r\n<pre>\r\n<head>\r\n\t<title> - My Website Title</title>\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* - Add a `<title>` element with the name of the web page inside the `<head>` - element" - CSDU2 - Type Anything_markdown_instruction: "# Welcome to Web Lab!\r\n\r\n<img - src=\"https://images.code.org/12ffe6980a25a3664eabe69be487a921-image-1485384422334.jpg\" - style=\"width:700px; float:right\">\r\n\r\nThe platform you are in is called - Web Lab. There are three main parts of the screen in Web Lab.\r\n\r\n\r\n\r\n# - Do This\r\n\r\n* Try typing something in the Code Area\r\n* Press <img src=\"https://images.code.org/6a35d13b10ed2029a9323c9cb555e39e-image-1477681291001.01.12 - PM.png\" style=\"width:100px\"> to see it in the Preview Area!\r\n" - CSDU2 - Unordered Lists_markdown_instruction: "<div style=\"float: right; height: - 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What - are the two types of lists?**</summary>\r\n There are two types of lists in - HTML, ordered and unordered lists.\r\n</details>\r\n<details>\r\n<summary>**What - is an unordered list?**</summary>\r\nAn unordered list is just a set of bulleted - items.\r\n</details>\r\n<details>\r\n<summary>**How do I make an unordered - list?**</summary>\r\n\r\nAn unordered list element has the tag <ul> - . Notice that this is an abbreviation for <strong>U</strong>nordered <strong>L</strong>ist. - Each item on the list is marked by a list item element <li>. Notice - that this is also an abbreviation for <strong>L</strong>ist <strong>I</strong>tem. The - list item element is a child element which means that you don't use it on - its own. It is contained inside a list element. It can be helpful to indent - your <li> tags so its clear that is contained in the <ul> tags.\r\n\r\n<table - border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> - <ul> <br> <li>Red </li> <br> <li>Green </li> - <br> <li>Blue</li> <br> </ul> </pre></td>\r\n<td><img - src=\"https://images.code.org/25d4dfc9b6c448d0da305df66aa1dfb7-image-1473444368948.05.32 - PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is an ordered list?**</summary>\r\nAn ordered list is a set of bulleted items - which are numbered.\r\n</details>\r\n\r\n<details>\r\n<summary>**How do I - make an ordered list?**</summary>\r\n\r\nAn ordered list element has the tag - <ol> . Notice that this is an abbreviation for <strong>O</strong>rdered - <strong>L</strong>ist. Each item on the list is marked by a list item element - <li>. Notice that this is also an abbreviation for <strong>L</strong>ist - <strong>I</strong>tem. The list item element is a child element which means - that you don't use it on its own. It is contained inside a list element. - It can be helpful to indent your <li> tags so its clear that is contained - in the <ol> tag.\r\n\r\n<table border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> - <ol> <br> <li>Step 1 </li> <br> <li>Step 2 </li> - <br> <li>Step 3 </li> <br> </ol> </pre></td>\r\n<td><img - src=\"https://images.code.org/3ef357cfad8ac98a8b30beb229ebcb78-image-1473446360428.39.04 - PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What - is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used - to add structure to the content of a web page. HTML uses tags to specify where - certain structures start and end. These tags are sets of characters not found - in the English language so that the content and structure can be differentiated. - \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA - piece of a website. Marked by a start tag and sometimes closed with an end - tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img - src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" - style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an - HTML tag?**</summary>\r\nThe special set of characters that tells the machine - where the start or end of an HTML element is and what type it is. HTML tags - add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# - Unordered Lists\r\n\r\nNow that you have the basic layout for your Recipe - page you need two lists. An ingredients list and a directions list. Start - by trying to create the ingredients list. All text on your web page should - go inside one type of HTML element (header, list, or paragraph).\r\n\r\n# - Do This\r\nUnder your ingredients header create an unordered list of ingredients." - CSDU2 - Using Your Colors_markdown_instruction: "# Using Your Font\r\n\r\nThere - are other uses for the `<link>` element. The `<link>` element also used to - import your chosen fonts. Since you will be using a font not from the typical - five font families, the browser needs to have a fall back plan in case it - can't load the font you wanted. To do this a back up font name is given.\r\n\r\nFor - Example:\r\n<pre>\r\nfont-family: 'Cabin', sans-serif;\r\n</pre>\r\n\r\nThe - font you want to use is listed first in `''` and then after a comma a back - up font from the 5 normal font families is give.\r\n\r\n# Do This\r\nSet up - your style rules to use your fonts you picked out.\r\n\r\n* Open the <a href=\"https://studio.code.org/s/csd2/stage/10/puzzle/3\" - target=\"_blank\">level where you chose your fonts. </a>\r\n* Open the link - for each of your chosen fonts.\r\n* For each font:\r\n\t* Click <img src=\"https://images.code.org/91720f2ecae50e22d3287a92e988ee35-image-1475609982999.39.20 - PM.png\" style=\"width:130px\"> at the top right of the page.\r\n * That - will pop up a tab at the bottom. Click on the tab to open it. The pop up will - contain the link tag as well as the style rule for your font-family.\r\n <img - src=\"https://images.code.org/1e8712c56112e85157da093349f4b93d-image-1475610080515.40.26 - PM.png\" style=\"width:330px\">\r\n * Copy the link tag in the `<head>` - element of your index.html file.\r\n <img src=\"https://images.code.org/65fe1b66992e199f7c82c1f59c98cac5-image-1475610080516.40.38 - PM.png\" style=\"width:330px\">\r\n * Copy the style property example into - your style.css file for later use. There is a block comment where you can - copy it for keeping. You can determine where it goes on the next level.\r\n <img - src=\"https://images.code.org/da2f5cdec56681e0e8fa161bdf40d7a0-image-1475610080516.40.43 - PM.png\" style=\"width:330px\">" - CSDU2 - Using Your Font_markdown_instruction: "# Using Your Font\r\n\r\nThere - are other uses for the `<link>` element. The `<link>` element is also used - to import your chosen fonts. Since you will be using a font not from the typical - five font families, the browser needs to have a fall back plan in case it - can't load the font you wanted. To do this a back up font name is given.\r\n\r\nFor - Example:\r\n<pre>\r\nfont-family: 'Cabin', sans-serif;\r\n</pre>\r\n\r\nThe - font you want to use is listed first in `''` and then after a comma a back - up font from the 5 normal font families is give.\r\n\r\n# Do This\r\nSet up - your style rules to use your fonts you picked out.\r\n\r\n* Open the <a href=\"https://studio.code.org/s/csd2/stage/10/puzzle/3\" - target=\"_blank\">level where you chose your fonts. </a>\r\n* Open the link - for each of your chosen fonts.\r\n* For each font:\r\n\t* Click <img src=\"https://images.code.org/91720f2ecae50e22d3287a92e988ee35-image-1475609982999.39.20 - PM.png\" style=\"width:130px\"> at the top right of the page.\r\n * That - will pop up a tab at the bottom. Click on the tab to open it. The pop up will - contain the link tag as well as the style rule for your font-family.\r\n <img - src=\"https://images.code.org/1e8712c56112e85157da093349f4b93d-image-1475610080515.40.26 - PM.png\" style=\"width:330px\">\r\n * Copy the link tag in the `<head>` - element of your index.html file.\r\n <img src=\"https://images.code.org/65fe1b66992e199f7c82c1f59c98cac5-image-1475610080516.40.38 - PM.png\" style=\"width:330px\">\r\n * Copy the style property example into - your style.css file for later use. There is a block comment where you can - copy it for keeping. You can determine where it goes on the next level.\r\n <img - src=\"https://images.code.org/da2f5cdec56681e0e8fa161bdf40d7a0-image-1475610080516.40.43 - PM.png\" style=\"width:330px\">" - CSDU2 - Validator Extension_markdown_instruction: "# Favorite Places\r\n\r\nLets - start a new page. This page will be about your favorite places to spend time. - This could be on your block, in your city or even somewhere you like to go - on vacation.\r\n\r\n# Do This\r\n\r\n* Add <!Doctype>, <html>, - <head>, <title> tags to set up your page correctly from the beginning.\r\n* - Use header and list elements to make a page describing your favorite places.\r\n\r\n# - Checklist\r\n* At least 1 header\r\n* At least 1 list\r\n* Description of - each of your favorite places\r\n* Consistency tags used correctly - <!Doctype>, - <html>, <head>, and <title>" - CSDU2 - website comp_markdown_instruction: "# Comparing Websites\r\n\r\n**Prompt:** - Imagine you have a new puppy at home who has chewed through her old leash. - Decide between which of these two websites you would ultimately decide to - buy your puppy’s new leash. Why?\r\n\r\n* Website 1: <a href=\"https://thimbleprojects.org/nickianselmo/84613/\"> - Uncle Joe's Pet Store</a>\r\n* Website 2: <a href=\"http://www.petsmart.com/\"> - PetSmart</a>\r\n\r\nWrite your answer in the box below. When you are done - wait for directions from your teacher before moving on." - CSDU2 - Welcome-to-Weblab_markdown_instruction: "# Welcome to Web Lab!\r\n\r\nStuff\r\n\r\n# - Do This\r\n\r\n* Thing 1\r\n* Thing 2" - CSDU2 Color Blindness_markdown_instruction: "# Color Blindness Filter\r\n\r\n\r\n\r\n" - CSDU2 IP Add Images_markdown_instruction: "# Adding Your Images\r\n\r\nWith - images and attribution information in hand, it's time to spruce up your new - page.\r\n\r\n# Do This\r\n\r\nUpload your images to Web Lab and, using `<img>` - tags, add them where you'd like them to go. For each image:\r\n\r\n* Add - a descriptive `alt` attribute\r\n* Add attribution underneath the image, including\r\n\t* - Name or screenname of author (if available)\r\n * Title of image (if available)\r\n * - Link to original site (you can make the whole attribution text a link)\r\n * - License image was published under either in text (eg CC-BY) or using a badge - from the [Creative Commons website](https://creativecommons.org/about/downloads/).\r\n\r\nFor - example\r\n\r\n![Sad Dog](https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Longhaired_Dachshund_portrait.jpg/629px-Longhaired_Dachshund_portrait.jpg)\r\n\r\n[Longhaired - Dachshund portrait by Flickr user Soggydan](https://commons.wikimedia.org/wiki/File:Longhaired_Dachshund_portrait.jpg) - ![CC-BY](https://licensebuttons.net/l/by/3.0/88x31.png)" - CSDu2 IP CC Search_markdown_instruction: "# Finding Media\r\n\r\nNow that your - content is in place, it's time to find some good images and other media to - help make your page look better, and potentially strengthen your argument.\r\n\r\nBecuase - the Creative Commons provides such a simple way to know what media you can - and can't use, a lot of search engines have integrated Creative Commons filtering - to ensure they only give you results you can use. The Creative Commons search - page (linked below) is a compilation of CC friendly search engines that you - can use to find media for your page.\r\n\r\n# Do This\r\n\r\nUsing the Creative - Commons Search page, find a handful of pictures that you'll want to use on - your web pages. By default the search is set to the most restrictive settings. - Next to the the text **I want something that I can...** you can uncheck _use - for commercial purposes_. You can also uncheck _modify, adapt, or build upon_ - as long as you don't plan on modifying the images you find (such as adding - text, cropping, or otherwise editing).\r\n\r\n<img src=\"https://images.code.org/41b70c9ad055b42ed9d9749be2e1fdb2-image-1473978771297.31.58.png\" - style=\"max-width: 800px\"/>\r\n\r\nFor each image you plan on using:\r\n\r\n* - Download a copy to your computer (so that you can upload it to your website - in the next step)\r\n* Write down all information you can find about the author, - such as\r\n\t* Name, or screenname\r\n * URL of website (not URL of the - image itself)\r\n * Title of image\r\n" - CSDU2 IP Final Touches_markdown_instruction: "# Finishing Touches\r\n\r\nYou - have the content, you have pretty images, now put the finishing touches on - your page.\r\n\r\n# Do This\r\n\r\nMake sure you page meets the checklist - below then make this page your own and get it ready for publishing. Specifically, - consider the following:\r\n\r\n* **Styling:** Add new style rules to your - CSS file and give your page some flair.\r\n* **Organization**: Does the structure - of your content make it easy for users to find the information you want them - to see?\r\n* **Publishing Review**: Use your Web Development Practices to - review your site for publishing readiness.\r\n\r\nIf you made improvements - to your home page ake sure to take a screenshot of your home page and save - it somewhere on your computer so you can find it later (*Need help with how - to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)\r\n\r\n## Checklist\r\n\r\n* There is a separate HTML file for your - cause site with a descriptive name\r\n* The web page has a title, viewpoint, - and description\r\n* The web page is linked to your stylesheet for your website. - \r\n* A first level header with a catchy title for your page\r\n* A second - level header for each separate argument to support your cause\r\n* Paragraphs - of content under each second level header\r\n* A link to the appropriate site - where you need to cite outside sources\r\n* All images you are using are uploaded - into your web lab project\r\n* All images have a descriptive alt attribute\r\n* - All images have attribution underneath the image, including:\r\n\t* Name or - screenname of author (if available)\r\n\t* Title of image (if available)\r\n\t* - Link to original site (you can make the whole attribution text a link)\r\n\t* - License image was published under either in text (eg CC-BY) or using a badge - from the Creative Commons website." - CSDU2 IP Portfolio_markdown_instruction: "# Cause Page\r\n\r\nLet's start - by setting up the page you will be using to create your cause page.\r\n\r\n# - Do This\r\n\r\n* Add a new HTML file to your project for your cause page.\r\n* - Add a title, viewport, and description\r\n* Link the style sheet for your - website to the cause page" - CSDU2 IP Research Content_markdown_instruction: "# Adding Your Content\r\n\r\nYou - should now have found a handful of website that you can use to help make your - case for the cause you've chosen. If not, keep on researching! Otherwise - it's time to start structuring the content of your page.\r\n\r\n## Hyperlinks - to Websites\r\n\r\nEarlier in the unit you learned how to use the `<a>` element - to link between pages on your website. You can also use this element to link - to other websites. To do this the `href` attribute needs to contain the full - URL of the site you wish to link to. For example if I wanted to link to the - Code.org website in my project I would use the following code:\r\n\r\n| Code - | Output|\r\n| ---- | ----- |\r\n| <pre> My favorite coding site is <a - href=\"https://code.org/\" > Code.org </a > ! </pre> | My favorite - coding site is <a href=\"https://code.org/\"> Code.org </a> ! |\r\n\r\n# Do - This\r\n\r\nThe specifics of your page layout will depend on your topics and - goals, but in general you should create the following structure\r\n\r\n* A - first level header with a catchy title for your page\r\n* A second level header - for each separate argument to support your cause\r\n* Paragraphs of content - under each second level header\r\n* A link to the appropriate site where you - need to cite outside sources\r\n* Don't worry about styling right now you - are just getting the content\r\n\r\nAttribution links can take many forms, - for example\r\n\r\n* According to the [ASPCA](http://www.aspca.org/animal-homelessness) - only 10% of animals entering shelters have been spayed or neutered.\r\n* Kill - shelters euthanize 2.7 million animals per year (Source: [ASPCA](http://www.aspca.org/animal-homelessness))." - CSDU2 Make Your Logo_markdown_instruction: "# Create a Logo\r\n\r\nYou will - also need a logo for your brand. Get creative and create something that really - is you. Remember you probably want to use your colors and fonts as you design - your logo. If the tools does not have your exact font find something close.\r\n\r\n# - Do This\r\n\r\n* Use the tool linked below to **create a logo for your brand**\r\n* - **Hint:** The color picker on this site uses a different encoding called hex. - Your color picker gave you those values as well. They are the first encoding - with numbers and letters in it. They start with the # symbol.\r\n* **Save - that logo somewhere on your computer** so you can use it later." - CSDU2 Pick Your Colors_markdown_instruction: "# Pick Your Colors\r\n\r\nAnother - component of creating your brand is picking the colors for your brand. These - should be colors that stand out but also look good together. You want your - users to enjoy looking at your page. You will want to keep your set of colors - small so that the combination is memorable. A set of 4 main colors or less - for your page will be a good place to start. Different shades of those colors - can be used as well.\r\n\r\n# Do This\r\n\r\n* Go to the <a href=\"http://paletton.com/\"> - Paletton </a> website.\r\n* Decide how many primary colors you want for your - brand.\r\n* Set the number of primary colors useing these buttons <img src=\"https://images.code.org/669d2fe15825ea753f804ebb690aab95-image-1475594935612.28.22 - AM.png\" style=\"width:150px\">. The number of dots shows the number of primary - colors.\r\n* Play with dragging around the dots to find the primary colors - you like. The one that takes up the biggest box on the right will be your - primary color.\r\n\r\n<img src=\"https://images.code.org/b5811cea1acf1bf281ab73661db4b7cb-image-1475595405528.gif\" - style=\"width:400px\">\r\n\r\n* Once you have picked your colors click <img - src=\"https://images.code.org/3d30144dbe0cadc9bd083f1967e66b20-image-1475595929655.44.22 - AM.png\" style=\"width:100px\"> which is below the color boxes on the right.\r\n\r\n* - A list like the one below will show up click on **\"as Text\"** below the - Color List header.\r\n\r\n<img src=\"https://images.code.org/d39c3112948cd860148f2228f5b1c45a-image-1475595929655.44.43 - AM.png\" style=\"width:150px\">\r\n\r\n* A page that looks like the one below - will open. **Copy the text from this page into the box below.** This will - give you the RGB values for the colors as well as hex codes which you may - want on the next level.\r\n\r\n<img src=\"https://images.code.org/731d2612a1ccb47a4db8085abe910266-image-1475596945480.02.14 - PM.png\" style=\"width:400px\">" - CSDU2 Pick Your Fonts_markdown_instruction: "# Pick Your Fonts\r\n\r\nPart - of any good brand is having a specific font that is associated with the brand. - Most brands keep to a small set of fonts they use. These fonts however are - unique to the brand and will need to adventure beyond the 5 font families - you have been using.\r\n\r\nPicking a small set of fonts for your website - is also a good practice as when you adventure beyond the 5 font families into - other fonts the browser has to download the font file. Downloading files is - something that can add time to how long it takes to your load your website. - To prevent it from taking too long it is good to stay with just 2 different - fonts.\r\n\r\n# Do This\r\n\r\n* Go to the <a href=\"http://fontpair.co/\" - target=\"_blank\">Font Pair </a> website. The website lists sets of heading - and body font pairs that work nicely together. Each pair is listed like the - image below.\r\n\r\n<img src=\"https://images.code.org/7f34c1986c16fbb50e2acc4f72923b60-image-1475593488897.03.00 - AM.png\" style=\"width:400px\">\r\n\r\n* Pick a font set you like.\r\n* Copy - the heading and body font names.\r\n\r\n<img src=\"https://images.code.org/879b3b41486f728fbb8840469277704e-image-1475594076521.png\" - style=\"width:400px\">\r\n\r\n* Click the link to each font. This should take - you to a google fonts page.\r\n\r\n<img src=\"https://images.code.org/6163e64372d8825a7a8ed6a943cb3701-image-1475594076522.png\" - style=\"width:400px\">\r\n\r\n* Copy the URL for the google fonts page into - the box below so they will be saved for later. An example is below.\r\n\r\n<img - src=\"https://images.code.org/92e66b9ffae4d836175d63d87ab5586c-image-1475594389964.17.58 - AM.png\" style=\"width:400px\">" - CSDU2 RGB Color Matching_markdown_instruction: "# RGB Colors\r\n\r\nAll colors, - whether they have names or not, can be described by the level of red, green, - and blue light it takes to make them. This is called an RGB value (short - for Red-Green-Blue). You can use the widget on your left to try out different - RGB values and see what colors they make.\r\n\r\n* **Click \"Run\" to start - the widget on the left,** and use the sliders to adjust the levels of red, - green, and blue light.\r\n* For each of the colors below, match it to its - RGB value. Type your response in the box below.\r\n\r\nA) red: 216, green: - 191, blue: 216 - rgb(216,191,216)\r\n\r\nB) red: 255, green: 239, blue: 213 - - rgb(255,239,213)\r\n\r\nC) red: 255, green: 140, blue: 105 - rgb(255,140,105)\r\n\r\nD) - red: 123, green: 104, blue: 238 - rgb(123,104,238)\r\n\r\nE) red: 107, green: - 142, blue: 35 - rgb(107,142,35)\r\n" - CSDU4 - AppLab - 1_markdown_instruction: "# Documentation\r\nAs we move forward - you are going to see more and more (and more!) commands added to the toolbox. What - happens if you see a command and don't understand it, or you forget how it - works? Don't worry, this happens to professional programmers all the time! - No one actually memorizes long lists of commands. Most programming environments - have ways to quickly look up documentation about the commands of the language - you're using. **Good news: App Lab has documentation too!**\r\n\r\n![](https://images.code.org/3fe10e1b65edb37306099098161be001-image-1441990727053.gif)\r\n\r\nWhen - you **hover your mouse over a command** in the block palette a bubble pops - up with a quick reminder of what a function does, and what its parameters - are. If you click \"See examples\", you will be taken to more detailed documentation - of the command which includes **code examples** that you can even copy and - paste.\r\n" - CSDU4 - AppLab - 2_markdown_instruction: "# Assigning User Input to Variables\r\n<img - src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" - style=\"width: 350px; float:right\">\r\nThe `promptNum` command appears in - the variables toolbox because it's typically used as a way to get a value - from the user that you want to hold on to while the program runs.\r\n\r\n`promptNum` - is similar to `randomNumber` in that it is a function whose return value *evaluates - to a number*. The difference here is that `promptNum` pops up an input dialog - box and waits for the user to type a number. Once they do and hit \"OK\" - the number they typed is returned and we can store it in a variable to use - in our programs." - CSDU4 - AppLab - 3_markdown_instruction: "# Debug Console: Variable Values\r\n\r\nUp - until now, if we wanted to find out the value of a variable at some point - in the execution of a program, we've used `console.log`. That is still going - to be a great strategy but **the Debug Console can do even more for us!**\r\n\r\n**Check - this out:** We can check the value of a variable in real time (as our program - executes) by typing its name into the prompt within the Debug Console and - hitting \"enter\". **This is another powerful tool for debugging your programs.** - \r\n\r\n![](https://images.code.org/7e7ff7aa041814cfcd69a1c9a028c439-image-1446826780896.gif)" - CSDU4 - AppLab - 4_markdown_instruction: "# Debug Commands\r\n\r\n<img src=\"https://images.code.org/c6322845b96b70c9083a6c62736048e5-image-1446739268136.00.34 - AM.png\" style=\"width: 200px; float: right\">\r\n\r\nCheck out the new **Debug - Commands toolbox** that has appeared next to the Debug Console! These powerful - tools allow us to **pause a program at a certain point** while it’s running - and then execute lines one at a time. \r\n\r\nUsing these tools we can investigate - the state of variables and other elements of the program at any point, mid-execution. - This makes it much easier to see what’s happening while the programming is - actually running!\r\n\r\nIn order to use the debug commands, you first have - to indicate which line you want the program to pause at. This is called adding - a “breakpoint” (see animation below).\r\n\r\n# Do This:\r\n\r\n* **Add a breakpoint** - on the line where the `while` loop starts. (**Just click the line number.**)\r\n* - **Use the <img src=\"https://images.code.org/bd8f1a67242e64e6b3740eac79f881e8-image-1446748421345.33.09 - PM.png\" style=\"width: 75px\"> button** to execute each line one at a time.\r\n* - **NOTE:** If you hit <img src=\"https://images.code.org/6c4712da58e32dae2d04c52d9964fca9-image-1446741498097.37.48 - AM.png\" style=\"width: 75px\"> it will \"continue\" executing the program - normally, unless of course it hits another breakpoint. \r\n\r\n![](https://images.code.org/68f8e185914c8cc127aa9573ae37f687-image-1446835628580.gif)" - CSDU4 - Design Mode - 1_markdown_instruction: "<img src='https://images.code.org/3fad83213ae72073251c4d5abc1f048a-image-1444060521578.png' - style='float: right; width: 250px'> A new group of commands has been added - to the toolbox called **UI Controls** (User Interface Controls) which are - commands that let you interact with, and respond to, the user of your app. - To keep it simple, we'll start with just two commands: \r\n* `onEvent` which - lets you run a function in response to some event occuring (such as a button - click).\r\n* `button` which puts a button on the screen." - CSDU4 - Design Mode - 10_markdown_instruction: "# New Elements and Events: - Moving Buttons with Events\r\n\r\nOver the next few exerises we will be exploring - several new user interface elements and event types. Your code will be pulled - forward as you progress through the exercises.\r\n\r\n**Moving Past Turtle:** - We've been using buttons to move the turtle. For example, in the program - you're about to see a button that moves the turtle to a random location on - the screen. We're going to alter this program ** so that the button itself - moves every time you click it**.\r\n\r\n**Notice** that this means that event - handlers can affect the elements they are attached to, not just other elements! This - is an interesting technique for apps. Now you're going to try it...\r\n\r\n# - Do This:\r\n* **Change the ID** of the button to something descriptive and - meaningful.\r\n* **Modify** your event handler so that **it no longer moves - the turtle** but instead sets the position of the button itself to a random - location on the screen.\r\n\t* TIP: add `setPosition` to the event handler, - and just move the `randomNumber` calls from the turtle.\r\n\t* Recall the - screen is **320 by 450 pixels**.\r\n\r\n**Before** | **After**\r\n---|---\r\n![](https://images.code.org/a4172e43b6707a3170e4eaf54a2a7b1d-image-1444335577799.gif) - | <img src=\"https://images.code.org/4e17b077bd8fbdd43f960d26bb3d252d-image-1444335766972.gif\" - style=\"width: 150px\">\r\n\r\n\r\n" - CSDU4 - Design Mode - 11_markdown_instruction: "# New Elements and Events: - New Event Types\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 - AM.png\" style=\"float: right\">\r\n\r\n**New Events**: You may have noticed - that the `onEvent` block has a pull-down menu for the event **type** (see - right).\r\n\r\n# Do This:\r\n\r\n* **Experiment** with **each of the different - types of mouse events** by selecting from the list. You can also read about - them in the documentation.\r\n\t* click\r\n * mousemove\r\n * movedown\r\n * - mouseup\r\n * mouseover\r\n* **Choose** the mouse event type you like most - and change your event handler to use it.\r\n* **Note:** There are some events - that capture keystroke events. These are interesting, but they do not work - easily with buttons. We'll stick to mouse events for now, and get to keys - later." - CSDU4 - Design Mode - 12_markdown_instruction: "# New Elements and Events: - Text Labels\r\n<img src=\"https://images.code.org/20d50fd324908fc48633e1325cc37603-image-1444662791509.png\" - style=\"float: right\">\r\nThe UI controls toolbox contains an element called - `textLabel`. A text label is what it sounds like: plain text that you can - put in your app. Even though it's just plain text you can still move and - resize it using `setPosition`, and you can attach event handlers to it as - well.\r\n\r\n**NOTE:** resizing a text label does not change the font size - of the text. We'll learn how to do that later. " - CSDU4 - Design Mode - 13_markdown_instruction: "# New Elements and Events: - Images\r\n\r\n<img src=\"https://images.code.org/a84297658be45dc78bc401d387d10436-image-1444663322356.21.25 - AM.png\" style=\"float: right; width: 120px\">\r\nImages make applications - more visually pleasing and interactive. You can add images to your application - using the `image` command. For now, just add an `image` element to your app - (the default image link is the Code.org logo) and don't worry about choosing - a unique image just yet. We'll do that in the very next exercise!" - CSDU4 - Design Mode - 15_markdown_instruction: "# Design Mode\r\n\r\nWelcome - to Design Mode in AppLab! This will allow you to easily create a digital version - of your sketched wireframes by adding UI elements from the toolbox and and - styling them the way you want!\r\n\r\n**Goal:** Add a large red button to - your app using Design Mode.\r\n\r\n# Do This:\r\n\r\n* **Find <img src=\"https://images.code.org/278f146396c80c97d0b5d73f24d48aec-image-1444335461720.png\"> - in the Design Toolbox** and drag out a button and resize it. \r\n\r\n* **Change - the button text** to say \"Click Me\".\r\n\r\n* **Set the color for the button** - to be red.\r\n\r\n<img src=\"https://images.code.org/4cab6a5233cf07df0d8e312932762012-image-1444314797615.gif\" - style=\"width: 500px; float: middle\">\r\n" - CSDU4 - Design Mode - 16_markdown_instruction: "# Activate Your Button\r\nIn - the last lesson you focused on laying out a page of your app in Design Mode. - This is a great, quick way to get the visual side of an app figured out, but - it's not very functional. If you click any of the buttons you added, nothing - happens. Now you're work towards adding some basic functionality by making - the buttons in your app actually _do_ something!\r\n\r\n**Goal:** Add code - using Design Mode to make the button respond to a click.\r\n\r\n# Do This\r\nYour - starter app has two elements, a _label_ with the id `titleLabel` and a _button_ - with the id `changeTitleButton`. To start with, you're going to make the - button log a message to the console when it's clicked.\r\n\r\n* In Design - Mode, **click on the provided button to edit its properties**\r\n* Click on - the **Events** tab\r\n* Insert an `onEvent` from Design Mode by clicking **Insert - and show code** under the **Events Tab**.\r\n* Take a look at the block that - was added to the **Code Mode** tab.\r\n* Run the program, click your button - and **look for the output in the *Debug Console* **below the workspace instead - of the app window. We will discuss the *Debug Console* on the next level." - CSDU4 - Design Mode - 17_markdown_instruction: "# Updating IDs and Debugging - with Console Log\r\n\r\nHere we have a couple buttons with event handlers - and `console.log` statements, but they are all switched around!\r\n\r\nWe - should have given the buttons better ID names so we could tell the difference - based on the ID. **Can you update the ID names and `console.log` messages - to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** - of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to - Code Mode and notice that the **ID pulldowns have been updated to include - the new IDs**. (You still need to select the correct ID from the pulldown - menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" - CSDU4 - Design Mode - 18_markdown_instruction: "# Layering and Deleting\r\n<img - src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" - style=\"width: 200px; float: right\">User interface elements can overlap one - another, so you'll want the ability to change the order or **depth** at which - each one is rendered. \r\n\r\nIf you **scroll to the bottom of the Properties - tab** you'll find buttons which allow you to easily **delete or change the - depth** of an element.\r\n* **Delete an Element** by selecting it (clicking - on it) in the design view and then clicking **Delete** in the properties tab.\r\n* - **Change the depth** of elements by using the double or single arrows.\r\n - * Click the double arrow to send all the way to front or back.\r\n * Click - the single arrow to move up or down one layer.\r\n \r\n# Do This:\r\n\r\nUse - the **delete** and **depth** tools to **create the \"After\" image**\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th - style=\"text-align:center\">Before</th>\r\n <th style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td - align=center><img src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" - style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img - src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" - style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" - CSDU4 - Design Mode - 19_markdown_instruction: "# Second Screen\r\n\r\nMost - apps have more than one screen or page that each have different contents. - With Design Mode you can quickly add new screen to your app.\r\n\r\n# Do This\r\n\r\nYou're - going to add a second screen to your app and add a button to that screen. - Make sure you're using good IDs!\r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 - PM.png\" style=\"width: 50px\"> from the Design Toolbox into your app. You - now have two screens!\r\n* Using Design Mode create a button in your new screen. <img - src=\"https://images.code.org/bbf464e2fc94bacba39407d6842f2336-image-1478300698068.04.35 - PM.png\" style=\"width: 150px\"> \r\n* Set the IDs for your screens and buttons - to something meaningful, for example _\"homeScreen\"_, _\"detailsScreen\"_, - _\"homeButton\"_, and _\"detailsButton\"_\r\n\r\n\r\nYou can always use the - screen dropdown menu at the top of the app window to switch between your screens - <img src=\"https://images.code.org/404e0b3f520a413c8a5e62e74b70bb19-image-1478300388689.58.59 - PM.png\" style=\"width: 150px\"> \r\n\r\n" - CSDU4 - Design Mode - 2_markdown_instruction: "# Buttons and Unique IDs\r\nYou - may have noticed that the button command has two parameters: `button(id, text)`. The - `text` is the text that actually shows up on the button display, and the `id` - (we'll typically write **ID**) is a **unique identifier** for that element - in the app.\r\n\r\nEach element that appears in the app must have a **unique - ID**. In fact, if you try to run a program that has two buttons with same - ID you will get a warning message in the console. Watch:\r\n<img src=\"https://images.code.org/47ec46e0563f63641cc10ef152e9f86e-image-1444074330713.gif\" - style=\"border: solid 1px black; width:500px\">\r\n\r\nNotice that even though - the text on the buttons was different, the IDs were the same, which caused - the error message to show up. To get rid of that error message you will have - to change the ID of the button from the default `id` to something else.\r\n\r\n**Error - messages happen to everyone and they are helpful!**: getting an error or warning - message when you run your program is *not a big deal*. Programmers actually - rely on error messages to tell them where and how to fix their code.\r\nSometimes - error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers - to an id (id) which already exists.` But a warning like this contains helpful - information and clues such as the line the error occured on, or some word - or command it didn't recognize. " - CSDU4 - Design Mode - 20_markdown_instruction: "# Switching Screens\r\n\r\nYou - can set which screen is showing in your app with the `setScreen()` command. - If you're working in blocks you can select which screen you want to switch - to from a dropdown.\r\n\r\n![](https://images.code.org/615fae136488e1e6d1349e4383388e08-image-1478303858022.13.25 - PM.png)\r\n\r\n# Do This\r\n\r\nYou'll use an `onEvent()` block with `setScreen()` - to make the two buttons in your app switch between the two screen.\r\n\r\n* - Drag out two `onEvent()` blocks\r\n* Set the IDs for your `onEvent()` blocks - for each of your two buttons\r\n* Place a `setScreen` block inside each of - the `onEvent` blocks.\r\n* Choose the appropriate screen from the dropdown - of each `setScreen` block.\r\n* Test out your app to make sure your buttons - let you switch back and forth between the two screens" - CSDU4 - Design Mode - 21_markdown_instruction: "# Adding Images\r\nSometimes - the functionality you want to represent in your prototype is too complicated - to do with just the default buttons and fields. If you want to mock up more - advanced interfaces (like a map), the easiest way to do it is with an image\r\n\r\n# - Do This\r\n* Find and download an image of a map you like\r\n* Drag an image - element into your app ![](https://images.code.org/cda02ffe3acc869822a551f5cdbf8606-image-1444667846363.37.14 - AM.png)\r\n* Choose your image ![](https://images.code.org/e5b9571ae54af60a3ae597b787e741ea-image-1444667688762.34.42 - AM.png)\r\n\t* **URLs** can be added directly into the \"picture\" field. \r\n\t* - **Upload images** by clicking \"Choose\".\r\n\t* **Note:** You can always - see all the files you've uploaded by clicking the gear at the top of the - toolbox. ![](https://images.code.org/53b405b771bc11bf5d24c84c878c80dd-image-1444668067826.35.10 - AM.png)\r\n* Make sure to give your image a good ID!\r\n\r\n" - CSDU4 - Design Mode - 22_markdown_instruction: "A new command in the toolbox: - `playsound`! Read the documentation about how to add sounds." - CSDU4 - Design Mode - 23_markdown_instruction: "# Changing Elements on Screen - \r\n\r\nThere's another way to display text in your app besides `console.log` - and `write`. \r\n\r\nThere is a command called `setText` which will **change - the text of a component on screen** given its id. This is a very powerful - technique and one that you will use a lot. Here's what it looks like in action....\r\n\r\n<img - src=\"https://images.code.org/3e5dd320801720d5c62a49146d9ee3d2-image-1446056202170.gif\" - style=\"width: 500px\">\r\n\r\nLet's do a **very simple** example of using - `setText`." - CSDU4 - Design Mode - 24_markdown_instruction: "# Text Input Elements\r\n\r\n<img - src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 - PM.png\" style=\"width: 100px; float:right;\">\r\n\r\nSetting the text of - an element is all well and good, but things are going to get really interesting - when we can get text that a user has entered and do something with it.\r\n\r\n\r\n\r\n# - Do This:\r\n\r\n* **Add two text input elements to this program**, one for - the name and one for the age of the user.\r\n* **Give your text input elements - descriptive and meaningful IDs**.\r\n* **In Design Mode** set their default - text to prompt the user for their name and age.\r\n* **Compare your app to - the example below**.\r\n\r\n<img src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 - PM.png\" style=\"float:left; width:200px;\">\r\n<br>" - CSDU4 - Design Mode - 25_markdown_instruction: "# Getting Text Input\r\n\r\nAs - we saw a user can now type inside of a text input whenever they want, **but - now we'll need a way to access that text**. In order to do that you'll need - to use the `getText` command, which you can now find in the **UI Controls** - tab.\r\n\r\n<img src=\"https://images.code.org/0c6774f2b6d33f8107ec2936102b1a10-image-1445533677192.58.24 - PM.png\" style=\"width: 150px;\">\r\n\r\nYou can use a `getText` command just - like a string within a `console.log` or `write` command. Just like with `setText` - you will refer to the UI element by its ID.\r\n\r\n![](https://images.code.org/c17e419301d0cfeebf7f0ccee13e415f-image-1445892504376.47.54 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **Read the documentation ** for `getText`.\r\n* - **Add an event handler to the Submit button** that fires when your button - is clicked.\r\n* **Inside the event handler** place code that will **log the - name your user input to the console**.\r\n\r\n" - CSDU4 - Design Mode - 26_markdown_instruction: "# Saving Text Input in Variables\r\n\r\nOften - we want to save the information we pull in from the user for later use in - our program. The best way to do this is to save it in a variable.\r\n\r\n# - Do This:\r\n\r\n* **Create two variables inside your event handler** to store - the **age** and **name** of the user.\r\n* **Use `getText()` to update the - values** stored in each of these variables.\r\n* **Change your `console.log` - statements to use your variable instead of `getText`**.\r\n\r\n![](https://images.code.org/ca45dcb01ae2d1956ed2f87efeda0264-image-1445976691215.11.13 - PM.png)" - CSDU4 - Design Mode - 27_markdown_instruction: "# Generating Text Output\r\n\r\nSo - far we've been outputting our messages to the console, but now we'd like - to display them in the app. In order to do so we're going to be using a new - UI element called a **textArea**. You can use `setText()` with a **textArea** - just like you would with a **textLabel**.\r\n\r\n![](https://images.code.org/45e6b6cdb1ca87f53cf1d6bba97cb812-image-1445977693641.24.43 - PM.png)\r\n\r\nIf we want to combine user input with default text we can do - so with **string concatenation** (that's just a fancy phrase for combining - strings of text). Together with a **textArea** we can use this ability to - compose longer messages based on user input.\r\n\r\n# Do This:\r\n\r\n* **Add - a textArea** to your app and give it a descriptive and meaningful ID.\r\n* - **Create a variable inside your event handler** called `userMessage` to hold - the full message that will be sent to the user.\r\n* **Use string concatenation** - to compose a message from the user input.\r\n\t* eg `var userMessage = \"Welcome - \" + userName + \"!\";`\r\n* **Use `setText()`** to place your `userMessage` - inside the `textArea` you created.\r\n\r\n<img src=\"https://images.code.org/193af3e0c993dbf0b7af9c571ec5f56d-image-1445977696957.27.08 - PM.png\", style=\"width:250px;\">" - CSDU4 - Design Mode - 28_markdown_instruction: "# Introducing the *change* - Event\r\nUp until now you've been using the click of a button to trigger - getting the text from an input or text area.\r\n\r\nYou can use a new event - type to get this behavior: The __'change' event__ is triggered when the - user hits 'enter' in a text input after typing.\r\n\r\n\r\n<img src=\"https://images.code.org/7d1725b236471f8e2a0efed5870660da-image-1446071579670.32.36.png\" - style=\"width:350px;\">\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/f8f1f7ae18acbc570a367886bcd6ca88-image-1445976541574.gif\" - style=\"width:250px;\">\r\n- A text input has been created for you that asks - for a user's name, as well as a label for the response\r\n- Attach a \"change\" - event handler to the text input.\r\n- When the \"change\" event triggers, - set the text of \"nameResponse\" to the user's input.\r\n" - CSDU4 - Design Mode - 29_markdown_instruction: "# Dropdown\r\n\r\nOn the last - level we used `promptNum` to get the user's guess. However, we had no way - to limit them to the numbers we wanted. They could have typed 11 even though - we told them not to. A better way to get input with a limited set of options - is the dropdown. The <img src=\"https://images.code.org/3b21b4288a2a155d1e9a3c2cf3a5b09b-image-1446229368079.28.23 - PM.png\" style=\"width: 75px\"> is in your Design Mode Toolbox. You can control - the list of options users can choose and then use `getText` to get the chosen - number.\r\n\r\nWe are going to need an event handler in order to do this. - The event handler will detect when the user has changed the value of the dropdown. - \r\n\r\n# Do This:\r\n\r\n* **Add a dropdown** for their guess instead of - `promptNum`. Make sure to give it a good ID.\r\n\r\n<img src=\"https://images.code.org/fea164f6e53d1ce0c50981565e066d4c-image-1446229598357.gif\" - style=\"width: 350px\">\r\n\r\n* Under properties **find the Options** and - change it to the **numbers 1 to 10**\r\n\r\n<img src=\"https://images.code.org/0cfecbcdcfb95fc30876155ec6a3a021-image-1446229593687.gif\" - style=\"width: 250px\">\r\n\r\n* Add an event handler to detect the `change` - event on your dropdown.<br><br>\r\n<img src=\"https://images.code.org/48cffda5b7ff3a446116a39b4dbcbe8c-image-1446232308751.gif\" - style=\"width: 150px; float: right\">\r\n* Move your `if` statement inside - the event handler so it will check each time the dropdown is changed.<br><br>\r\n* - When the dropdown is changed **use `getText` to find out the user's guess**. - Save the guess using a variable. **Don't forget about scope!**<br><br>\r\n* - Test your app -- it should work like the demo." - CSDU4 - Design Mode - 3_markdown_instruction: "# How Do Events Work?\r\nEvent-driven - apps are made up of elements that can trigger events (such as buttons) and - pieces of code called **event handlers**. Event handlers are commands that - \"watch\" for certain events to occur in your program, and then run some function - when an event occurs.\r\n\r\nWhen you first create an event handler from Design - Mode, puts a `console.log()` block inside to help you test the event, but - you can put just about any code you want inside the event hander.\r\n\r\n# - Do This\r\n\r\nThe toolbox has a new block called `setText` which allows you - to change the text of an element on the screen. You're going to modify the - button event handler so that it changes the title text when clicked.\r\n\r\n* - Drag out a `setText()` block to the _inside_ of the `onEvent()` callback function - (where the `console.log()` block currently is)\r\n* From the block's dropdown, - select \"titleLabel\" (the id of the element you want to change)\r\n* In the - block's second input, replace \"text\" with a new title for the app\r\n* - Run your program and click the button to see it work" - CSDU4 - Design Mode - 30_markdown_instruction: "# Using `if` to Display Images\r\n\r\nWe - are going to set up a dice game. We want to show a picture of a single die - for each random number generated 1 to 6. We've already set up the screen - in Design Mode, with a button to generate the roll and an image to show a - picture of the die.\r\n\r\n**Note:** The flowchart for the desired behavior - is below.\r\n\r\n# Do This:\r\n\r\n* Add an event handler for the Roll! button - so that when the button is clicked it generates a random number from 1 to - 6. \r\n\r\n* Add conditionals (`if`, `else if`, and `else`) to change the - picture of the image (ID: `dice_image`) to display the correct side of the - die depending on the random number generated. You will need to use <img src=\"https://images.code.org/89f2c13ef4ead590475c863a087597f8-image-1446535826599.30.16.png\" - style=\"width:150px\"> with the URLs below to set the images for the die.\r\n\t* - <img src=\"https://code.org/images/dice/1.png\" style=\"width: 50px\"> Dice - 1 Image URL - https://code.org/images/dice/1.png\r\n * <img src=\"https://code.org/images/dice/2.png\" - style=\"width: 50px\"> Dice 2 Image URL - https://code.org/images/dice/2.png\r\n * - <img src=\"https://code.org/images/dice/3.png\" style=\"width: 50px\"> Dice - 3 Image URL - https://code.org/images/dice/3.png\r\n * <img src=\"https://code.org/images/dice/4.png\" - style=\"width: 50px\"> Dice 4 Image URL - https://code.org/images/dice/4.png\r\n * - <img src=\"https://code.org/images/dice/5.png\" style=\"width: 50px\"> Dice - 5 Image URL - https://code.org/images/dice/5.png\r\n * <img src=\"https://code.org/images/dice/6.png\" - style=\"width: 50px\"> Dice 6 Image URL - https://code.org/images/dice/6.png\r\n\r\n<img - src=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" - target=\"_blank\">Open diagram in a new tab</a>\r\n" - CSDU4 - Design Mode - 31_markdown_instruction: "# *keypress*\r\n\r\nIf we want - to add keyboard input to our apps we'll need to learn about how key events - work in App Lab. To start let's take a closer look at the `onEvent` block. - We already know that event handlers call a function. What we'll see now is - that they also **pass a parameter**. The default name for this parameter is - simply `event` but you can change it to be anything you like. \r\n\r\nThe - `event` parameter is a more complex kind of variable (called an \"Object\") - that we'll learn more about later. For now just know that for both mouse - and keyboard events, the event parameter passes more information about the - event. In the case of key events **you can find out the key(s) that were actually - pressed by using `event.key`**.\r\n\r\n# Do This:\r\n\r\n* Drag out an `onEvent` - block.\r\n* Change the ID to `screen1` and the event type to `keypress`. \r\n\r\n<img - src=\"https://images.code.org/537b5bbef3db62c90155528e6753a00a-image-1447175732347.gif\" - style=\"width: 450px\">\r\n\r\n* Once you hit **Run**, **click on the screen - so that the keystrokes will register**.\r\n* **Type different combinations - of keys** and check out the results in the console. Does every key combination - print to the console? Some keys to try:\r\n * Letter keys\r\n * Number - keys\r\n * Shift key\r\n * Hold shift and letter\r\n * Delete key\r\n * - Left and right arrow keys\r\n * Press and hold a key" - CSDU4 - Design Mode - 32_markdown_instruction: "# Using *keyup* and *keydown*\r\n\r\nOn - the last level, we played with the `keypress` event. Let's take a look at - some of the other key events. \r\n\r\nYou are going to get the chance to play - with `keyup` and `keydown` in this level. **Pay attention to the different - values of `event.key` for `keydown` and `keypress`. **\r\n\r\n# Do This:\r\n\r\n* - Switch to the event type to `keydown` or `keyup`. \r\n\r\n<img src=\"https://images.code.org/fa91b1a9e3240eb65ff75b381e76ce69-image-1447213909054.gif\" - style=\"width: 350px\">\r\n\r\n* Try out the event.\r\n\t* Press and hold - a key\r\n * Try the arrow keys\r\n * Shift\r\n * Option\r\n * - Alt\r\n * Others" - CSDU4 - Design Mode - 33_markdown_instruction: "# Play Sound With Keys\r\n\r\nYou - may have noticed from the last couple of levels that the value of `event.key` - is just a string which is the name of the key. As a result we can check which - key was pressed with a simple conditional statement. For example to check - for the press of the **\"a\"** key we could write `if (event.key == \"a\")`.\r\n\r\n# - Do This:\r\nThe **starter code provided** plays the sound whenever ANY key - is pressed.\r\n\r\n* Use `console.log` to **find out the value of `event.key` - when the up arrow is pressed.**\r\n\r\n* **Add an `if` statement** so the - sound only plays when the when the **up arrow** is pressed." - CSDU4 - Design Mode - 4_markdown_instruction: "# IDs\r\nThe `id` (we'll typically - write **ID**) is a **unique identifier** used for each element in the app.\r\n\r\nEach - element that appears in the app must have a **unique ID**. In fact, if you - try to run a program that has two buttons with same ID you will get a warning - message in the console.\r\n\r\n# Do This\r\nWhile each element you drag out - in Design Mode gets a default ID, they aren't really that helpful (like `button1` - and `button2`), so you should get in the habit of creating your own IDs.\r\n\r\n* - Change the ID of your \"click me\" button to something useful (like `redButton`)\r\n* - Drag out a second button\r\n* Make the second button blue and give it an ID - of `blueButton`" - CSDU4 - Design Mode - 5_markdown_instruction: "# Debugging Event-Driven Programs: - IDs\r\n\r\n**Debugging:** As you write more complex event-driven programs, - you'll need to polish your **debugging** skills. Debugging involves locating - and correcting errors within a program. It is a critical (and generally unavoidable) - step when writing code.<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" - style=\"float: right; width: 200px\">\r\n\r\n**Checking IDs:** Your first - debugging task will be to verify that the button IDs match the IDs in the - event-handlers. **Remember that IDs are case-sensitive**." - CSDU4 - Design Mode - 7_markdown_instruction: "**Logical Errors: ** Sometimes - you can write a program that generates no errors but does not work as you - intend. This is the result of **logical errors** in your code. These can be - tricky to catch without knowing what your program is supposed to do in the - first place, and usually are only found with careful testing of your app's - functionality.\r\n<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" - style=\"float: right; width: 150px\">" - CSDU4 - Design Mode - 8_markdown_instruction: "# Moving and Sizing Buttons\r\n\r\nAn - important component of designing intuitive and visually appealing user interfaces - is the location of the elements on the screen. Using the `setPosition` command - (now added to the Toolbox) you can move and set the size of user interface - elements.\r\n\r\n![](https://images.code.org/c3e42223cbcb096f992d758973d09f63-image-1444664597665.42.48 - AM.png)\r\n\r\n**NOTE:**\r\n * If you only want to set the size you can use - the `setSize` function which looks like this:\r\n\r\n ![](https://images.code.org/cb742ecf96c04477db0f8361ad5dcdaf-image-1448924017288.png)\r\n\r\n - * If you *only* want to set the position *without* changing the size of the - element, you can omit the *width* and *height* parameters from the `setPosition` - function. To do that, you need to switch into text mode, like this:\r\n\r\n - <img src='https://images.code.org/5b565ef5b74b5cd657ba15c67be92b0d-image-1448924356253.gif' - style=\"width: 400px\">\r\n\r\n* **Remember:** in an app screen 0,0 is the - top left corner and you specify a location by how many pixels from the left - and how many down from the top of the screen it is. The screen is **320 by - 450 pixels**." - CSDU4 - Design Mode - 9_markdown_instruction: "# How to Organize the Code\r\nAs - your apps get more complex you'll have to think about how to organize your - code so it remains readable and easy for you to locate things when debugging - any problems. We suggest the following convention which breaks the code into - 3 major sections:\r\n* **Top**: code for event handlers.\r\n* **Bottom**: - code for any other other functions you've written. (We don't have any of - these yet.)" - CSDU4 - Design Mode Icons_markdown_instruction: "<img src=\"https://images.code.org/2b405319f597910b1563ae607958171c-image-1475866226306.49.51.png\" - style=\"width: 200px; float:right\">\r\n\r\n# Icons\r\nIcons help users find - the right functionality while also making your app feel more polished.\r\n\r\n# - Do This\r\nAdd a few icons to your app. For each icon:\r\n\r\n* Drag out an - image element\r\n* Next to the \"Picture\" field click \"Choose...\"\r\n* - Click on the \"Icons\" tab and select one\r\n* Make sure to give your image - a good ID! (do we still need to say it?)\r\n\r\n" - CSDU4 Connecting Screens Getting Back_markdown_instruction: "# Navigating Back\r\n\r\nSomeone - using your app can now get to each of the red, green, and blue pages, but - they can't get back to the homepage. You can add buttons and event handlers - of your own to help them do this.\r\n\r\n# Do This\r\n\r\nCreate buttons and - event handlers to help a user navigate back to the \"home\" screen\r\n\r\n* - Use Design Mode to create a button inside each of the \"red\", \"green\", - and \"blue\" screens. Make sure to give them descriptive IDs.\r\n* Back in - your code drag in three `onEvent()` blocks, one for each of the three buttons - you made.\r\n* Inside each `onEvent()` block use the `setScreen()` block that - switches back to your \"home\" screen.\r\n* Test your app. You should now - be able to navigate back to the home screen from each of the other three." - CSDU4 Connecting Screens template_markdown_instruction: "# Navigating\r\n\r\nOnce - you start adding multiple screens to an app, you need to make sure that users - can always get where they want to go. If you forget to provide a link back - home or to a deeper page.\r\n\r\n# Do This\r\n\r\nHere's an app with four - different pages, but only the \"red\" screen is linked so far.\r\n\r\n* Add - event handlers for \"greenButton\" and \"blueButton\" to go to their respective - screens\r\n* From each of the sub pages, add a button with event handler to - navigate back to the home page\r\n* Test your app thoroughly to make sure - all of your buttons work and you can always get back home" - CSDU4 Connecting Screens_markdown_instruction: "# Navigating\r\n\r\nOnce you - start adding multiple screens to an app, you need to make sure that users - can always get where they want to go. In the next two levels you'll learn - how to make sure a user can always get back to the \"homepage\" of your app.\r\n\r\n# - Do This\r\n\r\nHere's an app with four different pages, but only the \"red\" - screen is linked so far. In this level you'll make the other two buttons - take the user to the correct screen.\r\n\r\n* Add two `onEvent()` blocks, - one each for the \"greenButton\" and \"blueButton\"\r\n* Use the `setScreen()` - block to make each button switch to the appropriate screen\r\n* Test your - app to make sure both buttons work. For example, when you click the green - button you should go to the green screen." - CSDU4 Crowdsource App Demo_markdown_instruction: "# Crowdsourcing\r\n\r\nCrowdsourcing - apps allow multiple users to submit content for everyone to use (the _source_ - of content is the _crowd_). This app is very similar to the list app, with - the main difference being that the list app assumes a single user while this - app allows all users to add to the same list and \"like\" submissions.\r\n\r\nThis - example uses a list of crowdsourced information for simplicity, but you could - display any kind of information in many different formats. A crowdsourcing - app could allow users to submit locations for display on a map, images to - go into a gallery, or any number of other types of information.\r\n\r\n# Functionality - Missing from this Prototype\r\n\r\n* User's can't create accounts or profiles\r\n* - Submitted things aren't added to the list\r\n* Clicking on the \"like\" icons - don't change their state" - CSDU4 Decision App Demo_markdown_instruction: "# Decision Maker\r\n\r\nSimilar - to the quiz app, a decision tree app asks the user a series of questions. - The primary difference between the two is that a decision tree doesn't check - for right or wrong answers, but instead attempts to give the user a suggest - or help them make a decision based on their answers.\r\n\r\nThis simple decision - maker asks only three questions, but more advanced ones actually take the - form of a tree as seen below:\r\n\r\n![](https://images.code.org/aeadfca116011949855c169905ff89a3-image-1476823699500.png)\r\n\r\nDepending - on the user's answer to each question, they're given a different page for - the next question. This allows the app to gradually narrow down the decision - one question at a time. This type of app can be really useful to help users - understand complex processes - for example, you might introduce a recycling - program by using a decision tree app to help users figure out which bin to - sort items into - first asking what material it's made out of, then whether - it is clean or not, and so on.\r\n\r\n# Functionality Missing from this Prototype\r\n\r\n* - Question buttons don't direct you to different screens\r\n* The final screen - doesn't give you a recommended decision" - CSDU4 Functionality setText button_markdown_instruction: "# setText on More - than Just Labels\r\n\r\nYou can use `setText()` to change the text of labels, - obviously, but it can also be used to change the text on _any_ element that - has text, including buttons, text input, and text areas.\r\n\r\n# Do This\r\n\r\nThe - starter program has an event handler already set up for the red button, can - you write event handlers for the other three buttons so they behave in the - same way?" - CSDU4 Functionality setText input_markdown_instruction: "# Pre-fill Input Fields - with setText\r\n\r\nYou've set the text of labels, and you've set the text - of buttons, but did you know you can also use `setText()` to pre-fill text - input fields?\r\n\r\n# Do This\r\n\r\nThis app has four buttons, each of which - should fill the \"nameInput\" field with a given name. For each button:\r\n\r\n* - Add an `onEvent` block to run when the button is clicked\r\n* In the button's - event handler, set the text of \"nameInput\" to the appropriate name\r\n\r\nWhen - you've gotten all four buttons to work, add another button that will fill - the input field with your name." - CSDU4 Functionality setText quiz 1_markdown_instruction: "# Making The Quiz - App\r\n<img src=\"https://images.code.org/b87aef1a1fcd238590b2b866f11f47c7-image-1478035551794.15.03.png\" - style=\"float:right; max-width: 200px;\">\r\nLet's look back at the quiz - app example that we talked about earlier in this lesson. Recall that we proposed - a single page that could serve three purposes:\r\n\r\n1. Display the question\r\n2. - Show if the question was answered correctly\r\n3. Show if the question was - answered incorrectly\r\n\r\n# Do This\r\n\r\nWe've already provided the screen - for a single question. Before worrying about any code, you just need to set - this up to ask a question.\r\n\r\n* Change the title to a question that you - want to ask\r\n* Change the text of the two buttons to two potential answers - to your question" - CSDU4 Functionality setText quiz 2_markdown_instruction: "# Answering the Question\r\n\r\nNow - that this screen is asking the question you want it to ask, you'll want to - make it respond to the answer buttons.\r\n\r\n# Do This\r\n\r\nInstead of - using the buttons to change screens as we did in earlier quiz apps, each one - of the answer buttons should change the title to say either \"Correct\" or - \"Incorrect.\" For each of the answer buttons:\r\n\r\n* Add an event handler - to watch the button's ID\r\n* In the event handler, set the title text to - either \"Correct\" or Incorrect\"\r\n\r\n_Challenge: Create a couple more - question screens just like this on and make the \"Next Question\" button navigate - between them._" - CSDU4 Functionality setText quiz 3_markdown_instruction: "# Don't Skip The - Question\r\n\r\nThe way this screen currently works, a user could just click - immediately on \"Next Question\" and not bother answering. Worse still, the - user could click one answer, see that it's wrong, and then click the other. - Let's use `hideElement()` and `showElement()` to prevent that.\r\n\r\n# Do - This\r\n\r\nYou'll need to hide or show all three of the buttons in order - to make this work, so let's focus on one at a time:\r\n\r\n**Next Question**\r\n\r\nThe - \"Next Question\" button should be hidden to start with, and then show up - once the question has been answered.\r\n\r\n* In Design Mode, select the \"Next - Question\" button and check the \"hidden\" checkbox. This will make sure the - button is already hidden when the app starts\r\n* In the event handler for - each of the answer buttons, add code to show the \"Next Question\" button\r\n\r\n**Answer - Buttons**\r\n\r\n* In the event handler for each button, add code to hide - the question buttons\r\n\t* If you want to allow a user to re-answer using - only the answers they haven't tried yet, you could hide just the button that - was clicked" - CSDU4 Functionality setText_markdown_instruction: "# Changing text with setText()\r\n\r\nYou - actually saw `setText()` briefly in the last lesson - it's a function that - allows you to change the text of a design element with code.\r\n\r\n# Do This\r\n\r\nUsing - the provided `onEvent()` block\r\n\r\n* Add a `setText()` block in the event - handler\r\n* From the dropdown in the `setText()` block, select \"title\"\r\n* - Make up a new title for the app and place it in the second parameter of the - `setText()` block\r\n* Run it and test the button" - CSDU4 Functionality visible_markdown_instruction: "# Controlling Visibility\r\n\r\nEarlier - in this lesson, when we were proposing ways to simplify the quiz app, we mentioned - that it was possible to show or hide design elements with code. App Lab has - two functions that let you control the visibility of an element:\r\n\r\n* - `hideElement()` makes the specified element invisible\r\n* `showElement()` - makes the specified element visible\r\n\r\n# Do This\r\n\r\nThe provided app - has an image and two buttons.\r\n\r\n* Attach an event handler to the \"Hide\" - button that hides the image when clicked\r\n* Attach an event handler to the - \"Show\" button that shows the image when clicked" - CSDU4 List App Demo_markdown_instruction: "# List Manager\r\n\r\nThe list manager - app allows user to keep track of the state of information and can be modified - to serve many different purposes, such as checking in / out loaned items, - tracking personal To Dos, or keeping track of where things are in a multi-step - process.\r\n\r\nWhile this example focuses on a single list, more sophisticated - list apps could allow the user to create multiple lists, or even move items - between lists. This app also only keeps track of the name of an item and whether - or not it is \"Done,\" but it could be extended to track and organize any - amount of information about the list times.\r\n\r\n# Functionality Missing - from this Prototype\r\n\r\n* Delete buttons don't actually delete items from - the list\r\n* Add screen doesn't actually add an item to the list" - CSDU4 nameAgeTemplate_markdown_instruction: "# Text Input Elements\r\n\r\nSo - far we've been using `promptNum` as a simple way to get a number as input. - Now that we know a little about strings were are going to create **user interface - elements that users can use to submit text (i.e. strings) instead**. The first - and simplest example is `textInput` which you can find in Design Mode.\r\n\r\n<img - src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 - PM.png\" style=\"width: 100px\">\r\n\r\n# Do This\r\n\r\n* **Add two text - input elements to this program**, one for the name and one for the age of - the user.\r\n* **Give your text input elements descriptive and meaningful - IDs**\r\n* **In Design Mode** set their default text to prompt the user for - their name in age\r\n* **Compare your app to the example below**\r\n\r\n<img - src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 - PM.png\" style=\"float:left; width:200px;\">\r\n<br>" - CSDU4 Project Bug Feature_markdown_instruction: "# Improving and Iterating\r\n\r\nYou've - put your app in front of users, gathered feedback, and identified bugs and - new features - time to do something about it.\r\n\r\n# Do This\r\n\r\nEach - team member is going to implement select features and bug fixes on their own - version of the team's app. Start by selecting a sticky note from the **To - Do** column of your team's chart and moving it to the **Doing** column. For - each sticky you tackle:\r\n\r\n* Make a remix of your app at it's current - state. This ensures that you always keep a working copy of your app as you - try to add new features\r\n* Give your remix a meaningful name, such as \"Pancake - Finder - original\", or \"Pancake Finder - navigation fix\"\r\n* Return here - to work on your app\r\n* Add a comment to the top of your program describing - the feature or bug fix you are implementing\r\n* Work on your iteration until - it works. Try to stay focused on only the single feature or bug that you've - selected.\r\n* When done, move your sticky to the **Done** column, pick a - new one, and start the process over." - CSDU4 Project Functionality_markdown_instruction: "# Add Some Functionality\r\n\r\nUsing - the list you brainstormed with your team, add a single piece of new functionality - to your app.\r\n\r\n# Do This\r\n\r\nBefore adding anything new to a working - app, it's always a good idea to make a backup. Click the \"Remix\" button - in the header, give your remix a good name, and then come back here.\r\n\r\nFor - each piece of functionality you incorporate:\r\n\r\n* Make a remix of your - app at it's current state\r\n* Return here to work on your app\r\n* Add a - comment to the top of your program describing the functionality you are trying - to add\r\n* Work on your app until it works. Try to stay focused on only the - single piece of functionality you've chosen\r\n* When done, pick a new idea - and start the process over\r\n" - CSDU4 Project Import_markdown_instruction: "# Back To Your App\r\n\r\nNow that - you've had some practice with importing screens, it's time to start working - on your team's app.\r\n\r\n# Do This\r\n\r\nEach member of your team is going - to create their own copy of the app, with all of the team members' screens - imported in. This will be your copy of the app, and the copy that you will - start to add code to in the next lesson.\r\n\r\n* Collect all of the sharing - urls for your team's pages\r\n\t* You can find the share url by going back - to the last level of the previous lesson, or by finding the screen in your - [projects directory](/projects)\r\n* Import each of the screens, one at a - time\r\n\t* If you run into an ID error with one of the screens, discuss the - issue with the screen's creator so it can be fixed and imported\r\n* Delete - the default \"screen1\"\r\n* Set the main screen as the default\r\n\r\nDon't - worry about adding any code at this point; we'll get to that in the next - level." - CSDU4 Quiz App Demo_markdown_instruction: "# Quiz Me\r\n\r\nA quiz app can - be used to teach, or help reinforce, information important to your chosen - topic.\r\n\r\nAt its most basic, a quiz app is composed of a screen for each - question with two or more buttons for multiple choice answers. Each button - links to a page that either confirms that you were correct, or gives you information - about why you were were wrong.\r\n\r\nMore advanced quiz apps could include - features such as:\r\n\r\n* Different types of questions (such as matching, - free response, or even interactive games)\r\n* Randomizing the order of questions\r\n* - Changing the questions based on how we'll you're doing\r\n* Providing a - final score\r\n* Incorporating study material\r\n\r\n# Functionality Missing - from this Prototype\r\n\r\n* Questions aren't actually checked for correctness" - CSDU6 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions - as Indexes: Using Variables\r\n\r\n* **Starter code** has been provided which - creates an list of identifiers for icons in the icon library\r\n* **Write - code** that sets the image on the screen to a random icon from the list" - CSDU6 - Arrays - indexPractice_markdown_instruction: "# Index Practice\r\n\r\n<img - src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has - been provided that creates a list called `colors`.\r\n\r\n* Use `setProperty` - and the list of colors to change the `background-color` of the buttons to - create a rainbow. The first button has been done for you." - CSDU6 - Arrays - length_markdown_instruction: "<img src=\"https://images.code.org/f02914c957acffecbadaa3646388d26c-image-1486499703151.33.50 - PM.png\" style=\"width: 200px; float:right\">\r\n\r\n# List Length\r\n\r\n* - **Starter code** has been provided which creates several long arrays.\r\n* - **Use `list.length` and `console.log`** to determine how many items are in - each array. An example of the output is below." - CSDU6 - Arrays - lengthMinus1_markdown_instruction: "# Accessing Last Item - in List\r\n\r\n* **Starter code** has been provided that which creates several - lists.\r\n* **Write Code** to display the final item in each list. Make sure - to use list.length so that your code will work even if the list shrank.\r\n" - CSDU6 - button debug_markdown_instruction: "# Debug\r\n\r\n<[gif needed]>\r\n\r\nThis - program should work like the image on the right - toggle LEDs one by one in - the direction of the button you click. Clicking the left button should cause - LEDs to toggle counter clockwise, while clicking the right button should toggle - LEDs clockwise. Find and fix all of the bugs to get the program working again." - CSDU6 - button on off_markdown_instruction: "# On and Off Buttons\r\n\r\n<[pic - needed]>\r\n\r\nRight a program that works like the image to the right. The - left button should turn on all of the color LEDs, and the right button should - turn them off again." - CSDU6 - button screen buttonL_markdown_instruction: "# Board Events\r\n\r\nThe - `onBoardEvent()` command allows you to start taking input from your Circuit - Playground. This app has two screens, \"red_sreen\" and \"blue_screen\". Using - the provided board event handler, write a program that switches to the blue - screen when the left button on your board is pressed." - CSDU6 - button screen buttonR_markdown_instruction: "# Changing the Input\r\n\r\n<img - src=\"https://images.code.org/cc903e4a0fb57b241b90abe220f027ef-image-1487707484420.04.00.png\" - style=\"float:right; margin-left: 10px; width: 50%\">\r\n\r\nUsing another - `onBoardEvent()` block, make `buttonR` change the screen back to \"red_screen\". - The first input of the `onBoardEvent()` command lets you pick which board - object to watch." - CSDU6 - button switch_markdown_instruction: "# The Toggle Switch\r\n\r\nWhile - the toggle switch is in many ways similar to the left and right buttons, the - reasons you might use it can be different. Unlike the buttons, the toggle - switch stays in whichever position you place it, so it doesn't have a \"press\" - event. In fact, you'll find that none of the events you used with buttons - are present for the toggle switch.\r\n\r\n# Do This\r\n\r\nDrag out an `onBoardEvent()` - block and select `toggleSwitch` from the first dropdown\r\n\r\n* Look at the - options available in the events dropdown. What do you think they do?\r\n* - Write a program that turns on half of the color LEDs at a time, based on the - position of the toggle switch <[pic needed]>\r\n\r\n_Challenge:_ The toggle - switch events will only fire when the switch changes, so when you start the - program you'll need to flip the switch for your code to work. Can you fix - it so that your program starts with the correct set of LEDs lit? Look in \"Circuit\" - drawer for a block that could tell you which position the toggle switch is - in." - CSDU6 - button toggle_markdown_instruction: "# Toggle with a Button\r\n\r\nUsing - `onBoardEvent()`, can you write a program that toggles the red LED when you - click the left button?" - CSDU6 - button tug o war challenge_markdown_instruction: "# Challenge\r\n\r\n_Check - with your teacher before starting this challenge_\r\n\r\nAt this point your - Tug o' War game should have basic functionality, but there are still a few - things missing. Continue fleshing out your game. You can make the game your - own in any way you like, but you might add some of the following features:\r\n\r\n* - Switch to a \"Win\" screen when one player reaches their target\r\n* Add a - \"Reset\" button to start the game over\r\n* Add different difficulty levels - or \"handicaps\" (one user may move two on each click while the other only - moves one)\r\n* Add visuals to make the game look more interesting\r\n* Use - the color LEDs to show the score" - CSDU6 - button tug o war left button_markdown_instruction: "# Making Both Buttons - Work\r\n\r\nIf you were successful in the last level, the slider should move - to the right when the right button is pressed. To get the left button to work - you need to add another event handler, only this time it should **decrease** - the variable _score_ and update the slider on each press." - CSDU6 - button tug o war right button_markdown_instruction: "# Tug o' War\r\n\r\nLet's - start working on a two player Tug o' War game. Each player will be assigned - one of the two hardware buttons (`buttonL` or `buttonR`), and they play the - game by clicking as quickly as possible. Each time one of the buttons is clicked, - it should move the slider \"tug_slider\" in the direction of that button.When - the slider gets to one of the ends (either -10 or 10), that player wins.\r\n\r\n# - Do This\r\n\r\nFirst we'll get the right button working. You've already - been provided an event handler for `buttonR` - when the \"press\" event occurs, - your program should:\r\n\r\n* Increase the variable _score_ by one\r\n* Set - the value of \"tug_slider\" to the new score\r\n\r\nDon't worry about the - other button yet, we'll get to that in the next level." - CSDU6 - button up down predict question_markdown_instruction: "What do you - think will happen when you run this code? What will happen when you press - the left and right buttons?" - CSDU6 - button up down_markdown_instruction: "# Down and Up Events\r\n\r\nAs - you saw in the last level, the \"down\" and \"up\" events allow you to respond - to buttons being pressed down and being released back up, respectively.\r\n\r\n# - Do This\r\n\r\nUsing those events, can you write a program that shows the - label with id \"alert_message\" while the button is pressed down, but hides - it again when the button is released?" - CSDU6 - ch 1 exemplar LEDs_markdown_instruction: "# An Example Using Color - LEDs\r\n\r\nHere's an example app that uses the color LEDs, event handlers, - and a for loop to create an visual color mixer. Run this app and analyze how - you think it was written." - CSDU6 - ch 1 project design_markdown_instruction: "# Set Up Your Screen\r\n\r\nUsing - the project guide, set up the elements of your screen in Design Mode." - CSDU6 - ch 1 project events_markdown_instruction: "# Event Handlers\r\n\r\nSet - up an event handler for each of the elements you plan to use for input. Don't - worry yet about getting the them fully functional, but you might use `console.log()` - statements to help with testing." - CSDU6 - ch 1 project finish_markdown_instruction: "# Add the Finishing Touches\r\n\r\nGo - back to your project guide and check to see that your app is addressing the - goals you set out. This is your chance to add finishing touches, improve functionality, - and get your app ready to be used by other people. When you're are finished, - and have thoroughly tested it, use the share button to share your app out - with others." - CSDU6 - ch 1 project functions_markdown_instruction: "# Functions\r\n\r\nCreate - all of the functions that you identified in your project guide." - CSDU6 - ch 1 project output_markdown_instruction: "# Board Output\r\n\r\nAt - this point you should have the structure of your app mostly fleshed out. Test - your program as is to make sure that everything currently works as expected. - Once you are confident in your program as-is, add the code to send output - to your board." - CSDU6 - for loop - 1_markdown_instruction: "# For Loop - Looping Through A - List\r\n\r\n* Print out all the items in the colors list using a for loop" - CSDU6 - for loop - 10_markdown_instruction: "# For Loop - Looping Through A - List\r\n\r\nYou saw this for loop on the last level:\r\n\r\n<pre>\r\nfor(var - i = 0; i < daysOfWeek.length; i++){\r\n console.log(i);\r\n}\r\n</pre>\r\n\r\nWhich - prints the numbers from 0 to one less than the list length in this case (0 - to 6). Another way of looking at this is that it prints all the index values - in the list! This might be helpful to loop through a list!\r\n\r\n**Starter - Code:** This program writes out each item of the array individually. \r\n\r\n**Write - Code** that uses the for loop from the last level to print out all the items - in the list." - CSDU6 - for loop - 2_markdown_instruction: "# For Loop - Condition\r\n\r\n* - Run the program - how many times does it print?\r\n* Change the 2 to another - positive number less than 5. What happens?" - CSDU6 - for loop - 3_markdown_instruction: "# For Loop - Starting Value\r\n\r\nYou - can change where a for loop starts counting.\r\n\r\n* Run the program what - number does it start counting at?\r\n* Try changing the 5 to a different number\r\n\t* - What happens if you make the number negative?\r\n * What happens if you - make the number bigger than 10 (since the condition is i < 10)?" - CSDU6 - for loop - 4_markdown_instruction: "# For Loop - Incrementor \r\n\r\n* - Run the program what numbers is it printing?\r\n* Try to change the 2 to another - number, what happens?" - CSDU6 - for loop - 6_markdown_instruction: "# For Loop - Condition Practice\r\n\r\nChange - the condition of the for loop so that the word message prints 6 times." - CSDU6 - for loop - 7_markdown_instruction: "# For Loop - Starting Value Practice\r\n\r\nEdit - the starting value and the condition of the loop so that it counts from 50 - to 100.\r\n" - CSDU6 - for loop - 8_markdown_instruction: "# For Loop - Incrementor Practice\r\n\r\nCan - you make the program count from 30 to 60 by 3s? (30,33,36,39......57,60)" - CSDU6 - for loop - 9_markdown_instruction: "# *for* Loop with *if*\r\n\r\nSometimes - we want to find values in an array that meet certain conditions. We can add - an **`if` statement inside the `for` loop** to individually check every value - within the array. To practice this, we will create a `for` loop that will - **display every value in the array greater than 5**.\r\n\r\n# Do This:\r\n** - Starter code** has been been provided that creates an array of random values.\r\n\r\n* - Add a `for` loop that references every index in the array.\r\n\r\n* Add an - `if` statement inside the `for` loop that **displays every value in the array - greater than 5** using `console.log`\r\n\t![](https://images.code.org/969077ff23232e410ce17520b0a71e1e-image-1447390972867.gif)\r\n \r\n* - **Note:** Because the original array is being constructed with random values - it's *possible* that it might not have any values greater than 5. Just run - the program a few times to make sure it works. An example of the possible - output is below.\r\n\r\n![](https://images.code.org/266e23afc3533ebd63b393b2ee8682d8-image-1447796380510.39.26 - PM.png)\r\n" - CSDU6 - for loop - around for loop_markdown_instruction: "# Before and After - For Loop\r\n\r\n* Run this code and check out when the console.log statements - before and after the for loop print." - CSDU6 - for loop - button grid 1_markdown_instruction: "# Random Button Colors\r\n\r\n**Starter - Code:** An array with the name of the 30 buttons on the screen (not including - the New Pattern button) is provided for you. \r\n\r\n**Write Code** that loops - through all the buttons on the screen and gives them each a random color when - the New Pattern Button is clicked." - CSDU6 - for loop - color buttons with for_markdown_instruction: "# Lists\r\n\r\n<img - src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\nTake a look at the code - you wrote in the last level. Can you make it better by using a loop to set - the button colors instead?" - CSDU6 - for loop - color buttons_markdown_instruction: "# Lists\r\n\r\n<img - src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has - been provided that creates a list of colors and a list of the buttons on the - screen. In addition there is code to set each button to a color.\r\n\r\n**Change - the code** so that instead of the name of each button being using in the call - to `setProperty` the list index is used instead. For example:\r\n\r\n<pre>\r\nsetProperty(buttons[0],\"background-color\", - colors[0]);\r\n</pre>" - CSDU6 - for loop - condition with for_markdown_instruction: "# *for* Loop with - *if*\r\n\r\nAnother way to use a for loop is to count the number of occurances - of something in list. \r\n\r\n** Starter Code:** The program generates an - list of 5 random numbers from 1 to 3. \r\n\r\n**Write Code:** Write a program - that prints the number of 2s in the list.\r\n\r\n* You will need to write - an if statement to check if the current value of the list is equal to 2\r\n* - Instead of printing that value inside the if statement like on the last level - you will want to increment a variable that keeps track of the number of 2s.\r\n* - Print out the variable after the for loop runs!" - CSDU6 - for loop - count down_markdown_instruction: "# Counting down\r\n\r\nSo - far all the programs you have written count up. Can you make this program - count down from 10 to 1? Hint: You need to change something about all three - parts of the for loop!" - CSDU6 - for loop - next day_markdown_instruction: "# Accessing Items in a List\r\n\r\n**Starter - Code:** There is a list of days of the week provided as well as a command - to set the label on the screen.\r\n\r\n**Do This:** Can you change the index - value so that the page displays \"Today is: Tuesday\"" - CSDU6 - for loop - predict repeat_markdown_instruction: "# For Loop - Condition - Practice\r\n\r\nChange the condition of the for loop so that the word message - prints 6 times." - CSDU6 - for loop - repeatedCode_markdown_instruction: "# Refactoring To For - Loop\r\n\r\nFor loops are just a way of simplifying repeated code and make - it easier to update in the future.\r\n\r\n* Can you take the repeated code - here and turn it into a for loop?" - CSDU6 - for loop - why for_markdown_instruction: "# Lists\r\n\r\n<img src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\nWhy are loops so great? Well - lets try something out.\r\n\r\n* Add another button to your screen in design - mode.\r\n* Add a color for that button to the end of your list of colors\r\n* - Add the button name for that button to the end of your list of buttons\r\n* - Run your program!\r\n\r\nDid it work? Notice you never changed the for loop - at all!" - CSDU6 - for loop - winning num_markdown_instruction: "# Debug\r\n\r\nThis program - is supposed to generate 3 random winning numbers from 1 to 5. There is a list - of numbers but it seems like there are some bugs with generating the 3 random - numbers when the Draw Numbers button is clicked. Can you debug the program? - Check to make sure you can get every number in every slot of the winning numbers - area. " - CSDU6 - for loops - lights picker_markdown_instruction: "# Challenge: More - Patterns\r\n\r\nYour work on the color light patterns is back:\r\n\r\n* Consider - using the all lights on and all lights off functions you made on the last - level here.\r\n* Can you edit the patterns you created to use for loops where - appropriate?\r\n* Can you add more patterns that use for loops?" - CSDU6 - lists - lists 1_markdown_instruction: "# Lists\r\n\r\nLet's practice - adding items and printing out lists.\r\n\r\n* Add a `console.log()` command - to print out the lettersList\r\n* Add the letter \"c\" to the letters list - so it prints [a,b,c,d]" - CSDU6 - lists - lists 2_markdown_instruction: "# Create Your Own Lists\r\n\r\n**Write - code:** to create _one or more_ of the following lists:\r\n\r\n* The numbers - from 1 to 10\r\n* A list of the names of 5 different shapes\r\n* The names - of the months of the year" - CSDU6 - lists - lists 3 - out of bounds_markdown_instruction: "# Accessing - Items in a List\r\n\r\n**Starter Code:** There is a list of days of the week - provided as well as well as a console.log statement to access the spot that - holds \"Friday\" in the list. \r\n\r\n**Do This:** Can you add three more - console.log statements that access the spots that hold:\r\n\r\n* Thursday\r\n* - Monday\r\n* Sunday" - CSDU6 - lists - lists 3_markdown_instruction: "# Accessing Items in a List\r\n\r\n**Starter - Code:** There is a list of days of the week provided as well as a command - to set the label on the screen.\r\n\r\n**Do This:** Can you change the index - value so that the page displays \"Today is: Tuesday\"" - CSDU6 - lists - lists 5_markdown_instruction: "# Debug\r\n\r\nThis program - is supposed to generate 3 random winning numbers from 1 to 5. There is a list - of numbers but it seems like there are some bugs with generating the 3 random - numbers when the Draw Numbers button is clicked. Can you debug the program? - Check to make sure you can get every number in every slot of the winning numbers - area. " - CSDU6 - sensor love tester demo_markdown_instruction: "# \"Love\" Tester\r\n\r\nThe - \"Love\" Tester is a classic carnival game. It works by having a user place - their palm flat on a sensor or hold a metal handle. The tester then displays - how in love that person is. The simplest version of these machines simply - measure the temperature of the user’s hand and equate more love with a higher - temperature.\r\n\r\nTest out this \"Love\" Tester by holding your thumb down - on your Circuit Playground's temperature sensor. Compare your results with - those of your neighbors - do all of the boards respond in the same way?" - CSDU6 - sensor theremin demo_markdown_instruction: "# Light Theremin\r\n\r\nA - theremin is an instrument that can be played without the musician actually - touching it! Traditional theremins use magnetic fields for user interaction, - but a simpler version can be made by detecting and reacting to light.\r\n\r\nTest - out this theremin by waving your hand over the light sensor on your Circuit - Playground. How does the tone change as the amount of light detected changes?" - CSDU6 - sensor vu meter demo_markdown_instruction: "# VU Meter\r\n\r\nMany - stereo systems feature a row of LEDs that light up as the music plays. This - display is called a Volume Unit (VU) Meter, and it allows the user to see - how loud the music is as it plays.\r\n\r\nTest out this VU Meter by speaking - or otherwise making noise near the Circuit Playground. How do the lights and - display change as the volume of ambient noise changes?" - CSDU6 - sensors challenge_markdown_instruction: "# Challenge\r\n\r\n_Check - with your teacher before pursuing this challenge_\r\n\r\nNow that you've - practiced taking input from the various analog sensors and changing their - scale to meet your needs, can you come up with an interesting use for sensor - data? It's easy to display the raw numbers coming out of a sensor, but far - more interesting to present that data in different ways.\r\n\r\nConsider the - following ways you might communicate sensor data:\r\n\r\n* Use the board outputs\r\n* - Change the width, height, or position of a UI element\r\n* Use conditionals - to display different images based on sensor values" - CSDU6 - sensors experiment_markdown_instruction: "<iframe width=\"370\" height=\"620\" - style=\"float:left; margin-right: 25px; border: 0px;\" src=\"https://studio.code.org/projects/applab/iCWa6Gsb-W4StwmqFX5TkA/embed\"></iframe>\r\n\r\n# - Sensor Experiment\r\n\r\nRun the program to the left and experiment with your - board. Try interacting with your board in many different ways to figure out - what each sensor might be. Once you've completed the experiment, answer the - following questions for each sensor in the text box below.\r\n\r\n* What does - this sensor measure?\r\n* What is it's maximum value?\r\n* What is it's - minimum value?" - CSDU6 - sensors light_markdown_instruction: "# Light Sensor Updates\r\n\r\nThis - app is very similar to the last, but we've added a button with the ID \"update_button\". - Write a program that displays the current value of the light sensor every - time the update button is clicked." - CSDU6 - sensors love tester 1_markdown_instruction: "# \"Love\" Tester: Collecting - and Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat - scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an - event handler to continually collect data from your chosen sensor and use - `console.log()` to track how it changes to user interaction. If necessary, - change the scale of your input to meet your needs.\r\n\r\n_Tip: Consider which - type of data is easiest to use from the temperature sensor - the raw value, - temperature in C, or temperature in F._" - CSDU6 - sensors love tester 2_markdown_instruction: "# \"Love\" Tester: Displaying - Output\r\n\r\nHow will your collected data be displayed?\r\nDoes your data - need to be transformed or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace - your call to `console.log()` with the kind of output you need for your project.\r\n\r\n_Tip: - You may want a conditional to determine which output to display depending - on input._" - CSDU6 - sensors love tester 3_markdown_instruction: "# \"Love\" Tester: Finishing - it Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# - Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning - guide to make sure that the app meets your initial goals." - CSDU6 - sensors predict question_markdown_instruction: "# Make a Prediction\r\n\r\nRead - the code in this program and make a prediction below. What do you think this - program will do when you run it? How is the user intended to interact with - the board?" - CSDU6 - sensors rgb part 1_markdown_instruction: "# Displaying Sensor Readings - in Color\r\n\r\nIn the previous prediction level you saw how the `setScale()` - method can convert the full range of sensor readings (0-1023) into a range - that can be used for RGB values (0-255). Let's build on that idea to make - an app that can communcate the current value of all three analog sensors with - a single color.\r\n\r\n# Do This\r\n\r\nTo start, we just need to set the - sensor scales correctly - don't worry about actually setting the color of - the background yet.\r\n\r\n<img src=\"https://images.code.org/39de88e19682e905a1e08d5f12398f35-image-1488995498849.png\" - style=\"float: right; width: 300px; margin-left: 20px;\"/>\r\n\r\n* Using - the `sensor.setScale()` block, set each of the three analog sensors to the - right scale for an RGB color channel.\r\n* Create a variable for each of the - three colors and assign each one to the `.value` of a different sensor.\r\n* - Use `console.log()` to test that your variables are in the correct range.\r\n\r\n_Hint: - Order matters. You need to set the scale of a sensor before checking it's - value_" - CSDU6 - sensors rgb part 2_markdown_instruction: "# Putting Color on the Screen\r\n\r\nNow - that your sensor data is in a scale that works for RGB, you can go about setting - the screen color.\r\n\r\n# Do This\r\n\r\n* Add a `setProperty()` block and - set it to change the \"background-color\" property of \"screen1\".\r\n* Add - an `rgb()` block to the last parameter of `setProperty()`.\r\n* Use the three - color variables you created as inputs to the `rgb()` block." - CSDU6 - sensors rgb part 3_markdown_instruction: "# Continuous Updates\r\n\r\nThis - sensor-to-color app isn't super useful if it only sets the color once when - you start the app. You can use the sensors' \"data\" event to make your app - continually update the background color every time the value changes.\r\n\r\nMove - your `setScale()` blocks into a an event handler for one of the sensors to - make the app update continually." - CSDU6 - sensors sound_markdown_instruction: "# Reading the Sound Sensor\r\n\r\nIn - this app we've already added a text label with the id \"sound_value\". Using - the `soundSensor.value` block. display the value of the sound sensor." - CSDU6 - sensors temp f c_markdown_instruction: "# Temperatures in Fahrenheit - and Celsius\r\n\r\nWhile the sound, light, and temperature all behave in the - same fashion (converting an analog input to a 10 bit number), the temperature - sensor is often used a bit differently. Typically if you are using a temperature - sensor, you want to get a temperature in Fahrenheit or Celsius, not just a - number in a range. To help with this, the temperature sensor how two special - blocks, `tempSensor.F` and `tempSensor.C`.\r\n\r\n# Do This\r\n\r\nUsing an - event handler, write a program that continuously updates the labels \"temp_c\" - and \"temp_f\" with the appropriate temperature readings." - CSDU6 - sensors temp_markdown_instruction: "# Make a Thermometer App\r\n\r\nSimilar - to the sensors you saw in the previous levels, you can get the raw value of - the temperature sensor using `tempSensor.value`. For the temperature sensor, - however, there are some more interesting properties available. `tempSensor.F` - and `tempSensor.C` will convert the raw input value to either Fahrenheit or - Celsius.\r\n\r\n# Do This\r\n\r\nMake a simple thermometer app that reads - in values from the temperature sensor. Your app can display the temperature - in either Fahrenheit or Celsius (or both!)\r\n\r\n_Challenge: can you make - your app continually update the temperature readings?_" - CSDU6 - sensors theremin 1_markdown_instruction: "# Light Theremin: Collecting - and Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat - scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an - event handler to continually collect data from your chosen sensor and use - `console.log()` to track how it changes to user interaction. If necessary, - change the scale of your input to meet your needs." - CSDU6 - sensors theremin 2_markdown_instruction: "# Light Theremin: Displaying - Output\r\n\r\nHow will your collected data be displayed?\r\nDoes your data - need to be transformed or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace - your call to `console.log()` with the kind of output you need for your project." - CSDU6 - sensors theremin 3_markdown_instruction: "# Light Theremin: Finishing - it Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# - Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning - guide to make sure that the app meets your initial goals." - CSDU6 - sensors vu meter 1_markdown_instruction: "# VU Meter: Collecting and - Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat - scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an - event handler to continually collect data from your chosen sensor and use - `console.log()` to track how it changes to user interaction. If necessary, - change the scale of your input to meet your needs.\r\n\r\n_Tip: If you are - going to use the 10 color LEDs for output, how should you set the scale of - your sensor?_" - CSDU6 - sensors vu meter 2_markdown_instruction: "# VU Meter: Displaying Output\r\n\r\nHow - will your collected data be displayed?\r\nDoes your data need to be transformed - or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace your - call to `console.log()` with the kind of output you need for your project.\r\n\r\n_Tip: - You may want to use a conditional to determine which LEDs to turn on, and - which one's to turn off_" - CSDU6 - sensors vu meter 3_markdown_instruction: "# VU Meter: Finishing it - Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# - Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning - guide to make sure that the app meets your initial goals." - CSDU6 - timed loop challenge_markdown_instruction: "# Challenge\r\n\r\n_Ask - your teacher before embarking on this challenge_\r\n\r\nUsing your new _timed - loop_ skills, create an interesting program of your own design. Consider using - multiple loops running at different speeds, or combining _timed loops_ with - the `blink()` and `play()` helpers you saw in the previous level.\r\n\r\nYou - can either start from scratch here, or remix any of the earlier levels in - this lesson." - CSDU6 - timed loop console.log()_markdown_instruction: "# Starting From Scratch\r\n\r\nNow - that you've got some practice with `timedLoop()`, let's see if you can set - one up from scratch.\r\n\r\n# Do This\r\n\r\n* Get a `timedLoop()` block from - the _Control_ drawer in your toolbox\r\n* Change the _ms_ input so that the - loop runs twice a second\r\n* Inside the loop, write the console with `console.log()`" - CSDU6 - timed loop for LEDs_markdown_instruction: "# Turn on Each RGB LED and - Exit\r\n\r\nUsing a _timed loop_ in place of a _for loop_ loop requires that - you set up a counter variable, increment it each time the loop is run, and - use a conditional to determine when to exit the loop. Set up a _timed loop_ - to turn on each of the color LEDs one at a time and then exit. Refer back - to the previous page for examples." - CSDU6 - timed loop helpers_markdown_instruction: "# Timed Loop Alternatives\r\n\r\nBlinking - lights and playing notes are common enough activities that we've provided - some helpers to do them more easily.\r\n\r\n# Do This\r\n\r\nRun this code - to see how the helpers work, and then **discuss** with a neighbor how you - might do this with a _timed loop_." - CSDU6 - timed loop question timed_markdown_instruction: "What do you think - will happen when you run this code?" - CSDU6 - timed loop random blink_markdown_instruction: "# Timed Blinking\r\n\r\nThe - provided code toggles a randomly selected color LED once. Place that line - inside a timed loop to make a randomized pattern of blinking lights." - CSDU6 - timed loop random sound exit_markdown_instruction: "# Ending The Song - and Light Show\r\n\r\nHere's the randomized light and music app you created - earlier. Using the `stopTimedLoop()` command, can you make the program stop - at some point? You can choose one of the following ways to stop:\r\n\r\n* - Use a _counter_ variable and stop the loop after the counter has reached a - certain point (like a _for loop_)\r\n* Add a button and event handler to call - `stopTimedLoop()` when clicked.\r\n\r\n_Make sure you also turn off all of - the LEDs when the show is over!_" - CSDU6 - timed loop random sound_markdown_instruction: "# Disco Dance Party\r\n\r\nAdding - some sound to your blinking lights would really kick this program up a notch.\r\n\r\n# - Do This\r\n\r\n* At the top of the program, create an list of notes, such - as `var notes = ['C4', 'D4', 'E4']`\r\n* Inside the timed loop, randomly - select one of the notes to play with `buzzer.note()`\r\n\r\n_Challenge: By - default the lights are all blinking white - can you set them to random colors?_" - CSDU6 - timed loop smiley event_markdown_instruction: "# What Happens Between - Repetitions\r\n\r\nWhen the `timedLoop()` is waiting for the next repetition, - the rest of your program is free to do whatever else it needs to do, including - respond to events.\r\n\r\nAdd an event handler for the \"smiley\" image. You - can make the event do whatever you like - just test it to make sure that your - event responds each time the image is moved.\r\n\r\n**Heads Up**: Make sure - to put your event handler **outside** of the loop, otherwise a new event handler - will be added _every time your loop is run!_ \r\n\r\n_Challenge: At this point - you've got the start of a simple clicker gamer. Consider keeping track of - score, or adding additional event handlers._" - CSDU6 - timed loop smiley rand y_markdown_instruction: "# Infinite Loop\r\n\r\nThe - `timedLoop()` is really useful not only for looping code at a slower speed, - but also if you want to a loop to run infinitely. The provided program moves - the image \"smiley\" to a random x position every second, can you make the - image also move to a random y?" - CSDU6 - UI and Inputs - Debug Screens and IDs_markdown_instruction: "# Debug - The Program\r\n\r\nIn Unit 4 you learned how to set up the UI of an app, give - elements meaningful IDs, and switch between screens using button clicks. The - programmer that created this app did not use good IDs and that caused their - code to be buggy. Can you fix their code?\r\n\r\n* Go into Design Mode and - give everything meaningful IDs\r\n* Set up the event handlers so that the - buttons transition to the correct screen (see diagram below)\r\n\r\n![](https://images.code.org/f9c9a9b5cbcb6e1cd59b1349625b7e9d-image-1485898200882.png)" - CSDU6 - UI and Inputs - dropdown setText_markdown_instruction: "# setText and - getText\r\n\r\nOften you will want to get the text of a UI Element and use - it to set the text of another element on the screen. Can you get the text - from the dropdown when the user picks a new input and use it to set the text - of the choiceDisplay label." - CSDU6 - UI and Inputs - event type testing_markdown_instruction: "# Event Testing: - \r\n\r\nSo far you have only used the 'click' event type. However there - are lots of other event types. You are going to test out a couple different - event types for 4 different UI elements (Button, Dropdown, Slider, Text Input).\r\n\r\n**Starter - Code:** The starting code is set up to react to the *click* event for the - *button*. When that event fires a message will be logged to the console.\r\n\r\nOne - at a time, **change either the ID or event type**. Run the program and write - down you observations of when this event fires. Keep going until you have - tried all the combinations of events in the table." - CSDU6 - UI and Inputs - function_markdown_instruction: "# setColor Function\r\n\r\nAt - this point you probably have the same code inside each of your event handlers. - Remember that when you have repeated code it is good to put it into a function. - Can you use functions to get rid of the repeated code?" - CSDU6 - UI and Inputs - get set with text input_markdown_instruction: "# setText - and getText\r\n\r\nYou've seen how to use getText and setText already. Can - you make this app get the text the user typed once they hit enter and show - it in the text area at the bottom?" - CSDU6 - UI and Inputs - getNumber practice_markdown_instruction: "# getNumber\r\n\r\n**Starter - Code:** The program tries to update the valueDisplay whenever the slider value - changes but it always sets the value to 10.\r\n\r\nCan you use `getNumber()` - to get the value of the slider and update the valueDisplay as it changes?" - CSDU6 - UI and Inputs - getNumber_markdown_instruction: "# getNumber\r\n\r\n**Starter - Code:** This program creates a simple calculator but **there is something - wrong with it. Try putting in 2 + 2.**\r\n\r\nWe can fix this by using `getNumber()` - instead of `getText()`. Can you fix the program by changing `getText()` to - `getNumber()`?" - CSDU6 - UI and Inputs - getText_markdown_instruction: "# getText\r\n\r\nTry - to set up an event handler that gets the text from the dropdown whenever a - user selects a new item from the dropdown. You will need to use the getter - `getText()`. Whenever you use a getter you should save it in a variable. Use - `console.log()` to make sure it is working." - CSDU6 - UI and Inputs - hide show_markdown_instruction: "# Hide and Show\r\n\r\nIt - is a little weird that both buttons are on the screen at the same time. You - don't need the stop alarm button until the alarm is on. Can you make the - buttons only show when they are needed?\r\n\r\n* You will want the stop alarm - button to be hidden when the program starts. You can do this in design mode.\r\n\r\nHint: - When you click the trigger alarm button, you should change the text, hide - the trigger alarm button, _and_ show the stop alarm button." - CSDU6 - UI and Inputs - set slider range_markdown_instruction: "# Set Slider - Range\r\n\r\nSliders represent a range of numbers. In order to set that range - you need to set the minimum value and maximum value for each slider. Do you - remember what the range of values is you can give for each value in a RGB - color?" - CSDU6 - UI and Inputs - setProperty first level_markdown_instruction: "# setProperty\r\n\r\n**Starter - Code:** There is one call to `setProperty()` which sets the text-color to - blue when you run the program.\r\n\r\nCan you add more calls to `setProperty()` - that change other things about the text when you run the program? Try to change - at least 3 more things.\r\n" - CSDU6 - UI and Inputs - setProperty Image_markdown_instruction: "# setProperty - image\r\n\r\n**Note:** This level starts in Design Mode.\r\n\r\nThere is an - image element set up for you but it does not show when you leave Design Mode - because it has not been told what image to display. \r\n\r\n* Use the `setProperty()` - command to set the image of the UI Image Element on the screen.\r\n" - CSDU6 - UI and Inputs - setProperty_markdown_instruction: "# setProperty background-color\r\n\r\nChange - the `background-color` of a button to a new random color each time it is clicked - using `setProperty()`." - CSDU6 - UI and Inputs - setScreen_markdown_instruction: "# setScreen\r\n\r\nLets - start with a setter you have used before `setScreen()`. \r\n\r\n* Make the - About Me button on the Home page go to the About Me page.\r\n* Make the Back - button on the About Me go to the Home page." - CSDU6 - UI and Inputs - setText_markdown_instruction: "# setText\r\n\r\nWe - are going to start making an alarm app. We have already set up an event handler - for the \"triggerAlarmButton\" which will change the \"statusLabel\" text - to ON when clicked. Can you make the stop alarm button change the text to - OFF when clicked?" - CSDU6 - UI and Inputs - slider UI_markdown_instruction: "# RGB Sliders\r\n\r\n<img - src=\"https://images.code.org/f3fb468a73aa35b69d7e64deee34c7c3-image-1486080850211.12.39 - PM.png\" style=\"width:200px;float:right\">\r\n\r\nFirst step to creating - the RGB Sliders app is to set up the UI elements and event handers for the - sliders. \r\n\r\n* Can you get the screen to look similar to the one below? - Hint: The color box is a button with no text.\r\n* Can you set up 3 event - handlers that listen for when someone has finished moving the slider to a - new location? Hint: Think back to your event investigation. Which event type - do you want?" - CSDU6 AppLab Input 1_markdown_instruction: "# Input in App Lab\r\n\r\n_You - don't need to make any changes to the code here_\r\n\r\nTake a minute to - read through the code and run the program. Discuss with a partner:\r\n\r\n1. - What is the source of input?\r\n2. Where and how does the program check for - input?\r\n3. What does the program do when it gets the right input?\r\n3. - What is the program doing when there is no input?" - CSDU6 buzzer alarm_markdown_instruction: "# Noisy Alarm\r\n\r\nBack to the - Alarm now - now with the buzzer we can make this thing really sound like an - alarm. Using `buzzer.frequency()` and `buzzer.stop()` make your alarm play - a sound when it goes off." - CSDU6 buzzer freq_markdown_instruction: "# Playing Sounds\r\n\r\nThe `buzzer.frequency()` - command takes two inputs - the first is the _frequency_ of the sound to be - played (higher numbers = higher sounds), and the second is the _duration_ - of the sound (how long it should be played)\r\n\r\n# Do This\r\n\r\nThe provided - app has three buttons with event handlers. Add a `buzzer.frequency()` command - to each of the event handlers so that the buzzer plays the appropriate sound - (a low, medium, or high note)." - CSDU6 buzzer stop_markdown_instruction: "# Playing Longer Sounds\r\n\r\n<img - src=\"https://images.code.org/e5513675e74233d4fe55a0826376b83f-image-1487622642991.gif\" - style=\"float: right; margin: 10px;\">\r\n\r\nThe _duration_ input of the - `buzzer.frequency()` command is an _optional_ input - meaning that you don't - need to use it. You can remove an optional input by clicking the left arrow - next to it.\r\n\r\nBy removing the duration, you are telling the buzzer to - buzz continuously. You'll notice that there's a new block in the toolbox - called `buzzer.stop()` to use in this case.\r\n\r\n# Do This\r\n\r\nHere's - an app with two buttons, a Start and a Stop. Make these buttons Start and - Stop the buzzer\r\n\r\n* Add an event handler for each button\r\n* When the - Start button is clicked, make the buzzer play continuously\r\n* When the Stop - button is clicked, stop the buzzer from playing\r\n\r\n" - CSDU6 Circuit Playground Test_markdown_instruction: "# Test Your Board\r\n\r\nThis - level is just a quick test to make sure your board is working. To run this - test, do the following:\r\n\r\n1. Plug your board into your computer with - a USB cable\r\n2. Click \"Run\"\r\n3. Wait a few seconds for either a Success - or Error screen to pop up\r\n4. If your test was successful, move on to the - next level. If not, try some of the troubleshooting steps\r\n\r\n## Troubleshooting\r\n\r\nThere - are a number of things that could prevent your test from passing.\r\n\r\n1. - Try refreshing the page and running the test again (you should refresh the - page for each of the following ideas as well)\r\n2. Try connecting your board - to a different USB port\r\n3. Try a different USB cable. Some USB cables can - only be used for charging, so make sure your cable supports data transfer!\r\n4. - Try a different board\r\n5. Go to [studio.code.org/maker/setup](/maker/setup) - to run a more detailed test" - CSDU6 GameLab Input 1_markdown_instruction: "# Input in Game Lab\r\n\r\n_You - don't need to make any changes to the code here_\r\n\r\nTake a minute to - read through the code and run the program. Discuss with a partner:\r\n\r\n1. - What is the source of input?\r\n2. Where and how does the program check for - input?\r\n3. What does the program do when it gets the right input?\r\n3. - What is the program doing when there is no input?" - CSDU6 LED alarm silent_markdown_instruction: "# Silent Alarm\r\n\r\nHere's - the alarm app that you started in the last lesson. Right now it doesn't do - much, so let's see if we can make it more useful by hooking it up to your - board. When the alarm is triggered, turn on the red LED. When the alarm is - stopped, turn the LED off again.\r\n\r\n# Do This\r\n\r\nAdd `led.on()` and - `led.off()` blocks to the events that trigger and disable the alarm.\r\n\r\n_Notice - that the LED blocks have been moved to a new drawer called Circuit_" - CSDU6 LED basics led.off()_markdown_instruction: "# Turn that LED Off\r\n\r\nJust - as you can turn your red LED on using `led.on()`, you can turn it back off - again with `led.off()`. You'll need to add a second button with an event - handler that calls `led.off()`.\r\n\r\n# Do this\r\n\r\nAdd a second button - and use its \"click\" event to turn off the LED\r\n\r\n* Drag out a new button - in Design Mode and give it a good ID\r\n* Insert an event handler for your - newly created button\r\n* Drag an `led.off()` command into your new event - handler\r\n\r\nNow you should have two buttons, one that turns the LED on, - and another that turns it off.\r\n\r\n_Challenge: Can you come up with other - ways to turn on and off the LED? Could you do it with a single button?_" - CSDU6 LED basics led.on_markdown_instruction: "# Turn on that LED\r\n\r\nThe - red LED on your board is represented in code by an object called `led`. Similar - to the sprite objects in Game Lab, you can use _dot notation_ to control the - LED. Try using the command `led.on()` to make your red LED light up when the - program is run.\r\n\r\n# Do this\r\n\r\n* Drag out the `led.on()` block and - place it underneath the comment\r\n* Run the program\r\n* Bask in the warm - red glow of your LED!" - CSDU6 LED basics onEvent_markdown_instruction: "# Turn on that LED - with a - Button!\r\n\r\nAs exciting as an always-on red LED is, an LED that you can - turn on with the click of a button seems much more useful. If you add a button - to your screen in Design Mode, then you can use move your `led.on()` command - into an `onEvent()` block.\r\n\r\n# Do this\r\n\r\nAdd a button and use its - \"click\" event to turn on the LED\r\n\r\n* Drag out a new button in Design - Mode and give it a good ID\r\n* Insert an event handler for your newly created - button\r\n* Move the code that turns your LED on _inside_ the button's event - handler\r\n\r\nIf everything worked out, you should see that your LED starts - out off, but turns on when you click the button!" - CSDU6 light sensor alarm_markdown_instruction: "# Auto Alarm\r\n\r\nLet's - revisit the alarm app one last time. When we last updated this app we made - it turn on or off the buzzer in addition to the LED, but it still needs to - be manually triggered. Now that we know how to use sensor events, you can - make the alarm trigger automatically!\r\n\r\n# Do This\r\n\r\nUsing the an - event handler for the light sensor, make the alarm turn on when it sees light. - You can test the alarm by placing an object like a piece of paper over the - board - if someone tries to take the piece of paper your alarm should start - buzzing.\r\n\r\n_Challenge: Can you make both the buttons and the sensor play - nicely together?_" - CSDU6- predict event types_markdown_instruction: "# Predict: Event Type\r\n\r\nSo - far you have really only used the click event type with buttons. There are - many different event types you can use in App Lab. Look at the code and predict - when each of the messages will print to the console log." - CSDU6L06 - lists and colorLeds - blink_markdown_instruction: "# Blink\r\n\r\nMake - lights blink \r\n\r\n" - CSDU6L06 - lists and colorLeds - create light pattern_markdown_instruction: "# - Light Pattern\r\n\r\nFind a partner and bring your light patterns together.\r\n\r\nSet - up the app so the user can use what light pattern they want to see. You should - put each of your light displays in a function to make this easier" - CSDU6L06 - lists and colorLeds - debug_markdown_instruction: "<img src=\"https://images.code.org/a2b5050f76bdb262713ce52f0356fb04-image-1486151096632.JPG\" - style=\"width:250px; float:right\">\r\n# Debug: colorLeds\r\n\r\nCan you debug - the index values so that the rainbow shows up on the board like in the picture?\r\n\r\n" - CSDU6L06 - lists and colorLeds - intensity_markdown_instruction: "# Changing - Brightness\r\n\r\nSometimes you want to do more than just turn a light on - or off, you might want to set a specific brightness. The `intensity()` command - lets you set an LED's brightness (or _intensity_) from 0 - 100. Under the - hood, this works just like `buzzer.frequency()` by rapidly turning the LED - on and off to make it seem dimmer.\r\n\r\n# Do This\r\n\r\nThe provided program - has a slider that goes from 0 to 100 with an event handler. In the event handler, - set intensity of your color LEDs to the value of the slider." - CSDU6L06 - lists and colorLeds - Light Display_markdown_instruction: "# Blink\r\n\r\nMake - lights blink \r\n\r\n" - CSDU6L06 - lists and colorLeds - light pattern off_markdown_instruction: "# - Turning It Off\r\n\r\nWhen you start this app your lights are off, but as - soon as choose a pattern, there's no way to turn the lights back off!\r\n\r\n# - Do This\r\n\r\nCreate a function that turns all of the LEDs off, and then - add a \"Off\" button to your app and make it turn off all of the color LEDs." - CSDU6L06 - lists and colorLeds - pulse_markdown_instruction: "# Pulse\r\n\r\nMake - lights pulse\r\n\r\n" - CSDU6L06 - lists and colorLeds - set color_markdown_instruction: "# Adding - Some Color\r\n\r\nYou probably noticed when you used `colorLeds[0].on()` in - the last level, the LEDs turned on as white. If you don't specify a color, - `on()` will turn on all three parts of the LED (red, green, and blue) to produce - white. You'll see a new command in the toolbox called `colorLeds[0].color()` - which lets you specify a color, either as a string like \"blue\" or an RGB - value using color `color()` command.\r\n\r\n# Do This\r\n\r\nUse the `.color()` - command to set each of the color LEDs to a different color." - CSDU6L06 - lists and colorLeds - song list_markdown_instruction: "<img src=\"//curriculum.code.org/images/circuitplayground/colorLedonoff.gif\" - style=\"float: right; margin: 10px;\">\r\n\r\n# colorLeds\r\n\r\nThe color - LEDs can use the same basic commands that you used with the red LED, such - as `on()` and `off()`. Using the provided buttons, write a program that turns - on and off the bottom two color LEDs (the one's furthest away from the USB - cable.\r\n\r\n# Do This\r\n\r\nAdd event handlers to the provided buttons - \"on_button\" and \"off_button\" that turn on and off the bottom two color - LEDs. Which positions in the `colorLeds` list are those two LEDs?\r\n\r\n" - CSDU6L06 - lists and colorLeds - toggle_markdown_instruction: "# Toggle\r\n\r\nThe - `.toggle()` command works like a light switch - whenever you call it on an - LED, the light will turn on if it was off, or off if it was on. This can be - a really useful alternative to using both on and off.\r\n\r\n# Do This\r\n\r\nChoose - a few LEDs and write a program that toggles them on and off when you click - the Toggle button.\r\n" - CSDU6L06 - lists and colorLeds -solo light pattern_markdown_instruction: "# - Light Patterns\r\n\r\nThis app already has one light pattern program, which - can be activated by clicking a button. Notice that we put this pattern into - a function to make the code cleaner and clearer.\r\n\r\n# Do This\r\n\r\nCreate - a light pattern function of your own - maybe the colors of your favorite holiday, - college, sports team, or try to create an image with the lights.\r\n\r\nAfter - you've created your new function, add a button and event handler so that - you can switch between the two light patterns." - CSP Data Unit - Counting Multiple Things_markdown_instruction: "If you can - count one thing you can count multiple things\r\n\r\nFind out how many people - like something other than dogs and cats\r\n\r\nCount dogs\r\nCount cats\r\nCount - total\r\nDo the math\r\n\r\nblank/ blank total\r\n\r\nCan also use this to - find percents from this\r\n\r\nx% are dog lovers" - CSP Data Unit -Counting Records - Easy Way_markdown_instruction: "ReadRecords - with specific criteria \r\nfind the length of an array\r\n" - CSP Data Unit -Counting Records - Hard Way_markdown_instruction: "\r\n1. ReadRecords - for all records\r\n2. Way to loop through and count" - CSP U4 - CreateRecord with JSON_markdown_instruction: "Good news! we can also - store objects in the easy way!\r\nStarting code is some kind of pre-composed - object. And call to createRecord that shows using the javascript object as - the the thing being stored.\r\nTest.\r\nInvestigate.\r\nAdd a field to the - object and run again, see what’s there." - CSP U4 - Export Table_markdown_instruction: "# You can export the table too!\r\n\r\nMake - a table and then export it to share it with a friend!" - CSP U4 - First Create Record Experience_markdown_instruction: "So how can we - use this? We can use it to compose a bunch of things we want to store at - once. In Data we call this a “record”. Let’s look at how we create records….new - level:\r\n\r\nJust drag out createRecord and play with it (non-project level) - — not triggered by a button. \r\n\r\nCreateRecord should populate with a default - JSON object (which you can set in level builder when defining params for the - blocks in the palette.) Have it be the string version of of JSON object.\r\nJust - Hit run several times.\r\nView Data.\r\nInvestigate problems.\r\n\r\n\r\n" - CSP U4 - Import Table_markdown_instruction: "You can create a new table by - importing a CSV file. CSV stands for comma separated values and is a standard - way to move data between different applications. CSV files usually have multiple - columns with the first row containing the label for each column. AppLab will - use this first row to create the column names in the table. \r\n\r\nIn AppLab - you can create a new table in an app by clicking the “View Data” button(a - new browser tab opens) and type in a new, descriptive table name (the table - name does not have to match the app name, and an app can have more than one - table), then click the “Add” button next to the table name(another new browser - tab opens). Click the “Import” button, then the “Choose File” button and select - the RottenTomatoes2015.csv file (see below). Finally click the “Overwrite - & Import” button. Note the unique “Id” field created for each record." - CSP U4 - JSON Object Intro - Bad Way_markdown_instruction: "# We've Seen Objects - Before\r\n\r\nWe're going to see how we can use objects to organize data - in our own apps, but this actually isn't the first time we've used objects - in our programs. **The object that we've used most frequently is the event - parameter of our event handlers**. This single object contains many pieces - of information about the event which can be accessed to determine how to respond - to the event. For example `event.key` contains the key that was pressed for - key events, and `event.offsetX` and `event.offsetY` contain the location of - the mouse for mouse events.\r\n\r\nBefore we move on to creating objects of - our own, let's take another look at this event parameter (or as we'll call - it now event object) and recall how they were used.\r\n\r\n# Do This\r\n\r\n**Starter - code** is provided which creates event handlers for both a \"click\" and \"keydown\" - event and displays the contents of the event object they create.\r\n\r\n* - **Run the program** and trigger both a keyboard event and a mouse event.\r\n* - **Examine the objects displayed in the Debug Console** to recall the different - pieces of information they contain.\r\n* **Reflect: ** Why wouldn't we want - this information stored in many variables? Why wouldn't we want this information - stored in an array?" - CSP U4 - JSON Object Intro - Good Way_markdown_instruction: "# Creating Your - Own Objects\r\n\r\n**Objects are unordered collections of name value pairs**. - Like an array they can hold many pieces of information, but where arrays use - a numeric index to reference specific pieces of information, objects use a - descriptive name. We lose the \"ordered\" nature of our data, but we gain - the ability to describe the purpose of each piece of data within a collection.\r\n\r\nConsider - the event objects you just looked at. An array can just as easily store all - the information they contain, but it would be difficult to determine what - any of the values represent.\r\n\r\n**The syntax for creating objects of your - own is shown below**\r\n\r\n* Curly braces are placed around the contents - of an object `{}`\r\n* Names are separated from values with a colon `:`\r\n* - Name value pairs are separated by commas `,`\r\n* Names must be strings. If - they are not they will be coerced to strings, possibly creating unpredictable - behavior.\r\n* **Example:** `var user = {\"userName\":\"Ada\", \"password\":\"csIsAwesome\", - \"yearBorn\":1815};`\r\n\r\n# Do This\r\n\r\n**Starter code** is provided - which creates an empty object and displays its value.\r\n\r\n* Modify the - code **using the syntax above** to create an object of your own. Your object - should contain **at least 5 pieces of information including both strings and - numbers**.\r\n* **Run the program** and confirm all values in your object - appear as you expected." - CSP U4 - Objects - createObject_markdown_instruction: "# Creating Your Own - Objects\r\n\r\n**Objects are unordered collections of name value pairs**. - Like an array they can hold many pieces of information, but where arrays use - a numeric index to reference specific pieces of information, objects use a - descriptive name. We lose the \"ordered\" nature of our data, but we gain - the ability to describe the purpose of each piece of data within a collection.\r\n\r\nConsider - the event objects you just looked at. An array can just as easily store all - the information they contain, but it would be difficult to determine what - any of the values represent.\r\n\r\n**The syntax for creating objects of your - own is shown below**\r\n\r\n* Curly braces are placed around the contents - of an object `{}`\r\n* Names are separated from values with a colon `:`\r\n* - Name value pairs are separated by commas `,`\r\n* Names must be strings. If - they are not they will be coerced to strings, possibly creating unpredictable - behavior.\r\n* **Example:** `var user = {\"userName\":\"Ada\", \"password\":\"csIsAwesome\", - \"yearBorn\":1815};`\r\n\r\n# Do This\r\n\r\n**Starter code** is provided - which creates an empty object and displays its value.\r\n\r\n* Modify the - code **using the syntax above** to create an object of your own. Your object - should contain **at least 5 pieces of information including both strings and - numbers**.\r\n* **Run the program** and confirm all values in your object - appear as you expected." - CSP_U2_Shakespeare_Question_markdown_instruction: "Respond to this prompt or - to another as directed by your teacher.\r\n\r\nShakespeare’s complete works - have approximately 3.5 million characters. Which is bigger in file size: - Shakespeare’s complete works stored in plain ASCII text or a 4 minute song - on mp3? How much bigger?" - CSPPD course goals_markdown_instruction: "***Now that you've learned more - about the CSP curriculum, let's consider your goals***\n<br>\n<br>\n\n__What - are your goals for your CSP class?__ *These goals will change over time, and - we'll revisit this your response as we go through the course so we can check - in on how we're progressing towards those goals.*\n\n*NOTE: remember you - can change the size of the text box by clicking and dragging the bottom-right - corner of the box.*\n" - CSPPD impact in program_markdown_instruction: "\n#### What connections do you - think might exist between the ideas covered in the videos you just watched - and the units of CSP that you learned about earlier?\n" - CSPPD materials question1_markdown_instruction: "We just talked about the types - of materials available through the Code.org CSP curriculum, including teacher - lesson plans, widgets, widget tutorial videos, concept videos, teaching tips - videos, and student-facing activities. Which of these materials are you most - excited to have access to? Which are you most uncertain about? " - CSPPD PD goals_markdown_instruction: "***Now that you've learned more about - the CSP Professional Development, let's consider your goals***\n\n<br>\n__What - are your personal goals for your CSP PD experience (what do you hope to accomplish, - how do you hope to grow)?__ *NOTE: These goals might change over time, and - we'll revisit your responses as we go through the course so we can check - in on how we're progressing towards those goals.*\n" - CSPPD program overlap_markdown_instruction: "#### Now that you've read more - about the CSP program, what relationship do you see between the curriculum - and Professional Development? What aspects of the two pieces of the program - seem most important or interesting to you?\n" - CSPPD strategies_markdown_instruction: "\nThis space is your __digital journal - for documenting strategies__ you've picked up during Professional Development - and while teaching the course. We'll revisit this often during PD, and you - should refer back to it while planning lessons to remind yourself of strategies - you want to try in class. \n\n\n" - CSPPD2 PT activity_markdown_instruction: "# Practice PT > Encoding a Complex - Thing\r\n<img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/FBlNhEkvsTFskXJ/Screen%20Shot%202015-07-18%20at%205.46.24%20PM.png\" - class=\"level-image\">\r\n\r\n## Doing the Project\r\nTo wrap up our work - in this unit, we're going to spend an hour doing the practice performance - task. After you've read the lesson, spend some time looking over the student-facing - worksheet and think about what you would like to encode. This is really open - ended, and there's no 'right' thing to choose, but to get the juices going, - here are a few example topics: \r\n\r\n- A piece of music (the notes that - are played, the instruments that play them, etc)\r\n- A food (the smells, - tastes, appearance, etc) \r\n- A place (the sounds, the smells, what natural - things are in the space, what man-made things are in the space, etc)\r\n\r\n> - Once you've selected your topic, start working through your protocol for - encoding the \"complex thing.\" Use the <a href =\"https://docs.google.com/document/d/1IPDnC6tKN7yRzog9t7weKISnjXvykTQe3QEpu43uM7c/edit\" - target =\"_blank\">student activity guide</a> and the <a href=\"https://docs.google.com/document/d/1rkVbwb8nJBlnF9t3hkyIyckM6gJGEjcUwyQiyV-Jlu4/edit\" - target =\"_blank\">lesson plan</a> to work through this.\r\n\r\n**See how - far you can get through the activity in one hour, but please do limit yourself - to 60 minutes.** Don't worry about getting through the entire thing in that - time, but be ready to share your thoughts about the process along with whatever - you come up with! \r\n\r\nUse the text box below to record your protocol. - You'll have space on the next page to share your final product. " - CSPPD2 share protocol_markdown_instruction: "# Chunk 3: Encoding and Sending - Text > Creating a Text Message Protocol\r\n\r\n<img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/FCmh8I2x5GTQ3tu/Screen%20Shot%202015-07-18%20at%2012.53.45%20PM.png\" - class=\"level-image\">\r\n\r\n## Creating a Text Message Protocol\r\n\r\nOn - the right you'll find the student-facing worksheet from lesson 10, which - builds on students' prior work with protocols and has them develop a text - messaging protocol that can handle the letters a-z as well as common punctuation. - \r\n\r\n>Read over the [lesson plan](https://docs.google.com/document/d/1lAHRLpxu05-gSbNF6LX8vUIoDMHEonrmL3bk-Sh1viA/edit) - and **work through developing a protocol yourself.** Use the text box below - to record your protocol.\r\n\r\n*Having trouble viewing the activity? [Click - here](https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/jogZFA5WQK3rYne/text%20protocol.pdf) - to open it directly.* \r\n\r\n" - CSPPD3-u2 pick a challenge_markdown_instruction: "# Challenge Overview > What's - your Challenge?\r\n\r\nNow that you've selected a lesson, head to the forum - and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### - <a href=\"http://forum.code.org/t/unit-2-online-pd-challenge-selection/2222\" - target=_blank>Forums <i class=\"fa fa-external-link-square\" /></a>\r\n\r\nEnter - the lesson you selected for your challenge below:" - CSPPD3-u2 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a dirct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - CSPPD3-u3 pick a challenge_markdown_instruction: "# Challenge Overview > What's - your Challenge? \r\n\r\n## Enter the lesson you selected for your challenge - in the text box below.\r\n\r\n- 2 - 5: Turtle Drawing\r\n- 6 - 7: Functions - and Simple Loops\r\n- 14-15: Variables \r\n- 16: Strings\r\n- 18: Programming - Flow and Conditionals\r\n\r\nNow that you've selected a lesson, head to the - forum and **share which lesson you plan to complete** for your challenge. - \r\n\r\n#### <a href=\"http://forum.code.org/t/unit-3-challenge-selection/2470\" - target=_blank>Forums <i class=\"fa fa-external-link-square\" /></a>" - CSPPD3-u3 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - CSPPD3-u4 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - CSPPD3-u5 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - cspu3_assess1_filltable_markdown_instruction: "Use Top-Down Design strategy - to fill in the table below. The first line is given to you. You may use as - many or as few rows in the table as you see fit.\r\n\r\n_NOTE: Use a new line - for each entry to the table. Write each line in the format of \"Function Name - : Description\"_\r\n\r\n**Top-Down Design Strategy:**\r\n\r\n* Look at the - big picture…\r\n* Identify a sub-task…\r\n* Break down that sub-task into - smaller sub-task(s)...\r\n* Keep going until you’re down to the commands you - already have access to.\r\n\r\n| Function Name | Description / Justification - |\r\n|-----------------|-----------------------------|\r\n| drawSnowflake() - | Draw a 6 pointed snowflake |\r\n| (Your answer) | (Your answer) |\r\n\r\n\r\n" - cspu3_assess1_freeresponse_markdown_instruction: "Explain how abstraction allows - for the creation of increasingly complex systems. Reference top-down design - strategy in your response." - CSPU5 Add a 2nd Screen_markdown_instruction: "# Design Mode: Adding a Screen\r\n\r\n<img - src=\"https://images.code.org/3aab64d77293bda1759586e2cff5c6cc-image-1477366229125.png\" - style=\"width: 150px; float: right\">\r\n\r\n**Now you try it:** Add a new - screen and a button to the app we've started here.\r\n\r\n**NOTE:** We've - created one screen for you - the Hello Screen. You need to add a new screen - - the new screen should look something like the example shown to the right.\r\n\r\nHere - are the steps:\r\n\r\n* **Add a new screen**\r\n * Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 - PM.png\" style=\"width: 50px\"> from the Design Toolbox.\r\n * Or choose *New - Screen...* from the pulldown menu at the top of the app display.\r\n \r\n* - **Set the background color**\r\n * It doesn't have to be orange like the - example\r\n \r\n* **Add a Button**\r\n * A simple button is fine. You can - embelish with an icon if you want.\r\n * Optional: You can also add a text - label saying \"Goodbye!\"\r\n\r\n**Click Run...but...you won't see much**\r\n\r\n* - Because we haven't added code yet **all you'll see is the (default) Hello - screen**\r\n* You won't have any way to see the orange screen when the app - is running.\r\n\r\n**Click Finish** to move on to the next level where we'll - add code\r\n\r\n * Note: you can continue to work on your design on the next - level too\r\n\r\n" - CSPU5 Add full screen image to bg of chaser game_markdown_instruction: "# Add - a Full Screen Image to act as Background to Game\r\n\r\n<img src=\"https://images.code.org/9898664ee57768dd6e332bfab804c2a6-image-1477324830263.png\" - style=\"float: right\">\r\n\r\nWe want to be able to detect when the user - *misses* clicking on the target. Since we know the screen itself registers - every click no matter what, the only way to determine that the user missed - the target is to **add an image that takes up the full screen**. \r\n\r\nIn - other words we're trying to determine which of two images was clicked - the - target, or the background - which is do-able since we know when images overlap - only one will have a click event triggered. \r\n\r\n * When the target is - clicked, it jumps to a new location\r\n * When the background image is clicked - we will (eventually) switch to a new screen.\r\n\r\n**Following the Event-Driven - Pattern...**\r\n\r\n* **Design mode: Add a new image to the game** \r\n * - and stretch it to fill the whole screen.\r\n * Change the layering order - (if necessary) so that the target image is in front of the full screen image.\r\n * - (See example at right which shows an image that is stretched to the full size - of the screen sitting behind the target image).\r\n\r\n* **Add an onEvent - handler** for the full screen image with a simple console.log message\r\n * - **TIP**: this is basically done for you if you add onEvent from Design Mode\r\n\r\n* - **Run. Test. Debug.**\r\n \r\nMake sure that with each click one of two things - is happening.\r\n * When the target is clicked, it jumps to a new location - (and optionally print a message to the console).\r\n * When the background - image is clicked it should display a message to the console.\r\n * (See example - console output at right)." - CSPU5 Add game over screen_markdown_instruction: "# Add a \"game over\" screen - and finalize the game\r\n\r\n* **Add a new Screen** with a \"game over\" message - and **add a button** to start over. \r\n\r\n* **Add an event handler** for - the \"Start Over\" Button to send the user back to the Welcome Screen.\r\n\r\n* - **Add `setScreen` to the event handling function for the background image**\r\n - * When the background image is clicked, the user should be sent to the \"game - over\" screen you just created.\r\n\r\n<img src=\"https://images.code.org/bb3c0973ee0d83d3540f5ffed797e442-image-1477405500619.gif\" - style=\"float: right; width: 150px\">\r\n\r\n# Run. Test. Debug.\r\n\r\nYou - should now have a 3-screen app with:\r\n\r\n* A welcome screen\r\n* A game - play screen\r\n* A \"game over\" screen\r\n\r\n**Avoid dead-ends** -- the - user should be able to get between all the screens appropriately, and play - the game.\r\n\r\nIf it's not working:\r\n\r\n* Retrace your steps\r\n* See - if you can figure out where things are going wrong\r\n* Add extra `console.log` - statements. \r\n* Ask a friend to help you out.\r\n\r\n**Stick with it until - you get it!**\r\n\r\n" - CSPU5 Add onEvent from Design Mode_markdown_instruction: "# Add onEvent from - Design Mode!\r\n<img src=\"https://images.code.org/9ff41c3ea30ece355e91eaca5cdc1e36-image-1444417748945.gif\" style=\"width: - 250px; float: right\">\r\n\r\nDesign Mode has a shortcut for you to add `onEvent` - to your code for specific UI Element. It's quite handy.\r\n\r\n**You try - it:** Add an event handler to a button from Design Mode\r\n\r\n**Design Mode**\r\n * - A Red button has already been added to the app.\r\n * In Design Mode click - on the button to select it\r\n * Click the **EVENTS tab** and then click - the link that says **Insert and Show Code**\r\n * You may change the ID if - you like\r\n\r\nThis will insert an `onEvent` block with the ID and \"click\" - filled in already.\r\n\r\nIt also inserts a line of code with a command we - haven't seen yet: `console.log`.\r\n\r\n**Run. Test. Debug**\r\n* Run the - program and click on the button to see what happens\r\n * **Hint:** look - at the **Debug Console** area below the coding workspace.\r\n* If nothing - happens, retrace your steps and try again.\r\n\r\nOnce you see a message displayed - in the Debug Console click finish to move on." - CSPU5 Add Screens to Chaser Game_markdown_instruction: "# Improved Chaser Game\r\n\r\nNow - lets improve the \"Chaser Game\". This is where you get to use your creativity. - Make it look nice!\r\n\r\nIn addition you will notice a new command in the - toolbox: `playsound`! Read the documentation about how to add sounds.\r\n\r\n**Note:** - Your code from before has been provided for you.\r\n\r\n# Do This:\r\n\r\n* - **Create a Welcome Screen** that explains the rules of the game. Include a - \"Start Game\" button.\r\n\r\n* Update the your code so that the **image jumps - to a new location when it is clicked**. \r\n\r\n* **Play a sound** each time - the image is clicked.\r\n\r\n* **Add a Game Over Screen** with a lose message - and button to start over. The Start Over Button should direct back to the - Welcome Screen.\r\n\r\n* **Make the user lose**, by sending them to the Game - Over Screen, when the background is clicked.\r\n\r\n\r\n" - CSPU5 Add welcome screen to chaser game_markdown_instruction: "# Add A Welcome - Screen\r\n\r\n<div style=\"float: right; width: 150px\">\r\n\r\n\r\n<img src=\"https://images.code.org/558ae19d0fb8af8c6ec573e5d7ac4e29-image-1477369385328.png\" - style=\"float: right; width: 150px\"><br>\r\n<em>This is an example showing - the elements of a welcome screen. Yours <strong> should not </strong> look - exactly like this. Yours should be appropriate for your game.</em>\r\n\r\n</div>\r\n\r\nLet's - improve your \"Chaser Game\" by **adding a welcome screen that shows when - the app starts up, and that with a button to start.**\r\n\r\n* NOTE: we've - imported the chaser game that you made in the last lesson. That's the starting - point for this. You can continue with this lesson if you don't have it. - But you'll need to make a screen for game play along the way.\r\n\r\nFollowing - the Event Driven Programming pattern:\r\n\r\n1. **Design Mode** \r\n * Add - a New Screen to the App\r\n * Make this new screen the **default screen**\r\n * - Add a new Button to the screen that says \"Start\"\r\n * Add text welcoming - the user to the game.\r\n * Give the button and the screen meaningful IDs\r\n\r\n2. - **Add an onEvent Handler for the Button**\r\n * Insert a new onEvent block - (easy way from Design Mode) for the \"start\" button\r\n\r\n3. **Add code - to the event handling function**\r\n * When the \"start\" button is clicked - it should `setScreen` to the screen that plays the game.\r\n \r\n4. **Run. - Test. Debug.**\r\n\r\n Make sure that:\r\n \r\n * When app starts up, your - new welcome screen shows first\r\n * When you click the \"start\" button it - takes you to the game play screen\r\n * Note: right now there's no way to - get back to the welcome screen - it's okay, we'll add that later.\r\n\r\n" - CSPU5 Adding Screens Template_markdown_instruction: "# Second Screen\r\n\r\nUp - until now our apps have only been able to have one view. With Design Mode - we can now make multiple screens and switch between them!\r\n\r\n**Goal:** - Make a 2 screen app with a black screen and a white screen. \r\n\r\n<img src=\"https://images.code.org/e35a6f494cf6f0c57c66a1aef651cdb0-image-1444353622241.gif\" - style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\n\r\nSwitch to Design - Mode and **add a second screen**. There are two ways to add a second screen: - \r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 - PM.png\" style=\"width: 50px\"> from the Design Toolbox. Check out the screen - dropdown menu at the top right of the app window. You should now have two - screens! <img src=\"https://images.code.org/b48d978335701888b744702f25f11b28-image-1444353746012.17.07 - PM.png\" style=\"width: 75px\"> \r\n* From the screen dropdown menu at the - top right of the app window click *New Screen*. \r\n\r\nMake screen1 white - and screen2 black. **Set the background color for a screen in the Properties - tab**. Make sure to rename the screens with appropriate IDs." - CSPU5 console.log debug when mouse events happen_markdown_instruction: "# Which - comes first?\r\n\r\nAnother useful thing to do with `console.log` statements - is to use them to figure out the order in which events are triggered. In the - code below one button has 3 different event listeners, that will respond to - the events: `\"mousedown\"`, `\"mouseup\"`, and `\"click\"`\r\n\r\nThe question - is, if you click the button:\r\n\r\n* Will all 3 of these events trigger? - \r\n* Will any of them trigger? Which one(s)?\r\n* What order will these - events be triggered in?\r\n\r\n**You try it**:\r\n1. Study the code and **make - Prediction**\r\n2. **Run** the program\r\n3. **Were you right?** What's unexpected?\r\n4. - **Keep testing** until you see what's happening.\r\n\r\n" - CSPU5 console.log in event v. global_markdown_instruction: "# Predict what - will happen\r\n\r\nWe've added some `console.log` statements *both* in event - handlers as well as just out in the open, between event handler definitions. - \r\n\r\n* **Study the code first**\r\n * We've added some white space between - lines to make it more readable.\r\n\r\n* **Predict:** What do you think will - happen when you click Run? What will display? Will it:\r\n * Print all 5 - messages?\r\n * Print only a few? Which ones?\r\n * Halt with an error message?\r\n - \r\n* *After* you've made some kind of prediction, **hit Run**.\r\n * If - the program runs, then try to use it - click on the buttons and such.\r\n\r\n* - Were you right? Anything unexpected?\r\n * Reset and Run the program again - a few times until you understand what's happening.\r\n \r\n<details><summary>What's - happening? [click to expand]</summary>\r\n<li> As soon as you hit Run messages - \"1\", \"3\" and \"5\" will display immediately. Those statements are out - in the \"open\" rather than part of an event handling function - the computer - can run them right away.</li>\r\n<li>Messages \"1\", \"3\" and \"5\" will - only print once each time you run the program not matter what else you do</li>\r\n<li>Messages - \"2\" and \"4\" will be displayed when the the buttons are clicked.</li>\r\n<li>In - case you're wondering: <strong>This is bad code</strong>. It's hard to - read because of where the statements fall. Typically if some code needs to - run when the program starts up, you'd group it all together at the top of - the program. Scattering it about in and between event handlers and other - functions is a recipe for a lot of buggy code that will be hard for you to - work out.</li></details>" - CSPU5 Debugging Overlapping Objects and Screen Events_markdown_instruction: "# - Use console.log to Test Overlapping Objects and the Screen\r\n\r\nThere are - two goals here:\r\n\r\n1. Practice inserting your own console.log statements.\r\n2. - Investigate how the screen captures events (it's different).\r\n\r\n## Do - This:\r\n<img src=\"https://images.code.org/4100fcc7062f97ce8440003b3a17cd25-image-1477363054051.png\" - style=\"float: right\">\r\n\r\n* **Add `console.log` statements to each of - the 3 event handlers** we started you out with.\r\n * Make the text that gets - printed *be descriptive* so that you know exactly what is happening when.\r\n\r\n* - **Run** the program and try clicking where the diagram (at right) shows.\r\n * - Click on each button\r\n * Click where the buttons overlap\r\n * Click on - the screen (i.e. the background)\r\n\r\n**Investigate until you can answer - these questions:**\r\n1. When you click on a location where two objects are - overlapping, which event(s) fire(s)?\r\n2. When you click on an non-overlapping - part of some object what gets triggered?\r\n3. When does a \"click\" on the - \"screen\" get triggered?\r\n\r\n\r\n<details><summary>Answers: [click here]</summary>\r\n<br><br>\r\n1. - When you click on a location where two objects are overlapping, which event(s) - fire(s)?\r\n<br>\r\n<li><em> The event-handler for object that is on top gets - triggered. The object that is underneath is essentially blocked from being - clicked in the overlapping portion</em></li>\r\n<br><br>\r\n2. When you click - on an non-overlapping part of some object what gets triggered?\r\n<li><em>The - event-handler for the object gets triggered as you might expect</em></li>\r\n<br><br>\r\n3. - When does a \"click\" on the \"screen\" get triggered?\r\n<li><em>Always. - Events that occur on the screen cannot be blocked by other objects. If you - set up an event listener for the screen it will capture EVERY event of that - type, no matter what other UI elements are on the screen. This behavior of - the screen is done on purpose and is useful for certain kinds of things.</em></li>\r\n\r\n\r\n</details>\r\n\r\n" - CSPU5 First Time Console.log_markdown_instruction: "# Exploring console.log\r\n\r\n<img - src=\"https://images.code.org/cdc253db1b9a3685eaf5ea4b6bc30766-image-1444337429645.png\" - style=\"width: 250px; float: right; border: solid 1px black; margin-right: - 10px\">\r\n\r\nIn the last level, we saw a new command: `console.log`. You - should have noticed that it prints out text in the Debug Console below the - code workspace.\r\n\r\nThe Debug Console area is an important tool for programmers. You've - seen it display error messages, but you can also have your program display - messages there. \r\n\r\nYou can find `console.log` in the **Variables** code - toolbox, and it is the command you use to send messages to the console -- - it's just about the simplest thing you can do to make your code generate - output.\r\n\r\n**You try it:** Add a console.log statement to say your name\r\n\r\n* - Drag out a `console.log` statement into the workspace and add it below the - 2 statements there.\r\n\r\n* Following the lead of the first two lines - update - the code so that it says your name.\r\n\r\n* The output should look something - like this: \r\n\r\n![](https://images.code.org/64c82c1bf7ecb859d84192e5bffb3488-image-1477338603375.png)" - CSPU5 Layering and Deleting in Design Mode_markdown_instruction: "# Design - Mode: Layering and Deleting\r\n<img src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" - style=\"width: 150px; float: right\">User interface elements can overlap one - another, so you'll want the ability to change the order or **depth** at which - each one is shown. \r\n\r\n**You Try it:** Use the **depth** and **delete** - tools to **create the \"After\" image** (shown below).\r\n\r\n* **Scroll to - the bottom of the Properties tab** you'll find buttons which allow you to - easily **change the depth** of an element.\r\n* **Change the depth** of elements - by using the double or single arrows.\r\n * Click the double arrow to send - all the way to front or back.\r\n * Click the single arrow to move up or down - one layer.\r\n \r\n* **Delete an Element** by selecting it (clicking on it) - in the design view and then clicking the **Red Delete button** in the properties - tab.\r\n\r\n\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th style=\"text-align:center\">Before</th>\r\n <th - style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td align=center><img - src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" - style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img - src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" - style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" - CSPU5 Project - Multi Screen App_markdown_instruction: "# Multi Screen App\r\nYou - will be creating your own multi-screen app to practice designing user interfaces - and writing event-driven programs. \r\n\r\n**Look at the Project Guide and - Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* - Your app will have at least **4 screens**.\r\n* Your app should include **text, - images, buttons, and sound**.\r\n* There should be **no “getting stuck” on - any screen.** It should always be possible to navigate from a screen in your - app to some other screen. \r\n* Your program code should follow **good style**.\r\n* - Your user interface should be **intuitive to use**." - CSPU5 Use Console.log to update IDs_markdown_instruction: "# Updating IDs and - Debugging with Console Log\r\n\r\nIn the last level you tested out the new - command: `console.log`. In this level we have a couple buttons with event - handlers and `console.log` statements, but they are switched around!\r\n\r\nWe - should have given the buttons better ID names so we could tell the difference - based on the ID. **Can you update the ID names and `console.log` messages - to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** - of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to - Code Mode and notice that the **ID pulldowns have been updated to include - the new IDs**. (You still need to select the correct ID from the pulldown - menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" - CSPU5 Use setScreen for first time_markdown_instruction: "# Adding Code: Switching - Screens with *setScreen*\r\n\r\n<img src=\"https://images.code.org/9232bd923268d36158d63829145c9879-image-1477367827365.gif\" - style=\"float: right; width: 150px\">\r\n\r\n**You Try it:** Add event handlers - to the buttons that use `setScreen` to switch to the other screen. \r\n\r\nThe - result should be two-screen app which can switch back and forth between the - \"hello\" and \"go back\" screens. See example at right.\r\n\r\n* **Add an - onEvent handler** for the smiley face image/button to respond to a \"click\"\r\n - * Do it the easy way by inserting from design mode, or just drag an `onEvent` - block into the code workspace.\r\n\r\n* **Add `setScreen` into the event handling - function**\r\n * Make it switch to the other screen when the smiley face is - clicked.\r\n\r\n**Run. Test. Debug**\r\n\r\n* Test to see if the clicking - the smiley face switches screens\r\n* If it doesn't work, retrace your steps - and try again.\r\n\r\nIf it works, then **repeat these steps for the \"go - back\" button.**\r\n\r\n* The result should look something like the example - on the right. \r\n" - CSPU5_addDescriptiveIDsToTurtleDriver_markdown_instruction: "# Descriptive - IDs\r\n\r\n**You try it** - give your buttons **descriptive and meaningful - IDs** rather than the default `button1`, `button2` and so forth.\r\n\r\nAfter - you change the ID in Design Mode remember to:\r\n\r\n* **Change the event - handler code** so that it correctly references the new IDs of the buttons\r\n* - **Run - Test - Debug ** the program to make sure it works, and debug any problems.\r\n\r\n<details><summary><strong>Reminder:</strong> - Rules About IDs [click to expand]</summary>\r\n\r\nIn making descriptive and - meaningful IDs there **are some rules about IDs** you need to know. IDs...\r\n\r\n<li> - are case sensitive</li>\r\n<li> cannot contain spaces.\r\n<li> *must* begin - with a letter (A-Z or a-z) and may be followed by any number of digits and - letters.\r\n<li> can contain hyphens (\"-\"), underscores (\"_\"), colons - (\":\"), or periods (\".\").\r\n\r\n</details>\r\n" - CSPU5_AddImage_andMakeChaserGame_markdown_instruction: "# Now you do it: Add - an image\r\n\r\n[lice cap]\r\n\r\n* add an image from icon, or from something - you upload.\r\n\r\n* We'll make the image respond to events on the next level\r\n\r\n* - Click continue\r\n\r\n" - CSPU5_AddImageToChaserGame_markdown_instruction: "# Now you do it: Add an image\r\n\r\n[lice - cap]\r\n\r\n* add an image from icon, or from something you upload.\r\n\r\n* - We'll make the image respond to events on the next level\r\n\r\n* Click continue\r\n\r\n" - CSPU5_AddLabelToChaserGame_markdown_instruction: "# Design Mode: Add a label\r\n\r\n<img - src=\"https://images.code.org/092af4a9c90ad36fa44c636f1227e4d9-image-1476893390336.gif\" - style=\"float: right\">\r\n\r\nWell, now we have the beginnings of a little - game! Time to go back to design mode to start embelishing our program.\r\n\r\n**You - try it:** - Add a text label that says \"Try to Catch the Button!\"\r\n\r\n\r\n\r\n* - Switch back to design mode\r\n* Drag a label on the screen <img src=\"https://images.code.org/c74c0e7fed308af92740d31cbd1098a9-image-1476892918698.png\">\r\n* - Set the text to be something like \"Try to Catch the Button!\"\r\n* Set any - other properties or styles of the text label that you want.\r\n\r\n\r\n" - cspu5_assess1_shortresponse_markdown_instruction: "**Short Response:** \r\n\r\nTwo - students, Kaleb and Hunter, are arguing in class about an App Lab project. - Kaleb states, “Huh, a button and an image are basically the same thing!”. Hunter - replies, “That doesn’t make any sense at all!”.\r\n\tExplain what Kaleb may - have meant by that statement." - cspu5_assess2_flowChart_markdown_instruction: "The human question below has - a yes/no answer. Create a flowchart that shows the logical progression of - the questions that need to be answered to arrive at yes or no. Your diagram - should consider the day of the week, time of day, and account for both possible - outcomes.\r\n\r\n| Question | Question |\r\n|----------------------------------|----------|\r\n| - Should I be at school right now? | (Input your flowchart here) |" - cspu5_assess2_match_markdown_instruction: "The following statements are true - about event handlers, if-statements, or both in App Lab. Place the letter - next to each statement into the appropriate area of the table below.\r\n\r\n**Statements:**\r\n\r\n* - A. Runs code in response to a user action\r\n* B. Runs code in response to - statement being evaluated to True\r\n* C. Evaluated sequentially once execution - is “inside” the statement\r\n* D. Can be triggered at any time\r\n* E. Used - to run a block of code\r\n\r\n_Note: Make a new line for each box._\r\n\r\n Event - Handlers: x, x\r\n if Statements: x, x\r\n Both: x, x\r\n" - cspu5_assess2_pseudocode2_markdown_instruction: "A _pseudocode_ program is - started below that asks the user for input and stores the value in a variable. Continue - writing pseudocode to accomplish this task: \r\n\r\nIf the hour is within - the school day (8 to 15) then display “Nice to see you!”, Otherwise, display - “It’s time to go home!\r\n\r\n DISPLAY (“Enter the hour of day (0-23)”)\r\n hour - <- INPUT ()" - cspu5_assess2_shortAnswer_markdown_instruction: "**Short answer:** When might - a programmer create a global variable instead of a local variable?" - cspu5_assess2_shortAnswer2_markdown_instruction: "**Short Answer:**\r\n\r\nIn - the previous class periods, you developed a digital assistant that is able - to “intelligently” respond to a limited set of questions and statements. Assume - you have created a much more robust digital assistant with capabilities similar - to those of Siri. Describe two possible user inputs: one question that a - digital assistant could “intelligently” answer easily, and another that it - could not. Explain what makes the first easy and the second difficult for - a digital assistant. (Consider the code used to develop your digital assistant.)" - cspu5_assess2_trueFalse_markdown_instruction: "For each expression below, circle - whether it evaluates to true or false. The variable temperature is initialized - as shown.\r\n\r\n var temperature = 30;\r\n\r\nExpressions:\r\n\r\n* (temperature - > 0) && (temperature < 32)\r\n* (temperature > 0) || (temperature < 32)\r\n* - (temperature != 0) && (temperature < 32)\r\n* (temperature == 0) || (temperature - > 32)\r\n* (temperature < 0) || (temperature > 32)\r\n\r\n_Note: Write \"true\" - or \"false\" on a new line for each expression._" - cspu5_assess3_shortAnswer_markdown_instruction: "**Short Answer:** Computer - models and simulations are used to formulate, refine, and test hypotheses. Describe - a scenario that could be modeled by a computer and explain one benefit and - one drawback of doing the simulation on a computer instead of real world. - \r\n" - cspu5_assess4_challenge_markdown_instruction: "**Challenge Question:** Imagine - a list that represents the height in feet of equidistant points along a mountainous - path. Here is an example of the data with a diagram that reflects the data. - For example: \r\n\r\n![](https://images.code.org/8046cbdb63d7e7d68eb133c58362b099-image-1477862090668.png)\r\n\r\nA - programmer wants to write a procedure that calculates the net elevation - total - number of feet a traveler goes up and down. For example, looking at the first - 3 segments of travel, the net elevation is 7 feet (up 3, up 1, down 3). \r\n\r\nWrite - procedure (in either JavaScript or pseudocode) called processPath(data) that:\r\n\r\n* - Accepts a list of elevation data as a parameter\r\n* For every value in the - list\r\n\t* Compute the absolute difference between that value and the value - next to it on the path\r\n\t* Add the difference to a running total\r\n* Return - the total elevation traveled\r\n\r\nIn writing your procedure you should assume - that you can call a function called _absDiff(a,b)_.\r\n\r\n![](https://images.code.org/0a7b91a830319d5d690ddf2efa264395-image-1477862205239.png)\r\n\r\nWrite - the full procedure below." - cspu5_assess4_scoreToGrade_markdown_instruction: "**Short Answer:** Jimmy wrote - the procedure scoreToGrade which accepts as a parameter score - a quiz score - in the range 0-100. The procedure is supposed to return a letter grade. He - feels confident his program is correct because he has tested it using the - scores 3, 29, and 67. Sally believes the program is incorrect because she - tested the values 73 and 86. The code is syntactically correct, and the programs - runs without generating an error, but the results are sometimes wrong. Why - does the procedure return the correct values for Jimmy’s tests but not Sally’s? - \r\n\r\n PROCEDURE scoreToGrade (percent)\r\n {\r\n IF (percent - < 60)\r\n {\r\n RETURN (\"F\")\r\n }\r\n ELSE - IF (percent >= 60)\r\n {\r\n \tRETURN (\"D\")\r\n }\r\n ELSE - IF (percent >= 70)\r\n {\r\n RETURN (\"C\")\r\n }\r\n ELSE - IF (percent >= 80)\r\n {\r\n RETURN (\"B\")\r\n }\r\n ELSE\r\n {\r\n \tRETURN - (\"A\")\r\n }\r\n }" - cspu5_assess4_shortAnswerShopping_markdown_instruction: "**Short Answer:** - Cecelia would like to write an app to help manage a trip to the grocery store. The - app will maintain a shopping list (a list of words) of all the items to buy. Describe - how Cecelia might use a second list in the app. What else might be tracked? - Describe how the list would be used and updated in the app.\r\n" - CSPU5_basic if - check driving age_markdown_instruction: "# You try it\r\n\r\nThis - is only *slightly* different from the voting example you just saw.\r\n\r\n* - **Add an if-statement** to the code to check the `age` to see if the person - is old enough to drive. (In most states you need to be 16 or older).\r\n* - **Display a message if the person is old enough drive.**\r\n\r\nYou can add - an if-statement by dragging it out from the toolbox. We've provided the - console.log message you should use. Just drag it inside the if-statement. This - animation shows most of what you have to do.\r\n\r\n![](https://images.code.org/4ef3562d035ffacf292daac508fea34f-image-1479746969387.gif)" - CSPU5_basic if - DIY secret number_markdown_instruction: "# Do it yourself - - What's the secret number?\r\n\r\nInsert lines of code between the \"Welcome\" - and \"Goodbye\" that do the following:\r\n\r\n1. use `promptNum` to ask the - user to enter the \"secret number\"\r\n2. add an `if` statement to check if - the number is the secret (you can make up your own secret number)\r\n3. use - `console.log` to display a message if the user guessed correctly\r\n\r\n**NOTE:** - Don't go overboard here adding messages. Just get practice adding a prompt - and an if-statement on your own. Make sure it works and move on.\r\n" - CSPU5_basic if - voting examle_markdown_instruction: "# Recreate the voting - example\r\n\r\n* Replace `condition` with a Boolean expression to check if - the person is 18 or older.\r\n* Run the program a few times, entering different - ages at the prompt\r\n* Make sure you generate the two outputs that are possible - from this code.\r\n\r\n" - CSPU5_basic if-else - driving age_markdown_instruction: "# You try it\r\n\r\nLet's - modify the driving age example to add an `else` clause.\r\n\r\n* **Add an - `else` ** to the if-statement.\r\n* **Add a console.log** message inside the - else clause that says something like \"sorry you can't drive yet\".\r\n\r\nYou - can add an else-statement by clicking on the `+` attached to the if statement. We've - provided some starting code.\r\n\r\n**BONUS** - if they are not old enough - to drive you could do the math and tell them how many years they have to wait." - CSPU5_Debugging predict unexpected behavior - two onEvents to one ID_markdown_instruction: "# - Debugging Unexpected Behavior\r\n\r\n## Predict - Observe - Reflect\r\n\r\nTo - understand a new piece of code good programmers often try to **first make - a prediction about what will happen before running the program**. \r\n\r\nBy - forcing yourself to make a prediction (it doesn't matter if you're right - or not) you are immediately alerted to any **unusual or unexpected behavior** - and you can ask yourself, *\"Huh? why did it do that? Was that supposed to - happen?\"* It might not be an error, but you gain invaluable insight and - actually **learn faster**.\r\n\r\n**Predict:** For the code that is here, - what will happen when the \"Click Me\" button is clicked? \r\n\r\n * **Study - the code** - This program has **two event handlers** listening for events - on the same button?\r\n * **Force yourself to make a prediction!** - \"I don't - know\" is not a prediction!. \r\n\r\nHere are some options to think about:\r\n\r\n* - There will be an error in the console immediately after hitting run\r\n* There - will be an error in the console but not until you hit the button\r\n* Program - does nothing\r\n* turtle only moves forward\r\n* turtle only turns left\r\n* - turtle move forward *then* turn left \r\n* turtle turn left *then* move forward?\r\n* - something else? \r\n\r\n**Observe:** Once you've made a prediction, close - these instructions and **run the program** to observe what happens.\r\n\r\n**Reflect:** - Was your prediction correct? If not what about your mental model might need - to change? Talk about it with a classmate and experiment with the code to - make sure you understand what is happening." - CSPU5_FinalizeChaserGame_markdown_instruction: "# Add an Image and Make a Chaser - Game!\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" - style=\"float: right\">\r\n\r\n**Now You Try it** - add an image to your app - and modify the code so that the image jumps around the screen rather than - the button. Your little game should have:\r\n\r\n* **Text** on the top of - the screen with a title or instructions for what to do.\r\n* **An image** - that \"runs away\" (moves randomly) based on some mouse event.\r\n\r\n**Tips:**\r\n - * **Hint** - the easy way to do this is to simply change the IDs in `onEvent` - and `setPosition` to respond to the image instead of the button.\r\n * Remove - the button from the app after the image is working. We don't need it anymore.\r\n - * Change the label text so that the instructions make sense for your game.\r\n - * The game is even more fun if you use the `mouseover` event instead of `click`\r\n\r\n**Optional - Extensions**:\r\n * Make the background interesting\r\n * Add another image - that runs away.\r\n * See what happens with the commands `hideElement` and - `showElement`\r\n * Have two UI elements where interacting with one controls - or does something to the other.\r\n\r\n**Finalize your \"Chaser Game\"** and - click Finish.\r\n\r\n" - CSPU5_moveTurtleOnButtonClick_markdown_instruction: "# onEvent\r\n\r\n**You - try it!** - Make the turtle move forward when the button is clicked.\r\n\r\n* - **Add an `onEvent` block** \r\n* Set the **id** of your button\r\n* Add `moveForward` - to the function definition\r\n\r\n* **Run the program** to make sure it works.\r\n* - **Try changing the event type** to something like *\"mouseover\"* and see - what happens. Not all event types will work with buttons but it's fun to - play a little bit.\r\n\r\nOnce you've got the program responding to some - event, congratulations! You've just made your first interactive app. \r\n\r\n**Click - Finish** to move on to the next problem.\r\n\r\n" - CSPU5_playWithEventTypes_markdown_instruction: "\r\n# Play with different event - types\r\n\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 - AM.png\" style=\"float: right\">\r\nIf you haven't yet, you should experiment - with different event types with your `onEvent` blocks. The ones that will - work best here are mouse-related ones such as:\r\n * click\r\n * mousemove\r\n * - movedown\r\n * mouseup\r\n * mouseover\r\n\r\n*There are some events that - capture keystrokes from the keyboard. These are interesting, but they do not - work easily with buttons. We'll stick to mouse events for now, and get to - keys later.*\r\n\r\n**Be sure** to experiment with each of the ones that start - with \"mouse...\".\r\n\r\nOnce you've have played a little bit, click Finish - to move on.\r\n\r\n" - CSPU5_predict_applab_onEventWithWrongID_markdown_instruction: "# Debugging - Event-Driven Programs: IDs\r\n\r\n**You Try it: Checking IDs** -- Your first - debugging task will be to verify that the button IDs match the event-handlers. You'll - also see error messages in the **\"Debug Console\"**\r\n\r\n![](https://images.code.org/6bb61c1ab1af5c0ce84a8cc4dc9b95cd-image-1476970435861.png)\r\n\r\n1. - **Run the program** and inspect the error messages in the Debug Console.\r\n * - **NOTE:** an error message *only* indicates where the computer ran into trouble. It - doesn't tell you the root cause of the problem, necessarily.\r\n2. **Investigate** - -- Use the **error message as a clue** to investigate the possible problem.\r\n3. - **Fix it** -- Make a change that you think will fix the problem.\r\n4. **Run - the program** and verify that not only are there no error messages but the - program works as intended (turtle moves forward on button click).\r\n5. **Didn't - work?** - repeat the steps above. And stick with it! You'll get it eventually.\r\n\r\n**Remember:** - You can see the ID of a UI element by just hovering your mouse over it.\r\n<details><summary>Hint? - [click here]</summary>\r\n\r\n<li>In this case the ID of the button does not - match the ID in the onEvent command</li>\r\n<li>The error message is saying: - \"you're telling me to listen to events on a UI Element with id 'button1' - and no such thing exists!\" </li><br>\r\nThere are two ways to fix this:<br>\r\n<li>Change - the ID in the event handler code to match the button ID in design mode.</li>\r\n<li>...or - Change the button ID in design mode to match the event handler</li></details>\r\n\r\n" - CSPU5_Project - Multi Screen App_markdown_instruction: "# Multi Screen App\r\nYou - will be creating your own multi-screen app to practice designing user interfaces - and writing event-driven programs. \r\n\r\n**Look at the Project Guide and - Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* - Your app will have at least **4 screens**.\r\n* Your app should include **text, - images, buttons, and sound**.\r\n* There should be **no “getting stuck” on - any screen.** It should always be possible to navigate from a screen in your - app to some other screen. \r\n* Your program code should follow **good style**.\r\n* - Your user interface should be **intuitive to use**." - CSPU5_setPosition to fixed location_markdown_instruction: "# Using setPosition\r\n\r\n<img - src=\"https://images.code.org/b664824ffeb3347b2e0b6d12447b4e8b-image-1476891499229.gif\" - style=\"width: 150px; float: right;\">\r\n\r\n**Now you try it** - use [setPosition](#triggercallout=setPosHover) - to **move the button to the middle of the screen when clicked**. \r\n\r\nWe've - set up a small project for you with a button (id: `moveBtn`) already added - in design mode.\r\n\r\n1. Add an `onEvent` block\r\n2. Drag a `setPosition` - command into the event handler function\r\n3. Set the x,y coordinate so that - the button ends up in the middle of the screen.\r\n * You'll need to experiment - a little bit to find coordinates that work for you.\r\n * Hover over the screen - to find a good starting point.\r\n\r\n**Tip**: when you see a command that - is linked like this: [setPosition](#triggercallout=setPosHover) click it! - -- it will show you other hints.\r\n\r\nOnce you've got the button moving - to the middle of the screen click Finish to move on to the next challenge.\r\n" - CSPU5_turtleDriver_add2ndButton_markdown_instruction: "<img src=\"https://images.code.org/7447f9f6df9a1931297e1f8fa7284f28-image-1481582422206.gif\" - style=\"float: right; width: 200px\">\r\n\r\n# Practice! Add another button\r\n\r\nNow - that you know the pattern try it out. **Add a 2nd button to the screen that - turns the turtle to the left when clicked.** The finished product should - look similar to the image shown here.\r\n\r\nRemember the steps:\r\n\r\n 1. - **Design Mode**: drag another button onto the screen\r\n 2. Switch to Code - Mode: **add an onEvent block** to the code\r\n 3. **Add code** inside the - function to make the turtle turn left\r\n 4. Run. Test. Debug\r\n\r\n<details><summary>Need - Help? [Click Here]</summary>\r\n\r\n<h3>\r\nHere is an example of adding other - button to make the turtle turn left\r\n</h3> \r\n\r\n<div style=\"column-count: - 3; column-gap: 20px; column-rule: 0.5px solid #00adbc; -moz-column-count: - 3; width: 100%\">\r\n\r\n<p><span style=\"font-weight: bold; color: #00adbc; - font-size: 200%;\">1.</span>\r\nAdd a UI element to the screen in Design Mode</p>\r\n\r\n<p><span - style=\"font-weight: bold; color: #00adbc; font-size: 200%;\">2.</span>\r\nAdd - another onEvent block to the code. <strong>Note:</strong> you need new onEvent - block <em>for every</em> event you want to capture.</p>\r\n\r\n<p><span style=\"font-weight: - bold; color: #00adbc; font-size: 200%;\">3.</span>\r\nAdd code to the event - handler function you want.</p>\r\n\r\n</div>\r\n\r\n<img src=\"https://images.code.org/f695b83911560bf628750ed2a134a38c-image-1476818017592.png\" - style=\"display: block; width: 100%\">\r\n\r\n<div style=\"column-count: 1; - column-gap: 20px; column-rule: 0.5px solid #00adbc; -moz-column-count: 3; - width: 33%;\">\r\n\r\n<p><span style=\"font-weight: bold; color: #00adbc; - font-size: 200%;\">4.</span>\r\n<strong>Debugging Tip:</strong> if you hover - your mouse over a UI element while in code mode, it will show you the ID of - the element. This very useful when you have a lot of elements on the screen.\r\n\r\n</div>\r\n\r\n<div - style=\"clear: both\">\r\n \r\n</div>\r\n\r\n\r\n\r\n\r\n</details>\r\n" - CSPU5_U3 - Arrays - appendItem_markdown_instruction: "# Adding Items to an - Array\r\n\r\n<img src=\"https://images.code.org/c9244eb598416b5a3d9baac088bbaca8-image-1447267168567.39.06 - PM.png\" style=\"width: 250px; float: right\">\r\n\r\nIn our last exercise - we created our array and initialized it with some values. Another way to do - this is to **add items to your array on separate lines**. The simplest way - to do this is to add a new item to the end of your array using the `appendItem` - command.\r\n\r\n<img src=\"https://images.code.org/74a2f2660d5aea8dec7dc4933f2c68d3-image-1447185901732.04.50 - PM.png\" style=\"width: 250px; float:right; border: solid 1px black\">\r\n\r\nTo - append means to add or to join. When you append an item to an array you actually - add a new location to the end of the array that contains the new value, so - that the total size of the array grows by one. Since you can always add items - to an array after creating it, it is very common to **create an empty array - and then add values in subsequent portions of your program**.\r\n\r\n# Do - This:\r\n\r\n* **Read the documentation** for `appendItem`.\r\n* Create an - **empty array** called `oddNumbers`.\r\n* Use `appendItem` to add the odd - numbers 1-11 to your array.\r\n\r\n![](https://images.code.org/41883beff3cb9810fed37ae684dc1fe8-image-1448312407634.gif)\r\n\r\n* - **Use `console.log`** to confirm your array is holding the correct values. - The output should look like the example below.\r\n\r\n![](https://images.code.org/4daf7aff37f4796185fc608f20856a12-image-1489697355089.png)" - CSPU5_U3 - Arrays - assignment_markdown_instruction: "# Setting Values by Index\r\n\r\nEach - location in an array can be treated like its own variable. We've already - seen how we can use bracket notation to reference values stored at specific - locations in an array. Just like with variables, **we can assign the value - of a specific location in an array using `=`** (the assignment operator).\r\n\r\n**Example:** - The value at index 0 of this array is set to 10.\r\n\r\n![](https://images.code.org/d0bf9901deeffb1cd6553c27c38046a4-image-1447172887059.27.25 - AM.png)\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/cfa8d82d89e5227f22e3afe5f9c49698-image-1447366432447.13.11 - PM.png\" style=\"width: 200px; float: right\">\r\n\r\nStarter code is provided - that creates an array of 0's and 1's. **Set all the values in this array - to be 0**. \r\n\r\n* Use **indexes** and the **assignment operator** `=` to - **set all the 1's to be 0**.\r\n* Check the output of the `console.log` to - confirm **the array only contains 0's**. Example shown on the right.\r\n\r\n" - CSPU5_U3 - Arrays - assignment2_markdown_instruction: "# Array Values: Arithmetic\r\n\r\nYou - can reference locations in arrays in arithmetic expressions, just like you - might a variable.\r\n\r\n![](https://images.code.org/a7d11342d8c72b34f2268e4104e43fbd-image-1447189790574.09.32 - PM.png)\r\n\r\nThe starter code **creates an empty array and adds three random - values to it**. \r\n\r\n![](https://images.code.org/51b7c713ae398299a85ee8c0b9ee04f3-image-1447190702799.23.46 - PM.png)\r\n\r\nYou will be adding code to your program that calculates the - sum of the values in the array.\r\n\r\n**Notice** the difference between displaying - an array as part of a string or by itself. Example:\r\n\r\n* code: `console.log(myNumbers)` - displays *with* brackets as: `[1, 2, 3, 4]`\r\n* code: `console.log(\"my list: - \"+myNumbers)` displays *without* brackets as: `my list: 1, 2, 3, 4`\r\n\r\nSo - when it's part of a string it *does not* print the square brackets around - the ends of the list. This is a \"feature\" of the language with no great - explanation. In the first case it sees only a list and it produces a more - technical representation. In the second case the system is trying hard to - convert the list to a nice looking string.\r\n\r\n# Do This:\r\n\r\n* **Add - a variable** to your program to hold the sum of the array values.\r\n* Assign - the value of the variable to **the sum of the three array values**.\r\n* Use - `console.log` to confirm that you have correctly calculated the sum of the - values. Below is sample output from one run of the program.\r\n\r\n![](https://images.code.org/a9ca48808e8e833d92b3bcdebc7b0bd4-image-1447189975738.12.31 - PM.png)" - CSPU5_U3 - Arrays - assignment3_markdown_instruction: "# Reassigning Array - Values\r\n\r\nWe've already seen many examples of how **a location in an - array can be treated identically to a variable**. The last exercise we'll - perform to prove this point is **reassigning array values**. The syntax for - reassigning values stored in an array is identical to that used when reassigning - variables. Even the `++` notation to increase a value by one works!\r\n\r\n![](https://images.code.org/3cbd11c69e42daddce28e059388097db-image-1464228660945.png)\r\n\r\nThe - program you're about to see **creates an empty array and adds three random - values to it**. You will be adding code to the program that **increases each - value by one**.\r\n\r\n# Do This:\r\n\r\n* Add code to the program that **increases - the value stored at each location in the array by one**.\r\n* Use `console.log` - to confirm that you have correctly increased the values. Below is sample output - from one run of the program.\r\n\r\n![](https://images.code.org/42ca1f874a8a7b71e29b2ffd80ec31c3-image-1447191826756.43.37 - PM.png)\r\n\r\n" - CSPU5_U3 - Arrays - createFirstArray_markdown_instruction: "# Creating an Array\r\n\r\nArrays - have many features which make them different from variables, but **most of - what you've learned about variables also applies to arrays**. For example, - just like a variable:\r\n\r\n* Arrays should be given a **descriptive and - meaningful** name.\r\n* Arrays are created using `var`.\r\n* Arrays can be - initialized/set using `=`.\r\n\r\n**Example: Creating an Array**\r\n\r\n![](https://images.code.org/0b7d201db2990f0189963bb6a565a057-image-1447097600773.33.08 - PM.png)\r\n\r\nThis array contains 3 values: 100, 250, 500. Notice that the - values are separated with commas `,` and that the entire array is enclosed - in brackets `[ ]` . We can use `console.log` to display the contents of an - array just like we would a variable.\r\n\r\n![](https://images.code.org/7d4be70330108e3e5d6325fa4e721ef4-image-1447097904253.38.18 - PM.png)\r\n\r\n# Do This:\r\n\r\n* Following the format described above **create - an array** which contains **the even numbers from 0 to 10**.\r\n\r\n<img src=\"https://images.code.org/872be32ff4ba4e9c733435d524a95c9e-image-1448311800271.gif\" - width=450px>\r\n\r\n* Make sure your array has a **descriptive and meaningful - name**.\r\n* Use `console.log` to display the contents of your array. Below - is an example of the output your program should generate.\r\n\r\n![](https://images.code.org/230d988cf99556db04a8a4ad6a8d8a47-image-1447364062049.33.53 - PM.png)\r\n\r\n" - CSPU5_U3 - Arrays - Demo App_markdown_instruction: "# My Favorite Things\r\n\r\nCheck - out this simple app for creating a collection of your favorite things. **We're - going to be working towards building this app** over the next several exercises. - As you might expect, this application **uses an array** to store and organize - information.\r\n\r\n# Do This:\r\n\r\n* Use the \"My Favorite Things\" app - and try to **predict how arrays are used to create the functionality you observe.** - \r\n* Some features to notice:\r\n\t* The app keeps track of a **list of your - favorite things**.\r\n * You may use buttons to **move forward and backward - through your list**.\r\n * The **current entry and total number of entries** - are indicated at the top.\r\n * You may **add a new entry** at the current - location in your list." - CSPU5_U3 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions - as Indexes: Using Variables\r\n\r\nWe can use **any expression that evaluates - to a number** as an index in an array. Here are some examples:\r\n\r\n![](https://images.code.org/6d4ecc9249dc9f3a845196b04d833c1a-image-1447268711944.24.53 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **Starter code** has been provided which - creates an array of colors.\r\n* **Write code** that logs **a random color - from this list** to the console by generating a value for a random index. - Try to write your program using `list.length` rather than hard-coding the - length of the list.\r\n\r\n![](https://images.code.org/d0463c0f2528e04c396f3b9cf219c3ed-image-1447370139548.gif)" - CSPU5_U3 - Arrays - favThings addItem_markdown_instruction: "# Adding New Items\r\n\r\nNow - we want our user to be able to add items of their own to the list. As you - might have guessed, this is as easy as inserting an item into our array at - the current index.\r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to - the \"Add\" button.\r\n* **Write code** in your event handler that:\r\n\t* - Uses `getText` to access the user's new item.\r\n * Uses`insertItem` to - add that item to your array at the current index.\r\n * Calls your update - function to update the screen (the new item should be displayed).\r\n* Run - your program to confirm that the user **can add items to the list** and that - the output displayed is correct." - CSPU5_U3 - Arrays - favThings bounds_markdown_instruction: "# *if* Statements: - Staying in Bounds\r\n\r\nCurrently the user can increase or decrease the value - in the global index **past the bounds of your array**. As a result you've - probably already seen that errors are generated.\r\n\r\nTo prevent this from - happening, we're going to **add `if` statements** to the event handlers on - the \"Next\" and \"Last\" buttons. They should check the value of the global - index variable before changing it. If the user is about to step out of the - bounds of your array they should either:\r\n\r\n* **Block:** Do not change - the index if it will result in a value that is out of bounds.\r\n* **Wrap:** - Set the index to be the other end of the array. In other words, going past - the end of the array moves the index back to 0 and going past the beginning - of the array sets the index to the last in the array (`list.length` will be - helpful here).\r\n\r\n# Do This:\r\n\r\n* **Add `if` statements** to the event - handlers on the \"Next\" and \"Last\" buttons that **prevent the global index - from going out of bounds** using one of the two strategies described above.\r\n* - Run your program to confirm that the user **cannot go out of bounds** and - that the output displayed is correct." - CSPU5_U3 - Arrays - favThings Counting Variable_markdown_instruction: "# Current - Index\r\n\r\nThis app also allows a user to scroll through individual items - in the array. In order to keep track of which index we are currently viewing, - our application will need **a global variable that stores the current index**. - In coming exercises we'll want our global index to change, so let's **make - sure that your code references your global index** rather than fixed values.\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 - AM.png\" style=\"width: 250px; float: right\">\r\n\r\n* Create a **global - variable** that will be used to keep track of the current index in the array. - Set this variable to 0.\r\n* Update `setText` which displays the words to - show your first favorite thing using **the global index variable** instead - of a hard-coded number. \r\n* Update `setText` which displays the current - item number to use **the global index variable** instead of a hard-coded number.\r\n\t* - **Hint:** since arrays are zero-indexed **you will have to add one to your - index** to generate the correct value to display.\r\n* **Note:** neither of - these outputs will be able to change yet. Don't worry, we'll be taking care - of that in coming exercises!" - CSPU5_U3 - Arrays - favThings createArray_markdown_instruction: "# Create Your - Array\r\n\r\nNow that we've dealt with our design elements we'll need to - start writing the actual code of our app. This app keeps track of a list of - items, so we know that **we'll need to create an array** to store them. \r\n\r\n# - Do This:\r\n\r\n* **Create an array** that will hold your list of favorite - things.\r\n* **Add three of your own favorite things to your array.**" - CSPU5_U3 - Arrays - favThings firstOutput_markdown_instruction: "# Displaying - Information to the User\r\n\r\nBefore we make our application interactive, - we'll want to practice creating some simple user output. When the app starts - up, the first item in your list should be displayed. Let's write the code - that will display this information to the screen. \r\n\r\n# Do This:\r\n\r\n<img - src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 - AM.png\" style=\"width: 250px; float:right\">\r\n\r\n* Using `setText` set - the main text area to show your first favorite thing.\r\n* Using `setText` - and `list.length` set the text indicating what item of the list the user is - currently viewing.\r\n\t* **Hint:** since arrays are zero-indexed **you will - have to add one to your index** to generate the correct value to display.\r\n* - **Note:** neither of these outputs will be able to change yet. Don't worry, - we'll be taking care of that in coming exercises!\r\n\r\n" - CSPU5_U3 - Arrays - favThings giveIDs_markdown_instruction: "# Getting Started: - Creating IDs\r\n\r\nTo get your application off the ground we've provided - **the user interface elements that you will use in your application**. Unfortunately - they all currently have **default IDs** which don't reflect how the elements - will be used.\r\n\r\n# Do This:\r\n\r\n* **Create a descriptive and meaningful - ID** for each element in your app." - CSPU5_U3 - Arrays - favThings keepPlaying_markdown_instruction: "# Keep Going!\r\n\r\nYour - app should now be fully functional - nice job! There are of course plenty - of new pieces of functionality to add. If you have time feel free to make - any improvements you wish. Here are some ideas:\r\n\r\n* Allow the user to - **append items** rather than add them at the current location.\r\n* Give the - user the ability to **remove** the item at the current index. This can be - a little tricky if you **remove the item at the end of the list** so see if - you can account for that.\r\n* Only add words **if they are not blank**.\r\n* - **Improve the appearance** of the app." - CSPU5_U3 - Arrays - favThings Next_markdown_instruction: "# Next Button\r\n\r\nNice - work! Your application should now have some simple output displaying one of - your favorite things and indicating which item of your list you are showing. - To make things more interesting, however, **we want to be able to change which - item we display**.\r\n\r\nTo change the item displayed, the user will use - the \"Next\" and \"Last\" buttons. These should **increase or decrease the - global index by one and then you should update the information displayed on - the screen**. To start out with, however, we'll just be writing code for - our Next Button. \r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to the - \"Next\" button.\r\n* Write code in this event handler that **increments your - global index variable** and then **updates the output on the screen**.\r\n\t* - **Note:** If your code from the last exercise was written to reference this - variable then you should just be able to reuse it once you've incremented - your variable. We'll talk more about this in the next exercise.\r\n* Run - your program to **confirm that the user can move forward through the list - and that the output displayed is correct**.\r\n\t* **Note:** You may notice - that your program throws an error if the global index variable goes out of - bounds. Don't worry about this for now - we'll fix it in a later exercise." - CSPU5_U3 - Arrays - favThings Prev_markdown_instruction: "# Last Button\r\n\r\nOur - user can now move forward through our list of favorite things, and we're - about to write code that allows them to move backwards as well. If you've - written your code to reference your global index then this should only require - you to decrease its value by one and reuse code that updates the screen output. - Before we write the code for backwards let's work on cleaning up our code.\r\n\r\n**Removing - Repeated Code:** Once you add the code for moving backwards through your array, - your program will have three places where it updates the screen by setting - the text of your screen elements. Rather than repeating this code we should - **create a function** that updates the screen and then call it every time - we need to refresh those elements. This will not only make our program easier - to read and avoids the errors that can arise from redundant code, but it also - makes it easier to make changes to how our program runs, since all the code - that updates the screen is in a single place.\r\n\r\n# Do This:\r\n\r\n* **Write - a function** that contains the `setText` commands you have used to update - the screen.\r\n* **Replace** the places in your code where you used to have - these commands with **calls to your new function**.\r\n* **Add an event handler** - to the \"Last\" button that decreases the **global index variable** by one - and then updates the screen by calling your new function.\r\n* Run your program - to confirm that the user **can move forward AND backward** through the list - and that the output displayed is correct.\r\n * **Note:** You may notice - that your program throws an error if the global index variable goes out of - bounds. Don't worry about this for now - we'll fix it in a later exercise." - CSPU5_U3 - Arrays - indexPractice_markdown_instruction: "# Index Practice\r\n\r\nIt - will take some practice to get comfortable using array indexes. We'll do - a couple of exercises to build your confidence.\r\n\r\n# Do This:\r\n\r\n<img - src=\"https://images.code.org/4d52429f1d6f8e7812e14d73e2a89c45-image-1447366245418.08.51 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has - been provided that creates an array called `myNumbers`.\r\n\r\n* Use `console.log` - and array indexes to write the contents of `myNumbers` to the screen in order, - as shown to the right. Your commands should be of the form `console.log(myNumbers[index])`.\r\n\r\n" - CSPU5_U3 - Arrays - insertingItems_markdown_instruction: "# Inserting Items: - Array Indexes\r\n\r\nIf you want to add elements in the middle of your array - you can use `insertItem` to specify an **index** at which an item should be - inserted.\r\n\r\n![](https://images.code.org/46815edd373b9fe51c4efcf145474ecc-image-1447252675635.37.24 - AM.png)\r\n\r\nJust like `appendItem`, `insertItem` creates a new location - in the array. However `insertItem` allows you to insert an item anywhere in - the array, not just at the end, and it shifts all elements at or after its - index one location over.\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** - for `insertItem`.\r\n* **Starter code** has been provided which appends some - strings to an array, but right now they don't form a complete sentence.\r\n* - Use `insertItem` to **individually insert strings to your array** to form - a complete sentence.\r\n* Use `console.log` to confirm you succesfully created - your sentence.\r\n\r\n![](https://images.code.org/a77efe777082d387f64c4761d890c560-image-1447254451590.06.59 - AM.png)" - CSPU5_U3 - Arrays - insertionErrors_markdown_instruction: "# Out of Bounds\r\n\r\nIn - many languages trying to access indexes of an array that don't exist will - create an error. **JavaScript allows for some strange behavior** with arrays - that it's useful to see, even though **you will likely never use this functionality**.\r\n\r\n**Warning:** - some of this code will generate errors or work in unexpected ways. Don't - spend a long time trying to understand weird results. The point to take from - this is **referencing indexes that are out of bounds will almost never do - what you intend**, and we'll be learning ways to avoid this as we move forward.\r\n\r\n# - Do This:\r\n\r\n* **Starter code** has been provided which creates an array - with three elements.\r\n* Uncomment the **first command that references indexes - that are out of bounds** and run the code.\r\n* **Examine the output** and - try to understand what is happening.\r\n* Reset and then **recomment** the - line after you've used it. \r\n* **Repeat the process for all the lines.**\r\n\r\n**Note:** - We have used a different style of comment in this program. `/* long block - comment */` is used when you want to write a multiple-line comment. " - CSPU5_U3 - Arrays - introIndex_markdown_instruction: "# Accessing Items in - an Array\r\n\r\nAn array is comprised of many locations. You can individually - set or reference the information at each location of your array just like - a variable. To tell your locations apart each has a separate number, or **index**, - that identifies it.\r\n\r\nArrays in JavaScript are **zero-indexed** which - means the first index is 0. This is similar to binary number systems which - begin counting at 0. For example an array of 10 items would have indexes 0-9. - As a result **the last index is always one less than the length of the array**.\r\n\r\n**Accessing - Array Items by Index:** If you know the index of the item you wish to access - you can reference it using square brackets `list[index]` . The example below - prints the value of the 4th element in the array. \r\n\r\n![](https://images.code.org/8b2da597fccaeeafb30b04991074cd8b-image-1447365422277.56.45 - PM.png)\r\n\r\n# Do This:\r\n\r\n**Starter code** has been provided which - creates an array of the numbers 1 through 10\r\n\r\n* Use `console.log` to - display the first item in your array.\r\n* Use `console.log` to display the - last item in your array.\r\n* Use `console.log` to display the number 5 from - the array." - CSPU5_U3 - Arrays - length_markdown_instruction: "# *Array.length*\r\n\r\nAs - we saw in the last exercise, there are many strange behaviors that can result - from referencing array indexes that are less than 0 or greater than the highest - index in your array. **If want to avoid these kinds of errors then it is useful - to know how long your array is,** especially since we've seen that arrays - can grow and shrink during the course of our program.\r\n\r\n![](https://images.code.org/419a610bedaaf709d400c51a6399f482-image-1447263621427.40.15 - AM.png)\r\n\r\nYou can always check the current length of your array using - the command `list.length` where \"list\" is the name of your array. It evaluates - to a number indicating how many items are in your array.\r\n\r\n# Do This:\r\n\r\n* - **Starter code** has been provided which creates several long arrays.\r\n* - **Use `list.length` and `console.log`** to determine how many items are in - each array. An example of the output is below.\r\n\r\n<img src=\"https://images.code.org/f309b94e58f252599de709dd568441fd-image-1447690174179.08.29 - AM.png\" style=\"width: 250px\">" - CSPU5_U3 - Arrays - lengthMinus1_markdown_instruction: "# Expressions as Indexes: - *list.length - 1*\r\n\r\nWe have been accessing information in an array by - using numbers, but we can actually use **any expression that evaluates to - a number as an index in our array**. The first example of this we will explore - is accessing the last item in our array.\r\n\r\nArrays are **zero-indexed**, - which means that the first index is 0. Therefore an array with a length of - 3 will have indexes 0, 1, and 2. Notice that **the last index is 1 less than - the length**. This will always be the case, and so we can use this expression - to access the last element in any array:\r\n\r\n![](https://images.code.org/4b9d62e451188ea00a58102110e447f6-image-1447267224677.28.31 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **Starter code** has been provided that - which creates several arrays.\r\n* Use the syntax provided above and `console.log` - to display the final item in each list.\r\n" - CSPU5_U3 - Arrays - remove_markdown_instruction: "# Removing Items\r\n\r\nSometimes - we want to remove something from an array. In order to do so you'll need - to specify the **index** of the item that should be removed.\r\n\r\n<img src=\"https://images.code.org/350e3dfe234b1ce1e47e11bc0629b47d-image-1447272428285.06.40 - PM.png\" style=\"width: 250px\">\r\n\r\n**Note:** `removeItem` removes the - location in the array at the index provided. As a result **the array is one - location shorter and all the indexes after the index provided will have their - index decreased by one**.\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** - for `removeItem`.\r\n* **Starter code** has been provided which creates an - array of strings.\r\n* Use `removeItem` to **individually remove all the \"REMOVE\" - strings in your array** to form a complete sentence. \r\n* Use `console.log` - to confirm you succesfully created your sentence.\r\n\r\n**Note:** Keep an - eye out; your indexes will shift as you remove items.\r\n\r\n![](https://images.code.org/5ba2247cafcfcb5d8be80db32126105e-image-1447273315312.21.17 - PM.png)" - CSPU5_U3 - Arrays - stringsInArrays_markdown_instruction: "# Arrays Can Hold - Strings\r\n\r\nSo far we have been using arrays to hold numbers, but each - location in an array could hold a string instead.\r\n\r\n![](https://images.code.org/5088def6c9aa8c114fc415bf25d83511-image-1447195709238.48.13 - PM.png)\r\n\r\n**Note:** It is possible for an array to hold both strings - and numbers, but **typically you will only want your arrays to hold one type - of data**.\r\n\r\n# Do This:\r\n\r\n* Create an **empty array**.\r\n* Use - `appendItem` to **individually add strings to your array**, forming a sentence - of at least **5 words**.\r\n* Use `console.log` to confirm you succesfully - created your sentence.\r\n\r\n![](https://images.code.org/72b8a2bf0a98be39fba73498cb6ed5da-image-1489697463827.png)" - CSPU5_U3 - Arrays - Wrap Up 1_markdown_instruction: "## Choose: Array or Variable?\n\nYour - app needs to store the following information. For each type of information, - decide whether you would use an array or a variable to store it:\n \n* All - the messages a user has sent\n* The highest score a user has ever reached - on the app\n* A username and password to unlock the app\n\n" - CSPU5_U3 - Arrays - Wrap Up 2_markdown_instruction: "## Free Response: Choosing - Array or Variable\n\nIn general, when do you think you should store information - in an array, and when should you use a variable?\n" - CSPU5_U3 - Canvas - 200dots_markdown_instruction: "# Loops on the Canvas\r\n\r\nTo - make things interesting, we're going to quickly add 200 dots to our canvas - by using a `for` loop. **Locations on the canvas are relative to the top-left - corner of the canvas, not the screen**. Therefore you will need to know the - dimensions of your canvas in order to randomly place dots throughout it. You - can find this information in Design Mode:\r\n\r\n![](https://images.code.org/8e0c868a21f5c674efb6adef1040ec2b-image-1448040822360.33.29 - AM.png)\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/345b625e6954dc1ea2310c97aa08c59f-image-1448243004939.gif\" - style=\"float: right\">\r\n* Add a **`for` loop that runs 200 times.**\r\n* - Place the **`circle` command inside the loop** and **decrease the radius** - (try 20).\r\n* **Use `randomNumber` to randomize the `x` and `y` values used - to place your dots**. The ranges you select should be the width and height - of your canvas. \r\n* **COMMON MISTAKE ALERT:** If you test your code before - setting the `x` and `y` values of the circle to random numbers, it will look - like there's only one dot. But really you will have just drawn 200 dots - all at the same (x, y) position.\r\n\r\n" - CSPU5_U3 - Canvas - appendToArray_markdown_instruction: "# Store Your Dots\r\n\r\nNow - we're going to get into the core of the activity. We will be **creating a - record of every dot your user draws**.\r\n\r\nTo do this, we will append *every* - `event` parameter to an array as events are generated. When we store every - mouse location in an array, we can make many interesting effects and redraw - the image in different ways, by looping over the array. First let's just - make sure we can capture them all.\r\n\r\n# Do This:\r\n\r\n* Create a new - array outside the event handler function: `var eventList = []`.\r\n\r\n* In - your event handler, before you call the `circle` command, use `appendItem` - to add the `event` parameter to `eventList`.\r\n![](https://images.code.org/98f98c0895fafa87b8f6617e5b4629af-image-1448080702748.gif)\r\n\r\n* - **Run the program** and draw some dots.\r\n\r\n* In the Debug Console type - `console.log(eventList)` and inspect the contents. You should have a record - of every event parameter used to draw a dot! (It might be a lot.)\r\n![](https://images.code.org/425bdde5f2d87b34c037b533600f19b4-image-1448080857409.gif)" - CSPU5_U3 - Canvas - changeToMouseMove_markdown_instruction: "# Drawing on *mousemove*\r\n\r\nCurrently - the user can click to add dots, but we want **to place dots wherever the user - moves the mouse on the canvas**.\r\n\r\nTo place dots whenever the mouse is - moved, we'll be **changing the event type from `click` to `mousemove`**.\r\n\r\n# - Do This:\r\n<img src=\"https://images.code.org/960ac863ac908506724eeb9f11165672-image-1448246938599.gif\" - style=\"float: right\">\r\n* Change the event type in your event handler **from - `click` to `mousemove`**.\r\n* **Run your program** to confirm that dots are - being drawn anywhere the user moves the mouse.\r\n\r\n**Your user is now able - to draw anywhere they want on the screen!**" - CSPU5_U3 - Canvas - clickToAdd_markdown_instruction: "# Click to Add Dots\r\n\r\nLoops - are one way of quickly adding dots to our canvas, but now we're going to - change our app so that the user can decide when and how many dots to add. - The canvas is a UI element, so **you can attach event handlers to it just - like you would any other element**. We're going to move the circle command - inside of a click event handler so that the user can click to add individual - dots.\r\n\r\n![](https://images.code.org/ecd25d3ff2bb50f0555ebd012e5c3b88-image-1448078111902.gif)\r\n\r\n# - Do This:\r\n\r\n* **Add an `onEvent` handler**; set its ID to your canvas - ID.\r\n* **Move the `circle` command out of your `for` loop and into your - new event handler**.\r\n* **Remove the `for` loop from your program.**\r\n* - **Run your program** and confirm that a single dot is added everytime a user - clicks your canvas.\r\n\r\n![](https://images.code.org/0064f8ac406a9f09dc742c81d8510f16-image-1448244621879.gif)" - CSPU5_U3 - Canvas - delete_markdown_instruction: "# Delete Button\r\n\r\nWe - are finally going to use those buttons! Each one will trigger an event handler - that **processes the array `eventList` to create a visual effect** with the - mouse data you have stored. **The first effect we are going to create is delete.**\r\n\r\nYou - may want to provide your user with a way to start over with their drawing. - In order to do this, you will need to *both* **clear the canvas** and **delete - all items from `eventList`.** The easiest way to delete everything from the - list is to simply set the value of `eventList` to be a new empty list.\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/f8fca0d889ae9ddc3ac9b33ba27fadce-image-1448311933871.gif\" - style=\"width: 200px; float: right\">\r\n\r\n* In Design Mode, set the styling - and text of one button to indicate it's the \"delete\" or \"start over\" - button. Give your button **a descriptive ID**.\r\n\r\n* **Add a click event - handler** to your button.\r\n\r\n* Within the event handler call `clearCanvas`.\r\n\r\n* - Set `eventList` to the empty array (i.e., `eventList = []`).\r\n\r\n**Test - your program** to make sure that starting over works the way it should. \r\n" - CSPU5_U3 - Canvas - draw at click point_markdown_instruction: "# Drawing Dots - at Click\r\n\r\nCurrently the user can click to add dots, but they're drawn - at random locations around the canvas. We're going to use information stored - in the `event` parameter of the event handler function **to place dots wherever - the user clicks the mouse on the canvas**.\r\n\r\nThe event parameter has - two critical pieces of information we'll want, which are `event.offsetX` - and `event.offsetY`. These hold **the location (relative to the top left corner - of the canvas) that was clicked**. \r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/1c6109cfc1b02c3ba737519d3f01d1b4-image-1448301532145.gif\" - style=\"width: 200px; float: right\">\r\n\r\n* **Remove (or comment out) the - `console.log` statement**.\r\n* Replace the `x` and `y` parameters of the - `circle` command with `event.offsetX` and `event.offsetY`.\r\n* **Run your - program** to confirm that dots are being drawn anywhere the user clicks the - mouse." - CSPU5_U3 - Canvas - freePlay_markdown_instruction: "# Create Your Own Effect!\r\n\r\nYou've - just seen several ways that we can process our array `eventList` in order - to create different effects. Now it's time to make your own! **Extend the - functionality of one of the effects you just created, or create an entirely - new one**. What else could you do with the information you've stored in your - array? How else might you combine the programming tools you've developed?\r\n\r\n# - Do This:\r\n\r\n* **Extend the functionality of one of the effects, or create - an entirely new one of your own!**" - CSPU5_U3 - Canvas - introCanvas_markdown_instruction: "# Introducing Canvas\r\n\r\nToday - we are going to be building a drawing app around **a new UI element called - the canvas**.![](https://images.code.org/26713ddcc9477e64c347c228d68cac0a-image-1447994134674.35.25 - PM.png)\r\n\r\n![](https://images.code.org/044ad7db1cb4101f54302bd4013d1cc2-image-1448241882228.gif)\r\n\r\n**A - canvas is simply a transparent rectangle on which you can draw basic shapes** - like lines, circles, and rectangles. In fact, at first you might feel like - we're going to end this unit in the way we started it, making turtle drawings. - Don't worry, we'll quickly move into new and exciting things we can do with - this new UI element.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/3874f5e430a6290544466b2037490ae4-image-1448242142421.28.33 - PM.png\" style=\"float: right\">\r\n* **Starter code** is provided which places - buttons on the bottom of your screen. **Ignore these for now; we'll be using - them later**.\r\n* **In Design Mode, drag a canvas element into the empty - space at the top of your app**, resize it, and give it a descriptive ID.\r\n* - **Call `setActiveCanvas` with the ID you assigned to your canvas**, which - makes it responsive to canvas commands.\r\n* **Add a giant circle to the canvas.** - Use the `circle` command. Make its radius large enough that it goes off the - edge of your canvas.\r\n\r\nYour code will look something like this:\r\n\r\n![](https://images.code.org/f0cc22a1de686db72ebce90c720ae6e4-image-1447994225253.36.59 - PM.png)" - CSPU5_U3 - Canvas - movementFunction fix Orig_markdown_instruction: "# Fix - the \"Original\" Button\r\n\r\nOur \"Original\" button is now slightly broken - because the effect it renders doesn't match our new free-form drawing which - takes the movement of the mouse into account - it just draws fixed-size cricles.\r\n\r\nLet's - fix the \"Original\" button.\r\n\r\n# Do This:\r\n\r\nIn the event handler - function for the \"Original\" button:\r\n\r\n* Change the value used for the - radius from a fixed value to the same thing calculated for the free-form drawing. - Since you wrote a function to do this calculation, it should be easy to call - it from this code as well!\r\n* The **slight difference will be that you will - be looping over the array of events.** So the line of code that draws the - circle might look like the one below. This line of code is certainly a mouthful, - but it's basically the same as the line of code in your `mousemove` event - handler; **it just references the event in the list instead.** <br><img src=\"https://images.code.org/dbb4cd9b98eba70aa2919a93544c1e03-image-1448314845862.40.21 - PM.png\" style=\"width: 600px\">\r\n* **Test your program** to confirm that - clicking the \"Original\" button creates the same effect that occurs when - doing free-form drawing.\r\n\r\n![](https://images.code.org/4fcf033e87dc407d337941a7adc4766b-image-1448394246410.gif)" - CSPU5_U3 - Canvas - movementFunction_markdown_instruction: "# Adjusting Circle - Size\r\n\r\nAmong the other pieces of information contained in each `event` - parameter are the values `movementX` and `movementY`. These numbers tell us - how far (in pixels) the mouse moved since the last mouse event was triggered, - and can be used to measure the speed of the mouse. ** If the movement is large, - the mouse is moving fast; if the movement is small, the mouse is moving slowly.**\r\n\r\nLet's - use the mouse movement speed to make a cool effect. When we draw with a real - pen or brush, the line usually gets thin when making quick strokes and is - wider and darker when making slower ones. We can generate this effect by **using - `movementX` and `movementY` to calculate the radius for the circle.** Since - this calculation might be a little tricky, a smart thing to do would be to - **write a function** that takes `movementX` and `movementY` as parameters - and **returns** a value that should be used as the radius.\r\n\r\n<img src=\"https://images.code.org/b9dc4c20d44af7b4e7725b71cd35fa2b-image-1448313734191.21.43 - PM.png\" style=\"width: 350px; float: right; border: solid 1px black\">\r\n\r\nThere - are several ways to do this. One possible way to write the function is provided - on the right, which uses some arithmetic tricks. The function to the right - is actually only three lines of code but is heavily commented to explain what - it's doing. It makes use of a function called **`Math.abs` which returns - the absolute value of a number.** Feel free to use this or another method - of converting `movementX` and `movementY` into a radius.\r\n\r\n<details> - <summary><strong>What is Absolute Value?</strong> [click to expand]</summary>\r\n`Math.abs` - takes a number as input and returns the positive version of this number. \r\n\r\nIn - math, absolute value is often written with this | | symbol. So |10| is the - absolute value of ten and |-10| is the absolute value of negative ten. Both - evaluate to 10.\r\n\r\nIn Javascript we use `Math.abs` instead of | |. `Math.abs(-10)` - and `Math.abs(10)` both evaluate to <strong>10</strong>.\r\n</details> <br>\r\n\r\n# - Do This:\r\n\r\n* **Write a function like the one above** that accepts two - parameters (one each for `movementX` and `movementY`) and returns a radius. - A higher speed should lead to a smaller radius.\r\n* **Inside your `mousemove` - event handler,** set the radius of the circle to the value returned by your - function, where the function takes `event.movementX` and `event.movementY` - as input. For example, if using the function above, your code would be: <br>![](https://images.code.org/94a379336084954ba2ab27e80b17dee3-image-1448314255797.30.22 - PM.png)\r\n* Run your program and confirm that **when you draw, the speed - of the mouse affects the radius of the dots**. The effect should look something - like what's below \r\n\r\n![](https://images.code.org/ee83d18f04e4d9d486428273b7321f9f-image-1448394071473.gif)" - CSPU5_U3 - Canvas - One Dot sprayPaint_markdown_instruction: "# Making Spray - Paint\r\n\r\nThe next effect we would like to create is a \"spray paint\" - effect. Instead of drawing a single dot for every location stored in `eventList`, - we'll draw many small dots randomly placed around each location.\r\n\r\nWe - are going to start off just practicing **drawing a circle whose x and y locations - use `offsetX` and `offsetY` with a small random value added**. This makes - the line of code to draw the circle kind of long, but hopefully it's easy - to understand if you read it carefully.\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n# - Do This:\r\n\r\n* **Set the style of another button** in Design Mode, give - a label like \"Spray Paint,\" give it a descriptive ID, and attach a click - event handler to it.\r\n* **Copy the code from the \"Original\"** button into - the event handler for spray paint.\r\n* Change the code for `circle` so that - it will **draw a dot whose x and y locations use `offsetX` and `offsetY` with - a small random value added. **\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n* - **Run your app** to make sure it is drawing small dots close to the original - position. Look at the example below.\r\n\r\n![](https://images.code.org/d6279085a5c6689dd5c745a0d0e28136-image-1448386996780.gif)" - CSPU5_U3 - Canvas - redrawOriginal_markdown_instruction: "# Redraw Original\r\n\r\nIf - you were able to get that working and understand what you did, congratulations! - That was some serious programming! If not, take a moment to go back and talk - through the different components with a classmate. Most of the work we'll - be doing for the rest of this lesson uses similar patterns, and you'll want - to be comfortable with them as we add more complexity to our app.\r\n\r\nThe - first thing we are going to do is **create an \"Original\" button that will - redraw the image with the same circle radius you used before**. The process - will be nearly identical to how you added the \"Random\" button.\r\n\r\nIn - fact, the code to redraw the original is *exactly* the same, except instead - of making the radius of the circle be random, it will just be the fixed value - you used originally (probably radius 5 or so).\r\n\r\n![](https://images.code.org/9238e313e8f635e2e6b31ad19d0fdc41-image-1448290929994.gif)\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/6cf1d46af7cd92cc1faf1501366e2e1a-image-1448312993714.gif\" - style=\"width: 200px; float: right\">\r\n(**NOTE:** The instructions below - are shown in the code animation above.)\r\n\r\n* Style a button, give it label - like \"Original,\" give it a meaningful ID, and add a \"click\" event handler.\r\n* - Inside the event handler for your \"Original\" button...\r\n\t* Copy the code - from the \"Random\" button event handler.\r\n * Paste it inside the event - handler for the \"Original\" button.\r\n\t* Set the `radius` parameter to - **whatever value you used when you originally drew dots**.\r\n* Test your - program by drawing a figure and then hitting your \"Randomize\" button. Then - hit the \"Original\" button. Your original drawing should appear." - CSPU5_U3 - Canvas - redrawRandom_markdown_instruction: "# Redraw Random - Part - 1\r\n\r\nThe next effect we are going to create is **\"random.\"** We will - be redrawing the image but with randomly sized dots.\r\n\r\nWe'll be doing - this in two steps. For now, all you need to do is **change the first button - in the row to have the proper styling and attach a click event handler to - it**. **In addition, clear the canvas from inside the event handler** so we - are ready to redraw our new image. We don't want to delete all the items - from the array though, as we will use them to redraw. Once you've done that, - move on to the next exercise where we'll write the actual code in our event - handler.\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/0116a787b989df18b077cb4657a5d379-image-1448312365660.58.05 - PM.png\" style=\"width: 200px; float: right\">\r\n\r\n* In Design Mode, **pick - a button to use for Random. Set the styling and text of the button**. The - image below shows one possible option, but you can style it however you like.\r\n\r\n* - Give your button **a descriptive ID**.\r\n\r\n* **Add a click event handler** - to your button.\r\n\r\n* **Call `clearCanvas`** from inside the event handler - so the canvas is ready for the redraw." - CSPU5_U3 - Canvas - redrawRandom2_markdown_instruction: "# Redraw Random - - Part 2\r\n\r\nNow we're ready to write the code for our \"Random\" effect. - To do this, we will be clearing the canvas and then processing the array `eventList` - to redraw all the dots with a random radius. \r\n\r\nYou already set up the - clear canvas, so next we'll need to process our array in order to find out - the event information for each dot. You'll need to create a `for` loop that - iterates through every index in `eventList` (recall the `length` command). - Within your loop, you will be drawing dots referencing items stored in the - array. \r\n\r\nAs you write this code, remember that **you can treat an individual - element of an array exactly like the kind of data it stores**. Inside a `for` - loop, the event at index `i` can be accessed with the notation `eventList[i]` - and the `offsetX` of that event can be accessed with `eventList[i].offsetX`. - Again, you are essentially treating the array element as if it were the data - it contains.\r\n\r\n![](https://images.code.org/8ce01658ab31ce5f05101e58e3413681-image-1448250618520.gif)\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/6e081911348f3c1b07d17f83bd402249-image-1448312722857.gif\" - style=\"width: 200px; float: right\">\r\n\r\n(**NOTE:** Everything listed - below is shown in code animation above.)\r\n\r\n**Inside the \"Random\" button - event handler...**\r\n* **Add a `for` loop** that runs `i` from 0 up to `eventList.length` - to process over the array.\r\n* **Add a `circle`** command inside your loop.\r\n* - **Set the x and y parameters** of the `circle` to `eventList[i].offsetX` and - `eventList[i].offsetY`, respectively.\r\n* **Set the `radius` parameter** - to some `randomNumber`. Pick any range you like. You can always change it - later.\r\n* **Test your program** by drawing a figure and then hitting your - \"Randomize\" button. It should be the same drawing, but now with randomly - sized dots!" - CSPU5_U3 - Canvas - shiftKey_markdown_instruction: "# Draw When a Key is Pressed\r\n\r\nThis - app now lets the user draw, but they have no control of whether the pen is - up or down. Let's give the user the ability to **choose when to put down - the pen**. We won't even need to add a new event handler to our app! \r\n\r\nYou - may have noticed that the **`event` parameter includes information about whether - certain keys were pressed when the event fired**. They are stored in variables - with names like `shiftKey` or `altKey` and are stored as boolean values (true - / false). We are going to use the `shiftKey` variable to decide when we should - draw circles. \r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/1a4b8f12645e5e88dee96d5542933c84-image-1448248202626.gif\" - style=\"float:right\">\r\n\r\n* **Add an `if` statement inside your event - handler function** where the condition is based on the value stored in `event.shiftKey`: - **If `shiftKey` is true, then draw the circle.** <img src=\"https://images.code.org/a542766e8e52fed5ca992f2434ace086-image-1448307484936.37.32 - PM.png\" width=\"200\">\r\n\r\n* You might want to **decrease the radius of - your circle** (for example to 5).\r\n\r\n* **Run the program and confirm that - dots are only drawn when the shift key is pressed.**\r\n\t* The effect should - be that the user can pick up and put down the pen to draw.\r\n\t* Hold the - shift key down and move the mouse to draw.\r\n\t* Release the shift key to - stop drawing.\r\n\r\n(**NOTE:** If you wish, use `console.log` to display - the values in `event` again. You'll see `event.shiftKey` is one of the values - stored.)\r\n" - CSPU5_U3 - Canvas - sketch_markdown_instruction: "# Relative Indexes\r\n\r\nWhen - looping over an array, we use a counter variable (typically `i`) to keep track - of which index we're at. We can then access the contents at each index with - the syntax `list[i]`.\r\n\r\nIf we want, however, we could access the contents - of the next element as well, since its index is just one greater. For example, - if we are currently focused on the element at index `i`, then `list[i+1]` - gives us access to the next element in the array. In other words, you can - **reference indexes relative to your counter variable**.\r\n\r\n![](https://images.code.org/3bb5dfce60951040172bfe08d98a8750-image-1448393281688.png)\r\n\r\nWe - are going to use relative indexing to create our final effect, which will - look sort of like an etching of the image. The idea is simple: **for every - (x, y) location in the event list, draw a straight line between that - location and the location stored 10 spots further down the array.** You will - use the **`line` command** to draw a line connecting these points.\r\n\r\n# - Do This:\r\n\r\n* **Read the documentation for `line`**.\r\n* **Set the style - of the final button** in Design Mode, give a label like \"Etch,\" give it - a descriptive ID, and attach a click event handler to it.\r\n* **Call `clearCanvas`** - to clear the screen.\r\n* Create a `for` loop that counts from **0 to `eventList.length - - 10`**. \r\n\t* Why do you think we're not counting over the entire array?\r\n* - Use `line` to draw a line between the (x, y) locations of `eventList[i]` - and `eventList[i+10]`. The full line of code will be another big one: ![](https://images.code.org/5de2c40b56042069379ff20ce5d10cab-image-1448393948598.38.49 - PM.png)\r\n* **Use `setStrokeColor` and/or `setStrokeWidth` inside the event - handler** to make the lines visible; otherwise, they will be transparent, - since we set the stroke color to transparent at the beginning of the program.\r\n* - **Run your app** and confirm that your new button creates a sketch effect, - as shown below.\r\n\r\n![](https://images.code.org/c06c268a4757e8838435e576a676a0a2-image-1448395181441.gif)" - CSPU5_U3 - Canvas - sprayPaint_markdown_instruction: "# Making Spray Paint - with Nested Loops\r\n\r\nIn order to make \"Spray Paint\" look more real you - will need to draw multiple dots randomly placed around the original x and - y locations. In order to do this, you will place one `for` loop inside of - another, also known as a **nested loop**. You already have the main loop which - visits every index in `eventList`. The inner loop should **draw 5 circles - whose x and y locations use `offsetX` and `offsetY` with a small random value - added**. \r\n\r\n# Nested Loops\r\n\r\n<img src=\"https://images.code.org/15d7590ed9d4c07a40f22da4decc396c-image-1448153719856.54.36 - PM.png\" width= 300px ; style=\"float: right\">\r\n**When nesting loops, it - is important that you use different variables to count your iterations**. - Look at the example at right. These nested loops effectively say: **\"for - every possible value in `eventList.length`, run a loop 5 times\". **\r\n\r\nSince - `i` is used as the counter variable in the outer loop, we need to use a *different - counter variable for the inner `for` loop*, or things will go haywire. Why? - **If both loops used `i` as a counter variable, the inner loop would keep - changing `i` and the outer loop wouldn't count properly.** The example uses - `j` as the inner loop variable, but you could use anything that's *not* `i`.\r\n\r\n<img - src=\"https://images.code.org/b5184430a48ac55d8f6fe7280c983186-image-1448387927473.gif\" - style=\"width: 450px\">\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/290adbb84a51b89ca27414746d3a4a93-image-1448395072342.gif\" - style=\"width: 200px; float: right\">\r\n\r\n(**Note:** Steps shown in animation - above.)\r\n\r\n* **Add a `for` loop inside the existing `for` loop** in the - spray paint event handler. \r\n* **Change the counter variable** to something - other than `i` for the inner `for` loop.\r\n* **Change the boolean condition** - so the inner loop will run **5 times.**\r\n* **Move the circle** code inside - both `for` loops.\r\n* **Run your app** and confirm that your new button creates - a spray paint effect, as shown below." - CSPU5_U3 - Canvas - transparentDots_markdown_instruction: "# Changing Colors - in Canvas\r\n\r\nWe would like to make our dots transparent so that we can - see when they are drawn on top of each other. To set the color and transparency - of shapes you draw on your canvas, you need to change both the **stroke** - or outline color and the **fill** color. The functions `setStrokeColor` and - `setFillColor` can be used to set those colors. \r\n\r\nThese functions **accept - strings of the form `\"rgba(100, 200, 100, 0.5)\"` as input**. The first three - values in the string are RGB values and the last value is the transparency, - as represented by a decimal number between 0 and 1.0. All together it looks - like this:\r\n\r\n![](https://images.code.org/5f5692259df092ce4e000cbdf5a7df1b-image-1448077147778.png)\r\n<img - src=\"https://images.code.org/e833a63e31dca7d5e8357c0b856dc7cc-image-1448244247180.gif\" - style=\"float: right; width: 150px\">\r\n\r\n# Do This:\r\n\r\n**Before the - loop: ** \r\n* **Add a `setStrokeColor` command** to set the stroke to **fully - transparent**.\r\n* **Add a `setFillColor` command** to set your dots to full - black and mostly transparent **(try a value of 0.2)**." - CSPU5_U3 - Canvas - usingOffsetXY_markdown_instruction: "# The Event Parameter - for Mouse Events\r\n\r\nWe'd like to change the app so that when the user - clicks on the canvas we draw a circle right where they clicked. To do that, - we need to learn more about the **parameter passed by our event handler function, - which by default is called `event`**.\r\n\r\nRecall that when we wanted to - know what key the user pressed on a `keyPress` event, we checked the value - stored in `event.key`. **The event parameter actually stores a great deal - more information about each event**. \r\n\r\nWhen using the mouse, the event - parameter carries information like the location of the mouse, how fast it's - moving, and some other things as well. \r\n\r\nLet's get acquainted with - the event parameter and what we can find out about the mouse.\r\n\r\n# Do - This:\r\n\r\n* Add a `console.log` command inside the function of your event - handler. Use it to display the `event` parameter.\r\n* Run your program and - click your canvas. **The full contents of the `event` parameter should be - displayed in the console**. \r\n* **Which values do you think hold the x and - y coordinates**? What else is there?\r\n* We won't use all of these, but - it's interesting to see just how much is available.\r\n* Once you have experimented - a little, move to the next level.\r\n![](https://images.code.org/a6875e27019cb938a9576f0485648ca9-image-1448041792987.49.30 - AM.png)\r\n" - CSPU5_U3 - Conditional Basics - 6_markdown_instruction: "# What happens after - an *if* ?\r\n\r\nYou may have noticed that our flowchart for our game so far - only does something if the condition is true. What happens after the `if` - statement? Let's find out.\r\n\r\n<img src=\"https://images.code.org/90b7a527091704a6ab4612b9f84db305-image-1446234882661.png\" - style=\"width: 200px\">\r\n\r\n# Do This:\r\n\r\n* **Add a `setText` after - the `if` statement** to \"Nope. Guess again.\"\r\n\r\n<img src=\"https://images.code.org/f5c5de1b77a9caf16027e65ed24f91ec-image-1446234785600.gif\" - style=\"width: 450px\">\r\n\r\n* **Run the program** a couple times to **look - for a bug**. We will fix this on the next level." - CSPU5_U3 - Conditionals - Combine AND OR and NOT_markdown_instruction: "# Combining - AND and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean - expression to invert its result. This opens the door to express the same logical - statements in different ways. \r\n\r\nFor example, let's say you want to - determine if a person, based on his or her age (under 12 or over 65) gets - to pay a reduced price for a movie ticket. You might express that like this:\r\n\r\n```\r\n// - If your age is less than 12 or greater than 65\r\nif( (age < 12) || (age > - 65) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\nBut - you might also figure out a way to determine if a person gets a reduced price - ticket by determining if his or her age is between 12 and 65 (`(age >= 12) - && (age <= 65)`) and then taking the inverse of that. So using the NOT operator - this would work as well:\r\n\r\n```\r\n// If your age is NOT between 12 and - 65\r\nif( !( (age >= 12) && (age <= 65) ) ){\r\n\twrite(\"You qualify for - a reduced price!\");\r\n}\r\n```\r\n\r\n**Why use one over the other?** Personal - preference. Use the one that makes the most sense to you, but it should be - a clear expression of what you are trying to say. \r\n\r\n\r\n# Do This:\r\nWe've - provided you with starting code that prompts the user to enter a **day** and - their **age** and store it in variables.\r\n\r\n**Add an `if` statement that - uses both AND and OR operators**\r\n\r\n * The app should write \"Time for - school!\" if it's a weekday and the user is under 18.\r\n \t* Hint: one way - to say that it's a weekday is to say that it's NOT a weekend.\r\n * Otherwise, - if it's a weekday and the user is 18 or older, it should write \"Time to - go to work!\"\r\n * Otherwise, it should write \"Time to relax for the weekend!\"\r\n - \r\n \r\n**WARNING** logic can get tricky sometimes. Make sure to test your - program with inputs that cover every possibility. There are 4 basic cases - to test for:\r\n\r\n * It is a weekday and age is under 18\r\n * It is a weekday - and age is not under 18\r\n * It's not a weekday and age is under 18\r\n - * It's not a weekday and age is not under 18\r\n\r\nTry it out!" - CSPU5_U3 - Conditionals - Combine AND OR Simple_markdown_instruction: "# Combining - AND and OR\r\n\r\nYou can express more complex conditions by combining **AND** - and **OR** in one statement. Here is the example from the previous page which - you can use as a reference. This statement will evaluate to **true** if the - day is Tuesday or Thursday AND their age is 15 or 16.\r\n\r\n![](https://images.code.org/3f3aba7828abd88fdbd90eda60611bd3-image-1448062956405.06.36.png)\r\n\r\n# Do - This:\r\nWe've provided you with starting code that prompts the user to enter - a **day** and their **age** and stores the result in variables.\r\n\r\n**Add - an `if` statement that uses both AND and OR operators**\r\n\r\n * The app - should write \"Sleep in!\" if it's a weekend and the user is a teenager.\r\n - * Otherwise it should write \"Uh oh. Have to wake up.\"\r\n \r\n\r\nTry it - out!\r\n" - CSPU5_U3 - Conditionals - Simple AND_markdown_instruction: "# AND Operator\r\n\r\n<img - src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nAgain you will see the - JavaScript boolean operators AND (`&&`) and OR (`||`) in code toolbox. You - can drag them out or simply type them.\r\n\r\nLet's now try out using an - **AND** operator. As a reminder: **if both statements are true** then AND - evaluates to **true**. **If either (or both) are false** the AND operator - will evaluate to **false**.\r\n\r\n<img src=\"https://images.code.org/4a461db916ded2acccfcdb9a75ef8838-image-1446483668310.png\" - style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\nWe've provided - you with starting code that prompts the user to enter their **age** and stores - it in a variable.\r\n\r\n**Add an `if` statement with a Boolean expression - that uses an AND operator (`&&`)** to express:\r\n\r\n * IF *the age is between - 13 and 19* write \"You are a teenager.\"\r\n * ELSE write \"You are not a - teenager.\"\r\n" - CSPU5_U3 - Conditionals - Simple OR_markdown_instruction: "# OR Operator\r\n\r\n<img - src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nYou will now see the - JavaScript boolean operators AND (`&&`) and OR (`||`) in code toolbox. You - can drag them out or simply type them.\r\n\r\nLet's try OR right now. As - a reminder: the OR operator will evaluate to true if *either or both* statements - are true. If both are false, the OR operator will evaluate to false. \r\n\r\n<img - src=\"https://images.code.org/48d59f73e701d452dd74ae304db59d93-image-1446482464792.png\" - style=\"width: 200px; float:right\"> \r\n\r\n\r\n# Do This:\r\nWe've provided - you with starting code that prompts the user to enter a day of the week and - stores it in a variable.\r\n\r\n**Add the boolean expression to the if-statement - to use an OR (`||`)** to express:\r\n\r\n * IF *it's Saturday or Sunday* - then write **\"It's the weekend!\"** \r\n * Else write **\"Can't wait for - the weekend to get here.\"**" - CSPU5_U3 - Design Mode - Console Log_markdown_instruction: "# Updating IDs - and Debugging with Console Log\r\n\r\nIn the last level you tested out the - new command: `console.log`. In this level we have a couple buttons with event - handlers and `console.log` statements, but they are switched around!\r\n\r\nWe - should have given the buttons better ID names so we could tell the difference - based on the ID. **Can you update the ID names and `console.log` messages - to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** - of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to - Code Mode and notice that the **ID pulldowns have been updated to include - the new IDs**. (You still need to select the correct ID from the pulldown - menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" - CSPU5_U3 - Design Mode - Layers and Delete_markdown_instruction: "# Layering - and Deleting\r\n<img src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" - style=\"width: 150px; float: right\">User interface elements can overlap one - another, so you'll want the ability to change the order or **depth** at which - each one is rendered. \r\n\r\nIf you **scroll to the bottom of the Properties - tab** you'll find buttons which allow you to easily **delete or change the - depth** of an element.\r\n* **Delete an Element** by selecting it (clicking - on it) in the design view and then clicking **Delete** in the properties tab.\r\n* - **Change the depth** of elements by using the double or single arrows.\r\n - * Click the double arrow to send all the way to front or back.\r\n * Click - the single arrow to move up or down one layer.\r\n \r\n# Do This:\r\n\r\nUse - the **delete** and **depth** tools to **create the \"After\" image**\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th - style=\"text-align:center\">Before</th>\r\n <th style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td - align=center><img src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" - style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img - src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" - style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" - CSPU5_U3 - Design Mode - Multi Screens 2_markdown_instruction: "# Switching - Screens\r\n\r\nIn the last level you made two screens, a black one and a white - one. However when you ran the app you probably noticed that you had no way - to see the second screen. Let's fix that.\r\n\r\nIn order to switch between - screens we have added a new command: `setScreen`. Read the documentation to - figure out how this command works.\r\n\r\n<img src=\"https://images.code.org/152f45b312da467f0b553efc9fba20a7-image-1444354703453.gif\" - style=\"width: 250px; float: right\">\r\n\r\n**Goal:** Make a 2 screen app - which can switch back and forth between a black screen and a white screen - using buttons.\r\n\r\n# Do This:\r\n\r\n* **Put a button on each screen**. \r\n\r\n* - **Set up event handlers** for each of your buttons. \r\n\r\n* **Use the `setScreen` - block to switch screens** when the buttons are clicked.\r\n\r\n* Test out - your app to make sure you can switch back and forth between the two screens." - CSPU5_U3 - Design Mode - Multi Screens_markdown_instruction: "# Second Screen\r\n\r\nUp - until now our apps have only been able to have one view. With Design Mode - we can now make multiple screens and switch between them!\r\n\r\n**Goal:** - Make a 2 screen app with a black screen and a white screen. \r\n\r\n<img src=\"https://images.code.org/e35a6f494cf6f0c57c66a1aef651cdb0-image-1444353622241.gif\" - style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\n\r\nSwitch to Design - Mode and **add a second screen**. There are two ways to add a second screen: - \r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 - PM.png\" style=\"width: 50px\"> from the Design Toolbox. Check out the screen - dropdown menu at the top right of the app window. You should now have two - screens! <img src=\"https://images.code.org/b48d978335701888b744702f25f11b28-image-1444353746012.17.07 - PM.png\" style=\"width: 75px\"> \r\n* From the screen dropdown menu at the - top right of the app window click *New Screen*. \r\n\r\nMake screen1 white - and screen2 black. **Set the background color for a screen in the Properties - tab**. Make sure to rename the screens with appropriate IDs." - CSPU5_U3 - Design Mode - WTF Console Log_markdown_instruction: "# Console Log\r\nIn - the last level, we saw a new command: `console.log`. You may have noticed - that it prints out text in the Debug Console below the code workspace.\r\n\r\n<img - src=\"https://images.code.org/326e0f6c7d3b846ba06db998f06f56aa-image-1444419414248.36.33 - PM.png\" style=\"width: 450px; border: solid 1px black\"> \r\n\r\nThe Debug - Console is an important tool for programmers. You've seen it display error - messages, but you can also send messages that a user cannot see to the Debug - Console while a program is running. <img src=\"https://images.code.org/cdc253db1b9a3685eaf5ea4b6bc30766-image-1444337429645.png\" - style=\"width: 250px; float: right; border: solid 1px black\"> The Debug Console - is really helpful for debugging programs because you can send messages to - yourself from within your own code!\r\n\r\nYou can find `console.log` in the - code toolbox under the Variables tab.\r\n\r\n# Do This:\r\n\r\n* Drag out - 3 `console.log` commands into the workspace.\r\n\r\n* Update each `console.log` - with your own messages.\r\n\r\n* Run the program a couple times to test out - this new command." - CSPU5_U3 - Design Mode -Recreate Beyond Buttons_markdown_instruction: "# Improved - Chaser Game\r\n\r\nNow lets improve the \"Chaser Game\". This is where you - get to use your creativity. Make it look nice!\r\n\r\nIn addition you will - notice a new command in the toolbox: `playsound`! Read the documentation about - how to add sounds.\r\n\r\n**Note:** Your code from before has been provided - for you.\r\n\r\n# Do This:\r\n\r\n* **Create a Welcome Screen** that explains - the rules of the game. Include a \"Start Game\" button.\r\n\r\n* Update the - your code so that the **image jumps to a new location when it is clicked**. - \r\n\r\n* **Play a sound** each time the image is clicked.\r\n\r\n* **Add - a Game Over Screen** with a lose message and button to start over. The Start - Over Button should direct back to the Welcome Screen.\r\n\r\n* **Make the - user lose**, by sending them to the Game Over Screen, when the background - is clicked.\r\n\r\n\r\n" - CSPU5_U3 - Design Mode 1_markdown_instruction: "<img src=\"https://images.code.org/5e6fa5738796d69775c0786ca9b4a076-image-1476735925167.png\" - style=\"float: right\">\r\n# Design Mode\r\n\r\n**You Try it:** Add a large - red button to your app using Design Mode.\r\n\r\n* Switch to Design Mode\r\n* - Drag a button onto the app screen\r\n* Change the text to say \"Click Me!\"\r\n* - Make the color of the button red.\r\n\r\n\r\n" - CSPU5_U3 - Dice - Dropdown and Score_markdown_instruction: "# Adding Guess - and Score to Dice Game\r\n\r\nLet's have the user guess the number that will - come up when we roll a single die. \r\n\r\nYou can have multiple `if` statements, - one after another, if they have different purposes which are separate. \r\n\r\n** - Note: ** Use the flowchart below to help you figure out the logic of the game.\r\n\r\n# - Do This:\r\n\r\n* **Add a dropdown** to take in the user's guess from 1 to - 6.\r\n\r\n* **Add a set of `if` statements to check if the dice roll number - is equal to the user guess.** Put this set of `if` statements after your set - of `if` statements for the dice image. It should be completely separate from - the other set of `if` statements. \r\n\r\n* Create a variable to **keep track - of score**. Give 10 points if they guess right and take one point away when - they guess wrong.\r\n\r\n* **Display the score** on the screen and update - it after each dice roll.\r\n\r\n<img src=\"https://images.code.org/ac24917ca18606f6f3c31a6be1a16d73-image-1446174953979.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/ac24917ca18606f6f3c31a6be1a16d73-image-1446174953979.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - Dice - Dropdown with Strings_markdown_instruction: "# Adding Difficulty - Levels: Dropdowns with Strings\r\n\r\nLet's add another element to our dice - game: **difficulty levels**. The user will pick either \"Easy\" or \"Hard.\" These - are strings so you might be wondering how to check for equality. **The `==` - works on strings as well!** It checks if the first string is exactly the same - as the second string. **Strings must be the same letters and even have the - same case to be equal**! So \"dog\" and \"Dog\" would not be equal. \r\n\r\n# - Do This:\r\n\r\n* **Add a dropdown** for difficulty level with the options - of \"Easy\" or \"Hard.\" \r\n\r\n* **Create an `if` statement for difficulty - level** which prints the difficulty level to the console.\r\n\r\n<img src=\"https://images.code.org/9db291c8dd4192390e008aa764576cd3-image-1446175136919.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/9db291c8dd4192390e008aa764576cd3-image-1446175136919.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - Dice - If_markdown_instruction: "# Using `if` to Display Images\r\n\r\nWe - are going to set up a dice game. We want to show a picture of a single die - for each random number generated 1 to 6. We've already set up the screen - in Design Mode, with a button to generate the roll and an image to show a - picture of the die.\r\n\r\n**Note:** The flowchart for the desired behavior - is below.\r\n\r\n# Do This:\r\n\r\n* Add an event handler for the Roll! button - so that when the button is clicked it generates a random number from 1 to - 6. \r\n\r\n* Add conditionals (`if`, `else if`, and `else`) to change the - picture of the image (ID: `dice_image`) to display the correct side of the - die depending on the random number generated. You will need to use <img src=\"https://images.code.org/89f2c13ef4ead590475c863a087597f8-image-1446535826599.30.16.png\" - style=\"width:150px\"> with the URLs below to set the images for the die.\r\n\t* - <img src=\"https://code.org/images/dice/1.png\" style=\"width: 50px\"> Dice - 1 Image URL - https://code.org/images/dice/1.png\r\n * <img src=\"https://code.org/images/dice/2.png\" - style=\"width: 50px\"> Dice 2 Image URL - https://code.org/images/dice/2.png\r\n * - <img src=\"https://code.org/images/dice/3.png\" style=\"width: 50px\"> Dice - 3 Image URL - https://code.org/images/dice/3.png\r\n * <img src=\"https://code.org/images/dice/4.png\" - style=\"width: 50px\"> Dice 4 Image URL - https://code.org/images/dice/4.png\r\n * - <img src=\"https://code.org/images/dice/5.png\" style=\"width: 50px\"> Dice - 5 Image URL - https://code.org/images/dice/5.png\r\n * <img src=\"https://code.org/images/dice/6.png\" - style=\"width: 50px\"> Dice 6 Image URL - https://code.org/images/dice/6.png\r\n\r\n<img - src=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" - target=\"_blank\">Open diagram in a new tab</a>\r\n" - CSPU5_U3 - Dice - Nested_markdown_instruction: "# Nested *if* Statements\r\n\r\n<img - src=\"https://images.code.org/1774efb17571d3370662e34b705dde47-image-1446485939643.37.11 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Let's change the - scoring of the game to match the difficulty level.** \r\n\r\nNew scoring rules:\r\n* - _Easy: +10 points right answer / -1 point for wrong answer_\r\n* _Hard: +1 - point right answer / -1 point for wrong answer_\r\n\r\nHow do we check _both_ - the difficulty level and if the user's guess was correct? **We can actually - put `if` statements inside of other `if` statements!** So we first want to - check what the difficulty level is and then check if the user was right or - wrong to determine the score.\r\n\r\n** Note: ** The flowchart below outlines - the logic you are trying to implement.\r\n\r\n# Do This:\r\n\r\n* Move a copy - of the score `if` statement inside of the difficulty levels. Be careful with - indenting. All of the `if` statements for score need to be inside of the difficulty - `if` statement (i.e. indented 1 level more than the difficulty `if` statement)\r\n\r\n<img - src=\"https://images.code.org/2125a027997aeca75d18b8423058063d-image-1446485524945.gif\" - style=\"width: 350px\">\r\n\r\n\r\n* Edit the `if` statements to give the - correct scores\r\n\t* Easy level (+10 right, -1 wrong)\r\n * Hard level - (+1 right, -1 wrong)\r\n\r\n<img src=\"https://images.code.org/3b95a9f5cca60fc0ffbf7c2fb174d737-image-1446175290414.png\" - style=\"width: 100%\">\r\n<a href=\"https://images.code.org/3b95a9f5cca60fc0ffbf7c2fb174d737-image-1446175290414.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - High Low - Debug_markdown_instruction: "# Debug Conditionals\r\n\r\n\"Help! - I was trying to give the player a hint when their guess was within 2 of the - secret number but the code I wrote isn't working. **Can you fix it?**\"\r\n\r\nThis - picture shows what the message should be based on the difference between the - secret number and the player's guess:\r\n\r\n![](https://images.code.org/8b6e60db87e3c704ae5209c8c608f5d5-image-1481691055804.png)\r\n\r\n* - Run the code to identify when the program is not working correctly (try guessing - numbers 1-6)\r\n* Fix the problem with the order of the conditionals.\r\n\r\n**Hint:** - \r\n* The major problem here is that **conditional statements run in order - from top to bottom**. \r\n* Remember you have to check the smallest/most narrow - case first, and work up from there.\r\n* The conditions might be slightly - non-intuitive at first glance.\r\n* If you want to re-arrange the conditions - it might be easier if you **switch to text mode**\r\n\r\n<details><summary>Check - out the flow chart for the logic I wanted. [Click to Expand]</summary>\r\n\r\n<a - href=\"https://images.code.org/76681a7d86bd4097417b25b682eee5a8-image-1458309676819.png\" - target=\"_blank\">\r\n<img src=\"https://images.code.org/76681a7d86bd4097417b25b682eee5a8-image-1458309676819.png\" - style=\"width: 350px;\">\r\nClick image to open larger in a new tab</a>\r\n</details>\r\n\r\n" - CSPU5_U3 - High Low - Dropdown_markdown_instruction: "# Dropdown\r\n\r\nOn - the last level we used `promptNum` to get the user's guess. However, we had - no way to limit them to the numbers we wanted. They could have typed 11 even - though we told them not to. A better way to get input with a limited set of - options is the dropdown. The <img src=\"https://images.code.org/3b21b4288a2a155d1e9a3c2cf3a5b09b-image-1446229368079.28.23 - PM.png\" style=\"width: 75px\"> is in your Design Mode Toolbox. You can control - the list of options users can choose and then use `getText` to get the chosen - number.\r\n\r\nWe are going to need an event handler in order to do this. - The event handler will detect when the user has changed the value of the dropdown. - \r\n\r\n# Do This:\r\n\r\n* **Add a dropdown** for their guess instead of - `promptNum`. Make sure to give it a good ID.\r\n\r\n<img src=\"https://images.code.org/fea164f6e53d1ce0c50981565e066d4c-image-1446229598357.gif\" - style=\"width: 350px\">\r\n\r\n* Under properties **find the Options** and - change it to the **numbers 1 to 10**\r\n\r\n<img src=\"https://images.code.org/0cfecbcdcfb95fc30876155ec6a3a021-image-1446229593687.gif\" - style=\"width: 250px\">\r\n\r\n* Add an event handler to detect the `change` - event on your dropdown.<br><br>\r\n<img src=\"https://images.code.org/48cffda5b7ff3a446116a39b4dbcbe8c-image-1446232308751.gif\" - style=\"width: 150px; float: right\">\r\n* Move your `if` statement inside - the event handler so it will check each time the dropdown is changed.<br><br>\r\n* - When the dropdown is changed **use `getText` to find out the user's guess**. - Save the guess using a variable. **Don't forget about scope!**<br><br>\r\n* - Test your app -- it should work like the demo." - CSPU5_U3 - High Low - Else if_markdown_instruction: "# Guess the Secret Number - with *else-if*\r\n\r\nIn this guess-the-number game, the starting code tells - the user whether they were right or wrong. Let's help the user out even - more by telling them if they guessed correctly or if their guess was too high - or too low. \r\n\r\nThere are **only 3 possible cases:**\r\n\r\n* They were - right.\r\n* Their guess was higher than the number.\r\n* Their guess was lower - than the number.\r\n\r\nUse a conditional with and `if`, `else-if`, and a - final `else` to implement this.\r\n\r\n**Remember:** You can create an `else-if` - statement by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. The first - <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> will add an `else`, the second will add an - `else-if`.\r\n\r\n\r\n# Do This:\r\n\r\n* **Add an `else-if` statement to - accommodate the 3 conditions.**\r\n\r\n* **Update the conditions** using `<`, - `>`, and `==` to tell the user if their guess was correct, high, or low.\r\n\r\n* - **Test out the program** to make sure your updates worked.\r\n\r\n<details><summary>Visual - Explanation [Click to expand]</summary>\r\n<li>Sometimes it's helpful to - see how the program should flow with a flow chart. The flow chart below depicts - what should happen </li>\r\n\r\n<img src=\"https://images.code.org/f7e483414dfe1d4585841e653e44d8b0-image-1446169181724.png\" - style=\"width: 500px\">\r\n</details>" - CSPU5_U3 - High Low - Else_markdown_instruction: "# *else*\r\n\r\n<img src=\"https://images.code.org/b7942d778a54465ad6f9f19fbab8d1ef-image-1446237289306.34.23 - PM.png\" style=\"width: 150px; float: right\">\r\n\r\nLet's add an `else` - statement so we can tell the user when they are right and when they are wrong.\r\n\r\n**Note:** You - can create an `else` statement by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. There - is also an `if-else` block in the toolbox. \r\n\r\n\r\n# Do This:\r\n\r\n* - **Add an `else` statement**\r\n\r\n* **Move your `setText` inside the `else` - statement.** So it should say \"Nope that's not it. Guess again.\" when the - user does not guess the secret number." - CSPU5_U3 - High Low - If_markdown_instruction: "# *if* Statement\r\n\r\n<img - src=\"https://images.code.org/040c8364e3795252194b816623e949e5-image-1446227663554.54.03 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nThe boolean expression - we tested on the last level allows us to make decisions. In order to make - these decisions we need to use something called a conditional. **Conditionals - check if a boolean expression is true and then will execute the code inside - of the `if` statement.** \r\n\r\n<img src=\"https://images.code.org/84123a7c317c63d8876b6b56086d717e-image-1446228290588.png\" - style=\"width: 150px; float: right\">\r\n\r\nOver the number couple levels - we are going to be creating a **Guess My Number game**. The starter code uses - `promptNum` to ask the user for a number from 1 to 10. The `if` statement - checks if the user guess is equal to the secret number. Right now nothing - happens when they guess the right number. Can you fix that?\r\n\r\n# Do This:\r\n\r\n* - Read the code to identify the boolean expression.\r\n* Add a text label to - the screen. Have it start out with \"Guess my secret number!\"\r\n* **Set - the text label to say \"You got it right!\" from inside the `if` statement**. - This will tell them they get it right only when that condition is true!\r\n* - **Test your code out** to make sure it works.\r\n\r\n<img src=\"https://images.code.org/2f3487ec7a8d7cec1605f3da830c83f8-image-1446227512726.gif\" - style=\"width: 350px\">" - CSPU5_U3 - Keys - Add Image URLs_markdown_instruction: "# Adding Image URLs\r\n\r\nWe're - ready to start improving the \"My Favorite Things\" app. \r\n\r\nWe'll do - this in two steps:\r\n1. We will change it from scrolling text to scrolling - images.\r\n2. We will add key events to scroll with the keyboard.\r\n\r\n**Step - 1:**\r\n* The default values in your array should be image URLs.\r\n* The - large **text area** needs to be changed to an **image**.\r\n* Instead of **setting - the text**, you'll now be using `setImageURL` to set the URL of the image.\r\n\r\n# - Do This:\r\n**NOTE: We've re-loaded the code from the \"My Favorite Things\" - App you wrote in the previous lesson.** (If you want to refer to code you - just wrote, you can go back to look at it.)\r\n\r\n* **Set the default values** - in your array to be image URLs. (You might need to take a minute to go collect - a few if you didn't in preparation for this lesson.)\r\n* In Design Mode - **delete the text area** and replace it with an **image**. Make sure your - image has a descriptive and meaningful ID.\r\n* Inside your function that - updates the display **replace `setText` with `setImageURL`**. Make sure you - reference your new image element **by its correct ID**.<br>\r\n<img src=\"https://images.code.org/9f7f4aeeb9b1a84ae781043602166865-image-1447337890448.gif\" - style=\"width: 350px\">\r\n* ** Test your app** to confirm that it's now - showing the images in your array." - CSPU5_U3 - Keys - Buttons and Keys_markdown_instruction: "# Buttons and Keys\r\n\r\nWe - now know how to respond to key events, but often we want the user to be able - to **do the same thing with the app in multiple ways**. For example, we might - want the app to exhibit the same behavior if the user clicks a button on the - screen or a key on the keyboard. (This is how so-called \"keyboard shortcuts\" - work.)\r\n\r\nIn the program you're about to see, we've provided event handlers - for some buttons on the screen. You're going to **create identical functionality** - for the key events.\r\n\r\n# Do This:\r\n\r\n* **Add conditional statements - inside the `keydown` event handler** to check for when the **up and down arrows** - are pressed.\r\n<img src=\"https://images.code.org/0e0fe80c821c6a3171ec3a272c42325c-image-1447253300861.gif\" - style=\"width: 350px\">\r\n\r\n* ** Copy the code for the `upImage` button**, - and paste into the up arrow `if` statement.\r\n![](https://images.code.org/ad56005d74736c7c9aa8bedf68529c0e-image-1448300088636.gif)\r\n\r\n* - ** Copy the code for the down button**, and paste it into the down arrow `if` - statement.\r\n\r\n* Confirm your app **responds to key events** by running - it. For example, clicking the image of the up arrow in the app should do - the same thing as hitting the up arrow on the keyboard.\r\n\r\n" - CSPU5_U3 - Keys - Demo App_markdown_instruction: "# Making our App an Image - Scroller\r\n\r\nOver the course of this lesson we are going to be working - towards improving our \"My Favorite Things\" app to add some new features. - Our improved app will be able to:\r\n\r\n* Respond to **key events**.\r\n* - **Display images** by storing their URLs.\r\n\r\nWe'll call this new kind - of app an **image scroller** but feel free to call it anything you like.\r\n\r\n# - Do This:\r\n\r\n* Close these instructions.\r\n* **Experiment with the improved - \"My Favorite Things\" app** to understand the new features we'll be adding. \r\n* - Make sure you try clicking the **left and right arrow keys!**\r\n\r\nOnce - you think you've experimented enough, continue on to the next level." - CSPU5_U3 - Keys - Final Image Scroller_markdown_instruction: "# Final Image - Scroller\r\n\r\nYou're now ready to add key event functionality to your app! - As you are doing so, keep an eye out for places where you need to **refactor** - old code in order to prevent redundancy. **Create functions** that carry out - repeated tasks and make other changes to keep your code **readable and consistent**. - \r\n\r\nIf you want a reminder of how key events work, you can always go back - to the example from earlier in this lesson. You will need to add `if` statements - to check for which keys were pressed, just as before.\r\n\r\n# Do This:\r\n\r\n* - Add the ability to respond to **key events** to your app.\r\n\r\n* **Refactor - your old code** to remove redundant portions.\r\n\r\n* Keeping adding to your - program. What other features do you want to include?" - CSPU5_U3 - Keys - Functions_markdown_instruction: "# Refactoring Code\r\n\r\nOn - the last level, we copied a few lines of code to a different part of our program. - **Hopefully warning bells went off in your head!** Any time you are copying - portions of code from one area of your program to another, it's a good indication - that you should write a function to capture that behavior in one place. \r\n\r\nWhen - you add new features to your code **you will often create redundancies**. - To keep your code readable and consistent, you may need to rewrite old pieces - of code. This process of restructuring existing code without changing its - external behavior is called **refactoring**. It is an important process when - developing software that improves code readability and reduces complexity. - As a result, code is much easier to maintain.\r\n\r\n# Do This:\r\n\r\n* **Create - a function called `doUpArrow`**. \r\n* Move the code from the `upArrow` event - handler to the function.\r\n* **Call `doUpArrow`** from both your button and - key event handlers. (The animation below shows the steps above.)\r\n* Repeat - the same process for the down arrow / button by creating a function called - `doDownArrow`.\r\n* Once you have **removed these redundancies from your code** - test your app to make sure it still works!\r\n\r\n![](https://images.code.org/f47a98a8c9ca169848c682b3e61293cd-image-1448300634062.gif)" - CSPU5_U3 - Keys - Key Up and Down_markdown_instruction: "# Using *keyup* and - *keydown*\r\n\r\nOn the last level, we played with the `keypress` event. Let's - take a look at some of the other key events. \r\n\r\nYou are going to get - the chance to play with `keyup` and `keydown` in this level. **Pay attention - to the different values of `event.key` for `keydown` and `keypress`. **\r\n\r\n# - Do This:\r\n\r\n* Switch to the event type to `keydown` or `keyup`. \r\n\r\n<img - src=\"https://images.code.org/fa91b1a9e3240eb65ff75b381e76ce69-image-1447213909054.gif\" - style=\"width: 350px\">\r\n\r\n* Try out the event.\r\n\t* Press and hold - a key\r\n * Try the arrow keys\r\n * Shift\r\n * Option\r\n * - Alt\r\n * Others" - CSPU5_U3 - Keys - Multiple Keys_markdown_instruction: "# Multiple Keys\r\n\r\nIf - you want your program to respond differently to a couple different keys, you - will need to use chained conditional statements (`if` and `else-if`). \r\n\r\nLet's - set up the program to **play a different sound for the down key.**\r\n\r\n# - Do This:\r\n**We've added another sound** to the app, but it's just sitting - at the top of the code.\r\n\r\n* Add an `else-if` statement to check if the - **down arrow** was pressed.\r\n\r\n<img src=\"https://images.code.org/996914e436cca050f62d5b851899eda9-image-1447215275417.gif\" - style=\"width: 350px\">\r\n\r\n* Move the `playSound` command from the top - of the program inside the `else-if`. (Notice that in the example, we switch - to block mode to move this line because it's easier to move blocks around - that way. You can just copy/paste the text too.)\r\n\r\n<img src=\"https://images.code.org/42b2df84b4cd98267068592218ac96ed-image-1447215267891.gif\" - style=\"width: 350px\">\r\n\r\n* **Test the program:** it should play one - sound when the **up** arrow is pressed and a different sound if the **down** - arrow is pressed. It shouldn't make any sound if any other keys are pressed. - " - CSPU5_U3 - Loops - Complex Condition_markdown_instruction: "# Expressing Stopping - Conditions: \"Until Loops\"\r\nIt is often more natural to think about looping - in terms of when the loop should end rather than when it should continue. - For example you might say \"keep going down the road until you see the gas - station\" or \"keep calling until you get through to someone.\" You might - think of these as \"until loops\" rather than \"while loops,\" since we want - the loop to continue **until a condition is true rather than while a condition - is true**.\r\n\r\n**There is no \"until loop\" in JavaScript** but it is actually - quite easy to translate \"until loops\" into `while` loops so that you can - use them in programs. An \"until loop\" runs *until* a condition is true, - as opposed to a while loop which runs *as long as* a condition is true. That - means an until loop is the logical inverse of a while loop - it runs as long - as the **condition is false**. The table below shows how you can use the **NOT** - ( `!` ) operator to translate stopping conditions into `while` loop conditions.\r\n\r\n| - Expressed as Stopping | Expressed as Until Loop | Expressed as While Loop - |\r\n| --- | --- | --- |\r\n| **Stop** once you reach the gas station | Keep - going **until** you reach the gas station | Keep going **while** you have - **NOT** reached the gas station|\r\n| **Stop** calling when you get through - to someone | Keep calling **until** you get through to someone | Keep calling - **while** you have **NOT** gotten through to someone|\r\n| **Stop** when `x - == y` | `until(x == y){...` | `while(!(x == y)){...`|\r\n<br>\r\nNote how - we can use the **NOT** operation to find the **logical inverse** (or opposite) - of the condition from our \"until loop\" to create a `while` loop. Let's - do a little practice of that now.\r\n\r\n# Do This:\r\n\r\n**Starter code** - is provided that repeatedly rolls two dice and writes their values to the - screen. **Careful: ** before you edit this code it creates an infinite loop.\r\n\r\n* - Use the technique above to **modify this code** so that the loop **stops when - both dice are 5 or greater**.\r\n* **Try it out and experiment.** You should - exit the loop the first time both dice have values greater than or equal to - 5 displayed.\r\n\r\n![](https://images.code.org/076fb8e95fabc55e8ee45e31e51ca2d5-image-1448925611863.19.59 - PM.png)" - CSPU5_U3 - Loops - 1_markdown_instruction: "# *while* Loops\r\n\r\n<img src=\"https://images.code.org/bfb82e4caecc3ad1338177e05064ef72-image-1446669721477.41.28 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\n **The `while` loop - uses a boolean condition to repeatedly run a block of code.** It checks the - expression, and if it is true it runs the block of code contained within it. - This process of checking the condition and running the block of code is repeated - as long as the boolean condition remains true. **Once the boolean expression - becomes false it will stop.**\r\n\r\nWe are going to start exploring a `while` - loop by **modifying the condition on which a `while` loop runs and using `console.log` - to ensure it is correctly evaluating its condition**.\r\n\r\n# Do This:\r\n\r\n* - **Starter code** is provided which creates a `while` loop that repeatedly - moves the turtle around the screen.\r\n* **Add a `console.log` command** inside - the loop after `num` is assigned a random number. This way you can see the - value the loop is based on.\r\n![](https://images.code.org/1da444fd5c6533ad1cc0de3c593bf92d-image-1446825127341.gif)\r\n* - **Run the program a couple times** and look at the results.\r\n* **Change - the condition for the `while` loop** to check if the variable **`num` is less - than 90**. Your output might look like the example below.\r\n\r\n![](https://images.code.org/97df98c23c0c03a7ce480108a92627a5-image-1448296906193.41.17 - AM.png)" - CSPU5_U3 - Loops - 10_markdown_instruction: "# Writing a Loop From English\r\n\r\nAlright - it’s your turn. Can you translate the English into code? This problem also - involves an \"until loop\" problem.\r\n# Do This:\r\n\r\nTake this statement - in English and translate it into code: \r\n\r\n**“Write a program that simulates - the rolling of two dice. Keep rolling the dice UNTIL the sum of the dice is - either a 7 OR an 11.\"** Your program should display the results of each - roll. \r\n\r\n**NOTE**: this one is a *little* tricky. Hint: In English - we sometimes say \"or\" when in cold hard logic we mean \"and\".\r\n\r\nHere - is a sample output:\r\n\r\n![](https://images.code.org/706279a3c167d8c76068a7ded5146eed-image-1456434365077.png)" - CSPU5_U3 - Loops - 11_markdown_instruction: "# Debugging: Complex Logic\r\n\r\nIn - this challenge you need to find and fix a bug in a program that simulates - rolling one die. \r\n\r\nThe given code accidentally loops infinitely, so - something must be wrong with the condition. Can you figure out how to fix - it?\r\n\r\n# Do This:\r\n\r\n* **Fix the condition** so that it keeps rolling - the die as long as the value is **not a 2 or a 3.**\r\n\r\n* **Hint:** Think - about other ways you can express this idea in English. \r\n\r\n" - CSPU5_U3 - Loops - 12_markdown_instruction: "# Repeat Specific Number of Times\r\n\r\nInstead - of writing code that makes the loop run a random number of times, we can control - the `while` loop by changing the variable used in the boolean expression differently. - Let’s try just printing a string 5 times.\r\n\r\n# Do This:\r\n\r\n* **Starter - Code:** Right now the code prints a string \"Hi\" twice.\r\n* **Change the - code** so that it prints the string \"Hi\" 5 times.\r\n* **Notice** how `count` - is being re-assigned each time through the loop." - CSPU5_U3 - Loops - 14_markdown_instruction: "# Defensive Loop Conditions\r\n\r\nTake - a look at the starting code. Instead of counting by 3's we had decided to - count by 4's. \r\n\r\nBut this will run us into a problem. Can you see why?\r\n\r\nWe - wanted to stop counting at 30, but when you count by 4 you will actually never - hit 30. It would go... 24, 28, 32, 36... What we really want to do is stop - when the number is **greater than 30**. This is an important defensive programming - strategy. Make the condition catch more cases than you think you need so that - if for some reason something does not go exactly as you planned it will hit - the stop condition and not go infinitely.\r\n\r\n\r\n# Do This:\r\n\r\n* **Change - the loop condition** to prevent the infinite loop and stop counting once the - count is past 30." - CSPU5_U3 - Loops - 15_markdown_instruction: "# Using an *if* Statement In a - Loop\r\n\r\nA common thing to do is to use variables to keep track of some - sort of count. When used in a loop we count things very quickly.\r\n\r\n**Scenario:**\r\nIf - you roll a pair of dice, rolling a 12 (two sixes) is rare. How rare? If - you were to roll a pair of dice 1,000 times, on average, how many times would - it come up as 12?\r\n\r\nTo figure this out, we could write code to run an - experiment. It would go something like this:\r\n* Make a loop that simulates - rolling a pair of dice 1,000 times.\r\n* Inside the loop, add an `if` statement: - **if die1 + die2 == 12, then add 1 to a counter**.\r\n* After the loop, display - the result.\r\n\r\n# Do This:\r\nThe **starter code** sets up the whole experiment - for you, except it doesn't count the number of 12's rolled - that's your - job.\r\n\r\n* **Run the code** to see what the experiment does.\r\n\r\n* ** - Add an `if` statement inside the loop** to check if the sum of the dice is - equal to 12, and add 1 to `twelveCount`.\r\n\r\n* Once the loop has completed, - **display the number of times the sum was 12.**\r\n\r\n**Note:** If you remove - (or comment out) the `console.log` statement that displays every roll of the - dice, the experiment will speed up A LOT! You could do tens of thousands - of dice rolls in a matter of seconds." - CSPU5_U3 - Loops - 2_markdown_instruction: "# Infinite *while* Loops\r\n\r\n`while` - loops run until their condition becomes false, which raises an interesting - question. **What happens if the condition never becomes false**? In these - cases the program enters what is called an **infinite loop** over the commands - in the `while` loop, and it never reaches the rest of your program. **We normally - avoid infinite loops in our programs**, but let's try it out to see what - happens.\r\n\r\n# Do This:\r\n\r\n* **Starter code** is provided which creates - a `while` loop to move the turtle around the screen.\r\n* **Change the `while` - loop condition to something that will always be true.** The easiest way to - do this is to change 50 to be a number that randomNumber will never generate - such as 200. \r\n* **Run the program.** Notice that it will never stop running. - You may even get an error from your browser.\r\n* **Hit reset to stop it.** - Your computer may actually stop running as you expect if you let an infinite - loop run for too long. **It's possible you may even need to close the browser - window and reload the page. If you hit reset early enough you can usually - avoid this problem.**\r\n* **Find a condition using `<` or `>` that will also - cause an infinite loop.**" - CSPU5_U3 - Loops - 3_markdown_instruction: "# Changing *if* to *while*\r\n\r\n** - How many times would we have to roll a die before it comes up as a 6?** In - the program you're about to see, we **simulate rolling a die (generating - a random number between 1 and 6)** in order to answer this question.\r\n\r\n# - Do This:\r\n\r\n** Starter code** is provided which re-rolls a die once if - the first roll is not a 6. \r\n* **Change the `if` statement to a `while` - loop** so the program will keep rolling the die **while the current roll is - not a 6.** \r\n\t* **Hint:** The easiest way to do this is to change the text - from `if` to `while`.\r\n<img src=\"https://images.code.org/50b97e8858bf5ebf82eb1d358f875854-image-1446739013775.gif\" - style=\"width: 350px; border: solid 1px black \">\r\n* Run the program to - test out the change.\r\n" - CSPU5_U3 - Loops - 4_markdown_instruction: "# Debug Commands\r\n\r\n<img src=\"https://images.code.org/c6322845b96b70c9083a6c62736048e5-image-1446739268136.00.34 - AM.png\" style=\"width: 200px; float: right\">\r\n\r\nCheck out the new **Debug - Commands toolbox** that has appeared next to the Debug Console! These powerful - tools allow us to **pause a program at a certain point** while it’s running - and then execute lines one at a time. \r\n\r\nUsing these tools we can investigate - the state of variables and other elements of the program at any point, mid-execution. - This makes it much easier to see what’s happening while the programming is - actually running!\r\n\r\nIn order to use the debug commands, you first have - to indicate which line you want the program to pause at. This is called adding - a “breakpoint” (see animation below).\r\n\r\n# Do This:\r\n\r\n* **Add a breakpoint** - on the line where the `while` loop starts. (**Just click the line number.**)\r\n* - **Use the <img src=\"https://images.code.org/bd8f1a67242e64e6b3740eac79f881e8-image-1446748421345.33.09 - PM.png\" style=\"width: 75px\"> button** to execute each line one at a time.\r\n* - Each time you hit the breakpoint, **use the console to check value of `num`**. - \r\n* **NOTE:** If you hit <img src=\"https://images.code.org/6c4712da58e32dae2d04c52d9964fca9-image-1446741498097.37.48 - AM.png\" style=\"width: 75px\"> it will \"continue\" executing the program - normally, unless of course it hits another breakpoint. \r\n\r\n![](https://images.code.org/68f8e185914c8cc127aa9573ae37f687-image-1446835628580.gif)" - CSPU5_U3 - Loops - 5_markdown_instruction: "# Update Condition\r\n\r\nIn order - for a `while` loop to stop at some point, the code inside the loop **must - change something about the state of the program** - usually the value of a - variable - so that eventually the boolean expression becomes false. Otherwise - you'd have an infinite loop!\r\n\r\n# Do This:\r\n**Starter Code:** The starter - code runs an infinite loop. \r\n* **Run the code** to see the problem in action. - Remember to hit the reset button to stop the infinite loop.\r\n* **Add code - inside the `while` loop** which will **update the variable `num` so that the - condition will eventually become false.**\r\n* **TIP:** you can use the debugging - tools if you think they would be helpful." - CSPU5_U3 - Loops - 6_markdown_instruction: "# Starting Condition\r\n\r\nWe - have seen that loops can run infinitely. On the last level we saw that there - is also the **chance that the loop never runs at all!** If the condition of - the `while` loop starts out false then the loop will never run.\r\n\r\nWe - fixed this problem in the last exercise by displaying the value of `num` in - two places: before the loop and in the loop. Duplicating code is generally - a bad strategy, so the question is: can we be a little clever and get into - the loop without missing any values? The answer is yes.\r\n\r\n**The solution** - is to initialize the values used in our boolean expression so that we are - **certain** it will evaluate to true the first time the loop checks it. **For - example, if your loop condition is: `while (num != 6)` you could initialize - `num` to anything other than 6 and you'd know that you get into the loop**. \r\n\r\nIf - you use this technique though...\r\n1. You need to make sure you set the value - of `num` right away inside the loop.\r\n2. You probably want to use a nonsense - value like -1, so that if you ever see that displayed it will be obvious something - is wrong and be easier to debug.\r\n\r\n# Do This:\r\n\r\n* **Starter code** - is provided which creates a `while` loop that never runs.\r\n* **Run the program** - once to see that the loop is never entered.\r\n* **Fix** the problem by changing - the initial value of `num` to a nonsense value such as -1." - CSPU5_U3 - Loops - 7_markdown_instruction: "# Printing After Setting Value\r\n\r\nWe - started trying to remove the duplicate code we had on the last level by initializing - a variable to a nonsense, or \"dummy,\" value that would still ensure we entered - the loop. \r\n\r\nIn the code provided, not every number is going to display. - However, this time we want to try **not to add code** to fix the problem, - since duplicate code is inefficient. \r\n\r\n# Do This:\r\n\r\n* **Starter - Code:** The code is completely functional except that it does not print one - of the numbers it's supposed to. In addition we don't want it to print the - dummy variable of -1.** Hint: ** What should be the last number that prints - every time this program runs?\r\n\r\n* Run the program to see the behavior.\r\n\r\n* - Fix the code so that it prints all the values of `num`. **Hint:** You don't - need to add any code. Just switch the order of the code you have now!" - CSPU5_U3 - Loops - 8_markdown_instruction: "# Printing Before the Loop Starts\r\n\r\nSometimes - our code will be doing the right thing but we won't be able to tell because - of the way we are printing values. We need to make sure we print all the values - we are interested in. \r\n\r\nThis program *should* write all the values of - `num` to the screen as it runs; however it misses one - the first one generated. \r\n\r\n# - Do This:\r\n\r\n* **Run the program** a few times and notice that sometimes - it just prints \"Done.\" and nothing else, even though a number was generated. - The first value of `num` never gets displayed.\r\n* **Add a `write` statement** - before the loop to print the first number. \r\n* **Hint:** Look at the two - times `num` is assigned a value. Which one isn't being displayed? " - CSPU5_U3 - Loops - 9_markdown_instruction: "# Boolean Operators in *while* - Loops\r\n\r\nWe can create compound boolean expressions to control our `while` - loops just like our `if` statements. Let's try using boolean operators in - our `while` loop condition.\r\n\r\n# Do This:\r\n\r\n* Right now this code - rolls two dice as long as either one of them is less than 3. **Modify the - condition so that it keeps rolling as long as *both* are less than 3.**\r\n\r\n* - **HINT:** To say that both dice are less than 3 the boolean expression must - say: if die1 less-than 3 AND die2 less-than 3...\r\n" - CSPU5_U3 - Loops - minus = operator_markdown_instruction: "# Try Out the *-=* - Operator\r\n\r\nThe `-=` operator works almost identically to `+=`, but instead - it subtracts the value provided from the variable. Let's use this operator - to **create a loop that counts down from 30 by 3's**.\r\n\r\n# Do This:\r\n\r\n* - **Change the code to use `-=`** to count from *down* from 30 to 0 by 3's." - CSPU5_U3 - Loops - Minus Minus_markdown_instruction: "# *++* Has a Friend! Introducing - *--*\r\n\r\nAs you may have guessed, just as we can write `count = count + - 1` as `count++` we can also write `count = count - 1` as `count--`.\r\n\r\nLet’s - write a program that counts **down** from 10 down to 1. \r\n\r\n# Do This:\r\n\r\n* - **Starter Code: ** The current program counts **up** from 1 to 10. \r\n\r\n* - **Change the code to use `count--` to count *down* from 10 to 1.** You will - need to:\r\n\t* Change the looping condition.\r\n * Change `count++` to - `count--`.\r\n * Change the initial value assigned to `count`.\r\n" - CSPU5_U3 - Loops - plus and minus = operator_markdown_instruction: "# Introducing - *+=* and *-=* Operators\r\n\r\nSometimes you want to add or subtract something - *other than 1* from the current value of a variable. If you wanted to add - or subtract 3 for example, such as: `count = count + 3` or `count = count - - 3`, `++` and `--` wouldn’t help. \r\n\r\nIt turns out this is pretty common - as well so there is actually a shorthand version of `count = count + 3`. \r\n\r\n**Introducing - `+=` and `-=`**!\r\n\r\nWe can use the `+=` or `-=` operator to add or subtract - any value we want to the current value of a variable. \r\n\r\nSo, the shorthand - versions of `count = count + 3` and `count = count - 3` would be:\r\n * `count - += 3` \r\n * `count -= 3`\r\n\r\n**Notice** that these 3 statements: `count - = count + 1`, `count++`, and `count += 1` all do **exactly** the same thing!\r\n\r\nWhich - one you use as a programmer is your choice, and in the future you can use - either version, but try out the new operator here.\r\n\r\n# Do This:\r\n\r\n* - **Change the code to use `count += 3`** instead of `count = count + 3` so - the program will still count up by 3. (You'll need to be in text mode to - do this.) \r\n\r\n(You'll get to try out `-=` on the next level.)" - CSPU5_U3 - Loops - Plus Plus_markdown_instruction: "# *++* Operator\r\n\r\nAs - programmers we are always looking for more concise ways to write code. It - is so common to add 1 to a variable such as in `count = count + 1` that there - is actually a shorthand for it. \r\n\r\n# Introducing the *++* Operator\r\n\r\nYou - can write `count++` to add 1 to `count`. `count++` does the exact same thing - as `count = count + 1`! \r\n\r\nIn fact the computer turns `count++` into - `count = count + 1` behind the scenes - it really is just a convenient shorthand.\r\n\r\n**Note:** - This is more of a programmer style choice so if you want to write your code - using `count = count + 1` instead there is nothing wrong with that!\r\n\r\n# - Do This:\r\n\r\n* Change the code to use `count++` instead of `count = count - + 1`. (You'll need to be in text mode to do this.)\r\n\r\n** Misconception - Alert:** You don't need to write `count = count++` - the computer is doing - the assignment for you." - CSPU5_U3 - Loops - Typing in Console_markdown_instruction: "# Debug Console: - Variable Values\r\n\r\nUp until now, if we wanted to find out the value of - a variable at some point in the execution of a program, we've used `console.log`. - That is still going to be a great strategy but **the Debug Console can do - even more for us!**\r\n\r\n**Check this out:** We can check the value of a - variable in real time (as our program executes) by typing its name into the - prompt within the Debug Console and hitting \"enter\". **This is another powerful - tool for debugging your programs.** \r\n\r\n![](https://images.code.org/7e7ff7aa041814cfcd69a1c9a028c439-image-1446826780896.gif)\r\n\r\n# - Do This:\r\n\r\n* **Run the program.**\r\n\r\n* Use the Debug Console to **check - the ending value of `num`**. You can do this by typing num in the Debug Console - and hitting enter!" - CSPU5_U3 - Loops And Arrays - Add 5_markdown_instruction: "# Updating Values - in an Array with a *for* Loop\r\n\r\nThe `for` loop you set up on the last - level is actually so common that we will rarely deviate from this `for` loop - setup.\r\n\r\n<img src=\"https://images.code.org/fba4d95636869c1c1c1a539fe81ded72-image-1447346793054.45.50 - AM.png\">\r\n\r\nThis `for` loop basically means **\"for every possible index - in `myArray`...\"** and we use it as a basic building block for processing - arrays. Common array-processing techniques like searching for a value, updating - all values, or calculating simple stats on an array will all be completed - using a `for` loop written with the syntax above.\r\n\r\nIn fact, we're going - to see that happen right now as we **use a `for` loop to add 5 to every value - in an array**.\r\n\r\n# Do This:\r\n**Starter code** has been provided that - creates an array of random values. You are also given a `for` loop that loops - over every index in the array.\r\n\r\n* Add code inside the loop to **add - 5 to the value at every location in the array**. \r\n\t* ** Remember: ** `myArray[i]` - refers to the element in the array at the current value of `i`.\r\n* Confirm - your code works by **displaying the values in your array before and after - your loop**. Below is a sample result. Notice how, after the array has been - processed, all of the values are 5 greater than the originals.\r\n\r\n![](https://images.code.org/aaf36ac93098ef7f43fdda04243d17ad-image-1447792214666.29.41 - PM.png)" - CSPU5_U3 - Loops And Arrays - Counting Times_markdown_instruction: "# Counting - Occurrences of a Value\r\n\r\nInstead of displaying a true/false value for - *every* item in the list, let's compute one value and display it. A common - thing to want to do is **count** the number of times a value occurs. We can - do this with a very small change to the code we've already got. \r\n\r\n# - Do This:\r\n**Starter Code** is similar to past levels. We've also created - a variable called `fiveCount`.\r\n\r\n* ** Add an `if` statement** inside - the `for` loop to **increment `fiveCount` if the value is equal to 5. **\r\n - (Note: this will be exactly the same as the `if` statement you wrote in the - previous level. Just giving you more practice).\r\n\r\n* **Run and re-run - your code** to make sure that it's accurately counting the number of 5's - in the array. Since the array is getting a random set of values every time - you run the program, you might have to run it a bunch of times to thoroughly - test it. Make sure you get it to run at least once when no 5's appear in - the array.\r\n\r\n* Finally, if you'd like to, **change the first loop in - the program to add 100 items to the array** instead of 10. Your code should - still work to count the number of 5's, no matter how big the original array - is!" - CSPU5_U3 - Loops And Arrays - Divid by 2_markdown_instruction: "# Divide by - 2\r\n\r\nIn the last exercise, you updated every element in an array using - a `for` loop. Let's get a little bit more practice with the pattern you used - in the last exercise, this time creating the loop yourself.\r\n\r\n# Do This:\r\n**Starter - code** is provided which creates an array of random values.\r\n\r\n* Create - a `for` loop that **iterates over every index in the array**.\r\n\r\n* Within - your loop, add code that **divides each value in the array by 2**.\r\n\r\n* - Use the provided `console.log` statements to **confirm your program runs as - expected**. Below is an example of the expected outcome.\r\n![](https://images.code.org/04b09b795c30313c67b2242f1773b2f6-image-1447795598583.26.21 - PM.png)" - CSPU5_U3 - Loops And Arrays - Find Min_markdown_instruction: "# Reusing a Function - Pattern: Find Minimum\r\n\r\n**Nice work! You've just written a function - that implements an algorithm to process an array!** If you feel comfortable - with the basic pattern you used to create this function, you can quickly create - functions for many other useful algorithms that work on arrays.\r\n\r\n**Basic - Function Pattern**\r\n\r\n* Create a **function that accepts an array** as - input.\r\n* **Create a \"flag\" variable** and set its default value before - looping through the array.\r\n* Loop through your array with a `for` loop - that **visits every index in the array**.\r\n* **Update your flag** as necessary - with every iteration of your loop.\r\n* **Display your flag** at the end of - the loop.\r\n\r\nLet's use this pattern to **write a function that finds - and displays the smallest value in an array**.\r\n\r\nInstead of using a true/false - flag to indicate whether we found a value, **we'll use a variable to keep - track of the smallest value we've seen in the array so far**.\r\n\r\n# Do - This:\r\n\r\n**Starter code** has been provided which outlines and calls `findMinVal` - with different inputs. Your job will be to finish writing the function.\r\n\r\n* - Before programming, try to **develop an algorithm that you could use to find - the minimum value in an array**. Use the pattern outlined above as a guide.\r\n* - **Write code** in the places indicated with comments to complete the function. \r\n\t* - You'll want to use the `minVal` variable to keep track of the smallest value - you've found so far.\r\n * You'll need to **write an `if` statement** - that checks whether the current value in the array is less than `minVal`. - If it is, then update the smallest value. \r\n* **Run the code** to ensure - it is working as you intend.\r\n\r\n<details><summary><strong>HINT: pseudocode</strong> - [click to expand]</summary>\r\n<p>\r\nHere is some pseduocode that you should - be able to implement.\r\n</p>\r\n<pre>\r\nminVal = first value in array \r\nfor - EACH value IN array\r\n if value < minVal\r\n minVal = value\r\n\r\ndisplay(minVal)\r\n</pre>\r\n</details>\r\n\r\n\r\n![](https://images.code.org/e6abdc34c653e4bb0885ffabcf897fc5-image-1447877822696.16.03 - PM.png)" - CSPU5_U3 - Loops And Arrays - General Search Param_markdown_instruction: "# - General Search\r\n\r\nIn order to make a general search function, we should - be able to **search for any value, not just 5**. We can do this by making - the value to search for a parameter as well.\r\n\r\n# Do This:\r\n\r\n* **Add - a second parameter** to your `search` function to represent the item to search - for. This example uses the name `searchValue`.\r\n\r\n* **Update the code - inside the function to check for `searchValue` instead of 5.** \r\n\r\n* **Call - your search function** to search for different values inside of each array.\r\n\r\n* - The `console.log` statement **is now inaccurate**. Change it to say \"Array - has searchValue: \" followed by the value in flag.\r\n\r\n(These steps are - shown in the code animation below.)\r\n\r\n![](https://images.code.org/b71a0bd1cf725d58ae76836a6422ebeb-image-1447695946760.gif)" - CSPU5_U3 - Loops And Arrays - Intro For Loop_markdown_instruction: "# *for* - Loop\r\n\r\nIt's very common to want to repeat a set of commands a particular - number of times. Recently, we have been using the `while` loop to do this - by creating a counting variable, setting the boolean expression, and incrementing - the value of the counter by 1 each time. We've also used the `for` loop before, - and we'll explain it more in-depth now. The `for` loop was created to wrap - all of those components related to counting loops into a single line of code.\r\n\r\n<img - src=\"https://images.code.org/b93a044fc07cb4bbabb95b43132a005b-image-1447342829632.png\" - style=\"width: 450px\">\r\n\r\n<img src=\"https://images.code.org/d0d8f34d0f4aabaf66084ceac282448e-image-1447343652405.png\" - style=\"width: 450px\">\r\n\r\nProgrammers would typically read a loop `for - (var i = 0; i < 10; i++)` out like this: <br>\r\n**\"for variable i starting - at 0, while i is less than 10, i plus plus (or increment i by 1)\"**\r\n\r\nNotice - that in reading a `for` loop we still use the word \"while\".\r\n\r\nYou may - notice that when you drag a `for` loop out from the toolbox that we've set - it up for you with `i` as the variable. \r\n\r\n<details> \r\n<summary>**Why - is `i` the variable?** [click to expand]</summary> \r\n\r\nUsing the single - character `i` as the variable in a `for` loop has become a convention in programming - for a variety of reasons. One reason is that `for` loops are often used when - processing arrays - **you can think of `i` as shorthand for index. ** But - there is no reason why you have to use `i` if you don't want to. It's just - a variable. \r\n</details>\r\n\r\n# Do This:\r\n\r\n* Drag out the `for` - loop.\r\n\r\n* Insert a `console.log` statement inside the `for` loop that - displays `i`.\r\n![](https://images.code.org/2a81206296dc693463d7b147f2f93dcb-image-1447446254447.gif)\r\n\r\n* - Try changing:\r\n\t* The condition to stop the loop (make it run longer).\r\n * - The amount you change `i` by each time (try changing `i++` to something like - `i += 5`).\r\n * The starting value of `i`.\r\n\r\n" - CSPU5_U3 - Loops And Arrays - Linear Search_markdown_instruction: "# Algorithms - and General-Purpose Functions\r\n\r\nOver the next several exercises we will - be **creating a general-purpose function to determine if a value is contained - within an array**. Over the course of these exercises, keep an eye out for - the general pattern we are using, because you'll get to use it again to create - functions of your own.\r\n\r\nTo begin, we'll start simple. We'll write - code that **checks whether an array contains a specific value**. At every - index, your program should display \"true\" if the value at that index is - a 5 and \"false\" otherwise.\r\n\r\n# Do This:\r\nThe **starter code** is - similar to past levels, but you'll notice that we use a loop to construct - `myArray` rather than appending items one line at a time. You are also given - the `for` loop you will use.\r\n\r\n* Add an `if` statement inside the `for` - loop to check if the value of the array at the current index is 5. \r\n * - If the value is equal to 5, write **true** to the console. Otherwise write - **false** to the console.\r\n* **Test your code** to make sure it is working - as you intend. An example output is below.\r\n\r\n![](https://images.code.org/a64c3be0a23e25bef67494bdfeb61415-image-1447879494916.44.45 - PM.png)" - CSPU5_U3 - Loops And Arrays - Loop Array If_markdown_instruction: "# *for* - Loop with *if*\r\n\r\nSometimes we want to find values in an array that meet - certain conditions. We can add an **`if` statement inside the `for` loop** - to individually check every value within the array. To practice this, we will - create a `for` loop that will **display every value in the array greater than - 5**.\r\n\r\n# Do This:\r\n** Starter code** has been been provided that creates - an array of random values.\r\n\r\n* Add a `for` loop that references every - index in the array.\r\n\r\n* Add an `if` statement inside the `for` loop that - **displays every value in the array greater than 5** using `console.log`\r\n\t![](https://images.code.org/969077ff23232e410ce17520b0a71e1e-image-1447390972867.gif)\r\n \r\n* - **Note:** Because the original array is being constructed with random values - it's *possible* that it might not have any values greater than 5. Just run - the program a few times to make sure it works. An example of the possible - output is below.\r\n\r\n![](https://images.code.org/266e23afc3533ebd63b393b2ee8682d8-image-1447796380510.39.26 - PM.png)" - CSPU5_U3 - Loops And Arrays - Make it a Function - add list parameter_markdown_instruction: "# - Generalize *search* by Making It Into a Function - Part 2\r\n\r\nRight now, - our function just searches for a 5 in a global array called `testArray`. We - would like to be able to **use this function to search through any array**, - so we will be adding a parameter to allow us to specify which array should - be searched.\r\n\r\n# Do This:\r\n\r\n* **Add a parameter to the `search` - function called `list`**.\r\n* **Modify the code inside the function** so - that it loops over `list` (the parameter) instead of `testArray` (the global - variable).\r\n* **Call your function** with each of the arrays provided at - the top of the program.\r\n\r\n(These steps are shown in the code animation - below.)\r\n\r\n![](https://images.code.org/af4cf7bd95c09f3e8e3548a3383c4a4e-image-1447693121377.gif)" - CSPU5_U3 - Loops And Arrays - Make it a Function_markdown_instruction: "# Generalize - *search* by Making It Into a Function\r\n\r\nYou've just written code to - search for a value in a list! If we could generalize this behavior, it might - be useful to us in the future - it's probably something that we want to do - over and over again. \r\n\r\nOver the next few levels, we'll build up a - very useful, general function for searching for *any* value in *any* list. But - we'll do it one step at a time...\r\n\r\n# Do This:\r\n\r\n**Note:** We've - provided **new starter code** that implements the pseudocode from the last - exercise. It also **creates two more arrays** that we'll be using later for - testing. For this level just worry about `testArray`. \r\n\r\n* **Run the - starter** code to verify that it works correctly.\r\n* **Create a new function**. - Name the function `search`.\r\n* **Move the code that checks for a 5 inside - the function.** **Note:** You must move the boolean variable inside the function - as well, or it won't reset each time you call the function!\r\n* **Call the - function** to make sure your code still works. The actual behavior will be - the same as when you ran it the first time. The difference now is that you're - calling a function to do it.\r\n\r\n(Steps are shown in code animation below.)\r\n\r\n![](https://images.code.org/dfad49ac35cd605410c52828716b712c-image-1447631609779.gif)" - CSPU5_U3 - Loops And Arrays - Print Array_markdown_instruction: "# Print an - Array with a *for* Loop\r\n\r\nAs you know, we can use variables as indexes - in an array. We can take advantage of this fact to create a `for` **loop - which visits every index in an array**.\r\n\r\n![](https://images.code.org/5aeb9986535424b1d737b8221685196f-image-1447446416081.26.01 - PM.png)\r\n\r\nIn this `for` loop, the `i` eventually gets set to every possible - index in the array. You are going to use a loop of this kind to display all - the values in an array.\r\n\r\n# Do This:\r\n**Starter code** is provided - that adds several random values to an array.\r\n\r\n* Create a `for` loop - that uses the syntax shown below (and above) to **iterate through every index - in the array**.\r\n\t![](https://images.code.org/930b40b3e3f204605a0fd27fee9d8b8f-image-1447346008842.gif)\r\n \r\n* - Use `console.log` to **display the contents of the array at each index**.\r\n\t![](https://images.code.org/43431613ea0c045411499dd0e68e7feb-image-1447345996258.gif)\r\n \r\n* - Run the program to **confirm it is displaying all the values**.\r\n" - CSPU5_U3 - Loops And Arrays - Printing Single True_markdown_instruction: "# - Print a Single True/False Value\r\n\r\nSometimes we don't care about the - count and just want to know if the array contains a 5 or not. **Let's try - to display a single true/false indicating whether the list contains a 5.** - There are two cases to consider: \r\n\r\n1. The list **does not contain any - 5's**; you need to display **\"false\"**. \r\n2. The list **contains at - least one 5**; you need to display **\"true\"**.\r\n\r\n**HINT:** one way - to do this is to reference your counter variable `fiveCount` after the array - has been processed.\r\n\r\n# Do This:\r\n**We've pulled your code from the - previous level so you can continue to add to it**.\r\n\r\n* Add a **`console.log` - statement to display a single \"true\" or \"false\"** indicating whether there - is a 5 anywhere in the array.\r\n\r\n| Example output 1: One or more 5's - | Example output 2: No 5's |\r\n| --- | --- |\r\n|![](https://images.code.org/15ed45d471e9279a8739bad5f31c3a4d-image-1447452726753.06.31 - PM.png) | ![](https://images.code.org/ed19957449c6b68cb19326a6f430edec-image-1447452740979.06.46 - PM.png)|" - CSPU5_U3 - Loops And Arrays - Search with Boolean Var_markdown_instruction: "# - Using a Boolean Variable as a Flag\r\n\r\nWe are going to do a **challenge - that is similar to the last exercise** but, rather than counting the number - of 5's in the array, we're going to use a different **interesting programming - technique for processing arrays** that might prove useful to you in the future. - \r\n\r\n# Using a Boolean Flag\r\n\r\n<img src=\"https://images.code.org/756fcab9d5f48ace76eb5d300fcf58af-image-1447624065160.png\" - style=\"float: right; width: 250px\">\r\nThe technique is generally referred - to as **using a boolean \"flag.\"** To understand this idea, think about how - some mailboxes work: the flag starts down, and when a person wants to let - the mail carrier know there is something to pick up, she puts the flag up - to notify the mail carrier that there is outgoing mail in the box.\r\n\r\nWe - can use a variable to do something similar when programming. Rather than incrementing - a count every time we find a 5 in the array, we will use a variable that acts - like a **flag**. We will create a variable before the loop and assign it - `false` to start (flag is down). Then, as we process the array, if we find - a 5, set the variable to `true` (put the flag up). \r\n\r\nHere is some pseudocode:\r\n```\r\nvar - flag = FALSE\r\nFOR EACH item IN list\r\n IF (item EQUALS 5)\r\n flag - = TRUE\r\n \r\nDISPLAY (flag)\r\n```\r\nNotice that it doesn't matter - if we find more than one 5. It will just keep setting the flag to `true`. However, - if there are no 5's, the `if` statement in the loop will never execute, and - so the variable will remain the value it was initialized to, which was `false`.\r\n\r\n# - Do This:\r\n\r\n* **Implement the pseudocode above** in JavaScript. \r\n* - We've given you code that constructs an array of random values, and the standard - `for` loop for looping over an array.\r\n* The output will be no different - from the previous exercise, but you should still **confirm that your program - correctly identifies when a 5 is in the array.**\r\n\r\n| One or more 5's - | No 5's |\r\n| --- | --- |\r\n|![](https://images.code.org/15ed45d471e9279a8739bad5f31c3a4d-image-1447452726753.06.31 - PM.png) | ![](https://images.code.org/ed19957449c6b68cb19326a6f430edec-image-1447452740979.06.46 - PM.png)|\r\n\r\n" - CSPU5_U3 - Movie Bot - Multiple If Sequences_markdown_instruction: "# Adding - Rating to Keywords\r\n\r\nUp until now our movie suggestions have just been - based on genre. Let's now also look for keywords related to the movie rating - like \"G\", \"PG\", \"PG-13\", and \"R\" so we can give movie suggestions - based on both genre and rating.\r\n \r\n**Note: ** We've updated the flowchart - below (highlighted in yellow) to see the logic we are trying to add.\r\n\r\n**Note - 2: ** The logic of the program right now will yield some odd results - there - are some things you can type that will give 2 suggestions - this is expected, - for now. We are just taking a small step here. We'll refine the code again - in later levels.\r\n\r\n# Do This:\r\n\r\n* **Add another set of `if`, `else-if`, - and `else` statements** inside the question `if` statement to **check for - keywords for movie ratings (G, PG, PG-13, and R).**\r\n\r\n* **Hint:** When - checking for \"G\", \"PG\" and \"R\" you need to be a little clever. R and - G are letters that will show up in lots of words and PG will get confused - with PG-13. We want to check for \"g\" and \"r\" with spaces on either side. - So make sure to use `\" g \"` where there is a space on either side of g instead - of `\"g\"`. For \"pg\" you can just add a space after the pg to look for `\"pg - \"`\r\n\r\n* **Test out a couple sentences with your keywords** to make sure - the change worked.\r\n\r\n<img src=\"https://images.code.org/886713cfedf4802e174b68ed2eb36d4b-image-1455816199174.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/886713cfedf4802e174b68ed2eb36d4b-image-1455816199174.png\" - target=\"_blank\">Click to open in separate window.</a>" - CSPU5_U3 - Movie Bot - Nested Motivation_markdown_instruction: "# Checking - for a Question\r\n\r\nWe're going to start adding some \"intelligence\" to - our Movie Bot. Since we've added `includes` it can now tell if its keywords - appear anywhere in the input. As a result some inputs may be questions while - others might simply be statements. **We'd like the movie bot to respond differently - to questions and statements.**\r\n\r\nIn order to tell when the user is asking - a question **we will be checking whether the input includes a question mark - **.\r\n\r\n# Do This:\r\n\r\n* Add a separate statement to **check if the - input includes a \"?\"**. \r\n* If the input includes a question mark **print - \"That's a good question.\" before the recommendation.**\r\n* Otherwise print - **\"I only answer questions.\" before the recommendation.**\r\n* **Test out - a couple sentences with your keywords** to make sure the change worked.\r\n\r\n**Example - Input --->** | **Output**\r\n---|---\r\nWhat's the best action movie? | That's - a good question. The best action movie is any James Bond movie.\r\nI love - comedy | I only respond to questions. The best comedy movie is The Princess - Bride.\r\n<br>\r\n**Note:** Check out the flowchart below to see the logic - we are trying to change.\r\n\r\n<img src=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - Movie Bot - toLowerCase_markdown_instruction: "# Dealing with Character - Case\r\n\r\nWhat if the user types **ACTION** instead of **action**? These - are two different strings to the computer and therefore it won't recognize - they are the same. We want Movie Bot to treat words the same ignoring the - case of the letters. We can do this using the string command `toLowerCase`.\r\n\r\n**Note: - ** Check out the flowchart below to see the logic we are trying to add. \r\n\r\n# - Do This:\r\n\r\n* **Try typing COMEDY, ACtioN, horroR, and Romance** into - Movie Bot.\r\n\r\n* **Use the `toLowerCase` command** to change all user input - into lowercase letters after they enter it.\r\n\r\n* **Check that COMEDY, - ACtioN, horroR, and Romance generate the same recommendations** as comedy, - action, horror, and romance.\r\n\r\n<img src=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3 - Movie Bot - When Multiple If Statements_markdown_instruction: "# - Adding a Separate *if*\r\n\r\nIt's still the case that sometimes you want - to have two completely separate groups of `if` statements because there are - separate conditions you want to check and possibly have responses for both. - You don't always just keep adding to a giant `if` statement forever.\r\n\r\nIn - the Movie Bot demo you probably saw that if you type \"please\" and \"thank - you\" it adds something extra to the response (it says something like \"Thanks - for being polite!\"). Let's add this functionality to your movie bot as well. - \r\n\r\n**Note: ** Check out the flowchart below to see the logic we are trying - to add.\r\n\r\n# Do This:\r\n\r\n* ** Add an `if` and `else-if` statement - that checks for \"please\" and \"thank you\"**. \r\n\t* If the string includes - \"please\" it should say \"Thank you for being so polite!\" before it gives - its response.\r\n * If the string includes \"thank you\" it should say - \"You are very welcome!\" before it gives its response.\r\n\r\n* **Test out - a couple sentences with your keywords** to make sure the change worked.\r\n\r\n<img - src=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" - target=\"_blank\">Click to open in separate window.</a>" - CSPU5_U3 - Practice Create Performance Task_markdown_instruction: "# Practice - Create Performance Task\r\n\r\nYou've finally made it to the end of the Programming - Unit! We will continue some programming in the next unit, but for now we are - going to use all the new concepts you have learn to create something of your - own design! \r\n\r\n# Do This:\r\n\r\n* **Read the Project Overview** to understand - the entire project.\r\n* **Follow the Project Planning Guide**.\r\n* **Implement - your final program in this level**." - CSPU5_U3 - Return Values - constrainTurtle_markdown_instruction: "# Use a Function - that Returns a Value in an App\r\n\r\nWe create functions to **contain blocks - of code that will be used multiple times within our program**. The same is - true with functions that return values. Let's see an example of how we might - use one of the functions we've written.\r\n\r\nThis exercise comes with starter - code that creates a **simple turtle driver app**. The x and y location of - the turtle are stored in the variables `xloc` and `yloc`. An event handler - is used to update these values when the **arrow keys are pressed**, and then - a separate `updateTurtle` function is called to draw the turtle on the screen.\r\n\r\nCurrently - the turtle can drive off the screen. If we are clever about how we use our - `constrain` function, however, we can prevent this from happening.\r\n\r\n# - Do This:\r\n\r\n* **Starter code** is provided which allows the turtle to - move. Additionally a **working version of `constrain`** is provided.\r\n* - **Call the `constrain` function twice** within the `updateTurtle` function - to prevent the turtle from going outside the screen.\r\n\t* One call to the - function for `xloc` and one time for `yloc`.\r\n * Recall the screen is - **320 by 450 pixels**.\r\n* **Run your app** and confirm the turtle cannot - leave the screen.\r\n\r\n![](https://images.code.org/f2e24abdf2d4008dfdc4f2ba9e23ff2c-image-1447958362880.gif)" - CSPU5_U3 - Return Values - debuggingConstrain_markdown_instruction: "# Debugging - and Multiple Return Statements: *constrain*\r\n\r\nWe're going to debug another - function that uses multiple return statements. The function is called `constrain` - and is used to limit an input number to a certain range. The function accepts - three parameters.\r\n\r\n* `input` : the number to be constrained.\r\n* `low` - : the lower bound of the range. If `input` is below this value, the function - should return the value of `low`.\r\n* `high` : the upper bound of the range. - If `input` is above this value, the function should return the value of `high`.\r\n\r\n<details>\r\n<summary>**Click - for sample input and output for `constrain`**</summary>\r\n* `constrain(15,10,20)` - should return 15 since it is within the range of 10 to 20.\r\n* `constrain(5,10,20)` - should return 10 since the input is below the range of 10 to 20.\r\n* `constrain(25,10,20)` - should return 20 since the input is above the range of 10 to 20.\r\n</details>\r\n<br>\r\nUnfortunately, - because of the way this function was written, it does not always work as expected. - In particular, **because of how `return` was used, some portions of the function - never run**. Change the structure of the function to **use the pattern you - have been shown in previous exercises, included below**.\r\n<br> <br>\r\n**Pattern - for Functions that Return Values**\r\n* Use parameters to provide input.\r\n* - Declare a variable that will be used as output, possibly initializing its - value.\r\n* Update the value in your output variable throughout your program.\r\n* - Return your output variable on the last line of your function.\r\n\r\n# Do - This:\r\n\r\n* **Run the program** and identify the errors generated in the - output.\r\n* **Inspect the logic of `constrain`** to identify the logical - errors.\r\n* **Rewrite** `constrain` to make use of the **pattern for functions - that return values**, shown above.\r\n* **Run the program** to ensure it is - now running as you expect.\r\n\r\n![](https://images.code.org/38afcc5420e084b3146a8b12cc2d0e72-image-1447952855846.07.25 - AM.png)" - CSPU5_U3 - Return Values - debuggingMaxVal_markdown_instruction: "# Debugging - and Multiple Return Statements\r\n\r\n**Having multiple `return` statements - in a program can lead to tricky situations**. You may use multiple return - statements, but it makes it easier to introduce logical errors into your program. - We're going to look at some examples of functions with return values that - include logical errors and debug them. The goal is to **recognize common errors - with return values now so you can avoid them when writing your own programs**.\r\n\r\nThere - is a logical error somewhere in the version of `maxVal` you are about to see - which uses multiple return statements. As a result the function works correctly - for some inputs but not all. You'll need to inspect the code to understand - what the issue is and make changes accordingly.\r\n\r\n# Do This:\r\n\r\n* - **Run the program** and identify the errors generated in the output.\r\n* - **Inspect the logic of `maxVal`** to identify the logical error.\r\n* **Correct - the logical error** so that the function returns the correct value for all - inputs." - CSPU5_U3 - Return Values - useMinVal_markdown_instruction: "# Using Functions - that Return Values\r\n\r\nWe have used functions that return values many times - before, but in this exercise you will see how they are actually created by - using the `return` command. The function `minVal` accepts two numbers as input - and returns the minimum of the two as output. You can call this function just - like any other, and **because it returns a number, you can treat the function - call as if it were a number**.\r\n\r\n# Do This:\r\n\r\n* **Starter code** - has been provided that creates the function `minVal` and generates two random - values.\r\n* **Inspect the code of `minVal` to understand the logic of this - function**.\r\n* On the `console.log` line **call the function using `rand1` - and `rand2` as parameters** and ensure the minimum value is returned. You - should treat the function call **as if it were a number**.\r\n\r\n<img src=\"https://images.code.org/21c2232acca1ed4a133d648982b0b042-image-1447964963356.gif\" - style=\"width: 550px\">\r\n\r\n* Check that the program generates output similar - to the output shown below.\r\n\r\n<img src=\"https://images.code.org/0ec446c772976ca8e75e5eb25d018b24-image-1447964535213.21.49 - PM.png\" style=\"width: 350px\">\r\n" - CSPU5_U3 - Return Values - wrapTurtle_markdown_instruction: "# Use a Function - that Returns a Value in an App - Part 2\r\n\r\nThis time, you're going to - write a function that returns a value to add functionality to the turtle driver. - The `updateTurtle` function now is making a call to a function called `wrap` - that has not been written yet. It accepts three parameters and should work - in the following way:\r\n\r\n* `input`: the input value to the function. If - it is within the range it should just be returned.\r\n* `low`: the lower bound - of the range. If `input` is below this value the output should be the value - of `high`.\r\n* `high`: the upper bound of the range. If `input` is above - this value the output should be the value of `low`.\r\n\r\nBy using this function - you can create the illusion that the screen \"wraps\" around, so when the - turtle leaves the top of the screen it appears again at the bottom.\r\n\r\n# - Do This:\r\n\r\n* **Starter code** is provided which allows the turtle to - move.\r\n* The `updateTurtle` function now makes two calls to `wrap`, but - the function is not yet written.\r\n* **Write the `wrap` function** so that - it implements the logic described above.\r\n* **Run your app** and confirm - the turtle now \"wraps\" when it leaves the screen.\r\n\r\n![](https://images.code.org/ebed5130ccdd16202eac0b8cc02df959-image-1447957698820.gif)" - CSPU5_U3 - Return Values - writeMaxVal_markdown_instruction: "# Writing Functions - that Return Values\r\n\r\nNow you are going to write your own function that - returns a value, `maxVal`. This function should return the maximum of two - values provided as input. The code for `minVal` is provided so that you can - **replicate the pattern used in this function**.\r\n\r\n**Pattern for Functions - that Return Values**\r\n* Use parameters to provide input.\r\n* Declare a - variable that will be used as output, possibly initializing its value.\r\n* - Update the value in your output variable throughout your program.\r\n* Return - your output variable on the last line of your function.\r\n\r\nYou may actually - recognize many similarities between how we wrote functions that process arrays - and functions that return values. **These patterns aren't rules of programming, - but they help make your code easy to read and understand**.\r\n\r\n# Do This:\r\n\r\n* - **Starter code** has been provided which stubs out `maxVal` and generates - two random values. `minVal` is still provided **so that you can replicate - the pattern used**.\r\n* **Write `maxVal`**, replicating the pattern used - to write `minVal`.\r\n* **Use `maxVal` within the `console.log` statement - as if it were a number** to generate the output similar to the one shown below.\r\n\r\n![](https://images.code.org/5941ceeb27f0ad2d59819c9395d0d89a-image-1447947829448.gif)" - CSPU5_U3 - Simulation - 1_markdown_instruction: "# Starting Small\r\n\r\nTo - start, we're going to simulate flipping a coin 10 times. You might be thinking - that isn't many coin flips, and that we could just do those flips in real - life, but this is actually an important step in developing a simulation. At - small scales we can make sure our code is working as intended because **we - can still visually confirm its output**. Once we're convinced that the logic - of our program is reliable we'll move up to simulating larger numbers of - flips.\r\n\r\nThe core logic of our program will be focused on **a `while` - loop** that simulates flipping a coin by repeatedly generating **random 0's - or 1's using `randomNumber`**. This is a great opportunity to keep practicing - using loops while applying your knowledge of variables, iteration, and `if` - statements.\r\n\r\n# Do This:\r\n\r\n* When we want to flip a coin with a - computer we will instead **generate a random number between 0 and 1**.\r\n* - Write a program that **uses a `while` loop** to **flip a coin 10 times** and - writes the value of each flip to the screen. The example below shows how your - program should run.\r\n* **HINT:** you will need to use a counter variable - in your `while` loop to keep track of how many times the coin has been flipped. - \r\n\r\n![](https://images.code.org/970622047b06af13ea7bdd50ee86bcbf-image-1446739178483.gif)" - CSPU5_U3 - Simulation - 2.1_markdown_instruction: "# Changing the Loop Condition\r\n\r\nCurrently - our loop condition is based on a counter variable that keeps track of the - total number of flips, but our simulation should only run **while we have - fewer than the target number of heads**. In this exercise you are going to - change the condition used by your `while` loop so that your **simulation terminates - once you have flipped 5 total heads**. At the end of the loop we will **write - the total number of flips** to know how many flips it took to get 5 heads.\r\n\r\n# - Do This:\r\n\r\n* Change the looping condition to use the variable you are - using to keep track of the number of heads. **Your loop should run as long - as you have fewer than 5 total heads**.\r\n* Add code after your loop that - **writes the total number of flips**.\r\n* **Test your program** several times - to make sure it works as expected. See the example below.\r\n* **Note:** the - simulation is always terminating once it flips its 5th heads. Sometimes this - means the text output runs off the screen. We will address this in the next - exercise.\r\n\r\n![](https://images.code.org/878ff327142ebad8f81ecd8cdf58b14a-image-1446861064994.gif)" - CSPU5_U3 - Simulation - 2.5_markdown_instruction: "# 10,000 Heads!\r\n\r\nYou're - ready to increase the number of heads your simulation is looking for and **test - your first hypothesis**. Before we move up to the full 10,000 heads, however, - we're going to perform a quick check of our program logic. When you make - changes to your program **it is possible that some portion of your programming - logic will stop working as you expected**. In order to feel more confident - about your model you will **first change the number of heads you are looking - for to a number that we can still visually verify (7 heads)**. If our code - still works after making changes then we should be confident that it should - work at 10,000. We will remove the intermediate output and run the full simulation!\r\n\r\n# - Do This:\r\n\r\n* **Increase the number of heads you are looking for to 7** - and **visually confirm** that the code is still working as you expect.\r\n* - If everything seems to be working, **comment out the `write` command that - displays the results of each flip.** You can use `//` to comment out a single - line of code. Make sure that the total count of flips still prints though!\r\n* - **Run your simulation and find out how long it takes to get to 10,000 heads**. - Then run it a few more times. What patterns are you noticing? Record your - results and move on." - CSPU5_U3 - Simulation - 2_markdown_instruction: "# Counting Heads\r\n\r\nLet's - say that a **1 is a heads**. If we want our simulation to run until we reach - a certain number of heads then **we will need a way to count the number of - heads that have been flipped**. In order to do this you will need to add a - variable that acts **as a counter**. Initialize it to 0, and every time you - flip a heads (1) **increment your counter by 1**. At the end of your program - you should write the value to the screen.\r\n\r\n# Do This:\r\n\r\n* Add a - variable that **counts the number of heads (1's)** and write its value to - the screen after each flip.\r\n* Run your program severals times **and validate - that the number of heads recorded is correct** by visually checking the flips - you've printed to the screen.\r\n* **Hint:** you will also need to store - your current coin flip in a variable to complete this challenge.\r\n\r\n![](https://images.code.org/0d99569cd223c63e2166d610d09fd525-image-1446859813702.gif)" - CSPU5_U3 - Simulation - 3_markdown_instruction: "# Streaks of Heads\r\n\r\nWe - are going to alter our simulation so that it doesn't count the total number - of heads, but rather the longest **streaks of heads**. This will allow us - to simulate **how many flips it takes to get 12 heads in a row**. \r\n\r\nTo - begin with you will change your looping condition so that **the loop again - only runs 10 times**. This will allow us to visually confirm our code is working.\r\n\r\n**Keeping - Track of Streaks:** We know we need to count streaks of heads, how do we do - this in code? Do we need to keep track of all the previous flips so we know - that we're on a streak?\r\n\r\nThe answer is: **no**. We can instead just - **count in a clever way** that makes our code pretty simple. Make a variable - to use as a counter and...\r\n\r\n * every time you see heads, add 1 to a - counter.\r\n * every time you see tails, set the counter back to 0.\r\n\r\nHere - is some psuedocode showing how it works. You might take a minute to study - and reason about why and how it works.\r\n\r\n**Pseudocode**\r\n```\r\n// - Ouside loop\r\nheadsCount <-- 0\r\n\r\n// Inside loop\t\r\nIF (current flip - is a heads)\r\n headsCount <-- headsCount + 1\r\nELSE\r\n headsCount <-- - 0\r\nDISPLAY (current flip)\r\nDISPLAY (headsCount)\r\n```\r\n# Do This:\r\n\r\n* - Change your `while` loop's condition so that **it only runs 10 times**.\r\n* - Add code to the simulation that **displays the length of each streak of heads** - following the logic described above. Note that pseudocode should translate - to JavaScript pretty easily.\r\n* The example below shows an example of what - output from your program might look like.\r\n\r\n![](https://images.code.org/22f1a29e9b6abd558198f4704e437498-image-1446751547621.25.07 - PM.png)" - CSPU5_U3 - Simulation - 4_markdown_instruction: "# Changing the Loop Condition: - Streaks of Heads\r\n\r\nWe want our simulation to run** while the streak of - heads is less than a target length**. In order to do this we'll need to change - our looping condition to use the variables we've been using to count our - streak of heads. To begin with **your simulation should look for a streak - of 3 heads** so that you can still visually confirm the output.\r\n\r\n# Do - This:\r\n\r\n* **Change the condition** used by your `while` loop so that - it now runs **while the streak of heads is less than 3**.\r\n* **Test your - program** by running it and visually confirming that its output is correct. - It should run like in the example below.\r\n* **Note:** As before it's possible - that your output will sometimes run off the screen. You can still confirm - your code is working as you intend (it should never run after a streak of - 3) and we will address this issue in the next exercise.\r\n\r\n![](https://images.code.org/90ec4022f784ba136e59bb9b7c57a5c7-image-1446862623863.gif)" - CSPU5_U3 - Simulation - 5_markdown_instruction: "# Streaks of Heads: 12 in - a Row\r\n\r\nWe're almost ready to test **our second hypothesis** and find - out how long it takes to get **12 heads in a row**. Just as before we're - first going to **visually test our code with a different length streak (4)** - before removing most of the visual output and running the code for a streak - of 12.\r\n\r\n# Do This:\r\n\r\n* **Change your simulation to run until you - get a streak of 4** and visually verify that the values calculated are accurate.\r\n* - **Comment out** the lines of code that write the current coin flip and the - current streak count. You can use `//` to comment out a single line of code.\r\n* - **Change your simulation to run until you get a streak of 12 heads**. \r\n* - **Run your simulation a few times and record your results!**" - CSPU5_U3 - Simulation - 6_markdown_instruction: "# Keep Experimenting!\r\n\r\nYour - simulation can be updated or changed however you like. What new questions - do you have? Do you want to look for longer streaks of heads? Do you want - to roll a die instead of flipping a coin? Make any changes and improvements - to your simulation that you like.\r\n" - CSPU5_U3 - User Input - Save getText To Variable_markdown_instruction: "# Saving - Text Input in Variables\r\n\r\nOften we want to save the information we pull - in from the user for later use in our program. The best way to do this is - to save it in a variable.\r\n\r\n# Do This:\r\n\r\n* **Create two variables - inside your event handler** to store the **age** and **name** of the user.\r\n* - **Use `getText()` to update the values** stored in each of these variables.\r\n* - **Change your `console.log` statements to use your variable instead of `getText`**.\r\n\r\n![](https://images.code.org/ca45dcb01ae2d1956ed2f87efeda0264-image-1445976691215.11.13 - PM.png)" - CSPU5_U3 - Variables - Set to Expression with Other Variables_markdown_instruction: "# - Expressions with Variables\r\nArithmetic becomes much more interesting when - we use other variables in our expressions. For example you can do this:\r\n\r\n<table style=\"margin-left: - auto;\r\n margin-right: auto; align: center\">\r\n<tr>\r\n<td>\r\n<img src=\"https://images.code.org/13c21437292031a705744a8c2663c0d4-image-1445547765131.png\" - style=\"width: 400px;\">\r\n</td></tr>\r\n<tr> <td>\r\n <h3>\r\n Mental Model\r\n![](https://images.code.org/b4a2c125508fb06fd653b90c643cb53b-image-1447272790306.png)</h3>\r\n</td></tr>\r\n<tr><td><img - src=\"https://images.code.org/95eb7e859d04c72ed82ed80023a870cf-image-1445546103564.gif\" - style=\"width: 400px;\"></td>\r\n</tr>\r\n</table>\r\n\r\nThe end result of - an expression with variables is the same as one without. The major difference - is that values are retrieved from memory in order to do the calculation rather - than simply hard-coded.\r\n\r\n# Mental Model Check\r\nWatch the animation - above. To compute the expression the computer will: **first** retrieve each - of the values of the variables used in the expression; **then** the arithmetic - expression can be evaluated; **finally** the computed value can be stored - in memory.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/485f61858e45a39e383497c522c94d64-image-1445548216109.png\" - style=\"float: right; width: 300px\">\r\n* **Scenario:** In the starting code - we have provided you with variables that might be the kinds of things you - would keep track of in a game: `totalTime`, `points` and `lives`. (see right).\r\n\r\n* - Right now the `totalScore` is just set to 0. We want you to compute a final - score so that the person is rewarded for having a lot of points and lives, - but penalized for taking a lot of time.\r\n\r\n* **Write an expression** that - calculates the player's total score and stores it in the `totalScore` variable. The - calculation is: **the player's points *times* lives *divided* by the total - time.**\r\n\r\n* For the values provided the app display should look like - this:\r\n \r\n<img src=\"https://images.code.org/10c9c6f162004a1b7216ae36c1427478-image-1445548367117.png\" - style=\"width: 250px\">\r\n" - CSPU5_U3 - Variables - Set to Expression_markdown_instruction: "# Variables - and Arithmetic Expressions\r\nA common thing to want to do is store the result - of an arithmetic expression. The 4 basic arithmetic operations `+ - * /` - are available. \r\n\r\n<details><summary><strong>Here is a quick table that - shows the arithmetic operators with code examples</strong> [click to expand]</summary>\r\n<table>\r\n<thead>\r\n<tr>\r\n<th - style=\"text-align:center\">operation</th>\r\n<th style=\"text-align:center\">block</th>\r\n<th - style=\"text-align:center\">text</th>\r\n<th style=\"text-align:center\">example</th>\r\n<th - style=\"text-align:center\">result</th>\r\n</tr>\r\n</thead>\r\n<tbody>\r\n<tr>\r\n<td - style=\"text-align:center\">add</td>\r\n<td style=\"text-align:center\"><img - src=\"https://images.code.org/2cf1014a4e0b1dedd361edc73a0f7eb1-image-1445536786715.png\" - alt=\"\"></td>\r\n<td style=\"text-align:center\">`+`</td>\r\n<td style=\"text-align:center\">`result - = 7 + 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>10</strong> - in <em>result</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">subtract</td>\r\n<td - style=\"text-align:center\"><img src=\"https://images.code.org/96b80cd4d866130c7f8567765f9b4b00-image-1445536805959.png\" - alt=\"\"></td>\r\n<td style=\"text-align:center\">`-`</td>\r\n<td style=\"text-align:center\">`value - = 7 - 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>4</strong> - in <em>value</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">multiply</td>\r\n<td - style=\"text-align:center\"><img src=\"https://images.code.org/3574725201e009142126f39ad1df8a78-image-1445536817791.png\" - alt=\"\"></td>\r\n<td style=\"text-align:center\">`*`</td>\r\n<td style=\"text-align:center\">`score - = 7 * 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>21</strong> - in <em>score</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">divide</td>\r\n<td - style=\"text-align:center\"><img src=\"https://images.code.org/5d470b223717c9daac5246af0d013bdf-image-1445536826467.png\" - alt=\"\"></td>\r\n<td style=\"text-align:center\">`/`</td>\r\n<td style=\"text-align:center\">`bonus - = 7 / 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>2.3333</strong> - in <em>bonus</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">parentheses</td>\r\n<td - style=\"text-align:center\">none</td>\r\n<td style=\"text-align:center\">`()`</td>\r\n<td - style=\"text-align:center\">`avg = (99 + 85 + 93) / 3;`</td>\r\n<td style=\"text-align:center\">stores - <strong>92.3333</strong> in <em>avg</em></td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n</details>\r\n<br>\r\n# - Misconception Alert \r\n\r\n<img src=\"https://images.code.org/18eb833aba4a7199a28929dcd43c73f8-image-1445540549754.gif\" - style=\"float: right\">\r\nWhen you have a statement like `result = 5 + 7;` - realize that this **does NOT store a mathematical expression in the variable.** \r\n\r\nRather, - with this instruction you are asking to compute 5 + 7 and **THEN** store the - answer (a single number) in the variable.\r\n\r\n# Do This:\r\n\r\n**GOAL:** - the goal here is mostly to acquaint yourself with typing arithmetic expressions - - the answers to the questions below are less important, and should be used - as interesting things to investigate. \r\n\r\nWe've given you some **starting - code** with 5 statements similar to ones in the table above.\r\n* **Add `console.log` - or `write` statements** to display the values of each of the variables.\r\n* - Experiment with arithmetic expressions, try to make really big and really - small numbers.\r\n\r\n<hr>\r\n\r\n**Things to Try:**\r\n* Using **multiplication: - what's the biggest a number you can store** in a variable?\r\n * How many - digits are in the biggest number before it starts using scientific notation?\r\n* - Using **subtraction (or multiplication with negative numbers): what's the - lowest number you store?** (low means a negative number with a lot of digits)\r\n* - Using **parentheses** make a crazy-big arithmetic expression. \r\n * NOTE: - composing arithmetic expressions is ***much* easier in text mode**, and is - actually almost unreadable in block mode. Try doing this in text mode.\r\n - \r\n" - CSPU5_U3 Digital Assistant Design_markdown_instruction: "# Getting Started - with Your Digital Assistant\r\n\r\n<img src=\"https://images.code.org/e875ff7b54c314a378cdb784f92371a0-image-1445989933171.52.04.png\" - style=\"width:200px;float:right;\">\r\nOver the course of the next few lessons, - you'll be __developing your own digital assistant__. To make your digital - assistant more useful, it needs to be able to make __decisions__ based on - questions the user asks it, and respond intelligently.\r\n\r\nTo get started, - __choose a topic__ you want your digital assistant to specialize in. It should - be something you are interested in and know a lot about. Examples: Country - Music, Sushi, College Football, Comedy Movies.\r\n\r\nYou'll next set up - the layout for your app. __The basic layout contains just two primary design - elements:__ a text input and a text area.\r\n\r\n# Do This:\r\n\r\n- __Choose - a topic__ for your digital assistant to specialize in.\r\n- __Create the layout__ - for your app. Your digital assistant should have:\r\n - A name\r\n - - A text input for the user to ask a question\r\n - A text area for the digital - assistant to respond\r\n - The text area should have a greeting for the - user (e.g. Ask me a question about movies!)\r\n" - CSPU5_U3 Digital Assistant Set Text_markdown_instruction: "# Respond to Basic - User Input\r\n\r\n<img src=\"https://images.code.org/2bed8002ff3c89afb02db5809de1c40e-image-1445996503055.gif\" - style=\"width:200px;float:right;\">\r\nNow you can have your digital assistant - repeat what the user typed and add a __default response__. It's not the most - intelligent response, but you'll build up to that over the next couple of - lessons and it's important to build this program in pieces. \r\n\r\n# Looking - Back to Move Forward\r\nYou're going to now add to your program without as - much guidance as usual. Keep in mind that __this is very similar to programs - you've already built__, so look back at your work for a refresher.\r\n- __Mad - Libs:__ In Mad Libs you got a user's text when the 'Next' button was clicked, - filled in the outline with the responses, and displayed the completed Mad - Lib\r\n- __Introducing the 'change' event:__ You just learned about the - 'change' event that triggers when the user hits 'enter' on a text input.\r\n\r\n# - Do This:\r\n- __Take the user's question and output it to the text area__ - when the 'enter' key is pressed in the text input\r\n- The response should - also __include a default phrase__ such as _\"I don't know about that yet!\"_\r\n- - __Format the response with newline characters__ to separate the user's response - from the assistant's response.: `\\n`\r\n- The __text input should clear__ - after the user hits 'enter'" - CSPU5_U3 Digital Assistant Target_markdown_instruction: "# Introduction to - the Digital Assistant\r\n\r\n__While digital assistants may seem like magic, - they are just elaborate computer programs that parse, or process, text__ looking - for combinations of words to make decisions about what to reply.\r\n\r\nOver - the next few lessons, __you're going to build up your own digital assistant - that responds \"intelligently\" to a user's question__, by making a decision - about what to reply based on the contents.\r\n\r\nYou'll now __explore a - demo digital assistant__, Movie Bot, that represents the kind of program that - you'll build up to. Try out some of the prompts below and also try your own. - You'll quickly find the limits of what this program can and can't do.\r\n\r\n# - Do This:\r\n__Run Movie Bot. In the _'enter your question here'_ input, - type each of the following prompts and hit 'enter.' __\r\n- 'help'\r\n- - 'What is the best PG comedy movie ever?'\r\n- 'What PG comedy movie should - I watch next?'\r\n- 'Could you please tell me the best romance movie?'\r\n- - 'I waNT To WatCH a MovIE!!!'\r\n- 'What is the capital of Kentucky?'\r\n- - Play around! Ask more questions of Movie Bot and make a prediction about what - logic it's using to reply.\r\n" - CSPU5_U3 full clicker demo_markdown_instruction: "# Clicker Game Demo\r\n\r\nTry - out this clicker game! You'll be building your own version (with a theme - you choose) at the end of the lesson.\r\n\r\n# Things That Are Familiar\r\nYou - know how to build many of the components of this game already:\r\n- Multiple - screens.\r\n- Buttons that change the screen when clicked.\r\n- Image that - moves when you click it.\r\n\r\n# Things That Are New\r\n- Keeping track of - and displaying the __changing score__.\r\n- Keeping track of and displaying - the __changing lives__.\r\n- Changing to the __win screen if the score is - 25__.\r\n- Changing to the __lose screen if the lives is 0__.\r\n" - CSPU5_U3- Keys - Code Refactoring Exit Ticket_markdown_instruction: "# Free - Response: Why Refactor?\n\nWhy is refactoring your code important?\n" - CSPU5_U3- Variables - Create And Assign_markdown_instruction: "# Create and - Assign At Once\r\n\r\nIt's so common to want to create a variable and give - it an initial value, that JavaScript has a shortcut that lets you create and - assign with one line of code like this:\r\n\r\n<img src=\"https://images.code.org/84b576f02fe92989d0955dc8d4122eed-image-1445480709312.png\" - style=\"width:120px\">\r\n\r\n\r\nYou'll also see a new block in the toolbox - for this (see right).<img src=\"https://images.code.org/cbe3f9ffd0bafef72ce18232f746fdbe-image-1445480538334.gif\" - style=\"float: right; width: 350px\">\r\n\r\n# Do This:\r\nWe'll just quickly - practice using this form of variable creation and assignment. The code you - write will achieve the same thing as the previous level in fewer lines of - code. \r\n\r\n* **Create a variable called `lives`** and **assign it the value - 3** using the new one-line version of this command. (See animation at right.)\r\n\r\n* - **Add** `console.log` statements to display the value of `lives` just as before. \r\n\r\n* - The output in the console should (again) look like this:\r\n \r\n <img src=\"https://images.code.org/6405a3ed95ca3125ea1b2c9ffbdffa94-image-1445349849482.png\" - style=\"border: solid 1px gray\">\r\n\r\n" - CSPU5_U3- Variables - Text Mode_markdown_instruction: "# Give Text Mode a Try!\r\nThe - block-based mode of programming is useful for getting code into your app fast - and error free. But sometimes those little tiny edits are a pain. **Use text - mode instead!** Text mode is designed to make typing code fast and easy, - and it also gives a lot of help to make your code error free. \r\n\r\nLet's - re-create these variables again, but explore some features of text mode this - time.\r\n\r\n# Try Each of These 3 Things\r\nWe've given you the first two - lines of code in a program. \r\nExpand each box below and try what's suggested - - each builds on the previous one, so you might want to go in order.\r\n\r\n<details>\r\n<summary>1. - **Switch to text mode and try to type.** [click to expand]</summary>\r\n \r\n - Switch to text mode and **type out a `console.log` statement** to display - the value of `score`.<br>\r\n <img src=\"https://images.code.org/d8cd6968bbb5fb5b5a8b8b3e41ee7ad1-image-1445353098262.gif\" - style=\"width: 500px\">\r\n</details><br>\r\n\r\n<details>\r\n<summary>2. - **Drag blocks into text mode.** [click to expand]</summary>\r\n\r\n If you - don't want to type *everything* you can drag a block from the toolbox into - text mode and it will show you the text version of it. **Add code to create - the `lives` variable and a `console.log` message**.<br>\r\n \r\n <img src=\"https://images.code.org/b755a871221705ebdc73e73ffbfd1ad0-image-1445353101095.gif\" - style=\"width: 500px\">\r\n\r\n</details><br>\r\n\r\n<details>\r\n<summary>3. - **Check out code completion.** [click to expand]\r\n</summary>\r\n When you - type commands a tool tip pops up that tries to guess what you're trying to - type. If you see what you want in the box, **highlight it** (you can use arrow - keys) and then **hit the tab key**. It will auto-complete the code for you!<br>\r\n - \r\n <img src=\"https://images.code.org/177d70ab086d1481ad2ba5d367379aff-image-1445353103029.gif\" - style=\"width: 500px\">\r\n </details>" - CSPU5_U3-Design Mode-ID and Event Handler_markdown_instruction: "# Activate - Your Button\r\nOn the last level you added a button using Design Mode. If - you click it, nothing happens. Let's make the button work. \r\nYour button - has been brought over to this level. \r\n\r\n**Goal:** Add code using Design - Mode to make the button respond to a click.\r\n\r\n# Do This:\r\n\r\n<img - src=\"https://images.code.org/9ff41c3ea30ece355e91eaca5cdc1e36-image-1444417748945.gif\" style=\"width: - 250px; float: right\">\r\n\r\n* **Change ID of button** from “button1” to - “redButton”.\r\n\r\n* **Insert `onEvent` from Design Mode** by clicking *Insert - and show code* under the **Events Tab**.\r\n\r\n* Run the program and **look - for the output in the *Debug Console* **below the workspace instead of the - app window. We will discuss the *Debug Console* on the next level." - CSPU5_U3-Design Mode-Image_markdown_instruction: "# Testing Overlapping objects - and the Screen with Console.log\r\n\r\nThere are two goals here:\r\n\r\n1. - Practice inserting your own console.log statements.\r\n2. Investigate how - the screen captures events (it's different).\r\n\r\n## Do This:\r\n\r\n* - Add `console.log` statements to each of the 3 event handlers we started you - out with.\r\n * Make the text that gets printed *be descriptive* so that you - know exactly what is happening when.\r\n\r\n* **Run** the program\r\n* **Click - on the overlapping objects** both the parts that overlap and the parts that - don't.\r\n* **\r\n\r\n**Investigate until you can answer the questions:**\r\n1. - When you click on a location where two objects are overlapping, which event(s) - fire(s)?\r\n2. When you click on an non-overlapping part of some object what - gets triggered?\r\n3. When does a \"click\" on the \"screen\" get triggered?\r\n\r\n\r\n<details><summary>Answers: - [click here]</summary>\r\n\r\n1. When you click on a location where two objects - are overlapping, which event(s) fire(s)?\r\n<br>\r\n<li> The event-handler - for object that is on top gets triggered. The object that is underneath is - essentially blocked from being clicked in the overlapping portion</li>\r\n<br><br>\r\n2. - When you click on an non-overlapping part of some object what gets triggered?\r\n<li>The - event-handler for the object gets triggered as you might expect</li>\r\n<br><br>\r\n3. - When does a \"click\" on the \"screen\" get triggered?\r\n<li>Always. Events - that occur on the screen cannot be blocked by other objects. If you set up - an event listener for the screen it will capture EVERY event of that type, - no matter what other UI elements are on the screen. This behavior of the - screen is done on purpose and is useful for certain kinds of things.</li>\r\n\r\n\r\n</details>\r\n" - CSPU5_U313 drag Two Buttons_markdown_instruction: "# Buttons and Unique IDs\r\nYou - may have noticed that the button command has two parameters: `button(id, text)`. The - `text` is the text that actually shows up on the button display, and the `id` - (we'll typically write **ID**) is a **unique identifier** for that element - in the app.\r\n\r\nEach element that appears in the app must have a **unique - ID**. In fact, if you try to run a program that has two buttons with same - ID you will get a warning message in the console. Watch:\r\n<img src=\"https://images.code.org/47ec46e0563f63641cc10ef152e9f86e-image-1444074330713.gif\" - style=\"border: solid 1px black; width:500px\">\r\n\r\nNotice that even though - the text on the buttons was different, the IDs were the same, which caused - the error message to show up. To get rid of that error message you will have - to change the ID of the button from the default `id` to something else.\r\n\r\n**Error - messages happen to everyone and they are helpful!**: getting an error or warning - message when you run your program is *not a big deal*. Programmers actually - rely on error messages to tell them where and how to fix their code.\r\nSometimes - error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers - to an id (id) which already exists.` But a warning like this contains helpful - information and clues such as the line the error occured on, or some word - or command it didn't recognize. \r\n\r\n# Do This:\r\nThe goal here is to - experience an error message in a program, study it, and fix it.\r\n* **Drag** - two buttons into the workspace (same as shown above) with the default IDs.\r\n* - **Run** the program to see the warning message in the console.\r\n* **Read** - the warning message to see what it says.\r\n* **Change** the IDs of the buttons - to make them unique. An ID must be specified in quotes. You can use double-quotes: - `\"myId\"`, or single quotes: `'myId'`\r\n* **Re-run the program** to make - sure you don't get the error.\r\n\r\nOnce you've got two buttons on the - screen with different IDs and the program can run without generating the warning, - move on to the next level.\r\n" - CSPU5_U313 Two Buttons with Ids_markdown_instruction: "# Predict - Observe - - Reflect\r\nHere's another one. \r\n\r\nTo understand a new piece of code - good programmers often try to **first make a prediction about what will happen - before running the program**. \r\n\r\nBy forcing yourself to make a prediction - (it doesn't matter if you're right or not) you are immediately alerted to - any **unusual or unexpected behavior** and you can ask yourself, *\"Huh? why - did it do that? Was that supposed to happen?\"* It might not be an error, - but you gain invaluable insight and actually **learn faster**.\r\n\r\n**Predict:** - For the code that is here, what will happen when the \"Forward\" button is - clicked? \r\n\r\n * **Study the code** - This program has **two event handlers** - listening for events on the same button?\r\n * **Force yourself to make a - prediction!** - \"I don't know\" is not a prediction!. \r\n\r\nHere are some - options to think about:\r\n\r\n* There will be an error in the console immediately - after hitting run\r\n* There will be an error in the console but not until - you hit the button\r\n* Program does nothing\r\n* turtle only moves forward\r\n* - turtle only turns left\r\n* turtle move forward *then* turn left \r\n* turtle - turn left *then* move forward?\r\n* something else? \r\n\r\n**Observe:** Once - you've made a prediction, close these instructions and **run the program** - to observe what happens.\r\n\r\n**Reflect:** Was your prediction correct? - If not what about your mental model might need to change? Talk about it with - a classmate and experiment with the code to make sure you understand what - is happening." - CSPU5_U3L13 - Debug Id Problem_markdown_instruction: "# Descriptive IDs\r\n\r\n**You - try it** - give your buttons **descriptive and meaningful IDs** rather than - the default `button1`, `button2` and so forth.\r\n\r\nRemember to:\r\n\r\n* - **Change ** the event handler code so that it correctly references the new - IDs of the buttons\r\n* **Run - Test - Debug ** the program to make sure it - works, and debug any problems.\r\n\r\n<details><summary><strong>Reminder:</strong> - Rules About IDs [click to expand]</summary>\r\n\r\nIn making descriptive and - meaningful IDs there **are some rules about IDs** you need to know. IDs...\r\n\r\n<li> - cannot contain spaces.\r\n<li> *must* begin with a letter (A-Z or a-z) and - may be followed by any number of digits and letters.\r\n<li> can contain - hyphens (\"-\"), underscores (\"_\"), colons (\":\"), or periods (\".\").\r\n\r\n</details>\r\n" - CSPU5_U3L13 - Debugging 1_markdown_instruction: "# Debugging Event-Driven Programs: - IDs\r\n\r\nTry another one! -- This one is trickier, but very common.\r\n\r\n1. - **Run the program** and inspect the messages in the Debug Console for clues.\r\n2. - **Investigate** - track down what the root of the problem might be.\r\n3. - **Fix it** the program and correct the errors so that it works as intended.\r\n4. - **Run the program** and verify that both buttons have the intended functionality.\r\n5. - **Repeat as necessary** until the program works as intended\r\n\r\n<details><summary>Hint? - [click here]</summary>\r\n\r\n<li>Remember: IDs are **case-sensitive**!!!</li>\r\n<li>The - error is with the id: **left**[**B/b**]**tn**</li>\r\n</details>\r\n" - CSPU5_U3L13 - Debugging 2_markdown_instruction: "# Debugging Event-Driven Programs: - Ordering Event Handlers\r\n\r\n**Ordering Event Handlers: ** Event handlers - must come **after the object they reference in the code**. If your event handler - comes before your object (in this case a button) your computer would be looking - for an event on an object that does not yet exist. You will get an error message - and your code will not work as you intend.<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" - style=\"float: right; width: 150px\">\r\n\r\n**Target Application:** Just - like the last exercise, you'll again try to make an app that has two buttons, - one for moving forward and one for turning left. \r\n\r\nOnce again, we've - introduced a new error.\r\n\r\n# Do This:\r\n**Run the Existing program** - to see the error that gets generated.\r\n\r\n**Debug ** this program so that - it works as intended.\r\n\r\n**Run the program ** and try both buttons to - make sure they have the intended functionality." - CSPU5_U3L13 - Debugging 3_markdown_instruction: "# Debugging Logical Errors\r\n\r\nSometimes - you can write a program that generates no errors but still does not work as - intended. \r\n\r\nThis is the result of **logical errors** in your code, and - **making a prediction** can help find these nasty little buggers too.\r\n\r\nOnce - again we've introduced an error or two (a logical error this time) for you - to debug.\r\n\r\n1. **Investigate the code and make a prediction** - What - *should* happen here?\r\n2. **Run the program** and experiment to see what's - wrong.\r\n3. **Reflect** - were you right? Why or why not?\r\n4. **Fix it** - - make it work as intended.\r\n5. **Repeat as necessary**" - CSPU5_U3L13 - Debugging IDs case sensitive_markdown_instruction: "# Debugging - Event-Driven Programs: IDs\r\n\r\nTry another one! -- This one is trickier, - but very common.\r\n\r\n1. **Run the program** and inspect the messages in - the Debug Console for clues.\r\n2. **Investigate** - track down what the root - of the problem might be.\r\n3. **Fix it** the program and correct the errors - so that it works as intended.\r\n4. **Run the program** and verify that both - buttons have the intended functionality.\r\n5. **Repeat as necessary** until - the program works as intended\r\n\r\n<details><summary>Hint? [click here]</summary>\r\n\r\n<li>Remember: - IDs are **case-sensitive**!!!</li>\r\n<li>The error is with the id: **left**[**B/b**]**tn**</li>\r\n</details>\r\n" - CSPU5_U3L13 - Project_markdown_instruction: "# Multi Screen App\r\nYou will - be creating your own multi-screen app to practice designing user interfaces - and writing event-driven programs. \r\n\r\n**Look at the Project Guide and - Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* - Your app will have at least **4 screens**.\r\n* Your app should include **text, - images, buttons, and sound**.\r\n* There should be **no “getting stuck” on - any screen.** It should always be possible to navigate from a screen in your - app to some other screen. \r\n* Your program code should follow **good style**.\r\n* - Your user interface should be **intuitive to use**." - CSPU5_U3L13 - Turtle Driver Project_markdown_instruction: "# Create a Turtle - Driver App!\r\n\r\nAt this point you know enough about buttons and event handlers, - and how to debug some common issues that arise to be able to **build your - own \"turtle-driver\" app** from scratch. \r\n\r\n**Build up the program bit - by bit**. Don't try to write all the code at once. Add a button with an - event handler, make sure it works, debug any problems, and then move on to - the next part.\r\n\r\n# Do This:\r\n\r\n**Create ** an application with **four - buttons**, one for moving the turtle forward and one each for turning left - and right. The fourth button should do whatever you like.\r\n\r\n**Use descriptive - and meaningful IDs** for your buttons and ensure your event handlers work - as you intend.\r\n\r\n**If you have extra time** add more buttons that use - other turtle commands you'd like to include. You can also use colors, and - different line widths, dots, etc. " - CSPU5_U3L13 - Turtle move with button_markdown_instruction: "# Your First Interactive - App!\r\n<img src='https://images.code.org/3fad83213ae72073251c4d5abc1f048a-image-1444060521578.png' - style='float: right; width: 250px'> A new group of commands has been added - to the toolbox called **UI Controls** (User Interface Controls) which are - commands that let you interact with, and respond to, the user of your app. - To keep it simple, we'll start with just two commands: \r\n* `onEvent` which - lets you run a function in response to some event occuring (such as a button - click).\r\n* `button` which puts a button on the screen.\r\n\r\n# Do This:\r\nYou - will replicate the small app shown below, which makes the turtle move with - a button click. You will do three things:\r\n* Add a `button`.\r\n* Add an - `onEvent` block.\r\n* Add `moveForward` inside the onEvent function block.\r\n\r\nHere's - what you should do - you can come back to watch this as many times as you - need to get it right.\r\n<img src=\"https://images.code.org/1cdc8cfbcef2a43f84b11ebdf14aed0c-image-1444061731350.gif\" - style=\"border: solid 1px black; width: 500px; margin: auto\">\r\n\r\nOnce - you've created the program and gotten it to run, click **Finish** to move - onto the next level." - CSPU5_U3L13 eventsDetails_markdown_instruction: "# onEvent\r\n\r\n**You try - it!** - Make the turtle move forward when the button is clicked.\r\n\r\n* - **Add an `onEvent` block** \r\n* Set the **id** and **type** you want.\r\n* - Add `moveForward` to the function definition\r\n\r\n* **Run the program** - to make sure it works.\r\n* **Try changing the event type** to something like - *\"mouseover\"* and see what happens. Not all event types will work with - buttons but it's fun to play a little bit.\r\n\r\nOnce you've got the program - responding to some event, congratulations! You've just made your first interactive - app. \r\n\r\n**Click Finish** to move on to the next problem.\r\n\r\n" - CSPU5_U3L13 Free Response Reflection_markdown_instruction: "Elements in your - app are required to have **unique IDs**. Given what you now know about how - event handlers work, why is it important for the IDs of page elements to be - unique?\n\n" - CSPU5_U3L14 - Assigning Random Value_markdown_instruction: "# Other Ways to - Assign Values to Variables\r\nPrograms become much more interesting when the - values in variables change while the program is running. We can also assign - to a variable the value returned by a function. For example:\r\n\r\n![](https://images.code.org/31447c1b90c925bba3ca86ead8d84a7d-image-1445892065474.png)\r\n\r\nBecause - the `randomNumber` function *evaluates to a number* it means we can treat - it *as though it were a number*. We've used it before by just \"plugging - it in\" to some function that needed a number as a parameter like:\r\n![](https://images.code.org/5df0376d562bd75a1899e17c49b00144-image-1445941026356.png)\r\n\r\nBecause - the `randomNumber` function generates a new and different number each time - you call it, one thing we *could not* do before we had variables was generate - a random number, and use that *same number* for two different things in a - program. Now we can.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/df3d2a8f4c1a3061981667c9f85b0071-image-1445549489133.png\" - style=\"float: right; width: 350px\">Write a program that simulates the rolling - of two dice and reports their individual values as well as the sum. \r\nThe - program should:\r\n* Generate two random numbers between 1 and 6 and store - each result in its own variable.\r\n* Display the individual values of the - two dice.\r\n* Display the sum of the two dice (see right).\r\n* Every time - you run the program the result will be a little different.\r\n\r\nWe have - given you starting code that shows what to do for the first die. The *rest - of the code is up to you!* When you're done the output in the app display - should look like what's above.\r\n\r\n" - CSPU5_U3L14 - concatenate simple_markdown_instruction: "# Text and Variables - Living Together!\r\n\r\nSometimes it’s useful to display text along with the - value of a variable in the same line of output. To do this you use `+` to - attach a variable onto a literal string of characters. Here is an example:\r\n\r\n<img - src=\"https://images.code.org/a35e68b062fc814871a8323938cf3384-image-1445888147995.png\" - style=\"border: solid 1px #BBBBBB; height: 30px;\">\r\n\r\nNotice that the - `+` operator has **two different meanings in JavaScript depending on what - type of data you're applying it to**. Click the explanations below for more - details.\r\n\r\n<details>\r\n<summary>If **both operands are numbers** `+` - means to add those two numbers together.</summary>\r\n\r\nThis is standard - addition. It works both with numbers and with variables that contain numbers, - as shown below.<br>\r\n\r\n<img src=\"https://images.code.org/eb50a1fcea459fe74774d903b07a274f-image-1445887814602.png\" - style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n\r\nBecause `num1` - is a variable that holds a number, and 10 itself is obviously a number, in - this case `+` will do addition like you would expect.\r\n\r\n</details>\r\n<br>\r\n<details>\r\n<summary>If - **either of the operands is a string** `+` treats both as if they were strings - and combines them to create a single string.</summary>\r\nThis is potentially - confusing behavior and can get pretty weird if the text *looks* like numbers. For - example, this code will display **16100** to the screen.<br>\r\n\r\n<img src=\"https://images.code.org/a9c54b664bd192aa5bf611808d88a3bc-image-1445887893598.png\" - style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n\r\nWhy? Because - JavaScript sees you trying to display a mix of text and variable values. \"16\" - (in quotes) is a string of ASCII characters not a number. And so JavaScript - converts everything to text, and the characters in the result of \"16\"+\"100\" - comes out to \"16100\". \r\n\r\n</details>\r\n<br>\r\n \r\n**TIP:** It's - common to want to sandwich a variable between some text when displaying it. You - can string together multiple pieces of text and variables using the `+` operator. For - example, you can do this:\r\n<br> \r\n\r\n<img src=\"https://images.code.org/65b0e277f058903bd3b956cc59ee5253-image-1445887976271.png\" - style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n \r\n<br>\r\n<details>\r\n<summary>**Misconception - Alert**</summary>\r\n\r\nThe **key thing to understand** about the `+` symbol - is that it can _only_ do actual arithmetic addition if the values on either - side of the `+` are actually numbers or variables that contain numbers. \r\n\r\n**And** - if the `+` symbol cannot determine whether the value is a number then it **assumes - it's a string**, and converts everything to a string and tries to concatenate - it. \r\n \r\nThe computer relies on you - the programmer - to make sure that - the **type of data** stored in a variable is appropriate for the task at hand.\r\n</details><br>\r\n\r\nOn - the next screen we'll have you play with this a little bit, but you'll write - statements to display a mix of text and strings from here on out.\r\n\r\n# - Do This:\r\nWe have given you the starting code shown below. You should **modify** - the `write` statement on **line 3** to combine text and variables together - to make the app display a single line of text as shown.\r\n\r\n|starting code|output|\r\n|--|--|\r\n|<img - src=\"https://images.code.org/a1b84a8728599e9945c576d3bb459140-image-1445891621155.png\" - style=\"height:50px\">| <img src=\"https://images.code.org/f5673df128eca0f9637c0cca1729b489-image-1445891800242.png\" - style=\"width: 250px\">|" - CSPU5_U3L14 - Mini Calculator embed_markdown_instruction: "# Getting User Input - - A Simple Calculator\r\nPrograms become *even more interesting* when we can - interact with the user. A short way to ask a user for a number is with the - `promptNum` command, which pops up a dialog box asking the user to enter a - number.\r\n\r\nThis very simple app demonstrates a new behavior: getting input - from the user.\r\n**You will write code to re-create this program** on the - next page.\r\n\r\n# Do This:\r\n* Click \"Run\" on the app.\r\n* You will - be prompted for two numbers, one right after the other. \r\n\t* If you don't - enter a number it will simply re-prompt you until you do.\r\n* See what happens. \r\n* - Re-run the program and enter different numbers until you get the idea.\r\n\r\nClick - **Finish** to move on." - CSPU5_U3L14 - moving memory challenge1_markdown_instruction: "# Moving Memory - - Challenge 1\r\n\r\nThe next several levels all present challenges related - to \"moving memory\" around in your program. \r\n\r\n**GOAL:** Set the value - of the variable(s) to make the `console.log` statement display what it's - supposed to.\r\n\r\n**Rules**:\r\n\r\n * You may **only** add lines of code - that re-assign values of variables provided.\r\n * You may **only** use assignment - (`=`) and arithmetic operators (`+` `-` `*` `/`).\r\n * You **MAY NOT** type - or introduce any numbers.\r\n * You **MAY NOT** add or create any new variables.\r\n - * You **MAY NOT** change or alter the `console.log` statement at all.\r\n\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n<br><br>\r\n### Try this example yourself...\r\n\r\n" - CSPU5_U3L14 - moving memory challenge2_markdown_instruction: "# Moving Memory - - Challenge 2\r\n\r\n# Try another one!! \r\n* Click through to see a new - problem provided in the starter code. \r\n* A reminder of the rules and example - are below if you need to sneak a peek.\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - moving memory challenge3_markdown_instruction: "# Moving Memory - - Challenge 3\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar - x = 2;\r\nvar y = 3;\r\n// your code here\r\n\r\nconsole.log(\"The value of - x is: \" + x + \" (x should be 7)\");\r\n```\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - moving memory challenge4_markdown_instruction: "# Moving Memory - - Challenge 4\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar - x = 2;\r\n// your code here\r\n\r\nconsole.log(\"The value of x is: \" + x - + \" (x should be 8)\");\r\n```\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - moving memory challenge5_markdown_instruction: "# Moving Memory - - Challenge 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar - x = 2;\r\nvar y = 3;\r\nvar z = 0;\r\n// your code here\r\n\r\nconsole.log(\"The - value of x is: \" + x + \" (x should be 3)\");\r\nconsole.log(\"The value - of y is: \" + y + \" (y should be 2)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong>(click - to expand)</summary>\r\nSince this one requires you to change the value of - two variables you need to be careful about which one you change first, since - its new value will affect the next lines of code.\r\n<p></p>\r\nYou can also - take advantage of the fact that since `z` is not used as a display value, - you can use it as a temporary holding ground for one value while you change - another.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - moving memory challenge6_markdown_instruction: "# Moving Memory - - Challenge 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar - x = 5;\r\nvar y = 11;\r\nvar z = 4;\r\n// your code here\r\n\r\nconsole.log(\"The - value of x is: \" + x + \" (x should be 2)\");\r\nconsole.log(\"The value - of y is: \" + y + \" (y should be 6)\");\r\nconsole.log(\"The value of z is: - \" + z + \" (z should be 8)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong> - (click to expand)</summary>\r\nThis one requires you to be a little clever. Think - about setting the value of one variable that you could then use to easily - set the value of the other variables. Then the trick is to figure out how - to use the variables you've been given to make that useful value.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - CSPU5_U3L14 - User Input Division calculator_markdown_instruction: "# Assigning - User Input to Variables\r\n<img src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" - style=\"width: 350px; float:right\">\r\nLet's use `promptNum` to make a simple - calculator. The `promptNum` command appears in the variables toolbox because - it's typically used as a way to get a value from the user that you want to - hold on to while the program runs.\r\n\r\n`promptNum` is similar to `randomNumber` - in that it is a function whose return value *evaluates to a number*. The difference - here is that `promptNum` pops up an input dialog box and waits for the user - to type a number. Once they do and hit \"OK\" the number they typed is returned - and we can store it in a variable to use in our programs.\r\n\r\n\r\n# Do - This:\r\nWrite a program that acts as a simple calculator. (An animation of - the end result is shown at right.) <img src=\"https://images.code.org/e644d4b17d1d6fdb6b5a93651d512f8a-image-1445552700557.gif\" - style=\"width: 250px; float: right\">\r\n* Ask the user to **enter a number**.\r\n* - Then ask the user to **enter a second number**.\r\n* **Display the result** - of *some* calculation.\r\n * The example shows division but you may choose - something else if you like.\r\n\r\nWe have given you starting code that shows - you how to get the first number. The rest of the code is up to you.\r\n\r\n" - CSPU5_U3L14 - Variable ReAssignment pt2_markdown_instruction: "# Variable Re-assignment - - Part 2: Updating Values\r\n\r\nAll of our examples so far have shown how - to set the value of a variable by using combinations of numbers and other - variables. But what if you wanted to do something like **add 10 to the *current* - value of a variable**? \r\n\r\nBecause updating the value in a variable is - just moving memory around, the process has to go something like this:\r\n* - Read the current value of a variable.\r\n* Add 10 to it.\r\n* Store the new - value back into the same variable.\r\n\r\nThe technical term for this is called - **variable re-assignment** - when you change the value of a variable based - on its current contents. To increase the value of `num1` by 10 you actually - need to do this:\r\n\r\n<img src=\"https://images.code.org/c49b1a0fb81de4b90558fdb278e40987-image-1445942169121.png\" - style=\"float:right\">\r\n```\r\nnum1 = num1 + 10;\r\n```\r\nThe diagram at - right shows a picture of what's happening (it assumes the value of `num1` - is 7 before the line is executed). It's actually very similar to what happens - with plain old arithmetic: compute a value, then store it in a variable. Because - the computation has to happen before storing the result in a variable, there - is no contradiction here.\r\n\r\n<details>\r\n<Summary><strong>Common Mistakes - & Tips</strong> [click to expand]</Summary>\r\n\r\n<h3>\r\nMistake 1\r\n</h3>\r\n<p>To - increase the value of variable by 10 (for example) a common mistake is to - think that this statement alone will do the trick.\r\n</p><p>\r\n\r\n```\r\nnum1 - + 10;\r\n```\r\n</p><p>\r\nIt doesn't. This tells the computer to add 10 - to whatever the value of `num1` is. And the computer will do that, and the - result will go....nowhere. It will be lost.\r\n</p><p>\r\nBecause you are - trying assign a new value to a variable it should make sense that **the = - sign must be involved somehow**. \r\n</p>\r\n<h3>\r\nMistake 2\r\n</h3>\r\n<p>\r\nIf - you were in math class this statment would make no sense:\r\n```\r\nnum1 = - num1 + 10;\r\n```\r\n</p><p>\r\nBut **remember to read = as \"gets.\"** If - you read the statement above as: \"num1 *gets* the value of num1's current - value plus 10\" it might make more sense. Get in the habit of using \"gets.\"\r\n</p>\r\n</details>\r\n\r\n# - Do This:\r\n\r\n * **Make a prediction.**\r\n We start you out with some code - again (see below). \r\n\r\n <img src=\"https://images.code.org/60b25394c387bc111451f0e481528733-image-1447800367736.43.42.png\" - style=\"width: 500px;\"> \r\n\r\n Trace the code and predict what you think - will be printed to the console. (NOTE: We're serious about this \"make a - prediction\" stuff. When you force yourself to make a prediction about what - code will do you will learn faster since it triggers you to apply your mental - model of what's happening.)\r\n \r\n * **Run the program** to see if you - were right.\r\n \r\n * **Add a `console.log` statement**.\r\n \r\n We've - left you with a *little bit* of programming to do: add a `console.log` statement - at the end of the program to see the last value of `someNum` to see if your - full prediction is correct.\r\n" - CSPU5_U3L15 - add code to make count down work_markdown_instruction: "# Make - Count Down Work\r\n\r\n<img src=\"https://images.code.org/0044a46a27f7af5da74daeae8de021f7-image-1446063781449.gif\" - style=\"float: right; width: 200px\">You now know enough about using global - variables (and some of the problems you might run into) to try it yourself.\r\n\r\nLet's - start with an easy task. Right now clicking the up arrow works as expected; - **clicking the down arrow does not**. So...\r\n\r\n# Do This:\r\n**Make the - count go down by 1 every time the down arrow is clicked**\r\n\r\n* Study how - the up arrow works, and use it as an example for writing the code for the - down arrow.\r\n* Add and modify the code so that when the down arrow is clicked - the count goes down.\r\n* When you're done the app should work like the animation - shown to the right.\r\n* HINT: Don't forget to set the text of the label.\r\n\r\n" - CSPU5_U3L15 - Add reset button to UpDown app_markdown_instruction: "# Add a - Reset Button\r\nIn most apps you want to provide a way to start over. \r\n\r\nTo - do this without having the user quit and restart your app, you need to add - code to **reset variables and text displays to initial values** so the app - can effectively start over.\r\n\r\nWe've **added a button** to the \"gameOverScreen\" - in the *Count Up/Down App* and **added an empty event handler** for it. \r\n\r\nRight - now clicking the \"start over\" button does nothing. You will write code to - make it work.\r\n\r\n\r\n# Do This:\r\n**Add code to the startOverButton event - handler to reset the app**. <img src=\"https://images.code.org/cb1569accb6a370d2258b5b14d624424-image-1446126849891.gif\" - style=\"width: 150px; float: right;\">\r\n\r\nThe app should work like the - animation shown to the right. **Notice** that when the \"start over\" button - is clicked it goes back to the main screen and the count has been reset to - 0. \r\n\r\nThe code should:\r\n\r\n* Set the screen to the gamePlayScreen.\r\n* - Set the count variable to 0.\r\n* Set the correct text label on the gamePlayScreen - to show the count is 0.\r\n\r\nOnce you get it to work, move on." - CSPU5_U3L15 - count upDown bug forget to set text_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a bug that doesn't produce an error. - It just doesn't do what's expected. The reason is a common mistake that - all programmers make.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To - see the bug:**\r\n * Click the up arrow about 5 times.\r\n * Click the down - arrow about 10 times.\r\n * Click the up arrow again.\r\n* **Look at the code - and fix the problem.**\r\n* **Read about the common mistake** by expanding - the area below.\r\n* **Once you've fixed the issue, move on.**\r\n <p>\r\n\r\n</p>\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...forgetting - to update the display after changing something in the program</big>\r\n\r\n\r\n<h1> - Misconception Alert - Changing a Variable Doesn't Change the Display</h1>\r\n\r\nA - common misunderstanding about variables and displaying them is to think that - a text label that's displaying a variable will change when the variable changes. - NO. A text label is just \"dumb\" container for text. It's similar to a - variable itself in that it won't change unless you explicitly tell it to.\r\n<p></p>\r\n<h1>Concept: - Separation of Program Data from How It's Viewed</h1>\r\nMaintaining variables - and program data is a **different task** from maintaining the display of the - app. Your program could actually run without updating the display at all - - it would still be working behind the scenes; it just wouldn't be very fun - or interesting to use.\r\n<p></p>\r\n</details>\r\n\r\n\r\n" - CSPU5_U3L15 - count upDown bug logic error wrong update_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a few different bugs. Find them and squash - them!\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n - * Click the up arrow exactly twice.\r\n \t* Restart the program and do this - a few times - you'll notice nothing happens the first time you click.\r\n - * Click the down arrow several times.\r\n* **Look at the code and fix the - problem.**\r\n* **Read about the common mistake** by expanding the area below.\r\n* - **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...updating - the wrong thing in the wrong event handler.</big>\r\n<p></p>\r\nThere are - two common mistakes here:\r\n<p></p>\r\n1. Mixing up which event handler should - do what.\r\n<p></p>\r\n2. Updating the display **before** any change is made - to the underlying data of the program. \r\n\tThis can make the app seem oddly - out of sync where each event triggers an update to the display that reflects - the **last** thing done, not the current thing.\r\n<p></p>\r\n</details>" - CSPU5_U3L15 - count upDown bug var not created globally_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a few different bugs that are related - to the same problem.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To - see the bug:**\r\n * Click the up arrow several times.\r\n * Click the down - arrow.\r\n* **Look at the code and fix the problem.**\r\n* **Read about the - common mistake** by expanding the area below.\r\n* **Once you've fixed the - issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read about the - common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...thinking - you're referencing a global variable when you're not.</big><br>\r\n\r\nA - common mistake is basically a syntax/spelling error. These mistakes can be - really tricky to work out because you *think* you know what you wrote, but - the computer doesn't see it that way :)\r\n<p></p>\r\n</details>\r\n\r\n\r\n" - CSPU5_U3L15 - Debug forget to update var on reset in UpDown app_markdown_instruction: "# - Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common - mistake** has been introduced into the code.\r\n\r\nIt's a tricky one to - find because at first it looks like everything is okay.\r\n\r\n# Do This:\r\n\r\n* - **Run the program.**\r\n\r\n* **To see the bug:**\r\n * Click the up or down - arrow until you get to the \"gameOverScreen.\"\r\n * Click \"start over.\"\r\n - * Click the up or down arrow again... what the?\r\n \r\n* **Look at the code - and fix the problem.**\r\n\r\n* **Read about the common mistake** by expanding - the area below.\r\n\r\n* **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...forgetting - to reset <i>everything</i> you need to actually start over.</big></strong><br><br>\r\nFrequently - to actually reset you need to set a few variables back to initial values <i>and</i> - update all the UI components, especially those that rely on those variables, - so they reflect the new values.<br><br>\r\n\r\nAnother common mistake shown - here is setting the text of a label to \"0\" rather than the value of the - count variable. For example, these two lines of code are a little dangerous:<br><br>\r\n<pre>\r\ncount - = 0;\r\nsetText(\"countDisplayLabel\", 0);\r\n</pre>\r\n\r\nTo be safe, if - a label is supposed to display the value of a variable, you should always - use the variable <i>instead of hard-coding numbers</i> as a check on yourself. The - general rule of thumb is: never hard-code a value instead of using a variable - that holds the value you need to show.<br><br>\r\n\r\n<b>A common strategy</b> - for handling this is to put everything you need to reset the app into a function - which you can call at both the beginning of your program, and from other screens - later on. For example:<br><br>\r\n\r\n<pre>\r\nfunction resetAll(){\r\n count - = 0;\r\n setText(\"countDisplayLabel\", count);\r\n setScreen(\"gamePlayScreen\");\r\n}\r\n</pre>\r\n\r\nThen - in some other code like a button event handler you can just call your reset - \r\nfunction:<br><br>\r\n\r\n<pre>\r\nonEvent(\"startOverButton\", \"click\", - \r\nfunction() {\r\n <span style=\"background-color:yellow\">resetAll();</span>\r\n});\r\n</pre>\r\n\r\n</details>" - CSPU5_U3L15 - Debug if never triggers in UpDown app_markdown_instruction: "# - Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common - mistake** has been introduced into the code.\r\n\r\nWe've changed the app - so that it counts up and down by 3 rather than by 1.\r\n\r\n# Do This:\r\n\r\n* - **Run the program.**\r\n\r\n* **To see the bug:**\r\n * Click the up or down - arrow trying to get to the game over screen.\r\n * It should be impossible - to get to the game over screen.\r\n \r\n* **Look at the code and fix the problem.**\r\n\r\n* - **Read about the common mistake** by expanding the area below.\r\n\r\n* **Once - you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...the - condition you're checking in your `if` statement is actually impossible to - reach.</big></strong>\r\n<p>\r\nThis problem was probably easy to see here, - but in practice <b>logic errors</b> like this can be devilish to track down. - It's especially hard because the program gives you no hints that anything - is wrong - it is syntactially a correct program. The computer cannot tell - ahead of time whether your `if` statements will ever be true. So you need - to trace through the logic of your program step by step to try to figure out - why something's not happening that you expect should have happened.\r\n</p>\r\n\r\n</details>" - CSPU5_U3L15 - Debugging Simple If-statements =v==_markdown_instruction: "# - Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA **very common - mistake** has been introduced into the code. It's one that vexes early programmers, - but we're sure you'll find it.\r\n\r\n# Do This:\r\n\r\n* **Run the program.**\r\n\r\n* - **To see the bug:**\r\n * Click the up arrow just once.\r\n * Restart the - program.\r\n * Click the down arrow just once.\r\n \r\n* **Look at the code - and fix the problem.**\r\n\r\n* **Read about the common mistake** by expanding - the area below.\r\n\r\n* **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...using - `=` instead of `==`</big></strong>\r\n<p>\r\n<b>Yup,</b> we told you this - is a common mistake! And it's an easy one to make.\r\n</p>\r\n<p>\r\nRemember - that the single `=` sign does assignment and it actually *also* evaluates - to true. This means that if you stick it in an `if` statement, that `if` - statement will <i>always</i> be true.\r\n</p>\r\n<p>\r\nOne strategy to avoid - this mistake is to **read code aloud in your head** and don't even use the - single word \"equal\":\r\n<li> think **\"gets\"** every time you see `=`</li>\r\n<li> - think **\"equal-equal\"** every time you see `==` </li>\r\n</p>\r\n<p>\r\nIf - you get in the habit of thinking that way, these mistakes are easier to catch. For - example you'd see this:<br>\r\n`if (count = 20)`<br>\r\nand read:<br>\r\n<i>\"if - count gets 20\"</i> ...and know that that doesn't make sense.\r\n</p>\r\n\r\n<p></p>\r\n</details>\r\n\r\n" - CSPU5_U3L15 - DEMO up down count practice app_markdown_instruction: "# All - the Basics You Need\r\n\r\n<img src=\"https://images.code.org/abb09baa0b6ccc24ff141590c5b667c3-image-1446417655965.gif\" - style=\"float:right; width: 150px\"> When you close these instructions, you'll - get to play a little bit with the very simple app (shown at right) to demonstrate - the basics of concepts involved in making the clicker game. We'll call it - the **Count Up/Down App**. Yes, it's a boring \"game,\" but it has all the - pieces of a more sophisticated game.\r\n\r\nThis app demontrates a few new - concepts. We'll step through each one, one at a time, explaining how each - thing works. Along the way, we'll also encounter some common challenges, - and learn how to solve them.\r\n\r\n# Do This:\r\n* Keeping clicking the up - arrow until something happens (something besides the number increasing).\r\n* - Start over.\r\n* Click the down arrow until something happens (something besides - the number decreasing).\r\n* Start over.\r\n\r\nOnce you think you've seen - all the behavior click Finish to see the first part of how this is done.\r\n\r\n" - CSPU5_U3L15 - global var example count up_markdown_instruction: "# Using Variables - in Apps!\r\n<img src=\"https://images.code.org/f156f8d8524c3c0316e4db394e331bdc-image-1446060829590.gif\" - style=\"float: right; width: 200px;\">\r\nThe example program here has a small - portion of the *Count Up/Down App* written. Right now, what the app should - do is shown in the animation to the right.\r\n\r\n# Important Concept!\r\n\r\nThis - small functionality **demonstrates an important concept** - how to create - a variable in the app and update it when an event occurs. It may seem fairly - straightforward but there are some common misconceptions that we want to alert - you to.\r\n\r\n# Do This: Misconception Investigation\r\nOver the next few - levels you are going to do a small investigation of two apps that do almost - the same thing but *one works as expected* and *one with a bug* that demonstrates - an important concept about using variables in apps. Here is what you'll - do:\r\n\r\n1. **Run this app, which works properly.**\r\n * Study the code - until you think you understand what's happening.\r\n * Pay attention to the - code that handles the up arrow being clicked.\r\n\r\n2. **Run the app on the - next screen, which has a bug.**\r\n * On the next screen we show you almost - the same app, but with a subtle problem.\r\n * See if you can spot the difference - and fix it.\r\n\r\n3. **Report what you found!**\r\n * We'll ask you to report - what you found. It's not a quiz. You can go back and forth until you spot - the problem, but you should find it and be able to write what it is.\r\n" - CSPU5_U3L15 - mini clicker update score_markdown_instruction: "# Using Global - Variables\r\n\r\nYou'll now look at a version of the clicker game. We've - set up the basic functionality to move the apple around the screen, and have - __created a global variable to keep track of the score.__\r\n\r\n# Do This:\r\n__Add - code to update the score when the apple is clicked.__ Remember that you'll - have to update both the global variable _and_ the label text!\r\n\r\n<img - src=\"https://images.code.org/001640fd24fc487af534ab769ed196e2-image-1446136596261.gif\" - style=\"width:200px\">" - CSPU5_U3L15 - practice with setText_markdown_instruction: "# Changing Elements - on Screen \r\n\r\nThere's another way to display text in your app besides - `console.log` and `write`. \r\n\r\nThere is a command called `setText` which - will **change the text of a component on screen** given its id. This is a - very powerful technique and one that you will use a lot. Here's what it looks - like in action....\r\n\r\n<img src=\"https://images.code.org/3e5dd320801720d5c62a49146d9ee3d2-image-1446056202170.gif\" - style=\"width: 500px\">\r\n\r\nLet's do a **very simple** example of using - `setText`.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/5fc22aef5e8f5161f95a2507c1ec006b-image-1446056758249.gif\" - style=\"float: right; width: 175px; border: solid 1px #AAAAAA\">\r\n* **Run - the code** in the app.\r\n \r\n Look at the code for the \"upArrow\" event - handler and how it sets the text of the label.\r\n \r\n* **Modify the code.**\r\n - \r\n When the down arrow is clicked, set the text of the label to something - else.\r\n\r\n* **GOAL:**\r\n * Your only goal is to successfully use `setText` - in this example app.\r\n * The app should do something similar to the animated - example at right.\r\n\r\nOnce you've got it functional, click Finish to move - on.\r\n \r\n\r\n" - CSPU5_U3L15 - Simple If-statements in UpDown App_markdown_instruction: "# Add - Your Own *if* Statement\r\n\r\nIn most apps you want to make decisions based - on the state of some data you're keeping track of in the app. \r\n\r\nWe've - **modified** the *Count Up/Down App* to add another screen. When the count - reaches certain values, we'll switch screens. In the code you'll see an - `if` statement has been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n - * **If** the value of `count` is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img - src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" - style=\"width: 150px; float: right\">\r\n\r\n# Do This:\r\n**Add an `if` statement - so that when counting down the app changes screens when the count reaches - -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what - happens when the `if` statement is triggered.\r\n* **Study the `if` statement** - for the up arrow button to see how it works.\r\n* **Add an `if` statement** - to the down arrow event handler:\r\n\t* **If** `count` is equal to **-5, then** - set the screen to the \"gameOverScreen.\"\r\n* **Goal:** Once you're finished, - clicking the down arrow in the app should work like the animation shown to - the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click - to expand]</summary>\r\nThere is a subtle challenge here that you need to - set the text of the label on the <i>gameOverScreen</i> when you change screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> - Your code can call `setText` for any UI element, on any screen, at any time - - even if the element isn't on the screen that's currently showing.\r\n</details>\r\n\r\n" - CSPU5_U3L15 - variable scoping problem debugging_markdown_instruction: "# Debugging - Problem!\r\n\r\n**Uh oh!** The code here is subtly different from the one - in the previous example and **now there is a problem**.\r\n\r\n# Do This:\r\n\r\n* - **Run the app** and try it to see the problem. \r\n* **See the error.**\r\n - * Note that **NaN** stands for \"Not a Number\" - why would it say this?\r\n* - **Note the difference** between this broken version and the previous one that - worked.\r\n* **Fix the problem** so that it works as before." - CSPU5_U3L15 click add lives_markdown_instruction: "# Tracking Lives\r\n\r\nIn - the game, the number of lives starts at 3 and decrements by 1 every time the - background image is clicked. Add this functionality to your game!\r\n\r\n# - Do This:\r\n- __Add your variable to keep track of lives.__\r\n- __Add a click - handler for the background image.__ _ID: \"background\"_\r\n- __When the background - is clicked, decrement the number of lives by 1.__\r\n\r\n<img src=\"https://images.code.org/79f1352aebb2e40c302d1900aacd31f4-image-1446138180044.gif\" - style=\"width:200px;\">" - CSPU5_U3L15 full clicker app_markdown_instruction: "# Make Your Own \"Clicker\" - Game\r\nYou will be creating your own “clicker” game similar to the Apple - Grabber game you worked on in this lesson. \r\nThe general object of the game - is to click on an element that jumps around every time you click it. You will - pick your own theme and decide what the rules are and how to keep score.\r\n\r\n** - Your Main Tasks Are To:**\r\n\r\n * Pick a theme for your game and add appropriate - images and styling.\r\n * Add variables to track some data during gameplay.\r\n - * Add code to event handlers to update the variables and display appropriately.\r\n - \r\n**See Activity Guide for Requirements**\r\n\r\nThere is a full activity - guide and rubric for this project. You can find a link to it in the student - resources section for this lesson. Or ask your teacher for it.\r\n \r\n<img - src=\"https://images.code.org/146107536c50b4a3317f3ebbe2e66f37-image-1446418612319.png\" - style=\"float: right; width: 300px\">\r\n** Template **\r\n\r\nThis level - is a template for the app. You should **run it to see what it does** right - now. You will modify *this* template, both the design elements and the code, - for your project.\r\n\r\nThe template has 4 screens and some basic navigation - functionality and event handlers set up for you. The game play screen uses - the images from the Apple Grabber game, but you should replace these with - images related to your chosen theme.\r\n\r\n" - CSPU5_U3L15 spot the difference variable debugging_markdown_instruction: "Respond - to the following questions about your investigation into the bug with the - counting game. Feel free to go back and look at the game again (but do so - in another tab or be sure to click \"Submit\" to save your work!):\n\n- From - the user's perspective, what was the difference between the first version - of the game and the one with the bug?\n- From looking at the code, what specifically - was the difference between the two, and why is that an issue?\n- How did you - fix the bug?\n" - CSPU5_U3L16 - challenge say hi app_markdown_instruction: "# Introducing the *change* - Event\r\n\r\nDid you notice with the demo digital assistant that you could - just __type a question, hit 'enter', and the assistant would respond__? - Up until now you've been using the click of a button to trigger getting the - text from an input or text area.\r\n\r\nYou can use a new event type to get - this behavior: The __'change' event__ is triggered when the user hits 'enter' - in a text input after typing.\r\n\r\n\r\n<img src=\"https://images.code.org/7d1725b236471f8e2a0efed5870660da-image-1446071579670.32.36.png\" - style=\"width:350px;\">\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/f8f1f7ae18acbc570a367886bcd6ca88-image-1445976541574.gif\" - style=\"width:250px;\">\r\n- A __text input__ has been created for you that - asks for a user's name.\r\n- Attach a __'change'__ event handler to the - text input.\r\n- When the 'change' event triggers, __write the user's name - and a greeting__.\r\n" - CSPU5_U3L16 - chaserApp_markdown_instruction: "# Chaser Game\r\n\r\nYou now - have all the skills you need to make a simple \"chaser\" game. A chaser game - is just a game where an image runs away from your mouse.\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" - style=\"float: right\">\r\n\r\n# Do This:\r\n\r\n**Create a \"Chaser Game\"** - which includes the following components:\r\n\r\n* **Text** on the top of the - screen with a title or instructions for what to do.\r\n* **An image** that - \"runs away\" (moves randomly) based on some mouse event.\r\n\r\nOnce you - have the basic functionality down feel free to spend time adding more features - to your application.\r\n<br><br><br>\r\n\r\n" - CSPU5_U3L16 - chooseImages_markdown_instruction: "# Choosing Your Own Images\r\n\r\nThe - second parameter of the `image` command allows you to set the image to be - displayed. There are two ways to do this:\r\n1. Provide the URL of an image - on the web.\r\n2. Upload an image from your computer (by clicking \"choose...\").\r\n\r\n![](https://images.code.org/e726e56fd3e4c7cd4a0d58cba731a855-image-1444240440116.53.49 - PM.png)\r\n\r\n\r\n# Do This:\r\n\r\n* **Read the documentation for `image`** - for tips on how to find an image's URL and how to upload.\r\n* **Change the - image** to one you've found online or from your own computer.\r\n\r\n**NOTE:** - many images are bigger than the screen of your app, so it's likely you'll - need to add a `setPosition` command to get it on the screen sized the way - you want." - CSPU5_U3L16 - doubleQuotes_markdown_instruction: "# Importance of Double Quotes\r\n\r\nYou - may have noticed that the strings we've seen are **wrapped in double quotes**. - These double quotes **are not part of the string**. Instead this is how you - indicate that a sequence of characters **is a string and not the name of a - variable**.\r\n\r\nAs you start writing programs with strings **it is common - to generate errors from forgetting to place them in double quotes**. We're - going to generate some of those errors now so that we can recognize them more - easily later.\r\n\r\n![](https://images.code.org/89235457b9b9bf76ac4f8221cae5a62e-image-1445987270682.07.24 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **This program generates many errors** - because strings were not placed in quotes.\r\n* **Run the program** before - you change it to see the errors that are generated.\r\n* **Add double quotes** - around all the strings so that the program runs without errors.\r\n\r\n" - CSPU5_U3L16 - intro getText_markdown_instruction: "# Getting Text Input\r\n\r\nAs - we saw a user can now type inside of a text input whenever they want, **but - now we'll need a way to access that text**. In order to do that you'll need - to use the `getText` command, which you can now find in the **UI Controls** - tab.\r\n\r\n<img src=\"https://images.code.org/0c6774f2b6d33f8107ec2936102b1a10-image-1445533677192.58.24 - PM.png\" style=\"width: 150px;\">\r\n\r\nYou can use a `getText` command just - like a string within a `console.log` or `write` command. Just like with `setText` - you will refer to the UI element by its ID.\r\n\r\n![](https://images.code.org/c17e419301d0cfeebf7f0ccee13e415f-image-1445892504376.47.54 - PM.png)\r\n\r\n# Do This:\r\n\r\n* **Read the documentation ** for `getText`.\r\n* - **Add an event handler to the Submit button** that fires when your button - is clicked.\r\n* **Inside the event handler** place code that will **log the - name your user input to the console**.\r\n\r\n" - CSPU5_U3L16 - introSetPosition_markdown_instruction: "# How to Organize the - Code\r\nAs your apps get more complex you'll have to think about how to organize - your code so it remains readable and easy for you to locate things when debugging - any problems. We suggest the following convention which breaks the code into - 3 major sections:\r\n* **Top**: code for UI elements **and** any code for - positioning them.\r\n* **Middle**: code for event handlers.\r\n* **Bottom**: - code for any other other functions you've written. (We don't have any of - these yet.)\r\n\r\nSo if you have some existing code and want to insert a - `setPosition` command, you should place it after `button` but before `onEvent` - in the code, like this:\r\n\r\n<img src=\"https://images.code.org/ae17e62c077aa9698526371d22db1307-image-1448404255046.gif\" - style=\"width: 500px\">\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/3a834b8a4313e31a453525a69acda1f4-image-1444335250982.png\" - style=\"float: right; width: 175px\">\r\n\r\n* **Starter code** has been provided - which creates two buttons and event handlers.\r\n* **Insert** `setPosition` - commands for each button so they appear at the bottom of the screen (as shown).\r\n * - **Remember:** in an app screen 0,0 is the top left corner and you specify - a location by how many pixels from the left and how many down from the top - of the screen it is. The screen is **320 by 450 pixels**." - CSPU5_U3L16 - introStrings_markdown_instruction: "# Strings\r\n\r\nThe primary - data type we have used so far is **Numbers**. If we want to interact with - user-submitted text, however, we'll need to learn about a new data type called - a **String**. A string is a **sequence of ASCII characters**.\r\n\r\n**Example** - | **Rule**\r\n---|---\r\n`\"aString\"` | Strings **might** look a lot like - a variable name but there are **many differences**.\r\n`\"look at all these - spaces\"` | Strings can **contain spaces**.\r\n`\"$2 bills are the coolest\"` - | Strings can **contain special characters** (and even start with them).\r\n`\"11\"` - | Strings might **contain only digits**. This looks like a number but it is - really 2 ASCII characters.\r\n`\"\"` | Strings might **contain no characters**.\r\n<br>\r\nYou - can **store strings in a variable just like a number**. In this example the - variable name is `str` but you should choose a name that is **descriptive - and meaningful**.\r\n\r\n![](https://images.code.org/56e6b30a51556aa3b516e0a49b51cbeb-image-1445894334432.18.40 - PM.png)\r\n\r\n**Combining Strings:** often you will want to combine multiple - strings to create one longer string. You can do this with the `+` operator. - The formal name of this process is **concatenation**.\r\n\r\nThe program you're - about to see is a very simple Mad Libs app that uses strings that are created - inside the program and saved inside of variables. These strings are then - **concatenated** with other strings to create a Mad Lib.\r\n\r\n# Do This:\r\n\r\n* - The input words of this Mad Lib are **currently set to the empty string**.\r\n* - **Add your own input words** and run the program to generate the Mad Lib." - CSPU5_U3L16 - newEventTypes_markdown_instruction: "# New Elements and Events: - New Event Types\r\nYou just wrote your first program that **does not include - the turtle**! Moving forward we're going to focus much more on programming - apps that use User Interface (UI) elements, but we'll keep the turtle library - around in case you want to use it.\r\n\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 - AM.png\" style=\"float: right\">\r\n\r\n**New Events**: You may have noticed - that the `onEvent` block has a pull-down menu for the event **type** (see - right).\r\n\r\n# Do This:\r\n\r\n* **Experiment** with **each of the different - types of mouse events** by selecting from the list. You can also read about - them in the documentation.\r\n\t* click\r\n * mousemove\r\n * movedown\r\n * - mouseup\r\n * mouseover\r\n* **Choose** the mouse event type you like most - and change your event handler to use it.\r\n* **Note:** There are some events - that capture keystroke events. These are interesting, but they do not work - easily with buttons. We'll stick to mouse events for now, and get to keys - later.\r\n\r\n**Be sure** to experiment with each one. The next exercise - will quiz you on which one is which.\r\n\r\n" - CSPU5_U3L16 - outputWithTextArea_markdown_instruction: "# Generating Text Output\r\n\r\nSo - far we've been outputting our messages to the console, but now we'd like - to display them in the app. In order to do so we're going to be using a new - UI element called a `textArea`. You can use `setText` with a `textArea` just - like you would with a `textLabel`.\r\n\r\n![](https://images.code.org/45e6b6cdb1ca87f53cf1d6bba97cb812-image-1445977693641.24.43 - PM.png)\r\n\r\nIf we want to combine user input with default text we can do - so with **string concatenation**. Together with a `textArea` we can use this - ability to compose longer messages based on user input.\r\n\r\n# Do This:\r\n\r\n* - **Add a `textArea`** to your app and give it a descriptive and meaningful - ID.\r\n* **Create a variable inside your event handler** called `userMessage` - to hold the full message that will be sent to the user.\r\n* **Use string - concatenation** to compose a message from the user input.\r\n* **Use `setText`** - to place your `userMessage` inside the `textArea` you created.\r\n\r\n<img - src=\"https://images.code.org/193af3e0c993dbf0b7af9c571ec5f56d-image-1445977696957.27.08 - PM.png\", style=\"width:250px;\">" - CSPU5_U3L16 - setPosition to fixed location_markdown_instruction: "# Using - setPosition\r\n\r\n<img src=\"https://images.code.org/b664824ffeb3347b2e0b6d12447b4e8b-image-1476891499229.gif\" - style=\"width: 150px; float: right;\">\r\n\r\n**Now you try it** - use [setPosition](#triggercallout=setPosHover) - to **move the button to the middle of the screen when clicked**. We've set - up a small project for you with a button (id: `moveBtn`) already added in - design mode.\r\n\r\n1. Add an `onEvent` block\r\n2. Drag a `setPosition` command - into the event handler function\r\n3. Set the x,y coordinate so that the button - ends up in the middle of the screen.\r\n * You'll need to experiment a little - bit to find coordinates that work for you.\r\n * Hover over the screen to - find a good starting point.\r\n\r\n**Tip**: when you see a command that is - linked like this: [setPosition](#triggercallout=setPosHover) click it! -- - it will show you other hints.\r\n\r\nOnce you've got the button moving to - the middle of the screen click Finish to move on to the next challenge.\r\n" - CSPU5_U3L16 - setPosition to move button_markdown_instruction: "<img src=\"https://images.code.org/dc1f942b805f07b3581c678ed1669a27-image-1476892595302.gif\" - style=\"float: right\">\r\n# Using setPosition and randomNumber\r\n\r\n<img - src=\"https://images.code.org/a501391fac0c396a197aaaf357e73972-image-1476892143359.gif\">\r\n\r\n**Now - you try it** - instead of using a fixed value, you use [randomNumber](#triggercallout=showRand) - to set the x and y coordinates for setPosition. Now you'll have to chase - the button all over the screen!\r\n\r\n* Make it so that the button could - jump *anywhere* on the visible screen each time it's clicked.\r\n* Extend - it: if you want to get really nuts, you could add back in the *width* and - *height* parameters of setPosition and make the size of the button *also* - change randomly with each click!\r\n\r\nOnce you've got the button jumping - around the screen. Click **Finish** to move onto the next level.\r\n" - CSPU5_U3L16 - singleSetPosition_markdown_instruction: "# Moving and Sizing - Buttons\r\n\r\nAn important component of designing intuitive and visually - appealing user interfaces is the location of the elements on the screen. Using - the `setPosition` command (now added to the Toolbox) you can move and set - the size of user interface elements.\r\n\r\n![](https://images.code.org/c3e42223cbcb096f992d758973d09f63-image-1444664597665.42.48 - AM.png)\r\n\r\n**NOTE:**\r\n * If you only want to set the size you can use - the `setSize` function which looks like this:\r\n\r\n ![](https://images.code.org/cb742ecf96c04477db0f8361ad5dcdaf-image-1448924017288.png)\r\n\r\n - * If you *only* want to set the position *without* changing the size of the - element, you can omit the *width* and *height* parameters from the `setPosition` - function. To do that, you need to switch into text mode, like this:\r\n\r\n - <img src='https://images.code.org/5b565ef5b74b5cd657ba15c67be92b0d-image-1448924356253.gif' - style=\"width: 400px\">\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** - for `setPosition`.\r\n* **Starter code** has been provided which creates a - single button.\r\n* **Move the button to the middle of the screen** using - `setPosition`, as in the image below. (You may need to experiment a little - bit with the x,y location to get it right).\r\n* **Remember:** in an app screen - 0,0 is the top left corner and you specify a location by how many pixels from - the left and how many down from the top of the screen it is. The screen is - **320 by 450 pixels**.\r\n\r\n![](https://images.code.org/62840468826ce153d3d0d80bca303827-image-1444662614963.10.05 - AM.png)\r\n\r\n" - CSPU5_U3L16 - text labels_markdown_instruction: "# New Elements and Events: - Text Labels\r\n<img src=\"https://images.code.org/20d50fd324908fc48633e1325cc37603-image-1444662791509.png\" - style=\"float: right\">\r\nThe UI controls toolbox contains an element called - `textLabel`. A text label is what it sounds like: plain text that you can - put in your app. Even though it's just plain text you can still move and - resize it using `setPosition`, and you can attach event handlers to it as - well.\r\n\r\n**NOTE:** resizing a text label does not change the font size - of the text. We'll learn how to do that later. \r\n\r\n# Do This:\r\n\r\n* - **Read the documentation** for `textLabel`<img src=\"https://images.code.org/fe2ce5f335fd124dc3052270ca0af31f-image-1444336014658.gif\" - style=\"float: right; width: 150px\">.\r\n* **Modify** the program so that - your button is now a text label. Just as before, it should move randomly around - the screen when clicked. You can make the text whatever you like.\r\n* **Tip:** - If you reuse your button's ID you'll only need to change a single line of - code to make your program work. Once you have your program working **choose - a descriptive and meaningful ID** for your text label and make the appropriate - changes in the event handler.\r\n\r\n<br>\r\n<br>\r\n<br>\r\n\r\n" - CSPU5_U3L16 - textInput getText write_markdown_instruction: "# Text Input Elements\r\n\r\nSo - far we've been using `promptNum` as a simple way to get a number as input. - Now that we know a little about strings we are going to create **user interface - elements that users can use to submit text (i.e. strings) instead**. The first - and simplest example is `textInput` which you can find in Design Mode.\r\n\r\n<img - src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 - PM.png\" style=\"width: 100px\">\r\n\r\n# Do This:\r\n\r\n* **Add two text - input elements to this program**, one for the name and one for the age of - the user.\r\n* **Give your text input elements descriptive and meaningful - IDs**.\r\n* **In Design Mode** set their default text to prompt the user for - their name and age.\r\n* **Compare your app to the example below**.\r\n\r\n<img - src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 - PM.png\" style=\"float:left; width:200px;\">\r\n<br>" - CSPU5_U3L16 - toUpper_markdown_instruction: "# String Capitalization\r\n\r\nIf - you want to change the capitalization of a string you can do so with two new - functions\r\n\r\n![](https://images.code.org/d8523cdae7c07b34baa1c61809bb80d4-image-1445980407200.42.31 - PM.png)\r\n\r\nNote that the syntax is similar to `console.log` . This is - because `toUpperCase` really only makes sense as a command when you are using - a **string**, just as `log` only makes sense when you are talking about the - console. This function **evaluates to a new string in which all characters - have been made uppercase / lowercase**. If you want to update the value in - your original variable you'll have to do so explicitly, as in\r\n\r\n```\r\nvar - myString = \"lower case for now\";\r\nmyString = myString.toUpperCase();\r\n```\r\n\r\n# - Do This:\r\n\r\n* **Update your application so that the user's name is printed - in UPPERCASE**.\r\n\r\n<img src=\"https://images.code.org/26d8ffb7c631c1c510f781b5bf46d494-image-1445980322936.04.55 - PM.png\", style=\"width:250px;\">" - CSPU5_U3L16 - use images_markdown_instruction: "# New Elements and Events: - Images\r\n\r\n<img src=\"https://images.code.org/a84297658be45dc78bc401d387d10436-image-1444663322356.21.25 - AM.png\" style=\"float: right; width: 120px\">\r\nImages make applications - more visually pleasing and interactive. You can add images to your application - using the `image` command. For now, just add an `image` element to your app - (the default image link is the Code.org logo) and don't worry about choosing - a unique image just yet. We'll do that in the very next exercise!\r\n\r\n\r\n# - Do This:\r\n<img src=\"https://images.code.org/8df7b1b56c71de7ad9770646bd7f8792-image-1444336140877.gif\" - style=\"float: right; width: 250px\">\r\n\r\n* **Modify** the program - change - the `textLabel` to an `image` so that the image moves randomly around the - screen based on the event you chose.\r\n* **Tip:** If you reuse your text - label's ID you'll only need to change a single line of code to make your - program work! Once you have your program working though, it's probably a - good idea to choose a descriptive and meaningful ID for your image and make - the appropriate changes in the event handler.\r\n\r\n<br>" - CSPU5_U3L16 Mad Lib Clear Input_markdown_instruction: "# Play It Again and - Again!\r\n\r\nWhen the user clicks the \"Play again\" button, the first screen - should reset and not show the user's previous text.\r\n\r\n# Do This:\r\n- - When the \"Play again\" button is clicked, __clear the text from each text - input__ on Screen 1.\r\n- __Free play:__ Add images, or more How-to steps - for your Mad Libs, and invite others to play!\r\n\r\n<img src=\"https://images.code.org/a49fe3eba4d2d2fb03e45d15aad53dbf-image-1450143105779.16.14 - Mad Libs play again button.gif\" style=\"width:200px\">\r\n\r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nTry - setting the text to the empty string: `\"\"`.\r\n</details>\r\n" - CSPU5_U3L16 Mad Lib Demo_markdown_instruction: "# Getting Text from the User\r\n\r\nUp - until now, the event-driven apps you have created responded to the user clicking - an element or typing a number when you used `promptNum`. __What if we want - the user to provide _text_ instead of a number?__ You can probably think of - many apps and websites that ask you to provide text in order to do something.\r\n\r\nIn - programming, we have to represent text in a specific way to distinguish it - from other words in our code, such as variable names. But we'll cover that - later...\r\n\r\nAt the beginning of class you created a Mad Libs on paper, - which takes user input in the form of nouns, adjectives, and verbs to create - a unique \"How-to\" manual. You'll be translating your own Mad Libs How-to - into an app in this lesson.\r\n\r\n# Do This:\r\n\r\n- __Play with this Mad - Libs app__ a couple of times to see a digital version of the paper game. \r\n- - __Think about how the final text is created__ based on the input from the - user. How would you describe in words the algorithm for creating it?" - CSPU5_U3L16 Mad Lib getText_markdown_instruction: "# Make It Mad! Add the User's - Text to Your Mad Libs Outline\r\n\r\nNow that you have your Mad Libs outline - appearing in the text area, it's time to __incorporate the user's text__ - to make your Mad Libs come alive.\r\n\r\n# Do This:\r\n\r\n- Did you pick - good ID names for your text input elements? Update them now if you didn't!\r\n- - When the __Next__ button is clicked, __get the user's text from the text - inputs on Screen 1 and store each in a separate variable__.\r\n- Use string - concatenation to __incorporate the user's text into your Mad Labs string__ - before updating the text area on Screen 2. \r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nUse - `getText` to get the text from each of the text inputs on Screen 1.\r\n</details>\r\n<details>\r\n<summary>**Should - I make local or global variables?**</summary>\r\nRemember that the decision - to create local variables or global variables is a question of _scope_. Where - will you need to access these variables in your program? If you are only using - the variables in the click callback function for the \"Next\" button, then - they can be _local_ variables in that function. \r\n</details>" - CSPU5_U3L16 Mad Lib setText_markdown_instruction: "# Update the Text Area with - Your Mad Libs Outline\r\n\r\nWhen figuring out how to make progress with a - program, it helps to break the problem down into smaller steps and test your - program incrementally. So rather than jumping straight to getting the user - input and __concatenating__ it with your Mad Libs outline, start first by - just making sure that you can get your Mad Libs outline to appear in the text - area when the __Next__ button is clicked on the first screen. \r\n\r\nBut - wait! If you just use `setText` and pass in the string of your Mad Libs outline, - it will look like the screen on the left where all the steps are smushed together. - You can use one or more newline characters, `\"\\n\"`, in your string to create - a line break in your text.\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Without - newlines</strong>\r\n</td>\r\n<td>\r\n<strong>With newlines</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n\r\n<img - src=\"https://images.code.org/24fb1385d6199cd52c6e1d3d11e547fc-image-1448404478181.png\" - style=\"width:201px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/3a627993f9e0e4a6d462c8a21b335058-image-1448404299215.png\" - style=\"width:200px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n\r\n# - Do This:\r\n\r\n- When the __Next__ button is clicked, you already switch - to Screen 2, but now you should also call `setText` on the text area on Screen - 2 to your Mad Libs outline. See the images above for one way to temporarily - handle the word placeholders.\r\n- Add in newline characters `\"\\n\"` in - your Mad Libs string to format it.\r\n\r\n<details>\r\n<summary>**Newline - Examples**</summary>\r\n<table style=\"width:100%; margin-left:25px;\">\r\n<tr>\r\n<td - style=\"vertical-align: text-top; border-right:1px solid #000\">\r\n\t**Example1:**<br/><br/>\r\n \r\n <samp>console.log(\"How - to Drive\\nStep 1.\");<br/><br/></samp>\r\n \r\n *will be displayed - as...*<br/><br/>\r\n \r\n <samp>How to Drive<br/>Step 1.<br/><br/></samp>\r\n \r\n *...on - your console.*\r\n</td>\r\n<td style=\"padding-left:20px;\">\r\n<samp>**Example2:**<br/><br/>\r\n \r\n var - step1 = \"Step 1: ...\";<br/>\r\n \r\n var step2 = \"Step 2: ...\";<br/>\r\n \r\n console.log(step1 - + \"\\n\" + step2);<br/><br/></samp>\r\n \r\n *will be displayed as...*<br/><br/>\r\n \r\n <samp>Step - 1: ...<br/>Step 2: ...<br/><br/></samp>\r\n \r\n *...on your console.*\r\n</td>\r\n</tr>\r\n</table>\r\n</details>" - CSPU5_U3L16 Mad Lib Student Setup_markdown_instruction: "# Back to Mad Libs: - Design Your App\r\nNow that you've had some practice getting user text and - making new strings with it, you're ready to turn your How-to Mad Libs into - an app. To get started, you'll set up the layout. There are two main screens:\r\n\r\n__Screen - 1: Collect User Input__ \r\n- On this screen, you'll use __text labels__ - and __text input__ design elements to set up the different words you want - the user to provide.\r\n- A __Next__ button takes you to Screen 2 to view - the full Mad Libs.\r\n\r\n__Screen 2: View Mad Libs__ \r\n- On this screen, - you'll use the __text area__ design element to create the space where the - user's completed Mad Libs will be displayed.\r\n- A __Play again__ button - takes you to back Screen 1.\r\n<br>\r\n<br>\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Screen - 1:</strong>\r\n</td>\r\n<td>\r\n<strong>Screen 2:</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/ccea092b516047dff82fafa50b47bcc7-image-1447974038265.00.17 - PM.png\" style=\"width:150px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/0f832e6314ad98170a3cddb317d26e41-image-1445898480304.27.45.png\" - style=\"width:151px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n# - Do This:\r\n\r\n- Create the two screens for your app, including the design - elements in each one.\r\n- Requirement: Request at least 3 separate words - from the user on Screen 1.\r\n- Create the event handlers for the __Next__ - and __Play again__ buttons to respond to clicks.\r\n- Use `setScreen` in the - event handlers to get the screen navigation working.\r\n" - CSPU5_U3L16 Mad Lib toUpper_markdown_instruction: "# Why Are You Yelling At - Me?! *toUpperCase* and *toLowerCase*\r\n\r\nThe main functionality of the - Mad Libs app is complete, but there are some finishing touches to add. The - user may type input with random letter capitalization, but the Mad Libs output - string should be consistently capitalized.\r\n\r\n# Do This:\r\n\r\n- Pick - one or more pieces of the user's input text to transform into \"yelling\" - or emphasize by __making it uppercase__ before displaying it.\r\n- For the - other pieces of the user's input text, __make it lowercase__ before displaying - it.\r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nRemember the rules - of updating variables! You can update a variable after first getting its current - value and then doing something with it. <br> Example: `song = song.toUpperCase();`\r\n</details>" - CSPU5_U3L18 comparison operators_markdown_instruction: "# Explore Comparison - Operators with Console.log\r\n\r\n**Your task:** Make each expression evaluate - to **true** by changing only the comparison operator.\r\n\r\nWe can easily - test the results of comparison operators with `console.log`. \r\n\r\n* Run - the code provided - see results in the console debug area below.\r\n* All - of the Boolean expressions currently evaluate to `false`.\r\n* **Modify the - code** so they all evaluate to `true`\r\n* **Change only the operator**\r\n\r\nExample:\r\n\r\n* - `(3 > 4)` evaluates to **false**...\r\n* Change it to `(3 < 4)` (*3 is **less - than** 4*) to make it **true*\r\n\r\n**HINT:** The workspace starts in text - mode because you might find that doing this in text mode is much easier and - faster than dragging out new blocks. You can flip back to block mode if you - like.\r\n" - CSPU5_U3L19 - fix the var name syntax error v2_markdown_instruction: "<!---\r\n# - Debugging Variables\r\n<img src=\"https://images.code.org/18cb0f3b0fc43def369a3329854edc2e-image-1447272068495.png\r\n\" - style=\"float: right; border: solid 1px black; width: 350px\">\r\n\r\nOne - of the most common errors that can happen when you try to run a program is - `Unknown identifer`.\r\nThis is just the computer trying to tell you that - it doesn't recognize something you wrote. Usually it's the name of a variable - or function that you're trying to write and there is a small misspelling.\r\n\r\n**The - computer doesn't hate you :)** It just needs everything to be exact so it - can understand what you're trying to get it to do.\r\n\r\n**App Lab** alerts - you to potential errors in two ways:<img src=\"https://images.code.org/329990c2e51e1e07a16d5e550cf766f0-image-1447272337465.gif\" - style=\"width: 350px; float: right; border: solid 1px black\">\r\n\r\n* Hover - your mouse over the yellow triangles or red squares next to line numbers in - the code to see what they say.\r\n* As usual, the Debug Console will also - tell you about any errors while your program is running. \r\n--->\r\n\r\n# - Do This:\r\nWe've given you some code with some errors in it. Look at the - error messages and try to figure out the problem.\r\n\r\n* **Run the program**.\r\n* - **Locate and fix the error**.\r\n\r\nWhen you get it right the output to the - console should look like this:\r\n\r\n![](https://images.code.org/9c7a8eb5db973f81eb2faa89713d4f30-image-1445477911014.png)\r\n\r\nAs - a reminder, App Lab gives you hints about errors in two ways: \r\n\r\n* Hover - your mouse over the yellow triangles or red squares next to line numbers in - the code to see what they say.\r\n* As usual, the Debug Console will also - tell you about any errors while your program is running. \r\n" - CSPU5_U3L19 - test reassignment of two vars_markdown_instruction: "# Variable - Reassignment - Part 1\r\n\r\nSo far we have only set a variable's value once. But - it's called a *variable* for a reason - its value can change (or vary) throughout - a program. This is useful and necessary for keeping track of things like a - score in a game.\r\n\r\nTo re-assign a value to a variable all you have to - do is maintain the mental model of what's happening:\r\n\r\n * Variables - are containers for information.\r\n * The `=` sign is an instruction to set - the value.\r\n * A series of assignment statements (see example to right) - is a list of instructions to execute one at a time - it's not a series of - equations that define the state of the world.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/066db834ae289ac538609b68c6492c4a-image-1445944263895.png\" - style=\"float: right\">\r\n\r\n * **Make a prediction.**\r\n\r\n The code - on the following screen looks like what is shown at right. Study it and make - a prediction about what will happen when you run the code. What will the values - of `a` and `b` be at the end of the program?\r\n\r\n* **Add `console.log` - statements.** \r\n\r\n Prove it to yourself by adding `console.log` statements - at the end of the program to find out what the value of `a` and `b` are.\r\n - \r\n* **NOTICE:** in the code above, after the variable `a` has been created - using `var`, to change a variable's value, you only need to refer to the - variable by its name. The word `var` only needs to be used once - when the - variable is created for the first time. \r\n\r\n* It's a **common mistake** - to use `var` everytime you want to *use* a variable but just **remember `var` - means CREATE a new variable**. When you create a new variable it will lose - its old value. We'll look at errors related to this later.\r\n\r\n" - CSPU5_U3L19 - three basic ops of variables_markdown_instruction: "# Variables - Toolbox\r\nLet's get started with the most basic example of using and controlling - the computer's memory with variables. The toolbox has a couple of new commands - for working with variables.\r\n\r\nWe've given you some starter code that - does three things:\r\n<table>\r\n<tr>\r\n<td>\r\n<ol>\r\n<li>**Creates** a - variable called `score`</li>\r\n<li> **Assigns** the value *0* to `score`</li>\r\n<li>**Displays** - the value of the `score` to the console (see hint below about quotes) </li>\r\n</ol> - \r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/056a735a96a603e23768d66f0de32961-image-1445462590619.png\" - style=\"width: 350px\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n\r\n# Do This:\r\nYou're - going to add another variable, assign it a value, and then display it to the - console.\r\nUse the starting code as a model for what you need to create now.\r\n<img - src=\"https://images.code.org/72744382133081947777e67a5988d4ea-image-1445462803999.gif\" - style=\"float: right; width: 350px\">\r\n* **Create a new variable** by dragging - out the `var` block.\r\n* **Change the name of the variable** from the default - `x` to `lives` (see animation at right).\r\n* **Set the value of `lives` to - be 3**.\r\n* **Add** `console.log` **messages** to show the value of `lives`.\r\n\r\nThe - output in the debug console should look like this:\r\n \r\n <img src=\"https://images.code.org/6405a3ed95ca3125ea1b2c9ffbdffa94-image-1445349849482.png\" - style=\"border: solid 1px gray\">\r\n<details>\r\n <summary> Debugging Tip: - Displaying values of variables [click to expand]</summary>\r\n **NOTE: To - print the value of a variable you *should not* use quotes.**\r\n Notice - the difference between these two statements: <br>\r\n `console.log(\"score\")`<br>\r\n `console.log(score)`<br>\r\n It's - subtle but important:\r\n <br>\r\n <li>When `console.log` sees quotation - marks it thinks you want to print out the literal characters in the quotes.\r\n <li>When - `console.log` sees something **without quotation marks** it assumes you're - trying to print a variable, and it goes to retrieve its value and displays - that. </li>\r\n \r\n</details>" - CSPU5_U3L19 - variable reassignment challenge pt2_markdown_instruction: "# - Wrapping Up Variables - This is Not Math Class\r\n\r\nHopefully you now understand - the gist of working with variables. The major thing to remember is that every - time you see an `=` sign it means that you are instructing the computer to - set a variable to a new value. \r\n\r\n<img src=\"https://images.code.org/ecced8eb916809f66ac7d555a819c2a6-image-1447803015383.17.43.png\" - style=\"float: right\">\r\nThe example to the right is something that definitely - wouldn't make sense in math class, but you should be able to reason about - it as a piece of code. Because it's code, you can also **insert** statements - to display the value of variables as they change. You don't have to guess!\r\n\r\n# - Do This:\r\n* ** Make a prediction.** \r\n\r\n As usual you should **first** - look at the code given to you and reason about what it does. You should try - to predict what the value of `num` will be after all lines have executed.\r\n\r\n* - ** Insert 3 `console.log` statements.**\r\n\r\n Insert `console.log` statements - into the existing code to display each value of `num` immediately after it's - changed. (The animation below shows how to get started.)\r\n \r\n ![](https://images.code.org/0e425ce1a186d49d230395032f970913-image-1447802992249.19.24 - add console message.gif)\r\n \r\n* **Was your prediction right?**\r\n \r\n - After you figure out the answer, if your prediction was off, try to understand - why. Where was your misunderstanding?\r\n" - CSPU5_U3L19 - write var and string with same name v2_markdown_instruction: "# - Debugging Variables\r\n<img src=\"https://images.code.org/1363b1799cd0f70e383664b4c6359ef4-image-1445479475849.png\" - style=\"float:right; width: 200px\">There is a simple command called `write` - in the UI Controls toolbox that is a fast and easy way to display text in - the app itself. The way you use it is very similar to `console.log`. Let's - debug another problem only using `write` instead of `console.log`. \r\n\r\nYou - may have already run into this problem! But it's worth mentioning again. - To display the value of a variable you *should not* use quotes. Notice the - difference between these two statements - the comments next to each line explains - the differences:\r\n``` \r\n write(\"score\"); // will display the literal - characters s-c-o-r-e\r\n write(score); // will retrieve the value of score - and display it\r\n```\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/a0ff680a245dba5546183e07ebbeaef2-image-1447270477159.png\" - style=\"float: right; width: 250px\">To solve these problems you **should - only add or remove quotation marks**.\r\n* **Run the starter code**\r\n* **Locate - and fix the problems**\r\n\r\n**GOAL:** Make the app display what's shown - at right by only adding or removing quotation marks from the code given.\r\n" - CSPU5_U3L23 Chatbot Conditionals 1_markdown_instruction: "# Adding Intelligence - Using Conditionals\r\n\r\nSo far the digital assistant you created responds - with the same message no matter what the user types. Let's look at how to - make the digital assistant smarter. Let's work on creating a Movie Bot example - before returning to your digital assistant.\r\n\r\nIn the last lesson we learned - about `if`, `else-if`, and `else` statements. These allow us to make decisions. - In the digital assistant we want to make decisions based on keywords. **The - first keywords we want the Movie Bot to respond to are the movie genres: comedy, - romance, action, and horror. **\r\n\r\n**Note: ** Check out the flowchart - below to see the logic we are trying to add. The current portions of the diagram - that we are creating are <mark>highlighted in yellow</mark>.\r\n\r\n# Do This:\r\n\r\n* - **Run the code** to understand what it does.\r\n\r\n* **Add `else-if` statements** - to the `if` to check if the word the user typed matches **action, romance - and horror**. **Note:** Movie Bot will only understand input in the form - of \"comedy\" not \"Comedy\" or \"What is a comedy?\" \r\n\r\n* **Add an `else` - statement** to print a default answer for any other input.\r\n\r\n<img src=\"https://images.code.org/8ec655795042a2a3a22a85f0886f0d21-image-1446067226646.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/8ec655795042a2a3a22a85f0886f0d21-image-1446067226646.png\" - target=\"_blank\">Open diagram in a new tab</a>\r\n" - CSPU5_U3L23 Free Response Getting Started_markdown_instruction: "Siri is a - digital assistant built into Apple's iOS devices, including iPhones and iPads. - Watch the advertisement for Siri, below. \n\n<iframe width=\"637px\" height=\"375px\" - src=\"https://www.youtube.com/embed/8ciagGASro0\" frameborder=\"0\" allowfullscreen></iframe>\n\n<br/>\n__Reflect - on the prompts below:__ \n\n- What types of information does Siri respond - to in the video?\n- What do you think Siri is paying attention to in order - to create these answers?\n" - CSPU5_U3L23 Free Response Wrap Up_markdown_instruction: "Identify a global - problem that a NLP (Natural Language Processing) application could be used - to help solve. \n\n* Describe the problem.\n* Explain how you think a NLP - app could contribute to a solution.\n* Describe how the app would interact - with the user. \n* What would you name the app? \n\n" - CSPU5_U3L24 Chatbot Basic Conditionals_markdown_instruction: "# Digital Assistant - Project\r\n\r\n**Your Digital Assistant Project is back!** Now that you've - learned how to use conditional logic to control your program flow, it's time - to add functionality to the digital assistant you previously designed.\r\n\r\n# - Do This:\r\n\r\n* You should have already created a flowchart to design the - logic for your digital assistant. \r\n* **Use your flowchart to program your - digital assistant so that it \"intelligently\" responds to user input.**\r\n\t* - Feel free to make changes to your existing project in Design Mode, if needed.\r\n* - **Test your program thoroughly** to make sure your digital assistant responds - to user input appropriately.\r\n* Once you're done, **submit your project!**\r\n" - CSPU5_U3L24 introIncludes_markdown_instruction: "# *includes*\r\n<img src=\"https://images.code.org/7373ad2ad98b0d815ce0b8196c2ec177-image-1446070324010.11.43 - PM.png\" style=\"width: 250px; float:right\">\r\n\r\nWe're going to explore - a new function called `includes`. This function can be used to check if one - string appears anywhere inside of another. Just like `toUpperCase` and `toLowerCase` - this function is called using **dot notation**.\r\n\r\n# *includes* Returns - a Boolean\r\n**`includes` is a function that returns a boolean.** In other - words, when the function runs it will **evaulate to either `true` or `false`**. - This function can be used **anywhere you would normally use a boolean expression**.\r\n\r\nYou've - actually **seen a few functions that return a value before this**. `randomNumber` - is a function that returns a number and `getText` is a function that returns - a string. In every case we've used these functions **as if they were the - data type they return (or evaulate to)**. Notice that in block mode these - functions don't have the connectors that other commands do since they will - be used as a piece of data within another function.\r\n\r\n# Do This:\r\n\r\n* - **Read the documentation** for `includes`.\r\n* **Starter code** has been - provided which shows one instance where a string does include a `searchValue` - and one where it does not.\r\n* **Replicate the style** of these commands - to check the rest of questions provided.\r\n* **Create three statements of - your own using `includes`** making use of the `console.log` statements provided.\r\n* - **Once you're comfortable with this command move on.**" - CSPU5_U3L24 Nested Conditionals 1_markdown_instruction: "# Adding *includes* - to the Movie Bot\r\n\r\nIf our Movie Bot is asked a question like \"What is - a good comedy movie?\" it currently won't know how to respond, **even though - the question includes one of its keywords.** By using `includes` we can allow - our Movie Bot to sense if a keyword appears anywhere in the question.\r\n\r\n# - Do This:\r\n\r\n* **Suggestion: Switch to Text Mode.** This will be much easier - in Text Mode.\r\n* **Change all your boolean expressions to use `includes` - instead of `==`**.\r\n* **Test out a couple sentences with your keywords** - to make sure the change worked.\r\n\r\n![](https://images.code.org/0df459c4ccd9b613b23409af7ff5f59e-image-1446139233341.gif)\r\n\r\n**Note: - ** Check out the flowchart below to see the logic we are trying to change.\r\n\r\n\r\n<img - src=\"https://images.code.org/ea8340252f50774c352f58fa7cc12e5c-image-1446069734921.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/ea8340252f50774c352f58fa7cc12e5c-image-1446069734921.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3L24 Nested Conditionals 2_markdown_instruction: "# Nested Conditionals\r\n\r\nThe - way we left the Movie Bot in the last exercise is a little strange to see - as a user. **Currently when the input doesn't have a question mark the Movie - Bot says \"I only respond to questions.\" but it still provides a recommendation**. - We're going to alter our code so that the movie recommendation is only provided - if the user asks a question.\r\n\r\n# Do This:\r\n\r\n* **Nest your movie - genre `if` statements** inside the \"?\" `if` statement so that **a recommendation - is made only if a question was asked**.\r\n* **Remove the \"That's a good - question.\"** output.\r\n* Ensure that **if your input is not a question** - then the response is **I only respond to questions.**\r\n* **Test out a couple - sentences with your keywords** to make sure the change worked.\r\n\r\n**Example - Input --->** | **Output**\r\n---|---\r\nWhat's the best action movie? | The - best action movie is any James Bond movie.\r\nI love comedy | I only respond - to questions.\r\n<br>\r\n**Note: ** Check out the flowchart below to see the - logic we are trying to change.\r\n\r\n<img src=\"https://images.code.org/c319d7ba43112451a6b25aa9475cacb5-image-1446074593924.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/c319d7ba43112451a6b25aa9475cacb5-image-1446074593924.png\" - target=\"_blank\">Open diagram in a new tab</a>" - CSPU5_U3L25 - drag out key event_markdown_instruction: "# *keypress*\r\n\r\nIf - we want to add keyboard input to our apps we'll need to learn about how key - events work in App Lab. To start let's take a closer look at the `onEvent` - block. We already know that event handlers call a function. What we'll see - now is that they also **pass a parameter**. The default name for this parameter - is simply `event` but you can change it to be anything you like. \r\n\r\nThe - `event` parameter is a more complex kind of variable (called an \"Object\") - that we'll learn more about later. For now just know that for both mouse - and keyboard events, the event parameter passes more information about the - event. In the case of key events **you can find out the key(s) that were actually - pressed by using `event.key`**.\r\n\r\n# Do This:\r\n\r\n* Drag out an `onEvent` - block.\r\n* Change the ID to `screen1` and the event type to `keypress`. \r\n\r\n<img - src=\"https://images.code.org/537b5bbef3db62c90155528e6753a00a-image-1447175732347.gif\" - style=\"width: 450px\">\r\n\r\n* Once you hit **Run**, **click on the screen - so that the keystrokes will register**.\r\n* **Type different combinations - of keys** and check out the results in the console. Does every key combination - print to the console? Some keys to try:\r\n * Letter keys\r\n * Number - keys\r\n * Shift key\r\n * Hold shift and letter\r\n * Delete key\r\n * - Left and right arrow keys\r\n * Press and hold a key" - CSPU5_U3L25 - play sound when up key_markdown_instruction: "# Play Sound With - Keys\r\n\r\nYou may have noticed from the last couple of levels that the value - of `event.key` is just a string which is the name of the key. As a result - we can check which key was pressed with a simple conditional statement. For - example to check for the press of the **\"a\"** key we could write `if (event.key - == \"a\")`.\r\n\r\n# Do This:\r\nThe **starter code provided** plays the sound - whenever ANY key is pressed.\r\n\r\n* Use `console.log` to **find out the - value of `event.key` when the up arrow is pressed.**\r\n\r\n* **Add an `if` - statement** so the sound only plays when the when the **up arrow** is pressed." - CSPU5_U3L25 Free Response 3_markdown_instruction: "What is the output of this - code segment?\n\n\tvar phrase = \"I am so\";\n\tvar emotion = \"excited\";\n\tvar - sentence = phrase + \" \" + emotion.toUpperCase() + \"!\";\n\tconsole.log(sentence);\n<br/>\n" - CSPU5_U3L26 AND operator_markdown_instruction: "# AND Operator in Movie Bot\r\n\r\nOn - the last level you may have noticed that if you typed in a question like \"What - is an R rated comedy movie?\" It gives two movie suggestions! It would make - more sense for it to give one suggestion.\r\n\r\nWe could use nested `if` - statements to do this by nesting `if` statements about ratings inside of `if` - statements about genre. However, you might be getting a sinking feeling that - this could become a lot of nested `if` statements very quickly! \r\n\r\n**Instead - let's use the AND operator (`&&`) to check for a genre and a rating at the - same time.** \r\n\r\n<img src=\"https://images.code.org/a9307ead3b147e0a8016f2054f47f5f2-image-1446153610104.png\" - style=\"width: 200px; float:right\">\r\n\r\nBe careful about the order of - the `if` statements. As a general principle you want to check the most specific - conditions before checking more general ones. For example, you want to have - an `if` statement that checks for rating AND genre evaluated before one that - just checks for genre on its own. Having a more general `if` statement checked - first might cut off or prevent more specific conditions from being reached.\r\n\r\nYou - still want your app to give suggestions when just a rating or just a genre - is detected, so keep this principle of ordering in mind. (Try them in the - reverse order if you're interested in seeing what happens :))\r\n\r\n**Note: - ** Check out the flowchart below to see the logic we are trying to add.\r\n\r\n# - Do This:\r\n\r\n* **Try the question \"What is an R rated comedy movie?** - to see the result.\r\n\r\n* **Update the code to give only one movie suggestion - when a genre and a rating are detected in the input.**\r\n\t* Make one set - of `if`, `else-if`, and `else` statements about genre and rating\r\n * - Add conditional statements to check for a comedy movie AND a rating. You could - do this for all the genres but stick to one for now.\r\n\r\n* **Test out a - couple sentences with your keywords** to make sure the change worked.\r\n\r\n<img - src=\"https://images.code.org/e64c26fed584ddbb5e5a62e6800d5e69-image-1455816162662.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e64c26fed584ddbb5e5a62e6800d5e69-image-1455816162662.png\" - target=\"_blank\">Click to open in separate window.</a>" - CSPU5_U3L26 OR operator_markdown_instruction: "# OR Operator in Movie Bot\r\n\r\nLet's - try to check for the keywords related to questions (\"who\", \"what\", \"where\", - \"when\", \"why\", \"how\", and \"?\") to decide if the user asked a question. - You could do this with a chain of `if-else-if` statements, but it would not - be very efficient. \r\n\r\nInstead let's use a **series of OR operators (`||`)** - to check whether \"who\", \"what\", \"where\", \"when\", \"why\", \"how\" - or \"?\" show up in the user input. \r\n\r\n**Note: ** We've updated the - the flowchart below to show the logic we are trying to add to the initial - question.\r\n\r\n# Do This:\r\n\r\n* **Update the `if` statement** to check - if **\"who\" OR \"what\" OR \"where\" OR \"when\" OR \"why\" OR \"how\" OR - \"?\"** have been typed in by the user.\r\n\r\n* **Test out a couple sentences - with your keywords** to make sure the change worked.\r\n\r\n<img src=\"https://images.code.org/6104c7fd0ecd31010d12be79bc350831-image-1446495141539.png\" - style=\"width=500px\">\r\n" - Data Visualizations 101_markdown_instruction: "## Data Visualization 101: How - to design charts and graphs\r\n\r\nIn lesson 10, students evaluate a curated - set of visualizations based on how effective they are at clearly and accurately - communicating what they're representing. After they've done this evaluation - for themselves, they explore this resource, which formally introduces the - names of the different types of charts they've been seeing and goes into - detail about what types of data each chart can represent most appropriately, - as well as best practices for designing each type of chart.\r\n\r\n" - Designing Assessment Questions_markdown_instruction: "## Designing Test Questions\r\n\r\nThe - following resource is from the University of North Carolina Charlotte's Center - for Teaching and Learning. In it you will find a breakdown of the uses, tradeoffs - for common assessment types, along with tips for writing good items.\r\n\r\n\r\n\r\n" - Discovery learning definition and history_markdown_instruction: "The following - link is a resource that shows some of the history behind discovery learning: - " - Discovery learning techniques_markdown_instruction: "The following link is - a resource that shows the principles and techniques of discovery learning: - " - 'Discovery Learning: Definition and History_markdown_instruction': "The following - link is a resource that shows some of the history behind discovery learning: - " - 'Discovery Learning: Principals and Techniques_markdown_instruction': "The - following link is a resource that shows the principles and techniques of discovery - learning: " - 'Discovery Learning: Principles and Techniques_markdown_instruction': "The - following link is a resource that shows the principles and techniques of discovery - learning: " - ECS Unit 2 Challenge Selection_markdown_instruction: "# Challenge Overview - > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your - challenge in the text box below.\r\n\r\n- Day 7-9: CSDT Cornrow Braiding\r\n- - Day 10-12: Binary\r\n- Day 13-14: Linear and Binary Search (Tower Building) - \r\n- Day 15-16: Sorting \r\n- Day 17: Minimal Spanning Trees\r\n- Day 18-21: - Unit Final Project\r\n\r\nNow that you've selected a lesson, head to the - forum and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### - <a href=\"http://forum.code.org/c/ecs/ecs-unit2\" target=_blank>Forums <i - class=\"fa fa-external-link\" /></a>" - ECS Unit 2 Challenge Submission_markdown_instruction: "# Share Out and Submit - > Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the - forum** and share: \r\n\r\n- Any data visualization or other artifact you - created in doing the \r\n - Use the “SHARE” button in code studio to get a - link to your program: \r\n- The assessment question or extending learning - activity that you produced for this lesson.\r\n- Notes for others who are - going to teach this lesson. This should include: \r\n - Advice for someone - who is going to teach this lesson (consider what was challenging about doing - the lesson, what you think students will struggle with, etc).\r\n - What ideas - do you have about how to structure and teach this lesson? what modifications - do you plan to make to the lesson?\r\n - What additional resources (if any) - might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit2\" - target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others - have posted! \r\nOnce you've posted your own challenge results, check out - what others have posted! Be sure to click through the other lessons as well - and read through their work. Remember, a big goal here is to learn from one - another so let people know when your find their suggestions helpful, or provide - your own ideas when you come across questions. Be sure to use the **heart** - feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a dirct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECS Unit 3 Challenge Selection_markdown_instruction: "# Challenge Overview - > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your - challenge in the text box below.\r\n\r\nHTML Beginners:\r\n\r\n- Day 3-4,5: - Basic HTML - Paragraph, Header, Strong, and EM Tags\r\n- Day 6--7: HTML - - Images\r\n- Day 14: HTML - Links\r\n\r\nCSS Beginners:\r\n\r\n- Day 8-10: - Basic CSS \r\n\r\nMore Experienced with HTML and CSS:\r\n\r\n- Day 11-13: - HTML and CSS \r\n- Day 17-19: HTML and CSS: Create Your Own Webpage\r\n- Day - 22-25: Unit Final Project\r\n- Day 18-21 Final Unit Project\r\n\r\n\r\nNow - that you've selected a lesson, head to the forum and **share which lesson - you plan to complete** for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit3\" - target=_blank>Forums <i class=\"fa fa-external-link\" /></a>" - ECS Unit 3 Challenge Submission_markdown_instruction: "# Unit 3 Challenge > - Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the forum** - and share: \r\n\r\n- Any data visualization or other artifact you created - in doing the \r\n - Use the “SHARE” button in code studio to get a link to - your program: \r\n- The assessment question or extending learning activity - that you produced for this lesson.\r\n- Notes for others who are going to - teach this lesson. This should include: \r\n - Advice for someone who is going - to teach this lesson (consider what was challenging about doing the lesson, - what you think students will struggle with, etc).\r\n - What ideas do you - have about how to structure and teach this lesson? what modifications do you - plan to make to the lesson?\r\n - What additional resources (if any) might - be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit3\" - target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others - have posted! \r\nOnce you've posted your own challenge results, check out - what others have posted! Be sure to click through the other lessons as well - and read through their work. Remember, a big goal here is to learn from one - another so let people know when your find their suggestions helpful, or provide - your own ideas when you come across questions. Be sure to use the **heart** - feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECS Unit 4 Challenge Selection_markdown_instruction: "# Challenge Overview - > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your - challenge in the text box below.\r\n\r\nNew to Programming?\r\n\r\n- Day 2-3: - Scratch - Name Project\r\n- Day 4: Scratch - Knock Knock Joke\r\n- Day 5-6: - Scratch - Moving Sprites \r\n\r\nNew to Scratch:\r\n\r\n- Day 7-8: Scratch - - Event Driven Programming\r\n- Day 9: Scratch - Broadcast Roleplay\r\n- Day - 10-13: Scratch - Broadcasting\r\n\r\nSome Experience with Scratch and Programming:\r\n\r\n- - Day 18, 19: Rock Paper Scissors and Timer\r\n- Day 20-23: Scratch - Timing - Game\r\n- Day 25-30: Unit Final Project\r\n\r\n\r\n\r\nNow that you've selected - a lesson, head to the forum and **share which lesson you plan to complete** - for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit4\" - target=_blank>Forums <i class=\"fa fa-external-link\" /></a>" - ECS Unit 4 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share - your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any - data visualization or other artifact you created in doing the \r\n - Use the - “SHARE” button in code studio to get a link to your program: \r\n- The assessment - question or extending learning activity that you produced for this lesson.\r\n- - Notes for others who are going to teach this lesson. This should include: - \r\n - Advice for someone who is going to teach this lesson (consider what - was challenging about doing the lesson, what you think students will struggle - with, etc).\r\n - What ideas do you have about how to structure and teach - this lesson? what modifications do you plan to make to the lesson?\r\n - What - additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### - <a href= \"http://forum.code.org/c/ecs/ecs-unit4\" target=_blank> Head to - the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce - you've posted your own challenge results, check out what others have posted! - Be sure to click through the other lessons as well and read through their - work. Remember, a big goal here is to learn from one another so let people - know when your find their suggestions helpful, or provide your own ideas when - you come across questions. Be sure to use the **heart** feature on the forum - to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECS Unit 5 Challenge Selection_markdown_instruction: "# What's your Challenge? - \r\n\r\n## Enter the lesson you selected for your challenge in the text box - below.\r\n\r\n- Day 1 - 3: Room data project, set up final project\r\n- Day - 4 - 5: Developing research questions\r\n- Day 6 - 7: Building group norms\r\n- - Day 8: Check in Day\r\n- Day 9 - 11: Maps, identifying variables, subsetting - data, sorting data, frequency of types.\r\n- Day 12: Bubble Charts\r\n- Day - 13: Review: Bubble Charts\r\n- Day 14 - 15: Bar Plots\r\n- Day 16: Mosaic - Plots\r\n- Day 17: Review: Bar and Mosaic Plots\r\n- Day 18 - 20: Mean, Median, - Minimum, Maximum, Histograms, Box Plots\r\n- Day 21: Review: Mean, Median, - Minimum, Maximum\r\n- Days 22 - 24: Filtering Text data (remove punctuation, - remove case, remove stop words, stemming), Analyzing word counts.\r\n- Day - 25: Review: Text Data\r\n- Day 26 - 27: Incorporate data techniques into - final project\r\n- Day 28 - 29: Build project presentations\r\n- Day 30: Present - final project\r\n\r\nNow that you've selected a lesson, head to the forum - and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### - <a href=\"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank>Forums <i - class=\"fa fa-external-link\" /></a>" - ECS Unit 5 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share - your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any - data visualization or other artifact you created in doing the \r\n - Use the - “SHARE” button in code studio to get a link to your program: \r\n- The assessment - question or extending learning activity that you produced for this lesson.\r\n- - Notes for others who are going to teach this lesson. This should include: - \r\n - Advice for someone who is going to teach this lesson (consider what - was challenging about doing the lesson, what you think students will struggle - with, etc).\r\n - What ideas do you have about how to structure and teach - this lesson? what modifications do you plan to make to the lesson?\r\n - What - additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### - <a href= \"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank> Head to - the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce - you've posted your own challenge results, check out what others have posted! - Be sure to click through the other lessons as well and read through their - work. Remember, a big goal here is to learn from one another so let people - know when your find their suggestions helpful, or provide your own ideas when - you come across questions. Be sure to use the **heart** feature on the forum - to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECS Unit 6 Challenge Selection_markdown_instruction: "# Unit 6 Challenge Selection\r\n\r\n## - Enter the lesson you selected for your challenge in the text box below.\r\n - \r\nFrom the curriculum\r\n\r\n- Day: 1 What is a robot / what makes a computer - robotic?\r\n- Days: 2-3 Evaluate robot body designs and algorithms that control - robot behavior\r\n- Day: 4 Set up the Lego kit\r\n- Day: 5 Build robot base\r\n- - Day: 6-7 Introduce NXT brick features\r\n- Day: 8-9 Introduce NXT software\r\n- - Day: 10-13 Program robot using tutorials (using sensors for input)\r\n- Day: - 14 Describe RoboCup & RoboCupJunior\r\n- Day: 15 Human robot tic-tac-toe\r\n- - Days: 16-18 Program dancing robot\r\n- Days 19-23 Program rescue robot\r\n- - Days 24-33 Final projects and presentations\r\n\r\nAlternative Topics\r\n\r\n- - Online simulations\r\n- Physical computing options\r\n- Projects and portfolios\r\n\r\nNow - that you've selected a challenge topic, **share what you plan to do** for - your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit6\" - target=_blank>Head to the Forums <i class=\"fa fa-external-link-square\" /></a>" - ECS Unit 6 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share - your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any - data visualization or other artifact you created in doing the \r\n - Use the - “SHARE” button in code studio to get a link to your program: \r\n- The assessment - question or extending learning activity that you produced for this lesson.\r\n- - Notes for others who are going to teach this lesson. This should include: - \r\n - Advice for someone who is going to teach this lesson (consider what - was challenging about doing the lesson, what you think students will struggle - with, etc).\r\n - What ideas do you have about how to structure and teach - this lesson? what modifications do you plan to make to the lesson?\r\n - What - additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### - <a href= \"http://forum.code.org/c/ecs/ecs-unit6\" target=_blank> Head to - the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce - you've posted your own challenge results, check out what others have posted! - Be sure to click through the other lessons as well and read through their - work. Remember, a big goal here is to learn from one another so let people - know when your find their suggestions helpful, or provide your own ideas when - you come across questions. Be sure to use the **heart** feature on the forum - to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSPD Binary Odometer_markdown_instruction: "# Binary Odometer Widget\r\n\r\nThis - widget was created as part of the Code.org Computer Science Principles class. - It is a great additional resource for teaching binary!\r\n" - ECSPD course goals_markdown_instruction: "# Documenting Your Course Goals\r\n\r\n## - Now that you know more about the ECS curriculum, let's consider your goals\r\n\r\n**What - are your goals for your ECS class?** *These goals will change over time, and - we'll revisit this your response as we go through PD so we can check in on - how we're progressing towards those goals.*\r\n\r\n**NOTE:** remember you - can change the size of the text box by clicking and dragging the bottom-right - corner of the box.\r\n" - ECSPD Fence post Q1_markdown_instruction: "## Fence Post Problem:\n\nYou need - to build one side of a fence that is 12 yards long. This fence will be built - with fence posts and rails that connect one fence post to another. If each - fence post is 1 yard away from the next fence post, how many fence posts will - be needed for this side of the fence? How many fence posts will be needed - for a side of a fence that is N (where N > 0) yards long?\n" - ECSPD Handshake Q1_markdown_instruction: "## Handshake Problem #1:\n\nAssume - there are 20 people in a room, including you. You must shake hands with everyone - else in the room. How many hands will you shake? If there are N (where N>0) - people in the room, how many hands will you shake?\n" - ECSPD impact in program_markdown_instruction: "\n\n#### What connections do - you think might exist between the ideas covered in the videos you just watched - and the units of ECS that you learned about earlier?\n" - ECSPD Online U1D1-2 Assessment 1_markdown_instruction: "Did you have coffee - this morning? If you did, odds are you used a computer. If you made the coffee - yourself, your coffee maker probably had a digital clock or a programmable - timer. If you bought it, the barista likely used a card reader with an electronic - cash register to take your payment. Think through your day and record how - many computers you used before sitting down in front of a desktop or a laptop - (or whatever device you are using right now). Don't forget the computers - in your car, your refrigerator, your alarm clock...\n" - ECSPD Online U1D1-2 Reflection_markdown_instruction: "You have experienced - the lesson both online and on the first day of the in-person PD. Additionally, - you have watched a video defining computers. What have you learned that you - can take back to your classroom? Use this space to record your ideas for this - lesson. You will have a chance to share your ideas and questions in a forum - in the following level.\n" - ECSPD Online U1D10 Reflection_markdown_instruction: "You have experienced the - lesson both online and on the first day of the in-person PD. Additionally, - you have watched a TED talk about the representation of data. What have you - learned that you can take back to your classroom? Use this space to record - your ideas for this lesson. You will have a chance to share your ideas and - questions in a forum in the following level." - ECSPD Online U1D11-14 Reflection_markdown_instruction: "You have experienced - part of this lesson online and have investigated other design tools. What - have you learned that you can take back to your classroom? How will you tackle - this lesson's unique challenges? Use this space to record your ideas for - this lesson. You will have a chance to share your ideas and questions in a - forum in the following level.\n" - ECSPD Online U1D15-16 Reflection_markdown_instruction: "You have experienced - the lesson on the first day of the in-person PD and have watched a TED talk - about the extent of the use of algorithms in the world. What have you learned - that you can take back to your classroom? Use this space to record your ideas - for this lesson. You will have a chance to share your ideas and questions - in a forum in the following level." - ECSPD Online U1D17-19 Assessment_markdown_instruction: "Take some time to look - over the lesson and the unplugged activity. Think about your classroom and - the space you have available to run the Turing Test Activity. How are you - planning to set up your classroom to best facilitate the Turing Test Activity?" - ECSPD Online U1D17-19 Reflection_markdown_instruction: "This is the last lesson - in the unit. How does it combine what was covered previously in the unit? - Now that you have taken time to examine this lesson, what have you learned - that you can take back to your classroom? Use this space to record your ideas - for this lesson. You will have a chance to share your ideas and questions - in a forum in the following level." - ECSPD Online U1D3-4 Reflection_markdown_instruction: "You have experienced - part of this lesson online and studied the components of computers. What have - you learned that you can take back to your classroom? Use this space to record - your ideas for this lesson. You will have a chance to share your ideas and - questions in a forum in the following level. " - ECSPD Online U1D5-7 Reflection_markdown_instruction: "You have experienced - this lesson in person and have examined additional resources online. What - have you learned that you can take back to your classroom? Use this space - to record your ideas for this lesson. You will have a chance to share your - ideas and questions in a forum in the following level." - ECSPD Online U1D8-9 Assessment_markdown_instruction: "List three points either - from the articles or the lesson plan that you would want to discuss with your - class. Describe one strategy you plan to use to facilitate discussion." - ECSPD Online U1D8-9 Reflection_markdown_instruction: "You have experienced - part of this lesson online and have read a few articles regarding the impact - of computers and the internet on communication. What have you learned that - you can take back to your classroom? Use this space to record your ideas for - this lesson. You will have a chance to share your ideas and questions in a - forum in the following level." - ECSPD Online U1Reflection_markdown_instruction: "## Telling the story of Unit - 1\n\nNow that you've explored all of the lessons and resources from Unit - 1, how would you describe the learning that happens? \n\nIn a few sentences, - tell the story of Unit 1, how the lessons relate and build off one another, - and what students will walk away with.\n" - ECSPD PD goals_markdown_instruction: "***Now that you've learned more about - the ECS Professional Development, let's consider your goals***\n\n<br>\n<br>\n__What - are your personal goals for your ECS PD experience (what do you hope to accomplish, - how do you hope to grow)?__ *NOTE: These goals might change over time, and - we'll revisit this your response as we go through the course so we can check - in on how we're progressing towards those goals.*\n\n\n" - ECSPD Personal Problem Solving Strategies_markdown_instruction: "# Problem - Solving Strategies\n### Make a list of Problem Solving Strategies\n\nWe have - all learned different problem solving strategies through out our lives. Some - work all the time and others only in certain situations. Make a list of all - the problem solving strategies you can think of. You will continue to add - to this list over the course of this unit PD. You can also share strategies - or find new strategies on the forum.\n\n### <strong><a href=\"http://forum.code.org/t/pd-discussion-topic-problem-solving-strategies/2086/1\" - target=\"_blank\">Problem Solving Strategies>></a></strong>\n<br>\n\n**Each - time you see this page pop up think about the problem solving strategies you - and your students will need for the current lesson. Then add to the list if - you think of new things.**\n" - ECSPD program overlap_markdown_instruction: "\n#### Now that you've read more - about the ECS program, what relationship do you see between the curriculum - and Professional Development? What aspects of the two piece of the program - seem most important or interesting to you?\n" - ECSPD strategies_markdown_instruction: "# Classroom Strategies Journal\r\n\r\nThis - space is your **digital journal for documenting strategies** you've picked - up during Professional Development and while teaching the course. We'll revisit - this in online pd for each unit, and you should refer back to it while planning - lessons to remind yourself of strategies you want to try in class. \r\n\r\n\r\n" - ECSPD your goals_markdown_instruction: "__What are your goals for your ECS - class?__ *These goals will change over time, and we'll revisit this your - response as we go through the course so we can check in on how we're progressing - towards those goals.*\n" - ECSPD3-u5 pick a challenge_markdown_instruction: "# Challenge Overview > What's - your Challenge? \r\n\r\n## Enter the lesson you selected for your challenge - in the text box below.\r\n\r\n- Day 1 - 3: Room data project, set up final - project\r\n- Day 4 - 5: Developing research questions\r\n- Day 6 - 7: Building - group norms\r\n- Day 8: Check in Day\r\n- Day 9 - 11: Maps, identifying variables, - subsetting data, sorting data, frequency of types.\r\n- Day 12: Bubble Charts\r\n- - Day 13: Review: Bubble Charts\r\n- Day 14 - 15: Bar Plots\r\n- Day 16: Mosaic - Plots\r\n- Day 17: Review: Bar and Mosaic Plots\r\n- Day 18 - 20: Mean, Median, - Minimum, Maximum, Histograms, Box Plots\r\n- Day 21: Review: Mean, Median, - Minimum, Maximum\r\n- Days 22 - 24: Filtering Text data (remove punctuation, - remove case, remove stop words, stemming), Analyzing word counts.\r\n- Day - 25: Review: Text Data\r\n- Day 26 - 27: Incorporate data techniques into - final project\r\n- Day 28 - 29: Build project presentations\r\n- Day 30: Present - final project\r\n\r\nNow that you've selected a lesson, head to the forum - and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### - <a href=\"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank>Forums <i - class=\"fa fa-external-link\" /></a>" - ECSPD3-u5 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSPD3-u5 submit_markdown_instruction: "# Share Out and Submit > Submit Link\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nYou've just shared your Challenge - work on the forum. If you would like to receive payment for this online PD, - please submit a link to that forum post here so we can review! \r\n\r\nIn - order to get a direct link to your post, click the link icon directly under - your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSPD3-u6 pick a challenge_markdown_instruction: "# Unit 6 Challenge > What's - your Challenge?\r\n\r\n## Enter the lesson you selected for your challenge - in the text box below.\r\n \r\nFrom the curriculum\r\n\r\n- Day: 1 What is - a robot / what makes a computer robotic?\r\n- Days: 2-3 Evaluate robot body - designs and algorithms that control robot behavior\r\n- Day: 4 Set up the - Lego kit\r\n- Day: 5 Build robot base\r\n- Day: 6-7 Introduce NXT brick features\r\n- - Day: 8-9 Introduce NXT software\r\n- Day: 10-13 Program robot using tutorials - (using sensors for input)\r\n- Day: 14 Describe RoboCup & RoboCupJunior\r\n- - Day: 15 Human robot tic-tac-toe\r\n- Days: 16-18 Program dancing robot\r\n- - Days 19-23 Program rescue robot\r\n- Days 24-33 Final projects and presentations\r\n\r\nAlternative - Topics\r\n\r\n- Online simulations\r\n- Physical computing options\r\n- Projects - and portfolios\r\n\r\nNow that you've selected a challenge topic, **share - what you plan to do** for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit6\" - target=_blank>Head to the Forums <i class=\"fa fa-external-link-square\" /></a>" - ECSPD3-u6 submit forum link_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link to your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review!\r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below): \r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSU2 Challenge Submission_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the forum** - and share: \r\n\r\n- Any data visualization or other artifact you created - in doing the \r\n - Use the “SHARE” button in code studio to get a link to - your program: \r\n- The assessment question or extending learning activity - that you produced for this lesson.\r\n- Notes for others who are going to - teach this lesson. This should include: \r\n - Advice for someone who is going - to teach this lesson (consider what was challenging about doing the lesson, - what you think students will struggle with, etc).\r\n - What ideas do you - have about how to structure and teach this lesson? what modifications do you - plan to make to the lesson?\r\n - What additional resources (if any) might - be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit2\" - target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others - have posted! \r\nOnce you've posted your own challenge results, check out - what others have posted! Be sure to click through the other lessons as well - and read through their work. Remember, a big goal here is to learn from one - another so let people know when your find their suggestions helpful, or provide - your own ideas when you come across questions. Be sure to use the **heart** - feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit - the Link for your Forum Post for Review\r\n\r\nIf you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a dirct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSU3 Challenge Submission_markdown_instruction: "# Share Out and Submit > - Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a dirct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - ECSU4 Challenge Submission fin_markdown_instruction: "# Share Out and Submit - > Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've - just shared your Challenge work on the forum. If you would like to receive - payment for this online PD, please submit a link to that forum post here so - we can review! \r\n\r\nIn order to get a direct link to your post, click the - link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" - Escape Room Example_markdown_instruction: "# Room Escape\r\n\r\nIn today's - workshop you are going to be working on making a room escape app! This level - has an example app that you should play around with to get the feel for what - you will be creating.\r\n\r\n# Do This\r\n\r\n* Click RUN to start the app\r\n* - Try to find the key that will open the door." - Eval Booleans 1_markdown_instruction: "Boolean operators (like >, <, =) allow - us to compare different values, returning either *true* or *false*. Click - \"Run\" to see how this expression evaluates." - Eval Booleans 2_markdown_instruction: "Can you set the values so that this - expression evaluates as *true*?" - Eval Booleans 3_markdown_instruction: "The `string-length` function returns - the number of characters in a string (including spaces!) - make this code - evaluate to *true*." - Eval Booleans 4_markdown_instruction: "Here's an Evaluation Block called `and` - - it returns *true* if both of its parameters are *true*, otherwise it returns - *false*. Edit the x variable so that this expression returns *true*." - Eval Booleans 5_markdown_instruction: "This `or` block returns *true* if either - of its parameters is *true*. Otherwise, if both parameters are *false* it - will return *false*. Set the y variable to a value that will cause this expression - to return *false*." - Eval Booleans 6_markdown_instruction: "Here's one more boolean block called - `not`. This block flips *true* to *false*, or *false* to *true*. If you wrap - this block of code in a NOT block, it should return *true* (because we are - asking if the two expressions do NOT produce equal values)." - Eval Booleans Free Play_markdown_instruction: "Free Play: Try out some creations - of your own using Booleans." - Eval Cond 4_markdown_instruction: "We can use the `string=?` function to make - conditionals that respond to text input. Here's a function called `green - shape` that takes a string for the type of shape. Complete the conditions - so that the correct solid green shape is returned when the function is run - with \"circle\", \"triangle\", \"square\", or \"rectangle\"." - Eval Cond 5_markdown_instruction: "Here's a similar function `red shape` with - an additional variable for size. Complete the conditionals so the correct - solid red image of a given size is drawn for \"circle\", \"triangle\", and - \"star\"." - Eval Contracts 4_markdown_instruction: "The `scale` function returns an image - that is either larger or smaller than the input image. Try scaling this circle - by a factor of 10. How is the returned image different than if you'd just - made a circle of that size in the first place?" - Eval Contracts A_markdown_instruction: "Use the `star` function to produce - a solid red star with a 60 pixel radius" - Eval Contracts C_markdown_instruction: "Check out the `rotate` function - can - you use it to rotate this 90 pixel green square by 45 degrees?" - Eval Contracts E_markdown_instruction: "Try using the `text` function to write - this \"Hello, world!\" in teal at size 40." - Eval Define Funcs 1_markdown_instruction: "Here's a new function called `green-triangle` - that takes a single Number for size and produces a green triangle. Use the - new function to create a 125 pixel green triangle" - Eval Define Funcs 2_markdown_instruction: "Let's look inside that `green-triangle` - function to see how it works. Can you modify it so that the `green-triangle` - function always draws outlined green triangles? **Don't forget to change - the examples too!**" - Eval Define Funcs 3_markdown_instruction: "Here's the start of another new - function called `purple-circle` with a domain of one Number (the radius) and - a range of Image. The body of the function is broken though, it always draws - a circle of 50 pixel radius instead of using the radius parameter. Replace - the current Number with the `radius` block from the domain.\r\n\r\nWhen you've - fixed the function, test your new function with a 150 pixel radius." - Eval Define Funcs 4_markdown_instruction: "Create a new function called `aqua-star` - that has a Domain of a single Number for radius and returns an aqua star of - the given radius. Run your new function with a radius of 75." - Eval Define Funcs 5_markdown_instruction: "Let's use that `aqua-star` function - to make a row of different sized stars. From left to right, the stars should - have radii of 25, 50, and 75." - Eval Define Funcs Test_markdown_instruction: "Here's the start of another - new function called `purple-circle` with a domain of one Number (the radius) - and a range of Image. The body of the function is broken though, it always - draws a circle of 50 pixel radius instead of using the radius parameter. Replace - the current Number with the `radius` block from the domain.\r\n\r\nWhen you've - fixed the function, test your new function with a 150 pixel radius." - Eval Defining Vars Free Play 1_markdown_instruction: "Free Play: We've provided - a function that fills your screen with `my-image`. Change `my-image` to see - what patterns you can make." - Eval Design Recipe .1_markdown_instruction: "Here's a Design Recipe for a - function called `square-circle` with domain Number String and range Image. - Click Edit to write the function definition (you will see two examples provided)." - Eval Design Recipe 3_markdown_instruction: "The Design Recipe for `wide-rect` - already has a contract and one example. Can you write a second example and - then complete the definition? The `wide-rect` function should produce a rectangle - of given color that is twice as wide as it is high." - Eval Design Recipe 4_markdown_instruction: "Use the Design Recipe to create - a function `starburst`. When given a number of points and an outer radius, - `starburst` returns a yellow radial star with given points, and an inner radius - that is half the outer radius." - Eval Design Recipe 5_markdown_instruction: "Write a function `striped-flag` - that takes two colors and produces a flag that is 250 pixels wide, 150 pixels - tall, with three even horizontal stripes of given colors, in the order color2, - color1, color2." - Eval Design Recipe 6_markdown_instruction: "Write a function `large-polygon` - that should output a solid polygon of given sides and color that takes up - most of the window, regardless of the number of sides. To make sure that the - polygon doesn't get too large as you increase the number of sides, side length - should be inversely proportional to side number, with a length of **(800/sides)**." - Eval Design Recipe Free Play_markdown_instruction: "Free Play: Use the Design - Recipe to create some functions of your own design" - Eval Strings Images .1_markdown_instruction: "So far we've only dealt with - a single type of data, Numbers. Another type of data is a String, which is - any combination of letters, numbers, or other characters wrapped in quotation - marks. Run the String \"Hello, world!\" and see what happens." - Eval Strings Images .2_markdown_instruction: "The `string-append` function - takes two Strings and returns a single combined String. Add a String \"Universe\" - to the second argument of `string-append`." - Eval Strings Images 1_markdown_instruction: "The third type of data we're - going to use is an Image. This `star` function takes in a Number and two Strings, - and it evaluates to an Image. Use this function to make a solid red star with - radius of 100." - Eval Strings Images 2_markdown_instruction: "Free Play: Every Evaluation Block - is color-coded to let you know which data type it returns and which types - it needs for its parameters. The last parameter of the triangle function takes - a String that controls its color - try some different colors to see what works." - Eval Strings Images 3_markdown_instruction: "Some functions can only take a - specific set of Strings, such as the second argument of this `circle` function, - which controls its style. Draw this orange outline circle using the special - String block with a dropdown to make sure you only use valid styles." - Eval Strings Images 4_markdown_instruction: "Try using the `rectangle` block - to draw this solid, red rectangle - it is 175 pixels wide and 100 pixels tall." - Eval Strings Images 5_markdown_instruction: "Try using this new Evaluation - Block called `overlay` to place a 100 pixel white triangle on top of a 200 - pixel red circle." - Eval Strings Images 6_markdown_instruction: "Use the overlay block to place - a 75 pixel radius yellow star on top of a 150 pixel long blue square." - Eval Strings Images 7_markdown_instruction: "The `offset` block lets you move - an image relative to where it would normally be placed. Use this block to - offset the square by 100 pixels on the y-axis." - Eval Strings Images 8_markdown_instruction: "Here's a different kind of star - block - it's called `radial-star` and it allows you to draw stars with any - number of points! Use it to create a 7 point solid orange star with an inner - radius of 75 pixels and an outer radius of 175 pixels." - Eval Strings Images Free Play_markdown_instruction: "Free Play: Explore the - blocks available to create something interesting. Make sure to share your - favorite creations." - Final Personal Website_markdown_instruction: "# Personal Website\r\n\r\nThis - is it! You have been working on your Personal Website for the whole unit. - Put the finishing touches on it and submit it to your teacher! Remember to - use the problem solving process as your guide in preparing your final product.\r\n\r\n# - Do This\r\n\r\n* Define: Read the rubric so you know what is expected\r\n* - Plan: Decide what you still need to work on and put those things in priority - order\r\n* Try: Implement your improvements to your personal website.\r\n* - Reflect: Get feedback from a classmate and decide what of that feedback to - act on.\r\n\r\nDon't forget to take a screenshot of your home page and save - it somewhere on your computer so you can find it later (*Need help with how - to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website - </a>.*)" - Final Room Escape App_markdown_instruction: "# You've done it!\r\n\r\nYou - made a room escape! Now its time to customize it. \r\n\r\nConsider:\r\n\r\n* - Adding more rooms\r\n* Adding more things users can interact with in the rooms\r\n* - Add more style to the rooms" - Finalize Your Chaser Game v.1_markdown_instruction: "# Add an Image and Make - a Chaser Game!\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" - style=\"float: right\">\r\n\r\n**Now You Try it** - add an image to your app - and modify the code so that the image jumps around the screen rather than - the button. Your little game should have:\r\n\r\n* **Text** on the top of - the screen with a title or instructions for what to do.\r\n* **An image** - that \"runs away\" (moves randomly) based on some mouse event.\r\n\r\n**Tips:**\r\n - * **Hint** - the easy way to do this is to simply change the IDs in `onEvent` - and `setPosition` to respond to the image instead of the button.\r\n * Remove - the button from the app after the image is working. We don't need it anymore.\r\n - * Change the label text so that the instructions make sense for your game.\r\n - * The game is even more fun if you use the `mouseover` event instead of `click`\r\n\r\n**Optional - Extensions**:\r\n * Make the background interesting\r\n * Add another image - that runs away.\r\n * See what happens with the commands `hideElement` and - `showElement`\r\n * Have two UI elements where interacting with one controls - or does something to the other.\r\n\r\n**Finalize your \"Chaser Game v.1\"** - and click Finish.\r\n\r\n * **Note**: We'll revisit this game in the next - lesson where you can improve it. This is **just version 1**\r\n\r\n" - Food Fight!_markdown_instruction: "We've added one last function for you.\r\n<hr/>\r\n\r\n<h4>\r\nUse - an `if` statement to program your game to call the `level_up` function only - when `player_score` becomes greater than a certain number.<br/><br/>\r\n</h4>\r\n<i>For - example: `player_score` > 6</i>\r\n\r\n\r\n<hr/>\r\n<i>Play the game, and - make it to level 3 to move to the next puzzle.</i>" - Formative versus Summative Assessment_markdown_instruction: "The following - link is a resource that provides definitions and examples of formative and - summative assessments:" - Frequency Analysis_markdown_instruction: "# Break a random substitution cipher!\r\n\r\nMessages - encrypted with the **Caesar cipher** are very easy to crack. What if instead - of shifting the whole alphabet, we mapped every letter of the alphabet to - a random different letter of the alphabet? This is called a **random substitution - cipher**.\r\n\r\nIn this version of the tool, you'll be interacting more - with the graphs that show letter frequency. By analyzing the frequency of - the letters in the encrypted input message compared to the frequency of letters - in a typical piece of English prose, you can start to narrow in on what some - of the letter mappings might be. Did you know that *'E'* is the most common - letter used in the English language? Maybe the most common letter in your - encrypted text maps to the letter *'E'*, but maybe not! You'll have to - do a bit of guess and check to see if that substitution makes sense.\r\n\r\n\r\n# - Do this\r\n- Load the **Sample message (hard)** from the message dropdown. - This will load a message that has been encrypted with a random substitution - cipher. \r\n![](https://images.code.org/04c6230c9607110126581c298bc09183-image-1443569176380.gif)\r\n\r\n- - You will crack the message by guessing what each letter of the alphabet contained - in the original ciphertext should be changed to. You can do so by dragging - the blue letters of the alphabet directly underneath the orange letter you - want changed in the original ciphertext. Letters that have been changed using - your guesses will no longer be highlighted orange in the message window on - the left.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n- - Play with some of the sorting options available in the Random substitution - cipher tab to get different views on the letter frequencies in the input text - as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\nSee - how long it takes you to crack the cipher! Is this a good method of encrypting - secret data?\r\n\r\n" - frozen circle function in circle_markdown_instruction: "Now let's create 20 - overlapping circles, turning 18 degrees between each circle." - frozen circle function with parameter_markdown_instruction: "Here's a ”Create - circle” block that can make circles of different sizes. Can you use this to - create a small circle of size 5 and a larger circle of size 10?" - frozen circle function_markdown_instruction: "Use the new “Create a circle” - block to create 10 overlapping circles. Don't forget to jump forward between - circles." - frozen circle_markdown_instruction: "A circle is a special shape. Can you figure - out what number to replace the question marks with to draw a circle?" - frozen cross rotate dense_markdown_instruction: "Let's repeat it 90 times! - How many times does 90 go into 360? Hint: It's a really small number." - frozen cross rotate_markdown_instruction: "Now try repeating it 10 times. How - many degrees do you need to turn between each line?" - frozen cross_markdown_instruction: "Wrap a “Repeat” block around these commands - to create a plus sign. Did you notice Elsa can move forward and backward?" - frozen diamond mini snowflake_markdown_instruction: "Did you know every snowflake - is a different shape? Let's create a new snowflake by using another “Repeat\" - block to repeat a parallelogram 4 times, turning right by 90 degrees between - each parallelogram." - frozen diamond snowflake_markdown_instruction: "Now, let's create a new snowflake - by using the repeat block to repeat a parallelogram 10 times, turning right - by 36 degrees between each one." - frozen diamond_markdown_instruction: "Use a repeat around these blocks to create - a parallelogram. It's just like a rectangle but has different angles. This - one has 60 degree and 120 degree angles instead of all 90 degree angles." - frozen freeplay_markdown_instruction: "You've officially become a master artist! - Create a winter wonderland." - frozen perpendicular_markdown_instruction: "Now let's see if we can create - two lines that are at a 90 degree angle to each other. You will need to use - the \"Turn\" block as well as the \"Move\" block." - frozen snowflake branch_markdown_instruction: "Try using the ”Create a snowflake - branch” block to create three branches, which starts to look like a snowflake." - frozen snowflake full_markdown_instruction: "Now let's repeat it 8 times to - make a beautiful snowflake!" - frozen snowflower_markdown_instruction: "Intricate snow patterns can be created - with very simple shapes. Can you make a pattern by repeating 5 circles of - size 5 and 5 circles of size 10?" - frozen square iterative_markdown_instruction: "It seems like we're halfway - to making a square. Let's put 4 lines together to create a square." - frozen square loop 3x_markdown_instruction: "Let's create three squares, turning - after each square. Be sure to turn by 120 degrees before each new square." - frozen square loop_markdown_instruction: "Hi, I’m Anna of Arendelle! Let’s - make a square with the “Repeat” block, which uses fewer blocks. How many times - (???) should the “Repeat” block loop the blocks inside it to make a square?" - frozen square snowflake_markdown_instruction: "Can you create a snowflake using - the “Repeat” block to make a square 10 times, and the “Turn” block to turn - 36 degrees between each square?" - 'Game Lab Workshop: Random_markdown_instruction': "# Randomized Shapes\r\n\r\nLet's - see how we can use randomization in our drawings. Each of the inputs from - the shape blocks you've seen can be replaced with calls to `randomNumber()`. - Try drawing some images that are slightly randomized each time. You might - try changing the position randomly by using `randomNumber()` in place of the - x or y inputs, or you could change the size of the shape itself by randomizing - the length or width inputs.\r\n\r\n# Do This\r\n\r\nPick a shape command (`ellipse()`, - `rect()` or `regularPolygon()`) and use `randomNumber()` in place of one or - more of the inputs. Make sure you run it a few times so you can see the effect - of randomization.\r\n" - Gamelab AllTheThings Embed Level_markdown_instruction: "# How Many Counter - Variables?\r\n\r\nYou can use counter variables (`x = x + 1` , `x = x - 1` - , `x = x + 0.5`, etc.) to animate a scene. What happens when scenes start - to get larger and more complicated? \r\n\r\nWatch this animation. With a partner: - \r\n\r\n* Decide how many counter variables you would need to create this - scene\r\n* Decide what you would name your counter variables\r\n* **Draw a - Labels-Values-Connectors** diagram of your variables at the first frame of - this scene. Don't worry about getting the values exactly correct.\r\n* Share - your answer with another group **and be ready to share your ideas with the - class**" - GameLab Livecode Demo 1_markdown_instruction: "# Animating Sprites\r\n\r\nTo - start this demo, we'll do the following:\r\n\r\n1. Create a new sprite with - the `createSprite()` block\r\n2. Click on the Animation tab and select an - image for the sprite\r\n3. Set the animation using the `sprite.setAnimation()` - block\r\n4. Move the sprite by incrementing (slowly increasing) its x and - y value using the draw loop\r\n" - GameLab Livecode Demo 2_markdown_instruction: "# Move With Keys\r\n\r\nNow - that we've got a sprite on the screen, let's make it respond to keyboard - input.\r\n\r\n1. Read through the blocks at lines 14 and 21 - what is going - on?\r\n2. Add two more conditionals to respond to the up and left keys\r\n3. - Experiment with some of the additional provided blocks, such as `sprite.scale` - and `sprite.rotation`\r\n" - GameLab Livecode Demo 3_markdown_instruction: "# Sprite Interactions\r\n\r\nAt - this point there's one sprite on screen, and we can move it around with the - arrow keys. Now let's add a second sprite and get the two interacting.\r\n\r\n1. - Add a new animation in the animation tab\r\n2. Create a new sprite called - \"target\" and set its animation\r\n3. Use the `sprite.isTouching()` block - in a conditional to make the target sprite react to the player sprite\r\n\t* - Make the target sprite shrink or grow\r\n * Make the target move to a random - location\r\n * Make the target rotate\r\n" - GameLab Livecode Demo 4_markdown_instruction: "# Make it Your Own\r\n\r\nNow - that we've created a simple game, take some time to explore the environment - on your own and add to your game. You'll notice that there are a bunch of - new blocks available to you in the toolbox - take a look around and try some - out!" - 'GameLab Workshop: Draw Loop Shapes_markdown_instruction': "# Experiment with - the Draw Loop\r\n\r\nHere's a simple app that we've slowed down by changing - the _frame rate_ (the number of times the draw loop is run each second).\r\n\r\nWith - a neighbor:\r\n\r\n* Read through the code and discuss what you think it will - do\r\n* Run and observe the program\r\n* Try reordering the blocks to see - how it impacts the drawing\r\n\t* Can you make the rectangle appear above - the circle?\r\n * What happens if you place one of the commands before - or after the draw loop?\r\n * Try adding some new shapes to the program" - Geometric Pattern_markdown_instruction: "**Project Idea:** Create a pattern - using geometric ideas like shapes. This requires persistence and planning!" - Geometric Sun_markdown_instruction: "**Project Idea:** Create a pattern using - geometric ideas like shapes. This requires persistence and planning!" - Glossary O_markdown_instruction: "## Vocabulary\n\nEncouraging students to - learn and use 'professional' terms enables them to communicate correctly - and efficiently with others and builds their knowledge such that it can be - further developed without having to relearn terms and concepts at a later - time. The terms and concepts used in the unplugged lessons are defined using - words that young students can understand.\n\n# TEACHING TIP\nBest practice - is to introduce the terms with easy-to-understand language, relate the terms - to previous experiences, use the terms repeatedly beyond the lesson itself - throughout the entire course (and in other situations) when appropriate, and - reinforce students' use in oral and written communication.\n\nThe following - terms are introduced in an unplugged lesson as either a Vocabulary word or - as a term related to the online Blockly programming interface. Terms are subsequently - reinforced in the following online puzzles and activities. Most terms appear - multiple times throughout the courses and lessons providing the students with - many opportunities to deepen their understanding and assimilate the words - into conversations, both in and outside of the classroom.\n\nThe course and - lesson numbers after each term indicate the unplugged lessons in which the - term is emphasized.\n\n# Look through this list of vocabulary words and then - answer the prompt at the bottom of the page. You don't have to learn all - the vocabulary words all right now, but you they are here so you can refer - back them during this online course. \n\nabstraction\n\nPulling out specific - differences to make one solution work for multiple problems students.\n\n(Course - 3: Lesson 1)\n\nalgorithm\n\nA list of steps to finish a task. A set of instructions - that can be performed with or without a computer. For example, the collection - of steps to make a peanut butter and jelly sandwich is an algorithm.\n\n(Course - 1: Lessons 1, 6 | Course 2: Lessons 1, 2 | Course 3: Lessons 1, 10)\n\nbinary\n\nA - way of representing information using only two options.\n\n(Course 2: Lesson - 14)\n\nBlockly\n\nThe visual programming language used in Code.org's online - learning system for K-5 students. (Course 1: Lesson 3)\n\nbug\n\nAn error - in a program that prevents the program from running as expected. (Course 2: - Lesson 9)\n\ncode\n\nOne or more commands or algorithm(s) designed to be carried - out by a computer. See Program. (Course 1: Lesson 2)\n\ncommand\n\nAn instruction - for the computer. Many commands put together make up algorithms and computer - programs. (Course 1: Lesson 2)\n\ncomputational thinking\n\nMental processes - and strategies that include: decomposition, pattern matching, abstraction, - algorithms (decomposing problems into smaller, more manageable problems, finding - repeating patterns, abstracting specific differences to make one solution - work for multiple problems, and creating step-by-step algorithms). (Course - 3: Lesson 1)\n\ncomputer science\n\nA field in which people use the power - of computers to solve big problems. (Course 1: Lesson 2)\n\nconditionals\n\nStatements - that only run under certain conditions or situations. (Course 2: Lesson 12)\n\ncrowdsourcing\n\nGetting - help from a large group of people to finish something faster. (Course 3: Lesson - 19)\n\ndata\n\nQuantities, characters, or symbols that are the inputs and - outputs of computer programs. (Course 2: Lesson 14 | Course 3: Lessons 1)\n\ndebugging\n\nFinding - and fixing errors in programs. (Course 2: Lesson 9)\n\ndecompose\n\nBreak - a problem down into smaller pieces. (Course 3: Lesson 1)\n\ndigital citizen\n\nSomeone - who acts safely, responsibly, and respectfully online. (Course 3: Lesson 20)\n\ndigital - footprint\n\nThe information about someone on the Internet. (Course 2: Lesson - 18)\n\nDNS (domain name service)\n\nThe service that translates URLs to IP - addresses. (Course 3: Lesson 18)\n\nDSL/cable\n\nA method of sending information - using telephone or television cables. (Course 3: Lesson 18)\n\nevent\n\nAn - action that causes something to happen. (Course 1: Lesson 15 | Course 2: Lesson - 15)\n\nevent-handler\n\nAn action or event that is being constantly monitored - for by the computer. When you write code for the computer to perform after - that an action occurs, that code, the event-handler, will run every time the - action is performed without having to put the commands inside of a loop. Many - event-handlers are human-initiated. For example: an event handler might respond - when the user clicks the mouse by making the bird flap its wings. \"When the - mouse is clicked\" is an event-handler. (Course 1: Lesson 15 | Course 2: Lesson - 15)\n\nfiber optic cable\n\nA connection that uses light to transmit information. - (Course 3: Lesson 18)\n\nfunction\n\nA piece of code that you can easily call - over and over again. Functions are sometimes called 'procedures.' A function - definition is a segment of code that includes the steps performed in the function. - A function call is the code segment, typically within the main logic of the - program, which invokes the function. (Course 3: Lesson 4, 9)\n\nInternet\n\nA - group of computers and servers that are connected to each other. (Course 1: - Lesson 17 | Course 3: Lessons 18, 20)\n\nIP address\n\nA number assigned to - any item that is connected to the Internet. (Course 3: Lesson 18)\n\niteration\n\nA - repetitive action or command typically created with programming loops. (Course - 1: Lesson 12 | Course 2: Lesson 5)\n\nloop\n\nThe action of doing something - over and over again. (Course 1: Lesson 12 | Course 2: Lesson 5)\n\npackets\n\nSmall - chunks of information that have been carefully formed from larger chunks of - information. (Course 3: Lesson 18)\n\npattern matching\n\nFinding similarities - between things. (Course 3: Lesson 1)\n\npersistence\n\nTrying again and again, - even when something is very hard. (Course 1: Lesson 9)\n\nprogram\n\nA program - is an algorithm that has been coded into something that can be run by a machine. - (Course 1: Lesson 2 | Course 2: Lesson 1 | Course 3: Lesson 10)\n\nrun program\n\nTo - have the computer execute the commands you've written in your program. (Course - 1: Lesson 4)\n\nservers\n\nComputers that exist only to provide things to - others. (Course 3: Lesson 18)\n\ntoolbox\n\nThe tall grey bar in the middle - section of Code.org's online learning system where all the commands you can - use to write your program are displayed. (Course 1: Lesson 4)\n\nURL (universal - resource locator)\n\nAn easy-to-remember address for calling a web page (like - www.code.org). (Course 3: Lesson 18)\n\nusername\n\nA name you make up so - that you can see or do things on a website, sometimes called a \"screen name.\" - (Course 1: Lesson 18)\n\nvariable\n\nA placeholder for a piece of information - that can change. (Course 3: Lesson 4)\n\nWi-Fi\n\nA wireless method of sending - information using radio waves. (Course 3: Lesson 18)\n\nworkspace\n\nThe white - area on the right side of Code.org's online learning system where you drag - and drop commands to build your program. (Course 1: Lesson 4)\n\n### What - is one way you can include computer science vocabulary terms in your class?\n" - grade1_adventurer_loops2_markdown_instruction: "How can Laurel collect all - five piles of gold using only one `E -->` block?" - grade1_artist_loops6_markdown_instruction: "**Challenge:** It's a hidden - garden! Let's walk around." - grade1_artist_loops7a_markdown_instruction: "**Challenge:** Lovely! Let's - take a walk around the garden." - grade1_artist_loopsFP_markdown_instruction: "Use what you have learned to draw - a picture of what you think the artist saw when he got home.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" - width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" - width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" - width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" - width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" - grade1_maze_sequence8_markdown_instruction: "**Challenge:** Debug this level - by adding blocks to get me to the pig!" - grade1_maze_sequenceA_markdown_instruction: "**Challenge:** Move me around - the TNT to get to the pig." - grade1_playlab_events1_markdown_instruction: "This game is called \"Play Lab\". \r\n\r\n<br/>\r\nSee - if you can figure out what each block does." - grade1_playlab_eventsFP_markdown_instruction: "Use your imagination. What can - you do to make this game more fun?\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Conversation</strong> - - Add blocks so that the characters say \"Hello!\" when they run into each - other. </li>\r\n <li><strong>Where's the Dragon?</strong> - Have - the dragon dissapear when the up arrow key is pressed.</li>\r\n <li><strong>Super - Dragon</strong> - Make the dragon move at a faster speed and then try to catch - him with the knight. </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>" - grade2_CaringForNewPet_0_markdown_instruction: "For this puzzle, drag all of - the blocks together and click \"Run\" to watch it go!" - grade2_CaringForNewPet_1_markdown_instruction: "Drag an extra `move forward` - block out of the toolbox to finish your code." - grade2_CaringForNewPet_11_markdown_instruction: "*\"Keep calm and help me find - the bad pig.\"*" - grade2_CaringForNewPet_2_markdown_instruction: "*\"This pig is ruffling my - feathers.\"*\r\n\r\nThere is one extra block that is going to cause the bird - to crash. \r\nThrow it away by dragging it back to the toolbox." - grade2_CaringForNewPet_2courseC_maze_programming3_markdown_instruction: "*\"This - pig is ruffling my feathers.\"*\r\n\r\nThere is one extra block that is going - to cause the bird to crash. \r\nThrow it away by dragging it back to the - toolbox." - grade2_CaringForNewPet_3_markdown_instruction: "*\"Trace the path and lead - me to the silly pig. Avoid TNT or feathers will fly!\"*" - grade2_CaringForNewPet_3D_markdown_instruction: "*\"Follow this path to get - me to the pig!\"*" - grade2_CaringForNewPet_4_markdown_instruction: "*\"Keep calm and help me find - the bad pig. Otherwise I might get angry!\"*" - grade2_CaringForNewPet_6_markdown_instruction: "**Challenge:** Guide me to - the green evilness! (Watch out for TNT)" - grade2_CaringForNewPet_7D_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** - This code has a lot of bugs. You'll need to remove blocks and add blocks." - grade2_collector_10_markdown_instruction: "You're almost done! \r\n\r\nCollect - as many pieces of treasure as you can to finish the stage!" - grade2_collector_2_markdown_instruction: "Move Laurel to the gold, then use - `collect` to pick it up." - grade2_collector_3_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe - blocks you need are already in the workspace, but not connected. Put these - blocks in order to collect all of the gold and solve the puzzle." - grade2_collector_4_markdown_instruction: "Sequence matters! The blocks you - need are already in the workspace, but not connected. Order these blocks - to solve the puzzle." - grade2_collector_5_markdown_instruction: "*\"Help me collect each gold coin!\"*\r\n\r\nThese - blocks are in the wrong order. Can you fix them?" - grade2_collector_6_markdown_instruction: "\"Help me collect all of the treasure!\"\r\n\r\nThese - blocks are in the wrong order. Reorder them to collect all of the treasure." - grade2_collector_7_markdown_instruction: "**Challenge:** What is going on here? \r\n\r\nEven - if we put these in the right order, there will still be some missing. \r\nUse - blocks from the toolbox to collect all of the treasure." - grade2_collector_8_markdown_instruction: "*\"Keep up the good work! Help me - collect all of the coins.\"*" - grade2_collector_9_markdown_instruction: "*\"Let's get all of the coins!\"*" - grade2_collector_9a_markdown_instruction: "**Challenge:** Grab all of the coins." - grade2_collector_A_markdown_instruction: "Help Laurel collect all of the treasure." - grade2_collector_pre1_markdown_instruction: "*\"Hi, I'm Laurel. Today I'm - searching for treasure at the dog park!\"* \r\n\r\nPlay around with the blocks - to see if you can help Laurel collect some gold." - grade2_link_RunMarco_partner_markdown_instruction: "<a href=\"https://www.allcancode.com/runmarco\"></a><img - src=\"https://images.code.org/c754e82a395ab69e5c1e3b2dfe8bf9ff-image-1486603338831.22.10.png\" - width=\"400px\"/></a>" - grade2_MakeDogTag_1_markdown_instruction: "*\"Let's make a cage for my pet - monster!\"*\r\n\r\nDrag blocks onto the screen to have the artist draw over - the grey lines in the picture. \r\n(Each line is 100 pixels long)" - grade2_MakeDogTag_10_markdown_instruction: "Now, draw anything you like!\r\n<br/><br/>\r\nHere - are some ideas you could try if you get stuck (the last one is a challenge):\r\n<br/>\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/c8748bea36ec8ea92ceb13d86cd862d2-image-1471033427162.13.51 - PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/57c582dca6126e30de36b5bef5517f78-image-1471033432715.03.46 - PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/9df13dec95da560686472580304d9ee3-image-1471033275008.55.15 - PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n\r\n\r\n" - grade2_MakeDogTag_2_markdown_instruction: "*\"This spaceship needs a window!\"*\r\n\r\nEach - side of the inner square is 100 pixels and all of the angles are 90 degrees." - grade2_MakeDogTag_3_markdown_instruction: "*\"Oh no! Starla's pet alien just - flew away! Let's help the spacewoman!\"*\r\n\r\nFinish Starla's rocket so - she can chase her pet. \r\n(Each side of the triangle is 100 pixels long - and has 120 degree outer angles)" - grade2_MakeDogTag_4_markdown_instruction: "*\"Maybe we should make a tag for - each of our pets in case they get lost!\"*\r\n\r\nFinish this tag by drawing - a rectangle around the outside. \r\n(The long sides are 200 pixels each and - the short sides are each 100 pixels)" - grade2_MakeDogTag_5_markdown_instruction: "*\"Now a tag for Belle!\"*\r\n\r\nDraw - this diamond with 200 pixel sides." - grade2_MakeDogTag_6_markdown_instruction: "**Challenge:** This tag is a special - one! Can you figure out how to draw the outline? \r\n(The long side is 150 - pixels and each of the short sides are 75 pixels.)" - grade2_MakeDogTag_7_markdown_instruction: "One more tag. This is a triangle - for Pi. \r\n(Each side is 150 pixels)" - grade2_MakeDogTag_8_markdown_instruction: "Now let's connect a bunch of V's - together in a loop." - grade2_MakeDogTag_9_markdown_instruction: "Time to make something snazzy! \r\n\r\nRebuild - the code from the last puzzle, but this time, add a left turn of 30 degrees - inside the loop. Now, repeat it 24 times instead of 8." - grade2_MakeDogTag_BFP_markdown_instruction: "*\"Hi, I'm an artist. You can - write code to make me draw almost anything.\"*\r\n\r\nPlay with the blocks - in the toolbox to see what they do!" - grade2_MakeDogTag_FP_markdown_instruction: "**Freeplay:** What shape will you - make the tag for your pet?\r\n<br/><br/>\r\n\r\n\r\nHere are some ideas you - could try if you get stuck:\r\n![](https://images.code.org/e36330061c21807fac24d804e301e572-image-1475814869558.26.01.png)" - grade2_maze_debuggingFP_markdown_instruction: "*\"Now, help me sneak up on - the pig any way you want to!\"*" - grade2_maze_intro10_markdown_instruction: "Solve this puzzle." - grade2_maze_intro2_markdown_instruction: "Welcome to Code Studio! Here you - will learn to use blocks to build programs. Press `Ok`, then find the `Run` - button to run your first program." - grade2_maze_intro3_markdown_instruction: "The `workspace` is where you will - create all of your programs. Find the workspace, then see what the program - does." - grade2_maze_intro4_markdown_instruction: "The `toolbox` is where blocks are - stored. You can drag them into the `workspace` to create programs." - grade2_maze_intro6_markdown_instruction: "That’s it! Now we’re ready to try - to solve a few puzzles." - grade2_maze_intro7_markdown_instruction: "This time, try something a bit more - challenging." - grade2_maze_intro8_markdown_instruction: "This is a challenge puzzle. It is - meant to be hard and will probably take you a couple of tries to solve. If - you don’t solve it after several tries, don’t worry! It will be in the Play - Zone at the end of the stage and you can try it again when you’ve had more - practice." - grade2_maze_intro9_markdown_instruction: "Solve this puzzle." - grade2_playlab_project_3_markdown_instruction: "Can you have Waddles (actor - 1) say \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen - you're done, play the game to make that happen.\r\n\r\n![](https://images.code.org/a634f249021651f60a1acf37bf78d07d-image-1475342557950.gif)" - grade2_playlab_project_6_markdown_instruction: "<style>\r\n.hint{\r\n\tpadding: - 15px 15px 15px 40px; \r\n background-color:#eeeeee; \r\n border-radius:10px;\r\n}\r\n.hintInner{\r\n\tpadding: - 15px 15px 15px 15px; \r\n background-color:#FFFFFF; \r\n border-radius:10px;\r\n}\r\n\r\nimg{\r\n\tborder-radius: - 10px;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n</style>\r\n\r\nCreate - your own story. When you're done, click \"Finish\" to share with friends.\r\n<br/>\r\n\r\n<h5 - class=\"hint\">\r\n<details>\r\n<summary><b>Need some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5 - class=\"hintInner\">\r\n\t\t<ul>\r\n \t<li><strong>Who's there?</strong> - - Make characters appear with random images, so no one knows who's showing - up next.</li>\r\n <li><strong>Going on an Adventure</strong> - - Change the background, then have the characters talk about where they are - now. </li>\r\n <li><strong>Pinball</strong> - Make one character - move using the arrow keys (use `when up arrow`, `when down arrow` blocks), - then play random sounds when it collides with other characters on the screen. - </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" - grade2_puppy_loops2_markdown_instruction: "Suddenly, a magical block appears! With - the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to - the pig by creating a loop that uses only one `move forward` block inside - of a `repeat`?" - grade2_puppy_loops3_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nSolve - this puzzle by creating a loop!" - grade2_puppy_loops4_markdown_instruction: "In this puzzle, two `repeat` loops - will help you get to the pig with the fewest number of blocks!" - grade2_puppy_loops5_markdown_instruction: "*\"Get me to the pig as quickly - as possible!\"*" - grade2_puppy_loops6_markdown_instruction: "*\"This pig is ruffling my feathers!\"*\r\n\r\nLoops - even work with more than one block inside! Can you loop this sequence?" - grade2_puppy_loops7_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nUse - what you learned in other puzzles!" - grade2_PuppyLoops_10_markdown_instruction: "My teacher says that I should finish - what I start!\r\n\r\nHelp me finish my pinwheel. Can you figure out what's - wrong?" - grade2_PuppyLoops_2_markdown_instruction: "Suddenly, a magical block appears! With - the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to - the pig by creating a loop that uses only one `move forward` block inside - of a `repeat`?" - grade2_PuppyLoops_3_markdown_instruction: "Get me to the pig! Solve this puzzle - by creating a loop!" - grade2_PuppyLoops_4_markdown_instruction: "In this puzzle, two `repeat` loops - will help you get to the pig with the fewest number of blocks!" - grade2_PuppyLoops_8_markdown_instruction: "This code for the cat's whiskers - is wrong. \r\n\r\nFix this code to draw whiskers that are all the same length." - grade2_PuppyLoops_9_markdown_instruction: "Looks like the C in code is drawn - backwards!\r\n\r\nCan you make it look like a C again?" - grade3_bee_conditionals_new1a_markdown_instruction: "You can only collect nectar - from flowers, but you can check any space to see if there is a flower." - grade3_bee_conditionals_new2a_markdown_instruction: "In this puzzle, we know - that every flower has exactly one nectar, but the flowers aren't spaced evenly.\r\n\r\nGet - all of the nectar using as few blocks as possible." - grade3_bee_conditionals_new3b_markdown_instruction: "Conditionals can be helpful, - even when you know exactly what is in each spot!\r\n\r\nCollect all of the - nectar and make all of the honey." - grade3_bee_conditionals_quantum1_markdown_instruction: "*\"This cloud is blocking - my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. If there's - a flower, get nectar." - grade3_bee_conditionals_quantum2_markdown_instruction: "More clouds! \r\n\r\nCheck - underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade3_bee_conditionals_quantum3_markdown_instruction: "*\"Now I just want - to make honey.\"*\r\n\r\nSome of these clouds might have honeycombs under - them. Be sure to check if a honeycomb is hiding behind each cloud!" - grade3_bee_conditionals_quantum4_markdown_instruction: "Sometimes a cloud covers - a flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block - to collect nectar at flowers and make honey at honeycomb." - grade3_bee_conditionals_quantum5_markdown_instruction: "**Challenge:** There - will be either a flower or a honeycomb under each of those clouds!\r\n\r\nUse - the `if/else` block to collect nectar if there is a flower.\r\nOtherwise, - make honey (because there is a honeycomb)." - grade3_Conditionals_1_markdown_instruction: "I'm a hungry bee! \r\n\r\n\r\nHelp - me collect all of the nectar from the flowers using the fewest number of blocks." - grade3_Conditionals_10_markdown_instruction: "There's a lot happening here!\r\n\r\nUse - what you've learned to collect all of the nectar and then make the honey." - grade3_Conditionals_11 BAD_markdown_instruction: "**Assessment:** Use a `while` - loop to collect all of the nectar from these flowers." - grade3_Conditionals_11_markdown_instruction: "Let's put everything together!\r\n\r\nUse - what you've learned to help me collect nectar only from flowers that have - it, using as few blocks as possible. \r\n\r\nDon't forget to make honey - at the end." - grade3_Conditionals_12_markdown_instruction: "This stair step pattern should - look familiar. \r\n\r\nCan you collect nectar only from the flowers that - have some, using as few blocks as possible?" - grade3_Conditionals_13_markdown_instruction: "**Assessment:** Collect all of - the nectar. \r\nBe careful not to try to collect nectar from a purple flower - if it doesn't have any." - grade3_Conditionals_2_markdown_instruction: "Look at all of that nectar!\r\n\r\nHelp - me collect the nectar and make the honey using as few blocks as you can. " - grade3_Conditionals_3_markdown_instruction: "These magic purple flowers change!\r\n\r\nEach - time you try the puzzle, purple flowers can have either 1 nectar or none at - all...but you won't know the number until you run the code! \r\n\r\nBe careful - not to collect nectar from a purple flower if it doesn't have any. \r\nYou - must first check if the nectar is equal to 1 using the `if nectar` block." - grade3_Conditionals_8_markdown_instruction: "I wonder what's out there!\r\n\r\nHelp - me fly around the yard and collect nectar only from the flowers that have - some. " - grade3_ConditionalsElse_1_markdown_instruction: "This cloud is blocking my - view! \r\n\r\nCheck to see if there's a flower under the cloud, and only - get nectar if there's a flower. \r\nBe careful, it can change!" - grade3_ConditionalsElse_2_markdown_instruction: "More clouds! \r\n\r\nCheck - underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade3_ConditionalsElse_4_markdown_instruction: "Sometimes this cloud covers - a flower, and sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block - to collect nectar only if it is a flower. \r\nElse, make honey (because it - is a honeycomb)." - grade3_ConditionalsElse_5_markdown_instruction: "There will be either a flower - or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block - to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade3_ConditionalsElse_6_markdown_instruction: "I am not sure how much nectar - this flower has, but I know it has either 1, 2, or 3 nectar. \r\n\r\nCombine - the conditional blocks (`if` and/or `if/else`) to only get as much nectar - as the flower has. \r\n\r\nRemember, the amount of nectar can change each - time you run the puzzle!" - grade3_ConditionalsElse_7_markdown_instruction: "These flowers can have 3, - 2, or 1 nectar. \r\n\r\nComplete the `check purple flower` function and use - it to collect all of the nectar at the flowers." - grade3_ConditionalsElse_8_markdown_instruction: "Write the function for `check - flower make honey`. \r\n\r\nYour function should check if the purple flower - has 3, 2, or 1 nectar and get all of the nectar. \r\nThen, move forward and - make honey." - grade3_ConditionalsElse_9_markdown_instruction: "**Assessment:** This cloud - is either hiding a flower with one nectar or a honeycomb that needs one honey. \r\n\r\nComplete - the `get nectar or make honey` function, then call it to collect the nectar - or honey. \r\n" - grade3_ConditionalsElse_TeacherIDo_markdown_instruction: "There will be either - a flower or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` - block to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade3_Debugging_1_markdown_instruction: "These blocks are really bugging me!\r\n\r\nFix - the error(s) to collect all of the nectar." - grade3_Debugging_10_markdown_instruction: "**Challenge:** *\"This puzzle is - making me loopy!\"*\r\n\r\nAll of the commands that you need are already here...now - use your debugging skills to figure out how to solve this puzzle." - grade3_Debugging_11_markdown_instruction: "**Challenge:** Fix the errors to - collect all of the nectar and make all of the honey." - grade3_Debugging_2_markdown_instruction: "*\"These blocks are really bugging - me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." - grade3_Debugging_3_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix - the error(s) to collect all of the nectar." - grade3_Debugging_4_markdown_instruction: "*\"These blocks are really bugging - me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of - the honey." - grade3_Debugging_5_markdown_instruction: "That flower looks tasty! \r\n\r\nFix - the error(s) to collect all of the nectar. \r\nYou can now use both run and - step." - grade3_Debugging_6_markdown_instruction: "What a sweet challenge!\r\n\r\nFix - the error(s) to collect all of the nectar." - grade3_Debugging_8_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix - the error(s) to make all of the honey." - grade3_Debugging_9_markdown_instruction: "\"Bee\" patient with this one!\r\n\r\nYou - will need to fix a couple of things in this program to collect all of the - nectar and make all of the honey." - grade3_Loops_10_markdown_instruction: "Such a busy bee!\r\n\r\nHelp Bee collect - all of the nectar and make all of the honey with the fewest blocks possible." - grade3_Loops_11_markdown_instruction: "The shape of this path is different - from the others. \r\n\r\nCan you collect all of the nectar using as few blocks - as possible?" - grade3_Loops_3_markdown_instruction: "Use a `repeat` loop to collect all of - the nectar." - grade3_Loops_4_markdown_instruction: "Now use the `repeat` block to collect - all of the nectar and make all of the honey." - grade3_Loops_5_markdown_instruction: "What a beautiful field of flowers!\r\n\r\nHelp - the bee visit each one.\r\n\r\nCan you find a way to do it with fewer than - 7 blocks?" - grade3_Loops_6_markdown_instruction: "How many times can loops help you in - this puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete - this puzzle with the fewest blocks possible." - grade3_Loops_7_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." - grade3_Loops_TeacherIDo_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." - grade3_maze_Loop1_markdown_instruction: "**Assessment:** Get me to the sunflower - using only 5 blocks! " - grade3_maze_loops1_markdown_instruction: "*\"Must...eat...sunflower!\"*\r\n\r\nGet - the zombie to the sunflower." - grade3_maze_loops2_markdown_instruction: "Get the zombie to the sunflower using - the fewest blocks possible! " - grade3_maze_loops2a_markdown_instruction: "*\"Zombie hungry!\"*\r\n\r\nGet - the zombie to the sunflower using the fewest number of blocks possible." - grade3_maze_loops3_markdown_instruction: "*\"Must eat sunflower!\"*\r\n\r\nGet - the zombie to the sunflower using only the blocks available." - grade3_maze_nestedLoops2_markdown_instruction: "Suddenly, a magical block appears! With - the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to - the pig by creating a loop that uses only one `move forward` block inside - of a `repeat`?" - grade3_maze_nestedLoops3_markdown_instruction: "Get me to the pig! You can - only use one `move forward` block this time" - grade3_maze_nestedLoops4_markdown_instruction: "In this puzzle, two `repeat` - loops will help you get to the pig with the fewest number of blocks!" - grade3_RunningFarm_1_markdown_instruction: "*\"Corn you help me harvest today?\"*\r\n\r\nUse - conditionals to make sure that you pick all of the corn, but don't disturb - the stalks where nothing is growing yet." - grade3_RunningFarm_10_markdown_instruction: "Collect all of the corn and lettuce, - then pick the pumpkin." - grade3_RunningFarm_11a_markdown_instruction: "Collect all of the corn and lettuce, - then pick the pumpkin." - grade3_RunningFarm_2_markdown_instruction: "*\"Lettuce collect both crops from - this row!\"*\r\n\r\nHelp the farmer collect both corn and lettuce from the - field." - grade3_RunningFarm_4_markdown_instruction: "*\"Gosh! Now the crops are growing - in clusters!\"* \r\n\r\nHelp the farmer pick all of the lettuce in each cluster - before moving on to the next bunch." - grade3_RunningFarm_5_markdown_instruction: "*\"What a bountiful crop!\"*\r\n\r\nThis - field has clusters of corn, lettuce, and pumpkins all growing together. Can - you collect them all?" - grade3_RunningFarm_6_markdown_instruction: "*\"Let's take this one step further!\"*\r\n\r\nCan - you figure out how to pick the pumpkin? Make sure to collect all of the corn - along the way!" - grade3_RunningFarm_7_markdown_instruction: "**Challenge:** Collect all of the - corn and lettuce, then pick the pumpkin." - grade3_RunningFarm_8_markdown_instruction: "Harvesting one type of crop at - a time takes too long. Can you help me harvest both wheat and potatoes in - one run? I wonder if you can stack another While There is... loop on top of - another one?" - grade3_RunningFarm_9_markdown_instruction: "Can you help me one last time? - I want to collect as many crops as I can before the weeds take over this field. - How many do you think we can get?" - grade4_arist_functions_star0_markdown_instruction: "Have you drawn something - like this star before? Practice making it one more time by adding a `turn` - and a `repeat` block." - grade4_arist_nested_loop_circles1_markdown_instruction: "**Assessment:** Use - a nested loop to complete the design." - grade4_arist_nested_loop_flags1_markdown_instruction: "Loop the given code - to create a windmill." - grade4_arist_nested_loop_polygons1_markdown_instruction: "Loop this design - 10 times. \r\n\r\nHow much do you have to turn each time you loop?" - grade4_arist_nested_loop_polygons2_markdown_instruction: "Loop this shape 6 - times. \r\n\r\nHow much do you have to turn each time you loop? " - grade4_arist_nested_loop_squares1_markdown_instruction: "Can you draw these - 10 squares of this sidewalk using a nested loop? \r\n\r\nEach square is 30 - pixels." - grade4_arist_nested_loop_triangles2_markdown_instruction: "Now nest this loop - inside another loop to draw 10 triangles. \r\nThis is called a \"nested\" - loop. " - grade4_arist_nested_loop_triangles3_markdown_instruction: "Can you draw a hexagon - by looping the triangle code?" - grade4_arist_nested_loop_triangles4_markdown_instruction: "Draw the teeth in - the alligator's mouth!" - grade4_arist_nested_loop_triangles5_markdown_instruction: "Create a sun by - nesting the starter code in another loop.\r\n\r\nTo get this cool design with - a hollow center, you'll need to jump forward by the length of the triangle - before turning." - grade4_arist_nested_loop_triangles6_markdown_instruction: "Can you draw these - 36 triangles using a nested loop?" - grade4_artist_freeplay_markdown_instruction: "Create your own project! This - creation will be saved to your Projects dashboard so that you can easily edit - it any time!" - grade4_artist_functions1_markdown_instruction: "*\"Me zombie artist. Me love - drawing!\"*\r\n\r\nHelp the zombie draw glasses using squares with sides of - 100 pixels. \r\nThe bridge between the glasses is 75 pixels long.\r\n\r\n" - grade4_artist_functions2_markdown_instruction: "Functions let you define new - blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a - function called `draw a square`. This time, use the `draw a square` function - to create the glasses. \r\n\r\nThe squares are 75 pixels apart." - grade4_artist_functions2a_markdown_instruction: "Create this image using only - the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - grade4_artist_functions3a_markdown_instruction: "Create this image using only - the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - grade4_artist_functions3b_markdown_instruction: "This time, use lines of 8 - hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the 6 - times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate - between turning 60 degrees and 120 degrees." - grade4_artist_functions_challenge_markdown_instruction: "**Functions Super - Challenge:** Use the suggested functions to draw four rows of hexagons. Notice - how our even numbered rows are shifted to the right?" - grade4_artist_functions_challenge2_markdown_instruction: "**Functions Super - Challenge:** Use the suggested functions to draw four rows of hexagons. Notice - how our even numbered rows are shifted to the right?" - grade4_artist_functions_freeplay_markdown_instruction: "Create your own project! - This creation will be saved to your Projects dashboard so that you can easily - edit it any time!\r\n<hr/>\r\n<h3>Here are some ideas if you are looking for - inspiration, or make your own function!</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/7e85601182e37a5331a17c0e29cf504d-image-1471042674372.42.08 - PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/6ae7664d92a706e852d92dc419836557-image-1471042678266.55.48 - PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n\r\n</tr>\r\n</table>" - grade4_artist_functions_stars0_markdown_instruction: "We will come back to - functions shortly. Let's take a break to practice making this star. \r\n\r\nYou - can make this drawing by adding a repeat block." - grade4_artist_functions_stars1_markdown_instruction: "Now that you can draw - a star, try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels - long\r\n- Turn 45 degrees between branches\r\n- Jump 100 pixels between each - star" - grade4_artist_functions_stars2_markdown_instruction: "When is drawing three - stars harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw - only those three stars to finish this puzzle." - grade4_artist_functions_stars3_markdown_instruction: "That last one is tough - if you only use loops. Let's try one more time and see if this new 'function' - makes it easier to **draw a star**." - grade4_artist_functions_windows0_markdown_instruction: "You are doing great! - \r\n\r\nMake this window by drawing a square, then turning 90 degrees before - drawing another, and so on." - grade4_artist_functions_windows1_markdown_instruction: "You just created a - nested loop! Let's repeat all of these commands with **another** `repeat` - block to draw windows on this house. Don't forget to `jump`!" - grade4_artist_functions_windows2_markdown_instruction: "Let's take the code - for the window and add it to function `draw a window`. Now, we can call the - function any time we need to draw a window without having to write the code - again. \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" - width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw - a window` and calling it five times. Watch out for the door!\r\n\r\n- The - top windows are 50 pixels away from each other. \r\n- The bottom windows - are 100 pixels below the top set." - grade4_artist_functionsChallenge0_markdown_instruction: "**Challenge:** Create - as many functions as you think you need to make this drawing of 50 pixel squares." - grade4_artist_nested_loop_circles1_markdown_instruction: "**Assessment:** Use - a nested loop to complete the design." - grade4_artist_nested_loop_flags1_markdown_instruction: "Loop the given code - to create a windmill." - grade4_artist_nested_loop_polygons1_markdown_instruction: "Loop this design - 10 times. \r\n\r\nHow much do you have to turn each time you loop?" - grade4_artist_nested_loop_polygons2_markdown_instruction: "Hi, I'm the Artist! - Let's create some drawings together! For starters, try repeating this shape - 6 times. \r\n\r\nHow much do you have to turn each time you loop? " - grade4_artist_nested_loop_squares1_markdown_instruction: "Can you draw these - 10 squares of this sidewalk using a nested loop? \r\n\r\nEach square is 30 - pixels." - grade4_artist_nested_loop_triangles1_markdown_instruction: "Complete the code - to draw these triangles. The first one is done for you. Hint: 3 triangles - in a 360 degree rotation.\r\n\r\n" - grade4_artist_nested_loop_triangles2_markdown_instruction: "Let's make a quick - adjustment to get completely different image! \r\n<b>Hint:</b> ? × 10 = 360" - grade4_artist_nested_loop_triangles3_markdown_instruction: "Can you draw a - hexagon by looping the triangle code?\r\nHint: 6 × ? = 360" - grade4_artist_nested_loop_triangles4_markdown_instruction: "Let's try something - a little different! Can you help me draw the bottom teeth in the alligator's - mouth?" - grade4_artist_nested_loop_triangles5_markdown_instruction: "Create a sun by - nesting the starter code in another loop.\r\n\r\nTo get this cool design with - a hollow center, you'll need to jump forward by the length of the triangle - before turning." - grade4_artist_nested_loop_triangles6_markdown_instruction: "Can you draw these - 36 triangles using a nested loop?" - grade4_artist_nestedLoops_challenge_markdown_instruction: "<img src=\"https://images.code.org/c876143212d195192013582f57c6df04-image-1445625392518.36.18.png\" - width=\"150px;\" style=\"mix-blend-mode: multiply;\" />\r\n\r\n**Play time:** Here - is the code for an interesting shape. \r\n\r\nWhat happens when you repeat - it multiple times, turning between each iteration? \r\n\r\nNotice that the - turns in this shape add up to *420 degrees*, which means that when your artist - is done drawing, it will be facing a different direction than when you started. That - new direction is exactly *60 degrees* to the *right* of where you began.\r\n\r\n<hr/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat - 4</b></summary>\r\n<br/>\r\nIf you want to come full circle in just 4 repetitions, - you need the artist to turn a total of **360 degrees/4 = 90 degrees** each - time. You can do that by adding an extra `turn right by 30 degrees` block - to the outer loop (since **60+30 = 90**.) \r\n<br/>\r\n<img src=\"https://images.code.org/9da67a628ed72e87520a02a0d917e2af-image-1440132370113.44.12.png\" - width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n<br/><br/>\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat - 6</b></summary>\r\n<br/>\r\nWhen you repeat the shape as-is 6 times, you get - a total rotation of **6x60 degrees** which is a full **360 degree** cycle. \r\n<img - src=\"https://images.code.org/b79f96b87097ce3afe8a6a5608d04e36-image-1440132287456.44.27.png\" width=\"500px;\" style=\"mix-blend-mode: - multiply;\" />\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat - 12</b></summary>\r\n<br/>\r\nIf you want to repeat the image 12 times, you - need the artist to turn a total of **360 degrees/12 = 30 degrees** each iteration. That - means you will need to adjust the artist back a bit with `turn left by 30 - degrees` before you repeat the shape again. <br/><br/>\r\n<img src=\"https://images.code.org/ad254952522674496918561096817c66-image-1440132424792.44.01.png\" - width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n</details>\r\n</h4>\r\n\r\nNow - it's your turn! Can you recreate each image by repeating the starting shape? " - grade4_artist_nestedLoops_challenge2_markdown_instruction: "<img src=\"https://images.code.org/6cac10470af71bbb5d75bf5e2669046f-image-1439939145211.png\" - width=\"200px\"/>\r\n\r\nNow for a challenge! \r\n\r\nHere is a design that - uses only blocks that you have already been shown. Can you figure out how - to recreate it? Feel free to use trial and error. You are not expected to - get it perfect the first time.\r\n\r\nThe repeated shape is almost identical - to the one from the last puzzle, except that the length used in the first - loop is a little smaller. " - grade4_artist_parameters_squares1_markdown_instruction: "Click \"edit\" to - fill in the function definition of `draw a square` and add a parameter. \r\nIt - should take a length parameter just like the triangle. \r\n\r\n**This time, - draw 3 squares:** 25, 50 and 75 pixels in length. The lefthand corners are - each 100 pixels away from the last." - grade4_artist_parameters_triangles1_markdown_instruction: "Today, we're going - to try out a different, more powerful function editor. See if you can figure - out how to edit the `draw a triangle` function to find the bugs." - grade4_artist_parameters_triangles2_markdown_instruction: "Do you notice anything - different about these function blocks? Click “Run” to see what happens." - grade4_artist_parameters_triangles2b_markdown_instruction: "Can you complete - this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than - the last. \r\nThe first triangle has 25 pixel sides." - grade4_artist_parameters_triangles3_markdown_instruction: "Can you complete - this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than - the last. \r\nThe first triangle has 25 pixel sides." - grade4_artist_parameters_triangles4_markdown_instruction: "The code for this - triangle function is broken. \r\n\r\nCan you edit the function to fix it, - and then make triangles of length 25, 50, and 75?" - grade4_artist_parameters_trianglesx_markdown_instruction: "Can you complete - this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than - the last. \r\nThe first triangle has 25 pixel sides." - grade4_bee_conditionals_nested_loops_markdown_instruction: "**Assessment:** - Collect all of the nectar. \r\nBe careful not to try to collect nectar from - a purple flower if it doesn't have any." - grade4_bee_conditionals_new1_markdown_instruction: "**Assessment:** Collect - all of the nectar. \r\nBe careful not to try to collect nectar from a purple - flower if it doesn't have any." - grade4_bee_conditionals_quantum1_markdown_instruction: "This cloud is blocking - my view! \r\n\r\nCheck to see if there's a flower under the cloud, and only - get nectar if there's a flower. \r\nBe careful, it can change!" - grade4_bee_conditionals_quantum2_markdown_instruction: "More clouds! \r\n\r\nCheck - underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: - Not all clouds hide the same thing!" - grade4_bee_conditionals_quantum4_markdown_instruction: "Sometimes this cloud - covers a flower, and sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` - block to collect nectar only if it is a flower. \r\nElse, make honey (because - it is a honeycomb)." - grade4_bee_conditionals_quantum5_markdown_instruction: "There will be either - a flower or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` - block to collect nectar if there is a flower.\r\nOtherwise, make honey (because - there is a honeycomb)." - grade4_bee_functions2_markdown_instruction: "Functions are blocks of code that - perform a task. \r\n\r\nUse the `get 2 nectar` function to collect the nectar - from each flower." - grade4_bee_functions3_markdown_instruction: "Build the `get 5` function to - use in this puzzle." - grade4_bee_functions4_markdown_instruction: "The `move and get nectar` function - turns the bee, collects nectar, and then returns the bee to where it started. \r\n\r\nUse - the `move and get nectar` function to collect all of the nectar." - grade4_bee_functions9_markdown_instruction: "**Challenge:** These flowers can - have a different amount of nectar each time you run the puzzle. \r\n\r\nCreate - a function that collects all of the nectar from each flower." - grade4_bee_nestedLoops1_markdown_instruction: "*\"Can you BEE-lieve all of - these flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " - grade4_bee_nestedLoops2_markdown_instruction: "**Challenge:** Figure out how - to get all of the nectar using only the blocks available." - grade4_bee_nestedLoops4_markdown_instruction: "Collect all of the nectar from - each flower and make honey at the honeycomb. " - grade4_bee_nestedLoops5_markdown_instruction: "**Challenge:** Collect all of - the nectar from each flower and make honey at each honeycomb. \r\n" - grade4_bee_nestedLoops_assess_markdown_instruction: "**Assessment:** Collect - all of the nectar and make all of the honey using loops.\r\n\r\n**Hint:** - *There are several possible solutions!*" - grade4_frozen_freeplay_markdown_instruction: "You've officially become a master - artist! Create a winter wonderland." - grade4_frozen_functions0_markdown_instruction: "A circle is a special shape. - Can you figure out what number to replace the question marks with to draw - a circle?" - grade4_frozen_functions1_markdown_instruction: "Use the new “dreate a circle” - `function` to create 10 overlapping circles. Don't forget to `jump` forward - between circles." - grade4_frozen_functions1a_markdown_instruction: "Use the new “Create a circle” - block to create 10 overlapping circles. Don't forget to jump forward between - circles." - grade4_frozen_functions2_markdown_instruction: "Now let's create 20 overlapping - circles, turning 18 degrees between each circle." - grade4_frozen_functions3_markdown_instruction: "Here's a ”Create circle” block - that can make circles of different sizes. Can you use this to create a small - circle of size 5 and a larger circle of size 10?" - grade4_frozen_functions4_markdown_instruction: "Intricate snow patterns can - be created with very simple shapes. Can you make a pattern by repeating 5 - circles of size 5 and 5 circles of size 10?" - grade4_frozen_nested_loop_diamonds1_markdown_instruction: "Let’s use a repeat - block to create a rhombus. Like a square, all sides are equal length, but - the angles are different. This one has 60 degree and 120 degree angles instead - of all 90 degree angles." - grade4_frozen_nested_loop_diamonds2_markdown_instruction: "Did you know every - snowflake is a different shape? Let's create a new snowflake by using another - “Repeat\" block to repeat a parallelogram 4 times, turning right by 90 degrees - between each parallelogram." - grade4_frozen_nested_loop_diamonds3_markdown_instruction: "Now, let's create - a new snowflake by using the repeat block to repeat a parallelogram 10 times, - turning right by 36 degrees between each one." - grade4_frozen_nested_loop_rectangle1_markdown_instruction: "Hi, I’m Anna of - Arendelle! Let’s use a repeat block to create a rectangle. This one is 200 - pixels long and 100 pixels tall. All of the corners are 90 degree angles." - grade4_frozen_square_markdown_instruction: "Hi, I’m Anna of Arendelle! Let’s - make a square with the “Repeat” block, which uses fewer blocks. How many times - (???) should the “Repeat” block loop the blocks inside it to make a square?" - grade4_frozen_square_loop1_markdown_instruction: "Hi, I’m Anna of Arendelle! - Let’s make a square with the “Repeat” block, which uses fewer blocks. How - many times (???) should the “Repeat” block loop the blocks inside it to make - a square?" - grade4_frozen_square_loop2_markdown_instruction: "Let's create three squares, - turning after each square. Be sure to turn by 120 degrees before each new - square." - grade4_frozen_square_loop3_markdown_instruction: "Can you create a snowflake - using the “Repeat” block to make a square 10 times, and the “Turn” block to - turn 36 degrees between each square?" - grade4_playlab_freeplay_markdown_instruction: "It's free play time! Have fun - with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> - - Have character 2 patrol and use your arrow keys to make character 1 chase - until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> - - Have a character constantly pop up at a random location. Award points for - clicking the sprite before it disappears. </li>\r\n <li><strong>Best - Guess</strong> - Make both characters disappear, change location to a random - spot, then reappear as a random character. Click on the first one and get - a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" - grade4_playlab_test_markdown_instruction: "<h5><b>\r\nIn our game, how should - we score points? \r\n</b></h5> \r\n<br/>\r\n\r\n1. Add 1 to your `points` - variable each time Dog hits Cat with a piece of pie. <br/> <br/> \r\n2. - Use the `when actor 2 touches anything` event to trigger an update to your - score. You can increment your variable by setting `points = points + 1.` <br/> <br/> - \r\n3. Get your score up to 10 to pass the level.\r\n\r\n<br/><br/>\r\n<h4>\r\n**Note:** - Use the right arrow to throw pie!\r\n</h4>" - grade4_playlab_test2_markdown_instruction: "Here's a function called `jump` - that causes your main character to jump up 100 pixels. \r\n\r\nRun the program - and use the jump function to collect all of the flags by moving the dog with - the arrow keys." - grade4_review_artist1_markdown_instruction: "Hi, I'm an artist. You can write - code to make me draw almost anything. Use a few blocks to make me draw over - the grey lines in the picture. (Each line is 100 pixels long)\r\n\r\n<br> \r\n" - grade4_review_artist2_markdown_instruction: "This house needs a roof! Draw - the triangle. \r\n\r\nHint: all three sides are the same length.\r\n\r\n<img - src=\"https://images.code.org/8b10073fd1a7fe53b4da33ec2229894b-image-1468018903891.gif\" - width=\"300\"/>" - grade4_review_artist3_markdown_instruction: "The jump block moves the artist - without drawing. Draw the dashed line using both the `jump forward` and `move - forward` blocks. Each line is 50 pixels long." - grade4_review_bee1_markdown_instruction: "Now use the `repeat` block to collect - all of the nectar and make all of the honey." - grade4_review_bee3_markdown_instruction: "Such a busy bee!\r\n\r\nHelp Bee - collect all of the nectar and make all of the honey with the fewest blocks - possible." - grade4_scaffolded_project1_markdown_instruction: "It is amazing how much you - have learned! Let's put them together to make a game, step by step.\r\nTo - start, let's set up your game's space and actor. We've put these blocks - in your tool box. Choose a background and map, and pick an actor to be your - game's hero.\r\n\r\n![](https://images.code.org/745931ce34b3c47de19c36009e4a9c48-image-1471464938470.14.47 - PM.png)" - grade4_scaffolded_project2_markdown_instruction: "Now let's get things moving! - Use event handlers and actions to make your hero move.\r\n\r\nWe've added - these blocks to your tool box to help you.\r\n\r\n![](https://images.code.org/6216c0559cfae16005ffb53e6532473b-image-1471472994205.23.54 - PM.png)" - grade4_scaffolded_project3_markdown_instruction: "Now that your game has a - hero, it's time to start adding other actors and assigning them behaviors. - \r\n\r\nAdd two or more additional actors to your game and make them move. - Do you want to have an actor patrol back and forth? Try using a these new - blocks to bring these other components of your game to life!\r\n\r\n![](https://images.code.org/4cfffd476c6129891eb8bde246a711a8-image-1472065288448.00.42 - PM.png)\r\n\r\n**NOTE:** Chasing and fleeing behavior commands are coming - soon!" - grade4_scaffolded_project4_markdown_instruction: "Just getting the actors moving - is a great step, but we need to program some interactions to make this really - feel like a game. A simple way to do this is to add or remove points when - actors collide with projectiles or each other. Find some interesting ways - to change the score in your game.\r\n\r\n*Don't expect to get this right - on the first try. Keep testing your game as you code. You'll not only want - a game that works, but one that is fun to play!*\r\n\r\nWe've added these - blocks to your toolbox:\r\n\r\n![](https://images.code.org/ad0df96aa91c89e3d903dce2fe19517f-image-1472070105051.20.55 - PM.png)" - grade4_scaffolded_project4a_markdown_instruction: "Just getting the actors - moving is a great step, but we need to program some interactions to make this - really feel like a game. A simple way to do this is to add or remove points - when actors collide with projectiles or each other. Find some interesting - ways to change the score in your game.\r\n\r\n*Don't expect to get this right - on the first try. Keep testing your game as you code. You'll not only want - a game that works, but one that is fun to play!*\r\n\r\n![](https://images.code.org/876b13abf8a7984f94342dd9a5c8a8f0-image-1472069578010.42.30 - PM.png)" - grade4_scaffolded_project5_markdown_instruction: "Great job! You have all the - basic components of a working game. Now spend some time making sure the game - works the way you want. Try including a way to win or lose your game.\r\n\r\n*Don't - forget: Keep testing your game as you code. You'll not only want a game that - works, but one that is fun to play!*\r\n\r\nYour toolbox has been re-organized - to make it easier to find what you need. We've also added these blocks:\r\n\r\n![](https://images.code.org/59b92b4c288bd5fc0c3be355c968f3d1-image-1472074578380.27.57 - PM.png)" - grade4_scaffolded_project6_markdown_instruction: "You've finished! Now you - can play your game or share it with your friends and classmates!" - grade5_artist_binary1_markdown_instruction: "Binary is a way of representing - information using only two options. Here, we're going to use the options - \"off\" (represented by the number 0) and \"on\" (represented by the number - 1). \r\n\r\nWe've provided you with a grid of \"pixels\" that you can walk - through and make designs by turning on only certain squares. \r\n\r\n**Can - you have the artist draw \"01010101\" in binary in the first row?**" - grade5_artist_binary10_markdown_instruction: "<img src=\"https://images.code.org/0a30f23ff6138828d053267719d34fa8-image-1444435986654.00.22.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own. - \r\n<br/>\r\n" - grade5_artist_binary2_markdown_instruction: "Here's a function that takes - a binary string of 1's and 0's and instructs the artist to follow them from - left to right, top to bottom. \r\n\r\nThe artist will fill-in the squares - when it sees a 1 and ignore the square when it sees a 0. \r\n\r\n**Run this - code to see how the artist uses binary to draw this pattern.**" - grade5_artist_for_loops1_markdown_instruction: "Use a `for` loop to draw this - triangle that is 50 pixels wide. If you count from 1 to 3 by 1s, you can use - this just like a `repeat` loop." - grade5_artist_for_loops10_markdown_instruction: "**Challenge:** Can you figure - out how to use all of the things you've learned to create this image of polygons, - all with 40 pixel sides?" - grade5_artist_for_loops1a_markdown_instruction: "Try using a `for loop`to create - this triangular design. Don't worry that the numbers are different than the - last puzzle. As long as you turn by the right number of degrees, the artist - will make the correct shape!\r\n\r\n" - grade5_artist_for_loops1b_markdown_instruction: "**Free Play:** Experiment - with the `for` loop and the `counter` variable. \r\n\r\nDrag out a few blocks - and see what happens. \r\n\r\n<br/><br/>\r\n" - grade5_artist_for_loops2_markdown_instruction: "Use a `repeat` inside of a - `for` loop to create this stack of triangles that goes from 50 pixels to 100 - pixels." - grade5_artist_for_loops3_markdown_instruction: "These triangles go from 20 - pixel sides to 200 pixel sides, and each triangle is 20 pixels larger than - the last." - grade5_artist_for_loops4_markdown_instruction: "These squares start at 15 pixels - long, the largest is 300 pixels long, and each square is 15 pixels larger - than the last." - grade5_artist_for_loops5_markdown_instruction: "Just one little change to the - code from the last image can create this drawing. Can you figure out what - that change is?\r\n\r\nHint: You need to remove something!" - grade5_artist_for_loops6_markdown_instruction: "If you turn a little bit more - or less than you normally would for a shape, it creates a neat effect.\r\n\r\nTry - using some of the code from the last level, but turning 89 degrees to create - this twisted square spiral." - grade5_artist_for_loops7_markdown_instruction: "Make three small changes to - the code from the last level to get this! \r\n(This time, the `for` loop - increments by 2)" - grade5_artist_for_loops7a_markdown_instruction: "Take the angle down to 72 - degrees to get a spiraled pentagon." - grade5_artist_for_loops7b_markdown_instruction: "Use the counter inside the - `set alpha` block to get this faded center. \r\n(This hexagon pattern was - made using a 60 degree turn.)" - grade5_artist_for_loops8_markdown_instruction: "Remember back in a previous - stage when we used a variable to control the number of sides in a shape? We - are going to do the same thing with the `counter` variable now. \r\n\r\nThis - pattern starts with a triangle and adds one side at a time until it draws - a decagon (10 sides). Each side should be 100 pixels long. \r\n\r\nHow will - you use the `counter` variable from the `for` loop to recreate this drawing?" - grade5_artist_for_loops9_markdown_instruction: "Let's put it all together! \r\n\r\nUsing - your knowledge of `for` loops and the `counter` variable, create this drawing - where each shape has two more sides than the last. Make sure that each side - is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little - of the code has been provided for you." - grade5_artist_for_loopsfreeplay11_markdown_instruction: "<br/><br/>\r\n<img - src=\"https://images.code.org/9b5897e059bb29bd2faf8504659a3cfc-image-1440719685627.49.33.png\" - width=\"250px\"/> \r\n<br/><br/>\r\n**Free-Play Inspiration:** You've now - learned everything you need to know to make a pattern like this! If this picture - inspires you, try to make something similar. Otherwise, create something all - your own." - grade5_artist_for_loopsfreeplay12_markdown_instruction: "**Free Play:** Try - using the `counter` variable with other drawing elements to make magical images - like this one.\r\n\r\n<img src=\"https://images.code.org/7910db8adf2ec7e4c5fdad0101c68368-image-1475911466143.24.03.png\" - width=\"400px\"/>" - grade5_artist_freeplay_markdown_instruction: "Create your own project! This - creation will be saved to your Projects dashboard so that you can easily edit - it any time!" - grade5_artist_functionparameters10_markdown_instruction: "<img src=\"https://images.code.org/1df195df9d808f0dd539bef0f5c2958b-image-1443049871563.02.54.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! \r\n\r\nIf this picture inspires - you, try to make something similar. Otherwise, create something all your own.\r\n\r\nNotice: - We've used the `set alpha` block to make the \"petals\" fade toward the outside." - grade5_artist_functionparameters11_markdown_instruction: "**Freeplay:** Below - there are functions you've written, and more for you to play with. Play with - the pen width to see how different your drawings look!" - grade5_artist_functionparameters7_markdown_instruction: "This image is similar - to the last. \r\n\r\nCan you use a `for` loop with your function to make - this design?" - grade5_artist_functionparameters8_markdown_instruction: "Use the function from - the last puzzle to draw this series of shapes. \r\n\r\n\r\nThe triangle has - 21 pixel sides, and the sides in each following shape are 7 pixels longer - than the last. \r\nUse the `multiplication`block to make this all happen - with just one function call.\r\n<hr/>\r\nBe sure to jump 100 pixels between - polygons. <br>\r\nThe multipication block looks like this ![](https://images.code.org/55e293447c6b26bbbcf29cda2036706b-image-1481322763779.png)\r\n\r\n" - grade5_artist_functionparameters9_markdown_instruction: "**Challenge:** Edit - `draw a spiral edge` to use `length` and `sides` parameters, then recreate - these shapes.\r\n\r\n- The square goes from 3 pixels to 90 pixels.\r\n- The - hexagon goes from 3 pixels to 100 pixels.\r\n- The triangle goes from 3 pixels - to 105 pixels." - grade5_artist_functionparameters9a_markdown_instruction: "Finish off the `draw - a spiral edge` function to also ask for a minimum length for the center of - the spiral.\r\n\r\n- The smallest side in the center of this square is 50 - pixels long\r\n- The longest side at the outside of this spiral is 200 pixels - long\r\n" - grade5_artist_functionparameters9b_markdown_instruction: "Can you figure out - how to make this drawing using the function that you just created?\r\n\r\n- - The red spiral goes from 50 to 200 pixels\r\n- The blue spiral goes from 25 - to 125 pixels\r\n- The green spiral goes from 100 to 300 pixels\r\n" - grade5_artist_functionparameters_6_markdown_instruction: "Great job! Now edit - this function to add a parameter for the number of sides in your polygon.\r\n\r\nThe - sides of all the shapes are 100 pixels long." - grade5_artist_parameters_squares1_markdown_instruction: "Click \"edit\" to - fill in the function definition of `draw a square` and add a parameter. \r\nIt - should take a length parameter just like the triangle. \r\n\r\n**This time, - draw 3 squares:** 25, 50 and 75 pixels in length. The lefthand corners are - each 100 pixels away from the last." - grade5_artist_parameters_squares1a_markdown_instruction: "Today, we're going - to try out a different, more powerful function editor. See if you can figure - out how to edit the `draw a square` function to find the bugs." - grade5_artist_parameters_squares2_markdown_instruction: "Now try creating the - function from scratch! \r\n\r\nCreate a function called `draw a square` and - use it to outline these four boxes. \r\nMake sure to add a parameter for - `length`!\r\n\r\n<hr/>\r\nStarting from the upper right, the box widths are - 50, 100, 150, and 200." - grade5_artist_parameters_squares2a_markdown_instruction: "Edit the function - to accept a parameter called `length`. \r\n\r\nThe sides of each square should - be 25 pixels larger than the last. The first square has 25 pixel sides. Replace - the '???' with the correct values to draw the picture." - grade5_artist_parameters_stars1_markdown_instruction: "That last one is tough - if you only use loops. Let's try one more time and see if this new 'function' - makes it easier to **draw a star**." - grade5_artist_parameters_triangles1_markdown_instruction: "Today, we're going - to try out a different, more powerful function editor. See if you can figure - out how to edit the `draw a square` function to find the bugs." - grade5_artist_parameters_triangles1a_markdown_instruction: "Today, we're going - to try out a different, more powerful function editor. See if you can figure - out how to edit the `draw a triangle` function to find the bugs." - grade5_artist_parameters_triangles1aa_markdown_instruction: "Click \"edit\" - to fill in the function definition of `draw a triangle` and add a parameter. \r\nIt - should take a length parameter just like the triangle. \r\n\r\n**This time, - draw 3 triangles:** 25, 50 and 75 pixels in length. The lefthand corners are - each 100 pixels away from the last." - grade5_artist_parameters_triangles2_markdown_instruction: "Can you complete - this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than - the last. \r\nThe first triangle has 25 pixel sides." - grade5_artist_parameters_triangles2a_markdown_instruction: "Do you notice anything - different about these function blocks? Click “Run” to see what happens." - grade5_artist_parameters_triangles3_markdown_instruction: "The code for this - triangle function is broken.\r\n\r\nCan you edit the function to fix it, and - then make triangles of length 25, 50, and 75?" - grade5_artist_parameters_triangles4_markdown_instruction: "The code for this - triangle function is broken. \r\n\r\nCan you edit the function to fix it, - and then make triangles of length 25, 50, and 75?" - grade5_artist_parameters_trianglesy_markdown_instruction: "The code for this - triangle function is broken.\r\n\r\nCan you edit the function to fix it, and - then make triangles of length 25, 50, and 75?" - grade5_artist_variables_freeplay10_markdown_instruction: "**Free Play:** Experiment - with the number of sides this shape has. Can you change the algorithm so that - the overall size of the shape stays the same, no matter how many sides it - has? " - grade5_artist_variables_freeplay14_markdown_instruction: "**Free Play**: Check - it out! Now your algorithm is nested within one more loop. Experiment with - changing the values of your two variables to draw cool patterns.\r\n\r\nFor - even more effect, try playing with color! Use random colors inside loops - to see how it changes your design." - grade5_artist_variables_freeplay15_markdown_instruction: "<img src=\"https://images.code.org/b5e28b084cb331ee030ea3853ed921bd-image-1440060815818.51.21.png\" - width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything - you need to know to make a pattern like this! If this picture inspires you, - try to make something similar. Otherwise, create something all your own. " - grade5_artist_variables_freeplay16_markdown_instruction: "Still playing? \r\n\r\nHere - is a blank canvas where you can create whatever you want!\r\n\r\n<hr/>\r\n<h3>If - you're looking for ideas, try one of these:</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/2e8a6853ccb3ffe9bc6d25aaeea75514-image-1471047821651.10.45 - PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/0b63705c28ac282637a3a5b3cede8608-image-1471047826162.18.02 - PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>" - grade5_artist_variables_hexagons1_markdown_instruction: "Let's try it again! - \r\n\r\nCan you set the `length` variable to 60 to make this cool design with - hexagons?" - grade5_artist_variables_letterT11_markdown_instruction: "Here’s some more complicated - code using the same concepts from the last puzzle - what should you set the - `sides` variable to in order to draw this picture made of squares?\r\n\r\n<p - style=\"font-size:small; padding: 15px 15px 15px 40px; background-color:#dcf3f3; - border-radius:10px;\">\r\n\tJust for fun: Try using a few different numbers - to see what happens to the pattern!\r\n</p>" - grade5_artist_variables_octagons13_markdown_instruction: "When a shape has - lots of sides, each side needs to be shorter if you want the whole pattern - to fit on the screen. \r\n\r\nLet's recreate the algorithm for this amazing - pattern, but instead of manually setting the `length` variable, let's use - a math block with the `sides` variable inside to make sure that each shape - fits correctly. \r\n\r\nThe perimeter of each polygon is 300 pixels." - grade5_artist_variables_pentagon8_markdown_instruction: "Use what you learned - in the last puzzle to create this hexagon using the `sides` variable.\r\n\r\nSee - how you could change just one value to draw a triangle, square, pentagon, - or octagon?" - grade5_artist_variables_pentagon9_markdown_instruction: "Now, recreate the - algorithm from the last level and create a pentagon with sides of length 150." - grade5_artist_variables_pentagons1_markdown_instruction: "Draw this pattern - of pentagons with 100 pixel sides by setting the right value for `length` - and dropping the `length` variable into all of the the correct places. \r\n\r\nSee - how you only have to set the value for `length` once, and the code uses the - right value everywhere?" - grade5_artist_variables_pentagons12_markdown_instruction: "Let's set the `sides` - variable to 5. The more sides we add to this algorithm, the bigger this whole - pattern gets! \r\n\r\n<br/>\r\nNotice that there is another variable called - `length`. \r\nWe can now use that variable wherever we have a `move forward` - block. \r\n\r\nSet the `length` variable to 75 for this shape." - grade5_artist_variables_rectangle6_markdown_instruction: "Now I want to make - a rectangle that is twice as tall as it is wide. We've got a variable called - `width` that needs to be set to 100. Can you use the math blocks to complete - the code?" - grade5_artist_variables_square7_markdown_instruction: "Here’s some code that - can draw any regular polygon. \r\n\r\nThere’s a new variable called `sides` - that is set to 4. \r\n\r\nCan you use the `sides` variable (along with the - math block) to turn the right amount regardless of how many sides are in the - polygon?" - grade5_artist_variables_triangles1_markdown_instruction: "Let's draw an equilateral - triangle. \r\n\r\nIt has to be exactly 50 pixels long on each side.\r\n\r\n" - grade5_artist_variables_triangles2_markdown_instruction: "Instead of using - `move forward by 150`, the `move` block is now referencing a variable called - `length`. Can you set `length` to 150 to draw this new triangle?" - grade5_artist_variables_triangles3_markdown_instruction: "Drag a number block - to the `set length` block and to the `repeat _ times` block to draw a set - of 50 pixel triangles. " - grade5_bee_for_loops10_markdown_instruction: "If your loop is counting down, - the increment is **subtracted** from your counter variable each time through. - \r\n\r\nWhat should your increment be to collect 15, then 12, then 9, 6, 3 - nectar?" - grade5_bee_for_loops11_markdown_instruction: "**Challenge:** Take what you've - learned about `for` loops and try to solve this problem. \r\n\r\nRemember: - You may have to run through solutions multiple times before you figure out - all of the steps.\r\n" - grade5_bee_for_loops2_markdown_instruction: "Add the code necessary to make - sure the bee collects all the nectar.\r\n\r\nLook at how much code you need - for this puzzle! (We'll learn a simpler way in the next puzzle.)" - grade5_bee_for_loops3_markdown_instruction: "Ah, the `for` loop makes this - much easier! \r\n\r\nTry this puzzle using the `for` loop with `counter` - variable and see how much shorter your code becomes." - grade5_bee_for_loops4_markdown_instruction: "Help the bee collect all of the - nectar." - grade5_bee_for_loops5_markdown_instruction: "Now we need to `move forward` - `counter` times, then `get nectar` `counter` times. Can you use two `repeat` - loops to solve this challenge?" - grade5_bee_for_loops6_markdown_instruction: "You can also use a `for loop` - to count down. Try gathering this nectar by counting down from 5 to 1 by 1." - grade5_bee_for_loops7_markdown_instruction: "The last number in your `for` - loop is called the **\"increment\"**. Each time the loop is run, the counter - variable changes by the value of the increment.\r\n\r\nTry collecting these - flowers using an increment of 2." - grade5_bee_for_loops8_markdown_instruction: "You've got this! \r\n\r\nWhat - should your increment be to collect 3, 6, 9, 12, 15 nectar?\r\n\r\n" - grade5_bee_for_loops9_markdown_instruction: "Now, let's combine the `counter` - variable with a math block! \r\n\r\nHow can you use the `counter` variable - to navigate this garden with the fewest number of blocks possible?" - grade5_bee_parameters_new1_markdown_instruction: "Check beneath the clouds - to see if the flowers have any nectar." - grade5_bee_parameters_new2_markdown_instruction: "Here's some code that solves - the last puzzle. \r\nLet's turn it into a function, then call the function - to check this row for nectar. \r\n<hr/>\r\nThis may seem like a strange step - now, but it will be really helpful soon!" - grade5_bee_parameters_new3_markdown_instruction: "Time to put the function - to the test! \r\n\r\nLet's see if it makes collecting these three rows of - nectar any easier." - grade5_bee_parameters_new4_markdown_instruction: "*\"How is your function holding - up?\"* \r\n\r\nWe need to make some adjustments here. Click \"edit\" to - add a `length` parameter to the function so that it will still work when the - row is a different length." - grade5_bee_parameters_new5_markdown_instruction: "*\"You're doing great so - far!\"*\r\n\r\nLet's use this function to collect a lot of nectar." - grade5_bee_parameters_new6_markdown_instruction: "You can make code shorter - and more efficient when you combine functions with other programming elements. \r\n<hr/>\r\n<h3>What - blocks can you use with your function to build a short and sweet solution - to this puzzle?</h3>" - grade5_bee_parameters_new7_markdown_instruction: "**Challenge:** Something - looks a little different. Can you modify your function to make honey as well?" - grade5_bee_parameters_new8a_markdown_instruction: "Use your new function to - solve this spiral." - grade5_bee_parameters_new9a_markdown_instruction: "Use your new function to - solve this spiral." - grade5_pixelation_markdown_instruction: "# Make your own image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* - Encode an image of anything you like using `binary`.\r\n* The binary language - will be represented with `0` and `1` only.\r\n* You might want to do some - planning and sketching with graph paper first. \r\n* Depict something, perhaps - your name written out, your initials, an icon or logo of some sort.\r\n* Get - creative! The image doesn't have to be a perfect square, it can be long and - skinny." - grade5_playlab_freeplay_markdown_instruction: "It's free play time! Have fun - with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> - - Have character 2 patrol and use your arrow keys to make character 1 chase - until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> - - Have a character constantly pop up at a random location. Award points for - clicking the sprite before it disappears. </li>\r\n <li><strong>Best - Guess</strong> - Make both characters disappear, change location to a random - spot, then reappear as a random character. Click on the first one and get - a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" - grade5_playlab_parameters_points1_markdown_instruction: "Here's the same game - but most of the code is hidden. We've added a new function called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nAdd - a new parameter called `points` to the `player_score` function. \r\n<br/>\r\nThe - `score_points` function should be able to both add and remove points from - `player_score` depending on which actor is hit.<br>\r\nChanging the score - by 1 will add a point, while changing the score by -1 will subtract a point.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: When - you're done, click \"Run\" to play. When Dog scores 6 points, you will move - on to the next puzzle.*" - grade5_playlab_variables1_markdown_instruction: "This time you don't have - to write any code, just hit `Run` to play the game! \r\n\r\n<br/>\r\nIn this - game, you're the dog who is trying to collect more flags than the cat. Use - the down arrow to control the dog. Press `Finish` when you're done playing." - grade5_playlab_variables10_markdown_instruction: "Edit the the `patrol` function - to add an `actor` parameter, so that we can call it for each of the actors - on the screen. Remember, the actors correspond to numbers 1, 2, and 3." - grade5_playlab_variables11_markdown_instruction: "Add another parameter called - `speed` to the `patrol` function. Try using a `set speed` block with the new - `speed` parameter to help Penguin get both flags before the other sprites - even get one." - grade5_playlab_variables12_markdown_instruction: "Let's have some fun! Look - at the code provided to see if you can figure out what each block does. \r\n\r\nWhen - you're done, use the arrow keys to control Dog and collect all of the flags.\r\n\r\n**NOTE:** - You don't need to make any changes to the program" - grade5_playlab_variables13_markdown_instruction: "Use the `when actor touches` - block to send Dog back to the top-left ONLY if Dog touches any of the other - actors." - grade5_playlab_variables14_markdown_instruction: "It's free play time! Have - fun with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> - - Have character 2 patrol and use your arrow keys to make character 1 chase - until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> - - Have a character constantly pop up at a random location. Award points for - clicking the sprite before it disappears. </li>\r\n <li><strong>Best - Guess</strong> - Make both characters disappear, change location to a random - spot, then reappear as a random character. Click on the first one and get - a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" - grade5_playlab_variables1ask_markdown_instruction: "This time, when you press - 'run', you will see a 'prompt' asking you for a number. This number will - be stored in a variable used to set the dog's speed.\r\n\r\n\r\nPay attention - to how this program is written!" - grade5_playlab_variables2_markdown_instruction: "The race in that last puzzle - wasn't very fair! Change the `dog_speed` variable to make sure you can collect - more flags than Cat. The first to collect 10 flags wins!" - grade5_playlab_variables3_markdown_instruction: "Here's a new kind of game! - \r\n\r\nYou don't need to change anything on this level.\r\n\r\n**Directions:** - Use the left and right arrows to move, and the up arrow to jump. See if you - can collect all of the flags." - grade5_playlab_variables4_markdown_instruction: "Now we're using a variable - called `height` to control how high the dog can jump. Update the `height` - variable so that the dog can jump high enough to reach all the flags. \r\n" - grade5_playlab_variables6_markdown_instruction: "In our game, how should we - score points?\r\n\r\n1. Add 1 to your `points` variable each time Dog hits - Cat with a piece of pie.\r\n2. Use the `when actor 2 touches anything` event - to trigger an update to your score. You can increment your variable by setting - `points = points + 1.`\r\n3. Get your score up to 10 to pass the level.\r\n\r\n**Note:** - Use the right arrow to throw pie!" - grade5_playlab_variables6ask_markdown_instruction: "This time, you need 100 - points to win! Don't worry though, you can choose how many points you earn - each time you score a hit!\r\nTry adding the `ask` block and changing the - number 1 out for the variable `value`.\r\n\r\n**Note:** Use the right arrow - to throw pie!" - grade5_playlab_variables7_markdown_instruction: "Nice, now let's make sure - this game isn't too easy to play!\r\n\r\nAny time Dog (actor 1) gets hit - by a sandwich from Cat (actor 2), you should lose a point.\r\n\r\nStart with - 10 points so it's not too hard. Let your score drop down from 10 to 0 to - pass the level." - grade5_playlab_variables71_markdown_instruction: "Here's our game from an - earlier stage but most of the code is hidden. We've added a new function - called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nEdit the function - so that a new parameter called `points` is added to `player_score`. \r\n<br/>\r\nThe - variable `player_score` should increase each time Dog tags Cat with pie, and - decrease each time that Cat tags Dog with a sandwich.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: - When you're done, click \"Run\" to play. When Dog scores 6 points, you will - move on to the next puzzle.*" - grade5_playlab_variables81_markdown_instruction: "We've added one last function + CSD - Predict - Array Length List Printing_markdown_instruction: "# For Loop + - Using List Length in For Loop\r\n\r\nOne of the most common ways that for + loops are used is with lists. In this example the condition is dependent on + list. \r\n\r\nWhat will this print in the console?" + CSD - Predict List Accessing_markdown_instruction: "# Predict\r\n\r\nThe code + below has 4 things it will log to the console. What do you think will print + in the console as a result of this code?\r\n" + CSD - for loop - on off_markdown_instruction: "# For Loops with Color LEDs\r\n\r\nFor + loops can make doing something to all the `colorLed`s easier. \r\n\r\n**Starter + Program:** There are two buttons one to turn all the `colorLeds` on and one + to turn them all off. \r\n\r\nCan you fill in the functions for each of these + task using a for loop to write your algorithm." + CSD For Loops - Check For Understanding_markdown_instruction: "# Check In\r\n\r\nIn + the box below explain the 3 different parts of the for loop. Why is each important?\r\n" + CSD Hackathon Pt 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe + blocks you've been provided are those that a student in CS Discoveries would + likely have available after a week or so of using Game Lab. No sprites yet, + but you've **just been introduced to some powerful programming constructs + like generating random numbers, storing values in a variable, and looping.** + You'll also be pretty familiar with the drawing commands at this point.\r\n\r\n# + Do This\r\n\r\n* Using only the tools provided to you, **make something awesome!!**\r\n* + The likely project at this point would be an **animated card** but feel free + to go other directions if you like.\r\n* **Avoid complex variable arithmetic** + if you can. You \"don't know it\" yet.\r\n* **Avoid referencing the iterator + in your for loops**. At this point it's just a repeat loop." + CSD Hackathon Pt 2_markdown_instruction: "# MS Hackathon: Sprites and Interactivity\r\n\r\nYou + now can **create sprites, add images, manipulate their properties, and perform + simple variable arithmetic to update their values (e.g. `sprite.scale = sprite.scale + + 1;`)**. You've also been introduced to conditional statements and know + how to use them to get some interactive behavior with the mouse and keyboard.\r\n\r\n# + Do This\r\n\r\n* Using only the tools provided to you **make something awesome!**\r\n* + The likely target project here might be a **simple game** or **interactive + visualization**.\r\n* You don't yet know about **groups, loops, collisions**, + or more magical properties like **velocity or rotationSpeed**\r\n\r\n**These + commands are not in the block palette but feel free to use**\r\n\r\n* `mySprite.mouseActive + = true;` will make your sprite track mouse events\r\n* `mySprite.mouseIsOver` + and `mySprite.mouseIsPressed` are booleans you can now use to sense mouse-to-sprite + interactions.\r\n\r\n**To add sprites to images follow the pattern below**\r\n\r\n```\r\nvar + spriteImage, sprite;\r\n\r\n//You'll need to create a preload function to + load the image.\r\nfunction preload(){\t\t\t\r\n spriteImage = loadImage(\"imageURL\");\r\n}\r\n\r\n//Create + your sprite and add the image\r\nfunction setup(){\r\n sprite = createSprite(200,200,10,10);\r\n sprite.addImage(\"someName\", + spriteImage);\r\n}\r\n\r\n//Draw your sprites.\r\nfunction draw(){\r\n\tbackground(255,255,255);\r\n\tdrawSprites();\r\n}\r\n```" + CSD Hackathon Week 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe + blocks you've been provided are those that a student in CS Discoveries would + likely have available after a week or so of using Game Lab. No sprites yet, + but you've **just been introduced to some powerful programming constructs + like generating random numbers, storing values in a variable, and looping.** + You'll also be pretty familiar with the drawing commands at this point.\r\n\r\n# + Do This\r\n\r\n* Using only the tools provided to you, **make something awesome!!**\r\n* + The likely project at this point would be an **animated card** but feel free + to go other directions if you like.\r\n* **Avoid complex variable arithmetic** + if you can. You \"don't know it\" yet.\r\n* **Avoid referencing the iterator + in your for loops**. At this point it's just a repeat loop." + CSD Hackathon Week 2_markdown_instruction: "# MS Hackathon: Sprites and Interactivity\r\n\r\nYou + now can **create sprites, add images, manipulate their properties, and perform + simple variable arithmetic to update their values (e.g. `sprite.scale = sprite.scale + + 1;`)**. You've also been introduced to conditional statements and know + how to use them to get some interactive behavior with the mouse and keyboard.\r\n\r\n# + Do This\r\n\r\n* Using only the tools provided to you **make something awesome!**\r\n* + The likely target project here might be a **simple game** or **interactive + visualization**.\r\n* You don't yet know about **groups, loops, collisions**, + or more magical properties like **velocity or rotationSpeed**\r\n\r\n**These + commands are not in the block palette but feel free to use**\r\n\r\n* `mySprite.mouseActive + = true;` will make your sprite track mouse events\r\n* `mySprite.mouseIsOver` + and `mySprite.mouseIsPressed` are booleans you can now use to sense mouse-to-sprite + interactions.\r\n\r\n**To add sprites to images follow the pattern below**\r\n\r\n```\r\nvar + spriteImage, sprite;\r\n\r\n//You'll need to create a preload function to + load the image.\r\nfunction preload(){\t\t\t\r\n spriteImage = loadImage(\"imageURL\");\r\n}\r\n\r\n//Create + your sprite and add the image\r\nfunction setup(){\r\n sprite = createSprite(200,200,10,10);\r\n sprite.addImage(\"someName\", + spriteImage);\r\n}\r\n\r\n//Draw your sprites.\r\nfunction draw(){\r\n\tbackground(255,255,255);\r\n\tdrawSprites();\r\n}\r\n```" + CSD U1 - Image Filter Demo show Binary_markdown_instruction: "# Oh Noes\r\nThis + tree should be green, but it's blue instead. Can you use the filter blocks + to change all of the blue pixels to green?" + CSD U1 - Image Filter Demo_markdown_instruction: "# Oh Noes\r\nThis tree should + be green, but it's blue instead. Can you use the filter blocks to change + all of the blue pixels to green?" + CSD U1 - PixFilter 1x1 Filter_markdown_instruction: "# Filtering Images\r\nIf + you've ever used Instragram you've probably encountered an image filter. + Image filters read in each pixel, process it in some way, and the return the + filtered pixel. In this tool we're going to start by filtering just a single + pixel before moving on to a full image.\r\n\r\nYou’ll notice there are three + drop downs under the picture. A red replace, a green replace, and a blue replace. + Next to it are drop downs for the colors. How many bits are we working with? + Yes, we’re working with 3. We also learned that the bits control the colors. + First bit controls R, second bit controls G, third bit controls B.\r\n\r\n\r\n# + Do This\r\nTry changing the color drop downs next to replace. Based on how + the bits change, can you formulate what replace is doing? Talk to your partner + and see if you can figure it out.\r\n\r\n" + CSD U1 - PixFilter 1x1 intro_markdown_instruction: "# 3 Bit Colors\r\nEach + pixel is a square on a screen that emits light. Each pixel can have a certain + number of bits assigned to it, and bits per pixel determine the colors that + can be rendered.\r\n\r\nIn this tool we're using 3 bits to define the one + large black pixel. The first bit affects the red tint. The second bit affects + the green tint. The third bit affects the blue tint.\r\n\r\n# Do This\r\n\r\n* + Click the \"Run\" button to start the widget\r\n* Click on the light bulbs + to turn on or off each color and see what happens to your pixel\r\n* See how + many different colors you can create with just three bits\r\n* Write down + the binary associated with each color you come up with\r\n" + CSD U1 - PixFilter Filter Intro_markdown_instruction: "# Filtering Pixels\r\nIf + you've ever used Instagram you've probably encountered an image filter. + Image filters read in each pixel, process it in some way, and the return the + filtered pixel. In this tool we're going to start by filtering just a single + pixel before moving on to a full image.\r\n\r\n# Do This\r\n\r\n* Try changing + the color drop downs in the Filter section\r\n* Click on the top row of lightbulbs + in the Diagram section to see how the filter will convert the input (top bulbs) + to the output (bottom bulbs)\r\n* Look at how the numbers in the Binary section + reflect changes to the colors\r\n* Based on how the bits change, can you formulate + what replace is doing? Talk to your partner and see if you can figure it out.\r\n* + Complete the Level 2 table in your Activity Guide\r\n\r\n" + CSD U1 - PixFilter Filter Revisit_markdown_instruction: "# Combining Filters\r\nNow + that you've played with filtering a single color channel, it's time to see + what happens if we filter more than one color.\r\n\r\n# Do This\r\n\r\n* Using + the color dropdowns in the filter section, build a filter that changes the + value of more than one color channel\r\n* Click on the top row of lightbulbs + in the Diagram section to see how the filter will convert the input (top bulbs) + to the output (bottom bulbs)\r\n* Look at how the numbers in the Binary section + reflect changes to the colors\r\n* Complete the Level 4 table in your Activity + Guide\r\n\r\n" + CSD U1 - PixFilter FreePlay_markdown_instruction: "# Free Play\r\n\r\nDo as + you will, make something awesome" + CSD U1 - PixFilter Full_markdown_instruction: "# Instructions Go Here" + CSD U1 - PixFilter Mario_markdown_instruction: "# Combining Filters\r\n\r\nSometimes + you'll need to filter more than one pixel to get the color change that you + want.\r\n\r\n# Do This\r\nCheck out Mario, he's lookin' pretty good in his + red hat and overalls. Your job it to set up the filter so he looks like Luigi, + with a green hat and overalls.\r\n\r\n* First, determine which bit(s) needs + to change in order to the change you want\r\n* Once you've figured out which + bit needs changing, set the filter dropdown appropriately\r\n* After you've + got the filter working so that, try to come up with other filters that change + *only* his hat and overalls - how many different clothing colors can you come + up with?\r\n\r\n_How many tries did it take you to find the right filter?_\r\n\r\n\r\n\r\n" + CSD U1 - PixFilter Mushroom_markdown_instruction: "# Filtering Images\r\nNow + that we've seen how a single pixel can be filtered to change its color, let's + try applying a filter to an image made of multiple pixels. The filter you + create will be applied to each pixel in the image - and you still have the + light bulbs available to experiment with how your filter will work with individual + colors.\r\n\r\n\r\n# Do This\r\nHere's a picture of a red mushroom - you're + going to try and turn it into a yellow mushroom.\r\n\r\n* First, determine + which bit needs to change in order to turn red into yellow\r\n* Once you've + figured out which bit needs changing, use the filter dropdowns to make all + of the red areas turn yellow\r\n* After you've got the filter working so + that the red has turned yellow, see if you can come up with filters that turn + the mushroom other colors\r\n\r\n_How many tries did it take you to find the + right filter?_\r\n\r\n\r\n\r\n" + CSD U1 - PixFilter UnFilter_markdown_instruction: "# UnFiltering\r\n\r\nBit + filters can be used to _undo_ filtering as well. Here's an image of a bird + that's been filtered from it's original colors. Can you get it back to normal?\r\n\r\n# + Do This\r\n\r\n<img src=\"https://images.code.org/c15636bda16e8792c59ac955332e37a5-image-1471372091393.22.56.png\" + style=\"float:right; width: 200px\"/>\r\nHere's what our bird should look + like. Use the filter to get him back to normal.\r\n\r\n* Decide which colors + (and so which bits) you need to change. You might need to write your thoughts + with pencil and paper.\r\n* Once you know which bits need changing, set the + filter dropdown appropriately to test your answer\r\n* After you've fixed + the image, write down both your process and your final filter in the Level + 6 section of your Activity Guide\r\n\r\n_How many tries did it take you to + find the right filter?_\r\n" + CSD U1 - Single Pixel_markdown_instruction: "# 3 Bit Colors\r\nEach pixel is + a square on a screen that emits light. Each pixel can have a certain number + of bits assigned to it, and bits per pixel determine the colors that can be + rendered.\r\n\r\nIn this tool we're using 3 bits to define the one large + blue pixel pixel. The first bit affects the red tint. The second bit affects + the green tint. The third bit affects the blue tint.\r\n\r\n# Do This\r\n\r\n* + Click on the light bulbs to turn on or off each color and see what happens + to your pixel\r\n* See how many different colors you can create with just + three bits\r\n" + CSD U2 layout style body_markdown_instruction: "<div style=\"float: right; + height: 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What + is a CSS rule-set?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a selector?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a declaration block?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**what + is a property-value pair?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new rule-set?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n</div>\r\n# The Body Element\r\n\r\n* Find the `body` + rule-set in \"style.css\"\r\n* Discuss with a partner what you think will + happen if you add `text-align`, `color`, or other text properties to the `body` + rule set.\r\n* Try out some different properties to check your guesses." + CSD U2 layout style textalign_markdown_instruction: "<div style=\"float: right; + height: 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What + is a CSS rule-set?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a selector?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a declaration block?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**what + is a property-value pair?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new rule-set?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n</div>\r\n# Text Align\r\n\r\n* Find the `text-align` + property in \"style.css\" in the `p` rule-set.\r\n* Change the text-align + value to `center` or `right`.\r\n* Add a `text-align` rule in the `body` rule + set" + CSD U2 RGB intro_markdown_instruction: "# RGB Colors\r\n\r\nAll colors, whether + they have names or not, can be described by the level of red, green, and blue + light it takes to make them. This is called an RGB value (short for Red-Green-Blue). You + can use the widget on your left to try out different RGB values and see what + colors they make.\r\n\r\n* **Click \"Run\" to start the widget on the left,** + and use the sliders to adjust the levels of red, green, and blue light.\r\n* + For each of the colors below, match it to its RGB value.\r\n\r\nA) red: 216, + green: 191, blue: 216 - rgb(216,191,216)\r\n\r\nB) red: 255, green: 239, blue: + 213 - rgb(255,239,213)\r\n\r\nC) red: 255, green: 140, blue: 105 - rgb(255,140,105)\r\n\r\nD) + red: 123, green: 104, blue: 238 - rgb(123,104,238)\r\n\r\nE) red: 107, green: + 142, blue: 35 - rgb(107,142,35)\r\n\r\n\r\n<div style=\"font-size: 16px\">\r\n<br + />\r\n<details>\r\n<summary>**Why do red and green make yellow?**</summary>\r\n<p>When + you mix paint, red and green make brown, but RGB color mixing uses light instead + of paint, so the colors mix differently. RGB uses _additive color mixing_. In + additive color mixing, red and green make yellow, red and blue make magenta, + and blue and green make cyan. When you mix the three primary colors together + (red, green, and blue), they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia + - Additive Color</a>\r\n</p> </details>\r\n<details>\r\n<summary>**How many + colors can I make with RGB color mixing?**</summary>\r\n<p>\r\nYou can make + make over sixteen million different colors with RGB color mixing.\r\n</p></details>\r\n</div>" + CSD U2 RGB others_markdown_instruction: "# Spring and Autumn Colors\r\n\r\nChoose + RGB values for spring and autumn colors.\r\n\r\n* Click \"Run\" to start the + widget.\r\n* Adjust the levels until you find a spring color you like, then + write down the values on your activity guide.\r\n* Do the same for an autumn + color. You will need the RGB values for the next activity.\r\n\r\n\r\n<div + style=\"font-size: 16px\">\r\n<br />\r\n<details><summary>**Where can I see + the whole range of color types?**</summary>\r\nYou can find many options for + colors at <a href=\"http://www.w3schools.com/colors/colors_picker.asp\">W3Schools + - HTML Color Picker</a></details>\r\n<details>\r\n<summary>**Why do red and + green make yellow?**</summary>\r\n<p>When you mix paint, red and green make + brown, but RGB color mixing uses light instead of paint, so the colors mix + differently. RGB uses _additive color mixing_. In additive color mixing, + red and green make yellow, red and blue make magenta, and blue and green make + cyan. When you mix the three primary colors together (red, green, and blue), + they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia + - Additive Color</a></p> </details>\r\n<details>\r\n<summary>**How many colors + can I make with RGB color mixing?**</summary>\r\n<p>You can make make over + sixteen million different colors with RGB color mixing.</p></details>\r\n</div>" + CSD U2 RGB summer_markdown_instruction: "# Summer Color\r\n\r\nFind the RGB + values for a summery yellow color.\r\n\r\n* Click \"Run\" to start the widget.\r\n* + Adjust the levels until you match the summery yellow at the bottom of the + widget.\r\n* Write the RGB values on your activity guide. You will need them + in the next activity.\r\n\r\n\r\n<div style=\"font-size: 16px\">\r\n<br />\r\n<summary>**Why + do red and green make yellow?**</summary>\r\n<p>When you mix paint, red and + green make brown, but RGB color mixing uses light instead of paint, so the + colors mix differently. RGB uses _additive color mixing_. In additive color + mixing, red and green make yellow, red and blue make magenta, and blue and + green make cyan. When you mix the three primary colors together (red, green, + and blue), they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia + - Additive Color</a></p> </details>\r\n<details>\r\n<summary>**How many colors + can I make with RGB color mixing?**</summary>\r\n<p>You can make make over + sixteen million different colors with RGB color mixing.</p></details>\r\n</div>" + CSD U2 RGB winter_markdown_instruction: "# Winter Color\r\n\r\nIn the next + few levels, you'll be finding seasonal colors for a website. Here, you'll + need to find the RGB values for a wintery blue color.\r\n\r\n* Click \"Run\" + to start the widget.\r\n* Adjust the levels until you match the wintery blue + color at the bottom of the widget.\r\n* Write the RGB values on your activity + guide. You will need them in the next activity.\r\n\r\n\r\n<div style=\"font-size: + 16px\">\r\n<br />\r\n<details><summary>**How do I make a color lighter?**</summary>\r\n<p>To + make a color lighter, you need to add more light (increase the level of the + slider). If you have already added the maximum amount of blue light, you + will need to add more red and green light to make your blue lighter.</p></details>\r\n<details>\r\n<summary>**Why + do red and green make yellow?**</summary>\r\n<p>When you mix paint, red and + green make brown, but RGB color mixing uses light instead of paint, so the + colors mix differently. RGB uses _additive color mixing_. In additive color + mixing, red and green make yellow, red and blue make magenta, and blue and + green make cyan. When you mix the three primary colors together (red, green, + and blue), they make white. You can read more at <a href=\"https://en.wikipedia.org/wiki/Additive_color\">Wikipedia + - Additive Color</a></p> </details>\r\n<details>\r\n<summary>**How many colors + can I make with RGB color mixing?**</summary>\r\n<p>You can make make over + sixteen million different colors with RGB color mixing.</p></details>\r\n</div>" + CSD U2 add file_markdown_instruction: "<div style=\"float: right; height: 250px; + width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new style sheet?**</summary>\r\nTo create a new style sheet, + click on the \"Add CSS\" button above the code area.\r\n</details>\r\n<details>\r\n<summary>**What + should I name my style sheet?**</summary>\r\nYou can name your style sheet + anything, but it's better to choose a relevant name, such as \"style.css\" + or \"aboutmestyles.css\" so that it's clear what the file is. Your file + should always end in the \".css\" extension.\r\n</details>\r\n<details>\r\n<summary>**How + do I rename a file?**</summary>\r\nTo rename a file, you can right click (or + control click) on the file name and choose the \"Rename\" option. This will + allow you to type in a new file name. Clicking on a file name after it is + already highlighted will also allow you to rename the file.\r\n</details>\r\n<details>\r\n<summary>**How + do I add a style sheet to a web page?**</summary>\r\nTo add a style sheet + to a web page, open up the code for the web page. Inside the head tag, add + the following code `<link rel=\"stylesheet\" href=\"style.css\">`. Then change + \"style.css\" to the name of your style sheet.\r\n</details>\r\n</div>\r\n# + Adding a Style Sheet\r\n\r\nThis is your About Me page from before. In the + next level, you'll have a chance to add some different styles to it, but + first, you need to add a style sheet, name it, and link it to your html page.\r\n\r\n1. + Create a new style sheet for your project.\r\n2. Rename the style sheet file.\r\n3. + Add your style sheet to your HTML page.\r\n\r\n<img src=\"https://images.code.org/63ed91b7de4365f59f0f4d652f8dd8fc-image-1481639763979.png\" + style=\"width:50%px\">" + CSD U2 classes modify_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nFor the code to work, you need to both + create a winter class and add elements to the class.\r\n\r\nThe class is created + in the style sheet, with the following code.\r\n\r\n<pre>.winter {\r\n color: + rgb(195,230,255);\r\n}</pre>\r\n\r\nThis code creates a class called `winter` + and makes everything in the class our winter blue, which has the RGB values + of (195,230,255).\r\n\r\nThe code that adds a `h5` element to the winter class + is `<h5 class=\"winter\">`. The `class=winter` inside the opening tag adds + everything inside the tag to the class.\r\n</details>\r\n<details>\r\n<summary>**What + rules can be added to a class rule-set?**</summary>\r\nA class rule-set can + have the same rules as any other type of selector. If a rule does not apply + to the content of the class (for example, using `font-size` on an element + with no text), then the computer will ignore that rule, but still use the + rules that work.\r\n</details>\r\n<details>\r\n<summary>**Why does the selector + have a period in front of it?**</summary>\r\nIn CSS, a period in front of + a selector means that the selector is the name of a class. If there is no + period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why + would a web developer use classes?**</summary>\r\nA web developer uses classes + when some elements should be styled differently than others, even if they + are the same tag. Classes can also be used to give elements that have different + tags the same style.\r\n</details>\r\n<details>\r\n<summary>**I got different + RGB values, but mine are right, too.**</summary>\r\nBecause RGB creates millions + of different colors, some are so similar that people have a hard time telling + them apart. That means that there are multiple RGB values that are close + enough to work for our winter color.\r\n\r\n</details>\r\n</div>\r\n# Adding + Rules\r\n\r\nYour winter words should all have the same color and font.\r\n\r\n* + Find the CSS rule-set in the style sheet that gives the winter words their + style.\r\n* Add a rule that changes the font of the winter words. It can + be any font, but it will need to be different from that of the other three + seasons.\r\n* Add any other rules you'd like for your winter words." + CSD U2 classes sample_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nFor the code to work, you need to both + create a winter class and add elements to the class.\r\n\r\nThe class is created + in the style sheet, with the following code.\r\n\r\n<pre>.winter {\r\n color: + rgb(195,230,255);\r\n}</pre>\r\n\r\nThis code creates a class called `winter` + and makes everything in the class our winter blue, which has the RGB values + of (195,230,255).\r\n\r\nThe code that adds a `h5` element to the winter class + is `<h5 class=\"winter\">`. The `class=winter` inside the opening tag adds + everything inside the tag to the class.\r\n</details>\r\n<details>\r\n<summary>**Why + does the selector have a period in front of it?**</summary>\r\nIn CSS, a period + in front of a selector means that the selector is the name of a class. If + there is no period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why + would a web developer use classes?**</summary>\r\nA web developer uses classes + when some elements should be styled differently than others, even if they + are the same tag. Classes can also be used to give elements that have different + tags the same style.\r\n</details>\r\n<details>\r\n<summary>**I got different + RGB values, but mine are right, too.**</summary>\r\nBecause RGB creates millions + of different colors, some are so similar that people have a hard time telling + them apart. That means that there are multiple RGB values that are close + enough to work for our winter color.\r\n\r\n</details>\r\n</div>\r\n# Classes\r\n\r\nIn + this page, the web developer has used classes to give some of the words our + winter color.\r\n\r\n* Look at the HTML code for the winter words. Why is + \"snowy\" the only winter word without the winter color?\r\n* Add code to + the HTML that will give \"snowy\" the same winter blue as the other words.\r\n* + Look inside the style sheet to find the rule that makes all the words in the + winter class blue, and check whether your RGB numbers are close to the ones + in the style sheet. \r\n* Discuss with your partner how the code works." + CSD U2 classes spring_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nFor the code to work, you need to both + create a spring class and add elements to the class.\r\n\r\nThe spring class + is already created in the style sheet, but it doesn't have any rules.\r\n\r\n<pre>.spring + {\r\n color: rgb(195,230,255);\r\n}</pre>\r\n\r\nLook at the rules in the + `winter` class for clues to how to make rules for the summer class.\r\n\r\nYou + will also need to add some elements to the spring class inside your HTML file.\r\n\r\nThe + code in the HTML file that adds a `h5` element to the winter class is `<h5 + class=\"winter\">`. Use this pattern to add elements to the spring class, + too.\r\n</details>\r\n<details>\r\n<summary>**What rules can be added to a + class rule-set?**</summary>\r\nA class rule-set can have the same rules as + any other type of selector. If a rule does not apply to the content of the + class (for example, using `font-size` on an element with no text), then the + computer will ignore that rule, but still use the rules that work.\r\n</details>\r\n<details>\r\n<summary>**Why + does the selector have a period in front of it?**</summary>\r\nIn CSS, a period + in front of a selector means that the selector is the name of a class. If + there is no period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why + would a web developer use classes?**</summary>\r\nA web developer uses classes + when some elements should be styled differently than others, even if they + are the same tag. Classes can also be used to give elements that have different + tags the same style.\r\n</details>\r\n</div>\r\n# Spring Class\r\n\r\nNow + that your winter class is ready, you can start on the other seasons.\r\n\r\n* + Find the empty CSS rule-set in the style sheet that gives the spring words + their style.\r\n* Add two rules, one to give the text your spring color for + earlier in the lesson, and another to give the text a different font, font + size, or decoration.\r\n* Add the spring class to the spring elements in the + HTML page." + CSD U2 classes summer_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nFor the code for the winter class to work, + it needs to both create a winter class and add elements to the class.\r\n\r\nThe + class is created in the style sheet, with the following code.\r\n\r\n<pre>.winter + {\r\n color: rgb(195,230,255);\r\n}</pre>\r\n\r\nThis code creates a class + called `winter` and makes everything in the class our winter blue, which has + the RGB values of (195,230,255).\r\n\r\nThe code that adds a `h5` element + to the winter class is `<h5 class=\"winter\">`. The `class=winter` inside + the opening tag adds everything inside the tag to the class.\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new rule-set?**</summary>\r\nYou can create a new rule-set by + following the pattern that the `winter` and `spring` classes used in the style + sheet.\r\n<pre>.winter {\r\n color: rgb(195,230,255);\r\n}</pre>\r\n\r\nThe + selector name and the color values will be different, but the following pattern + is always the same.\r\n\r\n<pre>.classname {\r\n property1: value1;\r\n property2: + value2;\r\n}</pre>\r\n\r\n</details>\r\n<details>\r\n<summary>**Why does the + selector have a period in front of it?**</summary>\r\nIn CSS, a period in + front of a selector means that the selector is the name of a class. If there + is no period, it means that the selector is the name of an HTML tag.\r\n</details>\r\n<details>\r\n<summary>**Why + would a web developer use classes?**</summary>\r\nA web developer uses classes + when some elements should be styled differently than others, even if they + are the same tag. Classes can also be used to give elements that have different + tags the same style.\r\n</details>\r\n</div>\r\n# Summer and Autumn Classes\r\n\r\n* + Inside the style sheet, create a new rule-set for a \"summer\" class.\r\n* + Add a rule to set the text in the summer class to your summer RGB color.\r\n* + Add the summer class to the summer elements in the HTML page.\r\n* Do the + same for the autumn class." + CSD U2 layout style bgcolor_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the background + of the page blue:\r\n\r\n<pre>body {\r\n background-color: lightblue;\r\n}</pre>\r\n\r\n* + `body` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the body element is the entire + page.\r\n* `background-color: lightblue;` is the rule that makes the entire + page light blue.\r\n * `background-color` is the _property_. It explains + what the rule is about, in this case the color of the background.\r\n * `lightblue` + is the _value_. It explains how the rule should be applied, in this case + making the background light blue.\r\n</details>\r\n<details>\r\n<summary>**What + colors can I use in CSS?**</summary>\r\nCSS includes most common color names + (red, blue, green, etc.), and many uncommon ones. You can see a full list + of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools + - HTML Color Names</a>. You can still use colors that are not included in + the named list, but you will need to use their RGB values. You can read more + about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools + - CSS Legal Color Values</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `background-color` property do?**</summary>\r\nThe `background-color` + property determines the color of the background of an element. You can read + more about the property at <a href=\"http://www.w3schools.com/cssref/pr_background-color.asp\">W3Schools + - CSS background-color Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + if an element inside the page has a different background color from the body?**</summary>\r\nYou + can see the answer to this question by adding a `background-color` rule to + the `p` tag. The paragraphs will have the background color in the rule for + the `p` tag, and the rest of the page will follow the rule for the `body` + tag.\r\n</details>\r\n<details>\r\n<summary>**What is a style sheet?**</summary>\r\nA + style sheet is a document that controls how a web page will appear. External + style sheets are separate files that are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n#Background + Color\r\n\r\n* Find the code in the style sheet that is making the background + of the entire page light blue.\r\n* Change the code to make the page a different + color.\r\n* Try to change the background color of just the paragraphs." + CSD U2 layout style body_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n\r\n<details>\r\n<summary>**What + does the `body` selector do?**</summary>\r\nBecause the content of the web + page is all inside the `body` tag, the body selector gives style rules for + everything on the web page.\r\n</details>\r\n<details>\r\n<summary>**What + does the `color` property do?**</summary>\r\nThe `color` property specifies + the color of the text. If there’s no text, it won’t do anything. Read more + at <a href=\"http://www.w3schools.com/cssref/pr_text_color.asp\"> W3Schools + - CSS color Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does + the `text-align` property do?**</summary>\r\nThe `text-align` property aligns + the text to the left, right, or center. You can read more at <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3Schools + - CSS text-align Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `text-decoration` property do?**</summary>\r\nThe `text-decoration` + property puts a line over, under, or through a piece of text. You can read + more about the property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3Schools + - CSS text-decoration Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `font-family` property do?**</summary>\r\nThe `font-family` property + changes the font of the text. It gives a general description of the type + of font that should be used, but each browser might display the font slightly + differently. Read more at <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\">W3chools + - CSS font-family Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `font-size` property do?**</summary>\r\nThe `font-size` property + changes the size of the text. You can use general terms, such as `small`, + `medium`, and `large`, or you can specify the exact size in pixels, such as + `20px`. Read more at <a href=\"http://www.w3schools.com/cssref/pr_font_font-size.asp\">W3Schools + - CSS font-size Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + is a stylesheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n# + The Body Element\r\n\r\n* Find the `body` rule-set in the style sheet.\r\n* + Discuss with a partner what you think will happen if you add `text-align`, + `color`, or other text properties to the `body` rule set.\r\n* Try out some + different properties to check your guesses." + CSD U2 layout style border_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + colors can I use in CSS?**</summary>\r\nCSS includes most common color names + (red, blue, green, etc.), and many uncommon ones. You can see a full list + of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools + - HTML Color Names</a>. You can still use colors that are not included in + the named list, but you will need to use their RGB values. You can read more + about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools + - CSS Legal Color Values</a>\r\n</details>\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the image + borders:\r\n\r\n<pre>img {\r\n border-color: saddlebrown;\r\n border-width: + 4px;\r\n border-style: solid;\r\n border-radius: 10px;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `border-color: + saddlebrown;`,`border-width: 4px;`,`border-style: solid;`, and `border-radius: + 10px;` are the rules that make the border.\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-style` property do?**</summary>\r\nThe `border-style` property + determines what kind of border (solid, dotted, etc.) the element has. You + can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_border-style.asp\">W3Schools + - CSS border-style Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-radius` property do?**</summary>\r\nThe `border-radius` property + determines the radius of the curves at the corners of the element. A bigger + radius makes a bigger, softer curve, and a smaller radius makes a smaller, + sharper curve. A radius of zero makes a regular corner. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/css3_pr_border-radius.asp\">W3Schools + - CSS3 border-radius property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `float` property do?**</summary>\r\nThe `float` property makes an + element \"float\", meaning that the elements that come after it all flow around + it. If the `float` value is `left`, the element will float to the left, and + the elements after it will show up on its right. If the `float` value is + `right`, the element will float to the right, and the elements after it will + show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools + - CSS float Property</a>\r\n</details>\r\n</div>\r\n\r\n# Borders\r\n\r\n* + Find the rules in the style sheet that set image borders color and width.\r\n* + Change the color and width of your borders.\r\n* Try out some different border + styles.\r\n * Choose from `dotted`, `dashed`, `solid`, and `double`\r\n* + Put a border on another type of page element, such as one of the headers or + the paragraphs." + CSD U2 layout style borderradius_markdown_instruction: "<div style=\"float: + right; height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the image + borders:\r\n\r\n<pre>img {\r\n border-color: saddlebrown;\r\n border-width: + 4px;\r\n border-style: solid;\r\n border-radius: 10px;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `border-color: + saddlebrown;`,`border-width: 4px;`,`border-style: solid;`, and `border-radius: + 10px;` are the rules that make the border.\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-style` property do?**</summary>\r\nThe `border-style` property + determines what kind of border (solid, dotted, etc.) the element has. You + can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_border-style.asp\">W3Schools + - CSS border-style Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-radius` property do?**</summary>\r\nThe `border-radius` property + determines the radius of the curves at the corners of the element. A bigger + radius makes a bigger, softer curve, and a smaller radius makes a smaller, + sharper curve. A radius of zero makes a regular corner. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/css3_pr_border-radius.asp\">W3Schools + - CSS3 border-radius property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `float` property do?**</summary>\r\nThe `float` property makes an + element \"float\", meaning that the elements that come after it all flow around + it. If the `float` value is `left`, the element will float to the left, and + the elements after it will show up on its right. If the `float` value is + `right`, the element will float to the right, and the elements after it will + show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools + - CSS float Property</a>\r\n</details>\r\n</div>\r\n\r\n# Border Radius\r\n\r\n* + Look at the `border-radius` property inside your `img` rule-set\r\n* Discuss + with your partner what you think the property does.\r\n* Try different values + for border radius and decide which one you like the best." + CSD U2 layout style float_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the image + float on the left hand side of the page:\r\n\r\n<pre>img {\r\n float: left;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `float: + left;` is the rule that makes the image float to the left.\r\n</details>\r\n<details>\r\n<summary>**What + does the `float` property do?**</summary>\r\nThe `float` property makes an + element \"float\", meaning that the elements that come after it all flow around + it. If the `float` value is `left`, the element will float to the left, and + the elements after it will show up on its right. If the `float` value is + `right`, the element will float to the right, and the elements after it will + show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools + - CSS float Property</a>\r\n</details>\r\n</div>\r\n\r\n# Float\r\n\r\n* Look + at the `float` property inside your `img` rule-set\r\n* Discuss with your + partner what you think the property does.\r\n* Change the value from `left` + to `right`." + CSD U2 layout style freeplay_markdown_instruction: "# About Me Page\r\n\r\nTry + out these some new CSS properties on your About Me page.\r\n\r\n* Add styling + of your choice to your About Me Page. Be sure to use at least 3 new CSS properties.\r\n\r\n# + Checklist\r\n\r\n* At least 3 of the following CSS Properties are used:\r\n\r\n + * `background-color`\r\n * `height`\r\n * `width`\r\n * `border-style`\r\n + * `border-radius`\r\n * `border-width`\r\n * `float`\r\n * `margin`\r\n\r\n\r\nIf + you’ve used at least 3 of the properties from the checklist, you can explore + some additional CSS properties to add to your About Me page." + CSD U2 layout style margin_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is putting extra + space around the images:\r\n\r\n<pre>img {\r\n\tmargin: 10px;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `margin: + 10px;` is the rule that puts 10 pixels of space around the image.\r\n</details>\r\n<details>\r\n<summary>**What + does the `margin` property do?**</summary>\r\nThe `margin` property determines + how much space will be around the image. Most of the time, you will define + in the margin in pixels. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_margin.asp\">W3Schools + - CSS margin Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does + `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated `px`, + is how elements are measured in CSS. It’s the size of a single point of light + on the screen.\r\n</details>\r\n</div>\r\n# Margin\r\n\r\nMargins specify + how much space should be around an element.\r\n\r\n* Find the `margin` property + in the `img` rule-set.\r\n* Change the margin to be larger, and discuss the + effect with a partner.\r\n* Choose another element type and give it a margin, + too." + CSD U2 layout style sample_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n\r\n<details>\r\n<summary>**What + does the `body` selector do?**</summary>\r\nBecause the content of the web + page is all inside the `body` tag, the body selector gives style rules for + everything on the web page.\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-style` property do?**</summary>\r\nThe `border-style` property + determines what kind of border (solid, dotted, dashed, etc.) the element has. You + can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_border-style.asp\">W3Schools + - CSS border-style Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `border-radius` property do?**</summary>\r\nThe `border-radius` property + determines the radius of the curves at the corners of the element. A bigger + radius makes a bigger, softer curve, and a smaller radius makes a smaller, + sharper curve. A radius of zero makes a regular corner. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/css3_pr_border-radius.asp\">W3Schools + - CSS3 border-radius property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `float` property do?**</summary>\r\nThe `float` property makes an + element \"float\", meaning that the elements that come after it all flow around + it. If the `float` value is `left`, the element will float to the left, and + the elements after it will show up on its right. If the `float` value is + `right`, the element will float to the right, and the elements after it will + show up on its left. You can read more about this property at <a href=\"http://www.w3schools.com/cssref/pr_class_float.asp\">W3Schools + - CSS float Property</a>\r\n</details>\r\n</div>\r\n# Layout and Style\r\n\r\n* + Look through web page below for new styles.\r\n* Open the style sheet\r\n* + With your partner, discuss which parts of the CSS code you think are making + the page appear different.\r\n * What makes the entire page blue?\r\n * How + are the images positioned to the left of all the other elements?\r\n * What + made the image corners rounded?\r\n\r\nIn the next few puzzles, you'll be + changing and adding new styles on this page." + CSD U2 layout style width_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the image + its current size:\r\n\r\n<pre>img {\r\n\twidth: 250px;\r\n}</pre>\r\n\r\n* + `img` is the _selector_. It specifies which elements will have to follow + the rules inside the curly braces, in this case, the images.\r\n* `width: + 250px` is the rule that makes the image 250 pixels wide. It also changes + the height so that the image does not stretch.\r\n</details>\r\n<details>\r\n<summary>**What + does the `width` property do?**</summary>\r\nThe `width` property determines + how wide the element will be. Most of the time, you will define in the width + in pixels, which makes the element take up an exact amount of space on the + screen. Defining the width will also change the height so that the image + does not stretch, unless you have also defined the height. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/pr_dim_width.asp\">W3Schools + - CSS width Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does + the `height` property do?**</summary>\r\nThe `height` property determines + how tall the element will be. Most of the time, you will define in the height + in pixels, which makes the element take up an exact amount of space on the + screen. Defining the height will also change the width so that the image + does not stretch, unless you have also defined the width. You can read more + about this property at <a href=\"http://www.w3schools.com/cssref/pr_dim_height.asp\">W3Schools + - CSS width Property</a>\r\n</details>\r\n<details>\r\n<summary>**What does + `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated `px`, + is how elements are measured in CSS. It’s the size of a single point of light + on the screen.\r\n</details>\r\n<details>\r\n<summary>**Why does using a width + and height rule at the same time sometimes stretch out the image?**</summary>\r\nWhen + the width of an images changes, the height must change by the same percentage, + otherwise the image will stretch. For example, if you double the width of + an image, you must also double the height, or the image will be stretched + horizonally. When you only define the width or the height, the computer will + automatically change the other property so that the image looks the same.\r\n</details>\r\n</div>\r\n\r\n# + Width and Height\r\n\r\n* Find the property in the style sheet that controls + the width of the images.\r\n* Change the width of the images to be larger + or smaller.\r\n* Create a new rule with a `height` property to control the + height of the images.\r\n* Use the `width` property in the `p` rule-set to + change the width of your paragraphs." + CSD U2 style background_markdown_instruction: "<div style=\"float: right; height: + 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What + is a CSS rule-set?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a selector?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**What + is a declaration block?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**what + is a property-value pair?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**How + do I create a new rule-set?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n</div>\r\n# Text Alignment\r\n\r\n* Find the \"text-align\" + property in the paragraph tag.\r\n* Change the paragraph alignment.\r\n * + Choose from \"left\", \"right\", and \"center\"" + CSD U2 text style bgcolor_markdown_instruction: "<div style=\"float: right; + height: 150px; width: 400px; overflow-y: scroll; margin-left: 20px;\">\r\n<details>\r\n<summary>**What + colors can I choose?**</summary>\r\nBlah blah answer\r\n</details>\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nblah blah + answer\r\n</details>\r\n<details>\r\n<summary>**Why is the \"style.css\" file + in a different language?**</summary>\r\nblah blah answer\r\n</details>\r\n</div>\r\n#Background + Color\r\n\r\n* Find the code in \"style.css\" that is making the background + of the entire page light blue.\r\n* Change the code to make the page a different + color.\r\n* Try to change the background color of just the paragraphs." + CSD U2 text style decoration_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that makes the `h1` elements + underlined:\r\n\r\n<pre>h1 {\r\n text-decoration: underline;\r\n}</pre>\r\n\r\n* + `h1` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces. The `p` stands for paragraph.\r\n* `text-decoration: + underline;` is the rule that makes the text inside the `h1` tag underlined.\r\n + * `text-decoration` is the _property_. It explains what the rule is about, + in this case where the line goes.\r\n * `underline` is the _value_. It explains + how the rule should be applied, in this case making the test underlined.\r\n</details>\r\n<details>\r\n<summary>**What + are the possible values for text decoration?**</summary>\r\nYou can choose + between \"underline\", \"overline\", and \"line-through\". You can read more + about the text-decoration property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3Schools + - CSS text-decoration Property</a>\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the stylesheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a stylesheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n# + Underlining\r\n\r\n* Find the code in the style sheet that makes the h1 tag + underlined.\r\n* Change the text decoration and see which one you like.\r\n * + Choose from \"underline\", \"overline\", and \"line-through\"\r\n* Add a text + decoration rule for the paragraph or h3 tag." + CSD U2 text style font family_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is controlling the + paragraph font:\r\n\r\n<pre>p {\r\n font-family: cursive;\r\n}</pre>\r\n\r\n* + `p` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces. The `p` stands for paragraph.\r\n* `font-family: + cursive;` is the rule that makes the text inside the `p` tags a particular + font.\r\n * `font-family` is the _property_. It explains what the rule is + about, in this case the font.\r\n * `cursive` is the _value_. It explains + how the rule should be applied, in this case making the text cursive.\r\n</details>\r\n<details>\r\n<summary>**What + are the possible values for font family?**</summary>\r\nYou can choose between + \"serif\", \"sans-serif\", \"cursive\", \"fantasy\", and \"monospace\". You + can also try more specific fonts as described in <a href=\"http://www.w3schools.com/cssref/css_websafe_fonts.asp\">W3Schools + - CSS Web Safe Font Combinations</a>\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the stylesheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a stylesheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n#Changing + the Font\r\n\r\n* Find the CSS rule-set in the style sheet that determines + the style for the paragraph tag.\r\n* Change the font family and choose which + one you like the best.\r\n * Choose from \"serif\", \"sans-serif\", \"cursive\", + \"fantasy\", and \"monospace\"\r\n* Add a font family rule for the h1 or h3 + tags." + CSD U2 text style freeplay_markdown_instruction: "# About Me Page\r\n\r\nNow + you can style the text on your About Me page!\r\n\r\n* Open your style sheet + and add styling of your choice to your About Me Page. Be sure to use at least + 3 different CSS properties.\r\n\r\n# Checklist\r\n\r\n* At least 3 of the + following CSS Properties are used:\r\n * `font-size`\r\n * `font-family`\r\n + * `color`\r\n * `text-decoration`\r\n * `text-align`\r\n\r\nIf you’ve used + at least 3 of the properties from the checklist, you can explore some additional + text properties to add to your About Me page." + CSD U2 text style h1_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + colors can I use in CSS?**</summary>\r\nCSS includes most common color names + (red, blue, green, etc.), and many uncommon ones. You can see a full list + of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools + - HTML Color Names</a>. You can still use colors that are not included in + the named list, but you will need to use their RGB values. You can read more + about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools + - CSS Legal Color Values</a>\r\n</details><details>\r\n<summary>**How does + the code work?**</summary>\r\nHere is the code that is making the `h1` header + red:\r\n\r\n<pre>h1 {\r\n color: red;\r\n}</pre>\r\n\r\n* `h1` is the _selector_. It + specifies which elements will have to follow the rules inside the curly braces.\r\n* + `color: red;` is the rule that makes the text inside the `h1` tags red.\r\n + * `color` is the _property_. It explains what the rule is about, in this + case the text color.\r\n * `red` is the _value_. It explains how the rule + should be applied, in this case making the text red.\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the style sheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n}\r\n</pre>\r\n\r\nIn + this example, `h2` is the selector, `color` and `font-family` are properties, + and `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n# + CSS and Text Color\r\n\r\nThis HTML file uses a style sheet (\"style.css\") + to give the page a particular style. The style sheet contain information + about what each of the HTML elements should look like.\r\n\r\n* Find the code + in the style sheet (click on \"style.css\" in the files area) that is making + the h1 header red.\r\n* Change the code for the color of the h1 header from + `red` to a different color." + CSD U2 text style h3_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + colors can I use in CSS?**</summary>\r\nCSS includes most common color names + (red, blue, green, etc.), and many uncommon ones. You can see a full list + of CSS color names at <a href=\"http://www.w3schools.com/colors/colors_names.asp\">W3Schools + - HTML Color Names</a>. You can still use colors that are not included in + the named list, but you will need to use their RGB values. You can read more + about using colors in CSS at <a href=\"http://www.w3schools.com/cssref/css_colors_legal.asp\">W3Schools + - CSS Legal Color Values</a>\r\n</details>\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is making the `h1` + header red:\r\n\r\n<pre>h1 {\r\n color: red;\r\n}</pre>\r\n\r\n* `h1` is + the _selector_. It specifies which elements will have to follow the rules + inside the curly braces.\r\n* `color: red;` is the rule that makes the text + inside the `h1` tags red.\r\n * `color` is the _property_. It explains what + the rule is about, in this case the text color.\r\n * `red` is the _value_. It + explains how the rule should be applied, in this case making the text red.\r\n</details>\r\n<details>\r\n<summary>**How + do I make a new rule-set?**</summary>\r\nTo make a new rule set, you'll need + a selector and a list of rules. The selector is the name of the tag you want + the rules to be applied to. The rules are a list of property and value pairs. You'll + also need to pay careful attention to the punctuation in the rule set. Look + at the code below for an example of how the code should look. You'll need + to change the specifics for your page.\r\n\r\n<pre>h1 {\r\n color: red;\r\n}</pre>\r\n\r\n\r\n* + `h1` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces.\r\n* `color: red;` is the rule that makes the + text inside the `h1` tags red.\r\n * `color` is the _property_. It explains + what the rule is about, in this case the text color.\r\n * `red` is the _value_. It + explains how the rule should be applied, in this case making the text red.\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the style sheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n#Making + a new CSS rule-set\r\n\r\nThe block of code that gives rules for a particular + tag is called a _rule-set_. You can make a new rule set by copying the pattern + you see in the rule-set for the `h1` tag.\r\n\r\n* Find the CSS rule-set in + the style sheet that determines the styles for the h1 tag.\r\n* Using the + same pattern, write a new CSS rule-set that will determine the styles for + the h3 tag.\r\n* Add code to make the text in all h3 tags a different color." + CSD U2 text style sample_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n<details>\r\n<summary>**Why + is the \"style.css\" file in a different language?**</summary>\r\nWeb developers + intentionally separate content and style to make their code easier to maintain. + HTML is the language used to structure the content of a web page. CSS is a + language that adds style to a web page. \r\n</details>\r\n<details>\r\n<summary>**What + does `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated + `px`, is how elements are measured in CSS. It’s the size of a single point + of light on the screen.\r\n</details>\r\n<details>\r\n<summary>**What does + the `text-decoration` property do?**</summary>\r\nThe `text-decoration` property + puts a line over, under, or through a piece of text. You can read more about + the property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3Schools + - CSS text-decoration Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `text-align` property do?**</summary>\r\nThe `text-align` property + aligns the text to the left, right, or center. You can read more at <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3Schools + - CSS text-align Property</a>\r\n</details>\r\n<details>\r\n<summary>**What + does the `font-family` property do?**</summary>\r\nThe `font-family` property + changes the font of the text. It gives a general description of the type + of font that should be used, but each browser might display the font slightly + differently. Read more at <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\">W3chools + - CSS font-family Property</a>\r\n</details>\r\n</div>\r\n#CSS and Style sheets\r\n\r\n* + Look at the web page below and find some different types of text stylings + that you don't know how to code yet.\r\n* Click on the style sheet (\"style.css\" + in the files area) and look at the code inside the file.\r\n* With your partner, + discuss which parts of the code you think are making the text appear differently + than before.\r\n\r\nIn the next few lessons, you'll be changing and adding + new styles on this page.\r\n\r\n" + CSD U2 text style size_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is controlling the + paragraph text size:\r\n\r\n<pre>p {\r\n font-size: 14px;\r\n}</pre>\r\n\r\n* + `p` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces. The `p` stands for paragraph.\r\n* `font-size: + 14px;` is the rule that makes the text inside the `p` tags a particular size.\r\n + * `font-size` is the _property_. It explains what the rule is about, in this + case the text size.\r\n * `14px` is the _value_. It explains how the rule + should be applied, in this case making the text 14 pixels big.\r\n</details>\r\n<details>\r\n<summary>**What + does `px` mean / What is a pixel?**</summary>\r\nPixel, which is abbreviated + `px`, is how elements are measured in CSS. It’s the size of a single point + of light on the screen.\r\n</details>\r\n<details>\r\n<summary>**Why do I + need all the punctuation?**</summary>\r\nThe punctuation, such as the curly + braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand + the rules in the style sheet. The curly braces hold all the rules for a particular + selector. Each rule should end in a semicolon, and the properties and values + are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</div>\r\n\r\n# + Changing text size\r\n\r\nYou can control other things besides colors by using + other properties.\r\n\r\n* Find the CSS rule-set in the style sheet that determines + the style for the paragraph tag.\r\n* Change the text size of the paragraphs + to be bigger.\r\n* Add a new rule to your rule-set for your h3 tag to make + the text bigger or smaller." + CSD U2 text style text align_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + does the code work?**</summary>\r\nHere is the code that is controlling the + paragraph text alignment:\r\n\r\n<pre>p {\r\n text-align: left;\r\n}</pre>\r\n\r\n* + `p` is the _selector_. It specifies which elements will have to follow the + rules inside the curly braces. The `p` stands for paragraph.\r\n* `text-align: + left;` is the rule that makes the text inside the `p` tags align to the left + side of the paragraph.\r\n * `text-align` is the _property_. It explains + what the rule is about, in this case the text alignment.\r\n * `left` is the + _value_. It explains how the rule should be applied, in this case making + the text align to the left side of the paragraph.\r\n</details>\r\n<details>\r\n<summary>**Why + doesn't `text-align: left;` do anything?**</summary>\r\nMost properties have + default values. The default values are the styles that an element will have + automatically, before you add your style sheet. The default value for `text-align` + is `left`, so it doesn't change from how it already looked.\r\n</details>\r\n<details>\r\n<summary>**What + are the possible values for text align?**</summary>\r\nYou can choose between + \"left\", \"right\", and \"center\". You can read more about the text-align + property at <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3Schools + - CSS text-align Property</a>\r\n</details>\r\n<details>\r\n<summary>**Why + do I need all the punctuation?**</summary>\r\nThe punctuation, such as the + curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer + to understand the rules in the style sheet. The curly braces hold all the + rules for a particular selector. Each rule should end in a semicolon, and + the properties and values are always separated by a colon.\r\n</details>\r\n<details>\r\n<summary>**What + is a style sheet?**</summary>\r\nA style sheet is a document that controls + how a web page will appear. External style sheets are separate files that + are linked to the HTML page.\r\n</details>\r\n<details>\r\n<summary>**What + is CSS?**</summary>\r\nCSS is a language that controls the way content on + a web site appears. It uses rule-sets to change the look of a page. Each + rule set has a selector, which specifies which elements on the page will be + affected, and the rules, which explain how to display the elements. Each + rule consists of a property and a value for that property.\r\n\r\n\r\nHere’s + an example of a rule-set that makes the text in an `h2` tag blue and cursive:\r\n\r\n<pre>h2 + {\r\n color: blue;\r\n font-family: cursive;\r\n</pre>\r\n\r\nIn this + example, `h2` is the selector, `color` and `font-family` are properties, and + `blue` and `cursive` are the values for those properties.\r\n</details>\r\n</details>\r\n</div>\r\n# + Text Alignment\r\n\r\nThe `text-align` property sets the horizontal (side + to side) position of the text within each line.\r\n\r\n* Find the \"text-align\" + property in the paragraph tag.\r\n* Change the paragraph alignment.\r\n * + Choose from \"left\", \"right\", and \"center\"" + CSD U3 - Booleans Video_markdown_instruction: "# Boolean Expressions Video" + CSD U3 - Sprites - Sprite v Rect_markdown_instruction: "# Sprites vs Rect\r\n\r\nCurently + sprites and rectangles seem really similar. It will become clear later on + why sprites are more powerful than basic shapes. Before you get there though + it is important to call out a major difference in the way sprites and rectangles + draw.\r\n\r\n# Do This\r\nCan you will figure out the difference by just trying + this?\r\n\r\n* Create a rectangle with a width and height of 30\r\n* Set the + fill for the rectangle to a different color than gray (So its clear which + is the rectangle)\r\n* Create a sprite and give it the same x and y values + as you gave the rectangle\r\n* Make sure to call `drawSprites` in the draw + loop\r\n* Run the program\r\n* Can you see the difference?" + CSD U3 - complex - compound conditionals_markdown_instruction: "# Possible + Solution #2 - Compound Conditionals\r\n\r\nAnother way that you might have + phrased the challenge problem is:\r\n\r\n\tIf the up arrow was pressed AND + the sprite hasn't gone off the top of the screen, move up.\r\n\r\nThis structure + of asking both questions at the same time is accomplished using a **compound + conditional**. Compound conditionals use the boolean operators `AND` and `OR` + to ask multiple questions at once. `AND` only returns true if _both_ of the + questions it's asking are true, while `OR` will return true if _either_ of + its questions are true. In JavaScript (and many other languages) `AND` is + represented by two ampersands (`&&`) while `OR` is represented by two pipes + (`||`) - their blocks look like this: \r\n\r\n![](https://images.code.org/c7ab68cb4091472f05d7c862a52730c6-image-1466785066210.48.02.png)\r\n\r\nWe + could pseudocode this solution as \r\n\r\n\tIf the up arrow was pressed AND + sprite.y > 0\t// Both Questions\r\n \tmove up\t\t\t\t\t\t\t\t\t // Only + runs if both questions were true\r\n\r\n\r\n# Do This\r\n\r\nHere's the same + code from the challenge again, but this time the up arrow uses a compound + conditional. \r\n\r\n* Use the same compound conditional pattern on the other + three arrow keys.\r\n" + CSD U3 - complex - key up and down_markdown_instruction: "# Responding to a + Single Click\r\n\r\nEarlier we learned that `keyWentDown` and `keyWentUp` + can be used to respond to a keypress a single time. The blocks `mouseWentUp` + and `mouseWentDown` allow you to do that for the mouse!\r\n\r\n# Do This\r\n\r\nLet's + make a simple game that counts how many times you've clicked. We've already + provided a variable `clicks` that you can use to track how many times the + user has clicked.\r\n\r\n* Add a conditional that checks if the mouse went + down.\r\n* Inside your conditional, add to the `clicks` variable.\r\n\r\n_Challenge: + Can you add a sprite that responds to `mouseWentDown` as well? Add an image + of your choice and increase the sprite's size each time the mouse is clicked._" + CSD U3 - complex - mouse down_markdown_instruction: "# Mouse Clicks\r\n\r\nKeypresses + are great, but sometimes you want users to interact through mouse clicks. + There's a new block called `mouseDown` which, similar to `keyDown`, checks + whether the left or right mouse buttons is being pressed. If you are using + a computer with a mouse or trackpad that has only one button, you'll want + to always use `mouseDown(\"left\")`. \r\n\r\n# Do This\r\nHere's a program + that drops a balloon down the screen - you're going to program the mouse + button to raise the balloon back up while it's clicked.\r\n\r\n* Add an if + else statment that checks for `mouseDown`\r\n* Inside the conditional, move + the balloon up one pixel if the mouse is down otherwise move the balloon down + \r\n\r\n_Hint: You'll need to move the code that drops the balloon for this + to work - you only want it to run if `mouseDown` is `false`_\r\n\r\n_Challenge: + Can you make the balloon drift randomly to the left and right as it raises + and falls?_" + CSD U3 - complex - mouse move_markdown_instruction: "# mouseDidMove\r\n\r\nWe + can also use Boolean expressions to check whether or not the mouse has moved. + The `mouseDidMove` block will return `false` if the mouse is still, but `true` + if the mouse has been moving.\r\n\r\n# Do This\r\nRight now, this program + just displays a salt shaker sprite. You'll need to use `mouseDidMove` so + that you can \"shake\" the salt by moving the mouse back and forth.\r\n\r\n* + Add a conditional that checks if `mouseDidMove`.\r\n* If the conditional is + true, rotate the salt sprite randomly to the left or right.\r\n\r\n_Challenge: + Can you keep track of how many times the `mouseDidMove` shakes the salt, and + then rotate it right side up after 100 shakes?_" + CSD U3 - complex - nested conditional_markdown_instruction: "# Possible Solution + #1 - Nested Conditionals\r\n\r\nThe way you phrase the previous challenge + says a lot about how you might approach solving it. For example, you might + have phrased moving up and staying on screen as:\r\n\r\n\tIf the up arrow + was pressed then check if the sprite hasn't gone off the top of the screen + and move up.\r\n\r\nThis structure of first asking one question, and then + asking a second question if the first was true is accomplished using a **nested + if statement**. Nested if statements put one if statement inside another if + statement. You can think of this as asking a question and then based on the + answer asking another question before making a decision. We could pseudocode + the previous phrase as:\r\n\r\n\tIf the up arrow was pressed\t// First Question\r\n \tIf + my y > 0\t\t\t\t// Second Question\r\n \tmove up\t\t\t\t// Only runs + if both questions were true\r\n\r\n\r\n# Do This\r\n\r\nHere's the same code + from the challenge, with the up arrow using a nested conditional. \r\n\r\n* + Use the same nested conditional pattern on the other 3 arrow keys.\r\n" + CSD U3 - conditionals - arrows and gears_markdown_instruction: "# Gears with + Conditionals\r\n\r\nLet's make the gears spin only when the space key is + being held down.\r\n\r\n# Do This\r\n\r\n* Add an `if` statement.\r\n* Use + `keyDown` as input to the if statement to check when the space key is pressed.\r\n* + Move the code that makes the gears rotate inside the `if`." + CSD U3 - conditionals - first conditional 2_markdown_instruction: "<img src=\"https://images.code.org/abd459d8d1477ac2f582417f4334cdaa-image-1466107090414.gif\" + style=\"width:200px;float:right\">\r\n# Visible\r\n\r\nNow that you have conditionals + and images, sometimes it's useful to hide the image for a while and then + show it again. You can do this using the `visible` property. The visible property + is a little different from other properties you have seen in the past: It + is a Boolean value, either `true` (the sprite is visible) or `false` (the + sprite is **not** visible). By default, visible is set to `true`.\r\n\r\n# + Do This\r\nMake the balloon pop when it hits the edge of the game area!\r\n\r\n* + Add an `if` statement that checks to see if the balloon has hit the edge.\r\n\t* + Use a watcher on `balloon.scale` to help you out\r\n* Create a pop sprite + which uses the \"pop\" visual in the animation tab.\r\n* Set the pop's `visible` + property to `false` to start.\r\n* Inside the if add two statements.\r\n\t* + One that sets the `visible` property to hide the balloon sprite.\r\n * + One that sets the `visible` property to show the pop sprite." + CSD U3 - conditionals - first conditional_markdown_instruction: "<img src=\"https://images.code.org/36c5543076622c96f7dabce8bc37f995-image-1468425774455.54.03 + PM.png\" style=\"float:right;width:100px\">\r\n# If Statement\r\n\r\nThe Boolean + expressions we tested on the last level allow us to ask questions. In order + to use the answers we need to use something called an **if statement**. If + statements take a Boolean expression as input and check whether it is true + or false. If the Boolean expression is true, then the computer executes the + code inside the if statement.\r\n\r\nFor example, the code below checks whether + the sprite's width is greater than 100. If it is, it prints \"This is a + wide sprite\" to the console log.\r\n\t\r\n\tif( sprite.width > 100 ){\r\n \tconsole.log(\"This + is a wide sprite\");\r\n }\r\n\r\nIf statements usually go inside your + draw loop because we want to check them each time the loop runs. \r\n\r\n# + Do This\r\n\r\nThe race car program you wrote earlier is loaded here for you.\r\n\r\n* + Add an `if` statement after you update the position of the race car. \r\n* + Move the boolean expression from the console.log statement to the input of + the if statement.\r\n* Inside the `if` statement add a statement to draw text + on the screen to say \"Winner\".\r\n" + CSD U3 - conditionals - transition 2_markdown_instruction: "# More Practice + With Booleans\r\n\r\nLet's use one more Boolean expression to check the condition + of a sprite.\r\n\r\n# Do This\r\nThere is a growing balloon sprite created + for you. Can you create an expression to check when the balloon hits the edge + of the game area?\r\n\r\n* Add a `console.log` statement.\r\n* Add a Boolean + expression inside the `console.log` that checks whether the balloon has hit + the edge of the game area.\r\n* Hint: Use the scale of the balloon. You might + have to do some guess and check testing to find the right scale." + CSD U3 - conditionals - transition_markdown_instruction: "# Booleans\r\n\r\nIn + the past few levels, we have been comparing values of sprites to find out + whether something is true or false. Let's start putting that in the context + of an animation.\r\n\r\n# Do This\r\nThe program draws a race car and a finish + line. We are going to figure out when the race car crosses the finish line. + The sprites have all been set up for you.\r\n\r\n* Add a `console.log` statement + inside the draw loop. [Show me where](#triggercallout=callout)\r\n* Add an + Boolean expression inside the `console.log` that asks \"Is the x position + of the race car less than the x position of the finish line?\" (You can look + at [this level](/s/csd3/stage/8/puzzle/2) to see what the statement might + look like.)\r\n* Look at the output of the program as the car moves. When + does the output change? Why?" + CSD U3 - images - Embed Project_markdown_instruction: "Example of the Final + Project" + CSD U3 - images - animations_markdown_instruction: "# Animations\r\n\r\nYou + have seen through out this Unit that when you put together a set of images + and play them close together back to back it looks like movement! Well sprites + make that animation easier! You can put together a set of images to create + an animation. There are pre-loaded animations for you in the animations manager. + \r\n\r\nSet the animation with setAnimation.\r\n\r\n# Do This\r\n\r\n* Create + a sprite\r\n* Add the animation." + CSD U3 - images - changing scene_markdown_instruction: "# Images\r\n\r\nUse + the animations tab to finish making all three sprites fish images.\r\n\r\n<img + src=\"https://images.code.org/f947fc6800cd1abda023b08c20a2ee87-image-1477679298953.gif\" + style=\"float:right\">\r\n\r\n# Do This\r\nYour goal is to finish the underwater + scene so all three sprites are fish like the example on the right. \r\n\r\n* + There is a rectangle sprite already created for you for each fish.\r\n* Run + the code to see how it works.\r\n* Add a `setAnimation` command to change + the look for the remaining two fish. \r\n* Run it to see that your rectangle + is now an image!\r\n" + CSD U3 - images - first image_markdown_instruction: "# Images\r\n\r\nUp until + now all of your sprites have been rectangles. No longer! Now you can use pictures + for your sprites instead.\r\n\r\nCheck out the animations tab by clicking + the <img src=\"https://images.code.org/9471c62f11f3c6065c0d2da523f2ac89-image-1465515854142.43.49 + PM.png\" style=\"width:100px\"> button above the display area.\r\n\r\nThere + is an image there that have been loaded for you!\r\n\r\nIn order to use that + image you will need to use the `setAnimation` command. You have to create + the sprite before you can set its animation.\r\n\r\n# Do This\r\n\r\nThere + is a rectangle sprite already created for you. All you need to do is change + it to an image.\r\n\r\n* Add a call to `setAnimation` to set the animation + to the image provided\r\n* Run it to see that your rectangle is now an image!" + CSD U3 - images - first sprite with image_markdown_instruction: "# Images\r\n\r\nRectangles + are great, but if you're going to make animations and games that really look + great, you'll need some way to add more interesting images to your sprites.\r\n\r\nOver + on the **Animations Tab** you'll see three images that have been loaded for + you! You can get to the animations tab by clicking the <img src=\"https://images.code.org/9471c62f11f3c6065c0d2da523f2ac89-image-1465515854142.43.49 + PM.png\" style=\"width:100px\"> button above the display area.\r\n\r\n<img + src=\"https://images.code.org/f694a37bbadcf0533e7b19d8c0f5309b-image-1465580394090.35.11 + PM.png\" style=\"width:300px;float:right\">\r\n\r\nOnce you have created a + sprite you can **use the `setAnimation()` command to change the look of your + sprite from a rectangle to a picture.** The blocks make this super easy to + do as the names of all the images you have loaded in the animation tab show + up in the `setAnimation()` dropdown. The alien is set up for you as an example.\r\n\r\n# + Do This\r\nChange the sprite to your favorite image from the animations tab.\r\n\r\n* + A sprite that is set to an image has already been created for you.\r\n* Run + the code to see how it works.\r\n* Change the input to the `setAnimation` + command to change the look of the sprite.\r\n* Try out all the different images." + CSD U3 - images - fish free play_markdown_instruction: "# Fish Free Play\r\n\r\nHere + are the swimming fish you have been working on. Continue to improve the animation!\r\n\r\n# + Do This\r\n\r\n* Add another sea creature to the scene.\r\n* Make the sea + creature move.\r\n* Make one of the fish follow the mouse.\r\n* Add more ideas + of your own!" + CSD U3 - images - fish with arrows_markdown_instruction: "# Fish With Arrows\r\n\r\nThe + fish are back. Can you make the fish move left only when the left arrow key + is pressed down?\r\n\r\n# Do This\r\n\r\n* Add an if statement to check when + the left arrow key is pressed down.\r\n* Move the statements for moving the + fish inside the if statement." + CSD U3 - images - kite free play_markdown_instruction: "# Kite Free Play\r\n\r\nHere + is the flying kite you have been working on. Continue to improve the animation!\r\n\r\n# + Do This\r\n\r\n* Add at least 1 other sprite.\r\n* Make the sprite move.\r\n* + Improve the background by adding clouds or other objects.\r\n* Add more ideas + of your own!" + CSD U3 - images - kiteFlying_markdown_instruction: "# Flying Kite\r\n\r\nNow + that you have a kite, make it fly around.\r\n\r\nTo do this we will need to + move the kite and update the end position of the line that is the string. + You have done similar things with variables before but now you will be using + properties.\r\n\r\n# Do This\r\n\r\n* Make the kite move around the top right + corner of the screen randomly.\r\n* Move the code for the string of the kite + to the Draw Animations section since it is now moving!\r\n* Update the end + position of the line so that one end of string stays at the center of the + kite." + CSD U3 - images - nextFrame_markdown_instruction: "# Next Frame\r\n\r\nOn the + last level the animation you used continously looped through the animation + and never stopped. Sometimes we want to control when the animation changes. When + you want to create a sequence but not have it loop you can click the button + in the anmations tab *** show example***. Then in the code you can control + when you move to the next frame using `nextFrame`. \r\n\r\n\r\n# Do This\r\n\r\nThere + is a sprite already created for you and 4 images loaded into the animations + tab. Make the sprite change frames each time the space bar is pressed down.\r\n\r\n* + Create a conditional to respond to the space bar\r\n* Inside the conditional + call `nextFrame` to move the sprite to the next frame" + CSD U3 - images - race images_markdown_instruction: "# Race Cars\r\n\r\nYou + made a racing game in the last lesson. You can now make those rectangles look + like race cars!\r\n\r\n# Do This\r\n\r\n* Use the race car images in the animations + tab to update your racing animation." + CSD U3 - images - random movement_markdown_instruction: "<img src=\"https://images.code.org/fccef5d23434917c0a22361cb6e69666-image-1477679738105.gif\" + style=\"float:right\">\r\n\r\n# Updating Fish\r\n\r\nThe same thing you did + on the last level will help your fish look more like they are swimming. Update + your scene to make the fish look like they don't swim in a perfectly straight + line. \r\n\r\n# Do This\r\nYour goal is to finish the underwater scene so + all three sprites are fish like the example on the right. \r\n\r\n* Use a + small random rotation to **make your fish wiggle**.\r\n" + CSD U3 - images - review_markdown_instruction: "# Sprites Review\r\n\r\nYou + have learned a lot about sprites already and conditionals. Can you use those + skills to create a square that moves in all 4 directions in response to the + arrow keys?\r\n\r\n# Do This\r\n\r\n* Create a sprite\r\n* Make the sprite + move up, down, left, and right in response to the arrow keys" + CSD U3 - images - scale_markdown_instruction: "# Upload your own image\r\n\r\nSo + the image you uploaded probably was not the size you wanted was it? You can + fix that! There is a property for sprites called `scale`. **Scale controls + the width and the height of the sprite at once.** Using scale is better than using + width and height for images because...\r\n1. It's one property instead of + two.\r\n2. You keep the image ratio and it doesn't distort it.\r\n\r\n**To + make the image smaller you want to use a scale less than 1. To make the image + bigger you want to use a number greater than 1. A scale of 1 would keep it + the same.**\r\n\r\n# Do This\r\n\r\n* Resize your kite using `scale` to better + fit the picture." + CSD U3 - images - setAnimation_markdown_instruction: "# Upload your own image\r\n\r\nYou + can also use the Animation tab to upload your own image.\r\n\r\n# Do This\r\nYou + are going to make a flying kite. The first step is to pick out a kite you + like.\r\n\r\n* Find an image of a kite you want to use. It works best if + it has a clear background.\r\n* Open the animations tab.\r\n* Click <img src=\"https://images.code.org/346f6657dba57b0c3bd5deb534f76b69-image-1466194432449.13.05 + PM.png\" style=\"width:50px\">\r\n* Click <img src=\"https://images.code.org/60c0371b45b29f10a3c8530db9154428-image-1466194434329.13.16 + PM.png\" style=\"width:50px\">\r\n* Select a file from your computer.\r\n* + Rename your image so it has a name that is easy to remember. To rename it + click the text below the image. <img src=\"https://images.code.org/c7809f27743bcb4cd86e46a4493c5c7a-image-1466194516357.15.04 + PM.png\" style=\"width:60px\">\r\n* Set the kite sprite to display your image.\r\n\r\nDon't + worry if your kite image is too big! You'll learn how to fix that in the + next level." + CSD U3 - images - switch the picture_markdown_instruction: "# Switching Images\r\n\r\nYou + don't have to keep the same image the whole time. In fact since your *image* + was moving around the screen it would be cool to have it fact the correct + direction as it moves.\r\n\r\n# Do This\r\n\r\nYour work was copied here as + well\r\n\r\n* Add a call to `setAnimation` inside each if statement to the + correct image" + CSD U3 - images - visible_markdown_instruction: "# Visible\r\n\r\nNow that + you have conditionals and images sometimes it appropriate to hide the image + for a while and then show it again. You can do this using the `visible` property. + The visible property is a little different than some of the other properties + you have seen in the past. It is a boolean value. So visible is either true + or false. By default visible is set to true.\r\n\r\n\r\n# Do This\r\n\r\n* + In response to something set the sprite to visible and invisible.\r\n" + CSD U3 - sprites - motiviation_markdown_instruction: "# How Many Variables?\r\n\r\nIn + the last lesson you learned how to use the **counter pattern** (`x = x + 1`, + `x = x - 0.5`, `x = x - 1`, etc.) to create smooth animations. Using this + pattern in many different ways allows you to create interesting and complex + animations.\r\n\r\nWatch the animation here. With a partner discuss: \r\n\r\n* + How many counter variables would you need to create to make this animation? + What are they used to animate?\r\n* What would you name your variables?\r\n* + What are the challenges of using counter variables in a scene like this?" + CSD U3 AnimationsMulti Play Defender_markdown_instruction: "# Defend Your Cake!\r\n\r\nThis + is an example of a defender game that you'll build by the end of this lesson. + Move the alien with arrow keys to keep the ladybugs from getting to your cake. + How high of a score can you get?\r\n\r\n# Do This\r\n\r\nTurn to a classmate + and make a list of the following information.\r\n\r\n* How many sprites are + there in this game. Which are they?\r\n* What variables are needed to make + this game? What do they store?\r\n* If you were to split the code of this + game into functions what do you think they would be? What are the major pieces + of behavior you'd need to create in your code?" + CSD U3 AnimationsMulti defender animate cake enemies_markdown_instruction: "# + Getting Started: Set Animations\r\n\r\nYou should have already reviewed the + planning guide for this project. A lot of the work to turn this project guide + into a working game has already been started. Based on the project guide you're + going to do the rest of this work.\r\n\r\n# Do This\r\n\r\nBefore we get started + you'll want some better animations for each of your sprites.\r\n\r\n* In + the Animation Tab are animations for each of your sprites. Go look at what + they are.\r\n* In your code give each sprite its appropriate animation. **Use + the ones provided for now** but later you'll be able to go change them.\r\n* + Head to [Level 4](/s/csd3/stage/16/puzzle/4) if you need help remembering + how to do this." + CSD U3 AnimationsMulti defender animate player_markdown_instruction: "# Change + Player Animations\r\n\r\nRight now your player is always facing the same direction. + You can make things look a lot more realistic by switching between animations. + Your player should switch between a left-facing and right-facing animation + depending on which key was last pressed. Remember, you can quickly copy and + edit animations inside the Animation Tab.\r\n\r\n# Do This\r\n\r\n* Inside + the Animation Tab copy the animation of your player sprite.\r\n* Flip each + frame of the new animation so that the sprite is facing in the opposite direction\r\n* + Rename your new animation\r\n* Use the `setAnimation` command inside the `movePlayer` + function so that the player changes the direction it is facing when the \"left\" + and \"right\" arrows are pressed." + CSD U3 AnimationsMulti defender create set enemies_markdown_instruction: "# + Creating Functions\r\n\r\n<img src=\"https://images.code.org/126982cbde9ae62e9a77ca1e53c92024-image-1476291567280.58.00 + AM.png\" style=\"float:right; height:90px\">\r\n\r\nYour program now includes + code in two places to set the enemies on the left side of the screen at a + random y location. You can create functions to reset each of your two enemies + to remove repetitions from your program. This will make your program easier + to read, allow you to change it more easily, and allow you to quickly reset + your sprites at other points in your program if you need to.\r\n\r\n# Do This\r\n\r\n<img + src=\"https://images.code.org/01a2f4d9725162482fda9f74734c992c-image-1476461412974.09.52 + AM.png\" style=\"\r\nfloat:right; height:70px\">\r\n\r\n* At the bottom of + your program create two new functions, `setEnemy1` and `setEnemy2`.\r\n* Inside + each of these functions place the code that sets the enemies on the left side + of the screen and gives them a random y position\r\n* Wherever the code for + `setEnemy1` and `setEnemy2` appears in your program replace them with a call + to the functions you just created." + CSD U3 AnimationsMulti defender displace enemies_markdown_instruction: "# Displace + Enemies\r\n\r\nIt's time to write code for some more sprite interactions. + Your player sprite should displace the enemy sprites.\r\n\r\n# Do This\r\n\r\nFor + this level you'll be writing code inside the `displaceEnemies` function.\r\n\r\n* + Write code that makes player displace both enemy sprites.\r\n* Test your program + to make sure your player is displacing enemies but they keep moving right + after the player moves away.\r\n\r\n_Hint: You can use `sprite.debug` to see + your sprites' colliders if you need to debug your program_" + CSD U3 AnimationsMulti defender enemies move_markdown_instruction: "# Moving + The Enemies\r\n\r\nIt's time to start writing the code that will move your + sprites. To begin you'll need to get your enemy sprites to a random position + and moving across the screen.\r\n\r\n# Do This\r\n\r\nAt the top of your program, + after you create each enemy sprite, write code that will move it to the correct + position and give it the correct velocity.\r\n\r\n* Use `sprite.x` to set + the x position to 0\r\n* Use `sprite.y` to set the y position should be a + random number between 150 and 250\r\n* Use `sprite.velocityX` to set the x + velocity to 2\r\n\r\nTest your program. Your enemy sprites should now be moving + across the bridge." + CSD U3 AnimationsMulti defender enemies touch cake sprite2_markdown_instruction: "# + Touching the Cake: Second Ladybug\r\n\r\nYour first enemy sprite should now + be resetting when it gets to the cake. Now you'll want the other ladybug + to reset as well.\r\n\r\n# Do This\r\n\r\nInside the `enemiesTouchCake` function + you should have written code that resets enemy1\r\n\r\n* Copy the entire if-statement + you wrote in the last level (Ctrl-C)\r\n* Paste the code inside of the `enemiesTouchCake` + function, just below the last one (Ctrl-V)\r\n* Change the name of the sprite + in that code from `enemy1` to `enemy2`\r\n \r\nTest your code. Now both bugs + should reset when they touch the cake." + CSD U3 AnimationsMulti defender enemies touch cake_markdown_instruction: "# + Touching the Cake\r\n\r\nIf the enemies get all the way across to the cake + you should place them back at the left side of the screen and decrease the + score. To start you'll **write code for only one of your enemies**.\r\n\r\n# + Do This\r\n\r\nInside the `enemiesTouchCake` function you'll need to write + code that checks when a ladybug is touching the cake, resets its position, + and changes the score.\r\n\r\n* Use an `if` and `isTouching` to detect whether + enemy1 has touched the cake.\r\n* Inside your `if` block place code that...\r\n * + Sets enemy1's x position back to 0\r\n * Sets enemy1's y position to a + random number between 150 and 250\r\n * _Hint: You can reuse some code you + already wrote_\r\n * Use the counter pattern to decrease the score by 2\r\n \r\nTest + your code. One of your ladybugs should now reset when it gets across to the + cake, and the score should go down by 2." + CSD U3 AnimationsMulti defender make it your own_markdown_instruction: "# Make + It Your Own\r\n\r\nYou just walked through someone else's plan for creating + a game, so now it's time to make it your own. What additional features or + challenges do you want to create?\r\n\r\n# Do This\r\n\r\nSelect one of the + challenges below to add to the game or come up with a challenge of your own.\r\n\r\n* + Change the visuals of the game so that your player, enemies, or cake look + different\r\n* End the game when the enemies get to the cake and print the + score. For an extra challenge end the game only after 3 enemies get through\r\n* + Randomize the speed of the enemies\r\n* Create a new background that shows + up when players reach a higher score." + CSD U3 AnimationsMulti defender move player_markdown_instruction: "# Moving + Left and Right\r\n\r\nNow that your enemy sprites are moving correctly, it's + time to write the code to move your player. For now you'll just need to get + your character moving left and right and changing its animations.\r\n\r\n# + Do This\r\n\r\nFor this level you'll be writing code inside the `movePlayer` + function.\r\n\r\n* Use an `if` block along with `keyDown` to detect when the + \"right\" arrow is pressed\r\n* Use `sprite.x` and the counter pattern increase + the player's x position by 3\r\n* Use another `if` block to move the player + to the left when the \"left\" arrow is pressed. This time you'll need to + decrease the player's x position.\r\n\r\nTest your game. Your character sprite + should now move left and right when you press the left and right arrows." + CSD U3 AnimationsMulti defender move up down_markdown_instruction: "# Moving + Up and Down\r\n\r\nYou'll want your player sprite to move up and down as + well.\r\n\r\n# Do This\r\n\r\nFor this level you'll still be writing code + inside the `movePlayer` function.\r\n\r\n* Use an `if` block along with `keyDown` + to detect when the \"up\" arrow is pressed\r\n* Use `sprite.y` to increase + the player's y position by 3 using the counter pattern\r\n* Use another `if` + block to move the player down when the \"down\" arrow is pressed\r\n\r\nTest + your code. Your character should now move in all 4 directions." + CSD U3 AnimationsMulti defender template_markdown_instruction: "# Play and + Pause\r\n\r\nYou can use the `sprite.play` and `sprite.pause` commands to + play and pause a sprite's animation. If the animation is already playing + or paused, using these commands twice in a row has no effect. There's one + important exception, however, which is that **play will restart a non-looping + animation if it has finished**. We're going to look at some cool behavior + this lets us create.\r\n\r\n# Do This\r\n\r\n* Use the `sprite.play` command + after each of your `setAnimation` commands. This will restart the walk animations + as long as the keys are pressed." + CSD U3 AnimationsMulti defender touch water_markdown_instruction: "# Touching + the Water\r\n\r\nThe last part of the game that you'll need to write is the + code to reset the sprites when they touch the water. Luckily you should have + already written functions that reset each sprite, so you'll just need a good + way to know when either sprite leaves the bridge. Start by writing the code + for a single enemy and then copy-paste and make small changes to create code + for your second enemy.\r\n\r\n# Do This\r\n\r\nFor this level you'll be writing + code inside the `enemiesTouchWater` function.\r\n\r\n* Use an `if` statement + to check whether enemy1 is off the top of the bridge by checking whether its + y value is below 140. Within your if statement...\r\n * Use your `setEnemy1` + function to reset the sprite\r\n * Add 1 to the score\r\n* Use an if statement + to check whether enemy1 is off the bottom of the bridge by checking whether + its y value is above 260. Within your if statement...\r\n\t* Use your `setEnemy1` + function to reset the sprite\r\n * Add 1 to the score\r\n* Test your program + for the first enemy sprite. Make sure the sprite is resetting and the score + goes up.\r\n* Once it is working copy and paste the code you wrote to create + the same behavior for `enemy2`. You'll need to change the name of the sprite + and the name of the functions you use." + CSD U3 AnimationsMulti introducing multiframe template_markdown_instruction: "# + Using Multiframe Animations\r\n\r\nYou probably noticed in the last game that + the sprites themselves were animated. Have some fun choosing some of the animations + from the library.\r\n\r\n\r\n# Do This\r\n\r\nThis program already includes + several sprites but they don't yet have any animations.\r\n\r\n* Go to the + Animation tab and check out the multi-frame animations already added to your + project. Choose one for each of your characters.\r\n" + CSD U3 AnimationsMulti introducing multiframe_markdown_instruction: "# Using + Multiframe Animations\r\n\r\nIn the sample defender game the sprites themselves + were animated. Before getting started on programming this game take a minute + to get familiar with this new way of animating sprites.\r\n\r\n# Do This\r\n\r\nThis + program already includes several sprites but they don't yet have any animations.\r\n\r\n* + Go to the Animation tab and check out the multi-frame animations already added + to your project. Choose one for each of your characters.\r\n* Remember you + can use `setAnimation` to give your sprites animations you've created in + the Animation Tab\r\n" + CSD U3 AnimationsMulti mirror animation_markdown_instruction: "# Editing Multiframe + Animations\r\n\r\nYour sprites will look a lot more realistic if they turn + around when they're moving. You can switch back and forth between multiframe + animations when the user presses different keys.\r\n\r\n# Do This\r\n\r\nRead + this code and run the program. Make sure you know how the sprite responds + to the arrow keys.\r\n\r\n* In the Animation Tab create a copy of the alien + animation ![](https://images.code.org/aee81f9cd3f63bb8a9c91ac3ab250a87-image-1475699896387.38.09 + PM.png)\r\n* Use the tool to flip your animation. Make sure you flip both + frames. ![](https://images.code.org/3b10b4a612f9a7c640dc7bb18f4c2b91-image-1475699599617.33.03 + PM.png) \r\n* Rename your new animation\r\n* Use your new animation and old + animation so that the alien faces the correct direction when moving. Where + do you think you'll need to set the sprite's animation in your code?" + CSD U3 AnimationsMulti no loop_markdown_instruction: "# Preventing Animations + from Looping\r\n\r\nBy default your animations keep replaying in a loop. You + can have you animation only play once by clicking this button below your animation.\r\n\r\n# + Do This\r\n\r\n* Set both the animations in your project to non-looping.\r\n* + Run the program and confirm your sprite only takes 1 step when it changes + directions" + CSD U3 AnimationsMulti play pause_markdown_instruction: "# Play and Pause\r\n\r\nYou + can use the `sprite.play` and `sprite.pause` commands to play and pause a + sprite's animation. If the animation is already playing or paused, using + these commands twice in a row has no effect. There's one important exception, + however, which is that **play will restart a non-looping animation if it has + finished**. We're going to look at some cool behavior this lets us create.\r\n\r\n# + Do This\r\n\r\n* Use the `sprite.play` command after each of your `setAnimation` + commands. This will restart the walk animations as long as the keys are pressed." + CSD U3 AnimationsMulti slow down_markdown_instruction: "# Slow Down\r\n\r\nNice + work! Time to start learning how to control these multiframe animations.\r\n\r\n# + Do This\r\n\r\nYour sprites should be animated but they're moving really + quickly. \r\n\r\n* Head back to the Animation Tab. Underneath each animation + you should see a slider. ![](https://images.code.org/169e11c1f6f55b607937fe9cb7e5e390-image-1476209267457.07.26 + AM.png)\r\n* Use these sliders to slow down your animations so they look more + realistic.\r\n\r\n" + CSD U3 Background Discuss_markdown_instruction: "<i class=\"fa fa-hand-paper-o\" + aria-hidden=\"true\" style=\"color:red; float: right; font-size: 200px; font-weight: + 800;\"></i>\r\n\r\n# Animation\r\nUsing the draw loop opens up the potential + to make some neat animations, but it's a bit troublesome that every time + the loop is run it just draws on top of the last drawing. What if we could + make this behave more like a flip book animation?\r\n\r\n# Do This Together\r\n\r\n* + **Run** the provided program together\r\n* **Hypothesize** how does the draw + loop work?\r\n* **Brainstorm** how could we make it so that we only see the + most recently drawn rectangle?" + CSD U3 Background Experiment_markdown_instruction: "# Background\r\nWe could + draw a 400 pixel white square each time the `draw()` loop runs, but there's + actually a built-in command that works even better. The `background()` block + just takes one input, the color of your background, and fills the whole canvas + with that color. The nice thing about using `background()` instead of `rect()` + is that it will fill the screen regardless of how big it is, making your code + more flexible and usable in more scenarios (like when you get a new phone + with a bigger screen).\r\n\r\n# Do This\r\nPlace the `background()` block + inside your `draw()` loop before any other shapes are drawn. Choose a background + color of your choice and then test your code to make sure it only shows a + single rectangle at a time." + CSD U3 Boolean Modify_markdown_instruction: "# Boolean Expressions\r\n\r\nThe + simplest Boolean expressions are questions that the computer can answer with + true or false. These expressions are made using **comparison operators**, + as shown below.\r\n\r\n|Comparison Operator | Boolean Expression | Meaning + |\r\n|:---:|:---:|:---:|\r\n| <img src=\"https://images.code.org/1a0798d75d4242715e7608d825f95101-image-1447271431312.png\" + style=\"width: 100px\"> | `1 < 9` | Is 1 less than 9? | \r\n| <img src=\"https://images.code.org/5ff460ac121f0ac51b569e96a4404c57-image-1447271431310.png\" + style=\"width: 100px\"> | `1 > 9` | Is 1 greater than 9 ? | \r\n| <img src=\"https://images.code.org/a4daa9efccea2278e165592efe343c1a-image-1447271431308.png\" + style=\"width: 100px\">| `1 == 9` | Is 1 equal to 9?| \r\n<br>\r\n**Note:** + If you saw the statement 3 < 2 in math class, you'd think something was terribly + wrong, but this is not math class. In computer science, the comparison operators + **ask a question** that the computer will answer with `true` or `false`. So + you can read 3 < 2 as **\"Is 3 less than 2?\"** The answer in this case is + no, or `false`. \r\n\r\nAnother way to say this is that the Boolean expression + `3 < 2` **evaluates** to `false`.\r\n\r\n# Do This\r\nCan you modify the values + of the sprite properties so that each of the Boolean expressions evaluates + to `true`?\r\n\r\n- Read through the entire program to see how `sprite1` and + `sprite2` are being created and which properties are compared.\r\n- For each + of the Boolean expressions, identify the sprite properties being compared.\r\n- + Change the code _in the first **13** lines only_ so that each of the `console.log()` + statements print `true`." + CSD U3 Boolean Predict_markdown_instruction: "# Boolean Expressions\r\n\r\nDecision-making + in computers is based on statements called **boolean expressions**. A boolean + expression is **any expression that can only evaluate to either `TRUE` or + `FALSE`**. This can be particularly useful when used to compare the properties + of two sprites. For example, you could figure out which one is larger or placed + higher up. In the next few puzzles, we'll use simple boolean expressions + to compare sprite properties.\r\n\r\n# Predict\r\n\r\nRead the code below. + There are some new symbols in it which you haven't been introduced to. Take + a guess at what they mean and try to answer the following question.\r\n\r\nWhich + result will be printed in the console by this program?\r\n\r\n1.\r\n \r\n true\r\n false\r\n true\r\n2.\r\n + \r\n 200\r\n 10\r\n -20\r\n \r\n3.\r\n \r\n true\r\n error\r\n true\r\n4.\r\n + \r\n false\r\n true\r\n false" + CSD U3 Complex Movement counter prediction_markdown_instruction: "# Velocity + and the Counter Pattern\r\n\r\nUsing the counter pattern with a sprite's + x and y property makes a sprite move smoothly across the screen. In this program + **the counter pattern is being used with the `sprite.velocityX` property** + instead.\r\n\r\n# Predict\r\n\r\nWhat do you think will happen when the code + is run? Why? Once you're ready you can run the code to find out." + CSD U3 Compound Nested Challenge_markdown_instruction: "# Checking for Multiple + Conditions\r\n\r\nSo far we've looked at a lot of ways to check if a single + condition is true, but often a program needs to check the state of many conditions + simultaneously before making a decision. For this challenge, let's assume + the following scenario:\r\n\r\n- The sprite should move up, down, left, and + right if the corresponding arrow key is pressed.\r\n- The sprite should _not_ + go all the way off the screen in any direction.\r\n\r\n# Do This Together\r\n\r\nBefore + you tackle writing this program, you'll need to figure out how to check multiple + conditions at once.\r\n\r\n* **Brainstorm** with your neighbors ways you might + check for more than one condition.\r\n* **Share** back with the whole class + so you can see other potential approaches.\r\n* **Explore** the toolbox for + blocks that might help (pay extra attention to the Math and Control drawers).\r\n* + **Program** your proposed solution.\r\n* **Test** your program to make sure + it's actually checking all of the conditions you intended.\r\n" + CSD U3 Compound Nested Examples_markdown_instruction: "# Multiple Paths to + the Same Outcome\r\n\r\nYou may have seen several different approaches to + solving the previous challenge - one of the beatiful things about programming + is that it is as much about personal expression as it is about problem solving. + You could have 10 people attempt to create the same program, and each would + be unique and reflective of the person who programmed it!\r\n\r\nThere are + two primary approaches to checking for multiple conditions:\r\n\r\n### Nesting + Conditionals\r\n\r\nIf you think about asking one question first, and then + asking the second question only if the first was true, you could nest your + conditionals, like so:\r\n\r\n```javascript\r\nif (keyDown('up') {\r\n if + (sprite.y > 0) {\r\n sprite.y = sprite.y - 1;\r\n }\r\n}\r\n```\r\n\r\n### + Compound Booleans\r\n\r\nIf you think about asking if both the first and second + question are true at the same time, you could use `&&` (and) to combine booleans, + like so:\r\n\r\n```javascript\r\nif (keyDown('up') && sprite.y < 0) {\r\n\tsprite.y + = sprite.y - 1;\r\n}\r\n```\r\n\r\n# Do This\r\n\r\nThis program uses a nested + conditional to check the up arrow and a compound boolean to check the down + arrow. Use one (or both) techniques to check the left and right arrows as + well." + CSD U3 Conditional Predict_markdown_instruction: "# Prediction\r\n\r\nIn this + program, the animation has different reactions when the user presses different + keys. One reaction is a new kind of behavior you haven't seen before. Look + at the following inputs and match them to their outputs. Once you have made + your prediction you will be able to test it out.\r\n\r\n| Input |\r\n| ------------- + | \r\n| Press the _space_ bar | \r\n| Press the _w_ key | \r\n| Press the + _j_ key |\r\n| Press the _j_ and _k_ keys | \r\n| Press the _k_ key |\r\n\r\n\r\n| + Output |\r\n| ------------------------- |\r\n| blue_sprite rotates clockwise |\r\n| + red_sprite moves up and blue_sprite moves down |\r\n| The sprites don't + change |\r\n| red_sprite rotates counter clockwise |\r\n| red_sprite gets + bigger and blue_sprite gets smaller |\r\n" + CSD U3 Conditional Project_markdown_instruction: "# Get Creative\r\n\r\nAt + this point you have all of the tools necessary to make an interactive animation + or simple game of your own design! This is your chance practice using all + of the blocks you've seen so far, and to experiment with blocks you haven't + used yet.\r\n\r\n# Do This\r\n\r\nDesign an interactive animation of your + own. Your program should -\r\n\r\n- Use conditionals to get keyboard input\r\n- + Use conditionals to react to a sprite's properties\r\n- Allow a user to move + one or more sprites around the screen\r\n- Change multiple sprite properties + through conditionals\r\n\r\n_You might notice some new blocks in the Sprites + drawer, experiment with them and see if you can incorporate them into your + conditionals._" + CSD U3 Counters assigning an expression_markdown_instruction: "# Assignment + and Expressions\r\n\r\nYou know that **variables can hold a single value**. + You also know that **expressions are always evaluated to a single value**. + Why don't we try storing that single value in a variable so that we can use + it many times in our programs.\r\n\r\n# Do This\r\n\r\nThis program generates + a random multiple of 10 (10, 20, 30, 40 etc) and stores it in the variable + `size`\r\n\r\n* **Run the progam** to see how it works\r\n* **Change the numbers + used in the expression on line 3** to see how it affects this simple animation" + CSD U3 Counters counter colors_markdown_instruction: "# Counters in Colors\r\n\r\nThe + counter pattern you've been using is incredibly useful for changing many + different aspects of your images, not just the position of shapes. **Anything + that normally would be drawn with a number can easily be animated with a counter + variable.**\r\n\r\n# Do This\r\n\r\nThe goal of this program is to use two + variables as counters to **transition a circle's color slowly from blue to + red**.\r\n\r\n* **Run the program** to see what happens.\r\n\t* The `red` + value **already counts up by 1**\r\n\t* The `blue` value **doesn't change** + and so the circle becomes purple, not red.\r\n* Use what you know about counters + to **add code that will make the circle transition smoothly to red**\r\n* + **Note:** When the `color` command sees a value outside the range of 0 - 255 + it just rounds. For example, 300 becomes 255 and -100 becomes 0." + CSD U3 Counters counter square movement_markdown_instruction: "# Animating + with Counters\r\n\r\nThe counter pattern can be used to increase the value + of a variable each time the draw loop runs. You can use this to create smooth + motion in your programs. You're going to try out a few ways of using this.\r\n\r\n# + Do This\r\n\r\nThis program uses the counter pattern with a variable called + `xPos`.\r\n\r\n* **Read the program** and make a prediction of how it will + run.\r\n* **Run the program** to check your prediction\r\n* **Change the code** + so that `xPos` changes by different amounts each draw loop. For example instead + of `xPos = xPos + 1` you could try:\r\n\t* `xPos = xPos + 2`\r\n * `xPos + = xPos + 5`\r\n * `xPos = xPos + 0.1`" + CSD U3 Counters counter subtraction_markdown_instruction: "# Counting Down\r\n\r\nSometimes + you won't want to count up, you'll want to count down. You can **subtract** + from a variable's value just as easily as you add. ![](https://images.code.org/8b98effa437da54090926c3451af204d-image-1465325587949.52.49 + PM.png)\r\n\r\n\t// counter pattern, counting down\r\n counter = counter + - 1;\r\n\r\nKeep getting practice using counters to animate, but this time + try counting down.\r\n# Do This\r\n\r\nThis program uses the counter pattern + with a variable called `xPos`.\r\n\r\n* The square currently starts in the + center and **goes off the right side** of the screen\r\n* **Change the program** + so that the square **goes off the left side of the screen** instead.\r\n\r\n" + CSD U3 Counters counters expressions_markdown_instruction: "# Using One Counter + Many Times\r\n\r\nYou've already seen and used commands like `x = x + 1` + often to update the value of `x`. Sometimes though we want to **do some math + with a variable without actually changing that variable's value**. \r\n\r\nThis + program draws a rectangle **100 pixels to the right of `x` without changing + the value of `x`**. Here's the steps your computer goes through to run that + second line of code.\r\n\r\n![](https://images.code.org/8f33bbb0189c5e1b854c5b1786168225-image-1465503000293.09.49 + PM.png)\r\n\r\nUsing this pattern allows you to use a single counter to animate + multiple objects, as you're about to see.\r\n\r\n# Do This\r\n\r\nThis program + creates a counter variable called `xPos` and uses it to animate 3 rectangles.\r\n\r\n* + **Run the program** to see what happens.\r\n* **The red and orange rectangles + move across the screen but the yellow one doesn't yet.**\r\n* **Write code + following the pattern shown above** so that the yellow rectangle will move + across the screen with the others.\r\n* **Hint:** How was the orange rectangle + made to move?\r\n\r\n![](https://images.code.org/822941874e7add509bb80266718efb94-image-1463080462625.gif)" + CSD U3 Counters counters sunset night_markdown_instruction: "# Challenge: Nightfall\r\n\r\nThink + you've got drawing with counters down? Try this challenge.\r\n\r\nThe color + block can take a 4th input that controls the opacity of the color. You can + click the arrows on the side of the color block to expand this 4th input.\r\n\r\n![](https://images.code.org/7844f8cb46eade7cec452b7a4d98124b-image-1484964689007.10.08 + PM.png)\r\n\r\n# Do This\r\n\r\nThis is your same sunset animation from before. + Can you make the scene slowly change to night?\r\n\r\n![](https://images.code.org/b055142110b0d0ed092d6496447aad6e-image-1463079830043.gif)\r\n\r\n" + CSD U3 Counters counters sunset_markdown_instruction: "# Animate a Sunset\r\n\r\nYou + now know a little bit about programming with variables. You've seen that + they can **store a value to use many times in a program**. You've seen how + the **counter pattern can allow you to perform smooth animations**. It's + now time to put everything you've learned together.\r\n\r\n<img src = \"https://images.code.org/d0a1386297fae9f21fc046da62b13248-image-1462997082538.gif\" + style=\"float: right; height: 200px\">\r\n# Do This\r\n\r\nThis program is + designed to **animate a sunset**. Some starter code is provided that **creates + all the counter variables you'll need to run your animation**. You need to + decide how to use them to animate this image.\r\n\r\n* **Run the program to + see how it works**\r\n* **Add code** that will:\r\n\t* Make the sun go down\r\n * + Change the color of the sky from blue to red\r\n * Make the cloud go across + the screen\r\n \r\n<details><Summary>Need help?</Summary>\r\n<ul>\r\n<li>For + help animating the sun go check out level 10</li>\r\n<li>For help animating + the sky go check out level 12</li>\r\n<li>For help animating the cloud go + check out level 13</li>\r\n</ul>\r\n\r\n</details>" + CSD U3 Counters explaining counters contained 2_markdown_instruction: "# The + Counter Pattern\r\n\r\nThis pattern is one of the most important ones in all + of programming. \r\n\r\n![](https://images.code.org/83af2e40443ab294ba635f2a01a48ac7-image-1465506512065.06.56 + PM.png)\r\n \r\nIt is used to increase the value of a variable by 1. You + might call it the **counter pattern** since it can be used to make a variable + that counts up. You'll use this pattern a lot, especially with the draw loop. + Let's see what that looks like.\r\n\r\n# Do This\r\n\r\nThis program creates + a variable `counter` and then uses the **counter pattern** to make it count + up. When you run the program what do you think you'll see on the screen?\r\n\r\n* + **Read the program** and make a prediction of what the output will be.\r\n* + **Run the program** to check your prediction.\r\n* **Discuss with a neighbor**. + Can you explain what you observed?\r\n\r\n" + CSD U3 Counters explaining counters_markdown_instruction: "# The Counter Pattern\r\n\r\nThis + pattern is one of the most important ones in all of programming. \r\n\r\n![](https://images.code.org/83af2e40443ab294ba635f2a01a48ac7-image-1465506512065.06.56 + PM.png)\r\n \r\nIt is used to increase the value of a variable by 1. You + might call it the **counter pattern** since it can be used to make a variable + that counts up. You'll use this pattern a lot, especially with the draw loop. + Let's see what that looks like.\r\n\r\n# Do This\r\n\r\nThis program creates + a variable `counter` and then uses the **counter pattern** to make it count + up. When you run the program what do you think you'll see on the screen?\r\n\r\n* + **Read the program** and make a prediction of what the output will be.\r\n* + **Run the program** to check your prediction.\r\n* **Discuss with a neighbor**. + Can you explain what you observed?\r\n\r\n" + CSD U3 Counters expressions_markdown_instruction: "# Expressions\r\n\r\nWe're + going to start learning about **expressions** and how to use them in programs. + Here are two expressions, a short one and a longer one.\r\n\r\n`1 + 2`\r\n\r\n`(1000 + - 400) / (3 * 20)`\r\n\r\nThese expressions have two important components:\r\n\r\n* + **values:** numbers, text, or information in your program \r\n* **operators:** + commands telling the computer to perform an action with those value `+`, `-`, + `*`, `/`\r\n\r\nDon't worry if this is a lot of vocabulary all at once. Try + using some expressions first to get a feel for how they work.\r\n\r\n# Do + This: \r\n\r\nThis program draws a rectangle using 4 separate expressions. + \r\n\r\n* **Run the program** to see what happens\r\n* **Change some of the + values and operators in the 4 expressions**. How does it change the rectangle?\r\n* + Move on once you've changed a few expressions. It's fine if your program + didn't run properly." + CSD U3 Counters long expressions_markdown_instruction: "# Expressions Evaluate + to a Single Value\r\n\r\nAs you probably just noticed expressions can be used + in places where you might normally use a number. That's because your computer + can **evaluate or calculate the single number that is the result of the expression**. + When your computer runs the command\r\n\r\n`strokeWeight(10 + 20)`\r\n\r\nIt + will first calculate the value of the expression `10 + 20` to be `30` and + use that value to set the strokeWeight. In fact, **every expression will eventually + be evaluated to a single value**.\r\n\r\n# Do This\r\n\r\nThis program uses + console.log to show the single value of a couple long expressions.\r\n\r\n* + **Run the program** to see that the expressions result in a single value\r\n* + **Create and display the results of some expressions of your own**. It doesn't + matter what they are, just throw in something long and complex and convince + yourself a single value always comes out." + CSD U3 Counters random expressions_markdown_instruction: "# Random Numbers + in Expressions\r\n\r\nYou can **use random numbers inside of expressions** + too. For example, \r\n\r\n`10 * randomNumber(1,5)`\r\n\r\nis a perfectly valid + expression. This is because **`randomNumber` will generate a single random + value** that can then be used in the expression just like a number.\r\n\r\n# + Do This\r\n\r\nThis program displays random multiples of 10 between 10 and + 50.\r\n\r\n* **Run the program** to see how it works\r\n* **Change the program** + so that it displays **random multiples of 10 between 10 and 100**.\r\n* Change + the expression with a random number in it more if you like. Once you're comfortable + with how it works move on." + CSD U3 Counters sunset template_markdown_instruction: "# Animate a Sunset\r\n\r\nYou + now know a little bit about how **expressions can be used to create variables + that count** and you've used these in some simple programs. Try using counter + variables to animate a more complex scene.\r\n\r\n# Do This\r\n\r\nThis program + is designed to **animate a sunset**. Some starter code is provided but you'll + need to fill in the rest.\r\n\r\n* **Run the program to see how it works**\r\n* + **Add code** that will:\r\n\t* Make the sun go down\r\n * Make the cloud + go across the screen\r\n * Change the color of the sky from blue to red\r\n \r\n<details><Summary>Want + a hint?</Summary>\r\n<ul>\r\n<li>For help animating the sun go check out level + [[blah]]</li>\r\n<li>For help animating the cloud go check out level [[blah]]</li>\r\n<li>For + help animating the sky go check out level [[blah]]</li>\r\n</ul>\r\n\r\n</details>\r\n\r\n![](https://images.code.org/d0a1386297fae9f21fc046da62b13248-image-1462997082538.gif)" + CSD U3 Counters variables as counters_markdown_instruction: "# x = x + 1\r\n\r\nThe + following line of code **is the most important one to understand in this lesson**.\r\n\r\n`x + = x + 1;`\r\n\r\nTry it out in a program first, then move on to **learn more + about what this command is doing**.\r\n\r\n# Do This:\r\n\r\n* **Read the + program to get a sense of how it should run**\r\n* **Run the program** and + observe how it works\r\n* **Discuss with a neighbor** what you observe and + why you think it is happening. Once you've talked, move on." + CSD U3 Counters variables in expressions_markdown_instruction: "# Variables + in Expressions\r\n\r\nYou just saw that **the result of an expression can + be stored in a variable**. Get ready though, because we're about to get even + more interesting.\r\n\r\n**Variables can be used in expressions**. All of + these expressions are valid (assuming the variables have been created):\r\n\r\n`age + + 1`\r\n`height / 2`\r\n`(time * speed) + 100`\r\n\r\nIn each case **the variable's + value is used when its label appears**.\r\n\r\n# Do This\r\n\r\nThis program + generates a random multiple of 10 (10, 20, 30, 40 etc) and stores it in the + variable `size`\r\n\r\n* **Run the progam** to see how it works\r\n* **The + variable `size` appears in two expressions on lines 7 and 8.**\r\n* **Change + the values in these expressions** to see how they affect the way your program + works" + CSD U3 Counters watchers_markdown_instruction: "# Debugging: Watchers\r\n\r\nOnce + you have multiple counter variables it can become difficult to keep track + of how your program is running. **If you want to debug your code, it's useful + to be able to see the values of your different variables as they change.**\r\n\r\nYou + can add a **watcher** to a variable at any time by typing `$watch` followed + by the name of your variable into the Debug Console. This example shows how + you would create watchers for the variables `x` and `y`. Notice they've now + **been added to the \"Watch\" window** to the right.\r\n\r\n![](https://images.code.org/c5cddda5572e73e3f082287aa076e4a8-image-1465327628344.25.11 + PM.png)\r\n\r\nWhile your program is running, the values of `x` and `y` in + the \"Watch\" window will update to show their current value.\r\n\r\n# Do + This\r\n\r\nThis program draws a dot that slowly grows in size. You want to + know **the value of `size` when the dot totally covers the screen.**\r\n\r\n* + **Create a watcher** for `size` by running the command `$watch size` in the + Debug Console.\r\n* **Run the program** and observe the value of `size` change + in the \"Watch\" window.\r\n* **Talk to a neighbor**. How large is `size` + when the dot covers the whole screen?" + CSD U3 Direction Animations_markdown_instruction: "# Changing Images as you + Move\r\nRight now your conditionals only do one thing (change your sprite's + x or y), but you can actually put as much code as you want inside a conditional. + A common thing to do in games is to change your character's image depending + on which direction they're walking.\r\n\r\n# Do This\r\nUsing the provided + program and images:\r\n\r\n- Click on the bug image you are using.\r\n- Use + the Duplicate Button <img src=\"https://images.code.org/f8628b1d4393760d72ea625a93aceb66-image-1481036707819.04.47 + AM.png\" style=\"width:30px\"> in the Animation Tab to make 4 copies of the + bug image you are using.\r\n- Make each copy face a different way and give + it a good descriptive name.\r\n- You should now have 4 images of the bug in + your animation tab, each facing a different way\r\n- Write code that uses + `sprite.setAnimation()` to change the image on your bug sprite when different + arrow keys are pressed\r\n\t- The up arrow should switch to up facing bug + image\r\n\t- The down arrow should switch to down facing bug image\r\n\t- + The left arrow should switch to left facing bug image\r\n\t- The right arrow + should switch to right facing bug image" + CSD U3 Direction Arrows_markdown_instruction: "# Move in All Directions\r\nOnce + you've got your sprite moving in one direction by responding to a `keyDown`, + getting it to move in all four directions should be more of the same. The + basic keyboard control that you're developing here will become the basis + for many of the games you make down the road.\r\n\r\n# Do This\r\nThe bug + sprite you made that responds to the up arrow has been brought to this level. + Add the interaction for the other three arrow keys!\r\n\r\n- Add three if + statements - one for each arrow.\r\n- Each if statement should move the sprite + in the direction of the arrow.\r\n- HINT: As you're working, make sure you + consider both which axis (x or y) your sprite should be moving depending on + the key, and whether or not you should be increasing or decreasing to go in + the desired direction." + CSD U3 Draw Loop Discuss_markdown_instruction: "# Draw()ing\r\nHere's a program + that looks pretty similar to what you've been writing, but may behave quite + differently. You'll want to **stop and discuss** with the class before moving + on.\r\n\r\n# Do This Together\r\nYou will **not write any code** in this level, + and you should be working as a whole class.\r\n* **Read** the provided program + together.\r\n* **Identify** elements that are different than those you have + seen before.\r\n* **Predict** what the provided program will do. **Be specific!**\r\n* + **Run** the program several times and **record** the results.\r\n* **Discuss + with a neighbor.** Was your prediction correct?\r\n* **Hypothesize** what + is happening when this code is run." + CSD U3 Draw Loop Experiment_markdown_instruction: "# Do This\r\nTry using some + of the other shape functions you've learned in the draw loop. What happens + when you use `randomNumber()` to generate some of the inputs?\r\n\r\n# Challenge\r\nExperiment + with adding code before and after the `draw()` loop. Can you figure out what + gets called when?" + CSD U3 Else_markdown_instruction: "# What If My Condition Isn't True?\r\n\r\n<img + src=\"https://images.code.org/1a997d78fcd88efeb9e6dc5a02aa88e8-image-1464706463138.53.58.png\" + width=\"125px\" style=\"float:right\">\r\n\r\nSometimes we want to tell our + program what to do if a condition is `true`, but also what to do if it's + `false`. Pressing the plus button at the bottom of your conditional block + will give you another section called `else`. This `else` section is a fallback + - it will get called whenever the condition in the `if` before it is `false`.\r\n\r\n# + Do This\r\nThe gears are back again. The last time you worked with them, you + made them spin when the space bar is pressed. Instead of the gears only spinning + when the space key is pressed, we want them to spin one way when the space + key is pressed and spin the other way when it's not pressed.\r\n<img src=\"https://images.code.org/b074d47ca8dfa5ab3bfd08344b4f4e42-image-1464706389475.gif\" + style=\"float:right\">\r\n\r\n* Click the _plus_ button at the bottom of the + if block to add an else.\r\n* Add commands to make the gears spin opposite + of the direction that they do when the space bar is pressed." + CSD U3 Expressions calculator_markdown_instruction: "# Adding and Multiplying\r\n\r\nYour + computer can calculate the results of many math problems. Try out this example, + where we add and multiply a few numbers. Then extend it yourself to the numbers + 1 - 10.\r\n\r\n# Do This\r\n\r\n* Run the program code once to see how it + works\r\n* Following the examples, write a program that **multiplys the numbers + 1 - 10** and **adds the numbers 1 - 10**\r\n* **When you're done confirm + your results with a neighbor**" + CSD U3 Frame Rate_markdown_instruction: "# Too Fast, Slow Down!\r\n<img src=\"https://images.code.org/f249b981ead9d196b0f136c402dd0c41-image-1478803334302.gif\" + style=\"float:right; width:200px\"/>\r\n\r\nThe animation is working, but + it's a bit too fast. We're flipping the pages in our virtual flipbook too + often, so we'll need to slow that down.\r\n\r\nThe frequency that our draw + loop is run is called the **frame rate** - the number of times per second + the screen is refreshed.\r\n\r\nThe default frame rate for Game Lab is 30 + frames per second (or FPS), which is great for a video game, but not so good + for our animation. We can slow down the frame rate using the `Game.frameRate` + block.\r\n\r\n# Do This\r\n\r\n* Use the `Game.frameRate` block at the very + beginning of your program, setting it to a number (frames per second) that + slows the animation down a bit. \r\n* Test it out with different numbers to + see which frame rate you like (the default is 30, and it can't go any higher + than 60)." + CSD U3 Functions Add Change Background tmp_markdown_instruction: "# Change + the Background with the Score\r\n\r\nOnce you've caught 10 coins it's time + to celebrate. You should change the background to be something fun.\r\n\r\n<img + src=\"https://images.code.org/943c67e59502334fc65a25e690076bdb-image-1475030156530.33.54 + PM.png\" style=\"float:right; height:100px\">\r\n\r\n# Do This\r\n\r\n* Use + an **if-statement** and two separate functions to draw your backgrounds\r\n* + Then go write your functions outside your draw loop. You get to decide what + a \"simple\" or \"crazy\" background are. Have fun with it!" + CSD U3 Functions Add Change Background_markdown_instruction: "# Change the + Background with the Score\r\n\r\nOnce you've caught 10 coins it's time to + celebrate. You should change the background to be something fun.\r\n\r\n<img + src=\"https://images.code.org/943c67e59502334fc65a25e690076bdb-image-1475030156530.33.54 + PM.png\" style=\"float:right; height:100px\">\r\n\r\n# Do This\r\n\r\n* Use + an **if-statement** and two separate functions to draw your backgrounds\r\n* + Then go write your functions outside your draw loop. You get to decide what + a \"simple\" or \"crazy\" background are. Have fun with it!" + CSD U3 Functions Add IsTouching_markdown_instruction: "# Catch the Coin, Increase + the Score\r\n\r\nLet's make that score change now too to complete the game. + You'll need to be able to tell when the bunny is touching the coin and the + reset it.\r\n\r\n# Do This\r\n\r\n* Use an **if-statement** and the **isTouching** + block to increase the score when the bunny catches the coin\r\n* Make sure + you're **calling your function** to reset the coin once it's been caught.\r\n* + Play the game and **randomize the velocity of the coin** to a range that you + think is fun" + CSD U3 Functions Call Draw Loop_markdown_instruction: "# Calling Functions + in the Draw Loop\r\n\r\nYou can call a function inside the draw loop, just + as you would anywhere else in your code.\r\n\r\n# Do This\r\n\r\nA function + that will draw a background has been created for you. A sprite has been created + to move across the background.\r\n\r\n* **Call the function inside the draw + loop** so that the sprite appears on top of the background.\r\n* **Note:** + Don't create functions inside the draw loop. Make them at the bottom of your + code." + CSD U3 Functions Call Function_markdown_instruction: "# Calling Functions\r\n\r\nFunctions + let you build your own blocks and decide what code goes inside of them. This + is the command that lets you create a new function.\r\n\r\n![](https://images.code.org/2493f74065d4e642ca51429b8832e431-image-1474913839061.17.09 + PM.png)\r\n\r\nYou use or \"call\" your function like any other block by using + the name you gave it.\r\n\r\n![](https://images.code.org/61a6eb716e263b580ecd63fab0de7547-image-1474913770359.16.00 + PM.png)\r\n\r\nThe blocks to create and call functions can be found in the + \"Functions\" tab of the palette.\r\n\r\n![](https://images.code.org/a570a05be61297ee9f0d79a02df8db6e-image-1474922721897.44.36 + PM.png)\r\n\r\n# Do This\r\n\r\nThis program has already created 2 functions. + Only one of them is being called.\r\n\r\n* **Call the second function** to + reveal the full image. Use the function that is being called as a guide.\r\n* + **Tip:** Just like with all other blocks, spelling and capitalization is important + here" + CSD U3 Functions Create Function_markdown_instruction: "# Creating Functions + to Organize Code\r\n\r\nIn Game Lab all the action is happening in the draw + loop, but too much complex code makes it really confusing to read. To keep + your draw loop easy to read, begin by writing functions for larger chunks + of code. You can then go write them below. This is a really good example of + using **abstraction** to think about problems at a high level and worry about + details later.\r\n\r\n<img src=\"https://images.code.org/1a5beeaad6e55c5b27a43604be4f039a-image-1475199750468.42.07 + PM.png\" style=\"float:right;width:150px\">\r\n\r\n# Do This\r\n\r\nThis program + should draw a daytime scene or a nighttime scene, depending on the location + of the mouse. The draw loop describes what needs to happen but one of the + functions hasn't been written yet.\r\n\r\n* **Write the `drawNight` function** + which has been created but is empty\r\n* Hint: Look at the picture to the + right for how your night image should look. Can you use the `drawDay` function + to help you at all?" + CSD U3 Functions Improve Side Scroller_markdown_instruction: "# Finish Your + Side Scroller\r\n\r\nTime to use functions to finish off you side-scroller!\r\n\r\n# + Do This\r\n\r\n* Change the background of your game depending on the score. + Use functions to move the code for your background out of your draw loop\r\n* + Use functions to make sure you're not repeating code when you reset your + obstacle\r\n\r\n_Challenge: Add another sprite to your game and define how + it will interact with your main character. It might be another obstacle to + avoid or some kind of goal to collect_" + CSD U3 Functions Order Functions_markdown_instruction: "# Reordering Code\r\n\r\nPlacing + code inside functions makes it easy to read and make changes to. Good names + for functions indicate what your program is doing to a reader. You can call + your functions in a different order to quickly make significant changes to + how your program runs.\r\n\r\n# Do This\r\n\r\nThis program has already created + 4 functions that draw parts of a scene. Unfortunately it's not coming out + right.\r\n\r\n* **Read the of the 4 functions** to know what they do\r\n* + **Call the functions** in an order that draws the scene in the way that looks + best to you" + CSD U3 Functions Prediction Order of Create Call_markdown_instruction: "# When + Can Your Define Functions?\r\n\r\nSo far you've only seen functions created + at the bottom of your code. What do you think happens if we create the function + before we call it?\r\n\r\n# Do This\r\n\r\n" + CSD U3 Functions Randomize Sprite_markdown_instruction: "# Making Changes to + Functions\r\n\r\nA nice benefit of using functions to remove repeated code + is that you can now easily make changes to multiple places in your code. Just + change how you create the functions, and your program will now use the new + code everywhere your function is called.\r\n\r\n# Do This\r\n\r\nMake changes + to the `setFlyman` function so that he starts at a random Y location between + 0 and 400, and moves at a random velocity every time he is reset." + CSD U3 Functions Reset Sprite_markdown_instruction: "# Calling Functions Multiple + Times\r\n\r\nYou'll often want to use the same code at many places in your + program. Once you've created a function you can call it as many times as + you like.\r\n\r\n# Do This\r\n\r\nThis code creates a sprite that moves across + the screen once. How can you make it go back across the screen.\r\n\r\n* **Note:** + The function is already called once at the beginning of your program\r\n* + Read the condition of the **if-statement** inside the draw loop. Why do you + think it's there?\r\n* Use this if-statement and the function written for + you to make the sprite move across the screen multiple times." + CSD U3 Functions Template Flyman_markdown_instruction: "# Calling Functions + Multiple Times\r\n\r\nOften times you'll want to use the same code at many + places in your program. Once you've created a function you can call it as + many times as you like.\r\n\r\n# Do This\r\n\r\nThis code creates a sprite + that moves across the screen once. How can you make it go back across the + screen.\r\n\r\n* Read the condition of the **if-statement** inside the draw + loop. Why do you think it's there?\r\n* Use this if-statement and the function + written for you to make the sprite move across the screen multiple times." + CSD U3 Functions Write Reset_markdown_instruction: "# Write Your Own Function\r\n\r\nTime + to practice writing functions of your own. This is a very simple game in which + coins fall from the sky and the bunny tries to catch them. All you need to + do is write the function that sets up the coin.\r\n\r\n# Do This\r\n\r\n* + **Read and run the code** that already exists to make sure you know how it + works\r\n* **Write the code for the `setCoin`** function to make the coin + fall from the sky.\r\n* You can go look at some of the previous levels if + you need help" + CSD U3 Functions Write Your Own_markdown_instruction: "# Write Your Own Function\r\n\r\nTry + writing your own function to add something to the scene!\r\n\r\n# Do This\r\n\r\nThis + is the same program you wrote in the last level.\r\n\r\n* **Create and call** + a function that adds something to the scene. No need to get too complex, but + make sure you get some practice writing a function\r\n* **Share your code** + with a neighbor. Do they think your function's name clearly describes what + it does? Make changes if you need to." + CSD U3 Functions isTouching_markdown_instruction: "# Making Changes to Functions\r\n\r\nA + nice benefit of using functions to remove repeated code is that you can now + easily make changes to multiple places in your code. Just change how you create + the functions, and your program will now use the new code everywhere your + function is called.\r\n\r\n# Do This\r\n\r\nMake changes to the `setFlyman` + function so that he starts at a random Y location between 0 and 400, and moves + at a random speed every time he restarts." + CSD U3 If Else_markdown_instruction: "# When to Provide a Fallback\r\n\r\nThe + else clause is useful as a fallback to the main condition that you're checking + - that is, if you _care_ what happens when your primary condition is `false`, + you should provide an else clause to take care of it.\r\n\r\n<img src=\"https://images.code.org/730a895b50375781e72c95f5fa21d09d-image-1477681109870.gif\" + style=\"float:right;\">\r\n\r\n# Do This\r\nClick \"Run\" to see the swarm + of bees created for you and a flower on the left side of the screen. Make + the swarm of bees **appear when the mouse is near the flower** (on the left + side of the screen) and **disappear when the mouse is away from the flower** + (on the right side of the screen). Look at the example on the right.\r\n\r\n* + Add an `if else` statement after you update the position of the bees.\r\n* + In the input of the if use a boolean to check if the x position of the mouse + is on the side of the screen with the flower.\r\n* Set the `visible` property + of each bee inside both the if and else statements appropriately to make the + bees only show near the flower." + CSD U3 Interactive Card Background_markdown_instruction: "# Laying Out Your + Background\r\nBefore beginning this project, you should have already completed + the Interactive Card Planning activity, and you'll want to have that paper + with you as you develop your program. Preparation is one of the **most important** + elements of successfully creating a program!\r\n\r\n# Do This\r\nRefer to + your planning activity sheet to help you lay out the shapes that will become + the background to your card.\r\n\r\n* First, figure out what the lowest layer + in your image is (this should use the `background()` block) and add it to + the very top of the `draw()` loop\r\n* Next, layer each additional drawing + block in the order you want them to appear in the stack\r\n* Finally, add + a comment to the top of this section of code to describe what it does, and + if you have any particularly complicated chunks of code within (such as code + to draw a tree or a house), add a descriptive comment to that as well\r\n\r\n**Challenge:** + Can you use variables or `randomNumber()` to add some subtle animation to + your background layer?" + CSD U3 Interactive Card Exemplar_markdown_instruction: "# Example Project\r\n\r\nRun + the program a few times and answer the following questions:\r\n\r\n1) Which + elements appear to use drawing commands?\r\n\r\n2) Which elements appear to + be Sprites?\r\n\r\n3) For each Sprite, which properties are being updated?\r\n\r\n4) + Where do you see conditionals being used?\r\n\r\n5) Are there elements that + you don’t understand?" + CSD U3 Interactive Card Final_markdown_instruction: "# Finishing Touches\r\nNow's + your chance to put some finishing touches on your card. We've included some + new blocks that you haven't seen before, so take some time to look around + and try out some new blocks.\r\n\r\n# Do This\r\nConsider adding any of the + following to finish up your card:\r\n\r\n* Text (add it after the `drawSprites()` + block if you want it on top of everything)\r\n* Additional images for your + Sprites\r\n* Subtle animation in the background\r\n* Sound effects (can you + figure out how to do this?)\r\n* More ways for a user to interact with your + card" + CSD U3 Interactive Card Other Conditionals_markdown_instruction: "# Other Conditionals\r\nThe + _surprise_ in your card comes from conditionals that don't directly respond + to user input, but to some other element of your card. This could be triggered + by a variable that gets updated as the user interacts with your card, or a + Sprite moving into a certain part of the screen.\r\n\r\n# Do This\r\nFor each + of the remaining items on your interactions table:\r\n\r\n* Add an `if` block + (or `if-else` block if you need a fallback action) inside the `draw()` loop\r\n* + Add the appropriate boolean comparison block to the condition (eg. `<`, `>`, + or `==`)\r\n* Add the necessary actions inside the `if` block\r\n\r\n**Challenge:** + Can you create more sophisticated conditionals by nesting them or using compound + booleans?" + CSD U3 Interactive Card Sprites_markdown_instruction: "# Adding Sprites\r\nNow + that you have the more static elements of your card layed out, it's time + to add the Sprites. Your Sprites should provide the primary animations and + interactions for your card - so feel free to get creative here and have fun.\r\n\r\n# + Do This\r\nCheck out the Sprites table on the back of your planning sheet. + For each Sprite in your table:\r\n\r\n* Initialize the Sprite at the top of + your program with `createSprite()`.\r\n* Find or create the image(s) for the + Sprite and set it with `setAnimation()`.\r\n* Inside the `draw()` loop update + any Sprite properties that we will be constantly animating (we'll deal with + conditionals in a minute)." + CSD U3 Interactive Card User Input_markdown_instruction: "# User Input\r\nYou've + got a background, you've got Sprites, now it's time to give your user something + to do!\r\n\r\n# Do This\r\nOn the interactions table from your planning sheet, + find all of the interactions that rely on user input (key presses and mouse + movements). For each of those interactions:\r\n\r\n* Add an `if` block (or + `if-else` block if you need a fallback action) inside the `draw()` loop.\r\n* + Add the appropriate input block for your condition (such as `keyDown()` or + `mouseDown()`).\r\n* Add the necessary actions inside the `if` block.\r\n\r\n**Challenge:** + Can you create more sophisticated conditionals by nesting them or using compound + booleans?" + CSD U3 Keypress Boolean Predict_markdown_instruction: "# Make a Prediction: + keyDown()\r\nThe `keyDown()` block is the first of a new set of blocks that + will let us get input from the user. This is the first step on our road to + actually making games! See if you can figure out how the `keyDown()` block + works.\r\n\r\nWhat do you think will happen when you run the program and press + the \"up\" arrow? Write your prediction below and then run the program to + see if your prediction was accurate." + CSD U3 Keypress Boolean_markdown_instruction: "# keyDown()\r\nThe `keyDown()` + block is the first of a new set of blocks that will let us get input from + the user. This is the first step on our road to actually making games! See + if you can figure out how the `keyDown()` block works.\r\n\r\n# Do This\r\n\r\nYou + will **not write any code** in this program.\r\n\r\n* Read the program and + see if you can guess what will happen.\r\n* Run the program.\r\n* While the + program is running, press the up arrow on your keyboard.\r\n* Observe what + happens." + CSD U3 Keypress Watchers Predict_markdown_instruction: "# Make a Prediction: + User Input\r\n\r\nSo far you've used `keyDown` as a way to let users control + your programs, but that's just one of many ways to take input. In fact, just + one of many ways _to detect keypresses_! Depending on how you want to react + to a keypress, there are a few other blocks you might want to use.\r\n\r\nRead + the program and predict below what will happen when you press each of the + up, down, left, and right arrows.\r\n\r\nAfter making your prediction, run + the code and write down or share with your neighbor your observations.\r\n\r\n* + What seems to be the difference between `keyDown()`, `keyWentDown()`, and + `keyWentUp()`?\r\n* What do you think the exclamation mark (`!`) on line 10 + does?\r\n* How might you use the different keypress blocks in a game?" + CSD U3 Keypress Watchers_markdown_instruction: "# More Ways to Get User Input\r\n\r\nSo + far you've used `keyDown` as a way to let users control your programs, but + that's just one of many ways to take input. In fact, just one of many ways + _to detect keypresses_! Depending on how you want to react to a keypress, + there are a few other blocks you might want to use.\r\n\r\n# Do This\r\n\r\nYou + will **not write any code** in this program.\r\n\r\n* Read the program and + see if you can guess what will happen.\r\n* While the program is running, + press the arrow keys and observe how the screen responds.\r\n* Write down + or share with your neighbor your observations.\r\n\t* What seems to be the + difference between `keyDown()`, `keyWentDown()`, and `keyWentUp()`?\r\n * + What do you think the exclamation mark (`!`) on line 10 does?\r\n * How + might you use the different keypress blocks in a game?" + CSD U3 Property Conditional Multi_markdown_instruction: "# Get Creative\r\n\r\nNow + that you've seen how we can use conditionals both to take input from the + keyboard and to react to changes is sprite properties, it's time to come + up with a cool use of conditionals on your own. You'll want to brainstorm + with a partner to come up with the sprite properties you want to change, and + the conditions that will decide when they get changed.\r\n\r\n# Do This\r\n- + Decide which sprite properties will be controlled by conditionals eg:\r\n\t- + Position (x and y)\r\n - Rotation\r\n - Color\r\n - Size (width, + height, or scale)\r\n - etc\r\n- For each sprite property, decide on a + conditional that will impact it:\r\n\t- Keyboard input (`keyDown()`, `keyWentDown()`, + etc)\r\n - Sprite position\r\n - Mouse position\r\n - Other variables + or properties\r\n- One at a time, write and test each conditional\r\n\r\n**Challenge** + - Can you make a single conditional impact multiple properties?\r\n" + CSD U3 Property Conditional_markdown_instruction: "# Doing More With Conditionals\r\nUsing + conditionals to figure out which key was pressed is pretty useful, but we + can also use conditionals with any value in our program, including sprite + properties!\r\n\r\nWith your neighbor, discuss the kinds of boolean questions + you could use with the following sprite properties:\r\n\r\n- `sprite.x` and + `sprite.y`\r\n- `sprite.width` and `sprite.height`\r\n- `sprite.shapeColor`\r\n- + `sprite.visibility`\r\n\r\n# Do This\r\nHere's a program similar to one you + just made, it uses `keyDown()` to move the sprite around the screen when you + click the arrow keys. You're going to add some additional conditionals to + this program to do the following:\r\n\r\n- Change the color of the sprite + if it goes into the top quarter of the screen\r\n- Rotate the sprite if it + goes into the left quarter of the screen\r\n- Make the sprite invisible if + it goes into the bottom quarter of the screen\r\n- Make the sprite larger + if it goes into the right quarter of the screen\r\n\r\n_BTW, if you're looking + for the `keyDown()` block, you'll notice that it's now in the 'Game Lab' + category._ \r\n" + CSD U3 Random Animation_markdown_instruction: "<img src=\"https://images.code.org/f249b981ead9d196b0f136c402dd0c41-image-1478803334302.gif\" + style=\"float:right; width:200px\"/>\r\n# Animation\r\n\r\nLook at this face + made from some simple shapes. We put it in the `draw()` loop so that we could + animate it, but it doesn't seem to be doing anything. We want the mouth to + move like the image on the right, so that it looks like it's talking\r\n\r\n# + Do This\r\n* Find the code that draws the mouth and replace the width and + height with calls to `randomNumber()`\r\n* Experiment with different ranges + of random numbers to get the kind of animation you're looking for.\r\n\r\nHint: + Don't worry if it's going too fast. You'll slow it down on the next level." + CSD U3 Random Choice_markdown_instruction: "# Making Random Choices\r\n\r\nYou + probably noticed that the code from the last puzzle did a few things.\r\n* + Always produced a whole number (also called an **integer**).\r\n* The lowest + number that could be produced was 0, which is the first **input** we passed + to the `randomNumber` block.\r\n* The highest number that could be produced + was 10, which is the second **input** to the block.\r\n\r\nLet's create a + program that can randomly make decisions for us. We'll use a **binary** representation + where `0` means `false` and `1` means `true`.\r\n\r\n# Do This\r\n\r\n* Write + a program that randomly writes out either 0 or 1 using `console.log()`.\r\n* + Have your partner ask some true/false or yes/no questions and use your program + to randomly answer." + CSD U3 Random Color_markdown_instruction: "# Randomized Colors\r\n\r\nCould + you use `randomNumber()` to pick random colors as well? Back in unit 2 you + learned that colors can be composed of Red, Green, and Blue channel values + - each of which is represented by a number value. What's the maximum and + minimum that those channels can be set to?\r\n\r\n# Do This\r\n\r\nUsing the + `color()` function, set the `fill` or `stroke` of your shape to a random color.\r\n\r\n# + Challenge\r\n\r\nCan you generate random colors that are limited to a narrow + range of colors, such as a random shade or purple, or a random shade of teal?" + CSD U3 Random FreeResponse_markdown_instruction: "# Randomness\r\n\r\nSometimes + you will want your programs to run a bit differently every time, and a simple + way to do this is to generate **random numbers**. The `randomNumber()` block + allows you to write programs with a little bit of randomization in them, which + is also helpful when you you want images that look more natural - for example + drawing a lots of stars in the sky in random positions, instead of selecting + the x and y for each star.\r\n\r\n# console.log() \r\nThe `console.log()` + block is a useful tool for testing and debugging - anything that you place + into `console.log()` block's input will be printed to the debug console, + which you can find below your code.\r\n\r\n# Do This\r\n\r\nYou will **not + write any code** in this level.\r\n\r\n* Read the program provided\r\n* **Predict** + what the provided program will do and write your prediction in the box below. + **Be specific!**\r\n* Run the program several times and **record** the results.\r\n* + **Discuss the results with a neighbor**. Was your prediction correct?" + CSD U3 Random Intro_markdown_instruction: "# Randomness\r\n\r\nSometimes you + will want your programs to run a bit differently every time, and a simple + way to do this is to generate **random numbers**. The `randomNumber()` block + allows you to write programs with a little bit of randomization in them, which + is also helpful when you you want images that look more natural - for example + drawing a lots of stars in the sky in random positions, instead of selecting + the x and y for each star.\r\n\r\n# console.log() \r\nThe `console.log()` + block is a useful tool for testing and debugging - anything that you place + into `console.log()` block's input will be printed to the debug console, + which you can find below your code.\r\n\r\n# Do This\r\n\r\nYou will **not + write any code** in this level.\r\n\r\n* Read the program provided\r\n* **Predict** + what the provided program will do. **Be specific!**\r\n* Run the program several + times and **record** the results.\r\n* **Discuss the results with a neighbor**. + Was your prediction correct?" + CSD U3 Random Min Max_markdown_instruction: "# Changing the minimum\r\n\r\nSo + far we've only generated numbers from 0 up to some other value, but what + if we wanted a different minimum? For example, if we want to use `randomNumber()` + to create circles that have a radius somewhere between 50 and 100 pixels, + how might we do it?\r\n\r\nThe first input (also called an **argument**) of + the `randomNumber()` block defines the lowest number that will be randomly + generated. In the previous levels we always used 0, but you could use any + integer as the lower bound (even negative numbers!)\r\n\r\n# Do This\r\n\r\nUsing + `console.log()` write a program that randomly returns a number in a range + you define. Try coming up with an interesting range of numbers for your program, + for example:\r\n* Randomly generate a month number\r\n* Randomly generate + a temperature below boiling but above freezing\r\n* Randomly generate a year + you were alive in\r\n\r\nCan you come up with a range that includes negative + numbers? What about both positive and negative ones?" + CSD U3 Random Width Height_markdown_instruction: "# Randomized Shapes\r\n\r\nLet's + see how we can use randomization in our drawings. Each of the inputs from + the shape blocks you've seen can be replaced with calls to `randomNumber()`. + Try drawing some images that are slightly randomized each time. You might + try changing the position randomly by using `randomNumber()` in place of the + x or y inputs, or you could change the size of the shape itself by randomizing + the length or width inputs.\r\n\r\n# Do This\r\n\r\nPick a shape command (`ellipse()`, + `rect()` or `regularPolygon()`) and use `randomNumber()` in place of one or + more of the inputs. Make sure you run it a few times so you can see the effect + of randomization.\r\n\r\n_Notice that the `console.log()` block is now in + the Variables drawer and the `randomNumber()` block is in the Math drawer._" + CSD U3 Simple Drawing - Animation 2_markdown_instruction: "# Rays of Sunshine\r\n\r\nLet's + add a little bit more animation to the scene. The `line()` block takes in + two pairs of x,y coordinates and draws a line between them.\r\n\r\nDraw 5 + yellow lines that all start from the center of the sun and move out to a random + point around the top half.\r\n\r\n# Do This\r\n\r\n* Create 5 lines, each + of which should start at the center of the sun and go out to a random point. + You can pick your own random ranges, but you might try:\r\n * `randomNumber(115,135), + randomNumber(10,20)`\r\n * `randomNumber(145,165), randomNumber(20,30)`\r\n * + `randomNumber(85, 105), randomNumber(20,30)`\r\n * `randomNumber(165,185), + randomNumber(40,50)`\r\n * `randomNumber(65, 85 ), randomNumber(40,50)`\r\n* + Don't forget to set the `strokeColor()` before you draw your lines and to + reset to `noStroke()` afterwards." + CSD U3 Simple Drawing - Animation_markdown_instruction: "# Clouds in the Wind\r\n\r\nNow + that our image is in the draw loop, let's make use of that feature to add + a little bit of animation. We're going to make our clouds look as though + they're shifting in the breeze by randomizing their position and size a little + bit each time the `draw()` loop is run.\r\n\r\n# Do This\r\n\r\n* Replace + the x input of each cloud ellipse with a call to `randomNumber`\r\n * `randomNumber` + should vary the x position by + or - 5 pixels. So if your x position was 50, + replace it with `randomNumber(45,55)`\r\n* Replace the width input of each + cloud ellipse with a call to `randomNumber`\r\n * `randomNumber` should vary + the width by + 5 pixels. So if your width was 50, replace it with `randomNumber(50,55)`\r\n* + Change the **frame rate** to something slower (try 5 or 10 FPS)" + CSD U3 Simple Drawing - Background_markdown_instruction: "# Draw()ing your + street image\r\n\r\nHere's the street image you started working on in the + last lesson. We're going to get it ready to add some animation.\r\n\r\nFor + the animation to work you'll need to wrap all of your current code in the + `draw()` loop, adding a call to `background()` at the top of the loop.\r\n\r\n# + Do This\r\n\r\n* Add a `draw()` block and move all of your current code inside + it\r\n* Replace the rectangle that draws your background with a call to the + `background()` block" + CSD U3 Simple Drawing - Personal Animation_markdown_instruction: "# Your Own + Animation\r\n\r\nHere's the drawing you planned and started in the last lesson + - let's animate it!\r\n\r\n# Do This\r\n\r\n* Move all of your code into + a `draw()` loop\r\n* Use `randomNumber()` in the inputs of some of your shapes\r\n* + Set the speed of your animation using the `Game.frameRate` block\r\n" + CSD U3 Sprites Template race_markdown_instruction: "# Putting it All Together\r\n\r\nLet's + put all of this together in a fun way. We're going to make three sprites + \"race\" across the screen by combining the counter pattern, random numbers, + and sprite properties.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nTo begin with make three + different sprites and put them in a row on the left side of your screen.\r\n\r\n* + **Create three sprites** and give them labels\r\n* **Add code to the \"Drawing\" + section of the draw loop that draws the background and your sprites**\r\n* + Your animation should look like the example at the right.\r\n\r\n" + CSD U3 Sprites animating with sprites_markdown_instruction: "# Animating with + Sprites\r\n\r\n**Sprite properties can be used in the counter pattern too**.\r\n\r\n\t// + Counter Pattern with variables\r\n x = x + 1;\r\n \r\n // Counter + Pattern with sprite properties\r\n mySprite.x = mySprite.x + 1\r\n\r\nIf + you call ![](https://images.code.org/16810be94cc61ea828e0acce5b642468-image-1466009389700.19.16 + AM.png) inside the draw loop then you can use this counter pattern to animate + sprites as well.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/a34d5c36c98c2d61ce341be59cbcf315-image-1466534169200.gif\" + style=\"float:right; width:200px\">\r\n\r\n\r\nThis program creates 2 sprites + and then animates one of them to move across the screen using the counter + pattern.\r\n\r\n* Inside the draw loop **add code that uses the counter pattern + to make the orange sprite move across the screen**.\r\n* Hint: How can you + use the counter pattern here? Look at the code for the redSprite if you need + help.\r\n* Your animation should look like the example at the right." + CSD U3 Sprites createSprite params_markdown_instruction: "# createSprite() + with parameters\r\n\r\nWhen you create a variable you often want to set its + value right away. That's why the command `var x =` exists, to let you perform + both commands at once.\r\n\r\nIt's very common to want to set the x and y + of your sprite in a single command. To help, the createSprite command accepts + 2 parameters or values that set these properties right away. Instead of writing + \r\n\r\n \tvar mySprite = createSprite();\r\n \tmySprite.x = 100;\r\n \tmySprite.y + = 200; \r\n\r\nyou can just write the command\r\n\r\n\tvar mySprite = createSprite(100, + 200);\r\n\r\nThis code does exactly the same thing, but it's much easier + to write. \r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis is your code from + earlier. Note that a new, larger version of `createSprite` is now available.\r\n\r\n<img + src=\"https://images.code.org/4a2e6bf1ffbd9782ce637b3e997004e3-image-1468337207497.25.20 + AM.png\" style=\" width:350px\">\r\n\r\n* Update your code to use this new + version of `createSprite`\r\n* Your program should only be **9 total lines**\r\n* + You're still trying to make your image look as close as possible to the image + at the right." + CSD U3 Sprites debug background_markdown_instruction: "# Debug: Ordering in + the Draw Loop\r\n\r\nAs you start animating with sprites you'll have more + complex code in your draw loop. It's important to stay organized if you don't + want your code to be confusing.\r\n\r\nHere's the way you should structure + your draw loop when animating with sprites:\r\n\r\n\tfunction draw(){\r\n \t// + Draw Background\r\n \r\n \t// Update Sprite Properties\r\n \r\n // + Draw Animations\r\n \r\n }\r\n \r\nThis strategy will work for most + cases but not all.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/df08c0bb7290e9d255f1cc51be35954d-image-1472665837101.gif\" + style=\"float:right; width:200px\">\r\n\r\nThis program is supposed to animate + a sprite moving across the screen, but **there's a problem that's preventing + it from running properly**.\r\n\r\n* **Run the program** to see how it works.\r\n* + **Debug the program** to find the error that prevents it from working properly.\r\n* + Your animation should look like the example at the right.\r\n* Hint: Order + matters a lot when drawing.\r\n" + CSD U3 Sprites debug dot notation_markdown_instruction: "# Debugging: Dot Notation\r\n\r\n**Dot + Notation:** Sprites all have the same properties, which is really useful. + It means that once you know the label of a sprite, you know the labels of + its properties. All you need to do is combine the name of your sprite and + the name of your property with a period or \"dot\" in between. This is also + referred to as **dot notation**. For example, a sprite called `bob` will have + the properties `bob.x`, `bob.y`, and so on.\r\n\r\nWhen using dot notation + it's important that **you spell the label of your sprite and your property + correctly.** Just like with variables, keep an eye out for:\r\n\r\nRule | + Example\r\n---|---\r\nCorrect capitalization|`sprite.x` is not `sprite.X`\r\nCorrect + spelling|`sprite.y` is not `sprte.y`\r\nWhether the label you're trying to + use actually exists|`sprite.xlocation` does not exist\r\nThe sprite's label + comes before the property's label|`x.sprite` will not work\r\n\r\n# Do This\r\n\r\n<img + src=\"https://images.code.org/5c6019e343bc58650c45f66c3e3c9bc5-image-1466089712070.08.20 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program tries to + use dot notation to change the properties of two sprites. Unfortunately, errors + are preventing the program from running correctly.\r\n\r\n* **Use dot notation + correctly** to fix the errors in this program\r\n* When your program works + correctly, it should draw the image to the right" + CSD U3 Sprites debug watchers_markdown_instruction: "# Debug: Watchers\r\n\r\nYou + can place watchers on a sprite property just like you would a regular variable.\r\n\r\n![](https://images.code.org/291b83de4b7d540017df382944474c16-image-1466017776084.09.27 + PM.png)\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/1a1a724338e983c2124b0e97d43469a2-image-1466024475859.gif\" + style=\"float:right; width:200px\">\r\n\r\nThis program is supposed to animate + a sprite moving across the screen but **there's a problem that's preventing + it from running properly**.\r\n\r\n* **Run the program** to see how it works.\r\n* + **Add a watcher** if you like to help you check individual properties.\r\n* + **Debug the program** to find the error that prevents it from working properly.\r\n* + Your animation should look like the example at the right.\r\n* Hint: Read + the code carefully. Is there a logical error?" + CSD U3 Sprites intro sprites_markdown_instruction: "# Sprites\r\n\r\n**Sprites** + make it easier to keep track of all of those values that you've been using + separate variables for. You are going to start creating animations with **sprites**. + A sprite is like a character in your animations, and each sprite keeps track + of its own x and y coordinates (and lots of other values too). Your program + will control how your sprites move and appear on the screen.\r\n\r\n**Creating + Sprites:** The <img src = \"https://images.code.org/92e06cddc5355dc37aa2c6a033793dd0-image-1466027030772.43.41 + PM.png\" style = \"height:30px\"> block creates a new sprite and gives it + any label you like. This label is how you'll refer to your sprite in your + code.\r\n\r\n**Drawing Sprites:** Sprites only appear on the screen when you + draw them there. Whenever you call the ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 + AM.png) command, all the sprites you've created will be drawn on the screen.\r\n\r\n# + Do This\r\n\r\nThis program includes comments that let you know where to place + code but otherwise is blank\r\n\r\n* Beneath the \"Creating Sprites\" comment + drag in a <img src = \"https://images.code.org/92e06cddc5355dc37aa2c6a033793dd0-image-1466027030772.43.41 + PM.png\" style = \"height:30px\"> block and give your new sprite any label + you like.\r\n* Beneath the \"Drawing\" comment drag in a ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 + AM.png) command\r\n* **Run the code** to draw your first sprite on the screen." + CSD U3 Sprites make template_markdown_instruction: "# Make Your Own Sprite\r\n\r\nYou + now know how to create a sprite, set its properties with dot notation, and + draw sprites using `drawSprites`. It's time to put all these pieces together + on your own.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program creates a + red sprite in the bottom right hand corner of the screen.\r\n\r\n* **Write + code** that creates a new separate sprite in the top left corner of the screen.\r\n* + Be careful with your dot notation, and use the code for the first sprite as + a guide.\r\n* Try to make your image look as close as possible to the image + at the right." + CSD U3 Sprites make your own sprite_markdown_instruction: "# Make Your Own + Sprite\r\n\r\nYou now know how to create a sprite, set its properties with + dot notation, and draw sprites using `drawSprites`. It's time to put all + these pieces together on your own.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/2f9214a801a60af226fa604a9b6533f5-image-1466008001402.26.15 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program creates a + red sprite in the bottom right hand corner of the screen.\r\n\r\n* **Write + code** that creates a new separate sprite in the top left corner of the screen.\r\n* + Be careful with your dot notation, and use the code for the first sprite as + a guide.\r\n* Try to make your image look as close as possible to the image + at the right." + CSD U3 Sprites motivation_markdown_instruction: "# How Many Counter Variables?\r\n\r\nYou + can use counter variables (`x = x + 1` , `x = x - 1` , `x = x + 0.5`, etc.) + to animate a scene. What happens when scenes start to get larger and more + complicated? \r\n\r\nWatch this animation. With a partner: \r\n\r\n* Decide + how many counter variables you would need to create this scene\r\n* Decide + what you would name your counter variables\r\n* **Draw a Labels-Values-Connectors** + diagram of your variables at the first frame of this scene. Don't worry about + getting the values exactly correct.\r\n* Share your answer with another group + **and be ready to share your ideas with the class**" + CSD U3 Sprites race create sprites_markdown_instruction: "# Putting it All + Together\r\n\r\nLet's put all of this together in a fun way. You're going + to make three sprites \"race\" across the screen by combining the counter + pattern, random numbers, and sprite properties.\r\n\r\n# Do This\r\n\r\n<img + src=\"https://images.code.org/1ee52eac731176211c286023c87c166a-image-1466021038288.03.29 + PM.png\" style=\"float:right; width:200px\">\r\n\r\nTo begin with, make three + different sprites and put them in a row on the left side of your screen.\r\n\r\n* + **Create three sprites** and give them labels.\r\n* **Add code to the \"Draw + Background\" section of the draw loop that draws the background**.\r\n* **Add + code to the \"Draw Animations\" section of the draw loop that draws your sprites**.\r\n* + Your picture should look like the example at the right." + CSD U3 Sprites race finish_markdown_instruction: "# Make It Your Own\r\n\r\nKeep + adding to this project and make it your own. Do you want to add a finish line? + Do you want to make one racer a little bit faster than the others? Maybe you + could add some text and give your race a name. There's a ton of ways you + can make this animation a lot more interesting and exciting!\r\n\r\n<img src + = \"https://images.code.org/387aec833f243632735c97b56ae6e64e-image-1466022313176.gif\" + style=\"float:right; width:200px\">\r\n# Do This\r\n\r\n* **Keep adding your + own touches to your race** using what you already know about drawing, sprites, + and animation." + CSD U3 Sprites race movement_markdown_instruction: "# Get Those Sprites Moving!\r\n\r\nNow + that you have three sprites on the screen, it's time to make them \"race\" + across the screen. For now, the race will just be a tie, so focus mainly on + **making sure your code is organized** and that **you use sprite properties + with the counter pattern correctly**.\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/a935615480098eb0a8e7723d87b2308c-image-1466021329937.gif\" + style=\"float:right; width:200px\">\r\n\r\n* **Add code to the \"Update Properties\" + section** that makes the sprites move across the screen together.\r\n* Your + animation should look like the example at the right." + CSD U3 Sprites race random_markdown_instruction: "# Random Movement\r\n\r\nRight + now your race isn't very interesting. Let's make one small change to make + it a lot more exciting. Instead of your sprites moving the same amount forward + every frame, **they will now move a random amount**. This will make use of + what we'll call the **random counter pattern**. Here's what the code might + look like.\r\n\r\n\t// Random Counter Pattern\r\n mySprite.x = mySprite.x + + randomNumber(0,2);\r\n \r\nInstead of adding the same amount every time + it will move forward by some random amount between 0 and 2.\r\n\r\n# Do This\r\n\r\n<img + src=\"https://images.code.org/accadb669e88a7c2aff8a29b6305da55-image-1466021491106.gif\" + style=\"float:right; width:200px\">\r\n\r\n* **Use the random counter pattern** + to make your sprites move forward by a random amount in each frame.\r\n* **Run + the program** to make sure your sprites now move a random amount. Is your + race predictable anymore?\r\n* Your animation should look similar to the example + at the right." + CSD U3 Sprites setting properties_markdown_instruction: "# Properties\r\n\r\n<img + src=\"https://images.code.org/9567c9df55163104ff91df0920457ad3-image-1466047307713.21.28 + PM.png\" style=\"float:right\">\r\n\r\n**Properties:** When you create a sprite + it will automatically be given many special variables called properties. Properties + keep track of information about the sprite, which is used when you draw it + on the screen. For example, these two properties keep track of a sprite's + x and y position on the screen.\r\n\r\n**Changing Properties:** Properties + are just variables, so you can change their values using `=` just like any + other variable. Here's an example of how you might change the `x` property + of a sprite called `myFavoriteSprite`.\r\n\r\n![](https://images.code.org/6976d707cba95e92369831729cdb7435-image-1466085767357.02.35 + AM.png)\r\n\r\n<img src=\"https://images.code.org/2743e55cef5da23bf61db1556c88f174-image-1466049906667.04.41 + PM.png\" style=\"float:right;width:150px\">\r\n\r\n# Do This\r\n\r\nThis program + creates a new sprite, gives it a label, and then sets its `x` and `y` properties.\r\n\r\n* + **Read the code**. Notice that the label given to the sprite is used in the + sprite's property.\r\n* **Change the values given to the `x` and `y` properties** + to move the sprite to the bottom right corner of the screen." + CSD U3 Sprites shapeColor_markdown_instruction: "# shapeColor\r\n\r\n**shapeColor:** + Another useful property is ![](https://images.code.org/538b61640803ec3b333d7cb2d9a162f5-image-1466050497196.14.46 + PM.png) which can be used to change the color of the sprite. It can be assigned + values in different ways. For example, you could use the name of a color\r\n\r\n<img + src=\"https://images.code.org/e5ffaee2a40c1690958b5c35a1d74719-image-1466086033266.06.45 + AM.png\" style=\"height:30px\">\r\n\r\nor you can use the rgb block\r\n\r\n<img + src=\"https://images.code.org/670af2867af02830979ff95356ba87d6-image-1488480027884.39.53 + PM.png\" style=\"height:30px\">\r\n\r\nTo make it easier to program with blocks, + **when you drag a sprite property onto its own line it will automatically + be placed inside an \"=\" block.**\r\n\r\n<img src=\"https://images.code.org/9790f3285269e9cf909fb820679a472e-image-1466091972429.46.00 + AM.png\" style=\"float:right;width:150px\">\r\n\r\n# Do This\r\n\r\nThis program + creates two sprites and places them on the screen. Currently they are still + gray.\r\n\r\n* Beneath the \"Setting Properties\" comment add code to **set + the shapeColor of these two sprites**\r\n\t* Make sure you use dot notation + correctly. Use the code already written as a guide.\r\n * Try assigning + one sprite a **named color** and another sprite a color using the **rgb block**.\r\n* + Your finished work should look something like the image to the right." + CSD U3 Sprites sprites vs rects_markdown_instruction: "# Sprites vs. Rectangles\r\n\r\nSprites + may seem a lot like fancy rectangles right now. In time you'll see that sprites + are **much more powerful**. But for now, there's one key difference you need + to know about.\r\n\r\nSprites have an `x` and a `y` location just like a rectangle. + The key difference is that **a sprite's `x` and `y` are in the middle of + the sprite, not the top left corner**. \r\n\r\n\r\n# Do This\r\n\r\n<img src=\"https://images.code.org/b1b38266c674e43687148a1ec4fd8e82-image-1466007512332.17.59 + AM.png\" style=\"float:right; width:200px\">\r\n\r\nThis program creates a + red sprite and a green rectangle that are the same size and have the same + `x` and `y`. **The sprite does not cover the rectangle since its `x` and `y` + are at its center**.\r\n\r\n* Change the `x` and `y` properties of the sprite + so that it entirely covers the green rectangle.\r\n* When your program works + correctly, it should draw the image to the right." + CSD U3 Sprites width and height_markdown_instruction: "# Setting Properties\r\n\r\nYou + are going to start programming with **sprites**. A sprite is made up of many + pieces of information called **properties**. The ![](https://images.code.org/82a18afda6463323529acaa3dc326d55-image-1466004008638.19.16 + AM.png) command can be called whenever you like. It uses the properties of + your sprites to draw them all at once.\r\n\r\nSprites have **lots and lots + of properties** but to get started let's just look at three.\r\n\r\n![](https://images.code.org/4d0f35bc60aa9d1c80e6dda4db16abc4-image-1466004005360.19.30 + AM.png)\r\n\r\n<img src=\"https://images.code.org/cb14a5f6add86bf3c0bcf12901366794-image-1466004148640.22.16 + AM.png\" style=\"float:right; width:200px\">\r\n# Do This\r\n\r\nThis program + creates a sprite and gives it the label `mySprite`. Then it sets the properties + `shapeColor`, `x`, and `y` of the sprite. When `drawSprites` is called, this + information is used to draw the sprite in the correct location and color.\r\n\r\n* + **Change the values given to each property** so that:\r\n\t* The sprite is + now in the bottom right corner of the screen\r\n * The sprite is \"orange\" + rather than \"red\"" + CSD U3 Sprites width height_markdown_instruction: "# Width and Height\r\n\r\nWhen + you create a sprite, it is automatically set up with all its properties having + default values. If you know the names of these properties, you can use dot + notation to change them. This will change the way your sprite looks when you + draw it.\r\n\r\nHere are two new properties:\r\n\r\n![](https://images.code.org/158421dbb4f9640ee852d994d2b4a7d6-image-1466006293357.40.26 + AM.png)\r\n\r\nBy default each sprite starts with a width and height of 100.\r\n\r\n# + Do This\r\n\r\nThis program creates a sprite and sets its `x`, `y`, and `shapeColor` + properties.\r\n\r\n* Use the new `width` and `height` properties to make the + sprite fill up most of the screen.\r\n* Make sure you're using dot notation + correctly.\r\n* **Note:** If you drag the property block onto a new line it + will change to include the `=` command automatically.\r\n\r\n![](https://images.code.org/77d0a16f19a2a7b2c2f1f6b88cda17b3-image-1466006474149.41.53 + AM.png)" + CSD U3 UP_ARROW_markdown_instruction: "# Moving Sprites\r\n\r\nYou saw on the + last level that `keyDown` returns `true` while you are holding a key down + and `false` when the key is not pressed down.\r\n\r\nWe can use `keyDown` + as an input to an `if` statement to change our animations based on key presses!\r\n\r\nThe + input for the `keyDown` command is the name of key you want to check in quotes. + Some examples are \"x\", \"up\" and \"space\".\r\n\r\n# Do This\r\nYou have + been provided with the start of a bug sprite. You need to pick the bug picture + you want to use from the animation tab.\r\n\r\n* Set the animation of the + sprite to your favorite bug.\r\n* Add an `if` statement inside your draw loop\r\n* + Add a call to `keyDown` as the input to the `if` statement to check if the + **up** arrow was pressed\r\n* Add code inside the conditional to move the + sprite up if the up arrow is down.\r\n\r\n_Do you need to change sprite's + x or y property to move it up?_" + CSD U3 Variable Arithmetic pt2_markdown_instruction: "# Variable Arithmetic + Pt2\r\n\r\nAs we saw in the last level, **you can add, subtract, multiply, + or divide** your variable **without changing its value**. The only time a + variable's value will change is when you use the `=` or **gets** command.\r\n\r\nTry + another example highlighting another common misconception.\r\n\r\n# Do This\r\n\r\n* + Read the program provided\r\n* **Predict:** What two numbers will get displayed? + Why? **Explain your reasoning to a neighbor**.\r\n* Run the program. Were + you surpised by what happened? **Compare notes with a neighbor**." + CSD U3 Variable Arithmetic_markdown_instruction: "# Variable Arithmetic\r\n\r\nYou + can use the values stored in a variable to perform **addition, subtraction, + multiplication, and division**. Let's have a look at some common misconceptions.\r\n\r\n# + Do This\r\n\r\n* Read the program provided\r\n* **Predict:** what will displayed + when you run the program? Why? **Explain your reasoning to a neighbor**.\r\n* + Run the program. Were you surpised by what happened? **Compare notes with + a neighbor**." + CSD U3 Variable Incrementation pt2_markdown_instruction: "# Variable Reassignment\r\n\r\nThis + example is starting to get a little more complex. Work through it with a partner. + Why do you get the output you do?\r\n\r\n# Do This\r\n\r\n* Read the program + provided\r\n* **Predict:** What two numbers will get displayed? Why? **Explain + your reasoning to a neighbor**.\r\n* Run the program. Were you surpised by + what happened? **Compare notes with a neighbor**." + CSD U3 Variable Incrementation_markdown_instruction: "# Variable Incrementation\r\n\r\nTo + **increment** something means to add something to a value. In programming + if you want to increase or increment the value in a variable you need to use + the **gets** command to store the new value.\r\n\r\nAs you work through this + example try to discuss with your partner, **What's the difference between + the left side and the right side of the `=` command?**\r\n\r\n# Do This\r\n\r\n* + Read the program provided\r\n* **Predict:** What two numbers will get displayed? + Why? **Explain your reasoning to a neighbor**.\r\n* Run the program. Were + you surpised by what happened? **Compare notes with a neighbor**." + CSD U3 Variables CHALLENGE gamelab gary_markdown_instruction: "# Challenge: + Variables and Game Lab Gary\r\n\r\n* You've been provided code that draws + a simple version of Game Lab Gary\r\n* **Use variables to animate Gary**. + How can you extend them?\r\n* [[Question that leads towards incrementation]]" + CSD U3 Variables Initialize_markdown_instruction: "# Using a Variable's Value\r\n\r\nThis + program creates a variable called `size`. You will need to **assign it a value**. + It will then be used to set the size of a square on the screen.\r\n\r\n# Do + This\r\n\r\n* **Assign the variable `size` a value** and run the program to + see how its value is used\r\n* **Change the value** and rerun the program + to see how it affects the output of your program." + CSD U3 Variables Intro_markdown_instruction: "# Your first variable\r\n\r\nThe + `var` command **creates a new variable**. You only need to use it once with + each variable you create.\r\n\r\n# Do This\r\n\r\n* Create a new variable + with a **name of your choosing**, as shown in the starter code." + CSD U3 Variables Random_markdown_instruction: "# Variables random values\r\n\r\nYou + can use a variable to store a **randomly generated number**.\r\n\r\n# Do This\r\n\r\n* + In the starter code a variable is **initialized with a random number** and + then **displayed twice**\r\n* **Predict:** Will the value displayed change + between the two `console.log` statements?\r\n* Run the program. Was your prediction + correct? Were you surprised?\r\n* **Compare notes with a neighbor**" + CSD U3 Variables Reassign Predict_markdown_instruction: "# Make a Prediction\n\nThis + program **creates a variable** and then sets its value twice in a row. **What + value will be displayed when the console.log() statement runs?**\n\n![](https://images.code.org/0375d4215c5cc4b937c9333390deb81c-image-1460404063955.47.09 + PM.png)\n\n**Once you've submitted your answer be prepared to discuss your + reasoning with your classmates.**\n" + CSD U3 Variables Reassign pt2_markdown_instruction: "# Creating and assigning + in one line\r\n\r\nYou can use `var` and `=` in a single line to **assign + a value to a variable as soon as it is created**, for example: `var size = + 10;`\r\n\r\n# Do This\r\n\r\n* **Create a new variable and assign it a value** + in a single line." + CSD U3 Variables Reassign_markdown_instruction: "# Assiging a Variable\r\n\r\nVariables + **store a single piece of information that can change throughout your program**. + The `=` command gives a variable a new value.\r\n\r\nYou read the command + `size = 10;` as \"size gets the value 10\". You can also say \"size gets 10\".\r\n\r\n# + Do This\r\n\r\n**Use the `=` command** to assign a value to the variable `numberOfDogs`" + CSD U3 Variables Square Random Loop_markdown_instruction: "# Random Values + and the Draw Loop\r\n\r\nIn the last level you should have **made a prediction** + about the difference between two programs. They are both available here, with + the second one commented out.\r\n\r\n# Do This\r\n\r\n* Run the first program\r\n* + **Comment out** the first program and **uncomment** the second program\r\n* + Run the second program\r\n* **Compare what you observed to your prediction. + Discuss the results with a neighbor**" + CSD U3 Variables Square Random_markdown_instruction: "# Variables and Random + Drawing\r\n\r\nVariables can be used to **store a randomly generated value** + that you want to use many times in your program.\r\n\r\n# Do This\r\n\r\n* + Assign size a **random number between 1 and 200**.\r\n* **Run the program + multiple times**\r\n* **Discuss with a neighbor:** Can you explain why the + program always drawing a square?" + CSD U3 Variables Square_markdown_instruction: "# Variables and Drawing\r\n\r\nVariables + allow you to **use the same value multiple times in your program**. If a value + will always be used many times in a program it is really useful to place that + value in a variabnle. This lets you **quickly change the same value at many + places in your program**. It also can make move obvious **how that value is + used**.\r\n\r\n# Do This\r\n\r\n* Change the value that `size` is initialized + to so that the program draws a **larger square**" + CSD U3 Variables TEMPLATE square_markdown_instruction: "# Drawing with Variables\r\n\r\n**Get + excited because you're about to see your first variable used in a program!** + This program uses a variable in three separate ways.\r\n\r\n* `var size;` + Creates a new variable with the label size\r\n* `size = 50;` Assigns the value + 50 to size\r\n* `rect(200, 200, size, size);` Uses the value in size to draw + a rectangle with equal width and height.\r\n\r\n# Do This\r\n\r\n* Run the + program once to see how it works\r\n* **Change the value assigned to size + in line 2** and rerun the program to see what changed." + CSD U3 Variables create and assign_markdown_instruction: "# Create and Assign\r\n\r\nWhen + you create a new variable you will often want to assign it a value right away. + You can **create and assign a value** to a variable in a single command as + shown below.\r\n\r\n![](https://images.code.org/2110bcf19415401434a876503ddecab5-image-1462472203840.16.37 + PM.png)\r\n\r\n# Do This\r\n\r\nThis program needs you to **create and assign + a value to the variable `size`** in order to draw a square.\r\n\r\n* Use the + block shown above to create the rectangle and assign it a value in a single + line of code.\r\n\r\n" + CSD U3 Variables draw loop newVars_markdown_instruction: "# Keep going!\r\n\r\n**Keep + using the patterns we just explored to build your own visualization**\r\n\r\n# + Do This\r\n\r\n* Extend your project to create a **personal randomized piece + of art**\r\n* Some techniques you might try:\r\n\t* Use **new shapes** like + `rect`, `regularPolygon`, or `line`\r\n * Use **variables in unexpected + ways**, (e.g. `red` also controls the size of your ellipse)\r\n * Create + **new variables** to control new parts of your program\r\n * Pick **new + ranges** for your random values\r\n * Switch which variables are assigned + values **inside or outside the draw loop**" + CSD U3 Variables draw loop rgb_markdown_instruction: "# Using variables in + the draw loop\r\n\r\nNow try randomizing the `red`, `green`, and `blue` variables. + Try setting their values to random numbers **before the draw loop** or **inside + the draw loop** like you did with `x1` and `y1` in the previous level. \r\n\r\n# + Do This\r\n\r\n* Randomize the values of `red`, `green`, and `blue`, changing + some **before the draw loop** and some **inside the draw loop**\r\n* Find + a visual effect you really like and share with a neighbor before moving on" + CSD U3 Variables draw loop xy_markdown_instruction: "# Using variables in the + draw loop\r\n\r\nAs you saw in the last example, **you can update a value + repeatedly within the draw loop**. Using this allows you to redraw an image + with random changes every time. By storing these random values in a variable + you can **use the same random value multiple times**.\r\n\r\n# Do This\r\n\r\n* + Add to the starter code provided so that the variables `x1` and `y1` are updated + randomly in the draw loop.\r\n* Use these values to redraw the ellipses at + random locations." + CSD U3 Variables eyeBrows_markdown_instruction: "# Create Your Own\r\n\r\nThe + pattern you just saw is very common. The steps were:\r\n\r\n* **Create** a + variable **outside** the draw loop\r\n* **Assign** the variable a new value + **inside** the draw loop\r\n* **Use** the new value **inside** the draw loop + to draw the current frame\r\n\r\nLet's see if you can put together everything + you've done so far to use this pattern yourself.\r\n\r\n# Do This\r\n\r\nYou + will be adding **eyebrows that move up and down together** to your smiley + face.\r\n\r\n* **Create** a variable **outside** the draw loop with a good + label. Remember this variable will control **the height of the eyebrows**\r\n* + **Assign** your variable a new random value **inside** your draw loop\r\n* + **Use** your value inside the draw loop to create **two new ellipses**. The + value in your variable should control the height\r\n\r\n**Hints and Tips:**\r\n\r\n* + The x values of your eyes can help you line up your eyebrows. \r\n* Don't + be afraid to work **iteratively** here (that means try something and keep + improving). It's ok to have something not work the first time.\r\n* Talk + with a neighbor if you're having trouble, or go check your work from earlier + in the lesson.\r\n\r\n![](https://images.code.org/05e5ea214c8ccc37fc8dd4223569602a-image-1462474590368.gif)" + CSD U3 Variables make a big square_markdown_instruction: "# Replacing Labels + with Values \r\n\r\nThe last command in the program you just ran is:\r\n\r\n\tconsole.log(size);\r\n\r\nBut + the output you saw was\r\n\r\n\t10\r\n \r\nThe reason is that **variables + are replaced with their values before running almost all commands.** The only + exceptions are the commands `var size` and `size = `.\r\n\r\n# Do This\r\n\r\nThis + program is very similar to the one you just ran, except now you'll be using + a variable to draw. **Can you fill the entire screen?**\r\n\r\n* **Predict** + what this program will do.\r\n\t* Does it generate an error? What will it + draw?\r\n* **Run** the program and check your prediction.\r\n* **Change the + value** assigned on line 2 so that **the rectangle drawn fills the whole screen**.\r\n\r\n" + CSD U3 Variables make a square_markdown_instruction: "# Drawing with Variables\r\n\r\nA + **variable** is a named piece of information in a program. You can think of + it as a **label** that identifies a **value** that we wish to use and update + many times in our programs. In the previous lesson, you learned two important + commands with variables.\r\n\r\n\tvar size; // Creates a new label + (or variable) called size\r\n size = 10; // size \"gets\" 10. The + label score is now connected to the value 10\r\n \r\nOnce these connections + have been formed, we can use them to make much more interesting drawings and + animations.\r\n\r\n# Do This\r\n\r\nThis program creates a variable called + `size` and assigns it the value `10`. These two commands are familiar, but + line 3 should look new to you. What do you think will happen?\r\n\r\n* **Predict** + what this program will do.\r\n\t* Does it generate an error? Output some text? + Output a value? Why do you think so?\r\n* **Run** the program and check your + prediction.\r\n* **Change the value** that size \"gets\" on line 2 and re-run + your program. Notice anything?" + CSD U3 Variables multiple assignments_markdown_instruction: "# Multiple Assignments\r\n\r\nA + variable contains a single piece of information called its **value**. To tell + variables apart each one has a **label** or name. In your last program, the + variable had the label `size` and originally had a value of `10`. **Here's + how each command you just saw works**\r\n\r\n![](https://images.code.org/a8d2c5a88a8fbb8284a18bcb7464cb9b-image-1462301535506.51.32 + PM.png) **Create a new variable** with the label `size`\r\n\r\n![](https://images.code.org/d2a2578e6d0190f7db69872c1ad64572-image-1462301539050.51.43 + PM.png) **Assign the value `10`** to the variable `size`\r\n\r\n![](https://images.code.org/84b01d13b210c8cca8a71934b77acc56-image-1462301542169.51.53 + PM.png) **Use the value in `size`** as the width and height of the rectangle. + (Since they're the same we end up with a square)\r\n\r\n# Do This\r\n\r\nThis + program is similar to the first but it assigns multiple values to `size` before + drawing the rectangle.\r\n\r\n* **Run the program once** to see how it works\r\n* + **One at a time change the values assigned to `size` in lines 2-4 and rerun + the program** \r\n* **Discuss / Reflect:**\r\n\t* Which lines is changing + the rectangle drawn? How can you tell?\r\n * Can you explain what you're + seeing?" + CSD U3 Variables naming rules_markdown_instruction: "# Choosing Labels\r\n\r\nGood + labels **indicate how the variable will be used in the program**. The label + `size` is a good choice for a variable that controls the size of something. + You could always choose `potato` or `s`, but confusing or unclear names make + your program hard to read for you and others.\r\n\r\nThere are a **few rules** + when choosing labels:\r\n\r\n* Labels **cannot include spaces**. For example, + `size of rectangle` would generate an error.\r\n* Labels with multiple words + can be easier to read in **camelCase**. CamelCase looks like `sizeOfRectangle` + or `aReallyLongLabelName`\r\n* Labels **cannot begin with a number**. `4sides` + and `2morrow` will generate errors.\r\n* Be very careful with **spelling**.\r\n* + Labels are **case-sensitive**. `size` is not the same as `Size` or `SIZE`.\r\n\r\n\r\n<img + src=\"https://images.code.org/39340782150ad1635f6274f6edadb114-image-1462314883756.34.32 + PM.png\" style=\"float:right; height:200px\"> \r\n\r\n# Do This\r\n\r\nThis + program has multiple errors caused by bad label names.\r\n\r\n* **Correct + the errors by picking new names that follow the rules listed above.**\r\n* + **Note:** The errors prevent the program from being viewed in block mode.\r\n* + If your program works it should draw the image on the right.\r\n\r\n" + CSD U3 Variables random assignment_markdown_instruction: "# Random Assignment\r\n\r\nVariables + are really helpful when you want to **store a number that you'll use many + times in your program**. For example, if you generate a random number you + could store it in a variable so that you can use that same random number as + many times as you wish, like this.\r\n\r\n\tvar randomSize; // + Create variable randomSize\r\n randomSize = randomNumber(10,100); // randomSize + \"gets\" a randomly generated number between 10 and 100\r\n\r\n# Do This\r\n\r\nThis + program **assigns a random number** to `eyeSize` on line 1. It's already + being used to change the size of one of the eyes on the smiley face, but not + the other. **Can you get both eyes to always be the same random size?**\r\n\r\n* + **Run the program** to see how it works\r\n* **Change the program** so that + both eyes are always the same random size. Check line 12 if you need some + help.\r\n\r\nNote: Read the documentation about the `arc` command if you want + to know more about how the mouth on the smiley was made." + CSD U3 Variables random draw loop_markdown_instruction: "# Variables and the + Draw Loop\r\n\r\nYou already know that draw loop **runs over and over again + so long as your program is running**. If you assign a value to a variable + outside the draw loop it will not change while the draw loop runs. If your + assignment happens **inside the draw loop the variable will be constantly + updated, once for each time the loop runs**. \r\n\r\n# Do This\r\n\r\nThis + program draws a smiley face with randomly sized eyes. You are going to **move + the assignment of `eyeSize` inside of the draw loop, but first...**\r\n\r\n* + **Run the program** without making changes to remind yourself how it works\r\n* + **Predict what will happen** when you move the assignment statement inside + the draw loop\r\n* **Move the assignment inside the draw loop** and run your + program\r\n* **Discuss / Reflect:**\r\n\t* Was your prediction correct?\r\n * + Can you explain what you see?\r\n * Try changing the range of random values + to get a different effect." + CSD U3 Variables random drawing exemplar_markdown_instruction: "# Exemplar: + Random Drawing\r\n\r\nTo practice using **variables with the draw loop** you + will be building your own **randomized art project**. Check out the exemplar + to see one possible outcome. Then move on to get started building your own." + CSD U3 Variables use value rect_markdown_instruction: "# Using a Variable's + Value\r\n\r\nThis program creates a variable called `size`. You will need + to **assign it a value**. It will then be used to set the size of a square + on the screen.\r\n\r\n# Do This\r\n\r\n* **Assign the variable `size` a value** + and run the program to see how its value is used\r\n* **Change the value** + and rerun the program to see how it affects the output of your program." + CSD U3 Variables write_markdown_instruction: "# Displaying a Variable's Value\r\n\r\nOften + you want to see the exact value contained in a variable, especially if it + was randomly generated. Both `console.log` and `text` can be used with variables + to specifically see their values. This is an important skill when **debugging** + your programs.\r\n\r\n# Do This\r\n\r\nThis program uses a variable `size` + to draw a square with a randomly generated value.\r\n\r\n* **Use the `text` + command** to display the value of `size` on the screen.\r\n* **Use the `console.log` + command** to display the value of `size` in the debug console." + CSD U3 Variables2 expressions in commands_markdown_instruction: "# Expressions + inside commands\r\n\r\n**When your computer sees an expression in a program + it will calculate its value before using it**. This means you can even use + expressions in unexpected places, like inside drawing commands.\r\n\r\n\tstrokeWeight(4 + * 5);\r\n rect(10 + 10, 5 * 50, 30, 30);\r\n \r\nNotice that the commas + still separate each expression. This is just further evidence that **even + though an expression may have multiple parts, it will eventually get treated + as a single value.**\r\n\r\n# Do This\r\n\r\nTry writing more complex expressions + inside of the drawing commands provided." + CSD U3 Variables2 expressions in variables_markdown_instruction: "# Do This\r\n\r\n* + Use the `=` (assignment operator) to store the value of each expression in + a variable\r\n* Use `console.log` to display each value\r\n* Repeat the pattern + with some expressions of your own. What do you want to calculate?" + CSD U3 Variables2 expressions_markdown_instruction: "# Do This\r\n\r\n* Place + each expression inside of a `console.log` command to display their results\r\n* + What other expressions can you make? Try writing 3 of your own.\r\n" + CSD U3 abstraction accelerateX_markdown_instruction: "# Velocity and the Counter + Pattern\r\n\r\nAs you just saw, using a `sprite.velocityX` property with the + counter pattern will change a sprite's velocity during the program. This + makes the sprite speed up. Do a little practice using this pattern yourself.\r\n\r\n# + Do This\r\n\r\nThis program already makes a car move across the screen, but + it's going very slowly\r\n\r\n* Use the counter pattern with the sprite's + velocityX property to make the car speed up. [Show me where](#triggercallout=code_triggered)" + CSD U3 abstraction accelerateY up_markdown_instruction: "# Rising Bubble\r\n\r\nThis + program makes a bubble rise up the water. Can you make it get faster as it + rises?\r\n\r\n# Do This\r\n\r\n* Use the counter pattern and the sprite's + y velocity to make the bubble move up more quickly." + CSD U3 abstraction accelerateY_markdown_instruction: "# Falling Rock\r\n\r\nThe + rock should speed up as it falls down the screen. Can you use the same counter + pattern with `velocityY` inside the draw loop to make the rock go faster and + faster as it falls?\r\n\r\n# Do This\r\n\r\n* Use the counter pattern with + the sprite's y velocity to make the rock speed up as it falls. [Show me + where](#triggercallout=code_triggered)\r\n\r\n*Challenge: Can you make the + rock spin as it falls?*" + CSD U3 abstraction add coin_markdown_instruction: "# Add a Coin\r\n\r\nIn the + next few levels you'll add to your program to make a simple game. In this + game the player will collect points to increase the score. This is a good + chance to see how different kinds of movement can affect the way a game feels, + and it will also just help you practice programming skills.\r\n\r\n# Do This\r\n\r\nIn + this level you'll just be adding a new coin sprite to the game. You should + be working at the top of your program, outside the draw loop.\r\n\r\n* Use + the `createSprite()` block to create a new sprite. Make sure to give it a + descriptive name like **coin**\r\n* Use the `sprite.x` and `sprite.y` properties + of the sprite to give it a random X and Y position between 0 and 400\r\n* + In the Animation Tab there is already a coin animation. Use the `sprite.setAnimation()` + block to give your sprite this animation.\r\n\r\nTest your code before moving + on. When you run the game you should see a coin sprite appear somewhere randomly + on the screen." + CSD U3 abstraction animation circle_markdown_instruction: "# Animate the Satellite\r\n\r\nNow + you are ready for the final piece of the drawing: making the satellite circle + the moon.\r\n\r\n#Do This\r\n\r\nUse `setSpeed()` and `getDirection()` to + make the satellite circle the moon. " + CSD U3 abstraction animation rotate_markdown_instruction: "# Rotation\r\n\r\nMake + earth rotate using the `rotationSpeed` property." + CSD U3 abstraction animation setSpeed_markdown_instruction: "# Animate Your + Picture\r\n\r\n<img style=\"float:right\" src=\"https://images.code.org/d2ad362f37d0e5f9b98691654256d2fb-image-1469469372823.gif\">\r\n\r\nNow + that everything is in the right place, you can make them move using the properties + and methods you have learned.\r\n\r\n# Do This\r\n\r\nUse `rotationSpeed`, + `rotationToDirection`, `getSpeed`, `getDirection`, and `setSpeed` to animate + your scene, as seen in the image to the right. " + CSD U3 abstraction animation setup_markdown_instruction: "# Setting up your + picture\r\n<img style=\"float: right; margin: 4px;\" src=\"https://images.code.org/b90748874dc9094386134be8ec1b95e5-image-1469228306235.png\">\r\nBefore + you make anything move, you'll need to start all your sprites off in the + right place. The Earth has already been positioned for you.\r\n\r\n# Do This\r\n\r\nCreate + sprites for the moon, spaceship, and satellite. Use `setAnimation` to add + a picture to each one, and use the `x` and `y` properties to put them in the + right place on the screen.\r\n\r\n" + CSD U3 abstraction animation_markdown_instruction: "# Setting up your picture\r\n<img + style=\"float: right; margin: 4px;\" src=\"https://images.code.org/b90748874dc9094386134be8ec1b95e5-image-1469228306235.png\">\r\nBefore + you make anything move, you'll need to start all your sprites off in the + right place. The Earth has already been positioned for you.\r\n\r\n# Do This\r\n\r\nCreate + sprites for the moon, spaceship, and satellite. Use `setAnimation` to add + a picture to each one, and use the `x` and `y` properties to put them in the + right place on the screen.\r\n\r\n" + CSD U3 abstraction bug template_markdown_instruction: "# velocityY\r\n\r\n`velocityY` + is like `velocityX`, but it moves things up and down. Can you use it to make + the dragonfly walk up the screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` to + make the sprite go up the screen.\r\n\r\n*Hint: Should velocity by positive + or negative to move the sprite up the screen?*" + CSD U3 abstraction car rotation_markdown_instruction: "# rotateToDirection\r\n\r\nHere's + the car you just made move. It stayed on the road, but it was not pointing + in the right direction. You can tell the sprite to always point in the direction + that it's moving by adding `car.rotateToDirection = true` outside the draw + loop, right after you create your sprite.\r\n\r\n# Do This\r\n\r\nUse the + `rotateToDirection` property to make your car face the direction it's moving." + CSD U3 abstraction car template_markdown_instruction: "# Moving at an Angle\r\n\r\nIf + you use `velocityX` and `velocityY` at the same time, you can move your sprite + at an angle. See if you can keep the car on the road by using these two properties.\r\n\r\n# + Do This\r\n\r\nUse `velocityX` and `velocityY` to make the car move along + the road." + CSD U3 abstraction change velocityX_markdown_instruction: "# Moving Faster\r\n\r\nRemember + when you used the counter pattern `sprite.x = sprite.x + 1` to change your + sprite's position inside the draw loop? Now you can use the same type of + counter pattern with `sprite.velocityX` to change your sprite's speed as + your program runs. Can you add a line of code in the draw loop to make the + sprite swim faster and faster?\r\n\r\n# Do This\r\n\r\nMake the fish get faster + by adding `fish.velocityX = fish.velocityX + 1` inside the draw loop. [Show + me where](#triggercallout=code_triggered)" + CSD U3 abstraction change velocityXY_markdown_instruction: "# Getting faster + at an angle\r\n\r\nHere's a different car that uses the same counter pattern + we used in the last lesson to make the car go faster, but it changes both + `velocityX` and `velocityY`. ([Show me where](#triggercallout=code_triggered)) It + also prints the speed and direction to the debug console. What do you think + will happen when you run the code?\r\n\r\n# Do This\r\n\r\nDiscuss with your + partner what you think will happen when the code runs, then run it and see + whether you were right. Why do you think the car moves in this way?\r\n\r\n[//]: + #(https://images.code.org/4d1af9cc274f30b9d9263a47f9f64f13-image-1470941637433.png)" + CSD U3 abstraction change velocityY_markdown_instruction: "# Moving Faster\r\n\r\nJust + as you can change `velocityX` inside the draw loop, you can change `velocityY` + to make your sprite move faster up or down. Can you add code into the draw + loop to make the dragonfly go faster?\r\n\r\n# Do This\r\n\r\nUse the `velocityY` + property to make the dragonfly fly faster and faster up the screen. [Show + me where](#triggercallout=code_triggered)" + CSD U3 abstraction circle_markdown_instruction: "# getDirection()\r\n\r\nYou've + been using `getSpeed` and `setSpeedAndDirection` to change the speed of a + sprite in a particular direction. What do you think will happen if you keep + the speed the same, but use `getDirection` and `setSpeedAndDirection` to change + the direction? Look at the code below and predict what it will do. After + you've run it, try changing the direction by different amounts to see what + happens.\r\n\r\n# Do This\r\n* Read the code where the direction is changed + and predict what it will do [Show me where](#triggercallout=code_triggered)\r\n* + Run the program and observe what it does\r\n* Modify the program to make the + car spin in large circles\r\n* Modify the program to make the car move in + the opposite direction\r\n\r\n[//]: #(https://images.code.org/63b04e63fc4bc21700b64ef3d6c6b8b7-image-1471475653020.png)" + CSD U3 abstraction decelerateX_markdown_instruction: "# Slowing Things Down\r\n\r\nNow + that you've had some practice speeding things up, can you use the counter + pattern to slow sprites down? \r\n\r\n# Do This\r\n\r\nThe car is going to + run into the water! You'll need to use the counter pattern to slow it down.\r\n\r\n* + Use the `sprite.velocityX` block with a counter pattern to slow the car down + by 0.25 as it moves across the screen. \r\n* Discuss with your Partner: What + do you think will happen when the car finally stops?\r\n\r\n*Challenge: Add + code that makes the car slow down only if his velocityX is greater than 0*\r\n" + CSD U3 abstraction decelerateY_markdown_instruction: "# Simulating Gravity\r\n\r\nIn + the last level you slowed down the car with the `sprite.velocityX` block and + the counter pattern. It almost looked like the car was getting pulled to the + left.\r\n\r\nIf you use this same pattern with the `sprite.velocityY` block + it will look like your sprite is always being pulled down, which is exactly + what gravity does!\r\n\r\n# Do This\r\n\r\nThe rock is thrown in the air but + it never falls back down.\r\n\r\n* Use the `sprite.velocityY` block with the + counter pattern to make the rock slow down and then fall in the other direction.\r\n* + Experiment with different values in your counter pattern. Do you want the + rock to slow down quickly or gradually? What looks most realistic to you?\r\n* + Discuss with your partner: Why are you setting the rock's initial velocity + outside the draw loop? Why are you changing the sprite's velocity inside + the draw loop?" + CSD U3 abstraction demo pic_markdown_instruction: "# Space Animation\r\n\r\nIn + the next few puzzles, you'll be building the space animation on the left. You + can use your activity guide to help you plan how to make the different type + of movements you see.\r\n\r\n# Do This\r\n\r\n* Click \"Run\" to see the animation.\r\n* + Look at how all the different sprites are moving and update your activity + guide with any ideas you have.\r\n* Discuss with a partner how you might make + this picture." + CSD U3 abstraction dragonfly (OLD)_markdown_instruction: "# velocityY\r\n\r\n`velocityY` + is like `velocityX`, but it moves things up and down. Can you use it to make + the feather float the down screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` + to make the sprite go down the screen.   [Show me where](#triggercallout=code_triggered)" + CSD U3 abstraction dragonfly OLD_markdown_instruction: "# velocityY\r\n\r\n`velocityY` + is like `velocityX`, but it moves things up and down. Can you use it to make + the dragonfly walk up the screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` to + make the sprite go up the screen.   [Show me where](#triggercallout=code_triggered)\r\n\r\n*Hint: + Should velocity be positive or negative to move the sprite up the screen?*" + CSD U3 abstraction drive_markdown_instruction: "# Race Your Car\r\n\r\nNow + that you can steer, you need to control the speed of your car. Use the `setSpeed` + method to make the car go faster when you push the up arrow and slower when + you push the down arrow.\r\n\r\n# Do This\r\n\r\nAdd two conditionals to your + car program. \r\n\r\n* The first should check whether the up arrow is pressed, + and increase the speed of the car. \r\n* The second should check whether the + down arrow is pressed and decrease the speed of the car.\r\n\r\n*Hint: What's + the difference between `keyDown` and `keyWentDown`? Which do you think will + work better for changing the speed of the car?*" + CSD U3 abstraction fish template_markdown_instruction: "# velocityX\r\n\r\nLast + time you made the fish move, you did it by changing its `x` property in the + draw loop. Now, you can use `velocityX` to make your sprites move left or + right by a certain amount each time they are drawn.\r\n\r\n# Do This\r\n\r\nUse + the `velocityX` block to make the sprite go across the screen.\r\n" + CSD U3 abstraction horse_markdown_instruction: "# Horse\r\n\r\nThe horse is + trying to make its escape. Can you use the `velocityX` and `velocityY` blocks + to make the horse jump over the fence?\r\n\r\n\r\n# Do This\r\n\r\n* Set the + starting `velocityX` and `velocityY` values outside the draw loop [Show me + where](#triggercallout=code_triggered1)\r\n* Change your sprite's `velocityY` + using a counter pattern inside the draw loop [Show me where](#triggercallout=code_triggered2)\r\n" + CSD U3 abstraction horse2_markdown_instruction: "# Better Horse\r\n\r\nIf you're + making a game, you'll want the horse to jump according to user input. This + program automatically moves the horse to the right, but the horse should jump + when the user presses the up arrow key. You will need to add three lines + of code to make this work. First, you'll need to check whether the up arrow + key has been pressed, and make the horse move up if it has. \r\n\r\n\r\n# + Do This\r\n\r\n* Inside the `if` block that checks whether the up arrow key + has been pressed, use the `velocityY` block to make the horse move up by 4 + each time. [Show me where](#triggercallout=code_triggered)\r\n\r\n" + CSD U3 abstraction horse3_markdown_instruction: "# Better Horse\r\n\r\nNext, + you'll make the horse fall back down to the ground. You'll need to check + whether the horse is in the air by looking at its y position. If it's in + the air it should fall down, but once it touches the ground it should stop. + The `if/else` block has already been provided for you.\r\n\r\n# Do This\r\n\r\nLook + at the `if/else` block that checks whether the horse's position is less than + 325. [Show me where](#triggercallout=code_triggered1)\r\n\r\n* If the horse's + y position is less than 325, use a counter pattern to change the horse's + velocityY by 0.1 on each tick of the draw loop. \r\n* If the horse's y position + is not less than 325, use the `velocityY` to change its vertical velocity + to zero. [Show me where](#triggercallout=code_triggered2)\r\n\r\n" + CSD U3 abstraction jump_markdown_instruction: "# Jumping\r\n\r\nYou now have + all the blocks you need to make your sprite jump!\r\n\r\nJust as you checked + whether your fish was at the left edge, you'll need to check whether the + frog is on the ground. If it is, it could either jump up or stay still, so + you'll need one more `if` block to check whether the user has pressed the + up arrow ([Show me where](#triggercallout=code_triggered1)).\r\n\r\nYou'll + also need to check whether the frog has reached its highest point, and send + it back down if it has.\r\n\r\n# Do this\r\n\r\n* Find the `if` statement + that checks whether the sprite is on the ground, and look at the `if` statement + inside of it that checks whether the user has pressed the \"up\" arrow key. + [Show me where](#triggercallout=code_triggered1)\r\n\t* Use the `velocityY` + block to make the frog jump up when the user presses the arrow key.\r\n\t* + Use the `velocityY` block to make the frog stop moving otherwise.\r\n* Add + an if statement that does the following [Show me where](#triggercallout=code_triggered2)\r\n * + Checks whether the frog sprite has reached its highest point.\r\n * If so, + use the `velocityY` block to make the sprite fall back down.\r\n\r\n" + CSD U3 abstraction jumper intro_markdown_instruction: "# Horse Jumper\r\n\r\nNow + that you've learned these new blocks, you can start to make a horse jumper + game. Press \"Run\" to play the game on the left. You can use the up arrow + to jump over the tumbleweed. What block will you need to make the tumbleweed + move? How many different ways does the horse move?\r\n\r\n\r\n" + CSD U3 abstraction jumper template_markdown_instruction: "# Horse Jumper\r\n\r\nNow + that you've learned these new blocks, you can start to make a horse jumper + game. Press \"Run\" to play the game on the left. You can use the up arrow + to jump over the tumbleweed. What block will you need to make the tumbleweed + move? How many different ways does the horse move?\r\n\r\n\r\n" + CSD U3 abstraction jumping advanced_markdown_instruction: "# Jumping with the + Counter Pattern\r\n\r\nIn the last level you just set the sprite's velocity + to -5 to make it jump. Eventually the sprite slows down and then starts falling + again. Now you'll build a slightly more realistic jump by using the counter + pattern with the sprite's y velocity.\r\n\r\n# Do This\r\n\r\nInside the + `if` block you should have code that sets the sprite's y velocity to a number.\r\n\r\n* + Replace that line of code with new code, `flyer.velocityY = flyer.velocityY + - 5`\r\n* Discuss with Your Partner: How did this change affect the way the + sprite moves? How does subtracting a different amount change the way your + sprite moves? Do you prefer one or the other type of jump?" + CSD U3 abstraction jumping template_markdown_instruction: "# Jumping\r\n\r\nIncreasing + a sprite's y velocity inside the counter pattern can simulate gravity. By + adding user interactions you can make your sprite appear to jump as well. + For starters you'll make a simple jump and then make it more realistic looking + in the next level.\r\n\r\n# Do This\r\n\r\nA sprite has already been created + for you that falls because its y velocity is increased inside the draw loop. + You'll need to make this sprite appear to jump.\r\n\r\n* Inside the draw + loop add an `if` block\r\n* Use the `keyWentDown` block to make the block + respond to the \"up\" arrow being pressed\r\n* Inside your `if` block set + the sprite's y velocity to -5\r\n\r\nRun the code to make sure it works. + Then experiment with different values. How could you make your sprite jump + higher or lower?" + CSD U3 abstraction jumping_markdown_instruction: "# Jumping\r\n\r\nIncreasing + a sprite's y velocity inside the counter pattern can simulate gravity. By + adding user interactions you can make your sprite appear to jump as well. + For starters you'll make a simple jump, and then make it more realistic looking + in the next level.\r\n\r\n# Do This\r\n\r\nA sprite has already been created + for you that falls because its y velocity is increased inside the draw loop. + You'll need to make this sprite appear to jump.\r\n\r\n* Inside the `if` + block that checks whether the up arrow has been pressed, set the sprite's + y velocity to -5. [Show me where](#triggercallout=callout1)\r\n* Discuss with + a neighbor: Why does this code run the way it does? How would using a number + besides -5 affect the way the code works? How could you jump higher or lower?" + CSD U3 abstraction left right counter 2_markdown_instruction: "# Floating Left\r\n\r\nIn + the last level you got detailed instructions on how to make your sprite start + floating to the right. This time you'll need to make your sprite float to + the left on your own. You should be pretty comfortable with using velocity + and the counter pattern together at this point. If you're having trouble, + talk to a neighbor or review some of the past levels.\r\n\r\n# Do This\r\n\r\n* + Add code to your draw loop that will make the sprite start moving to the left + when the \"left\" arrow is down.\r\n* Make sure you're using velocity and + the counter pattern together.\r\n\r\nOnce your code is working share what + you wrote with a partner. Is your sprite easy to control? Does changing the + amount you add or subtract in the counter patterns you wrote affect the way + the game feels? What kind of game might be fun to make with a player that + moves like this?" + CSD U3 abstraction left right counter_markdown_instruction: "# Floating Right\r\n\r\nYou're + now using the counter pattern with the sprite's Y velocity to simulate gravity + and jumping. If you use the sprite's X velocity in the counter pattern then + you can make your sprite float from side to side as well.\r\n\r\n# Do This\r\n\r\nIn + this level you'll make your sprite start floating to the right when the right + arrow is pressed\r\n\r\n* Add an `if` statement inside your draw loop below + the one you created for the \"up\" arrow\r\n* Use the `keyDown` block to make + the `if` statement respond to when the \"right\" arrow is pressed\r\n* Inside + the `if` block use the counter pattern with the `sprite.velocityX` block to + add 0.1 to the sprite's X velocity\r\n\r\nRun your code to see how it works. + The sprite should start floating to the right when you press the right arrow + and jump when you press \"up\". You'll make the left arrow work in the next + level." + CSD U3 abstraction looping_markdown_instruction: "# Looping\r\n\r\nThe game + will be more fun if the frog can jump more than once. You can make the mushroom + \"loop\" by checking whether it's moved past the left edge and moving it + back to the right edge when it has.\r\n\r\n# Do this\r\n* Find the `if` statement + that checks whether the mushroom has passed the left edge. [Show me where](#triggercallout=code_triggered1)\r\n* + Use the `sprite.x` block to set the mushroom's position back to the right + edge if it has.\r\n\r\n" + CSD U3 abstraction make it your own_markdown_instruction: "# Make It Your Own\r\n\r\nYou + now have the basic mechanics of your game in place, so it's time to make + it your own. What do you want to happen? Should the character get points every + time it collects a coin? Can you add a scoreboard like you learned in the + last lesson? Do you want to make another coin? What about a \"bad coin\" that + takes away points?\r\n\r\n# Do This\r\n\r\nMake at least one improvement to + the game that makes it your own. Be prepared to share your changes and improvements + with your classmate." + CSD U3 abstraction parabola_markdown_instruction: "# Basketball\r\n\r\nHere's + a basketball that's thrown up, then falls back down. Can you use the `velocityX` + block to make it go through the hoop?\r\n\r\n\r\n# Do This\r\n\r\nUse the + `velocityX` block outside the draw loop to make the ball move to the right + by 3 each time. [Show me where](#triggercallout=code_triggered)\r\n\r\n[//]: + #(https://images.code.org/119358fc8705640a24d2138439ea7cc1-image-1472496770816.png)" + CSD U3 abstraction race template_markdown_instruction: "Template for the race + game" + CSD U3 abstraction reset coin_markdown_instruction: "# Reset Coin\r\n\r\nWhen + your character touches the coin you should reset it somewhere on the screen.\r\n\r\n# + Do This\r\n\r\n* Place an `if` block inside of your draw loop\r\n* Use the + `sprite.isTouching()` block as the condition to detect when the character + touches the coin\r\n* Inside the `if` block write code that sets the coin's + X and Y position to random numbers between 0 and 400\r\n\t* *Hint: You've + already written this code elsewhere in your program*\r\n\r\nTest your code + before moving on. When your player touches the coin it should move somewhere + else on the screen." + CSD U3 abstraction rotation accelerate_markdown_instruction: "# Speeding up\r\n\r\nNow + that you've used `rotationSpeed` outside the draw loop to start your sprite + rotating at a certain speed, you can also use `rotationSpeed` inside the draw + loop to change how fast the sprite rotates. Look at the code inside the draw + loop. It uses the counter pattern to make the wheel speed up when the up + arrow is pressed. Can you use a different counter pattern to make the wheel + slow down when the down arrow is pressed?\r\n\r\n# Do This\r\n\r\n* Look at + the code that makes the wheel spin faster when the up arrow is pressed [Show + me where](#triggercallout=code_triggered1)\r\n* Add code that makes the wheel + spin slower when the down arrow is pressed [Show me where](#triggercallout=code_triggered2)" + CSD U3 abstraction rotation control_markdown_instruction: "# Controlling Speed\r\n\r\nYou + used `rotatationSpeed` outside the draw loop to make your sprite rotate when + your program started. You can also use `rotationSpeed` **inside** the draw + loop to change the speed of the sprite during the game. For example, a sprite + can start rotating when the user presses the space bar, and it will keep rotating + until it's told to stop.\r\n\r\n# Do This\r\n\r\n* Look at the `if` statement + inside the draw loop that checks whether the space bar has been pressed. [Show + me where](#triggercallout=code_triggered1)\r\n* Use the `rotationSpeed` block + to make the color wheel start spinning when the user presses the space bar." + CSD U3 abstraction rotation_markdown_instruction: "# rotationSpeed\r\n\r\nYou've + already learned how to make your sprite spin by using the `rotation` block. For + example, when you wanted your sprite to rotate by two degrees each time it + was drawn, you put `sprite.rotation = sprite.rotation + 2` inside the draw + loop.\r\n\r\nNow, you can use `rotationSpeed` to make your sprites rotate + by a certain amount each time they are drawn. If you want your sun to rotate + by two degrees each time it's drawn, you can use `sun.rotationSpeed = 2` + before the draw loop, after you create your sprite.\r\n\r\n# Do This\r\n\r\nMake + the sun rotate by 3 degrees each time using the `rotationSpeed` block. [Show + me where](#triggercallout=callout1)" + CSD U3 abstraction setSpeed accelerate_markdown_instruction: "# Moving faster + and faster\r\n\r\nNow that you've started your car off in the right direction, + you can make it go faster and faster by using a counter pattern inside the + draw loop. Because the sprite does not store its speed as it would a property, + you'll need to use the `getSpeed` block inside the `setSpeedAndDirection` + block to add one to the speed each time. The code `car.setSpeedAndDirection(car.getSpeed() + + 1, -20)` will get the speed of the car, add one to it, and set the new speed + to be the sum. Even though it looks different from using a counter pattern + on a property or variable, the basic pattern of adding one each time is the + same.\r\n\r\n# Do this\r\n\r\nUse the `getSpeed` and `setSpeedAndDirection` + blocks to add one to the speed each time the draw loop is called. [Show me + where](#triggercallout=code_triggered)" + CSD U3 abstraction setSpeed fish_markdown_instruction: "# Save the Fish\r\n<img + style=\"float: right; height: 200px;\" src=\"https://images.code.org/c92db34c78faa59c2d8a3f0df7fe92aa-image-1472492951133.gif\" + />\r\nYour fish is in danger! The shark is swimming faster than the fish, + but we can use the counter pattern to make the fish get faster as the program + runs. Can use use the counter pattern inside the draw loop to change the + program to match the animation on the right?\r\n\r\n# Do This\r\nUse `setSpeedAndDirection` + inside the draw loop to increase the speed of the sprite by 1 each time the + draw loop is called.\r\n\r\n[//]: # (https://images.code.org/a87dac6c803751292c6fb11a63623e3f-image-1471466985600.png)\r\n\r\n[//]: + # (https://images.code.org/b63256ffb19a98d9d20f3b3b79364006-image-1471467188241.png)\r\n\r\n[//]: + # (https://images.code.org/c92db34c78faa59c2d8a3f0df7fe92aa-image-1472492951133.gif)" + CSD U3 abstraction setSpeed intro_markdown_instruction: "# getSpeed() and getDirection()\r\n\r\nWhen + you move around the world, you probably don't normally think about your velocityX + and velocityY. You probably just think about how fast you are going in the + direction you are heading. You can figure out a sprite's speed and direction + with math, but it's faster to teach the computer to do those calculations + for you. `getSpeed()` and `getDirection()` are methods that use the information + in `velocityX` and `velocityY` to find your speed and direction.\r\n\r\n# + Do this\r\n\r\n* For each of the three sprites in this animation: Look at + its `velocityX` and `velocityY` and guess what its speed and direction are. \r\n* + Then run the code and see the answers in the debug console.\r\n" + CSD U3 abstraction setSpeed_markdown_instruction: "# setSpeedAndDirection()\r\n\r\nJust + as you can use the `getSpeed` and `getDirection` blocks to see how your sprite + is moving, you can use the `setSpeedAndDirection` block to tell the computer + how you want your sprite to move. This block takes in two numbers, first + the new speed of your sprite, then the angle of its direction.\r\n\r\nBefore, + you did this by setting your `velocityX` and `velocityY` properties, but `setSpeedAndDirection` + lets you input the exact speed and direction of your sprite. The computer + calculates the matching `velocityX` and `velocityY` values and sets them for + you, according to code that another programmer already wrote.\r\n\r\n# Do + this\r\n\r\nUse `setSpeedAndDirection` to make the car stay on the road. You + can see the effect on your sprite's `velocityX` and `velocityY` in the debug + console.\r\n\r\n*Hint: The angle of the road is -20 degrees*\r\n\r\n*Challenge: + Make the car point in the correct direction.*" + CSD U3 abstraction sidescroll intro_markdown_instruction: "# Horse Jumper\r\n\r\nNow + that you've learned these new blocks, you can start to make a horse jumper + game. Press \"Run\" to play the game on the left. You can use the up arrow + to jump over the tumbleweed. What block will you need to make the tumbleweed + move? How many different ways does the horse move?\r\n\r\n\r\n" + CSD U3 abstraction sidescroll_markdown_instruction: "# Side Scroller\r\n\r\nNow + that you can make your sprite jump, you're ready to start a simple side scroller. In + a side scroller game, the main sprite stays at the same x location, and the + background and obstacles slide past it. In this first part of the project, + you'll make a hay bale slide across the screen so that your horse can jump + over it. You can do this by creating the hay bale off the right hand side + of the screen, but setting its velocity so that it moves to the left. Then, + when the hay bale is completely off the left hand side of the screen, move + it back to where it started so it can scroll across the screen again.\r\n\r\n# + Do this\r\n\r\n* Change the line of code where the hay sprite is created to + make it start off the right side of the screen. [Show me where](#triggercallout=code_triggered1)\r\n* + Add a line of code to make the sprite move across the screen toward the left. + [Show me where](#triggercallout=code_triggered2)\r\n* Add an if statement + that does the following [Show me where](#triggercallout=code_triggered3)\r\n * + Checks whether the sprite has gone off the left side of the screen.\r\n * + If so, moves the sprite back to its initial position off the right side of + the screen.\r\n\r\n\r\n_Challenge: Can you make the hay bale come out from + different places on the right hand side of the screen?_\r\n\r\n_Extra fun: + You can choose your own images to use, rather than the horse and hay bale, + and draw a new background._\r\n\r\n[](https://images.code.org/0a265cf4c22f69463200dce05989e8e4-image-1474609853181.png)" + CSD U3 abstraction space animation_markdown_instruction: "# Your choice\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that you have everything moving in the correct way, you can add your own sprite. You + can choose between the star and astronaut animations in the animations tab\r\n\r\n# + Do This\r\n\r\n* Add a new sprite to the picture using the star or astronaut + in the animations tab\r\n* Make your sprite move in a new way based on what + you have learned\r\n* Share your picture with a classmate and compare your + animations" + CSD U3 abstraction space comet_markdown_instruction: "# Animate The Comet\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that your sprites are in the right place, you can make them move using the + properties and methods you have learned. In this level, you can make the + comet fly across the sky in a curve. If you want to animate another sprite, + you can click on the following links:\r\n\r\n* [Animate the Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* + [Animate the Spaceship](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/14)\r\n* + [Animate the Satellite](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# + Do This\r\n\r\nUse the correct blocks to make the comet fly across the sky + as in the picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/13) + for clues.*" + CSD U3 abstraction space earth_markdown_instruction: "# Animate The Earth\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that everything is in the right place, you can make the sprites move using + the properties and methods you have learned. In this level, you can make + the earth rotate. If you want to animate another sprite, you can click on + the following links:\r\n* [Animate the Comet](s/CSDU3-Draft/stage/12/puzzle/13)\r\n* + [Animate the Spaceship](s/CSDU3-Draft/stage/12/puzzle/14)\r\n* [Animate the + Satellite](s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# Do This\r\n\r\nUse the + correct blocks to make the earth rotate as in the picture.\r\n" + CSD U3 abstraction space satellite_markdown_instruction: "# Animate The Satellite\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that everything is in the right place, you can make the sprites move using + the properties and methods you have learned. In this level, you can make + the satellite revolve around the moon. If you want to animate another sprite, + you can click on the following links:\r\n\r\n* [Animate the Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* + [Animate the Comet](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/13)\r\n* + [Animate the Spaceship](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/14)\r\n\r\n# + Do This\r\n\r\nUse the correct blocks to make the satellite move as in the + picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) + for clues.*" + CSD U3 abstraction space setup_markdown_instruction: "# Setting up your picture\r\n<img + style=\"float: right; margin: 4px;\" src=\"https://images.code.org/aabf67f8692c025f62a43e54d4bfd830-image-1472408773491.png\">\r\nBefore + you make anything move, you'll need to start all your sprites off in the + right place. The Earth has already been positioned for you, and all the images + are loaded for you in the animations tab.\r\n\r\n# Do This\r\n\r\n* Create + sprites for the moon, spaceship, and satellite.\r\n* Use `setAnimation` to + add a picture to each sprite.\r\n* Use the `x` and `y` properties to put the + sprites in the right place on the screen.\r\n" + CSD U3 abstraction space spaceship_markdown_instruction: "# Animate The Spaceship\r\n\r\n<img + style=\"float:right\" src=\"https://images.code.org/1c05e3bd228881b77109488b2eb5e737-image-1472408305120.gif\">\r\n\r\nNow + that everything is in the right place, you can make the sprites move using + the properties and methods you have learned. In this level, you can make + the spaceship speed up as it takes off from Earth. If you want to animate + another sprite, you can click on the following links:\r\n\r\n* [Animate the + Earth](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/12)\r\n* + [Animate the Comet](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/13)\r\n* + [Animate the Satellite](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/15)\r\n\r\n# + Do This\r\n\r\nUse the correct blocks to make the spaceship take off as in + the picture.\r\n\r\n*Hint: Look at [this level](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/6) + for clues.*" + CSD U3 abstraction space template_markdown_instruction: "![](https://images.code.org/b449da443093a6b7fb872c0b65d4ea39-image-1472234725048.png)\r\n\r\n![](https://images.code.org/87f39110a8cec7a6ca1978989f1d8eaf-image-1472235414354.png)\r\n\r\n![](https://images.code.org/69cb2daab7d1eec824b8bd2d2b117116-image-1472235429548.png)" + CSD U3 abstraction steer_markdown_instruction: "# Steering your car\r\n\r\nNow + you have enough information to control your car with the keyboard using conditionals. Every + time the left arrow key is pressed, the car will turn to the left. Can you + use the `if` block to make the car turn to the right when the right arrow + key is pressed? (Don't worry about speeding up and slowing down. You will + do that on the next level.)\r\n\r\n# Do This\r\n\r\nInside the draw loop:\r\n* + check whether the right arrow key is pressed\r\n* if it's pressed, turn the + car to the right\r\n\r\n*Challenge: Can you modify the code so that the car + turns faster?*" + CSD U3 abstraction teaser_markdown_instruction: "# Space Animation\r\n\r\nLook + at the space animation on the left.\r\n\r\n* What sorts of movements are the + different sprites making? \r\n* Which types of movement do you already know + how to program?\r\n* Is there anything you're not sure how to do? \r\n* Discuss + with a partner how you might make this picture.\r\n\r\n# Do This\r\n\r\n* + Click \"Run\" to see the space animation.\r\n* With your partner, discuss + the different types of movement and how you might code your sprites.\r\n* + Fill out the activity guide with your notes on the different movements." + CSD U3 abstraction tumbleweed_markdown_instruction: "# Mushroom\r\n\r\nNow + you just need something for your sprite to jump over. This program already + has a mushroom just past the right edge of the screen, but it needs to move + toward your frog.\r\n\r\n# Do this\r\n* Use the `velocityX` block to make + the mushroom move left across the screen.\r\n\r\n*Hint: The mushroom should + start moving at the very beginning of the game, and never change, so should + it be inside or outside the draw loop?*\r\n\r\n" + CSD U3 abstraction velocityX control_markdown_instruction: "# Multiple Controls\r\n\r\nAs + you saw in the last level, you can change the sprite's velocity with multiple + `if` statements. In this program, the fish has three different types of movement, + each of which should be controlled by its own `if` statement.\r\n\r\n# Do + This\r\n* Look at the three `if` statements inside the draw loop.\r\n\r\n* + Use a `sprite.velocityX` block inside each `if` statement to make the three + following movements:\r\n * If the user presses the right arrow key, move the + fish to the right.\r\n * If the fish gets to the right hand side of the screen, + move the fish to the left.\r\n * If the fish gets to the left hand side of + the screen, stop the fish." + CSD U3 abstraction velocityX if-statements_markdown_instruction: "# Changing + Velocity with Position\r\n\r\nOne advantage to using the velocity blocks inside + conditionals (`if` blocks) is that your sprite keeps moving, even after the + condition stops being true. For example, you only had to press a key once + to launch your fly man, and he kept flying forever.\r\n\r\nYou can do the + same when you check a sprite's position. In the code below, the fish sprite + moves to the left when it hits the right edge, and to the right when it hits + the left edge. The `if` block only sets the velocity when the sprite hits + the edge, but the sprite keeps moving in the same direction, even when it's + not touching the edge anymore.\r\n\r\n# Do This\r\n\r\n* Look at `if` statements + that check the sprite's position and set its velocity.\r\n* With your partner, + discuss how the sprite knows which way to move when neither of the `if` statements + are true (the sprite is in the middle of the screen)." + CSD U3 abstraction velocityX_markdown_instruction: "# velocityX\r\n\r\nOne + way to move sprites in Game Lab is with the counter pattern. For example `sprite1.x + = sprite1.x + 1` moves a sprite by 1 pixel each frame of the draw loop. This + pattern is so common that sprites have a `velocityX` property that does this + for you.\r\n\r\n# Do This\r\n\r\n* Drag a `sprite.velocityX` block directly + below where your sprite is created.       [Show me + where](#triggercallout=code_triggered)\r\n* Write the name of your sprite + in the block.\r\n* Assign the `velocityX` property a value of 1.\r\n* Run + the code. What happens?\r\n* Re-run the code giving the `velocityX` property + a different value. What's changing?\r\n" + CSD U3 abstraction velocityXY_markdown_instruction: "# Moving at an Angle\r\n\r\nFor + the next several levels you'll use the `sprite.velocityX` and `sprite.velocityY` + blocks to create some interesting sprite movements. As you do so ask yourself + whether you need the code to run just once (outside the draw loop) or on every + frame (inside the draw loop).\r\n\r\n# Do This\r\n\r\nThis car sprite should + move along the diagonal road.\r\n\r\n* Set both the X and Y velocities of + the car to make it move along the road.\r\n* Discuss with a Neighbor: Did + you set the velocity inside or outside the draw loop? Does it make a difference? + Why might one be better than the other?" + CSD U3 abstraction velocityY 2_markdown_instruction: "# velocityY\r\n\r\n`velocityY` + is like `velocityX`, but it moves things up and down. Can you use it to make + the feather float the down screen?\r\n\r\n#Do This\r\n\r\nUse `velocityY` + to make the sprite go down the screen.   [Show me where](#triggercallout=code_triggered)" + CSD U3 abstraction velocityY control_markdown_instruction: "# Controlling Speed\r\n\r\nYour + code before the draw loop sets up the beginning of your game. Your code inside + the draw loop controls how the game will change while it's being played. In + this game, the helicopter man starts off at the bottom of the screen, but + when the space key is pressed, he flies up.\r\n\r\n# Do This\r\n\r\n* Use + an `if` statement inside the draw loop to check when the space bar is pressed.\r\n* + Use the `velocityY` block to make the sprite fly up when the user presses + the space bar." + CSD U3 abstraction velocityY_markdown_instruction: "# Moving Down\r\n\r\nHere + is a feather sprite that should be floating down the screen. If `velocityX` + makes a sprite move to the right, can you find the block that will make the + feather move down?\r\n\r\n#Do This\r\n\r\nFind the block that will make the + feather sprite go down the screen, and use it outside the draw loop.   [Show + me where](#triggercallout=code_triggered)" + CSD U3 collisions bounce birds_markdown_instruction: "# bounce()\r\n\r\nThe + birds are fighting for space on the wire. Can you change the code so that + the green bird pushes the yellow bird off the wire?\r\n\r\n# Do This\r\n\r\nUse + the `bounce` block to the green bird sprite bounce against the yellow bird + sprite.\r\n" + CSD U3 collisions bounce intro_markdown_instruction: "# bounce()\r\n\r\nYou + can also make sprites bounce when they touch each other, as in the code below. + Read the code and run it with a partner. Can you change the code so that + the green bird pushes the yellow bird off the wire?\r\n\r\n# Do This\r\n\r\nUse + the `bounce` block to make the green bird sprite bounce against the yellow + bird sprite.\r\n" + CSD U3 collisions bounce_markdown_instruction: "# Billiards\r\n\r\nChanging + your sprites' velocities will change the ways that they bounce when they + touch each other. Read the code and run it with a partner, then try out different + intial velocities for your sprites. After each change, discuss with your + partner what you think will happen before you run the code.\r\n\r\n# Do This\r\nDiscuss + with your partner what you think will happen when you run the code, then try + it again with the following changes:\r\n* set the purple ball's velocity + to 0\r\n* set the purple ball's velocity to 4\r\n* switch the purple and + red balls so it says `red_ball.bounce(purple_ball)`\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: + # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" + CSD U3 collisions bounceOff intro_markdown_instruction: "# Basketball\r\n\r\nRun + the code below and see what happens. You want the basketball to bounce, but + the floor should not move! See if you can find a different block that you + can use to make the basketball bounce off the floor.\r\n\r\n# Do This\r\n\r\nReplace + `bounce` with a different block so that the floor sprite does not move, and + the basketball sprite bounces off it.\r\n\r\n[//]: # (https://images.code.org/24355fc6377cfafdce3ce2b3568a33c3-image-1470343728940.png)\r\n\r\n[//]: + # (https://images.code.org/87e4306e0371c7975b8fb2583657ee4a-image-1470343728942.png)" + CSD U3 collisions bounceOff_markdown_instruction: "# Mouse\r\n\r\nThe mouse + should be running back and forth between the two walls. Can you use the `bounceOff` + block to make it move in the right way?\r\n\r\n# Do This\r\n\r\nUse the `bounceOff` + block to make the mouse sprite bounce off the wall sprites.\r\n\r\n[//]: # + (https://images.code.org/e542bc5decf5f57d3184a8d5449776d2-image-1470413949810.png)\r\n\r\n[//]: + # (https://images.code.org/fcd40235d2a4285723eecec1df041edc-image-1470413965009.png)\r\n\r\n[//]: + # (https://images.code.org/c3f6298b05a9eb51772c8c03a06abe54-image-1470414415864.png)\r\n\r\n[//]: + # (https://images.code.org/e89b80c63658eb3607478fe91aceda47-image-1470414741858.png)" + CSD U3 collisions bounciness_markdown_instruction: "# Bounciness\r\n\r\nSo + far, `bounceOff` has made sprites bounce away from other objects as fast as + they bounced into them. In the real world, almost everything slows down just + a little bit when it bounces off something else. You can use the `bounciness` + block to tell your sprite how much to slow down or speed up when it bounces + off something else.\r\n\r\n# Do This\r\n\r\n* Read the code below and press + \"Run\" to see the behavior of the basketball and pool ball.\r\n* Use a `bounciness` + block to set the bounciness of your soccer ball.\r\n* Run the code again to + see how the sprites bounce off the floor.\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: + # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)\r\n\r\n[//]: + # (https://images.code.org/0e4e9c26bed0d31d14f6b3f8f8bb4c27-image-1475786966986.png)" + CSD U3 collisions build isTouching_markdown_instruction: "# Balloon\r\n\r\nThe + code below will change the balloon sprite's animation when the tack touches + it. Use the arrow keys to move the tack until it touches the balloon.\r\n\r\n# + Do This\r\n\r\n* You do not need to change any code on this level.\r\n* Read + the if statements inside the draw loop and discuss with your partner how they + work.\r\n\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: + # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: + # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)" + CSD U3 collisions bumper_markdown_instruction: "# Bumper Cars\r\n\r\nThe bumper + cars are almost ready, but they still don't bump into each other. Can you + choose the right method to make the cars behave like they do in the picture?\r\n\r\n# + Do This\r\n\r\nUse `displace`, `collide`, `bounce`, or `bounceOff` to make + the sprites interact in the right way.\r\n\r\n[//]: # (https://images.code.org/682567536f824cc930ebed5c1b936e5f-image-1470415888369.png)\r\n\r\n[//]: + # (https://images.code.org/8a6915fe703f4fe097094cad1e754a6f-image-1470415888371.png)\r\n\r\n[//]: + # (https://images.code.org/0b9f5ca88dc99fc08d472fdba87d6e32-image-1470417254115.png)\r\n\r\n[//]: + # (https://images.code.org/2085e5de29f7170465b0c7bd5e6b56e9-image-1470417254116.png)" + CSD U3 collisions car intro_markdown_instruction: "# Frog Jump\r\n\r\nLook + at the frog jumping game to the left. It looks like the game from the last + lesson, but the frog moves the mushroom if it hits it. What code do you think + would help the computer to know whether two sprites are touching?\r\n\r\n[//]: + # (https://images.code.org/ee9b677e93213846fe12abb3b34f563c-image-1469742494237.png)\r\n\r\n[//]: + # (https://images.code.org/5f738da1a2b1ef8af124e4470e2babe7-image-1469742830481.png)\r\n\r\n[//]: + # (https://images.code.org/f22e6b1a636337820e53fb37a137b3d1-image-1469742992179.png)" + CSD U3 collisions car_markdown_instruction: "# Improve Your Game\r\n\r\nNow + that you know how to use `isTouching` and `playSound`, you can make some fun + things happen when your sprites run into each other.\r\n\r\n# Do This\r\n\r\nUse + the `if`, `isTouching`, `playsound`, and any other blocks you want to add + effects when your sprites collide. You should have at least two effects.\r\n\r\n_Challenge: + Can you add a score board to the top of the screen? How would your game keep + score, and how would the score be displayed?_" + CSD U3 collisions collide_markdown_instruction: "# Save your treasure\r\n\r\nThe + pirate is trying to steal your treasure! Use the arrow keys to move the pirate + around the screen. Can you change the code so the pirate can't get past + the wall?\r\n\r\n# Do This\r\n\r\nUse the `collide` block to make the pirate + sprite collide into the wall.\r\n\r\n[//]: #(https://images.code.org/04a7b28f7228570602238fed87420aab-image-1470944619236.png)\r\n\r\n[//]: + #(https://images.code.org/8f7ec18621c97ce98d22337a1e21ddab-image-1470944619234.png)\r\n\r\n[//]: + #(https://images.code.org/6b749a05857ea1e88fa46f7e2740c77c-image-1470944619235.png)" + CSD U3 collisions debug isTouching_markdown_instruction: "# Debugging Collisions\r\n\r\nThe + balloon is popping before the tack touches it. When sprites aren't doing + what you expect, you can use the `debug` block to get more information about + why the sprites are behaving that way. Can you find out what's wrong in + the code below?\r\n\r\n# Do This\r\n* Run the code and use the arrow keys + to move the tack to pop the balloon.\r\n* In the code below, change `balloon.debug + = false` to `balloon.debug = true`.\r\n* Add a new `debug` block to the code + and set the tack sprite's debug property to `true`.\r\n* Run the code again, + then discuss with your partner why the balloon is popping early.\r\n\r\n*Challenge: + Can you use the animations tab to resize the balloon picture so it pops at + the correct time?*\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: + # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: + # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)\r\n\r\n[//]: + # (https://images.code.org/2892e65635d7a43d0664bb8ff58eb698-image-1471200175665.png)\r\n\r\n[//]: + # (https://images.code.org/9ffeb3f543033353d073794071316860-image-1471200179449.png)" + CSD U3 collisions debug_markdown_instruction: "# Debug\r\n\r\nSometimes sprites + will behave in ways that are unexpected. There is a special `sprite.debug` + property you can use to better understand why the sprites interact the way + that they do.\r\n\r\n# Do This\r\n\r\nThese two coins are round, so you would + expect them to bounce in a certain way. Something weird is happening though!\r\n\r\n* + Run the code and watch the way that the coins interact.\r\n* Use the `sprite.debug` + block to make debug 'true' for both the sprites and run the code again.\r\n* + Change the gold coin's starting x position to 51 and run the code again.\r\n* + Discuss with a partner: Why do you think the balls are bouncing strangely?" + CSD U3 collisions displace diagonal_markdown_instruction: "# Diagonal Elevator\r\n\r\nLast + time we saw balloon, it pushed the feather all the way off screen. What do + you think will happen when the balloon moves away from the feather while it's + moving it?\r\n\r\n# Do This\r\n\r\nUse the `displace` block to make the balloon + sprite push the feather sprite, and watch what happens when the sprites stop + touching each other.\r\n\r\n[//]: # (https://images.code.org/a6c891b044cea1b6d8649a153e13739b-image-1470316517410.png)\r\n\r\n[//]: + # (https://images.code.org/af2df53196186e50a58f64f6559a53ca-image-1470316589121.png)\r\n\r\n[//]: + # (https://images.code.org/fb739254c4d2f6745977a26e0481162a-image-1470316780326.png)\r\n\r\n[//]: + # (https://images.code.org/341bb1ce73ba812f2bd0afeb01e08aad-image-1470316853020.png)" + CSD U3 collisions displace intro_markdown_instruction: "# Displace\r\n\r\nThe + interaction you've been programming is so common that there's a block designed + to do the interaction for you. `sprite.displace()` that will make one sprite + push the other when they touch. The code underlying this block might look + a lot like what you just wrote, but now you no longer need to worry about + writing those details yourself.\r\n\r\n# Do This\r\n\r\nSomeone tried to use + the `sprite.displace()` block to make the **elephant push the hippo**, but + there is a bug. Can you change the code so that the elephant pushes the hippo + off the screen?\r\n\r\n* Find the line of code where the `sprite.displace()` + block is used and fix the error." + CSD U3 collisions displace x_markdown_instruction: "# Program a Sprite Interaction\r\n\r\nYou + should have discussed with your classmates how you could create the sprite + interaction you saw in the last level. Now it's your turn to program it yourself. + How can you make the giraffe move the monkey off the screen?\r\n\r\n# Do This\r\n\r\nThe + giraffe is already moving across the screen toward the monkey but the sprite + interaction itself hasn't been programmed.\r\n\r\n* Use the plan you developed + with your classmates on the last level to program the sprite interaction yourself.\r\n\r\n[//]: + # (https://images.code.org/2e6b993747a39cd5076dce219037903d-image-1470319674401.png)\r\n\r\n[//]: + # (https://images.code.org/d44d7c1aa87ea7eeceea9e9b023408f9-image-1470319674396.png)" + CSD U3 collisions displace y_markdown_instruction: "# Write Your Own Sprite + Interaction\r\n\r\nIn the last level you should have written code for a sprite + interaction that you developed with your classmates. This time try to write + the program on your own, but you can use the patterns you saw in the last + level.\r\n\r\n# Do This\r\n\r\nThe elephant should **push the hippo off the + screen**. Notice that the elephant moves at a random Y velocity each time + the program runs.\r\n\r\n* Using the patterns from the last level, write code + that makes the elephant push the hippo off the screen." + CSD U3 collisions egg template_markdown_instruction: "# Template Level\r\n\r\n[//]: + # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: + # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: + # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: + # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: + # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: + # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" + CSD U3 collisions egg_markdown_instruction: "# Applesauce\r\n\r\nWhen the apple + hits the blender, the blender should turn on.\r\n\r\n# Do This\r\n\r\nUse + the `isTouching` block to make the blender shake back and forth when the apple + sprite touches the blender sprite. The shaking motion is already coded using + the random block, so you just have to check when the two sprites are touching.\r\n\r\n*Challenge: + Can you make the apple disappear when it touches the blender?*\r\n\r\n[//]: + # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: + # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: + # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: + # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: + # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: + # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" + CSD U3 collisions egg2_markdown_instruction: "# Making Sounds\r\n\r\nYou can + also use code to play a blender sound.\r\n\r\n# Do This\r\n\r\nUse the `playSound` + block from the \"Game Lab\" drawer to play the \"https://docs.code.org/sounds/blender.mp3\" + sound when the apple touches the blender. You will need to paste the address + of the sound into the block, so it looks like this: ![](https://images.code.org/8376df7a92ff8e6ba0a2d6e51c24547e-image-1484091385498.34.57 + PM.png)\r\n\r\n[//]: # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: + # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: + # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: + # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: + # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: + # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)\r\n\r\n[//]: + # (https://images.code.org/8376df7a92ff8e6ba0a2d6e51c24547e-image-1484091385498.34.57 + PM.png)" + CSD U3 collisions flyman add obstacles_markdown_instruction: "# Flyer Game + - Add Obstacle\r\n\r\nThis is the flyer game you built in the last lesson. + For the next several levels you'll be adding an obstacle sprite to the game, + using some of the sprite interactions you just learned. At the end you'll + have a chance to keep adding on ideas of your own.\r\n\r\n<img src=\"https://images.code.org/47f8c130ca668080d48520ef9aced093-image-1477069764142.08.58 + AM.png\" style=\"float:right;width:200px\">\r\n\r\n# Do This\r\n\r\nAdd an + obstacle sprite to the game. You can use whatever image you like from the + animation tab but the example shown here uses a sun. Right now you just need + to add the sprite to your game and give it an animation.\r\n\r\n* Add a new + sprite to your game called \"obstacle\"\r\n* In the animation tab create a + new animation for your obstacle. In the example a sun image was chosen\r\n* + Use the `sprite.setAnimation()` block to give your sprite the image you chose.\r\n* + Run the code and make sure the sprite appears where you want it on the screen. + You may need to set its X, Y, and scale properties to get it to look the way + you want." + CSD U3 collisions flyman bounceOff_markdown_instruction: "# Flyer Game - Interacting + with the Obstacle\r\n\r\nYou don't want your player to be able to move through + the obstacle, so you'll need to use one of the sprite interactions.\r\n\r\n# + Do This\r\n\r\n* Add code to your game that prevents your player from moving + through the obstacle.\r\n* If you use one of the bounce interactions, decide + if you want to reset the bounciness of your character.\r\n* Discuss with a + Neighbor: Which sprite interaction did you decide to use? Is there more than + one sprite interaction that works the way you'd expect?" + CSD U3 collisions flyman change colliders_markdown_instruction: "# Flyer Game + - Change Colliders\r\n\r\nRight now your colliders are all rectangular. Switch + them over to circles to get more interesting and realistic bounces and collisions.\r\n\r\n# + Do This\r\n\r\n* Use the `sprite.setCollider()` block to change the colliders + of your sprites to circles.\r\n* Set your sprites' debug properties to `true` + to make sure your game is working the way you want.\r\n* Play your game to + make sure it's working the way you want." + CSD U3 collisions flyman displace coin_markdown_instruction: "# Flyer Game + - Coin Behind the Obstacle\r\n\r\nRight now your coin is moving to random + locations. That means sometimes it even will appear behind your obstacle, + so your character can't get to it. Using sprite interactions you can fix + this problem.\r\n\r\n# Do This\r\n\r\n* Add code to your game that prevents + the coin from moving behind the obstacle. Don't be afraid to try out ideas + and just see how they work.\r\n* Discuss with a Neighbor: Which sprite interaction + did you decide to use? Is there more than one sprite interaction that works + the way you'd expect?" + CSD U3 collisions flyman make it your own_markdown_instruction: "# Flyer Game + - Make It Your Own\r\n\r\nTime to make this game your own by using what you've + learned about sprite interactions.\r\n\r\n# Do This\r\n\r\nAdd at least one + more aspect to your game that uses sprite interactions. There's some ideas + below or you can choose to add features of your own. Make sure you're ready + to share your ideas with your classmates.\r\n\r\n* Create \"edge\" sprites + to keep your character from bouncing out\r\n* Add platforms to the game for + your character to navigate around\r\n* Add another obstacle to your game\r\n* + Create another idea of your own." + CSD U3 collisions getSpeed_markdown_instruction: "# Dashboard\r\n\r\nHere's + a car that can be controlled with the arrow keys. The dashboard at the bottom + should show the car's speed and direction, even when it is off the screen.\r\n\r\n# + Do This\r\n\r\n* Use the `getDirection()` block to turn the compass needle + to the car's current direction. [Show me where](#triggercallout=code_triggered1)\r\n* + Use the `getSpeed()` block to display the car's current speed on the dashboard, + instead of 0. [Show me where](#triggercallout=code_triggered2)\r\n\r\n*Challenge: + Can you also show the car's current location on the dashboard?*\r\n\r\n[//]: + #(https://images.code.org/b87e51b8ed026ca239cbf629c9a58b26-image-1472571454000.png)\r\n\r\n[//]: + #(https://images.code.org/669fd48b2a28602220c2d07b717c1ace-image-1472571454002.png)\r\n\r\n[//]: + #(https://images.code.org/e3013d8428f54f7fbde63d0a4a8eaafb-image-1472571782304.png)" + CSD U3 collisions horse_markdown_instruction: "# Rainbow Horse\r\n\r\nWhen + the rainbow touches the horse, it should turn into a unicorn.\r\n\r\n# Do + This\r\n\r\nUse the `if`, `isTouching`, and `setAnimation` blocks to change + the horse sprite's image when the rainbow touches it. The unicorn image + is already loaded in the animations tab for you.\r\n\r\n[//]: # (https://images.code.org/4d1d0e36e574117140ecc377d406c1de-image-1470256869920.png)\r\n\r\n[//]: + # (https://images.code.org/b913bc2ee2231b908892472240a70105-image-1470256869922.png)\r\n\r\n[//]: + # (https://images.code.org/558b42903bf40cc26410e651a85de922-image-1470256869923.png)\r\n\r\n[//]: + # (https://images.code.org/1d41d2e5b3b55037911b8f73bdc2ff48-image-1470257277875.png)" + CSD U3 collisions isTouching intro_markdown_instruction: "# isTouching()\r\n\r\nWriting + out the math each time you want to check whether two sprites are touching + can take a while, so a programmer created the `isTouching` block, which can + check whether one sprite is touching another sprite (the *target*). The computer + is still doing the same math as in the previous program, but you don't have + to worry about it because another programmer already did that work.\r\n\r\n# + Do This\r\n\r\nInside the draw loop, drag the `isTouching` block into the + `if` block.    [Show me where](#triggercallout=code_triggered)\r\n\r\n*Hint: + Don't forget to change the \"sprite\" to \"balloon\" and the \"target\" to + \"tack\".*\r\n\r\n[//]: # (https://images.code.org/7afe11fccea99cd7f31497710cce5ac3-image-1471190004988.png)\r\n\r\n[//]: + # (https://images.code.org/0b6e98b829379d88b9952ee013cf70bd-image-1471190009596.png)\r\n\r\n[//]: + # (https://images.code.org/49c7a3b6fe2eff7e51d3f40581b1dcbb-image-1471190256258.png)" + CSD U3 collisions obstacle_markdown_instruction: "# Mouse Maze\r\n\r\nThe mouse + needs to find its way through the maze to get to the cheese, but right now + it passes through the walls. Can you change the code so that the mouse is + blocked by the walls?\r\n\r\n# Do This\r\n\r\nAdd a `displace`, `collide`, + `bounce`, or `bounceOff` block in the draw loop to make the sprites interact + in the right way.\r\n\r\n[//]: # (https://images.code.org/cefb99d244b9167314128578e477808c-image-1470948228670.png)\r\n\r\n[//]: + # (https://images.code.org/e0cf14ae384355129b32b73ef64ed77e-image-1470948281047.png)" + CSD U3 collisions open_markdown_instruction: "# Your Choice\r\n\r\nYou've + seen sprites do many things when they collide with each other: rotate, disappear, + change animation, or even make a new sprite appear on the screen. Now it's + your turn to choose what the sprites can do. Decide what two animations you + want to use for your sprite, and what you want to happen when they touch each + other, then code your choice. You may also choose to change the position, + speed, and direction of your sprites.\r\n\r\n# Do This\r\n* Decide what your + sprites should look like, and use `setAnimation` to give them that image\r\n* + Change the starting position of your sprites in the `createSprite` block\r\n* + Use `setSpeedAndDirection` or `velocityX` and `velocityY` to make your sprites + move how you want\r\n* Use the `if` block, with `isTouching` and `rotate`, + `visible`, `setAnimation` or any other block to make your sprites react when + they collide." + CSD U3 collisions overlap x_markdown_instruction: "# Turtle Race\r\n\r\nThe + turtle moves forward every time you press the left key. When he touches the + finish line, he should get a trophy. The trophy will appear when `isTouchingX` + is true. Can you add code to make sure it is set to true when the turtle + gets to the finish line?\r\n\r\n# Do This\r\n\r\nAdd code inside the draw + loop to set the values of the variables that have been created for you. Then, + test your program by playing the game.\r\n\r\n\r\n[//]: # (https://images.code.org/af2cffe952997258eb6b5573cfe9a29f-image-1470188585528.png)\r\n\r\n[//]: + # (https://images.code.org/d2eb9684743d45ef1e10ff4602936107-image-1470188590517.png)\r\n\r\n[//]: + # (https://images.code.org/98aee1ed11c7e00cd66718b4c232ab66-image-1470190293465.png)\r\n\r\n[//]: + # (https://images.code.org/fb129d34e3089763f35dfc8980d705ea-image-1470191576501.png)\r\n\r\n[//]: + # (https://images.code.org/3fc6da739dfd31b256618a560c12a076-image-1470191923150.png)" + CSD U3 collisions overlap y_markdown_instruction: "# Fried Egg\r\n\r\nIt's + breakfast time! When the egg hits the pan, it should start to fry. Can you + add code so that isTouchingX is set to true at the right time?\r\n\r\n# Do + This\r\n\r\nSet the values of the variables so that `isTouchingX` is true + when the egg hits the pan.\r\n\r\n[//]: # (https://images.code.org/82436176c744caa106cfc4971cd1db6c-image-1470247395711.png)\r\n\r\n[//]: + # (https://images.code.org/ea5def7998ed88d016ac7d8223aabb75-image-1470247399852.png)\r\n\r\n[//]: + # (https://images.code.org/b3a38abe5aeb799e61b7368ceb210873-image-1470247402163.png)\r\n\r\n[//]: + # (https://images.code.org/57c724cf77b338f3c13dc8271a76dd77-image-1470247525113.png)\r\n\r\n[//]: + # (https://images.code.org/68b31e0fe8b8b454225d87b0f4a0a5f8-image-1470317549553.png)\r\n\r\n[//]: + # (https://images.code.org/00e4ee128c4beb11c0c7a6bba6024494-image-1470317549555.png)" + CSD U3 collisions overlap_markdown_instruction: "# IDEK\r\n\r\nThis is Tracey's + idea. Apparently horses turn into unicorns when they go through rainbows? Use + your arrow keys to aim the rainbow at the unicorn, then hit the space bar + to make it fly toward the horse.\r\n\r\n# Do This\r\n\r\nUse two `if` blocks + together to change the sprite's animation when the two sprites touch each + other. Then play the game to test your code.\r\n\r\n[//]: # (https://images.code.org/4d1d0e36e574117140ecc377d406c1de-image-1470256869920.png)\r\n\r\n[//]: + # (https://images.code.org/b913bc2ee2231b908892472240a70105-image-1470256869922.png)\r\n\r\n[//]: + # (https://images.code.org/558b42903bf40cc26410e651a85de922-image-1470256869923.png)\r\n\r\n[//]: + # (https://images.code.org/1d41d2e5b3b55037911b8f73bdc2ff48-image-1470257277875.png)" + CSD U3 collisions pinball_markdown_instruction: "# Panda Game\r\n\r\nPress + \"Run\" to try out the game on the left. You can use the left and right arrow + keys to control the paddle. What types of sprite interactions do you see? Which + ones will use the `isTouching` block? Which interactions have their own blocks?\r\n\r\n# + Do This\r\n\r\nPlay the game a few times and discuss with your partner what + how you would program the different sprite interactions.\r\n" + CSD U3 collisions pinball2_markdown_instruction: "# Panda Game\r\n\r\nHere + is the same game, but missing most of the interactions. All of the missing + interactions should be inside the \"spriteInteractions\" function. ([Show + me where](#triggercallout=code_triggered)) The comments will help you remember + which interactions are missing.\r\n\r\n# Do This\r\n\r\nUse the blocks you + know to program back the missing interactions.\r\n" + CSD U3 collisions pirate_markdown_instruction: "# Hide your treasure\r\n<img + style=\"float: right\" src=\"https://images.code.org/2bcf0ba8d5efe69c4531627f2c4d2a1f-image-1472600812452.gif\" + />\r\nYour enemies are still after your treasure. Use the arrow keys to move + the person around the screen. Can you change the code so that she can push + the treasure behind the tree?\r\n\r\n# Do This\r\n\r\nUse `displace`, `collide`, + `bounce`, or `bounceOff` to make the sprites interact in the right way.\r\n\r\n[//]: + # (https://images.code.org/732942eef4d0c288bf445a4478aee6ec-image-1470947222110.png)\r\n\r\n[//]: + # (https://images.code.org/1458d90cb97f3bd37508fa0ec3d997f8-image-1470947222109.png)\r\n\r\n[//]: + # (https://images.code.org/56da2ef5cef40080e0d677c86aec3901-image-1470947222108.png)" + CSD U3 collisions predict set velocity code_markdown_instruction: "# Sprite + Interactions\r\n\r\nSo far you've been able to create simple sprite interactions + by using the `sprite.isTouching()` block. For example, you've reset a coin + to a different location on the screen when a character touches it. Now it's + time to start making sprites have more complex interactions.\r\n\r\n# Do This\r\n\r\n* + Run the program and observe the interaction between the two sprites\r\n* Discuss + with a Neighbor: Using only the commands you already know how could you create + this kind of interaction? There's many ways to do it, but here are some blocks + to consider.\r\n\t* `sprite.isTouching()`\r\n * `sprite.velocityX`\r\n * + `sprite.velocityY`\r\n * `sprite.x`\r\n * `sprite.y`\r\n\r\nBe ready + to share your ideas with your classmates." + CSD U3 collisions predict set velocity_markdown_instruction: "# Setting Velocity\r\n\r\nThis + program creates two sprites, one that's standing still in the middle of the + screen and the other that moves towards it. Notice the one important line + of code in this program\r\n\r\n\tif(sprite1.isTouching(sprite2)){\r\n\t\tsprite2.velocityX + = sprite1.velocityX;\r\n }\r\n\r\n# Predict\r\n\r\nWhat do you think will + happen when the two sprites touch? Write your answer and reasonings in the + space below. Then run the code to see for yourself.\r\n\r\n" + CSD U3 collisions scoreboard_markdown_instruction: "# Scoreboard\r\n\r\nYou + can also use `isTouching` to decide whether you should increase the score. In + this game, the score is stored inside the 'score' variable. It is displayed + on the screen using the `text` block. [Show me where](#triggercallout=code_triggered)\r\n\r\n# + Do This\r\n\r\n* Use the `if` and `isTouching` blocks to determine whether + the bunny has caught the carrot. [Show me where](#triggercallout=code_triggered2)\r\n* + If it has, do the following three things:\r\n * use the counter pattern on + the score variable to increase the score.\r\n * reset the carrot's x position + off the right hand side of the screen\r\n * set the carrot's y position to + a random number between 10 and 390" + CSD U3 collisions setCollider_markdown_instruction: "# setCollider\r\n\r\nSprites + interact based on the size and shape of their collider, not the images that + are assigned to them. You can only see the collider when debug mode is turned + on. You can change the shape of the collider using the `sprite.setCollider()` + block, which lets you pick between a \"rectangle\" or a \"circle\". By default + all colliders are \"rectangle\".\r\n\r\n# Do This\r\n\r\n* Find the `sprite.setCollider()` + block for the gold coin, and change it from \"rectangle\" to \"circle\"\r\n* + Add a new `sprite.setCollider()` block for the silver coin, and choose \"circle\" + for the shape of the collider\r\n* Run the code again to see how the sprites + bounce.\r\n\r\n\r\n[//]: # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: + # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" + CSD U3 collisions sidescroll2_markdown_instruction: "# Improve Your Game\r\n\r\nNow + that you know how to use `isTouching` and `playSound`, you can make some fun + things happen when your sprites run into each other.\r\n\r\n# Do This\r\n\r\n* + Add at least two effects when your sprites collide.\r\n\r\n*Challenge: Add + a scoreboard to the top of your screen.*\r\n" + CSD U3 collisions sundae_markdown_instruction: "# collide()\r\n\r\nThe `collide` + block is similar to `displace`, but it makes the sprite that uses it stop + when it is touching the other sprite. Can you use this to make the cherry + stop when it gets to the top of the ice cream sundae?\r\n\r\n# Do This\r\n\r\nUse + the `collide` block to make the cherry sprite stop when it runs into the ice + cream sprite.\r\n\r\n[//]: # (https://images.code.org/491fb8bff907a183bd1cf0061689d193-image-1470419927625.png)\r\n\r\n[//]: + # (https://images.code.org/ea2066d640e74284b8c48e382f56bf1b-image-1470419927627.png)" + CSD U3 collisions tennis_markdown_instruction: "# Tennis\r\n\r\nComplete the + tennis game by making sure the ball and the racket interact in the right way. + You can use your up and down arrows to control the racket.\r\n\r\n# Do This\r\n\r\nAdd + a `displace`, `collide`, `bounce`, or `bounceOff` block in the draw loop to + make the sprites interact as they do in the picture.\r\n\r\n_Challenge: Can + you add a scoreboard that will add a point every time the ball is hit, and + subtract one every time it's missed?_\r\n\r\n[//]: # (https://images.code.org/8d8cf039f50114c07a21e73bbc1c8dfe-image-1470418244037.png)\r\n\r\n[//]: + # (https://images.code.org/d05be653ae7e4717353dffd08af9c656-image-1470418244039.png)" + CSD U3 collisions try blocks_markdown_instruction: "# More Collision Blocks\r\n\r\nThree + new types of sprite interactions have been added to the toolbox, `sprite.collide()`, + `sprite.bounce()`, and `sprite.bounceOff()`. How do you think they'll affect + the sprites?\r\n\r\n# Do This\r\n\r\n* Switch out the displace block for the + `sprite.collide()`, `sprite.bounce()`, and `sprite.bounceOff()` blocks. [Show + me where](#triggercallout=code_triggered)\r\n\t* *Hint: If you're having + trouble doing this with blocks then switch over to text mode*\r\n* Discuss + with a neighbor: What is the difference between the four different sprite + interactions? What do you think the purpose of each block is?\r\n\r\n\r\n[//]: + # (https://images.code.org/8b7730146eaa9d439e6af34c0a21e802-image-1470321391887.png)\r\n\r\n[//]: + # (https://images.code.org/eca470a686b01c19981152fdab808804-image-1470321391888.png)" + CSD U3 collisions turtle_markdown_instruction: "# Debugging Sprite Interactions\r\n\r\nSprite + interactions just run some code when they're called. The interactions are + not \"remembered\" by the game. If you want one sprite to bounce or collide + with another then it needs to be a part of the draw loop. If you forget then + this can lead to unexpected behavior.\r\n\r\n# Do This\r\n\r\nThe turtle can + be moved with the arrow keys. It's not supposed to be able to walk through + the tree, but something is wrong in the code. Can you find and correct the + bug in the code?\r\n\r\n* Run the code and try to make the turtle collide + with the tree.\r\n* Look through the code and discuss with your partner what + the problem is.\r\n* Correct the code, then run it again to make sure it works." + CSD U3 collisions types_markdown_instruction: "# Collision Types\r\n\r\nThere + are four types of collisions that we use in Game Lab. These blocks will cause + a certain type of interaction between the _sprite_ and its _target_.\r\n\r\n## + displace\r\n\r\nThe `displace` block causes the sprite to push the target + as long as they are touching each other. The sprite keeps moving normally.\r\n\r\n## + collide\r\n\r\nThe `collide` block makes the sprite stop when it runs into + the target. If the target is moving, it will push the sprite with it. The + target keeps moving normally.\r\n\r\n## bounce\r\n\r\nThe `bounce` block makes + the sprite and the target bounce when they touch each other. Both the sprite + and the target change how they are moving.\r\n\r\n## bounceOff\r\n\r\nThe + `bounceOff` block makes the sprite bounce off the target. The target keeps + moving normally.\r\n\r\n\r\n\r\n# Do This\r\n\r\nChoose the best block to + model the basketball bouncing off the floor. [Show me where](#triggercallout=code_triggered)\r\n\r\n[//]: + # (https://images.code.org/24355fc6377cfafdce3ce2b3568a33c3-image-1470343728940.png)\r\n\r\n[//]: + # (https://images.code.org/87e4306e0371c7975b8fb2583657ee4a-image-1470343728942.png)" + CSD U3 finishing touches_markdown_instruction: "# Finishing Touches\r\n\r\nNow + that you have the basis for your game, it's time to add some finishing touches.\r\n\r\nTo + make your game even better, try making at least two improvements to it. You + can use the list below to help you, or you can come up with your own improvements + that you'd like to make.\r\n\r\n* Find a way to keep your player from going + off the edges of the screen.\r\n* Add a different item for your player to + collect or avoid that are worth different point values.\r\n* Make a variable + to keep track of how many lives your player has, and then end the game when + the lives run out.\r\n* Add sprites that move in the background of your game.\r\n* + Make another background to switch to when the score gets even higher, or when + the game ends.\r\n* Give your game a way to end. Possible events to end your + game could be the score reaching a certain value, or the amount of lives to + keep the game running runs out.\r\n* If your game has platforms, try making + the objects in your game interact with these platforms in some way." + CSD U3 game animations_markdown_instruction: "# Create your Animations\r\n\r\nNext + you will create your animations in the animation tab. Don't forget to make + multiple animations if you want your sprite to change appearance according + to how it's moving.\r\n" + CSD U3 game backgrounds_markdown_instruction: "# Create your Backgrounds\r\n\r\nNext, + you'll create all of the background functions that you need for your game. Some + games only have one background, and others have more than one that's chosen + according to user score or another aspect of gameplay. You'll need to create + a function for each separate background in your game. You'll write the code + to choose the correct background in the next level.\r\n\r\n* [Show me the + block to create a new function](#triggercallout=callout1)\r\n* [Show me the + area in the code to put my function](#triggercallout=callout2)\r\n\r\nAfter + you create your functions, test them by calling them inside the draw loop, + one background per test.\r\n\r\n* [show me the block to call my function](#triggercallout=callout3)" + CSD U3 game choose background_markdown_instruction: "# Choose your Backgrounds\r\n\r\nNow + that you have the backgrounds that you need, you'll write the code to choose + the correct background. You've seen this done in [Stage 15 Level 11](/s/csd3/stage/15/puzzle/11).\r\n\r\nAfter + you've written the code, test it by changing the starting value of your variables + and making sure the correct background shows up.\r\n" + CSD U3 game create sprites_markdown_instruction: "# Create your Sprites\r\n\r\nNext + you will create your sprites and give them starting properties in the \"Create + Sprites\" area of your code. For each sprite your should:\r\n\r\n* Create + the sprite in the correct place on the screen\r\n* Set its animation (or color + and size)\r\n* Set its velocity and rotation speed, if needed\r\n* Set its + collider and bounciness, if needed\r\n\r\nAfter you create each sprite, test + it before making the next one. If your sprite starts off screen, first place + it on the screen to test it, them move it back off screen once you know that + it looks right.\r\n\r\nIf your sprites position will need to be reset later + in your game, it's a good idea to make a function that sets the position + of this sprite that you can use again later.\r\n" + CSD U3 game display boards_markdown_instruction: "# Display Boards\r\n\r\nNow + that your backgrounds are working, you can add your display boards. Most + games have a score board, but you might also want to display information about + player level or lives remaining. Look at [Stage 12 Puzzle 9](/s/csd3/stage/12/puzzle/9) + for an example of how to make a scoreboard.\r\n\r\nFor each display board:\r\n* + Create a function to display the information\r\n* Call the function in the + draw loop\r\n\r\nBe sure to test your boards by changing the starting value + of your variables and making sure the board also changes when you run the + code.\r\n" + CSD U3 game interactions_markdown_instruction: "# Sprite Interactions\r\n\r\nThe + last step is to create the functions that make your sprites interact in the + right ways. You'll need a function for each type of sprite interaction. + You can use the `collectItems` in [Stage 17 Puzzle 17](/s/csd3/stage/17/puzzle/17) + and `displaceEnemies` in [Stage 16 Puzzle 15](/s/csd3/stage/16/puzzle/15) + as examples.\r\n\r\nFor each interaction:\r\n* Create a function in the functions + area of your code\r\n* Call the function inside the draw loop\r\n\r\nAfter + you make each function, run the code to test it before making another.\r\n" + CSD U3 game sprite movement_markdown_instruction: "# Sprite Movement Functions\r\n\r\nNow + you'll make the functions that make the sprite move in different ways as + the game is played. Some examples of functions that you've written are `loopPlatforms` + in [Stage 17 Puzzle 9](/s/csd3/stage/17/puzzle/9) and `playerFall` in [Stage + 17 Puzzle 14](/s/csd3/stage/17/puzzle/14).\r\n\r\nFor each movement:\r\n* + Create a function that will make the sprite move in that way\r\n* Call the + function inside the draw loop\r\n" + CSD U3 game user controls_markdown_instruction: "# User Controls\r\n\r\nNext, + you'll want to make sure your user controls are working. Create a function + that makes your sprites respond to user controls as defined in your project + guide. You can use the function in in [Stage 16 Puzzle 13](/s/csd3/stage/16/puzzle/13) + as an example.\r\n" + CSD U3 game variables_markdown_instruction: "# Create your Variables\r\n\r\nFirst, + you'll need to create all of your variables and put them in the variables + area of your code.\r\n* [Show me the block](#triggercallout=callout1)\r\n* + [Show me the area in the code](#triggercallout=callout2)\r\n\r\nDon't forget, + each variable needs a label (name) and a starting value. You can change the + value of the variable later in your code." + CSD U3 platform background1_markdown_instruction: "# Background\r\n\r\nThe + first thing that you will create for your game is the background. The sample + game had two different backgrounds that were chosen according to the user's + score. The first background has already been created for you. Look at the + `background1` function in the code below to see how it works. [Show me where](#triggercallout=code_triggered1)\r\n\r\nIn + order for the background function to do something, you have to call it inside + the draw loop. [Show me where](#triggercallout=code_triggered2)\r\n\r\nThere + is also an empty function named `background2`. [Show me where](#triggercallout=code_triggered3) You + will need to fill that function with new code to make a different background, + then test the code by calling the function inside the draw loop.\r\n\r\n# + Do this\r\n\r\n* Read the code for `background1`\r\n* Fill the `background2` + function with new code for a second background.\r\n* Test your `background2` + function by calling it inside the draw loop.\r\n\r\n_Hint: It's much easier + to copy, paste, and make small changes to your code in text mode._" + CSD U3 platform background2_markdown_instruction: "# Choosing your Background\r\n\r\nNow + that you have your score variable, you can use it to choose the right background + for your game. You can see an example of changing your background according + to your score in [Stage 15 Level 11](/s/csd3/stage/15/puzzle/11)\r\n\r\n# + Do This\r\n\r\n\r\n* Inside the draw loop, use an `if` statement and your + two background functions to draw your background according to your score level.\r\n* + Test your code by changing the start score to 100, then running to code to + see whether the background changes.\r\n\r\n_Challenge: If you have a third + background, you can click the plus sign at the bottom of the `if` block. Another + space will appear for your third background function, as well as a place to + check the score again._\r\n" + CSD U3 platform challenge_markdown_instruction: "# Improve Your Game\r\n\r\nImprove + your game by adding in two or more of the features you saw in the last two + examples. You can use the list below to help you.\r\n\r\n* Choose new animations + for your player, platform, and items.\r\n* Prevent your player from going + off the side of the screen.\r\n* Add a different type of item for the player + to collect or avoid.\r\n* Add a variable that keeps track of how many lives + the player has, and end the game if the player runs out.\r\n* Make your player's + animation change direction when the player changes direction.\r\n* Change + the player to only jump when it is on a platform.\r\n* Add another background + and make it appear when the score gets even higher.\r\n* Make your items interact + with the platforms in some way." + CSD U3 platform challenge1_markdown_instruction: "# Collect Items\r\n\r\nLast, + you'll want your player to collect the items falling from the top of the + screen.\r\n\r\n# Do This\r\n\r\n* Create a `collectItems` function and add + it to the \"functions\" area of your code.\r\n* Use the `if` and `isTouching` + blocks to change the x and y position of the items when the player touches + them. You can look at the `loopItem` function for clues in how to reset the + item position.\r\n* Inside your `if` statement, add a counter pattern that + will increase the score every time the player touches an item. Look at [Stage + 12 Puzzle 8](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) + for an example.\r\n* Call the function inside the draw loop, in the \"update + sprites\" area of your code.\r\n* Run the code to test your function." + CSD U3 platform draw loop_markdown_instruction: "# Draw Loop\r\n\r\nOnce you + have functions that can draw what you want, you can put them inside a draw + loop.\r\n\r\n# Do This\r\n\r\n* Add the `function draw() {}` (draw loop) block + into the workspace.\r\n* Inside the draw loop, use an `if` block to choose + the correct background function to use [Remind me how](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/13/puzzle/10)\r\n* + After the if statement, use the function you wrote to display the current + information\r\n* Test your code by changing the starting value of your variables + and running it to see whether the correct information and background are drawn." + CSD U3 platform items_markdown_instruction: "# Create your Items\r\n\r\nNext, + you need to add in the items that fall from the top of the screen. In [Stage + 11 Puzzle 6](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/6), + you modeled falling using the counter pattern on `velocityY`. You can use + the same pattern to make your items fall from the sky. In our sample game, + our carrots rotated and bounced off the platforms, but you can choose to add + any other type of interaction that you like in the next level.\r\n\r\n# Do + This\r\n\r\n* Create an item sprite with the label and starting position that + you put on your worksheet.\r\n* Give the sprite the starting properties you + wrote on your worksheet.\r\n* Run the code to test your sprite.\r\n* Create + a function that checks whether the sprite is off the bottom of the screen, + and loops it back to the top of the screen if it is. (Look at [Stage 11 Bubble + 16](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/11/puzzle/16) + to see an example of code that loops a sprite.)\r\n* Run the code to test + your sprite." + CSD U3 platform items1_markdown_instruction: "# Create an Item\r\n\r\n<img + src=\"https://images.code.org/2cdb64a2e23e68c8a86296240642cd13-image-1476211650103.gif\" + style=\"float:right;\">\r\n\r\nNext, you need to add the items that fall from + the top of the screen. These move just like the platforms, but faster. In + order to make the game more interesting, the items start at a random location + above the screen. For the sample game, the item's x position is a random + number between 50 and 350, and the y position is a random number between -30 + and -60.\r\n\r\n# Do This\r\n\r\n* Use the `createSprite` block to make an + item sprite in the \"create sprites\" section of your code.\r\n* Use the `randomNumber` + block inside your `createSprite` block to start the item at a random x and + y position.\r\n* Use `setAnimation` and `velocityY` to give your sprite the + correct image and make it fall from the top of the screen.\r\n* Run the code + to test your sprite." + CSD U3 platform items2_markdown_instruction: "# Loop your Item\r\n\r\n<img + src=\"https://images.code.org/bf06ad06acbba65dfd48b63608a08c90-image-1476212006882.gif\" + style=\"float:right\">\r\nNow that your item is falling, you can add code + to loop it back to the top. This is similar to what you did for the platform + sprite, but the item sprite will loop back to a random x and y location when + it goes to the top of the screen.\r\n\r\n# Do This\r\n\r\n* Create a `loopItems` + function that uses an `if` block to check whether the item sprite is off the + bottom of the screen, then sends the item back to a random x and y position, + just as it did when you first created the sprite.\r\n* Call the function inside + the draw loop\r\n* Run the code to test your sprite." + CSD U3 platform items3_markdown_instruction: "# Make your Second Item\r\n\r\n<img + src=\"https://images.code.org/dfd53f2ea4b4380c126dde8035bcdc45-image-1476212495388.gif\" + style=\"float: right\">\r\n\r\nNext, you'll copy and paste the code for your + first item to create a second item. Remember that this is a lot easier in + **text mode**, so be sure to try it out if you haven't already.\r\n\r\nYou'll + need to copy two parts of your code: the part at the beginning where you made + the item, and the part in your `loopItem` function, where you looped the item + back to the top of the screen.\r\n\r\n# Do This\r\n\r\n* Copy the code you + used to create the first item sprite (`createSprite`, `setAnimation`, and + `velocityY`), and paste it directly beneath the original code.\r\n* Change + the names of the sprite in the new lines. For example, if you named your + original sprite \"star\", you could name this one \"star2\".\r\n* Inside your + `loopItems` function, copy the if statement, then paste it directly underneath + the original code, inside the function.\r\n* Change the sprite name in the + new lines of code.\r\n* Run your code to test it.\r\n" + CSD U3 platform platform1_markdown_instruction: "# Create a Platform Sprite\r\n\r\n<img + src=\"https://images.code.org/6e5aa80eb72809d761a695fae1b42b81-image-1476210749306.gif\" + style=\"float: right;\"> \r\n\r\nNow that you have your background and your + variables, it's time to create your sprites. Usually, it will be easiest + to start with the sprites that are part of the environment, such as your platforms. The + sample game had two platform sprites, but you'll make just one first, then + test it before copying and pasting the code to make the second.\r\n\r\n# Do + This\r\n\r\n* Look at your worksheet and choose a platform sprite to create.\r\n* + In the \"Create sprites\" area at the top of your code, create your new sprite + with the `createSprite` block, giving it the correct position and label (name). + ([Show me the block](#triggercallout=callout))\r\n* Use the `setAnimation` + and `velocityY` blocks to give your sprite the correct image and downward + velocity.\r\n* Test the sprite to make sure that it's moving in the correct + way. You might need to adjust its velocity.\r\n\r\n_Hint: The sprite will + go off the screen and not come back. You'll make it loop back around in + the next level._\r\n" + CSD U3 platform platform2_markdown_instruction: "# Loop the Platform Sprite\r\n\r\n<img + src=\"https://images.code.org/6bfe6dd078b2022315a7f54a38c90826-image-1476211068588.gif\" + style=\"float: right;\">\r\n\r\nRight now, your platform sprite moves down, + but it doesn't loop back up to the top of the screen. You can look at [Stage + 11 Bubble 12](/s/csd3/stage/11/puzzle/12) to see an example of a sprite looping + around a screen.\r\n\r\n# Do This\r\n\r\n* Use the `function` block to create + a `loopPlatforms` function at the bottom of your code.\r\n* Use the `if` block + inside the function to check whether the platform has gone off the bottom + of screen and, if it has, move it back to the top of the screen.\r\n* Call + the function inside the draw loop, in the \"update sprites\" area.\r\n* Run + the code to test your sprite.\r\n\r\n_Hint: What will platform.y be when the + sprite moves off the bottom of the screen? What should platform.y be when + you put it back at the top of the screen?_\r\n" + CSD U3 platform platform3_markdown_instruction: "# Make your Second Platform\r\n\r\n<img + src=\"https://images.code.org/94abf92949a82f6ba18a8cfafb9231b1-image-1476211447371.gif\" + style=\"float:right;\">\r\n\r\nMaking a second platform will be easier than + making the first, because you can copy and paste a lot of the code, then make + a few small changes. This is a lot easier in *text mode*, so be sure to try + it out if you haven't already.\r\n\r\nYou'll need to copy two parts of your + code: the part at the beginning where you made the platform, and the part + in your `loopPlatforms` function, where you looped the platform back to the + top of the screen.\r\n\r\n# Do This\r\n\r\n* Copy the code you used to create + the first platform sprite (`createSprite`, `setAnimation`, and `velocityY`), + and paste it directly beneath the original code.\r\n* Change the names of + the sprite in the new lines. For example, if you named your original sprite + \"platform\", you could name this one \"platform2\".\r\n* Change the starting + position of your new platform sprite.\r\n* Inside your `loopPlatforms` function, + copy the if statement, then paste it directly underneath the original code, + inside the function.\r\n* Change the sprite name in the new lines of code.\r\n* + Run your code to test it.\r\n\r\n_Challenge: You can make your platforms appear + at random x positions when they loop back to the top of the screen._\r\n" + CSD U3 platform player1_markdown_instruction: "# Create your Player\r\n\r\n<img + src=\"https://images.code.org/8358b8d2eef2461e113e0b3093da7403-image-1476212944204.gif\" + style=\"float:right\">\r\n\r\nNow you can create your player sprite. Just + like the item sprites, the player sprite will fall from the top of the screen. Unlike + the items, your player sprite will get faster as it falls, just like real + falling objects. This is what allows it to jump up, and fall back down.\r\n\r\n# + Do This\r\n\r\n* Use the `createSprite` block to make a player sprite with + the label and starting position that you put on your worksheet.\r\n* Use `setAnimation` + to give it the correct image.\r\n* Create a `playerFall` function that makes + the sprite fall from the top of the screen. The code inside the function + should use `velocityY` in a counter pattern, just as when you made the falling + rock in [Stage 13 Puzzle 4](/s/csd3/stage/13/puzzle/4).\r\n* Call the `playerFall` + function inside the draw loop.\r\n* Run the code to test your sprite." + CSD U3 platform player2_markdown_instruction: "# User Controls\r\n\r\nNext, + you should add user controls so that you can move your player around. Your + player needs to move to the left when the left arrow key is pressed, to the + right when the right arrow key is pressed, and jump when the space bar is + pressed.\r\n\r\n# Do This\r\n\r\n* Create a new `controlPlayer` function in + the \"functions\" area of your code.\r\n* Inside the `controlPlayer` function, + use the `if`, `keyDown`, and `sprite.x` blocks to make your player move to + the left and right according to the arrow keys. Look at <a href=\"/s/csd3/stage/8/puzzle/15\" + target=\"_blank\"> Stage 8 Puzzle 15 </a> for examples.\r\n* Inside the `controlPlayer` + function, use the `if`, `keyDown`, and `velocityY` blocks to make your player + jump when the up arrow is pressed. Look at <a href=\"/s/csd3/stage/11/puzzle/10\" + target=\"_blank\"> Stage 11 Puzzle 10 </a> for an example.\r\n* Call the `controlPlayer` + function inside the draw loop.\r\n* Run the game and test your code.\r\n" + CSD U3 platform player2b_markdown_instruction: "# Add Reset\r\n\r\nNow that + your player is falling, you can add code to reset him when he gets to the + top.\r\n\r\n# Do This\r\n\r\n* Create a function that checks whether the player + sprite is off the bottom of the screen, and decreases the number of lives + by one if it is.\r\n* Use the function inside the draw loop.\r\n* Run the + code to test your function.\r\n* Once you have decreased the lives, you need + to check whether the player has run out. Add code to your function that checks + to see whether the player's lives equals 0. If they do equal zero, use the + `text` block to write \"GAME OVER\" in the middle of the screen. Otherwise, + reset the sprite to the top of the screen.\r\n" + CSD U3 platform player3_markdown_instruction: "# Player Interactions\r\n\r\nThe + last part of making your game is programming the player interactions with + the other sprites. First, your player needs to land on the platforms.\r\n\r\n# + Do This\r\n\r\n* Create a `playerLands` function and add it to the \"functions\" + area of your code.\r\n* Inside the function, use the `collide` block so that + your player can land on both the platforms.\r\n* Call the function inside + the draw loop.\r\n* Run the code to test your function.\r\n" + CSD U3 platform player4_markdown_instruction: "# Collect Items\r\n\r\nLast, + you'll want your player to collect the items falling from the top of the + screen.\r\n\r\n# Do This\r\n\r\n* Create a `collectItems` function and add + it to the \"functions\" area of your code.\r\n* Use the `if` and `isTouching` + blocks to change the x and y position of the items when the player touches + them. You can look at the `loopItem` function for clues in how to reset the + item position.\r\n* Inside your `if` statement, add a counter pattern that + will increase the score every time the player touches an item. Look at [Stage + 12 Puzzle 9](/s/csd3/stage/12/puzzle/9) for an example.\r\n* Call the function + inside the draw loop, in the \"update sprites\" area of your code.\r\n* Run + the code to test your function." + CSD U3 platform sample_markdown_instruction: "# Platform Jumper\r\n\r\nThe + game on the left is an example of a platform jumper. Press \"Run\" to play + it. You can make the bunny bump with the space bar, and move it to the left + and right with the arrow keys. You score by collecting carrots, and if you + score high enough, the background will change.\r\n\r\nYou have three lives, + so if you fall to the bottom of the screen three times, the game will be over.\r\n\r\nYou + already know how to use all the blocks you need to make a game just like this + one, and you'll be making your own platform jumper in this lesson." + CSD U3 platform sample1_markdown_instruction: "# Platform Jumper\r\n\r\nThe + game on the left is an example of a platform jumper. Press \"Run\" to play + it. You can make the alien jump with the up arrow, and move it to the left + and right with the arrow keys. You score by collecting stars, and if you + score high enough, the background will change.\r\n\r\nYou already know how + to use all the blocks you need to make a game just like this one, and you'll + be making your own platform jumper in this lesson.\r\n\r\nYou can see other + examples of platform jumpers in the next two levels." + CSD U3 platform sample2_markdown_instruction: "# Plane Jumper\r\n\r\nHere's + another example of a platform jumper, but it has a few more features. You + can use it to get ideas to improve your own game. For example, there is a + coin sprite that gives the player an extra life.\r\n\r\nChoose one or more + of the following changes and add them to your game.\r\n* Choose new animations + for your player, platform, and items.\r\n* Make it impossible for your player + to go off the left or right of the screen.\r\n* Add a different type of item + for the player to collect or avoid.\r\n* Add a variable that keeps track of + how many lives the player has, and end the game if the player runs out.\r\n\r\n" + CSD U3 platform sample3_markdown_instruction: "# Bunny Jumper\r\n\r\nHere's + another example of a jumper. In this one, the items get faster when they + fall, and bounce off the platforms.\r\n\r\nChoose one or more of the following + changes and add them to your game.\r\n* Make your player's animation change + direction when the player changes direction.\r\n* Add another background and + make it appear when the score gets even higher.\r\n* Make your items interact + with the platforms in some way.\r\n\r\n" + CSD U3 platform scoreboard_markdown_instruction: "# Make the Scoreboard\r\n\r\n<img + src=\"https://images.code.org/ea490a1915a70676fd3a783adce93cdd-image-1476142534609.png\" + style=\"float:right;\">\r\n\r\nYou'll also need a scoreboard so the player + can keep track of the score. There's already a `showScore` function written, + but it only shows the text \"Score\" and not the actual score. ([Show me where](#triggercallout=code_triggered)) You + can see an example of a working scoreboard in [Stage 12 Puzzle 9](/s/csd3/stage/12/puzzle/9).\r\n\r\n# + Do this\r\n\r\n* Read the code in the `showScore` function.\r\n* Call the + function inside the draw loop, right after you draw the backgrounds.\r\n* + Use the `text` block to display the score at the top of the screen." + CSD U3 platform variable1_markdown_instruction: "# Score Variable\r\n\r\nNow + that you've created your backgrounds, you'll need to choose when each background + is drawn. For that, you'll need a score variable to hold information about + your player's score.\r\n\r\nYou should always give your variables a starting + value at the very beginning of the program. That way, they are available + for any code that comes after.\r\n\r\n# Do This\r\n\r\n* Create a score variable + at the beginning of your game program. [Show me the block](#triggercallout=callout)\r\n* + Set the score equal to 0." + CSD U3 platform variables_markdown_instruction: "# Variables and Display\r\n\r\nIn + our sample game, we kept track of the score and the number of lives left, + then displayed them at the top of the screen. For your game, you'll need + to create a variable for each piece of information you want to keep track + of during the game. Once you have your variables, you can create a function + to display information at the top of the screen for the player.\r\n\r\n# Do + This\r\n\r\n* Create the variables that you listed on your planning sheet + and give them starting values.\r\n* Use the `text` block to display information + about the variables on the screen. You can use `textSize` and `fill` to change + the way the text looks.\r\n* Make a new function and put the code that displays + the information inside of it.\r\n\r\n_Hint: You can look at [Stage 12 Bubble + 8](https://levelbuilder-studio.code.org/s/CSDU3-Draft/stage/12/puzzle/8) to + see a working scoreboard. Scroll down in the code until you see the comment + \"draw score\"_" + CSD U4 - Design Mode Input Widgets_markdown_instruction: "# Input Elements\r\n\r\n<img + src=\"https://images.code.org/108fcc6fc89bf88edde00353afb33d75-image-1469814642375.49.23.png\" + style=\"float: right; width: 150px\"/>\r\nButtons are a great way to navigate + around your app, and text labels are the primary way to display content in + your app. When it comes to taking input from your users, sometimes you need + a place for them to type or boxes to check. The **Text Input**, **Dropdown**, + **Radio Button**, and **Checkbox** elements all provide ways for your users + to input information to your app.\r\n\r\n# Do This\r\n\r\nChoose at least + two of the input elements, and for each one:\r\n\r\n* Drag it out and position + it on the screen\r\n* Change the id to something meaningful\r\n* Read through + the properties and experiment with them\r\n* Add a label element next to each + that describes what they do (don't forget to give it an id too!)\r\n\r\n" + CSD U4 - Design Mode Project_markdown_instruction: "# Mocking Up Your App\r\n\r\nNow + that you have some practice laying out elements in App Lab you can start working + on mocking your own app. With your group divvy up the screens so that everyone + is working on a different screen. Because you'll be dividing the work up + you'll want to do some planning ahead of time to deicde on a common look + and feel for your pages. For example, you'll want to agree on things such + as:\r\n\r\n* Where do navigation buttons go?\r\n* What colors will you use + for backgrounds, text, and buttons\r\n* What's the general style and layout?\r\n\r\n# + Do This\r\n\r\n* Decide on a _namespace_ for your page, this will be something + you add to the beginning of every id so that your element ids don't conflict + with others when you merge everyone's screens together\r\n\t* For example, + if you are making the home page, you might use \"home_\" as your namespace + - leading to ids such as:\r\n \t* \"home_title\"\r\n * \"home_loginButton\"\r\n * + \"home_logo\"\r\n* Use the built-in elements to lay out your app screen\r\n* + For any components of your app that can't be recreated with the built in + elements you can either:\r\n\t* Redesign to utilize built in elements\r\n * + Find an image to use in place of your element\r\n * Draw the element using + your preferred image editor\r\n* Share your design regularly with your teammates + to ensure consistent style" + CSD U4 - Design Mode Text_markdown_instruction: "# Adding Text\r\n<img src=\"https://images.code.org/86ba633e04f90f3ca47dff3dcd064847-image-1469812708683.15.36.png\" + style=\"float: right; width: 75px\"/>\r\nThe label element lets you add any + text you'd like to your app. Just drag out a label block and set its \"text\" + property. \r\n\r\n# Do This\r\nUse a label element to create a title for this + app.\r\n\r\n* Drag out a label and place it on the top of the screen\r\n* + Change the id to \"titleLabel\"\r\n* Change the text to \"My App\"\r\n* Increase + the font size\r\n* Choose a color you like for the title\r\n\r\n" + CSD U5 black white images pixelation_markdown_instruction: "# Do This\r\n\r\nUse + the pixelation widget to draw something a smiley face" + CSD U5 collection UPS_markdown_instruction: "<img src=\"https://images.code.org/db7d21a8d28df27dee3449939038c7a9-image-1488501564775.jpg\" + style=\"float:right;height:250px\">\r\n### Plan a Route\r\n\r\nRoutz is a + company that helps people navigate traffic. It has maps of locations all around + the world and knows real-time information about traffic conditions. When you + type in a destination you want to go, it will give you the best route it can + find.\r\n\r\nRoutz wants to improve its data to provide even better directions. + Your job is to help the company decide what data it could collect to improve + those directions.\r\n\r\n**What data should Routz collect to improve its recommendations + AND where could it get that data?**\r\n\r\n" + CSD U5 collection videos_markdown_instruction: "<img src=\"https://images.code.org/dbefd53cc9aaa2ee1c54f25afc88d860-image-1488492606296.jpg\" + style=\"float:right;height:300px\">\r\n\r\n### Make a Recommendation\r\n\r\nMeScreen + is a website where users can watch videos uploaded from all over the world. + It has millions of videos and users and new ones every day.\r\n\r\nMeScreen + recommends a Top Video to each of its users every day. You job is to collect + information about your users and your videos to make the best recommendation + you can.\r\n\r\n**What kinds of information should you collect AND how could + you get it?**" + CSD U5 color image_markdown_instruction: "# Paint by Numbers\r\n\r\nLook at + the binary code below. Use the patterns of ones and zeros to create the picture + the code represents. To paint each square, click on the color you want to + use, then click on the square.\r\n\r\n\r\n`011 011 011 011 011 011 011 011 + 110 110`\r\n\r\n`011 011 111 111 111 011 011 011 110 110`\r\n\r\n`011 111 + 111 111 111 111 011 011 011 011`\r\n\r\n`011 011 111 111 111 011 011 011 011 + 011`\r\n\r\n`011 011 011 011 011 011 011 010 011 011`\r\n\r\n`011 011 011 + 011 011 011 010 010 010 011`\r\n\r\n`011 011 011 011 011 011 010 010 010 011`\r\n\r\n`011 + 011 011 011 011 011 011 000 011 011`\r\n\r\n`001 001 001 010 010 010 010 000 + 010 010`\r\n\r\n`001 001 001 001 010 010 010 010 010 010`" + 'CSD: Boolean Expressions_markdown_instruction': "# Boolean Expressions Video" + 'CSD: Cake Defender Exemplar_markdown_instruction': "# Defend Your Cake!\r\n\r\nThis + is an example of a defender game that you'll build by the end of this lesson. + Move the alien with arrow keys to keep the ladybugs from getting to your cake. + How high of a score can you get?\r\n\r\n# Do This\r\n\r\nTurn to a classmate + and make a list of the following information.\r\n\r\n* How many sprites are + there in this game. Which are they?\r\n* What variables are needed to make + this game? What do they store?\r\n* If you were to split the code of this + game into functions what do you think they would be? What are the major pieces + of behavior you'd need to create in your code?" + 'CSD: Platform Jumper Exemplar_markdown_instruction': "# Platform Jumper\r\n\r\nThe + game on the left is an example of a platform jumper. Press \"Run\" to play + it. You can make the alien jump with the up arrow, and move it to the left + and right with the arrow keys. You score by collecting stars, and if you + score high enough, the background will change.\r\n\r\nYou already know how + to use all the blocks you need to make a game just like this one, and you'll + be making your own platform jumper in this lesson.\r\n\r\nYou can see other + examples of platform jumpers in the next two levels." + 'CSD: Slider Example_markdown_instruction': "# RGB Slider\r\n\r\nOver the next + couple levels you are going to learn about using sliders to get user input. + You will be creating this slider which controls the color of a button. You + will return to this project in later lessons to control lights!" + CSDU2 - 2nd Validator issue_markdown_instruction: "# Add head and title tags\r\n\r\nYou + should have ended up on this level because of one of the following errors:\r\n\r\n* + Element head is missing a required instance of child element title.\r\n* Element + title must not be empty.\r\n\r\nBoth of these error messages point out that + **every web page needs a title**. The title is more than just putting a header + on your page. A computer won't be able to easily go through the content of + your web page to find your header (it could be in lots of different types + of tags). So instead **every web page includes a title element marked by a + <title> tag.** This title does not show up anywhere on your page so + it is not part of the content of your page.\r\n\r\nSince the title is not + part of web page content it goes in a special area at the top. This area is + for all information about your web page that is not content. This information + is often called **metadata**. **Metadata goes in the head element marked + by a <head> tag.** The title element is a child element of the head + element so the title element goes inside the head element.\r\n\r\nExample:\r\n\r\n<pre>\r\n<head>\r\n <title> + My Awesome Website </title>\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* + Add a <head> element above the first content in your page\r\n* Add a + <title> element inside the <head> element. Makes sure to give + your page a descriptive title.\r\n* Once you have done this return to the + <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/3\">validator level</a>" + CSDU2 - About Me Page Styling_markdown_instruction: "# About Me Page\r\n\r\nThere + are many CSS properties and values that can be applied to HTML elements in + order to change their style. Use the checklist below to add style to the text, + image, and body elements. Remember to think about how your styling choices + will impact users view of the web page.\r\n\r\n# Do This\r\n\r\n* Add `<head>` + and `<body>` elements to your page\r\n* Add a `<title>` element to your page + inside the `<head>` element\r\n* Add a `<style>` element to your page\r\n* + Add styling of your choice to your About Me Page. Be sure to use at least + 5 different CSS properties.\r\n\r\n# Checklist\r\n\r\n* All content contained + in body element\r\n* All style contained in head element\r\n* At least 5 of + the following CSS Properties are used:\r\n\r\n| Color Properties | Text Properties + | Images Properties |\r\n| --------------- | --------------- |----------------- |\r\n| + `color` <br> `background-color` | `text-align` <br> `text-decoration` <br> + `font-family` <br> `font-size` | `height` <br> `width` <br> `border-width` + <br> `border-color` <br> `border-style` |\r\n\r\nIf you’ve used at least 5 + of the properties from the checklist, you can explore some additional text + and image CSS properties to add to your About Me page." + CSDU2 - About Me Page start_markdown_instruction: "# About Me Page\r\n\r\nYou + are going to make another page for your portfolio. This one will be your About + Me page. The project has been loaded with 6 different images. Two pictures + are associated with each question below.\r\n\r\n* Do you prefer chocolate + or vanilla ice cream?\r\n* Are you a dog or a cat person?\r\n* Do you prefer + watching a movie or reading a book?\r\n\r\nCreate a website that tells your + user more about you by answering the 3 questions and showing pictures for + each answer.\r\n\r\n# Checklist\r\n\r\n* At least three images\r\n* A large + header with the name of the page\r\n* Descriptions of your image choices for + each category inside a paragraph element\r\n* HTML document uses the correct + structure. (Doctype, html, head, and body)" + CSDU2 - Add doctype and html_markdown_instruction: "# Doctype and HTML tag\r\n\r\nWhen + a web browswer is trying to read your document it looks for alerts which tell + it which language you are using. In order to let the web browser know that + this is an html document you need to do two things:\r\n\r\n1. Add <!DOCTYPE + html> at the very top of your html file. <!DOCTYPE html> is always + the first thing in an html document because it notifies the computer that + this is an html document and to interpret it as such. <!DOCTYPE html> + is not technically a tag but instead an instruction to the web browser. \r\n\r\n2. + Wrap all the content of the file in an HTML element using the <html> + tag. The <html> tag notifies the computer where the html starts and + ends. The <html> tag is the container for all other HTML elements (except + for the <!DOCTYPE html> tag). So you need an opening and closing <html> + tag.\r\n\r\n# Do This\r\nThis is your Hobbies page from the last lesson.\r\n\r\n* + Add <!DOCTYPE html> at the top of your index.html file\r\n* Add <html> + right underneath <!DOCTYPE html> and add a closing </html> tag + at the end of index.html" + CSDU2 - Adding Personal Cause_markdown_instruction: "# Personal Cause\r\n\r\n**Circulate:** + As students are working on their research and website, check to make sure + that thay are using appropriately licensed media and proving accurate attribution. + Spot check by asking for the license details of specific images.\r\n\r\n\r\n# + Do This\r\n\r\n* Finish your personal website" + CSDU2 - Classes on ESS_markdown_instruction: "# Classes in External Style Sheets\r\nYou + may have also noticed these issues appearing.\r\n\r\n\t1.\tThe styling of + the `<img>` elements on one page should be different than the other\r\n\t2.\tFor + the `<h1>` headers, on one page we want to style them and on the other we + don't.\r\n\r\nLuckily you know classes and we can fix these with classes!\r\n\r\n# + Do This\r\n\r\n* Put the image on the home page in the \"home-image\" class\r\n* + Find the old style rule for images on the home page (width: 600px) and change + the selector so it will style the \"home-image\" class instead\r\n* Put all + the images on the technology page in the \"tech-images\" class\r\n* Find the + old style rule for images on the technology page (width: 100px) and change + the selector so it will style the \"tech-images\" class instead\r\n* Find + the h1 element on the technology page and put it in the class \"page-header\"\r\n* + Change the secltor for the style rule for h1 elements to be just a style rule + for the page-header class" + CSDU2 - Classes_markdown_instruction: "# Classes\r\n\r\nSometimes you only + want to style one specific element of a certain type instead of all elements + of one type. **Classes are HTML attributes that can be added to any HTML element + to group it with other elements. Classes allow for the group of elements to + have their own unique style.** This applies to elements on the same page or + on separate pages.\r\n\r\nTo style using classes:\r\n\r\n1. First you need + to mark the elements in html that will be in that class. \r\n2. Second you + need to write a style rule for that class. To write a rule for a class of + elements, the selector for the rule is a `.` before the class name. \r\n\r\nFor + example the code below would style the fancy class which has been set up for + a paragraph element:\r\n\r\n| HTML file | CSS File | Result |\r\n| --------- + | -------- | ------ |\r\n| <pre> <p class=\"fancy\">Good Day</p></pre> + |<pre>.fancy {<br> color: darkblue;<br> font-family: cursive;<br>} </pre>|<img + src=\"https://images.code.org/05110876c62dafe72a7d0ddf34f7ae07-image-1475009963479.58.30 + PM.png\" alt=\"result image\"> | \r\n\r\n# Do This\r\n\r\nThere are lots of + different `<h5>` elements on the page. We want to style them differently depending + on what season they are associated with.\r\n\r\n* For each season put all + the `<h5>` elements for that season in a class specific to that season. For + example all the winter `<h5>` elements would be in the class \"winter\".\r\n* + Style each class of `<h5>` elements with a different `color`" + CSDU2 - Copy Code_markdown_instruction: "# Adding HTML and CSS\r\n\r\nNow that + you have the files set up bring over your code for your Guinness Book of World + Records page.\r\n\r\n## Copy Code\r\n* Go to <a href=\"https://studio.code.org/s/csd2/stage/7/puzzle/8\" + target=\"_blank\">this level</a> and copy all the code from the HTML file. + Paste the code into the HTML file you just created.\r\n* Copy the CSS code + from the style sheet at <a href=\"https://studio.code.org/s/csd2/stage/7/puzzle/8\" + target=\"_blank\">this level</a> and copy it into the CSS file you just created." + CSDU2 - Debug images_markdown_instruction: "# Debug\r\n\r\n\r\n\r\n# Do This\r\n* + Look through at the src attribute and determine the cause. \r\n* Your goal + is to have an HTML page that displays 5 images. \r\n* Notice that the “alt” + attribute serves as a placeholder in case the image doesn’t load\r\n* It’s + also helpful to know what the picture should be about in case there’s a problem + with the file path" + CSDU2 - Debugging 1_markdown_instruction: "# Debugging\r\n\r\nComputer code + is written by humans and humans make mistakes. All computer scientists make + mistakes. So part of being a good computer scientists is about being able + to find your mistakes and fix them. In computer science we call mistakes **bugs**. + Bugs can be anything in code which causes it not to work as planned. The process + of finding and fixing those bugs is called **debugging**. Debugging is a + problem solving process so use your problem solving steps as you try to debug. + Over the next couple levels you are going to work on your debugging skills.\r\n\r\n<img + src=\"https://images.code.org/ed7cb1f2e093b9c36b82bfbf9bbcd76b-image-1474383288840.54.26 + AM.png\" style=\"float:right;border:black solid 5px;width:200px\">\r\n\r\nThe + desired web page is on the right. There are two issues with the starter web + page:\r\n\r\n1. The header won't show up as an h1 header.\r\n2. The list + doesn't seem to be formatting correctly.\r\n\r\n# Do This\r\n\r\n* Find and + fix all bugs in the starting HTML\r\n* Check that the final result matches + the image on the right." + CSDU2 - Debugging 2_markdown_instruction: "# Debugging\r\n<img src=\"https://images.code.org/61190513dba270c731251df168b98f80-image-1474383960371.02.38 + AM.png\" style=\"float:right;border:5px black solid;width:250px\">\r\n\r\nMore + debugging practice! This page is a little more challenging to debug than + the last one.\r\n\r\n# Do This\r\n\r\nFix the HTML so that the web page makes + the example on the right.\r\n\r\n* Find and fix all bugs in the starting HTML\r\n* + You will know you have found all the bugs when your page matches the one on + the right." + CSDU2 - Debugging 3_markdown_instruction: "# Debugging\r\n\r\nThis page has + images in it. Images make finding bugs a little more tricky. Can you debug + this page?\r\n\r\nAs you are debugging you may notice a new set of symbols + that look something like this:\r\n<pre>\r\n<!-- this is a comment -->\r\n</pre>\r\n\r\nThis + is a **comment**. Comments are written by computer scientists creating web + pages for themselves and other humans who might look at their HTML file. Comments + explain the different parts of the code and what it should create. Comments + might be able to help you debug.\r\n\r\n# Do This\r\n\r\n* Find and fix all + bugs in the starting HTML\r\n* You know you’ve found all of the bugs when + your page matches the <a href=\"https://thimbleprojects.org/danimcavoy/103295/\" + target=\"_blank\"> Target Page</a>." + CSDU2 - Debugging 4_markdown_instruction: "# Debugging\r\n\r\nSometimes bugs + in code aren't obvious in how the page displays. Remember that you want your + web page to display on any browswer so even though it displays nicely in one + place may not mean that it works everywhere. \r\n\r\n# Do This\r\n\r\n* Find + and fix all bugs in the starting HTML\r\n* You know you’ve found all of the + bugs when your page match’s the <a href=\"https://thimbleprojects.org/danimcavoy/103456\" + target=\"_blank\"> Target Page</a>" + CSDU2 - Developing Brand Style_markdown_instruction: "# Developing Brand Style\r\n\r\nAlright + now its time to start writing the style rules for your brand!\r\n\r\nYou will + notice that all the different basic elements you could have used on your web + pages are included on this page and you are given a style rule for each to + start with.\r\n\r\nIn addition there is a style rule for two classes: header + and content. You will be setting up these classes on all the pages of your + website using divs. The header class contains the title of the website as + well as the navigation to get around it. The content class contains everything + else.\r\n\r\n# Do This\r\n\r\n* Look up your colors RGB values from your <a + href=\"https://studio.code.org/s/csd2/stage/10/puzzle/4\" target=\"_blank\"> + Color Choice Level </a> and copy the RGB values into the block comment to + make it easier to style your page\r\n* Create style rules for all the basic + elements of a web page that might be included on your website\r\n* Create + style rules for the header and content classes. Consider having background + colors and borders on these sections to make them stand out from the background." + CSDU2 - Div_markdown_instruction: "# Div Element\r\n\r\nHTML elements allow + you to group together content on your web page that is connected. However + sometimes you want to group together multiple HTML elements into one connected + chunk and give it a style. To connect a set of HTML elements inside one element + you can use the `<div>` element.\r\n\r\nFor your Personal Website you are + going to start out by using this to group together the header section you + want to go on every page of your website. This will include the title of your + website as well as any navigation. Once you do this you can put a background + color on the whole div to make it look like one connected block.\r\n\r\n<pre>\r\n<div>\r\n <h1> + Title of Website </h1>\r\n <a href=\"index.html\"> Home </a>\r\n <a + href=\"page1.html\"> Page 1 </a>\r\n <a href=\"page2.html\"> + Page 1 </a>\r\n <a href=\"page3.html\"> Page 1</a>\r\n</div>\r\n</pre>\r\n\r\n# + Do This\r\n\r\n* Put all the navigation hyperlinks and page title in `<div>` + element\r\n* Add a `background-color` for the `<div>` element" + CSDU2 - External Style Sheets_markdown_instruction: "# External Style Sheet\r\n\r\nNow + that you have your colors and fonts, you can begin to think more about the + style rules of your brand. This is a simple template page that contains the + features your website might contain. You will use this page to play around + with the style rules until you find the right set of style rules for your + brand. These style rules will be common across all the pages on your website. + They will promote your own personal brand. Since they will be common across + all the web pages it would be nice if they could all be written in one place + instead of duplicating them on every page.\r\n\r\nYou can get clearer separation + of content and style by putting content and style in separate files. The new + file for CSS will be called an **external style sheet**. Most of the time + the file name will be **style.css**. Since the file ends in .css the web browswer + already knows that this is CSS code so we no longer need the `<style>` element + around it. \r\n\r\n# Do This\r\n\r\n* Add a new CSS file called style.css\r\n* + Copy all the CSS from inside the `<style>` element from the .html file to + the .css file\r\n* Delete the `<style>` element from the .html file" + CSDU2 - Finalize Personal Website_markdown_instruction: "# Consistent Style\r\n\r\nYour + site’s pages might look crazy since you pulled together the style of all the + pages in the last level. It is time to work on that. It will be up to you + to determine the style rules for your page. Remember best practice is to + only have one rule per html element. If you want to keep two different styles + for certain elements remember you can use classes. In addition you should + have taken time to plan out your consistent style design for website.\r\n\r\n# + Do This\r\n\r\n* Work on creating a consistent style for your website using + the external style sheet and style rules.\r\n* Use classes to make parts of + your website stand out." + CSDU2 - Finish Recipe_markdown_instruction: "# Finishing Recipe Page\r\n\r\nNow + its time to finish off your Recipe Page.\r\n\r\n* Add any more information + to your recipe page you think would be helpful such as how long it takes to + make or what meal of the day you usually eat it.\r\n* Finalize your Recipe + Page. Use the checklist below to make sure your page is complete. Remember + you can always go back and look at the example page.\r\n\r\n## Checklist\r\n\r\n* + All text contained in an HTML tag (header, paragraph, or list)\r\n* Unordered + list of ingredients\r\n* Ordered list of directions\r\n* Paragraph description + of the dish\r\n* Headers for each section\r\n* Title header at the top of + the page" + CSDU2 - First Debug_markdown_instruction: "# Debug\r\n\r\nMistakes happen when + you are programming. The great thing is that these mistakes help your code + get better and you become a better developer as you learn how to find the + mistakes. Mistakes in code are called **bugs** and the process of fixing the + bugs is called **debugging**. \r\n\r\n# Do This\r\nThe creator of this website + is having trouble so trouble. Debug this page so that it matches the example + on the next level. Your teacher may also be displaying the website at the + front of the room.\r\n\r\nAs you work to debug look specifically at:\r\n\r\n* + header elements\r\n* list elements\r\n* list item elements" + CSDU2 - First-Weblab_markdown_instruction: "# Adding Content\r\n\r\nStart creating + your first web page! Try to create a page with a title and two paragraphs.\r\n\r\n# + Do This\r\n\r\n* Write a sentence about your favorite animal\r\n* On a separate + line write another sentence about your least favorite animal.\r\n* Above both + sentences try adding a title that says \"Animals\"\r\n* Don't forget to click + <img src=\"https://images.code.org/6a35d13b10ed2029a9323c9cb555e39e-image-1477681291001.01.12 + PM.png\" style=\"width:100px\">\r\n* **What do you notice about the structure + of your content?**" + CSDU2 - Footer_markdown_instruction: "# Recreating Page\r\n\r\nAt the beginning + of class you looked at a web page and figured out which elements were styled + similarly. Using those guesses and the classes in the starter code can you + recreate the original page?\r\n\r\n# Do This\r\n* Look at the class style + rules to see what they do. Don't worry if you don't know every property + yet. Just use the ones you do know.\r\n* Put elements in the appropriate classes + to recreate the <a href=\"https://studio.code.org/s/csd2/stage/9/puzzle/2\" + target=\"_blank\"> original page </a>" + CSDU2 - Header of Page_markdown_instruction: "# Header Area\r\n\r\nWebsites + usually have the same navigation bar across all of their pages so you can + get back and forth between things on the site. To do this you need to add + the navigation links to all the pages on your website.\r\n\r\n# Do This\r\n\r\n* + Copy the navigation links section onto all the web pages.\r\n* Copy any styles + you need into the style sheets for those pages." + CSDU2 - Headers_markdown_instruction: "<div style=\"float: right; height: 250px; + width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + are headers?**</summary>\r\nHeaders are the different sized section titles + throughout a web page. Headers add structure to your web page by breaking + it up so its easier for a user to read.\r\n</details>\r\n<details>\r\n<summary>**How + do I create a header?**</summary>\r\nYou can make something a header element + by surrounding it by header tags. For example:\r\n<pre> <h1> Header + Text </h1> </pre> <br> <br>\r\n\r\nNotice how there is a the opening + tag (<h1>) and closing tag (</h1>). The closing tag is the same + as the opening tag except it has `/` after the opening angle bracket. The + text you want to show as the header goes in the middle of the two tags.\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example: \r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is. HTML tags + add structure to the content of a web page.\r\n</details>\r\n<details>\r\n<summary>**Why + do you need an opening and closing tag?**</summary>\r\nYou need both an opening + and closing tag for many HTML elements because it marks where that structure + starts and stops. You don't want all the text on your web page to be a title.\r\n</details>\r\n</div>\r\n\r\n# + Headers\r\n\r\nYou may have noticed on the last level that everything you + type into the editor is getting smashed together. In order to differentiate + between these different parts we use HTML elements to mark the different parts + of a web page. In your investigation with the inspector did you come across + something that made headers?\r\n\r\n# Do This\r\n\r\n* Make your header \"Animals\" + stand out using the `<h1>` header element." + CSDU2 - Hobbies Valid Update_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is Doctype and how do I use it? **</summary>\r\n<!DOCTYPE html> is always + the first thing in an html document because it notifies the computer that + this is an html document and to interpret it as such. <!DOCTYPE html> + is not technically a tag but instead an instruction to the web browser. <br> + <br>\r\n\r\nAdd <!DOCTYPE html> at the very top of your html file. \r\n</details>\r\n\r\n<details>\r\n<summary>**What + is the <html> element and how do I use it? **</summary>\r\n\r\nThe <html> + tag notifies the computer where the html starts and ends. The <html> + tag is the container for all other HTML elements (The <!DOCTYPE html> + tag does NOT go inside the html element). You will need an opening and closing + <html> tag. This will also make your preview of your website update + automatically if there are no issues with your code! <br> <br>\r\n \r\nWrap + all the content of the file in an HTML element using the <html> tag.\r\n\r\n</details>\r\n<details>\r\n<summary>**Why + do I need to structure the HTML document this way?**</summary>\r\nAlthough + many modern web browsers can make good assumptions about what language you + are writing in and where to find different information in your document, you + don't want to leave the display of you web page up to chance. To guarantee + the best results for displaying your web page on all computers you need to + assist the computer in figuring out where to find information. <br> <br>\r\n\r\nAs + you go forward you are going to need two different sections in your HTML file. + They will serve different purposes.\r\n<br><br>\r\n1. Content of the page<br>\r\n2. + Information about the page<br>\r\n<br>\r\nBy breaking up a web page this way + it is clear where to find the code that is creating the physical output on + the web page and which code is just information for the computer about the + page.<br><br>\r\n\r\nIn creating web pages we differentiate between these + two areas using the <head> and <body> elements. The <head> + element contains all the information about the page. The <body> element + contains all the content for a web page.\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What + is a head element?**</summary>\r\nThe <head> element contains all the + information about the page. This is extra information that is helpful for + the computer in displaying your web page but is not the physical content of + the web page. \r\n\r\nThe <head> element usually comes above the body + element but inside the <html> element. For right now it will be blank + but later we will learn important things that are added to the head.\r\n</details>\r\n\r\n<details>\r\n<summary>**How + is the head element different than the header elements? **</summary>\r\nThe + header elements (<h1> to <h6>) are used to display headers directly + on your web page for your user to see. The head tag marks the information + that is not user facing in your HTML document. \r\n</details>\r\n\r\n<details>\r\n<summary>**What + is the body element? **</summary>\r\n\r\n The <body> element contains + all the content for a web page. The HTML elements for your headers, paragraphs, + and lists should all go inside the <body> element.\r\n\r\n</details>\r\n\r\n</div>\r\n\r\n# + Update Hobbies Page\r\n\r\n<!DOCTYPE html>, <html>, <head>, + and <body> are important to add to your web page. Practice adding them + to update your Hobbies page. In all future levels they will be included for + you so you won't need to add themselves." + CSDU2 - HobbiesPage_markdown_instruction: "# Hobbies Page\r\n\r\nIn this level, + you’ll use what you’ve learned to create your Hobbies page. Get creative with + your Hobbies Page but make sure it meets the basic requirements in the Checklist + first.\r\n\r\n# Checklist\r\n\r\n* 1 title with large header size\r\n* At + least 3 medium headers with each hobby name\r\n* At least 3 small headers + with the amount of time you’ve been doing each hobby\r\n* At least a 2 to + 3 sentence description of each hobby under the hobby’s time inside paragraph + tags" + CSDU2 - HobbiesPageExample_markdown_instruction: "# Example Hobbies Page\r\n\r\nTO + DO: Make this an embed level\r\n\r\nOn the next level you are going to work + on creating your own Hobbies Page. This is an example of the type of page + you are working to create. Come back to this level for reference as needed + while creating your page." + CSDU2 - Inspector Warm Up_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**<span> + How do I use the Inspector Tool? </span>**</summary>\r\nThe Inspector Tool + is a great way to figure out what unfamiliar code in Web Lab. To turn on the + Inspector Tool click the <img src=\"https://images.code.org/188579d7c6e7645d0d2edd203a33bd63-image-1480361561351.31.56 + PM.png\" style=\"width:100px\">. You will know that the Inspector Tool is + on because the button will turn white and say Inspector: On. Once you turn + on the Inspector Tool you can hover over any element in the preview area and + Web Lab will highlight the associated code.\r\n</details>\r\n\r\n</div>\r\n\r\n# + Language Detective\r\n\r\nUse the Inspector Tool to check out the code for + this website someone created on Web Lab! Focus on the index.html file open + for now.\r\n\r\nTry to answer the following questions:\r\n\r\n* In what ways + is this language similar to or different from the languages your groups invented + in the last lesson?\r\n* What are the rules of this language?\r\n* How does + this language add structure to the website?\r\n\r\n**Wait for instructions + from your teacher before going on to the next level.**" + CSDU2 - Internet Speed Test_markdown_instruction: "# Peer Review\r\n\r\nToday + you are going to have other people look at your website and give feedback + on it.\r\n\r\n# Do This\r\n\r\n* Leave this open on your screen so your peer + reviewers can look at your work" + CSDU2 - Intro to CSS_markdown_instruction: "# Style Element\r\n\r\nUp until + now you have only been able to add content to your page. In Web Developers + intentionally separate content and style to make their code easier to maintain. HTML + is the language used to add content to a web page. CSS is a language that + adds style to a web page. \r\n\r\nIn CSS style rules are used to style certain + elements of HTML. Style rules explicitly call out certain properties of the + element to be styled. To add CSS style rules to an HTML page, you need to + first add an HTML `<style>` element. This signals to the web browser that + all the stuff inside the `<style>` element is CSS styling instructions. \r\n\r\n\r\n# + Do This\r\n\r\n* Add the `<style>` element right below the opening `<html>` + tag. \r\n\r\nWe will add CSS to change the look of the page on the next level!" + CSDU2 - Intro to Validator_markdown_instruction: "# Validator\r\n\r\nThe validator + is a tool that allows you to check if a page is following good HTML fundamentals + and will work consistently across many different computers and web browsers.\r\n\r\n# + Do This\r\n\r\nUse the validator to check if the web page on this level meets + the requirements for consistent web pages. To use the validator, it’s important + to work on it one error at a time.\r\n\r\n1. Open up the <a href=\"https://validator.w3.org/\" + target=\"_blank\">W3 validator</a>.\r\n2. Click **\"Validate by Direct Input\"**\r\n3.** + Copy and paste the contents of index.html** file into the box.\r\n4. Click + **“Check”**\r\n5. If there is an error message click the top error below:\r\n\r\n\t* + <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> Unable to Determine + Parse Mode! </a>\r\n\t* <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> + No DOCTYPE found, and unknown root element. Aborting validation. </a>\r\n * + <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/5\"> Element head + is missing a required instance of child element title. </a>\r\n * <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/5\"> + Element title must not be empty.</a>\r\n * <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/4\"> + Start tag seen without seeing a doctype first. Expected e.g. <!DOCTYPE html>.</a>\r\n\r\n\tOnce + you fix the error start again at step 1.\r\n\r\n6. If there are no error messages + <a href=\"https://studio.code.org/s/csd2/stage/5/puzzle/6\">click here </a> + to head to the next set of levels!" + CSDU2 - Link Tag_markdown_instruction: "# Link Element\r\n\r\nIn the last level + you moved your style out into an external style sheet. You may have noticed + though that the style was no longer appearing on the page. To get the style + to apply to the web page we need to connect the html and css files.\r\n\r\n**To + link sheets you will need to add a `<link>` element.** The `<link>` element + goes inside the `<head>` element since it is information about the page and + not content of the page. You can link a stylesheet to multiple pages if you + want them all to have the same style.\r\n\r\n`<link>` element has two main + attributes: `rel` and `href`.\r\n\r\n* As you learned before for images the + `href` attribute is the file path, in this case just the same of the CSS file. \r\n* + The `rel` attribute indicates the relationship that the linked file has to + the current file, in this case its a stylesheet.\r\n\r\nFor example:\r\n<pre>\r\n<head>\r\n <link + rel=\"stylesheet\" href=\"styles.css\">\r\n</head>\r\n</pre>\r\n\r\n# + Do This\r\n\r\n* For the index.html link the css file using the `<link>` element + in the `<head>` element" + CSDU2 - Link and Nav_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + are hyperlinks?**</summary>\r\nHyperlinks can connect to local web pages or + external web pages. To add navigation to your website you will need to add + hyperlinks which connect your individual web pages. You can **add hyperlinks + to your web page using the `<a>` element**. The text you want to display + as the hyperlink goes between the opening and closing hyperlink tags. The + `<a>` element has an attribute `href` which is the location to link to. The + location of a local page is just the file path for that page. <br> <br>\r\n\r\nFor + example to link to the unique houses page you would add the following code + inside your `<body>` element. <br><br>\r\n\r\n<pre>\r\n<a href=”houses.html”> + Unique Houses </a>\r\n</pre>\r\n\r\n</details>\r\n<details>\r\n<summary>**How + do I add a hyperlink?**</summary>\r\nYou can **add hyperlinks to your web + page using the `<a>` element**. The text you want to display as the hyperlink + goes between the opening and closing hyperlink tags. The `<a>` element has + an attribute `href` which is the location to link to. The location of a local + page is just the file path for that page. <br> <br>\r\n\r\nFor example to + link to the unique houses page you would add the following code inside your + `<body>` element. <br><br>\r\n\r\n<pre>\r\n<a href=”houses.html”> Unique + Houses </a>\r\n</pre>\r\n\r\n</details>\r\n</div>\r\n\r\n# Hyperlink + Element\r\n\r\n* In the index.html file, find the line of code that says that + says `<a href=\"houses.html\">Odd Houses</a>`. This is a link that will take + you to the Odd Houses page at `houses.html`.\r\n* Discuss with a partner how + the code works.\r\n * Where does the file name go?\r\n * Where does the label + of the link go?\r\n* Below the hyperlink to the Odd Houses page add two new + hyperlinks (`<a>`) to the following pages:\r\n * Crazy Signs Page\r\n * + Guinness Book of World Records Page\r\n* Test it out to see if clicking the + links take you to the other pages of your site." + CSDU2 - Local Images_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + do I add images?**</summary>\r\nThe `<img>` tag allows you to show images + on your web page. <br><br>\r\n\r\nExample:\r\n<pre><img src=\"dog.png\" + alt=\"dog jumping\"/></pre><br><br>\r\n\r\nIn order to tell the browser + which file to use, extra information, called an **attribute**, is added to + the <img> tag inside the brackets. The attribute `src` stands for **s**ou**rc**e + and tell the name of the image. Image files names include extensions which + tell the computer which type of image they are working with. Common extensions + are .jpg, .jpeg, .png. <br><br>\r\n\r\nIn addition to have the src attribute, + image elements also have the `alt` attribute which describe the image. This + is important in case the image doesn’t load or for people who have trouble + with their eyesight. <br><br>\r\n\r\nAn `<img>` tag is an example of a **void + element** because it starts and closes in one tag. To mark this we put the + `/` which usually goes in the close tag at the end of the image tag.\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is a void tag?**</summary>\r\nAn `<img>` tag is an example of a **void element** + because it starts and closes in one tag. To mark this we put the `/` which + usually goes in the close tag at the end of the image tag. Void tags do not + need a closing tag because there is no text content which must be wrapped + in tags. The content that shows on the screen is specified through the tags + attributes.\r\n</details>\r\n<details>\r\n<summary>**Why does an image tag + not have a closing tag?**</summary>\r\nAn image tag is a void tag and void + tags do not need a closing tag because there is no text content which must + be wrapped in tags. The content that shows on the screen is specified through + the tags attributes.\r\n</details>\r\n<details>\r\n<summary>**What is an attribute?**</summary>\r\nAttributes + are extra information included in a tag. Attributes have names and values. + The name tells what type of information is being provided and then the value + gives the specific information for that tag. \r\n\r\nFor example <img> + tags have two attributes, src and alt. src specifies the name of the image + file and alt tells the browser in readable text what the image is.\r\n</details>\r\n</div>\r\n\r\n# + Images\r\n\r\nA Dog vs Cat web page has been started for you. The dog image + has already been added to the below web page. Use an image tag to add the + cat.jpeg image to the page below the cat header." + CSDU2 - Matching Class Style Checker_markdown_instruction: "# Check your matching + answers\r\n\r\nTest out your guesses from the matching activity by applying + the class styling to the elements and see if it produces the same result. + The results from the slide show are shown below.\r\n\r\n| Question 1 | Question + 2 | Question 3 | Question 4 | Question 5 |\r\n| ---------- | --------- | + ---------- | ---------- | ---------- |\r\n| <img src=\"https://images.code.org/702e804602dbf28874f516f1578fd883-image-1475259238611.54.05 + PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/7f6a2c9561213f6b5c8c9285f94ae850-image-1475259241204.25.16 + PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/291f01b170f9242a26f04f8eb8296471-image-1475259238611.52.46 + PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/81c9db1d1258f0fd709ba4508806388c-image-1475259238611.53.08 + PM.png\" style=\"width:250px\"> | <img src=\"https://images.code.org/43df26d786235bf2402854b56c8bbcf5-image-1475259238610.50.22 + PM.png\" style=\"width:250px\"> |" + CSDU2 - Missing Home Link_markdown_instruction: "# Missing Home Link\r\n\r\nCopying + your hyperlinks to all your pages allowed you to get to most of the pages + on your website from any other page. One hyperlink is missing - the one to + get you to your home page (index.html).\r\n\r\n**Add a hyperlink to your home + page from all the pages, even your home page itself.** Adding it to your home + page will keep your navigation header consistent on all pages." + CSDU2 - Multi Site First_markdown_instruction: "# Making a Multi-page Site\r\n\r\nA + web site should include more than one web page, and they should connect to + each other. The first multi-page site you make will be a site of Odd Stuff. Most + of the site is already here, but you will need to add your Guinness Book of + World Records page.\r\n\r\n* In the list of project files, find index.html + and click on it. **index.html is used in Web Lab to mark the home page of + a website**, the first page that your visitors will see.\r\n* Click on some + of the other HTML files. These are also web pages, but they have different + names. **Every file needs a unique name that will help you know what it is.**\r\n* + Look around through all the files provided. Can you figure out which style + sheets go with which web pages?" + CSDU2 - Nav add to Personal Site_markdown_instruction: "# Navigation on Personal + Website\r\n\r\nNow that you have all the files for your website, connect them + together!\r\n\r\n# Do This\r\n\r\n* Add hyperlinks at the top of your index.html + file for every page on your site (including the index.html page).\r\n* In + your style sheet, create a rule-set for the `a` tag that gives it the style + that you want.\r\n* Copy the hyperlinks and put them in every page.\r\n\r\n\r\n* + Add the `a` rule-set to every style sheet, or combine your style sheets to + make your entire page have the same look and feel!\r\n\r\nOnce your website + is set up and connected, feel free to make improvements to any pages on your + website.\r\n\r\nBefore leaving this level:\r\n* Take a screenshot of your + home page and save it somewhere on your computer so you can find it later + (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Check List\r\n\r\n* All of your web pages are individual + HTML files in this Portfolio Project" + CSDU2 - Nav on Personal Website_markdown_instruction: "# Multi-Page Personal + Website\r\n\r\nNow that you know how to set up a website, go ahead and set + up your own personal website.\r\n\r\n# Do This\r\nYour personal website is + back. So far you have just your personal home page.\r\n\r\n* Add html files + for each of the Hobbies Page, Recipe Page, and About Me page\r\n* Copy the + code from the following levels <a href=\"https://studio.code.org/s/csd2/stage/4/puzzle/14\" + target=\"_blank\">Hobbies Page</a>, <a href=\"https://studio.code.org/s/csd2/stage/4/puzzle/17\" + target=\"_blank\">Recipe Page</a>, and <a href=\"https://studio.code.org/s/csd2/stage/8/puzzle/12\" + target=\"_blank\">About Me page</a> into the files you created.\r\n* Add a + CSS file for your <a href=\"https://studio.code.org/s/csd2/stage/8/puzzle/12\" + target=\"_blank\">\"About Me\" page style sheet</a>." + CSDU2 - New Class Files_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**Why + is the style sheet not working? **</summary>\r\nCheck in the HTML of the records + page to make sure that your link (`<link rel=\"stylesheet\" href=\"nameofstylesheet.css\">`) + is linking to the correct CSS file.\r\n</details>\r\n</div>\r\n# Making a + Multi-page Site\r\n\r\nYou may notice that your styles for your Guinness Book + of World Records don't seem to be working. Can you figure out why? \r\n\r\n**Hint:** + When you brought over your code you had to change the name of the style sheet + from \"style.css\" to something else." + CSDU2 - New Html Files_markdown_instruction: "# Adding HTML and CSS\r\n\r\nYou + will need to add your Guinness Book of World Records page. First create an + HTML and CSS file. On the next level you will bring over the code.\r\n\r\n## + Adding File\r\n* Add a new HTML file by clicking the \"Add HTML\" button.\r\n* + Rename the file, either by right clicking it and choosing \"Rename\", or by + clicking on it when it's already highlighted. **Make sure the name is unique, + descriptive and ends in \".html\"**.\r\n* Create a new CSS file and rename + it, too." + CSDU2 - PW - Class Style Personal Site_markdown_instruction: "# Free Play Styling\r\n\r\nYour + turn to decide what you want to style! Play with the classes styling and RGB + colors to improve your personal website.\r\n\r\n* Make sure you have completed + the checklist below \r\n* Take a screenshot of your home page and save it + somewhere on your computer so you can find it later (*Need help with how to + screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Checklist\r\n\r\n* On your hobby page, give each hobby its + own text color using RGB values.\r\n* On your recipe page, give all the parts + of the ingredients list the same background color, including the title.\r\n* + Use classes to style at least 2 other elements of your personal website" + CSDU2 - PW - Classes on Recipe_markdown_instruction: "# Classes on Recipe Page\r\n\r\nIn + the next few levels, as a little more practice with style, you will style + some of the elements on your recipe page in order to give the appearance of + a notecard. You will want to make the background of the ingredients list and + the directions lists look like notecards.\r\n\r\n# Do This\r\n\r\n* In the + recipe page add the ordered list for directions to the \"notecard\" class\r\n* + In the recipe page add the unordered list for the ingredients to the \"notecard\" + class\r\n* Add a style rule for the notecard class but don't put anything + in it. You will start working on it on the next level." + CSDU2 - PW - Consistent Personal Site Style_markdown_instruction: "# Consistent + Style\r\n\r\nYour site’s pages might look crazy since you pulled together + the style of all the pages in the last level. It is time to work on that by + creating classes for style exceptions.\r\n\r\n# Do This\r\n\r\n* Identify + the exceptions to the style rules such as the note card styling\r\n* Use classes + to separate the styling of those unique elements\r\n* Move the styling for + those classes into your style.css file\r\n* Get ride of all `<style>` elements + and the style rules inside them\r\n* Your website should now have a consistent + look!" + CSDU2 - PW - Divs to break up the page_markdown_instruction: "# Header and + Content Divs\r\n\r\nGrouping together the different sections of a web page + will make styling the web page easier. It also helps make clear to the user + where to look for different content. You saw an example of this earlier in + the levels.\r\n\r\n# Do This\r\n\r\n* Put all the elements for the navigation + of the website and the title of the website in div if it not already\r\n* + Set the class of that div to be \"header\"\r\n* Put all the rest of the elements + on the page in a different div \r\n* Set the class for the second div to be + \"content\"\r\n* These will get styled on the next level!" + CSDU2 - PW - ESS Final touches_markdown_instruction: "# Finalizing Styling\r\n\r\nYou + should have completed styling your page with an external style sheet. Now + it is time to finish up anything you still want to work on.\r\n\r\n# Do This\r\n\r\n* + Go over the checklist below to make sure you have completed everything\r\n* + Work on continuing to improve your website!\r\n* Take a screenshot of your + home page and save it somewhere on your computer so you can find it later + (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Checklist\r\n\r\n* Picked and used a font pair consistently + across your website\r\n* Pick and used a color set of no more than 4 primary + colors across your website. It is okay if you use different shades of those + colors as well.\r\n* All style rules are in an external style sheet named + style.css\r\n* The style.css file is linked to all pages on the website\r\n* + Each page has:\r\n\t* Header div with the title of the website, the logo for + your website, and the navigation bar\r\n * Content div with the main content + of the web page\r\n * The logo as the favicon for that page\r\n* Clicking + the logo on any page will take you back to the home page" + CSDU2 - PW - External Style Sheets_markdown_instruction: "# External Style + Sheet\r\n\r\nAlright you just learned how to add an external style sheet to + create consistent style across a website. When there are specific things you + want to style differently you have practiced using classes. It is time to + use these in your Personal Website. To start, get all the style into one external + style sheet linked to each web page.\r\n\r\nYou can mark the different sections + of the .css file with comments. Comments in CSS use different notation than + comments in HTML. Comments in CSS look like this: `/* This is a comment */`\r\n\r\n# + Do This\r\n\r\n* Create a CSS file and name it style.css\r\n* Cut/Paste the + CSS code from your <a href=\"\" target=\"_blank\">style tester level</a> to + style.css\r\n* Link the stylesheet to each document in a project." + CSDU2 - PW - Favicon_markdown_instruction: "# Favicon\r\n\r\nSince you have + a logo for your website it would also be cool to have it be small image associated + your website. The small image associate with your website is called a **favicons**. + Favicon is short for favorite icon. It displays in the tab for a website, + when a website is bookmarked, and sometimes in the browsers address bar.\r\n\r\nFor + example when you open a tab for Code.org it might look like this. The icon + on the left is the favicon.\r\n\r\n<img src=\"https://images.code.org/9db8bd43bf27355cd6ed799358775140-image-1475697356699.55.40 + PM.png\">\r\n\r\nFavicons are metadata for the website since they are used + by the web browser and not content on the web page itself. Therefor they are + included in the `<head>` element. To add the favicon you use the `<link>` + element. The `href` still is the file path but the `rel` is \"shortcut icon\".\r\n\r\nFor + Example:\r\n\r\n<pre>\r\n<head>\r\n\t<link rel=\"shortcut icon\" + href=\"logo.png\" />\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* + Set your icon to be the favicon for your website. You need to add it to every + page for it show up on each page." + CSDU2 - PW - Final Classes Style_markdown_instruction: "# Note Card Styling\r\n\r\nNow + that you have the background of the note cards, you can finish up the styling + of the note card. \r\n\r\nBefore you start styling it is important to know + something about borders. So far you have controlled all four-sides of a border + at the same time. Sometimes you want to style just one border edge at a time. + To do this we just add the name of the side to the property. For example:\r\n\r\n<pre>\r\np + {\r\n\tborder-top-color: green;\r\n\tborder-bottom-style: solid;\r\n\tborder-right-width: + 20px;\r\n}\r\n</pre>\r\n\r\n# Do This\r\n<img src=\"https://images.code.org/b38ebda06d6ce76bd59aa93fa050290c-image-1475159743251.30.18 + AM.png\" style=\"width:400px;float:right\">\r\n\r\nStyle the note card so + it looks similar to the image on the right.\r\n\r\n* Make the writing on the + note card look like handwriting by using the font-family property and coloring + it different than the rest of the text on the page\r\n* Make all note cards + have a fixed width by setting the width of the notecard class to 500 pixels\r\n* + Make the note card pop and look 3D using border properties.\r\n\t* Set the + border color to the same color as the background of the card.\r\n * Set + the style to `outset`\r\n * Set the width to a small number of pixels\r\n* + Style the bottom border of all li elements to be black, solid, and 1 pixel.\r\n* + Style the bottom border of all h3 elements to be red, solid, and 1 pixel." + CSDU2 - PW - Image as A Link_markdown_instruction: "# Image as a Link\r\n\r\nNow + that you have a logo lets add it to your website. It will go on every individual + page in your header with your navigation and website title. Often clicking + on the logo of a website will take you back to the home page of a website. + So we will set that up as well.\r\n\r\nTo make an image also a link we just + wrap the `<img>` element in a `<a>` element.\r\n\r\n<pre>\r\n<a href=\"index.html\"> + <img src=\"logo.png\" alt=\"logo\"> </a>\r\n</pre>\r\n\r\n# Do + This\r\n\r\n* Upload your logo to your project.\r\n* Insert the logo using + an `<img>` element in the header div of each page\r\n* Make the image a link + by surronding the `<img>` element in an `<a>` element that directs to the + index.html page" + CSDU2 - PW - Pre Publishing 2_markdown_instruction: "# HTML Tags Check\r\n\r\nThe + next check should be for bugs or issues with your HTML. \r\n\r\n# Do This\r\n\r\n* + Make sure you are viewing your index.html file on Web Lab\r\n* Open your Web + Development Practices to page 2\r\n* Read through the list of basic HTML tags + you have seen\r\n* Check through your page to make sure you are using the + tags correctly and not missing tags" + CSDU2 - PW - Pre Publishing 3_markdown_instruction: "# Bugs Check\r\n\r\nThe + next check should be for general bugs.\r\n\r\n# Do This\r\n\r\n* Open your + Web Development Practices to page 3\r\n* Read through the list of bugs you + have seen\r\n* Check through your page to make sure none of those bugs are + appearing in your current website" + CSDU2 - PW - Pre Publishing 4_markdown_instruction: "# CSS Properties Check\r\n\r\nThe + next check should be for styles you still want to add or fix.\r\n\r\n# Do + This\r\n\r\n* Make sure you are viewing your style.css file on Web Lab\r\n* + Open your Web Development Practices to page 4\r\n* Read through the list of + basic CSS properties you have seen\r\n* Think about if there are styles you + still want to add or improve" + CSDU2 - PW - Pre Publishing 5_markdown_instruction: "# Personally Identifiable + Information Check\r\n\r\nEarlier in this lesson you made a list of information + you would not want to give away on your website. Use that list to check your + site. This is the most important step before publishing your website for all + to see.\r\n\r\n# Do This\r\n\r\n* Open your Web Development Practices to page + 5\r\n* Read through your list of rules for protecting your PII\r\n* Be a sleuth + on your own page and make sure people can not find out that important information + you want to protect.\r\n* Remove the information you don't want people to + know. This doesn’t have to mean stripping all of the personal importance out + of your site, it can be as simple as cropping an image to remove faces or + replacing your school’s name with “my school”." + CSDU2 - PW - Pre Publishing 6_markdown_instruction: "# Publishing!\r\n\r\nIt + is time to share your website!\r\n\r\n# Do This\r\n\r\n* Check your website + one more time to make sure you are ready to share it with others\r\n* Notice + the \"Share\" button has appeared at the top of the screen.\r\n* Click the + share button and copy the URL for your website.\r\n* Send that URL to friends + and family as instructed by your teacher.\r\n\r\nIf you made changes to your + home page during class make sure to take a screenshot of your home page and + save it somewhere on your computer so you can find it later (*Need help with + how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)" + CSDU2 - PW - Pre Publishing Access_markdown_instruction: "# Accessibility Check\r\n\r\nThe + next check should be for accessibility issues.\r\n\r\n# Do This\r\n\r\n* Open + your Web Development Practices to page 5\r\n* Read through the list of accessibility + issues you had identified\r\n* Make sure you fixed all the issues you had + listed\r\n* Check for any new content you have added for accessibility issues" + CSDU2 - PW - Pre Publishing Check_markdown_instruction: "# High Quality Features + Check\r\n\r\nUse your Web Development Practices - Project Guide to review + your website for publishing. First you will look at the list of features you + said you thought made something a high quality website to make sure you are + doing those things.\r\n\r\n# Do This\r\n\r\n* Open your Web Development Practices + to page 1\r\n* Read through the feature list\r\n* Pick a couple features you + might want to improve after reading the list" + CSDU2 - PW - Publish It_markdown_instruction: "# Publish It\r\n\r\n\r\n# Do + This\r\n\r\n* Publish it" + CSDU2 - PW - RGB color_markdown_instruction: "# RGB Color\r\n\r\nIn order to + get a nice “fake” notecard color, you will have to break out from the named + color values given in Web Lab. \r\nInstead, you will be using the RGB function, + which takes three values, the amount of red, green and blue you want in your + color. Each component of the color (red, green, blue) can have a value of + 0 to 255. Where 0 means the component color is not present or dark and 255 + means it is full present or bright.\r\n\r\nFor example:\r\n\r\n<pre>\r\n\r\nh1 + {\r\n\tcolor: rgb(120, 0, 255);\r\n}\r\n</pre>\r\n\r\nTo explore RGB colors + go to <a href=\"http://www.w3schools.com/colors/colors_rgb.asp\">W3 Schools + - RGB Colors </a>. There is a tool for you to play around with different RGB + values.\r\n\r\n# Do This\r\n\r\n* Play with the <a href=\"http://www.w3schools.com/colors/colors_rgb.asp\">W3 + Schools - RGB Colors </a> tool and find a color similar to this color: <img + src=\"https://images.code.org/2de78dc9667e9e6c77dc5e28b1de6b0d-image-1475095252137.40.30 + PM.png\" style=\"width:50px\">\r\n\r\n* Set the `background-color` of the + notecard class to the yellow you just created.\r\n\r\n*Hint: Yellow is a **bright** + color with **equal amounts of red and green**. *" + CSDU2 - PW - Title for Your Site_markdown_instruction: "# Website Title\r\n\r\nin + head element need to add title element with your title\r\n\r\nshows up in + the name of the tab\r\n\r\n# Do This\r\n\r\n* Stuff" + CSDU2 - PW - Validate Your Website_markdown_instruction: "# Validator\r\n\r\nThe + HTML is designed to display the same way on all computers, but sometimes you’ll + notice that different web browsers, or even different versions of the same + browser, display a website differently. Often this is because you either missed + a rule of HTML, or didn’t describe your content specifically enough. Fortunately + there’s a tool called the Validator that can check your code for errors!\r\n\r\n# + Do This\r\n\r\n* Open up the <a href=\"https://validator.w3.org/#validate_by_input\" + target=\"_blank\">Validator - Website</a>\r\n* For each html file in your + project\r\n\t* Copy the html into the box\r\n * Click check to see if there + are an error\r\n\t* Make a list of all unique errors.\r\n * For each error, + write in your own words what you think it means\r\n * For each error, search + to find a potential solution." + CSDU2 - Paragraphs 2_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is a paragraph element?**</summary>\r\nParagraphs are marked by opening(`<p>`) + and closing(`</p>`) tags as well. Paragraphs in HTML can be any length of + text from one word to a bunch of sentences. All of your text in your web page + should be contained in an HTML element (headers or paragraphs). Paragraphs + group together sets of sentences and put some space between that group of + text and the next group of text.\r\n</details>\r\n<details>\r\n<summary>**How + do I create multiple paragraphs?**</summary>\r\nParagraphs are marked by opening(`<p>`) + and closing(`</p>`) tags as well. To create more than one paragraph you will + want multiple sets of opening and closing `<p>` tags. For example\r\n<pre>\r\n\t<p>\r\n \tThis + is a paragraph.\r\n </p>\r\n\t<p>\r\n \tThis is another + paragraph.\r\n </p>\r\n</pre>\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example: \r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is.\r\n</details>\r\n</div>\r\n\r\n# + Paragraphs\r\n\r\nNow that you have a header try to separate the two sentences + like the example below using the paragraph element.\r\n\r\n<img src=\"https://images.code.org/12f8d4230fcd2144a5880815c8375149-image-1480364278934.12.18 + PM.png\" style=\"width:300px\">" + CSDU2 - Paragraphs 3_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + do I make different sized headers?**</summary>\r\nHeaders come in 6 different + sizes. So far you have primarily used the biggest one <h1>. The number + 1 in the HTML tag designates that this is the biggest header. The smallest + header is <h6>. You can also try the <h2>, <h3>, <h4>, + and <h5> tags which get smaller as the number gets larger.\r\n</h1>\r\n</details>\r\n<details>\r\n<summary>**What + are headers?**</summary>\r\nHeaders are the different sized section titles + throughout a web page. Headers add structure to your web page by breaking + it up so its easier for a user to read.\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example: \r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is.\r\n</details>\r\n</div>\r\n\r\n# + Header Sizes\r\nAdd the names of your favorite animals above the sentence + they go with. Make the names of the animals smaller headers than the \"Animals\" + title for the page. See the example below.\r\n\r\n<img src=\"https://images.code.org/1462f452bd2d983902f47e275da9fa90-image-1481137414337.03.11 + PM.png\" style=\"width:250px\">" + CSDU2 - Priority of CSS Rules_markdown_instruction: "# Priority of CSS Rules\r\n\r\nOn + the last level you moved all the style rules to one style.css file that is + linked to both web pages on the website. You may have noticed that the way + some of the styling of the elements on the two pages changed. Over the next + couple levels you will be working to fix this.\r\n\r\n## Multiple Rules for + One Element\r\n\r\nBy copying the style rules from two different pages into + one style sheet we created a couple cases where we have two style rules for + one element. Style rules are applied from top to bottom so when there are + multiple style-rules for the same properties of one element the one closer + to the bottom is the one that will appear.\r\n\r\nFor example if you had the + following style rules.\r\n\r\n<pre>\r\np{\r\n background-color: blue;\r\n}\r\np{\r\n background-color: + red;\r\n}\r\n</pre>\r\n\r\nThe pargraph elements would have a red background.\r\n\r\nTo + fix this issue the best thing to do is have one rule for each type of element.\r\n\r\n# + Do This\r\n\r\n* There are two style rules for `<div>` elements. They are + both the same. Delete one of them.\r\n* There are two style rules for `<body>` + elements. They are **different** but both just control the `background-color` + decide which of the two you would like to keep and get rid of the other one.\r\n* + Leave the duplicate `<img>` element style rules for now we will deal with + them on the next level." + CSDU2 - Recipe Page Start_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is. HTML tags + add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# + Recipe Page\r\n\r\nYou are going to start a new web page. This will be a favorite + recipe page. It will take a couple levels to build the page. Use your knowledge + from earlier in class to start getting it set up.\r\n\r\n# Do This\r\n\r\n* + Take out your recipe you picked.\r\n* Using a large header tag, put the name + of the recipe at the top of the page.\r\n* Create three smaller headers: Description, + Ingredients, and Instructions.\r\n* Add a paragraph element under the \"Description\" + describing the dish the recipe creates." + CSDU2 - Recipe Valid Update_markdown_instruction: "<div style=\"float: right; + height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**How + do I alert the web browser what language I'm writing in?**</summary>\r\n\r\nYou + will need to add two things to your HTML document, Doctype and an html element. + \r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**Why do I need to add these + elements?**</summary>\r\n\r\nWhen a web browser is trying to read your document + it looks for alerts which tell it which language you are using. In order to + let the web browser know that this is an html document you need to tell it + what type of document it is deal with (Doctype) and where to find the code + (inside the html element).\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What + is DOCTYPE and how do I use it? **</summary>\r\n<!DOCTYPE html> is always + the first thing in an html document because it notifies the computer that + this is an html document and to interpret it as such. <!DOCTYPE html> + is not technically a tag but instead an instruction to the web browser. <br> + <br>\r\n\r\nAdd <!DOCTYPE html> at the very top of your html file. \r\n</details>\r\n\r\n<details>\r\n<summary>**What + is the HTML element and how do I use it? **</summary>\r\n\r\nThe <html> + tag notifies the computer where the html starts and ends. The <html> + tag is the container for all other HTML elements (The <!DOCTYPE html> + tag does NOT go inside the html element). You will need an opening and closing + <html> tag. This will also make your preview of your website update + automatically if there are no issues with your code! <br> <br>\r\n \r\nWrap + all the content of the file in an HTML element using the <html> tag.\r\n\r\n</details>\r\n\r\n</div>\r\n\r\n# + Doctype and HTML tag\r\n\r\nThis is your Recipe page from the last lesson. + Update it with elements that alert your browser which language the document + was written in by adding DOCTYPE and <html> elements.\r\n\r\n![](https://images.code.org/f75e718b8e40870e7b6d87c0efdfc0ae-image-1481320053480.png)" + CSDU2 - SEO 1_markdown_instruction: "# Personal Website: Search Engine Optimization\r\n\r\nYou + are going to update your website to optimize for finding it on a search engine. + It is important to know that your website it might not be easy to find on + a search engine. This might be partially a result of improvements you could + make to your website. However since your website is hosted by Code.org and + does not have a descriptive URL it might be harder to find.\r\n\r\n# Do This\r\n\r\n* + Run your website through the <a href=\"http://www.seocentro.com/tools/seo/seo-analyzer.html\" + target=\"_blank\"> SEO </a>\r\n* Write down the issues it highlights with + your website\r\n* We will learn how to fix some of those issues in the next + couple levels however some may be things you want to investigate on your own + later such as Social Media presence." + CSDU2 - SEO 2_markdown_instruction: "# Search Engine Optimization: Title\r\n\r\nOne + piece of metadata that should be included in every web page you create is + the website title. Although you may put an `<h1>` element on your page content + with the title of your website, the computer does not necessarily know that + is the title as there may be multiple `<h1>` tags on your page. To make clear + to the computer what the title is the `<title>` element is added as metadata + in the `<head>` element. Every page on your website needs it own title.\r\n\r\nExample:\r\n<pre>\r\n<head>\r\n\t<title> + My Website Title</title>\r\n</head>\r\n</pre>\r\n\r\nThis `<title>` + element is not displayed anywhere on the page but the browser may use it to + put a name in the tab of your web browser or display it when someone searches + for your website. In fact titles are very important to search engines because + titles are often a primary piece of information looked at by users to decide + which websites fulfill their needs.\r\n\r\n*Sometimes search engines will + still generate their own title for your page based on the user search and + what the algorithm of the search engine thinks is best for supporting what + the user is looking for.*\r\n\r\n## Guidelines for Creating Good Titles\r\n\r\nSince + titles are so important you will want to make sure you have good titles for + all the pages of your website. Here are a couple practices for making good + titles. \r\n\r\nMake your title:\r\n* **Descriptive:** Make sure your title + explains what someone will find on that page.\r\n* **Concise:** Keep your + title short. 5 words or less.\r\n* **Individual:** Don't use the same title + for multiple pages.\r\n\r\n# Do This\r\n\r\n* Add a `<title>` element to each + web page on your website" + CSDU2 - SEO 3_markdown_instruction: "# Search Engine Optimization: Description\r\n\r\nAnother + important piece of meta data used by search engines is the description. The + description is added using the `<meta>` element. It has two attributes, the + name and the content. The content is where the actual description goes. **Every + page should have its own description.**\r\n\r\n<pre>\r\n<head> \r\n\t<meta + name=\"description\" content=\"Your meta description goes here \" />\r\n</head>\r\n</pre>\r\n\r\nJust + like the title tag this will not show up physically on the page but will be + used by search engines to display information about your page. Sometimes the + description will also be used when you share the link on social media platforms. + \r\n\r\n*Just like titles the search engine might decide it knows best and + generate a description for the page that is different than the one you provided.*\r\n\r\n## + What goes in a description?\r\n\r\nA good description will follow these guidelines:\r\n\r\n* + **Descriptive:** Unique description of what someone will find on this page\r\n* + **Keywords:** Uses keywords in full sentence descriptions which someone might + use to search for your page\r\n* **Short:** Less than 150 characters\r\n* + **Avoid Special Characters:** Don't use special characters such as ‘”<>{}[]()\r\n* + **Enticing:** It makes someone want to look at your web page.\r\n\r\n# Do + This\r\n\r\n* Add descriptions to each web page on your website using the + `<meta>` tag \r\n* Test it out!\r\n\t* Open <a href=\"http://www.seocentro.com/tools/seo/seo-analyzer.html\" + target=\"_blank\"> SEO </a>\r\n * Re-load the results for your page to + use the most updated version\r\n * Under the <img src=\"https://images.code.org/01e0d19ff0278ba750efc3b3824b31b0-image-1477075078800.37.19 + PM.png\" style=\"width:80px\"> section there is a preview of the Google Search + results.\r\n \r\n*Remember that the search engine might still decide to + use something else as your description. Its not a big deal and its still important + to have a description.*" + CSDU2 - SEO 4_markdown_instruction: "# Search Engine Optimization: Keywords\r\n\r\n\r\n\r\n\r\n# + Do This\r\n\r\n* Meta name =”keywords” content=”blah” (http://searchengineland.com/meta-keywords-tag-101-how-to-legally-hide-words-on-your-pages-for-search-engines-12099)" + CSDU2 - SEO 5_markdown_instruction: "# Search Engine Optimization: Viewport\r\n\r\nYour + website can be used on many different devices. Those devices have different + screen sizes. Viewport tells the browser how to load your website depending + on the size of the browser. To get the browser to display your web page at + the width of the device you can use the `<meta>` element with the attributes + below. The `<meta>` element should go inside the `<head>` element with all + the other meta data.\r\n\r\n<pre>\r\n<meta name=\"viewport\" content=\"width=device-width, + initial-scale=1\">\r\n</pre>\r\n\r\n# Do This\r\n\r\n* Set the viewport + of your website using the above code." + CSDU2 - SEO Final_markdown_instruction: "# Search Engine Optimization: Final\r\n\r\nIn + the past levels you added metadata to your website to improve your search + engine optimization. Go back to your list of issues the Search Engine Optimizer + identified and see if there are any others you can solve.\r\n\r\n# Do This\r\n\r\n* + Check to make sure you have completed the checklist below\r\n* Continue to + optimize your site for better search engine results\r\n* Take a screenshot + of your home page and save it somewhere on your computer so you can find it + later (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Checklist\r\n\r\n* Every web page has metadata for title, + description and viewport to improve search engine optimization." + CSDU2 - Selector and Property_markdown_instruction: "# CSS Style Rules\r\n\r\nStyle + rules consists of two main parts: the selector and the property. All style + rules go inside the `<style>` element.\r\n\r\n# Selector\r\nThe selectors + can be any part of the web page you want to style. One way you can identify + parts of the web page is using the names of the element. Selecting an element + will make all elements of that type have the given styling. The selector name + for HTML elements is the name of the tag with the brackets removed. In the + below example the selector is `h1` and it will style all the h1 tags with + the properties inside the `{ }`.\r\n\r\n# Property\r\nThe property describes + which style component of the selected element to change. There are lots of + different style properties you can change about your web page. Not all properties + can be used for all elements.\r\n\r\nThe first property we will use is the + `color` property. The **`color` property sets the color of text** and works + for any text elements including paragraphs, lists and headers. There are tons + of colors you can choose. Luckily Web Lab pops up a list as you type. You + can also look at the full list of colors at <a href=\"http://www.w3schools.com/cssref/css_colors.asp\">W3 + Schools - CSS Colors</a>.\r\n\r\nExample:\r\n\r\nThe below style will make + all the h1 headers on the page have blue text.\r\n\r\n<pre>\r\n <style>\r\n h1{\r\n color:blue;\r\n }\r\n </style>\r\n</pre>\r\n\r\n# + Do This\r\n\r\n* Add a style rule for h1 headers so the text is green.\r\n* + Add another rule that defines the color of h3 headers. Pick any color you + would like." + CSDU2 - Separate Content and Style_markdown_instruction: "# Separate Content + and Style\r\n\r\nSoon you will get to apply your new brand style rules to + your website. Before you do that, though, let's investigate how to style + a multi-page website.\r\n\r\nAs already mentioned, from this point forward + we will be using external style sheets instead of styling inside the HTML + file because this keeps all the styling for the website in one place. However, + in order to do this you are going to have to pay extra close attention as + you remove your old styling. Even though you want consistent style on your + website, you will have exceptions to the style rules in certain cases. Exceptions + to the style rules might include the note card styling, which you worked on + in the last lesson. We would not want every list to have the note card styling, + just those specific ones on the recipe page.\r\n\r\nYou will never want to + have duplicate rules for the same selector. So there should not be two stylings + with `p` as the selector. Instead you need to leverage the ability to make + classes in order to have multiple styles for `<p>` elements. \r\n\r\nTo practice + this, we have a website with an external style sheet that also still has styling. + You will need to figure out how to keep the unique elements of the individual + web pages while getting a more consistent style across the pages.\r\n\r\nUnique + Elements You Want to Keep:\r\n\r\n\t1.\tThe styling of the `<img>` elements + on one page should be different than the other\r\n\t2.\tFor the `<h1>` headers, + on one page we want to style them and on the other we don't.\r\n\r\n# Do + This\r\n\r\n* Put the image on the home page in the \"home-image\" class\r\n* + Find the old style rule for images on the home page (width: 600px) and change + the selector so it will style the \"home-image\" class instead\r\n* Put all + the images on the technology page in the \"tech-images\" class\r\n* Find the + old style rule for images on the technology page (width: 100px) and change + the selector so it will style the \"tech-images\" class instead\r\n* Find + the h1 element on the technology page and put it in the class \"page-header\"\r\n* + Change the secltor for the style rule for h1 elements to be just a style rule + for the page-header class\r\n* Copy the three new style rules you created + into your style.css file.\r\n* Delete the `<style>` element and its contents + from both pages." + CSDU2 - SizeOfHeaders_markdown_instruction: "# Size of Headers\r\n\r\nThere + are different sized headers which are marked by the number next to the h in + the header tag. They go from <h1> to <h6> .\r\n\r\n| Example | + Result |\r\n| ------- | ------ |\r\n| <pre><h1> Shoulders </h1> + <br> <h2> Knees </h2> <br> <h3> Toes </h3></pre> | + <img src=\"https://images.code.org/4f252e3dce84a14e1bfdab373d3edbad-image-1473432674187.50.43 + AM.png\" style=\"width:200px\"> |\r\n\r\n# Do This\r\n* Predict what the result + of the code in the index.html file will look like. Pick from one of the 4 + options below.\r\n\r\n| Option 1 | Option 2 | Option 3 | Option 4 |\r\n| -------- + | -------- | -------- | -------- |\r\n| <img src=\"https://images.code.org/a4e973cc13db380ca1e1efeb4263974f-image-1473432905067.53.47 + AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/1c660b4e54a3e835250597cb261d8e17-image-1473432905068.54.08 + AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/22e9ae6a04afd8251b29939a6fa63411-image-1473432905069.54.25 + AM.png\" style=\"width:200px\"> | <img src=\"https://images.code.org/0eee565202089d44a6bb5633603c45e0-image-1473432905069.54.50 + AM.png\" style=\"width:200px\"> |" + CSDU2 - Starting Personal Home Page_markdown_instruction: "# Starting Your + Home Page\r\n\r\nIn this lesson we are going to start putting together your + personal website! In order to do this you need to create your personal home + page.\r\n\r\n# Do This\r\n\r\nUsing your sketch of your personal home page + and personal web development practice packet as a guide:\r\n* Create as much + of the home page design as you currently know how to.\r\n* Take a screenshot + of your work and save it somewhere on your computer so you can find it later + (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)" + CSDU2 - Style to Personal Site_markdown_instruction: "# Style on Personal Website\r\n\r\nNow + that you have navigation on each page, you need to figure out how you want + to style your website. You have two choices:\r\n\r\n1. Make a style sheet + for each web page on your website\r\n2. Have one style sheet for your whole + website to give it a more consistent feel.\r\n\r\nPick one of the two choices + and style your website appropriately. Make sure to link the style sheet to + the page(s) you want it to apply to. Also make sure that the `a` rule-set + you created on the last level is applied to all your `a` tags.\r\n\r\nOnce + your website is set up and connected, feel free to make improvements to any + pages on your website.\r\n\r\nBefore leaving this level:\r\n* Take a screenshot + of your home page and save it somewhere on your computer so you can find it + later (*Need help with how to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Check List\r\n\r\n* All of your web pages are individual + HTML files in this Portfolio Project\r\n* Navigation to all the pages exists + at the top of each individual page\r\n* Style has been applied to all pages + on the website" + CSDU2 - Sub Folders_markdown_instruction: "# Images\r\n\r\nWhen you have a + bunch of images in your project its good to put them all in a folder to help + organize your files.\r\n\r\nOnce files are in a folder you need to help the + computer find them by giving both the folder name and the file name. For + example to display the dog.png file in the folder called images we would use:\r\n\r\n<pre> + <img src=\"images/dog.png\" alt=\"dog jumping\" /> </pre>\r\n\r\nThe + folder names comes first follow by the image name. We separate them with a + / .\r\n\r\n# Do This\r\n* Add a folder called pictures\r\n* Move all the image + files into the pictures folder\r\n* Notice how all the pictures no longer + show but the text in the alt attribute does.\r\n* Update the links to the + images so they display again" + CSDU2 - Type Anything_markdown_instruction: "# Welcome to Web Lab!\r\n\r\n<img + src=\"https://images.code.org/12ffe6980a25a3664eabe69be487a921-image-1485384422334.jpg\" + style=\"width:700px; float:right\">\r\n\r\nThe platform you are in is called + Web Lab. There are three main parts of the screen in Web Lab.\r\n\r\n\r\n\r\n# + Do This\r\n\r\n* Try typing something in the Code Area\r\n* Press <img src=\"https://images.code.org/6a35d13b10ed2029a9323c9cb555e39e-image-1477681291001.01.12 + PM.png\" style=\"width:100px\"> to see it in the Preview Area!\r\n" + CSDU2 - Unordered Lists_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + are the two types of lists?**</summary>\r\n There are two types of lists in + HTML, ordered and unordered lists.\r\n</details>\r\n<details>\r\n<summary>**What + is an unordered list?**</summary>\r\nAn unordered list is just a set of bulleted + items.\r\n</details>\r\n<details>\r\n<summary>**How do I make an unordered + list?**</summary>\r\n\r\nAn unordered list element has the tag <ul> + . Notice that this is an abbreviation for <strong>U</strong>nordered <strong>L</strong>ist. + Each item on the list is marked by a list item element <li>. Notice + that this is also an abbreviation for <strong>L</strong>ist <strong>I</strong>tem. The + list item element is a child element which means that you don't use it on + its own. It is contained inside a list element. It can be helpful to indent + your <li> tags so its clear that is contained in the <ul> tags.\r\n\r\n<table + border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> + <ul> <br> <li>Red </li> <br> <li>Green </li> + <br> <li>Blue</li> <br> </ul> </pre></td>\r\n<td><img + src=\"https://images.code.org/25d4dfc9b6c448d0da305df66aa1dfb7-image-1473444368948.05.32 + PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is an ordered list?**</summary>\r\nAn ordered list is a set of bulleted items + which are numbered.\r\n</details>\r\n\r\n<details>\r\n<summary>**How do I + make an ordered list?**</summary>\r\n\r\nAn ordered list element has the tag + <ol> . Notice that this is an abbreviation for <strong>O</strong>rdered + <strong>L</strong>ist. Each item on the list is marked by a list item element + <li>. Notice that this is also an abbreviation for <strong>L</strong>ist + <strong>I</strong>tem. The list item element is a child element which means + that you don't use it on its own. It is contained inside a list element. + It can be helpful to indent your <li> tags so its clear that is contained + in the <ol> tag.\r\n\r\n<table border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> + <ol> <br> <li>Step 1 </li> <br> <li>Step 2 </li> + <br> <li>Step 3 </li> <br> </ol> </pre></td>\r\n<td><img + src=\"https://images.code.org/3ef357cfad8ac98a8b30beb229ebcb78-image-1473446360428.39.04 + PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is. HTML tags + add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# + Unordered Lists\r\n\r\nNow that you have the basic layout for your Recipe + page you need two lists. An ingredients list and a directions list. Start + by trying to create the ingredients list. All text on your web page should + go inside one type of HTML element (header, list, or paragraph).\r\n\r\n# + Do This\r\nUnder your ingredients header create an unordered list of ingredients." + CSDU2 - Using Your Colors_markdown_instruction: "# Using Your Font\r\n\r\nThere + are other uses for the `<link>` element. The `<link>` element also used to + import your chosen fonts. Since you will be using a font not from the typical + five font families, the browser needs to have a fall back plan in case it + can't load the font you wanted. To do this a back up font name is given.\r\n\r\nFor + Example:\r\n<pre>\r\nfont-family: 'Cabin', sans-serif;\r\n</pre>\r\n\r\nThe + font you want to use is listed first in `''` and then after a comma a back + up font from the 5 normal font families is give.\r\n\r\n# Do This\r\nSet up + your style rules to use your fonts you picked out.\r\n\r\n* Open the <a href=\"https://studio.code.org/s/csd2/stage/10/puzzle/3\" + target=\"_blank\">level where you chose your fonts. </a>\r\n* Open the link + for each of your chosen fonts.\r\n* For each font:\r\n\t* Click <img src=\"https://images.code.org/91720f2ecae50e22d3287a92e988ee35-image-1475609982999.39.20 + PM.png\" style=\"width:130px\"> at the top right of the page.\r\n * That + will pop up a tab at the bottom. Click on the tab to open it. The pop up will + contain the link tag as well as the style rule for your font-family.\r\n <img + src=\"https://images.code.org/1e8712c56112e85157da093349f4b93d-image-1475610080515.40.26 + PM.png\" style=\"width:330px\">\r\n * Copy the link tag in the `<head>` + element of your index.html file.\r\n <img src=\"https://images.code.org/65fe1b66992e199f7c82c1f59c98cac5-image-1475610080516.40.38 + PM.png\" style=\"width:330px\">\r\n * Copy the style property example into + your style.css file for later use. There is a block comment where you can + copy it for keeping. You can determine where it goes on the next level.\r\n <img + src=\"https://images.code.org/da2f5cdec56681e0e8fa161bdf40d7a0-image-1475610080516.40.43 + PM.png\" style=\"width:330px\">" + CSDU2 - Using Your Font_markdown_instruction: "# Using Your Font\r\n\r\nThere + are other uses for the `<link>` element. The `<link>` element is also used + to import your chosen fonts. Since you will be using a font not from the typical + five font families, the browser needs to have a fall back plan in case it + can't load the font you wanted. To do this a back up font name is given.\r\n\r\nFor + Example:\r\n<pre>\r\nfont-family: 'Cabin', sans-serif;\r\n</pre>\r\n\r\nThe + font you want to use is listed first in `''` and then after a comma a back + up font from the 5 normal font families is give.\r\n\r\n# Do This\r\nSet up + your style rules to use your fonts you picked out.\r\n\r\n* Open the <a href=\"https://studio.code.org/s/csd2/stage/10/puzzle/3\" + target=\"_blank\">level where you chose your fonts. </a>\r\n* Open the link + for each of your chosen fonts.\r\n* For each font:\r\n\t* Click <img src=\"https://images.code.org/91720f2ecae50e22d3287a92e988ee35-image-1475609982999.39.20 + PM.png\" style=\"width:130px\"> at the top right of the page.\r\n * That + will pop up a tab at the bottom. Click on the tab to open it. The pop up will + contain the link tag as well as the style rule for your font-family.\r\n <img + src=\"https://images.code.org/1e8712c56112e85157da093349f4b93d-image-1475610080515.40.26 + PM.png\" style=\"width:330px\">\r\n * Copy the link tag in the `<head>` + element of your index.html file.\r\n <img src=\"https://images.code.org/65fe1b66992e199f7c82c1f59c98cac5-image-1475610080516.40.38 + PM.png\" style=\"width:330px\">\r\n * Copy the style property example into + your style.css file for later use. There is a block comment where you can + copy it for keeping. You can determine where it goes on the next level.\r\n <img + src=\"https://images.code.org/da2f5cdec56681e0e8fa161bdf40d7a0-image-1475610080516.40.43 + PM.png\" style=\"width:330px\">" + CSDU2 - Validator Extension_markdown_instruction: "# Favorite Places\r\n\r\nLets + start a new page. This page will be about your favorite places to spend time. + This could be on your block, in your city or even somewhere you like to go + on vacation.\r\n\r\n# Do This\r\n\r\n* Add <!Doctype>, <html>, + <head>, <title> tags to set up your page correctly from the beginning.\r\n* + Use header and list elements to make a page describing your favorite places.\r\n\r\n# + Checklist\r\n* At least 1 header\r\n* At least 1 list\r\n* Description of + each of your favorite places\r\n* Consistency tags used correctly - <!Doctype>, + <html>, <head>, and <title>" + CSDU2 - Welcome-to-Weblab_markdown_instruction: "# Welcome to Web Lab!\r\n\r\nStuff\r\n\r\n# + Do This\r\n\r\n* Thing 1\r\n* Thing 2" + CSDU2 - add header to content_markdown_instruction: "# Adding Content Part + 2\r\n\r\nLet's add some headers to the document.\r\n\r\n# Do This\r\n\r\n* + Add a \"Favorite Animal\" title above your paragraph about your favorite animal.\r\n* + Add a \"Favorite Way to Travel\" title above your paragraph about your favorite + way to travel (car, plane, train, etc.)." + CSDU2 - body tags_markdown_instruction: "# Body Element\r\n\r\nAs mentioned + on the last level the `<body>`element can be useful for more than breaking + up your code. What if you wanted to put a background color on the whole page? + Since the `<body>` element contains all the content of the web page, styling + its `background-color` property will give the whole page a background color.\r\n\r\n# + Do This\r\n\r\n* Use a selector for the `<body>` element to set the `background-color` + of the page to something other than white" + CSDU2 - font properties_markdown_instruction: "# Font Properties\r\nThe way + text looks is called a font. Two properties that control font are `font-family` + and `font-size`.\r\n\r\n## font-family\r\nThere are 5 fonts that will look + the same across any browser:\r\n\r\n* serif\r\n* sans-serif\r\n* monospace\r\n* + cursive\r\n* fantasy\r\n\r\nWe will focus on using those font families to + start. To read more about font families you can go to <a href=\"http://www.w3schools.com/cssref/pr_font_font-family.asp\"> + W3 Schools - CSS font-family</a>\r\n\r\n## font-size\r\nThere are many values + that can be used to determine font-size. Pixels are the easiest to use. A + pixel is one tiny square on the screen. So when a font is 14px that means + its 14 pixels tall.\r\n\r\nFor more details on font properties go to <a href=\"http://www.w3schools.com/cssref/pr_font_font-size.asp\">W3 + Schools - font-size</a>.\r\n\r\n# Do This\r\n\r\n* Add a font-family property + to h1 style to make the font cursive\r\n* Make the text in all the paragraph + elements larger." + CSDU2 - head and body tag intro_markdown_instruction: "<div style=\"float: + right; height: 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**Why + do I need to structure the HTML document this way?**</summary>\r\nAlthough + many modern web browsers can make good assumptions about what language you + are writing in and where to find different information in your document, you + don't want to leave the display of you web page up to chance. To guarantee + the best results for displaying your web page on all computers you need to + assist the computer in figuring out where to find information. <br> <br>\r\n\r\nAs + you go forward you are going to need two different sections in your HTML file. + They will serve different purposes.\r\n<br><br>\r\n1. Content of the page<br>\r\n2. + Information about the page<br>\r\n<br>\r\nBy breaking up a web page this way + it is clear where to find the code that is creating the physical output on + the web page and which code is just information for the computer about the + page.<br><br>\r\n\r\nIn creating web pages we differentiate between these + two areas using the <head> and <body> elements. The <head> + element contains all the information about the page. The <body> element + contains all the content for a web page.\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>**What + is a head element?**</summary>\r\nThe <head> element contains all the + information about the page. This is extra information that is helpful for + the computer in displaying your web page but is not the physical content of + the web page. \r\n\r\nThe <head> element usually comes above the body + element but inside the <html> element. For right now it will be blank + but later we will learn important things that are added to the head.\r\n</details>\r\n\r\n<details>\r\n<summary>**How + is the head element different than the header elements? **</summary>\r\nThe + header elements (<h1> to <h6>) are used to display headers directly + on your web page for your user to see. The head tag marks the information + that is not user facing in your HTML document. \r\n</details>\r\n\r\n<details>\r\n<summary>**What + is the body element? **</summary>\r\n\r\n The <body> element contains + all the content for a web page. The HTML elements for your headers, paragraphs, + and lists should all go inside the <body> element.\r\n\r\n</details>\r\n</div>\r\n\r\n# + Head and Body\r\n\r\nFormat your HTML document with two sections using the + <head> and <body> elements as shown in the image below. From this + point forward anything you add to an HTML document should go inside either + the <head> or the <body> elements. Put all the content and structure + you have created so far inside the <body> element.\r\n\r\n<img src=\"https://images.code.org/2513d8f7c31e76c2ee5427e512a54a1c-image-1481559174341.png\" + style=\"width:300px\">" + CSDU2 - head body_markdown_instruction: "# Head and Body\r\n\r\nThere are now + two different sections of code in our HTML file:\r\n\r\n1. Content of the + page\r\n2. Information about the page (for right now just how to style it).\r\n\r\nIn + creating web pages we differentiate between these two areas using the <head> + and <body> elements. These elements are important for creating maintainable + code but will also be useful for other things as well. The <head> element + contains all the information about the page, also sometimes called **metadata**. The + <body> element contains all the content for a web page.\r\n\r\nOutline + of the structure of your web page:\r\n\r\n<pre>\r\n<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<style>\r\n \t\t<!--Styling + Goes Here-->\r\n\t\t</style>\r\n\t</head>\r\n\r\n\t<body>\r\n\t\t<!--Content + Goes Here-->\r\n\t</body>\r\n \r\n</html>\r\n</pre>\r\n\r\n\r\n# + Do This\r\n\r\n* Add a <head> element surrounding the styling for the + web page.\r\n* Add a <body> element surrounding the content for the + web page." + CSDU2 - image properties_markdown_instruction: "# Image Properties\r\n\r\nImages + elements also have properties that can change their style.\r\n\r\n## Size\r\nOne + of the image properties is size. You can control size of an image using the + `width` and `height` properties. The size is determined by the number of pixels + tall and wide an image is. Pixels is abbreviated to `px`. For example to + make all the images 100 pixels wide you would use:\r\n\r\n<pre>\r\nimg {\r\n\twidth: + 100px;\r\n}\r\n</pre>\r\n\r\nAlthough you can control both width and height + it is best practice to only set either width and height since setting both + can distort the image.\r\n\r\n\r\n\r\n## Borders\r\nBorders are a common property + for many elements including images. Borders consist of three properties: `border-style`, + `border-width` and `border-color`.\r\n\r\n<pre>\r\nimg {\r\n border-style: + dashed;\r\n border-width: 5px;\r\n border-color: blue;\r\n}\r\n</pre>\r\n\r\nFor + more information about borders go to <a href=\"http://www.w3schools.com/css/css_border.asp\"> + W3 Schools - Border Properties</a>.\r\n\r\n# Do This\r\n\r\n* Add a rule to + style img elements\r\n* Use the rule to set the width of all images to 200 + pixels\r\n* Add borders to all images. Be creative and try different border + styles and colors." + CSDU2 - ordered Lists_markdown_instruction: "<div style=\"float: right; height: + 250px; width: 40%; overflow-y: scroll; margin-left: 20px; font-size:14px\">\r\n<details>\r\n<summary>**What + are the two types of lists?**</summary>\r\n There are two types of lists in + HTML, ordered and unordered lists.\r\n</details>\r\n<details>\r\n<summary>**What + is an unordered list?**</summary>\r\nAn unordered list is just a set of bulleted + items.\r\n</details>\r\n<details>\r\n<summary>**How do I make an unordered + list?**</summary>\r\n\r\nAn unordered list element has the tag <ul> + . Notice that this is an abbreviation for <strong>U</strong>nordered <strong>L</strong>ist. + Each item on the list is marked by a list item element <li>. Notice + that this is also an abbreviation for <strong>L</strong>ist <strong>I</strong>tem. The + list item element is a child element which means that you don't use it on + its own. It is contained inside a list element. It can be helpful to indent + your <li> tags so its clear that is contained in the <ul> tags.\r\n\r\n<table + border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> + <ul> <br> <li>Red </li> <br> <li>Green </li> + <br> <li>Blue</li> <br> </ul> </pre></td>\r\n<td><img + src=\"https://images.code.org/25d4dfc9b6c448d0da305df66aa1dfb7-image-1473444368948.05.32 + PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is an ordered list?**</summary>\r\nAn ordered list is a set of bulleted items + which are numbered.\r\n</details>\r\n\r\n<details>\r\n<summary>**How do I + make an ordered list?**</summary>\r\n\r\nAn ordered list element has the tag + <ol> . Notice that this is an abbreviation for <strong>O</strong>rdered + <strong>L</strong>ist. Each item on the list is marked by a list item element + <li>. Notice that this is also an abbreviation for <strong>L</strong>ist + <strong>I</strong>tem. The list item element is a child element which means + that you don't use it on its own. It is contained inside a list element. + It can be helpful to indent your <li> tags so its clear that is contained + in the <ul> tag.\r\n\r\n<table border=\"1\">\r\n<tr>\r\n<td>Example</td>\r\n<td>Result</td>\r\n</tr>\r\n<tr>\r\n<td><pre> + <ol> <br> <li>Step 1 </li> <br> <li>Step 2 </li> + <br> <li>Step 3 </li> <br> </ol> </pre></td>\r\n<td><img + src=\"https://images.code.org/3ef357cfad8ac98a8b30beb229ebcb78-image-1473446360428.39.04 + PM.png\" style=\"width:200px\"></td>\r\n</tr>\r\n</table>\r\n\r\n</details>\r\n<details>\r\n<summary>**What + is HTML?**</summary>\r\nStands for Hypertext Markup Language. HTML is used + to add structure to the content of a web page. HTML uses tags to specify where + certain structures start and end. These tags are sets of characters not found + in the English language so that the content and structure can be differentiated. + \r\n</details>\r\n<details>\r\n<summary>**What is an HTML element?**</summary>\r\nA + piece of a website. Marked by a start tag and sometimes closed with an end + tag. Also includes the content of the element as well. For example:<br>\r\n\r\n<img + src=\"https://images.code.org/fb4df62aa4d879f7021c567be2e28eea-image-1481135855001.png\" + style=\"width:500px\">\r\n</details>\r\n<details>\r\n<summary>**What is an + HTML tag?**</summary>\r\nThe special set of characters that tells the machine + where the start or end of an HTML element is and what type it is. HTML tags + add structure to the content of a web page.\r\n</details>\r\n</div>\r\n\r\n# + Ordered Lists\r\n\r\nCreate an ordered list for each step in your recipe under + the Directions header" + CSDU2 - p tags_markdown_instruction: "# Background Color\r\n\r\nAnother common + CSS property used to style pages is `background-color`. This property will + set the background color of a specific element. You can use any of the CSS + colors for background color.\r\n\r\nFor example the code below will set the + text color of all h1 elements to blue and the background color to red.\r\n\r\n<pre>\r\nh1 + {\r\n\tcolor: blue;\r\n\tbackground-color: red;\r\n}\r\n</pre>\r\n\r\n# Do + This\r\nTry out the `background-color` property with paragraphs.\r\n\r\n* + Give all the paragraphs (`<p>`) elements a background color of your choice." + CSDU2 - testing something_markdown_instruction: "# Welcome to Web Lab!\r\n\r\nHTML + is a language to express content on the web. HTML stands for Hypertext Markup + Language. This means you are just using special sets of characters to define + the content of a website.\r\n\r\nThe platform you are in is called Web Lab. + It lets you write HTML on one side of the screen and see the results on the + other.\r\n\r\n# Do This\r\n\r\n* Use the Inspector Tool to find where the + HTML code for “Welcome to Web Lab” appears.\r\n* Try to change the text from + \"Welcome to Web Lab\" to something different.\r\n* Try typing something else + on the page and see what happens." + CSDU2 - text properties_markdown_instruction: "# Text Properties\r\n\r\nColor + properties are just one type of property. Another is text properties. Text + properties can be used on an text element (`<p>`, `<h1>` to `<h6>`, `<ul>`, + `<ol>`, `<li>`).\r\n\r\n* text-align - sets the horizontal (side to side) + position of the text within each line\r\n* text-decoration - can add a line + above, below or through the text\r\n\r\nFor more details on text properties + go to <a href=\"http://www.w3schools.com/cssref/pr_text_text-decoration.asp\">W3 + Schools - Text Decoration</a> or <a href=\"http://www.w3schools.com/cssref/pr_text_text-align.asp\">W3 + Schools - Text Align</a>.\r\n\r\nExample:\r\n\r\nThe below example will make + all the paragraphs be right aligned with a green text color and a line through + all the text.\r\n<pre>\r\np {\r\n\ttext-decoration: line-through;\r\n\tcolor: + green;\r\n text-align: right;\r\n}\r\n</pre>\r\n\r\n# Do This\r\nRead the + W3 resources and figure out how to add the following styles on your page.\r\n\r\n* + Add an underline to all of the smaller headers by using the text-decoration + property.\r\n* Use the “text-align” property on paragraphs to align them on + the page so that each line has the same width." + CSDU2 - title element in head_markdown_instruction: "# Title Element\r\n\r\nOne + piece of metadata that should be included in every web page you create is + the website title. Although you may put an `<h1>` element on your page content + with the title of your website, the computer does not necessarily know that + is the title as there may be multiple `<h1>` tags on your page.\r\n\r\nTo + make clear what the title of a website is for the computer the `<title>` element + is added as metadata in the `<head>` element. This title is not displayed + on the page anywhere as a result of the title tag but the browser may use + it to put a name in the tab of your web browser or when someone searches for + your website.\r\n\r\nExample:\r\n<pre>\r\n<head>\r\n\t<title> + My Website Title</title>\r\n</head>\r\n</pre>\r\n\r\n# Do This\r\n\r\n* + Add a `<title>` element with the name of the web page inside the `<head>` + element" + CSDU2 - website comp_markdown_instruction: "# Comparing Websites\r\n\r\n**Prompt:** + Imagine you have a new puppy at home who has chewed through her old leash. + Decide between which of these two websites you would ultimately decide to + buy your puppy’s new leash. Why?\r\n\r\n* Website 1: <a href=\"https://thimbleprojects.org/nickianselmo/84613/\"> + Uncle Joe's Pet Store</a>\r\n* Website 2: <a href=\"http://www.petsmart.com/\"> + PetSmart</a>\r\n\r\nWrite your answer in the box below. When you are done + wait for directions from your teacher before moving on." + CSDU2 Color Blindness_markdown_instruction: "# Color Blindness Filter\r\n\r\n\r\n\r\n" + CSDU2 IP Add Images_markdown_instruction: "# Adding Your Images\r\n\r\nWith + images and attribution information in hand, it's time to spruce up your new + page.\r\n\r\n# Do This\r\n\r\nUpload your images to Web Lab and, using `<img>` + tags, add them where you'd like them to go. For each image:\r\n\r\n* Add + a descriptive `alt` attribute\r\n* Add attribution underneath the image, including\r\n\t* + Name or screenname of author (if available)\r\n * Title of image (if available)\r\n * + Link to original site (you can make the whole attribution text a link)\r\n * + License image was published under either in text (eg CC-BY) or using a badge + from the [Creative Commons website](https://creativecommons.org/about/downloads/).\r\n\r\nFor + example\r\n\r\n![Sad Dog](https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Longhaired_Dachshund_portrait.jpg/629px-Longhaired_Dachshund_portrait.jpg)\r\n\r\n[Longhaired + Dachshund portrait by Flickr user Soggydan](https://commons.wikimedia.org/wiki/File:Longhaired_Dachshund_portrait.jpg) + ![CC-BY](https://licensebuttons.net/l/by/3.0/88x31.png)" + CSDU2 IP Final Touches_markdown_instruction: "# Finishing Touches\r\n\r\nYou + have the content, you have pretty images, now put the finishing touches on + your page.\r\n\r\n# Do This\r\n\r\nMake sure you page meets the checklist + below then make this page your own and get it ready for publishing. Specifically, + consider the following:\r\n\r\n* **Styling:** Add new style rules to your + CSS file and give your page some flair.\r\n* **Organization**: Does the structure + of your content make it easy for users to find the information you want them + to see?\r\n* **Publishing Review**: Use your Web Development Practices to + review your site for publishing readiness.\r\n\r\nIf you made improvements + to your home page ake sure to take a screenshot of your home page and save + it somewhere on your computer so you can find it later (*Need help with how + to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)\r\n\r\n## Checklist\r\n\r\n* There is a separate HTML file for your + cause site with a descriptive name\r\n* The web page has a title, viewpoint, + and description\r\n* The web page is linked to your stylesheet for your website. + \r\n* A first level header with a catchy title for your page\r\n* A second + level header for each separate argument to support your cause\r\n* Paragraphs + of content under each second level header\r\n* A link to the appropriate site + where you need to cite outside sources\r\n* All images you are using are uploaded + into your web lab project\r\n* All images have a descriptive alt attribute\r\n* + All images have attribution underneath the image, including:\r\n\t* Name or + screenname of author (if available)\r\n\t* Title of image (if available)\r\n\t* + Link to original site (you can make the whole attribution text a link)\r\n\t* + License image was published under either in text (eg CC-BY) or using a badge + from the Creative Commons website." + CSDU2 IP Portfolio_markdown_instruction: "# Cause Page\r\n\r\nLet's start + by setting up the page you will be using to create your cause page.\r\n\r\n# + Do This\r\n\r\n* Add a new HTML file to your project for your cause page.\r\n* + Add a title, viewport, and description\r\n* Link the style sheet for your + website to the cause page" + CSDU2 IP Research Content_markdown_instruction: "# Adding Your Content\r\n\r\nYou + should now have found a handful of website that you can use to help make your + case for the cause you've chosen. If not, keep on researching! Otherwise + it's time to start structuring the content of your page.\r\n\r\n## Hyperlinks + to Websites\r\n\r\nEarlier in the unit you learned how to use the `<a>` element + to link between pages on your website. You can also use this element to link + to other websites. To do this the `href` attribute needs to contain the full + URL of the site you wish to link to. For example if I wanted to link to the + Code.org website in my project I would use the following code:\r\n\r\n| Code + | Output|\r\n| ---- | ----- |\r\n| <pre> My favorite coding site is <a + href=\"https://code.org/\" > Code.org </a > ! </pre> | My favorite + coding site is <a href=\"https://code.org/\"> Code.org </a> ! |\r\n\r\n# Do + This\r\n\r\nThe specifics of your page layout will depend on your topics and + goals, but in general you should create the following structure\r\n\r\n* A + first level header with a catchy title for your page\r\n* A second level header + for each separate argument to support your cause\r\n* Paragraphs of content + under each second level header\r\n* A link to the appropriate site where you + need to cite outside sources\r\n* Don't worry about styling right now you + are just getting the content\r\n\r\nAttribution links can take many forms, + for example\r\n\r\n* According to the [ASPCA](http://www.aspca.org/animal-homelessness) + only 10% of animals entering shelters have been spayed or neutered.\r\n* Kill + shelters euthanize 2.7 million animals per year (Source: [ASPCA](http://www.aspca.org/animal-homelessness))." + CSDU2 Make Your Logo_markdown_instruction: "# Create a Logo\r\n\r\nYou will + also need a logo for your brand. Get creative and create something that really + is you. Remember you probably want to use your colors and fonts as you design + your logo. If the tools does not have your exact font find something close.\r\n\r\n# + Do This\r\n\r\n* Use the tool linked below to **create a logo for your brand**\r\n* + **Hint:** The color picker on this site uses a different encoding called hex. + Your color picker gave you those values as well. They are the first encoding + with numbers and letters in it. They start with the # symbol.\r\n* **Save + that logo somewhere on your computer** so you can use it later." + CSDU2 Pick Your Colors_markdown_instruction: "# Pick Your Colors\r\n\r\nAnother + component of creating your brand is picking the colors for your brand. These + should be colors that stand out but also look good together. You want your + users to enjoy looking at your page. You will want to keep your set of colors + small so that the combination is memorable. A set of 4 main colors or less + for your page will be a good place to start. Different shades of those colors + can be used as well.\r\n\r\n# Do This\r\n\r\n* Go to the <a href=\"http://paletton.com/\"> + Paletton </a> website.\r\n* Decide how many primary colors you want for your + brand.\r\n* Set the number of primary colors useing these buttons <img src=\"https://images.code.org/669d2fe15825ea753f804ebb690aab95-image-1475594935612.28.22 + AM.png\" style=\"width:150px\">. The number of dots shows the number of primary + colors.\r\n* Play with dragging around the dots to find the primary colors + you like. The one that takes up the biggest box on the right will be your + primary color.\r\n\r\n<img src=\"https://images.code.org/b5811cea1acf1bf281ab73661db4b7cb-image-1475595405528.gif\" + style=\"width:400px\">\r\n\r\n* Once you have picked your colors click <img + src=\"https://images.code.org/3d30144dbe0cadc9bd083f1967e66b20-image-1475595929655.44.22 + AM.png\" style=\"width:100px\"> which is below the color boxes on the right.\r\n\r\n* + A list like the one below will show up click on **\"as Text\"** below the + Color List header.\r\n\r\n<img src=\"https://images.code.org/d39c3112948cd860148f2228f5b1c45a-image-1475595929655.44.43 + AM.png\" style=\"width:150px\">\r\n\r\n* A page that looks like the one below + will open. **Copy the text from this page into the box below.** This will + give you the RGB values for the colors as well as hex codes which you may + want on the next level.\r\n\r\n<img src=\"https://images.code.org/731d2612a1ccb47a4db8085abe910266-image-1475596945480.02.14 + PM.png\" style=\"width:400px\">" + CSDU2 Pick Your Fonts_markdown_instruction: "# Pick Your Fonts\r\n\r\nPart + of any good brand is having a specific font that is associated with the brand. + Most brands keep to a small set of fonts they use. These fonts however are + unique to the brand and will need to adventure beyond the 5 font families + you have been using.\r\n\r\nPicking a small set of fonts for your website + is also a good practice as when you adventure beyond the 5 font families into + other fonts the browser has to download the font file. Downloading files is + something that can add time to how long it takes to your load your website. + To prevent it from taking too long it is good to stay with just 2 different + fonts.\r\n\r\n# Do This\r\n\r\n* Go to the <a href=\"http://fontpair.co/\" + target=\"_blank\">Font Pair </a> website. The website lists sets of heading + and body font pairs that work nicely together. Each pair is listed like the + image below.\r\n\r\n<img src=\"https://images.code.org/7f34c1986c16fbb50e2acc4f72923b60-image-1475593488897.03.00 + AM.png\" style=\"width:400px\">\r\n\r\n* Pick a font set you like.\r\n* Copy + the heading and body font names.\r\n\r\n<img src=\"https://images.code.org/879b3b41486f728fbb8840469277704e-image-1475594076521.png\" + style=\"width:400px\">\r\n\r\n* Click the link to each font. This should take + you to a google fonts page.\r\n\r\n<img src=\"https://images.code.org/6163e64372d8825a7a8ed6a943cb3701-image-1475594076522.png\" + style=\"width:400px\">\r\n\r\n* Copy the URL for the google fonts page into + the box below so they will be saved for later. An example is below.\r\n\r\n<img + src=\"https://images.code.org/92e66b9ffae4d836175d63d87ab5586c-image-1475594389964.17.58 + AM.png\" style=\"width:400px\">" + CSDU2 RGB Color Matching_markdown_instruction: "# RGB Colors\r\n\r\nAll colors, + whether they have names or not, can be described by the level of red, green, + and blue light it takes to make them. This is called an RGB value (short + for Red-Green-Blue). You can use the widget on your left to try out different + RGB values and see what colors they make.\r\n\r\n* **Click \"Run\" to start + the widget on the left,** and use the sliders to adjust the levels of red, + green, and blue light.\r\n* For each of the colors below, match it to its + RGB value. Type your response in the box below.\r\n\r\nA) red: 216, green: + 191, blue: 216 - rgb(216,191,216)\r\n\r\nB) red: 255, green: 239, blue: 213 + - rgb(255,239,213)\r\n\r\nC) red: 255, green: 140, blue: 105 - rgb(255,140,105)\r\n\r\nD) + red: 123, green: 104, blue: 238 - rgb(123,104,238)\r\n\r\nE) red: 107, green: + 142, blue: 35 - rgb(107,142,35)\r\n" + CSDU4 - AppLab - 1_markdown_instruction: "# Documentation\r\nAs we move forward + you are going to see more and more (and more!) commands added to the toolbox. What + happens if you see a command and don't understand it, or you forget how it + works? Don't worry, this happens to professional programmers all the time! + No one actually memorizes long lists of commands. Most programming environments + have ways to quickly look up documentation about the commands of the language + you're using. **Good news: App Lab has documentation too!**\r\n\r\n![](https://images.code.org/3fe10e1b65edb37306099098161be001-image-1441990727053.gif)\r\n\r\nWhen + you **hover your mouse over a command** in the block palette a bubble pops + up with a quick reminder of what a function does, and what its parameters + are. If you click \"See examples\", you will be taken to more detailed documentation + of the command which includes **code examples** that you can even copy and + paste.\r\n" + CSDU4 - AppLab - 2_markdown_instruction: "# Assigning User Input to Variables\r\n<img + src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" + style=\"width: 350px; float:right\">\r\nThe `promptNum` command appears in + the variables toolbox because it's typically used as a way to get a value + from the user that you want to hold on to while the program runs.\r\n\r\n`promptNum` + is similar to `randomNumber` in that it is a function whose return value *evaluates + to a number*. The difference here is that `promptNum` pops up an input dialog + box and waits for the user to type a number. Once they do and hit \"OK\" + the number they typed is returned and we can store it in a variable to use + in our programs." + CSDU4 - AppLab - 3_markdown_instruction: "# Debug Console: Variable Values\r\n\r\nUp + until now, if we wanted to find out the value of a variable at some point + in the execution of a program, we've used `console.log`. That is still going + to be a great strategy but **the Debug Console can do even more for us!**\r\n\r\n**Check + this out:** We can check the value of a variable in real time (as our program + executes) by typing its name into the prompt within the Debug Console and + hitting \"enter\". **This is another powerful tool for debugging your programs.** + \r\n\r\n![](https://images.code.org/7e7ff7aa041814cfcd69a1c9a028c439-image-1446826780896.gif)" + CSDU4 - AppLab - 4_markdown_instruction: "# Debug Commands\r\n\r\n<img src=\"https://images.code.org/c6322845b96b70c9083a6c62736048e5-image-1446739268136.00.34 + AM.png\" style=\"width: 200px; float: right\">\r\n\r\nCheck out the new **Debug + Commands toolbox** that has appeared next to the Debug Console! These powerful + tools allow us to **pause a program at a certain point** while it’s running + and then execute lines one at a time. \r\n\r\nUsing these tools we can investigate + the state of variables and other elements of the program at any point, mid-execution. + This makes it much easier to see what’s happening while the programming is + actually running!\r\n\r\nIn order to use the debug commands, you first have + to indicate which line you want the program to pause at. This is called adding + a “breakpoint” (see animation below).\r\n\r\n# Do This:\r\n\r\n* **Add a breakpoint** + on the line where the `while` loop starts. (**Just click the line number.**)\r\n* + **Use the <img src=\"https://images.code.org/bd8f1a67242e64e6b3740eac79f881e8-image-1446748421345.33.09 + PM.png\" style=\"width: 75px\"> button** to execute each line one at a time.\r\n* + **NOTE:** If you hit <img src=\"https://images.code.org/6c4712da58e32dae2d04c52d9964fca9-image-1446741498097.37.48 + AM.png\" style=\"width: 75px\"> it will \"continue\" executing the program + normally, unless of course it hits another breakpoint. \r\n\r\n![](https://images.code.org/68f8e185914c8cc127aa9573ae37f687-image-1446835628580.gif)" + CSDU4 - Design Mode - 1_markdown_instruction: "<img src='https://images.code.org/3fad83213ae72073251c4d5abc1f048a-image-1444060521578.png' + style='float: right; width: 250px'> A new group of commands has been added + to the toolbox called **UI Controls** (User Interface Controls) which are + commands that let you interact with, and respond to, the user of your app. + To keep it simple, we'll start with just two commands: \r\n* `onEvent` which + lets you run a function in response to some event occuring (such as a button + click).\r\n* `button` which puts a button on the screen." + CSDU4 - Design Mode - 10_markdown_instruction: "# New Elements and Events: + Moving Buttons with Events\r\n\r\nOver the next few exerises we will be exploring + several new user interface elements and event types. Your code will be pulled + forward as you progress through the exercises.\r\n\r\n**Moving Past Turtle:** + We've been using buttons to move the turtle. For example, in the program + you're about to see a button that moves the turtle to a random location on + the screen. We're going to alter this program ** so that the button itself + moves every time you click it**.\r\n\r\n**Notice** that this means that event + handlers can affect the elements they are attached to, not just other elements! This + is an interesting technique for apps. Now you're going to try it...\r\n\r\n# + Do This:\r\n* **Change the ID** of the button to something descriptive and + meaningful.\r\n* **Modify** your event handler so that **it no longer moves + the turtle** but instead sets the position of the button itself to a random + location on the screen.\r\n\t* TIP: add `setPosition` to the event handler, + and just move the `randomNumber` calls from the turtle.\r\n\t* Recall the + screen is **320 by 450 pixels**.\r\n\r\n**Before** | **After**\r\n---|---\r\n![](https://images.code.org/a4172e43b6707a3170e4eaf54a2a7b1d-image-1444335577799.gif) + | <img src=\"https://images.code.org/4e17b077bd8fbdd43f960d26bb3d252d-image-1444335766972.gif\" + style=\"width: 150px\">\r\n\r\n\r\n" + CSDU4 - Design Mode - 11_markdown_instruction: "# New Elements and Events: + New Event Types\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 + AM.png\" style=\"float: right\">\r\n\r\n**New Events**: You may have noticed + that the `onEvent` block has a pull-down menu for the event **type** (see + right).\r\n\r\n# Do This:\r\n\r\n* **Experiment** with **each of the different + types of mouse events** by selecting from the list. You can also read about + them in the documentation.\r\n\t* click\r\n * mousemove\r\n * movedown\r\n * + mouseup\r\n * mouseover\r\n* **Choose** the mouse event type you like most + and change your event handler to use it.\r\n* **Note:** There are some events + that capture keystroke events. These are interesting, but they do not work + easily with buttons. We'll stick to mouse events for now, and get to keys + later." + CSDU4 - Design Mode - 12_markdown_instruction: "# New Elements and Events: + Text Labels\r\n<img src=\"https://images.code.org/20d50fd324908fc48633e1325cc37603-image-1444662791509.png\" + style=\"float: right\">\r\nThe UI controls toolbox contains an element called + `textLabel`. A text label is what it sounds like: plain text that you can + put in your app. Even though it's just plain text you can still move and + resize it using `setPosition`, and you can attach event handlers to it as + well.\r\n\r\n**NOTE:** resizing a text label does not change the font size + of the text. We'll learn how to do that later. " + CSDU4 - Design Mode - 13_markdown_instruction: "# New Elements and Events: + Images\r\n\r\n<img src=\"https://images.code.org/a84297658be45dc78bc401d387d10436-image-1444663322356.21.25 + AM.png\" style=\"float: right; width: 120px\">\r\nImages make applications + more visually pleasing and interactive. You can add images to your application + using the `image` command. For now, just add an `image` element to your app + (the default image link is the Code.org logo) and don't worry about choosing + a unique image just yet. We'll do that in the very next exercise!" + CSDU4 - Design Mode - 15_markdown_instruction: "# Design Mode\r\n\r\nWelcome + to Design Mode in AppLab! This will allow you to easily create a digital version + of your sketched wireframes by adding UI elements from the toolbox and and + styling them the way you want!\r\n\r\n**Goal:** Add a large red button to + your app using Design Mode.\r\n\r\n# Do This:\r\n\r\n* **Find <img src=\"https://images.code.org/278f146396c80c97d0b5d73f24d48aec-image-1444335461720.png\"> + in the Design Toolbox** and drag out a button and resize it. \r\n\r\n* **Change + the button text** to say \"Click Me\".\r\n\r\n* **Set the color for the button** + to be red.\r\n\r\n<img src=\"https://images.code.org/4cab6a5233cf07df0d8e312932762012-image-1444314797615.gif\" + style=\"width: 500px; float: middle\">\r\n" + CSDU4 - Design Mode - 16_markdown_instruction: "# Activate Your Button\r\nIn + the last lesson you focused on laying out a page of your app in Design Mode. + This is a great, quick way to get the visual side of an app figured out, but + it's not very functional. If you click any of the buttons you added, nothing + happens. Now you're work towards adding some basic functionality by making + the buttons in your app actually _do_ something!\r\n\r\n**Goal:** Add code + using Design Mode to make the button respond to a click.\r\n\r\n# Do This\r\nYour + starter app has two elements, a _label_ with the id `titleLabel` and a _button_ + with the id `changeTitleButton`. To start with, you're going to make the + button log a message to the console when it's clicked.\r\n\r\n* In Design + Mode, **click on the provided button to edit its properties**\r\n* Click on + the **Events** tab\r\n* Insert an `onEvent` from Design Mode by clicking **Insert + and show code** under the **Events Tab**.\r\n* Take a look at the block that + was added to the **Code Mode** tab.\r\n* Run the program, click your button + and **look for the output in the *Debug Console* **below the workspace instead + of the app window. We will discuss the *Debug Console* on the next level." + CSDU4 - Design Mode - 17_markdown_instruction: "# Updating IDs and Debugging + with Console Log\r\n\r\nHere we have a couple buttons with event handlers + and `console.log` statements, but they are all switched around!\r\n\r\nWe + should have given the buttons better ID names so we could tell the difference + based on the ID. **Can you update the ID names and `console.log` messages + to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** + of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to + Code Mode and notice that the **ID pulldowns have been updated to include + the new IDs**. (You still need to select the correct ID from the pulldown + menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" + CSDU4 - Design Mode - 18_markdown_instruction: "# Layering and Deleting\r\n<img + src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" + style=\"width: 200px; float: right\">User interface elements can overlap one + another, so you'll want the ability to change the order or **depth** at which + each one is rendered. \r\n\r\nIf you **scroll to the bottom of the Properties + tab** you'll find buttons which allow you to easily **delete or change the + depth** of an element.\r\n* **Delete an Element** by selecting it (clicking + on it) in the design view and then clicking **Delete** in the properties tab.\r\n* + **Change the depth** of elements by using the double or single arrows.\r\n + * Click the double arrow to send all the way to front or back.\r\n * Click + the single arrow to move up or down one layer.\r\n \r\n# Do This:\r\n\r\nUse + the **delete** and **depth** tools to **create the \"After\" image**\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th + style=\"text-align:center\">Before</th>\r\n <th style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td + align=center><img src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" + style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img + src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" + style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" + CSDU4 - Design Mode - 19_markdown_instruction: "# Second Screen\r\n\r\nMost + apps have more than one screen or page that each have different contents. + With Design Mode you can quickly add new screen to your app.\r\n\r\n# Do This\r\n\r\nYou're + going to add a second screen to your app and add a button to that screen. + Make sure you're using good IDs!\r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 + PM.png\" style=\"width: 50px\"> from the Design Toolbox into your app. You + now have two screens!\r\n* Using Design Mode create a button in your new screen. <img + src=\"https://images.code.org/bbf464e2fc94bacba39407d6842f2336-image-1478300698068.04.35 + PM.png\" style=\"width: 150px\"> \r\n* Set the IDs for your screens and buttons + to something meaningful, for example _\"homeScreen\"_, _\"detailsScreen\"_, + _\"homeButton\"_, and _\"detailsButton\"_\r\n\r\n\r\nYou can always use the + screen dropdown menu at the top of the app window to switch between your screens + <img src=\"https://images.code.org/404e0b3f520a413c8a5e62e74b70bb19-image-1478300388689.58.59 + PM.png\" style=\"width: 150px\"> \r\n\r\n" + CSDU4 - Design Mode - 2_markdown_instruction: "# Buttons and Unique IDs\r\nYou + may have noticed that the button command has two parameters: `button(id, text)`. The + `text` is the text that actually shows up on the button display, and the `id` + (we'll typically write **ID**) is a **unique identifier** for that element + in the app.\r\n\r\nEach element that appears in the app must have a **unique + ID**. In fact, if you try to run a program that has two buttons with same + ID you will get a warning message in the console. Watch:\r\n<img src=\"https://images.code.org/47ec46e0563f63641cc10ef152e9f86e-image-1444074330713.gif\" + style=\"border: solid 1px black; width:500px\">\r\n\r\nNotice that even though + the text on the buttons was different, the IDs were the same, which caused + the error message to show up. To get rid of that error message you will have + to change the ID of the button from the default `id` to something else.\r\n\r\n**Error + messages happen to everyone and they are helpful!**: getting an error or warning + message when you run your program is *not a big deal*. Programmers actually + rely on error messages to tell them where and how to fix their code.\r\nSometimes + error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers + to an id (id) which already exists.` But a warning like this contains helpful + information and clues such as the line the error occured on, or some word + or command it didn't recognize. " + CSDU4 - Design Mode - 20_markdown_instruction: "# Switching Screens\r\n\r\nYou + can set which screen is showing in your app with the `setScreen()` command. + If you're working in blocks you can select which screen you want to switch + to from a dropdown.\r\n\r\n![](https://images.code.org/615fae136488e1e6d1349e4383388e08-image-1478303858022.13.25 + PM.png)\r\n\r\n# Do This\r\n\r\nYou'll use an `onEvent()` block with `setScreen()` + to make the two buttons in your app switch between the two screen.\r\n\r\n* + Drag out two `onEvent()` blocks\r\n* Set the IDs for your `onEvent()` blocks + for each of your two buttons\r\n* Place a `setScreen` block inside each of + the `onEvent` blocks.\r\n* Choose the appropriate screen from the dropdown + of each `setScreen` block.\r\n* Test out your app to make sure your buttons + let you switch back and forth between the two screens" + CSDU4 - Design Mode - 21_markdown_instruction: "# Adding Images\r\nSometimes + the functionality you want to represent in your prototype is too complicated + to do with just the default buttons and fields. If you want to mock up more + advanced interfaces (like a map), the easiest way to do it is with an image\r\n\r\n# + Do This\r\n* Find and download an image of a map you like\r\n* Drag an image + element into your app ![](https://images.code.org/cda02ffe3acc869822a551f5cdbf8606-image-1444667846363.37.14 + AM.png)\r\n* Choose your image ![](https://images.code.org/e5b9571ae54af60a3ae597b787e741ea-image-1444667688762.34.42 + AM.png)\r\n\t* **URLs** can be added directly into the \"picture\" field. \r\n\t* + **Upload images** by clicking \"Choose\".\r\n\t* **Note:** You can always + see all the files you've uploaded by clicking the gear at the top of the + toolbox. ![](https://images.code.org/53b405b771bc11bf5d24c84c878c80dd-image-1444668067826.35.10 + AM.png)\r\n* Make sure to give your image a good ID!\r\n\r\n" + CSDU4 - Design Mode - 22_markdown_instruction: "A new command in the toolbox: + `playsound`! Read the documentation about how to add sounds." + CSDU4 - Design Mode - 23_markdown_instruction: "# Changing Elements on Screen + \r\n\r\nThere's another way to display text in your app besides `console.log` + and `write`. \r\n\r\nThere is a command called `setText` which will **change + the text of a component on screen** given its id. This is a very powerful + technique and one that you will use a lot. Here's what it looks like in action....\r\n\r\n<img + src=\"https://images.code.org/3e5dd320801720d5c62a49146d9ee3d2-image-1446056202170.gif\" + style=\"width: 500px\">\r\n\r\nLet's do a **very simple** example of using + `setText`." + CSDU4 - Design Mode - 24_markdown_instruction: "# Text Input Elements\r\n\r\n<img + src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 + PM.png\" style=\"width: 100px; float:right;\">\r\n\r\nSetting the text of + an element is all well and good, but things are going to get really interesting + when we can get text that a user has entered and do something with it.\r\n\r\n\r\n\r\n# + Do This:\r\n\r\n* **Add two text input elements to this program**, one for + the name and one for the age of the user.\r\n* **Give your text input elements + descriptive and meaningful IDs**.\r\n* **In Design Mode** set their default + text to prompt the user for their name and age.\r\n* **Compare your app to + the example below**.\r\n\r\n<img src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 + PM.png\" style=\"float:left; width:200px;\">\r\n<br>" + CSDU4 - Design Mode - 25_markdown_instruction: "# Getting Text Input\r\n\r\nAs + we saw a user can now type inside of a text input whenever they want, **but + now we'll need a way to access that text**. In order to do that you'll need + to use the `getText` command, which you can now find in the **UI Controls** + tab.\r\n\r\n<img src=\"https://images.code.org/0c6774f2b6d33f8107ec2936102b1a10-image-1445533677192.58.24 + PM.png\" style=\"width: 150px;\">\r\n\r\nYou can use a `getText` command just + like a string within a `console.log` or `write` command. Just like with `setText` + you will refer to the UI element by its ID.\r\n\r\n![](https://images.code.org/c17e419301d0cfeebf7f0ccee13e415f-image-1445892504376.47.54 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **Read the documentation ** for `getText`.\r\n* + **Add an event handler to the Submit button** that fires when your button + is clicked.\r\n* **Inside the event handler** place code that will **log the + name your user input to the console**.\r\n\r\n" + CSDU4 - Design Mode - 26_markdown_instruction: "# Saving Text Input in Variables\r\n\r\nOften + we want to save the information we pull in from the user for later use in + our program. The best way to do this is to save it in a variable.\r\n\r\n# + Do This:\r\n\r\n* **Create two variables inside your event handler** to store + the **age** and **name** of the user.\r\n* **Use `getText()` to update the + values** stored in each of these variables.\r\n* **Change your `console.log` + statements to use your variable instead of `getText`**.\r\n\r\n![](https://images.code.org/ca45dcb01ae2d1956ed2f87efeda0264-image-1445976691215.11.13 + PM.png)" + CSDU4 - Design Mode - 27_markdown_instruction: "# Generating Text Output\r\n\r\nSo + far we've been outputting our messages to the console, but now we'd like + to display them in the app. In order to do so we're going to be using a new + UI element called a **textArea**. You can use `setText()` with a **textArea** + just like you would with a **textLabel**.\r\n\r\n![](https://images.code.org/45e6b6cdb1ca87f53cf1d6bba97cb812-image-1445977693641.24.43 + PM.png)\r\n\r\nIf we want to combine user input with default text we can do + so with **string concatenation** (that's just a fancy phrase for combining + strings of text). Together with a **textArea** we can use this ability to + compose longer messages based on user input.\r\n\r\n# Do This:\r\n\r\n* **Add + a textArea** to your app and give it a descriptive and meaningful ID.\r\n* + **Create a variable inside your event handler** called `userMessage` to hold + the full message that will be sent to the user.\r\n* **Use string concatenation** + to compose a message from the user input.\r\n\t* eg `var userMessage = \"Welcome + \" + userName + \"!\";`\r\n* **Use `setText()`** to place your `userMessage` + inside the `textArea` you created.\r\n\r\n<img src=\"https://images.code.org/193af3e0c993dbf0b7af9c571ec5f56d-image-1445977696957.27.08 + PM.png\", style=\"width:250px;\">" + CSDU4 - Design Mode - 28_markdown_instruction: "# Introducing the *change* + Event\r\nUp until now you've been using the click of a button to trigger + getting the text from an input or text area.\r\n\r\nYou can use a new event + type to get this behavior: The __'change' event__ is triggered when the + user hits 'enter' in a text input after typing.\r\n\r\n\r\n<img src=\"https://images.code.org/7d1725b236471f8e2a0efed5870660da-image-1446071579670.32.36.png\" + style=\"width:350px;\">\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/f8f1f7ae18acbc570a367886bcd6ca88-image-1445976541574.gif\" + style=\"width:250px;\">\r\n- A text input has been created for you that asks + for a user's name, as well as a label for the response\r\n- Attach a \"change\" + event handler to the text input.\r\n- When the \"change\" event triggers, + set the text of \"nameResponse\" to the user's input.\r\n" + CSDU4 - Design Mode - 29_markdown_instruction: "# Dropdown\r\n\r\nOn the last + level we used `promptNum` to get the user's guess. However, we had no way + to limit them to the numbers we wanted. They could have typed 11 even though + we told them not to. A better way to get input with a limited set of options + is the dropdown. The <img src=\"https://images.code.org/3b21b4288a2a155d1e9a3c2cf3a5b09b-image-1446229368079.28.23 + PM.png\" style=\"width: 75px\"> is in your Design Mode Toolbox. You can control + the list of options users can choose and then use `getText` to get the chosen + number.\r\n\r\nWe are going to need an event handler in order to do this. + The event handler will detect when the user has changed the value of the dropdown. + \r\n\r\n# Do This:\r\n\r\n* **Add a dropdown** for their guess instead of + `promptNum`. Make sure to give it a good ID.\r\n\r\n<img src=\"https://images.code.org/fea164f6e53d1ce0c50981565e066d4c-image-1446229598357.gif\" + style=\"width: 350px\">\r\n\r\n* Under properties **find the Options** and + change it to the **numbers 1 to 10**\r\n\r\n<img src=\"https://images.code.org/0cfecbcdcfb95fc30876155ec6a3a021-image-1446229593687.gif\" + style=\"width: 250px\">\r\n\r\n* Add an event handler to detect the `change` + event on your dropdown.<br><br>\r\n<img src=\"https://images.code.org/48cffda5b7ff3a446116a39b4dbcbe8c-image-1446232308751.gif\" + style=\"width: 150px; float: right\">\r\n* Move your `if` statement inside + the event handler so it will check each time the dropdown is changed.<br><br>\r\n* + When the dropdown is changed **use `getText` to find out the user's guess**. + Save the guess using a variable. **Don't forget about scope!**<br><br>\r\n* + Test your app -- it should work like the demo." + CSDU4 - Design Mode - 3_markdown_instruction: "# How Do Events Work?\r\nEvent-driven + apps are made up of elements that can trigger events (such as buttons) and + pieces of code called **event handlers**. Event handlers are commands that + \"watch\" for certain events to occur in your program, and then run some function + when an event occurs.\r\n\r\nWhen you first create an event handler from Design + Mode, puts a `console.log()` block inside to help you test the event, but + you can put just about any code you want inside the event hander.\r\n\r\n# + Do This\r\n\r\nThe toolbox has a new block called `setText` which allows you + to change the text of an element on the screen. You're going to modify the + button event handler so that it changes the title text when clicked.\r\n\r\n* + Drag out a `setText()` block to the _inside_ of the `onEvent()` callback function + (where the `console.log()` block currently is)\r\n* From the block's dropdown, + select \"titleLabel\" (the id of the element you want to change)\r\n* In the + block's second input, replace \"text\" with a new title for the app\r\n* + Run your program and click the button to see it work" + CSDU4 - Design Mode - 30_markdown_instruction: "# Using `if` to Display Images\r\n\r\nWe + are going to set up a dice game. We want to show a picture of a single die + for each random number generated 1 to 6. We've already set up the screen + in Design Mode, with a button to generate the roll and an image to show a + picture of the die.\r\n\r\n**Note:** The flowchart for the desired behavior + is below.\r\n\r\n# Do This:\r\n\r\n* Add an event handler for the Roll! button + so that when the button is clicked it generates a random number from 1 to + 6. \r\n\r\n* Add conditionals (`if`, `else if`, and `else`) to change the + picture of the image (ID: `dice_image`) to display the correct side of the + die depending on the random number generated. You will need to use <img src=\"https://images.code.org/89f2c13ef4ead590475c863a087597f8-image-1446535826599.30.16.png\" + style=\"width:150px\"> with the URLs below to set the images for the die.\r\n\t* + <img src=\"https://code.org/images/dice/1.png\" style=\"width: 50px\"> Dice + 1 Image URL - https://code.org/images/dice/1.png\r\n * <img src=\"https://code.org/images/dice/2.png\" + style=\"width: 50px\"> Dice 2 Image URL - https://code.org/images/dice/2.png\r\n * + <img src=\"https://code.org/images/dice/3.png\" style=\"width: 50px\"> Dice + 3 Image URL - https://code.org/images/dice/3.png\r\n * <img src=\"https://code.org/images/dice/4.png\" + style=\"width: 50px\"> Dice 4 Image URL - https://code.org/images/dice/4.png\r\n * + <img src=\"https://code.org/images/dice/5.png\" style=\"width: 50px\"> Dice + 5 Image URL - https://code.org/images/dice/5.png\r\n * <img src=\"https://code.org/images/dice/6.png\" + style=\"width: 50px\"> Dice 6 Image URL - https://code.org/images/dice/6.png\r\n\r\n<img + src=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" + target=\"_blank\">Open diagram in a new tab</a>\r\n" + CSDU4 - Design Mode - 31_markdown_instruction: "# *keypress*\r\n\r\nIf we want + to add keyboard input to our apps we'll need to learn about how key events + work in App Lab. To start let's take a closer look at the `onEvent` block. + We already know that event handlers call a function. What we'll see now is + that they also **pass a parameter**. The default name for this parameter is + simply `event` but you can change it to be anything you like. \r\n\r\nThe + `event` parameter is a more complex kind of variable (called an \"Object\") + that we'll learn more about later. For now just know that for both mouse + and keyboard events, the event parameter passes more information about the + event. In the case of key events **you can find out the key(s) that were actually + pressed by using `event.key`**.\r\n\r\n# Do This:\r\n\r\n* Drag out an `onEvent` + block.\r\n* Change the ID to `screen1` and the event type to `keypress`. \r\n\r\n<img + src=\"https://images.code.org/537b5bbef3db62c90155528e6753a00a-image-1447175732347.gif\" + style=\"width: 450px\">\r\n\r\n* Once you hit **Run**, **click on the screen + so that the keystrokes will register**.\r\n* **Type different combinations + of keys** and check out the results in the console. Does every key combination + print to the console? Some keys to try:\r\n * Letter keys\r\n * Number + keys\r\n * Shift key\r\n * Hold shift and letter\r\n * Delete key\r\n * + Left and right arrow keys\r\n * Press and hold a key" + CSDU4 - Design Mode - 32_markdown_instruction: "# Using *keyup* and *keydown*\r\n\r\nOn + the last level, we played with the `keypress` event. Let's take a look at + some of the other key events. \r\n\r\nYou are going to get the chance to play + with `keyup` and `keydown` in this level. **Pay attention to the different + values of `event.key` for `keydown` and `keypress`. **\r\n\r\n# Do This:\r\n\r\n* + Switch to the event type to `keydown` or `keyup`. \r\n\r\n<img src=\"https://images.code.org/fa91b1a9e3240eb65ff75b381e76ce69-image-1447213909054.gif\" + style=\"width: 350px\">\r\n\r\n* Try out the event.\r\n\t* Press and hold + a key\r\n * Try the arrow keys\r\n * Shift\r\n * Option\r\n * + Alt\r\n * Others" + CSDU4 - Design Mode - 33_markdown_instruction: "# Play Sound With Keys\r\n\r\nYou + may have noticed from the last couple of levels that the value of `event.key` + is just a string which is the name of the key. As a result we can check which + key was pressed with a simple conditional statement. For example to check + for the press of the **\"a\"** key we could write `if (event.key == \"a\")`.\r\n\r\n# + Do This:\r\nThe **starter code provided** plays the sound whenever ANY key + is pressed.\r\n\r\n* Use `console.log` to **find out the value of `event.key` + when the up arrow is pressed.**\r\n\r\n* **Add an `if` statement** so the + sound only plays when the when the **up arrow** is pressed." + CSDU4 - Design Mode - 4_markdown_instruction: "# IDs\r\nThe `id` (we'll typically + write **ID**) is a **unique identifier** used for each element in the app.\r\n\r\nEach + element that appears in the app must have a **unique ID**. In fact, if you + try to run a program that has two buttons with same ID you will get a warning + message in the console.\r\n\r\n# Do This\r\nWhile each element you drag out + in Design Mode gets a default ID, they aren't really that helpful (like `button1` + and `button2`), so you should get in the habit of creating your own IDs.\r\n\r\n* + Change the ID of your \"click me\" button to something useful (like `redButton`)\r\n* + Drag out a second button\r\n* Make the second button blue and give it an ID + of `blueButton`" + CSDU4 - Design Mode - 5_markdown_instruction: "# Debugging Event-Driven Programs: + IDs\r\n\r\n**Debugging:** As you write more complex event-driven programs, + you'll need to polish your **debugging** skills. Debugging involves locating + and correcting errors within a program. It is a critical (and generally unavoidable) + step when writing code.<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" + style=\"float: right; width: 200px\">\r\n\r\n**Checking IDs:** Your first + debugging task will be to verify that the button IDs match the IDs in the + event-handlers. **Remember that IDs are case-sensitive**." + CSDU4 - Design Mode - 7_markdown_instruction: "**Logical Errors: ** Sometimes + you can write a program that generates no errors but does not work as you + intend. This is the result of **logical errors** in your code. These can be + tricky to catch without knowing what your program is supposed to do in the + first place, and usually are only found with careful testing of your app's + functionality.\r\n<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" + style=\"float: right; width: 150px\">" + CSDU4 - Design Mode - 8_markdown_instruction: "# Moving and Sizing Buttons\r\n\r\nAn + important component of designing intuitive and visually appealing user interfaces + is the location of the elements on the screen. Using the `setPosition` command + (now added to the Toolbox) you can move and set the size of user interface + elements.\r\n\r\n![](https://images.code.org/c3e42223cbcb096f992d758973d09f63-image-1444664597665.42.48 + AM.png)\r\n\r\n**NOTE:**\r\n * If you only want to set the size you can use + the `setSize` function which looks like this:\r\n\r\n ![](https://images.code.org/cb742ecf96c04477db0f8361ad5dcdaf-image-1448924017288.png)\r\n\r\n + * If you *only* want to set the position *without* changing the size of the + element, you can omit the *width* and *height* parameters from the `setPosition` + function. To do that, you need to switch into text mode, like this:\r\n\r\n + <img src='https://images.code.org/5b565ef5b74b5cd657ba15c67be92b0d-image-1448924356253.gif' + style=\"width: 400px\">\r\n\r\n* **Remember:** in an app screen 0,0 is the + top left corner and you specify a location by how many pixels from the left + and how many down from the top of the screen it is. The screen is **320 by + 450 pixels**." + CSDU4 - Design Mode - 9_markdown_instruction: "# How to Organize the Code\r\nAs + your apps get more complex you'll have to think about how to organize your + code so it remains readable and easy for you to locate things when debugging + any problems. We suggest the following convention which breaks the code into + 3 major sections:\r\n* **Top**: code for event handlers.\r\n* **Bottom**: + code for any other other functions you've written. (We don't have any of + these yet.)" + CSDU4 - Design Mode Icons_markdown_instruction: "<img src=\"https://images.code.org/2b405319f597910b1563ae607958171c-image-1475866226306.49.51.png\" + style=\"width: 200px; float:right\">\r\n\r\n# Icons\r\nIcons help users find + the right functionality while also making your app feel more polished.\r\n\r\n# + Do This\r\nAdd a few icons to your app. For each icon:\r\n\r\n* Drag out an + image element\r\n* Next to the \"Picture\" field click \"Choose...\"\r\n* + Click on the \"Icons\" tab and select one\r\n* Make sure to give your image + a good ID! (do we still need to say it?)\r\n\r\n" + CSDU4 Connecting Screens Getting Back_markdown_instruction: "# Navigating Back\r\n\r\nSomeone + using your app can now get to each of the red, green, and blue pages, but + they can't get back to the homepage. You can add buttons and event handlers + of your own to help them do this.\r\n\r\n# Do This\r\n\r\nCreate buttons and + event handlers to help a user navigate back to the \"home\" screen\r\n\r\n* + Use Design Mode to create a button inside each of the \"red\", \"green\", + and \"blue\" screens. Make sure to give them descriptive IDs.\r\n* Back in + your code drag in three `onEvent()` blocks, one for each of the three buttons + you made.\r\n* Inside each `onEvent()` block use the `setScreen()` block that + switches back to your \"home\" screen.\r\n* Test your app. You should now + be able to navigate back to the home screen from each of the other three." + CSDU4 Connecting Screens template_markdown_instruction: "# Navigating\r\n\r\nOnce + you start adding multiple screens to an app, you need to make sure that users + can always get where they want to go. If you forget to provide a link back + home or to a deeper page.\r\n\r\n# Do This\r\n\r\nHere's an app with four + different pages, but only the \"red\" screen is linked so far.\r\n\r\n* Add + event handlers for \"greenButton\" and \"blueButton\" to go to their respective + screens\r\n* From each of the sub pages, add a button with event handler to + navigate back to the home page\r\n* Test your app thoroughly to make sure + all of your buttons work and you can always get back home" + CSDU4 Connecting Screens_markdown_instruction: "# Navigating\r\n\r\nOnce you + start adding multiple screens to an app, you need to make sure that users + can always get where they want to go. In the next two levels you'll learn + how to make sure a user can always get back to the \"homepage\" of your app.\r\n\r\n# + Do This\r\n\r\nHere's an app with four different pages, but only the \"red\" + screen is linked so far. In this level you'll make the other two buttons + take the user to the correct screen.\r\n\r\n* Add two `onEvent()` blocks, + one each for the \"greenButton\" and \"blueButton\"\r\n* Use the `setScreen()` + block to make each button switch to the appropriate screen\r\n* Test your + app to make sure both buttons work. For example, when you click the green + button you should go to the green screen." + CSDU4 Crowdsource App Demo_markdown_instruction: "# Crowdsourcing\r\n\r\nCrowdsourcing + apps allow multiple users to submit content for everyone to use (the _source_ + of content is the _crowd_). This app is very similar to the list app, with + the main difference being that the list app assumes a single user while this + app allows all users to add to the same list and \"like\" submissions.\r\n\r\nThis + example uses a list of crowdsourced information for simplicity, but you could + display any kind of information in many different formats. A crowdsourcing + app could allow users to submit locations for display on a map, images to + go into a gallery, or any number of other types of information.\r\n\r\n# Functionality + Missing from this Prototype\r\n\r\n* User's can't create accounts or profiles\r\n* + Submitted things aren't added to the list\r\n* Clicking on the \"like\" icons + don't change their state" + CSDU4 Decision App Demo_markdown_instruction: "# Decision Maker\r\n\r\nSimilar + to the quiz app, a decision tree app asks the user a series of questions. + The primary difference between the two is that a decision tree doesn't check + for right or wrong answers, but instead attempts to give the user a suggest + or help them make a decision based on their answers.\r\n\r\nThis simple decision + maker asks only three questions, but more advanced ones actually take the + form of a tree as seen below:\r\n\r\n![](https://images.code.org/aeadfca116011949855c169905ff89a3-image-1476823699500.png)\r\n\r\nDepending + on the user's answer to each question, they're given a different page for + the next question. This allows the app to gradually narrow down the decision + one question at a time. This type of app can be really useful to help users + understand complex processes - for example, you might introduce a recycling + program by using a decision tree app to help users figure out which bin to + sort items into - first asking what material it's made out of, then whether + it is clean or not, and so on.\r\n\r\n# Functionality Missing from this Prototype\r\n\r\n* + Question buttons don't direct you to different screens\r\n* The final screen + doesn't give you a recommended decision" + CSDU4 Functionality setText button_markdown_instruction: "# setText on More + than Just Labels\r\n\r\nYou can use `setText()` to change the text of labels, + obviously, but it can also be used to change the text on _any_ element that + has text, including buttons, text input, and text areas.\r\n\r\n# Do This\r\n\r\nThe + starter program has an event handler already set up for the red button, can + you write event handlers for the other three buttons so they behave in the + same way?" + CSDU4 Functionality setText input_markdown_instruction: "# Pre-fill Input Fields + with setText\r\n\r\nYou've set the text of labels, and you've set the text + of buttons, but did you know you can also use `setText()` to pre-fill text + input fields?\r\n\r\n# Do This\r\n\r\nThis app has four buttons, each of which + should fill the \"nameInput\" field with a given name. For each button:\r\n\r\n* + Add an `onEvent` block to run when the button is clicked\r\n* In the button's + event handler, set the text of \"nameInput\" to the appropriate name\r\n\r\nWhen + you've gotten all four buttons to work, add another button that will fill + the input field with your name." + CSDU4 Functionality setText quiz 1_markdown_instruction: "# Making The Quiz + App\r\n<img src=\"https://images.code.org/b87aef1a1fcd238590b2b866f11f47c7-image-1478035551794.15.03.png\" + style=\"float:right; max-width: 200px;\">\r\nLet's look back at the quiz + app example that we talked about earlier in this lesson. Recall that we proposed + a single page that could serve three purposes:\r\n\r\n1. Display the question\r\n2. + Show if the question was answered correctly\r\n3. Show if the question was + answered incorrectly\r\n\r\n# Do This\r\n\r\nWe've already provided the screen + for a single question. Before worrying about any code, you just need to set + this up to ask a question.\r\n\r\n* Change the title to a question that you + want to ask\r\n* Change the text of the two buttons to two potential answers + to your question" + CSDU4 Functionality setText quiz 2_markdown_instruction: "# Answering the Question\r\n\r\nNow + that this screen is asking the question you want it to ask, you'll want to + make it respond to the answer buttons.\r\n\r\n# Do This\r\n\r\nInstead of + using the buttons to change screens as we did in earlier quiz apps, each one + of the answer buttons should change the title to say either \"Correct\" or + \"Incorrect.\" For each of the answer buttons:\r\n\r\n* Add an event handler + to watch the button's ID\r\n* In the event handler, set the title text to + either \"Correct\" or Incorrect\"\r\n\r\n_Challenge: Create a couple more + question screens just like this on and make the \"Next Question\" button navigate + between them._" + CSDU4 Functionality setText quiz 3_markdown_instruction: "# Don't Skip The + Question\r\n\r\nThe way this screen currently works, a user could just click + immediately on \"Next Question\" and not bother answering. Worse still, the + user could click one answer, see that it's wrong, and then click the other. + Let's use `hideElement()` and `showElement()` to prevent that.\r\n\r\n# Do + This\r\n\r\nYou'll need to hide or show all three of the buttons in order + to make this work, so let's focus on one at a time:\r\n\r\n**Next Question**\r\n\r\nThe + \"Next Question\" button should be hidden to start with, and then show up + once the question has been answered.\r\n\r\n* In Design Mode, select the \"Next + Question\" button and check the \"hidden\" checkbox. This will make sure the + button is already hidden when the app starts\r\n* In the event handler for + each of the answer buttons, add code to show the \"Next Question\" button\r\n\r\n**Answer + Buttons**\r\n\r\n* In the event handler for each button, add code to hide + the question buttons\r\n\t* If you want to allow a user to re-answer using + only the answers they haven't tried yet, you could hide just the button that + was clicked" + CSDU4 Functionality setText_markdown_instruction: "# Changing text with setText()\r\n\r\nYou + actually saw `setText()` briefly in the last lesson - it's a function that + allows you to change the text of a design element with code.\r\n\r\n# Do This\r\n\r\nUsing + the provided `onEvent()` block\r\n\r\n* Add a `setText()` block in the event + handler\r\n* From the dropdown in the `setText()` block, select \"title\"\r\n* + Make up a new title for the app and place it in the second parameter of the + `setText()` block\r\n* Run it and test the button" + CSDU4 Functionality visible_markdown_instruction: "# Controlling Visibility\r\n\r\nEarlier + in this lesson, when we were proposing ways to simplify the quiz app, we mentioned + that it was possible to show or hide design elements with code. App Lab has + two functions that let you control the visibility of an element:\r\n\r\n* + `hideElement()` makes the specified element invisible\r\n* `showElement()` + makes the specified element visible\r\n\r\n# Do This\r\n\r\nThe provided app + has an image and two buttons.\r\n\r\n* Attach an event handler to the \"Hide\" + button that hides the image when clicked\r\n* Attach an event handler to the + \"Show\" button that shows the image when clicked" + CSDU4 List App Demo_markdown_instruction: "# List Manager\r\n\r\nThe list manager + app allows user to keep track of the state of information and can be modified + to serve many different purposes, such as checking in / out loaned items, + tracking personal To Dos, or keeping track of where things are in a multi-step + process.\r\n\r\nWhile this example focuses on a single list, more sophisticated + list apps could allow the user to create multiple lists, or even move items + between lists. This app also only keeps track of the name of an item and whether + or not it is \"Done,\" but it could be extended to track and organize any + amount of information about the list times.\r\n\r\n# Functionality Missing + from this Prototype\r\n\r\n* Delete buttons don't actually delete items from + the list\r\n* Add screen doesn't actually add an item to the list" + CSDU4 Project Bug Feature_markdown_instruction: "# Improving and Iterating\r\n\r\nYou've + put your app in front of users, gathered feedback, and identified bugs and + new features - time to do something about it.\r\n\r\n# Do This\r\n\r\nEach + team member is going to implement select features and bug fixes on their own + version of the team's app. Start by selecting a sticky note from the **To + Do** column of your team's chart and moving it to the **Doing** column. For + each sticky you tackle:\r\n\r\n* Make a remix of your app at it's current + state. This ensures that you always keep a working copy of your app as you + try to add new features\r\n* Give your remix a meaningful name, such as \"Pancake + Finder - original\", or \"Pancake Finder - navigation fix\"\r\n* Return here + to work on your app\r\n* Add a comment to the top of your program describing + the feature or bug fix you are implementing\r\n* Work on your iteration until + it works. Try to stay focused on only the single feature or bug that you've + selected.\r\n* When done, move your sticky to the **Done** column, pick a + new one, and start the process over." + CSDU4 Project Functionality_markdown_instruction: "# Add Some Functionality\r\n\r\nUsing + the list you brainstormed with your team, add a single piece of new functionality + to your app.\r\n\r\n# Do This\r\n\r\nBefore adding anything new to a working + app, it's always a good idea to make a backup. Click the \"Remix\" button + in the header, give your remix a good name, and then come back here.\r\n\r\nFor + each piece of functionality you incorporate:\r\n\r\n* Make a remix of your + app at it's current state\r\n* Return here to work on your app\r\n* Add a + comment to the top of your program describing the functionality you are trying + to add\r\n* Work on your app until it works. Try to stay focused on only the + single piece of functionality you've chosen\r\n* When done, pick a new idea + and start the process over\r\n" + CSDU4 Project Import_markdown_instruction: "# Back To Your App\r\n\r\nNow that + you've had some practice with importing screens, it's time to start working + on your team's app.\r\n\r\n# Do This\r\n\r\nEach member of your team is going + to create their own copy of the app, with all of the team members' screens + imported in. This will be your copy of the app, and the copy that you will + start to add code to in the next lesson.\r\n\r\n* Collect all of the sharing + urls for your team's pages\r\n\t* You can find the share url by going back + to the last level of the previous lesson, or by finding the screen in your + [projects directory](/projects)\r\n* Import each of the screens, one at a + time\r\n\t* If you run into an ID error with one of the screens, discuss the + issue with the screen's creator so it can be fixed and imported\r\n* Delete + the default \"screen1\"\r\n* Set the main screen as the default\r\n\r\nDon't + worry about adding any code at this point; we'll get to that in the next + level." + CSDU4 Quiz App Demo_markdown_instruction: "# Quiz Me\r\n\r\nA quiz app can + be used to teach, or help reinforce, information important to your chosen + topic.\r\n\r\nAt its most basic, a quiz app is composed of a screen for each + question with two or more buttons for multiple choice answers. Each button + links to a page that either confirms that you were correct, or gives you information + about why you were were wrong.\r\n\r\nMore advanced quiz apps could include + features such as:\r\n\r\n* Different types of questions (such as matching, + free response, or even interactive games)\r\n* Randomizing the order of questions\r\n* + Changing the questions based on how we'll you're doing\r\n* Providing a + final score\r\n* Incorporating study material\r\n\r\n# Functionality Missing + from this Prototype\r\n\r\n* Questions aren't actually checked for correctness" + CSDU4 nameAgeTemplate_markdown_instruction: "# Text Input Elements\r\n\r\nSo + far we've been using `promptNum` as a simple way to get a number as input. + Now that we know a little about strings were are going to create **user interface + elements that users can use to submit text (i.e. strings) instead**. The first + and simplest example is `textInput` which you can find in Design Mode.\r\n\r\n<img + src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 + PM.png\" style=\"width: 100px\">\r\n\r\n# Do This\r\n\r\n* **Add two text + input elements to this program**, one for the name and one for the age of + the user.\r\n* **Give your text input elements descriptive and meaningful + IDs**\r\n* **In Design Mode** set their default text to prompt the user for + their name in age\r\n* **Compare your app to the example below**\r\n\r\n<img + src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 + PM.png\" style=\"float:left; width:200px;\">\r\n<br>" + CSDU6 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions + as Indexes: Using Variables\r\n\r\n* **Starter code** has been provided which + creates an list of identifiers for icons in the icon library\r\n* **Write + code** that sets the image on the screen to a random icon from the list" + CSDU6 - Arrays - indexPractice_markdown_instruction: "# Index Practice\r\n\r\n<img + src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has + been provided that creates a list called `colors`.\r\n\r\n* Use `setProperty` + and the list of colors to change the `background-color` of the buttons to + create a rainbow. The first button has been done for you." + CSDU6 - Arrays - length_markdown_instruction: "<img src=\"https://images.code.org/f02914c957acffecbadaa3646388d26c-image-1486499703151.33.50 + PM.png\" style=\"width: 200px; float:right\">\r\n\r\n# List Length\r\n\r\n* + **Starter code** has been provided which creates several long arrays.\r\n* + **Use `list.length` and `console.log`** to determine how many items are in + each array. An example of the output is below." + CSDU6 - Arrays - lengthMinus1_markdown_instruction: "# Accessing Last Item + in List\r\n\r\n* **Starter code** has been provided that which creates several + lists.\r\n* **Write Code** to display the final item in each list. Make sure + to use list.length so that your code will work even if the list shrank.\r\n" + CSDU6 - UI and Inputs - Debug Screens and IDs_markdown_instruction: "# Debug + The Program\r\n\r\nIn Unit 4 you learned how to set up the UI of an app, give + elements meaningful IDs, and switch between screens using button clicks. The + programmer that created this app did not use good IDs and that caused their + code to be buggy. Can you fix their code?\r\n\r\n* Go into Design Mode and + give everything meaningful IDs\r\n* Set up the event handlers so that the + buttons transition to the correct screen (see diagram below)\r\n\r\n![](https://images.code.org/f9c9a9b5cbcb6e1cd59b1349625b7e9d-image-1485898200882.png)" + CSDU6 - UI and Inputs - dropdown setText_markdown_instruction: "# setText and + getText\r\n\r\nOften you will want to get the text of a UI Element and use + it to set the text of another element on the screen. Can you get the text + from the dropdown when the user picks a new input and use it to set the text + of the choiceDisplay label." + CSDU6 - UI and Inputs - event type testing_markdown_instruction: "# Event Testing: + \r\n\r\nSo far you have only used the 'click' event type. However there + are lots of other event types. You are going to test out a couple different + event types for 4 different UI elements (Button, Dropdown, Slider, Text Input).\r\n\r\n**Starter + Code:** The starting code is set up to react to the *click* event for the + *button*. When that event fires a message will be logged to the console.\r\n\r\nOne + at a time, **change either the ID or event type**. Run the program and write + down you observations of when this event fires. Keep going until you have + tried all the combinations of events in the table." + CSDU6 - UI and Inputs - function_markdown_instruction: "# setColor Function\r\n\r\nAt + this point you probably have the same code inside each of your event handlers. + Remember that when you have repeated code it is good to put it into a function. + Can you use functions to get rid of the repeated code?" + CSDU6 - UI and Inputs - get set with text input_markdown_instruction: "# setText + and getText\r\n\r\nYou've seen how to use getText and setText already. Can + you make this app get the text the user typed once they hit enter and show + it in the text area at the bottom?" + CSDU6 - UI and Inputs - getNumber practice_markdown_instruction: "# getNumber\r\n\r\n**Starter + Code:** The program tries to update the valueDisplay whenever the slider value + changes but it always sets the value to 10.\r\n\r\nCan you use `getNumber()` + to get the value of the slider and update the valueDisplay as it changes?" + CSDU6 - UI and Inputs - getNumber_markdown_instruction: "# getNumber\r\n\r\n**Starter + Code:** This program creates a simple calculator but **there is something + wrong with it. Try putting in 2 + 2.**\r\n\r\nWe can fix this by using `getNumber()` + instead of `getText()`. Can you fix the program by changing `getText()` to + `getNumber()`?" + CSDU6 - UI and Inputs - getText_markdown_instruction: "# getText\r\n\r\nTry + to set up an event handler that gets the text from the dropdown whenever a + user selects a new item from the dropdown. You will need to use the getter + `getText()`. Whenever you use a getter you should save it in a variable. Use + `console.log()` to make sure it is working." + CSDU6 - UI and Inputs - hide show_markdown_instruction: "# Hide and Show\r\n\r\nIt + is a little weird that both buttons are on the screen at the same time. You + don't need the stop alarm button until the alarm is on. Can you make the + buttons only show when they are needed?\r\n\r\n* You will want the stop alarm + button to be hidden when the program starts. You can do this in design mode.\r\n\r\nHint: + When you click the trigger alarm button, you should change the text, hide + the trigger alarm button, _and_ show the stop alarm button." + CSDU6 - UI and Inputs - set slider range_markdown_instruction: "# Set Slider + Range\r\n\r\nSliders represent a range of numbers. In order to set that range + you need to set the minimum value and maximum value for each slider. Do you + remember what the range of values is you can give for each value in a RGB + color?" + CSDU6 - UI and Inputs - setProperty Image_markdown_instruction: "# setProperty + image\r\n\r\n**Note:** This level starts in Design Mode.\r\n\r\nThere is an + image element set up for you but it does not show when you leave Design Mode + because it has not been told what image to display. \r\n\r\n* Use the `setProperty()` + command to set the image of the UI Image Element on the screen.\r\n" + CSDU6 - UI and Inputs - setProperty first level_markdown_instruction: "# setProperty\r\n\r\n**Starter + Code:** There is one call to `setProperty()` which sets the text-color to + blue when you run the program.\r\n\r\nCan you add more calls to `setProperty()` + that change other things about the text when you run the program? Try to change + at least 3 more things.\r\n" + CSDU6 - UI and Inputs - setProperty_markdown_instruction: "# setProperty background-color\r\n\r\nChange + the `background-color` of a button to a new random color each time it is clicked + using `setProperty()`." + CSDU6 - UI and Inputs - setScreen_markdown_instruction: "# setScreen\r\n\r\nLets + start with a setter you have used before `setScreen()`. \r\n\r\n* Make the + About Me button on the Home page go to the About Me page.\r\n* Make the Back + button on the About Me go to the Home page." + CSDU6 - UI and Inputs - setText_markdown_instruction: "# setText\r\n\r\nWe + are going to start making an alarm app. We have already set up an event handler + for the \"triggerAlarmButton\" which will change the \"statusLabel\" text + to ON when clicked. Can you make the stop alarm button change the text to + OFF when clicked?" + CSDU6 - UI and Inputs - slider UI_markdown_instruction: "# RGB Sliders\r\n\r\n<img + src=\"https://images.code.org/f3fb468a73aa35b69d7e64deee34c7c3-image-1486080850211.12.39 + PM.png\" style=\"width:200px;float:right\">\r\n\r\nFirst step to creating + the RGB Sliders app is to set up the UI elements and event handers for the + sliders. \r\n\r\n* Can you get the screen to look similar to the one below? + Hint: The color box is a button with no text.\r\n* Can you set up 3 event + handlers that listen for when someone has finished moving the slider to a + new location? Hint: Think back to your event investigation. Which event type + do you want?" + CSDU6 - button debug_markdown_instruction: "# Debug\r\n\r\n<[gif needed]>\r\n\r\nThis + program should work like the image on the right - toggle LEDs one by one in + the direction of the button you click. Clicking the left button should cause + LEDs to toggle counter clockwise, while clicking the right button should toggle + LEDs clockwise. Find and fix all of the bugs to get the program working again." + CSDU6 - button on off_markdown_instruction: "# On and Off Buttons\r\n\r\n<[pic + needed]>\r\n\r\nRight a program that works like the image to the right. The + left button should turn on all of the color LEDs, and the right button should + turn them off again." + CSDU6 - button screen buttonL_markdown_instruction: "# Board Events\r\n\r\nThe + `onBoardEvent()` command allows you to start taking input from your Circuit + Playground. This app has two screens, \"red_sreen\" and \"blue_screen\". Using + the provided board event handler, write a program that switches to the blue + screen when the left button on your board is pressed." + CSDU6 - button screen buttonR_markdown_instruction: "# Changing the Input\r\n\r\n<img + src=\"https://images.code.org/cc903e4a0fb57b241b90abe220f027ef-image-1487707484420.04.00.png\" + style=\"float:right; margin-left: 10px; width: 50%\">\r\n\r\nUsing another + `onBoardEvent()` block, make `buttonR` change the screen back to \"red_screen\". + The first input of the `onBoardEvent()` command lets you pick which board + object to watch." + CSDU6 - button switch_markdown_instruction: "# The Toggle Switch\r\n\r\nWhile + the toggle switch is in many ways similar to the left and right buttons, the + reasons you might use it can be different. Unlike the buttons, the toggle + switch stays in whichever position you place it, so it doesn't have a \"press\" + event. In fact, you'll find that none of the events you used with buttons + are present for the toggle switch.\r\n\r\n# Do This\r\n\r\nDrag out an `onBoardEvent()` + block and select `toggleSwitch` from the first dropdown\r\n\r\n* Look at the + options available in the events dropdown. What do you think they do?\r\n* + Write a program that turns on half of the color LEDs at a time, based on the + position of the toggle switch <[pic needed]>\r\n\r\n_Challenge:_ The toggle + switch events will only fire when the switch changes, so when you start the + program you'll need to flip the switch for your code to work. Can you fix + it so that your program starts with the correct set of LEDs lit? Look in \"Circuit\" + drawer for a block that could tell you which position the toggle switch is + in." + CSDU6 - button toggle_markdown_instruction: "# Toggle with a Button\r\n\r\nUsing + `onBoardEvent()`, can you write a program that toggles the red LED when you + click the left button?" + CSDU6 - button tug o war challenge_markdown_instruction: "# Challenge\r\n\r\n_Check + with your teacher before starting this challenge_\r\n\r\nAt this point your + Tug o' War game should have basic functionality, but there are still a few + things missing. Continue fleshing out your game. You can make the game your + own in any way you like, but you might add some of the following features:\r\n\r\n* + Switch to a \"Win\" screen when one player reaches their target\r\n* Add a + \"Reset\" button to start the game over\r\n* Add different difficulty levels + or \"handicaps\" (one user may move two on each click while the other only + moves one)\r\n* Add visuals to make the game look more interesting\r\n* Use + the color LEDs to show the score" + CSDU6 - button tug o war left button_markdown_instruction: "# Making Both Buttons + Work\r\n\r\nIf you were successful in the last level, the slider should move + to the right when the right button is pressed. To get the left button to work + you need to add another event handler, only this time it should **decrease** + the variable _score_ and update the slider on each press." + CSDU6 - button tug o war right button_markdown_instruction: "# Tug o' War\r\n\r\nLet's + start working on a two player Tug o' War game. Each player will be assigned + one of the two hardware buttons (`buttonL` or `buttonR`), and they play the + game by clicking as quickly as possible. Each time one of the buttons is clicked, + it should move the slider \"tug_slider\" in the direction of that button.When + the slider gets to one of the ends (either -10 or 10), that player wins.\r\n\r\n# + Do This\r\n\r\nFirst we'll get the right button working. You've already + been provided an event handler for `buttonR` - when the \"press\" event occurs, + your program should:\r\n\r\n* Increase the variable _score_ by one\r\n* Set + the value of \"tug_slider\" to the new score\r\n\r\nDon't worry about the + other button yet, we'll get to that in the next level." + CSDU6 - button up down predict question_markdown_instruction: "What do you + think will happen when you run this code? What will happen when you press + the left and right buttons?" + CSDU6 - button up down_markdown_instruction: "# Down and Up Events\r\n\r\nAs + you saw in the last level, the \"down\" and \"up\" events allow you to respond + to buttons being pressed down and being released back up, respectively.\r\n\r\n# + Do This\r\n\r\nUsing those events, can you write a program that shows the + label with id \"alert_message\" while the button is pressed down, but hides + it again when the button is released?" + CSDU6 - ch 1 exemplar LEDs_markdown_instruction: "# An Example Using Color + LEDs\r\n\r\nHere's an example app that uses the color LEDs, event handlers, + and a for loop to create an visual color mixer. Run this app and analyze how + you think it was written." + CSDU6 - ch 1 project design_markdown_instruction: "# Set Up Your Screen\r\n\r\nUsing + the project guide, set up the elements of your screen in Design Mode." + CSDU6 - ch 1 project events_markdown_instruction: "# Event Handlers\r\n\r\nSet + up an event handler for each of the elements you plan to use for input. Don't + worry yet about getting the them fully functional, but you might use `console.log()` + statements to help with testing." + CSDU6 - ch 1 project finish_markdown_instruction: "# Add the Finishing Touches\r\n\r\nGo + back to your project guide and check to see that your app is addressing the + goals you set out. This is your chance to add finishing touches, improve functionality, + and get your app ready to be used by other people. When you're are finished, + and have thoroughly tested it, use the share button to share your app out + with others." + CSDU6 - ch 1 project functions_markdown_instruction: "# Functions\r\n\r\nCreate + all of the functions that you identified in your project guide." + CSDU6 - ch 1 project output_markdown_instruction: "# Board Output\r\n\r\nAt + this point you should have the structure of your app mostly fleshed out. Test + your program as is to make sure that everything currently works as expected. + Once you are confident in your program as-is, add the code to send output + to your board." + CSDU6 - for loop - 1_markdown_instruction: "# For Loop - Looping Through A + List\r\n\r\n* Print out all the items in the colors list using a for loop" + CSDU6 - for loop - 10_markdown_instruction: "# For Loop - Looping Through A + List\r\n\r\nYou saw this for loop on the last level:\r\n\r\n<pre>\r\nfor(var + i = 0; i < daysOfWeek.length; i++){\r\n console.log(i);\r\n}\r\n</pre>\r\n\r\nWhich + prints the numbers from 0 to one less than the list length in this case (0 + to 6). Another way of looking at this is that it prints all the index values + in the list! This might be helpful to loop through a list!\r\n\r\n**Starter + Code:** This program writes out each item of the array individually. \r\n\r\n**Write + Code** that uses the for loop from the last level to print out all the items + in the list." + CSDU6 - for loop - 2_markdown_instruction: "# For Loop - Condition\r\n\r\n* + Run the program - how many times does it print?\r\n* Change the 2 to another + positive number less than 5. What happens?" + CSDU6 - for loop - 3_markdown_instruction: "# For Loop - Starting Value\r\n\r\nYou + can change where a for loop starts counting.\r\n\r\n* Run the program what + number does it start counting at?\r\n* Try changing the 5 to a different number\r\n\t* + What happens if you make the number negative?\r\n * What happens if you + make the number bigger than 10 (since the condition is i < 10)?" + CSDU6 - for loop - 4_markdown_instruction: "# For Loop - Incrementor \r\n\r\n* + Run the program what numbers is it printing?\r\n* Try to change the 2 to another + number, what happens?" + CSDU6 - for loop - 6_markdown_instruction: "# For Loop - Condition Practice\r\n\r\nChange + the condition of the for loop so that the word message prints 6 times." + CSDU6 - for loop - 7_markdown_instruction: "# For Loop - Starting Value Practice\r\n\r\nEdit + the starting value and the condition of the loop so that it counts from 50 + to 100.\r\n" + CSDU6 - for loop - 8_markdown_instruction: "# For Loop - Incrementor Practice\r\n\r\nCan + you make the program count from 30 to 60 by 3s? (30,33,36,39......57,60)" + CSDU6 - for loop - 9_markdown_instruction: "# *for* Loop with *if*\r\n\r\nSometimes + we want to find values in an array that meet certain conditions. We can add + an **`if` statement inside the `for` loop** to individually check every value + within the array. To practice this, we will create a `for` loop that will + **display every value in the array greater than 5**.\r\n\r\n# Do This:\r\n** + Starter code** has been been provided that creates an array of random values.\r\n\r\n* + Add a `for` loop that references every index in the array.\r\n\r\n* Add an + `if` statement inside the `for` loop that **displays every value in the array + greater than 5** using `console.log`\r\n\t![](https://images.code.org/969077ff23232e410ce17520b0a71e1e-image-1447390972867.gif)\r\n \r\n* + **Note:** Because the original array is being constructed with random values + it's *possible* that it might not have any values greater than 5. Just run + the program a few times to make sure it works. An example of the possible + output is below.\r\n\r\n![](https://images.code.org/266e23afc3533ebd63b393b2ee8682d8-image-1447796380510.39.26 + PM.png)\r\n" + CSDU6 - for loop - around for loop_markdown_instruction: "# Before and After + For Loop\r\n\r\n* Run this code and check out when the console.log statements + before and after the for loop print." + CSDU6 - for loop - button grid 1_markdown_instruction: "# Random Button Colors\r\n\r\n**Starter + Code:** An array with the name of the 30 buttons on the screen (not including + the New Pattern button) is provided for you. \r\n\r\n**Write Code** that loops + through all the buttons on the screen and gives them each a random color when + the New Pattern Button is clicked." + CSDU6 - for loop - color buttons with for_markdown_instruction: "# Lists\r\n\r\n<img + src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\nTake a look at the code + you wrote in the last level. Can you make it better by using a loop to set + the button colors instead?" + CSDU6 - for loop - color buttons_markdown_instruction: "# Lists\r\n\r\n<img + src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has + been provided that creates a list of colors and a list of the buttons on the + screen. In addition there is code to set each button to a color.\r\n\r\n**Change + the code** so that instead of the name of each button being using in the call + to `setProperty` the list index is used instead. For example:\r\n\r\n<pre>\r\nsetProperty(buttons[0],\"background-color\", + colors[0]);\r\n</pre>" + CSDU6 - for loop - condition with for_markdown_instruction: "# *for* Loop with + *if*\r\n\r\nAnother way to use a for loop is to count the number of occurances + of something in list. \r\n\r\n** Starter Code:** The program generates an + list of 5 random numbers from 1 to 3. \r\n\r\n**Write Code:** Write a program + that prints the number of 2s in the list.\r\n\r\n* You will need to write + an if statement to check if the current value of the list is equal to 2\r\n* + Instead of printing that value inside the if statement like on the last level + you will want to increment a variable that keeps track of the number of 2s.\r\n* + Print out the variable after the for loop runs!" + CSDU6 - for loop - count down_markdown_instruction: "# Counting down\r\n\r\nSo + far all the programs you have written count up. Can you make this program + count down from 10 to 1? Hint: You need to change something about all three + parts of the for loop!" + CSDU6 - for loop - next day_markdown_instruction: "# Accessing Items in a List\r\n\r\n**Starter + Code:** There is a list of days of the week provided as well as a command + to set the label on the screen.\r\n\r\n**Do This:** Can you change the index + value so that the page displays \"Today is: Tuesday\"" + CSDU6 - for loop - predict repeat_markdown_instruction: "# For Loop - Condition + Practice\r\n\r\nChange the condition of the for loop so that the word message + prints 6 times." + CSDU6 - for loop - repeatedCode_markdown_instruction: "# Refactoring To For + Loop\r\n\r\nFor loops are just a way of simplifying repeated code and make + it easier to update in the future.\r\n\r\n* Can you take the repeated code + here and turn it into a for loop?" + CSDU6 - for loop - why for_markdown_instruction: "# Lists\r\n\r\n<img src=\"https://images.code.org/d3b8a9275703944808bc832c02f19fda-image-1486501806089.09.45 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\nWhy are loops so great? Well + lets try something out.\r\n\r\n* Add another button to your screen in design + mode.\r\n* Add a color for that button to the end of your list of colors\r\n* + Add the button name for that button to the end of your list of buttons\r\n* + Run your program!\r\n\r\nDid it work? Notice you never changed the for loop + at all!" + CSDU6 - for loop - winning num_markdown_instruction: "# Debug\r\n\r\nThis program + is supposed to generate 3 random winning numbers from 1 to 5. There is a list + of numbers but it seems like there are some bugs with generating the 3 random + numbers when the Draw Numbers button is clicked. Can you debug the program? + Check to make sure you can get every number in every slot of the winning numbers + area. " + CSDU6 - for loops - lights picker_markdown_instruction: "# Challenge: More + Patterns\r\n\r\nYour work on the color light patterns is back:\r\n\r\n* Consider + using the all lights on and all lights off functions you made on the last + level here.\r\n* Can you edit the patterns you created to use for loops where + appropriate?\r\n* Can you add more patterns that use for loops?" + CSDU6 - lists - lists 1_markdown_instruction: "# Lists\r\n\r\nLet's practice + adding items and printing out lists.\r\n\r\n* Add a `console.log()` command + to print out the lettersList\r\n* Add the letter \"c\" to the letters list + so it prints [a,b,c,d]" + CSDU6 - lists - lists 2_markdown_instruction: "# Create Your Own Lists\r\n\r\n**Write + code:** to create _one or more_ of the following lists:\r\n\r\n* The numbers + from 1 to 10\r\n* A list of the names of 5 different shapes\r\n* The names + of the months of the year" + CSDU6 - lists - lists 3 - out of bounds_markdown_instruction: "# Accessing + Items in a List\r\n\r\n**Starter Code:** There is a list of days of the week + provided as well as well as a console.log statement to access the spot that + holds \"Friday\" in the list. \r\n\r\n**Do This:** Can you add three more + console.log statements that access the spots that hold:\r\n\r\n* Thursday\r\n* + Monday\r\n* Sunday" + CSDU6 - lists - lists 3_markdown_instruction: "# Accessing Items in a List\r\n\r\n**Starter + Code:** There is a list of days of the week provided as well as a command + to set the label on the screen.\r\n\r\n**Do This:** Can you change the index + value so that the page displays \"Today is: Tuesday\"" + CSDU6 - lists - lists 5_markdown_instruction: "# Debug\r\n\r\nThis program + is supposed to generate 3 random winning numbers from 1 to 5. There is a list + of numbers but it seems like there are some bugs with generating the 3 random + numbers when the Draw Numbers button is clicked. Can you debug the program? + Check to make sure you can get every number in every slot of the winning numbers + area. " + CSDU6 - sensor love tester demo_markdown_instruction: "# \"Love\" Tester\r\n\r\nThe + \"Love\" Tester is a classic carnival game. It works by having a user place + their palm flat on a sensor or hold a metal handle. The tester then displays + how in love that person is. The simplest version of these machines simply + measure the temperature of the user’s hand and equate more love with a higher + temperature.\r\n\r\nTest out this \"Love\" Tester by holding your thumb down + on your Circuit Playground's temperature sensor. Compare your results with + those of your neighbors - do all of the boards respond in the same way?" + CSDU6 - sensor theremin demo_markdown_instruction: "# Light Theremin\r\n\r\nA + theremin is an instrument that can be played without the musician actually + touching it! Traditional theremins use magnetic fields for user interaction, + but a simpler version can be made by detecting and reacting to light.\r\n\r\nTest + out this theremin by waving your hand over the light sensor on your Circuit + Playground. How does the tone change as the amount of light detected changes?" + CSDU6 - sensor vu meter demo_markdown_instruction: "# VU Meter\r\n\r\nMany + stereo systems feature a row of LEDs that light up as the music plays. This + display is called a Volume Unit (VU) Meter, and it allows the user to see + how loud the music is as it plays.\r\n\r\nTest out this VU Meter by speaking + or otherwise making noise near the Circuit Playground. How do the lights and + display change as the volume of ambient noise changes?" + CSDU6 - sensors challenge_markdown_instruction: "# Challenge\r\n\r\n_Check + with your teacher before pursuing this challenge_\r\n\r\nNow that you've + practiced taking input from the various analog sensors and changing their + scale to meet your needs, can you come up with an interesting use for sensor + data? It's easy to display the raw numbers coming out of a sensor, but far + more interesting to present that data in different ways.\r\n\r\nConsider the + following ways you might communicate sensor data:\r\n\r\n* Use the board outputs\r\n* + Change the width, height, or position of a UI element\r\n* Use conditionals + to display different images based on sensor values" + CSDU6 - sensors experiment_markdown_instruction: "<iframe width=\"370\" height=\"620\" + style=\"float:left; margin-right: 25px; border: 0px;\" src=\"https://studio.code.org/projects/applab/iCWa6Gsb-W4StwmqFX5TkA/embed\"></iframe>\r\n\r\n# + Sensor Experiment\r\n\r\nRun the program to the left and experiment with your + board. Try interacting with your board in many different ways to figure out + what each sensor might be. Once you've completed the experiment, answer the + following questions for each sensor in the text box below.\r\n\r\n* What does + this sensor measure?\r\n* What is it's maximum value?\r\n* What is it's + minimum value?" + CSDU6 - sensors light_markdown_instruction: "# Light Sensor Updates\r\n\r\nThis + app is very similar to the last, but we've added a button with the ID \"update_button\". + Write a program that displays the current value of the light sensor every + time the update button is clicked." + CSDU6 - sensors love tester 1_markdown_instruction: "# \"Love\" Tester: Collecting + and Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat + scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an + event handler to continually collect data from your chosen sensor and use + `console.log()` to track how it changes to user interaction. If necessary, + change the scale of your input to meet your needs.\r\n\r\n_Tip: Consider which + type of data is easiest to use from the temperature sensor - the raw value, + temperature in C, or temperature in F._" + CSDU6 - sensors love tester 2_markdown_instruction: "# \"Love\" Tester: Displaying + Output\r\n\r\nHow will your collected data be displayed?\r\nDoes your data + need to be transformed or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace + your call to `console.log()` with the kind of output you need for your project.\r\n\r\n_Tip: + You may want a conditional to determine which output to display depending + on input._" + CSDU6 - sensors love tester 3_markdown_instruction: "# \"Love\" Tester: Finishing + it Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# + Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning + guide to make sure that the app meets your initial goals." + CSDU6 - sensors predict question_markdown_instruction: "# Make a Prediction\r\n\r\nRead + the code in this program and make a prediction below. What do you think this + program will do when you run it? How is the user intended to interact with + the board?" + CSDU6 - sensors rgb part 1_markdown_instruction: "# Displaying Sensor Readings + in Color\r\n\r\nIn the previous prediction level you saw how the `setScale()` + method can convert the full range of sensor readings (0-1023) into a range + that can be used for RGB values (0-255). Let's build on that idea to make + an app that can communcate the current value of all three analog sensors with + a single color.\r\n\r\n# Do This\r\n\r\nTo start, we just need to set the + sensor scales correctly - don't worry about actually setting the color of + the background yet.\r\n\r\n<img src=\"https://images.code.org/39de88e19682e905a1e08d5f12398f35-image-1488995498849.png\" + style=\"float: right; width: 300px; margin-left: 20px;\"/>\r\n\r\n* Using + the `sensor.setScale()` block, set each of the three analog sensors to the + right scale for an RGB color channel.\r\n* Create a variable for each of the + three colors and assign each one to the `.value` of a different sensor.\r\n* + Use `console.log()` to test that your variables are in the correct range.\r\n\r\n_Hint: + Order matters. You need to set the scale of a sensor before checking it's + value_" + CSDU6 - sensors rgb part 2_markdown_instruction: "# Putting Color on the Screen\r\n\r\nNow + that your sensor data is in a scale that works for RGB, you can go about setting + the screen color.\r\n\r\n# Do This\r\n\r\n* Add a `setProperty()` block and + set it to change the \"background-color\" property of \"screen1\".\r\n* Add + an `rgb()` block to the last parameter of `setProperty()`.\r\n* Use the three + color variables you created as inputs to the `rgb()` block." + CSDU6 - sensors rgb part 3_markdown_instruction: "# Continuous Updates\r\n\r\nThis + sensor-to-color app isn't super useful if it only sets the color once when + you start the app. You can use the sensors' \"data\" event to make your app + continually update the background color every time the value changes.\r\n\r\nMove + your `setScale()` blocks into a an event handler for one of the sensors to + make the app update continually." + CSDU6 - sensors sound_markdown_instruction: "# Reading the Sound Sensor\r\n\r\nIn + this app we've already added a text label with the id \"sound_value\". Using + the `soundSensor.value` block. display the value of the sound sensor." + CSDU6 - sensors temp f c_markdown_instruction: "# Temperatures in Fahrenheit + and Celsius\r\n\r\nWhile the sound, light, and temperature all behave in the + same fashion (converting an analog input to a 10 bit number), the temperature + sensor is often used a bit differently. Typically if you are using a temperature + sensor, you want to get a temperature in Fahrenheit or Celsius, not just a + number in a range. To help with this, the temperature sensor how two special + blocks, `tempSensor.F` and `tempSensor.C`.\r\n\r\n# Do This\r\n\r\nUsing an + event handler, write a program that continuously updates the labels \"temp_c\" + and \"temp_f\" with the appropriate temperature readings." + CSDU6 - sensors temp_markdown_instruction: "# Make a Thermometer App\r\n\r\nSimilar + to the sensors you saw in the previous levels, you can get the raw value of + the temperature sensor using `tempSensor.value`. For the temperature sensor, + however, there are some more interesting properties available. `tempSensor.F` + and `tempSensor.C` will convert the raw input value to either Fahrenheit or + Celsius.\r\n\r\n# Do This\r\n\r\nMake a simple thermometer app that reads + in values from the temperature sensor. Your app can display the temperature + in either Fahrenheit or Celsius (or both!)\r\n\r\n_Challenge: can you make + your app continually update the temperature readings?_" + CSDU6 - sensors theremin 1_markdown_instruction: "# Light Theremin: Collecting + and Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat + scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an + event handler to continually collect data from your chosen sensor and use + `console.log()` to track how it changes to user interaction. If necessary, + change the scale of your input to meet your needs." + CSDU6 - sensors theremin 2_markdown_instruction: "# Light Theremin: Displaying + Output\r\n\r\nHow will your collected data be displayed?\r\nDoes your data + need to be transformed or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace + your call to `console.log()` with the kind of output you need for your project." + CSDU6 - sensors theremin 3_markdown_instruction: "# Light Theremin: Finishing + it Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# + Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning + guide to make sure that the app meets your initial goals." + CSDU6 - sensors vu meter 1_markdown_instruction: "# VU Meter: Collecting and + Scaling Input\r\n\r\nWhich sensor do you need to take input from?\r\nWhat + scale of input is appropriate for this app?\r\n\r\n# Do This\r\n\r\nAdd an + event handler to continually collect data from your chosen sensor and use + `console.log()` to track how it changes to user interaction. If necessary, + change the scale of your input to meet your needs.\r\n\r\n_Tip: If you are + going to use the 10 color LEDs for output, how should you set the scale of + your sensor?_" + CSDU6 - sensors vu meter 2_markdown_instruction: "# VU Meter: Displaying Output\r\n\r\nHow + will your collected data be displayed?\r\nDoes your data need to be transformed + or processed before being displayed?\r\n\r\n# Do This\r\n\r\nReplace your + call to `console.log()` with the kind of output you need for your project.\r\n\r\n_Tip: + You may want to use a conditional to determine which LEDs to turn on, and + which one's to turn off_" + CSDU6 - sensors vu meter 3_markdown_instruction: "# VU Meter: Finishing it + Up\r\n\r\nDoes your app meet the minimum requirements of its objective?\r\n\r\n# + Do This\r\n\r\nAdd the finishing touches to your app. Return to your planning + guide to make sure that the app meets your initial goals." + CSDU6 - timed loop challenge_markdown_instruction: "# Challenge\r\n\r\n_Ask + your teacher before embarking on this challenge_\r\n\r\nUsing your new _timed + loop_ skills, create an interesting program of your own design. Consider using + multiple loops running at different speeds, or combining _timed loops_ with + the `blink()` and `play()` helpers you saw in the previous level.\r\n\r\nYou + can either start from scratch here, or remix any of the earlier levels in + this lesson." + CSDU6 - timed loop console.log()_markdown_instruction: "# Starting From Scratch\r\n\r\nNow + that you've got some practice with `timedLoop()`, let's see if you can set + one up from scratch.\r\n\r\n# Do This\r\n\r\n* Get a `timedLoop()` block from + the _Control_ drawer in your toolbox\r\n* Change the _ms_ input so that the + loop runs twice a second\r\n* Inside the loop, write the console with `console.log()`" + CSDU6 - timed loop for LEDs_markdown_instruction: "# Turn on Each RGB LED and + Exit\r\n\r\nUsing a _timed loop_ in place of a _for loop_ loop requires that + you set up a counter variable, increment it each time the loop is run, and + use a conditional to determine when to exit the loop. Set up a _timed loop_ + to turn on each of the color LEDs one at a time and then exit. Refer back + to the previous page for examples." + CSDU6 - timed loop helpers_markdown_instruction: "# Timed Loop Alternatives\r\n\r\nBlinking + lights and playing notes are common enough activities that we've provided + some helpers to do them more easily.\r\n\r\n# Do This\r\n\r\nRun this code + to see how the helpers work, and then **discuss** with a neighbor how you + might do this with a _timed loop_." + CSDU6 - timed loop question timed_markdown_instruction: "What do you think + will happen when you run this code?" + CSDU6 - timed loop random blink_markdown_instruction: "# Timed Blinking\r\n\r\nThe + provided code toggles a randomly selected color LED once. Place that line + inside a timed loop to make a randomized pattern of blinking lights." + CSDU6 - timed loop random sound exit_markdown_instruction: "# Ending The Song + and Light Show\r\n\r\nHere's the randomized light and music app you created + earlier. Using the `stopTimedLoop()` command, can you make the program stop + at some point? You can choose one of the following ways to stop:\r\n\r\n* + Use a _counter_ variable and stop the loop after the counter has reached a + certain point (like a _for loop_)\r\n* Add a button and event handler to call + `stopTimedLoop()` when clicked.\r\n\r\n_Make sure you also turn off all of + the LEDs when the show is over!_" + CSDU6 - timed loop random sound_markdown_instruction: "# Disco Dance Party\r\n\r\nAdding + some sound to your blinking lights would really kick this program up a notch.\r\n\r\n# + Do This\r\n\r\n* At the top of the program, create an list of notes, such + as `var notes = ['C4', 'D4', 'E4']`\r\n* Inside the timed loop, randomly + select one of the notes to play with `buzzer.note()`\r\n\r\n_Challenge: By + default the lights are all blinking white - can you set them to random colors?_" + CSDU6 - timed loop smiley event_markdown_instruction: "# What Happens Between + Repetitions\r\n\r\nWhen the `timedLoop()` is waiting for the next repetition, + the rest of your program is free to do whatever else it needs to do, including + respond to events.\r\n\r\nAdd an event handler for the \"smiley\" image. You + can make the event do whatever you like - just test it to make sure that your + event responds each time the image is moved.\r\n\r\n**Heads Up**: Make sure + to put your event handler **outside** of the loop, otherwise a new event handler + will be added _every time your loop is run!_ \r\n\r\n_Challenge: At this point + you've got the start of a simple clicker gamer. Consider keeping track of + score, or adding additional event handlers._" + CSDU6 - timed loop smiley rand y_markdown_instruction: "# Infinite Loop\r\n\r\nThe + `timedLoop()` is really useful not only for looping code at a slower speed, + but also if you want to a loop to run infinitely. The provided program moves + the image \"smiley\" to a random x position every second, can you make the + image also move to a random y?" + CSDU6 AppLab Input 1_markdown_instruction: "# Input in App Lab\r\n\r\n_You + don't need to make any changes to the code here_\r\n\r\nTake a minute to + read through the code and run the program. Discuss with a partner:\r\n\r\n1. + What is the source of input?\r\n2. Where and how does the program check for + input?\r\n3. What does the program do when it gets the right input?\r\n3. + What is the program doing when there is no input?" + CSDU6 Circuit Playground Test_markdown_instruction: "# Test Your Board\r\n\r\nThis + level is just a quick test to make sure your board is working. To run this + test, do the following:\r\n\r\n1. Plug your board into your computer with + a USB cable\r\n2. Click \"Run\"\r\n3. Wait a few seconds for either a Success + or Error screen to pop up\r\n4. If your test was successful, move on to the + next level. If not, try some of the troubleshooting steps\r\n\r\n## Troubleshooting\r\n\r\nThere + are a number of things that could prevent your test from passing.\r\n\r\n1. + Try refreshing the page and running the test again (you should refresh the + page for each of the following ideas as well)\r\n2. Try connecting your board + to a different USB port\r\n3. Try a different USB cable. Some USB cables can + only be used for charging, so make sure your cable supports data transfer!\r\n4. + Try a different board\r\n5. Go to [studio.code.org/maker/setup](/maker/setup) + to run a more detailed test" + CSDU6 GameLab Input 1_markdown_instruction: "# Input in Game Lab\r\n\r\n_You + don't need to make any changes to the code here_\r\n\r\nTake a minute to + read through the code and run the program. Discuss with a partner:\r\n\r\n1. + What is the source of input?\r\n2. Where and how does the program check for + input?\r\n3. What does the program do when it gets the right input?\r\n3. + What is the program doing when there is no input?" + CSDU6 LED alarm silent_markdown_instruction: "# Silent Alarm\r\n\r\nHere's + the alarm app that you started in the last lesson. Right now it doesn't do + much, so let's see if we can make it more useful by hooking it up to your + board. When the alarm is triggered, turn on the red LED. When the alarm is + stopped, turn the LED off again.\r\n\r\n# Do This\r\n\r\nAdd `led.on()` and + `led.off()` blocks to the events that trigger and disable the alarm.\r\n\r\n_Notice + that the LED blocks have been moved to a new drawer called Circuit_" + CSDU6 LED basics led.off()_markdown_instruction: "# Turn that LED Off\r\n\r\nJust + as you can turn your red LED on using `led.on()`, you can turn it back off + again with `led.off()`. You'll need to add a second button with an event + handler that calls `led.off()`.\r\n\r\n# Do this\r\n\r\nAdd a second button + and use its \"click\" event to turn off the LED\r\n\r\n* Drag out a new button + in Design Mode and give it a good ID\r\n* Insert an event handler for your + newly created button\r\n* Drag an `led.off()` command into your new event + handler\r\n\r\nNow you should have two buttons, one that turns the LED on, + and another that turns it off.\r\n\r\n_Challenge: Can you come up with other + ways to turn on and off the LED? Could you do it with a single button?_" + CSDU6 LED basics led.on_markdown_instruction: "# Turn on that LED\r\n\r\nThe + red LED on your board is represented in code by an object called `led`. Similar + to the sprite objects in Game Lab, you can use _dot notation_ to control the + LED. Try using the command `led.on()` to make your red LED light up when the + program is run.\r\n\r\n# Do this\r\n\r\n* Drag out the `led.on()` block and + place it underneath the comment\r\n* Run the program\r\n* Bask in the warm + red glow of your LED!" + CSDU6 LED basics onEvent_markdown_instruction: "# Turn on that LED - with a + Button!\r\n\r\nAs exciting as an always-on red LED is, an LED that you can + turn on with the click of a button seems much more useful. If you add a button + to your screen in Design Mode, then you can use move your `led.on()` command + into an `onEvent()` block.\r\n\r\n# Do this\r\n\r\nAdd a button and use its + \"click\" event to turn on the LED\r\n\r\n* Drag out a new button in Design + Mode and give it a good ID\r\n* Insert an event handler for your newly created + button\r\n* Move the code that turns your LED on _inside_ the button's event + handler\r\n\r\nIf everything worked out, you should see that your LED starts + out off, but turns on when you click the button!" + CSDU6 buzzer alarm_markdown_instruction: "# Noisy Alarm\r\n\r\nBack to the + Alarm now - now with the buzzer we can make this thing really sound like an + alarm. Using `buzzer.frequency()` and `buzzer.stop()` make your alarm play + a sound when it goes off." + CSDU6 buzzer freq_markdown_instruction: "# Playing Sounds\r\n\r\nThe `buzzer.frequency()` + command takes two inputs - the first is the _frequency_ of the sound to be + played (higher numbers = higher sounds), and the second is the _duration_ + of the sound (how long it should be played)\r\n\r\n# Do This\r\n\r\nThe provided + app has three buttons with event handlers. Add a `buzzer.frequency()` command + to each of the event handlers so that the buzzer plays the appropriate sound + (a low, medium, or high note)." + CSDU6 buzzer stop_markdown_instruction: "# Playing Longer Sounds\r\n\r\n<img + src=\"https://images.code.org/e5513675e74233d4fe55a0826376b83f-image-1487622642991.gif\" + style=\"float: right; margin: 10px;\">\r\n\r\nThe _duration_ input of the + `buzzer.frequency()` command is an _optional_ input - meaning that you don't + need to use it. You can remove an optional input by clicking the left arrow + next to it.\r\n\r\nBy removing the duration, you are telling the buzzer to + buzz continuously. You'll notice that there's a new block in the toolbox + called `buzzer.stop()` to use in this case.\r\n\r\n# Do This\r\n\r\nHere's + an app with two buttons, a Start and a Stop. Make these buttons Start and + Stop the buzzer\r\n\r\n* Add an event handler for each button\r\n* When the + Start button is clicked, make the buzzer play continuously\r\n* When the Stop + button is clicked, stop the buzzer from playing\r\n\r\n" + CSDU6 light sensor alarm_markdown_instruction: "# Auto Alarm\r\n\r\nLet's + revisit the alarm app one last time. When we last updated this app we made + it turn on or off the buzzer in addition to the LED, but it still needs to + be manually triggered. Now that we know how to use sensor events, you can + make the alarm trigger automatically!\r\n\r\n# Do This\r\n\r\nUsing the an + event handler for the light sensor, make the alarm turn on when it sees light. + You can test the alarm by placing an object like a piece of paper over the + board - if someone tries to take the piece of paper your alarm should start + buzzing.\r\n\r\n_Challenge: Can you make both the buttons and the sensor play + nicely together?_" + CSDU6- predict event types_markdown_instruction: "# Predict: Event Type\r\n\r\nSo + far you have really only used the click event type with buttons. There are + many different event types you can use in App Lab. Look at the code and predict + when each of the messages will print to the console log." + CSDU6L06 - lists and colorLeds - Light Display_markdown_instruction: "# Blink\r\n\r\nMake + lights blink \r\n\r\n" + CSDU6L06 - lists and colorLeds - blink_markdown_instruction: "# Blink\r\n\r\nMake + lights blink \r\n\r\n" + CSDU6L06 - lists and colorLeds - create light pattern_markdown_instruction: "# + Light Pattern\r\n\r\nFind a partner and bring your light patterns together.\r\n\r\nSet + up the app so the user can use what light pattern they want to see. You should + put each of your light displays in a function to make this easier" + CSDU6L06 - lists and colorLeds - debug_markdown_instruction: "<img src=\"https://images.code.org/a2b5050f76bdb262713ce52f0356fb04-image-1486151096632.JPG\" + style=\"width:250px; float:right\">\r\n# Debug: colorLeds\r\n\r\nCan you debug + the index values so that the rainbow shows up on the board like in the picture?\r\n\r\n" + CSDU6L06 - lists and colorLeds - intensity_markdown_instruction: "# Changing + Brightness\r\n\r\nSometimes you want to do more than just turn a light on + or off, you might want to set a specific brightness. The `intensity()` command + lets you set an LED's brightness (or _intensity_) from 0 - 100. Under the + hood, this works just like `buzzer.frequency()` by rapidly turning the LED + on and off to make it seem dimmer.\r\n\r\n# Do This\r\n\r\nThe provided program + has a slider that goes from 0 to 100 with an event handler. In the event handler, + set intensity of your color LEDs to the value of the slider." + CSDU6L06 - lists and colorLeds - light pattern off_markdown_instruction: "# + Turning It Off\r\n\r\nWhen you start this app your lights are off, but as + soon as choose a pattern, there's no way to turn the lights back off!\r\n\r\n# + Do This\r\n\r\nCreate a function that turns all of the LEDs off, and then + add a \"Off\" button to your app and make it turn off all of the color LEDs." + CSDU6L06 - lists and colorLeds - pulse_markdown_instruction: "# Pulse\r\n\r\nMake + lights pulse\r\n\r\n" + CSDU6L06 - lists and colorLeds - set color_markdown_instruction: "# Adding + Some Color\r\n\r\nYou probably noticed when you used `colorLeds[0].on()` in + the last level, the LEDs turned on as white. If you don't specify a color, + `on()` will turn on all three parts of the LED (red, green, and blue) to produce + white. You'll see a new command in the toolbox called `colorLeds[0].color()` + which lets you specify a color, either as a string like \"blue\" or an RGB + value using color `color()` command.\r\n\r\n# Do This\r\n\r\nUse the `.color()` + command to set each of the color LEDs to a different color." + CSDU6L06 - lists and colorLeds - song list_markdown_instruction: "<img src=\"//curriculum.code.org/images/circuitplayground/colorLedonoff.gif\" + style=\"float: right; margin: 10px;\">\r\n\r\n# colorLeds\r\n\r\nThe color + LEDs can use the same basic commands that you used with the red LED, such + as `on()` and `off()`. Using the provided buttons, write a program that turns + on and off the bottom two color LEDs (the one's furthest away from the USB + cable.\r\n\r\n# Do This\r\n\r\nAdd event handlers to the provided buttons + \"on_button\" and \"off_button\" that turn on and off the bottom two color + LEDs. Which positions in the `colorLeds` list are those two LEDs?\r\n\r\n" + CSDU6L06 - lists and colorLeds - toggle_markdown_instruction: "# Toggle\r\n\r\nThe + `.toggle()` command works like a light switch - whenever you call it on an + LED, the light will turn on if it was off, or off if it was on. This can be + a really useful alternative to using both on and off.\r\n\r\n# Do This\r\n\r\nChoose + a few LEDs and write a program that toggles them on and off when you click + the Toggle button.\r\n" + CSDU6L06 - lists and colorLeds -solo light pattern_markdown_instruction: "# + Light Patterns\r\n\r\nThis app already has one light pattern program, which + can be activated by clicking a button. Notice that we put this pattern into + a function to make the code cleaner and clearer.\r\n\r\n# Do This\r\n\r\nCreate + a light pattern function of your own - maybe the colors of your favorite holiday, + college, sports team, or try to create an image with the lights.\r\n\r\nAfter + you've created your new function, add a button and event handler so that + you can switch between the two light patterns." + CSDu2 IP CC Search_markdown_instruction: "# Finding Media\r\n\r\nNow that your + content is in place, it's time to find some good images and other media to + help make your page look better, and potentially strengthen your argument.\r\n\r\nBecuase + the Creative Commons provides such a simple way to know what media you can + and can't use, a lot of search engines have integrated Creative Commons filtering + to ensure they only give you results you can use. The Creative Commons search + page (linked below) is a compilation of CC friendly search engines that you + can use to find media for your page.\r\n\r\n# Do This\r\n\r\nUsing the Creative + Commons Search page, find a handful of pictures that you'll want to use on + your web pages. By default the search is set to the most restrictive settings. + Next to the the text **I want something that I can...** you can uncheck _use + for commercial purposes_. You can also uncheck _modify, adapt, or build upon_ + as long as you don't plan on modifying the images you find (such as adding + text, cropping, or otherwise editing).\r\n\r\n<img src=\"https://images.code.org/41b70c9ad055b42ed9d9749be2e1fdb2-image-1473978771297.31.58.png\" + style=\"max-width: 800px\"/>\r\n\r\nFor each image you plan on using:\r\n\r\n* + Download a copy to your computer (so that you can upload it to your website + in the next step)\r\n* Write down all information you can find about the author, + such as\r\n\t* Name, or screenname\r\n * URL of website (not URL of the + image itself)\r\n * Title of image\r\n" + CSP Data Unit - Counting Multiple Things_markdown_instruction: "If you can + count one thing you can count multiple things\r\n\r\nFind out how many people + like something other than dogs and cats\r\n\r\nCount dogs\r\nCount cats\r\nCount + total\r\nDo the math\r\n\r\nblank/ blank total\r\n\r\nCan also use this to + find percents from this\r\n\r\nx% are dog lovers" + CSP Data Unit -Counting Records - Easy Way_markdown_instruction: "ReadRecords + with specific criteria \r\nfind the length of an array\r\n" + CSP Data Unit -Counting Records - Hard Way_markdown_instruction: "\r\n1. ReadRecords + for all records\r\n2. Way to loop through and count" + CSP U4 - CreateRecord with JSON_markdown_instruction: "Good news! we can also + store objects in the easy way!\r\nStarting code is some kind of pre-composed + object. And call to createRecord that shows using the javascript object as + the the thing being stored.\r\nTest.\r\nInvestigate.\r\nAdd a field to the + object and run again, see what’s there." + CSP U4 - Export Table_markdown_instruction: "# You can export the table too!\r\n\r\nMake + a table and then export it to share it with a friend!" + CSP U4 - First Create Record Experience_markdown_instruction: "So how can we + use this? We can use it to compose a bunch of things we want to store at + once. In Data we call this a “record”. Let’s look at how we create records….new + level:\r\n\r\nJust drag out createRecord and play with it (non-project level) + — not triggered by a button. \r\n\r\nCreateRecord should populate with a default + JSON object (which you can set in level builder when defining params for the + blocks in the palette.) Have it be the string version of of JSON object.\r\nJust + Hit run several times.\r\nView Data.\r\nInvestigate problems.\r\n\r\n\r\n" + CSP U4 - Import Table_markdown_instruction: "You can create a new table by + importing a CSV file. CSV stands for comma separated values and is a standard + way to move data between different applications. CSV files usually have multiple + columns with the first row containing the label for each column. AppLab will + use this first row to create the column names in the table. \r\n\r\nIn AppLab + you can create a new table in an app by clicking the “View Data” button(a + new browser tab opens) and type in a new, descriptive table name (the table + name does not have to match the app name, and an app can have more than one + table), then click the “Add” button next to the table name(another new browser + tab opens). Click the “Import” button, then the “Choose File” button and select + the RottenTomatoes2015.csv file (see below). Finally click the “Overwrite + & Import” button. Note the unique “Id” field created for each record." + CSP U4 - JSON Object Intro - Bad Way_markdown_instruction: "# We've Seen Objects + Before\r\n\r\nWe're going to see how we can use objects to organize data + in our own apps, but this actually isn't the first time we've used objects + in our programs. **The object that we've used most frequently is the event + parameter of our event handlers**. This single object contains many pieces + of information about the event which can be accessed to determine how to respond + to the event. For example `event.key` contains the key that was pressed for + key events, and `event.offsetX` and `event.offsetY` contain the location of + the mouse for mouse events.\r\n\r\nBefore we move on to creating objects of + our own, let's take another look at this event parameter (or as we'll call + it now event object) and recall how they were used.\r\n\r\n# Do This\r\n\r\n**Starter + code** is provided which creates event handlers for both a \"click\" and \"keydown\" + event and displays the contents of the event object they create.\r\n\r\n* + **Run the program** and trigger both a keyboard event and a mouse event.\r\n* + **Examine the objects displayed in the Debug Console** to recall the different + pieces of information they contain.\r\n* **Reflect: ** Why wouldn't we want + this information stored in many variables? Why wouldn't we want this information + stored in an array?" + CSP U4 - JSON Object Intro - Good Way_markdown_instruction: "# Creating Your + Own Objects\r\n\r\n**Objects are unordered collections of name value pairs**. + Like an array they can hold many pieces of information, but where arrays use + a numeric index to reference specific pieces of information, objects use a + descriptive name. We lose the \"ordered\" nature of our data, but we gain + the ability to describe the purpose of each piece of data within a collection.\r\n\r\nConsider + the event objects you just looked at. An array can just as easily store all + the information they contain, but it would be difficult to determine what + any of the values represent.\r\n\r\n**The syntax for creating objects of your + own is shown below**\r\n\r\n* Curly braces are placed around the contents + of an object `{}`\r\n* Names are separated from values with a colon `:`\r\n* + Name value pairs are separated by commas `,`\r\n* Names must be strings. If + they are not they will be coerced to strings, possibly creating unpredictable + behavior.\r\n* **Example:** `var user = {\"userName\":\"Ada\", \"password\":\"csIsAwesome\", + \"yearBorn\":1815};`\r\n\r\n# Do This\r\n\r\n**Starter code** is provided + which creates an empty object and displays its value.\r\n\r\n* Modify the + code **using the syntax above** to create an object of your own. Your object + should contain **at least 5 pieces of information including both strings and + numbers**.\r\n* **Run the program** and confirm all values in your object + appear as you expected." + CSP U4 - Objects - createObject_markdown_instruction: "# Creating Your Own + Objects\r\n\r\n**Objects are unordered collections of name value pairs**. + Like an array they can hold many pieces of information, but where arrays use + a numeric index to reference specific pieces of information, objects use a + descriptive name. We lose the \"ordered\" nature of our data, but we gain + the ability to describe the purpose of each piece of data within a collection.\r\n\r\nConsider + the event objects you just looked at. An array can just as easily store all + the information they contain, but it would be difficult to determine what + any of the values represent.\r\n\r\n**The syntax for creating objects of your + own is shown below**\r\n\r\n* Curly braces are placed around the contents + of an object `{}`\r\n* Names are separated from values with a colon `:`\r\n* + Name value pairs are separated by commas `,`\r\n* Names must be strings. If + they are not they will be coerced to strings, possibly creating unpredictable + behavior.\r\n* **Example:** `var user = {\"userName\":\"Ada\", \"password\":\"csIsAwesome\", + \"yearBorn\":1815};`\r\n\r\n# Do This\r\n\r\n**Starter code** is provided + which creates an empty object and displays its value.\r\n\r\n* Modify the + code **using the syntax above** to create an object of your own. Your object + should contain **at least 5 pieces of information including both strings and + numbers**.\r\n* **Run the program** and confirm all values in your object + appear as you expected." + CSPPD PD goals_markdown_instruction: "***Now that you've learned more about + the CSP Professional Development, let's consider your goals***\n\n<br>\n__What + are your personal goals for your CSP PD experience (what do you hope to accomplish, + how do you hope to grow)?__ *NOTE: These goals might change over time, and + we'll revisit your responses as we go through the course so we can check + in on how we're progressing towards those goals.*\n" + CSPPD course goals_markdown_instruction: "***Now that you've learned more + about the CSP curriculum, let's consider your goals***\n<br>\n<br>\n\n__What + are your goals for your CSP class?__ *These goals will change over time, and + we'll revisit this your response as we go through the course so we can check + in on how we're progressing towards those goals.*\n\n*NOTE: remember you + can change the size of the text box by clicking and dragging the bottom-right + corner of the box.*\n" + CSPPD impact in program_markdown_instruction: "\n#### What connections do you + think might exist between the ideas covered in the videos you just watched + and the units of CSP that you learned about earlier?\n" + CSPPD materials question1_markdown_instruction: "We just talked about the types + of materials available through the Code.org CSP curriculum, including teacher + lesson plans, widgets, widget tutorial videos, concept videos, teaching tips + videos, and student-facing activities. Which of these materials are you most + excited to have access to? Which are you most uncertain about? " + CSPPD program overlap_markdown_instruction: "#### Now that you've read more + about the CSP program, what relationship do you see between the curriculum + and Professional Development? What aspects of the two pieces of the program + seem most important or interesting to you?\n" + CSPPD strategies_markdown_instruction: "\nThis space is your __digital journal + for documenting strategies__ you've picked up during Professional Development + and while teaching the course. We'll revisit this often during PD, and you + should refer back to it while planning lessons to remind yourself of strategies + you want to try in class. \n\n\n" + CSPPD2 PT activity_markdown_instruction: "# Practice PT > Encoding a Complex + Thing\r\n<img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/FBlNhEkvsTFskXJ/Screen%20Shot%202015-07-18%20at%205.46.24%20PM.png\" + class=\"level-image\">\r\n\r\n## Doing the Project\r\nTo wrap up our work + in this unit, we're going to spend an hour doing the practice performance + task. After you've read the lesson, spend some time looking over the student-facing + worksheet and think about what you would like to encode. This is really open + ended, and there's no 'right' thing to choose, but to get the juices going, + here are a few example topics: \r\n\r\n- A piece of music (the notes that + are played, the instruments that play them, etc)\r\n- A food (the smells, + tastes, appearance, etc) \r\n- A place (the sounds, the smells, what natural + things are in the space, what man-made things are in the space, etc)\r\n\r\n> + Once you've selected your topic, start working through your protocol for + encoding the \"complex thing.\" Use the <a href =\"https://docs.google.com/document/d/1IPDnC6tKN7yRzog9t7weKISnjXvykTQe3QEpu43uM7c/edit\" + target =\"_blank\">student activity guide</a> and the <a href=\"https://docs.google.com/document/d/1rkVbwb8nJBlnF9t3hkyIyckM6gJGEjcUwyQiyV-Jlu4/edit\" + target =\"_blank\">lesson plan</a> to work through this.\r\n\r\n**See how + far you can get through the activity in one hour, but please do limit yourself + to 60 minutes.** Don't worry about getting through the entire thing in that + time, but be ready to share your thoughts about the process along with whatever + you come up with! \r\n\r\nUse the text box below to record your protocol. + You'll have space on the next page to share your final product. " + CSPPD2 share protocol_markdown_instruction: "# Chunk 3: Encoding and Sending + Text > Creating a Text Message Protocol\r\n\r\n<img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/FCmh8I2x5GTQ3tu/Screen%20Shot%202015-07-18%20at%2012.53.45%20PM.png\" + class=\"level-image\">\r\n\r\n## Creating a Text Message Protocol\r\n\r\nOn + the right you'll find the student-facing worksheet from lesson 10, which + builds on students' prior work with protocols and has them develop a text + messaging protocol that can handle the letters a-z as well as common punctuation. + \r\n\r\n>Read over the [lesson plan](https://docs.google.com/document/d/1lAHRLpxu05-gSbNF6LX8vUIoDMHEonrmL3bk-Sh1viA/edit) + and **work through developing a protocol yourself.** Use the text box below + to record your protocol.\r\n\r\n*Having trouble viewing the activity? [Click + here](https://s3.amazonaws.com/uploads.hipchat.com/65395/734864/jogZFA5WQK3rYne/text%20protocol.pdf) + to open it directly.* \r\n\r\n" + CSPPD3-u2 pick a challenge_markdown_instruction: "# Challenge Overview > What's + your Challenge?\r\n\r\nNow that you've selected a lesson, head to the forum + and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### + <a href=\"http://forum.code.org/t/unit-2-online-pd-challenge-selection/2222\" + target=_blank>Forums <i class=\"fa fa-external-link-square\" /></a>\r\n\r\nEnter + the lesson you selected for your challenge below:" + CSPPD3-u2 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a dirct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + CSPPD3-u3 pick a challenge_markdown_instruction: "# Challenge Overview > What's + your Challenge? \r\n\r\n## Enter the lesson you selected for your challenge + in the text box below.\r\n\r\n- 2 - 5: Turtle Drawing\r\n- 6 - 7: Functions + and Simple Loops\r\n- 14-15: Variables \r\n- 16: Strings\r\n- 18: Programming + Flow and Conditionals\r\n\r\nNow that you've selected a lesson, head to the + forum and **share which lesson you plan to complete** for your challenge. + \r\n\r\n#### <a href=\"http://forum.code.org/t/unit-3-challenge-selection/2470\" + target=_blank>Forums <i class=\"fa fa-external-link-square\" /></a>" + CSPPD3-u3 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + CSPPD3-u4 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + CSPPD3-u5 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + CSPU5 Add Screens to Chaser Game_markdown_instruction: "# Improved Chaser Game\r\n\r\nNow + lets improve the \"Chaser Game\". This is where you get to use your creativity. + Make it look nice!\r\n\r\nIn addition you will notice a new command in the + toolbox: `playsound`! Read the documentation about how to add sounds.\r\n\r\n**Note:** + Your code from before has been provided for you.\r\n\r\n# Do This:\r\n\r\n* + **Create a Welcome Screen** that explains the rules of the game. Include a + \"Start Game\" button.\r\n\r\n* Update the your code so that the **image jumps + to a new location when it is clicked**. \r\n\r\n* **Play a sound** each time + the image is clicked.\r\n\r\n* **Add a Game Over Screen** with a lose message + and button to start over. The Start Over Button should direct back to the + Welcome Screen.\r\n\r\n* **Make the user lose**, by sending them to the Game + Over Screen, when the background is clicked.\r\n\r\n\r\n" + CSPU5 Add a 2nd Screen_markdown_instruction: "# Design Mode: Adding a Screen\r\n\r\n<img + src=\"https://images.code.org/3aab64d77293bda1759586e2cff5c6cc-image-1477366229125.png\" + style=\"width: 150px; float: right\">\r\n\r\n**Now you try it:** Add a new + screen and a button to the app we've started here.\r\n\r\n**NOTE:** We've + created one screen for you - the Hello Screen. You need to add a new screen + - the new screen should look something like the example shown to the right.\r\n\r\nHere + are the steps:\r\n\r\n* **Add a new screen**\r\n * Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 + PM.png\" style=\"width: 50px\"> from the Design Toolbox.\r\n * Or choose *New + Screen...* from the pulldown menu at the top of the app display.\r\n \r\n* + **Set the background color**\r\n * It doesn't have to be orange like the + example\r\n \r\n* **Add a Button**\r\n * A simple button is fine. You can + embelish with an icon if you want.\r\n * Optional: You can also add a text + label saying \"Goodbye!\"\r\n\r\n**Click Run...but...you won't see much**\r\n\r\n* + Because we haven't added code yet **all you'll see is the (default) Hello + screen**\r\n* You won't have any way to see the orange screen when the app + is running.\r\n\r\n**Click Finish** to move on to the next level where we'll + add code\r\n\r\n * Note: you can continue to work on your design on the next + level too\r\n\r\n" + CSPU5 Add full screen image to bg of chaser game_markdown_instruction: "# Add + a Full Screen Image to act as Background to Game\r\n\r\n<img src=\"https://images.code.org/9898664ee57768dd6e332bfab804c2a6-image-1477324830263.png\" + style=\"float: right\">\r\n\r\nWe want to be able to detect when the user + *misses* clicking on the target. Since we know the screen itself registers + every click no matter what, the only way to determine that the user missed + the target is to **add an image that takes up the full screen**. \r\n\r\nIn + other words we're trying to determine which of two images was clicked - the + target, or the background - which is do-able since we know when images overlap + only one will have a click event triggered. \r\n\r\n * When the target is + clicked, it jumps to a new location\r\n * When the background image is clicked + we will (eventually) switch to a new screen.\r\n\r\n**Following the Event-Driven + Pattern...**\r\n\r\n* **Design mode: Add a new image to the game** \r\n * + and stretch it to fill the whole screen.\r\n * Change the layering order + (if necessary) so that the target image is in front of the full screen image.\r\n * + (See example at right which shows an image that is stretched to the full size + of the screen sitting behind the target image).\r\n\r\n* **Add an onEvent + handler** for the full screen image with a simple console.log message\r\n * + **TIP**: this is basically done for you if you add onEvent from Design Mode\r\n\r\n* + **Run. Test. Debug.**\r\n \r\nMake sure that with each click one of two things + is happening.\r\n * When the target is clicked, it jumps to a new location + (and optionally print a message to the console).\r\n * When the background + image is clicked it should display a message to the console.\r\n * (See example + console output at right)." + CSPU5 Add game over screen_markdown_instruction: "# Add a \"game over\" screen + and finalize the game\r\n\r\n* **Add a new Screen** with a \"game over\" message + and **add a button** to start over. \r\n\r\n* **Add an event handler** for + the \"Start Over\" Button to send the user back to the Welcome Screen.\r\n\r\n* + **Add `setScreen` to the event handling function for the background image**\r\n + * When the background image is clicked, the user should be sent to the \"game + over\" screen you just created.\r\n\r\n<img src=\"https://images.code.org/bb3c0973ee0d83d3540f5ffed797e442-image-1477405500619.gif\" + style=\"float: right; width: 150px\">\r\n\r\n# Run. Test. Debug.\r\n\r\nYou + should now have a 3-screen app with:\r\n\r\n* A welcome screen\r\n* A game + play screen\r\n* A \"game over\" screen\r\n\r\n**Avoid dead-ends** -- the + user should be able to get between all the screens appropriately, and play + the game.\r\n\r\nIf it's not working:\r\n\r\n* Retrace your steps\r\n* See + if you can figure out where things are going wrong\r\n* Add extra `console.log` + statements. \r\n* Ask a friend to help you out.\r\n\r\n**Stick with it until + you get it!**\r\n\r\n" + CSPU5 Add onEvent from Design Mode_markdown_instruction: "# Add onEvent from + Design Mode!\r\n<img src=\"https://images.code.org/9ff41c3ea30ece355e91eaca5cdc1e36-image-1444417748945.gif\" style=\"width: + 250px; float: right\">\r\n\r\nDesign Mode has a shortcut for you to add `onEvent` + to your code for specific UI Element. It's quite handy.\r\n\r\n**You try + it:** Add an event handler to a button from Design Mode\r\n\r\n**Design Mode**\r\n * + A Red button has already been added to the app.\r\n * In Design Mode click + on the button to select it\r\n * Click the **EVENTS tab** and then click + the link that says **Insert and Show Code**\r\n * You may change the ID if + you like\r\n\r\nThis will insert an `onEvent` block with the ID and \"click\" + filled in already.\r\n\r\nIt also inserts a line of code with a command we + haven't seen yet: `console.log`.\r\n\r\n**Run. Test. Debug**\r\n* Run the + program and click on the button to see what happens\r\n * **Hint:** look + at the **Debug Console** area below the coding workspace.\r\n* If nothing + happens, retrace your steps and try again.\r\n\r\nOnce you see a message displayed + in the Debug Console click finish to move on." + CSPU5 Add welcome screen to chaser game_markdown_instruction: "# Add A Welcome + Screen\r\n\r\n<div style=\"float: right; width: 150px\">\r\n\r\n\r\n<img src=\"https://images.code.org/558ae19d0fb8af8c6ec573e5d7ac4e29-image-1477369385328.png\" + style=\"float: right; width: 150px\"><br>\r\n<em>This is an example showing + the elements of a welcome screen. Yours <strong> should not </strong> look + exactly like this. Yours should be appropriate for your game.</em>\r\n\r\n</div>\r\n\r\nLet's + improve your \"Chaser Game\" by **adding a welcome screen that shows when + the app starts up, and that with a button to start.**\r\n\r\n* NOTE: we've + imported the chaser game that you made in the last lesson. That's the starting + point for this. You can continue with this lesson if you don't have it. + But you'll need to make a screen for game play along the way.\r\n\r\nFollowing + the Event Driven Programming pattern:\r\n\r\n1. **Design Mode** \r\n * Add + a New Screen to the App\r\n * Make this new screen the **default screen**\r\n * + Add a new Button to the screen that says \"Start\"\r\n * Add text welcoming + the user to the game.\r\n * Give the button and the screen meaningful IDs\r\n\r\n2. + **Add an onEvent Handler for the Button**\r\n * Insert a new onEvent block + (easy way from Design Mode) for the \"start\" button\r\n\r\n3. **Add code + to the event handling function**\r\n * When the \"start\" button is clicked + it should `setScreen` to the screen that plays the game.\r\n \r\n4. **Run. + Test. Debug.**\r\n\r\n Make sure that:\r\n \r\n * When app starts up, your + new welcome screen shows first\r\n * When you click the \"start\" button it + takes you to the game play screen\r\n * Note: right now there's no way to + get back to the welcome screen - it's okay, we'll add that later.\r\n\r\n" + CSPU5 Adding Screens Template_markdown_instruction: "# Second Screen\r\n\r\nUp + until now our apps have only been able to have one view. With Design Mode + we can now make multiple screens and switch between them!\r\n\r\n**Goal:** + Make a 2 screen app with a black screen and a white screen. \r\n\r\n<img src=\"https://images.code.org/e35a6f494cf6f0c57c66a1aef651cdb0-image-1444353622241.gif\" + style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\n\r\nSwitch to Design + Mode and **add a second screen**. There are two ways to add a second screen: + \r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 + PM.png\" style=\"width: 50px\"> from the Design Toolbox. Check out the screen + dropdown menu at the top right of the app window. You should now have two + screens! <img src=\"https://images.code.org/b48d978335701888b744702f25f11b28-image-1444353746012.17.07 + PM.png\" style=\"width: 75px\"> \r\n* From the screen dropdown menu at the + top right of the app window click *New Screen*. \r\n\r\nMake screen1 white + and screen2 black. **Set the background color for a screen in the Properties + tab**. Make sure to rename the screens with appropriate IDs." + CSPU5 Debugging Overlapping Objects and Screen Events_markdown_instruction: "# + Use console.log to Test Overlapping Objects and the Screen\r\n\r\nThere are + two goals here:\r\n\r\n1. Practice inserting your own console.log statements.\r\n2. + Investigate how the screen captures events (it's different).\r\n\r\n## Do + This:\r\n<img src=\"https://images.code.org/4100fcc7062f97ce8440003b3a17cd25-image-1477363054051.png\" + style=\"float: right\">\r\n\r\n* **Add `console.log` statements to each of + the 3 event handlers** we started you out with.\r\n * Make the text that gets + printed *be descriptive* so that you know exactly what is happening when.\r\n\r\n* + **Run** the program and try clicking where the diagram (at right) shows.\r\n * + Click on each button\r\n * Click where the buttons overlap\r\n * Click on + the screen (i.e. the background)\r\n\r\n**Investigate until you can answer + these questions:**\r\n1. When you click on a location where two objects are + overlapping, which event(s) fire(s)?\r\n2. When you click on an non-overlapping + part of some object what gets triggered?\r\n3. When does a \"click\" on the + \"screen\" get triggered?\r\n\r\n\r\n<details><summary>Answers: [click here]</summary>\r\n<br><br>\r\n1. + When you click on a location where two objects are overlapping, which event(s) + fire(s)?\r\n<br>\r\n<li><em> The event-handler for object that is on top gets + triggered. The object that is underneath is essentially blocked from being + clicked in the overlapping portion</em></li>\r\n<br><br>\r\n2. When you click + on an non-overlapping part of some object what gets triggered?\r\n<li><em>The + event-handler for the object gets triggered as you might expect</em></li>\r\n<br><br>\r\n3. + When does a \"click\" on the \"screen\" get triggered?\r\n<li><em>Always. + Events that occur on the screen cannot be blocked by other objects. If you + set up an event listener for the screen it will capture EVERY event of that + type, no matter what other UI elements are on the screen. This behavior of + the screen is done on purpose and is useful for certain kinds of things.</em></li>\r\n\r\n\r\n</details>\r\n\r\n" + CSPU5 First Time Console.log_markdown_instruction: "# Exploring console.log\r\n\r\n<img + src=\"https://images.code.org/cdc253db1b9a3685eaf5ea4b6bc30766-image-1444337429645.png\" + style=\"width: 250px; float: right; border: solid 1px black; margin-right: + 10px\">\r\n\r\nIn the last level, we saw a new command: `console.log`. You + should have noticed that it prints out text in the Debug Console below the + code workspace.\r\n\r\nThe Debug Console area is an important tool for programmers. You've + seen it display error messages, but you can also have your program display + messages there. \r\n\r\nYou can find `console.log` in the **Variables** code + toolbox, and it is the command you use to send messages to the console -- + it's just about the simplest thing you can do to make your code generate + output.\r\n\r\n**You try it:** Add a console.log statement to say your name\r\n\r\n* + Drag out a `console.log` statement into the workspace and add it below the + 2 statements there.\r\n\r\n* Following the lead of the first two lines - update + the code so that it says your name.\r\n\r\n* The output should look something + like this: \r\n\r\n![](https://images.code.org/64c82c1bf7ecb859d84192e5bffb3488-image-1477338603375.png)" + CSPU5 Layering and Deleting in Design Mode_markdown_instruction: "# Design + Mode: Layering and Deleting\r\n<img src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" + style=\"width: 150px; float: right\">User interface elements can overlap one + another, so you'll want the ability to change the order or **depth** at which + each one is shown. \r\n\r\n**You Try it:** Use the **depth** and **delete** + tools to **create the \"After\" image** (shown below).\r\n\r\n* **Scroll to + the bottom of the Properties tab** you'll find buttons which allow you to + easily **change the depth** of an element.\r\n* **Change the depth** of elements + by using the double or single arrows.\r\n * Click the double arrow to send + all the way to front or back.\r\n * Click the single arrow to move up or down + one layer.\r\n \r\n* **Delete an Element** by selecting it (clicking on it) + in the design view and then clicking the **Red Delete button** in the properties + tab.\r\n\r\n\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th style=\"text-align:center\">Before</th>\r\n <th + style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td align=center><img + src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" + style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img + src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" + style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" + CSPU5 Project - Multi Screen App_markdown_instruction: "# Multi Screen App\r\nYou + will be creating your own multi-screen app to practice designing user interfaces + and writing event-driven programs. \r\n\r\n**Look at the Project Guide and + Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* + Your app will have at least **4 screens**.\r\n* Your app should include **text, + images, buttons, and sound**.\r\n* There should be **no “getting stuck” on + any screen.** It should always be possible to navigate from a screen in your + app to some other screen. \r\n* Your program code should follow **good style**.\r\n* + Your user interface should be **intuitive to use**." + CSPU5 Use Console.log to update IDs_markdown_instruction: "# Updating IDs and + Debugging with Console Log\r\n\r\nIn the last level you tested out the new + command: `console.log`. In this level we have a couple buttons with event + handlers and `console.log` statements, but they are switched around!\r\n\r\nWe + should have given the buttons better ID names so we could tell the difference + based on the ID. **Can you update the ID names and `console.log` messages + to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** + of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to + Code Mode and notice that the **ID pulldowns have been updated to include + the new IDs**. (You still need to select the correct ID from the pulldown + menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" + CSPU5 Use setScreen for first time_markdown_instruction: "# Adding Code: Switching + Screens with *setScreen*\r\n\r\n<img src=\"https://images.code.org/9232bd923268d36158d63829145c9879-image-1477367827365.gif\" + style=\"float: right; width: 150px\">\r\n\r\n**You Try it:** Add event handlers + to the buttons that use `setScreen` to switch to the other screen. \r\n\r\nThe + result should be two-screen app which can switch back and forth between the + \"hello\" and \"go back\" screens. See example at right.\r\n\r\n* **Add an + onEvent handler** for the smiley face image/button to respond to a \"click\"\r\n + * Do it the easy way by inserting from design mode, or just drag an `onEvent` + block into the code workspace.\r\n\r\n* **Add `setScreen` into the event handling + function**\r\n * Make it switch to the other screen when the smiley face is + clicked.\r\n\r\n**Run. Test. Debug**\r\n\r\n* Test to see if the clicking + the smiley face switches screens\r\n* If it doesn't work, retrace your steps + and try again.\r\n\r\nIf it works, then **repeat these steps for the \"go + back\" button.**\r\n\r\n* The result should look something like the example + on the right. \r\n" + CSPU5 console.log debug when mouse events happen_markdown_instruction: "# Which + comes first?\r\n\r\nAnother useful thing to do with `console.log` statements + is to use them to figure out the order in which events are triggered. In the + code below one button has 3 different event listeners, that will respond to + the events: `\"mousedown\"`, `\"mouseup\"`, and `\"click\"`\r\n\r\nThe question + is, if you click the button:\r\n\r\n* Will all 3 of these events trigger? + \r\n* Will any of them trigger? Which one(s)?\r\n* What order will these + events be triggered in?\r\n\r\n**You try it**:\r\n1. Study the code and **make + Prediction**\r\n2. **Run** the program\r\n3. **Were you right?** What's unexpected?\r\n4. + **Keep testing** until you see what's happening.\r\n\r\n" + CSPU5 console.log in event v. global_markdown_instruction: "# Predict what + will happen\r\n\r\nWe've added some `console.log` statements *both* in event + handlers as well as just out in the open, between event handler definitions. + \r\n\r\n* **Study the code first**\r\n * We've added some white space between + lines to make it more readable.\r\n\r\n* **Predict:** What do you think will + happen when you click Run? What will display? Will it:\r\n * Print all 5 + messages?\r\n * Print only a few? Which ones?\r\n * Halt with an error message?\r\n + \r\n* *After* you've made some kind of prediction, **hit Run**.\r\n * If + the program runs, then try to use it - click on the buttons and such.\r\n\r\n* + Were you right? Anything unexpected?\r\n * Reset and Run the program again + a few times until you understand what's happening.\r\n \r\n<details><summary>What's + happening? [click to expand]</summary>\r\n<li> As soon as you hit Run messages + \"1\", \"3\" and \"5\" will display immediately. Those statements are out + in the \"open\" rather than part of an event handling function - the computer + can run them right away.</li>\r\n<li>Messages \"1\", \"3\" and \"5\" will + only print once each time you run the program not matter what else you do</li>\r\n<li>Messages + \"2\" and \"4\" will be displayed when the the buttons are clicked.</li>\r\n<li>In + case you're wondering: <strong>This is bad code</strong>. It's hard to + read because of where the statements fall. Typically if some code needs to + run when the program starts up, you'd group it all together at the top of + the program. Scattering it about in and between event handlers and other + functions is a recipe for a lot of buggy code that will be hard for you to + work out.</li></details>" + CSPU5_AddImageToChaserGame_markdown_instruction: "# Now you do it: Add an image\r\n\r\n[lice + cap]\r\n\r\n* add an image from icon, or from something you upload.\r\n\r\n* + We'll make the image respond to events on the next level\r\n\r\n* Click continue\r\n\r\n" + CSPU5_AddImage_andMakeChaserGame_markdown_instruction: "# Now you do it: Add + an image\r\n\r\n[lice cap]\r\n\r\n* add an image from icon, or from something + you upload.\r\n\r\n* We'll make the image respond to events on the next level\r\n\r\n* + Click continue\r\n\r\n" + CSPU5_AddLabelToChaserGame_markdown_instruction: "# Design Mode: Add a label\r\n\r\n<img + src=\"https://images.code.org/092af4a9c90ad36fa44c636f1227e4d9-image-1476893390336.gif\" + style=\"float: right\">\r\n\r\nWell, now we have the beginnings of a little + game! Time to go back to design mode to start embelishing our program.\r\n\r\n**You + try it:** - Add a text label that says \"Try to Catch the Button!\"\r\n\r\n\r\n\r\n* + Switch back to design mode\r\n* Drag a label on the screen <img src=\"https://images.code.org/c74c0e7fed308af92740d31cbd1098a9-image-1476892918698.png\">\r\n* + Set the text to be something like \"Try to Catch the Button!\"\r\n* Set any + other properties or styles of the text label that you want.\r\n\r\n\r\n" + CSPU5_Debugging predict unexpected behavior - two onEvents to one ID_markdown_instruction: "# + Debugging Unexpected Behavior\r\n\r\n## Predict - Observe - Reflect\r\n\r\nTo + understand a new piece of code good programmers often try to **first make + a prediction about what will happen before running the program**. \r\n\r\nBy + forcing yourself to make a prediction (it doesn't matter if you're right + or not) you are immediately alerted to any **unusual or unexpected behavior** + and you can ask yourself, *\"Huh? why did it do that? Was that supposed to + happen?\"* It might not be an error, but you gain invaluable insight and + actually **learn faster**.\r\n\r\n**Predict:** For the code that is here, + what will happen when the \"Click Me\" button is clicked? \r\n\r\n * **Study + the code** - This program has **two event handlers** listening for events + on the same button?\r\n * **Force yourself to make a prediction!** - \"I don't + know\" is not a prediction!. \r\n\r\nHere are some options to think about:\r\n\r\n* + There will be an error in the console immediately after hitting run\r\n* There + will be an error in the console but not until you hit the button\r\n* Program + does nothing\r\n* turtle only moves forward\r\n* turtle only turns left\r\n* + turtle move forward *then* turn left \r\n* turtle turn left *then* move forward?\r\n* + something else? \r\n\r\n**Observe:** Once you've made a prediction, close + these instructions and **run the program** to observe what happens.\r\n\r\n**Reflect:** + Was your prediction correct? If not what about your mental model might need + to change? Talk about it with a classmate and experiment with the code to + make sure you understand what is happening." + CSPU5_FinalizeChaserGame_markdown_instruction: "# Add an Image and Make a Chaser + Game!\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" + style=\"float: right\">\r\n\r\n**Now You Try it** - add an image to your app + and modify the code so that the image jumps around the screen rather than + the button. Your little game should have:\r\n\r\n* **Text** on the top of + the screen with a title or instructions for what to do.\r\n* **An image** + that \"runs away\" (moves randomly) based on some mouse event.\r\n\r\n**Tips:**\r\n + * **Hint** - the easy way to do this is to simply change the IDs in `onEvent` + and `setPosition` to respond to the image instead of the button.\r\n * Remove + the button from the app after the image is working. We don't need it anymore.\r\n + * Change the label text so that the instructions make sense for your game.\r\n + * The game is even more fun if you use the `mouseover` event instead of `click`\r\n\r\n**Optional + Extensions**:\r\n * Make the background interesting\r\n * Add another image + that runs away.\r\n * See what happens with the commands `hideElement` and + `showElement`\r\n * Have two UI elements where interacting with one controls + or does something to the other.\r\n\r\n**Finalize your \"Chaser Game\"** and + click Finish.\r\n\r\n" + CSPU5_Project - Multi Screen App_markdown_instruction: "# Multi Screen App\r\nYou + will be creating your own multi-screen app to practice designing user interfaces + and writing event-driven programs. \r\n\r\n**Look at the Project Guide and + Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* + Your app will have at least **4 screens**.\r\n* Your app should include **text, + images, buttons, and sound**.\r\n* There should be **no “getting stuck” on + any screen.** It should always be possible to navigate from a screen in your + app to some other screen. \r\n* Your program code should follow **good style**.\r\n* + Your user interface should be **intuitive to use**." + CSPU5_U3 - Arrays - Demo App_markdown_instruction: "# My Favorite Things\r\n\r\nCheck + out this simple app for creating a collection of your favorite things. **We're + going to be working towards building this app** over the next several exercises. + As you might expect, this application **uses an array** to store and organize + information.\r\n\r\n# Do This:\r\n\r\n* Use the \"My Favorite Things\" app + and try to **predict how arrays are used to create the functionality you observe.** + \r\n* Some features to notice:\r\n\t* The app keeps track of a **list of your + favorite things**.\r\n * You may use buttons to **move forward and backward + through your list**.\r\n * The **current entry and total number of entries** + are indicated at the top.\r\n * You may **add a new entry** at the current + location in your list." + CSPU5_U3 - Arrays - Wrap Up 1_markdown_instruction: "## Choose: Array or Variable?\n\nYour + app needs to store the following information. For each type of information, + decide whether you would use an array or a variable to store it:\n \n* All + the messages a user has sent\n* The highest score a user has ever reached + on the app\n* A username and password to unlock the app\n\n" + CSPU5_U3 - Arrays - Wrap Up 2_markdown_instruction: "## Free Response: Choosing + Array or Variable\n\nIn general, when do you think you should store information + in an array, and when should you use a variable?\n" + CSPU5_U3 - Arrays - appendItem_markdown_instruction: "# Adding Items to an + Array\r\n\r\n<img src=\"https://images.code.org/c9244eb598416b5a3d9baac088bbaca8-image-1447267168567.39.06 + PM.png\" style=\"width: 250px; float: right\">\r\n\r\nIn our last exercise + we created our array and initialized it with some values. Another way to do + this is to **add items to your array on separate lines**. The simplest way + to do this is to add a new item to the end of your array using the `appendItem` + command.\r\n\r\n<img src=\"https://images.code.org/74a2f2660d5aea8dec7dc4933f2c68d3-image-1447185901732.04.50 + PM.png\" style=\"width: 250px; float:right; border: solid 1px black\">\r\n\r\nTo + append means to add or to join. When you append an item to an array you actually + add a new location to the end of the array that contains the new value, so + that the total size of the array grows by one. Since you can always add items + to an array after creating it, it is very common to **create an empty array + and then add values in subsequent portions of your program**.\r\n\r\n# Do + This:\r\n\r\n* **Read the documentation** for `appendItem`.\r\n* Create an + **empty array** called `oddNumbers`.\r\n* Use `appendItem` to add the odd + numbers 1-11 to your array.\r\n\r\n![](https://images.code.org/41883beff3cb9810fed37ae684dc1fe8-image-1448312407634.gif)\r\n\r\n* + **Use `console.log`** to confirm your array is holding the correct values. + The output should look like the example below.\r\n\r\n![](https://images.code.org/4daf7aff37f4796185fc608f20856a12-image-1489697355089.png)" + CSPU5_U3 - Arrays - assignment_markdown_instruction: "# Setting Values by Index\r\n\r\nEach + location in an array can be treated like its own variable. We've already + seen how we can use bracket notation to reference values stored at specific + locations in an array. Just like with variables, **we can assign the value + of a specific location in an array using `=`** (the assignment operator).\r\n\r\n**Example:** + The value at index 0 of this array is set to 10.\r\n\r\n![](https://images.code.org/d0bf9901deeffb1cd6553c27c38046a4-image-1447172887059.27.25 + AM.png)\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/cfa8d82d89e5227f22e3afe5f9c49698-image-1447366432447.13.11 + PM.png\" style=\"width: 200px; float: right\">\r\n\r\nStarter code is provided + that creates an array of 0's and 1's. **Set all the values in this array + to be 0**. \r\n\r\n* Use **indexes** and the **assignment operator** `=` to + **set all the 1's to be 0**.\r\n* Check the output of the `console.log` to + confirm **the array only contains 0's**. Example shown on the right.\r\n\r\n" + CSPU5_U3 - Arrays - assignment2_markdown_instruction: "# Array Values: Arithmetic\r\n\r\nYou + can reference locations in arrays in arithmetic expressions, just like you + might a variable.\r\n\r\n![](https://images.code.org/a7d11342d8c72b34f2268e4104e43fbd-image-1447189790574.09.32 + PM.png)\r\n\r\nThe starter code **creates an empty array and adds three random + values to it**. \r\n\r\n![](https://images.code.org/51b7c713ae398299a85ee8c0b9ee04f3-image-1447190702799.23.46 + PM.png)\r\n\r\nYou will be adding code to your program that calculates the + sum of the values in the array.\r\n\r\n**Notice** the difference between displaying + an array as part of a string or by itself. Example:\r\n\r\n* code: `console.log(myNumbers)` + displays *with* brackets as: `[1, 2, 3, 4]`\r\n* code: `console.log(\"my list: + \"+myNumbers)` displays *without* brackets as: `my list: 1, 2, 3, 4`\r\n\r\nSo + when it's part of a string it *does not* print the square brackets around + the ends of the list. This is a \"feature\" of the language with no great + explanation. In the first case it sees only a list and it produces a more + technical representation. In the second case the system is trying hard to + convert the list to a nice looking string.\r\n\r\n# Do This:\r\n\r\n* **Add + a variable** to your program to hold the sum of the array values.\r\n* Assign + the value of the variable to **the sum of the three array values**.\r\n* Use + `console.log` to confirm that you have correctly calculated the sum of the + values. Below is sample output from one run of the program.\r\n\r\n![](https://images.code.org/a9ca48808e8e833d92b3bcdebc7b0bd4-image-1447189975738.12.31 + PM.png)" + CSPU5_U3 - Arrays - assignment3_markdown_instruction: "# Reassigning Array + Values\r\n\r\nWe've already seen many examples of how **a location in an + array can be treated identically to a variable**. The last exercise we'll + perform to prove this point is **reassigning array values**. The syntax for + reassigning values stored in an array is identical to that used when reassigning + variables. Even the `++` notation to increase a value by one works!\r\n\r\n![](https://images.code.org/3cbd11c69e42daddce28e059388097db-image-1464228660945.png)\r\n\r\nThe + program you're about to see **creates an empty array and adds three random + values to it**. You will be adding code to the program that **increases each + value by one**.\r\n\r\n# Do This:\r\n\r\n* Add code to the program that **increases + the value stored at each location in the array by one**.\r\n* Use `console.log` + to confirm that you have correctly increased the values. Below is sample output + from one run of the program.\r\n\r\n![](https://images.code.org/42ca1f874a8a7b71e29b2ffd80ec31c3-image-1447191826756.43.37 + PM.png)\r\n\r\n" + CSPU5_U3 - Arrays - createFirstArray_markdown_instruction: "# Creating an Array\r\n\r\nArrays + have many features which make them different from variables, but **most of + what you've learned about variables also applies to arrays**. For example, + just like a variable:\r\n\r\n* Arrays should be given a **descriptive and + meaningful** name.\r\n* Arrays are created using `var`.\r\n* Arrays can be + initialized/set using `=`.\r\n\r\n**Example: Creating an Array**\r\n\r\n![](https://images.code.org/0b7d201db2990f0189963bb6a565a057-image-1447097600773.33.08 + PM.png)\r\n\r\nThis array contains 3 values: 100, 250, 500. Notice that the + values are separated with commas `,` and that the entire array is enclosed + in brackets `[ ]` . We can use `console.log` to display the contents of an + array just like we would a variable.\r\n\r\n![](https://images.code.org/7d4be70330108e3e5d6325fa4e721ef4-image-1447097904253.38.18 + PM.png)\r\n\r\n# Do This:\r\n\r\n* Following the format described above **create + an array** which contains **the even numbers from 0 to 10**.\r\n\r\n<img src=\"https://images.code.org/872be32ff4ba4e9c733435d524a95c9e-image-1448311800271.gif\" + width=450px>\r\n\r\n* Make sure your array has a **descriptive and meaningful + name**.\r\n* Use `console.log` to display the contents of your array. Below + is an example of the output your program should generate.\r\n\r\n![](https://images.code.org/230d988cf99556db04a8a4ad6a8d8a47-image-1447364062049.33.53 + PM.png)\r\n\r\n" + CSPU5_U3 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions + as Indexes: Using Variables\r\n\r\nWe can use **any expression that evaluates + to a number** as an index in an array. Here are some examples:\r\n\r\n![](https://images.code.org/6d4ecc9249dc9f3a845196b04d833c1a-image-1447268711944.24.53 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **Starter code** has been provided which + creates an array of colors.\r\n* **Write code** that logs **a random color + from this list** to the console by generating a value for a random index. + Try to write your program using `list.length` rather than hard-coding the + length of the list.\r\n\r\n![](https://images.code.org/d0463c0f2528e04c396f3b9cf219c3ed-image-1447370139548.gif)" + CSPU5_U3 - Arrays - favThings Counting Variable_markdown_instruction: "# Current + Index\r\n\r\nThis app also allows a user to scroll through individual items + in the array. In order to keep track of which index we are currently viewing, + our application will need **a global variable that stores the current index**. + In coming exercises we'll want our global index to change, so let's **make + sure that your code references your global index** rather than fixed values.\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 + AM.png\" style=\"width: 250px; float: right\">\r\n\r\n* Create a **global + variable** that will be used to keep track of the current index in the array. + Set this variable to 0.\r\n* Update `setText` which displays the words to + show your first favorite thing using **the global index variable** instead + of a hard-coded number. \r\n* Update `setText` which displays the current + item number to use **the global index variable** instead of a hard-coded number.\r\n\t* + **Hint:** since arrays are zero-indexed **you will have to add one to your + index** to generate the correct value to display.\r\n* **Note:** neither of + these outputs will be able to change yet. Don't worry, we'll be taking care + of that in coming exercises!" + CSPU5_U3 - Arrays - favThings Next_markdown_instruction: "# Next Button\r\n\r\nNice + work! Your application should now have some simple output displaying one of + your favorite things and indicating which item of your list you are showing. + To make things more interesting, however, **we want to be able to change which + item we display**.\r\n\r\nTo change the item displayed, the user will use + the \"Next\" and \"Last\" buttons. These should **increase or decrease the + global index by one and then you should update the information displayed on + the screen**. To start out with, however, we'll just be writing code for + our Next Button. \r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to the + \"Next\" button.\r\n* Write code in this event handler that **increments your + global index variable** and then **updates the output on the screen**.\r\n\t* + **Note:** If your code from the last exercise was written to reference this + variable then you should just be able to reuse it once you've incremented + your variable. We'll talk more about this in the next exercise.\r\n* Run + your program to **confirm that the user can move forward through the list + and that the output displayed is correct**.\r\n\t* **Note:** You may notice + that your program throws an error if the global index variable goes out of + bounds. Don't worry about this for now - we'll fix it in a later exercise." + CSPU5_U3 - Arrays - favThings Prev_markdown_instruction: "# Last Button\r\n\r\nOur + user can now move forward through our list of favorite things, and we're + about to write code that allows them to move backwards as well. If you've + written your code to reference your global index then this should only require + you to decrease its value by one and reuse code that updates the screen output. + Before we write the code for backwards let's work on cleaning up our code.\r\n\r\n**Removing + Repeated Code:** Once you add the code for moving backwards through your array, + your program will have three places where it updates the screen by setting + the text of your screen elements. Rather than repeating this code we should + **create a function** that updates the screen and then call it every time + we need to refresh those elements. This will not only make our program easier + to read and avoids the errors that can arise from redundant code, but it also + makes it easier to make changes to how our program runs, since all the code + that updates the screen is in a single place.\r\n\r\n# Do This:\r\n\r\n* **Write + a function** that contains the `setText` commands you have used to update + the screen.\r\n* **Replace** the places in your code where you used to have + these commands with **calls to your new function**.\r\n* **Add an event handler** + to the \"Last\" button that decreases the **global index variable** by one + and then updates the screen by calling your new function.\r\n* Run your program + to confirm that the user **can move forward AND backward** through the list + and that the output displayed is correct.\r\n * **Note:** You may notice + that your program throws an error if the global index variable goes out of + bounds. Don't worry about this for now - we'll fix it in a later exercise." + CSPU5_U3 - Arrays - favThings addItem_markdown_instruction: "# Adding New Items\r\n\r\nNow + we want our user to be able to add items of their own to the list. As you + might have guessed, this is as easy as inserting an item into our array at + the current index.\r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to + the \"Add\" button.\r\n* **Write code** in your event handler that:\r\n\t* + Uses `getText` to access the user's new item.\r\n * Uses`insertItem` to + add that item to your array at the current index.\r\n * Calls your update + function to update the screen (the new item should be displayed).\r\n* Run + your program to confirm that the user **can add items to the list** and that + the output displayed is correct." + CSPU5_U3 - Arrays - favThings bounds_markdown_instruction: "# *if* Statements: + Staying in Bounds\r\n\r\nCurrently the user can increase or decrease the value + in the global index **past the bounds of your array**. As a result you've + probably already seen that errors are generated.\r\n\r\nTo prevent this from + happening, we're going to **add `if` statements** to the event handlers on + the \"Next\" and \"Last\" buttons. They should check the value of the global + index variable before changing it. If the user is about to step out of the + bounds of your array they should either:\r\n\r\n* **Block:** Do not change + the index if it will result in a value that is out of bounds.\r\n* **Wrap:** + Set the index to be the other end of the array. In other words, going past + the end of the array moves the index back to 0 and going past the beginning + of the array sets the index to the last in the array (`list.length` will be + helpful here).\r\n\r\n# Do This:\r\n\r\n* **Add `if` statements** to the event + handlers on the \"Next\" and \"Last\" buttons that **prevent the global index + from going out of bounds** using one of the two strategies described above.\r\n* + Run your program to confirm that the user **cannot go out of bounds** and + that the output displayed is correct." + CSPU5_U3 - Arrays - favThings createArray_markdown_instruction: "# Create Your + Array\r\n\r\nNow that we've dealt with our design elements we'll need to + start writing the actual code of our app. This app keeps track of a list of + items, so we know that **we'll need to create an array** to store them. \r\n\r\n# + Do This:\r\n\r\n* **Create an array** that will hold your list of favorite + things.\r\n* **Add three of your own favorite things to your array.**" + CSPU5_U3 - Arrays - favThings firstOutput_markdown_instruction: "# Displaying + Information to the User\r\n\r\nBefore we make our application interactive, + we'll want to practice creating some simple user output. When the app starts + up, the first item in your list should be displayed. Let's write the code + that will display this information to the screen. \r\n\r\n# Do This:\r\n\r\n<img + src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 + AM.png\" style=\"width: 250px; float:right\">\r\n\r\n* Using `setText` set + the main text area to show your first favorite thing.\r\n* Using `setText` + and `list.length` set the text indicating what item of the list the user is + currently viewing.\r\n\t* **Hint:** since arrays are zero-indexed **you will + have to add one to your index** to generate the correct value to display.\r\n* + **Note:** neither of these outputs will be able to change yet. Don't worry, + we'll be taking care of that in coming exercises!\r\n\r\n" + CSPU5_U3 - Arrays - favThings giveIDs_markdown_instruction: "# Getting Started: + Creating IDs\r\n\r\nTo get your application off the ground we've provided + **the user interface elements that you will use in your application**. Unfortunately + they all currently have **default IDs** which don't reflect how the elements + will be used.\r\n\r\n# Do This:\r\n\r\n* **Create a descriptive and meaningful + ID** for each element in your app." + CSPU5_U3 - Arrays - favThings keepPlaying_markdown_instruction: "# Keep Going!\r\n\r\nYour + app should now be fully functional - nice job! There are of course plenty + of new pieces of functionality to add. If you have time feel free to make + any improvements you wish. Here are some ideas:\r\n\r\n* Allow the user to + **append items** rather than add them at the current location.\r\n* Give the + user the ability to **remove** the item at the current index. This can be + a little tricky if you **remove the item at the end of the list** so see if + you can account for that.\r\n* Only add words **if they are not blank**.\r\n* + **Improve the appearance** of the app." + CSPU5_U3 - Arrays - indexPractice_markdown_instruction: "# Index Practice\r\n\r\nIt + will take some practice to get comfortable using array indexes. We'll do + a couple of exercises to build your confidence.\r\n\r\n# Do This:\r\n\r\n<img + src=\"https://images.code.org/4d52429f1d6f8e7812e14d73e2a89c45-image-1447366245418.08.51 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Starter code** has + been provided that creates an array called `myNumbers`.\r\n\r\n* Use `console.log` + and array indexes to write the contents of `myNumbers` to the screen in order, + as shown to the right. Your commands should be of the form `console.log(myNumbers[index])`.\r\n\r\n" + CSPU5_U3 - Arrays - insertingItems_markdown_instruction: "# Inserting Items: + Array Indexes\r\n\r\nIf you want to add elements in the middle of your array + you can use `insertItem` to specify an **index** at which an item should be + inserted.\r\n\r\n![](https://images.code.org/46815edd373b9fe51c4efcf145474ecc-image-1447252675635.37.24 + AM.png)\r\n\r\nJust like `appendItem`, `insertItem` creates a new location + in the array. However `insertItem` allows you to insert an item anywhere in + the array, not just at the end, and it shifts all elements at or after its + index one location over.\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** + for `insertItem`.\r\n* **Starter code** has been provided which appends some + strings to an array, but right now they don't form a complete sentence.\r\n* + Use `insertItem` to **individually insert strings to your array** to form + a complete sentence.\r\n* Use `console.log` to confirm you succesfully created + your sentence.\r\n\r\n![](https://images.code.org/a77efe777082d387f64c4761d890c560-image-1447254451590.06.59 + AM.png)" + CSPU5_U3 - Arrays - insertionErrors_markdown_instruction: "# Out of Bounds\r\n\r\nIn + many languages trying to access indexes of an array that don't exist will + create an error. **JavaScript allows for some strange behavior** with arrays + that it's useful to see, even though **you will likely never use this functionality**.\r\n\r\n**Warning:** + some of this code will generate errors or work in unexpected ways. Don't + spend a long time trying to understand weird results. The point to take from + this is **referencing indexes that are out of bounds will almost never do + what you intend**, and we'll be learning ways to avoid this as we move forward.\r\n\r\n# + Do This:\r\n\r\n* **Starter code** has been provided which creates an array + with three elements.\r\n* Uncomment the **first command that references indexes + that are out of bounds** and run the code.\r\n* **Examine the output** and + try to understand what is happening.\r\n* Reset and then **recomment** the + line after you've used it. \r\n* **Repeat the process for all the lines.**\r\n\r\n**Note:** + We have used a different style of comment in this program. `/* long block + comment */` is used when you want to write a multiple-line comment. " + CSPU5_U3 - Arrays - introIndex_markdown_instruction: "# Accessing Items in + an Array\r\n\r\nAn array is comprised of many locations. You can individually + set or reference the information at each location of your array just like + a variable. To tell your locations apart each has a separate number, or **index**, + that identifies it.\r\n\r\nArrays in JavaScript are **zero-indexed** which + means the first index is 0. This is similar to binary number systems which + begin counting at 0. For example an array of 10 items would have indexes 0-9. + As a result **the last index is always one less than the length of the array**.\r\n\r\n**Accessing + Array Items by Index:** If you know the index of the item you wish to access + you can reference it using square brackets `list[index]` . The example below + prints the value of the 4th element in the array. \r\n\r\n![](https://images.code.org/8b2da597fccaeeafb30b04991074cd8b-image-1447365422277.56.45 + PM.png)\r\n\r\n# Do This:\r\n\r\n**Starter code** has been provided which + creates an array of the numbers 1 through 10\r\n\r\n* Use `console.log` to + display the first item in your array.\r\n* Use `console.log` to display the + last item in your array.\r\n* Use `console.log` to display the number 5 from + the array." + CSPU5_U3 - Arrays - length_markdown_instruction: "# *Array.length*\r\n\r\nAs + we saw in the last exercise, there are many strange behaviors that can result + from referencing array indexes that are less than 0 or greater than the highest + index in your array. **If want to avoid these kinds of errors then it is useful + to know how long your array is,** especially since we've seen that arrays + can grow and shrink during the course of our program.\r\n\r\n![](https://images.code.org/419a610bedaaf709d400c51a6399f482-image-1447263621427.40.15 + AM.png)\r\n\r\nYou can always check the current length of your array using + the command `list.length` where \"list\" is the name of your array. It evaluates + to a number indicating how many items are in your array.\r\n\r\n# Do This:\r\n\r\n* + **Starter code** has been provided which creates several long arrays.\r\n* + **Use `list.length` and `console.log`** to determine how many items are in + each array. An example of the output is below.\r\n\r\n<img src=\"https://images.code.org/f309b94e58f252599de709dd568441fd-image-1447690174179.08.29 + AM.png\" style=\"width: 250px\">" + CSPU5_U3 - Arrays - lengthMinus1_markdown_instruction: "# Expressions as Indexes: + *list.length - 1*\r\n\r\nWe have been accessing information in an array by + using numbers, but we can actually use **any expression that evaluates to + a number as an index in our array**. The first example of this we will explore + is accessing the last item in our array.\r\n\r\nArrays are **zero-indexed**, + which means that the first index is 0. Therefore an array with a length of + 3 will have indexes 0, 1, and 2. Notice that **the last index is 1 less than + the length**. This will always be the case, and so we can use this expression + to access the last element in any array:\r\n\r\n![](https://images.code.org/4b9d62e451188ea00a58102110e447f6-image-1447267224677.28.31 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **Starter code** has been provided that + which creates several arrays.\r\n* Use the syntax provided above and `console.log` + to display the final item in each list.\r\n" + CSPU5_U3 - Arrays - remove_markdown_instruction: "# Removing Items\r\n\r\nSometimes + we want to remove something from an array. In order to do so you'll need + to specify the **index** of the item that should be removed.\r\n\r\n<img src=\"https://images.code.org/350e3dfe234b1ce1e47e11bc0629b47d-image-1447272428285.06.40 + PM.png\" style=\"width: 250px\">\r\n\r\n**Note:** `removeItem` removes the + location in the array at the index provided. As a result **the array is one + location shorter and all the indexes after the index provided will have their + index decreased by one**.\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** + for `removeItem`.\r\n* **Starter code** has been provided which creates an + array of strings.\r\n* Use `removeItem` to **individually remove all the \"REMOVE\" + strings in your array** to form a complete sentence. \r\n* Use `console.log` + to confirm you succesfully created your sentence.\r\n\r\n**Note:** Keep an + eye out; your indexes will shift as you remove items.\r\n\r\n![](https://images.code.org/5ba2247cafcfcb5d8be80db32126105e-image-1447273315312.21.17 + PM.png)" + CSPU5_U3 - Arrays - stringsInArrays_markdown_instruction: "# Arrays Can Hold + Strings\r\n\r\nSo far we have been using arrays to hold numbers, but each + location in an array could hold a string instead.\r\n\r\n![](https://images.code.org/5088def6c9aa8c114fc415bf25d83511-image-1447195709238.48.13 + PM.png)\r\n\r\n**Note:** It is possible for an array to hold both strings + and numbers, but **typically you will only want your arrays to hold one type + of data**.\r\n\r\n# Do This:\r\n\r\n* Create an **empty array**.\r\n* Use + `appendItem` to **individually add strings to your array**, forming a sentence + of at least **5 words**.\r\n* Use `console.log` to confirm you succesfully + created your sentence.\r\n\r\n![](https://images.code.org/72b8a2bf0a98be39fba73498cb6ed5da-image-1489697463827.png)" + CSPU5_U3 - Canvas - 200dots_markdown_instruction: "# Loops on the Canvas\r\n\r\nTo + make things interesting, we're going to quickly add 200 dots to our canvas + by using a `for` loop. **Locations on the canvas are relative to the top-left + corner of the canvas, not the screen**. Therefore you will need to know the + dimensions of your canvas in order to randomly place dots throughout it. You + can find this information in Design Mode:\r\n\r\n![](https://images.code.org/8e0c868a21f5c674efb6adef1040ec2b-image-1448040822360.33.29 + AM.png)\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/345b625e6954dc1ea2310c97aa08c59f-image-1448243004939.gif\" + style=\"float: right\">\r\n* Add a **`for` loop that runs 200 times.**\r\n* + Place the **`circle` command inside the loop** and **decrease the radius** + (try 20).\r\n* **Use `randomNumber` to randomize the `x` and `y` values used + to place your dots**. The ranges you select should be the width and height + of your canvas. \r\n* **COMMON MISTAKE ALERT:** If you test your code before + setting the `x` and `y` values of the circle to random numbers, it will look + like there's only one dot. But really you will have just drawn 200 dots + all at the same (x, y) position.\r\n\r\n" + CSPU5_U3 - Canvas - One Dot sprayPaint_markdown_instruction: "# Making Spray + Paint\r\n\r\nThe next effect we would like to create is a \"spray paint\" + effect. Instead of drawing a single dot for every location stored in `eventList`, + we'll draw many small dots randomly placed around each location.\r\n\r\nWe + are going to start off just practicing **drawing a circle whose x and y locations + use `offsetX` and `offsetY` with a small random value added**. This makes + the line of code to draw the circle kind of long, but hopefully it's easy + to understand if you read it carefully.\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n# + Do This:\r\n\r\n* **Set the style of another button** in Design Mode, give + a label like \"Spray Paint,\" give it a descriptive ID, and attach a click + event handler to it.\r\n* **Copy the code from the \"Original\"** button into + the event handler for spray paint.\r\n* Change the code for `circle` so that + it will **draw a dot whose x and y locations use `offsetX` and `offsetY` with + a small random value added. **\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n* + **Run your app** to make sure it is drawing small dots close to the original + position. Look at the example below.\r\n\r\n![](https://images.code.org/d6279085a5c6689dd5c745a0d0e28136-image-1448386996780.gif)" + CSPU5_U3 - Canvas - appendToArray_markdown_instruction: "# Store Your Dots\r\n\r\nNow + we're going to get into the core of the activity. We will be **creating a + record of every dot your user draws**.\r\n\r\nTo do this, we will append *every* + `event` parameter to an array as events are generated. When we store every + mouse location in an array, we can make many interesting effects and redraw + the image in different ways, by looping over the array. First let's just + make sure we can capture them all.\r\n\r\n# Do This:\r\n\r\n* Create a new + array outside the event handler function: `var eventList = []`.\r\n\r\n* In + your event handler, before you call the `circle` command, use `appendItem` + to add the `event` parameter to `eventList`.\r\n![](https://images.code.org/98f98c0895fafa87b8f6617e5b4629af-image-1448080702748.gif)\r\n\r\n* + **Run the program** and draw some dots.\r\n\r\n* In the Debug Console type + `console.log(eventList)` and inspect the contents. You should have a record + of every event parameter used to draw a dot! (It might be a lot.)\r\n![](https://images.code.org/425bdde5f2d87b34c037b533600f19b4-image-1448080857409.gif)" + CSPU5_U3 - Canvas - changeToMouseMove_markdown_instruction: "# Drawing on *mousemove*\r\n\r\nCurrently + the user can click to add dots, but we want **to place dots wherever the user + moves the mouse on the canvas**.\r\n\r\nTo place dots whenever the mouse is + moved, we'll be **changing the event type from `click` to `mousemove`**.\r\n\r\n# + Do This:\r\n<img src=\"https://images.code.org/960ac863ac908506724eeb9f11165672-image-1448246938599.gif\" + style=\"float: right\">\r\n* Change the event type in your event handler **from + `click` to `mousemove`**.\r\n* **Run your program** to confirm that dots are + being drawn anywhere the user moves the mouse.\r\n\r\n**Your user is now able + to draw anywhere they want on the screen!**" + CSPU5_U3 - Canvas - clickToAdd_markdown_instruction: "# Click to Add Dots\r\n\r\nLoops + are one way of quickly adding dots to our canvas, but now we're going to + change our app so that the user can decide when and how many dots to add. + The canvas is a UI element, so **you can attach event handlers to it just + like you would any other element**. We're going to move the circle command + inside of a click event handler so that the user can click to add individual + dots.\r\n\r\n![](https://images.code.org/ecd25d3ff2bb50f0555ebd012e5c3b88-image-1448078111902.gif)\r\n\r\n# + Do This:\r\n\r\n* **Add an `onEvent` handler**; set its ID to your canvas + ID.\r\n* **Move the `circle` command out of your `for` loop and into your + new event handler**.\r\n* **Remove the `for` loop from your program.**\r\n* + **Run your program** and confirm that a single dot is added everytime a user + clicks your canvas.\r\n\r\n![](https://images.code.org/0064f8ac406a9f09dc742c81d8510f16-image-1448244621879.gif)" + CSPU5_U3 - Canvas - delete_markdown_instruction: "# Delete Button\r\n\r\nWe + are finally going to use those buttons! Each one will trigger an event handler + that **processes the array `eventList` to create a visual effect** with the + mouse data you have stored. **The first effect we are going to create is delete.**\r\n\r\nYou + may want to provide your user with a way to start over with their drawing. + In order to do this, you will need to *both* **clear the canvas** and **delete + all items from `eventList`.** The easiest way to delete everything from the + list is to simply set the value of `eventList` to be a new empty list.\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/f8fca0d889ae9ddc3ac9b33ba27fadce-image-1448311933871.gif\" + style=\"width: 200px; float: right\">\r\n\r\n* In Design Mode, set the styling + and text of one button to indicate it's the \"delete\" or \"start over\" + button. Give your button **a descriptive ID**.\r\n\r\n* **Add a click event + handler** to your button.\r\n\r\n* Within the event handler call `clearCanvas`.\r\n\r\n* + Set `eventList` to the empty array (i.e., `eventList = []`).\r\n\r\n**Test + your program** to make sure that starting over works the way it should. \r\n" + CSPU5_U3 - Canvas - draw at click point_markdown_instruction: "# Drawing Dots + at Click\r\n\r\nCurrently the user can click to add dots, but they're drawn + at random locations around the canvas. We're going to use information stored + in the `event` parameter of the event handler function **to place dots wherever + the user clicks the mouse on the canvas**.\r\n\r\nThe event parameter has + two critical pieces of information we'll want, which are `event.offsetX` + and `event.offsetY`. These hold **the location (relative to the top left corner + of the canvas) that was clicked**. \r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/1c6109cfc1b02c3ba737519d3f01d1b4-image-1448301532145.gif\" + style=\"width: 200px; float: right\">\r\n\r\n* **Remove (or comment out) the + `console.log` statement**.\r\n* Replace the `x` and `y` parameters of the + `circle` command with `event.offsetX` and `event.offsetY`.\r\n* **Run your + program** to confirm that dots are being drawn anywhere the user clicks the + mouse." + CSPU5_U3 - Canvas - freePlay_markdown_instruction: "# Create Your Own Effect!\r\n\r\nYou've + just seen several ways that we can process our array `eventList` in order + to create different effects. Now it's time to make your own! **Extend the + functionality of one of the effects you just created, or create an entirely + new one**. What else could you do with the information you've stored in your + array? How else might you combine the programming tools you've developed?\r\n\r\n# + Do This:\r\n\r\n* **Extend the functionality of one of the effects, or create + an entirely new one of your own!**" + CSPU5_U3 - Canvas - introCanvas_markdown_instruction: "# Introducing Canvas\r\n\r\nToday + we are going to be building a drawing app around **a new UI element called + the canvas**.![](https://images.code.org/26713ddcc9477e64c347c228d68cac0a-image-1447994134674.35.25 + PM.png)\r\n\r\n![](https://images.code.org/044ad7db1cb4101f54302bd4013d1cc2-image-1448241882228.gif)\r\n\r\n**A + canvas is simply a transparent rectangle on which you can draw basic shapes** + like lines, circles, and rectangles. In fact, at first you might feel like + we're going to end this unit in the way we started it, making turtle drawings. + Don't worry, we'll quickly move into new and exciting things we can do with + this new UI element.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/3874f5e430a6290544466b2037490ae4-image-1448242142421.28.33 + PM.png\" style=\"float: right\">\r\n* **Starter code** is provided which places + buttons on the bottom of your screen. **Ignore these for now; we'll be using + them later**.\r\n* **In Design Mode, drag a canvas element into the empty + space at the top of your app**, resize it, and give it a descriptive ID.\r\n* + **Call `setActiveCanvas` with the ID you assigned to your canvas**, which + makes it responsive to canvas commands.\r\n* **Add a giant circle to the canvas.** + Use the `circle` command. Make its radius large enough that it goes off the + edge of your canvas.\r\n\r\nYour code will look something like this:\r\n\r\n![](https://images.code.org/f0cc22a1de686db72ebce90c720ae6e4-image-1447994225253.36.59 + PM.png)" + CSPU5_U3 - Canvas - movementFunction fix Orig_markdown_instruction: "# Fix + the \"Original\" Button\r\n\r\nOur \"Original\" button is now slightly broken + because the effect it renders doesn't match our new free-form drawing which + takes the movement of the mouse into account - it just draws fixed-size cricles.\r\n\r\nLet's + fix the \"Original\" button.\r\n\r\n# Do This:\r\n\r\nIn the event handler + function for the \"Original\" button:\r\n\r\n* Change the value used for the + radius from a fixed value to the same thing calculated for the free-form drawing. + Since you wrote a function to do this calculation, it should be easy to call + it from this code as well!\r\n* The **slight difference will be that you will + be looping over the array of events.** So the line of code that draws the + circle might look like the one below. This line of code is certainly a mouthful, + but it's basically the same as the line of code in your `mousemove` event + handler; **it just references the event in the list instead.** <br><img src=\"https://images.code.org/dbb4cd9b98eba70aa2919a93544c1e03-image-1448314845862.40.21 + PM.png\" style=\"width: 600px\">\r\n* **Test your program** to confirm that + clicking the \"Original\" button creates the same effect that occurs when + doing free-form drawing.\r\n\r\n![](https://images.code.org/4fcf033e87dc407d337941a7adc4766b-image-1448394246410.gif)" + CSPU5_U3 - Canvas - movementFunction_markdown_instruction: "# Adjusting Circle + Size\r\n\r\nAmong the other pieces of information contained in each `event` + parameter are the values `movementX` and `movementY`. These numbers tell us + how far (in pixels) the mouse moved since the last mouse event was triggered, + and can be used to measure the speed of the mouse. ** If the movement is large, + the mouse is moving fast; if the movement is small, the mouse is moving slowly.**\r\n\r\nLet's + use the mouse movement speed to make a cool effect. When we draw with a real + pen or brush, the line usually gets thin when making quick strokes and is + wider and darker when making slower ones. We can generate this effect by **using + `movementX` and `movementY` to calculate the radius for the circle.** Since + this calculation might be a little tricky, a smart thing to do would be to + **write a function** that takes `movementX` and `movementY` as parameters + and **returns** a value that should be used as the radius.\r\n\r\n<img src=\"https://images.code.org/b9dc4c20d44af7b4e7725b71cd35fa2b-image-1448313734191.21.43 + PM.png\" style=\"width: 350px; float: right; border: solid 1px black\">\r\n\r\nThere + are several ways to do this. One possible way to write the function is provided + on the right, which uses some arithmetic tricks. The function to the right + is actually only three lines of code but is heavily commented to explain what + it's doing. It makes use of a function called **`Math.abs` which returns + the absolute value of a number.** Feel free to use this or another method + of converting `movementX` and `movementY` into a radius.\r\n\r\n<details> + <summary><strong>What is Absolute Value?</strong> [click to expand]</summary>\r\n`Math.abs` + takes a number as input and returns the positive version of this number. \r\n\r\nIn + math, absolute value is often written with this | | symbol. So |10| is the + absolute value of ten and |-10| is the absolute value of negative ten. Both + evaluate to 10.\r\n\r\nIn Javascript we use `Math.abs` instead of | |. `Math.abs(-10)` + and `Math.abs(10)` both evaluate to <strong>10</strong>.\r\n</details> <br>\r\n\r\n# + Do This:\r\n\r\n* **Write a function like the one above** that accepts two + parameters (one each for `movementX` and `movementY`) and returns a radius. + A higher speed should lead to a smaller radius.\r\n* **Inside your `mousemove` + event handler,** set the radius of the circle to the value returned by your + function, where the function takes `event.movementX` and `event.movementY` + as input. For example, if using the function above, your code would be: <br>![](https://images.code.org/94a379336084954ba2ab27e80b17dee3-image-1448314255797.30.22 + PM.png)\r\n* Run your program and confirm that **when you draw, the speed + of the mouse affects the radius of the dots**. The effect should look something + like what's below \r\n\r\n![](https://images.code.org/ee83d18f04e4d9d486428273b7321f9f-image-1448394071473.gif)" + CSPU5_U3 - Canvas - redrawOriginal_markdown_instruction: "# Redraw Original\r\n\r\nIf + you were able to get that working and understand what you did, congratulations! + That was some serious programming! If not, take a moment to go back and talk + through the different components with a classmate. Most of the work we'll + be doing for the rest of this lesson uses similar patterns, and you'll want + to be comfortable with them as we add more complexity to our app.\r\n\r\nThe + first thing we are going to do is **create an \"Original\" button that will + redraw the image with the same circle radius you used before**. The process + will be nearly identical to how you added the \"Random\" button.\r\n\r\nIn + fact, the code to redraw the original is *exactly* the same, except instead + of making the radius of the circle be random, it will just be the fixed value + you used originally (probably radius 5 or so).\r\n\r\n![](https://images.code.org/9238e313e8f635e2e6b31ad19d0fdc41-image-1448290929994.gif)\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/6cf1d46af7cd92cc1faf1501366e2e1a-image-1448312993714.gif\" + style=\"width: 200px; float: right\">\r\n(**NOTE:** The instructions below + are shown in the code animation above.)\r\n\r\n* Style a button, give it label + like \"Original,\" give it a meaningful ID, and add a \"click\" event handler.\r\n* + Inside the event handler for your \"Original\" button...\r\n\t* Copy the code + from the \"Random\" button event handler.\r\n * Paste it inside the event + handler for the \"Original\" button.\r\n\t* Set the `radius` parameter to + **whatever value you used when you originally drew dots**.\r\n* Test your + program by drawing a figure and then hitting your \"Randomize\" button. Then + hit the \"Original\" button. Your original drawing should appear." + CSPU5_U3 - Canvas - redrawRandom_markdown_instruction: "# Redraw Random - Part + 1\r\n\r\nThe next effect we are going to create is **\"random.\"** We will + be redrawing the image but with randomly sized dots.\r\n\r\nWe'll be doing + this in two steps. For now, all you need to do is **change the first button + in the row to have the proper styling and attach a click event handler to + it**. **In addition, clear the canvas from inside the event handler** so we + are ready to redraw our new image. We don't want to delete all the items + from the array though, as we will use them to redraw. Once you've done that, + move on to the next exercise where we'll write the actual code in our event + handler.\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/0116a787b989df18b077cb4657a5d379-image-1448312365660.58.05 + PM.png\" style=\"width: 200px; float: right\">\r\n\r\n* In Design Mode, **pick + a button to use for Random. Set the styling and text of the button**. The + image below shows one possible option, but you can style it however you like.\r\n\r\n* + Give your button **a descriptive ID**.\r\n\r\n* **Add a click event handler** + to your button.\r\n\r\n* **Call `clearCanvas`** from inside the event handler + so the canvas is ready for the redraw." + CSPU5_U3 - Canvas - redrawRandom2_markdown_instruction: "# Redraw Random - + Part 2\r\n\r\nNow we're ready to write the code for our \"Random\" effect. + To do this, we will be clearing the canvas and then processing the array `eventList` + to redraw all the dots with a random radius. \r\n\r\nYou already set up the + clear canvas, so next we'll need to process our array in order to find out + the event information for each dot. You'll need to create a `for` loop that + iterates through every index in `eventList` (recall the `length` command). + Within your loop, you will be drawing dots referencing items stored in the + array. \r\n\r\nAs you write this code, remember that **you can treat an individual + element of an array exactly like the kind of data it stores**. Inside a `for` + loop, the event at index `i` can be accessed with the notation `eventList[i]` + and the `offsetX` of that event can be accessed with `eventList[i].offsetX`. + Again, you are essentially treating the array element as if it were the data + it contains.\r\n\r\n![](https://images.code.org/8ce01658ab31ce5f05101e58e3413681-image-1448250618520.gif)\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/6e081911348f3c1b07d17f83bd402249-image-1448312722857.gif\" + style=\"width: 200px; float: right\">\r\n\r\n(**NOTE:** Everything listed + below is shown in code animation above.)\r\n\r\n**Inside the \"Random\" button + event handler...**\r\n* **Add a `for` loop** that runs `i` from 0 up to `eventList.length` + to process over the array.\r\n* **Add a `circle`** command inside your loop.\r\n* + **Set the x and y parameters** of the `circle` to `eventList[i].offsetX` and + `eventList[i].offsetY`, respectively.\r\n* **Set the `radius` parameter** + to some `randomNumber`. Pick any range you like. You can always change it + later.\r\n* **Test your program** by drawing a figure and then hitting your + \"Randomize\" button. It should be the same drawing, but now with randomly + sized dots!" + CSPU5_U3 - Canvas - shiftKey_markdown_instruction: "# Draw When a Key is Pressed\r\n\r\nThis + app now lets the user draw, but they have no control of whether the pen is + up or down. Let's give the user the ability to **choose when to put down + the pen**. We won't even need to add a new event handler to our app! \r\n\r\nYou + may have noticed that the **`event` parameter includes information about whether + certain keys were pressed when the event fired**. They are stored in variables + with names like `shiftKey` or `altKey` and are stored as boolean values (true + / false). We are going to use the `shiftKey` variable to decide when we should + draw circles. \r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/1a4b8f12645e5e88dee96d5542933c84-image-1448248202626.gif\" + style=\"float:right\">\r\n\r\n* **Add an `if` statement inside your event + handler function** where the condition is based on the value stored in `event.shiftKey`: + **If `shiftKey` is true, then draw the circle.** <img src=\"https://images.code.org/a542766e8e52fed5ca992f2434ace086-image-1448307484936.37.32 + PM.png\" width=\"200\">\r\n\r\n* You might want to **decrease the radius of + your circle** (for example to 5).\r\n\r\n* **Run the program and confirm that + dots are only drawn when the shift key is pressed.**\r\n\t* The effect should + be that the user can pick up and put down the pen to draw.\r\n\t* Hold the + shift key down and move the mouse to draw.\r\n\t* Release the shift key to + stop drawing.\r\n\r\n(**NOTE:** If you wish, use `console.log` to display + the values in `event` again. You'll see `event.shiftKey` is one of the values + stored.)\r\n" + CSPU5_U3 - Canvas - sketch_markdown_instruction: "# Relative Indexes\r\n\r\nWhen + looping over an array, we use a counter variable (typically `i`) to keep track + of which index we're at. We can then access the contents at each index with + the syntax `list[i]`.\r\n\r\nIf we want, however, we could access the contents + of the next element as well, since its index is just one greater. For example, + if we are currently focused on the element at index `i`, then `list[i+1]` + gives us access to the next element in the array. In other words, you can + **reference indexes relative to your counter variable**.\r\n\r\n![](https://images.code.org/3bb5dfce60951040172bfe08d98a8750-image-1448393281688.png)\r\n\r\nWe + are going to use relative indexing to create our final effect, which will + look sort of like an etching of the image. The idea is simple: **for every + (x, y) location in the event list, draw a straight line between that + location and the location stored 10 spots further down the array.** You will + use the **`line` command** to draw a line connecting these points.\r\n\r\n# + Do This:\r\n\r\n* **Read the documentation for `line`**.\r\n* **Set the style + of the final button** in Design Mode, give a label like \"Etch,\" give it + a descriptive ID, and attach a click event handler to it.\r\n* **Call `clearCanvas`** + to clear the screen.\r\n* Create a `for` loop that counts from **0 to `eventList.length + - 10`**. \r\n\t* Why do you think we're not counting over the entire array?\r\n* + Use `line` to draw a line between the (x, y) locations of `eventList[i]` + and `eventList[i+10]`. The full line of code will be another big one: ![](https://images.code.org/5de2c40b56042069379ff20ce5d10cab-image-1448393948598.38.49 + PM.png)\r\n* **Use `setStrokeColor` and/or `setStrokeWidth` inside the event + handler** to make the lines visible; otherwise, they will be transparent, + since we set the stroke color to transparent at the beginning of the program.\r\n* + **Run your app** and confirm that your new button creates a sketch effect, + as shown below.\r\n\r\n![](https://images.code.org/c06c268a4757e8838435e576a676a0a2-image-1448395181441.gif)" + CSPU5_U3 - Canvas - sprayPaint_markdown_instruction: "# Making Spray Paint + with Nested Loops\r\n\r\nIn order to make \"Spray Paint\" look more real you + will need to draw multiple dots randomly placed around the original x and + y locations. In order to do this, you will place one `for` loop inside of + another, also known as a **nested loop**. You already have the main loop which + visits every index in `eventList`. The inner loop should **draw 5 circles + whose x and y locations use `offsetX` and `offsetY` with a small random value + added**. \r\n\r\n# Nested Loops\r\n\r\n<img src=\"https://images.code.org/15d7590ed9d4c07a40f22da4decc396c-image-1448153719856.54.36 + PM.png\" width= 300px ; style=\"float: right\">\r\n**When nesting loops, it + is important that you use different variables to count your iterations**. + Look at the example at right. These nested loops effectively say: **\"for + every possible value in `eventList.length`, run a loop 5 times\". **\r\n\r\nSince + `i` is used as the counter variable in the outer loop, we need to use a *different + counter variable for the inner `for` loop*, or things will go haywire. Why? + **If both loops used `i` as a counter variable, the inner loop would keep + changing `i` and the outer loop wouldn't count properly.** The example uses + `j` as the inner loop variable, but you could use anything that's *not* `i`.\r\n\r\n<img + src=\"https://images.code.org/b5184430a48ac55d8f6fe7280c983186-image-1448387927473.gif\" + style=\"width: 450px\">\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/290adbb84a51b89ca27414746d3a4a93-image-1448395072342.gif\" + style=\"width: 200px; float: right\">\r\n\r\n(**Note:** Steps shown in animation + above.)\r\n\r\n* **Add a `for` loop inside the existing `for` loop** in the + spray paint event handler. \r\n* **Change the counter variable** to something + other than `i` for the inner `for` loop.\r\n* **Change the boolean condition** + so the inner loop will run **5 times.**\r\n* **Move the circle** code inside + both `for` loops.\r\n* **Run your app** and confirm that your new button creates + a spray paint effect, as shown below." + CSPU5_U3 - Canvas - transparentDots_markdown_instruction: "# Changing Colors + in Canvas\r\n\r\nWe would like to make our dots transparent so that we can + see when they are drawn on top of each other. To set the color and transparency + of shapes you draw on your canvas, you need to change both the **stroke** + or outline color and the **fill** color. The functions `setStrokeColor` and + `setFillColor` can be used to set those colors. \r\n\r\nThese functions **accept + strings of the form `\"rgba(100, 200, 100, 0.5)\"` as input**. The first three + values in the string are RGB values and the last value is the transparency, + as represented by a decimal number between 0 and 1.0. All together it looks + like this:\r\n\r\n![](https://images.code.org/5f5692259df092ce4e000cbdf5a7df1b-image-1448077147778.png)\r\n<img + src=\"https://images.code.org/e833a63e31dca7d5e8357c0b856dc7cc-image-1448244247180.gif\" + style=\"float: right; width: 150px\">\r\n\r\n# Do This:\r\n\r\n**Before the + loop: ** \r\n* **Add a `setStrokeColor` command** to set the stroke to **fully + transparent**.\r\n* **Add a `setFillColor` command** to set your dots to full + black and mostly transparent **(try a value of 0.2)**." + CSPU5_U3 - Canvas - usingOffsetXY_markdown_instruction: "# The Event Parameter + for Mouse Events\r\n\r\nWe'd like to change the app so that when the user + clicks on the canvas we draw a circle right where they clicked. To do that, + we need to learn more about the **parameter passed by our event handler function, + which by default is called `event`**.\r\n\r\nRecall that when we wanted to + know what key the user pressed on a `keyPress` event, we checked the value + stored in `event.key`. **The event parameter actually stores a great deal + more information about each event**. \r\n\r\nWhen using the mouse, the event + parameter carries information like the location of the mouse, how fast it's + moving, and some other things as well. \r\n\r\nLet's get acquainted with + the event parameter and what we can find out about the mouse.\r\n\r\n# Do + This:\r\n\r\n* Add a `console.log` command inside the function of your event + handler. Use it to display the `event` parameter.\r\n* Run your program and + click your canvas. **The full contents of the `event` parameter should be + displayed in the console**. \r\n* **Which values do you think hold the x and + y coordinates**? What else is there?\r\n* We won't use all of these, but + it's interesting to see just how much is available.\r\n* Once you have experimented + a little, move to the next level.\r\n![](https://images.code.org/a6875e27019cb938a9576f0485648ca9-image-1448041792987.49.30 + AM.png)\r\n" + CSPU5_U3 - Conditional Basics - 6_markdown_instruction: "# What happens after + an *if* ?\r\n\r\nYou may have noticed that our flowchart for our game so far + only does something if the condition is true. What happens after the `if` + statement? Let's find out.\r\n\r\n<img src=\"https://images.code.org/90b7a527091704a6ab4612b9f84db305-image-1446234882661.png\" + style=\"width: 200px\">\r\n\r\n# Do This:\r\n\r\n* **Add a `setText` after + the `if` statement** to \"Nope. Guess again.\"\r\n\r\n<img src=\"https://images.code.org/f5c5de1b77a9caf16027e65ed24f91ec-image-1446234785600.gif\" + style=\"width: 450px\">\r\n\r\n* **Run the program** a couple times to **look + for a bug**. We will fix this on the next level." + CSPU5_U3 - Conditionals - Combine AND OR Simple_markdown_instruction: "# Combining + AND and OR\r\n\r\nYou can express more complex conditions by combining **AND** + and **OR** in one statement. Here is the example from the previous page which + you can use as a reference. This statement will evaluate to **true** if the + day is Tuesday or Thursday AND their age is 15 or 16.\r\n\r\n![](https://images.code.org/3f3aba7828abd88fdbd90eda60611bd3-image-1448062956405.06.36.png)\r\n\r\n# Do + This:\r\nWe've provided you with starting code that prompts the user to enter + a **day** and their **age** and stores the result in variables.\r\n\r\n**Add + an `if` statement that uses both AND and OR operators**\r\n\r\n * The app + should write \"Sleep in!\" if it's a weekend and the user is a teenager.\r\n + * Otherwise it should write \"Uh oh. Have to wake up.\"\r\n \r\n\r\nTry it + out!\r\n" + CSPU5_U3 - Conditionals - Combine AND OR and NOT_markdown_instruction: "# Combining + AND and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean + expression to invert its result. This opens the door to express the same logical + statements in different ways. \r\n\r\nFor example, let's say you want to + determine if a person, based on his or her age (under 12 or over 65) gets + to pay a reduced price for a movie ticket. You might express that like this:\r\n\r\n```\r\n// + If your age is less than 12 or greater than 65\r\nif( (age < 12) || (age > + 65) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\nBut + you might also figure out a way to determine if a person gets a reduced price + ticket by determining if his or her age is between 12 and 65 (`(age >= 12) + && (age <= 65)`) and then taking the inverse of that. So using the NOT operator + this would work as well:\r\n\r\n```\r\n// If your age is NOT between 12 and + 65\r\nif( !( (age >= 12) && (age <= 65) ) ){\r\n\twrite(\"You qualify for + a reduced price!\");\r\n}\r\n```\r\n\r\n**Why use one over the other?** Personal + preference. Use the one that makes the most sense to you, but it should be + a clear expression of what you are trying to say. \r\n\r\n\r\n# Do This:\r\nWe've + provided you with starting code that prompts the user to enter a **day** and + their **age** and store it in variables.\r\n\r\n**Add an `if` statement that + uses both AND and OR operators**\r\n\r\n * The app should write \"Time for + school!\" if it's a weekday and the user is under 18.\r\n \t* Hint: one way + to say that it's a weekday is to say that it's NOT a weekend.\r\n * Otherwise, + if it's a weekday and the user is 18 or older, it should write \"Time to + go to work!\"\r\n * Otherwise, it should write \"Time to relax for the weekend!\"\r\n + \r\n \r\n**WARNING** logic can get tricky sometimes. Make sure to test your + program with inputs that cover every possibility. There are 4 basic cases + to test for:\r\n\r\n * It is a weekday and age is under 18\r\n * It is a weekday + and age is not under 18\r\n * It's not a weekday and age is under 18\r\n + * It's not a weekday and age is not under 18\r\n\r\nTry it out!" + CSPU5_U3 - Conditionals - Simple AND_markdown_instruction: "# AND Operator\r\n\r\n<img + src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nAgain you will see the + JavaScript boolean operators AND (`&&`) and OR (`||`) in code toolbox. You + can drag them out or simply type them.\r\n\r\nLet's now try out using an + **AND** operator. As a reminder: **if both statements are true** then AND + evaluates to **true**. **If either (or both) are false** the AND operator + will evaluate to **false**.\r\n\r\n<img src=\"https://images.code.org/4a461db916ded2acccfcdb9a75ef8838-image-1446483668310.png\" + style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\nWe've provided + you with starting code that prompts the user to enter their **age** and stores + it in a variable.\r\n\r\n**Add an `if` statement with a Boolean expression + that uses an AND operator (`&&`)** to express:\r\n\r\n * IF *the age is between + 13 and 19* write \"You are a teenager.\"\r\n * ELSE write \"You are not a + teenager.\"\r\n" + CSPU5_U3 - Conditionals - Simple OR_markdown_instruction: "# OR Operator\r\n\r\n<img + src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nYou will now see the + JavaScript boolean operators AND (`&&`) and OR (`||`) in code toolbox. You + can drag them out or simply type them.\r\n\r\nLet's try OR right now. As + a reminder: the OR operator will evaluate to true if *either or both* statements + are true. If both are false, the OR operator will evaluate to false. \r\n\r\n<img + src=\"https://images.code.org/48d59f73e701d452dd74ae304db59d93-image-1446482464792.png\" + style=\"width: 200px; float:right\"> \r\n\r\n\r\n# Do This:\r\nWe've provided + you with starting code that prompts the user to enter a day of the week and + stores it in a variable.\r\n\r\n**Add the boolean expression to the if-statement + to use an OR (`||`)** to express:\r\n\r\n * IF *it's Saturday or Sunday* + then write **\"It's the weekend!\"** \r\n * Else write **\"Can't wait for + the weekend to get here.\"**" + CSPU5_U3 - Design Mode - Console Log_markdown_instruction: "# Updating IDs + and Debugging with Console Log\r\n\r\nIn the last level you tested out the + new command: `console.log`. In this level we have a couple buttons with event + handlers and `console.log` statements, but they are switched around!\r\n\r\nWe + should have given the buttons better ID names so we could tell the difference + based on the ID. **Can you update the ID names and `console.log` messages + to match the correct button? **\r\n\r\n# Do This\r\n\r\n* **Change the IDs** + of the buttons in Design Mode to more descriptive names.\r\n\r\n* Switch to + Code Mode and notice that the **ID pulldowns have been updated to include + the new IDs**. (You still need to select the correct ID from the pulldown + menu.)\r\n\r\n* **Update the `console.log` messages** to match the buttons.\r\n" + CSPU5_U3 - Design Mode - Layers and Delete_markdown_instruction: "# Layering + and Deleting\r\n<img src=\"https://images.code.org/9e620f70869de438c4f0c66663686876-image-1444678130772.gif\" + style=\"width: 150px; float: right\">User interface elements can overlap one + another, so you'll want the ability to change the order or **depth** at which + each one is rendered. \r\n\r\nIf you **scroll to the bottom of the Properties + tab** you'll find buttons which allow you to easily **delete or change the + depth** of an element.\r\n* **Delete an Element** by selecting it (clicking + on it) in the design view and then clicking **Delete** in the properties tab.\r\n* + **Change the depth** of elements by using the double or single arrows.\r\n + * Click the double arrow to send all the way to front or back.\r\n * Click + the single arrow to move up or down one layer.\r\n \r\n# Do This:\r\n\r\nUse + the **delete** and **depth** tools to **create the \"After\" image**\r\n\r\n\r\n<table>\r\n<tr>\r\n\t<th + style=\"text-align:center\">Before</th>\r\n <th style=\"text-align:center\">After</th>\r\n</tr>\r\n<tr>\r\n\t<td + align=center><img src=\"https://images.code.org/023f749ecb58c91869a4eacab6701203-image-1444685187662.png\" + style=\"width:200px ; border: solid 1px black\"></td>\r\n <td style=\"text-align:center\"><img + src=\"https://images.code.org/e45fc7d451c071683fd3b59466b106b0-image-1444684677212.png\" + style=\"width:200px; border: solid 1px black\"></td>\r\n</tr>\r\n</table>" + CSPU5_U3 - Design Mode - Multi Screens 2_markdown_instruction: "# Switching + Screens\r\n\r\nIn the last level you made two screens, a black one and a white + one. However when you ran the app you probably noticed that you had no way + to see the second screen. Let's fix that.\r\n\r\nIn order to switch between + screens we have added a new command: `setScreen`. Read the documentation to + figure out how this command works.\r\n\r\n<img src=\"https://images.code.org/152f45b312da467f0b553efc9fba20a7-image-1444354703453.gif\" + style=\"width: 250px; float: right\">\r\n\r\n**Goal:** Make a 2 screen app + which can switch back and forth between a black screen and a white screen + using buttons.\r\n\r\n# Do This:\r\n\r\n* **Put a button on each screen**. \r\n\r\n* + **Set up event handlers** for each of your buttons. \r\n\r\n* **Use the `setScreen` + block to switch screens** when the buttons are clicked.\r\n\r\n* Test out + your app to make sure you can switch back and forth between the two screens." + CSPU5_U3 - Design Mode - Multi Screens_markdown_instruction: "# Second Screen\r\n\r\nUp + until now our apps have only been able to have one view. With Design Mode + we can now make multiple screens and switch between them!\r\n\r\n**Goal:** + Make a 2 screen app with a black screen and a white screen. \r\n\r\n<img src=\"https://images.code.org/e35a6f494cf6f0c57c66a1aef651cdb0-image-1444353622241.gif\" + style=\"width: 250px; float: right\">\r\n\r\n# Do This:\r\n\r\nSwitch to Design + Mode and **add a second screen**. There are two ways to add a second screen: + \r\n\r\n* Drag out <img src=\"https://images.code.org/4337b39cfd797ed9289b70fb6cb365fb-image-1444353631083.17.39 + PM.png\" style=\"width: 50px\"> from the Design Toolbox. Check out the screen + dropdown menu at the top right of the app window. You should now have two + screens! <img src=\"https://images.code.org/b48d978335701888b744702f25f11b28-image-1444353746012.17.07 + PM.png\" style=\"width: 75px\"> \r\n* From the screen dropdown menu at the + top right of the app window click *New Screen*. \r\n\r\nMake screen1 white + and screen2 black. **Set the background color for a screen in the Properties + tab**. Make sure to rename the screens with appropriate IDs." + CSPU5_U3 - Design Mode - WTF Console Log_markdown_instruction: "# Console Log\r\nIn + the last level, we saw a new command: `console.log`. You may have noticed + that it prints out text in the Debug Console below the code workspace.\r\n\r\n<img + src=\"https://images.code.org/326e0f6c7d3b846ba06db998f06f56aa-image-1444419414248.36.33 + PM.png\" style=\"width: 450px; border: solid 1px black\"> \r\n\r\nThe Debug + Console is an important tool for programmers. You've seen it display error + messages, but you can also send messages that a user cannot see to the Debug + Console while a program is running. <img src=\"https://images.code.org/cdc253db1b9a3685eaf5ea4b6bc30766-image-1444337429645.png\" + style=\"width: 250px; float: right; border: solid 1px black\"> The Debug Console + is really helpful for debugging programs because you can send messages to + yourself from within your own code!\r\n\r\nYou can find `console.log` in the + code toolbox under the Variables tab.\r\n\r\n# Do This:\r\n\r\n* Drag out + 3 `console.log` commands into the workspace.\r\n\r\n* Update each `console.log` + with your own messages.\r\n\r\n* Run the program a couple times to test out + this new command." + CSPU5_U3 - Design Mode -Recreate Beyond Buttons_markdown_instruction: "# Improved + Chaser Game\r\n\r\nNow lets improve the \"Chaser Game\". This is where you + get to use your creativity. Make it look nice!\r\n\r\nIn addition you will + notice a new command in the toolbox: `playsound`! Read the documentation about + how to add sounds.\r\n\r\n**Note:** Your code from before has been provided + for you.\r\n\r\n# Do This:\r\n\r\n* **Create a Welcome Screen** that explains + the rules of the game. Include a \"Start Game\" button.\r\n\r\n* Update the + your code so that the **image jumps to a new location when it is clicked**. + \r\n\r\n* **Play a sound** each time the image is clicked.\r\n\r\n* **Add + a Game Over Screen** with a lose message and button to start over. The Start + Over Button should direct back to the Welcome Screen.\r\n\r\n* **Make the + user lose**, by sending them to the Game Over Screen, when the background + is clicked.\r\n\r\n\r\n" + CSPU5_U3 - Design Mode 1_markdown_instruction: "<img src=\"https://images.code.org/5e6fa5738796d69775c0786ca9b4a076-image-1476735925167.png\" + style=\"float: right\">\r\n# Design Mode\r\n\r\n**You Try it:** Add a large + red button to your app using Design Mode.\r\n\r\n* Switch to Design Mode\r\n* + Drag a button onto the app screen\r\n* Change the text to say \"Click Me!\"\r\n* + Make the color of the button red.\r\n\r\n\r\n" + CSPU5_U3 - Dice - Dropdown and Score_markdown_instruction: "# Adding Guess + and Score to Dice Game\r\n\r\nLet's have the user guess the number that will + come up when we roll a single die. \r\n\r\nYou can have multiple `if` statements, + one after another, if they have different purposes which are separate. \r\n\r\n** + Note: ** Use the flowchart below to help you figure out the logic of the game.\r\n\r\n# + Do This:\r\n\r\n* **Add a dropdown** to take in the user's guess from 1 to + 6.\r\n\r\n* **Add a set of `if` statements to check if the dice roll number + is equal to the user guess.** Put this set of `if` statements after your set + of `if` statements for the dice image. It should be completely separate from + the other set of `if` statements. \r\n\r\n* Create a variable to **keep track + of score**. Give 10 points if they guess right and take one point away when + they guess wrong.\r\n\r\n* **Display the score** on the screen and update + it after each dice roll.\r\n\r\n<img src=\"https://images.code.org/ac24917ca18606f6f3c31a6be1a16d73-image-1446174953979.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/ac24917ca18606f6f3c31a6be1a16d73-image-1446174953979.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - Dice - Dropdown with Strings_markdown_instruction: "# Adding Difficulty + Levels: Dropdowns with Strings\r\n\r\nLet's add another element to our dice + game: **difficulty levels**. The user will pick either \"Easy\" or \"Hard.\" These + are strings so you might be wondering how to check for equality. **The `==` + works on strings as well!** It checks if the first string is exactly the same + as the second string. **Strings must be the same letters and even have the + same case to be equal**! So \"dog\" and \"Dog\" would not be equal. \r\n\r\n# + Do This:\r\n\r\n* **Add a dropdown** for difficulty level with the options + of \"Easy\" or \"Hard.\" \r\n\r\n* **Create an `if` statement for difficulty + level** which prints the difficulty level to the console.\r\n\r\n<img src=\"https://images.code.org/9db291c8dd4192390e008aa764576cd3-image-1446175136919.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/9db291c8dd4192390e008aa764576cd3-image-1446175136919.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - Dice - If_markdown_instruction: "# Using `if` to Display Images\r\n\r\nWe + are going to set up a dice game. We want to show a picture of a single die + for each random number generated 1 to 6. We've already set up the screen + in Design Mode, with a button to generate the roll and an image to show a + picture of the die.\r\n\r\n**Note:** The flowchart for the desired behavior + is below.\r\n\r\n# Do This:\r\n\r\n* Add an event handler for the Roll! button + so that when the button is clicked it generates a random number from 1 to + 6. \r\n\r\n* Add conditionals (`if`, `else if`, and `else`) to change the + picture of the image (ID: `dice_image`) to display the correct side of the + die depending on the random number generated. You will need to use <img src=\"https://images.code.org/89f2c13ef4ead590475c863a087597f8-image-1446535826599.30.16.png\" + style=\"width:150px\"> with the URLs below to set the images for the die.\r\n\t* + <img src=\"https://code.org/images/dice/1.png\" style=\"width: 50px\"> Dice + 1 Image URL - https://code.org/images/dice/1.png\r\n * <img src=\"https://code.org/images/dice/2.png\" + style=\"width: 50px\"> Dice 2 Image URL - https://code.org/images/dice/2.png\r\n * + <img src=\"https://code.org/images/dice/3.png\" style=\"width: 50px\"> Dice + 3 Image URL - https://code.org/images/dice/3.png\r\n * <img src=\"https://code.org/images/dice/4.png\" + style=\"width: 50px\"> Dice 4 Image URL - https://code.org/images/dice/4.png\r\n * + <img src=\"https://code.org/images/dice/5.png\" style=\"width: 50px\"> Dice + 5 Image URL - https://code.org/images/dice/5.png\r\n * <img src=\"https://code.org/images/dice/6.png\" + style=\"width: 50px\"> Dice 6 Image URL - https://code.org/images/dice/6.png\r\n\r\n<img + src=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/392c125a2620ac4949091fc075864f4c-image-1446174585241.png\" + target=\"_blank\">Open diagram in a new tab</a>\r\n" + CSPU5_U3 - Dice - Nested_markdown_instruction: "# Nested *if* Statements\r\n\r\n<img + src=\"https://images.code.org/1774efb17571d3370662e34b705dde47-image-1446485939643.37.11 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\n**Let's change the + scoring of the game to match the difficulty level.** \r\n\r\nNew scoring rules:\r\n* + _Easy: +10 points right answer / -1 point for wrong answer_\r\n* _Hard: +1 + point right answer / -1 point for wrong answer_\r\n\r\nHow do we check _both_ + the difficulty level and if the user's guess was correct? **We can actually + put `if` statements inside of other `if` statements!** So we first want to + check what the difficulty level is and then check if the user was right or + wrong to determine the score.\r\n\r\n** Note: ** The flowchart below outlines + the logic you are trying to implement.\r\n\r\n# Do This:\r\n\r\n* Move a copy + of the score `if` statement inside of the difficulty levels. Be careful with + indenting. All of the `if` statements for score need to be inside of the difficulty + `if` statement (i.e. indented 1 level more than the difficulty `if` statement)\r\n\r\n<img + src=\"https://images.code.org/2125a027997aeca75d18b8423058063d-image-1446485524945.gif\" + style=\"width: 350px\">\r\n\r\n\r\n* Edit the `if` statements to give the + correct scores\r\n\t* Easy level (+10 right, -1 wrong)\r\n * Hard level + (+1 right, -1 wrong)\r\n\r\n<img src=\"https://images.code.org/3b95a9f5cca60fc0ffbf7c2fb174d737-image-1446175290414.png\" + style=\"width: 100%\">\r\n<a href=\"https://images.code.org/3b95a9f5cca60fc0ffbf7c2fb174d737-image-1446175290414.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - High Low - Debug_markdown_instruction: "# Debug Conditionals\r\n\r\n\"Help! + I was trying to give the player a hint when their guess was within 2 of the + secret number but the code I wrote isn't working. **Can you fix it?**\"\r\n\r\nThis + picture shows what the message should be based on the difference between the + secret number and the player's guess:\r\n\r\n![](https://images.code.org/8b6e60db87e3c704ae5209c8c608f5d5-image-1481691055804.png)\r\n\r\n* + Run the code to identify when the program is not working correctly (try guessing + numbers 1-6)\r\n* Fix the problem with the order of the conditionals.\r\n\r\n**Hint:** + \r\n* The major problem here is that **conditional statements run in order + from top to bottom**. \r\n* Remember you have to check the smallest/most narrow + case first, and work up from there.\r\n* The conditions might be slightly + non-intuitive at first glance.\r\n* If you want to re-arrange the conditions + it might be easier if you **switch to text mode**\r\n\r\n<details><summary>Check + out the flow chart for the logic I wanted. [Click to Expand]</summary>\r\n\r\n<a + href=\"https://images.code.org/76681a7d86bd4097417b25b682eee5a8-image-1458309676819.png\" + target=\"_blank\">\r\n<img src=\"https://images.code.org/76681a7d86bd4097417b25b682eee5a8-image-1458309676819.png\" + style=\"width: 350px;\">\r\nClick image to open larger in a new tab</a>\r\n</details>\r\n\r\n" + CSPU5_U3 - High Low - Dropdown_markdown_instruction: "# Dropdown\r\n\r\nOn + the last level we used `promptNum` to get the user's guess. However, we had + no way to limit them to the numbers we wanted. They could have typed 11 even + though we told them not to. A better way to get input with a limited set of + options is the dropdown. The <img src=\"https://images.code.org/3b21b4288a2a155d1e9a3c2cf3a5b09b-image-1446229368079.28.23 + PM.png\" style=\"width: 75px\"> is in your Design Mode Toolbox. You can control + the list of options users can choose and then use `getText` to get the chosen + number.\r\n\r\nWe are going to need an event handler in order to do this. + The event handler will detect when the user has changed the value of the dropdown. + \r\n\r\n# Do This:\r\n\r\n* **Add a dropdown** for their guess instead of + `promptNum`. Make sure to give it a good ID.\r\n\r\n<img src=\"https://images.code.org/fea164f6e53d1ce0c50981565e066d4c-image-1446229598357.gif\" + style=\"width: 350px\">\r\n\r\n* Under properties **find the Options** and + change it to the **numbers 1 to 10**\r\n\r\n<img src=\"https://images.code.org/0cfecbcdcfb95fc30876155ec6a3a021-image-1446229593687.gif\" + style=\"width: 250px\">\r\n\r\n* Add an event handler to detect the `change` + event on your dropdown.<br><br>\r\n<img src=\"https://images.code.org/48cffda5b7ff3a446116a39b4dbcbe8c-image-1446232308751.gif\" + style=\"width: 150px; float: right\">\r\n* Move your `if` statement inside + the event handler so it will check each time the dropdown is changed.<br><br>\r\n* + When the dropdown is changed **use `getText` to find out the user's guess**. + Save the guess using a variable. **Don't forget about scope!**<br><br>\r\n* + Test your app -- it should work like the demo." + CSPU5_U3 - High Low - Else if_markdown_instruction: "# Guess the Secret Number + with *else-if*\r\n\r\nIn this guess-the-number game, the starting code tells + the user whether they were right or wrong. Let's help the user out even + more by telling them if they guessed correctly or if their guess was too high + or too low. \r\n\r\nThere are **only 3 possible cases:**\r\n\r\n* They were + right.\r\n* Their guess was higher than the number.\r\n* Their guess was lower + than the number.\r\n\r\nUse a conditional with and `if`, `else-if`, and a + final `else` to implement this.\r\n\r\n**Remember:** You can create an `else-if` + statement by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. The first + <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> will add an `else`, the second will add an + `else-if`.\r\n\r\n\r\n# Do This:\r\n\r\n* **Add an `else-if` statement to + accommodate the 3 conditions.**\r\n\r\n* **Update the conditions** using `<`, + `>`, and `==` to tell the user if their guess was correct, high, or low.\r\n\r\n* + **Test out the program** to make sure your updates worked.\r\n\r\n<details><summary>Visual + Explanation [Click to expand]</summary>\r\n<li>Sometimes it's helpful to + see how the program should flow with a flow chart. The flow chart below depicts + what should happen </li>\r\n\r\n<img src=\"https://images.code.org/f7e483414dfe1d4585841e653e44d8b0-image-1446169181724.png\" + style=\"width: 500px\">\r\n</details>" + CSPU5_U3 - High Low - Else_markdown_instruction: "# *else*\r\n\r\n<img src=\"https://images.code.org/b7942d778a54465ad6f9f19fbab8d1ef-image-1446237289306.34.23 + PM.png\" style=\"width: 150px; float: right\">\r\n\r\nLet's add an `else` + statement so we can tell the user when they are right and when they are wrong.\r\n\r\n**Note:** You + can create an `else` statement by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. There + is also an `if-else` block in the toolbox. \r\n\r\n\r\n# Do This:\r\n\r\n* + **Add an `else` statement**\r\n\r\n* **Move your `setText` inside the `else` + statement.** So it should say \"Nope that's not it. Guess again.\" when the + user does not guess the secret number." + CSPU5_U3 - High Low - If_markdown_instruction: "# *if* Statement\r\n\r\n<img + src=\"https://images.code.org/040c8364e3795252194b816623e949e5-image-1446227663554.54.03 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nThe boolean expression + we tested on the last level allows us to make decisions. In order to make + these decisions we need to use something called a conditional. **Conditionals + check if a boolean expression is true and then will execute the code inside + of the `if` statement.** \r\n\r\n<img src=\"https://images.code.org/84123a7c317c63d8876b6b56086d717e-image-1446228290588.png\" + style=\"width: 150px; float: right\">\r\n\r\nOver the number couple levels + we are going to be creating a **Guess My Number game**. The starter code uses + `promptNum` to ask the user for a number from 1 to 10. The `if` statement + checks if the user guess is equal to the secret number. Right now nothing + happens when they guess the right number. Can you fix that?\r\n\r\n# Do This:\r\n\r\n* + Read the code to identify the boolean expression.\r\n* Add a text label to + the screen. Have it start out with \"Guess my secret number!\"\r\n* **Set + the text label to say \"You got it right!\" from inside the `if` statement**. + This will tell them they get it right only when that condition is true!\r\n* + **Test your code out** to make sure it works.\r\n\r\n<img src=\"https://images.code.org/2f3487ec7a8d7cec1605f3da830c83f8-image-1446227512726.gif\" + style=\"width: 350px\">" + CSPU5_U3 - Keys - Add Image URLs_markdown_instruction: "# Adding Image URLs\r\n\r\nWe're + ready to start improving the \"My Favorite Things\" app. \r\n\r\nWe'll do + this in two steps:\r\n1. We will change it from scrolling text to scrolling + images.\r\n2. We will add key events to scroll with the keyboard.\r\n\r\n**Step + 1:**\r\n* The default values in your array should be image URLs.\r\n* The + large **text area** needs to be changed to an **image**.\r\n* Instead of **setting + the text**, you'll now be using `setImageURL` to set the URL of the image.\r\n\r\n# + Do This:\r\n**NOTE: We've re-loaded the code from the \"My Favorite Things\" + App you wrote in the previous lesson.** (If you want to refer to code you + just wrote, you can go back to look at it.)\r\n\r\n* **Set the default values** + in your array to be image URLs. (You might need to take a minute to go collect + a few if you didn't in preparation for this lesson.)\r\n* In Design Mode + **delete the text area** and replace it with an **image**. Make sure your + image has a descriptive and meaningful ID.\r\n* Inside your function that + updates the display **replace `setText` with `setImageURL`**. Make sure you + reference your new image element **by its correct ID**.<br>\r\n<img src=\"https://images.code.org/9f7f4aeeb9b1a84ae781043602166865-image-1447337890448.gif\" + style=\"width: 350px\">\r\n* ** Test your app** to confirm that it's now + showing the images in your array." + CSPU5_U3 - Keys - Buttons and Keys_markdown_instruction: "# Buttons and Keys\r\n\r\nWe + now know how to respond to key events, but often we want the user to be able + to **do the same thing with the app in multiple ways**. For example, we might + want the app to exhibit the same behavior if the user clicks a button on the + screen or a key on the keyboard. (This is how so-called \"keyboard shortcuts\" + work.)\r\n\r\nIn the program you're about to see, we've provided event handlers + for some buttons on the screen. You're going to **create identical functionality** + for the key events.\r\n\r\n# Do This:\r\n\r\n* **Add conditional statements + inside the `keydown` event handler** to check for when the **up and down arrows** + are pressed.\r\n<img src=\"https://images.code.org/0e0fe80c821c6a3171ec3a272c42325c-image-1447253300861.gif\" + style=\"width: 350px\">\r\n\r\n* ** Copy the code for the `upImage` button**, + and paste into the up arrow `if` statement.\r\n![](https://images.code.org/ad56005d74736c7c9aa8bedf68529c0e-image-1448300088636.gif)\r\n\r\n* + ** Copy the code for the down button**, and paste it into the down arrow `if` + statement.\r\n\r\n* Confirm your app **responds to key events** by running + it. For example, clicking the image of the up arrow in the app should do + the same thing as hitting the up arrow on the keyboard.\r\n\r\n" + CSPU5_U3 - Keys - Demo App_markdown_instruction: "# Making our App an Image + Scroller\r\n\r\nOver the course of this lesson we are going to be working + towards improving our \"My Favorite Things\" app to add some new features. + Our improved app will be able to:\r\n\r\n* Respond to **key events**.\r\n* + **Display images** by storing their URLs.\r\n\r\nWe'll call this new kind + of app an **image scroller** but feel free to call it anything you like.\r\n\r\n# + Do This:\r\n\r\n* Close these instructions.\r\n* **Experiment with the improved + \"My Favorite Things\" app** to understand the new features we'll be adding. \r\n* + Make sure you try clicking the **left and right arrow keys!**\r\n\r\nOnce + you think you've experimented enough, continue on to the next level." + CSPU5_U3 - Keys - Final Image Scroller_markdown_instruction: "# Final Image + Scroller\r\n\r\nYou're now ready to add key event functionality to your app! + As you are doing so, keep an eye out for places where you need to **refactor** + old code in order to prevent redundancy. **Create functions** that carry out + repeated tasks and make other changes to keep your code **readable and consistent**. + \r\n\r\nIf you want a reminder of how key events work, you can always go back + to the example from earlier in this lesson. You will need to add `if` statements + to check for which keys were pressed, just as before.\r\n\r\n# Do This:\r\n\r\n* + Add the ability to respond to **key events** to your app.\r\n\r\n* **Refactor + your old code** to remove redundant portions.\r\n\r\n* Keeping adding to your + program. What other features do you want to include?" + CSPU5_U3 - Keys - Functions_markdown_instruction: "# Refactoring Code\r\n\r\nOn + the last level, we copied a few lines of code to a different part of our program. + **Hopefully warning bells went off in your head!** Any time you are copying + portions of code from one area of your program to another, it's a good indication + that you should write a function to capture that behavior in one place. \r\n\r\nWhen + you add new features to your code **you will often create redundancies**. + To keep your code readable and consistent, you may need to rewrite old pieces + of code. This process of restructuring existing code without changing its + external behavior is called **refactoring**. It is an important process when + developing software that improves code readability and reduces complexity. + As a result, code is much easier to maintain.\r\n\r\n# Do This:\r\n\r\n* **Create + a function called `doUpArrow`**. \r\n* Move the code from the `upArrow` event + handler to the function.\r\n* **Call `doUpArrow`** from both your button and + key event handlers. (The animation below shows the steps above.)\r\n* Repeat + the same process for the down arrow / button by creating a function called + `doDownArrow`.\r\n* Once you have **removed these redundancies from your code** + test your app to make sure it still works!\r\n\r\n![](https://images.code.org/f47a98a8c9ca169848c682b3e61293cd-image-1448300634062.gif)" + CSPU5_U3 - Keys - Key Up and Down_markdown_instruction: "# Using *keyup* and + *keydown*\r\n\r\nOn the last level, we played with the `keypress` event. Let's + take a look at some of the other key events. \r\n\r\nYou are going to get + the chance to play with `keyup` and `keydown` in this level. **Pay attention + to the different values of `event.key` for `keydown` and `keypress`. **\r\n\r\n# + Do This:\r\n\r\n* Switch to the event type to `keydown` or `keyup`. \r\n\r\n<img + src=\"https://images.code.org/fa91b1a9e3240eb65ff75b381e76ce69-image-1447213909054.gif\" + style=\"width: 350px\">\r\n\r\n* Try out the event.\r\n\t* Press and hold + a key\r\n * Try the arrow keys\r\n * Shift\r\n * Option\r\n * + Alt\r\n * Others" + CSPU5_U3 - Keys - Multiple Keys_markdown_instruction: "# Multiple Keys\r\n\r\nIf + you want your program to respond differently to a couple different keys, you + will need to use chained conditional statements (`if` and `else-if`). \r\n\r\nLet's + set up the program to **play a different sound for the down key.**\r\n\r\n# + Do This:\r\n**We've added another sound** to the app, but it's just sitting + at the top of the code.\r\n\r\n* Add an `else-if` statement to check if the + **down arrow** was pressed.\r\n\r\n<img src=\"https://images.code.org/996914e436cca050f62d5b851899eda9-image-1447215275417.gif\" + style=\"width: 350px\">\r\n\r\n* Move the `playSound` command from the top + of the program inside the `else-if`. (Notice that in the example, we switch + to block mode to move this line because it's easier to move blocks around + that way. You can just copy/paste the text too.)\r\n\r\n<img src=\"https://images.code.org/42b2df84b4cd98267068592218ac96ed-image-1447215267891.gif\" + style=\"width: 350px\">\r\n\r\n* **Test the program:** it should play one + sound when the **up** arrow is pressed and a different sound if the **down** + arrow is pressed. It shouldn't make any sound if any other keys are pressed. + " + CSPU5_U3 - Loops - Complex Condition_markdown_instruction: "# Expressing Stopping + Conditions: \"Until Loops\"\r\nIt is often more natural to think about looping + in terms of when the loop should end rather than when it should continue. + For example you might say \"keep going down the road until you see the gas + station\" or \"keep calling until you get through to someone.\" You might + think of these as \"until loops\" rather than \"while loops,\" since we want + the loop to continue **until a condition is true rather than while a condition + is true**.\r\n\r\n**There is no \"until loop\" in JavaScript** but it is actually + quite easy to translate \"until loops\" into `while` loops so that you can + use them in programs. An \"until loop\" runs *until* a condition is true, + as opposed to a while loop which runs *as long as* a condition is true. That + means an until loop is the logical inverse of a while loop - it runs as long + as the **condition is false**. The table below shows how you can use the **NOT** + ( `!` ) operator to translate stopping conditions into `while` loop conditions.\r\n\r\n| + Expressed as Stopping | Expressed as Until Loop | Expressed as While Loop + |\r\n| --- | --- | --- |\r\n| **Stop** once you reach the gas station | Keep + going **until** you reach the gas station | Keep going **while** you have + **NOT** reached the gas station|\r\n| **Stop** calling when you get through + to someone | Keep calling **until** you get through to someone | Keep calling + **while** you have **NOT** gotten through to someone|\r\n| **Stop** when `x + == y` | `until(x == y){...` | `while(!(x == y)){...`|\r\n<br>\r\nNote how + we can use the **NOT** operation to find the **logical inverse** (or opposite) + of the condition from our \"until loop\" to create a `while` loop. Let's + do a little practice of that now.\r\n\r\n# Do This:\r\n\r\n**Starter code** + is provided that repeatedly rolls two dice and writes their values to the + screen. **Careful: ** before you edit this code it creates an infinite loop.\r\n\r\n* + Use the technique above to **modify this code** so that the loop **stops when + both dice are 5 or greater**.\r\n* **Try it out and experiment.** You should + exit the loop the first time both dice have values greater than or equal to + 5 displayed.\r\n\r\n![](https://images.code.org/076fb8e95fabc55e8ee45e31e51ca2d5-image-1448925611863.19.59 + PM.png)" + CSPU5_U3 - Loops - 1_markdown_instruction: "# *while* Loops\r\n\r\n<img src=\"https://images.code.org/bfb82e4caecc3ad1338177e05064ef72-image-1446669721477.41.28 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\n **The `while` loop + uses a boolean condition to repeatedly run a block of code.** It checks the + expression, and if it is true it runs the block of code contained within it. + This process of checking the condition and running the block of code is repeated + as long as the boolean condition remains true. **Once the boolean expression + becomes false it will stop.**\r\n\r\nWe are going to start exploring a `while` + loop by **modifying the condition on which a `while` loop runs and using `console.log` + to ensure it is correctly evaluating its condition**.\r\n\r\n# Do This:\r\n\r\n* + **Starter code** is provided which creates a `while` loop that repeatedly + moves the turtle around the screen.\r\n* **Add a `console.log` command** inside + the loop after `num` is assigned a random number. This way you can see the + value the loop is based on.\r\n![](https://images.code.org/1da444fd5c6533ad1cc0de3c593bf92d-image-1446825127341.gif)\r\n* + **Run the program a couple times** and look at the results.\r\n* **Change + the condition for the `while` loop** to check if the variable **`num` is less + than 90**. Your output might look like the example below.\r\n\r\n![](https://images.code.org/97df98c23c0c03a7ce480108a92627a5-image-1448296906193.41.17 + AM.png)" + CSPU5_U3 - Loops - 10_markdown_instruction: "# Writing a Loop From English\r\n\r\nAlright + it’s your turn. Can you translate the English into code? This problem also + involves an \"until loop\" problem.\r\n# Do This:\r\n\r\nTake this statement + in English and translate it into code: \r\n\r\n**“Write a program that simulates + the rolling of two dice. Keep rolling the dice UNTIL the sum of the dice is + either a 7 OR an 11.\"** Your program should display the results of each + roll. \r\n\r\n**NOTE**: this one is a *little* tricky. Hint: In English + we sometimes say \"or\" when in cold hard logic we mean \"and\".\r\n\r\nHere + is a sample output:\r\n\r\n![](https://images.code.org/706279a3c167d8c76068a7ded5146eed-image-1456434365077.png)" + CSPU5_U3 - Loops - 11_markdown_instruction: "# Debugging: Complex Logic\r\n\r\nIn + this challenge you need to find and fix a bug in a program that simulates + rolling one die. \r\n\r\nThe given code accidentally loops infinitely, so + something must be wrong with the condition. Can you figure out how to fix + it?\r\n\r\n# Do This:\r\n\r\n* **Fix the condition** so that it keeps rolling + the die as long as the value is **not a 2 or a 3.**\r\n\r\n* **Hint:** Think + about other ways you can express this idea in English. \r\n\r\n" + CSPU5_U3 - Loops - 12_markdown_instruction: "# Repeat Specific Number of Times\r\n\r\nInstead + of writing code that makes the loop run a random number of times, we can control + the `while` loop by changing the variable used in the boolean expression differently. + Let’s try just printing a string 5 times.\r\n\r\n# Do This:\r\n\r\n* **Starter + Code:** Right now the code prints a string \"Hi\" twice.\r\n* **Change the + code** so that it prints the string \"Hi\" 5 times.\r\n* **Notice** how `count` + is being re-assigned each time through the loop." + CSPU5_U3 - Loops - 14_markdown_instruction: "# Defensive Loop Conditions\r\n\r\nTake + a look at the starting code. Instead of counting by 3's we had decided to + count by 4's. \r\n\r\nBut this will run us into a problem. Can you see why?\r\n\r\nWe + wanted to stop counting at 30, but when you count by 4 you will actually never + hit 30. It would go... 24, 28, 32, 36... What we really want to do is stop + when the number is **greater than 30**. This is an important defensive programming + strategy. Make the condition catch more cases than you think you need so that + if for some reason something does not go exactly as you planned it will hit + the stop condition and not go infinitely.\r\n\r\n\r\n# Do This:\r\n\r\n* **Change + the loop condition** to prevent the infinite loop and stop counting once the + count is past 30." + CSPU5_U3 - Loops - 15_markdown_instruction: "# Using an *if* Statement In a + Loop\r\n\r\nA common thing to do is to use variables to keep track of some + sort of count. When used in a loop we count things very quickly.\r\n\r\n**Scenario:**\r\nIf + you roll a pair of dice, rolling a 12 (two sixes) is rare. How rare? If + you were to roll a pair of dice 1,000 times, on average, how many times would + it come up as 12?\r\n\r\nTo figure this out, we could write code to run an + experiment. It would go something like this:\r\n* Make a loop that simulates + rolling a pair of dice 1,000 times.\r\n* Inside the loop, add an `if` statement: + **if die1 + die2 == 12, then add 1 to a counter**.\r\n* After the loop, display + the result.\r\n\r\n# Do This:\r\nThe **starter code** sets up the whole experiment + for you, except it doesn't count the number of 12's rolled - that's your + job.\r\n\r\n* **Run the code** to see what the experiment does.\r\n\r\n* ** + Add an `if` statement inside the loop** to check if the sum of the dice is + equal to 12, and add 1 to `twelveCount`.\r\n\r\n* Once the loop has completed, + **display the number of times the sum was 12.**\r\n\r\n**Note:** If you remove + (or comment out) the `console.log` statement that displays every roll of the + dice, the experiment will speed up A LOT! You could do tens of thousands + of dice rolls in a matter of seconds." + CSPU5_U3 - Loops - 2_markdown_instruction: "# Infinite *while* Loops\r\n\r\n`while` + loops run until their condition becomes false, which raises an interesting + question. **What happens if the condition never becomes false**? In these + cases the program enters what is called an **infinite loop** over the commands + in the `while` loop, and it never reaches the rest of your program. **We normally + avoid infinite loops in our programs**, but let's try it out to see what + happens.\r\n\r\n# Do This:\r\n\r\n* **Starter code** is provided which creates + a `while` loop to move the turtle around the screen.\r\n* **Change the `while` + loop condition to something that will always be true.** The easiest way to + do this is to change 50 to be a number that randomNumber will never generate + such as 200. \r\n* **Run the program.** Notice that it will never stop running. + You may even get an error from your browser.\r\n* **Hit reset to stop it.** + Your computer may actually stop running as you expect if you let an infinite + loop run for too long. **It's possible you may even need to close the browser + window and reload the page. If you hit reset early enough you can usually + avoid this problem.**\r\n* **Find a condition using `<` or `>` that will also + cause an infinite loop.**" + CSPU5_U3 - Loops - 3_markdown_instruction: "# Changing *if* to *while*\r\n\r\n** + How many times would we have to roll a die before it comes up as a 6?** In + the program you're about to see, we **simulate rolling a die (generating + a random number between 1 and 6)** in order to answer this question.\r\n\r\n# + Do This:\r\n\r\n** Starter code** is provided which re-rolls a die once if + the first roll is not a 6. \r\n* **Change the `if` statement to a `while` + loop** so the program will keep rolling the die **while the current roll is + not a 6.** \r\n\t* **Hint:** The easiest way to do this is to change the text + from `if` to `while`.\r\n<img src=\"https://images.code.org/50b97e8858bf5ebf82eb1d358f875854-image-1446739013775.gif\" + style=\"width: 350px; border: solid 1px black \">\r\n* Run the program to + test out the change.\r\n" + CSPU5_U3 - Loops - 4_markdown_instruction: "# Debug Commands\r\n\r\n<img src=\"https://images.code.org/c6322845b96b70c9083a6c62736048e5-image-1446739268136.00.34 + AM.png\" style=\"width: 200px; float: right\">\r\n\r\nCheck out the new **Debug + Commands toolbox** that has appeared next to the Debug Console! These powerful + tools allow us to **pause a program at a certain point** while it’s running + and then execute lines one at a time. \r\n\r\nUsing these tools we can investigate + the state of variables and other elements of the program at any point, mid-execution. + This makes it much easier to see what’s happening while the programming is + actually running!\r\n\r\nIn order to use the debug commands, you first have + to indicate which line you want the program to pause at. This is called adding + a “breakpoint” (see animation below).\r\n\r\n# Do This:\r\n\r\n* **Add a breakpoint** + on the line where the `while` loop starts. (**Just click the line number.**)\r\n* + **Use the <img src=\"https://images.code.org/bd8f1a67242e64e6b3740eac79f881e8-image-1446748421345.33.09 + PM.png\" style=\"width: 75px\"> button** to execute each line one at a time.\r\n* + Each time you hit the breakpoint, **use the console to check value of `num`**. + \r\n* **NOTE:** If you hit <img src=\"https://images.code.org/6c4712da58e32dae2d04c52d9964fca9-image-1446741498097.37.48 + AM.png\" style=\"width: 75px\"> it will \"continue\" executing the program + normally, unless of course it hits another breakpoint. \r\n\r\n![](https://images.code.org/68f8e185914c8cc127aa9573ae37f687-image-1446835628580.gif)" + CSPU5_U3 - Loops - 5_markdown_instruction: "# Update Condition\r\n\r\nIn order + for a `while` loop to stop at some point, the code inside the loop **must + change something about the state of the program** - usually the value of a + variable - so that eventually the boolean expression becomes false. Otherwise + you'd have an infinite loop!\r\n\r\n# Do This:\r\n**Starter Code:** The starter + code runs an infinite loop. \r\n* **Run the code** to see the problem in action. + Remember to hit the reset button to stop the infinite loop.\r\n* **Add code + inside the `while` loop** which will **update the variable `num` so that the + condition will eventually become false.**\r\n* **TIP:** you can use the debugging + tools if you think they would be helpful." + CSPU5_U3 - Loops - 6_markdown_instruction: "# Starting Condition\r\n\r\nWe + have seen that loops can run infinitely. On the last level we saw that there + is also the **chance that the loop never runs at all!** If the condition of + the `while` loop starts out false then the loop will never run.\r\n\r\nWe + fixed this problem in the last exercise by displaying the value of `num` in + two places: before the loop and in the loop. Duplicating code is generally + a bad strategy, so the question is: can we be a little clever and get into + the loop without missing any values? The answer is yes.\r\n\r\n**The solution** + is to initialize the values used in our boolean expression so that we are + **certain** it will evaluate to true the first time the loop checks it. **For + example, if your loop condition is: `while (num != 6)` you could initialize + `num` to anything other than 6 and you'd know that you get into the loop**. \r\n\r\nIf + you use this technique though...\r\n1. You need to make sure you set the value + of `num` right away inside the loop.\r\n2. You probably want to use a nonsense + value like -1, so that if you ever see that displayed it will be obvious something + is wrong and be easier to debug.\r\n\r\n# Do This:\r\n\r\n* **Starter code** + is provided which creates a `while` loop that never runs.\r\n* **Run the program** + once to see that the loop is never entered.\r\n* **Fix** the problem by changing + the initial value of `num` to a nonsense value such as -1." + CSPU5_U3 - Loops - 7_markdown_instruction: "# Printing After Setting Value\r\n\r\nWe + started trying to remove the duplicate code we had on the last level by initializing + a variable to a nonsense, or \"dummy,\" value that would still ensure we entered + the loop. \r\n\r\nIn the code provided, not every number is going to display. + However, this time we want to try **not to add code** to fix the problem, + since duplicate code is inefficient. \r\n\r\n# Do This:\r\n\r\n* **Starter + Code:** The code is completely functional except that it does not print one + of the numbers it's supposed to. In addition we don't want it to print the + dummy variable of -1.** Hint: ** What should be the last number that prints + every time this program runs?\r\n\r\n* Run the program to see the behavior.\r\n\r\n* + Fix the code so that it prints all the values of `num`. **Hint:** You don't + need to add any code. Just switch the order of the code you have now!" + CSPU5_U3 - Loops - 8_markdown_instruction: "# Printing Before the Loop Starts\r\n\r\nSometimes + our code will be doing the right thing but we won't be able to tell because + of the way we are printing values. We need to make sure we print all the values + we are interested in. \r\n\r\nThis program *should* write all the values of + `num` to the screen as it runs; however it misses one - the first one generated. \r\n\r\n# + Do This:\r\n\r\n* **Run the program** a few times and notice that sometimes + it just prints \"Done.\" and nothing else, even though a number was generated. + The first value of `num` never gets displayed.\r\n* **Add a `write` statement** + before the loop to print the first number. \r\n* **Hint:** Look at the two + times `num` is assigned a value. Which one isn't being displayed? " + CSPU5_U3 - Loops - 9_markdown_instruction: "# Boolean Operators in *while* + Loops\r\n\r\nWe can create compound boolean expressions to control our `while` + loops just like our `if` statements. Let's try using boolean operators in + our `while` loop condition.\r\n\r\n# Do This:\r\n\r\n* Right now this code + rolls two dice as long as either one of them is less than 3. **Modify the + condition so that it keeps rolling as long as *both* are less than 3.**\r\n\r\n* + **HINT:** To say that both dice are less than 3 the boolean expression must + say: if die1 less-than 3 AND die2 less-than 3...\r\n" + CSPU5_U3 - Loops - Minus Minus_markdown_instruction: "# *++* Has a Friend! Introducing + *--*\r\n\r\nAs you may have guessed, just as we can write `count = count + + 1` as `count++` we can also write `count = count - 1` as `count--`.\r\n\r\nLet’s + write a program that counts **down** from 10 down to 1. \r\n\r\n# Do This:\r\n\r\n* + **Starter Code: ** The current program counts **up** from 1 to 10. \r\n\r\n* + **Change the code to use `count--` to count *down* from 10 to 1.** You will + need to:\r\n\t* Change the looping condition.\r\n * Change `count++` to + `count--`.\r\n * Change the initial value assigned to `count`.\r\n" + CSPU5_U3 - Loops - Plus Plus_markdown_instruction: "# *++* Operator\r\n\r\nAs + programmers we are always looking for more concise ways to write code. It + is so common to add 1 to a variable such as in `count = count + 1` that there + is actually a shorthand for it. \r\n\r\n# Introducing the *++* Operator\r\n\r\nYou + can write `count++` to add 1 to `count`. `count++` does the exact same thing + as `count = count + 1`! \r\n\r\nIn fact the computer turns `count++` into + `count = count + 1` behind the scenes - it really is just a convenient shorthand.\r\n\r\n**Note:** + This is more of a programmer style choice so if you want to write your code + using `count = count + 1` instead there is nothing wrong with that!\r\n\r\n# + Do This:\r\n\r\n* Change the code to use `count++` instead of `count = count + + 1`. (You'll need to be in text mode to do this.)\r\n\r\n** Misconception + Alert:** You don't need to write `count = count++` - the computer is doing + the assignment for you." + CSPU5_U3 - Loops - Typing in Console_markdown_instruction: "# Debug Console: + Variable Values\r\n\r\nUp until now, if we wanted to find out the value of + a variable at some point in the execution of a program, we've used `console.log`. + That is still going to be a great strategy but **the Debug Console can do + even more for us!**\r\n\r\n**Check this out:** We can check the value of a + variable in real time (as our program executes) by typing its name into the + prompt within the Debug Console and hitting \"enter\". **This is another powerful + tool for debugging your programs.** \r\n\r\n![](https://images.code.org/7e7ff7aa041814cfcd69a1c9a028c439-image-1446826780896.gif)\r\n\r\n# + Do This:\r\n\r\n* **Run the program.**\r\n\r\n* Use the Debug Console to **check + the ending value of `num`**. You can do this by typing num in the Debug Console + and hitting enter!" + CSPU5_U3 - Loops - minus = operator_markdown_instruction: "# Try Out the *-=* + Operator\r\n\r\nThe `-=` operator works almost identically to `+=`, but instead + it subtracts the value provided from the variable. Let's use this operator + to **create a loop that counts down from 30 by 3's**.\r\n\r\n# Do This:\r\n\r\n* + **Change the code to use `-=`** to count from *down* from 30 to 0 by 3's." + CSPU5_U3 - Loops - plus and minus = operator_markdown_instruction: "# Introducing + *+=* and *-=* Operators\r\n\r\nSometimes you want to add or subtract something + *other than 1* from the current value of a variable. If you wanted to add + or subtract 3 for example, such as: `count = count + 3` or `count = count + - 3`, `++` and `--` wouldn’t help. \r\n\r\nIt turns out this is pretty common + as well so there is actually a shorthand version of `count = count + 3`. \r\n\r\n**Introducing + `+=` and `-=`**!\r\n\r\nWe can use the `+=` or `-=` operator to add or subtract + any value we want to the current value of a variable. \r\n\r\nSo, the shorthand + versions of `count = count + 3` and `count = count - 3` would be:\r\n * `count + += 3` \r\n * `count -= 3`\r\n\r\n**Notice** that these 3 statements: `count + = count + 1`, `count++`, and `count += 1` all do **exactly** the same thing!\r\n\r\nWhich + one you use as a programmer is your choice, and in the future you can use + either version, but try out the new operator here.\r\n\r\n# Do This:\r\n\r\n* + **Change the code to use `count += 3`** instead of `count = count + 3` so + the program will still count up by 3. (You'll need to be in text mode to + do this.) \r\n\r\n(You'll get to try out `-=` on the next level.)" + CSPU5_U3 - Loops And Arrays - Add 5_markdown_instruction: "# Updating Values + in an Array with a *for* Loop\r\n\r\nThe `for` loop you set up on the last + level is actually so common that we will rarely deviate from this `for` loop + setup.\r\n\r\n<img src=\"https://images.code.org/fba4d95636869c1c1c1a539fe81ded72-image-1447346793054.45.50 + AM.png\">\r\n\r\nThis `for` loop basically means **\"for every possible index + in `myArray`...\"** and we use it as a basic building block for processing + arrays. Common array-processing techniques like searching for a value, updating + all values, or calculating simple stats on an array will all be completed + using a `for` loop written with the syntax above.\r\n\r\nIn fact, we're going + to see that happen right now as we **use a `for` loop to add 5 to every value + in an array**.\r\n\r\n# Do This:\r\n**Starter code** has been provided that + creates an array of random values. You are also given a `for` loop that loops + over every index in the array.\r\n\r\n* Add code inside the loop to **add + 5 to the value at every location in the array**. \r\n\t* ** Remember: ** `myArray[i]` + refers to the element in the array at the current value of `i`.\r\n* Confirm + your code works by **displaying the values in your array before and after + your loop**. Below is a sample result. Notice how, after the array has been + processed, all of the values are 5 greater than the originals.\r\n\r\n![](https://images.code.org/aaf36ac93098ef7f43fdda04243d17ad-image-1447792214666.29.41 + PM.png)" + CSPU5_U3 - Loops And Arrays - Counting Times_markdown_instruction: "# Counting + Occurrences of a Value\r\n\r\nInstead of displaying a true/false value for + *every* item in the list, let's compute one value and display it. A common + thing to want to do is **count** the number of times a value occurs. We can + do this with a very small change to the code we've already got. \r\n\r\n# + Do This:\r\n**Starter Code** is similar to past levels. We've also created + a variable called `fiveCount`.\r\n\r\n* ** Add an `if` statement** inside + the `for` loop to **increment `fiveCount` if the value is equal to 5. **\r\n + (Note: this will be exactly the same as the `if` statement you wrote in the + previous level. Just giving you more practice).\r\n\r\n* **Run and re-run + your code** to make sure that it's accurately counting the number of 5's + in the array. Since the array is getting a random set of values every time + you run the program, you might have to run it a bunch of times to thoroughly + test it. Make sure you get it to run at least once when no 5's appear in + the array.\r\n\r\n* Finally, if you'd like to, **change the first loop in + the program to add 100 items to the array** instead of 10. Your code should + still work to count the number of 5's, no matter how big the original array + is!" + CSPU5_U3 - Loops And Arrays - Divid by 2_markdown_instruction: "# Divide by + 2\r\n\r\nIn the last exercise, you updated every element in an array using + a `for` loop. Let's get a little bit more practice with the pattern you used + in the last exercise, this time creating the loop yourself.\r\n\r\n# Do This:\r\n**Starter + code** is provided which creates an array of random values.\r\n\r\n* Create + a `for` loop that **iterates over every index in the array**.\r\n\r\n* Within + your loop, add code that **divides each value in the array by 2**.\r\n\r\n* + Use the provided `console.log` statements to **confirm your program runs as + expected**. Below is an example of the expected outcome.\r\n![](https://images.code.org/04b09b795c30313c67b2242f1773b2f6-image-1447795598583.26.21 + PM.png)" + CSPU5_U3 - Loops And Arrays - Find Min_markdown_instruction: "# Reusing a Function + Pattern: Find Minimum\r\n\r\n**Nice work! You've just written a function + that implements an algorithm to process an array!** If you feel comfortable + with the basic pattern you used to create this function, you can quickly create + functions for many other useful algorithms that work on arrays.\r\n\r\n**Basic + Function Pattern**\r\n\r\n* Create a **function that accepts an array** as + input.\r\n* **Create a \"flag\" variable** and set its default value before + looping through the array.\r\n* Loop through your array with a `for` loop + that **visits every index in the array**.\r\n* **Update your flag** as necessary + with every iteration of your loop.\r\n* **Display your flag** at the end of + the loop.\r\n\r\nLet's use this pattern to **write a function that finds + and displays the smallest value in an array**.\r\n\r\nInstead of using a true/false + flag to indicate whether we found a value, **we'll use a variable to keep + track of the smallest value we've seen in the array so far**.\r\n\r\n# Do + This:\r\n\r\n**Starter code** has been provided which outlines and calls `findMinVal` + with different inputs. Your job will be to finish writing the function.\r\n\r\n* + Before programming, try to **develop an algorithm that you could use to find + the minimum value in an array**. Use the pattern outlined above as a guide.\r\n* + **Write code** in the places indicated with comments to complete the function. \r\n\t* + You'll want to use the `minVal` variable to keep track of the smallest value + you've found so far.\r\n * You'll need to **write an `if` statement** + that checks whether the current value in the array is less than `minVal`. + If it is, then update the smallest value. \r\n* **Run the code** to ensure + it is working as you intend.\r\n\r\n<details><summary><strong>HINT: pseudocode</strong> + [click to expand]</summary>\r\n<p>\r\nHere is some pseduocode that you should + be able to implement.\r\n</p>\r\n<pre>\r\nminVal = first value in array \r\nfor + EACH value IN array\r\n if value < minVal\r\n minVal = value\r\n\r\ndisplay(minVal)\r\n</pre>\r\n</details>\r\n\r\n\r\n![](https://images.code.org/e6abdc34c653e4bb0885ffabcf897fc5-image-1447877822696.16.03 + PM.png)" + CSPU5_U3 - Loops And Arrays - General Search Param_markdown_instruction: "# + General Search\r\n\r\nIn order to make a general search function, we should + be able to **search for any value, not just 5**. We can do this by making + the value to search for a parameter as well.\r\n\r\n# Do This:\r\n\r\n* **Add + a second parameter** to your `search` function to represent the item to search + for. This example uses the name `searchValue`.\r\n\r\n* **Update the code + inside the function to check for `searchValue` instead of 5.** \r\n\r\n* **Call + your search function** to search for different values inside of each array.\r\n\r\n* + The `console.log` statement **is now inaccurate**. Change it to say \"Array + has searchValue: \" followed by the value in flag.\r\n\r\n(These steps are + shown in the code animation below.)\r\n\r\n![](https://images.code.org/b71a0bd1cf725d58ae76836a6422ebeb-image-1447695946760.gif)" + CSPU5_U3 - Loops And Arrays - Intro For Loop_markdown_instruction: "# *for* + Loop\r\n\r\nIt's very common to want to repeat a set of commands a particular + number of times. Recently, we have been using the `while` loop to do this + by creating a counting variable, setting the boolean expression, and incrementing + the value of the counter by 1 each time. We've also used the `for` loop before, + and we'll explain it more in-depth now. The `for` loop was created to wrap + all of those components related to counting loops into a single line of code.\r\n\r\n<img + src=\"https://images.code.org/b93a044fc07cb4bbabb95b43132a005b-image-1447342829632.png\" + style=\"width: 450px\">\r\n\r\n<img src=\"https://images.code.org/d0d8f34d0f4aabaf66084ceac282448e-image-1447343652405.png\" + style=\"width: 450px\">\r\n\r\nProgrammers would typically read a loop `for + (var i = 0; i < 10; i++)` out like this: <br>\r\n**\"for variable i starting + at 0, while i is less than 10, i plus plus (or increment i by 1)\"**\r\n\r\nNotice + that in reading a `for` loop we still use the word \"while\".\r\n\r\nYou may + notice that when you drag a `for` loop out from the toolbox that we've set + it up for you with `i` as the variable. \r\n\r\n<details> \r\n<summary>**Why + is `i` the variable?** [click to expand]</summary> \r\n\r\nUsing the single + character `i` as the variable in a `for` loop has become a convention in programming + for a variety of reasons. One reason is that `for` loops are often used when + processing arrays - **you can think of `i` as shorthand for index. ** But + there is no reason why you have to use `i` if you don't want to. It's just + a variable. \r\n</details>\r\n\r\n# Do This:\r\n\r\n* Drag out the `for` + loop.\r\n\r\n* Insert a `console.log` statement inside the `for` loop that + displays `i`.\r\n![](https://images.code.org/2a81206296dc693463d7b147f2f93dcb-image-1447446254447.gif)\r\n\r\n* + Try changing:\r\n\t* The condition to stop the loop (make it run longer).\r\n * + The amount you change `i` by each time (try changing `i++` to something like + `i += 5`).\r\n * The starting value of `i`.\r\n\r\n" + CSPU5_U3 - Loops And Arrays - Linear Search_markdown_instruction: "# Algorithms + and General-Purpose Functions\r\n\r\nOver the next several exercises we will + be **creating a general-purpose function to determine if a value is contained + within an array**. Over the course of these exercises, keep an eye out for + the general pattern we are using, because you'll get to use it again to create + functions of your own.\r\n\r\nTo begin, we'll start simple. We'll write + code that **checks whether an array contains a specific value**. At every + index, your program should display \"true\" if the value at that index is + a 5 and \"false\" otherwise.\r\n\r\n# Do This:\r\nThe **starter code** is + similar to past levels, but you'll notice that we use a loop to construct + `myArray` rather than appending items one line at a time. You are also given + the `for` loop you will use.\r\n\r\n* Add an `if` statement inside the `for` + loop to check if the value of the array at the current index is 5. \r\n * + If the value is equal to 5, write **true** to the console. Otherwise write + **false** to the console.\r\n* **Test your code** to make sure it is working + as you intend. An example output is below.\r\n\r\n![](https://images.code.org/a64c3be0a23e25bef67494bdfeb61415-image-1447879494916.44.45 + PM.png)" + CSPU5_U3 - Loops And Arrays - Loop Array If_markdown_instruction: "# *for* + Loop with *if*\r\n\r\nSometimes we want to find values in an array that meet + certain conditions. We can add an **`if` statement inside the `for` loop** + to individually check every value within the array. To practice this, we will + create a `for` loop that will **display every value in the array greater than + 5**.\r\n\r\n# Do This:\r\n** Starter code** has been been provided that creates + an array of random values.\r\n\r\n* Add a `for` loop that references every + index in the array.\r\n\r\n* Add an `if` statement inside the `for` loop that + **displays every value in the array greater than 5** using `console.log`\r\n\t![](https://images.code.org/969077ff23232e410ce17520b0a71e1e-image-1447390972867.gif)\r\n \r\n* + **Note:** Because the original array is being constructed with random values + it's *possible* that it might not have any values greater than 5. Just run + the program a few times to make sure it works. An example of the possible + output is below.\r\n\r\n![](https://images.code.org/266e23afc3533ebd63b393b2ee8682d8-image-1447796380510.39.26 + PM.png)" + CSPU5_U3 - Loops And Arrays - Make it a Function - add list parameter_markdown_instruction: "# + Generalize *search* by Making It Into a Function - Part 2\r\n\r\nRight now, + our function just searches for a 5 in a global array called `testArray`. We + would like to be able to **use this function to search through any array**, + so we will be adding a parameter to allow us to specify which array should + be searched.\r\n\r\n# Do This:\r\n\r\n* **Add a parameter to the `search` + function called `list`**.\r\n* **Modify the code inside the function** so + that it loops over `list` (the parameter) instead of `testArray` (the global + variable).\r\n* **Call your function** with each of the arrays provided at + the top of the program.\r\n\r\n(These steps are shown in the code animation + below.)\r\n\r\n![](https://images.code.org/af4cf7bd95c09f3e8e3548a3383c4a4e-image-1447693121377.gif)" + CSPU5_U3 - Loops And Arrays - Make it a Function_markdown_instruction: "# Generalize + *search* by Making It Into a Function\r\n\r\nYou've just written code to + search for a value in a list! If we could generalize this behavior, it might + be useful to us in the future - it's probably something that we want to do + over and over again. \r\n\r\nOver the next few levels, we'll build up a + very useful, general function for searching for *any* value in *any* list. But + we'll do it one step at a time...\r\n\r\n# Do This:\r\n\r\n**Note:** We've + provided **new starter code** that implements the pseudocode from the last + exercise. It also **creates two more arrays** that we'll be using later for + testing. For this level just worry about `testArray`. \r\n\r\n* **Run the + starter** code to verify that it works correctly.\r\n* **Create a new function**. + Name the function `search`.\r\n* **Move the code that checks for a 5 inside + the function.** **Note:** You must move the boolean variable inside the function + as well, or it won't reset each time you call the function!\r\n* **Call the + function** to make sure your code still works. The actual behavior will be + the same as when you ran it the first time. The difference now is that you're + calling a function to do it.\r\n\r\n(Steps are shown in code animation below.)\r\n\r\n![](https://images.code.org/dfad49ac35cd605410c52828716b712c-image-1447631609779.gif)" + CSPU5_U3 - Loops And Arrays - Print Array_markdown_instruction: "# Print an + Array with a *for* Loop\r\n\r\nAs you know, we can use variables as indexes + in an array. We can take advantage of this fact to create a `for` **loop + which visits every index in an array**.\r\n\r\n![](https://images.code.org/5aeb9986535424b1d737b8221685196f-image-1447446416081.26.01 + PM.png)\r\n\r\nIn this `for` loop, the `i` eventually gets set to every possible + index in the array. You are going to use a loop of this kind to display all + the values in an array.\r\n\r\n# Do This:\r\n**Starter code** is provided + that adds several random values to an array.\r\n\r\n* Create a `for` loop + that uses the syntax shown below (and above) to **iterate through every index + in the array**.\r\n\t![](https://images.code.org/930b40b3e3f204605a0fd27fee9d8b8f-image-1447346008842.gif)\r\n \r\n* + Use `console.log` to **display the contents of the array at each index**.\r\n\t![](https://images.code.org/43431613ea0c045411499dd0e68e7feb-image-1447345996258.gif)\r\n \r\n* + Run the program to **confirm it is displaying all the values**.\r\n" + CSPU5_U3 - Loops And Arrays - Printing Single True_markdown_instruction: "# + Print a Single True/False Value\r\n\r\nSometimes we don't care about the + count and just want to know if the array contains a 5 or not. **Let's try + to display a single true/false indicating whether the list contains a 5.** + There are two cases to consider: \r\n\r\n1. The list **does not contain any + 5's**; you need to display **\"false\"**. \r\n2. The list **contains at + least one 5**; you need to display **\"true\"**.\r\n\r\n**HINT:** one way + to do this is to reference your counter variable `fiveCount` after the array + has been processed.\r\n\r\n# Do This:\r\n**We've pulled your code from the + previous level so you can continue to add to it**.\r\n\r\n* Add a **`console.log` + statement to display a single \"true\" or \"false\"** indicating whether there + is a 5 anywhere in the array.\r\n\r\n| Example output 1: One or more 5's + | Example output 2: No 5's |\r\n| --- | --- |\r\n|![](https://images.code.org/15ed45d471e9279a8739bad5f31c3a4d-image-1447452726753.06.31 + PM.png) | ![](https://images.code.org/ed19957449c6b68cb19326a6f430edec-image-1447452740979.06.46 + PM.png)|" + CSPU5_U3 - Loops And Arrays - Search with Boolean Var_markdown_instruction: "# + Using a Boolean Variable as a Flag\r\n\r\nWe are going to do a **challenge + that is similar to the last exercise** but, rather than counting the number + of 5's in the array, we're going to use a different **interesting programming + technique for processing arrays** that might prove useful to you in the future. + \r\n\r\n# Using a Boolean Flag\r\n\r\n<img src=\"https://images.code.org/756fcab9d5f48ace76eb5d300fcf58af-image-1447624065160.png\" + style=\"float: right; width: 250px\">\r\nThe technique is generally referred + to as **using a boolean \"flag.\"** To understand this idea, think about how + some mailboxes work: the flag starts down, and when a person wants to let + the mail carrier know there is something to pick up, she puts the flag up + to notify the mail carrier that there is outgoing mail in the box.\r\n\r\nWe + can use a variable to do something similar when programming. Rather than incrementing + a count every time we find a 5 in the array, we will use a variable that acts + like a **flag**. We will create a variable before the loop and assign it + `false` to start (flag is down). Then, as we process the array, if we find + a 5, set the variable to `true` (put the flag up). \r\n\r\nHere is some pseudocode:\r\n```\r\nvar + flag = FALSE\r\nFOR EACH item IN list\r\n IF (item EQUALS 5)\r\n flag + = TRUE\r\n \r\nDISPLAY (flag)\r\n```\r\nNotice that it doesn't matter + if we find more than one 5. It will just keep setting the flag to `true`. However, + if there are no 5's, the `if` statement in the loop will never execute, and + so the variable will remain the value it was initialized to, which was `false`.\r\n\r\n# + Do This:\r\n\r\n* **Implement the pseudocode above** in JavaScript. \r\n* + We've given you code that constructs an array of random values, and the standard + `for` loop for looping over an array.\r\n* The output will be no different + from the previous exercise, but you should still **confirm that your program + correctly identifies when a 5 is in the array.**\r\n\r\n| One or more 5's + | No 5's |\r\n| --- | --- |\r\n|![](https://images.code.org/15ed45d471e9279a8739bad5f31c3a4d-image-1447452726753.06.31 + PM.png) | ![](https://images.code.org/ed19957449c6b68cb19326a6f430edec-image-1447452740979.06.46 + PM.png)|\r\n\r\n" + CSPU5_U3 - Movie Bot - Multiple If Sequences_markdown_instruction: "# Adding + Rating to Keywords\r\n\r\nUp until now our movie suggestions have just been + based on genre. Let's now also look for keywords related to the movie rating + like \"G\", \"PG\", \"PG-13\", and \"R\" so we can give movie suggestions + based on both genre and rating.\r\n \r\n**Note: ** We've updated the flowchart + below (highlighted in yellow) to see the logic we are trying to add.\r\n\r\n**Note + 2: ** The logic of the program right now will yield some odd results - there + are some things you can type that will give 2 suggestions - this is expected, + for now. We are just taking a small step here. We'll refine the code again + in later levels.\r\n\r\n# Do This:\r\n\r\n* **Add another set of `if`, `else-if`, + and `else` statements** inside the question `if` statement to **check for + keywords for movie ratings (G, PG, PG-13, and R).**\r\n\r\n* **Hint:** When + checking for \"G\", \"PG\" and \"R\" you need to be a little clever. R and + G are letters that will show up in lots of words and PG will get confused + with PG-13. We want to check for \"g\" and \"r\" with spaces on either side. + So make sure to use `\" g \"` where there is a space on either side of g instead + of `\"g\"`. For \"pg\" you can just add a space after the pg to look for `\"pg + \"`\r\n\r\n* **Test out a couple sentences with your keywords** to make sure + the change worked.\r\n\r\n<img src=\"https://images.code.org/886713cfedf4802e174b68ed2eb36d4b-image-1455816199174.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/886713cfedf4802e174b68ed2eb36d4b-image-1455816199174.png\" + target=\"_blank\">Click to open in separate window.</a>" + CSPU5_U3 - Movie Bot - Nested Motivation_markdown_instruction: "# Checking + for a Question\r\n\r\nWe're going to start adding some \"intelligence\" to + our Movie Bot. Since we've added `includes` it can now tell if its keywords + appear anywhere in the input. As a result some inputs may be questions while + others might simply be statements. **We'd like the movie bot to respond differently + to questions and statements.**\r\n\r\nIn order to tell when the user is asking + a question **we will be checking whether the input includes a question mark + **.\r\n\r\n# Do This:\r\n\r\n* Add a separate statement to **check if the + input includes a \"?\"**. \r\n* If the input includes a question mark **print + \"That's a good question.\" before the recommendation.**\r\n* Otherwise print + **\"I only answer questions.\" before the recommendation.**\r\n* **Test out + a couple sentences with your keywords** to make sure the change worked.\r\n\r\n**Example + Input --->** | **Output**\r\n---|---\r\nWhat's the best action movie? | That's + a good question. The best action movie is any James Bond movie.\r\nI love + comedy | I only respond to questions. The best comedy movie is The Princess + Bride.\r\n<br>\r\n**Note:** Check out the flowchart below to see the logic + we are trying to change.\r\n\r\n<img src=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - Movie Bot - When Multiple If Statements_markdown_instruction: "# + Adding a Separate *if*\r\n\r\nIt's still the case that sometimes you want + to have two completely separate groups of `if` statements because there are + separate conditions you want to check and possibly have responses for both. + You don't always just keep adding to a giant `if` statement forever.\r\n\r\nIn + the Movie Bot demo you probably saw that if you type \"please\" and \"thank + you\" it adds something extra to the response (it says something like \"Thanks + for being polite!\"). Let's add this functionality to your movie bot as well. + \r\n\r\n**Note: ** Check out the flowchart below to see the logic we are trying + to add.\r\n\r\n# Do This:\r\n\r\n* ** Add an `if` and `else-if` statement + that checks for \"please\" and \"thank you\"**. \r\n\t* If the string includes + \"please\" it should say \"Thank you for being so polite!\" before it gives + its response.\r\n * If the string includes \"thank you\" it should say + \"You are very welcome!\" before it gives its response.\r\n\r\n* **Test out + a couple sentences with your keywords** to make sure the change worked.\r\n\r\n<img + src=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" + target=\"_blank\">Click to open in separate window.</a>" + CSPU5_U3 - Movie Bot - toLowerCase_markdown_instruction: "# Dealing with Character + Case\r\n\r\nWhat if the user types **ACTION** instead of **action**? These + are two different strings to the computer and therefore it won't recognize + they are the same. We want Movie Bot to treat words the same ignoring the + case of the letters. We can do this using the string command `toLowerCase`.\r\n\r\n**Note: + ** Check out the flowchart below to see the logic we are trying to add. \r\n\r\n# + Do This:\r\n\r\n* **Try typing COMEDY, ACtioN, horroR, and Romance** into + Movie Bot.\r\n\r\n* **Use the `toLowerCase` command** to change all user input + into lowercase letters after they enter it.\r\n\r\n* **Check that COMEDY, + ACtioN, horroR, and Romance generate the same recommendations** as comedy, + action, horror, and romance.\r\n\r\n<img src=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3 - Practice Create Performance Task_markdown_instruction: "# Practice + Create Performance Task\r\n\r\nYou've finally made it to the end of the Programming + Unit! We will continue some programming in the next unit, but for now we are + going to use all the new concepts you have learn to create something of your + own design! \r\n\r\n# Do This:\r\n\r\n* **Read the Project Overview** to understand + the entire project.\r\n* **Follow the Project Planning Guide**.\r\n* **Implement + your final program in this level**." + CSPU5_U3 - Return Values - constrainTurtle_markdown_instruction: "# Use a Function + that Returns a Value in an App\r\n\r\nWe create functions to **contain blocks + of code that will be used multiple times within our program**. The same is + true with functions that return values. Let's see an example of how we might + use one of the functions we've written.\r\n\r\nThis exercise comes with starter + code that creates a **simple turtle driver app**. The x and y location of + the turtle are stored in the variables `xloc` and `yloc`. An event handler + is used to update these values when the **arrow keys are pressed**, and then + a separate `updateTurtle` function is called to draw the turtle on the screen.\r\n\r\nCurrently + the turtle can drive off the screen. If we are clever about how we use our + `constrain` function, however, we can prevent this from happening.\r\n\r\n# + Do This:\r\n\r\n* **Starter code** is provided which allows the turtle to + move. Additionally a **working version of `constrain`** is provided.\r\n* + **Call the `constrain` function twice** within the `updateTurtle` function + to prevent the turtle from going outside the screen.\r\n\t* One call to the + function for `xloc` and one time for `yloc`.\r\n * Recall the screen is + **320 by 450 pixels**.\r\n* **Run your app** and confirm the turtle cannot + leave the screen.\r\n\r\n![](https://images.code.org/f2e24abdf2d4008dfdc4f2ba9e23ff2c-image-1447958362880.gif)" + CSPU5_U3 - Return Values - debuggingConstrain_markdown_instruction: "# Debugging + and Multiple Return Statements: *constrain*\r\n\r\nWe're going to debug another + function that uses multiple return statements. The function is called `constrain` + and is used to limit an input number to a certain range. The function accepts + three parameters.\r\n\r\n* `input` : the number to be constrained.\r\n* `low` + : the lower bound of the range. If `input` is below this value, the function + should return the value of `low`.\r\n* `high` : the upper bound of the range. + If `input` is above this value, the function should return the value of `high`.\r\n\r\n<details>\r\n<summary>**Click + for sample input and output for `constrain`**</summary>\r\n* `constrain(15,10,20)` + should return 15 since it is within the range of 10 to 20.\r\n* `constrain(5,10,20)` + should return 10 since the input is below the range of 10 to 20.\r\n* `constrain(25,10,20)` + should return 20 since the input is above the range of 10 to 20.\r\n</details>\r\n<br>\r\nUnfortunately, + because of the way this function was written, it does not always work as expected. + In particular, **because of how `return` was used, some portions of the function + never run**. Change the structure of the function to **use the pattern you + have been shown in previous exercises, included below**.\r\n<br> <br>\r\n**Pattern + for Functions that Return Values**\r\n* Use parameters to provide input.\r\n* + Declare a variable that will be used as output, possibly initializing its + value.\r\n* Update the value in your output variable throughout your program.\r\n* + Return your output variable on the last line of your function.\r\n\r\n# Do + This:\r\n\r\n* **Run the program** and identify the errors generated in the + output.\r\n* **Inspect the logic of `constrain`** to identify the logical + errors.\r\n* **Rewrite** `constrain` to make use of the **pattern for functions + that return values**, shown above.\r\n* **Run the program** to ensure it is + now running as you expect.\r\n\r\n![](https://images.code.org/38afcc5420e084b3146a8b12cc2d0e72-image-1447952855846.07.25 + AM.png)" + CSPU5_U3 - Return Values - debuggingMaxVal_markdown_instruction: "# Debugging + and Multiple Return Statements\r\n\r\n**Having multiple `return` statements + in a program can lead to tricky situations**. You may use multiple return + statements, but it makes it easier to introduce logical errors into your program. + We're going to look at some examples of functions with return values that + include logical errors and debug them. The goal is to **recognize common errors + with return values now so you can avoid them when writing your own programs**.\r\n\r\nThere + is a logical error somewhere in the version of `maxVal` you are about to see + which uses multiple return statements. As a result the function works correctly + for some inputs but not all. You'll need to inspect the code to understand + what the issue is and make changes accordingly.\r\n\r\n# Do This:\r\n\r\n* + **Run the program** and identify the errors generated in the output.\r\n* + **Inspect the logic of `maxVal`** to identify the logical error.\r\n* **Correct + the logical error** so that the function returns the correct value for all + inputs." + CSPU5_U3 - Return Values - useMinVal_markdown_instruction: "# Using Functions + that Return Values\r\n\r\nWe have used functions that return values many times + before, but in this exercise you will see how they are actually created by + using the `return` command. The function `minVal` accepts two numbers as input + and returns the minimum of the two as output. You can call this function just + like any other, and **because it returns a number, you can treat the function + call as if it were a number**.\r\n\r\n# Do This:\r\n\r\n* **Starter code** + has been provided that creates the function `minVal` and generates two random + values.\r\n* **Inspect the code of `minVal` to understand the logic of this + function**.\r\n* On the `console.log` line **call the function using `rand1` + and `rand2` as parameters** and ensure the minimum value is returned. You + should treat the function call **as if it were a number**.\r\n\r\n<img src=\"https://images.code.org/21c2232acca1ed4a133d648982b0b042-image-1447964963356.gif\" + style=\"width: 550px\">\r\n\r\n* Check that the program generates output similar + to the output shown below.\r\n\r\n<img src=\"https://images.code.org/0ec446c772976ca8e75e5eb25d018b24-image-1447964535213.21.49 + PM.png\" style=\"width: 350px\">\r\n" + CSPU5_U3 - Return Values - wrapTurtle_markdown_instruction: "# Use a Function + that Returns a Value in an App - Part 2\r\n\r\nThis time, you're going to + write a function that returns a value to add functionality to the turtle driver. + The `updateTurtle` function now is making a call to a function called `wrap` + that has not been written yet. It accepts three parameters and should work + in the following way:\r\n\r\n* `input`: the input value to the function. If + it is within the range it should just be returned.\r\n* `low`: the lower bound + of the range. If `input` is below this value the output should be the value + of `high`.\r\n* `high`: the upper bound of the range. If `input` is above + this value the output should be the value of `low`.\r\n\r\nBy using this function + you can create the illusion that the screen \"wraps\" around, so when the + turtle leaves the top of the screen it appears again at the bottom.\r\n\r\n# + Do This:\r\n\r\n* **Starter code** is provided which allows the turtle to + move.\r\n* The `updateTurtle` function now makes two calls to `wrap`, but + the function is not yet written.\r\n* **Write the `wrap` function** so that + it implements the logic described above.\r\n* **Run your app** and confirm + the turtle now \"wraps\" when it leaves the screen.\r\n\r\n![](https://images.code.org/ebed5130ccdd16202eac0b8cc02df959-image-1447957698820.gif)" + CSPU5_U3 - Return Values - writeMaxVal_markdown_instruction: "# Writing Functions + that Return Values\r\n\r\nNow you are going to write your own function that + returns a value, `maxVal`. This function should return the maximum of two + values provided as input. The code for `minVal` is provided so that you can + **replicate the pattern used in this function**.\r\n\r\n**Pattern for Functions + that Return Values**\r\n* Use parameters to provide input.\r\n* Declare a + variable that will be used as output, possibly initializing its value.\r\n* + Update the value in your output variable throughout your program.\r\n* Return + your output variable on the last line of your function.\r\n\r\nYou may actually + recognize many similarities between how we wrote functions that process arrays + and functions that return values. **These patterns aren't rules of programming, + but they help make your code easy to read and understand**.\r\n\r\n# Do This:\r\n\r\n* + **Starter code** has been provided which stubs out `maxVal` and generates + two random values. `minVal` is still provided **so that you can replicate + the pattern used**.\r\n* **Write `maxVal`**, replicating the pattern used + to write `minVal`.\r\n* **Use `maxVal` within the `console.log` statement + as if it were a number** to generate the output similar to the one shown below.\r\n\r\n![](https://images.code.org/5941ceeb27f0ad2d59819c9395d0d89a-image-1447947829448.gif)" + CSPU5_U3 - Simulation - 1_markdown_instruction: "# Starting Small\r\n\r\nTo + start, we're going to simulate flipping a coin 10 times. You might be thinking + that isn't many coin flips, and that we could just do those flips in real + life, but this is actually an important step in developing a simulation. At + small scales we can make sure our code is working as intended because **we + can still visually confirm its output**. Once we're convinced that the logic + of our program is reliable we'll move up to simulating larger numbers of + flips.\r\n\r\nThe core logic of our program will be focused on **a `while` + loop** that simulates flipping a coin by repeatedly generating **random 0's + or 1's using `randomNumber`**. This is a great opportunity to keep practicing + using loops while applying your knowledge of variables, iteration, and `if` + statements.\r\n\r\n# Do This:\r\n\r\n* When we want to flip a coin with a + computer we will instead **generate a random number between 0 and 1**.\r\n* + Write a program that **uses a `while` loop** to **flip a coin 10 times** and + writes the value of each flip to the screen. The example below shows how your + program should run.\r\n* **HINT:** you will need to use a counter variable + in your `while` loop to keep track of how many times the coin has been flipped. + \r\n\r\n![](https://images.code.org/970622047b06af13ea7bdd50ee86bcbf-image-1446739178483.gif)" + CSPU5_U3 - Simulation - 2.1_markdown_instruction: "# Changing the Loop Condition\r\n\r\nCurrently + our loop condition is based on a counter variable that keeps track of the + total number of flips, but our simulation should only run **while we have + fewer than the target number of heads**. In this exercise you are going to + change the condition used by your `while` loop so that your **simulation terminates + once you have flipped 5 total heads**. At the end of the loop we will **write + the total number of flips** to know how many flips it took to get 5 heads.\r\n\r\n# + Do This:\r\n\r\n* Change the looping condition to use the variable you are + using to keep track of the number of heads. **Your loop should run as long + as you have fewer than 5 total heads**.\r\n* Add code after your loop that + **writes the total number of flips**.\r\n* **Test your program** several times + to make sure it works as expected. See the example below.\r\n* **Note:** the + simulation is always terminating once it flips its 5th heads. Sometimes this + means the text output runs off the screen. We will address this in the next + exercise.\r\n\r\n![](https://images.code.org/878ff327142ebad8f81ecd8cdf58b14a-image-1446861064994.gif)" + CSPU5_U3 - Simulation - 2.5_markdown_instruction: "# 10,000 Heads!\r\n\r\nYou're + ready to increase the number of heads your simulation is looking for and **test + your first hypothesis**. Before we move up to the full 10,000 heads, however, + we're going to perform a quick check of our program logic. When you make + changes to your program **it is possible that some portion of your programming + logic will stop working as you expected**. In order to feel more confident + about your model you will **first change the number of heads you are looking + for to a number that we can still visually verify (7 heads)**. If our code + still works after making changes then we should be confident that it should + work at 10,000. We will remove the intermediate output and run the full simulation!\r\n\r\n# + Do This:\r\n\r\n* **Increase the number of heads you are looking for to 7** + and **visually confirm** that the code is still working as you expect.\r\n* + If everything seems to be working, **comment out the `write` command that + displays the results of each flip.** You can use `//` to comment out a single + line of code. Make sure that the total count of flips still prints though!\r\n* + **Run your simulation and find out how long it takes to get to 10,000 heads**. + Then run it a few more times. What patterns are you noticing? Record your + results and move on." + CSPU5_U3 - Simulation - 2_markdown_instruction: "# Counting Heads\r\n\r\nLet's + say that a **1 is a heads**. If we want our simulation to run until we reach + a certain number of heads then **we will need a way to count the number of + heads that have been flipped**. In order to do this you will need to add a + variable that acts **as a counter**. Initialize it to 0, and every time you + flip a heads (1) **increment your counter by 1**. At the end of your program + you should write the value to the screen.\r\n\r\n# Do This:\r\n\r\n* Add a + variable that **counts the number of heads (1's)** and write its value to + the screen after each flip.\r\n* Run your program severals times **and validate + that the number of heads recorded is correct** by visually checking the flips + you've printed to the screen.\r\n* **Hint:** you will also need to store + your current coin flip in a variable to complete this challenge.\r\n\r\n![](https://images.code.org/0d99569cd223c63e2166d610d09fd525-image-1446859813702.gif)" + CSPU5_U3 - Simulation - 3_markdown_instruction: "# Streaks of Heads\r\n\r\nWe + are going to alter our simulation so that it doesn't count the total number + of heads, but rather the longest **streaks of heads**. This will allow us + to simulate **how many flips it takes to get 12 heads in a row**. \r\n\r\nTo + begin with you will change your looping condition so that **the loop again + only runs 10 times**. This will allow us to visually confirm our code is working.\r\n\r\n**Keeping + Track of Streaks:** We know we need to count streaks of heads, how do we do + this in code? Do we need to keep track of all the previous flips so we know + that we're on a streak?\r\n\r\nThe answer is: **no**. We can instead just + **count in a clever way** that makes our code pretty simple. Make a variable + to use as a counter and...\r\n\r\n * every time you see heads, add 1 to a + counter.\r\n * every time you see tails, set the counter back to 0.\r\n\r\nHere + is some psuedocode showing how it works. You might take a minute to study + and reason about why and how it works.\r\n\r\n**Pseudocode**\r\n```\r\n// + Ouside loop\r\nheadsCount <-- 0\r\n\r\n// Inside loop\t\r\nIF (current flip + is a heads)\r\n headsCount <-- headsCount + 1\r\nELSE\r\n headsCount <-- + 0\r\nDISPLAY (current flip)\r\nDISPLAY (headsCount)\r\n```\r\n# Do This:\r\n\r\n* + Change your `while` loop's condition so that **it only runs 10 times**.\r\n* + Add code to the simulation that **displays the length of each streak of heads** + following the logic described above. Note that pseudocode should translate + to JavaScript pretty easily.\r\n* The example below shows an example of what + output from your program might look like.\r\n\r\n![](https://images.code.org/22f1a29e9b6abd558198f4704e437498-image-1446751547621.25.07 + PM.png)" + CSPU5_U3 - Simulation - 4_markdown_instruction: "# Changing the Loop Condition: + Streaks of Heads\r\n\r\nWe want our simulation to run** while the streak of + heads is less than a target length**. In order to do this we'll need to change + our looping condition to use the variables we've been using to count our + streak of heads. To begin with **your simulation should look for a streak + of 3 heads** so that you can still visually confirm the output.\r\n\r\n# Do + This:\r\n\r\n* **Change the condition** used by your `while` loop so that + it now runs **while the streak of heads is less than 3**.\r\n* **Test your + program** by running it and visually confirming that its output is correct. + It should run like in the example below.\r\n* **Note:** As before it's possible + that your output will sometimes run off the screen. You can still confirm + your code is working as you intend (it should never run after a streak of + 3) and we will address this issue in the next exercise.\r\n\r\n![](https://images.code.org/90ec4022f784ba136e59bb9b7c57a5c7-image-1446862623863.gif)" + CSPU5_U3 - Simulation - 5_markdown_instruction: "# Streaks of Heads: 12 in + a Row\r\n\r\nWe're almost ready to test **our second hypothesis** and find + out how long it takes to get **12 heads in a row**. Just as before we're + first going to **visually test our code with a different length streak (4)** + before removing most of the visual output and running the code for a streak + of 12.\r\n\r\n# Do This:\r\n\r\n* **Change your simulation to run until you + get a streak of 4** and visually verify that the values calculated are accurate.\r\n* + **Comment out** the lines of code that write the current coin flip and the + current streak count. You can use `//` to comment out a single line of code.\r\n* + **Change your simulation to run until you get a streak of 12 heads**. \r\n* + **Run your simulation a few times and record your results!**" + CSPU5_U3 - Simulation - 6_markdown_instruction: "# Keep Experimenting!\r\n\r\nYour + simulation can be updated or changed however you like. What new questions + do you have? Do you want to look for longer streaks of heads? Do you want + to roll a die instead of flipping a coin? Make any changes and improvements + to your simulation that you like.\r\n" + CSPU5_U3 - User Input - Save getText To Variable_markdown_instruction: "# Saving + Text Input in Variables\r\n\r\nOften we want to save the information we pull + in from the user for later use in our program. The best way to do this is + to save it in a variable.\r\n\r\n# Do This:\r\n\r\n* **Create two variables + inside your event handler** to store the **age** and **name** of the user.\r\n* + **Use `getText()` to update the values** stored in each of these variables.\r\n* + **Change your `console.log` statements to use your variable instead of `getText`**.\r\n\r\n![](https://images.code.org/ca45dcb01ae2d1956ed2f87efeda0264-image-1445976691215.11.13 + PM.png)" + CSPU5_U3 - Variables - Set to Expression with Other Variables_markdown_instruction: "# + Expressions with Variables\r\nArithmetic becomes much more interesting when + we use other variables in our expressions. For example you can do this:\r\n\r\n<table style=\"margin-left: + auto;\r\n margin-right: auto; align: center\">\r\n<tr>\r\n<td>\r\n<img src=\"https://images.code.org/13c21437292031a705744a8c2663c0d4-image-1445547765131.png\" + style=\"width: 400px;\">\r\n</td></tr>\r\n<tr> <td>\r\n <h3>\r\n Mental Model\r\n![](https://images.code.org/b4a2c125508fb06fd653b90c643cb53b-image-1447272790306.png)</h3>\r\n</td></tr>\r\n<tr><td><img + src=\"https://images.code.org/95eb7e859d04c72ed82ed80023a870cf-image-1445546103564.gif\" + style=\"width: 400px;\"></td>\r\n</tr>\r\n</table>\r\n\r\nThe end result of + an expression with variables is the same as one without. The major difference + is that values are retrieved from memory in order to do the calculation rather + than simply hard-coded.\r\n\r\n# Mental Model Check\r\nWatch the animation + above. To compute the expression the computer will: **first** retrieve each + of the values of the variables used in the expression; **then** the arithmetic + expression can be evaluated; **finally** the computed value can be stored + in memory.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/485f61858e45a39e383497c522c94d64-image-1445548216109.png\" + style=\"float: right; width: 300px\">\r\n* **Scenario:** In the starting code + we have provided you with variables that might be the kinds of things you + would keep track of in a game: `totalTime`, `points` and `lives`. (see right).\r\n\r\n* + Right now the `totalScore` is just set to 0. We want you to compute a final + score so that the person is rewarded for having a lot of points and lives, + but penalized for taking a lot of time.\r\n\r\n* **Write an expression** that + calculates the player's total score and stores it in the `totalScore` variable. The + calculation is: **the player's points *times* lives *divided* by the total + time.**\r\n\r\n* For the values provided the app display should look like + this:\r\n \r\n<img src=\"https://images.code.org/10c9c6f162004a1b7216ae36c1427478-image-1445548367117.png\" + style=\"width: 250px\">\r\n" + CSPU5_U3 - Variables - Set to Expression_markdown_instruction: "# Variables + and Arithmetic Expressions\r\nA common thing to want to do is store the result + of an arithmetic expression. The 4 basic arithmetic operations `+ - * /` + are available. \r\n\r\n<details><summary><strong>Here is a quick table that + shows the arithmetic operators with code examples</strong> [click to expand]</summary>\r\n<table>\r\n<thead>\r\n<tr>\r\n<th + style=\"text-align:center\">operation</th>\r\n<th style=\"text-align:center\">block</th>\r\n<th + style=\"text-align:center\">text</th>\r\n<th style=\"text-align:center\">example</th>\r\n<th + style=\"text-align:center\">result</th>\r\n</tr>\r\n</thead>\r\n<tbody>\r\n<tr>\r\n<td + style=\"text-align:center\">add</td>\r\n<td style=\"text-align:center\"><img + src=\"https://images.code.org/2cf1014a4e0b1dedd361edc73a0f7eb1-image-1445536786715.png\" + alt=\"\"></td>\r\n<td style=\"text-align:center\">`+`</td>\r\n<td style=\"text-align:center\">`result + = 7 + 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>10</strong> + in <em>result</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">subtract</td>\r\n<td + style=\"text-align:center\"><img src=\"https://images.code.org/96b80cd4d866130c7f8567765f9b4b00-image-1445536805959.png\" + alt=\"\"></td>\r\n<td style=\"text-align:center\">`-`</td>\r\n<td style=\"text-align:center\">`value + = 7 - 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>4</strong> + in <em>value</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">multiply</td>\r\n<td + style=\"text-align:center\"><img src=\"https://images.code.org/3574725201e009142126f39ad1df8a78-image-1445536817791.png\" + alt=\"\"></td>\r\n<td style=\"text-align:center\">`*`</td>\r\n<td style=\"text-align:center\">`score + = 7 * 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>21</strong> + in <em>score</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">divide</td>\r\n<td + style=\"text-align:center\"><img src=\"https://images.code.org/5d470b223717c9daac5246af0d013bdf-image-1445536826467.png\" + alt=\"\"></td>\r\n<td style=\"text-align:center\">`/`</td>\r\n<td style=\"text-align:center\">`bonus + = 7 / 3;`</td>\r\n<td style=\"text-align:center\">stores <strong>2.3333</strong> + in <em>bonus</em></td>\r\n</tr>\r\n<tr>\r\n<td style=\"text-align:center\">parentheses</td>\r\n<td + style=\"text-align:center\">none</td>\r\n<td style=\"text-align:center\">`()`</td>\r\n<td + style=\"text-align:center\">`avg = (99 + 85 + 93) / 3;`</td>\r\n<td style=\"text-align:center\">stores + <strong>92.3333</strong> in <em>avg</em></td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n</details>\r\n<br>\r\n# + Misconception Alert \r\n\r\n<img src=\"https://images.code.org/18eb833aba4a7199a28929dcd43c73f8-image-1445540549754.gif\" + style=\"float: right\">\r\nWhen you have a statement like `result = 5 + 7;` + realize that this **does NOT store a mathematical expression in the variable.** \r\n\r\nRather, + with this instruction you are asking to compute 5 + 7 and **THEN** store the + answer (a single number) in the variable.\r\n\r\n# Do This:\r\n\r\n**GOAL:** + the goal here is mostly to acquaint yourself with typing arithmetic expressions + - the answers to the questions below are less important, and should be used + as interesting things to investigate. \r\n\r\nWe've given you some **starting + code** with 5 statements similar to ones in the table above.\r\n* **Add `console.log` + or `write` statements** to display the values of each of the variables.\r\n* + Experiment with arithmetic expressions, try to make really big and really + small numbers.\r\n\r\n<hr>\r\n\r\n**Things to Try:**\r\n* Using **multiplication: + what's the biggest a number you can store** in a variable?\r\n * How many + digits are in the biggest number before it starts using scientific notation?\r\n* + Using **subtraction (or multiplication with negative numbers): what's the + lowest number you store?** (low means a negative number with a lot of digits)\r\n* + Using **parentheses** make a crazy-big arithmetic expression. \r\n * NOTE: + composing arithmetic expressions is ***much* easier in text mode**, and is + actually almost unreadable in block mode. Try doing this in text mode.\r\n + \r\n" + CSPU5_U3 Digital Assistant Design_markdown_instruction: "# Getting Started + with Your Digital Assistant\r\n\r\n<img src=\"https://images.code.org/e875ff7b54c314a378cdb784f92371a0-image-1445989933171.52.04.png\" + style=\"width:200px;float:right;\">\r\nOver the course of the next few lessons, + you'll be __developing your own digital assistant__. To make your digital + assistant more useful, it needs to be able to make __decisions__ based on + questions the user asks it, and respond intelligently.\r\n\r\nTo get started, + __choose a topic__ you want your digital assistant to specialize in. It should + be something you are interested in and know a lot about. Examples: Country + Music, Sushi, College Football, Comedy Movies.\r\n\r\nYou'll next set up + the layout for your app. __The basic layout contains just two primary design + elements:__ a text input and a text area.\r\n\r\n# Do This:\r\n\r\n- __Choose + a topic__ for your digital assistant to specialize in.\r\n- __Create the layout__ + for your app. Your digital assistant should have:\r\n - A name\r\n - + A text input for the user to ask a question\r\n - A text area for the digital + assistant to respond\r\n - The text area should have a greeting for the + user (e.g. Ask me a question about movies!)\r\n" + CSPU5_U3 Digital Assistant Set Text_markdown_instruction: "# Respond to Basic + User Input\r\n\r\n<img src=\"https://images.code.org/2bed8002ff3c89afb02db5809de1c40e-image-1445996503055.gif\" + style=\"width:200px;float:right;\">\r\nNow you can have your digital assistant + repeat what the user typed and add a __default response__. It's not the most + intelligent response, but you'll build up to that over the next couple of + lessons and it's important to build this program in pieces. \r\n\r\n# Looking + Back to Move Forward\r\nYou're going to now add to your program without as + much guidance as usual. Keep in mind that __this is very similar to programs + you've already built__, so look back at your work for a refresher.\r\n- __Mad + Libs:__ In Mad Libs you got a user's text when the 'Next' button was clicked, + filled in the outline with the responses, and displayed the completed Mad + Lib\r\n- __Introducing the 'change' event:__ You just learned about the + 'change' event that triggers when the user hits 'enter' on a text input.\r\n\r\n# + Do This:\r\n- __Take the user's question and output it to the text area__ + when the 'enter' key is pressed in the text input\r\n- The response should + also __include a default phrase__ such as _\"I don't know about that yet!\"_\r\n- + __Format the response with newline characters__ to separate the user's response + from the assistant's response.: `\\n`\r\n- The __text input should clear__ + after the user hits 'enter'" + CSPU5_U3 Digital Assistant Target_markdown_instruction: "# Introduction to + the Digital Assistant\r\n\r\n__While digital assistants may seem like magic, + they are just elaborate computer programs that parse, or process, text__ looking + for combinations of words to make decisions about what to reply.\r\n\r\nOver + the next few lessons, __you're going to build up your own digital assistant + that responds \"intelligently\" to a user's question__, by making a decision + about what to reply based on the contents.\r\n\r\nYou'll now __explore a + demo digital assistant__, Movie Bot, that represents the kind of program that + you'll build up to. Try out some of the prompts below and also try your own. + You'll quickly find the limits of what this program can and can't do.\r\n\r\n# + Do This:\r\n__Run Movie Bot. In the _'enter your question here'_ input, + type each of the following prompts and hit 'enter.' __\r\n- 'help'\r\n- + 'What is the best PG comedy movie ever?'\r\n- 'What PG comedy movie should + I watch next?'\r\n- 'Could you please tell me the best romance movie?'\r\n- + 'I waNT To WatCH a MovIE!!!'\r\n- 'What is the capital of Kentucky?'\r\n- + Play around! Ask more questions of Movie Bot and make a prediction about what + logic it's using to reply.\r\n" + CSPU5_U3 full clicker demo_markdown_instruction: "# Clicker Game Demo\r\n\r\nTry + out this clicker game! You'll be building your own version (with a theme + you choose) at the end of the lesson.\r\n\r\n# Things That Are Familiar\r\nYou + know how to build many of the components of this game already:\r\n- Multiple + screens.\r\n- Buttons that change the screen when clicked.\r\n- Image that + moves when you click it.\r\n\r\n# Things That Are New\r\n- Keeping track of + and displaying the __changing score__.\r\n- Keeping track of and displaying + the __changing lives__.\r\n- Changing to the __win screen if the score is + 25__.\r\n- Changing to the __lose screen if the lives is 0__.\r\n" + CSPU5_U3- Keys - Code Refactoring Exit Ticket_markdown_instruction: "# Free + Response: Why Refactor?\n\nWhy is refactoring your code important?\n" + CSPU5_U3- Variables - Create And Assign_markdown_instruction: "# Create and + Assign At Once\r\n\r\nIt's so common to want to create a variable and give + it an initial value, that JavaScript has a shortcut that lets you create and + assign with one line of code like this:\r\n\r\n<img src=\"https://images.code.org/84b576f02fe92989d0955dc8d4122eed-image-1445480709312.png\" + style=\"width:120px\">\r\n\r\n\r\nYou'll also see a new block in the toolbox + for this (see right).<img src=\"https://images.code.org/cbe3f9ffd0bafef72ce18232f746fdbe-image-1445480538334.gif\" + style=\"float: right; width: 350px\">\r\n\r\n# Do This:\r\nWe'll just quickly + practice using this form of variable creation and assignment. The code you + write will achieve the same thing as the previous level in fewer lines of + code. \r\n\r\n* **Create a variable called `lives`** and **assign it the value + 3** using the new one-line version of this command. (See animation at right.)\r\n\r\n* + **Add** `console.log` statements to display the value of `lives` just as before. \r\n\r\n* + The output in the console should (again) look like this:\r\n \r\n <img src=\"https://images.code.org/6405a3ed95ca3125ea1b2c9ffbdffa94-image-1445349849482.png\" + style=\"border: solid 1px gray\">\r\n\r\n" + CSPU5_U3- Variables - Text Mode_markdown_instruction: "# Give Text Mode a Try!\r\nThe + block-based mode of programming is useful for getting code into your app fast + and error free. But sometimes those little tiny edits are a pain. **Use text + mode instead!** Text mode is designed to make typing code fast and easy, + and it also gives a lot of help to make your code error free. \r\n\r\nLet's + re-create these variables again, but explore some features of text mode this + time.\r\n\r\n# Try Each of These 3 Things\r\nWe've given you the first two + lines of code in a program. \r\nExpand each box below and try what's suggested + - each builds on the previous one, so you might want to go in order.\r\n\r\n<details>\r\n<summary>1. + **Switch to text mode and try to type.** [click to expand]</summary>\r\n \r\n + Switch to text mode and **type out a `console.log` statement** to display + the value of `score`.<br>\r\n <img src=\"https://images.code.org/d8cd6968bbb5fb5b5a8b8b3e41ee7ad1-image-1445353098262.gif\" + style=\"width: 500px\">\r\n</details><br>\r\n\r\n<details>\r\n<summary>2. + **Drag blocks into text mode.** [click to expand]</summary>\r\n\r\n If you + don't want to type *everything* you can drag a block from the toolbox into + text mode and it will show you the text version of it. **Add code to create + the `lives` variable and a `console.log` message**.<br>\r\n \r\n <img src=\"https://images.code.org/b755a871221705ebdc73e73ffbfd1ad0-image-1445353101095.gif\" + style=\"width: 500px\">\r\n\r\n</details><br>\r\n\r\n<details>\r\n<summary>3. + **Check out code completion.** [click to expand]\r\n</summary>\r\n When you + type commands a tool tip pops up that tries to guess what you're trying to + type. If you see what you want in the box, **highlight it** (you can use arrow + keys) and then **hit the tab key**. It will auto-complete the code for you!<br>\r\n + \r\n <img src=\"https://images.code.org/177d70ab086d1481ad2ba5d367379aff-image-1445353103029.gif\" + style=\"width: 500px\">\r\n </details>" + CSPU5_U3-Design Mode-ID and Event Handler_markdown_instruction: "# Activate + Your Button\r\nOn the last level you added a button using Design Mode. If + you click it, nothing happens. Let's make the button work. \r\nYour button + has been brought over to this level. \r\n\r\n**Goal:** Add code using Design + Mode to make the button respond to a click.\r\n\r\n# Do This:\r\n\r\n<img + src=\"https://images.code.org/9ff41c3ea30ece355e91eaca5cdc1e36-image-1444417748945.gif\" style=\"width: + 250px; float: right\">\r\n\r\n* **Change ID of button** from “button1” to + “redButton”.\r\n\r\n* **Insert `onEvent` from Design Mode** by clicking *Insert + and show code* under the **Events Tab**.\r\n\r\n* Run the program and **look + for the output in the *Debug Console* **below the workspace instead of the + app window. We will discuss the *Debug Console* on the next level." + CSPU5_U3-Design Mode-Image_markdown_instruction: "# Testing Overlapping objects + and the Screen with Console.log\r\n\r\nThere are two goals here:\r\n\r\n1. + Practice inserting your own console.log statements.\r\n2. Investigate how + the screen captures events (it's different).\r\n\r\n## Do This:\r\n\r\n* + Add `console.log` statements to each of the 3 event handlers we started you + out with.\r\n * Make the text that gets printed *be descriptive* so that you + know exactly what is happening when.\r\n\r\n* **Run** the program\r\n* **Click + on the overlapping objects** both the parts that overlap and the parts that + don't.\r\n* **\r\n\r\n**Investigate until you can answer the questions:**\r\n1. + When you click on a location where two objects are overlapping, which event(s) + fire(s)?\r\n2. When you click on an non-overlapping part of some object what + gets triggered?\r\n3. When does a \"click\" on the \"screen\" get triggered?\r\n\r\n\r\n<details><summary>Answers: + [click here]</summary>\r\n\r\n1. When you click on a location where two objects + are overlapping, which event(s) fire(s)?\r\n<br>\r\n<li> The event-handler + for object that is on top gets triggered. The object that is underneath is + essentially blocked from being clicked in the overlapping portion</li>\r\n<br><br>\r\n2. + When you click on an non-overlapping part of some object what gets triggered?\r\n<li>The + event-handler for the object gets triggered as you might expect</li>\r\n<br><br>\r\n3. + When does a \"click\" on the \"screen\" get triggered?\r\n<li>Always. Events + that occur on the screen cannot be blocked by other objects. If you set up + an event listener for the screen it will capture EVERY event of that type, + no matter what other UI elements are on the screen. This behavior of the + screen is done on purpose and is useful for certain kinds of things.</li>\r\n\r\n\r\n</details>\r\n" + CSPU5_U313 Two Buttons with Ids_markdown_instruction: "# Predict - Observe + - Reflect\r\nHere's another one. \r\n\r\nTo understand a new piece of code + good programmers often try to **first make a prediction about what will happen + before running the program**. \r\n\r\nBy forcing yourself to make a prediction + (it doesn't matter if you're right or not) you are immediately alerted to + any **unusual or unexpected behavior** and you can ask yourself, *\"Huh? why + did it do that? Was that supposed to happen?\"* It might not be an error, + but you gain invaluable insight and actually **learn faster**.\r\n\r\n**Predict:** + For the code that is here, what will happen when the \"Forward\" button is + clicked? \r\n\r\n * **Study the code** - This program has **two event handlers** + listening for events on the same button?\r\n * **Force yourself to make a + prediction!** - \"I don't know\" is not a prediction!. \r\n\r\nHere are some + options to think about:\r\n\r\n* There will be an error in the console immediately + after hitting run\r\n* There will be an error in the console but not until + you hit the button\r\n* Program does nothing\r\n* turtle only moves forward\r\n* + turtle only turns left\r\n* turtle move forward *then* turn left \r\n* turtle + turn left *then* move forward?\r\n* something else? \r\n\r\n**Observe:** Once + you've made a prediction, close these instructions and **run the program** + to observe what happens.\r\n\r\n**Reflect:** Was your prediction correct? + If not what about your mental model might need to change? Talk about it with + a classmate and experiment with the code to make sure you understand what + is happening." + CSPU5_U313 drag Two Buttons_markdown_instruction: "# Buttons and Unique IDs\r\nYou + may have noticed that the button command has two parameters: `button(id, text)`. The + `text` is the text that actually shows up on the button display, and the `id` + (we'll typically write **ID**) is a **unique identifier** for that element + in the app.\r\n\r\nEach element that appears in the app must have a **unique + ID**. In fact, if you try to run a program that has two buttons with same + ID you will get a warning message in the console. Watch:\r\n<img src=\"https://images.code.org/47ec46e0563f63641cc10ef152e9f86e-image-1444074330713.gif\" + style=\"border: solid 1px black; width:500px\">\r\n\r\nNotice that even though + the text on the buttons was different, the IDs were the same, which caused + the error message to show up. To get rid of that error message you will have + to change the ID of the button from the default `id` to something else.\r\n\r\n**Error + messages happen to everyone and they are helpful!**: getting an error or warning + message when you run your program is *not a big deal*. Programmers actually + rely on error messages to tell them where and how to fix their code.\r\nSometimes + error messages are bit cryptic: `WARNING: Line: 2: button() id parameter refers + to an id (id) which already exists.` But a warning like this contains helpful + information and clues such as the line the error occured on, or some word + or command it didn't recognize. \r\n\r\n# Do This:\r\nThe goal here is to + experience an error message in a program, study it, and fix it.\r\n* **Drag** + two buttons into the workspace (same as shown above) with the default IDs.\r\n* + **Run** the program to see the warning message in the console.\r\n* **Read** + the warning message to see what it says.\r\n* **Change** the IDs of the buttons + to make them unique. An ID must be specified in quotes. You can use double-quotes: + `\"myId\"`, or single quotes: `'myId'`\r\n* **Re-run the program** to make + sure you don't get the error.\r\n\r\nOnce you've got two buttons on the + screen with different IDs and the program can run without generating the warning, + move on to the next level.\r\n" + CSPU5_U3L13 - Debug Id Problem_markdown_instruction: "# Descriptive IDs\r\n\r\n**You + try it** - give your buttons **descriptive and meaningful IDs** rather than + the default `button1`, `button2` and so forth.\r\n\r\nRemember to:\r\n\r\n* + **Change ** the event handler code so that it correctly references the new + IDs of the buttons\r\n* **Run - Test - Debug ** the program to make sure it + works, and debug any problems.\r\n\r\n<details><summary><strong>Reminder:</strong> + Rules About IDs [click to expand]</summary>\r\n\r\nIn making descriptive and + meaningful IDs there **are some rules about IDs** you need to know. IDs...\r\n\r\n<li> + cannot contain spaces.\r\n<li> *must* begin with a letter (A-Z or a-z) and + may be followed by any number of digits and letters.\r\n<li> can contain + hyphens (\"-\"), underscores (\"_\"), colons (\":\"), or periods (\".\").\r\n\r\n</details>\r\n" + CSPU5_U3L13 - Debugging 1_markdown_instruction: "# Debugging Event-Driven Programs: + IDs\r\n\r\nTry another one! -- This one is trickier, but very common.\r\n\r\n1. + **Run the program** and inspect the messages in the Debug Console for clues.\r\n2. + **Investigate** - track down what the root of the problem might be.\r\n3. + **Fix it** the program and correct the errors so that it works as intended.\r\n4. + **Run the program** and verify that both buttons have the intended functionality.\r\n5. + **Repeat as necessary** until the program works as intended\r\n\r\n<details><summary>Hint? + [click here]</summary>\r\n\r\n<li>Remember: IDs are **case-sensitive**!!!</li>\r\n<li>The + error is with the id: **left**[**B/b**]**tn**</li>\r\n</details>\r\n" + CSPU5_U3L13 - Debugging 2_markdown_instruction: "# Debugging Event-Driven Programs: + Ordering Event Handlers\r\n\r\n**Ordering Event Handlers: ** Event handlers + must come **after the object they reference in the code**. If your event handler + comes before your object (in this case a button) your computer would be looking + for an event on an object that does not yet exist. You will get an error message + and your code will not work as you intend.<img src=\"https://images.code.org/b5d00d8027dae463eebb7f1c079cb2e2-image-1444156708725.gif\" + style=\"float: right; width: 150px\">\r\n\r\n**Target Application:** Just + like the last exercise, you'll again try to make an app that has two buttons, + one for moving forward and one for turning left. \r\n\r\nOnce again, we've + introduced a new error.\r\n\r\n# Do This:\r\n**Run the Existing program** + to see the error that gets generated.\r\n\r\n**Debug ** this program so that + it works as intended.\r\n\r\n**Run the program ** and try both buttons to + make sure they have the intended functionality." + CSPU5_U3L13 - Debugging 3_markdown_instruction: "# Debugging Logical Errors\r\n\r\nSometimes + you can write a program that generates no errors but still does not work as + intended. \r\n\r\nThis is the result of **logical errors** in your code, and + **making a prediction** can help find these nasty little buggers too.\r\n\r\nOnce + again we've introduced an error or two (a logical error this time) for you + to debug.\r\n\r\n1. **Investigate the code and make a prediction** - What + *should* happen here?\r\n2. **Run the program** and experiment to see what's + wrong.\r\n3. **Reflect** - were you right? Why or why not?\r\n4. **Fix it** + - make it work as intended.\r\n5. **Repeat as necessary**" + CSPU5_U3L13 - Debugging IDs case sensitive_markdown_instruction: "# Debugging + Event-Driven Programs: IDs\r\n\r\nTry another one! -- This one is trickier, + but very common.\r\n\r\n1. **Run the program** and inspect the messages in + the Debug Console for clues.\r\n2. **Investigate** - track down what the root + of the problem might be.\r\n3. **Fix it** the program and correct the errors + so that it works as intended.\r\n4. **Run the program** and verify that both + buttons have the intended functionality.\r\n5. **Repeat as necessary** until + the program works as intended\r\n\r\n<details><summary>Hint? [click here]</summary>\r\n\r\n<li>Remember: + IDs are **case-sensitive**!!!</li>\r\n<li>The error is with the id: **left**[**B/b**]**tn**</li>\r\n</details>\r\n" + CSPU5_U3L13 - Project_markdown_instruction: "# Multi Screen App\r\nYou will + be creating your own multi-screen app to practice designing user interfaces + and writing event-driven programs. \r\n\r\n**Look at the Project Guide and + Planning Sheets before programming**.\r\n\r\n# Requirements Reminder\r\n* + Your app will have at least **4 screens**.\r\n* Your app should include **text, + images, buttons, and sound**.\r\n* There should be **no “getting stuck” on + any screen.** It should always be possible to navigate from a screen in your + app to some other screen. \r\n* Your program code should follow **good style**.\r\n* + Your user interface should be **intuitive to use**." + CSPU5_U3L13 - Turtle Driver Project_markdown_instruction: "# Create a Turtle + Driver App!\r\n\r\nAt this point you know enough about buttons and event handlers, + and how to debug some common issues that arise to be able to **build your + own \"turtle-driver\" app** from scratch. \r\n\r\n**Build up the program bit + by bit**. Don't try to write all the code at once. Add a button with an + event handler, make sure it works, debug any problems, and then move on to + the next part.\r\n\r\n# Do This:\r\n\r\n**Create ** an application with **four + buttons**, one for moving the turtle forward and one each for turning left + and right. The fourth button should do whatever you like.\r\n\r\n**Use descriptive + and meaningful IDs** for your buttons and ensure your event handlers work + as you intend.\r\n\r\n**If you have extra time** add more buttons that use + other turtle commands you'd like to include. You can also use colors, and + different line widths, dots, etc. " + CSPU5_U3L13 - Turtle move with button_markdown_instruction: "# Your First Interactive + App!\r\n<img src='https://images.code.org/3fad83213ae72073251c4d5abc1f048a-image-1444060521578.png' + style='float: right; width: 250px'> A new group of commands has been added + to the toolbox called **UI Controls** (User Interface Controls) which are + commands that let you interact with, and respond to, the user of your app. + To keep it simple, we'll start with just two commands: \r\n* `onEvent` which + lets you run a function in response to some event occuring (such as a button + click).\r\n* `button` which puts a button on the screen.\r\n\r\n# Do This:\r\nYou + will replicate the small app shown below, which makes the turtle move with + a button click. You will do three things:\r\n* Add a `button`.\r\n* Add an + `onEvent` block.\r\n* Add `moveForward` inside the onEvent function block.\r\n\r\nHere's + what you should do - you can come back to watch this as many times as you + need to get it right.\r\n<img src=\"https://images.code.org/1cdc8cfbcef2a43f84b11ebdf14aed0c-image-1444061731350.gif\" + style=\"border: solid 1px black; width: 500px; margin: auto\">\r\n\r\nOnce + you've created the program and gotten it to run, click **Finish** to move + onto the next level." + CSPU5_U3L13 Free Response Reflection_markdown_instruction: "Elements in your + app are required to have **unique IDs**. Given what you now know about how + event handlers work, why is it important for the IDs of page elements to be + unique?\n\n" + CSPU5_U3L13 eventsDetails_markdown_instruction: "# onEvent\r\n\r\n**You try + it!** - Make the turtle move forward when the button is clicked.\r\n\r\n* + **Add an `onEvent` block** \r\n* Set the **id** and **type** you want.\r\n* + Add `moveForward` to the function definition\r\n\r\n* **Run the program** + to make sure it works.\r\n* **Try changing the event type** to something like + *\"mouseover\"* and see what happens. Not all event types will work with + buttons but it's fun to play a little bit.\r\n\r\nOnce you've got the program + responding to some event, congratulations! You've just made your first interactive + app. \r\n\r\n**Click Finish** to move on to the next problem.\r\n\r\n" + CSPU5_U3L14 - Assigning Random Value_markdown_instruction: "# Other Ways to + Assign Values to Variables\r\nPrograms become much more interesting when the + values in variables change while the program is running. We can also assign + to a variable the value returned by a function. For example:\r\n\r\n![](https://images.code.org/31447c1b90c925bba3ca86ead8d84a7d-image-1445892065474.png)\r\n\r\nBecause + the `randomNumber` function *evaluates to a number* it means we can treat + it *as though it were a number*. We've used it before by just \"plugging + it in\" to some function that needed a number as a parameter like:\r\n![](https://images.code.org/5df0376d562bd75a1899e17c49b00144-image-1445941026356.png)\r\n\r\nBecause + the `randomNumber` function generates a new and different number each time + you call it, one thing we *could not* do before we had variables was generate + a random number, and use that *same number* for two different things in a + program. Now we can.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/df3d2a8f4c1a3061981667c9f85b0071-image-1445549489133.png\" + style=\"float: right; width: 350px\">Write a program that simulates the rolling + of two dice and reports their individual values as well as the sum. \r\nThe + program should:\r\n* Generate two random numbers between 1 and 6 and store + each result in its own variable.\r\n* Display the individual values of the + two dice.\r\n* Display the sum of the two dice (see right).\r\n* Every time + you run the program the result will be a little different.\r\n\r\nWe have + given you starting code that shows what to do for the first die. The *rest + of the code is up to you!* When you're done the output in the app display + should look like what's above.\r\n\r\n" + CSPU5_U3L14 - Mini Calculator embed_markdown_instruction: "# Getting User Input + - A Simple Calculator\r\nPrograms become *even more interesting* when we can + interact with the user. A short way to ask a user for a number is with the + `promptNum` command, which pops up a dialog box asking the user to enter a + number.\r\n\r\nThis very simple app demonstrates a new behavior: getting input + from the user.\r\n**You will write code to re-create this program** on the + next page.\r\n\r\n# Do This:\r\n* Click \"Run\" on the app.\r\n* You will + be prompted for two numbers, one right after the other. \r\n\t* If you don't + enter a number it will simply re-prompt you until you do.\r\n* See what happens. \r\n* + Re-run the program and enter different numbers until you get the idea.\r\n\r\nClick + **Finish** to move on." + CSPU5_U3L14 - User Input Division calculator_markdown_instruction: "# Assigning + User Input to Variables\r\n<img src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" + style=\"width: 350px; float:right\">\r\nLet's use `promptNum` to make a simple + calculator. The `promptNum` command appears in the variables toolbox because + it's typically used as a way to get a value from the user that you want to + hold on to while the program runs.\r\n\r\n`promptNum` is similar to `randomNumber` + in that it is a function whose return value *evaluates to a number*. The difference + here is that `promptNum` pops up an input dialog box and waits for the user + to type a number. Once they do and hit \"OK\" the number they typed is returned + and we can store it in a variable to use in our programs.\r\n\r\n\r\n# Do + This:\r\nWrite a program that acts as a simple calculator. (An animation of + the end result is shown at right.) <img src=\"https://images.code.org/e644d4b17d1d6fdb6b5a93651d512f8a-image-1445552700557.gif\" + style=\"width: 250px; float: right\">\r\n* Ask the user to **enter a number**.\r\n* + Then ask the user to **enter a second number**.\r\n* **Display the result** + of *some* calculation.\r\n * The example shows division but you may choose + something else if you like.\r\n\r\nWe have given you starting code that shows + you how to get the first number. The rest of the code is up to you.\r\n\r\n" + CSPU5_U3L14 - Variable ReAssignment pt2_markdown_instruction: "# Variable Re-assignment + - Part 2: Updating Values\r\n\r\nAll of our examples so far have shown how + to set the value of a variable by using combinations of numbers and other + variables. But what if you wanted to do something like **add 10 to the *current* + value of a variable**? \r\n\r\nBecause updating the value in a variable is + just moving memory around, the process has to go something like this:\r\n* + Read the current value of a variable.\r\n* Add 10 to it.\r\n* Store the new + value back into the same variable.\r\n\r\nThe technical term for this is called + **variable re-assignment** - when you change the value of a variable based + on its current contents. To increase the value of `num1` by 10 you actually + need to do this:\r\n\r\n<img src=\"https://images.code.org/c49b1a0fb81de4b90558fdb278e40987-image-1445942169121.png\" + style=\"float:right\">\r\n```\r\nnum1 = num1 + 10;\r\n```\r\nThe diagram at + right shows a picture of what's happening (it assumes the value of `num1` + is 7 before the line is executed). It's actually very similar to what happens + with plain old arithmetic: compute a value, then store it in a variable. Because + the computation has to happen before storing the result in a variable, there + is no contradiction here.\r\n\r\n<details>\r\n<Summary><strong>Common Mistakes + & Tips</strong> [click to expand]</Summary>\r\n\r\n<h3>\r\nMistake 1\r\n</h3>\r\n<p>To + increase the value of variable by 10 (for example) a common mistake is to + think that this statement alone will do the trick.\r\n</p><p>\r\n\r\n```\r\nnum1 + + 10;\r\n```\r\n</p><p>\r\nIt doesn't. This tells the computer to add 10 + to whatever the value of `num1` is. And the computer will do that, and the + result will go....nowhere. It will be lost.\r\n</p><p>\r\nBecause you are + trying assign a new value to a variable it should make sense that **the = + sign must be involved somehow**. \r\n</p>\r\n<h3>\r\nMistake 2\r\n</h3>\r\n<p>\r\nIf + you were in math class this statment would make no sense:\r\n```\r\nnum1 = + num1 + 10;\r\n```\r\n</p><p>\r\nBut **remember to read = as \"gets.\"** If + you read the statement above as: \"num1 *gets* the value of num1's current + value plus 10\" it might make more sense. Get in the habit of using \"gets.\"\r\n</p>\r\n</details>\r\n\r\n# + Do This:\r\n\r\n * **Make a prediction.**\r\n We start you out with some code + again (see below). \r\n\r\n <img src=\"https://images.code.org/60b25394c387bc111451f0e481528733-image-1447800367736.43.42.png\" + style=\"width: 500px;\"> \r\n\r\n Trace the code and predict what you think + will be printed to the console. (NOTE: We're serious about this \"make a + prediction\" stuff. When you force yourself to make a prediction about what + code will do you will learn faster since it triggers you to apply your mental + model of what's happening.)\r\n \r\n * **Run the program** to see if you + were right.\r\n \r\n * **Add a `console.log` statement**.\r\n \r\n We've + left you with a *little bit* of programming to do: add a `console.log` statement + at the end of the program to see the last value of `someNum` to see if your + full prediction is correct.\r\n" + CSPU5_U3L14 - concatenate simple_markdown_instruction: "# Text and Variables + Living Together!\r\n\r\nSometimes it’s useful to display text along with the + value of a variable in the same line of output. To do this you use `+` to + attach a variable onto a literal string of characters. Here is an example:\r\n\r\n<img + src=\"https://images.code.org/a35e68b062fc814871a8323938cf3384-image-1445888147995.png\" + style=\"border: solid 1px #BBBBBB; height: 30px;\">\r\n\r\nNotice that the + `+` operator has **two different meanings in JavaScript depending on what + type of data you're applying it to**. Click the explanations below for more + details.\r\n\r\n<details>\r\n<summary>If **both operands are numbers** `+` + means to add those two numbers together.</summary>\r\n\r\nThis is standard + addition. It works both with numbers and with variables that contain numbers, + as shown below.<br>\r\n\r\n<img src=\"https://images.code.org/eb50a1fcea459fe74774d903b07a274f-image-1445887814602.png\" + style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n\r\nBecause `num1` + is a variable that holds a number, and 10 itself is obviously a number, in + this case `+` will do addition like you would expect.\r\n\r\n</details>\r\n<br>\r\n<details>\r\n<summary>If + **either of the operands is a string** `+` treats both as if they were strings + and combines them to create a single string.</summary>\r\nThis is potentially + confusing behavior and can get pretty weird if the text *looks* like numbers. For + example, this code will display **16100** to the screen.<br>\r\n\r\n<img src=\"https://images.code.org/a9c54b664bd192aa5bf611808d88a3bc-image-1445887893598.png\" + style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n\r\nWhy? Because + JavaScript sees you trying to display a mix of text and variable values. \"16\" + (in quotes) is a string of ASCII characters not a number. And so JavaScript + converts everything to text, and the characters in the result of \"16\"+\"100\" + comes out to \"16100\". \r\n\r\n</details>\r\n<br>\r\n \r\n**TIP:** It's + common to want to sandwich a variable between some text when displaying it. You + can string together multiple pieces of text and variables using the `+` operator. For + example, you can do this:\r\n<br> \r\n\r\n<img src=\"https://images.code.org/65b0e277f058903bd3b956cc59ee5253-image-1445887976271.png\" + style=\"border: solid 1px #BBBBBB; height: 30px;\"><br>\r\n \r\n<br>\r\n<details>\r\n<summary>**Misconception + Alert**</summary>\r\n\r\nThe **key thing to understand** about the `+` symbol + is that it can _only_ do actual arithmetic addition if the values on either + side of the `+` are actually numbers or variables that contain numbers. \r\n\r\n**And** + if the `+` symbol cannot determine whether the value is a number then it **assumes + it's a string**, and converts everything to a string and tries to concatenate + it. \r\n \r\nThe computer relies on you - the programmer - to make sure that + the **type of data** stored in a variable is appropriate for the task at hand.\r\n</details><br>\r\n\r\nOn + the next screen we'll have you play with this a little bit, but you'll write + statements to display a mix of text and strings from here on out.\r\n\r\n# + Do This:\r\nWe have given you the starting code shown below. You should **modify** + the `write` statement on **line 3** to combine text and variables together + to make the app display a single line of text as shown.\r\n\r\n|starting code|output|\r\n|--|--|\r\n|<img + src=\"https://images.code.org/a1b84a8728599e9945c576d3bb459140-image-1445891621155.png\" + style=\"height:50px\">| <img src=\"https://images.code.org/f5673df128eca0f9637c0cca1729b489-image-1445891800242.png\" + style=\"width: 250px\">|" + CSPU5_U3L14 - moving memory challenge1_markdown_instruction: "# Moving Memory + - Challenge 1\r\n\r\nThe next several levels all present challenges related + to \"moving memory\" around in your program. \r\n\r\n**GOAL:** Set the value + of the variable(s) to make the `console.log` statement display what it's + supposed to.\r\n\r\n**Rules**:\r\n\r\n * You may **only** add lines of code + that re-assign values of variables provided.\r\n * You may **only** use assignment + (`=`) and arithmetic operators (`+` `-` `*` `/`).\r\n * You **MAY NOT** type + or introduce any numbers.\r\n * You **MAY NOT** add or create any new variables.\r\n + * You **MAY NOT** change or alter the `console.log` statement at all.\r\n\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n<br><br>\r\n### Try this example yourself...\r\n\r\n" + CSPU5_U3L14 - moving memory challenge2_markdown_instruction: "# Moving Memory + - Challenge 2\r\n\r\n# Try another one!! \r\n* Click through to see a new + problem provided in the starter code. \r\n* A reminder of the rules and example + are below if you need to sneak a peek.\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L14 - moving memory challenge3_markdown_instruction: "# Moving Memory + - Challenge 3\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar + x = 2;\r\nvar y = 3;\r\n// your code here\r\n\r\nconsole.log(\"The value of + x is: \" + x + \" (x should be 7)\");\r\n```\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L14 - moving memory challenge4_markdown_instruction: "# Moving Memory + - Challenge 4\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar + x = 2;\r\n// your code here\r\n\r\nconsole.log(\"The value of x is: \" + x + + \" (x should be 8)\");\r\n```\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L14 - moving memory challenge5_markdown_instruction: "# Moving Memory + - Challenge 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar + x = 2;\r\nvar y = 3;\r\nvar z = 0;\r\n// your code here\r\n\r\nconsole.log(\"The + value of x is: \" + x + \" (x should be 3)\");\r\nconsole.log(\"The value + of y is: \" + y + \" (y should be 2)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong>(click + to expand)</summary>\r\nSince this one requires you to change the value of + two variables you need to be careful about which one you change first, since + its new value will affect the next lines of code.\r\n<p></p>\r\nYou can also + take advantage of the fact that since `z` is not used as a display value, + you can use it as a temporary holding ground for one value while you change + another.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L14 - moving memory challenge6_markdown_instruction: "# Moving Memory + - Challenge 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar + x = 5;\r\nvar y = 11;\r\nvar z = 4;\r\n// your code here\r\n\r\nconsole.log(\"The + value of x is: \" + x + \" (x should be 2)\");\r\nconsole.log(\"The value + of y is: \" + y + \" (y should be 6)\");\r\nconsole.log(\"The value of z is: + \" + z + \" (z should be 8)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong> + (click to expand)</summary>\r\nThis one requires you to be a little clever. Think + about setting the value of one variable that you could then use to easily + set the value of the other variables. Then the trick is to figure out how + to use the variables you've been given to make that useful value.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + CSPU5_U3L15 - Add reset button to UpDown app_markdown_instruction: "# Add a + Reset Button\r\nIn most apps you want to provide a way to start over. \r\n\r\nTo + do this without having the user quit and restart your app, you need to add + code to **reset variables and text displays to initial values** so the app + can effectively start over.\r\n\r\nWe've **added a button** to the \"gameOverScreen\" + in the *Count Up/Down App* and **added an empty event handler** for it. \r\n\r\nRight + now clicking the \"start over\" button does nothing. You will write code to + make it work.\r\n\r\n\r\n# Do This:\r\n**Add code to the startOverButton event + handler to reset the app**. <img src=\"https://images.code.org/cb1569accb6a370d2258b5b14d624424-image-1446126849891.gif\" + style=\"width: 150px; float: right;\">\r\n\r\nThe app should work like the + animation shown to the right. **Notice** that when the \"start over\" button + is clicked it goes back to the main screen and the count has been reset to + 0. \r\n\r\nThe code should:\r\n\r\n* Set the screen to the gamePlayScreen.\r\n* + Set the count variable to 0.\r\n* Set the correct text label on the gamePlayScreen + to show the count is 0.\r\n\r\nOnce you get it to work, move on." + CSPU5_U3L15 - DEMO up down count practice app_markdown_instruction: "# All + the Basics You Need\r\n\r\n<img src=\"https://images.code.org/abb09baa0b6ccc24ff141590c5b667c3-image-1446417655965.gif\" + style=\"float:right; width: 150px\"> When you close these instructions, you'll + get to play a little bit with the very simple app (shown at right) to demonstrate + the basics of concepts involved in making the clicker game. We'll call it + the **Count Up/Down App**. Yes, it's a boring \"game,\" but it has all the + pieces of a more sophisticated game.\r\n\r\nThis app demontrates a few new + concepts. We'll step through each one, one at a time, explaining how each + thing works. Along the way, we'll also encounter some common challenges, + and learn how to solve them.\r\n\r\n# Do This:\r\n* Keeping clicking the up + arrow until something happens (something besides the number increasing).\r\n* + Start over.\r\n* Click the down arrow until something happens (something besides + the number decreasing).\r\n* Start over.\r\n\r\nOnce you think you've seen + all the behavior click Finish to see the first part of how this is done.\r\n\r\n" + CSPU5_U3L15 - Debug forget to update var on reset in UpDown app_markdown_instruction: "# + Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common + mistake** has been introduced into the code.\r\n\r\nIt's a tricky one to + find because at first it looks like everything is okay.\r\n\r\n# Do This:\r\n\r\n* + **Run the program.**\r\n\r\n* **To see the bug:**\r\n * Click the up or down + arrow until you get to the \"gameOverScreen.\"\r\n * Click \"start over.\"\r\n + * Click the up or down arrow again... what the?\r\n \r\n* **Look at the code + and fix the problem.**\r\n\r\n* **Read about the common mistake** by expanding + the area below.\r\n\r\n* **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...forgetting + to reset <i>everything</i> you need to actually start over.</big></strong><br><br>\r\nFrequently + to actually reset you need to set a few variables back to initial values <i>and</i> + update all the UI components, especially those that rely on those variables, + so they reflect the new values.<br><br>\r\n\r\nAnother common mistake shown + here is setting the text of a label to \"0\" rather than the value of the + count variable. For example, these two lines of code are a little dangerous:<br><br>\r\n<pre>\r\ncount + = 0;\r\nsetText(\"countDisplayLabel\", 0);\r\n</pre>\r\n\r\nTo be safe, if + a label is supposed to display the value of a variable, you should always + use the variable <i>instead of hard-coding numbers</i> as a check on yourself. The + general rule of thumb is: never hard-code a value instead of using a variable + that holds the value you need to show.<br><br>\r\n\r\n<b>A common strategy</b> + for handling this is to put everything you need to reset the app into a function + which you can call at both the beginning of your program, and from other screens + later on. For example:<br><br>\r\n\r\n<pre>\r\nfunction resetAll(){\r\n count + = 0;\r\n setText(\"countDisplayLabel\", count);\r\n setScreen(\"gamePlayScreen\");\r\n}\r\n</pre>\r\n\r\nThen + in some other code like a button event handler you can just call your reset + \r\nfunction:<br><br>\r\n\r\n<pre>\r\nonEvent(\"startOverButton\", \"click\", + \r\nfunction() {\r\n <span style=\"background-color:yellow\">resetAll();</span>\r\n});\r\n</pre>\r\n\r\n</details>" + CSPU5_U3L15 - Debug if never triggers in UpDown app_markdown_instruction: "# + Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common + mistake** has been introduced into the code.\r\n\r\nWe've changed the app + so that it counts up and down by 3 rather than by 1.\r\n\r\n# Do This:\r\n\r\n* + **Run the program.**\r\n\r\n* **To see the bug:**\r\n * Click the up or down + arrow trying to get to the game over screen.\r\n * It should be impossible + to get to the game over screen.\r\n \r\n* **Look at the code and fix the problem.**\r\n\r\n* + **Read about the common mistake** by expanding the area below.\r\n\r\n* **Once + you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...the + condition you're checking in your `if` statement is actually impossible to + reach.</big></strong>\r\n<p>\r\nThis problem was probably easy to see here, + but in practice <b>logic errors</b> like this can be devilish to track down. + It's especially hard because the program gives you no hints that anything + is wrong - it is syntactially a correct program. The computer cannot tell + ahead of time whether your `if` statements will ever be true. So you need + to trace through the logic of your program step by step to try to figure out + why something's not happening that you expect should have happened.\r\n</p>\r\n\r\n</details>" + CSPU5_U3L15 - Debugging Simple If-statements =v==_markdown_instruction: "# + Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA **very common + mistake** has been introduced into the code. It's one that vexes early programmers, + but we're sure you'll find it.\r\n\r\n# Do This:\r\n\r\n* **Run the program.**\r\n\r\n* + **To see the bug:**\r\n * Click the up arrow just once.\r\n * Restart the + program.\r\n * Click the down arrow just once.\r\n \r\n* **Look at the code + and fix the problem.**\r\n\r\n* **Read about the common mistake** by expanding + the area below.\r\n\r\n* **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<br><br>\r\n<strong><big>...using + `=` instead of `==`</big></strong>\r\n<p>\r\n<b>Yup,</b> we told you this + is a common mistake! And it's an easy one to make.\r\n</p>\r\n<p>\r\nRemember + that the single `=` sign does assignment and it actually *also* evaluates + to true. This means that if you stick it in an `if` statement, that `if` + statement will <i>always</i> be true.\r\n</p>\r\n<p>\r\nOne strategy to avoid + this mistake is to **read code aloud in your head** and don't even use the + single word \"equal\":\r\n<li> think **\"gets\"** every time you see `=`</li>\r\n<li> + think **\"equal-equal\"** every time you see `==` </li>\r\n</p>\r\n<p>\r\nIf + you get in the habit of thinking that way, these mistakes are easier to catch. For + example you'd see this:<br>\r\n`if (count = 20)`<br>\r\nand read:<br>\r\n<i>\"if + count gets 20\"</i> ...and know that that doesn't make sense.\r\n</p>\r\n\r\n<p></p>\r\n</details>\r\n\r\n" + CSPU5_U3L15 - Simple If-statements in UpDown App_markdown_instruction: "# Add + Your Own *if* Statement\r\n\r\nIn most apps you want to make decisions based + on the state of some data you're keeping track of in the app. \r\n\r\nWe've + **modified** the *Count Up/Down App* to add another screen. When the count + reaches certain values, we'll switch screens. In the code you'll see an + `if` statement has been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n + * **If** the value of `count` is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img + src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" + style=\"width: 150px; float: right\">\r\n\r\n# Do This:\r\n**Add an `if` statement + so that when counting down the app changes screens when the count reaches + -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what + happens when the `if` statement is triggered.\r\n* **Study the `if` statement** + for the up arrow button to see how it works.\r\n* **Add an `if` statement** + to the down arrow event handler:\r\n\t* **If** `count` is equal to **-5, then** + set the screen to the \"gameOverScreen.\"\r\n* **Goal:** Once you're finished, + clicking the down arrow in the app should work like the animation shown to + the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click + to expand]</summary>\r\nThere is a subtle challenge here that you need to + set the text of the label on the <i>gameOverScreen</i> when you change screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> + Your code can call `setText` for any UI element, on any screen, at any time + - even if the element isn't on the screen that's currently showing.\r\n</details>\r\n\r\n" + CSPU5_U3L15 - add code to make count down work_markdown_instruction: "# Make + Count Down Work\r\n\r\n<img src=\"https://images.code.org/0044a46a27f7af5da74daeae8de021f7-image-1446063781449.gif\" + style=\"float: right; width: 200px\">You now know enough about using global + variables (and some of the problems you might run into) to try it yourself.\r\n\r\nLet's + start with an easy task. Right now clicking the up arrow works as expected; + **clicking the down arrow does not**. So...\r\n\r\n# Do This:\r\n**Make the + count go down by 1 every time the down arrow is clicked**\r\n\r\n* Study how + the up arrow works, and use it as an example for writing the code for the + down arrow.\r\n* Add and modify the code so that when the down arrow is clicked + the count goes down.\r\n* When you're done the app should work like the animation + shown to the right.\r\n* HINT: Don't forget to set the text of the label.\r\n\r\n" + CSPU5_U3L15 - count upDown bug forget to set text_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a bug that doesn't produce an error. + It just doesn't do what's expected. The reason is a common mistake that + all programmers make.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To + see the bug:**\r\n * Click the up arrow about 5 times.\r\n * Click the down + arrow about 10 times.\r\n * Click the up arrow again.\r\n* **Look at the code + and fix the problem.**\r\n* **Read about the common mistake** by expanding + the area below.\r\n* **Once you've fixed the issue, move on.**\r\n <p>\r\n\r\n</p>\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...forgetting + to update the display after changing something in the program</big>\r\n\r\n\r\n<h1> + Misconception Alert - Changing a Variable Doesn't Change the Display</h1>\r\n\r\nA + common misunderstanding about variables and displaying them is to think that + a text label that's displaying a variable will change when the variable changes. + NO. A text label is just \"dumb\" container for text. It's similar to a + variable itself in that it won't change unless you explicitly tell it to.\r\n<p></p>\r\n<h1>Concept: + Separation of Program Data from How It's Viewed</h1>\r\nMaintaining variables + and program data is a **different task** from maintaining the display of the + app. Your program could actually run without updating the display at all + - it would still be working behind the scenes; it just wouldn't be very fun + or interesting to use.\r\n<p></p>\r\n</details>\r\n\r\n\r\n" + CSPU5_U3L15 - count upDown bug logic error wrong update_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a few different bugs. Find them and squash + them!\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n + * Click the up arrow exactly twice.\r\n \t* Restart the program and do this + a few times - you'll notice nothing happens the first time you click.\r\n + * Click the down arrow several times.\r\n* **Look at the code and fix the + problem.**\r\n* **Read about the common mistake** by expanding the area below.\r\n* + **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...updating + the wrong thing in the wrong event handler.</big>\r\n<p></p>\r\nThere are + two common mistakes here:\r\n<p></p>\r\n1. Mixing up which event handler should + do what.\r\n<p></p>\r\n2. Updating the display **before** any change is made + to the underlying data of the program. \r\n\tThis can make the app seem oddly + out of sync where each event triggers an update to the display that reflects + the **last** thing done, not the current thing.\r\n<p></p>\r\n</details>" + CSPU5_U3L15 - count upDown bug var not created globally_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a few different bugs that are related + to the same problem.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To + see the bug:**\r\n * Click the up arrow several times.\r\n * Click the down + arrow.\r\n* **Look at the code and fix the problem.**\r\n* **Read about the + common mistake** by expanding the area below.\r\n* **Once you've fixed the + issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read about the + common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...thinking + you're referencing a global variable when you're not.</big><br>\r\n\r\nA + common mistake is basically a syntax/spelling error. These mistakes can be + really tricky to work out because you *think* you know what you wrote, but + the computer doesn't see it that way :)\r\n<p></p>\r\n</details>\r\n\r\n\r\n" + CSPU5_U3L15 - global var example count up_markdown_instruction: "# Using Variables + in Apps!\r\n<img src=\"https://images.code.org/f156f8d8524c3c0316e4db394e331bdc-image-1446060829590.gif\" + style=\"float: right; width: 200px;\">\r\nThe example program here has a small + portion of the *Count Up/Down App* written. Right now, what the app should + do is shown in the animation to the right.\r\n\r\n# Important Concept!\r\n\r\nThis + small functionality **demonstrates an important concept** - how to create + a variable in the app and update it when an event occurs. It may seem fairly + straightforward but there are some common misconceptions that we want to alert + you to.\r\n\r\n# Do This: Misconception Investigation\r\nOver the next few + levels you are going to do a small investigation of two apps that do almost + the same thing but *one works as expected* and *one with a bug* that demonstrates + an important concept about using variables in apps. Here is what you'll + do:\r\n\r\n1. **Run this app, which works properly.**\r\n * Study the code + until you think you understand what's happening.\r\n * Pay attention to the + code that handles the up arrow being clicked.\r\n\r\n2. **Run the app on the + next screen, which has a bug.**\r\n * On the next screen we show you almost + the same app, but with a subtle problem.\r\n * See if you can spot the difference + and fix it.\r\n\r\n3. **Report what you found!**\r\n * We'll ask you to report + what you found. It's not a quiz. You can go back and forth until you spot + the problem, but you should find it and be able to write what it is.\r\n" + CSPU5_U3L15 - mini clicker update score_markdown_instruction: "# Using Global + Variables\r\n\r\nYou'll now look at a version of the clicker game. We've + set up the basic functionality to move the apple around the screen, and have + __created a global variable to keep track of the score.__\r\n\r\n# Do This:\r\n__Add + code to update the score when the apple is clicked.__ Remember that you'll + have to update both the global variable _and_ the label text!\r\n\r\n<img + src=\"https://images.code.org/001640fd24fc487af534ab769ed196e2-image-1446136596261.gif\" + style=\"width:200px\">" + CSPU5_U3L15 - practice with setText_markdown_instruction: "# Changing Elements + on Screen \r\n\r\nThere's another way to display text in your app besides + `console.log` and `write`. \r\n\r\nThere is a command called `setText` which + will **change the text of a component on screen** given its id. This is a + very powerful technique and one that you will use a lot. Here's what it looks + like in action....\r\n\r\n<img src=\"https://images.code.org/3e5dd320801720d5c62a49146d9ee3d2-image-1446056202170.gif\" + style=\"width: 500px\">\r\n\r\nLet's do a **very simple** example of using + `setText`.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/5fc22aef5e8f5161f95a2507c1ec006b-image-1446056758249.gif\" + style=\"float: right; width: 175px; border: solid 1px #AAAAAA\">\r\n* **Run + the code** in the app.\r\n \r\n Look at the code for the \"upArrow\" event + handler and how it sets the text of the label.\r\n \r\n* **Modify the code.**\r\n + \r\n When the down arrow is clicked, set the text of the label to something + else.\r\n\r\n* **GOAL:**\r\n * Your only goal is to successfully use `setText` + in this example app.\r\n * The app should do something similar to the animated + example at right.\r\n\r\nOnce you've got it functional, click Finish to move + on.\r\n \r\n\r\n" + CSPU5_U3L15 - variable scoping problem debugging_markdown_instruction: "# Debugging + Problem!\r\n\r\n**Uh oh!** The code here is subtly different from the one + in the previous example and **now there is a problem**.\r\n\r\n# Do This:\r\n\r\n* + **Run the app** and try it to see the problem. \r\n* **See the error.**\r\n + * Note that **NaN** stands for \"Not a Number\" - why would it say this?\r\n* + **Note the difference** between this broken version and the previous one that + worked.\r\n* **Fix the problem** so that it works as before." + CSPU5_U3L15 click add lives_markdown_instruction: "# Tracking Lives\r\n\r\nIn + the game, the number of lives starts at 3 and decrements by 1 every time the + background image is clicked. Add this functionality to your game!\r\n\r\n# + Do This:\r\n- __Add your variable to keep track of lives.__\r\n- __Add a click + handler for the background image.__ _ID: \"background\"_\r\n- __When the background + is clicked, decrement the number of lives by 1.__\r\n\r\n<img src=\"https://images.code.org/79f1352aebb2e40c302d1900aacd31f4-image-1446138180044.gif\" + style=\"width:200px;\">" + CSPU5_U3L15 full clicker app_markdown_instruction: "# Make Your Own \"Clicker\" + Game\r\nYou will be creating your own “clicker” game similar to the Apple + Grabber game you worked on in this lesson. \r\nThe general object of the game + is to click on an element that jumps around every time you click it. You will + pick your own theme and decide what the rules are and how to keep score.\r\n\r\n** + Your Main Tasks Are To:**\r\n\r\n * Pick a theme for your game and add appropriate + images and styling.\r\n * Add variables to track some data during gameplay.\r\n + * Add code to event handlers to update the variables and display appropriately.\r\n + \r\n**See Activity Guide for Requirements**\r\n\r\nThere is a full activity + guide and rubric for this project. You can find a link to it in the student + resources section for this lesson. Or ask your teacher for it.\r\n \r\n<img + src=\"https://images.code.org/146107536c50b4a3317f3ebbe2e66f37-image-1446418612319.png\" + style=\"float: right; width: 300px\">\r\n** Template **\r\n\r\nThis level + is a template for the app. You should **run it to see what it does** right + now. You will modify *this* template, both the design elements and the code, + for your project.\r\n\r\nThe template has 4 screens and some basic navigation + functionality and event handlers set up for you. The game play screen uses + the images from the Apple Grabber game, but you should replace these with + images related to your chosen theme.\r\n\r\n" + CSPU5_U3L15 spot the difference variable debugging_markdown_instruction: "Respond + to the following questions about your investigation into the bug with the + counting game. Feel free to go back and look at the game again (but do so + in another tab or be sure to click \"Submit\" to save your work!):\n\n- From + the user's perspective, what was the difference between the first version + of the game and the one with the bug?\n- From looking at the code, what specifically + was the difference between the two, and why is that an issue?\n- How did you + fix the bug?\n" + CSPU5_U3L16 - challenge say hi app_markdown_instruction: "# Introducing the *change* + Event\r\n\r\nDid you notice with the demo digital assistant that you could + just __type a question, hit 'enter', and the assistant would respond__? + Up until now you've been using the click of a button to trigger getting the + text from an input or text area.\r\n\r\nYou can use a new event type to get + this behavior: The __'change' event__ is triggered when the user hits 'enter' + in a text input after typing.\r\n\r\n\r\n<img src=\"https://images.code.org/7d1725b236471f8e2a0efed5870660da-image-1446071579670.32.36.png\" + style=\"width:350px;\">\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/f8f1f7ae18acbc570a367886bcd6ca88-image-1445976541574.gif\" + style=\"width:250px;\">\r\n- A __text input__ has been created for you that + asks for a user's name.\r\n- Attach a __'change'__ event handler to the + text input.\r\n- When the 'change' event triggers, __write the user's name + and a greeting__.\r\n" + CSPU5_U3L16 - chaserApp_markdown_instruction: "# Chaser Game\r\n\r\nYou now + have all the skills you need to make a simple \"chaser\" game. A chaser game + is just a game where an image runs away from your mouse.\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" + style=\"float: right\">\r\n\r\n# Do This:\r\n\r\n**Create a \"Chaser Game\"** + which includes the following components:\r\n\r\n* **Text** on the top of the + screen with a title or instructions for what to do.\r\n* **An image** that + \"runs away\" (moves randomly) based on some mouse event.\r\n\r\nOnce you + have the basic functionality down feel free to spend time adding more features + to your application.\r\n<br><br><br>\r\n\r\n" + CSPU5_U3L16 - chooseImages_markdown_instruction: "# Choosing Your Own Images\r\n\r\nThe + second parameter of the `image` command allows you to set the image to be + displayed. There are two ways to do this:\r\n1. Provide the URL of an image + on the web.\r\n2. Upload an image from your computer (by clicking \"choose...\").\r\n\r\n![](https://images.code.org/e726e56fd3e4c7cd4a0d58cba731a855-image-1444240440116.53.49 + PM.png)\r\n\r\n\r\n# Do This:\r\n\r\n* **Read the documentation for `image`** + for tips on how to find an image's URL and how to upload.\r\n* **Change the + image** to one you've found online or from your own computer.\r\n\r\n**NOTE:** + many images are bigger than the screen of your app, so it's likely you'll + need to add a `setPosition` command to get it on the screen sized the way + you want." + CSPU5_U3L16 - doubleQuotes_markdown_instruction: "# Importance of Double Quotes\r\n\r\nYou + may have noticed that the strings we've seen are **wrapped in double quotes**. + These double quotes **are not part of the string**. Instead this is how you + indicate that a sequence of characters **is a string and not the name of a + variable**.\r\n\r\nAs you start writing programs with strings **it is common + to generate errors from forgetting to place them in double quotes**. We're + going to generate some of those errors now so that we can recognize them more + easily later.\r\n\r\n![](https://images.code.org/89235457b9b9bf76ac4f8221cae5a62e-image-1445987270682.07.24 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **This program generates many errors** + because strings were not placed in quotes.\r\n* **Run the program** before + you change it to see the errors that are generated.\r\n* **Add double quotes** + around all the strings so that the program runs without errors.\r\n\r\n" + CSPU5_U3L16 - intro getText_markdown_instruction: "# Getting Text Input\r\n\r\nAs + we saw a user can now type inside of a text input whenever they want, **but + now we'll need a way to access that text**. In order to do that you'll need + to use the `getText` command, which you can now find in the **UI Controls** + tab.\r\n\r\n<img src=\"https://images.code.org/0c6774f2b6d33f8107ec2936102b1a10-image-1445533677192.58.24 + PM.png\" style=\"width: 150px;\">\r\n\r\nYou can use a `getText` command just + like a string within a `console.log` or `write` command. Just like with `setText` + you will refer to the UI element by its ID.\r\n\r\n![](https://images.code.org/c17e419301d0cfeebf7f0ccee13e415f-image-1445892504376.47.54 + PM.png)\r\n\r\n# Do This:\r\n\r\n* **Read the documentation ** for `getText`.\r\n* + **Add an event handler to the Submit button** that fires when your button + is clicked.\r\n* **Inside the event handler** place code that will **log the + name your user input to the console**.\r\n\r\n" + CSPU5_U3L16 - introSetPosition_markdown_instruction: "# How to Organize the + Code\r\nAs your apps get more complex you'll have to think about how to organize + your code so it remains readable and easy for you to locate things when debugging + any problems. We suggest the following convention which breaks the code into + 3 major sections:\r\n* **Top**: code for UI elements **and** any code for + positioning them.\r\n* **Middle**: code for event handlers.\r\n* **Bottom**: + code for any other other functions you've written. (We don't have any of + these yet.)\r\n\r\nSo if you have some existing code and want to insert a + `setPosition` command, you should place it after `button` but before `onEvent` + in the code, like this:\r\n\r\n<img src=\"https://images.code.org/ae17e62c077aa9698526371d22db1307-image-1448404255046.gif\" + style=\"width: 500px\">\r\n\r\n# Do This:\r\n\r\n<img src=\"https://images.code.org/3a834b8a4313e31a453525a69acda1f4-image-1444335250982.png\" + style=\"float: right; width: 175px\">\r\n\r\n* **Starter code** has been provided + which creates two buttons and event handlers.\r\n* **Insert** `setPosition` + commands for each button so they appear at the bottom of the screen (as shown).\r\n * + **Remember:** in an app screen 0,0 is the top left corner and you specify + a location by how many pixels from the left and how many down from the top + of the screen it is. The screen is **320 by 450 pixels**." + CSPU5_U3L16 - introStrings_markdown_instruction: "# Strings\r\n\r\nThe primary + data type we have used so far is **Numbers**. If we want to interact with + user-submitted text, however, we'll need to learn about a new data type called + a **String**. A string is a **sequence of ASCII characters**.\r\n\r\n**Example** + | **Rule**\r\n---|---\r\n`\"aString\"` | Strings **might** look a lot like + a variable name but there are **many differences**.\r\n`\"look at all these + spaces\"` | Strings can **contain spaces**.\r\n`\"$2 bills are the coolest\"` + | Strings can **contain special characters** (and even start with them).\r\n`\"11\"` + | Strings might **contain only digits**. This looks like a number but it is + really 2 ASCII characters.\r\n`\"\"` | Strings might **contain no characters**.\r\n<br>\r\nYou + can **store strings in a variable just like a number**. In this example the + variable name is `str` but you should choose a name that is **descriptive + and meaningful**.\r\n\r\n![](https://images.code.org/56e6b30a51556aa3b516e0a49b51cbeb-image-1445894334432.18.40 + PM.png)\r\n\r\n**Combining Strings:** often you will want to combine multiple + strings to create one longer string. You can do this with the `+` operator. + The formal name of this process is **concatenation**.\r\n\r\nThe program you're + about to see is a very simple Mad Libs app that uses strings that are created + inside the program and saved inside of variables. These strings are then + **concatenated** with other strings to create a Mad Lib.\r\n\r\n# Do This:\r\n\r\n* + The input words of this Mad Lib are **currently set to the empty string**.\r\n* + **Add your own input words** and run the program to generate the Mad Lib." + CSPU5_U3L16 - newEventTypes_markdown_instruction: "# New Elements and Events: + New Event Types\r\nYou just wrote your first program that **does not include + the turtle**! Moving forward we're going to focus much more on programming + apps that use User Interface (UI) elements, but we'll keep the turtle library + around in case you want to use it.\r\n\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 + AM.png\" style=\"float: right\">\r\n\r\n**New Events**: You may have noticed + that the `onEvent` block has a pull-down menu for the event **type** (see + right).\r\n\r\n# Do This:\r\n\r\n* **Experiment** with **each of the different + types of mouse events** by selecting from the list. You can also read about + them in the documentation.\r\n\t* click\r\n * mousemove\r\n * movedown\r\n * + mouseup\r\n * mouseover\r\n* **Choose** the mouse event type you like most + and change your event handler to use it.\r\n* **Note:** There are some events + that capture keystroke events. These are interesting, but they do not work + easily with buttons. We'll stick to mouse events for now, and get to keys + later.\r\n\r\n**Be sure** to experiment with each one. The next exercise + will quiz you on which one is which.\r\n\r\n" + CSPU5_U3L16 - outputWithTextArea_markdown_instruction: "# Generating Text Output\r\n\r\nSo + far we've been outputting our messages to the console, but now we'd like + to display them in the app. In order to do so we're going to be using a new + UI element called a `textArea`. You can use `setText` with a `textArea` just + like you would with a `textLabel`.\r\n\r\n![](https://images.code.org/45e6b6cdb1ca87f53cf1d6bba97cb812-image-1445977693641.24.43 + PM.png)\r\n\r\nIf we want to combine user input with default text we can do + so with **string concatenation**. Together with a `textArea` we can use this + ability to compose longer messages based on user input.\r\n\r\n# Do This:\r\n\r\n* + **Add a `textArea`** to your app and give it a descriptive and meaningful + ID.\r\n* **Create a variable inside your event handler** called `userMessage` + to hold the full message that will be sent to the user.\r\n* **Use string + concatenation** to compose a message from the user input.\r\n* **Use `setText`** + to place your `userMessage` inside the `textArea` you created.\r\n\r\n<img + src=\"https://images.code.org/193af3e0c993dbf0b7af9c571ec5f56d-image-1445977696957.27.08 + PM.png\", style=\"width:250px;\">" + CSPU5_U3L16 - setPosition to fixed location_markdown_instruction: "# Using + setPosition\r\n\r\n<img src=\"https://images.code.org/b664824ffeb3347b2e0b6d12447b4e8b-image-1476891499229.gif\" + style=\"width: 150px; float: right;\">\r\n\r\n**Now you try it** - use [setPosition](#triggercallout=setPosHover) + to **move the button to the middle of the screen when clicked**. We've set + up a small project for you with a button (id: `moveBtn`) already added in + design mode.\r\n\r\n1. Add an `onEvent` block\r\n2. Drag a `setPosition` command + into the event handler function\r\n3. Set the x,y coordinate so that the button + ends up in the middle of the screen.\r\n * You'll need to experiment a little + bit to find coordinates that work for you.\r\n * Hover over the screen to + find a good starting point.\r\n\r\n**Tip**: when you see a command that is + linked like this: [setPosition](#triggercallout=setPosHover) click it! -- + it will show you other hints.\r\n\r\nOnce you've got the button moving to + the middle of the screen click Finish to move on to the next challenge.\r\n" + CSPU5_U3L16 - setPosition to move button_markdown_instruction: "<img src=\"https://images.code.org/dc1f942b805f07b3581c678ed1669a27-image-1476892595302.gif\" + style=\"float: right\">\r\n# Using setPosition and randomNumber\r\n\r\n<img + src=\"https://images.code.org/a501391fac0c396a197aaaf357e73972-image-1476892143359.gif\">\r\n\r\n**Now + you try it** - instead of using a fixed value, you use [randomNumber](#triggercallout=showRand) + to set the x and y coordinates for setPosition. Now you'll have to chase + the button all over the screen!\r\n\r\n* Make it so that the button could + jump *anywhere* on the visible screen each time it's clicked.\r\n* Extend + it: if you want to get really nuts, you could add back in the *width* and + *height* parameters of setPosition and make the size of the button *also* + change randomly with each click!\r\n\r\nOnce you've got the button jumping + around the screen. Click **Finish** to move onto the next level.\r\n" + CSPU5_U3L16 - singleSetPosition_markdown_instruction: "# Moving and Sizing + Buttons\r\n\r\nAn important component of designing intuitive and visually + appealing user interfaces is the location of the elements on the screen. Using + the `setPosition` command (now added to the Toolbox) you can move and set + the size of user interface elements.\r\n\r\n![](https://images.code.org/c3e42223cbcb096f992d758973d09f63-image-1444664597665.42.48 + AM.png)\r\n\r\n**NOTE:**\r\n * If you only want to set the size you can use + the `setSize` function which looks like this:\r\n\r\n ![](https://images.code.org/cb742ecf96c04477db0f8361ad5dcdaf-image-1448924017288.png)\r\n\r\n + * If you *only* want to set the position *without* changing the size of the + element, you can omit the *width* and *height* parameters from the `setPosition` + function. To do that, you need to switch into text mode, like this:\r\n\r\n + <img src='https://images.code.org/5b565ef5b74b5cd657ba15c67be92b0d-image-1448924356253.gif' + style=\"width: 400px\">\r\n\r\n# Do This:\r\n\r\n* **Read the documentation** + for `setPosition`.\r\n* **Starter code** has been provided which creates a + single button.\r\n* **Move the button to the middle of the screen** using + `setPosition`, as in the image below. (You may need to experiment a little + bit with the x,y location to get it right).\r\n* **Remember:** in an app screen + 0,0 is the top left corner and you specify a location by how many pixels from + the left and how many down from the top of the screen it is. The screen is + **320 by 450 pixels**.\r\n\r\n![](https://images.code.org/62840468826ce153d3d0d80bca303827-image-1444662614963.10.05 + AM.png)\r\n\r\n" + CSPU5_U3L16 - text labels_markdown_instruction: "# New Elements and Events: + Text Labels\r\n<img src=\"https://images.code.org/20d50fd324908fc48633e1325cc37603-image-1444662791509.png\" + style=\"float: right\">\r\nThe UI controls toolbox contains an element called + `textLabel`. A text label is what it sounds like: plain text that you can + put in your app. Even though it's just plain text you can still move and + resize it using `setPosition`, and you can attach event handlers to it as + well.\r\n\r\n**NOTE:** resizing a text label does not change the font size + of the text. We'll learn how to do that later. \r\n\r\n# Do This:\r\n\r\n* + **Read the documentation** for `textLabel`<img src=\"https://images.code.org/fe2ce5f335fd124dc3052270ca0af31f-image-1444336014658.gif\" + style=\"float: right; width: 150px\">.\r\n* **Modify** the program so that + your button is now a text label. Just as before, it should move randomly around + the screen when clicked. You can make the text whatever you like.\r\n* **Tip:** + If you reuse your button's ID you'll only need to change a single line of + code to make your program work. Once you have your program working **choose + a descriptive and meaningful ID** for your text label and make the appropriate + changes in the event handler.\r\n\r\n<br>\r\n<br>\r\n<br>\r\n\r\n" + CSPU5_U3L16 - textInput getText write_markdown_instruction: "# Text Input Elements\r\n\r\nSo + far we've been using `promptNum` as a simple way to get a number as input. + Now that we know a little about strings we are going to create **user interface + elements that users can use to submit text (i.e. strings) instead**. The first + and simplest example is `textInput` which you can find in Design Mode.\r\n\r\n<img + src=\"https://images.code.org/4436a3ba2a7596c7724380c7c82d5c29-image-1445533665376.36.19 + PM.png\" style=\"width: 100px\">\r\n\r\n# Do This:\r\n\r\n* **Add two text + input elements to this program**, one for the name and one for the age of + the user.\r\n* **Give your text input elements descriptive and meaningful + IDs**.\r\n* **In Design Mode** set their default text to prompt the user for + their name and age.\r\n* **Compare your app to the example below**.\r\n\r\n<img + src=\"https://images.code.org/865403f21bdb27246caeb31afa7c0b5f-image-1445902764676.39.11 + PM.png\" style=\"float:left; width:200px;\">\r\n<br>" + CSPU5_U3L16 - toUpper_markdown_instruction: "# String Capitalization\r\n\r\nIf + you want to change the capitalization of a string you can do so with two new + functions\r\n\r\n![](https://images.code.org/d8523cdae7c07b34baa1c61809bb80d4-image-1445980407200.42.31 + PM.png)\r\n\r\nNote that the syntax is similar to `console.log` . This is + because `toUpperCase` really only makes sense as a command when you are using + a **string**, just as `log` only makes sense when you are talking about the + console. This function **evaluates to a new string in which all characters + have been made uppercase / lowercase**. If you want to update the value in + your original variable you'll have to do so explicitly, as in\r\n\r\n```\r\nvar + myString = \"lower case for now\";\r\nmyString = myString.toUpperCase();\r\n```\r\n\r\n# + Do This:\r\n\r\n* **Update your application so that the user's name is printed + in UPPERCASE**.\r\n\r\n<img src=\"https://images.code.org/26d8ffb7c631c1c510f781b5bf46d494-image-1445980322936.04.55 + PM.png\", style=\"width:250px;\">" + CSPU5_U3L16 - use images_markdown_instruction: "# New Elements and Events: + Images\r\n\r\n<img src=\"https://images.code.org/a84297658be45dc78bc401d387d10436-image-1444663322356.21.25 + AM.png\" style=\"float: right; width: 120px\">\r\nImages make applications + more visually pleasing and interactive. You can add images to your application + using the `image` command. For now, just add an `image` element to your app + (the default image link is the Code.org logo) and don't worry about choosing + a unique image just yet. We'll do that in the very next exercise!\r\n\r\n\r\n# + Do This:\r\n<img src=\"https://images.code.org/8df7b1b56c71de7ad9770646bd7f8792-image-1444336140877.gif\" + style=\"float: right; width: 250px\">\r\n\r\n* **Modify** the program - change + the `textLabel` to an `image` so that the image moves randomly around the + screen based on the event you chose.\r\n* **Tip:** If you reuse your text + label's ID you'll only need to change a single line of code to make your + program work! Once you have your program working though, it's probably a + good idea to choose a descriptive and meaningful ID for your image and make + the appropriate changes in the event handler.\r\n\r\n<br>" + CSPU5_U3L16 Mad Lib Clear Input_markdown_instruction: "# Play It Again and + Again!\r\n\r\nWhen the user clicks the \"Play again\" button, the first screen + should reset and not show the user's previous text.\r\n\r\n# Do This:\r\n- + When the \"Play again\" button is clicked, __clear the text from each text + input__ on Screen 1.\r\n- __Free play:__ Add images, or more How-to steps + for your Mad Libs, and invite others to play!\r\n\r\n<img src=\"https://images.code.org/a49fe3eba4d2d2fb03e45d15aad53dbf-image-1450143105779.16.14 + Mad Libs play again button.gif\" style=\"width:200px\">\r\n\r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nTry + setting the text to the empty string: `\"\"`.\r\n</details>\r\n" + CSPU5_U3L16 Mad Lib Demo_markdown_instruction: "# Getting Text from the User\r\n\r\nUp + until now, the event-driven apps you have created responded to the user clicking + an element or typing a number when you used `promptNum`. __What if we want + the user to provide _text_ instead of a number?__ You can probably think of + many apps and websites that ask you to provide text in order to do something.\r\n\r\nIn + programming, we have to represent text in a specific way to distinguish it + from other words in our code, such as variable names. But we'll cover that + later...\r\n\r\nAt the beginning of class you created a Mad Libs on paper, + which takes user input in the form of nouns, adjectives, and verbs to create + a unique \"How-to\" manual. You'll be translating your own Mad Libs How-to + into an app in this lesson.\r\n\r\n# Do This:\r\n\r\n- __Play with this Mad + Libs app__ a couple of times to see a digital version of the paper game. \r\n- + __Think about how the final text is created__ based on the input from the + user. How would you describe in words the algorithm for creating it?" + CSPU5_U3L16 Mad Lib Student Setup_markdown_instruction: "# Back to Mad Libs: + Design Your App\r\nNow that you've had some practice getting user text and + making new strings with it, you're ready to turn your How-to Mad Libs into + an app. To get started, you'll set up the layout. There are two main screens:\r\n\r\n__Screen + 1: Collect User Input__ \r\n- On this screen, you'll use __text labels__ + and __text input__ design elements to set up the different words you want + the user to provide.\r\n- A __Next__ button takes you to Screen 2 to view + the full Mad Libs.\r\n\r\n__Screen 2: View Mad Libs__ \r\n- On this screen, + you'll use the __text area__ design element to create the space where the + user's completed Mad Libs will be displayed.\r\n- A __Play again__ button + takes you to back Screen 1.\r\n<br>\r\n<br>\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Screen + 1:</strong>\r\n</td>\r\n<td>\r\n<strong>Screen 2:</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/ccea092b516047dff82fafa50b47bcc7-image-1447974038265.00.17 + PM.png\" style=\"width:150px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/0f832e6314ad98170a3cddb317d26e41-image-1445898480304.27.45.png\" + style=\"width:151px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n# + Do This:\r\n\r\n- Create the two screens for your app, including the design + elements in each one.\r\n- Requirement: Request at least 3 separate words + from the user on Screen 1.\r\n- Create the event handlers for the __Next__ + and __Play again__ buttons to respond to clicks.\r\n- Use `setScreen` in the + event handlers to get the screen navigation working.\r\n" + CSPU5_U3L16 Mad Lib getText_markdown_instruction: "# Make It Mad! Add the User's + Text to Your Mad Libs Outline\r\n\r\nNow that you have your Mad Libs outline + appearing in the text area, it's time to __incorporate the user's text__ + to make your Mad Libs come alive.\r\n\r\n# Do This:\r\n\r\n- Did you pick + good ID names for your text input elements? Update them now if you didn't!\r\n- + When the __Next__ button is clicked, __get the user's text from the text + inputs on Screen 1 and store each in a separate variable__.\r\n- Use string + concatenation to __incorporate the user's text into your Mad Labs string__ + before updating the text area on Screen 2. \r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nUse + `getText` to get the text from each of the text inputs on Screen 1.\r\n</details>\r\n<details>\r\n<summary>**Should + I make local or global variables?**</summary>\r\nRemember that the decision + to create local variables or global variables is a question of _scope_. Where + will you need to access these variables in your program? If you are only using + the variables in the click callback function for the \"Next\" button, then + they can be _local_ variables in that function. \r\n</details>" + CSPU5_U3L16 Mad Lib setText_markdown_instruction: "# Update the Text Area with + Your Mad Libs Outline\r\n\r\nWhen figuring out how to make progress with a + program, it helps to break the problem down into smaller steps and test your + program incrementally. So rather than jumping straight to getting the user + input and __concatenating__ it with your Mad Libs outline, start first by + just making sure that you can get your Mad Libs outline to appear in the text + area when the __Next__ button is clicked on the first screen. \r\n\r\nBut + wait! If you just use `setText` and pass in the string of your Mad Libs outline, + it will look like the screen on the left where all the steps are smushed together. + You can use one or more newline characters, `\"\\n\"`, in your string to create + a line break in your text.\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Without + newlines</strong>\r\n</td>\r\n<td>\r\n<strong>With newlines</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n\r\n<img + src=\"https://images.code.org/24fb1385d6199cd52c6e1d3d11e547fc-image-1448404478181.png\" + style=\"width:201px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/3a627993f9e0e4a6d462c8a21b335058-image-1448404299215.png\" + style=\"width:200px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n\r\n# + Do This:\r\n\r\n- When the __Next__ button is clicked, you already switch + to Screen 2, but now you should also call `setText` on the text area on Screen + 2 to your Mad Libs outline. See the images above for one way to temporarily + handle the word placeholders.\r\n- Add in newline characters `\"\\n\"` in + your Mad Libs string to format it.\r\n\r\n<details>\r\n<summary>**Newline + Examples**</summary>\r\n<table style=\"width:100%; margin-left:25px;\">\r\n<tr>\r\n<td + style=\"vertical-align: text-top; border-right:1px solid #000\">\r\n\t**Example1:**<br/><br/>\r\n \r\n <samp>console.log(\"How + to Drive\\nStep 1.\");<br/><br/></samp>\r\n \r\n *will be displayed + as...*<br/><br/>\r\n \r\n <samp>How to Drive<br/>Step 1.<br/><br/></samp>\r\n \r\n *...on + your console.*\r\n</td>\r\n<td style=\"padding-left:20px;\">\r\n<samp>**Example2:**<br/><br/>\r\n \r\n var + step1 = \"Step 1: ...\";<br/>\r\n \r\n var step2 = \"Step 2: ...\";<br/>\r\n \r\n console.log(step1 + + \"\\n\" + step2);<br/><br/></samp>\r\n \r\n *will be displayed as...*<br/><br/>\r\n \r\n <samp>Step + 1: ...<br/>Step 2: ...<br/><br/></samp>\r\n \r\n *...on your console.*\r\n</td>\r\n</tr>\r\n</table>\r\n</details>" + CSPU5_U3L16 Mad Lib toUpper_markdown_instruction: "# Why Are You Yelling At + Me?! *toUpperCase* and *toLowerCase*\r\n\r\nThe main functionality of the + Mad Libs app is complete, but there are some finishing touches to add. The + user may type input with random letter capitalization, but the Mad Libs output + string should be consistently capitalized.\r\n\r\n# Do This:\r\n\r\n- Pick + one or more pieces of the user's input text to transform into \"yelling\" + or emphasize by __making it uppercase__ before displaying it.\r\n- For the + other pieces of the user's input text, __make it lowercase__ before displaying + it.\r\n\r\n<details>\r\n<summary>**Hint**</summary>\r\nRemember the rules + of updating variables! You can update a variable after first getting its current + value and then doing something with it. <br> Example: `song = song.toUpperCase();`\r\n</details>" + CSPU5_U3L18 comparison operators_markdown_instruction: "# Explore Comparison + Operators with Console.log\r\n\r\n**Your task:** Make each expression evaluate + to **true** by changing only the comparison operator.\r\n\r\nWe can easily + test the results of comparison operators with `console.log`. \r\n\r\n* Run + the code provided - see results in the console debug area below.\r\n* All + of the Boolean expressions currently evaluate to `false`.\r\n* **Modify the + code** so they all evaluate to `true`\r\n* **Change only the operator**\r\n\r\nExample:\r\n\r\n* + `(3 > 4)` evaluates to **false**...\r\n* Change it to `(3 < 4)` (*3 is **less + than** 4*) to make it **true*\r\n\r\n**HINT:** The workspace starts in text + mode because you might find that doing this in text mode is much easier and + faster than dragging out new blocks. You can flip back to block mode if you + like.\r\n" + CSPU5_U3L19 - fix the var name syntax error v2_markdown_instruction: "<!---\r\n# + Debugging Variables\r\n<img src=\"https://images.code.org/18cb0f3b0fc43def369a3329854edc2e-image-1447272068495.png\r\n\" + style=\"float: right; border: solid 1px black; width: 350px\">\r\n\r\nOne + of the most common errors that can happen when you try to run a program is + `Unknown identifer`.\r\nThis is just the computer trying to tell you that + it doesn't recognize something you wrote. Usually it's the name of a variable + or function that you're trying to write and there is a small misspelling.\r\n\r\n**The + computer doesn't hate you :)** It just needs everything to be exact so it + can understand what you're trying to get it to do.\r\n\r\n**App Lab** alerts + you to potential errors in two ways:<img src=\"https://images.code.org/329990c2e51e1e07a16d5e550cf766f0-image-1447272337465.gif\" + style=\"width: 350px; float: right; border: solid 1px black\">\r\n\r\n* Hover + your mouse over the yellow triangles or red squares next to line numbers in + the code to see what they say.\r\n* As usual, the Debug Console will also + tell you about any errors while your program is running. \r\n--->\r\n\r\n# + Do This:\r\nWe've given you some code with some errors in it. Look at the + error messages and try to figure out the problem.\r\n\r\n* **Run the program**.\r\n* + **Locate and fix the error**.\r\n\r\nWhen you get it right the output to the + console should look like this:\r\n\r\n![](https://images.code.org/9c7a8eb5db973f81eb2faa89713d4f30-image-1445477911014.png)\r\n\r\nAs + a reminder, App Lab gives you hints about errors in two ways: \r\n\r\n* Hover + your mouse over the yellow triangles or red squares next to line numbers in + the code to see what they say.\r\n* As usual, the Debug Console will also + tell you about any errors while your program is running. \r\n" + CSPU5_U3L19 - test reassignment of two vars_markdown_instruction: "# Variable + Reassignment - Part 1\r\n\r\nSo far we have only set a variable's value once. But + it's called a *variable* for a reason - its value can change (or vary) throughout + a program. This is useful and necessary for keeping track of things like a + score in a game.\r\n\r\nTo re-assign a value to a variable all you have to + do is maintain the mental model of what's happening:\r\n\r\n * Variables + are containers for information.\r\n * The `=` sign is an instruction to set + the value.\r\n * A series of assignment statements (see example to right) + is a list of instructions to execute one at a time - it's not a series of + equations that define the state of the world.\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/066db834ae289ac538609b68c6492c4a-image-1445944263895.png\" + style=\"float: right\">\r\n\r\n * **Make a prediction.**\r\n\r\n The code + on the following screen looks like what is shown at right. Study it and make + a prediction about what will happen when you run the code. What will the values + of `a` and `b` be at the end of the program?\r\n\r\n* **Add `console.log` + statements.** \r\n\r\n Prove it to yourself by adding `console.log` statements + at the end of the program to find out what the value of `a` and `b` are.\r\n + \r\n* **NOTICE:** in the code above, after the variable `a` has been created + using `var`, to change a variable's value, you only need to refer to the + variable by its name. The word `var` only needs to be used once - when the + variable is created for the first time. \r\n\r\n* It's a **common mistake** + to use `var` everytime you want to *use* a variable but just **remember `var` + means CREATE a new variable**. When you create a new variable it will lose + its old value. We'll look at errors related to this later.\r\n\r\n" + CSPU5_U3L19 - three basic ops of variables_markdown_instruction: "# Variables + Toolbox\r\nLet's get started with the most basic example of using and controlling + the computer's memory with variables. The toolbox has a couple of new commands + for working with variables.\r\n\r\nWe've given you some starter code that + does three things:\r\n<table>\r\n<tr>\r\n<td>\r\n<ol>\r\n<li>**Creates** a + variable called `score`</li>\r\n<li> **Assigns** the value *0* to `score`</li>\r\n<li>**Displays** + the value of the `score` to the console (see hint below about quotes) </li>\r\n</ol> + \r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/056a735a96a603e23768d66f0de32961-image-1445462590619.png\" + style=\"width: 350px\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n\r\n# Do This:\r\nYou're + going to add another variable, assign it a value, and then display it to the + console.\r\nUse the starting code as a model for what you need to create now.\r\n<img + src=\"https://images.code.org/72744382133081947777e67a5988d4ea-image-1445462803999.gif\" + style=\"float: right; width: 350px\">\r\n* **Create a new variable** by dragging + out the `var` block.\r\n* **Change the name of the variable** from the default + `x` to `lives` (see animation at right).\r\n* **Set the value of `lives` to + be 3**.\r\n* **Add** `console.log` **messages** to show the value of `lives`.\r\n\r\nThe + output in the debug console should look like this:\r\n \r\n <img src=\"https://images.code.org/6405a3ed95ca3125ea1b2c9ffbdffa94-image-1445349849482.png\" + style=\"border: solid 1px gray\">\r\n<details>\r\n <summary> Debugging Tip: + Displaying values of variables [click to expand]</summary>\r\n **NOTE: To + print the value of a variable you *should not* use quotes.**\r\n Notice + the difference between these two statements: <br>\r\n `console.log(\"score\")`<br>\r\n `console.log(score)`<br>\r\n It's + subtle but important:\r\n <br>\r\n <li>When `console.log` sees quotation + marks it thinks you want to print out the literal characters in the quotes.\r\n <li>When + `console.log` sees something **without quotation marks** it assumes you're + trying to print a variable, and it goes to retrieve its value and displays + that. </li>\r\n \r\n</details>" + CSPU5_U3L19 - variable reassignment challenge pt2_markdown_instruction: "# + Wrapping Up Variables - This is Not Math Class\r\n\r\nHopefully you now understand + the gist of working with variables. The major thing to remember is that every + time you see an `=` sign it means that you are instructing the computer to + set a variable to a new value. \r\n\r\n<img src=\"https://images.code.org/ecced8eb916809f66ac7d555a819c2a6-image-1447803015383.17.43.png\" + style=\"float: right\">\r\nThe example to the right is something that definitely + wouldn't make sense in math class, but you should be able to reason about + it as a piece of code. Because it's code, you can also **insert** statements + to display the value of variables as they change. You don't have to guess!\r\n\r\n# + Do This:\r\n* ** Make a prediction.** \r\n\r\n As usual you should **first** + look at the code given to you and reason about what it does. You should try + to predict what the value of `num` will be after all lines have executed.\r\n\r\n* + ** Insert 3 `console.log` statements.**\r\n\r\n Insert `console.log` statements + into the existing code to display each value of `num` immediately after it's + changed. (The animation below shows how to get started.)\r\n \r\n ![](https://images.code.org/0e425ce1a186d49d230395032f970913-image-1447802992249.19.24 + add console message.gif)\r\n \r\n* **Was your prediction right?**\r\n \r\n + After you figure out the answer, if your prediction was off, try to understand + why. Where was your misunderstanding?\r\n" + CSPU5_U3L19 - write var and string with same name v2_markdown_instruction: "# + Debugging Variables\r\n<img src=\"https://images.code.org/1363b1799cd0f70e383664b4c6359ef4-image-1445479475849.png\" + style=\"float:right; width: 200px\">There is a simple command called `write` + in the UI Controls toolbox that is a fast and easy way to display text in + the app itself. The way you use it is very similar to `console.log`. Let's + debug another problem only using `write` instead of `console.log`. \r\n\r\nYou + may have already run into this problem! But it's worth mentioning again. + To display the value of a variable you *should not* use quotes. Notice the + difference between these two statements - the comments next to each line explains + the differences:\r\n``` \r\n write(\"score\"); // will display the literal + characters s-c-o-r-e\r\n write(score); // will retrieve the value of score + and display it\r\n```\r\n\r\n# Do This:\r\n<img src=\"https://images.code.org/a0ff680a245dba5546183e07ebbeaef2-image-1447270477159.png\" + style=\"float: right; width: 250px\">To solve these problems you **should + only add or remove quotation marks**.\r\n* **Run the starter code**\r\n* **Locate + and fix the problems**\r\n\r\n**GOAL:** Make the app display what's shown + at right by only adding or removing quotation marks from the code given.\r\n" + CSPU5_U3L23 Chatbot Conditionals 1_markdown_instruction: "# Adding Intelligence + Using Conditionals\r\n\r\nSo far the digital assistant you created responds + with the same message no matter what the user types. Let's look at how to + make the digital assistant smarter. Let's work on creating a Movie Bot example + before returning to your digital assistant.\r\n\r\nIn the last lesson we learned + about `if`, `else-if`, and `else` statements. These allow us to make decisions. + In the digital assistant we want to make decisions based on keywords. **The + first keywords we want the Movie Bot to respond to are the movie genres: comedy, + romance, action, and horror. **\r\n\r\n**Note: ** Check out the flowchart + below to see the logic we are trying to add. The current portions of the diagram + that we are creating are <mark>highlighted in yellow</mark>.\r\n\r\n# Do This:\r\n\r\n* + **Run the code** to understand what it does.\r\n\r\n* **Add `else-if` statements** + to the `if` to check if the word the user typed matches **action, romance + and horror**. **Note:** Movie Bot will only understand input in the form + of \"comedy\" not \"Comedy\" or \"What is a comedy?\" \r\n\r\n* **Add an `else` + statement** to print a default answer for any other input.\r\n\r\n<img src=\"https://images.code.org/8ec655795042a2a3a22a85f0886f0d21-image-1446067226646.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/8ec655795042a2a3a22a85f0886f0d21-image-1446067226646.png\" + target=\"_blank\">Open diagram in a new tab</a>\r\n" + CSPU5_U3L23 Free Response Getting Started_markdown_instruction: "Siri is a + digital assistant built into Apple's iOS devices, including iPhones and iPads. + Watch the advertisement for Siri, below. \n\n<iframe width=\"637px\" height=\"375px\" + src=\"https://www.youtube.com/embed/8ciagGASro0\" frameborder=\"0\" allowfullscreen></iframe>\n\n<br/>\n__Reflect + on the prompts below:__ \n\n- What types of information does Siri respond + to in the video?\n- What do you think Siri is paying attention to in order + to create these answers?\n" + CSPU5_U3L23 Free Response Wrap Up_markdown_instruction: "Identify a global + problem that a NLP (Natural Language Processing) application could be used + to help solve. \n\n* Describe the problem.\n* Explain how you think a NLP + app could contribute to a solution.\n* Describe how the app would interact + with the user. \n* What would you name the app? \n\n" + CSPU5_U3L24 Chatbot Basic Conditionals_markdown_instruction: "# Digital Assistant + Project\r\n\r\n**Your Digital Assistant Project is back!** Now that you've + learned how to use conditional logic to control your program flow, it's time + to add functionality to the digital assistant you previously designed.\r\n\r\n# + Do This:\r\n\r\n* You should have already created a flowchart to design the + logic for your digital assistant. \r\n* **Use your flowchart to program your + digital assistant so that it \"intelligently\" responds to user input.**\r\n\t* + Feel free to make changes to your existing project in Design Mode, if needed.\r\n* + **Test your program thoroughly** to make sure your digital assistant responds + to user input appropriately.\r\n* Once you're done, **submit your project!**\r\n" + CSPU5_U3L24 Nested Conditionals 1_markdown_instruction: "# Adding *includes* + to the Movie Bot\r\n\r\nIf our Movie Bot is asked a question like \"What is + a good comedy movie?\" it currently won't know how to respond, **even though + the question includes one of its keywords.** By using `includes` we can allow + our Movie Bot to sense if a keyword appears anywhere in the question.\r\n\r\n# + Do This:\r\n\r\n* **Suggestion: Switch to Text Mode.** This will be much easier + in Text Mode.\r\n* **Change all your boolean expressions to use `includes` + instead of `==`**.\r\n* **Test out a couple sentences with your keywords** + to make sure the change worked.\r\n\r\n![](https://images.code.org/0df459c4ccd9b613b23409af7ff5f59e-image-1446139233341.gif)\r\n\r\n**Note: + ** Check out the flowchart below to see the logic we are trying to change.\r\n\r\n\r\n<img + src=\"https://images.code.org/ea8340252f50774c352f58fa7cc12e5c-image-1446069734921.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/ea8340252f50774c352f58fa7cc12e5c-image-1446069734921.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3L24 Nested Conditionals 2_markdown_instruction: "# Nested Conditionals\r\n\r\nThe + way we left the Movie Bot in the last exercise is a little strange to see + as a user. **Currently when the input doesn't have a question mark the Movie + Bot says \"I only respond to questions.\" but it still provides a recommendation**. + We're going to alter our code so that the movie recommendation is only provided + if the user asks a question.\r\n\r\n# Do This:\r\n\r\n* **Nest your movie + genre `if` statements** inside the \"?\" `if` statement so that **a recommendation + is made only if a question was asked**.\r\n* **Remove the \"That's a good + question.\"** output.\r\n* Ensure that **if your input is not a question** + then the response is **I only respond to questions.**\r\n* **Test out a couple + sentences with your keywords** to make sure the change worked.\r\n\r\n**Example + Input --->** | **Output**\r\n---|---\r\nWhat's the best action movie? | The + best action movie is any James Bond movie.\r\nI love comedy | I only respond + to questions.\r\n<br>\r\n**Note: ** Check out the flowchart below to see the + logic we are trying to change.\r\n\r\n<img src=\"https://images.code.org/c319d7ba43112451a6b25aa9475cacb5-image-1446074593924.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/c319d7ba43112451a6b25aa9475cacb5-image-1446074593924.png\" + target=\"_blank\">Open diagram in a new tab</a>" + CSPU5_U3L24 introIncludes_markdown_instruction: "# *includes*\r\n<img src=\"https://images.code.org/7373ad2ad98b0d815ce0b8196c2ec177-image-1446070324010.11.43 + PM.png\" style=\"width: 250px; float:right\">\r\n\r\nWe're going to explore + a new function called `includes`. This function can be used to check if one + string appears anywhere inside of another. Just like `toUpperCase` and `toLowerCase` + this function is called using **dot notation**.\r\n\r\n# *includes* Returns + a Boolean\r\n**`includes` is a function that returns a boolean.** In other + words, when the function runs it will **evaulate to either `true` or `false`**. + This function can be used **anywhere you would normally use a boolean expression**.\r\n\r\nYou've + actually **seen a few functions that return a value before this**. `randomNumber` + is a function that returns a number and `getText` is a function that returns + a string. In every case we've used these functions **as if they were the + data type they return (or evaulate to)**. Notice that in block mode these + functions don't have the connectors that other commands do since they will + be used as a piece of data within another function.\r\n\r\n# Do This:\r\n\r\n* + **Read the documentation** for `includes`.\r\n* **Starter code** has been + provided which shows one instance where a string does include a `searchValue` + and one where it does not.\r\n* **Replicate the style** of these commands + to check the rest of questions provided.\r\n* **Create three statements of + your own using `includes`** making use of the `console.log` statements provided.\r\n* + **Once you're comfortable with this command move on.**" + CSPU5_U3L25 - drag out key event_markdown_instruction: "# *keypress*\r\n\r\nIf + we want to add keyboard input to our apps we'll need to learn about how key + events work in App Lab. To start let's take a closer look at the `onEvent` + block. We already know that event handlers call a function. What we'll see + now is that they also **pass a parameter**. The default name for this parameter + is simply `event` but you can change it to be anything you like. \r\n\r\nThe + `event` parameter is a more complex kind of variable (called an \"Object\") + that we'll learn more about later. For now just know that for both mouse + and keyboard events, the event parameter passes more information about the + event. In the case of key events **you can find out the key(s) that were actually + pressed by using `event.key`**.\r\n\r\n# Do This:\r\n\r\n* Drag out an `onEvent` + block.\r\n* Change the ID to `screen1` and the event type to `keypress`. \r\n\r\n<img + src=\"https://images.code.org/537b5bbef3db62c90155528e6753a00a-image-1447175732347.gif\" + style=\"width: 450px\">\r\n\r\n* Once you hit **Run**, **click on the screen + so that the keystrokes will register**.\r\n* **Type different combinations + of keys** and check out the results in the console. Does every key combination + print to the console? Some keys to try:\r\n * Letter keys\r\n * Number + keys\r\n * Shift key\r\n * Hold shift and letter\r\n * Delete key\r\n * + Left and right arrow keys\r\n * Press and hold a key" + CSPU5_U3L25 - play sound when up key_markdown_instruction: "# Play Sound With + Keys\r\n\r\nYou may have noticed from the last couple of levels that the value + of `event.key` is just a string which is the name of the key. As a result + we can check which key was pressed with a simple conditional statement. For + example to check for the press of the **\"a\"** key we could write `if (event.key + == \"a\")`.\r\n\r\n# Do This:\r\nThe **starter code provided** plays the sound + whenever ANY key is pressed.\r\n\r\n* Use `console.log` to **find out the + value of `event.key` when the up arrow is pressed.**\r\n\r\n* **Add an `if` + statement** so the sound only plays when the when the **up arrow** is pressed." + CSPU5_U3L25 Free Response 3_markdown_instruction: "What is the output of this + code segment?\n\n\tvar phrase = \"I am so\";\n\tvar emotion = \"excited\";\n\tvar + sentence = phrase + \" \" + emotion.toUpperCase() + \"!\";\n\tconsole.log(sentence);\n<br/>\n" + CSPU5_U3L26 AND operator_markdown_instruction: "# AND Operator in Movie Bot\r\n\r\nOn + the last level you may have noticed that if you typed in a question like \"What + is an R rated comedy movie?\" It gives two movie suggestions! It would make + more sense for it to give one suggestion.\r\n\r\nWe could use nested `if` + statements to do this by nesting `if` statements about ratings inside of `if` + statements about genre. However, you might be getting a sinking feeling that + this could become a lot of nested `if` statements very quickly! \r\n\r\n**Instead + let's use the AND operator (`&&`) to check for a genre and a rating at the + same time.** \r\n\r\n<img src=\"https://images.code.org/a9307ead3b147e0a8016f2054f47f5f2-image-1446153610104.png\" + style=\"width: 200px; float:right\">\r\n\r\nBe careful about the order of + the `if` statements. As a general principle you want to check the most specific + conditions before checking more general ones. For example, you want to have + an `if` statement that checks for rating AND genre evaluated before one that + just checks for genre on its own. Having a more general `if` statement checked + first might cut off or prevent more specific conditions from being reached.\r\n\r\nYou + still want your app to give suggestions when just a rating or just a genre + is detected, so keep this principle of ordering in mind. (Try them in the + reverse order if you're interested in seeing what happens :))\r\n\r\n**Note: + ** Check out the flowchart below to see the logic we are trying to add.\r\n\r\n# + Do This:\r\n\r\n* **Try the question \"What is an R rated comedy movie?** + to see the result.\r\n\r\n* **Update the code to give only one movie suggestion + when a genre and a rating are detected in the input.**\r\n\t* Make one set + of `if`, `else-if`, and `else` statements about genre and rating\r\n * + Add conditional statements to check for a comedy movie AND a rating. You could + do this for all the genres but stick to one for now.\r\n\r\n* **Test out a + couple sentences with your keywords** to make sure the change worked.\r\n\r\n<img + src=\"https://images.code.org/e64c26fed584ddbb5e5a62e6800d5e69-image-1455816162662.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e64c26fed584ddbb5e5a62e6800d5e69-image-1455816162662.png\" + target=\"_blank\">Click to open in separate window.</a>" + CSPU5_U3L26 OR operator_markdown_instruction: "# OR Operator in Movie Bot\r\n\r\nLet's + try to check for the keywords related to questions (\"who\", \"what\", \"where\", + \"when\", \"why\", \"how\", and \"?\") to decide if the user asked a question. + You could do this with a chain of `if-else-if` statements, but it would not + be very efficient. \r\n\r\nInstead let's use a **series of OR operators (`||`)** + to check whether \"who\", \"what\", \"where\", \"when\", \"why\", \"how\" + or \"?\" show up in the user input. \r\n\r\n**Note: ** We've updated the + the flowchart below to show the logic we are trying to add to the initial + question.\r\n\r\n# Do This:\r\n\r\n* **Update the `if` statement** to check + if **\"who\" OR \"what\" OR \"where\" OR \"when\" OR \"why\" OR \"how\" OR + \"?\"** have been typed in by the user.\r\n\r\n* **Test out a couple sentences + with your keywords** to make sure the change worked.\r\n\r\n<img src=\"https://images.code.org/6104c7fd0ecd31010d12be79bc350831-image-1446495141539.png\" + style=\"width=500px\">\r\n" + CSPU5_addDescriptiveIDsToTurtleDriver_markdown_instruction: "# Descriptive + IDs\r\n\r\n**You try it** - give your buttons **descriptive and meaningful + IDs** rather than the default `button1`, `button2` and so forth.\r\n\r\nAfter + you change the ID in Design Mode remember to:\r\n\r\n* **Change the event + handler code** so that it correctly references the new IDs of the buttons\r\n* + **Run - Test - Debug ** the program to make sure it works, and debug any problems.\r\n\r\n<details><summary><strong>Reminder:</strong> + Rules About IDs [click to expand]</summary>\r\n\r\nIn making descriptive and + meaningful IDs there **are some rules about IDs** you need to know. IDs...\r\n\r\n<li> + are case sensitive</li>\r\n<li> cannot contain spaces.\r\n<li> *must* begin + with a letter (A-Z or a-z) and may be followed by any number of digits and + letters.\r\n<li> can contain hyphens (\"-\"), underscores (\"_\"), colons + (\":\"), or periods (\".\").\r\n\r\n</details>\r\n" + CSPU5_basic if - DIY secret number_markdown_instruction: "# Do it yourself + - What's the secret number?\r\n\r\nInsert lines of code between the \"Welcome\" + and \"Goodbye\" that do the following:\r\n\r\n1. use `promptNum` to ask the + user to enter the \"secret number\"\r\n2. add an `if` statement to check if + the number is the secret (you can make up your own secret number)\r\n3. use + `console.log` to display a message if the user guessed correctly\r\n\r\n**NOTE:** + Don't go overboard here adding messages. Just get practice adding a prompt + and an if-statement on your own. Make sure it works and move on.\r\n" + CSPU5_basic if - check driving age_markdown_instruction: "# You try it\r\n\r\nThis + is only *slightly* different from the voting example you just saw.\r\n\r\n* + **Add an if-statement** to the code to check the `age` to see if the person + is old enough to drive. (In most states you need to be 16 or older).\r\n* + **Display a message if the person is old enough drive.**\r\n\r\nYou can add + an if-statement by dragging it out from the toolbox. We've provided the + console.log message you should use. Just drag it inside the if-statement. This + animation shows most of what you have to do.\r\n\r\n![](https://images.code.org/4ef3562d035ffacf292daac508fea34f-image-1479746969387.gif)" + CSPU5_basic if - voting examle_markdown_instruction: "# Recreate the voting + example\r\n\r\n* Replace `condition` with a Boolean expression to check if + the person is 18 or older.\r\n* Run the program a few times, entering different + ages at the prompt\r\n* Make sure you generate the two outputs that are possible + from this code.\r\n\r\n" + CSPU5_basic if-else - driving age_markdown_instruction: "# You try it\r\n\r\nLet's + modify the driving age example to add an `else` clause.\r\n\r\n* **Add an + `else` ** to the if-statement.\r\n* **Add a console.log** message inside the + else clause that says something like \"sorry you can't drive yet\".\r\n\r\nYou + can add an else-statement by clicking on the `+` attached to the if statement. We've + provided some starting code.\r\n\r\n**BONUS** - if they are not old enough + to drive you could do the math and tell them how many years they have to wait." + CSPU5_moveTurtleOnButtonClick_markdown_instruction: "# onEvent\r\n\r\n**You + try it!** - Make the turtle move forward when the button is clicked.\r\n\r\n* + **Add an `onEvent` block** \r\n* Set the **id** of your button\r\n* Add `moveForward` + to the function definition\r\n\r\n* **Run the program** to make sure it works.\r\n* + **Try changing the event type** to something like *\"mouseover\"* and see + what happens. Not all event types will work with buttons but it's fun to + play a little bit.\r\n\r\nOnce you've got the program responding to some + event, congratulations! You've just made your first interactive app. \r\n\r\n**Click + Finish** to move on to the next problem.\r\n\r\n" + CSPU5_playWithEventTypes_markdown_instruction: "\r\n# Play with different event + types\r\n\r\n<img src=\"https://images.code.org/9f013bd84577eb2498061757e18a72f4-image-1444322870272.46.06 + AM.png\" style=\"float: right\">\r\nIf you haven't yet, you should experiment + with different event types with your `onEvent` blocks. The ones that will + work best here are mouse-related ones such as:\r\n * click\r\n * mousemove\r\n * + movedown\r\n * mouseup\r\n * mouseover\r\n\r\n*There are some events that + capture keystrokes from the keyboard. These are interesting, but they do not + work easily with buttons. We'll stick to mouse events for now, and get to + keys later.*\r\n\r\n**Be sure** to experiment with each of the ones that start + with \"mouse...\".\r\n\r\nOnce you've have played a little bit, click Finish + to move on.\r\n\r\n" + CSPU5_predict_applab_onEventWithWrongID_markdown_instruction: "# Debugging + Event-Driven Programs: IDs\r\n\r\n**You Try it: Checking IDs** -- Your first + debugging task will be to verify that the button IDs match the event-handlers. You'll + also see error messages in the **\"Debug Console\"**\r\n\r\n![](https://images.code.org/6bb61c1ab1af5c0ce84a8cc4dc9b95cd-image-1476970435861.png)\r\n\r\n1. + **Run the program** and inspect the error messages in the Debug Console.\r\n * + **NOTE:** an error message *only* indicates where the computer ran into trouble. It + doesn't tell you the root cause of the problem, necessarily.\r\n2. **Investigate** + -- Use the **error message as a clue** to investigate the possible problem.\r\n3. + **Fix it** -- Make a change that you think will fix the problem.\r\n4. **Run + the program** and verify that not only are there no error messages but the + program works as intended (turtle moves forward on button click).\r\n5. **Didn't + work?** - repeat the steps above. And stick with it! You'll get it eventually.\r\n\r\n**Remember:** + You can see the ID of a UI element by just hovering your mouse over it.\r\n<details><summary>Hint? + [click here]</summary>\r\n\r\n<li>In this case the ID of the button does not + match the ID in the onEvent command</li>\r\n<li>The error message is saying: + \"you're telling me to listen to events on a UI Element with id 'button1' + and no such thing exists!\" </li><br>\r\nThere are two ways to fix this:<br>\r\n<li>Change + the ID in the event handler code to match the button ID in design mode.</li>\r\n<li>...or + Change the button ID in design mode to match the event handler</li></details>\r\n\r\n" + CSPU5_setPosition to fixed location_markdown_instruction: "# Using setPosition\r\n\r\n<img + src=\"https://images.code.org/b664824ffeb3347b2e0b6d12447b4e8b-image-1476891499229.gif\" + style=\"width: 150px; float: right;\">\r\n\r\n**Now you try it** - use [setPosition](#triggercallout=setPosHover) + to **move the button to the middle of the screen when clicked**. \r\n\r\nWe've + set up a small project for you with a button (id: `moveBtn`) already added + in design mode.\r\n\r\n1. Add an `onEvent` block\r\n2. Drag a `setPosition` + command into the event handler function\r\n3. Set the x,y coordinate so that + the button ends up in the middle of the screen.\r\n * You'll need to experiment + a little bit to find coordinates that work for you.\r\n * Hover over the screen + to find a good starting point.\r\n\r\n**Tip**: when you see a command that + is linked like this: [setPosition](#triggercallout=setPosHover) click it! + -- it will show you other hints.\r\n\r\nOnce you've got the button moving + to the middle of the screen click Finish to move on to the next challenge.\r\n" + CSPU5_turtleDriver_add2ndButton_markdown_instruction: "<img src=\"https://images.code.org/7447f9f6df9a1931297e1f8fa7284f28-image-1481582422206.gif\" + style=\"float: right; width: 200px\">\r\n\r\n# Practice! Add another button\r\n\r\nNow + that you know the pattern try it out. **Add a 2nd button to the screen that + turns the turtle to the left when clicked.** The finished product should + look similar to the image shown here.\r\n\r\nRemember the steps:\r\n\r\n 1. + **Design Mode**: drag another button onto the screen\r\n 2. Switch to Code + Mode: **add an onEvent block** to the code\r\n 3. **Add code** inside the + function to make the turtle turn left\r\n 4. Run. Test. Debug\r\n\r\n<details><summary>Need + Help? [Click Here]</summary>\r\n\r\n<h3>\r\nHere is an example of adding other + button to make the turtle turn left\r\n</h3> \r\n\r\n<div style=\"column-count: + 3; column-gap: 20px; column-rule: 0.5px solid #00adbc; -moz-column-count: + 3; width: 100%\">\r\n\r\n<p><span style=\"font-weight: bold; color: #00adbc; + font-size: 200%;\">1.</span>\r\nAdd a UI element to the screen in Design Mode</p>\r\n\r\n<p><span + style=\"font-weight: bold; color: #00adbc; font-size: 200%;\">2.</span>\r\nAdd + another onEvent block to the code. <strong>Note:</strong> you need new onEvent + block <em>for every</em> event you want to capture.</p>\r\n\r\n<p><span style=\"font-weight: + bold; color: #00adbc; font-size: 200%;\">3.</span>\r\nAdd code to the event + handler function you want.</p>\r\n\r\n</div>\r\n\r\n<img src=\"https://images.code.org/f695b83911560bf628750ed2a134a38c-image-1476818017592.png\" + style=\"display: block; width: 100%\">\r\n\r\n<div style=\"column-count: 1; + column-gap: 20px; column-rule: 0.5px solid #00adbc; -moz-column-count: 3; + width: 33%;\">\r\n\r\n<p><span style=\"font-weight: bold; color: #00adbc; + font-size: 200%;\">4.</span>\r\n<strong>Debugging Tip:</strong> if you hover + your mouse over a UI element while in code mode, it will show you the ID of + the element. This very useful when you have a lot of elements on the screen.\r\n\r\n</div>\r\n\r\n<div + style=\"clear: both\">\r\n \r\n</div>\r\n\r\n\r\n\r\n\r\n</details>\r\n" + CSP_U2_Shakespeare_Question_markdown_instruction: "Respond to this prompt or + to another as directed by your teacher.\r\n\r\nShakespeare’s complete works + have approximately 3.5 million characters. Which is bigger in file size: + Shakespeare’s complete works stored in plain ASCII text or a 4 minute song + on mp3? How much bigger?" + Calc Circles of Eval .1_markdown_instruction: "You’ll be writing a kind of + code called Evaluation Blocks, because each block of code evaluates to a single + value. Change the ??? in this code so that the block evaluates to 5." + Calc Circles of Eval .2_markdown_instruction: "This Evaluation Block is a multiplication + function which takes two numbers and returns the product of those numbers. + Edit this block so that it multiplies 2 * 5" + Calc Circles of Eval .3_markdown_instruction: "Here's a function for addition + which takes two numbers and returns their sum. Use this Addition Block to + add 3 + 6." + Calc Circles of Eval .4_markdown_instruction: "Here we've nested an Addition + Block inside a Multiplication Block. Complete this code so it multiplies 3 + by (4 + 1)" + Calc Circles of Eval 2_markdown_instruction: "Use a Multiplication Block to + complete this code." + Calc Circles of Eval 3_markdown_instruction: "Complete the Evaluation Blocks + to match this statement." + Calc Circles of Eval 4_markdown_instruction: "This code is missing a couple + of Evaluation Blocks - make sure you put everything in the right order." + Calc Circles of Eval 7_markdown_instruction: "Complete the Evaluation Blocks + to match this statement." + Calc Circles of Eval 8_markdown_instruction: "Complete the Evaluation Blocks + to match this statement." + Calc Circles of Eval 9_markdown_instruction: "Complete the Evaluation Blocks + to match this statement." + Calc Circles of Eval Free Play_markdown_instruction: "Free Play: Try using + the Evaluation Blocks to write some equations of your own. How does nesting + the blocks in different ways impact their evaluation?" + Calc Define Funcs 1_markdown_instruction: "Let's look at some more traditional + algebraic functions now. Here's a function translated from the simple algebraic + function `f(x) = x + 1`. What would you expect this function to output if + provided an input of 15?" + Calc Define Funcs 2_markdown_instruction: "Write a function `f` that takes + a parameter `x` and returns `x - 10`. Test your function using `f(15)`." + Calc Define Funcs 3_markdown_instruction: "We don't have to call our function + `f` every time; create a function called `times-ten` that should take a parameter + `x` and return `x * 10`. Once you've created the function, run `times-ten(50)`." + Calc Define Funcs 4_markdown_instruction: "Write a function called `half` that + takes a number `x` and returns half that number. Once you've written the + function, use it to calculate `half(21)`" + Calc Design Recipe 1_markdown_instruction: "Let's use the Design Recipe to + create a function called `cube` - this function should take in a Number and + return that number to the power of 3. Make sure to write two example cases! + When you're done, use your new function to calculate `cube(7)`." + Calc Design Recipe 2_markdown_instruction: "Your school is holding a bake sale, + and you need to track the cost of making each cookie, the money paid, and + the total profit. Cookies cost $0.25 each to make, and sell for $1.50/cookie.\r\nWrite + the function `cost`, which takes in the number of cookies you intend to sell, + and returns the cost of making those cookies.\r\n\r\n_Test your function by + calculating the cost of 42 cookies_" + Calc Design Recipe 3_markdown_instruction: "Write the function `sales` which + takes in the number of cookies sold, and produces the amount of money customers + spent to buy those cookies (each cookie is sold at $1.50).\r\n\r\n_Test your + function by calculating the sales for 135 cookies_" + Calc Design Recipe 4_markdown_instruction: "Using the two functions we just + wrote, write the function `profit`, which takes in the number of cookies you + sold, and gives you back the total profit you make from selling your cookies, + accounting for the cost of baking them.\r\n\r\n_Test your function by calculating + the total profit for 15 cookies_" + Calc Rocket 1_markdown_instruction: "In the last puzzle you wrote a contract + for the function `rocket-height` that states it has a range of Number, domain + of Number, and should return the height of the rocket traveling at 15 m/s + after a given number of seconds. Let's write an example case now for the + height of the rocket at 3 seconds." + Calc Rocket 2_markdown_instruction: "Great, let's do one more example before + writing the function - what should the rocket height be after 30 seconds?" + Calc Vars 1.1_markdown_instruction: "Here we've set the `age` variable to + 17 years. Can you write an expression that calculates `age` in days?" + Calc Vars 1_markdown_instruction: "Variables allow us to name values so that + we can easily refer to them repeatedly throughout our programs. Here's a + variable called `age`. Set its value to your age and click run." + Calc Vars 2.1_markdown_instruction: "Here's a new variable called `age-in-months`. + Use the variable `age` to set `age-in-months`." + Calc Vars 2_markdown_instruction: "Can you write an expression that calculates + `age` in months?" + 'Challenge: Buzzer and LED_markdown_instruction': "# Challenge\r\n\r\nCheck + with your teacher before starting the challenge.\r\n\r\nNow that you know + how to use the LED and buzzer, try creating an app that can play a variety + of different sounds and which uses the LED. You could make a keyboard or synthesizer + that plays various sounds when you click different buttons." + 'Challenge: Input and UI_markdown_instruction': "# Stop\r\n\r\nYou have reached + the end of the lesson. Check in with your teacher to see if you should work + on the challenge level before you start. This is an extra challenge to practice + your skills if you have time. If you don't have time for it no big deal!\r\n\r\n# + Challenge\r\n\r\nGo to <a href=\"studio.code.org/p/gamelab\" target=\"_blank\"> + Full Game Lab </a> and try to make your own profile creator like the example + program on this level." + 'Challenge: Lights Picker_markdown_instruction': "# Challenge: More Patterns\r\n\r\nAdd + some more patterns to your app. Find a partner and add their pattern as an + option. Make sure to put each pattern into its own function." + 'Challenge: List of Notes_markdown_instruction': "# Challenge: \r\n\r\nCheck + with your teacher before starting the challenge.\r\n\r\n**Starter Code:** + An array with the name of the 30 buttons on the screen (not including the + New Pattern button) is provided for you. \r\n\r\n**Write Code:** Each time + the New Pattern button is clicked at least one random button from the list + is set to a random color.\r\n" + 'Challenge: Random Button Colors_markdown_instruction': "# Challenge: Random + Button Colors\r\n\r\nCheck with your teacher before starting the challenge.\r\n\r\n**Starter + Code:** An array with the name of the 30 buttons on the screen (not including + the New Pattern button) is provided for you. \r\n\r\n**Write Code:** Each + time the New Pattern button is clicked at least one random button from the + list is set to a random color.\r\n" + 'Challenge: Sunset with Counters_markdown_instruction': "# Challenge: Nightfall\r\n\r\nThink + you've got drawing with counters down? Try this challenge.\r\n\r\nThe color + block can take a 4th input that controls the opacity of the color. You can + click the arrows on the side of the color block to expand this 4th input.\r\n\r\n![](https://images.code.org/7844f8cb46eade7cec452b7a4d98124b-image-1484964689007.10.08 + PM.png)\r\n\r\n# Do This\r\n\r\nThis is your same sunset animation from before. + Can you make the scene slowly change to night?\r\n\r\n![](https://images.code.org/b055142110b0d0ed092d6496447aad6e-image-1463079830043.gif)\r\n\r\n" + Classroom Assessment Techniques_markdown_instruction: "The following link is + a resource that presents the process of designing and using classroom assessment + techniques:" + Classroom Management Tips for School Computer Labs_markdown_instruction: "## + Strategies for Managing a Computer Lab\r\n\r\n\r\nIf you're new to teaching + a computer lab, consider implementing some of the 7 tips for establishing + strong instructional routines, outlined in this article by Angela Watson. + \r\n\r\n<br><br>" + 'Collaborative Learning and Group Work: Description and Strategies_markdown_instruction': "The + following link to Cornell University Center for Teaching Excellence provides + a brief description of group learning along with a handful of specific techniques + for designing and implementing group work activities: " + Color Blindness Filter_markdown_instruction: "# Color Blindness Filter\r\n\r\n\r\n\r\n" + Color Contrast Checker_markdown_instruction: "# Color Contrast\r\n\r\nPeople + need to be able to see and read the content on your web page for it to be + useful. Some people might have bad eye sight, others are color blind. How + do you design with these differences in mind? \r\n\r\nOne of the easiest ways + to insure that many people will be able to read the content on your website + is to make sure their is enough contrast between the different colors you + are using together on your site.\r\n\r\nhttp://gomedia.com/zine/tutorials/rule-three-contrast-contrast-contrast/\r\n\r\n\r\n# + Do This\r\n\r\n* Use the color contrast checker to see the difference in contrast + of the different colors you are using together on your site." + Considerations for the 1-to-1 Classroom_markdown_instruction: "## 1-1 Classroom\r\n\r\nIf + you're new to managing a classroom with computers, check out this article + in Education Week, which outlines some important considerations.\r\n\r\n<br><br>" + Course 4 Artist 1_markdown_instruction: "Help me draw a box. \r\n(Each line + is 200 pixels long) \r\n\r\n<br/><br/>\r\n\r\n" + Course 4 Artist 10_markdown_instruction: "<img src=\"https://images.code.org/c876143212d195192013582f57c6df04-image-1445625392518.36.18.png\" + width=\"150px;\" style=\"mix-blend-mode: multiply;\" />\r\n\r\n**Play time:** Here + is the code for an interesting shape. \r\n\r\nWhat happens when you repeat + it multiple times, turning between each iteration? \r\n\r\nNotice that the + turns in this shape add up to *420 degrees*, which means that when your artist + is done drawing, it will be facing a different direction than when you started. That + new direction is exactly *60 degrees* to the *right* of where you began.\r\n\r\n<hr/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 4</b></summary>\r\n<br/>\r\nIf you want to come full circle in just 4 repetitions, + you need the artist to turn a total of **360 degrees/4 = 90 degrees** each + time. You can do that by adding an extra `turn right by 30 degrees` block + to the outer loop (since **60+30 = 90**.) \r\n<br/>\r\n<img src=\"https://images.code.org/9da67a628ed72e87520a02a0d917e2af-image-1440132370113.44.12.png\" + width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n<br/><br/>\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 6</b></summary>\r\n<br/>\r\nWhen you repeat the shape as-is 6 times, you get + a total rotation of **6x60 degrees** which is a full **360 degree** cycle. \r\n<img + src=\"https://images.code.org/b79f96b87097ce3afe8a6a5608d04e36-image-1440132287456.44.27.png\" width=\"500px;\" style=\"mix-blend-mode: + multiply;\" />\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 12</b></summary>\r\n<br/>\r\nIf you want to repeat the image 12 times, you + need the artist to turn a total of **360 degrees/12 = 30 degrees** each iteration. That + means you will need to adjust the artist back a bit with `turn left by 30 + degrees` before you repeat the shape again. <br/><br/>\r\n<img src=\"https://images.code.org/ad254952522674496918561096817c66-image-1440132424792.44.01.png\" + width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n</details>\r\n</h4>\r\n\r\nNow + it's your turn! Can you recreate each image by repeating the starting shape? " + Course 4 Artist 11_markdown_instruction: "<img src=\"https://images.code.org/6cac10470af71bbb5d75bf5e2669046f-image-1439939145211.png\" + width=\"200px\"/>\r\n\r\nNow for a challenge! \r\n\r\nHere is a design that + uses only blocks that you have already been shown. Can you figure out how + to recreate it? Feel free to use trial and error. You are not expected to + get it perfect the first time.\r\n\r\nThe repeated shape is almost identical + to the one from the last puzzle, except that the length used in the first + loop is a little smaller. " + Course 4 Artist 12_markdown_instruction: "<img src=\"https://images.code.org/70795d84048767ae7fb65883f476b27c-image-1440050836837.01.09.png\" + width=\"250px\"/>\r\n\r\nFree Play Inspiration: You've now learned everything + you need to know to make a pattern like this! If this picture inspires you, + try to make something similar. Otherwise, create something all your own. \r\n\r\n<br/>\r\n" + Course 4 Artist 13_markdown_instruction: "Still playing? Here is a blank canvas + where you can design anything you want!" + Course 4 Artist 2_markdown_instruction: "Can you use a loop to draw the greyed + out square? \r\n(Each side is 300px long)" + Course 4 Artist 20_markdown_instruction: "Still playing? \r\n\r\nHere is a + blank canvas where you can create whatever you want!" + Course 4 Artist 3_markdown_instruction: "Try to figure out what happens if + you run this code (or press \"Run\" to test it). \r\n\r\nThen, repeat it + enough times to complete the drawing." + Course 4 Artist 4_markdown_instruction: "How many degrees are in a circle? \r\nFill + in the repeat block with that number to create a circle of colors." + Course 4 Artist 5_markdown_instruction: "Draw the other half of this design + so it's symmetrical. \r\nThe triangles are equilateral and are 50 pixels + long. \r\n\r\nYou may have to run the code several times to figure out all + of the blocks that need to be added." + Course 4 Artist 6_markdown_instruction: "Complete the code to draw these three, + equilateral triangles." + Course 4 Artist 7_markdown_instruction: "Now nest this loop inside another + loop to draw 10 triangles. " + Course 4 Artist 8_markdown_instruction: "Draw this sun by looping this whole + block of code multiple times." + Course 4 Artist 8a_markdown_instruction: "Remember this shape? Now we're + going to let you build it without giving you any blocks to start!" + Course 4 Artist 9_markdown_instruction: "Loop this design 10 times and make + sure to turn between each shape that's drawn. " + Course 4 Artist Binary 1_markdown_instruction: "Here's a function that takes + a binary string of 1's and 0's and instructs the artist to follow them from + left to right, top to bottom. \r\n\r\nThe artist will fill-in the squares + when it sees a 1 and ignore the square when it sees a 0. \r\n\r\n**Run this + code to see how the artist uses binary to draw this pattern.**" + Course 4 Artist Binary 1a_markdown_instruction: "Here's a function that takes + a binary string of 1's and 0's and instructs the artist to follow them from + left to right, top to bottom. The artist will fill-in the squares when it + sees a 1 and ignore the square when it sees a 0. \r\n\r\nRun this code to + see how the artist uses binary to draw this pattern." + Course 4 Artist Binary Free Play 2b_markdown_instruction: "<img src=\"https://images.code.org/0a30f23ff6138828d053267719d34fa8-image-1444435986654.00.22.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own. + \r\n<br/>\r\n" + Course 4 Artist Binary pre1_markdown_instruction: "Binary is a way of representing + information using only two options. In this case, <b>off</b> and <b>on</b>.\r\n<br/>\r\nHere, + we're going to use the number <b>0</b> as code for \"off\" and the number + <b>1</b> as code for \"on\".\r\n<hr/>\r\nWe've provided you with a grid of + \"pixels\" that you can walk through and make designs by turning on only certain + squares.\r\n\r\n<b>Use the blocks below to have the artist draw \"01010101\" + in binary in the first row.</b>" + Course 4 Artist Binary ryan_markdown_instruction: "Binary is a way of representing + information using only two options. Here, we're going to use the options + \"off\" (represented by the number 0) and \"on\" (represented by the number + 1). \r\n\r\nWe've provided you with a grid of \"pixels\" that you can walk + through and make designs by turning on only certain squares. Can you have + the artist draw \"01010101\" in binary in the first row?" + Course 4 Artist For Loops 1_markdown_instruction: "Use a repeat block to draw + this triangle that is 50 pixels wide.\r\n\r\n" + Course 4 Artist For Loops 10_markdown_instruction: "Free Play Time! Have fun + drawing whatever you like with the blocks you have learned how to use." + Course 4 Artist For Loops 11_markdown_instruction: "Remember back in a previous + stage when we used a variable to control the number of sides in a shape? We + are going to do the same thing with the `counter` variable now. \r\n\r\nThis + pattern starts with a triangle and adds one side at a time until it draws + a decagon (10 sides). Each side should be 100 pixels long. \r\n\r\nHow will + you use the `counter` variable from the `for` loop to recreate this drawing?" + Course 4 Artist For Loops 11a_markdown_instruction: "Let's put it all together! \r\n\r\nUsing + your knowledge of `for` loops and the `counter` variable, create this drawing + where each shape has two more sides than the last. Make sure that each side + is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little + of the code has been provided for you." + Course 4 Artist For Loops 12_markdown_instruction: "That looked pretty cool, + but now I'd like to draw each shape next to the last one. This time each + side is 20 pixels. Use a jump block to jump forward 40 pixels after each shape." + Course 4 Artist For Loops 13_markdown_instruction: "Hmmm, those shapes are + getting bigger every time! Didn't we already solve this problem with variables? + How can we use the counter variable to make the sides smaller as there are + more of them? Instead of moving forward by a set amount, try moving forward + (100 / counter) pixels." + Course 4 Artist For Loops 14_markdown_instruction: "If you turn a little bit + more or less than you normally would for a shape, it creates a neat effect. + \r\n\r\nTry using some of the code from the last level, but turning 89 degrees + to create this twisted square spiral." + Course 4 Artist For Loops 15_markdown_instruction: "**Free Play:** Try making + some drawings of your own using `for loops`. We've added a few useful variables + for you as well." + Course 4 Artist For Loops 2_markdown_instruction: "I've put the code for drawing + a triangle inside a `for loop` that counts from 50 to 100 by 10. \r\n\r\n<br/>\r\n<strong>NOTE:</strong> + Make sure you look at the code *before* you hit \"Run\"." + Course 4 Artist For Loops 3_markdown_instruction: "Use the last puzzle as a + reference to complete this one. The smallest triangle has 20 pixel sides, + the largest has 200 pixel sides, and each triangle is 20 pixels larger than + the last." + Course 4 Artist For Loops 4_markdown_instruction: "How would you modify what + you've learned to draw these squares? They start at 15 pixels long, the largest + is 300 pixels long, and each square is 15 pixels larger than the last. " + Course 4 Artist For Loops 5_markdown_instruction: "Good job on the last puzzle! + Let's use that \"counter\" variable block again to draw this cool picture. + \r\n\r\n" + Course 4 Artist For Loops 6_markdown_instruction: "Free Play! Try using a for + loop to draw a growing shape pattern of your own design." + Course 4 Artist For Loops 6a_markdown_instruction: "Make three small changes + to the code from the last level to get this!" + Course 4 Artist For Loops 7_markdown_instruction: "What happens if you remove + the \"Repeat 3\" from this algorithm, keeping the \"move\" and \"turn\" blocks + in the for loop? \r\n\r\n<br/>\r\nIn this spiraling triangle, each side is + 20 pixels longer than the last.\r\n\r\n" + Course 4 Artist For Loops 8_markdown_instruction: "Just one little change to + the code from the last image can create this drawing. Can you figure out what + that change is?\r\n\r\nHint: You need to remove something! " + Course 4 Artist For Loops 8a_markdown_instruction: "Just one little change + to the code from the last image can create this image. Can you figure out + what that change is?" + Course 4 Artist For Loops 9_markdown_instruction: "Can you make a spiral? Move + forward from 1 to 75 pixels, increasing by 1 pixel each time.\r\n\r\n" + Course 4 Artist For Loops Challenge_markdown_instruction: "**Challenge:** Can + you figure out how to use all of the things you've learned to create this + image of polygons, all with 40 pixel sides?\r\n\r\nRemember, in order to create + a spiral, you cannot close the polygon. This means that each shape will need + to have one fewer sides than usual." + Course 4 Artist For Loops Challenge_a_markdown_instruction: "**Challenge:** + Can you figure out how to use all of the things you've learned to create + this image of polygons, all with 40 pixel sides?" + Course 4 Artist For Loops inspire_markdown_instruction: "<br/><br/>\r\n<img + src=\"https://images.code.org/9b5897e059bb29bd2faf8504659a3cfc-image-1440719685627.49.33.png\" + width=\"250px\"/> \r\n<br/><br/>\r\n**Free-Play Inspiration:** You've now + learned everything you need to know to make a pattern like this! If this picture + inspires you, try to make something similar. Otherwise, create something all + your own." + Course 4 Artist Functions 12.1_markdown_instruction: "Let's create a function + called `draw an octagon 20` that draws an octagon where each side is 20 pixels + long." + Course 4 Artist Functions 13.1_markdown_instruction: "Now, let's make a function + called `jump to upper right` that moves the artist to the upper-right of the + octagon that you just drew so we can finish this pattern. \r\n<br/>\r\n*Hint: To + get yourself to the upper-right corner, try jumping in a pattern that makes + just 3/8 of the octagon.* " + Course 4 Artist Functions 14.1_markdown_instruction: "Now, let's make a function + called `jump to upper right` that moves the artist to the top-right of the + octagon that you just drew so we can finish this pattern. " + Course 4 Artist Functions Inspiration_markdown_instruction: "<img src=\"https://images.code.org/cf373e03bede480ae54aec72ce823454-image-1442951867535.54.11.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own. + " + Course 4 Artist Functions challenge_markdown_instruction: "<img src=\"https://images.code.org/69f1c2b415f907c86aaa6ed2534c3682-image-1442870371171.13.38.png\" + width=\"250px\"/>\r\n\r\n**Challenge Level:** Use what you've learned in + this stage and others to figure out how to make the drawing above. " + Course 4 Artist Functions inspire_markdown_instruction: "<img src=\"https://images.code.org/6c6ff8e3b5a763926102033a94720f8b-image-1441300952649.19.47.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own. \r\n<br/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Hints</b></summary>\r\n\t<br/><br/>\r\n\t<h5>\r\n\t<details>\r\n\t<summary><b>Hint + #1</b></summary>\r\n \t<br/>\r\n \tUse a `for loop`, then use its counter + variable inside of a nested `repeat` loop. \r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint + #2</b></summary>\r\n \t<br/>\r\n \tEach iteration, you should `draw + a square` then jump forward.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint + #3</b></summary>\r\n \t<br/>\r\n \tYou will need to turn left by 90 + degrees outside of your `repeat`, but still inside the `for loop`.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Solution</b></summary>\r\n \t<br/>\r\n \t<br/>\r\n \t<img + src=\"https://images.code.org/6b07c5de58a1fa573bef19182105f516-image-1441300922567.14.00.png\" + width=\"450px\"/>\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n</details>\r\n</h4>\r\n\r\n<br/>\r\nWhat + happens if you make the squares a little bigger or smaller? How about if + you turn right instead of left?" + Course 4 Artist Inspire_markdown_instruction: "<img src=\"https://images.code.org/b5e28b084cb331ee030ea3853ed921bd-image-1440060815818.51.21.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! If this picture inspires you, + try to make something similar. Otherwise, create something all your own. " + Course 4 Artist Vars 1_markdown_instruction: "Let's draw an equilateral triangle. + \r\n\r\nIt has to be exactly 100 pixels long on each side.\r\n\r\n<br/>\r\n" + Course 4 Artist Vars 10_markdown_instruction: "Here's an algorithm that draws + a triangle out of smaller triangles. Can you modify it so that it uses the + `sides` variable to draw each triangle? \r\n\r\n</br>\r\nLook through the + code, and every time you see the number 3, replace it with your `sides` variable. + Remember to use the `set sides` block." + Course 4 Artist Vars 11_markdown_instruction: "Here’s some more complicated + code using the same concepts from the last puzzle - what should you set the + `sides` variable to in order to draw this picture made of squares?\r\n\r\n<p + style=\"font-size:small; padding: 15px 15px 15px 40px; background-color:#dcf3f3; + border-radius:10px;\">\r\n\tJust for fun: Try using a few different numbers + to see what happens to the pattern!\r\n</p>" + Course 4 Artist Vars 12_markdown_instruction: "Let's set the `sides` variable + to 5. The more sides we add to this algorithm, the bigger this whole pattern + gets! \r\n\r\n<br/>\r\nNotice that there is another variable called `length`. + \r\nWe can now use that variable wherever we have a `move forward` block. + \r\n\r\nSet the `length` variable to 75 for this shape." + Course 4 Artist Vars 13_markdown_instruction: "When a shape has lots of sides, + each side needs to be shorter if you want the whole pattern to fit on the + screen. \r\n\r\nLet's recreate the algorithm for this amazing pattern, but + instead of manually setting the `length` variable, let's use a math block + with the `sides` variable inside to make sure that each shape fits correctly. \r\n\r\nThe + perimeter of each polygon is 300 pixels." + Course 4 Artist Vars 14_markdown_instruction: "**Free Play**: Check it out! + Now your algorithm is nested within one more loop. Experiment with changing + the values of your two variables to draw cool patterns.\r\n\r\nFor even more + effect, try playing with color! Use random colors inside loops to see how + it changes your design." + Course 4 Artist Vars 2_markdown_instruction: "Instead of using `move forward + by 150`, the `move` block is now referencing a variable called `length`. Can + you set `length` to 150 to draw this new triangle?" + Course 4 Artist Vars 3_markdown_instruction: "Here's a loop that draws a square, + but something's missing. Can you fix it so that it uses the variable \"length\" + to figure out how long each side should be? " + Course 4 Artist Vars 4_markdown_instruction: "Now I want to make a rectangle + that is twice as tall as it is wide. We've got a variable called `width` + that needs to be set to 100. Can you use the math blocks to complete the code?" + Course 4 Artist Vars 6_markdown_instruction: "Here’s some code that can draw + any regular polygon. \r\n\r\nThere’s a new variable called `sides` that is + set to 4. \r\n\r\nCan you use the `sides` variable (along with the math block) + to turn the right amount regardless of how many sides are in the polygon?" + Course 4 Artist Vars 7_markdown_instruction: "Use what you learned in the last + puzzle to create this hexagon using the `sides` variable.\r\n\r\nSee how you + could change just one value to draw a triangle, square, pentagon, or octagon?" + Course 4 Artist Vars 8_markdown_instruction: "**Free Play:** Experiment with + the number of sides this shape has. Can you change the algorithm so that the + overall size of the shape stays the same, no matter how many sides it has? + " + Course 4 Artist Vars 9_markdown_instruction: "Modify this algorithm so it uses + the `sides` variable instead of a fixed number to draw a triangle. Don't + forget to use the `set sides to` block." + Course 4 Bee 1_markdown_instruction: "The bee can't tell what's under the + cloud! \r\n\r\nUse the `if` block to check whether there is a flower under + the cloud. \r\n\r\nGet nectar one time, **ONLY** if there is a flower." + Course 4 Bee 2_markdown_instruction: "Use the `if/else` block to check each + object to see if it's a flower or a honeycomb. \r\n\r\nIf it's a flower, + collect one nectar...otherwise, make one honey!" + Course 4 Bee 3_markdown_instruction: "The unknown object is either a flower + or a honeycomb. \r\n\r\nThis time, use the `if/else` block to collect one + nectar **if** it is a flower, **else** make one honey (because then it would + be a honeycomb)." + Course 4 Bee 4_markdown_instruction: "This purple flower may have either 3, + 2, or 1 nectar. \r\n\r\nHere an `if/else` block is combined with another `if/else` + block to create an `if/else-if/else` statement. \r\n\r\nComplete the solution + to collect the unknown amount of nectar." + Course 4 Bee 5_markdown_instruction: "This purple flower may have either 3, + 2, or 1 nectar. Add an `if-else` block to create an `if, else-if, else` block. + Complete the solution to collect the unknown amount of nectar." + Course 4 Bee 6_markdown_instruction: "This purple flower may have either 3, + 2, or 1 nectar. Create an `if, else-if, else` block to collect the unknown + amount of nectar." + Course 4 Bee 7_markdown_instruction: "Use everything you have learned so far + to collect all the nectar. The purple flower may have either 3, 2, or 1 nectar." + Course 4 Bee For Loops 11_markdown_instruction: "What's wrong with this loop? + See if you can fix it and make the bee collect all the nectar." + Course 4 Bee Params 1_markdown_instruction: "Write a sequence to collect all + of the nectar using `get 3 nectar` which turns, moves to collect the nectar, + and then returns to the original location." + Course 4 Bee Params 2_markdown_instruction: "Modify the `get 3 nectar` function + so it makes me turn right instead of left to the flowers." + Course 4 Bee Params 3_markdown_instruction: "Now there are flowers on both + sides! \r\n\r\nWe've added variables called `left` and `right` for you to + use, and now there is a parameter called `direction` inside `get 3 nectar`. + \r\n\r\n**Edit `get 3 nectar` so that the bee turns the correct direction + when the variables `left` or `right` are passed into the function.**" + Course 4 Bee Params 5_markdown_instruction: "Let's start from scratch - can + you create a new function called `get 5 nectar` with a direction parameter?" + Course 4 Bee Params 6_markdown_instruction: "Wouldn't it be nice if we could + collect all of these nectars with a single function? \r\n\r\n<br/>\r\nTry + adding a new parameter to your function called `nectar units` to control the + amount of nectar to collect. You'll probably want to rename the function + too!" + Course 4 Bee Params 7_markdown_instruction: "Try using your new function to + collect all of this nectar.\r\n\r\n<br/>\r\n" + Course 4 Bee Params 8_markdown_instruction: "**Challenge:** Now there's honey + to deal with too! \r\n\r\nRewrite your function to use both the number of + honey units and the number of nectar units. How would you use those numbers + to decide what you should do?" + Course 4 EC 1a_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 1b_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 2a_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 2b_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 2c_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 2d_markdown_instruction: "**Extreme Challenge:** No rules. No + clues. Just the challenge!" + Course 4 EC 3_markdown_instruction: "**Functions Super Challenge:** Use what + you learned in the previous level to draw an image like this.\r\n\r\n*Note: + The code becomes more simple if you incorporate parameters.*\r\n\r\n<br/>\r\n<img + src=\"https://images.code.org/d3d6a51fafdcc0a09a5c6b0e0f3c2b92-image-1446239805818.08.59.png\" + width=\"300px\"/>\r\n<br/> \r\n\r\n\r\n" + Course 4 EC 3a_markdown_instruction: "**Extreme Challenge:** No rules. No clues. + Just the challenge!\r\n\r\n<br/>\r\n<img src=\"https://images.code.org/d3d6a51fafdcc0a09a5c6b0e0f3c2b92-image-1446239805818.08.59.png\" + width=\"300px\"/>\r\n<br/> \r\n\r\n\r\n" + Course 4 Maze 4_markdown_instruction: "Try the `repeat` block to use fewer + blocks when solving this puzzle..." + Course 4 Play Lab Params 1_markdown_instruction: "Here's a function called + `jump` that causes your main character to jump up 100 pixels. \r\n\r\nRun + the program and use the jump function to collect all of the flags by moving + the dog with the arrow keys." + Course 4 Play Lab Params 10_markdown_instruction: "We've added one last function for you.\r\n<hr/>\r\n\r\n<h4>\r\nUse an `if` statement to program your game to call the `level_up` function only when `player_score` becomes greater than a certain number.<br/><br/>\r\n</h4>\r\n<i>For example: `player_score` > 6</i>\r\n\r\n\r\n<hr/>\r\n<i>Play the game, and make it to level 3 to move to the next puzzle.</i>" - grade5_playlab_variables9_markdown_instruction: "Here's a function called - `patrol`. \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 - pixels." - grade5_playlab_variables_freeplay_markdown_instruction: "Free Play time! Here - are all of the variables we've played with so far in this stage, as well - as a few more in case you want them. \r\n\r\nNotice that there are now so - many blocks in our toolbox that they need to be organized! Here, we've put - each piece into an appropriate category. Take some time to explore everything - that is available. When you're done browsing, make a game or story using - repeats, variables, and events. \r\n\r\n*Hint: scroll down to see all the - commands in the workspace.*" - grade5_playlab_variables_jump1_markdown_instruction: "This puzzle uses a hidden - function that makes the dog jump when the `up` arrow is pressed. The height - of the jumps can be set at the start of the game using the `jumpPower` variable. - Try to touch all of the flags!" - grade5_prompt_test_markdown_instruction: "Variables aren't always numbers. - What if you wanted to store a word or text? Experiment with the new `ask` - block." - gradek_artist_loops1_markdown_instruction: "Help the artist draw this line - two times forward.\r\n\r\n![](https://images.code.org/7ddc7b43ef27197559c7defb0af56d03-image-1470776934855.gif)" - gradek_artist_loops2_markdown_instruction: "Our artist is trying to draw a - line five times, but can't get it right. Can you help?\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" - gradek_artist_loops3_markdown_instruction: "Now, use a `repeat` loop to draw - this line five times!\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" - gradek_artist_loops4_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nDraw a line seven steps long. This will - become our horizon.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" - width=\"300\"/>\r\n" - gradek_artist_loops5_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nLet's put a nice hill in the back.<br/><br/>\r\n</div>\r\n\r\n<img - src=\"https://images.code.org/bbbd114642d829029fc3b0566a4437e3-image-1477107329933.gif\" - width=\"300\"/>\r\n" - gradek_artist_loops6_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the - water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" - width=\"300\"/>\r\n" - gradek_artist_loops7_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nWe need a ladder up to the boat.<br/>\r\n</div>\r\n\r\n<img - src=\"https://images.code.org/6e4dc767e55d11400f35c6680bbfe1e3-image-1470788284437.gif\" - width=\"300\"/>" - gradek_artist_loops8_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** The stairs down to the dock - are broken. Help me fix them.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/53c68133f897895caa0369b4afa3ec3b-image-1470789463684.gif\" - width=\"300\"/>\r\n" - gradek_artist_loops9_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nTime to head back to land. Help me put down - stones so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" - width=\"300\"/>\r\n" - gradek_artist_loopsA_markdown_instruction: "<div style=\"color: #7665a0; font-size: - 1.6em; line-height: 1.4em;\" >\r\nHelp me build steps to watch the ship sail - away.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/0dfa647dbc835fae09989a0fbfd798c7-image-1470871168220.gif\" - width=\"300\"/>\r\n" - gradek_artist_loopsFP_markdown_instruction: "The artist saw something funny - in the distance. Draw what you think he saw.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" - width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" - width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" - width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img - src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" - width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" - gradek_playlab_events1c_markdown_instruction: "Jorge the Dog wants to say \"Hi - there.\" Can you help him?" - gradek_playlab_events2c_markdown_instruction: "Help Jorge the Dog get moving - by connecting the ![](https://images.code.org/b3d6215901969328333d6393f8101c5b-image-1478142333199.png) - block to the ![](https://images.code.org/4f2130b2a3053695414a02c3d39ef864-image-1478143461271.png) - event block that is already in the workspace." - gradek_playlab_events3c_markdown_instruction: "Now, get Jorge to move right - when the ![](https://images.code.org/b99365eb23280f158e6ef570fe1c8a76-image-1478145132820.png) - button is clicked." - gradek_playlab_events4c_markdown_instruction: "Add events to have Jorge move - up and down when the ![](https://images.code.org/379493b95d158b273f1424538b1c635a-image-1478145402316.png) - and ![](https://images.code.org/f490d78efd81c21ab74286aefe7af097-image-1478145385132.png) - buttons are pressed." - gradeK_sequence_4_markdown_instruction: "Try this one yourself from the beginning.\r\n\r\n![](https://images.code.org/43001078c4df6feea1a6edf025192d85-image-1467929743355.gif)" + Course 4 Play Lab Params 2_markdown_instruction: "Now we've got flags that + are too high for our current jump! Let's use both the \"up\" and \"down\" + arrows so that we can have multiple jump heights. \r\n\r\nWe need to add + a parameter to our jump function called `height`. \r\n- The up arrow should + cause the dog to jump 200 pixels \r\n- The down arrow should make it jump + only 100 pixels. \r\n" + Course 4 Play Lab Params 3_markdown_instruction: "We have added another parameter + to the jump function so that we can use it with other actors. Each actor is + represented by a number, starting from one. \r\n\r\n<br/>\r\nEdit the `jump` + function so that it uses the `actor` parameter to make the correct character + jump. " + Course 4 Play Lab Params 4_markdown_instruction: "Here's a function called + `patrol`. \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 + pixels." + Course 4 Play Lab Params 5_markdown_instruction: "Edit the the `patrol` function + to add an `actor` parameter, so that we can call it for each of the actors + on the screen. Remember, the actors correspond to numbers 1, 2, and 3." + Course 4 Play Lab Params 6_markdown_instruction: "Add another parameter called + `speed` to the `patrol` function. Try using a `set speed` block with the new + `speed` parameter to help Penguin get both flags before the other sprites + even get one." + Course 4 Play Lab Params 7_markdown_instruction: "Let's have some fun! Look + at the code provided to see if you can figure out what each block does. \r\n\r\nWhen + you're done, use the arrow keys to control Dog and collect all of the flags.\r\n\r\n**NOTE:** + You don't need to make any changes to the program" + Course 4 Play Lab Params 8_markdown_instruction: "Use the `when actor touches` + block to send Dog back to the top-left ONLY if Dog touches any of the other + actors." + Course 4 Play Lab Params 9_markdown_instruction: "Here's our game from an + earlier stage but most of the code is hidden. We've added a new function + called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nEdit the function + so that a new parameter called `points` is added to `player_score`. \r\n<br/>\r\nThe + variable `player_score` should increase each time Dog tags Cat with pie, and + decrease each time that Cat tags Dog with a sandwich.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: + When you're done, click \"Run\" to play. When Dog scores 6 points, you will + move on to the next puzzle.*" + Course 4 Play Lab Vars 1_markdown_instruction: "This time you don't have to + write any code, just hit `Run` to play the game! \r\n\r\n<br/>\r\nIn this + game, you're the dog who is trying to collect more flags than the cat. Use + the down arrow to control the dog. Press `Finish` when you're done playing." + Course 4 Play Lab Vars 2_markdown_instruction: "The race in that last puzzle + wasn't very fair! Change the `dog_speed` variable to make sure you can collect + more flags than Cat. The first to collect 10 flags wins!" + Course 4 Play Lab Vars 3_markdown_instruction: "Here's a new kind of game! + \r\n\r\nYou don't need to change anything on this level.\r\n\r\n**Directions:** + Use the left and right arrows to move, and the up arrow to jump. See if you + can collect all of the flags." + Course 4 Play Lab Vars 4_markdown_instruction: "Now we're using a variable + called `height` to control how high the dog can jump. Update the `height` + variable so that the dog can jump high enough to reach all the flags. \r\n" + Course 4 Play Lab Vars 6_markdown_instruction: "<h5><b>\r\nIn our game, how + should we score points? \r\n</b></h5> \r\n<br/>\r\n\r\n1. Add 1 to your `points` + variable each time Dog hits Cat with a piece of pie. <br/> <br/> \r\n2. + Use the `when actor 2 touches anything` event to trigger an update to your + score. You can increment your variable by setting `points = points + 1.` <br/> <br/> + \r\n3. Get your score up to 10 to pass the level.\r\n\r\n<br/><br/>\r\n<h4>\r\n**Note:** + Use the right arrow to throw pie!\r\n</h4>" + Course 4 Play Lab Vars 7_markdown_instruction: "Nice, now let's make sure + this game isn't too easy to play! \r\n\r\nAny time Dog (actor 1) gets hit + by a sandwich from Cat (actor 2), you should lose a point. \r\n\r\nStart with + 10 points so it's not too hard. Let your score drop down from 10 to 0 to + pass the level." + Course 4 Play Lab Vars 9_markdown_instruction: "Free Play time! Here are all + of the variables we've played with so far in this stage, as well as a few + more in case you want them. \r\n\r\nNotice that there are now so many blocks + in our toolbox that they need to be organized! Here, we've put each piece + into an appropriate category. Take some time to explore everything that is + available. When you're done browsing, make a game or story using repeats, + variables, and events. \r\n\r\n*Hint: scroll down to see all the commands + in the workspace.*" + Course 4 Play Labs For Loops 1_markdown_instruction: "Let's make the dog speak + every number from 1 to 100. Use a `for` loop and the counter block to speak + the counter variable each time the loop is run." + Course 4 Play Labs For Loops 4_markdown_instruction: "Changing the increment + can be helpful, but we're still counting linearly (each number is the same + distance from the last) What if I wanted to count exponentially? \r\n\r\n<br/>\r\nWithout + changing the settings in this for loop, can you count 1, 4, 9, 16, 25... (counter + squared)?" + Course 4 Play Labs For Loops 4a_markdown_instruction: "Now, let's blend the + variables from Stage 7 together with your `counter` variable to make some + magic happen. \r\n\r\nIn this puzzle, Dog will count from **0** to **1000** + by `increment`. Set the `increment` variable to **10** at the beginning of + your code to see what happens." + Course 4 Play Labs For Loops 5_markdown_instruction: "In the last stage we + counted the square of each number. Try changing `counter ^ 2` to `counter + ^ 3` to count the cube of each number (1, 8, 27, 64, 125, 216, 343…)" + Course 4 Play Labs For Loops 5a_markdown_instruction: "In this puzzle, Dog + will be your time keeper.\r\n\r\nDog will count from **0** to **30** by `increment`. The + `increment` variable will begin with a value of **1**.\r\n\r\nCan you make + it so that each time you click Dog, `increment` increases by **2**? Click + the forward arrow to run the `for loop`. \r\n\r\n**Note:** Run the loop a + couple of times, clicking Dog before each one." + Course 4 Play Labs For Loops 6a_markdown_instruction: "Now that we've seen + how to control our `for loop` using variables inside of our program, let's + make a game!\r\n\r\nDog will still keep time by counting with our `for loop` + by `increment`, but this time we will add The Wizard into the mix. Can you + change the code so that `increment` goes up by two each time The Wizard is + clicked?\r\n\r\nWatch out! The Wizard moves quickly!" + Course 4 Play Labs For Loops 7a_markdown_instruction: "Now we're getting somewhere! What + if we start counting how many times we can click The Wizard before Dog gets + to 30? \r\n\r\nFinish adding blocks to The Wizard so that every time he's + clicked the variable `clicked` increases by one. You can ignore `increment` + for now.\r\n\r\n**Note:** Dog will start counting when you click `Run`." + Course 4 Play Labs For Loops 8_markdown_instruction: "Now, help the actors + move as they count. \r\n\r\nDog should move and count by adding 2 (`counter + + 2`) each time. Cat will move and count by multiplying by 2 (`counter *2`) each + time. Penguin will move and count to the power of 2 (`counter ^ 2`) each time. Who + will reach their flag first?" + Course 4 Play Labs For Loops 8a_markdown_instruction: "To finish our game, + we need to bring back the `increment` variable! Let's tie it to the level + of the game.\r\n\r\n1) Keep track of the number of times The Wizard is clicked. \r\n2) + If The Wizard is clicked at least 10 times before Dog counts to 30, raise + `increment` by 1 and start again. \r\n3) If The Wizard does not get clicked + at least 10 times, the game is over. " + Course 4 Playlab For Loop Freeplay_markdown_instruction: "**Freeplay:** Use + everything you've learned so far to make a game that includes a `for` loop!" + Course 4 Playlab For Loops 4b_markdown_instruction: "Now, these two characters + are going to race! \r\n\r\nEach of them will move `counter` steps at a time, + but their counters will have different values because of the `for` loops. \r\n\r\nCan + you change the **increment** in one of the loops so that the race is a tie?" + Course 4 Playlab For Loops 5b_markdown_instruction: "Adjust the interval on + these `for` loops so that the two characters end in the exact same place." + Course 4 Playlab For Loops 6b_markdown_instruction: "Now we're going to use + `for` loops in a whole different way!\r\n\r\nThis game gets hard quickly because + the time between disappearances shrinks fast!\r\n\r\n<hr/>\r\n\r\n**Edit this + `for` loop to create a game that's fun for you to play!** \r\n\r\n<hr/>\r\n\r\nPress + \"Run\" and click Madame Unicorn as many times as you can. Can you beat our + score of 24? " + Course 4 SCF 1_markdown_instruction: "**Functions Super Challenge:** Use the + suggested functions to draw four rows of hexagons. Notice how our even numbered + rows are shifted to the right?" + Course 4 SCF 1a_markdown_instruction: "**Functions Super Challenge:** Can you + figure out how to collect all of this nectar with the fewest blocks possible?\r\n" + Course 4 SCF 1b_markdown_instruction: "**Functions Super Challenge:** Can you + figure out how to collect all of this honey with the fewest blocks possible?\r\n\r\n" + Course 4 SCF 2_markdown_instruction: "**Functions Super Challenge:** Use what + you learned in the previous level to draw an image like this.\r\n\r\n*Note: + The code becomes more simple if you incorporate parameters.* " + Course 4 SCF 3 Fail 1_markdown_instruction: "**Functions Super Challenge #1:** + \r\n\r\n" + Course 4 SCF 3 Fail 2_markdown_instruction: "**Functions Super Challenge #1:** + \r\n\r\n" + Course 4 SCF 3_markdown_instruction: "**Functions Super Challenge:** Use what + you learned in the previous level to draw an image like this.\r\n\r\n*Note: + The code becomes more simple if you incorporate parameters.*\r\n\r\n<br/>\r\n<img + src=\"https://images.code.org/d3d6a51fafdcc0a09a5c6b0e0f3c2b92-image-1446239805818.08.59.png\" + width=\"300px\"/>\r\n<br/> " + Course 4 SCFL 1_markdown_instruction: "**For-Loops Super Challenge:** Solve + this puzzle with the fewest number of blocks possible." + Course 4 SCFL 1a_markdown_instruction: "**For Loops Super Challenge:** Can + you get Skrat to his acorn using as few blocks as possible?\r\n\r\n" + Course 4 SCFL 1b_markdown_instruction: "**For Loops Super Challenge:** Can + you get Skrat to his acorn using as few blocks as possible?\r\n" + Course 4 SCFL 2_markdown_instruction: "**For-Loops Super Challenge:** Solve + this puzzle with the fewest number of blocks possible. \r\n<br/>\r\n" + Course 4 SCFL 3_markdown_instruction: "**For-Loops Super Challenge:** Can you + figure out how to re-create this drawing? \r\n\r\n<img src=\"https://images.code.org/724b2efa8aefe863bd0d6491a3f1590f-image-1445563707400.26.50.png\" + width=\"350px\"/>\r\n" + Course 4 SCFL 4_markdown_instruction: "**For-Loops Super Challenge:** Can you + figure out how to re-create this drawing? \r\n\r\n<img src=\"https://images.code.org/407f502735beec686187451bdf67aada-image-1446002848700.59.34.png\" + width=\"350px\"/>" + Course 4 SCFL 5_markdown_instruction: "**For-Loops Super Challenge #5:** Can + you figure out how to re-create this drawing? \r\n\r\n<img src=\"https://images.code.org/407f502735beec686187451bdf67aada-image-1446002848700.59.34.png\" + width=\"350px\"/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Hints</b></summary>\r\n\t<br/><br/>\r\n\t<h5>\r\n\t<details>\r\n\t<summary><b>Hint + #1</b></summary>\r\n \t<br/>\r\n \tThe color change happens using the + `set color with red, green, blue` block. Red is always the value of `counter`, + green is always `255 - counter`, and blue remains constant at 255 exactly.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint + #2</b></summary>\r\n \t<br/>\r\n \tEach shape is a square with sides + that are `counter` pixels long, starting with 5px, and increasing by 5px all + the way up to 200px.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Hint + #3</b></summary>\r\n \t<br/>\r\n \tThe artist turns 15 degrees between + each square.\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n \r\n <h5>\r\n\t<details>\r\n\t<summary><b>Solution</b></summary>\r\n \t<br/>\r\n \t<br/>\r\n \t<img + src=\"https://images.code.org/0bf4c87e33459f832258939ec53ad595-image-1446002848701.59.15.png\" + width=\"450px\"/>\r\n \t<br/><br/>\r\n </details>\r\n\t</h5>\r\n</details>\r\n</h4>" + Course 4 SCFL 6_markdown_instruction: "**For-Loops Super Challenge:** Can you + figure out how to re-create this drawing with a single loop? \r\n\r\n<img + src=\"https://images.code.org/b0d15d06465d645c5ca533e5da6387b3-image-1446075597132.36.04.png\" + width=\"350px\"/>" + Course 4 SCFL 7_markdown_instruction: "**For-Loops Super Challenge:** The artist + wants to catch some waves! Can you figure out how to re-create this drawing? + \r\n\r\n<img src=\"https://images.code.org/fba3423f2e9a405d4d3859de32cdb0f3-image-1446102880655.13.36.png\" + width=\"350px\"/>" + Course 4 SCFP 1_markdown_instruction: "Create a function with parameters that + allows the artist to jump backward and forward by x pixels, and also up and + down by y pixels (using positive and negative numbers)." + Course 4 SCV 1_markdown_instruction: "<img src=\"https://images.code.org/7469d6b9aaaae532d864caecb65bd2cc-image-1444706295435.54.39.png\" + width=\"250px\"/>\r\n\r\n**Variables Super Challenge:** You've now learned + everything you need to know to make a pattern like this! This puzzle is meant + to be difficult. Can you stick with it until you figure out the solution?" + Course 4 SCV 2_markdown_instruction: "<img src=\"https://images.code.org/85f0b27009edd86eff78692004b9ed52-image-1444712655590.02.32.png\" + width=\"250px\"/>\r\n\r\n**Variables Super Challenge:** You've now learned + everything you need to know to make a pattern like this! This puzzle is meant + to be difficult. Can you stick with it until you figure out the solution?" + Course 4 SCV 3_markdown_instruction: "**Variables Super Challenge:** You've + now learned everything you need to know to solve this puzzle! This game is + meant to be difficult. Can you stick with it until you figure out the solution?\r\n\r\n<hr/>\r\n\r\nNow + for a game of tag! Tag Cat to get 2 points. Tag Penguin to get 3 points. Get + exactly 10 points to win!\r\nBut be careful, when Cat and Penguin tag each + other, they take points away.\r\n\r\n<strong>\r\nAdd the blocks necessary + to make this game work the way it's been explained. \r\n- How will you get + Dog to move in all directions using the arrow keys? \r\n- How will you add + points when Dog tags Cat or Penguin? \r\n- How will you subtract points when + Cat and Penguin touch?\r\n</strong>\r\n\r\n<hr/>\r\n\r\n" + Course 4 SCV 4_markdown_instruction: "**Variables Super Challenge:** Solve + this puzzle with the fewest number of blocks possible.\r\n" + Course 4 SCV 5_markdown_instruction: "**Variables Super Challenge:** Solve + this puzzle with the fewest number of blocks possible.\r\n\r\n" + Course 4 SCV 6_markdown_instruction: "<img src=\"https://images.code.org/499fc71a0a06bacb68a9789ad57f8148-image-1445574373673.16.44.png\" + width=\"250px\"/>\r\n\r\n**Variables Super Challenge:** You've now learned + everything you need to know to make a pattern like this! This puzzle is meant + to be difficult. Can you stick with it until you figure out the solution? " + Course 4 SCVP 1_markdown_instruction: "Create a function with parameters that + allows the artist to jump backward and forward by x pixels, and also up and + down by y pixels (using positive and negative numbers)." + Course 4 Variables Assessment_markdown_instruction: "Can you create this image + using a variable for `sides`? Each line should be 50 pixels long." + Crack Random Substitution_markdown_instruction: "# Break a random substitution + cipher!\r\n\r\nThis version of the tool gives you more information about the + encrypted text and more options for how to try out different substitutions.\r\n\r\n### + Different ways to analyze text\r\n- Play with some of the sorting options + available in the Random substitution cipher tab to get different views on + the letter frequencies in the input text as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\n### + Different ways to substitute\r\n- To substitute a letter you can drag a blue + letter of the alphabet directly underneath the orange letter you want changed + in the original ciphertext.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n### + Play. Always play.\r\n- There are other ways to analyze and substitute characters + that you can find by clicking on the buttons and trying out whatever you like.\r\n- + Remember: you can't break it :)\r\n\r\nSee how long it takes you to crack + the cipher! Is this a good method of encrypting secret data?\r\n\r\n<img src=\"http://code.org/api/hour/finish_encryption.png\">" + Crack a Caesar Cipher_markdown_instruction: "# Crack a Caesar cipher!\r\n\r\nThis + tool lets you play with text and do Caesar ciphers. You can use this to either + encrypt a message or decrypt it.\r\n\r\n# Do this\r\n- Load a **Sample message** + from the message dropdown. This will load a message that has been encrypted + with a Caesar cipher.\r\n\r\n![](https://images.code.org/347139486c8c729bf3c6e72ce67da878-image-1476286380409.gif)\r\n\r\n- + Using the buttons in the Caesar substitution tab, you can shift the alphabet + forwards or backwards to try to unscramble the message.\r\n\r\n![](https://images.code.org/ef9ebc16d2f1442dc46fba9bd48b5d43-image-1476285966821.gif)\r\n\r\nSee + how long it takes you to crack the cipher! Is this a good method of encrypting + secret data?\r\n\r\n<img src=\"http://code.org/api/hour/begin_encryption.png\">\r\n\r\n" + Data Visualizations 101_markdown_instruction: "## Data Visualization 101: How + to design charts and graphs\r\n\r\nIn lesson 10, students evaluate a curated + set of visualizations based on how effective they are at clearly and accurately + communicating what they're representing. After they've done this evaluation + for themselves, they explore this resource, which formally introduces the + names of the different types of charts they've been seeing and goes into + detail about what types of data each chart can represent most appropriately, + as well as best practices for designing each type of chart.\r\n\r\n" + Designing Assessment Questions_markdown_instruction: "## Designing Test Questions\r\n\r\nThe + following resource is from the University of North Carolina Charlotte's Center + for Teaching and Learning. In it you will find a breakdown of the uses, tradeoffs + for common assessment types, along with tips for writing good items.\r\n\r\n\r\n\r\n" + 'Discovery Learning: Definition and History_markdown_instruction': "The following + link is a resource that shows some of the history behind discovery learning: + " + 'Discovery Learning: Principals and Techniques_markdown_instruction': "The + following link is a resource that shows the principles and techniques of discovery + learning: " + 'Discovery Learning: Principles and Techniques_markdown_instruction': "The + following link is a resource that shows the principles and techniques of discovery + learning: " + Discovery learning definition and history_markdown_instruction: "The following + link is a resource that shows some of the history behind discovery learning: + " + Discovery learning techniques_markdown_instruction: "The following link is + a resource that shows the principles and techniques of discovery learning: + " + ECS Unit 2 Challenge Selection_markdown_instruction: "# Challenge Overview + > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your + challenge in the text box below.\r\n\r\n- Day 7-9: CSDT Cornrow Braiding\r\n- + Day 10-12: Binary\r\n- Day 13-14: Linear and Binary Search (Tower Building) + \r\n- Day 15-16: Sorting \r\n- Day 17: Minimal Spanning Trees\r\n- Day 18-21: + Unit Final Project\r\n\r\nNow that you've selected a lesson, head to the + forum and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### + <a href=\"http://forum.code.org/c/ecs/ecs-unit2\" target=_blank>Forums <i + class=\"fa fa-external-link\" /></a>" + ECS Unit 2 Challenge Submission_markdown_instruction: "# Share Out and Submit + > Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the + forum** and share: \r\n\r\n- Any data visualization or other artifact you + created in doing the \r\n - Use the “SHARE” button in code studio to get a + link to your program: \r\n- The assessment question or extending learning + activity that you produced for this lesson.\r\n- Notes for others who are + going to teach this lesson. This should include: \r\n - Advice for someone + who is going to teach this lesson (consider what was challenging about doing + the lesson, what you think students will struggle with, etc).\r\n - What ideas + do you have about how to structure and teach this lesson? what modifications + do you plan to make to the lesson?\r\n - What additional resources (if any) + might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit2\" + target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others + have posted! \r\nOnce you've posted your own challenge results, check out + what others have posted! Be sure to click through the other lessons as well + and read through their work. Remember, a big goal here is to learn from one + another so let people know when your find their suggestions helpful, or provide + your own ideas when you come across questions. Be sure to use the **heart** + feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a dirct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECS Unit 3 Challenge Selection_markdown_instruction: "# Challenge Overview + > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your + challenge in the text box below.\r\n\r\nHTML Beginners:\r\n\r\n- Day 3-4,5: + Basic HTML - Paragraph, Header, Strong, and EM Tags\r\n- Day 6--7: HTML - + Images\r\n- Day 14: HTML - Links\r\n\r\nCSS Beginners:\r\n\r\n- Day 8-10: + Basic CSS \r\n\r\nMore Experienced with HTML and CSS:\r\n\r\n- Day 11-13: + HTML and CSS \r\n- Day 17-19: HTML and CSS: Create Your Own Webpage\r\n- Day + 22-25: Unit Final Project\r\n- Day 18-21 Final Unit Project\r\n\r\n\r\nNow + that you've selected a lesson, head to the forum and **share which lesson + you plan to complete** for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit3\" + target=_blank>Forums <i class=\"fa fa-external-link\" /></a>" + ECS Unit 3 Challenge Submission_markdown_instruction: "# Unit 3 Challenge > + Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the forum** + and share: \r\n\r\n- Any data visualization or other artifact you created + in doing the \r\n - Use the “SHARE” button in code studio to get a link to + your program: \r\n- The assessment question or extending learning activity + that you produced for this lesson.\r\n- Notes for others who are going to + teach this lesson. This should include: \r\n - Advice for someone who is going + to teach this lesson (consider what was challenging about doing the lesson, + what you think students will struggle with, etc).\r\n - What ideas do you + have about how to structure and teach this lesson? what modifications do you + plan to make to the lesson?\r\n - What additional resources (if any) might + be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit3\" + target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others + have posted! \r\nOnce you've posted your own challenge results, check out + what others have posted! Be sure to click through the other lessons as well + and read through their work. Remember, a big goal here is to learn from one + another so let people know when your find their suggestions helpful, or provide + your own ideas when you come across questions. Be sure to use the **heart** + feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECS Unit 4 Challenge Selection_markdown_instruction: "# Challenge Overview + > What's your Challenge? \r\n\r\n## Enter the lesson you selected for your + challenge in the text box below.\r\n\r\nNew to Programming?\r\n\r\n- Day 2-3: + Scratch - Name Project\r\n- Day 4: Scratch - Knock Knock Joke\r\n- Day 5-6: + Scratch - Moving Sprites \r\n\r\nNew to Scratch:\r\n\r\n- Day 7-8: Scratch + - Event Driven Programming\r\n- Day 9: Scratch - Broadcast Roleplay\r\n- Day + 10-13: Scratch - Broadcasting\r\n\r\nSome Experience with Scratch and Programming:\r\n\r\n- + Day 18, 19: Rock Paper Scissors and Timer\r\n- Day 20-23: Scratch - Timing + Game\r\n- Day 25-30: Unit Final Project\r\n\r\n\r\n\r\nNow that you've selected + a lesson, head to the forum and **share which lesson you plan to complete** + for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit4\" + target=_blank>Forums <i class=\"fa fa-external-link\" /></a>" + ECS Unit 4 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share + your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any + data visualization or other artifact you created in doing the \r\n - Use the + “SHARE” button in code studio to get a link to your program: \r\n- The assessment + question or extending learning activity that you produced for this lesson.\r\n- + Notes for others who are going to teach this lesson. This should include: + \r\n - Advice for someone who is going to teach this lesson (consider what + was challenging about doing the lesson, what you think students will struggle + with, etc).\r\n - What ideas do you have about how to structure and teach + this lesson? what modifications do you plan to make to the lesson?\r\n - What + additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### + <a href= \"http://forum.code.org/c/ecs/ecs-unit4\" target=_blank> Head to + the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce + you've posted your own challenge results, check out what others have posted! + Be sure to click through the other lessons as well and read through their + work. Remember, a big goal here is to learn from one another so let people + know when your find their suggestions helpful, or provide your own ideas when + you come across questions. Be sure to use the **heart** feature on the forum + to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECS Unit 5 Challenge Selection_markdown_instruction: "# What's your Challenge? + \r\n\r\n## Enter the lesson you selected for your challenge in the text box + below.\r\n\r\n- Day 1 - 3: Room data project, set up final project\r\n- Day + 4 - 5: Developing research questions\r\n- Day 6 - 7: Building group norms\r\n- + Day 8: Check in Day\r\n- Day 9 - 11: Maps, identifying variables, subsetting + data, sorting data, frequency of types.\r\n- Day 12: Bubble Charts\r\n- Day + 13: Review: Bubble Charts\r\n- Day 14 - 15: Bar Plots\r\n- Day 16: Mosaic + Plots\r\n- Day 17: Review: Bar and Mosaic Plots\r\n- Day 18 - 20: Mean, Median, + Minimum, Maximum, Histograms, Box Plots\r\n- Day 21: Review: Mean, Median, + Minimum, Maximum\r\n- Days 22 - 24: Filtering Text data (remove punctuation, + remove case, remove stop words, stemming), Analyzing word counts.\r\n- Day + 25: Review: Text Data\r\n- Day 26 - 27: Incorporate data techniques into + final project\r\n- Day 28 - 29: Build project presentations\r\n- Day 30: Present + final project\r\n\r\nNow that you've selected a lesson, head to the forum + and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### + <a href=\"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank>Forums <i + class=\"fa fa-external-link\" /></a>" + ECS Unit 5 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share + your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any + data visualization or other artifact you created in doing the \r\n - Use the + “SHARE” button in code studio to get a link to your program: \r\n- The assessment + question or extending learning activity that you produced for this lesson.\r\n- + Notes for others who are going to teach this lesson. This should include: + \r\n - Advice for someone who is going to teach this lesson (consider what + was challenging about doing the lesson, what you think students will struggle + with, etc).\r\n - What ideas do you have about how to structure and teach + this lesson? what modifications do you plan to make to the lesson?\r\n - What + additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### + <a href= \"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank> Head to + the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce + you've posted your own challenge results, check out what others have posted! + Be sure to click through the other lessons as well and read through their + work. Remember, a big goal here is to learn from one another so let people + know when your find their suggestions helpful, or provide your own ideas when + you come across questions. Be sure to use the **heart** feature on the forum + to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECS Unit 6 Challenge Selection_markdown_instruction: "# Unit 6 Challenge Selection\r\n\r\n## + Enter the lesson you selected for your challenge in the text box below.\r\n + \r\nFrom the curriculum\r\n\r\n- Day: 1 What is a robot / what makes a computer + robotic?\r\n- Days: 2-3 Evaluate robot body designs and algorithms that control + robot behavior\r\n- Day: 4 Set up the Lego kit\r\n- Day: 5 Build robot base\r\n- + Day: 6-7 Introduce NXT brick features\r\n- Day: 8-9 Introduce NXT software\r\n- + Day: 10-13 Program robot using tutorials (using sensors for input)\r\n- Day: + 14 Describe RoboCup & RoboCupJunior\r\n- Day: 15 Human robot tic-tac-toe\r\n- + Days: 16-18 Program dancing robot\r\n- Days 19-23 Program rescue robot\r\n- + Days 24-33 Final projects and presentations\r\n\r\nAlternative Topics\r\n\r\n- + Online simulations\r\n- Physical computing options\r\n- Projects and portfolios\r\n\r\nNow + that you've selected a challenge topic, **share what you plan to do** for + your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit6\" + target=_blank>Head to the Forums <i class=\"fa fa-external-link-square\" /></a>" + ECS Unit 6 Challenge Submission_markdown_instruction: "# Submit a Link\r\n\r\n## Share + your Artifacts and Advice\r\n**Head to the forum** and share: \r\n\r\n- Any + data visualization or other artifact you created in doing the \r\n - Use the + “SHARE” button in code studio to get a link to your program: \r\n- The assessment + question or extending learning activity that you produced for this lesson.\r\n- + Notes for others who are going to teach this lesson. This should include: + \r\n - Advice for someone who is going to teach this lesson (consider what + was challenging about doing the lesson, what you think students will struggle + with, etc).\r\n - What ideas do you have about how to structure and teach + this lesson? what modifications do you plan to make to the lesson?\r\n - What + additional resources (if any) might be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### + <a href= \"http://forum.code.org/c/ecs/ecs-unit6\" target=_blank> Head to + the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others have posted! \r\nOnce + you've posted your own challenge results, check out what others have posted! + Be sure to click through the other lessons as well and read through their + work. Remember, a big goal here is to learn from one another so let people + know when your find their suggestions helpful, or provide your own ideas when + you come across questions. Be sure to use the **heart** feature on the forum + to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSPD Binary Odometer_markdown_instruction: "# Binary Odometer Widget\r\n\r\nThis + widget was created as part of the Code.org Computer Science Principles class. + It is a great additional resource for teaching binary!\r\n" + ECSPD Fence post Q1_markdown_instruction: "## Fence Post Problem:\n\nYou need + to build one side of a fence that is 12 yards long. This fence will be built + with fence posts and rails that connect one fence post to another. If each + fence post is 1 yard away from the next fence post, how many fence posts will + be needed for this side of the fence? How many fence posts will be needed + for a side of a fence that is N (where N > 0) yards long?\n" + ECSPD Handshake Q1_markdown_instruction: "## Handshake Problem #1:\n\nAssume + there are 20 people in a room, including you. You must shake hands with everyone + else in the room. How many hands will you shake? If there are N (where N>0) + people in the room, how many hands will you shake?\n" + ECSPD Online U1D1-2 Assessment 1_markdown_instruction: "Did you have coffee + this morning? If you did, odds are you used a computer. If you made the coffee + yourself, your coffee maker probably had a digital clock or a programmable + timer. If you bought it, the barista likely used a card reader with an electronic + cash register to take your payment. Think through your day and record how + many computers you used before sitting down in front of a desktop or a laptop + (or whatever device you are using right now). Don't forget the computers + in your car, your refrigerator, your alarm clock...\n" + ECSPD Online U1D1-2 Reflection_markdown_instruction: "You have experienced + the lesson both online and on the first day of the in-person PD. Additionally, + you have watched a video defining computers. What have you learned that you + can take back to your classroom? Use this space to record your ideas for this + lesson. You will have a chance to share your ideas and questions in a forum + in the following level.\n" + ECSPD Online U1D10 Reflection_markdown_instruction: "You have experienced the + lesson both online and on the first day of the in-person PD. Additionally, + you have watched a TED talk about the representation of data. What have you + learned that you can take back to your classroom? Use this space to record + your ideas for this lesson. You will have a chance to share your ideas and + questions in a forum in the following level." + ECSPD Online U1D11-14 Reflection_markdown_instruction: "You have experienced + part of this lesson online and have investigated other design tools. What + have you learned that you can take back to your classroom? How will you tackle + this lesson's unique challenges? Use this space to record your ideas for + this lesson. You will have a chance to share your ideas and questions in a + forum in the following level.\n" + ECSPD Online U1D15-16 Reflection_markdown_instruction: "You have experienced + the lesson on the first day of the in-person PD and have watched a TED talk + about the extent of the use of algorithms in the world. What have you learned + that you can take back to your classroom? Use this space to record your ideas + for this lesson. You will have a chance to share your ideas and questions + in a forum in the following level." + ECSPD Online U1D17-19 Assessment_markdown_instruction: "Take some time to look + over the lesson and the unplugged activity. Think about your classroom and + the space you have available to run the Turing Test Activity. How are you + planning to set up your classroom to best facilitate the Turing Test Activity?" + ECSPD Online U1D17-19 Reflection_markdown_instruction: "This is the last lesson + in the unit. How does it combine what was covered previously in the unit? + Now that you have taken time to examine this lesson, what have you learned + that you can take back to your classroom? Use this space to record your ideas + for this lesson. You will have a chance to share your ideas and questions + in a forum in the following level." + ECSPD Online U1D3-4 Reflection_markdown_instruction: "You have experienced + part of this lesson online and studied the components of computers. What have + you learned that you can take back to your classroom? Use this space to record + your ideas for this lesson. You will have a chance to share your ideas and + questions in a forum in the following level. " + ECSPD Online U1D5-7 Reflection_markdown_instruction: "You have experienced + this lesson in person and have examined additional resources online. What + have you learned that you can take back to your classroom? Use this space + to record your ideas for this lesson. You will have a chance to share your + ideas and questions in a forum in the following level." + ECSPD Online U1D8-9 Assessment_markdown_instruction: "List three points either + from the articles or the lesson plan that you would want to discuss with your + class. Describe one strategy you plan to use to facilitate discussion." + ECSPD Online U1D8-9 Reflection_markdown_instruction: "You have experienced + part of this lesson online and have read a few articles regarding the impact + of computers and the internet on communication. What have you learned that + you can take back to your classroom? Use this space to record your ideas for + this lesson. You will have a chance to share your ideas and questions in a + forum in the following level." + ECSPD Online U1Reflection_markdown_instruction: "## Telling the story of Unit + 1\n\nNow that you've explored all of the lessons and resources from Unit + 1, how would you describe the learning that happens? \n\nIn a few sentences, + tell the story of Unit 1, how the lessons relate and build off one another, + and what students will walk away with.\n" + ECSPD PD goals_markdown_instruction: "***Now that you've learned more about + the ECS Professional Development, let's consider your goals***\n\n<br>\n<br>\n__What + are your personal goals for your ECS PD experience (what do you hope to accomplish, + how do you hope to grow)?__ *NOTE: These goals might change over time, and + we'll revisit this your response as we go through the course so we can check + in on how we're progressing towards those goals.*\n\n\n" + ECSPD Personal Problem Solving Strategies_markdown_instruction: "# Problem + Solving Strategies\n### Make a list of Problem Solving Strategies\n\nWe have + all learned different problem solving strategies through out our lives. Some + work all the time and others only in certain situations. Make a list of all + the problem solving strategies you can think of. You will continue to add + to this list over the course of this unit PD. You can also share strategies + or find new strategies on the forum.\n\n### <strong><a href=\"http://forum.code.org/t/pd-discussion-topic-problem-solving-strategies/2086/1\" + target=\"_blank\">Problem Solving Strategies>></a></strong>\n<br>\n\n**Each + time you see this page pop up think about the problem solving strategies you + and your students will need for the current lesson. Then add to the list if + you think of new things.**\n" + ECSPD course goals_markdown_instruction: "# Documenting Your Course Goals\r\n\r\n## + Now that you know more about the ECS curriculum, let's consider your goals\r\n\r\n**What + are your goals for your ECS class?** *These goals will change over time, and + we'll revisit this your response as we go through PD so we can check in on + how we're progressing towards those goals.*\r\n\r\n**NOTE:** remember you + can change the size of the text box by clicking and dragging the bottom-right + corner of the box.\r\n" + ECSPD impact in program_markdown_instruction: "\n\n#### What connections do + you think might exist between the ideas covered in the videos you just watched + and the units of ECS that you learned about earlier?\n" + ECSPD program overlap_markdown_instruction: "\n#### Now that you've read more + about the ECS program, what relationship do you see between the curriculum + and Professional Development? What aspects of the two piece of the program + seem most important or interesting to you?\n" + ECSPD strategies_markdown_instruction: "# Classroom Strategies Journal\r\n\r\nThis + space is your **digital journal for documenting strategies** you've picked + up during Professional Development and while teaching the course. We'll revisit + this in online pd for each unit, and you should refer back to it while planning + lessons to remind yourself of strategies you want to try in class. \r\n\r\n\r\n" + ECSPD your goals_markdown_instruction: "__What are your goals for your ECS + class?__ *These goals will change over time, and we'll revisit this your + response as we go through the course so we can check in on how we're progressing + towards those goals.*\n" + ECSPD3-u5 pick a challenge_markdown_instruction: "# Challenge Overview > What's + your Challenge? \r\n\r\n## Enter the lesson you selected for your challenge + in the text box below.\r\n\r\n- Day 1 - 3: Room data project, set up final + project\r\n- Day 4 - 5: Developing research questions\r\n- Day 6 - 7: Building + group norms\r\n- Day 8: Check in Day\r\n- Day 9 - 11: Maps, identifying variables, + subsetting data, sorting data, frequency of types.\r\n- Day 12: Bubble Charts\r\n- + Day 13: Review: Bubble Charts\r\n- Day 14 - 15: Bar Plots\r\n- Day 16: Mosaic + Plots\r\n- Day 17: Review: Bar and Mosaic Plots\r\n- Day 18 - 20: Mean, Median, + Minimum, Maximum, Histograms, Box Plots\r\n- Day 21: Review: Mean, Median, + Minimum, Maximum\r\n- Days 22 - 24: Filtering Text data (remove punctuation, + remove case, remove stop words, stemming), Analyzing word counts.\r\n- Day + 25: Review: Text Data\r\n- Day 26 - 27: Incorporate data techniques into + final project\r\n- Day 28 - 29: Build project presentations\r\n- Day 30: Present + final project\r\n\r\nNow that you've selected a lesson, head to the forum + and **share which lesson you plan to complete** for your challenge.\r\n\r\n#### + <a href=\"http://forum.code.org/c/ecs/ecs-unit5\" target=_blank>Forums <i + class=\"fa fa-external-link\" /></a>" + ECSPD3-u5 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSPD3-u5 submit_markdown_instruction: "# Share Out and Submit > Submit Link\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nYou've just shared your Challenge + work on the forum. If you would like to receive payment for this online PD, + please submit a link to that forum post here so we can review! \r\n\r\nIn + order to get a direct link to your post, click the link icon directly under + your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSPD3-u6 pick a challenge_markdown_instruction: "# Unit 6 Challenge > What's + your Challenge?\r\n\r\n## Enter the lesson you selected for your challenge + in the text box below.\r\n \r\nFrom the curriculum\r\n\r\n- Day: 1 What is + a robot / what makes a computer robotic?\r\n- Days: 2-3 Evaluate robot body + designs and algorithms that control robot behavior\r\n- Day: 4 Set up the + Lego kit\r\n- Day: 5 Build robot base\r\n- Day: 6-7 Introduce NXT brick features\r\n- + Day: 8-9 Introduce NXT software\r\n- Day: 10-13 Program robot using tutorials + (using sensors for input)\r\n- Day: 14 Describe RoboCup & RoboCupJunior\r\n- + Day: 15 Human robot tic-tac-toe\r\n- Days: 16-18 Program dancing robot\r\n- + Days 19-23 Program rescue robot\r\n- Days 24-33 Final projects and presentations\r\n\r\nAlternative + Topics\r\n\r\n- Online simulations\r\n- Physical computing options\r\n- Projects + and portfolios\r\n\r\nNow that you've selected a challenge topic, **share + what you plan to do** for your challenge.\r\n\r\n#### <a href=\"http://forum.code.org/c/ecs/ecs-unit6\" + target=_blank>Head to the Forums <i class=\"fa fa-external-link-square\" /></a>" + ECSPD3-u6 submit forum link_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link to your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review!\r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below): \r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSU2 Challenge Submission_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Share your Artifacts and Advice\r\n**Head to the forum** + and share: \r\n\r\n- Any data visualization or other artifact you created + in doing the \r\n - Use the “SHARE” button in code studio to get a link to + your program: \r\n- The assessment question or extending learning activity + that you produced for this lesson.\r\n- Notes for others who are going to + teach this lesson. This should include: \r\n - Advice for someone who is going + to teach this lesson (consider what was challenging about doing the lesson, + what you think students will struggle with, etc).\r\n - What ideas do you + have about how to structure and teach this lesson? what modifications do you + plan to make to the lesson?\r\n - What additional resources (if any) might + be helpful in teaching this lesson\r\n\r\n\r\n<hr>\r\n### <a href= \"http://forum.code.org/c/ecs/ecs-unit2\" + target=_blank> Head to the Forum >></a>\r\n<hr>\r\n\r\n## Check out what others + have posted! \r\nOnce you've posted your own challenge results, check out + what others have posted! Be sure to click through the other lessons as well + and read through their work. Remember, a big goal here is to learn from one + another so let people know when your find their suggestions helpful, or provide + your own ideas when you come across questions. Be sure to use the **heart** + feature on the forum to vote for posts you find particularly useful! \r\n\r\n<br/><br/>\r\n\r\n## Submit + the Link for your Forum Post for Review\r\n\r\nIf you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a dirct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSU3 Challenge Submission_markdown_instruction: "# Share Out and Submit > + Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a dirct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + ECSU4 Challenge Submission fin_markdown_instruction: "# Share Out and Submit + > Submit Link\r\n\r\n## Submit the Link for your Forum Post for Review\r\n\r\nYou've + just shared your Challenge work on the forum. If you would like to receive + payment for this online PD, please submit a link to that forum post here so + we can review! \r\n\r\nIn order to get a direct link to your post, click the + link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)" + Escape Room Example_markdown_instruction: "# Room Escape\r\n\r\nIn today's + workshop you are going to be working on making a room escape app! This level + has an example app that you should play around with to get the feel for what + you will be creating.\r\n\r\n# Do This\r\n\r\n* Click RUN to start the app\r\n* + Try to find the key that will open the door." + Eval Booleans 1_markdown_instruction: "Boolean operators (like >, <, =) allow + us to compare different values, returning either *true* or *false*. Click + \"Run\" to see how this expression evaluates." + Eval Booleans 2_markdown_instruction: "Can you set the values so that this + expression evaluates as *true*?" + Eval Booleans 3_markdown_instruction: "The `string-length` function returns + the number of characters in a string (including spaces!) - make this code + evaluate to *true*." + Eval Booleans 4_markdown_instruction: "Here's an Evaluation Block called `and` + - it returns *true* if both of its parameters are *true*, otherwise it returns + *false*. Edit the x variable so that this expression returns *true*." + Eval Booleans 5_markdown_instruction: "This `or` block returns *true* if either + of its parameters is *true*. Otherwise, if both parameters are *false* it + will return *false*. Set the y variable to a value that will cause this expression + to return *false*." + Eval Booleans 6_markdown_instruction: "Here's one more boolean block called + `not`. This block flips *true* to *false*, or *false* to *true*. If you wrap + this block of code in a NOT block, it should return *true* (because we are + asking if the two expressions do NOT produce equal values)." + Eval Booleans Free Play_markdown_instruction: "Free Play: Try out some creations + of your own using Booleans." + Eval Cond 4_markdown_instruction: "We can use the `string=?` function to make + conditionals that respond to text input. Here's a function called `green + shape` that takes a string for the type of shape. Complete the conditions + so that the correct solid green shape is returned when the function is run + with \"circle\", \"triangle\", \"square\", or \"rectangle\"." + Eval Cond 5_markdown_instruction: "Here's a similar function `red shape` with + an additional variable for size. Complete the conditionals so the correct + solid red image of a given size is drawn for \"circle\", \"triangle\", and + \"star\"." + Eval Contracts 4_markdown_instruction: "The `scale` function returns an image + that is either larger or smaller than the input image. Try scaling this circle + by a factor of 10. How is the returned image different than if you'd just + made a circle of that size in the first place?" + Eval Contracts A_markdown_instruction: "Use the `star` function to produce + a solid red star with a 60 pixel radius" + Eval Contracts C_markdown_instruction: "Check out the `rotate` function - can + you use it to rotate this 90 pixel green square by 45 degrees?" + Eval Contracts E_markdown_instruction: "Try using the `text` function to write + this \"Hello, world!\" in teal at size 40." + Eval Define Funcs 1_markdown_instruction: "Here's a new function called `green-triangle` + that takes a single Number for size and produces a green triangle. Use the + new function to create a 125 pixel green triangle" + Eval Define Funcs 2_markdown_instruction: "Let's look inside that `green-triangle` + function to see how it works. Can you modify it so that the `green-triangle` + function always draws outlined green triangles? **Don't forget to change + the examples too!**" + Eval Define Funcs 3_markdown_instruction: "Here's the start of another new + function called `purple-circle` with a domain of one Number (the radius) and + a range of Image. The body of the function is broken though, it always draws + a circle of 50 pixel radius instead of using the radius parameter. Replace + the current Number with the `radius` block from the domain.\r\n\r\nWhen you've + fixed the function, test your new function with a 150 pixel radius." + Eval Define Funcs 4_markdown_instruction: "Create a new function called `aqua-star` + that has a Domain of a single Number for radius and returns an aqua star of + the given radius. Run your new function with a radius of 75." + Eval Define Funcs 5_markdown_instruction: "Let's use that `aqua-star` function + to make a row of different sized stars. From left to right, the stars should + have radii of 25, 50, and 75." + Eval Define Funcs Test_markdown_instruction: "Here's the start of another + new function called `purple-circle` with a domain of one Number (the radius) + and a range of Image. The body of the function is broken though, it always + draws a circle of 50 pixel radius instead of using the radius parameter. Replace + the current Number with the `radius` block from the domain.\r\n\r\nWhen you've + fixed the function, test your new function with a 150 pixel radius." + Eval Defining Vars Free Play 1_markdown_instruction: "Free Play: We've provided + a function that fills your screen with `my-image`. Change `my-image` to see + what patterns you can make." + Eval Design Recipe .1_markdown_instruction: "Here's a Design Recipe for a + function called `square-circle` with domain Number String and range Image. + Click Edit to write the function definition (you will see two examples provided)." + Eval Design Recipe 3_markdown_instruction: "The Design Recipe for `wide-rect` + already has a contract and one example. Can you write a second example and + then complete the definition? The `wide-rect` function should produce a rectangle + of given color that is twice as wide as it is high." + Eval Design Recipe 4_markdown_instruction: "Use the Design Recipe to create + a function `starburst`. When given a number of points and an outer radius, + `starburst` returns a yellow radial star with given points, and an inner radius + that is half the outer radius." + Eval Design Recipe 5_markdown_instruction: "Write a function `striped-flag` + that takes two colors and produces a flag that is 250 pixels wide, 150 pixels + tall, with three even horizontal stripes of given colors, in the order color2, + color1, color2." + Eval Design Recipe 6_markdown_instruction: "Write a function `large-polygon` + that should output a solid polygon of given sides and color that takes up + most of the window, regardless of the number of sides. To make sure that the + polygon doesn't get too large as you increase the number of sides, side length + should be inversely proportional to side number, with a length of **(800/sides)**." + Eval Design Recipe Free Play_markdown_instruction: "Free Play: Use the Design + Recipe to create some functions of your own design" + Eval Strings Images .1_markdown_instruction: "So far we've only dealt with + a single type of data, Numbers. Another type of data is a String, which is + any combination of letters, numbers, or other characters wrapped in quotation + marks. Run the String \"Hello, world!\" and see what happens." + Eval Strings Images .2_markdown_instruction: "The `string-append` function + takes two Strings and returns a single combined String. Add a String \"Universe\" + to the second argument of `string-append`." + Eval Strings Images 1_markdown_instruction: "The third type of data we're + going to use is an Image. This `star` function takes in a Number and two Strings, + and it evaluates to an Image. Use this function to make a solid red star with + radius of 100." + Eval Strings Images 2_markdown_instruction: "Free Play: Every Evaluation Block + is color-coded to let you know which data type it returns and which types + it needs for its parameters. The last parameter of the triangle function takes + a String that controls its color - try some different colors to see what works." + Eval Strings Images 3_markdown_instruction: "Some functions can only take a + specific set of Strings, such as the second argument of this `circle` function, + which controls its style. Draw this orange outline circle using the special + String block with a dropdown to make sure you only use valid styles." + Eval Strings Images 4_markdown_instruction: "Try using the `rectangle` block + to draw this solid, red rectangle - it is 175 pixels wide and 100 pixels tall." + Eval Strings Images 5_markdown_instruction: "Try using this new Evaluation + Block called `overlay` to place a 100 pixel white triangle on top of a 200 + pixel red circle." + Eval Strings Images 6_markdown_instruction: "Use the overlay block to place + a 75 pixel radius yellow star on top of a 150 pixel long blue square." + Eval Strings Images 7_markdown_instruction: "The `offset` block lets you move + an image relative to where it would normally be placed. Use this block to + offset the square by 100 pixels on the y-axis." + Eval Strings Images 8_markdown_instruction: "Here's a different kind of star + block - it's called `radial-star` and it allows you to draw stars with any + number of points! Use it to create a 7 point solid orange star with an inner + radius of 75 pixels and an outer radius of 175 pixels." + Eval Strings Images Free Play_markdown_instruction: "Free Play: Explore the + blocks available to create something interesting. Make sure to share your + favorite creations." + Final Personal Website_markdown_instruction: "# Personal Website\r\n\r\nThis + is it! You have been working on your Personal Website for the whole unit. + Put the finishing touches on it and submit it to your teacher! Remember to + use the problem solving process as your guide in preparing your final product.\r\n\r\n# + Do This\r\n\r\n* Define: Read the rubric so you know what is expected\r\n* + Plan: Decide what you still need to work on and put those things in priority + order\r\n* Try: Implement your improvements to your personal website.\r\n* + Reflect: Get feedback from a classmate and decide what of that feedback to + act on.\r\n\r\nDon't forget to take a screenshot of your home page and save + it somewhere on your computer so you can find it later (*Need help with how + to screenshot? Check out this <a href=\"http://www.take-a-screenshot.org/\">website + </a>.*)" + Final Room Escape App_markdown_instruction: "# You've done it!\r\n\r\nYou + made a room escape! Now its time to customize it. \r\n\r\nConsider:\r\n\r\n* + Adding more rooms\r\n* Adding more things users can interact with in the rooms\r\n* + Add more style to the rooms" + Finalize Your Chaser Game v.1_markdown_instruction: "# Add an Image and Make + a Chaser Game!\r\n<img src=\"https://images.code.org/ed1e9852b33ca368cf8cd8e0b0159de7-image-1444336815528.gif\" + style=\"float: right\">\r\n\r\n**Now You Try it** - add an image to your app + and modify the code so that the image jumps around the screen rather than + the button. Your little game should have:\r\n\r\n* **Text** on the top of + the screen with a title or instructions for what to do.\r\n* **An image** + that \"runs away\" (moves randomly) based on some mouse event.\r\n\r\n**Tips:**\r\n + * **Hint** - the easy way to do this is to simply change the IDs in `onEvent` + and `setPosition` to respond to the image instead of the button.\r\n * Remove + the button from the app after the image is working. We don't need it anymore.\r\n + * Change the label text so that the instructions make sense for your game.\r\n + * The game is even more fun if you use the `mouseover` event instead of `click`\r\n\r\n**Optional + Extensions**:\r\n * Make the background interesting\r\n * Add another image + that runs away.\r\n * See what happens with the commands `hideElement` and + `showElement`\r\n * Have two UI elements where interacting with one controls + or does something to the other.\r\n\r\n**Finalize your \"Chaser Game v.1\"** + and click Finish.\r\n\r\n * **Note**: We'll revisit this game in the next + lesson where you can improve it. This is **just version 1**\r\n\r\n" + Food Fight!_markdown_instruction: "We've added one last function for you.\r\n<hr/>\r\n\r\n<h4>\r\nUse + an `if` statement to program your game to call the `level_up` function only + when `player_score` becomes greater than a certain number.<br/><br/>\r\n</h4>\r\n<i>For + example: `player_score` > 6</i>\r\n\r\n\r\n<hr/>\r\n<i>Play the game, and + make it to level 3 to move to the next puzzle.</i>" + Formative versus Summative Assessment_markdown_instruction: "The following + link is a resource that provides definitions and examples of formative and + summative assessments:" + Frequency Analysis_markdown_instruction: "# Break a random substitution cipher!\r\n\r\nMessages + encrypted with the **Caesar cipher** are very easy to crack. What if instead + of shifting the whole alphabet, we mapped every letter of the alphabet to + a random different letter of the alphabet? This is called a **random substitution + cipher**.\r\n\r\nIn this version of the tool, you'll be interacting more + with the graphs that show letter frequency. By analyzing the frequency of + the letters in the encrypted input message compared to the frequency of letters + in a typical piece of English prose, you can start to narrow in on what some + of the letter mappings might be. Did you know that *'E'* is the most common + letter used in the English language? Maybe the most common letter in your + encrypted text maps to the letter *'E'*, but maybe not! You'll have to + do a bit of guess and check to see if that substitution makes sense.\r\n\r\n\r\n# + Do this\r\n- Load the **Sample message (hard)** from the message dropdown. + This will load a message that has been encrypted with a random substitution + cipher. \r\n![](https://images.code.org/04c6230c9607110126581c298bc09183-image-1443569176380.gif)\r\n\r\n- + You will crack the message by guessing what each letter of the alphabet contained + in the original ciphertext should be changed to. You can do so by dragging + the blue letters of the alphabet directly underneath the orange letter you + want changed in the original ciphertext. Letters that have been changed using + your guesses will no longer be highlighted orange in the message window on + the left.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n- + Play with some of the sorting options available in the Random substitution + cipher tab to get different views on the letter frequencies in the input text + as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\nSee + how long it takes you to crack the cipher! Is this a good method of encrypting + secret data?\r\n\r\n" + 'Game Lab Workshop: Random_markdown_instruction': "# Randomized Shapes\r\n\r\nLet's + see how we can use randomization in our drawings. Each of the inputs from + the shape blocks you've seen can be replaced with calls to `randomNumber()`. + Try drawing some images that are slightly randomized each time. You might + try changing the position randomly by using `randomNumber()` in place of the + x or y inputs, or you could change the size of the shape itself by randomizing + the length or width inputs.\r\n\r\n# Do This\r\n\r\nPick a shape command (`ellipse()`, + `rect()` or `regularPolygon()`) and use `randomNumber()` in place of one or + more of the inputs. Make sure you run it a few times so you can see the effect + of randomization.\r\n" + GameLab Livecode Demo 1_markdown_instruction: "# Animating Sprites\r\n\r\nTo + start this demo, we'll do the following:\r\n\r\n1. Create a new sprite with + the `createSprite()` block\r\n2. Click on the Animation tab and select an + image for the sprite\r\n3. Set the animation using the `sprite.setAnimation()` + block\r\n4. Move the sprite by incrementing (slowly increasing) its x and + y value using the draw loop\r\n" + GameLab Livecode Demo 2_markdown_instruction: "# Move With Keys\r\n\r\nNow + that we've got a sprite on the screen, let's make it respond to keyboard + input.\r\n\r\n1. Read through the blocks at lines 14 and 21 - what is going + on?\r\n2. Add two more conditionals to respond to the up and left keys\r\n3. + Experiment with some of the additional provided blocks, such as `sprite.scale` + and `sprite.rotation`\r\n" + GameLab Livecode Demo 3_markdown_instruction: "# Sprite Interactions\r\n\r\nAt + this point there's one sprite on screen, and we can move it around with the + arrow keys. Now let's add a second sprite and get the two interacting.\r\n\r\n1. + Add a new animation in the animation tab\r\n2. Create a new sprite called + \"target\" and set its animation\r\n3. Use the `sprite.isTouching()` block + in a conditional to make the target sprite react to the player sprite\r\n\t* + Make the target sprite shrink or grow\r\n * Make the target move to a random + location\r\n * Make the target rotate\r\n" + GameLab Livecode Demo 4_markdown_instruction: "# Make it Your Own\r\n\r\nNow + that we've created a simple game, take some time to explore the environment + on your own and add to your game. You'll notice that there are a bunch of + new blocks available to you in the toolbox - take a look around and try some + out!" + 'GameLab Workshop: Draw Loop Shapes_markdown_instruction': "# Experiment with + the Draw Loop\r\n\r\nHere's a simple app that we've slowed down by changing + the _frame rate_ (the number of times the draw loop is run each second).\r\n\r\nWith + a neighbor:\r\n\r\n* Read through the code and discuss what you think it will + do\r\n* Run and observe the program\r\n* Try reordering the blocks to see + how it impacts the drawing\r\n\t* Can you make the rectangle appear above + the circle?\r\n * What happens if you place one of the commands before + or after the draw loop?\r\n * Try adding some new shapes to the program" + Gamelab AllTheThings Embed Level_markdown_instruction: "# How Many Counter + Variables?\r\n\r\nYou can use counter variables (`x = x + 1` , `x = x - 1` + , `x = x + 0.5`, etc.) to animate a scene. What happens when scenes start + to get larger and more complicated? \r\n\r\nWatch this animation. With a partner: + \r\n\r\n* Decide how many counter variables you would need to create this + scene\r\n* Decide what you would name your counter variables\r\n* **Draw a + Labels-Values-Connectors** diagram of your variables at the first frame of + this scene. Don't worry about getting the values exactly correct.\r\n* Share + your answer with another group **and be ready to share your ideas with the + class**" + Geometric Pattern_markdown_instruction: "**Project Idea:** Create a pattern + using geometric ideas like shapes. This requires persistence and planning!" + Geometric Sun_markdown_instruction: "**Project Idea:** Create a pattern using + geometric ideas like shapes. This requires persistence and planning!" + Glossary O_markdown_instruction: "## Vocabulary\n\nEncouraging students to + learn and use 'professional' terms enables them to communicate correctly + and efficiently with others and builds their knowledge such that it can be + further developed without having to relearn terms and concepts at a later + time. The terms and concepts used in the unplugged lessons are defined using + words that young students can understand.\n\n# TEACHING TIP\nBest practice + is to introduce the terms with easy-to-understand language, relate the terms + to previous experiences, use the terms repeatedly beyond the lesson itself + throughout the entire course (and in other situations) when appropriate, and + reinforce students' use in oral and written communication.\n\nThe following + terms are introduced in an unplugged lesson as either a Vocabulary word or + as a term related to the online Blockly programming interface. Terms are subsequently + reinforced in the following online puzzles and activities. Most terms appear + multiple times throughout the courses and lessons providing the students with + many opportunities to deepen their understanding and assimilate the words + into conversations, both in and outside of the classroom.\n\nThe course and + lesson numbers after each term indicate the unplugged lessons in which the + term is emphasized.\n\n# Look through this list of vocabulary words and then + answer the prompt at the bottom of the page. You don't have to learn all + the vocabulary words all right now, but you they are here so you can refer + back them during this online course. \n\nabstraction\n\nPulling out specific + differences to make one solution work for multiple problems students.\n\n(Course + 3: Lesson 1)\n\nalgorithm\n\nA list of steps to finish a task. A set of instructions + that can be performed with or without a computer. For example, the collection + of steps to make a peanut butter and jelly sandwich is an algorithm.\n\n(Course + 1: Lessons 1, 6 | Course 2: Lessons 1, 2 | Course 3: Lessons 1, 10)\n\nbinary\n\nA + way of representing information using only two options.\n\n(Course 2: Lesson + 14)\n\nBlockly\n\nThe visual programming language used in Code.org's online + learning system for K-5 students. (Course 1: Lesson 3)\n\nbug\n\nAn error + in a program that prevents the program from running as expected. (Course 2: + Lesson 9)\n\ncode\n\nOne or more commands or algorithm(s) designed to be carried + out by a computer. See Program. (Course 1: Lesson 2)\n\ncommand\n\nAn instruction + for the computer. Many commands put together make up algorithms and computer + programs. (Course 1: Lesson 2)\n\ncomputational thinking\n\nMental processes + and strategies that include: decomposition, pattern matching, abstraction, + algorithms (decomposing problems into smaller, more manageable problems, finding + repeating patterns, abstracting specific differences to make one solution + work for multiple problems, and creating step-by-step algorithms). (Course + 3: Lesson 1)\n\ncomputer science\n\nA field in which people use the power + of computers to solve big problems. (Course 1: Lesson 2)\n\nconditionals\n\nStatements + that only run under certain conditions or situations. (Course 2: Lesson 12)\n\ncrowdsourcing\n\nGetting + help from a large group of people to finish something faster. (Course 3: Lesson + 19)\n\ndata\n\nQuantities, characters, or symbols that are the inputs and + outputs of computer programs. (Course 2: Lesson 14 | Course 3: Lessons 1)\n\ndebugging\n\nFinding + and fixing errors in programs. (Course 2: Lesson 9)\n\ndecompose\n\nBreak + a problem down into smaller pieces. (Course 3: Lesson 1)\n\ndigital citizen\n\nSomeone + who acts safely, responsibly, and respectfully online. (Course 3: Lesson 20)\n\ndigital + footprint\n\nThe information about someone on the Internet. (Course 2: Lesson + 18)\n\nDNS (domain name service)\n\nThe service that translates URLs to IP + addresses. (Course 3: Lesson 18)\n\nDSL/cable\n\nA method of sending information + using telephone or television cables. (Course 3: Lesson 18)\n\nevent\n\nAn + action that causes something to happen. (Course 1: Lesson 15 | Course 2: Lesson + 15)\n\nevent-handler\n\nAn action or event that is being constantly monitored + for by the computer. When you write code for the computer to perform after + that an action occurs, that code, the event-handler, will run every time the + action is performed without having to put the commands inside of a loop. Many + event-handlers are human-initiated. For example: an event handler might respond + when the user clicks the mouse by making the bird flap its wings. \"When the + mouse is clicked\" is an event-handler. (Course 1: Lesson 15 | Course 2: Lesson + 15)\n\nfiber optic cable\n\nA connection that uses light to transmit information. + (Course 3: Lesson 18)\n\nfunction\n\nA piece of code that you can easily call + over and over again. Functions are sometimes called 'procedures.' A function + definition is a segment of code that includes the steps performed in the function. + A function call is the code segment, typically within the main logic of the + program, which invokes the function. (Course 3: Lesson 4, 9)\n\nInternet\n\nA + group of computers and servers that are connected to each other. (Course 1: + Lesson 17 | Course 3: Lessons 18, 20)\n\nIP address\n\nA number assigned to + any item that is connected to the Internet. (Course 3: Lesson 18)\n\niteration\n\nA + repetitive action or command typically created with programming loops. (Course + 1: Lesson 12 | Course 2: Lesson 5)\n\nloop\n\nThe action of doing something + over and over again. (Course 1: Lesson 12 | Course 2: Lesson 5)\n\npackets\n\nSmall + chunks of information that have been carefully formed from larger chunks of + information. (Course 3: Lesson 18)\n\npattern matching\n\nFinding similarities + between things. (Course 3: Lesson 1)\n\npersistence\n\nTrying again and again, + even when something is very hard. (Course 1: Lesson 9)\n\nprogram\n\nA program + is an algorithm that has been coded into something that can be run by a machine. + (Course 1: Lesson 2 | Course 2: Lesson 1 | Course 3: Lesson 10)\n\nrun program\n\nTo + have the computer execute the commands you've written in your program. (Course + 1: Lesson 4)\n\nservers\n\nComputers that exist only to provide things to + others. (Course 3: Lesson 18)\n\ntoolbox\n\nThe tall grey bar in the middle + section of Code.org's online learning system where all the commands you can + use to write your program are displayed. (Course 1: Lesson 4)\n\nURL (universal + resource locator)\n\nAn easy-to-remember address for calling a web page (like + www.code.org). (Course 3: Lesson 18)\n\nusername\n\nA name you make up so + that you can see or do things on a website, sometimes called a \"screen name.\" + (Course 1: Lesson 18)\n\nvariable\n\nA placeholder for a piece of information + that can change. (Course 3: Lesson 4)\n\nWi-Fi\n\nA wireless method of sending + information using radio waves. (Course 3: Lesson 18)\n\nworkspace\n\nThe white + area on the right side of Code.org's online learning system where you drag + and drop commands to build your program. (Course 1: Lesson 4)\n\n### What + is one way you can include computer science vocabulary terms in your class?\n" Hardware Accessibility_markdown_instruction: "# Hardware Accessibility: Screen Size\r\n\r\nAnother thing to consider about accessibility for different users is the size of the device they are using to view the web page. You can do @@ -15439,13 +12983,6 @@ en: , **beans** ![picture of beans](https://images.code.org/5e379ff595be17722237d9685b29fd96-image-1472493220871.png) , or **pumpkins** ![picture of pumpkin](https://images.code.org/03cf76a978e0788ccb53f14e9d264695-image-1472493237148.png) . Can you write some code to pick all the crops, no matter what they are?" - harvey_pixelation_markdown_instruction: "# Make your own image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* - Encode an image of anything you like using `binary`.\r\n* The binary language - will be represented with `0` and `1` only.\r\n* You might want to do some - planning and sketching with graph paper first. \r\n* Depict something, perhaps - your name written out, your initials, an icon or logo of some sort.\r\n* Get - creative! The image doesn't have to be a perfect square, it can be long and - skinny." 'How to: Setup your Class Data Tracker_markdown_instruction': "## Setting up your copy of the Class Data Tracker\r\n\r\nThe second chapter of unit 2 dives into data collection, analysis, and visualization. Starting in lesson 7 you @@ -15637,8 +13174,6 @@ en: this video** to understand or complete this lesson - it is merely here if you are interested in getting a general overview. \r\n\r\nIn this lesson to get started we will only use a few of the features depicted." - jessie-test_markdown_instruction: "# Cool\r\n\r\n## Markdown\r\n\r\n### Instructions\r\n\r\n#### - here\r\n\r\n##### now\r\n\r\n###### forever" Just for Testing_markdown_instruction: "Other test instructions" K-1 Bee Loops 2_markdown_instruction: "Use a `repeat` loop to move and then get the nectar and make honey!" @@ -15689,9 +13224,6 @@ en: blocks to get me to the pig!\r\n\r\n![](https://images.code.org/810d7189bcd0767d37ea82319b4c678c-image-1467932445247.gif)" K2.0 sequence 9_markdown_instruction: "**Challenge:** Go around the TNT to get me to the pig!\r\n\r\n![](https://images.code.org/fa04813e9451e0bc070af50bc01d4a6b-image-1467932582838.gif)" - kikiTesta_markdown_instruction: "Our adventurer wants to collect coins. But - she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many - as she can using just 4 blocks?" LaurelDebugging4Video1_markdown_instruction: "This is Laurel the Adventurer!\r\n\r\nMove her around and get as much gold as you can." 'Lesson 7: Teaching and Student Support Plan_markdown_instruction': "> **NOTE: @@ -15985,43 +13517,10 @@ en: task, two reviewers need to agree that you have responded to the prompts fully. If reviewers don’t feel comfortable making a decision about your task submission, they can elevate to a facilitator to review. You will always have a chance - to address feedback from your reviewers and resubmit your task! Reviewer feedback - will show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" - level 'grade3_Loops_10_markdown_instruction: "Such a busy bee!\r\n\r\nHelp - Bee collect all of the nectar and make all of the honey with the fewest blocks - possible." - level 'grade3_Loops_11_markdown_instruction: "The shape of this path is different - from the others. \r\n\r\nCan you collect all of the nectar using as few blocks - as possible?" - level 'grade3_Loops_3_markdown_instruction: "Use a `repeat` loop to collect - all of the nectar." - level 'grade3_Loops_4_markdown_instruction: "Now use the `repeat` block to - collect all of the nectar and make all of the honey." - level 'grade3_Loops_5_markdown_instruction: "What a beautiful field of flowers! \r\n\r\nHelp - the bee visit each one.\r\n\r\nCan you find a way to do it with fewer than - 7 blocks?" - level 'grade3_Loops_6_markdown_instruction: "How many times can loops help - you in this puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete - this puzzle with the fewest blocks possible." - level 'grade3_Loops_7_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect - nectar from each of the flowers using the fewest blocks possible." + to address feedback from your reviewers and resubmit your task! Reviewer feedback + will show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" Limited Quantity of Blocks Test_markdown_instruction: "Get me to the pig by adding only one block." - love_spring_1_markdown_instruction: "Let's celebrate Spring! \r\n\r\nWe have - put some seeds in the ground to prepare for the season's flowers. Can you - cover them up so that the birds don't eat them?" - love_spring_2_markdown_instruction: "Our flowers are in full bloom! \r\n\r\nNow - we need the bee to grab nectar from each one so he can make plenty of honey - back at his hive!" - love_spring_3_markdown_instruction: "<b>The sun is shining, the birds are chirping, - and now it's time to play!</b> <br/><br/>\r\n\r\nRobin has chosen a number - between 10 and 30. \r\nUse the up and down arrows to make a guess about what - it is. \r\nClick Robin to submit your guess.\r\n\r\n- Robin will move up - when your guess is too high\r\n- Robin will move down when your guess is too - low\r\n- Where do you change how far Robin moves each time?\r\n- Where would - you change the range of numbers to choose from?\r\n- Can you change the code - so that Robin chooses a number between 1 & 20?\r\n\r\n<br/>\r\n<b>When you're - ready, press \"Run\" and play until you guess Robin's number!</b>" Luigi's Pizza 1_markdown_instruction: "Welcome to Luigi's Pizza! To order a pizza, type the name of a topping into the `cost` function, and we'll return the price of that pizza. Try ordering a pepperoni pizza to start." @@ -16041,12 +13540,17 @@ en: a function that allows for ordering multiple pizzas (the same, or with different toppings)\r\n- Create a function that allows you to add a coupon code for a 30% discount" - maker workshop final_markdown_instruction: "# Challenge: Explore!\r\n\r\nNow - that you've tested the waters a bit, go explore the full extent of this tool. - On this level you'll see lots of new blocks and even some completely new - areas of functionality (like a database backend!). Feel free to go back to - previous levels for inspiration, or go off and building something completely - your own." + MSM Defining Vars 1_markdown_instruction: "Write a program that produces a + 50 pixel solid green triangle." + MSM Defining Vars 2_markdown_instruction: "If we wanted to make fifty green + triangles, it would be a pain to repeat that block of code 50 times. Let's + create a variable called `my-shape` and put the code for a 50 pixel solid + green triangle inside." + MSM Defining Vars 3_markdown_instruction: "Take your `my-shape` variable and + use it with this provided code to draw two identical green triangles that + are 50 pixels in size." + MSM Defining Vars 4_markdown_instruction: "Edit your `my-shape` variable so + that it draws 75 pixel solid red stars." Matt Test Level_markdown_instruction: "Do 0 bits weigh less than 1 bits?\n" Middle School Hackathon Pt 1_markdown_instruction: "# MS Hackathon: Fancy Drawing\r\n\r\nThe blocks you've been provided are those that a student in CS Discoveries would @@ -16084,22 +13588,6 @@ en: Mike Test Bee Conditionals 2_markdown_instruction: "**Assessment:** Collect all of the nectar. \r\nBe careful not to try to collect nectar from a purple flower if it doesn't have any." - mike3bit_markdown_instruction: "# 3-Bit Color\r\n**Directions:**\r\n\r\n* We - start you with the 4x2 image Maddie was creating, but we've left out the - last few pixels. \r\n* Finish off the image by figuring out which colors are - missing and encoding them.\r\n" - mike3bitbird_markdown_instruction: "# 3-Bit Color\r\nHere's an example of - an image made with 3-bit color. Try changing it to understand how it works. - \r\n\r\n*If you want to reset the image, press \"Start Over\".*\r\n" - mike3bitfreeplay_markdown_instruction: "# 3-Bit Color\r\n\r\nYou have one last - chance to experiment and get creative with the pixelation widget. Make something - awesome and share it with your classmates!\r\n\r\n* *Hint:* You can copy and - paste the value of a pixel to use it repeatedly." - mike3bitmario_markdown_instruction: "# 3-Bit Color\r\n \r\n**Challenge:** \r\n\r\nA - careless binary coder typed in ONE extra 0 or 1 somewhere within this image's - data. The extra bit that is causing Mario to glitch out! \r\n\r\nDelete the - extra bit to restore Mario back to normal!\r\n\r\n![](https://images.code.org/8b7c17ba204a1a4d33e1bd6de7f01d76-image-1477306657312.54.57 - AM.png)" MikeTest1_markdown_instruction: "Markdown" Modular Arithmetic_markdown_instruction: "# Modular Arithmetic\r\n\r\n\r\nThe modulo operation (which gives you the remainder of dividing two integers) @@ -16111,129 +13599,6 @@ en: below introduces the concept of modular arithmetic, and explains the Diffie-Hellman key exchange (described in lesson 7 using an analogy with Alice, Eve, and Bob)." - MSM Defining Vars 1_markdown_instruction: "Write a program that produces a - 50 pixel solid green triangle." - MSM Defining Vars 2_markdown_instruction: "If we wanted to make fifty green - triangles, it would be a pain to repeat that block of code 50 times. Let's - create a variable called `my-shape` and put the code for a 50 pixel solid - green triangle inside." - MSM Defining Vars 3_markdown_instruction: "Take your `my-shape` variable and - use it with this provided code to draw two identical green triangles that - are 50 pixels in size." - MSM Defining Vars 4_markdown_instruction: "Edit your `my-shape` variable so - that it draws 75 pixel solid red stars." - multi-lesson Teaching and Student Support Plan_markdown_instruction: "<br><br>\r\n> - **NOTE: before you start this task, make sure you’ve reviewed the lesson resources - in this module, and have a good sense of how the lesson works. If you haven’t - already reviewed the materials, do that now and come back to this task later.**\r\n\r\n# - Teaching and Student Support Plan\r\n\r\n## Task Description\r\n\r\nNow that - you have a better sense of this lessons in this sequence, let’s think about - the types of supports students will need in order to be successful. Since - the curriculum is based on inquiry learning, lessons feature activities that - engage students in discovering core concepts themselves. It’s important to - think through implementation plans and student support. In this task you will - make a plan for teaching and student support **for one of the lessons in this - sequence** that takes into account differentiation strategies and make-up - work for absent students. Your teaching and student support plan should cover - the following: \r\n\r\n\r\n- **Which lesson in the sequence are you discussing?** - \r\n\r\n- **Details on how you will implement and differentiate the lesson:**\r\n\r\n - - An outline of any changes you will need to make to the lesson to fit your - local constraints or context (for example: pacing and time, dealing with classroom - setup, etc). \r\n - An overview of the types of student needs you’ll likely - need to support in your classroom (for example: students who are struggling - to understand the underlying concept; students who are already familiar with - the concept, but still have room to learn more; etc)\r\n - Your plan for addressing - each of the needs outlined above (for example: integrating extension activities - or other materials for students who already know something about the topic)\r\n - - How will you address or emphasize the connection between lessons in this - sequence? \r\n\r\n<br>\r\n- **Plan for catching up absent students:**\r\n\r\n - - How will absent students catch up on activities they missed? \r\n - How - will you use the fact that the lessons in this sequence are related and build - on one another to address make-up work? \r\n\r\nYou can type out your teaching - and student support plan in the box below, or you can upload a word doc or - pdf file. \r\n\r\n## Getting Credit for Completing this Task\r\n\r\n#### Task - Review Details\r\n\r\nIf this module is listed as your “focus area”, then - your response to the prompt above will be shared anonymously and reviewed - by your peers, and you will review the work done by other teachers. Reviewers - will be looking for thoughtful and thorough answers that demonstrate that - you have spent time considering how the lesson will play out in your own classroom. - Reviewers will have an opportunity to give feedback on your submission, and - you can respond to that feedback and resubmit. \r\n\r\nIn order to get credit - for completing this task, two reviewers need to agree that you have responded - to the prompts fully. If reviewers don’t feel comfortable making a decision - about your task submission, they can elevate to a facilitator to review. You - will always have a chance to address feedback from your reviewers and resubmit - your task! Reviewer feedback will show up at the bottom of this page, once - it’s available. \r\n\r\n<br><br>" - name 'CSD U3 Keypress Boolean Predict'_markdown_instruction: "# Make a Prediction: - keyDown()\r\nThe `keyDown()` block is the first of a new set of blocks that - will let us get input from the user. This is the first step on our road to - actually making games! See if you can figure out how the `keyDown()` block - works.\r\n\r\nWhat do you think will happen when you run the program and press - the \"up\" arrow? Write your prediction below and then run the program to - see if your prediction was accurate." - NetSim Standalone Automatic DNS_markdown_instruction: "# Domain Name System - (DNS)\r\n\r\nIn this version of the Internet Simulator, a Domain Name System - (DNS) is provided for you and knows the IP addresses of all connected computers. - You can only see the hostnames of other connected computers. \r\n![](https://images.code.org/3ac2c23ed610abc7e785ec85054e89a9-image-1434746293690.PNG)\r\n\r\nThe - address of the DNS is always <yourRouterNumber>.15. Send a message with - protocol `GET [hostname]`, for example `GET Bob2`, to the DNS to get another - student's address. You can keep track of the responses in the Notes section - in the DNS tab. \r\n![](https://images.code.org/c81c1a6b876eb46674a7f7e5e70506ce-image-1434746797267.png)\r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone Broadcast_markdown_instruction: "# Broadcast messages in - the Internet Simulator\r\n\r\nIn this version of the Internet Simulator, you - can connect to up to 5 other people in a room. When you send messages in the - room, everyone receives them. What are some of the challenges of this system, - and how might you solve them?\r\n\r\nYour teacher will hand out more specific - instructions for this activity." - NetSim Standalone Classroom Routers_markdown_instruction: "#Routing messages - \r\n\r\nIn this version of the Internet Simulator, everyone connects to a - router and has a specific address. To send messages, you have to address your - message to the specific address of the recipient, and the router will take - care of delivering it to the right computer. If there are other routers created - in your class, ask for the address of one of your classmates and send them - a message! View the Log Router to see the path the messages have taken through - the network.\r\n\r\nYour teacher will hand out more specific instructions - for this activity." - NetSim Standalone Freeplay_markdown_instruction: "# Internet Simulator Freeplay\r\n\r\nIn - this version of the Internet Simulator, most of the options are turned on - and are configurable. Messages can be sent to any router within the class, - and messages will take different paths to reach their destination.\r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone Manual DNS_markdown_instruction: "# Introduction to DNS\r\n\r\nIn - this version of the simulator you can't see the other students' addresses. Instead, - one of you must act as a name service, to help share addresses with each other. - From the DNS tab in the left column, one person can take over as DNS.\r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone Packets TCP_markdown_instruction: "# Packets and Making a - Reliable Internet\r\n\r\nMessages on the Internet can take many paths to get - to their destination, and sometimes along the way the message gets dropped. - In this version of the Internet Simulator:\r\n\r\n- There is a 10% chance - of a packet being dropped\r\n- Multiple packets may take different paths to - the destination\r\n- The default max packet size is set to 6 additional characters\r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone SendAB_markdown_instruction: "#Sending bits with the Internet - Simulator\r\n\r\nYou and your partner share a single wire that can only be - in state A or state B. You can set the wire to either state at any time, and - you can read the state of the wire at any time. Can you figure out a way to - effectively communicate with just this system?\r\n\r\nYour teacher will hand - out more specific instructions for this activity." - NetSim Standalone Sending Numbers Ascii_markdown_instruction: "# Sending Text - with the Internet Simulator\r\n\r\nNow that you've transmitted information - represented as decimal numbers, you can map those numbers to text characters - to send text-based information back and forth. With a text-based protocol, - you can easily represent and communicate all kinds of information. \r\n\r\nYour - teacher will hand out more specific instructions for this activity." - NetSim Standalone Sending Numbers_markdown_instruction: "#Sending Numbers with - the Internet Simulator\r\n\r\nYou and your partner can now reliably send messages - back and forth without extra coordination! While you're always sending bits - back and forth, you can also represent those bits as decimal numbers. What - kinds of information can you represent with this system? \r\n\r\nYour teacher - will hand out more specific instructions for this activity." - NetSim_Variant2_markdown_instruction: "##NetSim: Variant 2\r\n\r\nStudents - connect directly to one another and send entire packets back and forth, exploring - systems of encoding data." NEW Course 4 Artist Functions 1_markdown_instruction: "Can you draw a square that is 100 pixels in length, using a repeat loop?\r\n\r\n" NEW Course 4 Artist Functions 10.1_markdown_instruction: "Use the functions @@ -16396,15 +13761,77 @@ en: NEW Course 4 Play Labs For Loops 8a_markdown_instruction: "**Challenge:** How would you use the `for loop` to go from top to bottom and get every character to say their actor number, then vanish from the screen? " + NetSim Standalone Automatic DNS_markdown_instruction: "# Domain Name System + (DNS)\r\n\r\nIn this version of the Internet Simulator, a Domain Name System + (DNS) is provided for you and knows the IP addresses of all connected computers. + You can only see the hostnames of other connected computers. \r\n![](https://images.code.org/3ac2c23ed610abc7e785ec85054e89a9-image-1434746293690.PNG)\r\n\r\nThe + address of the DNS is always <yourRouterNumber>.15. Send a message with + protocol `GET [hostname]`, for example `GET Bob2`, to the DNS to get another + student's address. You can keep track of the responses in the Notes section + in the DNS tab. \r\n![](https://images.code.org/c81c1a6b876eb46674a7f7e5e70506ce-image-1434746797267.png)\r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone Broadcast_markdown_instruction: "# Broadcast messages in + the Internet Simulator\r\n\r\nIn this version of the Internet Simulator, you + can connect to up to 5 other people in a room. When you send messages in the + room, everyone receives them. What are some of the challenges of this system, + and how might you solve them?\r\n\r\nYour teacher will hand out more specific + instructions for this activity." + NetSim Standalone Classroom Routers_markdown_instruction: "#Routing messages + \r\n\r\nIn this version of the Internet Simulator, everyone connects to a + router and has a specific address. To send messages, you have to address your + message to the specific address of the recipient, and the router will take + care of delivering it to the right computer. If there are other routers created + in your class, ask for the address of one of your classmates and send them + a message! View the Log Router to see the path the messages have taken through + the network.\r\n\r\nYour teacher will hand out more specific instructions + for this activity." + NetSim Standalone Freeplay_markdown_instruction: "# Internet Simulator Freeplay\r\n\r\nIn + this version of the Internet Simulator, most of the options are turned on + and are configurable. Messages can be sent to any router within the class, + and messages will take different paths to reach their destination.\r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone Manual DNS_markdown_instruction: "# Introduction to DNS\r\n\r\nIn + this version of the simulator you can't see the other students' addresses. Instead, + one of you must act as a name service, to help share addresses with each other. + From the DNS tab in the left column, one person can take over as DNS.\r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone Packets TCP_markdown_instruction: "# Packets and Making a + Reliable Internet\r\n\r\nMessages on the Internet can take many paths to get + to their destination, and sometimes along the way the message gets dropped. + In this version of the Internet Simulator:\r\n\r\n- There is a 10% chance + of a packet being dropped\r\n- Multiple packets may take different paths to + the destination\r\n- The default max packet size is set to 6 additional characters\r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone SendAB_markdown_instruction: "#Sending bits with the Internet + Simulator\r\n\r\nYou and your partner share a single wire that can only be + in state A or state B. You can set the wire to either state at any time, and + you can read the state of the wire at any time. Can you figure out a way to + effectively communicate with just this system?\r\n\r\nYour teacher will hand + out more specific instructions for this activity." + NetSim Standalone Sending Numbers Ascii_markdown_instruction: "# Sending Text + with the Internet Simulator\r\n\r\nNow that you've transmitted information + represented as decimal numbers, you can map those numbers to text characters + to send text-based information back and forth. With a text-based protocol, + you can easily represent and communicate all kinds of information. \r\n\r\nYour + teacher will hand out more specific instructions for this activity." + NetSim Standalone Sending Numbers_markdown_instruction: "#Sending Numbers with + the Internet Simulator\r\n\r\nYou and your partner can now reliably send messages + back and forth without extra coordination! While you're always sending bits + back and forth, you can also represent those bits as decimal numbers. What + kinds of information can you represent with this system? \r\n\r\nYour teacher + will hand out more specific instructions for this activity." + NetSim_Variant2_markdown_instruction: "##NetSim: Variant 2\r\n\r\nStudents + connect directly to one another and send entire packets back and forth, exploring + systems of encoding data." Nike Example Brand Book_markdown_instruction: "# Brand Book\r\n\r\nCheck out the example of a brand book\r\n\r\n" + October15 JoL 1_markdown_instruction: "Program the artist to design a face + for your jack-o-lantern!\r\n\r\n" October15 bat_markdown_instruction: "Freeplay: Here are the functions you've written, and some more for you to play with. Play with the pen width to see how different your drawings look!\r\n\r\n" October15 ghost 1_markdown_instruction: "Give the ghost eyes, using the `draw a circle` function.\r\n\r\n" - October15 JoL 1_markdown_instruction: "Program the artist to design a face - for your jack-o-lantern!\r\n\r\n" October15 pumpkin 1_markdown_instruction: "Finish this jack-o-lantern by drawing the eyes and nose in any style you would like.\r\n\r\n" October15 stars 1_markdown_instruction: "Use loops and the `random integer` @@ -16421,13 +13848,13 @@ en: pizza topping and coupon code and returns the cost of a pizza with that topping. If the coupon code is correct (you get to decide what it is), apply a 30% discount to the pizza." - PDAlg 8-12 ex dr 2_markdown_instruction: "This student has created two examples - for the function `apples` but something's not quite right. How would you - direct this student to correct their mistake?" PDAlg 8-12 Rocket Height Puzzle_markdown_instruction: "Let's write a `rocket-height` function with simple acceleration. Write a function that ensures the rocket is at 15 meters at 1 second, 45 meters at 2 seconds, 95 at 3 seconds, and 165 at 4 seconds." + PDAlg 8-12 ex dr 2_markdown_instruction: "This student has created two examples + for the function `apples` but something's not quite right. How would you + direct this student to correct their mistake?" PDAlg Big Game History_markdown_instruction: "Now that you've played through a Big Game level you should see a new entry in your history. Click the _Version History_ button and you should see at least one version. Each time you go @@ -16471,17 +13898,14 @@ en: of what happened, and describe the problem in an email to pd@code.org. Also include what operating system and browser version you're using (example: Windows 7, Internet explorer 9). We really appreciate teachers and users sending - us bug reports.\n\n### How will you foster a healthy CS classroom environment?\nNow - that you know more about our curriculum, what practices do you want to use - to promote a healthy atmosphere in your computer science classroom?'\n" - PDAlg course goals_markdown_instruction: "# Documenting Your Course Goals\r\n\r\n**Now - that you've learned more about the CS in Algebra Professional Learning Program - and curriculum, let's consider your goals**\r\n\r\n - What are your goals - for your CS in Algebra class?\r\n - How do you you see it integrating into - your class, and what do you hope that you and your students get out of the - experience?\r\n\r\n*These goals will change over time, and we'll revisit - your response as we go through the course so we can check in on how we're - progressing towards those goals.*\r\n" + us bug reports.\n\n### How will you foster a healthy CS classroom environment?\nNow + that you know more about our curriculum, what practices do you want to use + to promote a healthy atmosphere in your computer science classroom?'\n" + PDAlg DR Text 1_markdown_instruction: "Here's the same contract from the last + page. What could you ask this student to help them identify and correct their + error?\n\n### Question\n\nIf you have a budget in dollars, can you write a + function `treats` that returns the number of treats you could afford at 50 + cents each?\n\n### Contract\n\n`treats: Number Number -> Number`\n" PDAlg Design Recipe Delete_markdown_instruction: "When developing complex programs it's not uncommon to end up with functions that you no longer want, which used to just crowd your functions drawer, but now you can **delete** them. @@ -16492,11 +13916,6 @@ en: Complete the Design Recipe for the `eggs` function, making sure to create and test your examples. (You can ignore creating examples if you want to see the error message.)" - PDAlg DR Text 1_markdown_instruction: "Here's the same contract from the last - page. What could you ask this student to help them identify and correct their - error?\n\n### Question\n\nIf you have a budget in dollars, can you write a - function `treats` that returns the number of treats you could afford at 50 - cents each?\n\n### Contract\n\n`treats: Number Number -> Number`\n" PDAlg Prep on Paper_markdown_instruction: "# Lesson Prep > Thinking on Paper\r\n\r\nAs you learned in the summer PD, thinking through the Design Recipe on paper is an essential step for success, particularly when it comes to solving complex @@ -16534,6 +13953,14 @@ en: visible screen space.\r\n- Zoom in and out using Cmd +/- (Mac) or Ctrl +/- (Windows)\r\n\r\nExperiment with this provided code to see how the space can be manipulated to deal with larger programs." + PDAlg course goals_markdown_instruction: "# Documenting Your Course Goals\r\n\r\n**Now + that you've learned more about the CS in Algebra Professional Learning Program + and curriculum, let's consider your goals**\r\n\r\n - What are your goals + for your CS in Algebra class?\r\n - How do you you see it integrating into + your class, and what do you hope that you and your students get out of the + experience?\r\n\r\n*These goals will change over time, and we'll revisit + your response as we go through the course so we can check in on how we're + progressing towards those goals.*\r\n" PDK5 Challenges_markdown_instruction: "What are your biggest challenges to implementing Code.org's curriculum in your classroom?\n" PDK5 Classroom Culture 2_markdown_instruction: "### Strategies for facilitating @@ -16648,6 +14075,19 @@ en: tile. \n\n![image](//code.org/images/strategiesforteachingcs.png)\n\n</br>\n\n\n\n" PDK5 Test5_markdown_instruction: "## What did you think about things?\n\nWhat are your thoughts?\n" + PS FR test 7-25_markdown_instruction: "Here is *some* **markdown**" + PS Log test - Define and use turnAround_markdown_instruction: "#Do This:\r\n**Define** + a function called `turnAround` which turns the turtle around. Once you've + defined the function **call** it to make sure it works as you expect and then + move the turtle forward, as shown below. \r\n\r\n![](https://images.code.org/4c31307ec14cc6dfd65589f2a813120e-image-1447884881189.gif)" + PS copy 2-3 Bee Conditionals 5_markdown_instruction: "These magic purple flowers + change!\r\n\r\nEach time you try the puzzle, purple flowers can have either + 1 nectar or none at all...but you won't know the number until you run the + code! \r\n\r\nBe careful not to collect nectar from a purple flower if it + doesn't have any. \r\nYou must first check if the nectar is equal to 1 using + the `if nectar` block." + PS fr prediction q1_markdown_instruction: "What do *you* think will happen? + " Peer Review Level 1 - Tuesday Report_markdown_instruction: "Vacations are really fun. Please document a short and amusing story about a recent vacation.\r\n\r\nSome guidelines\r\n\r\n* Pics or it didn't happen\r\n* Keep it to 4 sentences @@ -16739,24 +14179,6 @@ en: Play Lab Rocket Free Play_markdown_instruction: "Free Play: Experiment with your `rocket-height` function to make the rocket fly in different ways. Click \"Finish\" when you are done." - playEventsK1_markdown_instruction: "This game is called \"Play Lab\".\r\n\r\nSee - if you can figure out what each block does." - playEventsK2_markdown_instruction: "Jorge wants to say \"Hi there.\"\r\n\r\nCan - you help?\r\n\r\n![](https://images.code.org/f32d285fa6f45e1f8d042c04c55f32c8-image-1467988839292.gif)" - playEventsK3_markdown_instruction: "Jorge wants to be scratched behind the - ears!\r\n\r\nCan you make it so that when you click Jorge he is happy?\r\n\r\n![](https://images.code.org/04fb37990455b215e0f20884363092d0-image-1467988943134.gif)" - playEventsK4_markdown_instruction: "Can you make it so that Jorge the dog chases - Robin the bird when you click the up arrow?\r\n\r\n![](https://images.code.org/2fbf6c793bb77a961fa7a52f27e4c59d-image-1467989013878.gif)" - playEventsK5_markdown_instruction: "Now add code so that Robin flies away when - you click the forward arrow.\r\n\r\n![](https://images.code.org/a7e224c5f13e39e5342011f8a76d3b6b-image-1467989101328.gif)" - playEventsK6_markdown_instruction: "Have Robin talk back to Jorge when you - click on her.\r\n\r\n![](https://images.code.org/fc80b1febbb7a472026b6bf2c535b2f4-image-1467989171517.gif)" - playEventsK7_markdown_instruction: "What else can you do in this fun scene?\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need - some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Conversation</strong> - - Have the sprites talk to eachother when you click on them.</li>\r\n <li><strong>Pinball</strong> - - Make one sprite play a noise when the other runs into it.</li>\r\n <li><strong>Arrows</strong> - - Write a program so when each arrow key is pressed, the sprite moves in that - direction!</li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>" Poorva copy U3L2 Using Simple Commands_markdown_instruction: "<img src=\"https://images.code.org/0aca9e3ba0945f31ddd56438a45ed69c-image-1436286498758.png\" align=right>\r\n\r\nGiven only 4 turtle commands, write code in App Lab to complete the drawings in each of the challenges below. Your goal is to write @@ -16780,10 +14202,6 @@ en: design! \r\n\r\n# Do This:\r\n\r\n* **Read the Project Overview** to understand the entire project.\r\n* **Follow the Project Planning Guide**.\r\n* **Implement your final program in this level**." - pre-assessment survey q24A_markdown_instruction: "What computer science skills - do you use in your everyday life? " - pre-assessment survey q25A_markdown_instruction: "If yes, what computer science - course(s) had you taken before your current computer science class? " Predict Loop I_markdown_instruction: "# Predict\r\n\r\nWhat will print as a result of this loop?" Project - Make Your Own Clicker Game_markdown_instruction: "# Make Your Own @@ -16818,19 +14236,6 @@ en: stuck” on any screen.** It should always be possible to navigate from a screen in your app to some other screen. \r\n* Your program code should follow **good style**.\r\n* Your user interface should be **intuitive to use**." - PS copy 2-3 Bee Conditionals 5_markdown_instruction: "These magic purple flowers - change!\r\n\r\nEach time you try the puzzle, purple flowers can have either - 1 nectar or none at all...but you won't know the number until you run the - code! \r\n\r\nBe careful not to collect nectar from a purple flower if it - doesn't have any. \r\nYou must first check if the nectar is equal to 1 using - the `if nectar` block." - PS fr prediction q1_markdown_instruction: "What do *you* think will happen? - " - PS FR test 7-25_markdown_instruction: "Here is *some* **markdown**" - PS Log test - Define and use turnAround_markdown_instruction: "#Do This:\r\n**Define** - a function called `turnAround` which turns the turtle around. Once you've - defined the function **call** it to make sure it works as you expect and then - move the turtle forward, as shown below. \r\n\r\n![](https://images.code.org/4c31307ec14cc6dfd65589f2a813120e-image-1447884881189.gif)" 'Raw Data Podcast: Data Confidential_markdown_instruction': "## Raw Data Podcast: Data Confidential <i class=\"fa fa-volume-up\" aria-hidden=\"true\"></i>\r\n\r\nRaw Data is a podcast from the Stanford Cyber Initiative that explores the uses @@ -17009,18 +14414,6 @@ en: how packets are constructed.**\r\n\r\n### How this task is reviewed\r\nThis task is peer-reviewed by 2 peers, using the following rubric:\r\n\r\n - Lesson includes lecture\r\n - Lesson includes activity on network simulator" - sample1_markdown_instruction: "Our adventurer wants to collect coins. But - she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many - as she can using just 4 blocks?" - sample10a_markdown_instruction: "<h4>You have helped the adventurer and her - bee! \r\nAs a reward, please stay and play around in my magical village. \r\n<br/>\r\n\r\nYou - should have everything you need to create a game of your own.</h4>" - sample4_markdown_instruction: "Our adventurer has found a stash of coins in - this cave.\r\n\r\nCan you help her grab as many as she can using just 7 blocks?" - sample6_markdown_instruction: "**Challenge:** Help bee get all of the nectar.\r\n\r\nThis - puzzle is meant to be hard. You may need to try lots of times." - sample8_markdown_instruction: "Look at this trove of coins! \r\n\r\nHow many - can you get the adventurer to grab?" Screen Size_markdown_instruction: "# Hardware Accessibility: Screen Size\r\n\r\nAnother thing to consider about accessibility for different users is the size of the device they are using to view the web page. You can do a basic test for this @@ -17200,44 +14593,6 @@ en: barriers.\r\n\r\n## Submit the Link for your Forum Post\r\n\r\nOnce you’ve posted in the forum, share a link here. In order to get a direct link to your post, click the link icon directly under your post (shown in the picture below):\r\n\r\n![](https://images.code.org/40fd4bb1aa4f50cfb0d66bbf7881cd0d-image-1443847364702.png)\r\n\r\n\r\n\r\n" - Teaching and Student Support Plan_markdown_instruction: "> **NOTE: before you - start this task, make sure you’ve reviewed the lesson resources in this module, - and have a good sense of how the lesson works. If you haven’t already reviewed - the materials, do that now and come back to this task later.**\r\n\r\n# Teaching - and Student Support plan\r\n## Task Description\r\n\r\nNow that you have a - better sense of this lesson, let’s think about the types of supports students - will need in order to successfully complete it. Since the curriculum is based - on inquiry learning, lessons feature activities that engage students in discovering - core concepts themselves. It’s important to think through implementation plans - and student support. In this task you will make a plan for teaching and student - support that takes into account differentiation strategies and make-up work - for absent students. Your teaching and student support plan should cover the - following: \r\n\r\n- **Details on how you will implement and differentiate - the lesson:**\r\n\r\n - An outline of any changes you will need to make to - the lesson to fit your local constraints or context (for example: pacing and - time, dealing with classroom setup, etc). \r\n - An overview of the types - of student needs you’ll likely need to support in your classroom (for example: - students who are struggling to understand the underlying concept; students - who are already familiar with the concept, but still have room to learn more; - etc)\r\n - Your plan for addressing each of the needs outlined above (for - example: integrating extension activities or other materials for students - who already know something about the topic)\r\n<br><Br>\r\n\r\n- **Plan for - catching up absent students:**\r\n\r\n - How will absent students catch up - on activities they missed? \r\n\r\nYou can type out your teaching and student - support plan in the box below, or you can upload a word doc or pdf file. \r\n\r\n## - Getting Credit for Completing this Task\r\n\r\n#### Task Review Details\r\n\r\nIf - this module is listed as your “focus area”, then your response to the prompt - above will be shared anonymously and reviewed by your peers, and you will - review the work done by other teachers. Reviewers will be looking for thoughtful - and thorough answers that demonstrate that you have spent time considering - how the lesson will play out in your own classroom. Reviewers will have an - opportunity to give feedback on your submission, and you can respond to that - feedback and resubmit. \r\n\r\nIn order to get credit for completing this - task, two reviewers need to agree that you have responded to the prompts fully. - If reviewers don’t feel comfortable making a decision about your task submission, - they can elevate to a facilitator to review. You will always have a chance - to address feedback from your reviewers and resubmit your task! Reviewer feedback - will show up at the bottom of this page, once it’s available. " 'Teaching Practice Plan: Assessing Student Learning_markdown_instruction': "> **NOTE: before you start this task, make sure you’ve reviewed the resources in this module, and have a good sense of the connections to unit 1. If you @@ -17389,10 +14744,46 @@ en: will always have a chance to address feedback from your reviewers and resubmit your task! Reviewer feedback will show up at the bottom of this page, once it’s available. \r\n\r\n\r\n\r\n\r\n" + Teaching and Student Support Plan_markdown_instruction: "> **NOTE: before you + start this task, make sure you’ve reviewed the lesson resources in this module, + and have a good sense of how the lesson works. If you haven’t already reviewed + the materials, do that now and come back to this task later.**\r\n\r\n# Teaching + and Student Support plan\r\n## Task Description\r\n\r\nNow that you have a + better sense of this lesson, let’s think about the types of supports students + will need in order to successfully complete it. Since the curriculum is based + on inquiry learning, lessons feature activities that engage students in discovering + core concepts themselves. It’s important to think through implementation plans + and student support. In this task you will make a plan for teaching and student + support that takes into account differentiation strategies and make-up work + for absent students. Your teaching and student support plan should cover the + following: \r\n\r\n- **Details on how you will implement and differentiate + the lesson:**\r\n\r\n - An outline of any changes you will need to make to + the lesson to fit your local constraints or context (for example: pacing and + time, dealing with classroom setup, etc). \r\n - An overview of the types + of student needs you’ll likely need to support in your classroom (for example: + students who are struggling to understand the underlying concept; students + who are already familiar with the concept, but still have room to learn more; + etc)\r\n - Your plan for addressing each of the needs outlined above (for + example: integrating extension activities or other materials for students + who already know something about the topic)\r\n<br><Br>\r\n\r\n- **Plan for + catching up absent students:**\r\n\r\n - How will absent students catch up + on activities they missed? \r\n\r\nYou can type out your teaching and student + support plan in the box below, or you can upload a word doc or pdf file. \r\n\r\n## + Getting Credit for Completing this Task\r\n\r\n#### Task Review Details\r\n\r\nIf + this module is listed as your “focus area”, then your response to the prompt + above will be shared anonymously and reviewed by your peers, and you will + review the work done by other teachers. Reviewers will be looking for thoughtful + and thorough answers that demonstrate that you have spent time considering + how the lesson will play out in your own classroom. Reviewers will have an + opportunity to give feedback on your submission, and you can respond to that + feedback and resubmit. \r\n\r\nIn order to get credit for completing this + task, two reviewers need to agree that you have responded to the prompts fully. + If reviewers don’t feel comfortable making a decision about your task submission, + they can elevate to a facilitator to review. You will always have a chance + to address feedback from your reviewers and resubmit your task! Reviewer feedback + will show up at the bottom of this page, once it’s available. " Test Contained Free Response_markdown_instruction: "My free response markdown instructions" - test externallink_markdown_instruction: "# Creative Commons\r\n\r\nHead to - the Creative Commons website to learn more about CC licensing models." Test Free Response Assessment Question_markdown_instruction: "Imagine that you have to send a list of 10 numbers to friend in binary using the bit-sending widget. The numbers are all between 0 and 100. Describe the issues or problems @@ -17400,24 +14791,6 @@ en: address these problem?\n\n### Hello!\n" Test Markdown level_markdown_instruction: "Enter prompt here\n\n# Test Markdown title\n\nTest Markdown prompt\n\n\n" - test peer review_markdown_instruction: "At this point you've seen 7 of the - 14 lessons from unit 1. Thinking about those lessons, and looking across the - other lessons in <a href=\"curriculum.code.org/csp/unit1/\" target=_blank>unit - 1</a> work with your partner to develop a set of recommendations for using - group work and peer learning in Unit 1. Your recommendations should include:\r\n\r\n- - Which lessons or activities provide opportunities for group work and peer - learning? \r\n- What recommendations do you have for using group work and - peer learning in Unit 1 lessons? \r\n\r\nUse the space below to record any - recommendations or commentary you have for others. Once you submit, another - participant will review chance to send you feedback! \r\n\r\n" - test_anonymous_student_survey_next_class_markdown_instruction: "What you will - do next after this class?" - test_anonymous_student_survey_why_class_markdown_instruction: "Why are you - doing this class? Give at least two reasons." - test_sarah_markdown_instruction: "hi" - test_sarah_freeresponse_markdown_instruction: "This is the question at hand...." - testing code callout_markdown_instruction: "# Click the link!\r\n[Show me where - the sprite moves](#triggercallout=code_triggered)\r\n" Testing Quantum Farmer_markdown_instruction: "Wow, look at that! \r\n\r\nI don't know how many shovelfuls of dirt this hole needs. \r\nCan you write a program that keeps using the `fill` block until the ground is even? " @@ -17429,10 +14802,6 @@ en: questions](https://docs.google.com/document/d/1ngw37cKFH4Dl_lhWXuXROH5WDdgHatz3gJo3pAdpqkg/edit?usp=sharing)" 'The Internet: Wires, Cables, and Wifi_markdown_instruction': "[Video guide and questions](https://docs.google.com/document/d/1YviZiL1VjpUa9Gbe3j_4lETKyoZqEW14_RG7EEWEwgU/edit)" - the Journal of Peer Learning_markdown_instruction: "The following link is to - a journal out of Australia that focuses on publishing scholarly research that - investigates innovations in peer learning and the implementation and evaluations - of peer learning programs:" The Official Peer Instruction Blog_markdown_instruction: "The following link is to a recent blog post describing the basic approach to and benefits of peer learning: " @@ -17501,14 +14870,6 @@ en: flow, or outcome of the lesson?\r\n- What benefits and pitfalls did you see in discovery activities?\r\n\r\nUse the space below to record any thoughts, recommendations, or commentary." - 'Tuesday Report: discovery learning_markdown_instruction': "So far we've seen - four lessons from unit 1 -- two model lessons delivered by facilitators and - two lessons by participants. With your partner, consider:\r\n\r\n- What opportunities - have you seen for learners to discover concepts for themselves? \r\n- How - did the process of engaging in discovery activities change the pacing, flow, - or outcome of the lesson? \r\n- What benefits and pitfalls did you see in - discovery activities? \r\n\r\nUse the space below to record any thoughts, - recommendations, or commentary" 'Tuesday Report: Group Work and Peer Learning in Unit 1_markdown_instruction': "So far we've seen four lessons from unit 1 — two model lessons delivered by facilitators and two lessons by participants. With your partner, consider:\r\n\r\n- @@ -17525,6 +14886,14 @@ en: are available in the curriculum?\r\n- What strategies would be effective for checking in on what students know?\r\n\r\nUse the space below to record any thoughts, recommendations, or commentary." + 'Tuesday Report: discovery learning_markdown_instruction': "So far we've seen + four lessons from unit 1 -- two model lessons delivered by facilitators and + two lessons by participants. With your partner, consider:\r\n\r\n- What opportunities + have you seen for learners to discover concepts for themselves? \r\n- How + did the process of engaging in discovery activities change the pacing, flow, + or outcome of the lesson? \r\n- What benefits and pitfalls did you see in + discovery activities? \r\n\r\nUse the space below to record any thoughts, + recommendations, or commentary" U1L1 - FR computer science word association_markdown_instruction: "**Directions:**\n\nYou're in a class called *Computer Science Principles*.\n\nYou might not know anything about computer science right now. You might know a few things. We're going @@ -17624,22 +14993,22 @@ en: U1L2 Free response reflection question_markdown_instruction: " Modify your question so that it could be answered with a binary message. Explain why it can now be answered with a binary message.\n\n\n" + U1L3 Free Response_markdown_instruction: "How did collaboration impact the + development of your protocol? What challenges did working in a group present + and in what ways did it positively impact your final product?" U1L3 Free response reflection question_markdown_instruction: "Recall when you built your binary message sending device. Why did we decide to send a message as a sequence of states (A and B) rather than modifying our devices to represent more states (State C, State D, State E, ...)?\r\n" - U1L3 Free Response_markdown_instruction: "How did collaboration impact the - development of your protocol? What challenges did working in a group present - and in what ways did it positively impact your final product?" + U1L4 Free Response Reflection_markdown_instruction: "A binary message was recorded + as a wave as shown in the image below. Can you decode the message? Explain + what information you would need in order to successfully decode the message + into A’s and B’s.\n\n![](https://images.code.org/c8ba0db14fabb778dc034ac4656259fa-image-1434429617999.png)\n\n" U1L4 Free response reflection question_markdown_instruction: "Complete the Lesson 2 Rubric.\n\nA binary message consisting of four bits was sent to you by a friend. The message was supposed to be ABAB. Unfortunately, your friend sent the message at 1/2 the bit rate you agreed upon. What message did you receive instead?\n" - U1L4 Free Response Reflection_markdown_instruction: "A binary message was recorded - as a wave as shown in the image below. Can you decode the message? Explain - what information you would need in order to successfully decode the message - into A’s and B’s.\n\n![](https://images.code.org/c8ba0db14fabb778dc034ac4656259fa-image-1434429617999.png)\n\n" U1L4 NetSim SendAB_markdown_instruction: "##Coordination and Binary Messages Activity\r\n\r\n**Develop your Protocol**\r\nDevelop a protocol that allows you to use Internet Simulator to relay a message, i.e. one member sends a @@ -17697,29 +15066,6 @@ en: U1L9 Free Response Assessment_markdown_instruction: "Choose one of the topics you most enjoyed learning about today. Describe what new information you learned and how it relates to the way we create and use number systems.\n" - U2 frequency caesar_markdown_instruction: "# Break a Caesar cipher!\r\n\r\nThis - tool lets you play with text and do substitution ciphers. It also shows you - a frequency analysis of the input text. (We’ll look at that more in a later - lesson.) You can use this to either encrypt a message or decrypt it.\r\n\r\n# - Do this\r\n- Load the **Sample message (easy)** from the message dropdown. - This will load a message that has been encrypted with a Caesar cipher.\r\n\r\n![](https://images.code.org/336a6a68cc34636df21fe5ad9f43992c-image-1443566879847.gif)\r\n\r\n- - Using the buttons in the Caesar substitution tab, you can shift the alphabet - forwards or backwards to try to unscramble the message.\r\n\r\n![](https://images.code.org/1783d62a944fd758cc19c5d0f73ec2c4-image-1443567014825.gif)\r\n\r\nSee - how long it takes you to crack the cipher! Is this a good method of encrypting - secret data?\r\n" - U2 frequency random sub_markdown_instruction: "# Break a random substitution - cipher!\r\n\r\nThis version of the tool gives you more information about the - encrypted text and more options for how to try out different substitutions.\r\n\r\n### - Different ways analyze text\r\n- Play with some of the sorting options available - in the Random substitution cipher tab to get different views on the letter - frequencies in the input text as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\n### - Different ways to substitute\r\n- To substitute a letter you can drag a blue - letter of the alphabet directly underneath the orange letter you want changed - in the original ciphertext.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n### - Play. Always play.\r\n- There are other ways to analyze and substitute characters - that you can find by clicking on the buttons and trying out whatever you like.\r\n- - Remember: you can't break it :)\r\n\r\nSee how long it takes you to crack - the cipher! Is this a good method of encrypting secret data?" 'U2 L 1 - 2: Teaching and Student Support Plan_markdown_instruction': "<br><br>\r\n> **NOTE: before you start this task, make sure you’ve reviewed the lesson resources in this module, and have a good sense of how the lesson works. If you haven’t @@ -17980,6 +15326,45 @@ en: show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" 'U2 The Internet: Cybersecurity and Crime - Video_markdown_instruction': "[Video guide and questions](https://drive.google.com/open?id=1Qv4lgMMtP42sRlofUmGtElViD1AJ7yETvQ4pCh0rDjw)" + U2 Vigenere_markdown_instruction: "# Encrypt and decrypt a message with the + Vigenère cipher\r\n\r\nThis is an interactive version of the Vigenère cipher + that animates the encryption and decryption as it’s happening, given a piece + of text to encrypt or decrypt and the key.\r\n\r\n# Do this\r\n### Encrypt + a message\r\nClick Step several times, and trace what’s happening. Pay attention + to:\r\n\r\n- How the ciphertext is being produced\r\n- What happens when you + get to the last character of the key\r\n- After you’ve stepped through a few + characters click Play to watch the rest animate\r\n- Hit Restart and play + the animation again. You can use the speed slider to speed it up or slow it + down \r\n\r\n![](https://images.code.org/06858f88ac12997bba73f4f76638a068-image-1443574425185.gif)\r\n\r\n### + Decrypt a message\r\nEncrypt a message as above, then: \r\n\r\n- Highlight + and copy the ciphertext\r\n- Paste it into the plaintext area. Note: Don’t + change the key\r\n- Change the Encrypt/Decrypt toggle to Decrypt\r\n- Hit + Step a few times, and then Play\r\n\r\nYou should see the original text emerge. \r\n![](https://images.code.org/dc89d6c19c17adb23b6b5ff9a62c4583-image-1443574425182.gif)\r\n\r\n\r\nHow + hard would it be to crack a message encrypted with this cipher? Does the length + of the key make a difference?\r\n" + U2 frequency caesar_markdown_instruction: "# Break a Caesar cipher!\r\n\r\nThis + tool lets you play with text and do substitution ciphers. It also shows you + a frequency analysis of the input text. (We’ll look at that more in a later + lesson.) You can use this to either encrypt a message or decrypt it.\r\n\r\n# + Do this\r\n- Load the **Sample message (easy)** from the message dropdown. + This will load a message that has been encrypted with a Caesar cipher.\r\n\r\n![](https://images.code.org/336a6a68cc34636df21fe5ad9f43992c-image-1443566879847.gif)\r\n\r\n- + Using the buttons in the Caesar substitution tab, you can shift the alphabet + forwards or backwards to try to unscramble the message.\r\n\r\n![](https://images.code.org/1783d62a944fd758cc19c5d0f73ec2c4-image-1443567014825.gif)\r\n\r\nSee + how long it takes you to crack the cipher! Is this a good method of encrypting + secret data?\r\n" + U2 frequency random sub_markdown_instruction: "# Break a random substitution + cipher!\r\n\r\nThis version of the tool gives you more information about the + encrypted text and more options for how to try out different substitutions.\r\n\r\n### + Different ways analyze text\r\n- Play with some of the sorting options available + in the Random substitution cipher tab to get different views on the letter + frequencies in the input text as well as standard English text.\r\n![](https://images.code.org/82efbca1807206c9a07de520fdb22027-image-1443572614493.23.28.png)\r\n\r\n### + Different ways to substitute\r\n- To substitute a letter you can drag a blue + letter of the alphabet directly underneath the orange letter you want changed + in the original ciphertext.\r\n![](https://images.code.org/da9a7af7568d8c1698872ab91b4d79d7-image-1443572471212.gif)\r\n\r\n### + Play. Always play.\r\n- There are other ways to analyze and substitute characters + that you can find by clicking on the buttons and trying out whatever you like.\r\n- + Remember: you can't break it :)\r\n\r\nSee how long it takes you to crack + the cipher! Is this a good method of encrypting secret data?" U2 vigenere cipher_markdown_instruction: "# Encrypt and decrypt a message with the Vigenère cipher\r\n\r\nThis is an interactive version of the Vigenère cipher that animates the encryption and decryption as it’s happening, given @@ -17996,22 +15381,6 @@ en: Step a few times, and then Play\r\n\r\nYou should see the original text emerge. \r\n![](https://images.code.org/dc89d6c19c17adb23b6b5ff9a62c4583-image-1443574425182.gif)\r\n\r\n\r\nHow hard would it be to crack a message encrypted with this cipher? Does the length of the key make a difference?" - U2 Vigenere_markdown_instruction: "# Encrypt and decrypt a message with the - Vigenère cipher\r\n\r\nThis is an interactive version of the Vigenère cipher - that animates the encryption and decryption as it’s happening, given a piece - of text to encrypt or decrypt and the key.\r\n\r\n# Do this\r\n### Encrypt - a message\r\nClick Step several times, and trace what’s happening. Pay attention - to:\r\n\r\n- How the ciphertext is being produced\r\n- What happens when you - get to the last character of the key\r\n- After you’ve stepped through a few - characters click Play to watch the rest animate\r\n- Hit Restart and play - the animation again. You can use the speed slider to speed it up or slow it - down \r\n\r\n![](https://images.code.org/06858f88ac12997bba73f4f76638a068-image-1443574425185.gif)\r\n\r\n### - Decrypt a message\r\nEncrypt a message as above, then: \r\n\r\n- Highlight - and copy the ciphertext\r\n- Paste it into the plaintext area. Note: Don’t - change the key\r\n- Change the Encrypt/Decrypt toggle to Decrypt\r\n- Hit - Step a few times, and then Play\r\n\r\nYou should see the original text emerge. \r\n![](https://images.code.org/dc89d6c19c17adb23b6b5ff9a62c4583-image-1443574425182.gif)\r\n\r\n\r\nHow - hard would it be to crack a message encrypted with this cipher? Does the length - of the key make a difference?\r\n" U2L01 Assessment 4_markdown_instruction: "## The Internet is for Everyone: Assessment 4\n\nExplain one challenge raised by Vint Cerf in “The Internet is for Everyone - but it won’t be if….” and give one example of it that you @@ -18188,12 +15557,12 @@ en: password frequently or to have a longer password? \n\nWhat level of security is appropriate to require of end users? Does this change, depending on the context (for example, employee or customer)?\t\n" - U2L16 Free response assessment 1_markdown_instruction: "What does \"computationally - hard\" mean?" - U2L16 Free Response assessment 2_markdown_instruction: "What do people do who - need solutions to large computationally-hard problems?" U2L16 Free Response Assessment 3_markdown_instruction: "Why are computationally-hard problems important in encryption strategies?" + U2L16 Free Response assessment 2_markdown_instruction: "What do people do who + need solutions to large computationally-hard problems?" + U2L16 Free response assessment 1_markdown_instruction: "What does \"computationally + hard\" mean?" U2L17 Assessment 1_markdown_instruction: "Describe what it means for a problem to be “computationally hard.”" U2L17 Assessment 2_markdown_instruction: "What strategies do people use to @@ -18294,6 +15663,25 @@ en: you will know the name (or URL) of a computer you wish to talk to, but not its IP address. \n\nList two impacts that would result if you HAD TO KNOW IP addresses to get to websites?\n" + U3 - Arrays - Demo App_markdown_instruction: "# My Favorite Things\r\n\r\nCheck + out this simple app for creating a collection of your favorite things. **We're + going to be working towards building this app** over the next several exercises. + As you might expect, this application **uses an array** to store and organize + information.\r\n\r\n# Do This:\r\n\r\n* Use the \"My Favorite Things\" app + and try to **predict how arrays are used to create the functionality you observe.** + \r\n* Some features to notice:\r\n\t* The app keeps track of a **list of your + favorite things**.\r\n * You may use buttons to **move forward and backward + through your list**.\r\n * The **current entry and total number of entries** + are indicated at the top.\r\n * You may **add a new entry** at the current + location in your list." + U3 - Arrays - Wrap Up 1_markdown_instruction: "## Choose: Array or Variable?\n\nYour + app needs to store the following information. For each type of information, + decide whether you would use an array or a variable to store it:\n \n* All + the messages a user has sent\n* The highest score a user has ever reached + on the app\n* A username and password to unlock the app\n\n" + U3 - Arrays - Wrap Up 2_markdown_instruction: "## Free Response: Choosing Array + or Variable\n\nIn general, when do you think you should store information + in an array, and when should you use a variable?\n" U3 - Arrays - appendItem_markdown_instruction: "# Adding Items to an Array\r\n\r\n<img src=\"https://images.code.org/c9244eb598416b5a3d9baac088bbaca8-image-1447267168567.39.06 PM.png\" style=\"width: 250px; float: right\">\r\n\r\nIn our last exercise @@ -18366,17 +15754,6 @@ en: name**.\r\n* Use `console.log` to display the contents of your array. Below is an example of the output your program should generate.\r\n\r\n![](https://images.code.org/230d988cf99556db04a8a4ad6a8d8a47-image-1447364062049.33.53 PM.png)\r\n\r\n" - U3 - Arrays - Demo App_markdown_instruction: "# My Favorite Things\r\n\r\nCheck - out this simple app for creating a collection of your favorite things. **We're - going to be working towards building this app** over the next several exercises. - As you might expect, this application **uses an array** to store and organize - information.\r\n\r\n# Do This:\r\n\r\n* Use the \"My Favorite Things\" app - and try to **predict how arrays are used to create the functionality you observe.** - \r\n* Some features to notice:\r\n\t* The app keeps track of a **list of your - favorite things**.\r\n * You may use buttons to **move forward and backward - through your list**.\r\n * The **current entry and total number of entries** - are indicated at the top.\r\n * You may **add a new entry** at the current - location in your list." U3 - Arrays - expressionsAsIndexes_markdown_instruction: "# Expressions as Indexes: Using Variables\r\n\r\nWe can use **any expression that evaluates to a number** as an index in an array. Here are some examples:\r\n\r\n![](https://images.code.org/6d4ecc9249dc9f3a845196b04d833c1a-image-1447268711944.24.53 @@ -18385,6 +15762,64 @@ en: from this list** to the console by generating a value for a random index. Try to write your program using `list.length` rather than hard-coding the length of the list.\r\n\r\n![](https://images.code.org/d0463c0f2528e04c396f3b9cf219c3ed-image-1447370139548.gif)" + U3 - Arrays - favThings Counting Variable_markdown_instruction: "# Current + Index\r\n\r\nThis app also allows a user to scroll through individual items + in the array. In order to keep track of which index we are currently viewing, + our application will need **a global variable that stores the current index**. + In coming exercises we'll want our global index to change, so let's **make + sure that your code references your global index** rather than fixed values.\r\n\r\n# + Do This:\r\n\r\n<img src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 + AM.png\" style=\"width: 250px; float: right\">\r\n\r\n* Create a **global + variable** that will be used to keep track of the current index in the array. + Set this variable to 0.\r\n* Update `setText` which displays the words to + show your first favorite thing using **the global index variable** instead + of a hard-coded number. \r\n* Update `setText` which displays the current + item number to use **the global index variable** instead of a hard-coded number.\r\n\t* + **Hint:** since arrays are zero-indexed **you will have to add one to your + index** to generate the correct value to display.\r\n* **Note:** neither of + these outputs will be able to change yet. Don't worry, we'll be taking care + of that in coming exercises!" + U3 - Arrays - favThings Next_markdown_instruction: "# Next Button\r\n\r\nNice + work! Your application should now have some simple output displaying one of + your favorite things and indicating which item of your list you are showing. + To make things more interesting, however, **we want to be able to change which + item we display**.\r\n\r\nTo change the item displayed, the user will use + the \"Next\" and \"Last\" buttons. These should **increase or decrease the + global index by one and then you should update the information displayed on + the screen**. To start out with, however, we'll just be writing code for + our Next Button. \r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to the + \"Next\" button.\r\n* Write code in this event handler that **increments your + global index variable** and then **updates the output on the screen**.\r\n\t* + **Note:** If your code from the last exercise was written to reference this + variable then you should just be able to reuse it once you've incremented + your variable. We'll talk more about this in the next exercise.\r\n* Run + your program to **confirm that the user can move forward through the list + and that the output displayed is correct**.\r\n\t* **Note:** You may notice + that your program throws an error if the global index variable goes out of + bounds. Don't worry about this for now - we'll fix it in a later exercise." + U3 - Arrays - favThings Prev_markdown_instruction: "# Last Button\r\n\r\nOur + user can now move forward through our list of favorite things, and we're + about to write code that allows them to move backwards as well. If you've + written your code to reference your global index then this should only require + you to decrease its value by one and reuse code that updates the screen output. + Before we write the code for backwards let's work on cleaning up our code.\r\n\r\n**Removing + Repeated Code:** Once you add the code for moving backwards through your array, + your program will have three places where it updates the screen by setting + the text of your screen elements. Rather than repeating this code we should + **create a function** that updates the screen and then call it every time + we need to refresh those elements. This will not only make our program easier + to read and avoids the errors that can arise from redundant code, but it also + makes it easier to make changes to how our program runs, since all the code + that updates the screen is in a single place.\r\n\r\n# Do This:\r\n\r\n* **Write + a function** that contains the `setText` commands you have used to update + the screen.\r\n* **Replace** the places in your code where you used to have + these commands with **calls to your new function**.\r\n* **Add an event handler** + to the \"Last\" button that decreases the **global index variable** by one + and then updates the screen by calling your new function.\r\n* Run your program + to confirm that the user **can move forward AND backward** through the list + and that the output displayed is correct.\r\n * **Note:** You may notice + that your program throws an error if the global index variable goes out of + bounds. Don't worry about this for now - we'll fix it in a later exercise." U3 - Arrays - favThings addItem_markdown_instruction: "# Adding New Items\r\n\r\nNow we want our user to be able to add items of their own to the list. As you might have guessed, this is as easy as inserting an item into our array at @@ -18412,23 +15847,6 @@ en: using one of the two strategies described above.\r\n* Run your program to confirm that the user **cannot go out of bounds** and that the output displayed is correct." - U3 - Arrays - favThings Counting Variable_markdown_instruction: "# Current - Index\r\n\r\nThis app also allows a user to scroll through individual items - in the array. In order to keep track of which index we are currently viewing, - our application will need **a global variable that stores the current index**. - In coming exercises we'll want our global index to change, so let's **make - sure that your code references your global index** rather than fixed values.\r\n\r\n# - Do This:\r\n\r\n<img src=\"https://images.code.org/d93b2abfec64ce67e8ccfecee14bae3d-image-1447346228581.36.43 - AM.png\" style=\"width: 250px; float: right\">\r\n\r\n* Create a **global - variable** that will be used to keep track of the current index in the array. - Set this variable to 0.\r\n* Update `setText` which displays the words to - show your first favorite thing using **the global index variable** instead - of a hard-coded number. \r\n* Update `setText` which displays the current - item number to use **the global index variable** instead of a hard-coded number.\r\n\t* - **Hint:** since arrays are zero-indexed **you will have to add one to your - index** to generate the correct value to display.\r\n* **Note:** neither of - these outputs will be able to change yet. Don't worry, we'll be taking care - of that in coming exercises!" U3 - Arrays - favThings createArray_markdown_instruction: "# Create Your Array\r\n\r\nNow that we've dealt with our design elements we'll need to start writing the actual code of our app. This app keeps track of a list of items, so we know @@ -18462,47 +15880,6 @@ en: a little tricky if you **remove the item at the end of the list** so see if you can account for that.\r\n* Only add words **if they are not blank**.\r\n* **Improve the appearance** of the app." - U3 - Arrays - favThings Next_markdown_instruction: "# Next Button\r\n\r\nNice - work! Your application should now have some simple output displaying one of - your favorite things and indicating which item of your list you are showing. - To make things more interesting, however, **we want to be able to change which - item we display**.\r\n\r\nTo change the item displayed, the user will use - the \"Next\" and \"Last\" buttons. These should **increase or decrease the - global index by one and then you should update the information displayed on - the screen**. To start out with, however, we'll just be writing code for - our Next Button. \r\n\r\n# Do This:\r\n\r\n* **Add an event handler** to the - \"Next\" button.\r\n* Write code in this event handler that **increments your - global index variable** and then **updates the output on the screen**.\r\n\t* - **Note:** If your code from the last exercise was written to reference this - variable then you should just be able to reuse it once you've incremented - your variable. We'll talk more about this in the next exercise.\r\n* Run - your program to **confirm that the user can move forward through the list - and that the output displayed is correct**.\r\n\t* **Note:** You may notice - that your program throws an error if the global index variable goes out of - bounds. Don't worry about this for now - we'll fix it in a later exercise." - U3 - Arrays - favThings Prev_markdown_instruction: "# Last Button\r\n\r\nOur - user can now move forward through our list of favorite things, and we're - about to write code that allows them to move backwards as well. If you've - written your code to reference your global index then this should only require - you to decrease its value by one and reuse code that updates the screen output. - Before we write the code for backwards let's work on cleaning up our code.\r\n\r\n**Removing - Repeated Code:** Once you add the code for moving backwards through your array, - your program will have three places where it updates the screen by setting - the text of your screen elements. Rather than repeating this code we should - **create a function** that updates the screen and then call it every time - we need to refresh those elements. This will not only make our program easier - to read and avoids the errors that can arise from redundant code, but it also - makes it easier to make changes to how our program runs, since all the code - that updates the screen is in a single place.\r\n\r\n# Do This:\r\n\r\n* **Write - a function** that contains the `setText` commands you have used to update - the screen.\r\n* **Replace** the places in your code where you used to have - these commands with **calls to your new function**.\r\n* **Add an event handler** - to the \"Last\" button that decreases the **global index variable** by one - and then updates the screen by calling your new function.\r\n* Run your program - to confirm that the user **can move forward AND backward** through the list - and that the output displayed is correct.\r\n * **Note:** You may notice - that your program throws an error if the global index variable goes out of - bounds. Don't worry about this for now - we'll fix it in a later exercise." U3 - Arrays - favThings template_markdown_instruction: "# Getting Started: Creating IDs\r\n\r\nTo get your application off the ground we've provided **the user interface elements that you will use in your application**. Unfortunately @@ -18615,14 +15992,6 @@ en: of at least **5 words**.\r\n* Use `console.log` to confirm you succesfully created your sentence.\r\n\r\n![](https://images.code.org/75fc0b55a44d02e2366c60b30aeb28d1-image-1447252397993.33.06 AM.png)" - U3 - Arrays - Wrap Up 1_markdown_instruction: "## Choose: Array or Variable?\n\nYour - app needs to store the following information. For each type of information, - decide whether you would use an array or a variable to store it:\n \n* All - the messages a user has sent\n* The highest score a user has ever reached - on the app\n* A username and password to unlock the app\n\n" - U3 - Arrays - Wrap Up 2_markdown_instruction: "## Free Response: Choosing Array - or Variable\n\nIn general, when do you think you should store information - in an array, and when should you use a variable?\n" U3 - Basic Conditionals - 1_markdown_instruction: "0- True and False statement\r\n\r\nif ( 1 < 5) {\r\n console.log(\"Hello\");\r\n}" U3 - Basic Conditionals - 2_markdown_instruction: "# Greater and Less Than\r\nIn @@ -18658,6 +16027,22 @@ en: setting the `x` and `y` values of the circle to random numbers, it will look like there's only one dot. But really you will have just drawn 200 dots all at the same (x, y) position.\r\n\r\n" + U3 - Canvas - One Dot sprayPaint_markdown_instruction: "# Making Spray Paint\r\n\r\nThe + next effect we would like to create is a \"spray paint\" effect. Instead of + drawing a single dot for every location stored in `eventList`, we'll draw + many small dots randomly placed around each location.\r\n\r\nWe are going + to start off just practicing **drawing a circle whose x and y locations use + `offsetX` and `offsetY` with a small random value added**. This makes the + line of code to draw the circle kind of long, but hopefully it's easy to + understand if you read it carefully.\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n# + Do This:\r\n\r\n* **Set the style of another button** in Design Mode, give + a label like \"Spray Paint,\" give it a descriptive ID, and attach a click + event handler to it.\r\n* **Copy the code from the \"Original\"** button into + the event handler for spray paint.\r\n* Change the code for `circle` so that + it will **draw a dot whose x and y locations use `offsetX` and `offsetY` with + a small random value added. **\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n* + **Run your app** to make sure it is drawing small dots close to the original + position. Look at the example below.\r\n\r\n![](https://images.code.org/d6279085a5c6689dd5c745a0d0e28136-image-1448386996780.gif)" U3 - Canvas - appendToArray_markdown_instruction: "# Store Your Dots\r\n\r\nNow we're going to get into the core of the activity. We will be **creating a record of every dot your user draws**.\r\n\r\nTo do this, we will append *every* @@ -18797,22 +16182,6 @@ en: PM.png)\r\n* Run your program and confirm that **when you draw, the speed of the mouse affects the radius of the dots**. The effect should look something like what's below \r\n\r\n![](https://images.code.org/ee83d18f04e4d9d486428273b7321f9f-image-1448394071473.gif)" - U3 - Canvas - One Dot sprayPaint_markdown_instruction: "# Making Spray Paint\r\n\r\nThe - next effect we would like to create is a \"spray paint\" effect. Instead of - drawing a single dot for every location stored in `eventList`, we'll draw - many small dots randomly placed around each location.\r\n\r\nWe are going - to start off just practicing **drawing a circle whose x and y locations use - `offsetX` and `offsetY` with a small random value added**. This makes the - line of code to draw the circle kind of long, but hopefully it's easy to - understand if you read it carefully.\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n# - Do This:\r\n\r\n* **Set the style of another button** in Design Mode, give - a label like \"Spray Paint,\" give it a descriptive ID, and attach a click - event handler to it.\r\n* **Copy the code from the \"Original\"** button into - the event handler for spray paint.\r\n* Change the code for `circle` so that - it will **draw a dot whose x and y locations use `offsetX` and `offsetY` with - a small random value added. **\r\n\r\n![](https://images.code.org/c0c0a9df4215be16953a26ec102b2f9c-image-1448294147046.png)\r\n\r\n* - **Run your app** to make sure it is drawing small dots close to the original - position. Look at the example below.\r\n\r\n![](https://images.code.org/d6279085a5c6689dd5c745a0d0e28136-image-1448386996780.gif)" U3 - Canvas - redrawOriginal_markdown_instruction: "# Redraw Original\r\n\r\nIf you were able to get that working and understand what you did, congratulations! That was some serious programming! If not, take a moment to go back and talk @@ -18987,32 +16356,17 @@ en: the `if` statement** to \"Nope. Guess again.\"\r\n\r\n<img src=\"https://images.code.org/f5c5de1b77a9caf16027e65ed24f91ec-image-1446234785600.gif\" style=\"width: 450px\">\r\n\r\n* **Run the program** a couple times to **look for a bug**. We will fix this on the next level." - U3 - Conditionals - Combine AND and OR_markdown_instruction: "# Combining AND - and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean expression - to invert it's truthiness. This is useful if you want to express the inverse - of a more complex expression. This opens the door to express the same logical - statments in different ways. \r\n\r\nFor example, let's say you want to - determine if a person, based on their age (under 12 or over 65) gets to pay - a reduced price for a movie ticket. You might express that like this:\r\n\r\n```\r\nif( - (age < 12) || (age > 65) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\nBut - you might also figure out a way to determine if the age is between 12 and - 65 (`(age > 5) && (age < 65)`) and then take the inverse of that. So using - the NOT operator this would work as well:\r\n\r\n```\r\nif( !( (age > 5) && - (age < 18) ) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\n**Why - use one over the other?** Personal preference. Use the one that makes the - most sense to you, but it should be a clear expression of what you are trying - to say. \r\n\r\n\r\n# Logic Challenge! Do This\r\nWe've provided you with - starting code that prompts the user to enter a **day** and their **age** and - store it in variables.\r\n\r\n**Add an if statement that uses both AND and - OR operators**\r\n\r\n * The app should write \"Time for school!\" if it's - a weekday and the user is under 18.\r\n \t* Hint: one way to say that it's - a weekday is to say that it's NOT a weekend.\r\n * Otherwise it should write - \"Time to go to work!\"\r\n \r\n \r\n**WARNING** logic can get tricky sometimes. Make - sure to test your program with inputs that cover every possibility. There - are 4 basic cases to test for:\r\n\r\n * It is a weekday and age is under - 18\r\n * It is a weekday and age is not under 18\r\n * It's not a weekday - and age is under 18\r\n * It's not a weekday and age is not under 18\r\n\r\nTry - it out!" + U3 - Conditionals - Combine AND OR Simple_markdown_instruction: "# Combining + AND and OR\r\n\r\nYou can express more complex conditions by combining **AND** + and **OR** in one statement. Here is the example from the previous page which + you can use as a reference. This statement will evaluate to **true** if the + day is Tuesday or Thursday AND their age is 15 or 16.\r\n\r\n![](https://images.code.org/3f3aba7828abd88fdbd90eda60611bd3-image-1448062956405.06.36.png)\r\n\r\n# Do + This:\r\nWe've provided you with starting code that prompts the user to enter + a **day** and their **age** and stores the result in variables.\r\n\r\n**Add + an `if` statement that uses both AND and OR operators**\r\n\r\n * The app + should write \"Sleep in!\" if it's a weekend and the user is a teenager.\r\n + * Otherwise it should write \"Uh oh. Have to wake up.\"\r\n \r\n\r\nTry it + out!\r\n" U3 - Conditionals - Combine AND OR and NOT_markdown_instruction: "# Combining AND and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean expression to invert its result. This opens the door to express the same logical @@ -19041,43 +16395,32 @@ en: to test for:\r\n\r\n * It is a weekday and age is under 18\r\n * It is a weekday and age is not under 18\r\n * It's not a weekday and age is under 18\r\n * It's not a weekday and age is not under 18\r\n\r\nTry it out!" - U3 - Conditionals - Combine AND OR Simple_markdown_instruction: "# Combining - AND and OR\r\n\r\nYou can express more complex conditions by combining **AND** - and **OR** in one statement. Here is the example from the previous page which - you can use as a reference. This statement will evaluate to **true** if the - day is Tuesday or Thursday AND their age is 15 or 16.\r\n\r\n![](https://images.code.org/3f3aba7828abd88fdbd90eda60611bd3-image-1448062956405.06.36.png)\r\n\r\n# Do - This:\r\nWe've provided you with starting code that prompts the user to enter - a **day** and their **age** and stores the result in variables.\r\n\r\n**Add - an `if` statement that uses both AND and OR operators**\r\n\r\n * The app - should write \"Sleep in!\" if it's a weekend and the user is a teenager.\r\n - * Otherwise it should write \"Uh oh. Have to wake up.\"\r\n \r\n\r\nTry it - out!\r\n" - U3 - Conditionals - intoOr_markdown_instruction: "# OR Operator\r\n\r\n<img - src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nUp till now we have - seen the boolean operators ==, >, and <. There are a couple more boolean operators - that are very useful to know about. AND(`&&`) and OR (`||`). Let's take - a look at OR.\r\n\r\nOR allows you to check multiple boolean expressions together.\r\n\r\n<img - src=\"https://images.code.org/df380925c0c598f06a5192ff2cfc8401-image-1446156668504.08.03 - PM.png\" style=\"width: 100px; float:right\"> \r\n\r\nIf either or both statements - are true, the OR operator will evaluate to true. If both are false, the OR - operator will evaluate to false. \r\n\r\n# Do This\r\n\r\n* **Run the code** - to see what it does.\r\n\r\n* **Add another conditional that check if color - is purple or number is greater than 2**\r\n\r\n* **Add another conditional - that check if direction is left or animal is zebra or number is 4**" - U3 - Conditionals - introAND_markdown_instruction: "# OR Operator\r\n\r\n<img - src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 - PM.png\" style=\"width: 100px; float: right\">\r\n\r\nUp till now we have - seen the boolean operators ==, >, and <. There are a couple more boolean operators - that are very useful to know about. AND(`&&`) and OR (`||`). Let's take - a look at OR.\r\n\r\nOR allows you to check multiple boolean expressions together.\r\n\r\n<img - src=\"https://images.code.org/df380925c0c598f06a5192ff2cfc8401-image-1446156668504.08.03 - PM.png\" style=\"width: 100px; float:right\"> \r\n\r\nIf either or both statements - are true, the OR operator will evaluate to true. If both are false, the OR - operator will evaluate to false. \r\n\r\n# Do This\r\n\r\n* **Run the code** - to see what it does.\r\n\r\n* **Add another conditional that check if color - is purple or number is greater than 2**\r\n\r\n* **Add another conditional - that check if direction is left or animal is zebra or number is 4**" + U3 - Conditionals - Combine AND and OR_markdown_instruction: "# Combining AND + and OR and NOT\r\n\r\nYou can stick a NOT (`!`) in front of any boolean expression + to invert it's truthiness. This is useful if you want to express the inverse + of a more complex expression. This opens the door to express the same logical + statments in different ways. \r\n\r\nFor example, let's say you want to + determine if a person, based on their age (under 12 or over 65) gets to pay + a reduced price for a movie ticket. You might express that like this:\r\n\r\n```\r\nif( + (age < 12) || (age > 65) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\nBut + you might also figure out a way to determine if the age is between 12 and + 65 (`(age > 5) && (age < 65)`) and then take the inverse of that. So using + the NOT operator this would work as well:\r\n\r\n```\r\nif( !( (age > 5) && + (age < 18) ) ){\r\n\twrite(\"You qualify for a reduced price!\");\r\n}\r\n```\r\n\r\n**Why + use one over the other?** Personal preference. Use the one that makes the + most sense to you, but it should be a clear expression of what you are trying + to say. \r\n\r\n\r\n# Logic Challenge! Do This\r\nWe've provided you with + starting code that prompts the user to enter a **day** and their **age** and + store it in variables.\r\n\r\n**Add an if statement that uses both AND and + OR operators**\r\n\r\n * The app should write \"Time for school!\" if it's + a weekday and the user is under 18.\r\n \t* Hint: one way to say that it's + a weekday is to say that it's NOT a weekend.\r\n * Otherwise it should write + \"Time to go to work!\"\r\n \r\n \r\n**WARNING** logic can get tricky sometimes. Make + sure to test your program with inputs that cover every possibility. There + are 4 basic cases to test for:\r\n\r\n * It is a weekday and age is under + 18\r\n * It is a weekday and age is not under 18\r\n * It's not a weekday + and age is under 18\r\n * It's not a weekday and age is not under 18\r\n\r\nTry + it out!" U3 - Conditionals - Simple AND_markdown_instruction: "# AND Operator\r\n\r\n<img src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 PM.png\" style=\"width: 100px; float: right\">\r\n\r\nAgain you will see the @@ -19105,6 +16448,32 @@ en: \r\n\r\n * The program should write **\"It's the weekend!\"** if the day entered by the user is a weekend day. \r\n * Otherwise it should write **\"Can't wait for the weekend to get here.\"**" + U3 - Conditionals - intoOr_markdown_instruction: "# OR Operator\r\n\r\n<img + src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nUp till now we have + seen the boolean operators ==, >, and <. There are a couple more boolean operators + that are very useful to know about. AND(`&&`) and OR (`||`). Let's take + a look at OR.\r\n\r\nOR allows you to check multiple boolean expressions together.\r\n\r\n<img + src=\"https://images.code.org/df380925c0c598f06a5192ff2cfc8401-image-1446156668504.08.03 + PM.png\" style=\"width: 100px; float:right\"> \r\n\r\nIf either or both statements + are true, the OR operator will evaluate to true. If both are false, the OR + operator will evaluate to false. \r\n\r\n# Do This\r\n\r\n* **Run the code** + to see what it does.\r\n\r\n* **Add another conditional that check if color + is purple or number is greater than 2**\r\n\r\n* **Add another conditional + that check if direction is left or animal is zebra or number is 4**" + U3 - Conditionals - introAND_markdown_instruction: "# OR Operator\r\n\r\n<img + src=\"https://images.code.org/c1ec7743b3c8a888d76380f789263851-image-1446155863558.57.24 + PM.png\" style=\"width: 100px; float: right\">\r\n\r\nUp till now we have + seen the boolean operators ==, >, and <. There are a couple more boolean operators + that are very useful to know about. AND(`&&`) and OR (`||`). Let's take + a look at OR.\r\n\r\nOR allows you to check multiple boolean expressions together.\r\n\r\n<img + src=\"https://images.code.org/df380925c0c598f06a5192ff2cfc8401-image-1446156668504.08.03 + PM.png\" style=\"width: 100px; float:right\"> \r\n\r\nIf either or both statements + are true, the OR operator will evaluate to true. If both are false, the OR + operator will evaluate to false. \r\n\r\n# Do This\r\n\r\n* **Run the code** + to see what it does.\r\n\r\n* **Add another conditional that check if color + is purple or number is greater than 2**\r\n\r\n* **Add another conditional + that check if direction is left or animal is zebra or number is 4**" U3 - Design Mode - Console Log_markdown_instruction: "# Updating IDs and Debugging with Console Log\r\n\r\nIn the last level you tested out the new command: `console.log`. In this level we have a couple buttons with event handlers @@ -19344,33 +16713,6 @@ en: This will tell them they get it right only when that condition is true!\r\n* **Test your code out** to make sure it works.\r\n\r\n<img src=\"https://images.code.org/2f3487ec7a8d7cec1605f3da830c83f8-image-1446227512726.gif\" style=\"width: 350px\">" - U3 - image - Rotation Random Amount_markdown_instruction: "<img src=\"https://images.code.org/a7697b89e2c6ea67ae453410a1da6d47-image-1465572156435.gif\" - alt=\"wheel spinning\" style=\"width:200px;float:right\" >\r\n\r\n# Random - Rotation\r\n\r\nUsing random numbers with rotation can add interesting animation - effects. One effect you can use rotation for is shaking. **An object can look - like its shaking a little when you set its rotation to a small random number - repeatedly.**\r\n\r\n# Do This\r\nYou are going to start creating a spinner - wheel similar to one you might find at a carnival. You set up the wheel on - the last level so you are just adding the clicker at the top.\r\n\r\n* Create - a clicker sprite.\r\n* Set the sprite to the provided clicker image.\r\n* - Set the rotation to a random number between -5 and 5.\r\n* Test it out." - U3 - image - wheel free play_markdown_instruction: "# Wheel Free Play\r\n\r\nHere - is the spinning wheel you created so far. Continue to improve it.\r\n\r\n# - Do This\r\n\r\n* Create a background scene for the wheel to go in.\r\n* Resize - the wheel to fit the scene.\r\n* Add at least 1 other sprite to the scene - and give it some movement.\r\n* Add your own ideas!" - U3 - images - bee free play_markdown_instruction: "# Bee Free Play\r\n\r\nHere - is the swarm of bees you have been working on. Continue to improve the animation!\r\n\r\n# - Do This\r\n* Add a background.\r\n* Add a flower or hive sprite.\r\n* Make - the flower or hive sprite move.\r\n* Add more ideas of your own!" - U3 - images - gears conditionals_markdown_instruction: "# Gears Conditionals\r\n\r\nThe - gears are back! Lets change the direction of spinning based on some conditions!\r\n\r\n# - Do This\r\n\r\n" - U3 - images - gears free play_markdown_instruction: "# Gears Free Play\r\n\r\nHere - are the spinning gears you have been working on. Continue to improve the animation!\r\n\r\n# - Do This\r\n\r\n* Add more gears of different sizes.\r\n* Make the gears line - up and spin with the existing ones.\r\n* Create a background for the gears.\r\n* - Add more ideas of your own!" U3 - Keys - Add Image URLs_markdown_instruction: "# Adding Image URLs\r\n\r\nWe're ready to start improving the \"My Favorite Things\" app. \r\n\r\nWe'll do this in two steps:\r\n1. We will change it from scrolling text to scrolling @@ -19750,11 +17092,6 @@ en: line of code and steps over to the next one.\r\n\t\t* **Continue** - Execute until you hit the next break point\r\n\t\t* ( Note: We will talk about Step in and Step out later.)" - U3 - Loops - minus = operator_markdown_instruction: "# Try Out the *-=* Operator\r\n\r\nThe - `-=` operator works almost identically to `+=`, but instead it subtracts the - value provided from the variable. Let's use this operator to **create a loop - that counts down from 30 by 3's**.\r\n\r\n# Do This:\r\n\r\n* **Change the - code to use `-=`** to count from *down* from 30 to 0 by 3's." U3 - Loops - Minus Minus_markdown_instruction: "# *++* Has a Friend! Introducing *--*\r\n\r\nAs you may have guessed, just as we can write `count = count + 1` as `count++` we can also write `count = count - 1` as `count--`.\r\n\r\nLet’s @@ -19763,22 +17100,6 @@ en: **Change the code to use `count--` to count *down* from 10 to 1.** You will need to:\r\n\t* Change the looping condition.\r\n * Change `count++` to `count--`.\r\n * Change the initial value assigned to `count`.\r\n" - U3 - Loops - plus and minus = operator_markdown_instruction: "# Introducing - *+=* and *-=* Operators\r\n\r\nSometimes you want to add or subtract something - *other than 1* from the current value of a variable. If you wanted to add - or subtract 3 for example, such as: `count = count + 3` or `count = count - - 3`, `++` and `--` wouldn’t help. \r\n\r\nIt turns out this is pretty common - as well so there is actually a shorthand version of `count = count + 3`. \r\n\r\n**Introducing - `+=` and `-=`**!\r\n\r\nWe can use the `+=` or `-=` operator to add or subtract - any value we want to the current value of a variable. \r\n\r\nSo, the shorthand - versions of `count = count + 3` and `count = count - 3` would be:\r\n * `count - += 3` \r\n * `count -= 3`\r\n\r\n**Notice** that these 3 statements: `count - = count + 1`, `count++`, and `count += 1` all do **exactly** the same thing!\r\n\r\nWhich - one you use as a programmer is your choice, and in the future you can use - either version, but try out the new operator here.\r\n\r\n# Do This:\r\n\r\n* - **Change the code to use `count += 3`** instead of `count = count + 3` so - the program will still count up by 3. (You'll need to be in text mode to - do this.) \r\n\r\n(You'll get to try out `-=` on the next level.)" U3 - Loops - Plus Plus_markdown_instruction: "# *++* Operator\r\n\r\nAs programmers we are always looking for more concise ways to write code. It is so common to add 1 to a variable such as in `count = count + 1` that there is actually @@ -19803,6 +17124,27 @@ en: Do This:\r\n\r\n* **Run the program.**\r\n\r\n* Use the Debug Console to **check the ending value of `num`**. You can do this by typing num in the Debug Console and hitting enter!" + U3 - Loops - minus = operator_markdown_instruction: "# Try Out the *-=* Operator\r\n\r\nThe + `-=` operator works almost identically to `+=`, but instead it subtracts the + value provided from the variable. Let's use this operator to **create a loop + that counts down from 30 by 3's**.\r\n\r\n# Do This:\r\n\r\n* **Change the + code to use `-=`** to count from *down* from 30 to 0 by 3's." + U3 - Loops - plus and minus = operator_markdown_instruction: "# Introducing + *+=* and *-=* Operators\r\n\r\nSometimes you want to add or subtract something + *other than 1* from the current value of a variable. If you wanted to add + or subtract 3 for example, such as: `count = count + 3` or `count = count + - 3`, `++` and `--` wouldn’t help. \r\n\r\nIt turns out this is pretty common + as well so there is actually a shorthand version of `count = count + 3`. \r\n\r\n**Introducing + `+=` and `-=`**!\r\n\r\nWe can use the `+=` or `-=` operator to add or subtract + any value we want to the current value of a variable. \r\n\r\nSo, the shorthand + versions of `count = count + 3` and `count = count - 3` would be:\r\n * `count + += 3` \r\n * `count -= 3`\r\n\r\n**Notice** that these 3 statements: `count + = count + 1`, `count++`, and `count += 1` all do **exactly** the same thing!\r\n\r\nWhich + one you use as a programmer is your choice, and in the future you can use + either version, but try out the new operator here.\r\n\r\n# Do This:\r\n\r\n* + **Change the code to use `count += 3`** instead of `count = count + 3` so + the program will still count up by 3. (You'll need to be in text mode to + do this.) \r\n\r\n(You'll get to try out `-=` on the next level.)" U3 - Loops And Arrays - Add 5_markdown_instruction: "# Updating Values in an Array with a *for* Loop\r\n\r\nThe `for` loop you set up on the last level is actually so common that we will rarely deviate from this `for` loop setup.\r\n\r\n<img @@ -20174,19 +17516,6 @@ en: we are trying to change.\r\n\r\n<img src=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/e32fd89b6e03b9d49c94e39e79120c03-image-1446072381510.png\" target=\"_blank\">Open diagram in a new tab</a>" - U3 - Movie Bot - toLowerCase_markdown_instruction: "# Dealing with Character - Case\r\n\r\nWhat if the user types **ACTION** instead of **action**? These - are two different strings to the computer and therefore it won't recognize - they are the same. We want Movie Bot to treat words the same ignoring the - case of the letters. We can do this using the string command `toLowerCase`.\r\n\r\n**Note: - ** Check out the flowchart below to see the logic we are trying to add. \r\n\r\n# - Do This:\r\n\r\n* **Try typing COMEDY, ACtioN, horroR, and Romance** into - Movie Bot.\r\n\r\n* **Use the `toLowerCase` command** to change all user input - into lowercase letters after they enter it.\r\n\r\n* **Check that COMEDY, - ACtioN, horroR, and Romance generate the same recommendations** as comedy, - action, horror, and romance.\r\n\r\n<img src=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" - style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" - target=\"_blank\">Open diagram in a new tab</a>" U3 - Movie Bot - When Multiple If Statements_markdown_instruction: "# Adding a Separate *if*\r\n\r\nIt's still the case that sometimes you want to have two completely separate groups of `if` statements because there are separate @@ -20205,6 +17534,19 @@ en: src=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/3dac4019734e63ecbfd4784c82fbd402-image-1461771319064.png\" target=\"_blank\">Click to open in separate window.</a>" + U3 - Movie Bot - toLowerCase_markdown_instruction: "# Dealing with Character + Case\r\n\r\nWhat if the user types **ACTION** instead of **action**? These + are two different strings to the computer and therefore it won't recognize + they are the same. We want Movie Bot to treat words the same ignoring the + case of the letters. We can do this using the string command `toLowerCase`.\r\n\r\n**Note: + ** Check out the flowchart below to see the logic we are trying to add. \r\n\r\n# + Do This:\r\n\r\n* **Try typing COMEDY, ACtioN, horroR, and Romance** into + Movie Bot.\r\n\r\n* **Use the `toLowerCase` command** to change all user input + into lowercase letters after they enter it.\r\n\r\n* **Check that COMEDY, + ACtioN, horroR, and Romance generate the same recommendations** as comedy, + action, horror, and romance.\r\n\r\n<img src=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" + style=\"width: 100%\">\r\n\r\n<a href=\"https://images.code.org/183082e89d296b88112a5a5380afac6c-image-1446069165327.png\" + target=\"_blank\">Open diagram in a new tab</a>" U3 - Practice Create Performance Task_markdown_instruction: "# Practice Create Performance Task\r\n\r\nYou've finally made it to the end of the Programming Unit! We will continue some programming in the next unit, but for now we are @@ -20738,23 +18080,6 @@ en: the numbers in the four different openings, then try running the program again. \r\n* Repeat that process until you can answer:\r\n\t* What do each of the four openings control?\r\n * What is the size of the drawing area?" - U3 - Simple Drawing - regular polygon_markdown_instruction: "# Regular Polygons\r\n\r\nYou - are now going to add the stop sign.\r\n\r\n<img src=\"https://images.code.org/0ea048eca4b3a7f3263cf8e0a9882d2b-image-1460646035610.53.20 - AM.png\" style=\"width:200px\">\r\n\r\nIn order to create a stop sign you - are going to need a new block. The `regularPolygon()` block draws any shape - with sides that are all the same length. Some examples are:\r\n\r\ntriangle - (3 sides) <img src=\"https://images.code.org/9bcbae86518007a3141ae5dbde5f1305-image-1460750039357.52.36 - PM.png\" style=\"width:100px\"> square (4 sides) <img src=\"https://images.code.org/1def6a4326b78b76a5fcf95c6ec33b8b-image-1460750039357.52.53 - PM.png\" style=\"width:100px\"> pentagon (5 sides) <img src=\"https://images.code.org/ba7262caf5ad0f9ec926027a2d281ceb-image-1460750039358.53.05 - PM.png\" style=\"width:100px\"> \r\n\r\nThe `regularPolygon` has 4 parameters - x, y, number of sides, and the radius. x and y specify the center of the shape. - The radius is the distance from the center to the end of each of the sides.\r\n\r\nTo - make a stop sign you are going to need an octagon, which has 8 sides. <img - src=\"https://images.code.org/4e8c23c88e33aa5e06ed3e5ca702e3ab-image-1460750174518.56.05 - PM.png\" style=\"width:100px\">\r\n\r\n# Do This\r\n\r\n* Add a pole for the - stop sign\r\n* Add an octagon (8 sided shape) for the sign. Hint: The center - of the octagon should be at the top of the pole.\r\n* Set the color of the - objects.\r\n* Make the stroke white and make the outline thicker" U3 - Simple Drawing - Road Ellipse_markdown_instruction: "# Clouds and Sun\r\n\r\nNext, you are going to add the clouds and sun to our picture. Here is an example of what your work could look like at the end of the level, but use some creativity @@ -20800,16 +18125,6 @@ en: | (255,0,0)|\r\n| orange | (255,127,0) |\r\n| yellow | (255, 255, 0) |\r\n| green | (0,255,0) |\r\n| blue | (0, 0, 255) |\r\n| indigo | (75, 0, 130) |\r\n| violet | (139, 0, 255) | " - U3 - Simple Drawing - text_markdown_instruction: "# Text\r\n\r\nThe last step - is to add text to our stop sign. You can add text with the <img src=\"https://images.code.org/302a9fa63cce41d49ce101df08a378f3-image-1472661577637.39.29.png\" - style=\"width:150px\"> block. The `text()` block has 3 parameters: `text`, - `x` and `y`. `text` is the string of text you want to print on the screen. This - text needs to go inside `' '` so that the computer knows it's a string. `x` - and `y` are the x and y coordinates of the bottom left corner of the text.\r\n\r\nAlso, - don't forget to comment your code and use white space to block out connected - lines. \r\n\r\n# Do This\r\n* Add text to the center of the sign\r\n* Make - sure the text has no stroke and that the fill is white\r\n\r\n<img src=\"https://images.code.org/86a9f34aadf57bb8e3b897b8c6ddf52e-image-1460646615062.09.59 - AM.png\" width=200>" U3 - Simple Drawing - X and Y values_markdown_instruction: "# Bugs\r\n\r\nNot every program you write in computer science works perfectly or even well the first time. The things that go wrong with a computer program are called **bugs**. The @@ -20823,6 +18138,33 @@ en: out why the rectangle is not showing. **HINT** What are the biggest x and y positions that will show on the canvas?\r\n* **Move the rectangle to the lower left corner of the drawing area** as in the example on the right." + U3 - Simple Drawing - regular polygon_markdown_instruction: "# Regular Polygons\r\n\r\nYou + are now going to add the stop sign.\r\n\r\n<img src=\"https://images.code.org/0ea048eca4b3a7f3263cf8e0a9882d2b-image-1460646035610.53.20 + AM.png\" style=\"width:200px\">\r\n\r\nIn order to create a stop sign you + are going to need a new block. The `regularPolygon()` block draws any shape + with sides that are all the same length. Some examples are:\r\n\r\ntriangle + (3 sides) <img src=\"https://images.code.org/9bcbae86518007a3141ae5dbde5f1305-image-1460750039357.52.36 + PM.png\" style=\"width:100px\"> square (4 sides) <img src=\"https://images.code.org/1def6a4326b78b76a5fcf95c6ec33b8b-image-1460750039357.52.53 + PM.png\" style=\"width:100px\"> pentagon (5 sides) <img src=\"https://images.code.org/ba7262caf5ad0f9ec926027a2d281ceb-image-1460750039358.53.05 + PM.png\" style=\"width:100px\"> \r\n\r\nThe `regularPolygon` has 4 parameters + x, y, number of sides, and the radius. x and y specify the center of the shape. + The radius is the distance from the center to the end of each of the sides.\r\n\r\nTo + make a stop sign you are going to need an octagon, which has 8 sides. <img + src=\"https://images.code.org/4e8c23c88e33aa5e06ed3e5ca702e3ab-image-1460750174518.56.05 + PM.png\" style=\"width:100px\">\r\n\r\n# Do This\r\n\r\n* Add a pole for the + stop sign\r\n* Add an octagon (8 sided shape) for the sign. Hint: The center + of the octagon should be at the top of the pole.\r\n* Set the color of the + objects.\r\n* Make the stroke white and make the outline thicker" + U3 - Simple Drawing - text_markdown_instruction: "# Text\r\n\r\nThe last step + is to add text to our stop sign. You can add text with the <img src=\"https://images.code.org/302a9fa63cce41d49ce101df08a378f3-image-1472661577637.39.29.png\" + style=\"width:150px\"> block. The `text()` block has 3 parameters: `text`, + `x` and `y`. `text` is the string of text you want to print on the screen. This + text needs to go inside `' '` so that the computer knows it's a string. `x` + and `y` are the x and y coordinates of the bottom left corner of the text.\r\n\r\nAlso, + don't forget to comment your code and use white space to block out connected + lines. \r\n\r\n# Do This\r\n* Add text to the center of the sign\r\n* Make + sure the text has no stroke and that the fill is white\r\n\r\n<img src=\"https://images.code.org/86a9f34aadf57bb8e3b897b8c6ddf52e-image-1460646615062.09.59 + AM.png\" width=200>" U3 - Simulation - 1_markdown_instruction: "# Starting Small\r\n\r\nTo start, we're going to simulate flipping a coin 10 times. You might be thinking that isn't many coin flips, and that we could just do those flips in real life, @@ -21116,9 +18458,6 @@ en: Play with the increment amount to find a speed you like\r\n\r\n# Till The Animation Tab Works\r\n\r\n* <a href=\"https://images.code.org/60ce4d33daafb50996f53597b4f1547e-image-1466193542771.png\"> Wheel</a>" - U3 - Sprites and Mod - two sprites_markdown_instruction: "# Two Sprites\r\n\r\ntwo - rects - make one move on the left side of the screen and one on the right - side of the screen\r\n\r\n" U3 - Sprites and Mod - Width and Height Rand_markdown_instruction: "# Width and Height\r\n\r\nSprites have other properties. There are properties for width and height of the sprite. The property names are `width` and `height`. @@ -21129,6 +18468,9 @@ en: U3 - Sprites and Mod - Wrap Many Squares_markdown_instruction: "# Stuff" U3 - Sprites and Mod - X and Y Prop_markdown_instruction: "# Predict\r\n\r\nWhat do you think this program will do when we run it?" + U3 - Sprites and Mod - two sprites_markdown_instruction: "# Two Sprites\r\n\r\ntwo + rects - make one move on the left side of the screen and one on the right + side of the screen\r\n\r\n" U3 - User Input - Save getText To Variable_markdown_instruction: "# Saving Text Input in Variables\r\n\r\nOften we want to save the information we pull in from the user for later use in our program. The best way to do this is @@ -21340,6 +18682,33 @@ en: composing arithmetic expressions is ***much* easier in text mode**, and is actually almost unreadable in block mode. Try doing this in text mode.\r\n \r\n" + U3 - image - Rotation Random Amount_markdown_instruction: "<img src=\"https://images.code.org/a7697b89e2c6ea67ae453410a1da6d47-image-1465572156435.gif\" + alt=\"wheel spinning\" style=\"width:200px;float:right\" >\r\n\r\n# Random + Rotation\r\n\r\nUsing random numbers with rotation can add interesting animation + effects. One effect you can use rotation for is shaking. **An object can look + like its shaking a little when you set its rotation to a small random number + repeatedly.**\r\n\r\n# Do This\r\nYou are going to start creating a spinner + wheel similar to one you might find at a carnival. You set up the wheel on + the last level so you are just adding the clicker at the top.\r\n\r\n* Create + a clicker sprite.\r\n* Set the sprite to the provided clicker image.\r\n* + Set the rotation to a random number between -5 and 5.\r\n* Test it out." + U3 - image - wheel free play_markdown_instruction: "# Wheel Free Play\r\n\r\nHere + is the spinning wheel you created so far. Continue to improve it.\r\n\r\n# + Do This\r\n\r\n* Create a background scene for the wheel to go in.\r\n* Resize + the wheel to fit the scene.\r\n* Add at least 1 other sprite to the scene + and give it some movement.\r\n* Add your own ideas!" + U3 - images - bee free play_markdown_instruction: "# Bee Free Play\r\n\r\nHere + is the swarm of bees you have been working on. Continue to improve the animation!\r\n\r\n# + Do This\r\n* Add a background.\r\n* Add a flower or hive sprite.\r\n* Make + the flower or hive sprite move.\r\n* Add more ideas of your own!" + U3 - images - gears conditionals_markdown_instruction: "# Gears Conditionals\r\n\r\nThe + gears are back! Lets change the direction of spinning based on some conditions!\r\n\r\n# + Do This\r\n\r\n" + U3 - images - gears free play_markdown_instruction: "# Gears Free Play\r\n\r\nHere + are the spinning gears you have been working on. Continue to improve the animation!\r\n\r\n# + Do This\r\n\r\n* Add more gears of different sizes.\r\n* Make the gears line + up and spin with the existing ones.\r\n* Create a background for the gears.\r\n* + Add more ideas of your own!" U3 AnimationsMulti Play Defender_markdown_instruction: "# Defend Your Cake!\r\n\r\nIn this lesson you will be learning to make a \"Defender\" style game. Push the ladybugs out of the way to prevent them from getting the cake. Once you lose @@ -21421,15 +18790,6 @@ en: should read the user's input and display it back to them along with some default response.\r\n \r\n * Anyone should be able to easily distinguish between the text that the user typed and the response from the digital assistant.\r\n" - U3 full clicker demo_markdown_instruction: "# Clicker Game Demo\r\n\r\nTry - out this clicker game! You'll be building your own version (with a theme - you choose) at the end of the lesson.\r\n\r\n# Things That Are Familiar\r\nYou - know how to build many of the components of this game already:\r\n- Multiple - screens.\r\n- Buttons that change the screen when clicked.\r\n- Image that - moves when you click it.\r\n\r\n# Things That Are New\r\n- Keeping track of - and displaying the __changing score__.\r\n- Keeping track of and displaying - the __changing lives__.\r\n- Changing to the __win screen if the score is - 25__.\r\n- Changing to the __lose screen if the lives is 0__.\r\n" 'U3 L1 - 3: Teaching and Student Support Plan_markdown_instruction': "<br><br>\r\n> **NOTE: before you start this task, make sure you’ve reviewed the lesson resources in this module, and have a good sense of how the lesson works. If you haven’t @@ -21559,22 +18919,6 @@ en: can elevate to a facilitator to review. You will always have a chance to address feedback from your reviewers and resubmit your task! Reviewer feedback will show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" - U3 mehal's clone_markdown_instruction: "# Introduction to the Digital Assistant\r\n\r\n__While - digital assistants may seem like magic, they are just elaborate computer programs - that parse, or process, text__ looking for combinations of words to make decisions - about what to reply.\r\n\r\nOver the next few lessons, __you're going to - build up your own digital assistant that responds \"intelligently\" to a user's - question__, by making a decision about what to reply based on the contents.\r\n\r\nYou'll - now __explore a demo digital assistant__, Movie Bot, that represents the kind - of program that you'll build up to. Try out some of the prompts below and - also try your own. You'll quickly find the limits of what this program can - and can't do.\r\n\r\n# Do this\r\n__Run Movie Bot. In the _'enter your question - here'_ input, type each of the following prompts and hit 'enter' __\r\n- - 'help'\r\n- 'What is the best PG comedy movie ever?'\r\n- 'What PG comedy - movie should I watch next?'\r\n- 'Could you please tell me the best romance - movie?'\r\n- 'I waNT To WatCH a MovIE!!!'\r\n- 'What is the capital of - Kentucky?'\r\n- Play around! Ask more questions of Movie Bot and make a prediction - about what logic it's using to reply\r\n" U3 Variables consolelog_markdown_instruction: "# Console.log\r\n\r\nThe **Debug Console** is an area below your code. Your user will never see the debug console. It is useful for **displaying information only you want to see, especially @@ -21654,6 +18998,31 @@ en: to draw a square with a randomly generated value.\r\n\r\n* **Use the `text` command** to display the value of `size` on the screen.\r\n* **Use the `console.log` command** to display the value of `size` in the debug console." + U3 full clicker demo_markdown_instruction: "# Clicker Game Demo\r\n\r\nTry + out this clicker game! You'll be building your own version (with a theme + you choose) at the end of the lesson.\r\n\r\n# Things That Are Familiar\r\nYou + know how to build many of the components of this game already:\r\n- Multiple + screens.\r\n- Buttons that change the screen when clicked.\r\n- Image that + moves when you click it.\r\n\r\n# Things That Are New\r\n- Keeping track of + and displaying the __changing score__.\r\n- Keeping track of and displaying + the __changing lives__.\r\n- Changing to the __win screen if the score is + 25__.\r\n- Changing to the __lose screen if the lives is 0__.\r\n" + U3 mehal's clone_markdown_instruction: "# Introduction to the Digital Assistant\r\n\r\n__While + digital assistants may seem like magic, they are just elaborate computer programs + that parse, or process, text__ looking for combinations of words to make decisions + about what to reply.\r\n\r\nOver the next few lessons, __you're going to + build up your own digital assistant that responds \"intelligently\" to a user's + question__, by making a decision about what to reply based on the contents.\r\n\r\nYou'll + now __explore a demo digital assistant__, Movie Bot, that represents the kind + of program that you'll build up to. Try out some of the prompts below and + also try your own. You'll quickly find the limits of what this program can + and can't do.\r\n\r\n# Do this\r\n__Run Movie Bot. In the _'enter your question + here'_ input, type each of the following prompts and hit 'enter' __\r\n- + 'help'\r\n- 'What is the best PG comedy movie ever?'\r\n- 'What PG comedy + movie should I watch next?'\r\n- 'Could you please tell me the best romance + movie?'\r\n- 'I waNT To WatCH a MovIE!!!'\r\n- 'What is the capital of + Kentucky?'\r\n- Play around! Ask more questions of Movie Bot and make a prediction + about what logic it's using to reply\r\n" U3- Keys - Code Refactoring Exit Ticket_markdown_instruction: "# Free Response: Why Refactor?\n\nWhy is refactoring your code important?\n" U3- Variables - Assign Random For Turtle Draw_markdown_instruction: "# Putting @@ -21745,6 +19114,30 @@ en: that in the \"Chaser Game\" you just need an image that runs away from the mouse.\r\n* If you have time **use Design Mode** to quickly improve some of the visual components of your game." + U313 Two Buttons with Ids_markdown_instruction: "# Make a Prediction - Learning + to Code Better, Faster\r\nResearch has shown that when you encounter a new + piece of code you learn faster by simply **making a prediction about what + will happen before you run the program**. It's not actually important if + your prediction is correct, but the act of predicting allows you to construct + a stronger mental model for how code works and then test your understanding + when you run the code.\r\n\r\nGood programmers do this all the time. **They + don't expect their code is correct the first time they write it.** Instead + they get in the habit of running their code, checking their assumptions, and + making changes as needed. Programming isn't a fixed set of steps. It's a + creative and continuous cycle of writing, testing, and improving code.\r\n\r\n# + Predict - Observe - Reflect\r\n<img src=\"https://images.code.org/5fc24f3f3e1ceae4bb196f1005d9e866-image-1444083405061.png\" + align=right>This program creates a button and **two event handlers** which + listen for a click on that button. \r\n\r\n**Predict:** What will happen when + the \"Forward\" button is clicked? Force yourself to make a prediction about + what the turtle will do! **\"I don't know\" is not a prediction**. Think + about the options and talk about it with a classmate: Will it..\r\n* move + forward?\r\n* turn left?\r\n* turn left *and* move forward?\r\n* do nothing?\r\n* + move forward *and* turn left?\r\n* cause an error?\r\n* something else? \r\n\r\n**Observe:** + Once you've made a prediction, close these instructions and **run the program** + to observe what happens.\r\n\r\n**Reflect:** Was your prediction correct? + If not what about your mental model might need to change? Talk about it with + a classmate and experiment with the code to make sure you understand what + is happening.\r\n" U313 drag Two Buttons_markdown_instruction: "# Buttons and Unique IDs\r\nYou may have noticed that the button command has two parameters: `button(id, text)`. The `text` is the text that actually shows up on the button display, and the `id` @@ -21792,30 +19185,6 @@ en: to make them unique, and re-run the program to make sure you don't get the error.\r\n* **NOTE:** an id must be specified in quotes. You can use double-quotes: `\"myId\"`, or single quotes: `'myId'` \r\n\r\n\r\n" - U313 Two Buttons with Ids_markdown_instruction: "# Make a Prediction - Learning - to Code Better, Faster\r\nResearch has shown that when you encounter a new - piece of code you learn faster by simply **making a prediction about what - will happen before you run the program**. It's not actually important if - your prediction is correct, but the act of predicting allows you to construct - a stronger mental model for how code works and then test your understanding - when you run the code.\r\n\r\nGood programmers do this all the time. **They - don't expect their code is correct the first time they write it.** Instead - they get in the habit of running their code, checking their assumptions, and - making changes as needed. Programming isn't a fixed set of steps. It's a - creative and continuous cycle of writing, testing, and improving code.\r\n\r\n# - Predict - Observe - Reflect\r\n<img src=\"https://images.code.org/5fc24f3f3e1ceae4bb196f1005d9e866-image-1444083405061.png\" - align=right>This program creates a button and **two event handlers** which - listen for a click on that button. \r\n\r\n**Predict:** What will happen when - the \"Forward\" button is clicked? Force yourself to make a prediction about - what the turtle will do! **\"I don't know\" is not a prediction**. Think - about the options and talk about it with a classmate: Will it..\r\n* move - forward?\r\n* turn left?\r\n* turn left *and* move forward?\r\n* do nothing?\r\n* - move forward *and* turn left?\r\n* cause an error?\r\n* something else? \r\n\r\n**Observe:** - Once you've made a prediction, close these instructions and **run the program** - to observe what happens.\r\n\r\n**Reflect:** Was your prediction correct? - If not what about your mental model might need to change? Talk about it with - a classmate and experiment with the code to make sure you understand what - is happening.\r\n" U3L01 Assessment1_markdown_instruction: "Consider the algorithm you designed for today’s activity. Identify two instances where there may be multiple ways to interpret your instructions and suggest improvements that could be made @@ -21881,15 +19250,6 @@ en: write the code to define the function and *then* add a line to call it. Here is the `moveTwice` example from the video. You should do something similar for turnAround:\r\n\r\n![](https://images.code.org/3faf16575757ffae616dffd761085ab5-image-1467818996127.gif)" - U3L03 define turnRight and draw a rectangle_markdown_instruction: "# Draw a - rectangle with right\r\n\r\nAs you know, in order to turn right we have to - call `turnLeft()` three times. We've started you out with a stub that **defines** - a function called `right()`. Start by adding code inside the function definition - that will turn the turtle to the right (by turning left three times) when - called. \r\n\r\nThen **use** this function in some code to draw a rectangle, - as shown below. Make sure the turtle ends facing the same direction and in - the same location it started. *Note that the rectangle below is 2 moveForwards - tall and 1 moveForward wide*\r\n\r\n![](https://images.code.org/fd6e8b4d2218a242bae19ac9c78b5d5f-image-1447799438050.gif)\r\n\r\n" U3L03 Draw a T using turnAround_markdown_instruction: "#Do This:\r\nGet some more practice **calling** a function by using `turnAround()` along with your old friend the `moveForward()` function to create a plus sign that is centered @@ -21900,17 +19260,6 @@ en: sign, as shown below. Each of the four segments of the plus sign are one `moveForward()` long.* \r\n\r\n![](https://images.code.org/9d6c2d7d69c2f1c68c5b273bdbae65c7-image-1441296690812.11.14 AM.png)" - U3L03 draw diamond_markdown_instruction: "#Do This:\r\nWe're finally ready - to make our diamond! **Define** a function named `function drawDiamond()` - that **calls** `drawSide()` multiple times in order to complete the drawing. - Your final solution should be triggered by **a single call** to `drawDiamond()`. - \r\n\r\n<table>\r\n<tr>\r\n<td><img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/961892/NoxVhFlLf9HlybZ/upload.png\" - width=200></td>\r\n<td><img src=\"https://images.code.org/dca51c5b17a8c0778787337c3609557c-image-1441802821237.gif\" - width=200></td>\r\n</tr>\r\n</table>\r\n\r\n<hr>\r\n\r\n**Notes**:\r\n\r\nIn - the end you will have 4 functions defined:\r\n\r\n* drawDiamond()\r\n* drawSide()\r\n* - drawStep()\r\n* right()\r\n\r\nThese 4 functions work sort of like a hierarchy - of top-down design. At the top is `drawDiamond()` which makes calls to `drawSide()`, - which makes calls to `drawStep()` and `right()`.\r\n\r\n\r\n" U3L03 Free Response Getting Started_markdown_instruction: "In the previous lesson we created simple turtle drawings using only four commands. At some point you probably wished that more commands were available to you. Describe @@ -21934,6 +19283,26 @@ en: function. \r\n\r\nThe diagrams below show the intended actions.\r\n<table>\r\n<tr>\r\n<td>![](https://images.code.org/480f6787e4d2daf34d67642e25b29de6-image-1441772552026.png) </td>\r\n<td>![](https://images.code.org/02f52d406854d6f86535adf2f593ccc9-image-1441772709549.gif) </td>\r\n</tr>\r\n</table>\r\n\r\n\r\n" + U3L03 define turnRight and draw a rectangle_markdown_instruction: "# Draw a + rectangle with right\r\n\r\nAs you know, in order to turn right we have to + call `turnLeft()` three times. We've started you out with a stub that **defines** + a function called `right()`. Start by adding code inside the function definition + that will turn the turtle to the right (by turning left three times) when + called. \r\n\r\nThen **use** this function in some code to draw a rectangle, + as shown below. Make sure the turtle ends facing the same direction and in + the same location it started. *Note that the rectangle below is 2 moveForwards + tall and 1 moveForward wide*\r\n\r\n![](https://images.code.org/fd6e8b4d2218a242bae19ac9c78b5d5f-image-1447799438050.gif)\r\n\r\n" + U3L03 draw diamond_markdown_instruction: "#Do This:\r\nWe're finally ready + to make our diamond! **Define** a function named `function drawDiamond()` + that **calls** `drawSide()` multiple times in order to complete the drawing. + Your final solution should be triggered by **a single call** to `drawDiamond()`. + \r\n\r\n<table>\r\n<tr>\r\n<td><img src=\"https://s3.amazonaws.com/uploads.hipchat.com/65395/961892/NoxVhFlLf9HlybZ/upload.png\" + width=200></td>\r\n<td><img src=\"https://images.code.org/dca51c5b17a8c0778787337c3609557c-image-1441802821237.gif\" + width=200></td>\r\n</tr>\r\n</table>\r\n\r\n<hr>\r\n\r\n**Notes**:\r\n\r\nIn + the end you will have 4 functions defined:\r\n\r\n* drawDiamond()\r\n* drawSide()\r\n* + drawStep()\r\n* right()\r\n\r\nThese 4 functions work sort of like a hierarchy + of top-down design. At the top is `drawDiamond()` which makes calls to `drawSide()`, + which makes calls to `drawStep()` and `right()`.\r\n\r\n\r\n" U3L04 - 3 by 3 with functions_markdown_instruction: "#Do This:\r\n\r\nWe're going to revisit a familiar problem, **drawing the 3x3 square as efficiently as possible**. The only difference is that this time you are armed with the @@ -22139,6 +19508,24 @@ en: U3L06 Free Response Wrap Up_markdown_instruction: "List 3 interesting functions you discovered in the AppLab API. \n\nSelect one of them and describe how you think you might want to use it in a future programming project.\n" + U3L07 - Free Play Loops and Random_markdown_instruction: "# Free Play!\r\n(Optional)\r\n\r\nMess + around with your \"Under the Sea\" scene to make it do different things. \r\n\r\n**Ideas:**\r\n* + Make different amounts of each component.\r\n* Play with the ranges of random + values.\r\n* Add other creatures.\r\n* Play with color values to give the + scene a different feel (nighttime? red dawn?).\r\n* Get creative!\r\n\r\n# + Don't Worry... You Can't Screw It Up\r\n* Play around as much as you want + - you can **always go back to a previous version**.\r\n* Each time you hit + \"Run\" your code is saved in a way that lets you get back to it.\r\n* Notice + that there is button at the top of the page called **Version History** that + lets you see and use any previous version of your code.\r\n\r\n![](https://images.code.org/881d72d190c0637705f8021369962701-image-1443117323816.gif)" + U3L07 - Starry Night Starter Code_markdown_instruction: "You are going to use + loops and random numbers to generate an image of starry night sky similar + to one shown here. We have given you some starter code to generate the ground + and sky (just two giant dots), you will add code to this project to make the + stars, grass, and moon. All of the effects are clever applications of turtle + dots, lines, and colors. To get started, follow the series of steps suggested + in the accompanying worksheet. \r\n\r\n<img src=\"https://images.code.org/0f42e475e7600ac33d31bdf5dee70726-image-1459547325746.gif\" + style=\"width: 250px\">" U3L07 - allSeaGrass_markdown_instruction: "# Add Seagrass\r\n<img src=\"https://images.code.org/a67f893ea9187b253ec4f6abcb16b7cf-image-1443048301130.30.42 PM.png\" style=\"width: 200px; float: right\">\r\nOur new version of `drawSeagrass` now draws a single piece of seagrass with a random height. Now let's use @@ -22191,16 +19578,6 @@ en: working try calling `drawFish` with random values for its `red`, `green`, and `blue` parameters to get differently colored fish.\r\n\r\n![](https://images.code.org/cbbb8e02c14cbc2d199ede4531090513-image-1443046439253.12.35 PM.png)" - U3L07 - Free Play Loops and Random_markdown_instruction: "# Free Play!\r\n(Optional)\r\n\r\nMess - around with your \"Under the Sea\" scene to make it do different things. \r\n\r\n**Ideas:**\r\n* - Make different amounts of each component.\r\n* Play with the ranges of random - values.\r\n* Add other creatures.\r\n* Play with color values to give the - scene a different feel (nighttime? red dawn?).\r\n* Get creative!\r\n\r\n# - Don't Worry... You Can't Screw It Up\r\n* Play around as much as you want - - you can **always go back to a previous version**.\r\n* Each time you hit - \"Run\" your code is saved in a way that lets you get back to it.\r\n* Notice - that there is button at the top of the page called **Version History** that - lets you see and use any previous version of your code.\r\n\r\n![](https://images.code.org/881d72d190c0637705f8021369962701-image-1443117323816.gif)" U3L07 - introSquare_markdown_instruction: "# Getting Started with Loops\r\n\r\nA **loop** is a block of code that is repeated or \"looped through\" in a program. You will be creating a loop using the `for` loop block.\r\n\r\nWe'll start @@ -22278,14 +19655,6 @@ en: values between 360 and 450)** of the image.\r\n\r\n* **Draw 5 sea stars** of random size between **10 and 30** using `drawSeaStar`.\r\n\r\n![](https://images.code.org/1aadf83bcecaf5ca6c505e46d43e5f45-image-1443046811335.20.04 PM.png)" - U3L07 - Starry Night Starter Code_markdown_instruction: "You are going to use - loops and random numbers to generate an image of starry night sky similar - to one shown here. We have given you some starter code to generate the ground - and sky (just two giant dots), you will add code to this project to make the - stars, grass, and moon. All of the effects are clever applications of turtle - dots, lines, and colors. To get started, follow the series of steps suggested - in the accompanying worksheet. \r\n\r\n<img src=\"https://images.code.org/0f42e475e7600ac33d31bdf5dee70726-image-1459547325746.gif\" - style=\"width: 250px\">" U3L07 - sunBeams_markdown_instruction: "# Add Sunbeams\r\n<img src=\"https://images.code.org/9e08dae8486f66422d492b8d8a6777eb-image-1443048962131.55.54 PM.png\" style=\"width: 200px; float: right\">\r\nFinally, we'll add some visual flourish by writing `drawAllSunbeams`. Note: you'll have to use the @@ -22329,6 +19698,12 @@ en: it's appropriate to write a loop. \n\nThere is no hard-and-fast rule as to which is better, but what do you think? What kinds of circumstances would lead you to writing a function versus using a loop?\n\n\n" + U3L08 - Enchantment Under the Sea_markdown_instruction: "You have been provided + with starter code for an “Under the Sea” scene which includes three functions, + one each for the starfish, seagrass, and fish. Create versions of these functions + which accept parameters to allow you to add more variation to your scene. The + student worksheet provides more details and guidance.\r\n\r\n<img src=\"https://levelbuilder-studio.code.org/script_assets/k_1_images/instruction_gifs/csp/U3L08%20-%20Under%20the%20sea.gif\" + style=\"width: 250px\">" U3L08 - createTwoParamTriangle_markdown_instruction: "# Defining Functions with Multiple Parameters\r\n\r\nNow it's your turn to define a function that accepts multiple parameters. Just like in the previous example make sure you @@ -22347,13 +19722,6 @@ en: all of the individual functions you and your group members have written at the bottom of this program.\r\n\r\n**Design your scene** using these functions, placing your calls at the top of the file." - U3L08 - drawSquaresWithParams_markdown_instruction: "# Duplicating functions\r\n\r\nThis - program is supposed to draw two squares, a big one and a small one. The function - definition for `drawBigSquare()` is written but `drawSmallSquare()` is empty.\r\n\r\n**Write** - `drawSmallSquare()` to draw a square with sides 25 pixels long.\r\n\r\n**Run - the code** to match the image below\r\n\r\n**Hint:** Copy-Paste might be a - useful approach here!\r\n\r\n![](https://images.code.org/b1cf1767df98f6b7eacdc8a10c5674a7-image-1442417274907.26.34 - AM.png)" U3L08 - drawSquareWithParam - for video_markdown_instruction: "# Defining and using a function with a parameter\r\nFrom the video, you learned that defining multiple functions to draw different sized squares results in lots of repetitive @@ -22384,12 +19752,13 @@ en: You should only need to change one thing about an existing line of code. You don't need to add or remove any lines of code. Remember: The parameter `size` acts like a placeholder for a value that gets plugged into each call to `moveForward()`.\r\n\r\n" - U3L08 - Enchantment Under the Sea_markdown_instruction: "You have been provided - with starter code for an “Under the Sea” scene which includes three functions, - one each for the starfish, seagrass, and fish. Create versions of these functions - which accept parameters to allow you to add more variation to your scene. The - student worksheet provides more details and guidance.\r\n\r\n<img src=\"https://levelbuilder-studio.code.org/script_assets/k_1_images/instruction_gifs/csp/U3L08%20-%20Under%20the%20sea.gif\" - style=\"width: 250px\">" + U3L08 - drawSquaresWithParams_markdown_instruction: "# Duplicating functions\r\n\r\nThis + program is supposed to draw two squares, a big one and a small one. The function + definition for `drawBigSquare()` is written but `drawSmallSquare()` is empty.\r\n\r\n**Write** + `drawSmallSquare()` to draw a square with sides 25 pixels long.\r\n\r\n**Run + the code** to match the image below\r\n\r\n**Hint:** Copy-Paste might be a + useful approach here!\r\n\r\n![](https://images.code.org/b1cf1767df98f6b7eacdc8a10c5674a7-image-1442417274907.26.34 + AM.png)" U3L08 - fish_markdown_instruction: "# Adding parameters to functions: *drawFish*\r\n\r\nLet's update our `drawFish` function to accept a parameter. Currently `drawFish` can only draw a fish of size 30.\r\n\r\n**Add a parameter** to the function @@ -22573,7 +19942,6 @@ en: \n\nHow could your group have sorted the cards more efficiently, assuming that everyone still needed to execute the actions as prescribed in their missions? \n\nIf your group was not the first to finish, what slowed your progress?\n\n\n" - U3L13 - Debug Id plus logic problem_markdown_instruction: "# Debugging 1" U3L13 - Debug Id Problem_markdown_instruction: "# Choosing Good IDs\r\n\r\n<img src=\"https://images.code.org/f968ce4b09d2500b224af1bf9bacbacd-image-1444155536105.png\" style=\"float: right\">**Good IDs** are **meaningful and descriptive**.\r\nJust @@ -22600,6 +19968,7 @@ en: choosing a **descriptive and meaningful** ID.\r\n* **Change ** the event handler so that it correctly references the button by its new ID.\r\n* **Run ** the program to make sure it works.\r\n" + U3L13 - Debug Id plus logic problem_markdown_instruction: "# Debugging 1" U3L13 - Debugging 1_markdown_instruction: "# Debugging Event-Driven Programs: IDs\r\n\r\n**Debugging:** As you write more complex event-driven programs, you'll need to polish your **debugging** skills. Debugging involves locating @@ -22681,6 +20050,14 @@ en: style=\"border: solid 1px black; width: 500px; margin: auto\">\r\n\r\nOnce you've created the program and gotten it to run, click **Finish** to move onto the next level." + U3L13 Free Response Getting Started_markdown_instruction: "Give three examples + of familiar applications that respond to you, the user. \n\nFor each, describe + the actions (means of input) you use to \"talk to the program.\" \n\nIf directed + by your teacher, work with a partner to sketch a mock-up of an app with multiple + means of input.\n\n\n" + U3L13 Free Response Reflection_markdown_instruction: "Elements in your app + are required to have **unique IDs**. Given what you now know about how event + handlers work, why is it important for the IDs of page elements to be unique?\n\n" U3L13 eventsDetails_markdown_instruction: "# How Do Events Work?\r\nEvent-driven apps are made up of elements that can trigger events (such as buttons) and pieces of code called **event handlers**. Event handlers are commands that @@ -22703,14 +20080,6 @@ en: the event type** to something like \"mouseover\" and see what happens. Not all event types will work with buttons but it's fun to play a little bit.\r\n\r\nOnce you've got the program responding to some event, move on to the next problem.\r\n\r\n" - U3L13 Free Response Getting Started_markdown_instruction: "Give three examples - of familiar applications that respond to you, the user. \n\nFor each, describe - the actions (means of input) you use to \"talk to the program.\" \n\nIf directed - by your teacher, work with a partner to sketch a mock-up of an app with multiple - means of input.\n\n\n" - U3L13 Free Response Reflection_markdown_instruction: "Elements in your app - are required to have **unique IDs**. Given what you now know about how event - handlers work, why is it important for the IDs of page elements to be unique?\n\n" U3L14 - Assigning Random Value_markdown_instruction: "# Other Ways to Assign Values to Variables\r\nPrograms become much more interesting when the values in variables change while the program is running. We can also assign to a @@ -22744,6 +20113,83 @@ en: a second number\r\n* Display the result of some calculation.\r\n* An example output is shown at right.\r\n\r\nWe have given you starting code that shows you how to get the first number. The rest of the code is up to you.\r\n\r\n" + U3L14 - Journal Favorite Event_markdown_instruction: "Pick one of the two prompts + below to answer. Start by copy/pasting the prompt you're responding to.\n\n**Pick + one:**\n\n* Think back a few lessons to the \"Mission: Unsortable\" card sorting + activity. Relate something that happened in that activity to something you + found with event-driven programming in this lesson. Were there any \"unfortunate + events\" in the card sorting activity that were similar to \"unfortunate events\" + while programming in this lesson? \n\n* What was your favorite event type? + Explain what the event type is and how you might use it in an app that you + want to write. \n\nWrite your response below in 100 words or less.\n" + U3L14 - Mini Calculator embed_markdown_instruction: "# Getting User Input - + A Simple Calculator\r\nPrograms become *even more interesting* when we can + interact with the user. A short way to ask a user for a number is with the + `promptNum` command, which pops up a dialog box asking the user to enter a + number.\r\n\r\nThis very simple app demonstrates a new behavior: getting input + from the user.\r\n**You will write code to re-create this program** on the + next page.\r\n\r\n# Do This:\r\n* Click \"Run\" on the app.\r\n* You will + be prompted for two numbers, one right after the other. \r\n\t* If you don't + enter a number it will simply re-prompt you until you do.\r\n* See what happens. \r\n* + Re-run the program and enter different numbers until you get the idea.\r\n\r\nClick + **Finish** to move on." + U3L14 - User Input Division calculator_markdown_instruction: "# Assigning User + Input to Variables\r\n<img src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" + style=\"width: 350px; float:right\">\r\nLet's use `promptNum` to make a simple + calculator. The `promptNum` command appears in the variables toolbox because + it's typically used as a way to get a value from the user that you want to + hold on to while the program runs.\r\n\r\n`promptNum` is similar to `randomNumber` + in that it is a function whose return value *evaluates to a number*. The difference + here is that `promptNum` pops up an input dialog box and waits for the user + to type a number. Once they do and hit \"OK\" the number they typed is returned + and we can store it in a variable to use in our programs.\r\n\r\n\r\n# Do + This:\r\nWrite a program that acts as a simple calculator. (An animation of + the end result is shown at right.) <img src=\"https://images.code.org/e644d4b17d1d6fdb6b5a93651d512f8a-image-1445552700557.gif\" + style=\"width: 250px; float: right\">\r\n* Ask the user to **enter a number**.\r\n* + Then ask the user to **enter a second number**.\r\n* **Display the result** + of *some* calculation.\r\n * The example shows division but you may choose + something else if you like.\r\n\r\nWe have given you starting code that shows + you how to get the first number. The rest of the code is up to you.\r\n\r\n" + U3L14 - Variable ReAssignment pt2_markdown_instruction: "# Variable Re-assignment + - Part 2: Updating Values\r\n\r\nAll of our examples so far have shown how + to set the value of a variable by using combinations of numbers and other + variables. But what if you wanted to do something like **add 10 to the *current* + value of a variable**? \r\n\r\nBecause updating the value in a variable is + just moving memory around, the process has to go something like this:\r\n* + Read the current value of a variable.\r\n* Add 10 to it.\r\n* Store the new + value back into the same variable.\r\n\r\nThe technical term for this is called + **variable re-assignment** - when you change the value of a variable based + on its current contents. To increase the value of `num1` by 10 you actually + need to do this:\r\n\r\n<img src=\"https://images.code.org/c49b1a0fb81de4b90558fdb278e40987-image-1445942169121.png\" + style=\"float:right\">\r\n```\r\nnum1 = num1 + 10;\r\n```\r\nThe diagram at + right shows a picture of what's happening (it assumes the value of `num1` + is 7 before the line is executed). It's actually very similar to what happens + with plain old arithmetic: compute a value, then store it in a variable. Because + the computation has to happen before storing the result in a variable, there + is no contradiction here.\r\n\r\n<details>\r\n<Summary><strong>Common Mistakes + & Tips</strong> [click to expand]</Summary>\r\n\r\n<h3>\r\nMistake 1\r\n</h3>\r\n<p>To + increase the value of variable by 10 (for example) a common mistake is to + think that this statement alone will do the trick.\r\n</p><p>\r\n\r\n```\r\nnum1 + + 10;\r\n```\r\n</p><p>\r\nIt doesn't. This tells the computer to add 10 + to whatever the value of `num1` is. And the computer will do that, and the + result will go....nowhere. It will be lost.\r\n</p><p>\r\nBecause you are + trying assign a new value to a variable it should make sense that **the = + sign must be involved somehow**. \r\n</p>\r\n<h3>\r\nMistake 2\r\n</h3>\r\n<p>\r\nIf + you were in math class this statment would make no sense:\r\n```\r\nnum1 = + num1 + 10;\r\n```\r\n</p><p>\r\nBut **remember to read = as \"gets.\"** If + you read the statement above as: \"num1 *gets* the value of num1's current + value plus 10\" it might make more sense. Get in the habit of using \"gets.\"\r\n</p>\r\n</details>\r\n\r\n# + Do This:\r\n\r\n * **Make a prediction.**\r\n We start you out with some code + again (see below). \r\n\r\n <img src=\"https://images.code.org/60b25394c387bc111451f0e481528733-image-1447800367736.43.42.png\" + style=\"width: 500px;\"> \r\n\r\n Trace the code and predict what you think + will be printed to the console. (NOTE: We're serious about this \"make a + prediction\" stuff. When you force yourself to make a prediction about what + code will do you will learn faster since it triggers you to apply your mental + model of what's happening.)\r\n \r\n * **Run the program** to see if you + were right.\r\n \r\n * **Add a `console.log` statement**.\r\n \r\n We've + left you with a *little bit* of programming to do: add a `console.log` statement + at the end of the program to see the last value of `someNum` to see if your + full prediction is correct.\r\n" U3L14 - concatenate simple_markdown_instruction: "# Text and Variables Living Together!\r\n\r\nSometimes it’s useful to display text along with the value of a variable in the same line of output. To do this you use `+` to attach @@ -22787,26 +20233,6 @@ en: src=\"https://images.code.org/a1b84a8728599e9945c576d3bb459140-image-1445891621155.png\" style=\"height:50px\">| <img src=\"https://images.code.org/f5673df128eca0f9637c0cca1729b489-image-1445891800242.png\" style=\"width: 250px\">|" - U3L14 - Journal Favorite Event_markdown_instruction: "Pick one of the two prompts - below to answer. Start by copy/pasting the prompt you're responding to.\n\n**Pick - one:**\n\n* Think back a few lessons to the \"Mission: Unsortable\" card sorting - activity. Relate something that happened in that activity to something you - found with event-driven programming in this lesson. Were there any \"unfortunate - events\" in the card sorting activity that were similar to \"unfortunate events\" - while programming in this lesson? \n\n* What was your favorite event type? - Explain what the event type is and how you might use it in an app that you - want to write. \n\nWrite your response below in 100 words or less.\n" - U3L14 - Mini Calculator embed_markdown_instruction: "# Getting User Input - - A Simple Calculator\r\nPrograms become *even more interesting* when we can - interact with the user. A short way to ask a user for a number is with the - `promptNum` command, which pops up a dialog box asking the user to enter a - number.\r\n\r\nThis very simple app demonstrates a new behavior: getting input - from the user.\r\n**You will write code to re-create this program** on the - next page.\r\n\r\n# Do This:\r\n* Click \"Run\" on the app.\r\n* You will - be prompted for two numbers, one right after the other. \r\n\t* If you don't - enter a number it will simply re-prompt you until you do.\r\n* See what happens. \r\n* - Re-run the program and enter different numbers until you get the idea.\r\n\r\nClick - **Finish** to move on." U3L14 - moving memory challenge1_markdown_instruction: "# Moving Memory - Challenge 1\r\n\r\nThe next several levels all present challenges related to \"moving memory\" around in your program. \r\n\r\n**GOAL:** Set the value of the variable(s) @@ -22924,180 +20350,72 @@ en: last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - U3L14 - moving memory challenge6_markdown_instruction: "# Moving Memory - Challenge - 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar x - = 5;\r\nvar y = 11;\r\nvar z = 4;\r\n// your code here\r\n\r\nconsole.log(\"The - value of x is: \" + x + \" (x should be 2)\");\r\nconsole.log(\"The value - of y is: \" + y + \" (y should be 6)\");\r\nconsole.log(\"The value of z is: - \" + z + \" (z should be 8)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong> - (click to expand)</summary>\r\nThis one requires you to be a little clever. Think - about setting the value of one variable that you could then use to easily - set the value of the other variables. Then the trick is to figure out how - to use the variables you've been given to make that useful value.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder - of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** - Set the value of the variable(s) to make the `console.log` statement display - what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You - may **only** add lines of code that re-assign values of variables provided.\r\n - <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` - `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> - You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n - \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n - <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The - code you're given will have a few variables initialized to some values. The - last line will be one or more `console.log` statements with a comment indicating - what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A - Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img - src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" - >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign - the values in variables so the `console.log` statement displays what's expected. In - this example we show a solution on line 5. Please note that there are several - different things you could do. For example, you could go crazy and do something - like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> - \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" - U3L14 - User Input Division calculator_markdown_instruction: "# Assigning User - Input to Variables\r\n<img src=\"https://images.code.org/bad81f7d5e514a1d727e51aab52aac10-image-1445552999503.gif\" - style=\"width: 350px; float:right\">\r\nLet's use `promptNum` to make a simple - calculator. The `promptNum` command appears in the variables toolbox because - it's typically used as a way to get a value from the user that you want to - hold on to while the program runs.\r\n\r\n`promptNum` is similar to `randomNumber` - in that it is a function whose return value *evaluates to a number*. The difference - here is that `promptNum` pops up an input dialog box and waits for the user - to type a number. Once they do and hit \"OK\" the number they typed is returned - and we can store it in a variable to use in our programs.\r\n\r\n\r\n# Do - This:\r\nWrite a program that acts as a simple calculator. (An animation of - the end result is shown at right.) <img src=\"https://images.code.org/e644d4b17d1d6fdb6b5a93651d512f8a-image-1445552700557.gif\" - style=\"width: 250px; float: right\">\r\n* Ask the user to **enter a number**.\r\n* - Then ask the user to **enter a second number**.\r\n* **Display the result** - of *some* calculation.\r\n * The example shows division but you may choose - something else if you like.\r\n\r\nWe have given you starting code that shows - you how to get the first number. The rest of the code is up to you.\r\n\r\n" - U3L14 - Variable ReAssignment pt2_markdown_instruction: "# Variable Re-assignment - - Part 2: Updating Values\r\n\r\nAll of our examples so far have shown how - to set the value of a variable by using combinations of numbers and other - variables. But what if you wanted to do something like **add 10 to the *current* - value of a variable**? \r\n\r\nBecause updating the value in a variable is - just moving memory around, the process has to go something like this:\r\n* - Read the current value of a variable.\r\n* Add 10 to it.\r\n* Store the new - value back into the same variable.\r\n\r\nThe technical term for this is called - **variable re-assignment** - when you change the value of a variable based - on its current contents. To increase the value of `num1` by 10 you actually - need to do this:\r\n\r\n<img src=\"https://images.code.org/c49b1a0fb81de4b90558fdb278e40987-image-1445942169121.png\" - style=\"float:right\">\r\n```\r\nnum1 = num1 + 10;\r\n```\r\nThe diagram at - right shows a picture of what's happening (it assumes the value of `num1` - is 7 before the line is executed). It's actually very similar to what happens - with plain old arithmetic: compute a value, then store it in a variable. Because - the computation has to happen before storing the result in a variable, there - is no contradiction here.\r\n\r\n<details>\r\n<Summary><strong>Common Mistakes - & Tips</strong> [click to expand]</Summary>\r\n\r\n<h3>\r\nMistake 1\r\n</h3>\r\n<p>To - increase the value of variable by 10 (for example) a common mistake is to - think that this statement alone will do the trick.\r\n</p><p>\r\n\r\n```\r\nnum1 - + 10;\r\n```\r\n</p><p>\r\nIt doesn't. This tells the computer to add 10 - to whatever the value of `num1` is. And the computer will do that, and the - result will go....nowhere. It will be lost.\r\n</p><p>\r\nBecause you are - trying assign a new value to a variable it should make sense that **the = - sign must be involved somehow**. \r\n</p>\r\n<h3>\r\nMistake 2\r\n</h3>\r\n<p>\r\nIf - you were in math class this statment would make no sense:\r\n```\r\nnum1 = - num1 + 10;\r\n```\r\n</p><p>\r\nBut **remember to read = as \"gets.\"** If - you read the statement above as: \"num1 *gets* the value of num1's current - value plus 10\" it might make more sense. Get in the habit of using \"gets.\"\r\n</p>\r\n</details>\r\n\r\n# - Do This:\r\n\r\n * **Make a prediction.**\r\n We start you out with some code - again (see below). \r\n\r\n <img src=\"https://images.code.org/60b25394c387bc111451f0e481528733-image-1447800367736.43.42.png\" - style=\"width: 500px;\"> \r\n\r\n Trace the code and predict what you think - will be printed to the console. (NOTE: We're serious about this \"make a - prediction\" stuff. When you force yourself to make a prediction about what - code will do you will learn faster since it triggers you to apply your mental - model of what's happening.)\r\n \r\n * **Run the program** to see if you - were right.\r\n \r\n * **Add a `console.log` statement**.\r\n \r\n We've - left you with a *little bit* of programming to do: add a `console.log` statement - at the end of the program to see the last value of `someNum` to see if your - full prediction is correct.\r\n" - U3L15 - add code to make count down work_markdown_instruction: "# Make Count - Down Work\r\n\r\n<img src=\"https://images.code.org/0044a46a27f7af5da74daeae8de021f7-image-1446063781449.gif\" - style=\"float: right; width: 200px\">You now know enough about using global - variables (and some of the problems you might run into) to try it yourself.\r\n\r\nLet's - start with an easy task. Right now clicking the up arrow works as expected; - **clicking the down arrow does not**. So...\r\n\r\n# Do This:\r\n**Make the - count go down by 1 every time the down arrow is clicked**\r\n\r\n* Study how - the up arrow works, and use it as an example for writing the code for the - down arrow.\r\n* Add and modify the code so that when the down arrow is clicked - the count goes down.\r\n* When you're done the app should work like the animation - shown to the right.\r\n* HINT: Don't forget to set the text of the label.\r\n\r\n" - U3L15 - Add reset button to UpDown app_markdown_instruction: "# Add a Reset - Button\r\nIn most apps you want to provide a way to start over. \r\n\r\nTo - do this without having the user quit and restart your app, you need to add - code to **reset variables and text displays to initial values** so the app - can effectively start over.\r\n\r\nWe've **added a button** to the \"gameOverScreen\" - in the *Count Up/Down App* and **added an empty event handler** for it. \r\n\r\nRight - now clicking the \"start over\" button does nothing. You will write code to - make it work.\r\n\r\n\r\n# Do This:\r\n**Add code to the startOverButton event - handler to reset the app**. <img src=\"https://images.code.org/cb1569accb6a370d2258b5b14d624424-image-1446126849891.gif\" - style=\"width: 150px; float: right;\">\r\n\r\nThe app should work like the - animation shown to the right. **Notice** that when the \"start over\" button - is clicked it goes back to the main screen and the count has been reset to - 0. \r\n\r\nThe code should:\r\n\r\n* Set the screen to the gamePlayScreen.\r\n* - Set the count variable to 0.\r\n* Set the correct text label on the gamePlayScreen - to show the count is 0.\r\n\r\nOnce you get it to work, move on." - U3L15 - clicker update score_markdown_instruction: "# Using global variables\r\n\r\nYou'll - now look at a version of the clicker game. We've set up the basic functionality - to move the apple around the screen, and have __created a global variable - to keep track of the score.__\r\n\r\n# Do this\r\n__Add code to update the - score when the apple is clicked.__ Remember that you'll have to update both - the global variable _and_ the label text!\r\n\r\n<img src=\"https://images.code.org/001640fd24fc487af534ab769ed196e2-image-1446136596261.gif\" - style=\"width:200px\">" - U3L15 - count upDown bug forget to set text_markdown_instruction: "# Bug Squash!\r\n\r\nThis - program has a bug that doesn't produce an error. It just doesn't do what's - expected. The reason is a common mistake that all programmers make.\r\n\r\n# - Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n * Click the - up arrow about 5 times.\r\n * Click the down arrow about 10 times.\r\n * Click - the up arrow again.\r\n* **Look at the code and fix the problem.**\r\n* **Read - about the common mistake** by expanding the area below.\r\n* **Once you've - fixed the issue, move on.**\r\n <p>\r\n\r\n</p>\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...forgetting - to update the display after changing something in the program</big>\r\n\r\n\r\n<h1> - Misconception Alert - Changing a Variable Doesn't Change the Display</h1>\r\n\r\nA - common misunderstanding about variables and displaying them is to think that - a text label that's displaying a variable will change when the variable changes. - NO. A text label is just \"dumb\" container for text. It's similar to a - variable itself in that it won't change unless you explicitly tell it to.\r\n<p></p>\r\n<h1>Concept: - Separation of Program Data from How It's Viewed</h1>\r\nMaintaining variables - and program data is a **different task** from maintaining the display of the - app. Your program could actually run without updating the display at all - - it would still be working behind the scenes; it just wouldn't be very fun - or interesting to use.\r\n<p></p>\r\n</details>\r\n\r\n\r\n" - U3L15 - count upDown bug logic error wrong update_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a few different bugs. Find them and squash - them!\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n - * Click the up arrow exactly twice.\r\n \t* Restart the program and do this - a few times - you'll notice nothing happens the first time you click.\r\n - * Click the down arrow several times.\r\n* **Look at the code and fix the - problem.**\r\n* **Read about the common mistake** by expanding the area below.\r\n* - **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read - about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...updating - the wrong thing in the wrong event handler.</big>\r\n<p></p>\r\nThere are - two common mistakes here:\r\n<p></p>\r\n1. Mixing up which event handler should - do what.\r\n<p></p>\r\n2. Updating the display **before** any change is made - to the underlying data of the program. \r\n\tThis can make the app seem oddly - out of sync where each event triggers an update to the display that reflects - the **last** thing done, not the current thing.\r\n<p></p>\r\n</details>" - U3L15 - count upDown bug var not created globally_markdown_instruction: "# - Bug Squash!\r\n\r\nThis program has a few different bugs that are related - to the same problem.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To - see the bug:**\r\n * Click the up arrow several times.\r\n * Click the down - arrow.\r\n* **Look at the code and fix the problem.**\r\n* **Read about the - common mistake** by expanding the area below.\r\n* **Once you've fixed the - issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read about the - common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...thinking - you're referencing a global variable when you're not.</big><br>\r\n\r\nA - common mistake is basically a syntax/spelling error. These mistakes can be - really tricky to work out because you *think* you know what you wrote, but - the computer doesn't see it that way :)\r\n<p></p>\r\n</details>\r\n\r\n\r\n" + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + U3L14 - moving memory challenge6_markdown_instruction: "# Moving Memory - Challenge + 5\r\n\r\nTry another one. Here is the starting code:\r\n\r\n```\r\nvar x + = 5;\r\nvar y = 11;\r\nvar z = 4;\r\n// your code here\r\n\r\nconsole.log(\"The + value of x is: \" + x + \" (x should be 2)\");\r\nconsole.log(\"The value + of y is: \" + y + \" (y should be 6)\");\r\nconsole.log(\"The value of z is: + \" + z + \" (z should be 8)\");\r\n```\r\n</p><p>\r\n<details>\r\n<summary><strong><big>HINT:</big></strong> + (click to expand)</summary>\r\nThis one requires you to be a little clever. Think + about setting the value of one variable that you could then use to easily + set the value of the other variables. Then the trick is to figure out how + to use the variables you've been given to make that useful value.\r\n\r\n</details>\r\n</p><p>\r\n</p><p>\r\n\r\n<details>\r\n<summary><strong>Reminder + of the rules</strong> (click to expand)</summary>\r\n\r\n<p>\r\n**GOAL:** + Set the value of the variable(s) to make the `console.log` statement display + what it's supposed to.\r\n</p><p>\r\n\r\n**Rules**:\r\n</p><p>\r\n <li>You + may **only** add lines of code that re-assign values of variables provided.\r\n + <li> You may **only** use assignment (`=`) and arithmetic operators (`+` `-` + `*` `/`).\r\n <li> You **MAY NOT** type or introduce any numbers.\r\n <li> + You **MAY NOT** change or alter the `console.log` statement at all.\r\n</p><p>\r\n + \r\nExample:\r\n<table>\r\n<tr>\r\n\t<th>Code Provided</th>\r\n</tr>\r\n<tr>\r\n + <td >\r\n <img src=\"https://images.code.org/bd3c9a918b22a2874ae77fc82289aab5-image-1447800921923.52.14.png\"><br>\r\n <br>The + code you're given will have a few variables initialized to some values. The + last line will be one or more `console.log` statements with a comment indicating + what the expected value to display should be.\r\n <hr>\r\n </td>\r\n</tr>\r\n<tr>\r\n\t<th>A + Possible Solution</th>\r\n</tr>\r\n<tr>\r\n\t<td valign=top >\r\n <img + src=\"https://images.code.org/4742fed6bff4ad62411b9090f8468db0-image-1447800924556.54.37.png\" + >\r\n <br><br>You need to add a line (or multiple lines) of code to re-assign + the values in variables so the `console.log` statement displays what's expected. In + this example we show a solution on line 5. Please note that there are several + different things you could do. For example, you could go crazy and do something + like: <strong>y = x + x + (x/x);</strong>. What you do is up to you.\r\n </td> + \r\n</tr>\r\n</table>\r\n\r\n</details>\r\n\r\n<br><br>\r\n### Try it yourself...\r\n" + U3L15 - Add reset button to UpDown app_markdown_instruction: "# Add a Reset + Button\r\nIn most apps you want to provide a way to start over. \r\n\r\nTo + do this without having the user quit and restart your app, you need to add + code to **reset variables and text displays to initial values** so the app + can effectively start over.\r\n\r\nWe've **added a button** to the \"gameOverScreen\" + in the *Count Up/Down App* and **added an empty event handler** for it. \r\n\r\nRight + now clicking the \"start over\" button does nothing. You will write code to + make it work.\r\n\r\n\r\n# Do This:\r\n**Add code to the startOverButton event + handler to reset the app**. <img src=\"https://images.code.org/cb1569accb6a370d2258b5b14d624424-image-1446126849891.gif\" + style=\"width: 150px; float: right;\">\r\n\r\nThe app should work like the + animation shown to the right. **Notice** that when the \"start over\" button + is clicked it goes back to the main screen and the count has been reset to + 0. \r\n\r\nThe code should:\r\n\r\n* Set the screen to the gamePlayScreen.\r\n* + Set the count variable to 0.\r\n* Set the correct text label on the gamePlayScreen + to show the count is 0.\r\n\r\nOnce you get it to work, move on." + U3L15 - DEMO up down count practice app_markdown_instruction: "# All the Basics + You Need\r\n\r\n<img src=\"https://images.code.org/abb09baa0b6ccc24ff141590c5b667c3-image-1446417655965.gif\" + style=\"float:right; width: 150px\"> When you close these instructions, you'll + get to play a little bit with the very simple app (shown at right) to demonstrate + the basics of concepts involved in making the clicker game. We'll call it + the **Count Up/Down App**. Yes, it's a boring \"game,\" but it has all the + pieces of a more sophisticated game.\r\n\r\nThis app demontrates a few new + concepts. We'll step through each one, one at a time, explaining how each + thing works. Along the way, we'll also encounter some common challenges, + and learn how to solve them.\r\n\r\n# Do This:\r\n* Keeping clicking the up + arrow until something happens (something besides the number increasing).\r\n* + Start over.\r\n* Click the down arrow until something happens (something besides + the number decreasing).\r\n* Start over.\r\n\r\nOnce you think you've seen + all the behavior click Finish to see the first part of how this is done.\r\n\r\n" U3L15 - Debug forget to update var on reset in UpDown app_markdown_instruction: "# Bug Squash!\r\n\r\nThe *Count Up/Down App* has a bug! \r\n\r\nA ** common mistake** has been introduced into the code.\r\n\r\nIt's a tricky one to @@ -23164,20 +20482,92 @@ en: you get in the habit of thinking that way, these mistakes are easier to catch. For example you'd see this:<br>\r\n`if (count = 20)`<br>\r\nand read:<br>\r\n<i>\"if count gets 20\"</i> ...and know that that doesn't make sense.\r\n</p>\r\n\r\n<p></p>\r\n</details>\r\n\r\n" - U3L15 - DEMO up down count practice app_markdown_instruction: "# All the Basics - You Need\r\n\r\n<img src=\"https://images.code.org/abb09baa0b6ccc24ff141590c5b667c3-image-1446417655965.gif\" - style=\"float:right; width: 150px\"> When you close these instructions, you'll - get to play a little bit with the very simple app (shown at right) to demonstrate - the basics of concepts involved in making the clicker game. We'll call it - the **Count Up/Down App**. Yes, it's a boring \"game,\" but it has all the - pieces of a more sophisticated game.\r\n\r\nThis app demontrates a few new - concepts. We'll step through each one, one at a time, explaining how each - thing works. Along the way, we'll also encounter some common challenges, - and learn how to solve them.\r\n\r\n# Do This:\r\n* Keeping clicking the up - arrow until something happens (something besides the number increasing).\r\n* - Start over.\r\n* Click the down arrow until something happens (something besides - the number decreasing).\r\n* Start over.\r\n\r\nOnce you think you've seen - all the behavior click Finish to see the first part of how this is done.\r\n\r\n" + U3L15 - Simple If-statements in UpDown App_markdown_instruction: "# Add Your + Own *if* Statement\r\n\r\nIn most apps you want to make decisions based on + the state of some data you're keeping track of in the app. \r\n\r\nWe've + **modified** the *Count Up/Down App* to add another screen. When the count + reaches certain values, we'll switch screens. In the code you'll see an + `if` statement has been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n + * **If** the value of `count` is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img + src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" + style=\"width: 150px; float: right\">\r\n\r\n# Do This:\r\n**Add an `if` statement + so that when counting down the app changes screens when the count reaches + -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what + happens when the `if` statement is triggered.\r\n* **Study the `if` statement** + for the up arrow button to see how it works.\r\n* **Add an `if` statement** + to the down arrow event handler:\r\n\t* **If** `count` is equal to **-5, then** + set the screen to the \"gameOverScreen.\"\r\n* **Goal:** Once you're finished, + clicking the down arrow in the app should work like the animation shown to + the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click + to expand]</summary>\r\nThere is a subtle challenge here that you need to + set the text of the label on the <i>gameOverScreen</i> when you change screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> + Your code can call `setText` for any UI element, on any screen, at any time + - even if the element isn't on the screen that's currently showing.\r\n</details>\r\n\r\n" + U3L15 - add code to make count down work_markdown_instruction: "# Make Count + Down Work\r\n\r\n<img src=\"https://images.code.org/0044a46a27f7af5da74daeae8de021f7-image-1446063781449.gif\" + style=\"float: right; width: 200px\">You now know enough about using global + variables (and some of the problems you might run into) to try it yourself.\r\n\r\nLet's + start with an easy task. Right now clicking the up arrow works as expected; + **clicking the down arrow does not**. So...\r\n\r\n# Do This:\r\n**Make the + count go down by 1 every time the down arrow is clicked**\r\n\r\n* Study how + the up arrow works, and use it as an example for writing the code for the + down arrow.\r\n* Add and modify the code so that when the down arrow is clicked + the count goes down.\r\n* When you're done the app should work like the animation + shown to the right.\r\n* HINT: Don't forget to set the text of the label.\r\n\r\n" + U3L15 - clicker update score_markdown_instruction: "# Using global variables\r\n\r\nYou'll + now look at a version of the clicker game. We've set up the basic functionality + to move the apple around the screen, and have __created a global variable + to keep track of the score.__\r\n\r\n# Do this\r\n__Add code to update the + score when the apple is clicked.__ Remember that you'll have to update both + the global variable _and_ the label text!\r\n\r\n<img src=\"https://images.code.org/001640fd24fc487af534ab769ed196e2-image-1446136596261.gif\" + style=\"width:200px\">" + U3L15 - count upDown bug forget to set text_markdown_instruction: "# Bug Squash!\r\n\r\nThis + program has a bug that doesn't produce an error. It just doesn't do what's + expected. The reason is a common mistake that all programmers make.\r\n\r\n# + Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n * Click the + up arrow about 5 times.\r\n * Click the down arrow about 10 times.\r\n * Click + the up arrow again.\r\n* **Look at the code and fix the problem.**\r\n* **Read + about the common mistake** by expanding the area below.\r\n* **Once you've + fixed the issue, move on.**\r\n <p>\r\n\r\n</p>\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...forgetting + to update the display after changing something in the program</big>\r\n\r\n\r\n<h1> + Misconception Alert - Changing a Variable Doesn't Change the Display</h1>\r\n\r\nA + common misunderstanding about variables and displaying them is to think that + a text label that's displaying a variable will change when the variable changes. + NO. A text label is just \"dumb\" container for text. It's similar to a + variable itself in that it won't change unless you explicitly tell it to.\r\n<p></p>\r\n<h1>Concept: + Separation of Program Data from How It's Viewed</h1>\r\nMaintaining variables + and program data is a **different task** from maintaining the display of the + app. Your program could actually run without updating the display at all + - it would still be working behind the scenes; it just wouldn't be very fun + or interesting to use.\r\n<p></p>\r\n</details>\r\n\r\n\r\n" + U3L15 - count upDown bug logic error wrong update_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a few different bugs. Find them and squash + them!\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To see the bug:**\r\n + * Click the up arrow exactly twice.\r\n \t* Restart the program and do this + a few times - you'll notice nothing happens the first time you click.\r\n + * Click the down arrow several times.\r\n* **Look at the code and fix the + problem.**\r\n* **Read about the common mistake** by expanding the area below.\r\n* + **Once you've fixed the issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read + about the common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...updating + the wrong thing in the wrong event handler.</big>\r\n<p></p>\r\nThere are + two common mistakes here:\r\n<p></p>\r\n1. Mixing up which event handler should + do what.\r\n<p></p>\r\n2. Updating the display **before** any change is made + to the underlying data of the program. \r\n\tThis can make the app seem oddly + out of sync where each event triggers an update to the display that reflects + the **last** thing done, not the current thing.\r\n<p></p>\r\n</details>" + U3L15 - count upDown bug var not created globally_markdown_instruction: "# + Bug Squash!\r\n\r\nThis program has a few different bugs that are related + to the same problem.\r\n\r\n# Do This:\r\n* **Run the program.**\r\n* **To + see the bug:**\r\n * Click the up arrow several times.\r\n * Click the down + arrow.\r\n* **Look at the code and fix the problem.**\r\n* **Read about the + common mistake** by expanding the area below.\r\n* **Once you've fixed the + issue, move on.**\r\n\r\n<details>\r\n<summary><big><strong>Read about the + common mistake here...</strong></big> [click to expand]</summary>\r\n<big>...thinking + you're referencing a global variable when you're not.</big><br>\r\n\r\nA + common mistake is basically a syntax/spelling error. These mistakes can be + really tricky to work out because you *think* you know what you wrote, but + the computer doesn't see it that way :)\r\n<p></p>\r\n</details>\r\n\r\n\r\n" U3L15 - global var example count up_markdown_instruction: "# Using Variables in Apps!\r\n<img src=\"https://images.code.org/f156f8d8524c3c0316e4db394e331bdc-image-1446060829590.gif\" style=\"float: right; width: 200px;\">\r\nThe example program here has a small @@ -23221,27 +20611,6 @@ en: in this example app.\r\n * The app should do something similar to the animated example at right.\r\n\r\nOnce you've got it functional, click Finish to move on.\r\n \r\n\r\n" - U3L15 - Simple If-statements in UpDown App_markdown_instruction: "# Add Your - Own *if* Statement\r\n\r\nIn most apps you want to make decisions based on - the state of some data you're keeping track of in the app. \r\n\r\nWe've - **modified** the *Count Up/Down App* to add another screen. When the count - reaches certain values, we'll switch screens. In the code you'll see an - `if` statement has been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n - * **If** the value of `count` is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img - src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" - style=\"width: 150px; float: right\">\r\n\r\n# Do This:\r\n**Add an `if` statement - so that when counting down the app changes screens when the count reaches - -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what - happens when the `if` statement is triggered.\r\n* **Study the `if` statement** - for the up arrow button to see how it works.\r\n* **Add an `if` statement** - to the down arrow event handler:\r\n\t* **If** `count` is equal to **-5, then** - set the screen to the \"gameOverScreen.\"\r\n* **Goal:** Once you're finished, - clicking the down arrow in the app should work like the animation shown to - the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click - to expand]</summary>\r\nThere is a subtle challenge here that you need to - set the text of the label on the <i>gameOverScreen</i> when you change screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> - Your code can call `setText` for any UI element, on any screen, at any time - - even if the element isn't on the screen that's currently showing.\r\n</details>\r\n\r\n" U3L15 - variable scoping problem debugging_markdown_instruction: "# Debugging Problem!\r\n\r\n**Uh oh!** The code here is subtly different from the one in the previous example and **now there is a problem**.\r\n\r\n# Do This:\r\n\r\n* @@ -23578,6 +20947,26 @@ en: Libs app__ a couple of times to see a digital version of the paper game. \r\n- __Think about how the final text is created__ based on the input from the user. How would you describe in words the algorithm for creating it?" + U3L16 Mad Lib Student Setup_markdown_instruction: "# Back to Mad Libs: Design + Your App\r\nNow that you've had some practice getting user text and making + new strings with it, you're ready to turn your How-to Mad Libs into an app. + To get started, you'll set up the layout. There are two main screens:\r\n\r\n__Screen + 1: Collect User Input__ \r\n- On this screen, you'll use __text labels__ + and __text input__ design elements to set up the different words you want + the user to provide.\r\n- A __Next__ button takes you to Screen 2 to view + the full Mad Libs.\r\n\r\n__Screen 2: View Mad Libs__ \r\n- On this screen, + you'll use the __text area__ design element to create the space where the + user's completed Mad Libs will be displayed.\r\n- A __Play again__ button + takes you to back Screen 1.\r\n<br>\r\n<br>\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Screen + 1:</strong>\r\n</td>\r\n<td>\r\n<strong>Screen 2:</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/ccea092b516047dff82fafa50b47bcc7-image-1447974038265.00.17 + PM.png\" style=\"width:150px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/0f832e6314ad98170a3cddb317d26e41-image-1445898480304.27.45.png\" + style=\"width:151px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n# + Do This:\r\n\r\n- Create the two screens for your app, including the design + elements in each one.\r\n- Requirement: Request at least 3 separate words + from the user on Screen 1.\r\n- Create the event handlers for the __Next__ + and __Play again__ buttons to respond to clicks.\r\n- Use `setScreen` in the + event handlers to get the screen navigation working.\r\n" U3L16 Mad Lib getText_markdown_instruction: "# Make It Mad! Add the User's Text to Your Mad Libs Outline\r\n\r\nNow that you have your Mad Libs outline appearing in the text area, it's time to __incorporate the user's text__ @@ -23621,26 +21010,6 @@ en: step1 = \"Step 1: ...\";<br/>\r\n \r\n var step2 = \"Step 2: ...\";<br/>\r\n \r\n console.log(step1 + \"\\n\" + step2);<br/><br/></samp>\r\n \r\n *will be displayed as...*<br/><br/>\r\n \r\n <samp>Step 1: ...<br/>Step 2: ...<br/><br/></samp>\r\n \r\n *...on your console.*\r\n</td>\r\n</tr>\r\n</table>\r\n</details>" - U3L16 Mad Lib Student Setup_markdown_instruction: "# Back to Mad Libs: Design - Your App\r\nNow that you've had some practice getting user text and making - new strings with it, you're ready to turn your How-to Mad Libs into an app. - To get started, you'll set up the layout. There are two main screens:\r\n\r\n__Screen - 1: Collect User Input__ \r\n- On this screen, you'll use __text labels__ - and __text input__ design elements to set up the different words you want - the user to provide.\r\n- A __Next__ button takes you to Screen 2 to view - the full Mad Libs.\r\n\r\n__Screen 2: View Mad Libs__ \r\n- On this screen, - you'll use the __text area__ design element to create the space where the - user's completed Mad Libs will be displayed.\r\n- A __Play again__ button - takes you to back Screen 1.\r\n<br>\r\n<br>\r\n\r\n\r\n\r\n<table>\r\n<tr>\r\n<td>\r\n<strong>Screen - 1:</strong>\r\n</td>\r\n<td>\r\n<strong>Screen 2:</strong>\r\n</td>\r\n</tr>\r\n<tr>\r\n<td>\r\n<img - src=\"https://images.code.org/ccea092b516047dff82fafa50b47bcc7-image-1447974038265.00.17 - PM.png\" style=\"width:150px;float:right;\">\r\n</td>\r\n<td>\r\n<img src=\"https://images.code.org/0f832e6314ad98170a3cddb317d26e41-image-1445898480304.27.45.png\" - style=\"width:151px;float:right;\">\r\n</td>\r\n</tr>\r\n</table>\r\n\r\n# - Do This:\r\n\r\n- Create the two screens for your app, including the design - elements in each one.\r\n- Requirement: Request at least 3 separate words - from the user on Screen 1.\r\n- Create the event handlers for the __Next__ - and __Play again__ buttons to respond to clicks.\r\n- Use `setScreen` in the - event handlers to get the screen navigation working.\r\n" U3L16 Mad Lib toUpper_markdown_instruction: "# Why Are You Yelling At Me?! *toUpperCase* and *toLowerCase*\r\n\r\nThe main functionality of the Mad Libs app is complete, but there are some finishing touches to add. The user may @@ -23776,24 +21145,6 @@ en: **refresh the Data Viewer** each time by reloading the tab it is in.\r\n* **About what percent of the time do the `setKeyValue` requests arrive out of order?**" - U3L18 comparison operators_markdown_instruction: "# Explore Comparison Operators\r\n\r\nTrue/false - decisions are made using boolean expressions. A __boolean expression__ is - an expression that only evaluates to TRUE or FALSE, and you can use __comparison - operators__ to craft boolean expressions. \r\n\r\n# Do This:\r\n\r\nUse `console.log` - to **print out the different boolean expressions below to see what information - they return**.\r\n\r\n| Boolean Expressions |\r\n| --- |\r\n| 3 > 2 |\r\n| - 2 > 3 |\r\n| 5 + 3 < 10 |\r\n| ‘a’ < ‘b’ |\r\n| ‘j’ > ‘c’ |\r\n| 2 == 2 |\r\n| - 2 != 2 |\r\n| true == false |\r\n| \"x\" == x |\r\n| \"Blue\" == \"blue\" - |\r\n| x < 10 |" - U3L18 comparison operators_for_video_markdown_instruction: "# Explore Comparison - Operators\r\n\r\nTrue/false decisions are made using boolean expressions. - A __boolean expression__ is an expression that only evaluates to TRUE or FALSE, - and you can use __comparison operators__ to craft boolean expressions. \r\n\r\n# - Do This\r\n\r\nUse `console.log` to **print out the different boolean expressions - below to see what information they return**.\r\n\r\n| Boolean Expressions - |\r\n| --- |\r\n| 3 > 2 |\r\n| 2 > 3 |\r\n| 5 + 3 < 10 |\r\n| ‘a’ < ‘b’ |\r\n| - ‘j’ > ‘c’ |\r\n| 2 == 2 |\r\n| 2 != 2 |\r\n| true == false |\r\n| \"blue\" - == blue |\r\n| \"Blue\" == \"blue\" |\r\n| x < 10 |" U3L18 Free Response Wrap Up_markdown_instruction: "Over the next few lessons, you will be gathering skills and knowledge to create a clicker game of your own design. \nYou probably have some very cool ideas about what you want to @@ -23803,16 +21154,24 @@ en: space below:\n\n1. List at least 3 things you already know that will be useful in designing your clicker game.\n\n2. Based upon the initial ideas of your game design, list at least 3 things you want to know.\n\n\n" - U3L19 - Debugging with consoleLog_markdown_instruction: "# Debugging Variables: - Part 4\r\n\r\n`console.log()` is not just useful at the end of programs. It - is really helpful when we want to check the value of variables part way through - the running of a program. Since we can't see the value of the variable change - on the screen we need to find another way to get that information.\r\n\r\n# - Do This\r\n\r\n* **Starter Code:** We started you off with the same problem - from the last level with `console.log()` statements at the beginning and end - of the program to check the starting and ending values\r\n\r\n* **Add `console.log()` - statements** to find out the value of a and b after the first reassignment - statement `a = b;`" + U3L18 comparison operators_markdown_instruction: "# Explore Comparison Operators\r\n\r\nTrue/false + decisions are made using boolean expressions. A __boolean expression__ is + an expression that only evaluates to TRUE or FALSE, and you can use __comparison + operators__ to craft boolean expressions. \r\n\r\n# Do This:\r\n\r\nUse `console.log` + to **print out the different boolean expressions below to see what information + they return**.\r\n\r\n| Boolean Expressions |\r\n| --- |\r\n| 3 > 2 |\r\n| + 2 > 3 |\r\n| 5 + 3 < 10 |\r\n| ‘a’ < ‘b’ |\r\n| ‘j’ > ‘c’ |\r\n| 2 == 2 |\r\n| + 2 != 2 |\r\n| true == false |\r\n| \"x\" == x |\r\n| \"Blue\" == \"blue\" + |\r\n| x < 10 |" + U3L18 comparison operators_for_video_markdown_instruction: "# Explore Comparison + Operators\r\n\r\nTrue/false decisions are made using boolean expressions. + A __boolean expression__ is an expression that only evaluates to TRUE or FALSE, + and you can use __comparison operators__ to craft boolean expressions. \r\n\r\n# + Do This\r\n\r\nUse `console.log` to **print out the different boolean expressions + below to see what information they return**.\r\n\r\n| Boolean Expressions + |\r\n| --- |\r\n| 3 > 2 |\r\n| 2 > 3 |\r\n| 5 + 3 < 10 |\r\n| ‘a’ < ‘b’ |\r\n| + ‘j’ > ‘c’ |\r\n| 2 == 2 |\r\n| 2 != 2 |\r\n| true == false |\r\n| \"blue\" + == blue |\r\n| \"Blue\" == \"blue\" |\r\n| x < 10 |" U3L19 - DEMO up down count practice app_markdown_instruction: "# All the basics you need\r\n\r\nWe're going to use this very simple app to demonstrate the basics of concepts involved in making the clicker game. Yes, it's a dumb @@ -23823,6 +21182,46 @@ en: Click the up arrow until something happens\r\n* Start over\r\n* Click the down arrow until something happens\r\n* Start over\r\n\r\nOnce you think you've seen all the behavior click Finish to see the first part of how this is done.\r\n\r\n" + U3L19 - Debugging with consoleLog_markdown_instruction: "# Debugging Variables: + Part 4\r\n\r\n`console.log()` is not just useful at the end of programs. It + is really helpful when we want to check the value of variables part way through + the running of a program. Since we can't see the value of the variable change + on the screen we need to find another way to get that information.\r\n\r\n# + Do This\r\n\r\n* **Starter Code:** We started you off with the same problem + from the last level with `console.log()` statements at the beginning and end + of the program to check the starting and ending values\r\n\r\n* **Add `console.log()` + statements** to find out the value of a and b after the first reassignment + statement `a = b;`" + U3L19 - Simple If-statements in UpDown App_markdown_instruction: "# Add your + own if statement\r\n\r\nIn most apps you want to make decisions based on the + state of some data you're keeping track of in the app. \r\n\r\nWe've **modified** + the *Count Up/Down App* to add another screen. When the count reaches certain + values we'll switch screens. In the code you'll see an if statment has + been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n + * **If** the value of *count* is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img + src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" + style=\"width: 150px; float: right\">\r\n\r\n# Do This\r\n**Add an if statement + so that when counting down the app changes screens when the count reaches + -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what + happens when the if statement is triggered\r\n* **Study the if statement** + for the up arrow button to see how it works\r\n* **Add an if statement** to + the down arrow event handler:\r\n\t* **if** the count is equal to **-5, then** + set the screen to the \"gameOverScreen\"\r\n* **Goal:** Once you're done, + clicking the down arrow in the app should work like the animation shown to + the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click + to expand]</summary>\r\nThere is a subtle challenge here that you need to + set the text of of the label on the <i>gameOverScreen</i> when you change + screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> Your code can call `setText` for any + UI element, on any screen, at any time - even if the element isn't on the + screen that's currently showing.\r\n</details>\r\n\r\n" + U3L19 - Target Clicker App_markdown_instruction: "# The Goal\r\n\r\nWe have + seen a couple different versions of this app before. At the end of the design + mode lesson we made something very similar to this app. There are a couple + new elements in the app now. Study how those new elements work. \r\n\r\n# + Do This\r\n* Run the example program\r\n* Investigate: What happens when you + **click on the Code.org logo**? \r\n* Investigate: What happens when you **click + somewhere else**? \r\n* Investigate: What happens when you hit the **reset + button**. " U3L19 - final prompt_markdown_instruction: "Respond to your teacher's prompt below" U3L19 - fix the var name syntax error v2_markdown_instruction: "# Debugging @@ -23898,36 +21297,6 @@ en: in this example app\r\n * The app should do something similar the animated example at right.\r\n\r\nOnce you've got it functional, click Finish to move on.\r\n \r\n\r\n" - U3L19 - Simple If-statements in UpDown App_markdown_instruction: "# Add your - own if statement\r\n\r\nIn most apps you want to make decisions based on the - state of some data you're keeping track of in the app. \r\n\r\nWe've **modified** - the *Count Up/Down App* to add another screen. When the count reaches certain - values we'll switch screens. In the code you'll see an if statment has - been added to the event handler for up arrow that states:\r\n\r\n![](https://images.code.org/6e8acfef603fc7bd900d5ffb3a045150-image-1446125072632.png)\r\n\r\n - * **If** the value of *count* is equal to **20, then** set the screen to *\"gameOverScreen\"*.\r\n<img - src=\"https://images.code.org/b737f4a8924a114c8f320130e73949a6-image-1446124106409.gif\" - style=\"width: 150px; float: right\">\r\n\r\n# Do This\r\n**Add an if statement - so that when counting down the app changes screens when the count reaches - -5. **\r\n\r\n* **Run the app** and click the up arrow 20 times to see what - happens when the if statement is triggered\r\n* **Study the if statement** - for the up arrow button to see how it works\r\n* **Add an if statement** to - the down arrow event handler:\r\n\t* **if** the count is equal to **-5, then** - set the screen to the \"gameOverScreen\"\r\n* **Goal:** Once you're done, - clicking the down arrow in the app should work like the animation shown to - the right.\r\n\r\n<details><summary><strong><big>HINT:</big></strong> [click - to expand]</summary>\r\nThere is a subtle challenge here that you need to - set the text of of the label on the <i>gameOverScreen</i> when you change - screens.\r\n<p>\r\n</p>\r\n<b>NOTE:</b> Your code can call `setText` for any - UI element, on any screen, at any time - even if the element isn't on the - screen that's currently showing.\r\n</details>\r\n\r\n" - U3L19 - Target Clicker App_markdown_instruction: "# The Goal\r\n\r\nWe have - seen a couple different versions of this app before. At the end of the design - mode lesson we made something very similar to this app. There are a couple - new elements in the app now. Study how those new elements work. \r\n\r\n# - Do This\r\n* Run the example program\r\n* Investigate: What happens when you - **click on the Code.org logo**? \r\n* Investigate: What happens when you **click - somewhere else**? \r\n* Investigate: What happens when you hit the **reset - button**. " U3L19 - test reassignment of two vars_markdown_instruction: "# Variable Reassignment - Part 1\r\n\r\nSo far we have only set a variable's value once. But it's called a *variable* for a reason - its value can change (or vary) throughout @@ -24390,26 +21759,6 @@ en: and subtopic_2\"));\r\n } else {\r\n \tsetText(\"text_area\", \"The input contains subtopic_2, but no details\"));\r\n }\r\n} else {\r\n\tsetText(\"text_area\", \"The input doesn't contain any subtopics I know about\");\r\n}</code></pre>\r\n</details>" - U3L24 introIncludes_markdown_instruction: "# *includes*\r\n<img src=\"https://images.code.org/7373ad2ad98b0d815ce0b8196c2ec177-image-1446070324010.11.43 - PM.png\" style=\"width: 250px; float:right\">\r\n\r\nWe're going to explore - a new function called `includes`. This function can be used to check if one - string appears anywhere inside of another. Just like `toUpperCase` and `toLowerCase` - this function is called using **dot notation**.\r\n\r\n# *includes* Returns - a Boolean\r\n**`includes` is a function that returns a boolean.** In other - words, when the function runs it will **evaulate to either `true` or `false`**. - This function can be used **anywhere you would normally use a boolean expression**.\r\n\r\nYou've - actually **seen a few functions that return a value before this**. `randomNumber` - is a function that returns a number and `getText` is a function that returns - a string. In every case we've used these functions **as if they were the - data type they return (or evaulate to)**. Notice that in block mode these - functions don't have the connectors that other commands do since they will - be used as a piece of data within another function.\r\n\r\n# Do This:\r\n\r\n* - **Read the documentation** for `includes`.\r\n* **Starter code** has been - provided which shows one instance where a string does include a `searchValue` - and one where it does not.\r\n* **Replicate the style** of these commands - to check the rest of questions provided.\r\n* **Create three statements of - your own using `includes`** making use of the `console.log` statements provided.\r\n* - **Once you're comfortable with this command move on.**" U3L24 Nested Conditionals 1_markdown_instruction: "# Adding *includes* to the Movie Bot\r\n\r\nIf our Movie Bot is asked a question like \"What is a good comedy movie?\" it currently won't know how to respond, **even though the @@ -24465,6 +21814,26 @@ en: this level. \r\n\r\n* Use the \"Activity Guide - Debugging Conditionals\"\r\n* Expose the bugs in this problem by typing inputs into the user-input box. \r\n* Track which inputs cause unexpected outputs." + U3L24 introIncludes_markdown_instruction: "# *includes*\r\n<img src=\"https://images.code.org/7373ad2ad98b0d815ce0b8196c2ec177-image-1446070324010.11.43 + PM.png\" style=\"width: 250px; float:right\">\r\n\r\nWe're going to explore + a new function called `includes`. This function can be used to check if one + string appears anywhere inside of another. Just like `toUpperCase` and `toLowerCase` + this function is called using **dot notation**.\r\n\r\n# *includes* Returns + a Boolean\r\n**`includes` is a function that returns a boolean.** In other + words, when the function runs it will **evaulate to either `true` or `false`**. + This function can be used **anywhere you would normally use a boolean expression**.\r\n\r\nYou've + actually **seen a few functions that return a value before this**. `randomNumber` + is a function that returns a number and `getText` is a function that returns + a string. In every case we've used these functions **as if they were the + data type they return (or evaulate to)**. Notice that in block mode these + functions don't have the connectors that other commands do since they will + be used as a piece of data within another function.\r\n\r\n# Do This:\r\n\r\n* + **Read the documentation** for `includes`.\r\n* **Starter code** has been + provided which shows one instance where a string does include a `searchValue` + and one where it does not.\r\n* **Replicate the style** of these commands + to check the rest of questions provided.\r\n* **Create three statements of + your own using `includes`** making use of the `console.log` statements provided.\r\n* + **Once you're comfortable with this command move on.**" U3L25 - drag out key event_markdown_instruction: "# *keypress*\r\n\r\nIf we want to add keyboard input to our apps we'll need to learn about how key events work in App Lab. To start let's take a closer look at the `onEvent` @@ -24692,135 +22061,56 @@ en: to collect from 10,000 plays of that game?\n" U3L2_Turtle3by3Grid_markdown_instruction: "# Do This: \r\nDraw a 3x3 grid to the *front* and *right* of the turtle as efficiently as possible. The turtle - should end at its original location, facing its original direction.\r\n\r\n![](https://images.code.org/c15fee1f27c817a352a521c7ddcb5006-image-1436282127747.png)\r\n\r\n**HINT:** - This problem presents some subtle challenges. Work with your partner to discuss - possible solutions. Try more than one path. Testing your ideas on paper might - be a faster way to brainstorm.\r\n\r\n" - U3L2_TurtleSquare_right_markdown_instruction: "<img src=\"https://images.code.org/ad48e7224312a6c41f4fc5727af53cc0-image-1436287265071.png\" - align=right> \r\n# Do This:\r\nDraw a 1 x 1 square to the *front and right* - of the turtle as efficiently as possible. Notice that there is no command - to turn right! You need to figure out how to draw this by only turning left - and moving forward. The program should stop with turtle in its original position, - facing its original direction.\r\n\r\nWhen you're done click the Finish button - to move onto the next problem.\r\n\r\n" - U3L30 Free Response Getting Started_markdown_instruction: "Why do you think - human beings create lists? \n\nWhat types of lists have you created? \n\nHow - do you use lists?\n" - U3L30 Free Response Wrap Up_markdown_instruction: "Complete the following sentence:\n\nToday - I learned three things about coding arrays __________, ____________, and __________. - \n \nBut the most important thing I learned about planning an arrays is _____________________.\n" - U3L31 Assessment1_markdown_instruction: "Assess your photo album project with - the rubric. Then answer the following questions.\n\nDiscuss how you incrementally - developed your program. (100 words max)\n\n* What did you create first? \n* - What came next? \n* What problems did you encounter and solve?\n" - U3L31 Assessment2_markdown_instruction: "Describe how the feedback you gave - to another student was helpful.(100 words max)\n\n* What was the most significant - feedback you provided that helped a peer review, revise and improve the program? - \n* How did your suggestions contribute to the improvement?\n" - U3L31 Assessment3_markdown_instruction: "What was the most significant feedback - another student provided to your project that helped you review, revise, and - improve your program? (100 words max)\n" - U3L31 Free Response Getting Started_markdown_instruction: "List three reasons - why you think that electronic photo albums are so popular.\n" - U3L32 Free Response Getting Started_markdown_instruction: "Did you ever own - a \"lite-brite\" toy as a child? Describe how an image is created with this - toy. What would you have to do to change everything that is red to blue?\n" - U3L33 Free Response Getting Started_markdown_instruction: "Describe the visual - impact of each of the following effects. What do you have to do to the image - to create the desired effect?\n\n* Make an image \"warmer\"\n* Make an image - \"cooler\"\n* Make an image \"brighter\"\n* Make an image \"darker\"\n* Make - an image \"gray scale\"\n\n\n" - U3L34 Free Response Getting Started_markdown_instruction: "Have you ever seen - hidden-image stereograms...an image hidden within what appears to be a colorful - geometric pattern? See an example <a href=\"http://www.vision3d.com/sghidden.html\" - target=\"_blank\"> here.\n\n</a>How do you think stereograms are created?\n" - U4 - add createRecord to contacts App_markdown_instruction: "# Save Your Contacts - in the Cloud!\r\n\r\nNow that you know how to save objects to the database, - you can make your contacts app save things permanently.\r\n\r\nRight now you'll - add the ability for the app to save contacts to the database. In the next - lesson, you'll learn how to pull data from the database back into the app.\r\n\r\n# - Do This:\r\n\r\n**The contacts app you created in the previous lesson** is - provided.\r\n\r\n * Drag the `createRecord` block into the event handler code - for the \"createContactButton\" and add it as the last lines of the function.\r\n - * Set the **first parameter** to be a descriptive table name like \"myContacts.\"\r\n - * Set the **second parameter** to object you created for the new contact (in - the example the variable is called `newContact`.\r\n * Run the app and **add - a new contact**.\r\n * In the Data Viewer, **confirm a new table was created - and that it contains the contact you created**.\r\n\r\n![](https://images.code.org/36dd0fc06e93b1988a9df72a62c3f99f-image-1449266720880.gif)" - U4 - Add Row By Hand_markdown_instruction: "# Add a Record by Hand\r\n\r\nYou - can also add new records in the data table itself by clicking the \"Add row\" - button.\r\n\r\n# Do This:\r\n * Go to the \"mySongs\" data table.\r\n * Click - the \"Add row\" button. <img src=\"https://images.code.org/403521f908a9055f4597f649deb3cfab-image-1449260729474.png\" - style=\"width: 70px\">\r\n * Enter the information for a song of your choosing.\r\n - \t* If you can't think of a song use: **Don't Stop Believin'** by *Journey*. It's - 250 seconds long.\r\n * Once you've added a record in the data table come - back here and continue to the next level.\r\n\r\n" - U4 - Charts - drawChartFromRecords 1_markdown_instruction: "# Visualizing Data\r\n\r\nSo - far, you’ve been able to visualize the data you collected by using `readRecords` - and **printing out your table to the console**. But you may have found that - **it’s hard to draw meaningful conclusions from your data** by looking at - a long list of text.\r\n\r\nAnother way that people visualize data is by **creating - graphs or charts**. When you plot information on a chart, you can more easily - see patterns and trends in your data, which allows you to **understand and - draw conclusions from your data**. In App Lab, the block that lets you chart - data is `drawChartFromRecords`.\r\n\r\n![](https://images.code.org/d03c13264c127088e6b505a30c83fde2-image-1450388738029.18.40.png)\r\n\r\n# - *drawChartFromRecords*\r\n\r\nIn the next several levels, you will learn how - to use a new block called `drawChartFromRecords`. This block allows you to - **construct charts from records in your database** to create your own data - visualizations.\r\n\r\n# Do This:\r\n\r\n* **Open the data viewer** and see - what records are stored in “mytable.”\r\n* In Design Mode, drag a **chart** - from the toolbox into your app.\r\n\t* Make sure you give your chart a **meaningful - and descriptive ID**!\r\n\r\n![](https://images.code.org/419d63a96da5eac9989fa0cb62f0c6f3-image-1450468649142.gif)\r\n\r\n* - **Drag out the `drawChartFromRecords` block.** It has some default code provided.\r\n* - **Change the ID** in the `drawChartFromRecords` block to match the ID of the - chart UI element you created. **Change the chart type** from “bar” to “scatter.”\r\n\r\n![](https://images.code.org/3d6d79a716afb9a25e81269974615b98-image-1450389317947.gif)\r\n\r\n* - **Run the program** and see the results.\r\n\t* **Note:** After you hit “Run,” - it might take a moment for your chart to load the data from the database." - U4 - Charts - drawChartFromRecords Options 1_markdown_instruction: "# Customizing - Your Charts\r\n\r\nYou now have a chart that allows you to **see relationships - and trends in your data!**\r\n\r\nYou may find that you want **greater control - over the appearance of your chart**. Luckily, `drawChartFromRecords` block - actually has another parameter that lets you customize different components - of your chart! Let’s take advantage of that ability now to manipulate some - components of your chart.\r\n\r\n# The *options* Object\r\n\r\nIf you look - at the `drawChartFromRecords` block, you will see that **there is an additional - parameter after the `columns` array, called `options`**. This parameter is - actually an object whose properties correspond to different parts of your - chart. There are many different properties that you can set for your chart, - but for this level you’ll only be working with the `title` and `colors` properties.\r\n\r\n# - Do This:\r\n\r\n* At the beginning of your program, **create a new object - called `options`.**\r\n* By default, your chart is not labeled with a title, - but a descriptive title will help others understand your chart more clearly.\r\n * - **Set the `title` property** to “Popularity of Hashtags Over Time.”\r\n* **Change - the colors of the lines for each hashtag** by setting the `colors` property. - `colors` expects an array of strings, where each string is a color name like - “purple” or “yellow”.\r\n\t* **Note:** When you set `colors`, make sure the - **number of elements in the array matches the number of columns you’re plotting.** - For example, if you’re plotting two lines, you’ll need to make sure `colors` - has two strings - one color for each line.\r\n* **Add your `options` object - as an additional parameter to `drawChartFromRecords`.** Your code should now - look something like this (click image to enlarge):<br><a href=\"https://images.code.org/42fdbac98871d9ebcfca3501a1ae092b-image-1457061566573.6.png\" - target=\"_blank\">![](https://images.code.org/42fdbac98871d9ebcfca3501a1ae092b-image-1457061566573.6.png)</a>\r\n* - Run the app and verify that your title appears above the chart and that your - lines have new colors.\r\n" - U4 - Charts - drawChartFromRecords Options 2_markdown_instruction: "There are - still **several other chart properties that you can manipulate** using the - `options` parameter of `drawChartFromRecords`. You can use these properties - to change the colors in your chart, hide the legend, and much more! **Remember, - when customizing your chart, it’s less about making a pretty chart and more - about manipulating your data so that it’s easier for others to read and understand.**\r\n\r\n# - Do This:\r\n\r\n* **Open the API** for the `drawChartFromRecords` block.\r\n* - Read through and **pick some of the other interesting options properties to - customize** for your chart." - U4 - Charts - drawChartsFromRecords 1_markdown_instruction: "Instead of using - the table to read out the entire table, let's visualize it by using a chart. - Here's a new block called drawChartsFromRecords [insert image]. We're going - to use this new block to create a scatter plot [how do they choose those options?]\r\n\r\nLOADING - DATA: (just use default table name, column names, so all they have to do is - drag and drop the block, w/o messing with the parameters)\r\n\r\n# Do This:\r\n\r\nAdd - a screen element for charts\r\n\r\nPull out the drawCharts block\r\n\r\nMake - the ID match the ID they gave the screen element\r\n\r\nRun the program to - see what happens!\r\n" + should end at its original location, facing its original direction.\r\n\r\n![](https://images.code.org/c15fee1f27c817a352a521c7ddcb5006-image-1436282127747.png)\r\n\r\n**HINT:** + This problem presents some subtle challenges. Work with your partner to discuss + possible solutions. Try more than one path. Testing your ideas on paper might + be a faster way to brainstorm.\r\n\r\n" + U3L2_TurtleSquare_right_markdown_instruction: "<img src=\"https://images.code.org/ad48e7224312a6c41f4fc5727af53cc0-image-1436287265071.png\" + align=right> \r\n# Do This:\r\nDraw a 1 x 1 square to the *front and right* + of the turtle as efficiently as possible. Notice that there is no command + to turn right! You need to figure out how to draw this by only turning left + and moving forward. The program should stop with turtle in its original position, + facing its original direction.\r\n\r\nWhen you're done click the Finish button + to move onto the next problem.\r\n\r\n" + U3L30 Free Response Getting Started_markdown_instruction: "Why do you think + human beings create lists? \n\nWhat types of lists have you created? \n\nHow + do you use lists?\n" + U3L30 Free Response Wrap Up_markdown_instruction: "Complete the following sentence:\n\nToday + I learned three things about coding arrays __________, ____________, and __________. + \n \nBut the most important thing I learned about planning an arrays is _____________________.\n" + U3L31 Assessment1_markdown_instruction: "Assess your photo album project with + the rubric. Then answer the following questions.\n\nDiscuss how you incrementally + developed your program. (100 words max)\n\n* What did you create first? \n* + What came next? \n* What problems did you encounter and solve?\n" + U3L31 Assessment2_markdown_instruction: "Describe how the feedback you gave + to another student was helpful.(100 words max)\n\n* What was the most significant + feedback you provided that helped a peer review, revise and improve the program? + \n* How did your suggestions contribute to the improvement?\n" + U3L31 Assessment3_markdown_instruction: "What was the most significant feedback + another student provided to your project that helped you review, revise, and + improve your program? (100 words max)\n" + U3L31 Free Response Getting Started_markdown_instruction: "List three reasons + why you think that electronic photo albums are so popular.\n" + U3L32 Free Response Getting Started_markdown_instruction: "Did you ever own + a \"lite-brite\" toy as a child? Describe how an image is created with this + toy. What would you have to do to change everything that is red to blue?\n" + U3L33 Free Response Getting Started_markdown_instruction: "Describe the visual + impact of each of the following effects. What do you have to do to the image + to create the desired effect?\n\n* Make an image \"warmer\"\n* Make an image + \"cooler\"\n* Make an image \"brighter\"\n* Make an image \"darker\"\n* Make + an image \"gray scale\"\n\n\n" + U3L34 Free Response Getting Started_markdown_instruction: "Have you ever seen + hidden-image stereograms...an image hidden within what appears to be a colorful + geometric pattern? See an example <a href=\"http://www.vision3d.com/sghidden.html\" + target=\"_blank\"> here.\n\n</a>How do you think stereograms are created?\n" + U4 - Add Row By Hand_markdown_instruction: "# Add a Record by Hand\r\n\r\nYou + can also add new records in the data table itself by clicking the \"Add row\" + button.\r\n\r\n# Do This:\r\n * Go to the \"mySongs\" data table.\r\n * Click + the \"Add row\" button. <img src=\"https://images.code.org/403521f908a9055f4597f649deb3cfab-image-1449260729474.png\" + style=\"width: 70px\">\r\n * Enter the information for a song of your choosing.\r\n + \t* If you can't think of a song use: **Don't Stop Believin'** by *Journey*. It's + 250 seconds long.\r\n * Once you've added a record in the data table come + back here and continue to the next level.\r\n\r\n" U4 - Charts - Export Data_markdown_instruction: "# Exporting Data\r\n\r\nIn the last level, you saw that **remixing a project doesn’t copy over the data** from the original project’s database. But what happens if you want to keep @@ -24969,6 +22259,72 @@ en: the app** and see the results.\r\n\t* Now that your chart has meaningful labels, **what conclusions can you draw about the data set?** What relationships do you see between the Tomatometer rating and the Audience rating?\r\n\r\n\r\n" + U4 - Charts - drawChartFromRecords 1_markdown_instruction: "# Visualizing Data\r\n\r\nSo + far, you’ve been able to visualize the data you collected by using `readRecords` + and **printing out your table to the console**. But you may have found that + **it’s hard to draw meaningful conclusions from your data** by looking at + a long list of text.\r\n\r\nAnother way that people visualize data is by **creating + graphs or charts**. When you plot information on a chart, you can more easily + see patterns and trends in your data, which allows you to **understand and + draw conclusions from your data**. In App Lab, the block that lets you chart + data is `drawChartFromRecords`.\r\n\r\n![](https://images.code.org/d03c13264c127088e6b505a30c83fde2-image-1450388738029.18.40.png)\r\n\r\n# + *drawChartFromRecords*\r\n\r\nIn the next several levels, you will learn how + to use a new block called `drawChartFromRecords`. This block allows you to + **construct charts from records in your database** to create your own data + visualizations.\r\n\r\n# Do This:\r\n\r\n* **Open the data viewer** and see + what records are stored in “mytable.”\r\n* In Design Mode, drag a **chart** + from the toolbox into your app.\r\n\t* Make sure you give your chart a **meaningful + and descriptive ID**!\r\n\r\n![](https://images.code.org/419d63a96da5eac9989fa0cb62f0c6f3-image-1450468649142.gif)\r\n\r\n* + **Drag out the `drawChartFromRecords` block.** It has some default code provided.\r\n* + **Change the ID** in the `drawChartFromRecords` block to match the ID of the + chart UI element you created. **Change the chart type** from “bar” to “scatter.”\r\n\r\n![](https://images.code.org/3d6d79a716afb9a25e81269974615b98-image-1450389317947.gif)\r\n\r\n* + **Run the program** and see the results.\r\n\t* **Note:** After you hit “Run,” + it might take a moment for your chart to load the data from the database." + U4 - Charts - drawChartFromRecords Options 1_markdown_instruction: "# Customizing + Your Charts\r\n\r\nYou now have a chart that allows you to **see relationships + and trends in your data!**\r\n\r\nYou may find that you want **greater control + over the appearance of your chart**. Luckily, `drawChartFromRecords` block + actually has another parameter that lets you customize different components + of your chart! Let’s take advantage of that ability now to manipulate some + components of your chart.\r\n\r\n# The *options* Object\r\n\r\nIf you look + at the `drawChartFromRecords` block, you will see that **there is an additional + parameter after the `columns` array, called `options`**. This parameter is + actually an object whose properties correspond to different parts of your + chart. There are many different properties that you can set for your chart, + but for this level you’ll only be working with the `title` and `colors` properties.\r\n\r\n# + Do This:\r\n\r\n* At the beginning of your program, **create a new object + called `options`.**\r\n* By default, your chart is not labeled with a title, + but a descriptive title will help others understand your chart more clearly.\r\n * + **Set the `title` property** to “Popularity of Hashtags Over Time.”\r\n* **Change + the colors of the lines for each hashtag** by setting the `colors` property. + `colors` expects an array of strings, where each string is a color name like + “purple” or “yellow”.\r\n\t* **Note:** When you set `colors`, make sure the + **number of elements in the array matches the number of columns you’re plotting.** + For example, if you’re plotting two lines, you’ll need to make sure `colors` + has two strings - one color for each line.\r\n* **Add your `options` object + as an additional parameter to `drawChartFromRecords`.** Your code should now + look something like this (click image to enlarge):<br><a href=\"https://images.code.org/42fdbac98871d9ebcfca3501a1ae092b-image-1457061566573.6.png\" + target=\"_blank\">![](https://images.code.org/42fdbac98871d9ebcfca3501a1ae092b-image-1457061566573.6.png)</a>\r\n* + Run the app and verify that your title appears above the chart and that your + lines have new colors.\r\n" + U4 - Charts - drawChartFromRecords Options 2_markdown_instruction: "There are + still **several other chart properties that you can manipulate** using the + `options` parameter of `drawChartFromRecords`. You can use these properties + to change the colors in your chart, hide the legend, and much more! **Remember, + when customizing your chart, it’s less about making a pretty chart and more + about manipulating your data so that it’s easier for others to read and understand.**\r\n\r\n# + Do This:\r\n\r\n* **Open the API** for the `drawChartFromRecords` block.\r\n* + Read through and **pick some of the other interesting options properties to + customize** for your chart." + U4 - Charts - drawChartsFromRecords 1_markdown_instruction: "Instead of using + the table to read out the entire table, let's visualize it by using a chart. + Here's a new block called drawChartsFromRecords [insert image]. We're going + to use this new block to create a scatter plot [how do they choose those options?]\r\n\r\nLOADING + DATA: (just use default table name, column names, so all they have to do is + drag and drop the block, w/o messing with the parameters)\r\n\r\n# Do This:\r\n\r\nAdd + a screen element for charts\r\n\r\nPull out the drawCharts block\r\n\r\nMake + the ID match the ID they gave the screen element\r\n\r\nRun the program to + see what happens!\r\n" U4 - CreateRecord - 1_markdown_instruction: "# Permanent Data Storage\r\n\r\nUp to now, all the data created in our app disappears or gets lost each time we re-run the app. You were probably frustrated, for example, that a new @@ -25073,80 +22429,6 @@ en: call to `createRecord`.\r\n* In the Data Viewer, **confirm the new record was added to the table**. You'll learn more about the changes you see in the next exercise." - U4 - debug column names are case sensitive_markdown_instruction: "# Are Properties - Case-Sensitive?\r\n\r\nYou saw that if you add a property to an object and - then store it in the database, the database will add a column to accommodate - the new data value. \r\n\r\nIf you end up with columns in your table that - you don't want, you can delete them\r\n![](https://images.code.org/baecadc168954c794212b419d441679b-image-1449262524542.gif)\r\n\r\nLet's - do another quick experiment to test the behavior of the data table. **What - happens if you change how a property is spelled?**\r\n\r\n# Do This:\r\n\r\n**Your - code from the previous exercise** is provided.\r\n\r\n* Change `song.title` - to `song.Title` (capital T) where you create your song object.\r\n* **Run - the program**, then go to the Data Viewer to see what happened.\r\n* If there - are problems created by the change in spelling, **delete unnecessary columns - and change your code back**." - U4 - deleteRecords 0_markdown_instruction: "# Deleting Records with Code\r\n\r\nYou - can delete a record \"by hand\" in the Data Viewer by clicking the <img src=\"https://images.code.org/b45cebe6d06d8c2d45a233bd3c472a62-image-1449850229074.png\" - style=\"width: 50px\"> button.\r\n\r\nTo delete a record with code you use - the `deleteRecord` command. It works similarly to the other data tools in - that it has 3 parameters:\r\n\r\n * The **name of the table** you want to - delete from.\r\n * The **object** you want to delete.\r\n * A **callback** - function.\r\n\r\n`deleteRecord` is **different from the other data commands** - in one critical way. The object you send to the database ***only* needs to - contain the id of the record** you want to delete. \r\n \r\n\r\n# Do This:\r\n\r\n**Your - database already includes a table called \"mytable\"**\r\n\r\n * Go to the - Data Viewer and **look at the data in \"mytable\"**.\r\n * **Drag out** the - `deleteRecord` block.\r\n \t* It includes **default code** to delete the record - with id:1 in \"mytable\".\r\n * Run the code and **confirm that the record - with id:1 (\"Greg\") is deleted from the database**.\r\n\r\n![](https://images.code.org/f1168e1793f646575f26d86e66ddcae4-image-1457470120824.gif)" - U4 - deleteRecords 1_markdown_instruction: "# Deleting Records Continued...\r\n\r\nThe - other difference with `deleteRecord` is that the database **sends back a boolean - called `success`.** \r\n\r\nUsing the `success` boolean, you can write a callback - function that will behave differently based on whether or not `deleteRecord` - ran successfully.\r\n\r\n* If the database was able to successfully delete - the specified record, `success` will be set to **true** in the callback function. - \r\n* If the database was **not** able to delete the record, `success` will - be **false.**\r\n\r\nLet's do a little more experimentation with `deleteRecord` - on a sample database. **We've given you a new database that has about 40 - songs in it.** You have a few different things to try so don't miss them.\r\n\r\n# - Do This:\r\n\r\n* **Click View Data.** Look at the \"mySongs\" table and **find - the ID of the song \"Little Bunny Foo Foo.\"** \r\n* **Drag out the `deleteRecord` - block.**\r\n * Set the table name to \"mySongs.\"\r\n * Set the `id` of - the object to delete to the ID of \"Little Bunny Foo Foo.\"\r\n* **Add an - `if` statement to the callback function.**\r\n * If `success` is true, print - \"Record deleted successfully\" to the console.\r\n * Otherwise, print \"Could - not delete record\" to the console.\r\n* **Run the code.**\r\n * Verify that - you deleted \"Little Bunny Foo Foo\" from the list of songs.\r\n* **Run the - exact same code again.**\r\n * This will attempt to delete a record with - the ID you just deleted. See what happens..." - U4 - deleteRecords 2 delete object_markdown_instruction: "# Using Objects to - Specify What to Delete\r\n\r\nWhen deleting an object in the database **the - only property the database checks is `id` - *everything else* in the object - is ignorned by `deleteRecord`**.\r\n\r\nThe **key takeway** is that you can - pass *any* object to `deleteRecord`. As long as it has a property called `id` - the database will try to delete a record with that ID.\r\n\r\nLet's look - at an example. \r\n\r\n# Do This:\r\n <img src=\"https://images.code.org/0af097cf5062c49743275f2c3df21bf7-image-1449864027240.gif\" - style=\"float: right; width: 350px\">\r\n \r\n**Starter code is provided** - that constructs an object called `song` and sets `song.id = 9` (the ID of - \"Little Bunny Foo Foo\"). Additional \"junk\" properties are added as well. - The \"mySongs\" table in the database has been restored to its original state.\r\n - \r\n* **Replace the second parameter of deleteRecord to use the `song` object** - instead of `{id:1}` (see animation at right).\r\n* Run your program and **confirm - that the record with id 9 is deleted** by checking in the Data Viewer.\r\n* - **Change the ID in the `song` object** to the ID of a different record in - your database.\r\n* Run your program and **confirm another record in \"mySongs\" - was deleted.**" - U4 - deleteRecords 2_markdown_instruction: "# Deleting Records\r\n\r\nGo look - at the data. See the ids. When you try to edit you can't. Why? Because - id's are unique, but for all time. Each record that gets added gets assigned - a unique id. That id will never be used again, even if you delete it. ![](https://images.code.org/352bbbd91c14aa8a4a37fcc309f29d93-image-1449782149871.gif)\r\n\r\nYou - can delete a record using the data viewer by clicking the delete button (duh).\r\n\r\nTo - do it with code you use the delete record block. It works similarly to the - other data tools.\r\n\r\n[screen cap diagram - table name, object, callback]\r\n\r\nHowever, - deleteRecord is different because the object *only* needs to contain the id - of the record you want to delete. You can \r\n\r\n# Do This\r\n * Drag out - the delete records block - set the id to the one you found.\r\n * Run the - code - verify that you deleted the right record\r\n\r\n" U4 - Edit Data Table by Hand_markdown_instruction: "# Editing the Data Table by Hand\r\n\r\nIn the previous level, you noticed that **a new column was added to the table** when you added an object that had a new property called @@ -25159,30 +22441,9 @@ en: - Gloria Gaynor\r\n* Since you re-added \"Single Ladies\" you can **Delete** the earlier, incomplete one.\r\n* Move on where your database has **4 songs, each with a title, seconds, and artist**." - U4 - fix contacts by hand in data table_markdown_instruction: "# Add Contacts - to the Data Table by Hand\r\n\r\nWhen you originally created this app, you - hard-coded at least **three contacts\"** that were added to your contacts - list every time the program started running. You'll want to move their information - into the database as well.\r\n\r\n# Do This:\r\n\r\n**Your code from the previous - exercise** is provided.\r\n\r\n* In the Data Viewer, go to the table you are - using to store your contacts.\r\n* Add rows to the table and copy in the url, - name, phone number, etc. for each of the hard-coded contacts in your app.\r\n* - **Don't actually delete your hard-coded contacts from your code.**" U4 - Import Data - 1_markdown_instruction: "We can import data\r\n\r\nGiven a csv file, have students import it and then go look at in the data viewer" - U4 - last stage test adding contcts_markdown_instruction: "# Test the App\r\n\r\nIf - you run your app now, you can add contacts and they will be saved to the database, - but they will also show up \"locally\" in your app. That is, until you restart - it.\r\n\r\n**When you restart the app, it only reloads the hard-coded contacts. - This is okay for now.** In the **next lesson** you'll learn how to pull - data from the database back into the app.\r\n\r\nAs a final step for now...\r\n\r\n# - Do This:\r\n\r\n**Your code from the previous exercise** is provided.\r\n\r\n - * **Add a few new contacts to your app and confirm you can scroll through - them**.\r\n * In the Data Viewer, **confirm those contacts were added to your - database**.\r\n * Restart your app. Confirm that **the newly added contacts - are no longer stored locally in your app, but they still exist in the database**.\r\n - * In the Data Viewer confirm those **\"lost\" contacts are still stored in - your database**." + U4 - Objects - Template Contacts_markdown_instruction: "![](https://images.code.org/53a5bdfb7f4ec83174756c8e094558fd-image-1449518131328.png)" U4 - Objects - accessingPropertiesInArray_markdown_instruction: "# Manipulating Objects in an Array\r\n\r\nWhen objects are in an array, we can still **access the individual properties of each object**. In order to do so, you will need @@ -25450,7 +22711,6 @@ en: Use `setImageURL` within the event handler to change the URL of the image to whatever is currently in `URLinput`.\r\n* Run the app and confirm that **the image updates when a valid image URL is given**.\r\n\r\n![](https://images.code.org/955fa56473d949ed7bd326aa87c96e0f-image-1449525666366.gif)" - U4 - Objects - Template Contacts_markdown_instruction: "![](https://images.code.org/53a5bdfb7f4ec83174756c8e094558fd-image-1449518131328.png)" U4 - Objects - writeWrap_markdown_instruction: "# Wrapping Indexes\r\n\r\nCurrently you can press the left and right arrow key to change the index of the contact you'd like to show. When `showCurrentContact` is called that contact is then @@ -25706,6 +22966,115 @@ en: * **Add a call to `refreshLocalData`** in the callback function of `deleteRecord`.\r\n * **Run your app**.\r\n * Confirm you can now delete contacts and that your local and remote data agree.\r\n" + U4 - add createRecord to contacts App_markdown_instruction: "# Save Your Contacts + in the Cloud!\r\n\r\nNow that you know how to save objects to the database, + you can make your contacts app save things permanently.\r\n\r\nRight now you'll + add the ability for the app to save contacts to the database. In the next + lesson, you'll learn how to pull data from the database back into the app.\r\n\r\n# + Do This:\r\n\r\n**The contacts app you created in the previous lesson** is + provided.\r\n\r\n * Drag the `createRecord` block into the event handler code + for the \"createContactButton\" and add it as the last lines of the function.\r\n + * Set the **first parameter** to be a descriptive table name like \"myContacts.\"\r\n + * Set the **second parameter** to object you created for the new contact (in + the example the variable is called `newContact`.\r\n * Run the app and **add + a new contact**.\r\n * In the Data Viewer, **confirm a new table was created + and that it contains the contact you created**.\r\n\r\n![](https://images.code.org/36dd0fc06e93b1988a9df72a62c3f99f-image-1449266720880.gif)" + U4 - debug column names are case sensitive_markdown_instruction: "# Are Properties + Case-Sensitive?\r\n\r\nYou saw that if you add a property to an object and + then store it in the database, the database will add a column to accommodate + the new data value. \r\n\r\nIf you end up with columns in your table that + you don't want, you can delete them\r\n![](https://images.code.org/baecadc168954c794212b419d441679b-image-1449262524542.gif)\r\n\r\nLet's + do another quick experiment to test the behavior of the data table. **What + happens if you change how a property is spelled?**\r\n\r\n# Do This:\r\n\r\n**Your + code from the previous exercise** is provided.\r\n\r\n* Change `song.title` + to `song.Title` (capital T) where you create your song object.\r\n* **Run + the program**, then go to the Data Viewer to see what happened.\r\n* If there + are problems created by the change in spelling, **delete unnecessary columns + and change your code back**." + U4 - deleteRecords 0_markdown_instruction: "# Deleting Records with Code\r\n\r\nYou + can delete a record \"by hand\" in the Data Viewer by clicking the <img src=\"https://images.code.org/b45cebe6d06d8c2d45a233bd3c472a62-image-1449850229074.png\" + style=\"width: 50px\"> button.\r\n\r\nTo delete a record with code you use + the `deleteRecord` command. It works similarly to the other data tools in + that it has 3 parameters:\r\n\r\n * The **name of the table** you want to + delete from.\r\n * The **object** you want to delete.\r\n * A **callback** + function.\r\n\r\n`deleteRecord` is **different from the other data commands** + in one critical way. The object you send to the database ***only* needs to + contain the id of the record** you want to delete. \r\n \r\n\r\n# Do This:\r\n\r\n**Your + database already includes a table called \"mytable\"**\r\n\r\n * Go to the + Data Viewer and **look at the data in \"mytable\"**.\r\n * **Drag out** the + `deleteRecord` block.\r\n \t* It includes **default code** to delete the record + with id:1 in \"mytable\".\r\n * Run the code and **confirm that the record + with id:1 (\"Greg\") is deleted from the database**.\r\n\r\n![](https://images.code.org/f1168e1793f646575f26d86e66ddcae4-image-1457470120824.gif)" + U4 - deleteRecords 1_markdown_instruction: "# Deleting Records Continued...\r\n\r\nThe + other difference with `deleteRecord` is that the database **sends back a boolean + called `success`.** \r\n\r\nUsing the `success` boolean, you can write a callback + function that will behave differently based on whether or not `deleteRecord` + ran successfully.\r\n\r\n* If the database was able to successfully delete + the specified record, `success` will be set to **true** in the callback function. + \r\n* If the database was **not** able to delete the record, `success` will + be **false.**\r\n\r\nLet's do a little more experimentation with `deleteRecord` + on a sample database. **We've given you a new database that has about 40 + songs in it.** You have a few different things to try so don't miss them.\r\n\r\n# + Do This:\r\n\r\n* **Click View Data.** Look at the \"mySongs\" table and **find + the ID of the song \"Little Bunny Foo Foo.\"** \r\n* **Drag out the `deleteRecord` + block.**\r\n * Set the table name to \"mySongs.\"\r\n * Set the `id` of + the object to delete to the ID of \"Little Bunny Foo Foo.\"\r\n* **Add an + `if` statement to the callback function.**\r\n * If `success` is true, print + \"Record deleted successfully\" to the console.\r\n * Otherwise, print \"Could + not delete record\" to the console.\r\n* **Run the code.**\r\n * Verify that + you deleted \"Little Bunny Foo Foo\" from the list of songs.\r\n* **Run the + exact same code again.**\r\n * This will attempt to delete a record with + the ID you just deleted. See what happens..." + U4 - deleteRecords 2 delete object_markdown_instruction: "# Using Objects to + Specify What to Delete\r\n\r\nWhen deleting an object in the database **the + only property the database checks is `id` - *everything else* in the object + is ignorned by `deleteRecord`**.\r\n\r\nThe **key takeway** is that you can + pass *any* object to `deleteRecord`. As long as it has a property called `id` + the database will try to delete a record with that ID.\r\n\r\nLet's look + at an example. \r\n\r\n# Do This:\r\n <img src=\"https://images.code.org/0af097cf5062c49743275f2c3df21bf7-image-1449864027240.gif\" + style=\"float: right; width: 350px\">\r\n \r\n**Starter code is provided** + that constructs an object called `song` and sets `song.id = 9` (the ID of + \"Little Bunny Foo Foo\"). Additional \"junk\" properties are added as well. + The \"mySongs\" table in the database has been restored to its original state.\r\n + \r\n* **Replace the second parameter of deleteRecord to use the `song` object** + instead of `{id:1}` (see animation at right).\r\n* Run your program and **confirm + that the record with id 9 is deleted** by checking in the Data Viewer.\r\n* + **Change the ID in the `song` object** to the ID of a different record in + your database.\r\n* Run your program and **confirm another record in \"mySongs\" + was deleted.**" + U4 - deleteRecords 2_markdown_instruction: "# Deleting Records\r\n\r\nGo look + at the data. See the ids. When you try to edit you can't. Why? Because + id's are unique, but for all time. Each record that gets added gets assigned + a unique id. That id will never be used again, even if you delete it. ![](https://images.code.org/352bbbd91c14aa8a4a37fcc309f29d93-image-1449782149871.gif)\r\n\r\nYou + can delete a record using the data viewer by clicking the delete button (duh).\r\n\r\nTo + do it with code you use the delete record block. It works similarly to the + other data tools.\r\n\r\n[screen cap diagram - table name, object, callback]\r\n\r\nHowever, + deleteRecord is different because the object *only* needs to contain the id + of the record you want to delete. You can \r\n\r\n# Do This\r\n * Drag out + the delete records block - set the id to the one you found.\r\n * Run the + code - verify that you deleted the right record\r\n\r\n" + U4 - fix contacts by hand in data table_markdown_instruction: "# Add Contacts + to the Data Table by Hand\r\n\r\nWhen you originally created this app, you + hard-coded at least **three contacts\"** that were added to your contacts + list every time the program started running. You'll want to move their information + into the database as well.\r\n\r\n# Do This:\r\n\r\n**Your code from the previous + exercise** is provided.\r\n\r\n* In the Data Viewer, go to the table you are + using to store your contacts.\r\n* Add rows to the table and copy in the url, + name, phone number, etc. for each of the hard-coded contacts in your app.\r\n* + **Don't actually delete your hard-coded contacts from your code.**" + U4 - last stage test adding contcts_markdown_instruction: "# Test the App\r\n\r\nIf + you run your app now, you can add contacts and they will be saved to the database, + but they will also show up \"locally\" in your app. That is, until you restart + it.\r\n\r\n**When you restart the app, it only reloads the hard-coded contacts. + This is okay for now.** In the **next lesson** you'll learn how to pull + data from the database back into the app.\r\n\r\nAs a final step for now...\r\n\r\n# + Do This:\r\n\r\n**Your code from the previous exercise** is provided.\r\n\r\n + * **Add a few new contacts to your app and confirm you can scroll through + them**.\r\n * In the Data Viewer, **confirm those contacts were added to your + database**.\r\n * Restart your app. Confirm that **the newly added contacts + are no longer stored locally in your app, but they still exist in the database**.\r\n + * In the Data Viewer confirm those **\"lost\" contacts are still stored in + your database**." 'U4 L1 - 4: Teaching and Student Support Plan_markdown_instruction': "<br><br>\r\n> **NOTE: before you start this task, make sure you’ve reviewed the lesson resources in this module, and have a good sense of how the lesson works. If you haven’t @@ -25838,6 +23207,7 @@ en: U4 vigenere cipher 2_markdown_instruction: "# Simple Markdown?" U4L01 Free Response_markdown_instruction: "This is the free response question text.\n" + U4L02 - Objects - Template1_markdown_instruction: "# Template" U4L02 - Objects - createObject_markdown_instruction: "# Creating Your Own Objects\r\n\r\n**Objects are unordered collections of name value pairs**. Like an array they can hold many pieces of information, but where arrays use a numeric index to reference @@ -25875,7 +23245,6 @@ en: pieces of information they contain.\r\n* **Reflect: ** Why wouldn't we want this information stored in many variables? Why wouldn't we want this information stored in an array?" - U4L02 - Objects - Template1_markdown_instruction: "# Template" U4L02 Free Response_markdown_instruction: "Free response prompt here.\n\n" U4L03 Free Response_markdown_instruction: "Free response prompt here.\n\n" U4L04 Free Response_markdown_instruction: "Free response prompt here.\n\n" @@ -26290,121 +23659,6 @@ en: scores might change with a single click. Maybe, maybe not.</li>\r\n<li>But we can be lazy and just set both score text labels every time and not have to worry about it.</li>\r\n</details>\r\n\r\n" - U5 compound boolean museum example_markdown_instruction: "## You Try It\r\n\r\n**Recreate - the museum price example from the video.**\r\n\r\n* We've setup everything - for you **except the boolean expression in the *if* statement is incomplete**\r\n\r\n**Modify - the boolean expression** (it just says `age < 21` right now) to use combinations - of `&&` and `||` to reflect the following condition:\r\n\r\n* IF *It's Tuesday - or Thursday or the age is between 12 and 21* they get a discount\r\n* ELSE - they pay full price\r\n\r\n**TIP:** switching to text mode might make this - easier to compose." - U5 if-else dropdown guess dice_markdown_instruction: "<img src=\"https://images.code.org/bd3094161d7d58800b1a6a981383fc6c-image-1479848098180.gif\" - style=\"float: right\">\r\n\r\n## You try it \r\n\r\nThis is a slightly more - involved example. You'll need to study the starting design and code a little - bit, but you only have to insert a single if-else statement and move some - lines of code into the appropriate if or else clause to make it work.\r\n\r\n## - Do this\r\n\r\n**Study the starting code first to see what it does**\r\n\r\n* - You *can* run it to see what happens before doing anything - it just won't - work right\r\n* **Notice** the function `reset()` - which hides the images. \r\n\t* - We made a function because we want to run this code from two different event - handlers.\r\n\r\n**Add an if-else statement in the *roll_btn* event handler** - to check if the random number that represents a dice roll matches the user's - guess in the dropdown\r\n\r\nIf they guessed correctly\r\n* Show the trophy - image\r\n* Add 6 to the score\r\n\r\nOtherwise:\r\n* Show the frowny face - image\r\n* Subtract 1 from the score\r\n\r\n**Setup Notes:**\r\n* All UI elements - are added for you (images are hidden) - flip to Design Mode to see.\r\n* All - lines of code *except* for the if-else statement and condition are also provided - - you'll need to move them around once you've added the if-else statement.\r\n* - Notice the global `score` variable which will keep track of the score between - clicks\r\n* We've added comments in the code to help you out - you can remove - them if you like.\r\n\r\n<details><summary>Hint: [click to expand]</summary>\r\n<br>\r\nThe - condition needs to us <code>==</code> compare <code>dieVal</code> with the - value in the dropdown. To get the value out of the dropdown you use <code>getNumber(\"guess_dropdown\")</code>.<br><br>(You - could use <code>getText(\"guess_dropdown\")</code> and it would still work, - because <code>==</code> tries to convert text to a number for comparison so - <code>\"6\"==6</code> is true. But since we're expecting a number in the - dropdown we should use <code>getNumber</code> so it makes sense when reading - the code.)\r\n</details>" - U5 if-else dropdown movie checker_markdown_instruction: "<img src=\"https://images.code.org/38b037a468dd7a9df53ce29b5b720a03-image-1479852997408.gif\" - style=\"float: right\">\r\n\r\n## You Try It\r\n\r\nThis example is very similar - to the worked example on the previous page - it is a version of the movie - age checker that uses a dropdown.\r\n\r\nWe've provided the starting UI elements, - including the dropdown - but none of the code.\r\n\r\n**Do this:**\r\nUsing - the examples on the previous page as a guide...\r\n\r\n* Add an event handler - for the *dropdown menu that triggers on *\"change\"*.\r\n* Add an if statement - to check if the age chosen in the dropdown is `>=` to 13 and set the text - in the *result_label*\r\n\t* if the age is 13 or over set the text to \"You - are old enough to see a PG-13 movie alone\"\r\n * Otherwise, set the text - to \"You are not old enough to see a PG-13 movie alone\"\r\n\r\n**Tip:** Use - `getNumber(id)` instead of `getText(id)` to get the value out of the dropdown\r\n\r\n* - One major difference from the example is that we want to compare the value - of the dropdown to a number using `>=` rather than with `==`\r\n* You should - to use `getNumber(\"age_dropdown\")` to extract the value *as a number rather - than text*. \r\n* This is the same reason we use `promptNum` instead of `prompt` - for simple console examples.\r\n* It will still work if you use `getText` - but isn't good form." - U5 if-else simple movie ratings example_markdown_instruction: "## You Try It\r\n\r\n**Recreate - the simple movie age example from the video.**\r\n\r\n* We've provided the - first line to prompt the user to enter their age.\r\n* Add and `if-else` statement - that checks to see if the age is `>=` 13 and \r\n* Use `console.log` to display - appropriate messages\r\n\r\nHere is pseudocode for what you should add\r\n\r\n```\r\nIF - age >= 13\r\n DISPLAY \"You can see a PG-13 movie alone\"\r\nELSE\r\n DISPLAY - \"You are not old enough to see a PG-13 movie alone\"\r\n```\r\n\r\n\r\n" - U5 if-else weeekend challenge_markdown_instruction: "<img src=\"https://images.code.org/42591321cf2bf9e4b90e89e0ea613c9f-image-1479909970655.gif\" - style=\"float: right\">\r\n\r\n## Challenge: It's the weekend!\r\n\r\n**Make - an app tells you whether to stay home or go to school based on what day of - the week it is.**\r\n\r\n\r\nIn this challenge you will:\r\n\r\n* Add your - own dropdown menu in design mode\r\n* Add an event handler for the dropdown\r\n* - Write an if-statement that's slightly tricky\r\n\r\n## Do this:\r\n\r\n* - In Design Mode **add a dropdown** menu and fill it with the days of the week: - *Monday, Tuesday,...,Sunday*\r\n* **Add an event handler** for that dropdown - that activates on *\"change\"*\r\n* **Add an `if-else` statement** to the - event handler that checks which day was selected and...\r\n\r\n\t* **If** - the day selected was a weekend day (*Saturday* or *Sunday*) then display a - message that says \"It's the weekend! Stay home!\"\r\n\r\n\t* **Otherwise** - (the day is a weekday) display a message that says \"It's a weekday. Go to - school\".\r\n* Your message should be displayed by setting the text of the - *msg_label* provided in design mode.\r\n\r\n## Testing:\r\n\r\n* Once you - have something functional, make sure you test *every* day of the week to verify - the output is correct\r\n* The if-statement here is trickier than before.\r\n\r\n<details><summary>HINT: - [click to expand]</summary>\r\n<br>\r\n\r\n<li>The trick here is that, unless - you want to check all seven days with individual if-statements, you need to - <strong>nest</strong> one if-statement inside another.</li>\r\n<li>The reason - is that in order to know it's a weekday you need to know <em>both</em> that - it's NOT Sunday <em>and</em> that it's not Saturday either. That's two - boolean conditions.</li>\r\n<li>Here is the skeleton of an if-else structure - that will work. Notice that the the if-statement that checks for Sunday is - <em>inside</em> the else clause of the statement that checks for Saturday</li>\r\n\r\n\r\n<pre>\r\n\r\nIF - it's saturday\r\n ...\r\nELSE\r\n IF it's sunday\r\n ...\r\n ELSE\r\n ...\r\n\r\n</pre>\r\n\r\n</details>\r\n\r\n" - U5 if-else-if movie example_markdown_instruction: "# *if-else-if*\r\n\r\nLet's - recreate the movie ratings example from the previous page (and video).\r\n\r\nAdd - an `if-else-if` statement with a series of `else-if`s to display the right - message based on the user's age.\r\n\r\nWe've started you out with code - that prompts the user for her age. We've also provided all the console.log - statements you need.\r\n\r\n**Your task:** Add an `if-else-if` statement with - the appropriate *Boolean expressions*, and move the `console.log` statements - into the right clause so the correct message gets displayed. Here is a reminder - of what is supposed to happen.\r\n\r\n* **If** the user's age is 17 or over, - they can see an R-rated movie\r\n* **else if** the user's age is 13 or over, - they can see a PG-13 movie\r\n* **else if** the user's age is 5 or over they - can see a PG movie\r\n* **else** display a message about the user being too - young\r\n\r\n* **Test out the program** to make sure your updates worked.\r\n\r\n## - Coding Tips\r\n\r\n**Create an `else-if`** by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. The first - <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 - PM.png\" style=\"width: 40px\"> will add an `else`, the second will add an - `else-if`.\r\n\r\n**Remove an `else-if`** -- if you add an extra `else-if` - by accident, you can remove it by switching into text mode and deleting the - text. Don't forget to delete the curly-braces `{` and `}` that go with it.\r\n\r\n\r\n" - U5 if-else-if quiz grade_markdown_instruction: "# Quiz Grade\r\n\r\n**Prompt - the user for their quiz score (0-100) and tell them what letter grade (A-F) - they got.**\r\n\r\n**Example:** if the user enters `84` at the prompt your - program should output: `Your quiz grade is a B.` Here's the score-to-grade - breakdown:\r\n```\r\nLetter Grade: A B C D F\r\n Score - Range: 90-100 80-89 70-79 60-69 0-59\r\n```\r\n\r\n\r\n\r\nWe've started - you out with the prompt and the `console.log` statements you need. **Your - task is to add the *if-else-if* statements to make it work.\r\n\r\n**Remember:** - the order in which you check the boolean conditions *matters*.\r\n\r\n\r\n\r\n" 'U5 L1 - 3: Teaching and Student Support Plan_markdown_instruction': "<br><br>\r\n> **NOTE: before you start this task, make sure you’ve reviewed the lesson resources in this module, and have a good sense of how the lessons work. If you haven’t @@ -26620,20 +23874,135 @@ en: can elevate to a facilitator to review. You will always have a chance to address feedback from your reviewers and resubmit your task! Reviewer feedback will show up at the bottom of this page, once it’s available. \r\n\r\n<br><br>" + U5 Video compound booleans_markdown_instruction: "### Points to pay attention + to:\r\n\r\n* The \"Boolean operators\" are AND and OR. \r\n* In JavaScript + you write them as `&&` for AND and `||` for OR.\r\n* You use them to combine + boolean expressions into a single statement when you need to check multiple + conditions before executing a particular segment of code.\r\n\r\n" + U5 Video if-else-if_markdown_instruction: "### Points to pay attention to:\r\n\r\n* + **START at 2:20** \r\n This is the second half of the video you watched + earlier. \r\n\r\n* An If-else-if statement let's you check more than one + condition at a time.\r\n* The **order of conditions matters**. Since conditions + are checked sequentially from top to bottom, the code that gets executed will + be the *first* statement to evaluate to true.\r\n\r\n" + U5 compound boolean museum example_markdown_instruction: "## You Try It\r\n\r\n**Recreate + the museum price example from the video.**\r\n\r\n* We've setup everything + for you **except the boolean expression in the *if* statement is incomplete**\r\n\r\n**Modify + the boolean expression** (it just says `age < 21` right now) to use combinations + of `&&` and `||` to reflect the following condition:\r\n\r\n* IF *It's Tuesday + or Thursday or the age is between 12 and 21* they get a discount\r\n* ELSE + they pay full price\r\n\r\n**TIP:** switching to text mode might make this + easier to compose." + U5 if-else dropdown guess dice_markdown_instruction: "<img src=\"https://images.code.org/bd3094161d7d58800b1a6a981383fc6c-image-1479848098180.gif\" + style=\"float: right\">\r\n\r\n## You try it \r\n\r\nThis is a slightly more + involved example. You'll need to study the starting design and code a little + bit, but you only have to insert a single if-else statement and move some + lines of code into the appropriate if or else clause to make it work.\r\n\r\n## + Do this\r\n\r\n**Study the starting code first to see what it does**\r\n\r\n* + You *can* run it to see what happens before doing anything - it just won't + work right\r\n* **Notice** the function `reset()` - which hides the images. \r\n\t* + We made a function because we want to run this code from two different event + handlers.\r\n\r\n**Add an if-else statement in the *roll_btn* event handler** + to check if the random number that represents a dice roll matches the user's + guess in the dropdown\r\n\r\nIf they guessed correctly\r\n* Show the trophy + image\r\n* Add 6 to the score\r\n\r\nOtherwise:\r\n* Show the frowny face + image\r\n* Subtract 1 from the score\r\n\r\n**Setup Notes:**\r\n* All UI elements + are added for you (images are hidden) - flip to Design Mode to see.\r\n* All + lines of code *except* for the if-else statement and condition are also provided + - you'll need to move them around once you've added the if-else statement.\r\n* + Notice the global `score` variable which will keep track of the score between + clicks\r\n* We've added comments in the code to help you out - you can remove + them if you like.\r\n\r\n<details><summary>Hint: [click to expand]</summary>\r\n<br>\r\nThe + condition needs to us <code>==</code> compare <code>dieVal</code> with the + value in the dropdown. To get the value out of the dropdown you use <code>getNumber(\"guess_dropdown\")</code>.<br><br>(You + could use <code>getText(\"guess_dropdown\")</code> and it would still work, + because <code>==</code> tries to convert text to a number for comparison so + <code>\"6\"==6</code> is true. But since we're expecting a number in the + dropdown we should use <code>getNumber</code> so it makes sense when reading + the code.)\r\n</details>" + U5 if-else dropdown movie checker_markdown_instruction: "<img src=\"https://images.code.org/38b037a468dd7a9df53ce29b5b720a03-image-1479852997408.gif\" + style=\"float: right\">\r\n\r\n## You Try It\r\n\r\nThis example is very similar + to the worked example on the previous page - it is a version of the movie + age checker that uses a dropdown.\r\n\r\nWe've provided the starting UI elements, + including the dropdown - but none of the code.\r\n\r\n**Do this:**\r\nUsing + the examples on the previous page as a guide...\r\n\r\n* Add an event handler + for the *dropdown menu that triggers on *\"change\"*.\r\n* Add an if statement + to check if the age chosen in the dropdown is `>=` to 13 and set the text + in the *result_label*\r\n\t* if the age is 13 or over set the text to \"You + are old enough to see a PG-13 movie alone\"\r\n * Otherwise, set the text + to \"You are not old enough to see a PG-13 movie alone\"\r\n\r\n**Tip:** Use + `getNumber(id)` instead of `getText(id)` to get the value out of the dropdown\r\n\r\n* + One major difference from the example is that we want to compare the value + of the dropdown to a number using `>=` rather than with `==`\r\n* You should + to use `getNumber(\"age_dropdown\")` to extract the value *as a number rather + than text*. \r\n* This is the same reason we use `promptNum` instead of `prompt` + for simple console examples.\r\n* It will still work if you use `getText` + but isn't good form." + U5 if-else simple movie ratings example_markdown_instruction: "## You Try It\r\n\r\n**Recreate + the simple movie age example from the video.**\r\n\r\n* We've provided the + first line to prompt the user to enter their age.\r\n* Add and `if-else` statement + that checks to see if the age is `>=` 13 and \r\n* Use `console.log` to display + appropriate messages\r\n\r\nHere is pseudocode for what you should add\r\n\r\n```\r\nIF + age >= 13\r\n DISPLAY \"You can see a PG-13 movie alone\"\r\nELSE\r\n DISPLAY + \"You are not old enough to see a PG-13 movie alone\"\r\n```\r\n\r\n\r\n" + U5 if-else weeekend challenge_markdown_instruction: "<img src=\"https://images.code.org/42591321cf2bf9e4b90e89e0ea613c9f-image-1479909970655.gif\" + style=\"float: right\">\r\n\r\n## Challenge: It's the weekend!\r\n\r\n**Make + an app tells you whether to stay home or go to school based on what day of + the week it is.**\r\n\r\n\r\nIn this challenge you will:\r\n\r\n* Add your + own dropdown menu in design mode\r\n* Add an event handler for the dropdown\r\n* + Write an if-statement that's slightly tricky\r\n\r\n## Do this:\r\n\r\n* + In Design Mode **add a dropdown** menu and fill it with the days of the week: + *Monday, Tuesday,...,Sunday*\r\n* **Add an event handler** for that dropdown + that activates on *\"change\"*\r\n* **Add an `if-else` statement** to the + event handler that checks which day was selected and...\r\n\r\n\t* **If** + the day selected was a weekend day (*Saturday* or *Sunday*) then display a + message that says \"It's the weekend! Stay home!\"\r\n\r\n\t* **Otherwise** + (the day is a weekday) display a message that says \"It's a weekday. Go to + school\".\r\n* Your message should be displayed by setting the text of the + *msg_label* provided in design mode.\r\n\r\n## Testing:\r\n\r\n* Once you + have something functional, make sure you test *every* day of the week to verify + the output is correct\r\n* The if-statement here is trickier than before.\r\n\r\n<details><summary>HINT: + [click to expand]</summary>\r\n<br>\r\n\r\n<li>The trick here is that, unless + you want to check all seven days with individual if-statements, you need to + <strong>nest</strong> one if-statement inside another.</li>\r\n<li>The reason + is that in order to know it's a weekday you need to know <em>both</em> that + it's NOT Sunday <em>and</em> that it's not Saturday either. That's two + boolean conditions.</li>\r\n<li>Here is the skeleton of an if-else structure + that will work. Notice that the the if-statement that checks for Sunday is + <em>inside</em> the else clause of the statement that checks for Saturday</li>\r\n\r\n\r\n<pre>\r\n\r\nIF + it's saturday\r\n ...\r\nELSE\r\n IF it's sunday\r\n ...\r\n ELSE\r\n ...\r\n\r\n</pre>\r\n\r\n</details>\r\n\r\n" + U5 if-else-if movie example_markdown_instruction: "# *if-else-if*\r\n\r\nLet's + recreate the movie ratings example from the previous page (and video).\r\n\r\nAdd + an `if-else-if` statement with a series of `else-if`s to display the right + message based on the user's age.\r\n\r\nWe've started you out with code + that prompts the user for her age. We've also provided all the console.log + statements you need.\r\n\r\n**Your task:** Add an `if-else-if` statement with + the appropriate *Boolean expressions*, and move the `console.log` statements + into the right clause so the correct message gets displayed. Here is a reminder + of what is supposed to happen.\r\n\r\n* **If** the user's age is 17 or over, + they can see an R-rated movie\r\n* **else if** the user's age is 13 or over, + they can see a PG-13 movie\r\n* **else if** the user's age is 5 or over they + can see a PG movie\r\n* **else** display a message about the user being too + young\r\n\r\n* **Test out the program** to make sure your updates worked.\r\n\r\n## + Coding Tips\r\n\r\n**Create an `else-if`** by hitting the <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> at the bottom of an `if` statement. The first + <img src=\"https://images.code.org/f762344bc839dd8385730bb7d909657f-image-1446237096776.31.12 + PM.png\" style=\"width: 40px\"> will add an `else`, the second will add an + `else-if`.\r\n\r\n**Remove an `else-if`** -- if you add an extra `else-if` + by accident, you can remove it by switching into text mode and deleting the + text. Don't forget to delete the curly-braces `{` and `}` that go with it.\r\n\r\n\r\n" + U5 if-else-if quiz grade_markdown_instruction: "# Quiz Grade\r\n\r\n**Prompt + the user for their quiz score (0-100) and tell them what letter grade (A-F) + they got.**\r\n\r\n**Example:** if the user enters `84` at the prompt your + program should output: `Your quiz grade is a B.` Here's the score-to-grade + breakdown:\r\n```\r\nLetter Grade: A B C D F\r\n Score + Range: 90-100 80-89 70-79 60-69 0-59\r\n```\r\n\r\n\r\n\r\nWe've started + you out with the prompt and the `console.log` statements you need. **Your + task is to add the *if-else-if* statements to make it work.\r\n\r\n**Remember:** + the order in which you check the boolean conditions *matters*.\r\n\r\n\r\n\r\n" U5 video Booleans_markdown_instruction: "### Points to pay attention to:\r\n\r\n1. What's a *Boolean Expression?*\r\n2. Why is it called a \"Boolean\"?\r\n3. Is this a legal expression? `10 > 25`?" - U5 Video compound booleans_markdown_instruction: "### Points to pay attention - to:\r\n\r\n* The \"Boolean operators\" are AND and OR. \r\n* In JavaScript - you write them as `&&` for AND and `||` for OR.\r\n* You use them to combine - boolean expressions into a single statement when you need to check multiple - conditions before executing a particular segment of code.\r\n\r\n" - U5 Video if-else-if_markdown_instruction: "### Points to pay attention to:\r\n\r\n* - **START at 2:20** \r\n This is the second half of the video you watched - earlier. \r\n\r\n* An If-else-if statement let's you check more than one - condition at a time.\r\n* The **order of conditions matters**. Since conditions - are checked sequentially from top to bottom, the code that gets executed will - be the *first* statement to evaluate to true.\r\n\r\n" U6 - Final Project - Project Level_markdown_instruction: "# Congratulations!\r\n\r\nYou've reached the end of the year! Now it's time to show off everything you've learned by creating a final project.\r\n\r\n# Do This:\r\n\r\n* Use this level @@ -26658,6 +24027,25 @@ en: are still printed to the console.\r\n* Open the Data Viewer and check that the record for \"Eye of the Tiger\" is now fully filled in.\r\n\r\n**Your code should end up looking similar to the code depicted in the image.**\r\n\r\n![](https://images.code.org/b95ac5c5c45942b3eef85823dee48c42-image-1455666651198.PNG)" + U6 - updateRecord - Contacts - Edit UI_markdown_instruction: "# Editing Contacts + in the Contacts App\r\n\r\nNow that you’re familiar with how `updateRecord` + works, it’s time to add in functionality to the Contacts App so you can edit + contacts in your database. First, you’ll need to do some work in Design Mode + to set up the UI elements you’ll need.\r\n\r\n# Do This:\r\n\r\n** Your code + and database from the Contacts App are provided.**\r\n\r\n* **Change the “Delete” + button on the “viewContactsScreen” to an “Edit” button.** Make sure you **change + the button text and ID to something descriptive**. You might also want to + change the style of the button.\r\n\t* **Note:** Leave the event handler for + the old “Delete” button as is. You’ll still use it later.\r\n* **Add a new + screen called “editContactsScreen”** and add UI elements that look similar + to the ones in the image. Don’t forget to give your UI elements **descriptive + and meaningful names**.\r\n\t* **Note:** Make sure the ID for your new “Delete” + button matches the ID in your event handler for the old delete button. If + you do this, your new “Delete” button should work without needing to change + anything in your event handler.\r\n\r\n| Updated \"viewContactsScreen\": | + New \"editContactsScreen\": |\r\n|------|------|\r\n| ![](https://images.code.org/aef7efbfea4493037d127ca97d83fcc6-image-1455919502578.png) + | ![](https://images.code.org/ee5ce040dd52239719c2b4c790134d08-image-1455919496715.png) + |\r\n\r\n" U6 - updateRecord - Contacts - Edit event handler_markdown_instruction: "# Event Handlers for “Edit” and “Go Back” Buttons\r\n\r\nNow that you have all the UI elements you need, it’s time to set up the event handlers. In this @@ -26679,25 +24067,6 @@ en: “Edit,” “Go Back,” and “Delete” buttons all work and that your preview image updates when you change the URL text.\r\n\r\n\r\n<details><summary><strong>Your code should look similar to this.</strong> (click to expand)</summary>\r\n![](https://images.code.org/74b697567fae902cad13d7df9e695b2b-image-1455921921229.png)\r\n</details>\r\n\r\n" - U6 - updateRecord - Contacts - Edit UI_markdown_instruction: "# Editing Contacts - in the Contacts App\r\n\r\nNow that you’re familiar with how `updateRecord` - works, it’s time to add in functionality to the Contacts App so you can edit - contacts in your database. First, you’ll need to do some work in Design Mode - to set up the UI elements you’ll need.\r\n\r\n# Do This:\r\n\r\n** Your code - and database from the Contacts App are provided.**\r\n\r\n* **Change the “Delete” - button on the “viewContactsScreen” to an “Edit” button.** Make sure you **change - the button text and ID to something descriptive**. You might also want to - change the style of the button.\r\n\t* **Note:** Leave the event handler for - the old “Delete” button as is. You’ll still use it later.\r\n* **Add a new - screen called “editContactsScreen”** and add UI elements that look similar - to the ones in the image. Don’t forget to give your UI elements **descriptive - and meaningful names**.\r\n\t* **Note:** Make sure the ID for your new “Delete” - button matches the ID in your event handler for the old delete button. If - you do this, your new “Delete” button should work without needing to change - anything in your event handler.\r\n\r\n| Updated \"viewContactsScreen\": | - New \"editContactsScreen\": |\r\n|------|------|\r\n| ![](https://images.code.org/aef7efbfea4493037d127ca97d83fcc6-image-1455919502578.png) - | ![](https://images.code.org/ee5ce040dd52239719c2b4c790134d08-image-1455919496715.png) - |\r\n\r\n" U6 - updateRecord - Contacts - Save edited contact_markdown_instruction: "# Saving an Updated Contact in the Database\r\n\r\nThe last step for your Contacts App is to save the updated information from the user in the database. You @@ -27440,46 +24809,2677 @@ en: What recommendations do you have for assessing student learning in Unit 1? \r\n\r\n<br>\r\n\r\nUse the space below to record your recommendations (you'll share them tomorrow). " - What is a Heuristic?_markdown_instruction: "## What is a Heuristic? \r\n\r\nIn - lesson 2 students will take on the challenge of compressing various pieces - of text. Over time, they will see that different types of text require different - approaches to compression. The lesson ends with an activity where students - develop a heuristic, or a rule of thumb, that can be applied to different - pieces of text in order to compress them. \r\n\r\nThere are three Essential - Knowledge Statements and one Exclusion Statement in the Framework dealing - with Heuristics: \r\n\r\n>- 4.2.1D Some problems can be solved but not in - a reasonable time. In these cases, heuristic approaches may be helpful to - find solutions in reasonable time. \r\n- 4.2.2A A heuristic is a technique - that may allow us to find an approximate solution when typical methods fail - to find an exact solution. \r\n- 4.2.2B Heuristics may be helpful for finding - an approximate solution more quickly when exact methods are too slow. \r\n- - Exclusion Statement (4.2.2B): Specific heuristic solutions are beyond the - scope of this course and the AP Exam.\r\n\r\nMany people are confused by the - difference between *algorithms* and *heuristics*. Check out the following - resource for some clarification about the overlaps and differences between - the two. " - What is the difference between formative and summative assessment?_markdown_instruction: "The - following link is a resource that provides definitions and examples of formative - and summative assessments:" - WhileAdventure_markdown_instruction: "Our adventurer wants to collect coins. But + What is a Heuristic?_markdown_instruction: "## What is a Heuristic? \r\n\r\nIn + lesson 2 students will take on the challenge of compressing various pieces + of text. Over time, they will see that different types of text require different + approaches to compression. The lesson ends with an activity where students + develop a heuristic, or a rule of thumb, that can be applied to different + pieces of text in order to compress them. \r\n\r\nThere are three Essential + Knowledge Statements and one Exclusion Statement in the Framework dealing + with Heuristics: \r\n\r\n>- 4.2.1D Some problems can be solved but not in + a reasonable time. In these cases, heuristic approaches may be helpful to + find solutions in reasonable time. \r\n- 4.2.2A A heuristic is a technique + that may allow us to find an approximate solution when typical methods fail + to find an exact solution. \r\n- 4.2.2B Heuristics may be helpful for finding + an approximate solution more quickly when exact methods are too slow. \r\n- + Exclusion Statement (4.2.2B): Specific heuristic solutions are beyond the + scope of this course and the AP Exam.\r\n\r\nMany people are confused by the + difference between *algorithms* and *heuristics*. Check out the following + resource for some clarification about the overlaps and differences between + the two. " + What is the difference between formative and summative assessment?_markdown_instruction: "The + following link is a resource that provides definitions and examples of formative + and summative assessments:" + WhileAdventure_markdown_instruction: "Our adventurer wants to collect coins. But + she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many + as she can using just 4 blocks?" + 'Widget: Black and White Pixelation_markdown_instruction': "# Make your own + image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* + Encode an image of anything you like.\r\n* You might want to do some planning + and sketching with graph paper first.\r\n* DO NOT simply make an abstract + pattern, like a checkerboard. \r\n* Depict something, perhaps your name written + out, your initials, an icon or logo of some sort.\r\n* Get creative! The image + doesn't have to be a perfect square, it can be long and skinny.\r\n* Optional: + for fun, send your image bits to a friend using the <a href =\"https://studio.code.org/s/cspunit1/stage/11/puzzle/2\" + target=\"_blank\">sending bits widget.</a> *(note: this is just a link to + the sending formatted text level from a couple of classes ago)*\r\n\r\n\r\n" + 'Widget: Color Pixelation_markdown_instruction': "# Personal Favicon\r\n**Requirements:**\r\n<img + src = \"https://images.code.org/28fc33ea82996a10863688702af55e65-image-1439596268865.png\" + align=right hspace=20>\r\n\r\n* The icon must be 16x16 pixels. \r\n* You must + use the Pixelation Widget to encode the bits of color information.\r\n* The + image must be encoded with at least 12 bits per pixel.\r\n\r\n" + 'Widget: Text Compression_markdown_instruction': "Look for patterns (repeated + words or phrases) in the text. Enter the patterns you see into the dictionary + on the right. As you type entries into the dictionary, the symbol for the + entry is inserted into the text in place of the pattern." + aE1_markdown_instruction: "<img src=\"https://images.code.org/fa3c416b74ff9071455535955bc4df35-image-1465507662295.gif\" + style=\"float:left; width:100px; margin: 0 20px 80px 100px;\"/>\r\n\r\n<div + style=\"color: #7665a0; font-size: 1.6em; line-height: 1.4em;\">\r\nFirst, + we need napkins!\r\n\r\nChoose your favorite shape:\r\n - Square (Easy)\r\n + - Triangle (Medium)\r\n - Pentagon (Hard)\r\n\r\n</div>\r\n<br/>\r\n\r\n" + aE2_markdown_instruction: "<img src=\"https://images.code.org/2a67ea28a0fb9f674fd764b350b297da-image-1465514320176.gif\" + style=\"width:400px; margin: 0 20px 20px 10px;\"/>\r\n\r\n<div style=\"color: + #7665a0; font-size: 1.6em; line-height: 1.4em;\" >Now we need enough for everyone!\r\n<br/><br/>\r\n\r\nLet's + take the shape we just made and line up a row of 14 napkins. \r\n<br/>\r\nIf + you place one loop inside another loop, we call that a nested loop. \r\n\r\nHow + can you loop all of the code from your last stage to make sure all 14 napkins + line up next to each other?</div>\r\n" + aE3_markdown_instruction: "<img src=\"https://images.code.org/e9fe83556eec68be9ebd7de9a16267b1-image-1465516277348.gif\" + style=\"width:400px; margin: 0 20px 20px 100px;\" loop=\"infinite\"/>\r\n\r\n<div + style=\"color: #7665a0; font-size: 1.6em; line-height: 1.4em;\" >\r\nWe've + got to have a tablecloth! <br/></br>\r\n\r\nTake your row of 14 napkins and + sew 14 of those together with another **outer loop** to make a cover for our + table.\r\n</div>\r\n\r\n" + aE3alternate_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nThis alternate shows what the image would + look like if the user chose pentagon napkins and modified line weight/color.\r\n</div>\r\n\r\n" + aE3alternateB_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nThis alternate shows what the image would + look like if the user chose triangle napkins and got bold with the code.\r\n</div>\r\n\r\n" + aE4_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: 1.6em; + line-height: 1.4em;\" >\r\nOh No! Our napkins are too small! \r\n<br/><br/>\r\nWe + need to have the napkins twice as big and still keep the tablecloth the same + size. What numbers can you change to make that happen?\r\n<br/><br/>\r\n(as + shown in triangles)\r\n</div>\r\n\r\n" + aE5_markdown_instruction: "\r\n<div style=\"color: #7665a0; font-size: 1.6em; + line-height: 1.4em;\" >\r\nLet's pull the look together with some window + decorations!\r\n<br/><br/>\r\nHere is your original code for drawing a line + of napkins. Piece 4 lines together to make a pattern that goes around your + window frame.\r\n</div>\r\n\r\n" + aE6_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; line-height: + 1.4em;\" >\r\nThe guests are going to need something to sit on!\r\n<br/><br/>\r\nThe + artist has an idea to make some fun chairs. How many times do you need to + loop this to draw half of a circle?\r\n</div>" + aE7_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; line-height: + 1.4em;\" >\r\nHow about some streamers?\r\n<br/><br/>\r\nIf you create another + loop like this one, but turn left instead of right, what happens? \r\n\r\nCan + you repeat all of that to draw this wave?\r\n</div>" + aE8_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; line-height: + 1.4em;\" >\r\nThe artist wants to give picture frames as party favors!\r\n<br/><br/>\r\nLet's + loop the code from our streamers four times to create this frame. \r\n<br/><br/>We've + added a special block called `curvy corner` to give you fancy round corners!\r\n</div>" + aEfreeplay_markdown_instruction: "<div style=\"color: #7665a0; font-size: 1.6em; + line-height: 1.4em;\" >\r\n<b>Free Play:</b>\r\nFor a final touch, we need + some ornaments to hang around the house.\r\n<br/><br/>\r\nCan you design a + decoration to spice up the party?\r\n</div>\r\n<br/>\r\n<h4>\r\n<details>\r\n<summary>Need + Ideas?</summary>\r\n<br/>\r\n<br/>\r\nTry making a tablecloth full of diamond + napkins! \r\n<img src=\"https://images.code.org/2c092ea5edbb33405c019110df3f5710-image-1466095499984.43.56.png\" + width=\"200px\"/> \r\n<hr/>\r\n<br/>\r\nMake an ornament! \r\n<img src=\"https://images.code.org/361d2ad667853418a040ec9383505169-image-1466096394561.56.12.png\" + width=\"200px\"/> \r\n<hr/>\r\n\r\n<br/>Make something completely new! \r\n<img + src=\"https://images.code.org/6809a1bd2a364ae7e0ff42745ec1fe1b-image-1466097871045.23.44.png\" + width=\"200px\"/> \r\n<hr/>\r\n\r\n\r\n</details>\r\n</h4>\r\n\r\n" + allthethings data blocks test_markdown_instruction: "Please sign in to test + applab levels (By design, applab levels only work if signed in. Normally, + we make people sign in, but this is only enforceable for a whole script and + would be annoying to do for the allthethings script)." + allthethings design mode elements_markdown_instruction: "Please sign in to + test applab levels (By design, applab levels only work if signed in. Normally, + we make people sign in, but this is only enforceable for a whole script and + would be annoying to do for the allthethings script).\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\n.\r\n\r\nEnd + of instructions that are long." + allthethings level dataTables_markdown_instruction: "Please sign in to test + applab levels (By design, applab levels only work if signed in. Normally, + we make people sign in, but this is only enforceable for a whole script and + would be annoying to do for the allthethings script)." + allthethings_U3 - Simple Drawing - Rectangle Width and Height_markdown_instruction: "# + Drawing Rules\r\n\r\nSo what did you discover on the last level?\r\n\r\n* + What do each of the 4 openings control?\r\n\r\n\t* First Opening - controls + the **location of the rectangle from left to right** - we call this the **x + position**\r\n * Second Opening - controls the **location of the rectangle + from top to bottom** - we call this the **y position**\r\n * Third Opening + - controls the **width** of the rectangle\r\n * Fourth Opening - controls + the **height** of the rectangle\r\n\r\n* What is the size of the drawing area?\r\n\r\n\t* + Width - 400\r\n * Height - 400\r\n\r\n* So where is (0,0) or x = 0 and + y = 0?\r\n\r\n\t* The **upper left corner of the grid!**\r\n\r\n# Do This\r\n\r\nWe + have provided you with code for a rectangle that draws in the upper left corner + when you run the program. Using your new knowledge of the workspace and the + inputs for a rectangle:\r\n\r\n* **Change the width and height of the rectangle + so that it fills the whole drawing area**\r\n* **HINT:** Remember that the + rectangle block is `rect(x, y, width, height)` in that order" + allthethings_embed_video_markdown_instruction: "Siri is a digital assistant + built into Apple's iOS devices, including iPhones and iPads. Watch the advertisement + for Siri, below. \n\n<iframe width=\"637px\" height=\"375px\" src=\"https://www.youtube.com/embed/8ciagGASro0\" + frameborder=\"0\" allowfullscreen></iframe>\n\n<br/>\n__Reflect on the prompts + below:__ \n\n- What types of information does Siri respond to in the video?\n- + What do you think Siri is paying attention to in order to create these answers?\n" + allthethings_moviebot_markdown_instruction: "#Please sign in to test applab + levels (By design, applab levels only work if signed in. Normally, we make + people sign in, but this is only enforceable for a whole script and would + be annoying to do for the allthethings script).\n# Introduction to the Digital + Assistant\r\n\r\n__While digital assistants may seem like magic, they are + just elaborate computer programs that parse, or process, text__ looking for + combinations of words to make decisions about what to reply.\r\n\r\nOver the + next few lessons, __you're going to build up your own digital assistant that + responds \"intelligently\" to a user's question__, by making a decision about + what to reply based on the contents.\r\n\r\nYou'll now __explore a demo digital + assistant__, Movie Bot, that represents the kind of program that you'll build + up to. Try out some of the prompts below and also try your own. You'll quickly + find the limits of what this program can and can't do.\r\n\r\n# Do this\r\n__Run + Movie Bot. In the _'enter your question here'_ input, type each of the following + prompts and hit 'enter' __\r\n- 'help'\r\n- 'What is the best PG comedy + movie ever?'\r\n- 'What PG comedy movie should I watch next?'\r\n- 'Could + you please tell me the best romance movie?'\r\n- 'I waNT To WatCH a MovIE!!!'\r\n- + 'What is the capital of Kentucky?'\r\n- Play around! Ask more questions + of Movie Bot and make a prediction about what logic it's using to reply\r\n" + allthethings_template_backed1_markdown_instruction: "Backed by a template #1. + Please sign in to test applab levels (By design, applab levels only work if + signed in. Normally, we make people sign in, but this is only enforceable + for a whole script and would be annoying to do for the allthethings script). + " + allthethings_template_backed2_markdown_instruction: "Backed by a template #2. + Please sign in to test applab levels (By design, applab levels only work if + signed in. Normally, we make people sign in, but this is only enforceable + for a whole script and would be annoying to do for the allthethings script)." + artistDebugVideo1_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the + water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" + width=\"300\"/>\r\n" + artistLoopsK2_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nNow, use a `repeat` loop to draw this line + five times!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif\" + width=\"300\"/>\r\n" + artistLoopsK2gradek_artist_loops3_markdown_instruction: "<div style=\"color: + #7665a0; font-size: 1.6em; line-height: 1.4em;\" >\r\nNow, use a `repeat` + loop to draw this line five times!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif\" + width=\"300\"/>\r\n" + artistLoopsK3_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nDraw a line eight steps long. This will + become the land for our kingdom!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" + width=\"300\"/>\r\n" + artistLoopsK4_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nNow we need a castle with a draw bridge. Fix + the code so that the bridge lays straight instead of falling down.<br/><br/>\r\n</div>\r\n\r\n<img + src=\"https://images.code.org/84b93e1b9dad3ee52a46c767524d3558-image-1467935697224.gif\" + width=\"300\"/>\r\n" + artistLoopsK5_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nNow we need to fix the top of the castle. + Can you loop the code three times?<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/f418ccba20b7230baba1328143bd0092-image-1467935762464.gif\" + width=\"300\"/>\r\n" + artistLoopsK6_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nSomeone is stuck in the tower! Fix the + stairs to set them free.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/1efb95ca15f66b46145725769d3d279c-image-1467935856461.gif\" + width=\"300\"/>\r\n" + artistLoopsK7_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nThis tower is lovely, what is downstairs? + Build another staircase to find out!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/af040c27be11c3a639e18c440c8a047c-image-1467936046481.gif\" + width=\"300\"/>\r\n" + artistLoopsK8_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nWow! There's a garden over there! Help + fix these stairs so I can get to it.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/bf368872da36217b0d19261fc6b84bf6-image-1467936147116.gif\" + width=\"300\"/>\r\n" + artistLoopsK9_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** Lovely! Let's take a walk + around the garden.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/cb5646ef57f68b47fa6c2762253a7044-image-1467936260174.gif\" + width=\"300\"/>\r\n" + artistLoopsKA_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nThese stones are in the wrong place. Help + me move them so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" + width=\"300\"/>\r\n" + artistLoopsKB_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nLook! It's a theater. Help me set up + the chairs so we can all see the stage.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c4263306ebb0ad1d99fe6f200a790d0c-image-1467936424533.gif\" + width=\"300\"/>\r\n" + artistLoopsKFP_markdown_instruction: "Picture time! Use what you have learned + to draw a picture of what you think the Artist saw on stage.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + beeDebugVideo1_markdown_instruction: "Collect all of the nectar." + collector example_markdown_instruction: "Collect all the gold using the `collect` + block:\r\n\r\n<xml>\r\n <block type=\"collector_collect\"/></xml>" + collectorDebugVideo2_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe + blocks you need are already in the workspace, but not connected. \r\n\r\nPut + these blocks in order to collect all of the gold and solve the puzzle." + collectorSkinVideo1_markdown_instruction: "Move Laurel to the gold, then use + `collect` to pick it up.\r\n\r\nCollect one pile of gold to pass this level." + collectorSkinVideo2_markdown_instruction: "Move Laurel to the gold, then use + `collect` to pick it up.\r\n\r\nCollect one pile of gold to pass this level." + course2_playlab_stage17_11_markdown_instruction: "Create your own story. When + you're done, click Finish to let friends try your story on their phones.\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Who's + there?</strong> - Make characters appear with random images, so no one knows + who's showing up next.</li>\r\n <li><strong>Going on an Adventure</strong> + - Change the background, then have the characters talk about where they are + now. </li>\r\n <li><strong>Pinball</strong> - Make one character + move using the arrow keys (use `when up arrow`, `when down arrow` blocks), + then play random sounds when it collides with other characters on the screen. + </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + courseA_artist_loops10_markdown_instruction: "<div style=\"color: #7665a0; + font-size: 1.6em; line-height: 1.4em;\" >\r\nTime to head back to land. Help + me put down stones so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops11_markdown_instruction: "<div style=\"color: #7665a0; + font-size: 1.6em; line-height: 1.4em;\" >\r\nHelp me build steps to watch + the ship sail away.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/0dfa647dbc835fae09989a0fbfd798c7-image-1470871168220.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops12_markdown_instruction: "The artist saw something funny + in the distance. Draw what you think he saw.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + courseA_artist_loops2_markdown_instruction: "Help the artist draw this line + two times forward.\r\n\r\n![](https://images.code.org/7ddc7b43ef27197559c7defb0af56d03-image-1470776934855.gif)" + courseA_artist_loops3_markdown_instruction: "Our artist is trying to draw a + line five times, but can't get it right. Can you help?\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" + courseA_artist_loops4_markdown_instruction: "Now, use a `repeat` loop to draw + this line five times!\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" + courseA_artist_loops5_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nDraw a line seven steps long. This will + become our horizon.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops6_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nLet's put a nice hill in the back.<br/><br/>\r\n</div>\r\n\r\n<img + src=\"https://images.code.org/bbbd114642d829029fc3b0566a4437e3-image-1477107329933.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops7_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the + water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" + width=\"300\"/>\r\n" + courseA_artist_loops8_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nWe need a ladder up to the boat.<br/>\r\n</div>\r\n<img + src=\"https://images.code.org/6e4dc767e55d11400f35c6680bbfe1e3-image-1470788284437.gif\" + width=\"300\"/>" + courseA_artist_loops9_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** The stairs down to the dock + are broken. Help me fix them.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/53c68133f897895caa0369b4afa3ec3b-image-1470789463684.gif\" + width=\"300\"/>\r\n" + courseA_collector_loops1_markdown_instruction: "**Free Play:** This is Laurel + the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag + blocks into the workspace and try to figure out how to get treasure. Get + at least one item to pass this level." + courseA_collector_loops2_markdown_instruction: "Move Laurel to the treasure, + then use `collect` to pick it up.\r\n\r\nCollect all three piles to pass this + level." + courseA_maze_seq1_markdown_instruction: "*\"Play with these blocks and try + to get me to the bad pig!\"*" + courseA_maze_seq10_markdown_instruction: "**Challenge:** Go around the TNT + to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/fa04813e9451e0bc070af50bc01d4a6b-image-1467932582838.gif\" + width=\"200px\"/>" + courseA_maze_seq11_markdown_instruction: "Time for a shorter puzzle! Move + one way, then another to get the bird to the pig.\r\n\r\n<img src=\"https://images.code.org/c2e2d7ea98a18d899c6de183ce6d82e1-image-1471385293382.gif\" + width=\"200px\"/>\r\n" + courseA_maze_seq12_markdown_instruction: "Get that pig!\r\n\r\n<img src=\"https://images.code.org/f908ff77eb81ee85d405a7ba66cc2986-image-1467933103380.gif\" + width=\"200px\"/>\r\n" + courseA_maze_seq2_markdown_instruction: "*\"A bug! Fix the code to get me to + the pig.\"*\r\n \r\n<img src=\"https://images.code.org/2843193ce2d869ad2f06f0f5b114c9d0-image-1467924400663.gif\" + width=\"200px\"/>" + courseA_maze_seq3_markdown_instruction: "*\"Fix the code to get me to the pig!\"*\r\n\r\n<img + src=\"https://images.code.org/629cddc754f9ad02929f06fc68462e4d-image-1467924800613.gif\" + width=\"200\"/>" + courseA_maze_seq4_markdown_instruction: "*\"Something is not quite right.\"* + \r\n\r\nREMOVE a block to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/dd6d92233199ee0f524caa4051b99275-image-1467920800577.gif\" + width=\"200px\"/>" + courseA_maze_seq5_markdown_instruction: "Try this one yourself from the beginning.\r\n\r\n<img + src=\"https://images.code.org/43001078c4df6feea1a6edf025192d85-image-1467929743355.gif\" + width=\"200px\"/>" + courseA_maze_seq6_markdown_instruction: "Move one way, then another to get + the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/0b324bc0f684f7a22171acd8b38c8d9f-image-1467931807767.gif\" + width=\"200px\"/>" + courseA_maze_seq7_markdown_instruction: "Figure out what is missing and then + add blocks to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/b9803e12911694d8bb18bd55304f85d5-image-1467932006704.gif\" + width=\"200px\"/>" + courseA_maze_seq8_markdown_instruction: "Solve this level and get the bird + to the pig!\r\n\r\n<img src=\"https://images.code.org/1eb9139e2887083dc80b98d9aeb3bef2-image-1467932105884.gif\" + width=\"200px\"/>" + courseA_maze_seq9_markdown_instruction: "**Challenge:** Debug this level by + adding blocks to get the bird to the pig!\r\n\r\n<img src=\"https://images.code.org/810d7189bcd0767d37ea82319b4c678c-image-1467932445247.gif\" + width=\"200px\"/>" + courseA_playLab_events3_markdown_instruction: "Help Jorge the Dog get moving + by connecting the ![](https://images.code.org/b3d6215901969328333d6393f8101c5b-image-1478142333199.png) + block to the ![](https://images.code.org/4f2130b2a3053695414a02c3d39ef864-image-1478143461271.png) + event block that is already in the workspace." + courseA_playLab_events4_markdown_instruction: "Now, get Jorge to move right + when the ![](https://images.code.org/b99365eb23280f158e6ef570fe1c8a76-image-1478145132820.png) + button is clicked." + courseA_playLab_events5_markdown_instruction: "Add events to have Jorge move + up and down when the ![](https://images.code.org/379493b95d158b273f1424538b1c635a-image-1478145402316.png) + and ![](https://images.code.org/f490d78efd81c21ab74286aefe7af097-image-1478145385132.png) + buttons are pressed." + courseB_artist_loops10_markdown_instruction: "Use what you have learned to + draw a picture of what you think the artist saw when he got home.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + courseB_artist_loops6_markdown_instruction: "Behind the bushes there is a beautiful + vine full of flowers. Can you climb the vine and see where it goes?" + courseB_artist_loops7_markdown_instruction: "**Challenge:** It's a hidden + garden! Let's walk around." + courseB_collector_loops1_markdown_instruction: "**Free Play:** This is Laurel + the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag + blocks into the workspace and try to figure out how to get treasure. Get + at least one item to pass this level." + courseB_collector_loops2_markdown_instruction: "Move Laurel to the treasure, + then use `collect` to pick it up.\r\n\r\nCollect all four piles to pass this + level." + courseB_collector_loops3_markdown_instruction: "How can Laurel collect all + five piles of treasure using only one `E -->` block?" + courseB_collector_loops3_predict1_markdown_instruction: "How can Laurel collect + all five piles of gold using only one `E -->` block?" + courseB_collector_prog3_markdown_instruction: "How can Laurel collect all five + piles of gold using only one `E -->` block?" + courseB_maze_seq9_markdown_instruction: "**Challenge:** Move around the TNT + to get the bird to the pig." + courseB_maze_seqCold_markdown_instruction: "**Challenge:** Debug this level + by adding blocks to get the bird to the pig!" + courseB_playLab_events1_markdown_instruction: "This game is called \"Play Lab\". \r\n\r\n<br/>\r\nSee + if you can figure out what each block does." + courseB_playlab_events3_markdown_instruction: "Use an event to make Daisy the + Dragon switch to a random ![](https://images.code.org/c365e065614fea592612264f33624c09-image-1475698889081.17.53.png) + mood when you click on her.\r\n\r\n" + courseB_playlab_events4_markdown_instruction: "Knight time! \r\n\r\nAdd an + event so that the knight moves toward the dragon when the left arrow is clicked." + courseB_playlab_events6_markdown_instruction: "Help your knight get all of + the flags!\r\n\r\nTo do this, you'll need to add events to help the knight + move up and down." + courseB_playlab_events7_markdown_instruction: "Make this game fun by setting + the knight to vanish when he runs into the dragon! \r\n\r\nPlay a sound when + they collide to make it feel more real." + courseC_PlayLab_events8_markdown_instruction: "Can you have Waddles (actor + 1) say \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen + you're done, play the game to make that happen.\r\n\r\n![](https://images.code.org/a634f249021651f60a1acf37bf78d07d-image-1475342557950.gif)" + courseC_artist_prog1_markdown_instruction: "*\"Hi, I'm an artist. You can + write code to make me draw almost anything.\"*\r\n\r\nPlay with the blocks + in the toolbox to see what they do!" + courseC_artist_prog2_markdown_instruction: "*\"Let's make a cage for my pet + monster!\"*\r\n\r\nDrag blocks onto the screen to have the artist draw over + the grey lines in the picture. \r\n(Each line is 100 pixels long)" + courseC_artist_prog3_markdown_instruction: "*\"This spaceship needs a window!\"*\r\n\r\nEach + side of the inner square is 100 pixels and all of the angles are 90 degrees." + courseC_artist_prog4_markdown_instruction: "*\"Oh no! Starla's pet alien + just flew away! Let's help the spacewoman!\"*\r\n\r\nFinish Starla's rocket + so she can chase her pet. \r\n(Each side of the triangle is 100 pixels long + and has 120 degree outer angles.)" + courseC_artist_prog5_markdown_instruction: "*\"Maybe we should make a tag for + each of our pets in case they get lost!\"*\r\n\r\nFinish this tag by drawing + a rectangle around the outside. \r\n(The long sides are 200 pixels each and + the short sides are each 100 pixels)" + courseC_artist_prog6_markdown_instruction: "*\"Now a tag for Belle!\"*\r\n\r\nDraw + this diamond with 200 pixel sides." + courseC_artist_prog7_markdown_instruction: "**Challenge:** This tag is a special + one! \r\n\r\nCan you figure out how to draw the outline? \r\n(The long side + is 150 pixels and each of the short sides are 75 pixels.)" + courseC_artist_prog8_markdown_instruction: "One more tag. This is a triangle + for Pi. \r\n(Each side is 150 pixels)" + courseC_collector_prog1_markdown_instruction: "**Free Play:** This is Laurel + the Adventurer! Move her around and get as much treasure as you can.\r\n\r\nDrag + blocks into the workspace and try to figure out how to get treasure. Get + at least one item to pass this level." + courseC_collector_prog2_markdown_instruction: "Move Laurel to the treasure, + then use `collect` to pick it up." + courseC_collector_prog3_markdown_instruction: "*\"Sequence matters!\"* \r\n\r\nThe + blocks you need are already in the workspace, but not connected. \r\nOrder + these blocks to collect the treasure and solve the puzzle." + courseC_collector_prog4_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe + blocks you need are already in the workspace, but not connected. \r\n\r\nPut + these blocks in order to collect all of the treasure and solve the puzzle." + courseC_collector_prog5_markdown_instruction: "*\"Help me collect each bit + of treasure!\"*\r\n\r\nThese blocks are in the wrong order. Can you fix them?" + courseC_collector_prog6_markdown_instruction: "*\"Help me collect all of the + treasure!\"*\r\n\r\nThese blocks are in the wrong order. Reorder them to collect + all of the treasure." + courseC_collector_prog7_markdown_instruction: "**Challenge:** *\"What is going + on here?\"*\r\n\r\nEven if we put these in the right order, there will still + be some missing. \r\nUse blocks from the toolbox to collect all of the treasure." + courseC_collector_prog8_markdown_instruction: "*\"Keep up the good work! Help + me collect all of the treasure.\"*" + courseC_collector_prog9_markdown_instruction: "*\"Let's get all of the treasure!\"*" + courseC_collector_progA_markdown_instruction: "Help Laurel collect all of the + treasure." + courseC_collector_progB_markdown_instruction: "You're almost done! \r\n\r\nCollect + as many coins as you can to finish the stage!" + courseC_harvester_loops1_markdown_instruction: "Loops can be used to repeat + more than moves. \r\n\r\nUse loops to collect all of the pumpkins." + courseC_harvester_loops10_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops11_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops2_markdown_instruction: "Can you combine two different + loops to move toward the pumpkins, then collect them all?" + courseC_harvester_loops3_markdown_instruction: "Collect all of the pumpkins." + courseC_harvester_loops4_markdown_instruction: "Now there is corn growing, + too!\r\n\r\nCollect all of the corn and all of the pumpkins." + courseC_harvester_loops5_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops6_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops7_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_harvester_loops8_markdown_instruction: "**Challenge:** Collect all + of the corn and all of the pumpkins.\r\n\r\nYou can complete this challenge + any way you want, but it will either take a lot of work or a lot of thinking!" + courseC_harvester_loops9_markdown_instruction: "Collect all of the corn and + all of the pumpkins." + courseC_maze_debugging1_markdown_instruction: "This code isn't quite right! \r\n\r\nFix + the code to help get Skrat get to the acorn." + courseC_maze_debugging3_markdown_instruction: "Something is not quite right. + \r\n\r\nRemove blocks to get Skrat to the acorn!" + courseC_maze_loops2_markdown_instruction: "Suddenly, a magical block appears! \r\nWith + the `repeat` block, you can loop code over and over.\r\n\r\nCan you get the + bird to the pig by creating a loop that uses only one `move forward` block + inside of a `repeat`?" + courseC_maze_loops2_predict1_markdown_instruction: "Suddenly, a magical block + appears! \r\nWith the `repeat` block, you can loop code over and over.\r\n\r\nCan + you get the bird to the pig by creating a loop that uses only one `move forward` + block inside of a `repeat`?" + courseC_maze_loops3_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nSolve + this puzzle by creating a loop!" + courseC_maze_loops4_markdown_instruction: "In this puzzle, two `repeat` loops + will help you get the bird to the pig with the fewest number of blocks!" + courseC_maze_loops5_markdown_instruction: "*\"Get me to the pig as quickly + as possible!\"*" + courseC_maze_loops6_markdown_instruction: "*\"This pig is ruffling my feathers!\"*\r\n\r\nLoops + even work with more than one block inside! Can you loop this sequence?" + courseC_maze_loops7_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nUse + what you learned in other puzzles!" + courseC_maze_loops8_markdown_instruction: "**Challenge:** Combine ideas from + the last few puzzles to complete this level." + courseC_maze_programming1_markdown_instruction: "For this puzzle, drag all + of the blocks together and click \"Run\" to watch it go!" + courseC_maze_programming2_markdown_instruction: "Drag an extra `move forward` + block out of the toolbox to finish your code." + courseC_maze_programming3_markdown_instruction: "*\"This pig is ruffling my + feathers.\"*\r\n\r\nThere is one extra block that is going to cause the bird + to crash. \r\nThrow it away by dragging it back to the toolbox." + courseC_maze_programming4_markdown_instruction: "*\"Trace the path and lead + me to the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" + courseC_maze_programming5_markdown_instruction: "*\"Follow this path to get + me to the pig!\"*\r\n\r\nAvoid the TNT." + courseC_maze_programming6_markdown_instruction: "*\"Keep calm and help me find + the bad pig. Otherwise I might get angry!\"*\r\n\r\nGet the bird to the pig + and avoid the TNT." + courseC_maze_programming7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** + This code has a lot of bugs. You'll need to remove some blocks and add others." + courseC_maze_programming8_markdown_instruction: "*\"Keep calm and help me find + the bad pig.\"*" + courseC_maze_programming8_predict1_markdown_instruction: "*\"Keep calm and + help me find the bad pig.\"*" + courseC_maze_programming9_markdown_instruction: "*\"Now, help me sneak up on + the pig any way you want to!\"*" + courseC_puppy_loops8_markdown_instruction: "**Challenge:** Combine ideas from + the last few puzzles to complete this level." + courseC_puppy_loops8courseC_maze_loops8_markdown_instruction: "**Challenge:** + Combine ideas from the last few puzzles to complete this level." + courseD_artist_binary1_markdown_instruction: "We've provided you with a grid + of \"pixels\" that you can walk through and make designs by turning on only + certain squares.\r\n\r\nUse the blocks below to have the artist draw \"01010101\" + in binary in the first row." + courseD_artist_binary2_markdown_instruction: "Here's a function that takes + a binary string of 1's and 0's and instructs the artist to follow them from + left to right, top to bottom. \r\n<hr/>\r\nThe artist will fill-in the squares + when it sees a 1 and ignore the square when it sees a 0. \r\n<hr/>\r\n**Run + this code to see how the artist uses binary to draw this pattern.**" + courseD_artist_functions10_markdown_instruction: "This time, use lines of 8 + hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the 6 + times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + courseD_artist_functions2_markdown_instruction: "Functions let you define new + blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a + function called `draw a square`. This time, use the `draw a square` function + to create the glasses. \r\n<hr/>\r\n\r\nThe squares are 75 pixels apart." + courseD_artist_functions3_markdown_instruction: "We will come back to functions + shortly. Let's take a break to practice making this star. \r\n\r\nYou can + make this drawing by adding a repeat block." + courseD_artist_functions4_markdown_instruction: "Now that you can draw a star, + try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels long\r\n- + Turn 45 degrees between branches\r\n- Jump 100 pixels between each star" + courseD_artist_functions5_markdown_instruction: "When is drawing three stars + harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw + only those three stars to finish this puzzle." + courseD_artist_functions6_markdown_instruction: "You are doing great! \r\n\r\nMake + this window by drawing a square, then turning 90 degrees before drawing another, + and so on." + courseD_artist_functions7_markdown_instruction: "Let's take the code for the + window and add it to function `draw a window`. Now, we can call the function + any time we need to draw a window without having to write the code again. + \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" + width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw + a window` and calling it five times. Watch out for the door!\r\n\r\n- The + top windows are 50 pixels away from each other. \r\n- The bottom windows + are 100 pixels below the top set." + courseD_artist_functions8_markdown_instruction: "**Challenge:** Create as many + functions as you think you need to make this drawing of 50 pixel squares." + courseD_artist_functions9_markdown_instruction: "Create this image using only + the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + courseD_artist_nestedLoops1a_markdown_instruction: "Now loop the triangle 6 + times. \r\n\r\nAfter each triangle, you'll need to turn 60 degrees before + drawing the next. " + courseD_artist_nestedLoops2_markdown_instruction: "This time, complete the + puzzle with the fewest number of blocks possible.\r\n\r\nAfter each triangle, + you'll need to turn 60 degrees before drawing the next.\r\nSee how much easier + this is with **nested loops**?" + courseD_artist_nestedLoops4_markdown_instruction: "Great! Do the same thing + with these circles. \r\n\r\n- Each circle is made by moving 1 pixel before + turning 1 degree, 360 times.\r\n- Each circle begins just 50 pixels from where + the last one ended" + courseD_artist_nestedLoops5_markdown_instruction: "What happens if you also + turn 90 degrees between circles?\r\n\r\n(To get this image, you still need + to jump 50 pixels between circles)" + courseD_artist_nestedLoops7_markdown_instruction: "Use what you've learned + to make this drawing.\r\n\r\n- The squares each have 100 pixel sides and 90 + degree angles\r\n- You will need to turn 60 degrees between each square" + courseD_artist_nestedLoops8_markdown_instruction: "Using what you have learned + in the last couple of puzzles, build this image from the beginning.\r\n\r\n- + Each hexagon has 50 pixel sides and 60 degree angles" + courseD_artist_nestedLoops9_markdown_instruction: "**Challenge:** Can you figure + out how to make a picture like this?\r\n\r\n- Both shapes have 50 pixel sides" + courseD_artist_nestedLoops9_predict1_markdown_instruction: "**Challenge:** + Can you figure out how to make a picture like this?\r\n\r\n- Both shapes have + 50 pixel sides" + courseD_artist_nestedLoopsFP_markdown_instruction: "Now it's your turn. Take + the skills you have learned and make something that you love!\r\n\r\nNeed + an idea? Try to make one of these:\r\n\r\n<img src=\"https://images.code.org/9257cbf61f238f5a749a949059731934-image-1478732674615.02.25.png\" + width=\"200px\"/><img src=\"https://images.code.org/31a85d4e5be5209240195d34b17a177b-image-1478732674613.32.53.png\" + width=\"200px\"/><img src=\"https://images.code.org/f654f1512860c6c8cf6795c961a8959c-image-1478732674616.02.58.png\" + width=\"200px\"/>\r\n" + courseD_artist_ramp11_markdown_instruction: "Great! Now let's make a square + using Artist! The blocks are a little different, but the idea is the same.\r\n<hr/>\r\nEach + side of the square has a length of 200 pixels, and you will need to turn 90 + degrees to make each angle." + courseD_artist_ramp12_markdown_instruction: "Use what you've learned to draw + this triangle inside of a square.\r\n<hr/>\r\nThe sides are each 200 pixels + long. You will need to turn 90 degrees to make the square and 120 degrees + to make the triangle." + courseD_bee_conditionals1_markdown_instruction: "*\"This cloud is blocking + my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. If there's + a flower, get nectar." + courseD_bee_conditionals10_markdown_instruction: "Conditionals can be helpful, + even when you know exactly what is in each spot!\r\n\r\nCollect all of the + nectar and make all of the honey." + courseD_bee_conditionals1_predict1_markdown_instruction: "*\"This cloud is + blocking my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. + If there's a flower, get nectar." + courseD_bee_conditionals2_markdown_instruction: "More clouds! \r\n\r\nCheck + underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + courseD_bee_conditionals3_markdown_instruction: "You can only collect nectar + from flowers, but you can check any space to see if there is a flower." + courseD_bee_conditionals4_markdown_instruction: "In this puzzle, we know that + every flower has exactly one nectar, but the flowers aren't spaced evenly.\r\n\r\nGet + all of the nectar using as few blocks as possible." + courseD_bee_conditionals6_markdown_instruction: "*\"Now I just want to make + honey.\"*\r\n\r\nSome of these clouds might have honeycombs under them. Be + sure to check if a honeycomb is hiding behind each cloud!" + courseD_bee_conditionals7_markdown_instruction: "Sometimes a cloud covers a + flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block to + collect nectar at flowers and make honey at honeycomb." + courseD_bee_conditionals7_predict2_markdown_instruction: "Sometimes a cloud + covers a flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` + block to collect nectar at flowers and make honey at honeycomb." + courseD_bee_conditionals8_markdown_instruction: "**Challenge:** There will + be either a flower or a honeycomb under each of those clouds!\r\n\r\nCollect + nectar if there is a flower.\r\nOtherwise, make honey (because there is a + honeycomb)." + courseD_bee_conditionals9_markdown_instruction: "Collect all of the nectar + or make all the honey. You can only collect nectar from flowers and make honey + from honeycombs. Check any space to see if there is a flower or honeycomb." + courseD_bee_debugging1_markdown_instruction: "*\"These blocks are really bugging + me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." + courseD_bee_debugging2_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix + the error(s) to collect all of the nectar." + courseD_bee_debugging3_markdown_instruction: "*\"These blocks are really bugging + me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of + the honey." + courseD_bee_debugging4_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix + the error(s) to make all of the honey." + courseD_bee_debugging5_markdown_instruction: "**Challenge:** *\"This puzzle + is making me loopy!\"*\r\n\r\nAll of the commands that you need are already + here...now use your debugging skills to figure out how to solve this puzzle." + courseD_bee_debugging6_markdown_instruction: "**Challenge:** Fix the errors + to collect all of the nectar and make all of the honey." + courseD_bee_debugging7_markdown_instruction: "*\"Such a sticky situation!\"*\r\n\r\nHelp + the bee find his mistakes." + courseD_bee_debugging8_markdown_instruction: "*\"So many lovely flowers!\"*\r\n\r\nHelp + the bee fix the code to get all the nectar." + courseD_bee_debugging9_markdown_instruction: "*\"It's nectar-topia!\"*\r\n\r\nHelp + the bee fix the code to get all the nectar." + courseD_bee_nestedLoops1_markdown_instruction: "*\"This is going to **BEE** + great!\"**\r\n\r\nHelp the bee collect all of the nectar." + courseD_bee_nestedLoops2_markdown_instruction: "This time, help the bee collect + all of the nectar using as few blocks as possible." + courseD_bee_nestedLoops2_predict1_markdown_instruction: "This time, help the + bee collect all of the nectar using as few blocks as possible." + courseD_bee_nestedLoops3_markdown_instruction: "*\"Can you BEE-lieve all of + these flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " + courseD_bee_nestedLoops5_markdown_instruction: "Collect all of the nectar from + each flower and make honey at the honeycomb. " + courseD_bee_nestedLoops6_markdown_instruction: "Make all of the nectar." + courseD_bee_nestedLoops7_markdown_instruction: "**Challenge:** Figure out how + to get all of the nectar using only the blocks available." + courseD_bee_nestedLoops8_markdown_instruction: "Collect all of the nectar from + each flower and make honey at the honeycomb. " + courseD_bee_nestedLoops9_markdown_instruction: "Make all of the honey." + courseD_bee_nestedLoops9_predict2_markdown_instruction: "Make all of the honey." + courseD_collector_ramp10_markdown_instruction: "Take the same path as before, + but this time collect all of the treasure as you find it.\r\n" + courseD_collector_ramp8_markdown_instruction: "This puzzle is a lot like the + last one, but now it stars Laurel the Adventurer!\r\n<hr/>\r\n\r\nTake the + same path as before, but this time, use a repeat loop to collect treasure + when you get to it.\r\n" + courseD_collector_ramp9_markdown_instruction: "Take the same path as before, + but this time collect all of the treasure as you find it.\r\n" + courseD_debugging_1_markdown_instruction: "*\"These blocks are really bugging + me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." + courseD_debugging_2_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix + the error(s) to collect all of the nectar." + courseD_debugging_3_markdown_instruction: "*\"These blocks are really bugging + me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of + the honey." + courseD_debugging_4_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix + the error(s) to make all of the honey." + courseD_debugging_5_markdown_instruction: "**Challenge:** *\"This puzzle is + making me loopy!\"*\r\n\r\nAll of the commands that you need are already here...now + use your debugging skills to figure out how to solve this puzzle." + courseD_debugging_6_markdown_instruction: "**Challenge:** Fix the errors to + collect all of the nectar and make all of the honey." + courseD_farmer_condLoops1_markdown_instruction: "*\"Corn you help me harvest + today?\"*\r\n\r\nUse conditionals to make sure that you pick all of the corn, + but don't disturb the stalks where nothing is growing yet." + courseD_farmer_condLoops2_markdown_instruction: "*\"Lettuce collect both crops + from this row!\"*\r\n\r\nHelp the farmer collect both corn and lettuce from + the field." + courseD_farmer_condLoops4_markdown_instruction: "*\"Gosh! Now the crops are + growing in clusters!\"* \r\n\r\nHelp the farmer pick all of the lettuce in + each cluster before moving on to the next bunch." + courseD_farmer_condLoops5_markdown_instruction: "*\"What a bountiful crop!\"*\r\n\r\nThis + field has clusters of corn, lettuce, and pumpkins all growing together. Can + you collect them all?" + courseD_farmer_condLoops6_markdown_instruction: "*\"Let's take this one step + further!\"*\r\n\r\nCan you figure out how to pick the pumpkin? Make sure + to collect all of the corn along the way!" + courseD_farmer_condLoops7_markdown_instruction: "**Challenge:** Collect all + of the corn and lettuce, then pick the pumpkin." + courseD_farmer_condLoops8_markdown_instruction: "Collect all of the corn and + lettuce, then pick the pumpkin." + courseD_farmer_condLoops9_markdown_instruction: "Collect all of the corn and + lettuce, then pick the pumpkin." + courseD_farmer_condLoops9_predict1_markdown_instruction: "Collect all of the + corn and lettuce, then pick the pumpkin." + courseD_farmer_conditionals1_markdown_instruction: "*\"Hi, I'm a farmer. I + need your help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove + to the pile of dirt and use the `remove` block to remove it." + courseD_farmer_conditionals3_markdown_instruction: "*\"Move to the pile of + dirt and tell me how many shovelfuls to remove.\"*\r\n\r\nUse as few blocks + as possible to solve this puzzle." + courseD_farmer_conditionals4_markdown_instruction: "*\"I don't know how much + dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using + a `while` loop." + courseD_farmer_conditionals6_markdown_instruction: "Look at all of those holes! Each + one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop + to easily fill them all!" + courseD_farmer_conditionals8_markdown_instruction: "**Challenge:** Fill all + of these holes using as few blocks as possible. " + courseD_farmer_while1_markdown_instruction: "*\"Hi, I'm a farmer. I need your + help to flatten the field on my farm so it's ready for planting!\"* \r\n\r\nMove + to the pile of dirt and use the `remove` block to remove it." + courseD_farmer_while3_markdown_instruction: "*\"Move to the pile of dirt and + tell me how many shovelfuls to remove.\"*\r\n\r\nUse as few blocks as possible + to solve this puzzle." + courseD_farmer_while4_markdown_instruction: "*\"I don't know how much dirt + is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile using a + `while` loop." + courseD_farmer_while4_predict1_markdown_instruction: "*\"I don't know how + much dirt is in this pile!\"*\r\n\r\nHelp the farmer remove this entire pile + using a `while` loop." + courseD_farmer_while6_markdown_instruction: "Look at all of those holes! Each + one needs a different amount of dirt. \r\n\r\nYou can use the `while` loop + to easily fill them all!" + courseD_farmer_while8_markdown_instruction: "**Challenge:** Fill all of these + holes using as few blocks as possible. " + courseD_maze_nestedLoops3_markdown_instruction: "*\"Zombie hungry!\"*\r\n\r\nGet + the zombie to the sunflower using the fewest number of blocks possible." + courseD_maze_nestedLoops4_markdown_instruction: "Get the zombie to the sunflower + using the fewest blocks possible! " + courseD_maze_nestedLoops6_markdown_instruction: "*\"Must eat sunflower!\"*\r\n\r\nGet + the zombie to the sunflower using only the blocks available." + courseD_maze_ramp1_markdown_instruction: "For this puzzle, drag all of the + blocks together and click \"Run\" to watch it go!" + courseD_maze_ramp2_markdown_instruction: "Drag an extra `move forward` block + out of the toolbox to finish your code." + courseD_maze_ramp3_markdown_instruction: "*\"This pig is ruffling my feathers.\"*\r\n\r\nThere + is one extra block that is going to cause the bird to crash. \r\nThrow it + away by dragging it back to the toolbox." + courseD_maze_ramp4_markdown_instruction: "*\"Trace the path and lead me to + the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" + courseD_maze_ramp5_markdown_instruction: "*\"Follow this path to get me to + the pig!\"*\r\n\r\nAvoid the TNT." + courseD_maze_ramp6_markdown_instruction: "*\"Keep calm and help me find the + bad pig. Otherwise I might get angry!\"*\r\n\r\nWhen you have several blocks + in a row, try moving them inside of a `repeat` loop. This will do the same + thing with less code!" + courseD_maze_ramp7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** + Use what you've learned to get the bird to the pig!" + courseD_maze_until10_markdown_instruction: "Help the zombie get to the sunflower." + courseD_maze_until10_predict2_markdown_instruction: "Help the zombie get to + the sunflower." + courseD_maze_until2_markdown_instruction: "Now, use the `repeat until` loop + to do the same thing without specifying how many times to move forward and + turn." + courseD_maze_until4_markdown_instruction: "*\"Dear person. Me zombie. Me hungry. + Must... get... to sunflower...\"*\r\n\r\nCan you get the zombie to the sunflower + using only the blocks that are available?" + courseD_maze_until5_markdown_instruction: "Use the `if` block to help the zombie + decide when to turn, then get the zombie to the sunflower." + courseD_maze_until6_markdown_instruction: "Help the zombie get to the sunflower." + courseD_maze_until7_markdown_instruction: "Help the zombie get to the sunflower." + courseD_maze_until8_markdown_instruction: "Help the zombie get to the sunflower." + courseD_maze_until9_markdown_instruction: "**Challenge:** Avoid the chompers + and help the zombie get to the sunflower." + courseD_playLab_cond1_markdown_instruction: "To start our game, Pirate Pegleg + (actor 1) needs to be able to get around in all directions. Connect the + blocks to the correct events to get Pegleg moving.\r\n\r\nGet Pegleg to the + dragon to solve this puzzle." + courseD_playLab_cond2_markdown_instruction: "Time to add points! Give Pegleg + (actor 1) a point when he makes it to the dragon. " + courseD_playLab_cond3_markdown_instruction: "It's time to use what we've + learned about conditionals to make this game amazing. This challenge has two + parts:\r\n\r\n 1) Use a `repeat forever` loop to make the dragon (actor 2) + change between random emotions every second. \r\n \r\n 2) Add code so that + when Pegleg gets to the dragon, he gets two points *if* the dragon is happy. + Otherwise, he should get only one point added to his score." + courseD_playLab_cond4_markdown_instruction: "This is about to get interesting!\r\n\r\nAdd + some code so that the ninja (actor 3) starts chasing Pegleg as soon as the + game begins. End the game as a loss if the ninja catches him." + courseD_playLab_cond5_markdown_instruction: "Now we need a way to win.\r\n\r\nAdd + a `repeat forever` loop that continuously checks **if** the score is greater + than 5, then ends the game as a **win** when it is." + courseD_playLab_cond6_markdown_instruction: "Wow, this game is hard to win!\r\n\r\nLet's + customize this game to make it more fun. This challenge has three parts:\r\n<hr/>\r\n\r\n1) Slow + the ninja down before you set him to chase the pirate. \r\n\r\n2) Use a + `repeat forever` loop to check to see if the pirate is in the \"safe zone\" + beneath the line of octopuses (greater than 225 pixels down). If he is, set + the ninja to **flee** the pirate. Otherwise, set the ninja to **chase** the + pirate. \r\n\r\n3) We don't want the pirate to stay in the \"safe zone\" + too long! Add code to the `if` statement above so that if the pirate is in + the safe zone, the program will wait one second, then deduct a point as long + as he stays beneath the octopus line." + courseD_playLab_cond6cloneForTest_markdown_instruction: "Can we make this work?" + courseE_artist_concept1_markdown_instruction: "Recreate this image. \r\n\r\n- + The hexagons have sides of 50 pixels\r\n- The hexagons are 100 pixels apart\r\n- + The pen widths of the hexagons are 1 pixel, 4 pixels, and 8 pixels." + courseE_artist_concept4_markdown_instruction: "Recreate this drawing using + 13 blocks or fewer." + courseE_artist_functions1_markdown_instruction: "*\"Me zombie artist. Me love + drawing!\"*\r\n\r\nHelp the zombie draw glasses using squares with sides of + 100 pixels. \r\nThe bridge between the glasses is 75 pixels long.\r\n\r\n" + courseE_artist_functions10_markdown_instruction: "This time, use lines of 8 + hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the side + 6 times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + courseE_artist_functions2_markdown_instruction: "Functions let you define new + blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a + function called `draw a square`. This time, use the `draw a square` function + to create the glasses. \r\n<hr/>\r\n\r\nThe squares are 75 pixels apart." + courseE_artist_functions3_markdown_instruction: "We will come back to functions + shortly. Let's take a break to practice making this star. \r\n\r\nYou can + make this drawing by adding a repeat block." + courseE_artist_functions4_markdown_instruction: "Now that you can draw a star, + try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels long\r\n- + Turn 45 degrees between branches\r\n- Jump 100 pixels between each star" + courseE_artist_functions5_markdown_instruction: "When is drawing three stars + harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw + only those three stars to finish this puzzle." + courseE_artist_functions6_markdown_instruction: "You are doing great! \r\n\r\nMake + this window by drawing a square, then turning 90 degrees before drawing another, + and so on." + courseE_artist_functions7_markdown_instruction: "Let's take the code for the + window and add it to function `draw a window`. Now, we can call the function + any time we need to draw a window without having to write the code again. + \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" + width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw + a window` and calling it five times. Watch out for the door!\r\n\r\n- The + top windows are 50 pixels away from each other. \r\n- The bottom windows + are 100 pixels below the top set." + courseE_artist_functions8_markdown_instruction: "**Challenge:** Did you know + that you can call functions from *inside* other functions?!\r\n\r\nCreate + as many functions as you think you need to make this drawing of 50 pixel squares." + courseE_artist_functions9_markdown_instruction: "Create this image using only + the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + courseE_artist_functions_predict1_markdown_instruction: "Here is a puzzle that + uses a function that we have defined. \r\n" + courseE_artist_ramp11_markdown_instruction: "Great! Now let's make a square + using Artist! The blocks are a little different, but the idea is the same.\r\n<hr/>\r\nEach + side of the square has a length of 200 pixels, and you will need to turn 90 + degrees to make each angle." + courseE_artist_ramp12_markdown_instruction: "Use what you've learned to draw + this triangle inside of a square.\r\n<hr/>\r\nThe sides are each 200 pixels + long. You will need to turn 90 degrees to make the square and 120 degrees + to make the triangle." + courseE_bee_concept1_markdown_instruction: "*\"Can you BEE-lieve all of these + flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " + courseE_bee_concept5_markdown_instruction: "Can you help the bee collect the + nectar from the flowers? \r\n\r\nYou can only collect nectar from flowers, + but you can check any space to see if there is a flower." + courseE_bee_functions10_markdown_instruction: "*\"Show me the HONEY!\"*\r\n\r\nSolve + this function by creating a function to turn, move forward and make all of + the honey, then return the bee to where it started and turn back." + courseE_bee_functions2_markdown_instruction: "Functions are blocks of code + that perform a task. \r\n\r\nUse the `get 2 nectar` function to collect the + nectar from each flower." + courseE_bee_functions3_markdown_instruction: "Build the `get 5` function to + use in this puzzle." + courseE_bee_functions4_markdown_instruction: "The `move and get nectar` function + turns the bee, collects nectar, and then returns the bee to where it started. \r\n\r\nUse + the `move and get nectar` function to collect all of the nectar." + courseE_bee_functions8_markdown_instruction: "**Challenge:** These flowers + can have a different amount of nectar each time you run the puzzle. \r\n\r\nCreate + a function that collects all of the nectar from each flower." + courseE_collector_ramp10_markdown_instruction: "Take the same path as before, + but this time collect all of the treasure as you find it.\r\n" + courseE_collector_ramp8_markdown_instruction: "This puzzle is a lot like the + last one, but now it stars Laurel the Adventurer!\r\n<hr/>\r\n\r\nTake the + same path as before, but this time, use a repeat loop to collect treasure + when you get to it.\r\n" + courseE_collector_ramp9_markdown_instruction: "Take the same path as before, + but this time collect all of the treasure as you find it.\r\n" + courseE_farmer_concept4_markdown_instruction: "Now let's go one level deeper! + We've nested that whole block of code into another loop, but you need to + get the artist back in place to draw the next line. Which of these code blocks + can you place at the end of the outermost loop to draw the whole grid?" + courseE_farmer_functions1_markdown_instruction: "*\"Have we met before? I'm + the farmer!\"*\r\n\r\nHelp the farmer get to the pumpkin and pick it." + courseE_farmer_functions10b_markdown_instruction: "Figure out which function + to use and which one to delete, then solve this puzzle!" + courseE_farmer_functions11_predict_markdown_instruction: "Figure out which + function to use and which one to delete, then solve this puzzle!" + courseE_farmer_functions1a_markdown_instruction: "*\"Oooh, veggies are cropping + up everywhere!\"*\r\n\r\nNow help the farmer pick the corn, lettuce, **and** + pumpkin." + courseE_farmer_functions2a_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nWe're + going to check lots of squares for crops in the next few puzzles. Let's + move everything into a function to make it easier." + courseE_farmer_functions2aALT_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nWe're + going to check lots of squares for crops in the next few puzzles. Let's + move everything into a function to make it easier." + courseE_farmer_functions2b_markdown_instruction: "Help the farmer pick the + corn, lettuce, and pumpkin." + courseE_farmer_functions3b_markdown_instruction: "*\"Oooh, veggies are cropping + up everywhere!\"*\r\n\r\nNow help the farmer pick the corn, lettuce, **and** + pumpkin." + courseE_farmer_functions3c_markdown_instruction: "*\"I feel so functional!\"*\r\n\r\nIt + seems silly to write that much code twice. Which set of blocks helps the + farmer check for produce and pick it when it is available? Drag that code + into a function, then call your function from inside the `while path ahead` + loops (after the `move forward` block)." + courseE_farmer_functions4b_markdown_instruction: "Use your new function to + solve this puzzle." + courseE_farmer_functions5b_markdown_instruction: "*\"They're multiplying!\"*\r\n\r\nThe + crops are now growing in clusters. Add some new `while` loops to your function + to make sure you get all of the produce." + courseE_farmer_functions5c_markdown_instruction: "Your function will come in + handy here." + courseE_farmer_functions6b_markdown_instruction: "Pick all of the produce." + courseE_farmer_functions6c_markdown_instruction: "What do you need to add this + program to collect all of the produce?" + courseE_farmer_functions7b_markdown_instruction: "Make a second function that + lets the farmer get all of the produce down a path, then brings her back to + where she began." + courseE_farmer_functions8b_markdown_instruction: "**Challenge:** Get the farmer + to the pumpkin and collect all of the lettuce and corn along the way. " + courseE_farmer_functions9b_markdown_instruction: "Collect all of the produce + to finish this stage." + courseE_maze_ramp1_markdown_instruction: "For this puzzle, drag all of the + blocks together and click \"Run\" to watch it go!" + courseE_maze_ramp2_markdown_instruction: "Drag an extra `move forward` block + out of the toolbox to finish your code." + courseE_maze_ramp3_markdown_instruction: "*\"This pig is ruffling my feathers.\"*\r\n\r\nThere + is one extra block that is going to cause the bird to crash. \r\nThrow it + away by dragging it back to the toolbox." + courseE_maze_ramp4_markdown_instruction: "*\"Trace the path and lead me to + the silly pig.\"* \r\n\r\nAvoid TNT or feathers will fly!" + courseE_maze_ramp5_markdown_instruction: "*\"Follow this path to get me to + the pig!\"*\r\n\r\nAvoid the TNT." + courseE_maze_ramp6_markdown_instruction: "*\"Keep calm and help me find the + bad pig. Otherwise I might get angry!\"*\r\n\r\nWhen you have several blocks + in a row, try moving them inside of a `repeat` loop. This will do the same + thing with less code!" + courseE_maze_ramp7_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** + Use what you've learned to get the bird to the pig!" + courseE_playLab_scaffold1_markdown_instruction: "It is amazing how much you + have learned! Let's put it together to make a game, step by step. \r\n\r\nWe've + put these blocks in your tool box. Choose a random background, then pick an + actor to be your game's hero.\r\n\r\n![](https://images.code.org/745931ce34b3c47de19c36009e4a9c48-image-1471464938470.14.47 + PM.png)" + courseE_playLab_scaffold2_markdown_instruction: "Now let's get things moving! + \r\n\r\nUse event handlers and actions to make your hero move. Get the targets + to complete this puzzle.\r\n\r\n<hr/>\r\n\r\nWe've added these blocks to + your tool box to help you.\r\n\r\n![](https://images.code.org/6216c0559cfae16005ffb53e6532473b-image-1471472994205.23.54%20PM.png)" + courseE_playLab_scaffold3_markdown_instruction: "Now that your game has a hero, + add two or more additional actors to your game and make them move. \r\n\r\nDo + you want to have an actor patrol back and forth or chase your main character? + \r\nTry using a these new blocks to bring your game to life!\r\n\r\n<img src=\"https://images.code.org/8f82d0e0ceab3f4fba725800cb43f94d-image-1484023674541.46.14.png\" + width=\"300px\"/>" + courseE_playLab_scaffold4_markdown_instruction: "Getting the actors moving + is a great step, but we need to do more to make this feel like a real game. + A simple way to do this is to add or remove points when actors collide with + things. Find some interesting ways to change the score in your game.\r\n<hr/>\r\n\r\n*Don't + expect to get this right on the first try. Keep testing your game as you code. + You'll not only want a game that works, but one that is fun to play!*\r\n<hr/>\r\nWe've + added these blocks to your toolbox:\r\n\r\n![](https://images.code.org/ad0df96aa91c89e3d903dce2fe19517f-image-1472070105051.20.55 + PM.png)" + courseE_playLab_scaffold5_markdown_instruction: "Great job! You have all the + basic components of a working game. Now spend some time making sure the game + works the way you want. Try including a way to win or lose your game.\r\n<hr/>\r\n*Don't + forget: Keep testing your game as you code. You'll not only want a game that + works, but one that is fun to play!*\r\n<hr/>\r\nYour toolbox has been re-organized + to make it easier to find what you need. We've also added these blocks:\r\n\r\n![](https://images.code.org/59b92b4c288bd5fc0c3be355c968f3d1-image-1472074578380.27.57 + PM.png)" + courseE_playLab_scaffold6_markdown_instruction: "You've finished! Now you + can play your game or share it with your friends and classmates!" + courseF_artist_for1_markdown_instruction: "**Free Play:** Experiment with the + `for` loop and the `counter` variable. \r\n\r\nDrag out a few blocks and + see what happens. \r\n" + courseF_artist_for10_markdown_instruction: "**Free Play:** Try using the `counter` + variable with other drawing elements to make magical images like this one.\r\n\r\n<img + src=\"https://images.code.org/7910db8adf2ec7e4c5fdad0101c68368-image-1475911466143.24.03.png\" + width=\"400px\"/>" + courseF_artist_for2_markdown_instruction: "Use a `repeat` loops inside of a + `for` loop to create this stack of triangles that goes from 50 pixel to 100 + pixel sides." + courseF_artist_for3_markdown_instruction: "Create these triangles that go from + 20 pixel sides to 200 pixel sides, where each triangle is 20 pixels larger + than the last." + courseF_artist_for5_markdown_instruction: "Just one little change to the code + from the last image can create this drawing. Can you figure out what that + change is?\r\n<hr/>\r\nHint: You need to remove something!" + courseF_artist_for6_markdown_instruction: "If you turn a little bit more or + less than you normally would for a shape, it creates a neat effect.\r\n\r\nTry + using some of the code from the last level, but turning 89 degrees to create + this twisted square spiral." + courseF_artist_for7_markdown_instruction: "Make three small changes to the + code from the last level to get this! " + courseF_artist_for9_markdown_instruction: "Use the counter inside the `set + alpha` block to get this faded center. \r\n(This hexagon pattern was made + using a 60 degree turn.)" + courseF_artist_fwp1_markdown_instruction: "Today, we're going to try out a + powerful function editor. See if you can figure out how to edit the `draw + a square` function to find the bugs." + courseF_artist_fwp2_markdown_instruction: "Edit the function to accept a parameter + called `length`. \r\n\r\nThe sides of each square should be 25 pixels larger + than the last. The first square has 25 pixel sides. Replace the '???' with + the correct values to draw the picture." + courseF_artist_fwp2_predict1_markdown_instruction: "Edit the function to accept + a parameter called `length`. \r\n\r\nThe sides of each square should be 25 + pixels larger than the last. The first square has 25 pixel sides. Replace + the '???' with the correct values to draw the picture." + courseF_artist_fwp3_markdown_instruction: "Now try creating the function from + scratch! \r\n\r\nCreate a function called `draw a square` and use it to outline + these four boxes. \r\nMake sure to add a parameter for `length`!\r\n\r\n<hr/>\r\nStarting + from the upper right, the box widths are 50, 100, 150, and 200." + courseF_artist_fwp4_markdown_instruction: "Great job! Now edit this function + to add a parameter for the number of sides in your polygon.\r\n\r\nThe sides + of all the shapes are 100 pixels long." + courseF_artist_fwp5_markdown_instruction: "Use the function from the last puzzle + to draw this series of shapes. \r\n\r\n\r\nThe triangle has 21 pixel sides, + and the sides in each following shape are 7 pixels longer than the last. \r\nUse + the `multiplication`block to make this all happen with just one function call.\r\n<hr/>\r\nThe + `multipication` block looks like this ![](https://images.code.org/55e293447c6b26bbbcf29cda2036706b-image-1481322763779.png)\r\n\r\n" + courseF_artist_fwp6_markdown_instruction: "**Challenge:** Edit `draw a spiral + edge` to use `length` and `sides` parameters, then recreate these shapes.\r\n\r\n- + The square goes from 3 pixels to 90 pixels.\r\n- The hexagon goes from 3 pixels + to 100 pixels.\r\n- The triangle goes from 3 pixels to 105 pixels." + courseF_artist_fwp7_markdown_instruction: "Finish off the `draw a spiral edge` + function to also ask for a minimum length for the center of the spiral.\r\n\r\n- + The smallest side in the center of this square is 50 pixels long\r\n- The + longest side at the outside of this spiral is 200 pixels long\r\n" + courseF_artist_fwp8_markdown_instruction: "Can you figure out how to make this + drawing using the function that you just created?\r\n\r\n- The red spiral + goes from 50 to 200 pixels\r\n- The blue spiral goes from 25 to 125 pixels\r\n- + The green spiral goes from 100 to 300 pixels\r\n" + courseF_artist_fwp9_markdown_instruction: "**Freeplay:** Below there are functions + you've written, and more for you to play with. Play with the pen width to + see how different your drawings look!" + courseF_artist_variables10_markdown_instruction: "Here's your code from the + last puzzle. Try editing the variable in other ways. \r\n- What happens + if you start out with `length` less than 150? \r\n- What if you multiply + your variable by 1.25 each time through?\r\n- What will your code do if you + turn 119 degrees?" + courseF_artist_variables2_markdown_instruction: "Now use another loop to draw + three of those triangles right next to each other. \r\n\r\nYou can nest + the code from your last puzzle inside." + courseF_artist_variables3_markdown_instruction: "Before things get tricky, + can you move the length of 50 into a variable so we can use it in the next + few puzzles? \r\n<br/>\r\n\r\n<img src=\"https://images.code.org/e6eac1f6aeb68a9a7584516e28663c14-image-1477533059853.gif\" + width=\"65%\"/>" + courseF_artist_variables4_markdown_instruction: "Now, use the `length` variable + to have the artist jump forward and down by `length` pixels between triangles." + courseF_artist_variables6_markdown_instruction: "**OOPS!** \r\n\r\nWe actually + need the triangles to be 60 pixels wide, with 60 pixel jumps. \r\n\r\nAren't + you glad you're using a variable?" + courseF_artist_variables6a_markdown_instruction: "Use what you've learned + to build this design where the squares have 80 pixel sides and the artist + jumps 80 pixels over and down between each one." + courseF_artist_variables7_markdown_instruction: "Let's start this section + by drawing a triangle with 150 pixels sides. \r\n\r\nBe sure to use the `length` + variable and a repeat loop." + courseF_artist_variables8_markdown_instruction: "Rebuild the triangle code + from the last puzzle, but this time use the `set length to` block to reset + the `length` variable to `length`+10 at the end of each loop iteration.\r\n\r\n![](https://images.code.org/6525bebee31ee15b84a48761b2866f53-image-1477531948829.31.37.png)\r\n\r\nThe + length of the first side of the triangle is 150 pixels." + courseF_artist_variables9_markdown_instruction: "Time to make some art! \r\n\r\nSee + what happens when you repeat the code from the last puzzle **30** times instead + of only 3!\r\n\r\nFeel free to make your lines any color or pattern for some + extra zest." + courseF_artist_variablesFP_markdown_instruction: "**Freeplay:** Take what you've + learned and make your own drawing. \r\n\r\nHow can you use variables with + squares, pentagons, or hexagons?" + courseF_artist_variables_10_markdown_instruction: "Here's your code from the + last puzzle. Try editing the variable in other ways. \r\n- What happens + if you start out with `length` less than 150? \r\n- What if you multiply + your variable by 1.25 each time through?\r\n- What will your code do if you + turn 119 degrees?" + courseF_artist_variables_2_markdown_instruction: "Now use another loop to draw + three of those triangles right next to each other. \r\n\r\nYou can nest + the code from your last puzzle inside." + courseF_artist_variables_3_markdown_instruction: "Before things get tricky, + can you move the length of 50 into a variable so we can use it in the next + few puzzles? \r\n<br/>\r\n\r\n<img src=\"https://images.code.org/e6eac1f6aeb68a9a7584516e28663c14-image-1477533059853.gif\" + width=\"65%\"/>" + courseF_artist_variables_4_markdown_instruction: "Now, use the `length` variable + to have the artist jump forward and down by `length` pixels between triangles." + courseF_artist_variables_5_markdown_instruction: "Add another set of loops + at the end of your code to add three more triangles. This time, move forward + and up!" + courseF_artist_variables_6_markdown_instruction: "OOPS! We actually need the + triangles to be 60 pixels wide, with 60 pixel jumps. \r\nAren't you glad + you're using a variable?" + courseF_artist_variables_6a_markdown_instruction: "Use what you've learned + to build this design where the squares have 80 pixel sides and the artist + jumps 80 pixels over and down between each one." + courseF_artist_variables_7_markdown_instruction: "Let's start this section + by drawing a triangle with 150 pixels sides. \r\n\r\nBe sure to use the `length` + variable and a repeat loop." + courseF_artist_variables_8_markdown_instruction: "Rebuild the triangle code + from the last puzzle, but this time use the `set length to` block to reset + the `length` variable to `length`+10 at the end of each loop iteration.\r\n\r\n![](https://images.code.org/6525bebee31ee15b84a48761b2866f53-image-1477531948829.31.37.png)" + courseF_artist_variables_9_markdown_instruction: "Time to make some art! \r\nSee + what happens when you repeat the code from the last puzzle 30 times instead + of only 3!\r\n\r\nFeel free to make your lines any color or pattern for some + extra zest." + courseF_artist_variables_FP_markdown_instruction: "**Freeplay:** Take what + you've learned and make your own drawing. \r\n\r\nHow can you use variables + with squares, pentagons, or hexagons?" + courseF_bee_for10_markdown_instruction: "**Challenge:** Take what you've learned + about `for` loops and try to solve this problem. \r\n\r\nRemember: You may + have to run through solutions multiple times before you figure out all of + the steps.\r\n" + courseF_bee_for11_markdown_instruction: "If your loop is counting down, the + increment is **subtracted** from your counter variable each time through. + \r\n\r\nWhat should your increment be to collect 15, then 12, then 9, 6, 3 + nectar?" + courseF_bee_for2_markdown_instruction: "Write the code to help the bee collect + all of the nectar.\r\n\r\nYou will need lots of blocks for this challenge, + but we'll learn an easier way in the next puzzle." + courseF_bee_for3_markdown_instruction: "Ah, the `for` loop makes this much + easier! \r\n\r\nTry this puzzle using the `for` loop and the `counter` variable + to see how much shorter your code becomes." + courseF_bee_for6_markdown_instruction: "You can also use a `for` loop to count + down. \r\n\r\nTry gathering this nectar by counting down from **5** to **1** + by **1**." + courseF_bee_for7_markdown_instruction: "The last number in your `for` loop + is called the **\"increment\"**. Each time the loop is run, the counter variable + changes by the value of the **increment**.\r\n\r\nTry collecting these flowers + using an **increment** of 2." + courseF_bee_for8_markdown_instruction: "You've got this! \r\n\r\nWhat should + your **increment** be to collect 3, 6, 9, 12, 15 nectar?\r\n\r\n" + courseF_bee_for9_markdown_instruction: "Now, let's combine the `counter` variable + with a `math` block! \r\n\r\nHow can you use the `counter` variable to navigate + this garden with the fewest number of blocks possible?" + courseF_bee_fwp1_markdown_instruction: "Check beneath the clouds to see if + the flowers have any nectar." + courseF_bee_fwp2_markdown_instruction: "Here's some code that solves the last + puzzle. \r\nLet's pull it into a function, then call the function to check + this row for nectar. \r\n<hr/>\r\nThis may seem like a strange step now, + but it will be really helpful soon!" + courseF_bee_fwp3_markdown_instruction: "Time to put the function to the test! + \r\n\r\nLet's see if it makes collecting these three rows of nectar any easier." + courseF_bee_fwp4_markdown_instruction: "*\"How is your function holding up?\"* \r\n\r\nWe + need to make some adjustments here. Click \"edit\" to add a `length` parameter + to the function so that it will still work when the row is a different length." + courseF_bee_fwp5_markdown_instruction: "*\"You're doing great so far!\"*\r\n\r\nLet's + use this function to collect the nectar." + courseF_bee_fwp6_markdown_instruction: "You can make code shorter and more + efficient when you combine functions with other programming elements. \r\n<hr/>\r\nWhat + blocks can you use with your function to build a short and sweet solution + to this puzzle?" + courseF_bee_fwp7_markdown_instruction: "**Challenge:** Something looks a little + different. Modify your function to make honey as well." + courseF_playlab_variables0_markdown_instruction: "This is Pirate Pegleg. He's + awfully hard to understand these days! \r\n\r\nDecode his speech by changing + these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" + should be \"e\"\r\n\r\n" + courseF_playlab_variables1_markdown_instruction: "This is Pirate Pegleg. He's + awfully hard to understand these days! \r\n\r\nDecode his speech by changing + these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" + should be \"e\"\r\n\r\n" + courseF_playlab_variables1a_markdown_instruction: "Variables can be used to + store text that you want to use later. \r\n\r\nHave Kiki, the soccer player, scream + \"Goal!\" by assigning that text to the `shout` variable." + courseF_playlab_variables2_markdown_instruction: "Now, decode Pirate Pegleg's + speech by changing the value of the variables in just two places! \r\n- + \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" + courseF_playlab_variables2a_markdown_instruction: "Now, decode Pirate Pegleg's + speech by changing the value of the variables in just two places! \r\n- + \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" + courseF_playlab_variables2b_markdown_instruction: "We can make sentences more + interesting by mixing pieces of text with variables.\r\n\r\nInsert the variable + `color` into the middle of a sentence by putting it into the empty slot in + the `join` block." + courseF_playlab_variables3_markdown_instruction: "Great! Now that you understand + how to have a character use a variable to speak, we can introduce the `ask` + block. \r\n\r\nThe `ask` block will automatically store whatever the user + answers into the variable of your choice. \r\n\r\nRun this program and enter + something for Pegleg to say.\r\n\r\n" + courseF_playlab_variables3b_markdown_instruction: "Help Kiki have a conversation + with Brian by using the variable `A1` in all of the places where age `12` + should be used. " + courseF_playlab_variables4_markdown_instruction: "Now we're going to join + a variable to the beginning of Pegleg's next sentence using the `create text + with` block. \r\n\r\nCan you find the correct variable in the toolbox to fill + in the slot?\r\n\r\n" + courseF_playlab_variables4b_markdown_instruction: "Now, Pirate Pegleg has some + questions for Brian.\r\n\r\nThis code uses an `ask` block, so you can type + Brian's answers after you click \"Run\". \r\n\r\nPut the variables in the + correct places to create this conversation." + courseF_playlab_variables5_markdown_instruction: "Now we're going to add a + variable into the middle of Pegleg's sentence using more than one `create + text with` block. \r\n\r\nHere is how you link `create text with` blocks together + to form longer sentences:\r\n\r\n![](https://images.code.org/1c9bdc9e73d60b5ed053c3c4e9e1dcd4-image-1476993588379.gif)" + courseF_playlab_variables5b_markdown_instruction: "Pirate Pegleg is going to + ask **you** some questions.\r\n\r\nPut all of the variables in the correct + place so that his story makes sense." + courseF_playlab_variables6b_markdown_instruction: "You cannot fit much text + in an actor's speech bubble. Let's try building some text using the `show + title screen` block.\r\n\r\nWe have provided some starter questions and variables + for you. Join them together and put them in the title screen to make a fun + story." + courseF_playlab_variables7b_markdown_instruction: "Time to make your own project! \r\n\r\nCreate + some questions and weave the answers together into your very own story." + courseF_playlab_variables8b_markdown_instruction: "Use what you've learned + to create an improv scene between the actors.\r\n\r\n**Improv:** *A scene + that actors make up on stage using information from the audience.*" + course_playlab_variables1_markdown_instruction: "This is Pirate Pegleg. He's + awfully hard to understand these days! \r\n\r\nDecode his speech by changing + these pieces of text in the code:\r\n- \"arrrg\" should be \"a\" \r\n- \"ye\" + should be \"e\"\r\n\r\n" + course_playlab_variables2_markdown_instruction: "Now, decode Pirate Pegleg's + speech by changing the value of the variables in just two places! \r\n- + \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" + course_playlab_variables3_markdown_instruction: "Now, decode Pirate Pegleg's + speech by changing the value of the variables in just two places! \r\n- + \"arrrg\" should be \"a\" \r\n- \"ye\" should be \"e\"\r\n\r\n" + cspu3_assess1_filltable_markdown_instruction: "Use Top-Down Design strategy + to fill in the table below. The first line is given to you. You may use as + many or as few rows in the table as you see fit.\r\n\r\n_NOTE: Use a new line + for each entry to the table. Write each line in the format of \"Function Name + : Description\"_\r\n\r\n**Top-Down Design Strategy:**\r\n\r\n* Look at the + big picture…\r\n* Identify a sub-task…\r\n* Break down that sub-task into + smaller sub-task(s)...\r\n* Keep going until you’re down to the commands you + already have access to.\r\n\r\n| Function Name | Description / Justification + |\r\n|-----------------|-----------------------------|\r\n| drawSnowflake() + | Draw a 6 pointed snowflake |\r\n| (Your answer) | (Your answer) |\r\n\r\n\r\n" + cspu3_assess1_freeresponse_markdown_instruction: "Explain how abstraction allows + for the creation of increasingly complex systems. Reference top-down design + strategy in your response." + cspu5_assess1_shortresponse_markdown_instruction: "**Short Response:** \r\n\r\nTwo + students, Kaleb and Hunter, are arguing in class about an App Lab project. + Kaleb states, “Huh, a button and an image are basically the same thing!”. Hunter + replies, “That doesn’t make any sense at all!”.\r\n\tExplain what Kaleb may + have meant by that statement." + cspu5_assess2_flowChart_markdown_instruction: "The human question below has + a yes/no answer. Create a flowchart that shows the logical progression of + the questions that need to be answered to arrive at yes or no. Your diagram + should consider the day of the week, time of day, and account for both possible + outcomes.\r\n\r\n| Question | Question |\r\n|----------------------------------|----------|\r\n| + Should I be at school right now? | (Input your flowchart here) |" + cspu5_assess2_match_markdown_instruction: "The following statements are true + about event handlers, if-statements, or both in App Lab. Place the letter + next to each statement into the appropriate area of the table below.\r\n\r\n**Statements:**\r\n\r\n* + A. Runs code in response to a user action\r\n* B. Runs code in response to + statement being evaluated to True\r\n* C. Evaluated sequentially once execution + is “inside” the statement\r\n* D. Can be triggered at any time\r\n* E. Used + to run a block of code\r\n\r\n_Note: Make a new line for each box._\r\n\r\n Event + Handlers: x, x\r\n if Statements: x, x\r\n Both: x, x\r\n" + cspu5_assess2_pseudocode2_markdown_instruction: "A _pseudocode_ program is + started below that asks the user for input and stores the value in a variable. Continue + writing pseudocode to accomplish this task: \r\n\r\nIf the hour is within + the school day (8 to 15) then display “Nice to see you!”, Otherwise, display + “It’s time to go home!\r\n\r\n DISPLAY (“Enter the hour of day (0-23)”)\r\n hour + <- INPUT ()" + cspu5_assess2_shortAnswer_markdown_instruction: "**Short answer:** When might + a programmer create a global variable instead of a local variable?" + cspu5_assess2_shortAnswer2_markdown_instruction: "**Short Answer:**\r\n\r\nIn + the previous class periods, you developed a digital assistant that is able + to “intelligently” respond to a limited set of questions and statements. Assume + you have created a much more robust digital assistant with capabilities similar + to those of Siri. Describe two possible user inputs: one question that a + digital assistant could “intelligently” answer easily, and another that it + could not. Explain what makes the first easy and the second difficult for + a digital assistant. (Consider the code used to develop your digital assistant.)" + cspu5_assess2_trueFalse_markdown_instruction: "For each expression below, circle + whether it evaluates to true or false. The variable temperature is initialized + as shown.\r\n\r\n var temperature = 30;\r\n\r\nExpressions:\r\n\r\n* (temperature + > 0) && (temperature < 32)\r\n* (temperature > 0) || (temperature < 32)\r\n* + (temperature != 0) && (temperature < 32)\r\n* (temperature == 0) || (temperature + > 32)\r\n* (temperature < 0) || (temperature > 32)\r\n\r\n_Note: Write \"true\" + or \"false\" on a new line for each expression._" + cspu5_assess3_shortAnswer_markdown_instruction: "**Short Answer:** Computer + models and simulations are used to formulate, refine, and test hypotheses. Describe + a scenario that could be modeled by a computer and explain one benefit and + one drawback of doing the simulation on a computer instead of real world. + \r\n" + cspu5_assess4_challenge_markdown_instruction: "**Challenge Question:** Imagine + a list that represents the height in feet of equidistant points along a mountainous + path. Here is an example of the data with a diagram that reflects the data. + For example: \r\n\r\n![](https://images.code.org/8046cbdb63d7e7d68eb133c58362b099-image-1477862090668.png)\r\n\r\nA + programmer wants to write a procedure that calculates the net elevation - total + number of feet a traveler goes up and down. For example, looking at the first + 3 segments of travel, the net elevation is 7 feet (up 3, up 1, down 3). \r\n\r\nWrite + procedure (in either JavaScript or pseudocode) called processPath(data) that:\r\n\r\n* + Accepts a list of elevation data as a parameter\r\n* For every value in the + list\r\n\t* Compute the absolute difference between that value and the value + next to it on the path\r\n\t* Add the difference to a running total\r\n* Return + the total elevation traveled\r\n\r\nIn writing your procedure you should assume + that you can call a function called _absDiff(a,b)_.\r\n\r\n![](https://images.code.org/0a7b91a830319d5d690ddf2efa264395-image-1477862205239.png)\r\n\r\nWrite + the full procedure below." + cspu5_assess4_scoreToGrade_markdown_instruction: "**Short Answer:** Jimmy wrote + the procedure scoreToGrade which accepts as a parameter score - a quiz score + in the range 0-100. The procedure is supposed to return a letter grade. He + feels confident his program is correct because he has tested it using the + scores 3, 29, and 67. Sally believes the program is incorrect because she + tested the values 73 and 86. The code is syntactically correct, and the programs + runs without generating an error, but the results are sometimes wrong. Why + does the procedure return the correct values for Jimmy’s tests but not Sally’s? + \r\n\r\n PROCEDURE scoreToGrade (percent)\r\n {\r\n IF (percent + < 60)\r\n {\r\n RETURN (\"F\")\r\n }\r\n ELSE + IF (percent >= 60)\r\n {\r\n \tRETURN (\"D\")\r\n }\r\n ELSE + IF (percent >= 70)\r\n {\r\n RETURN (\"C\")\r\n }\r\n ELSE + IF (percent >= 80)\r\n {\r\n RETURN (\"B\")\r\n }\r\n ELSE\r\n {\r\n \tRETURN + (\"A\")\r\n }\r\n }" + cspu5_assess4_shortAnswerShopping_markdown_instruction: "**Short Answer:** + Cecelia would like to write an app to help manage a trip to the grocery store. The + app will maintain a shopping list (a list of words) of all the items to buy. Describe + how Cecelia might use a second list in the app. What else might be tracked? + Describe how the list would be used and updated in the app.\r\n" + frozen circle function in circle_markdown_instruction: "Now let's create 20 + overlapping circles, turning 18 degrees between each circle." + frozen circle function with parameter_markdown_instruction: "Here's a ”Create + circle” block that can make circles of different sizes. Can you use this to + create a small circle of size 5 and a larger circle of size 10?" + frozen circle function_markdown_instruction: "Use the new “Create a circle” + block to create 10 overlapping circles. Don't forget to jump forward between + circles." + frozen circle_markdown_instruction: "A circle is a special shape. Can you figure + out what number to replace the question marks with to draw a circle?" + frozen cross rotate dense_markdown_instruction: "Let's repeat it 90 times! + How many times does 90 go into 360? Hint: It's a really small number." + frozen cross rotate_markdown_instruction: "Now try repeating it 10 times. How + many degrees do you need to turn between each line?" + frozen cross_markdown_instruction: "Wrap a “Repeat” block around these commands + to create a plus sign. Did you notice Elsa can move forward and backward?" + frozen diamond mini snowflake_markdown_instruction: "Did you know every snowflake + is a different shape? Let's create a new snowflake by using another “Repeat\" + block to repeat a parallelogram 4 times, turning right by 90 degrees between + each parallelogram." + frozen diamond snowflake_markdown_instruction: "Now, let's create a new snowflake + by using the repeat block to repeat a parallelogram 10 times, turning right + by 36 degrees between each one." + frozen diamond_markdown_instruction: "Use a repeat around these blocks to create + a parallelogram. It's just like a rectangle but has different angles. This + one has 60 degree and 120 degree angles instead of all 90 degree angles." + frozen freeplay_markdown_instruction: "You've officially become a master artist! + Create a winter wonderland." + frozen perpendicular_markdown_instruction: "Now let's see if we can create + two lines that are at a 90 degree angle to each other. You will need to use + the \"Turn\" block as well as the \"Move\" block." + frozen snowflake branch_markdown_instruction: "Try using the ”Create a snowflake + branch” block to create three branches, which starts to look like a snowflake." + frozen snowflake full_markdown_instruction: "Now let's repeat it 8 times to + make a beautiful snowflake!" + frozen snowflower_markdown_instruction: "Intricate snow patterns can be created + with very simple shapes. Can you make a pattern by repeating 5 circles of + size 5 and 5 circles of size 10?" + frozen square iterative_markdown_instruction: "It seems like we're halfway + to making a square. Let's put 4 lines together to create a square." + frozen square loop 3x_markdown_instruction: "Let's create three squares, turning + after each square. Be sure to turn by 120 degrees before each new square." + frozen square loop_markdown_instruction: "Hi, I’m Anna of Arendelle! Let’s + make a square with the “Repeat” block, which uses fewer blocks. How many times + (???) should the “Repeat” block loop the blocks inside it to make a square?" + frozen square snowflake_markdown_instruction: "Can you create a snowflake using + the “Repeat” block to make a square 10 times, and the “Turn” block to turn + 36 degrees between each square?" + grade1_adventurer_loops2_markdown_instruction: "How can Laurel collect all + five piles of gold using only one `E -->` block?" + grade1_artist_loops6_markdown_instruction: "**Challenge:** It's a hidden + garden! Let's walk around." + grade1_artist_loops7a_markdown_instruction: "**Challenge:** Lovely! Let's + take a walk around the garden." + grade1_artist_loopsFP_markdown_instruction: "Use what you have learned to draw + a picture of what you think the artist saw when he got home.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + grade1_maze_sequence8_markdown_instruction: "**Challenge:** Debug this level + by adding blocks to get me to the pig!" + grade1_maze_sequenceA_markdown_instruction: "**Challenge:** Move me around + the TNT to get to the pig." + grade1_playlab_events1_markdown_instruction: "This game is called \"Play Lab\". \r\n\r\n<br/>\r\nSee + if you can figure out what each block does." + grade1_playlab_eventsFP_markdown_instruction: "Use your imagination. What can + you do to make this game more fun?\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Conversation</strong> + - Add blocks so that the characters say \"Hello!\" when they run into each + other. </li>\r\n <li><strong>Where's the Dragon?</strong> - Have + the dragon dissapear when the up arrow key is pressed.</li>\r\n <li><strong>Super + Dragon</strong> - Make the dragon move at a faster speed and then try to catch + him with the knight. </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>" + grade2_CaringForNewPet_0_markdown_instruction: "For this puzzle, drag all of + the blocks together and click \"Run\" to watch it go!" + grade2_CaringForNewPet_1_markdown_instruction: "Drag an extra `move forward` + block out of the toolbox to finish your code." + grade2_CaringForNewPet_11_markdown_instruction: "*\"Keep calm and help me find + the bad pig.\"*" + grade2_CaringForNewPet_2_markdown_instruction: "*\"This pig is ruffling my + feathers.\"*\r\n\r\nThere is one extra block that is going to cause the bird + to crash. \r\nThrow it away by dragging it back to the toolbox." + grade2_CaringForNewPet_2courseC_maze_programming3_markdown_instruction: "*\"This + pig is ruffling my feathers.\"*\r\n\r\nThere is one extra block that is going + to cause the bird to crash. \r\nThrow it away by dragging it back to the + toolbox." + grade2_CaringForNewPet_3_markdown_instruction: "*\"Trace the path and lead + me to the silly pig. Avoid TNT or feathers will fly!\"*" + grade2_CaringForNewPet_3D_markdown_instruction: "*\"Follow this path to get + me to the pig!\"*" + grade2_CaringForNewPet_4_markdown_instruction: "*\"Keep calm and help me find + the bad pig. Otherwise I might get angry!\"*" + grade2_CaringForNewPet_6_markdown_instruction: "**Challenge:** Guide me to + the green evilness! (Watch out for TNT)" + grade2_CaringForNewPet_7D_markdown_instruction: "*\"It's time to get angry!\"*\r\n\r\n**Challenge:** + This code has a lot of bugs. You'll need to remove blocks and add blocks." + grade2_MakeDogTag_1_markdown_instruction: "*\"Let's make a cage for my pet + monster!\"*\r\n\r\nDrag blocks onto the screen to have the artist draw over + the grey lines in the picture. \r\n(Each line is 100 pixels long)" + grade2_MakeDogTag_10_markdown_instruction: "Now, draw anything you like!\r\n<br/><br/>\r\nHere + are some ideas you could try if you get stuck (the last one is a challenge):\r\n<br/>\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/c8748bea36ec8ea92ceb13d86cd862d2-image-1471033427162.13.51 + PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/57c582dca6126e30de36b5bef5517f78-image-1471033432715.03.46 + PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/9df13dec95da560686472580304d9ee3-image-1471033275008.55.15 + PM.png\" width=\"150\"/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n\r\n\r\n" + grade2_MakeDogTag_2_markdown_instruction: "*\"This spaceship needs a window!\"*\r\n\r\nEach + side of the inner square is 100 pixels and all of the angles are 90 degrees." + grade2_MakeDogTag_3_markdown_instruction: "*\"Oh no! Starla's pet alien just + flew away! Let's help the spacewoman!\"*\r\n\r\nFinish Starla's rocket so + she can chase her pet. \r\n(Each side of the triangle is 100 pixels long + and has 120 degree outer angles)" + grade2_MakeDogTag_4_markdown_instruction: "*\"Maybe we should make a tag for + each of our pets in case they get lost!\"*\r\n\r\nFinish this tag by drawing + a rectangle around the outside. \r\n(The long sides are 200 pixels each and + the short sides are each 100 pixels)" + grade2_MakeDogTag_5_markdown_instruction: "*\"Now a tag for Belle!\"*\r\n\r\nDraw + this diamond with 200 pixel sides." + grade2_MakeDogTag_6_markdown_instruction: "**Challenge:** This tag is a special + one! Can you figure out how to draw the outline? \r\n(The long side is 150 + pixels and each of the short sides are 75 pixels.)" + grade2_MakeDogTag_7_markdown_instruction: "One more tag. This is a triangle + for Pi. \r\n(Each side is 150 pixels)" + grade2_MakeDogTag_8_markdown_instruction: "Now let's connect a bunch of V's + together in a loop." + grade2_MakeDogTag_9_markdown_instruction: "Time to make something snazzy! \r\n\r\nRebuild + the code from the last puzzle, but this time, add a left turn of 30 degrees + inside the loop. Now, repeat it 24 times instead of 8." + grade2_MakeDogTag_BFP_markdown_instruction: "*\"Hi, I'm an artist. You can + write code to make me draw almost anything.\"*\r\n\r\nPlay with the blocks + in the toolbox to see what they do!" + grade2_MakeDogTag_FP_markdown_instruction: "**Freeplay:** What shape will you + make the tag for your pet?\r\n<br/><br/>\r\n\r\n\r\nHere are some ideas you + could try if you get stuck:\r\n![](https://images.code.org/e36330061c21807fac24d804e301e572-image-1475814869558.26.01.png)" + grade2_PuppyLoops_10_markdown_instruction: "My teacher says that I should finish + what I start!\r\n\r\nHelp me finish my pinwheel. Can you figure out what's + wrong?" + grade2_PuppyLoops_2_markdown_instruction: "Suddenly, a magical block appears! With + the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to + the pig by creating a loop that uses only one `move forward` block inside + of a `repeat`?" + grade2_PuppyLoops_3_markdown_instruction: "Get me to the pig! Solve this puzzle + by creating a loop!" + grade2_PuppyLoops_4_markdown_instruction: "In this puzzle, two `repeat` loops + will help you get to the pig with the fewest number of blocks!" + grade2_PuppyLoops_8_markdown_instruction: "This code for the cat's whiskers + is wrong. \r\n\r\nFix this code to draw whiskers that are all the same length." + grade2_PuppyLoops_9_markdown_instruction: "Looks like the C in code is drawn + backwards!\r\n\r\nCan you make it look like a C again?" + grade2_collector_10_markdown_instruction: "You're almost done! \r\n\r\nCollect + as many pieces of treasure as you can to finish the stage!" + grade2_collector_2_markdown_instruction: "Move Laurel to the gold, then use + `collect` to pick it up." + grade2_collector_3_markdown_instruction: "*\"Sequence matters!\"*\r\n\r\nThe + blocks you need are already in the workspace, but not connected. Put these + blocks in order to collect all of the gold and solve the puzzle." + grade2_collector_4_markdown_instruction: "Sequence matters! The blocks you + need are already in the workspace, but not connected. Order these blocks + to solve the puzzle." + grade2_collector_5_markdown_instruction: "*\"Help me collect each gold coin!\"*\r\n\r\nThese + blocks are in the wrong order. Can you fix them?" + grade2_collector_6_markdown_instruction: "\"Help me collect all of the treasure!\"\r\n\r\nThese + blocks are in the wrong order. Reorder them to collect all of the treasure." + grade2_collector_7_markdown_instruction: "**Challenge:** What is going on here? \r\n\r\nEven + if we put these in the right order, there will still be some missing. \r\nUse + blocks from the toolbox to collect all of the treasure." + grade2_collector_8_markdown_instruction: "*\"Keep up the good work! Help me + collect all of the coins.\"*" + grade2_collector_9_markdown_instruction: "*\"Let's get all of the coins!\"*" + grade2_collector_9a_markdown_instruction: "**Challenge:** Grab all of the coins." + grade2_collector_A_markdown_instruction: "Help Laurel collect all of the treasure." + grade2_collector_pre1_markdown_instruction: "*\"Hi, I'm Laurel. Today I'm + searching for treasure at the dog park!\"* \r\n\r\nPlay around with the blocks + to see if you can help Laurel collect some gold." + grade2_link_RunMarco_partner_markdown_instruction: "<a href=\"https://www.allcancode.com/runmarco\"></a><img + src=\"https://images.code.org/c754e82a395ab69e5c1e3b2dfe8bf9ff-image-1486603338831.22.10.png\" + width=\"400px\"/></a>" + grade2_maze_debuggingFP_markdown_instruction: "*\"Now, help me sneak up on + the pig any way you want to!\"*" + grade2_maze_intro10_markdown_instruction: "Solve this puzzle." + grade2_maze_intro2_markdown_instruction: "Welcome to Code Studio! Here you + will learn to use blocks to build programs. Press `Ok`, then find the `Run` + button to run your first program." + grade2_maze_intro3_markdown_instruction: "The `workspace` is where you will + create all of your programs. Find the workspace, then see what the program + does." + grade2_maze_intro4_markdown_instruction: "The `toolbox` is where blocks are + stored. You can drag them into the `workspace` to create programs." + grade2_maze_intro6_markdown_instruction: "That’s it! Now we’re ready to try + to solve a few puzzles." + grade2_maze_intro7_markdown_instruction: "This time, try something a bit more + challenging." + grade2_maze_intro8_markdown_instruction: "This is a challenge puzzle. It is + meant to be hard and will probably take you a couple of tries to solve. If + you don’t solve it after several tries, don’t worry! It will be in the Play + Zone at the end of the stage and you can try it again when you’ve had more + practice." + grade2_maze_intro9_markdown_instruction: "Solve this puzzle." + grade2_playlab_project_3_markdown_instruction: "Can you have Waddles (actor + 1) say \"Ouch!\" and play a \"hit\" sound if he runs into Chomp? \r\n\r\nWhen + you're done, play the game to make that happen.\r\n\r\n![](https://images.code.org/a634f249021651f60a1acf37bf78d07d-image-1475342557950.gif)" + grade2_playlab_project_6_markdown_instruction: "<style>\r\n.hint{\r\n\tpadding: + 15px 15px 15px 40px; \r\n background-color:#eeeeee; \r\n border-radius:10px;\r\n}\r\n.hintInner{\r\n\tpadding: + 15px 15px 15px 15px; \r\n background-color:#FFFFFF; \r\n border-radius:10px;\r\n}\r\n\r\nimg{\r\n\tborder-radius: + 10px;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n</style>\r\n\r\nCreate + your own story. When you're done, click \"Finish\" to share with friends.\r\n<br/>\r\n\r\n<h5 + class=\"hint\">\r\n<details>\r\n<summary><b>Need some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5 + class=\"hintInner\">\r\n\t\t<ul>\r\n \t<li><strong>Who's there?</strong> + - Make characters appear with random images, so no one knows who's showing + up next.</li>\r\n <li><strong>Going on an Adventure</strong> - + Change the background, then have the characters talk about where they are + now. </li>\r\n <li><strong>Pinball</strong> - Make one character + move using the arrow keys (use `when up arrow`, `when down arrow` blocks), + then play random sounds when it collides with other characters on the screen. + </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + grade2_puppy_loops2_markdown_instruction: "Suddenly, a magical block appears! With + the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to + the pig by creating a loop that uses only one `move forward` block inside + of a `repeat`?" + grade2_puppy_loops3_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nSolve + this puzzle by creating a loop!" + grade2_puppy_loops4_markdown_instruction: "In this puzzle, two `repeat` loops + will help you get to the pig with the fewest number of blocks!" + grade2_puppy_loops5_markdown_instruction: "*\"Get me to the pig as quickly + as possible!\"*" + grade2_puppy_loops6_markdown_instruction: "*\"This pig is ruffling my feathers!\"*\r\n\r\nLoops + even work with more than one block inside! Can you loop this sequence?" + grade2_puppy_loops7_markdown_instruction: "*\"Get me to the pig!\"*\r\n\r\nUse + what you learned in other puzzles!" + grade3_ConditionalsElse_1_markdown_instruction: "This cloud is blocking my + view! \r\n\r\nCheck to see if there's a flower under the cloud, and only + get nectar if there's a flower. \r\nBe careful, it can change!" + grade3_ConditionalsElse_2_markdown_instruction: "More clouds! \r\n\r\nCheck + underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade3_ConditionalsElse_4_markdown_instruction: "Sometimes this cloud covers + a flower, and sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block + to collect nectar only if it is a flower. \r\nElse, make honey (because it + is a honeycomb)." + grade3_ConditionalsElse_5_markdown_instruction: "There will be either a flower + or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` block + to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade3_ConditionalsElse_6_markdown_instruction: "I am not sure how much nectar + this flower has, but I know it has either 1, 2, or 3 nectar. \r\n\r\nCombine + the conditional blocks (`if` and/or `if/else`) to only get as much nectar + as the flower has. \r\n\r\nRemember, the amount of nectar can change each + time you run the puzzle!" + grade3_ConditionalsElse_7_markdown_instruction: "These flowers can have 3, + 2, or 1 nectar. \r\n\r\nComplete the `check purple flower` function and use + it to collect all of the nectar at the flowers." + grade3_ConditionalsElse_8_markdown_instruction: "Write the function for `check + flower make honey`. \r\n\r\nYour function should check if the purple flower + has 3, 2, or 1 nectar and get all of the nectar. \r\nThen, move forward and + make honey." + grade3_ConditionalsElse_9_markdown_instruction: "**Assessment:** This cloud + is either hiding a flower with one nectar or a honeycomb that needs one honey. \r\n\r\nComplete + the `get nectar or make honey` function, then call it to collect the nectar + or honey. \r\n" + grade3_ConditionalsElse_TeacherIDo_markdown_instruction: "There will be either + a flower or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` + block to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade3_Conditionals_1_markdown_instruction: "I'm a hungry bee! \r\n\r\n\r\nHelp + me collect all of the nectar from the flowers using the fewest number of blocks." + grade3_Conditionals_10_markdown_instruction: "There's a lot happening here!\r\n\r\nUse + what you've learned to collect all of the nectar and then make the honey." + grade3_Conditionals_11 BAD_markdown_instruction: "**Assessment:** Use a `while` + loop to collect all of the nectar from these flowers." + grade3_Conditionals_11_markdown_instruction: "Let's put everything together!\r\n\r\nUse + what you've learned to help me collect nectar only from flowers that have + it, using as few blocks as possible. \r\n\r\nDon't forget to make honey + at the end." + grade3_Conditionals_12_markdown_instruction: "This stair step pattern should + look familiar. \r\n\r\nCan you collect nectar only from the flowers that + have some, using as few blocks as possible?" + grade3_Conditionals_13_markdown_instruction: "**Assessment:** Collect all of + the nectar. \r\nBe careful not to try to collect nectar from a purple flower + if it doesn't have any." + grade3_Conditionals_2_markdown_instruction: "Look at all of that nectar!\r\n\r\nHelp + me collect the nectar and make the honey using as few blocks as you can. " + grade3_Conditionals_3_markdown_instruction: "These magic purple flowers change!\r\n\r\nEach + time you try the puzzle, purple flowers can have either 1 nectar or none at + all...but you won't know the number until you run the code! \r\n\r\nBe careful + not to collect nectar from a purple flower if it doesn't have any. \r\nYou + must first check if the nectar is equal to 1 using the `if nectar` block." + grade3_Conditionals_8_markdown_instruction: "I wonder what's out there!\r\n\r\nHelp + me fly around the yard and collect nectar only from the flowers that have + some. " + grade3_Debugging_1_markdown_instruction: "These blocks are really bugging me!\r\n\r\nFix + the error(s) to collect all of the nectar." + grade3_Debugging_10_markdown_instruction: "**Challenge:** *\"This puzzle is + making me loopy!\"*\r\n\r\nAll of the commands that you need are already here...now + use your debugging skills to figure out how to solve this puzzle." + grade3_Debugging_11_markdown_instruction: "**Challenge:** Fix the errors to + collect all of the nectar and make all of the honey." + grade3_Debugging_2_markdown_instruction: "*\"These blocks are really bugging + me!\"*\r\n\r\nFix the error(s) to collect all of the nectar." + grade3_Debugging_3_markdown_instruction: "*\"Ooh, this one stings!\"*\r\n\r\nFix + the error(s) to collect all of the nectar." + grade3_Debugging_4_markdown_instruction: "*\"These blocks are really bugging + me.\"*\r\n\r\nFix the error(s) to collect all of the nectar and make all of + the honey." + grade3_Debugging_5_markdown_instruction: "That flower looks tasty! \r\n\r\nFix + the error(s) to collect all of the nectar. \r\nYou can now use both run and + step." + grade3_Debugging_6_markdown_instruction: "What a sweet challenge!\r\n\r\nFix + the error(s) to collect all of the nectar." + grade3_Debugging_8_markdown_instruction: "*\"This could be sweet!\"*\r\n\r\nFix + the error(s) to make all of the honey." + grade3_Debugging_9_markdown_instruction: "\"Bee\" patient with this one!\r\n\r\nYou + will need to fix a couple of things in this program to collect all of the + nectar and make all of the honey." + grade3_Loops_10_markdown_instruction: "Such a busy bee!\r\n\r\nHelp Bee collect + all of the nectar and make all of the honey with the fewest blocks possible." + grade3_Loops_11_markdown_instruction: "The shape of this path is different + from the others. \r\n\r\nCan you collect all of the nectar using as few blocks + as possible?" + grade3_Loops_3_markdown_instruction: "Use a `repeat` loop to collect all of + the nectar." + grade3_Loops_4_markdown_instruction: "Now use the `repeat` block to collect + all of the nectar and make all of the honey." + grade3_Loops_5_markdown_instruction: "What a beautiful field of flowers!\r\n\r\nHelp + the bee visit each one.\r\n\r\nCan you find a way to do it with fewer than + 7 blocks?" + grade3_Loops_6_markdown_instruction: "How many times can loops help you in + this puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete + this puzzle with the fewest blocks possible." + grade3_Loops_7_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + grade3_Loops_TeacherIDo_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + grade3_RunningFarm_1_markdown_instruction: "*\"Corn you help me harvest today?\"*\r\n\r\nUse + conditionals to make sure that you pick all of the corn, but don't disturb + the stalks where nothing is growing yet." + grade3_RunningFarm_10_markdown_instruction: "Collect all of the corn and lettuce, + then pick the pumpkin." + grade3_RunningFarm_11a_markdown_instruction: "Collect all of the corn and lettuce, + then pick the pumpkin." + grade3_RunningFarm_2_markdown_instruction: "*\"Lettuce collect both crops from + this row!\"*\r\n\r\nHelp the farmer collect both corn and lettuce from the + field." + grade3_RunningFarm_4_markdown_instruction: "*\"Gosh! Now the crops are growing + in clusters!\"* \r\n\r\nHelp the farmer pick all of the lettuce in each cluster + before moving on to the next bunch." + grade3_RunningFarm_5_markdown_instruction: "*\"What a bountiful crop!\"*\r\n\r\nThis + field has clusters of corn, lettuce, and pumpkins all growing together. Can + you collect them all?" + grade3_RunningFarm_6_markdown_instruction: "*\"Let's take this one step further!\"*\r\n\r\nCan + you figure out how to pick the pumpkin? Make sure to collect all of the corn + along the way!" + grade3_RunningFarm_7_markdown_instruction: "**Challenge:** Collect all of the + corn and lettuce, then pick the pumpkin." + grade3_RunningFarm_8_markdown_instruction: "Harvesting one type of crop at + a time takes too long. Can you help me harvest both wheat and potatoes in + one run? I wonder if you can stack another While There is... loop on top of + another one?" + grade3_RunningFarm_9_markdown_instruction: "Can you help me one last time? + I want to collect as many crops as I can before the weeds take over this field. + How many do you think we can get?" + grade3_bee_conditionals_new1a_markdown_instruction: "You can only collect nectar + from flowers, but you can check any space to see if there is a flower." + grade3_bee_conditionals_new2a_markdown_instruction: "In this puzzle, we know + that every flower has exactly one nectar, but the flowers aren't spaced evenly.\r\n\r\nGet + all of the nectar using as few blocks as possible." + grade3_bee_conditionals_new3b_markdown_instruction: "Conditionals can be helpful, + even when you know exactly what is in each spot!\r\n\r\nCollect all of the + nectar and make all of the honey." + grade3_bee_conditionals_quantum1_markdown_instruction: "*\"This cloud is blocking + my view!\"*\r\n\r\nCheck to see if there's a flower under the cloud. If there's + a flower, get nectar." + grade3_bee_conditionals_quantum2_markdown_instruction: "More clouds! \r\n\r\nCheck + underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade3_bee_conditionals_quantum3_markdown_instruction: "*\"Now I just want + to make honey.\"*\r\n\r\nSome of these clouds might have honeycombs under + them. Be sure to check if a honeycomb is hiding behind each cloud!" + grade3_bee_conditionals_quantum4_markdown_instruction: "Sometimes a cloud covers + a flower, sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` block + to collect nectar at flowers and make honey at honeycomb." + grade3_bee_conditionals_quantum5_markdown_instruction: "**Challenge:** There + will be either a flower or a honeycomb under each of those clouds!\r\n\r\nUse + the `if/else` block to collect nectar if there is a flower.\r\nOtherwise, + make honey (because there is a honeycomb)." + grade3_maze_Loop1_markdown_instruction: "**Assessment:** Get me to the sunflower + using only 5 blocks! " + grade3_maze_loops1_markdown_instruction: "*\"Must...eat...sunflower!\"*\r\n\r\nGet + the zombie to the sunflower." + grade3_maze_loops2_markdown_instruction: "Get the zombie to the sunflower using + the fewest blocks possible! " + grade3_maze_loops2a_markdown_instruction: "*\"Zombie hungry!\"*\r\n\r\nGet + the zombie to the sunflower using the fewest number of blocks possible." + grade3_maze_loops3_markdown_instruction: "*\"Must eat sunflower!\"*\r\n\r\nGet + the zombie to the sunflower using only the blocks available." + grade3_maze_nestedLoops2_markdown_instruction: "Suddenly, a magical block appears! With + the `repeat` block, you can loop code over and over.\r\n\r\nCan you get to + the pig by creating a loop that uses only one `move forward` block inside + of a `repeat`?" + grade3_maze_nestedLoops3_markdown_instruction: "Get me to the pig! You can + only use one `move forward` block this time" + grade3_maze_nestedLoops4_markdown_instruction: "In this puzzle, two `repeat` + loops will help you get to the pig with the fewest number of blocks!" + grade4_arist_functions_star0_markdown_instruction: "Have you drawn something + like this star before? Practice making it one more time by adding a `turn` + and a `repeat` block." + grade4_arist_nested_loop_circles1_markdown_instruction: "**Assessment:** Use + a nested loop to complete the design." + grade4_arist_nested_loop_flags1_markdown_instruction: "Loop the given code + to create a windmill." + grade4_arist_nested_loop_polygons1_markdown_instruction: "Loop this design + 10 times. \r\n\r\nHow much do you have to turn each time you loop?" + grade4_arist_nested_loop_polygons2_markdown_instruction: "Loop this shape 6 + times. \r\n\r\nHow much do you have to turn each time you loop? " + grade4_arist_nested_loop_squares1_markdown_instruction: "Can you draw these + 10 squares of this sidewalk using a nested loop? \r\n\r\nEach square is 30 + pixels." + grade4_arist_nested_loop_triangles2_markdown_instruction: "Now nest this loop + inside another loop to draw 10 triangles. \r\nThis is called a \"nested\" + loop. " + grade4_arist_nested_loop_triangles3_markdown_instruction: "Can you draw a hexagon + by looping the triangle code?" + grade4_arist_nested_loop_triangles4_markdown_instruction: "Draw the teeth in + the alligator's mouth!" + grade4_arist_nested_loop_triangles5_markdown_instruction: "Create a sun by + nesting the starter code in another loop.\r\n\r\nTo get this cool design with + a hollow center, you'll need to jump forward by the length of the triangle + before turning." + grade4_arist_nested_loop_triangles6_markdown_instruction: "Can you draw these + 36 triangles using a nested loop?" + grade4_artist_freeplay_markdown_instruction: "Create your own project! This + creation will be saved to your Projects dashboard so that you can easily edit + it any time!" + grade4_artist_functions1_markdown_instruction: "*\"Me zombie artist. Me love + drawing!\"*\r\n\r\nHelp the zombie draw glasses using squares with sides of + 100 pixels. \r\nThe bridge between the glasses is 75 pixels long.\r\n\r\n" + grade4_artist_functions2_markdown_instruction: "Functions let you define new + blocks! \r\n\r\nWe've moved the blocks needed for drawing a square into a + function called `draw a square`. This time, use the `draw a square` function + to create the glasses. \r\n\r\nThe squares are 75 pixels apart." + grade4_artist_functions2a_markdown_instruction: "Create this image using only + the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + grade4_artist_functions3a_markdown_instruction: "Create this image using only + the blocks provided.\r\n\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + grade4_artist_functions3b_markdown_instruction: "This time, use lines of 8 + hexagons with 25 pixel sides.\r\n\r\n- To make each hexagon, repeat the 6 + times, turning 60 degrees.\r\n- To draw a diamond, you will need to alternate + between turning 60 degrees and 120 degrees." + grade4_artist_functionsChallenge0_markdown_instruction: "**Challenge:** Create + as many functions as you think you need to make this drawing of 50 pixel squares." + grade4_artist_functions_challenge_markdown_instruction: "**Functions Super + Challenge:** Use the suggested functions to draw four rows of hexagons. Notice + how our even numbered rows are shifted to the right?" + grade4_artist_functions_challenge2_markdown_instruction: "**Functions Super + Challenge:** Use the suggested functions to draw four rows of hexagons. Notice + how our even numbered rows are shifted to the right?" + grade4_artist_functions_freeplay_markdown_instruction: "Create your own project! + This creation will be saved to your Projects dashboard so that you can easily + edit it any time!\r\n<hr/>\r\n<h3>Here are some ideas if you are looking for + inspiration, or make your own function!</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/7e85601182e37a5331a17c0e29cf504d-image-1471042674372.42.08 + PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/6ae7664d92a706e852d92dc419836557-image-1471042678266.55.48 + PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n\r\n</tr>\r\n</table>" + grade4_artist_functions_stars0_markdown_instruction: "We will come back to + functions shortly. Let's take a break to practice making this star. \r\n\r\nYou + can make this drawing by adding a repeat block." + grade4_artist_functions_stars1_markdown_instruction: "Now that you can draw + a star, try drawing four stars!\r\n\r\n- Each branch of the star is 25 pixels + long\r\n- Turn 45 degrees between branches\r\n- Jump 100 pixels between each + star" + grade4_artist_functions_stars2_markdown_instruction: "When is drawing three + stars harder than drawing four? When you also have to jump over the moon!\r\n\r\nDraw + only those three stars to finish this puzzle." + grade4_artist_functions_stars3_markdown_instruction: "That last one is tough + if you only use loops. Let's try one more time and see if this new 'function' + makes it easier to **draw a star**." + grade4_artist_functions_windows0_markdown_instruction: "You are doing great! + \r\n\r\nMake this window by drawing a square, then turning 90 degrees before + drawing another, and so on." + grade4_artist_functions_windows1_markdown_instruction: "You just created a + nested loop! Let's repeat all of these commands with **another** `repeat` + block to draw windows on this house. Don't forget to `jump`!" + grade4_artist_functions_windows2_markdown_instruction: "Let's take the code + for the window and add it to function `draw a window`. Now, we can call the + function any time we need to draw a window without having to write the code + again. \r\n\r\n<img src=\"https://images.code.org/57c016bcafe697e6ddb196e0f13c9ef9-image-1468602046641.gif\" + width=\"450px\"/>\r\n<br/> \r\n\r\nTry solving this puzzle by creating `draw + a window` and calling it five times. Watch out for the door!\r\n\r\n- The + top windows are 50 pixels away from each other. \r\n- The bottom windows + are 100 pixels below the top set." + grade4_artist_nestedLoops_challenge_markdown_instruction: "<img src=\"https://images.code.org/c876143212d195192013582f57c6df04-image-1445625392518.36.18.png\" + width=\"150px;\" style=\"mix-blend-mode: multiply;\" />\r\n\r\n**Play time:** Here + is the code for an interesting shape. \r\n\r\nWhat happens when you repeat + it multiple times, turning between each iteration? \r\n\r\nNotice that the + turns in this shape add up to *420 degrees*, which means that when your artist + is done drawing, it will be facing a different direction than when you started. That + new direction is exactly *60 degrees* to the *right* of where you began.\r\n\r\n<hr/>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 4</b></summary>\r\n<br/>\r\nIf you want to come full circle in just 4 repetitions, + you need the artist to turn a total of **360 degrees/4 = 90 degrees** each + time. You can do that by adding an extra `turn right by 30 degrees` block + to the outer loop (since **60+30 = 90**.) \r\n<br/>\r\n<img src=\"https://images.code.org/9da67a628ed72e87520a02a0d917e2af-image-1440132370113.44.12.png\" + width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n<br/><br/>\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 6</b></summary>\r\n<br/>\r\nWhen you repeat the shape as-is 6 times, you get + a total rotation of **6x60 degrees** which is a full **360 degree** cycle. \r\n<img + src=\"https://images.code.org/b79f96b87097ce3afe8a6a5608d04e36-image-1440132287456.44.27.png\" width=\"500px;\" style=\"mix-blend-mode: + multiply;\" />\r\n</details>\r\n</h4>\r\n\r\n<h4>\r\n<details>\r\n<summary><b>Repeat + 12</b></summary>\r\n<br/>\r\nIf you want to repeat the image 12 times, you + need the artist to turn a total of **360 degrees/12 = 30 degrees** each iteration. That + means you will need to adjust the artist back a bit with `turn left by 30 + degrees` before you repeat the shape again. <br/><br/>\r\n<img src=\"https://images.code.org/ad254952522674496918561096817c66-image-1440132424792.44.01.png\" + width=\"500px;\" style=\"mix-blend-mode: multiply;\" />\r\n</details>\r\n</h4>\r\n\r\nNow + it's your turn! Can you recreate each image by repeating the starting shape? " + grade4_artist_nestedLoops_challenge2_markdown_instruction: "<img src=\"https://images.code.org/6cac10470af71bbb5d75bf5e2669046f-image-1439939145211.png\" + width=\"200px\"/>\r\n\r\nNow for a challenge! \r\n\r\nHere is a design that + uses only blocks that you have already been shown. Can you figure out how + to recreate it? Feel free to use trial and error. You are not expected to + get it perfect the first time.\r\n\r\nThe repeated shape is almost identical + to the one from the last puzzle, except that the length used in the first + loop is a little smaller. " + grade4_artist_nested_loop_circles1_markdown_instruction: "**Assessment:** Use + a nested loop to complete the design." + grade4_artist_nested_loop_flags1_markdown_instruction: "Loop the given code + to create a windmill." + grade4_artist_nested_loop_polygons1_markdown_instruction: "Loop this design + 10 times. \r\n\r\nHow much do you have to turn each time you loop?" + grade4_artist_nested_loop_polygons2_markdown_instruction: "Hi, I'm the Artist! + Let's create some drawings together! For starters, try repeating this shape + 6 times. \r\n\r\nHow much do you have to turn each time you loop? " + grade4_artist_nested_loop_squares1_markdown_instruction: "Can you draw these + 10 squares of this sidewalk using a nested loop? \r\n\r\nEach square is 30 + pixels." + grade4_artist_nested_loop_triangles1_markdown_instruction: "Complete the code + to draw these triangles. The first one is done for you. Hint: 3 triangles + in a 360 degree rotation.\r\n\r\n" + grade4_artist_nested_loop_triangles2_markdown_instruction: "Let's make a quick + adjustment to get completely different image! \r\n<b>Hint:</b> ? × 10 = 360" + grade4_artist_nested_loop_triangles3_markdown_instruction: "Can you draw a + hexagon by looping the triangle code?\r\nHint: 6 × ? = 360" + grade4_artist_nested_loop_triangles4_markdown_instruction: "Let's try something + a little different! Can you help me draw the bottom teeth in the alligator's + mouth?" + grade4_artist_nested_loop_triangles5_markdown_instruction: "Create a sun by + nesting the starter code in another loop.\r\n\r\nTo get this cool design with + a hollow center, you'll need to jump forward by the length of the triangle + before turning." + grade4_artist_nested_loop_triangles6_markdown_instruction: "Can you draw these + 36 triangles using a nested loop?" + grade4_artist_parameters_squares1_markdown_instruction: "Click \"edit\" to + fill in the function definition of `draw a square` and add a parameter. \r\nIt + should take a length parameter just like the triangle. \r\n\r\n**This time, + draw 3 squares:** 25, 50 and 75 pixels in length. The lefthand corners are + each 100 pixels away from the last." + grade4_artist_parameters_triangles1_markdown_instruction: "Today, we're going + to try out a different, more powerful function editor. See if you can figure + out how to edit the `draw a triangle` function to find the bugs." + grade4_artist_parameters_triangles2_markdown_instruction: "Do you notice anything + different about these function blocks? Click “Run” to see what happens." + grade4_artist_parameters_triangles2b_markdown_instruction: "Can you complete + this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than + the last. \r\nThe first triangle has 25 pixel sides." + grade4_artist_parameters_triangles3_markdown_instruction: "Can you complete + this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than + the last. \r\nThe first triangle has 25 pixel sides." + grade4_artist_parameters_triangles4_markdown_instruction: "The code for this + triangle function is broken. \r\n\r\nCan you edit the function to fix it, + and then make triangles of length 25, 50, and 75?" + grade4_artist_parameters_trianglesx_markdown_instruction: "Can you complete + this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than + the last. \r\nThe first triangle has 25 pixel sides." + grade4_bee_conditionals_nested_loops_markdown_instruction: "**Assessment:** + Collect all of the nectar. \r\nBe careful not to try to collect nectar from + a purple flower if it doesn't have any." + grade4_bee_conditionals_new1_markdown_instruction: "**Assessment:** Collect + all of the nectar. \r\nBe careful not to try to collect nectar from a purple + flower if it doesn't have any." + grade4_bee_conditionals_quantum1_markdown_instruction: "This cloud is blocking + my view! \r\n\r\nCheck to see if there's a flower under the cloud, and only + get nectar if there's a flower. \r\nBe careful, it can change!" + grade4_bee_conditionals_quantum2_markdown_instruction: "More clouds! \r\n\r\nCheck + underneath every cloud to see if it is hiding a flower before you get nectar. \r\n\r\nRemember: + Not all clouds hide the same thing!" + grade4_bee_conditionals_quantum4_markdown_instruction: "Sometimes this cloud + covers a flower, and sometimes it covers a honeycomb! \r\n\r\nUse the `if/else` + block to collect nectar only if it is a flower. \r\nElse, make honey (because + it is a honeycomb)." + grade4_bee_conditionals_quantum5_markdown_instruction: "There will be either + a flower or a honeycomb under each of those clouds!\r\n\r\nUse the `if/else` + block to collect nectar if there is a flower.\r\nOtherwise, make honey (because + there is a honeycomb)." + grade4_bee_functions2_markdown_instruction: "Functions are blocks of code that + perform a task. \r\n\r\nUse the `get 2 nectar` function to collect the nectar + from each flower." + grade4_bee_functions3_markdown_instruction: "Build the `get 5` function to + use in this puzzle." + grade4_bee_functions4_markdown_instruction: "The `move and get nectar` function + turns the bee, collects nectar, and then returns the bee to where it started. \r\n\r\nUse + the `move and get nectar` function to collect all of the nectar." + grade4_bee_functions9_markdown_instruction: "**Challenge:** These flowers can + have a different amount of nectar each time you run the puzzle. \r\n\r\nCreate + a function that collects all of the nectar from each flower." + grade4_bee_nestedLoops1_markdown_instruction: "*\"Can you BEE-lieve all of + these flowers?\"*\r\n\r\nCollect all of the nectar from each flower. " + grade4_bee_nestedLoops2_markdown_instruction: "**Challenge:** Figure out how + to get all of the nectar using only the blocks available." + grade4_bee_nestedLoops4_markdown_instruction: "Collect all of the nectar from + each flower and make honey at the honeycomb. " + grade4_bee_nestedLoops5_markdown_instruction: "**Challenge:** Collect all of + the nectar from each flower and make honey at each honeycomb. \r\n" + grade4_bee_nestedLoops_assess_markdown_instruction: "**Assessment:** Collect + all of the nectar and make all of the honey using loops.\r\n\r\n**Hint:** + *There are several possible solutions!*" + grade4_frozen_freeplay_markdown_instruction: "You've officially become a master + artist! Create a winter wonderland." + grade4_frozen_functions0_markdown_instruction: "A circle is a special shape. + Can you figure out what number to replace the question marks with to draw + a circle?" + grade4_frozen_functions1_markdown_instruction: "Use the new “dreate a circle” + `function` to create 10 overlapping circles. Don't forget to `jump` forward + between circles." + grade4_frozen_functions1a_markdown_instruction: "Use the new “Create a circle” + block to create 10 overlapping circles. Don't forget to jump forward between + circles." + grade4_frozen_functions2_markdown_instruction: "Now let's create 20 overlapping + circles, turning 18 degrees between each circle." + grade4_frozen_functions3_markdown_instruction: "Here's a ”Create circle” block + that can make circles of different sizes. Can you use this to create a small + circle of size 5 and a larger circle of size 10?" + grade4_frozen_functions4_markdown_instruction: "Intricate snow patterns can + be created with very simple shapes. Can you make a pattern by repeating 5 + circles of size 5 and 5 circles of size 10?" + grade4_frozen_nested_loop_diamonds1_markdown_instruction: "Let’s use a repeat + block to create a rhombus. Like a square, all sides are equal length, but + the angles are different. This one has 60 degree and 120 degree angles instead + of all 90 degree angles." + grade4_frozen_nested_loop_diamonds2_markdown_instruction: "Did you know every + snowflake is a different shape? Let's create a new snowflake by using another + “Repeat\" block to repeat a parallelogram 4 times, turning right by 90 degrees + between each parallelogram." + grade4_frozen_nested_loop_diamonds3_markdown_instruction: "Now, let's create + a new snowflake by using the repeat block to repeat a parallelogram 10 times, + turning right by 36 degrees between each one." + grade4_frozen_nested_loop_rectangle1_markdown_instruction: "Hi, I’m Anna of + Arendelle! Let’s use a repeat block to create a rectangle. This one is 200 + pixels long and 100 pixels tall. All of the corners are 90 degree angles." + grade4_frozen_square_markdown_instruction: "Hi, I’m Anna of Arendelle! Let’s + make a square with the “Repeat” block, which uses fewer blocks. How many times + (???) should the “Repeat” block loop the blocks inside it to make a square?" + grade4_frozen_square_loop1_markdown_instruction: "Hi, I’m Anna of Arendelle! + Let’s make a square with the “Repeat” block, which uses fewer blocks. How + many times (???) should the “Repeat” block loop the blocks inside it to make + a square?" + grade4_frozen_square_loop2_markdown_instruction: "Let's create three squares, + turning after each square. Be sure to turn by 120 degrees before each new + square." + grade4_frozen_square_loop3_markdown_instruction: "Can you create a snowflake + using the “Repeat” block to make a square 10 times, and the “Turn” block to + turn 36 degrees between each square?" + grade4_playlab_freeplay_markdown_instruction: "It's free play time! Have fun + with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> + - Have character 2 patrol and use your arrow keys to make character 1 chase + until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> + - Have a character constantly pop up at a random location. Award points for + clicking the sprite before it disappears. </li>\r\n <li><strong>Best + Guess</strong> - Make both characters disappear, change location to a random + spot, then reappear as a random character. Click on the first one and get + a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + grade4_playlab_test_markdown_instruction: "<h5><b>\r\nIn our game, how should + we score points? \r\n</b></h5> \r\n<br/>\r\n\r\n1. Add 1 to your `points` + variable each time Dog hits Cat with a piece of pie. <br/> <br/> \r\n2. + Use the `when actor 2 touches anything` event to trigger an update to your + score. You can increment your variable by setting `points = points + 1.` <br/> <br/> + \r\n3. Get your score up to 10 to pass the level.\r\n\r\n<br/><br/>\r\n<h4>\r\n**Note:** + Use the right arrow to throw pie!\r\n</h4>" + grade4_playlab_test2_markdown_instruction: "Here's a function called `jump` + that causes your main character to jump up 100 pixels. \r\n\r\nRun the program + and use the jump function to collect all of the flags by moving the dog with + the arrow keys." + grade4_review_artist1_markdown_instruction: "Hi, I'm an artist. You can write + code to make me draw almost anything. Use a few blocks to make me draw over + the grey lines in the picture. (Each line is 100 pixels long)\r\n\r\n<br> \r\n" + grade4_review_artist2_markdown_instruction: "This house needs a roof! Draw + the triangle. \r\n\r\nHint: all three sides are the same length.\r\n\r\n<img + src=\"https://images.code.org/8b10073fd1a7fe53b4da33ec2229894b-image-1468018903891.gif\" + width=\"300\"/>" + grade4_review_artist3_markdown_instruction: "The jump block moves the artist + without drawing. Draw the dashed line using both the `jump forward` and `move + forward` blocks. Each line is 50 pixels long." + grade4_review_bee1_markdown_instruction: "Now use the `repeat` block to collect + all of the nectar and make all of the honey." + grade4_review_bee3_markdown_instruction: "Such a busy bee!\r\n\r\nHelp Bee + collect all of the nectar and make all of the honey with the fewest blocks + possible." + grade4_scaffolded_project1_markdown_instruction: "It is amazing how much you + have learned! Let's put them together to make a game, step by step.\r\nTo + start, let's set up your game's space and actor. We've put these blocks + in your tool box. Choose a background and map, and pick an actor to be your + game's hero.\r\n\r\n![](https://images.code.org/745931ce34b3c47de19c36009e4a9c48-image-1471464938470.14.47 + PM.png)" + grade4_scaffolded_project2_markdown_instruction: "Now let's get things moving! + Use event handlers and actions to make your hero move.\r\n\r\nWe've added + these blocks to your tool box to help you.\r\n\r\n![](https://images.code.org/6216c0559cfae16005ffb53e6532473b-image-1471472994205.23.54 + PM.png)" + grade4_scaffolded_project3_markdown_instruction: "Now that your game has a + hero, it's time to start adding other actors and assigning them behaviors. + \r\n\r\nAdd two or more additional actors to your game and make them move. + Do you want to have an actor patrol back and forth? Try using a these new + blocks to bring these other components of your game to life!\r\n\r\n![](https://images.code.org/4cfffd476c6129891eb8bde246a711a8-image-1472065288448.00.42 + PM.png)\r\n\r\n**NOTE:** Chasing and fleeing behavior commands are coming + soon!" + grade4_scaffolded_project4_markdown_instruction: "Just getting the actors moving + is a great step, but we need to program some interactions to make this really + feel like a game. A simple way to do this is to add or remove points when + actors collide with projectiles or each other. Find some interesting ways + to change the score in your game.\r\n\r\n*Don't expect to get this right + on the first try. Keep testing your game as you code. You'll not only want + a game that works, but one that is fun to play!*\r\n\r\nWe've added these + blocks to your toolbox:\r\n\r\n![](https://images.code.org/ad0df96aa91c89e3d903dce2fe19517f-image-1472070105051.20.55 + PM.png)" + grade4_scaffolded_project4a_markdown_instruction: "Just getting the actors + moving is a great step, but we need to program some interactions to make this + really feel like a game. A simple way to do this is to add or remove points + when actors collide with projectiles or each other. Find some interesting + ways to change the score in your game.\r\n\r\n*Don't expect to get this right + on the first try. Keep testing your game as you code. You'll not only want + a game that works, but one that is fun to play!*\r\n\r\n![](https://images.code.org/876b13abf8a7984f94342dd9a5c8a8f0-image-1472069578010.42.30 + PM.png)" + grade4_scaffolded_project5_markdown_instruction: "Great job! You have all the + basic components of a working game. Now spend some time making sure the game + works the way you want. Try including a way to win or lose your game.\r\n\r\n*Don't + forget: Keep testing your game as you code. You'll not only want a game that + works, but one that is fun to play!*\r\n\r\nYour toolbox has been re-organized + to make it easier to find what you need. We've also added these blocks:\r\n\r\n![](https://images.code.org/59b92b4c288bd5fc0c3be355c968f3d1-image-1472074578380.27.57 + PM.png)" + grade4_scaffolded_project6_markdown_instruction: "You've finished! Now you + can play your game or share it with your friends and classmates!" + grade5_artist_binary1_markdown_instruction: "Binary is a way of representing + information using only two options. Here, we're going to use the options + \"off\" (represented by the number 0) and \"on\" (represented by the number + 1). \r\n\r\nWe've provided you with a grid of \"pixels\" that you can walk + through and make designs by turning on only certain squares. \r\n\r\n**Can + you have the artist draw \"01010101\" in binary in the first row?**" + grade5_artist_binary10_markdown_instruction: "<img src=\"https://images.code.org/0a30f23ff6138828d053267719d34fa8-image-1444435986654.00.22.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own. + \r\n<br/>\r\n" + grade5_artist_binary2_markdown_instruction: "Here's a function that takes + a binary string of 1's and 0's and instructs the artist to follow them from + left to right, top to bottom. \r\n\r\nThe artist will fill-in the squares + when it sees a 1 and ignore the square when it sees a 0. \r\n\r\n**Run this + code to see how the artist uses binary to draw this pattern.**" + grade5_artist_for_loops1_markdown_instruction: "Use a `for` loop to draw this + triangle that is 50 pixels wide. If you count from 1 to 3 by 1s, you can use + this just like a `repeat` loop." + grade5_artist_for_loops10_markdown_instruction: "**Challenge:** Can you figure + out how to use all of the things you've learned to create this image of polygons, + all with 40 pixel sides?" + grade5_artist_for_loops1a_markdown_instruction: "Try using a `for loop`to create + this triangular design. Don't worry that the numbers are different than the + last puzzle. As long as you turn by the right number of degrees, the artist + will make the correct shape!\r\n\r\n" + grade5_artist_for_loops1b_markdown_instruction: "**Free Play:** Experiment + with the `for` loop and the `counter` variable. \r\n\r\nDrag out a few blocks + and see what happens. \r\n\r\n<br/><br/>\r\n" + grade5_artist_for_loops2_markdown_instruction: "Use a `repeat` inside of a + `for` loop to create this stack of triangles that goes from 50 pixels to 100 + pixels." + grade5_artist_for_loops3_markdown_instruction: "These triangles go from 20 + pixel sides to 200 pixel sides, and each triangle is 20 pixels larger than + the last." + grade5_artist_for_loops4_markdown_instruction: "These squares start at 15 pixels + long, the largest is 300 pixels long, and each square is 15 pixels larger + than the last." + grade5_artist_for_loops5_markdown_instruction: "Just one little change to the + code from the last image can create this drawing. Can you figure out what + that change is?\r\n\r\nHint: You need to remove something!" + grade5_artist_for_loops6_markdown_instruction: "If you turn a little bit more + or less than you normally would for a shape, it creates a neat effect.\r\n\r\nTry + using some of the code from the last level, but turning 89 degrees to create + this twisted square spiral." + grade5_artist_for_loops7_markdown_instruction: "Make three small changes to + the code from the last level to get this! \r\n(This time, the `for` loop + increments by 2)" + grade5_artist_for_loops7a_markdown_instruction: "Take the angle down to 72 + degrees to get a spiraled pentagon." + grade5_artist_for_loops7b_markdown_instruction: "Use the counter inside the + `set alpha` block to get this faded center. \r\n(This hexagon pattern was + made using a 60 degree turn.)" + grade5_artist_for_loops8_markdown_instruction: "Remember back in a previous + stage when we used a variable to control the number of sides in a shape? We + are going to do the same thing with the `counter` variable now. \r\n\r\nThis + pattern starts with a triangle and adds one side at a time until it draws + a decagon (10 sides). Each side should be 100 pixels long. \r\n\r\nHow will + you use the `counter` variable from the `for` loop to recreate this drawing?" + grade5_artist_for_loops9_markdown_instruction: "Let's put it all together! \r\n\r\nUsing + your knowledge of `for` loops and the `counter` variable, create this drawing + where each shape has two more sides than the last. Make sure that each side + is 10 times as long as the number of sides in the polygon.\r\n\r\nVery little + of the code has been provided for you." + grade5_artist_for_loopsfreeplay11_markdown_instruction: "<br/><br/>\r\n<img + src=\"https://images.code.org/9b5897e059bb29bd2faf8504659a3cfc-image-1440719685627.49.33.png\" + width=\"250px\"/> \r\n<br/><br/>\r\n**Free-Play Inspiration:** You've now + learned everything you need to know to make a pattern like this! If this picture + inspires you, try to make something similar. Otherwise, create something all + your own." + grade5_artist_for_loopsfreeplay12_markdown_instruction: "**Free Play:** Try + using the `counter` variable with other drawing elements to make magical images + like this one.\r\n\r\n<img src=\"https://images.code.org/7910db8adf2ec7e4c5fdad0101c68368-image-1475911466143.24.03.png\" + width=\"400px\"/>" + grade5_artist_freeplay_markdown_instruction: "Create your own project! This + creation will be saved to your Projects dashboard so that you can easily edit + it any time!" + grade5_artist_functionparameters10_markdown_instruction: "<img src=\"https://images.code.org/1df195df9d808f0dd539bef0f5c2958b-image-1443049871563.02.54.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! \r\n\r\nIf this picture inspires + you, try to make something similar. Otherwise, create something all your own.\r\n\r\nNotice: + We've used the `set alpha` block to make the \"petals\" fade toward the outside." + grade5_artist_functionparameters11_markdown_instruction: "**Freeplay:** Below + there are functions you've written, and more for you to play with. Play with + the pen width to see how different your drawings look!" + grade5_artist_functionparameters7_markdown_instruction: "This image is similar + to the last. \r\n\r\nCan you use a `for` loop with your function to make + this design?" + grade5_artist_functionparameters8_markdown_instruction: "Use the function from + the last puzzle to draw this series of shapes. \r\n\r\n\r\nThe triangle has + 21 pixel sides, and the sides in each following shape are 7 pixels longer + than the last. \r\nUse the `multiplication`block to make this all happen + with just one function call.\r\n<hr/>\r\nBe sure to jump 100 pixels between + polygons. <br>\r\nThe multipication block looks like this ![](https://images.code.org/55e293447c6b26bbbcf29cda2036706b-image-1481322763779.png)\r\n\r\n" + grade5_artist_functionparameters9_markdown_instruction: "**Challenge:** Edit + `draw a spiral edge` to use `length` and `sides` parameters, then recreate + these shapes.\r\n\r\n- The square goes from 3 pixels to 90 pixels.\r\n- The + hexagon goes from 3 pixels to 100 pixels.\r\n- The triangle goes from 3 pixels + to 105 pixels." + grade5_artist_functionparameters9a_markdown_instruction: "Finish off the `draw + a spiral edge` function to also ask for a minimum length for the center of + the spiral.\r\n\r\n- The smallest side in the center of this square is 50 + pixels long\r\n- The longest side at the outside of this spiral is 200 pixels + long\r\n" + grade5_artist_functionparameters9b_markdown_instruction: "Can you figure out + how to make this drawing using the function that you just created?\r\n\r\n- + The red spiral goes from 50 to 200 pixels\r\n- The blue spiral goes from 25 + to 125 pixels\r\n- The green spiral goes from 100 to 300 pixels\r\n" + grade5_artist_functionparameters_6_markdown_instruction: "Great job! Now edit + this function to add a parameter for the number of sides in your polygon.\r\n\r\nThe + sides of all the shapes are 100 pixels long." + grade5_artist_parameters_squares1_markdown_instruction: "Click \"edit\" to + fill in the function definition of `draw a square` and add a parameter. \r\nIt + should take a length parameter just like the triangle. \r\n\r\n**This time, + draw 3 squares:** 25, 50 and 75 pixels in length. The lefthand corners are + each 100 pixels away from the last." + grade5_artist_parameters_squares1a_markdown_instruction: "Today, we're going + to try out a different, more powerful function editor. See if you can figure + out how to edit the `draw a square` function to find the bugs." + grade5_artist_parameters_squares2_markdown_instruction: "Now try creating the + function from scratch! \r\n\r\nCreate a function called `draw a square` and + use it to outline these four boxes. \r\nMake sure to add a parameter for + `length`!\r\n\r\n<hr/>\r\nStarting from the upper right, the box widths are + 50, 100, 150, and 200." + grade5_artist_parameters_squares2a_markdown_instruction: "Edit the function + to accept a parameter called `length`. \r\n\r\nThe sides of each square should + be 25 pixels larger than the last. The first square has 25 pixel sides. Replace + the '???' with the correct values to draw the picture." + grade5_artist_parameters_stars1_markdown_instruction: "That last one is tough + if you only use loops. Let's try one more time and see if this new 'function' + makes it easier to **draw a star**." + grade5_artist_parameters_triangles1_markdown_instruction: "Today, we're going + to try out a different, more powerful function editor. See if you can figure + out how to edit the `draw a square` function to find the bugs." + grade5_artist_parameters_triangles1a_markdown_instruction: "Today, we're going + to try out a different, more powerful function editor. See if you can figure + out how to edit the `draw a triangle` function to find the bugs." + grade5_artist_parameters_triangles1aa_markdown_instruction: "Click \"edit\" + to fill in the function definition of `draw a triangle` and add a parameter. \r\nIt + should take a length parameter just like the triangle. \r\n\r\n**This time, + draw 3 triangles:** 25, 50 and 75 pixels in length. The lefthand corners are + each 100 pixels away from the last." + grade5_artist_parameters_triangles2_markdown_instruction: "Can you complete + this drawing? \r\n\r\nThe sides of each triangle are 25 pixels larger than + the last. \r\nThe first triangle has 25 pixel sides." + grade5_artist_parameters_triangles2a_markdown_instruction: "Do you notice anything + different about these function blocks? Click “Run” to see what happens." + grade5_artist_parameters_triangles3_markdown_instruction: "The code for this + triangle function is broken.\r\n\r\nCan you edit the function to fix it, and + then make triangles of length 25, 50, and 75?" + grade5_artist_parameters_triangles4_markdown_instruction: "The code for this + triangle function is broken. \r\n\r\nCan you edit the function to fix it, + and then make triangles of length 25, 50, and 75?" + grade5_artist_parameters_trianglesy_markdown_instruction: "The code for this + triangle function is broken.\r\n\r\nCan you edit the function to fix it, and + then make triangles of length 25, 50, and 75?" + grade5_artist_variables_freeplay10_markdown_instruction: "**Free Play:** Experiment + with the number of sides this shape has. Can you change the algorithm so that + the overall size of the shape stays the same, no matter how many sides it + has? " + grade5_artist_variables_freeplay14_markdown_instruction: "**Free Play**: Check + it out! Now your algorithm is nested within one more loop. Experiment with + changing the values of your two variables to draw cool patterns.\r\n\r\nFor + even more effect, try playing with color! Use random colors inside loops + to see how it changes your design." + grade5_artist_variables_freeplay15_markdown_instruction: "<img src=\"https://images.code.org/b5e28b084cb331ee030ea3853ed921bd-image-1440060815818.51.21.png\" + width=\"250px\"/>\r\n\r\n**Free-Play Inspiration:** You've now learned everything + you need to know to make a pattern like this! If this picture inspires you, + try to make something similar. Otherwise, create something all your own. " + grade5_artist_variables_freeplay16_markdown_instruction: "Still playing? \r\n\r\nHere + is a blank canvas where you can create whatever you want!\r\n\r\n<hr/>\r\n<h3>If + you're looking for ideas, try one of these:</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/2e8a6853ccb3ffe9bc6d25aaeea75514-image-1471047821651.10.45 + PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n<td>\r\n<img src=\"https://images.code.org/0b63705c28ac282637a3a5b3cede8608-image-1471047826162.18.02 + PM.png\" width=\"200\"/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>" + grade5_artist_variables_hexagons1_markdown_instruction: "Let's try it again! + \r\n\r\nCan you set the `length` variable to 60 to make this cool design with + hexagons?" + grade5_artist_variables_letterT11_markdown_instruction: "Here’s some more complicated + code using the same concepts from the last puzzle - what should you set the + `sides` variable to in order to draw this picture made of squares?\r\n\r\n<p + style=\"font-size:small; padding: 15px 15px 15px 40px; background-color:#dcf3f3; + border-radius:10px;\">\r\n\tJust for fun: Try using a few different numbers + to see what happens to the pattern!\r\n</p>" + grade5_artist_variables_octagons13_markdown_instruction: "When a shape has + lots of sides, each side needs to be shorter if you want the whole pattern + to fit on the screen. \r\n\r\nLet's recreate the algorithm for this amazing + pattern, but instead of manually setting the `length` variable, let's use + a math block with the `sides` variable inside to make sure that each shape + fits correctly. \r\n\r\nThe perimeter of each polygon is 300 pixels." + grade5_artist_variables_pentagon8_markdown_instruction: "Use what you learned + in the last puzzle to create this hexagon using the `sides` variable.\r\n\r\nSee + how you could change just one value to draw a triangle, square, pentagon, + or octagon?" + grade5_artist_variables_pentagon9_markdown_instruction: "Now, recreate the + algorithm from the last level and create a pentagon with sides of length 150." + grade5_artist_variables_pentagons1_markdown_instruction: "Draw this pattern + of pentagons with 100 pixel sides by setting the right value for `length` + and dropping the `length` variable into all of the the correct places. \r\n\r\nSee + how you only have to set the value for `length` once, and the code uses the + right value everywhere?" + grade5_artist_variables_pentagons12_markdown_instruction: "Let's set the `sides` + variable to 5. The more sides we add to this algorithm, the bigger this whole + pattern gets! \r\n\r\n<br/>\r\nNotice that there is another variable called + `length`. \r\nWe can now use that variable wherever we have a `move forward` + block. \r\n\r\nSet the `length` variable to 75 for this shape." + grade5_artist_variables_rectangle6_markdown_instruction: "Now I want to make + a rectangle that is twice as tall as it is wide. We've got a variable called + `width` that needs to be set to 100. Can you use the math blocks to complete + the code?" + grade5_artist_variables_square7_markdown_instruction: "Here’s some code that + can draw any regular polygon. \r\n\r\nThere’s a new variable called `sides` + that is set to 4. \r\n\r\nCan you use the `sides` variable (along with the + math block) to turn the right amount regardless of how many sides are in the + polygon?" + grade5_artist_variables_triangles1_markdown_instruction: "Let's draw an equilateral + triangle. \r\n\r\nIt has to be exactly 50 pixels long on each side.\r\n\r\n" + grade5_artist_variables_triangles2_markdown_instruction: "Instead of using + `move forward by 150`, the `move` block is now referencing a variable called + `length`. Can you set `length` to 150 to draw this new triangle?" + grade5_artist_variables_triangles3_markdown_instruction: "Drag a number block + to the `set length` block and to the `repeat _ times` block to draw a set + of 50 pixel triangles. " + grade5_bee_for_loops10_markdown_instruction: "If your loop is counting down, + the increment is **subtracted** from your counter variable each time through. + \r\n\r\nWhat should your increment be to collect 15, then 12, then 9, 6, 3 + nectar?" + grade5_bee_for_loops11_markdown_instruction: "**Challenge:** Take what you've + learned about `for` loops and try to solve this problem. \r\n\r\nRemember: + You may have to run through solutions multiple times before you figure out + all of the steps.\r\n" + grade5_bee_for_loops2_markdown_instruction: "Add the code necessary to make + sure the bee collects all the nectar.\r\n\r\nLook at how much code you need + for this puzzle! (We'll learn a simpler way in the next puzzle.)" + grade5_bee_for_loops3_markdown_instruction: "Ah, the `for` loop makes this + much easier! \r\n\r\nTry this puzzle using the `for` loop with `counter` + variable and see how much shorter your code becomes." + grade5_bee_for_loops4_markdown_instruction: "Help the bee collect all of the + nectar." + grade5_bee_for_loops5_markdown_instruction: "Now we need to `move forward` + `counter` times, then `get nectar` `counter` times. Can you use two `repeat` + loops to solve this challenge?" + grade5_bee_for_loops6_markdown_instruction: "You can also use a `for loop` + to count down. Try gathering this nectar by counting down from 5 to 1 by 1." + grade5_bee_for_loops7_markdown_instruction: "The last number in your `for` + loop is called the **\"increment\"**. Each time the loop is run, the counter + variable changes by the value of the increment.\r\n\r\nTry collecting these + flowers using an increment of 2." + grade5_bee_for_loops8_markdown_instruction: "You've got this! \r\n\r\nWhat + should your increment be to collect 3, 6, 9, 12, 15 nectar?\r\n\r\n" + grade5_bee_for_loops9_markdown_instruction: "Now, let's combine the `counter` + variable with a math block! \r\n\r\nHow can you use the `counter` variable + to navigate this garden with the fewest number of blocks possible?" + grade5_bee_parameters_new1_markdown_instruction: "Check beneath the clouds + to see if the flowers have any nectar." + grade5_bee_parameters_new2_markdown_instruction: "Here's some code that solves + the last puzzle. \r\nLet's turn it into a function, then call the function + to check this row for nectar. \r\n<hr/>\r\nThis may seem like a strange step + now, but it will be really helpful soon!" + grade5_bee_parameters_new3_markdown_instruction: "Time to put the function + to the test! \r\n\r\nLet's see if it makes collecting these three rows of + nectar any easier." + grade5_bee_parameters_new4_markdown_instruction: "*\"How is your function holding + up?\"* \r\n\r\nWe need to make some adjustments here. Click \"edit\" to + add a `length` parameter to the function so that it will still work when the + row is a different length." + grade5_bee_parameters_new5_markdown_instruction: "*\"You're doing great so + far!\"*\r\n\r\nLet's use this function to collect a lot of nectar." + grade5_bee_parameters_new6_markdown_instruction: "You can make code shorter + and more efficient when you combine functions with other programming elements. \r\n<hr/>\r\n<h3>What + blocks can you use with your function to build a short and sweet solution + to this puzzle?</h3>" + grade5_bee_parameters_new7_markdown_instruction: "**Challenge:** Something + looks a little different. Can you modify your function to make honey as well?" + grade5_bee_parameters_new8a_markdown_instruction: "Use your new function to + solve this spiral." + grade5_bee_parameters_new9a_markdown_instruction: "Use your new function to + solve this spiral." + grade5_pixelation_markdown_instruction: "# Make your own image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* + Encode an image of anything you like using `binary`.\r\n* The binary language + will be represented with `0` and `1` only.\r\n* You might want to do some + planning and sketching with graph paper first. \r\n* Depict something, perhaps + your name written out, your initials, an icon or logo of some sort.\r\n* Get + creative! The image doesn't have to be a perfect square, it can be long and + skinny." + grade5_playlab_freeplay_markdown_instruction: "It's free play time! Have fun + with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> + - Have character 2 patrol and use your arrow keys to make character 1 chase + until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> + - Have a character constantly pop up at a random location. Award points for + clicking the sprite before it disappears. </li>\r\n <li><strong>Best + Guess</strong> - Make both characters disappear, change location to a random + spot, then reappear as a random character. Click on the first one and get + a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + grade5_playlab_parameters_points1_markdown_instruction: "Here's the same game + but most of the code is hidden. We've added a new function called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nAdd + a new parameter called `points` to the `player_score` function. \r\n<br/>\r\nThe + `score_points` function should be able to both add and remove points from + `player_score` depending on which actor is hit.<br>\r\nChanging the score + by 1 will add a point, while changing the score by -1 will subtract a point.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: When + you're done, click \"Run\" to play. When Dog scores 6 points, you will move + on to the next puzzle.*" + grade5_playlab_variables1_markdown_instruction: "This time you don't have + to write any code, just hit `Run` to play the game! \r\n\r\n<br/>\r\nIn this + game, you're the dog who is trying to collect more flags than the cat. Use + the down arrow to control the dog. Press `Finish` when you're done playing." + grade5_playlab_variables10_markdown_instruction: "Edit the the `patrol` function + to add an `actor` parameter, so that we can call it for each of the actors + on the screen. Remember, the actors correspond to numbers 1, 2, and 3." + grade5_playlab_variables11_markdown_instruction: "Add another parameter called + `speed` to the `patrol` function. Try using a `set speed` block with the new + `speed` parameter to help Penguin get both flags before the other sprites + even get one." + grade5_playlab_variables12_markdown_instruction: "Let's have some fun! Look + at the code provided to see if you can figure out what each block does. \r\n\r\nWhen + you're done, use the arrow keys to control Dog and collect all of the flags.\r\n\r\n**NOTE:** + You don't need to make any changes to the program" + grade5_playlab_variables13_markdown_instruction: "Use the `when actor touches` + block to send Dog back to the top-left ONLY if Dog touches any of the other + actors." + grade5_playlab_variables14_markdown_instruction: "It's free play time! Have + fun with all the blocks in your tool box. \r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Tag</strong> + - Have character 2 patrol and use your arrow keys to make character 1 chase + until they collide. </li>\r\n <li><strong>Whack-a-Sprite</strong> + - Have a character constantly pop up at a random location. Award points for + clicking the sprite before it disappears. </li>\r\n <li><strong>Best + Guess</strong> - Make both characters disappear, change location to a random + spot, then reappear as a random character. Click on the first one and get + a point...but if you click on the second one you LOSE a point! </li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>\r\n" + grade5_playlab_variables1ask_markdown_instruction: "This time, when you press + 'run', you will see a 'prompt' asking you for a number. This number will + be stored in a variable used to set the dog's speed.\r\n\r\n\r\nPay attention + to how this program is written!" + grade5_playlab_variables2_markdown_instruction: "The race in that last puzzle + wasn't very fair! Change the `dog_speed` variable to make sure you can collect + more flags than Cat. The first to collect 10 flags wins!" + grade5_playlab_variables3_markdown_instruction: "Here's a new kind of game! + \r\n\r\nYou don't need to change anything on this level.\r\n\r\n**Directions:** + Use the left and right arrows to move, and the up arrow to jump. See if you + can collect all of the flags." + grade5_playlab_variables4_markdown_instruction: "Now we're using a variable + called `height` to control how high the dog can jump. Update the `height` + variable so that the dog can jump high enough to reach all the flags. \r\n" + grade5_playlab_variables6_markdown_instruction: "In our game, how should we + score points?\r\n\r\n1. Add 1 to your `points` variable each time Dog hits + Cat with a piece of pie.\r\n2. Use the `when actor 2 touches anything` event + to trigger an update to your score. You can increment your variable by setting + `points = points + 1.`\r\n3. Get your score up to 10 to pass the level.\r\n\r\n**Note:** + Use the right arrow to throw pie!" + grade5_playlab_variables6ask_markdown_instruction: "This time, you need 100 + points to win! Don't worry though, you can choose how many points you earn + each time you score a hit!\r\nTry adding the `ask` block and changing the + number 1 out for the variable `value`.\r\n\r\n**Note:** Use the right arrow + to throw pie!" + grade5_playlab_variables7_markdown_instruction: "Nice, now let's make sure + this game isn't too easy to play!\r\n\r\nAny time Dog (actor 1) gets hit + by a sandwich from Cat (actor 2), you should lose a point.\r\n\r\nStart with + 10 points so it's not too hard. Let your score drop down from 10 to 0 to + pass the level." + grade5_playlab_variables71_markdown_instruction: "Here's our game from an + earlier stage but most of the code is hidden. We've added a new function + called `score_points.`\r\n<br/>\r\n<hr>\r\n<br/>\r\n<h4>\r\nEdit the function + so that a new parameter called `points` is added to `player_score`. \r\n<br/>\r\nThe + variable `player_score` should increase each time Dog tags Cat with pie, and + decrease each time that Cat tags Dog with a sandwich.\r\n</h4>\r\n<br/>\r\n<hr>\r\n*Note: + When you're done, click \"Run\" to play. When Dog scores 6 points, you will + move on to the next puzzle.*" + grade5_playlab_variables81_markdown_instruction: "We've added one last function + for you.\r\n<hr/>\r\n\r\n<h4>\r\nUse an `if` statement to program your game + to call the `level_up` function only when `player_score` becomes greater than + a certain number.<br/><br/>\r\n</h4>\r\n<i>For example: `player_score` > 6</i>\r\n\r\n\r\n<hr/>\r\n<i>Play + the game, and make it to level 3 to move to the next puzzle.</i>" + grade5_playlab_variables9_markdown_instruction: "Here's a function called + `patrol`. \r\n\r\nEdit `patrol` to move Cat up 400 pixels and then down 400 + pixels." + grade5_playlab_variables_freeplay_markdown_instruction: "Free Play time! Here + are all of the variables we've played with so far in this stage, as well + as a few more in case you want them. \r\n\r\nNotice that there are now so + many blocks in our toolbox that they need to be organized! Here, we've put + each piece into an appropriate category. Take some time to explore everything + that is available. When you're done browsing, make a game or story using + repeats, variables, and events. \r\n\r\n*Hint: scroll down to see all the + commands in the workspace.*" + grade5_playlab_variables_jump1_markdown_instruction: "This puzzle uses a hidden + function that makes the dog jump when the `up` arrow is pressed. The height + of the jumps can be set at the start of the game using the `jumpPower` variable. + Try to touch all of the flags!" + grade5_prompt_test_markdown_instruction: "Variables aren't always numbers. + What if you wanted to store a word or text? Experiment with the new `ask` + block." + gradeK_sequence_4_markdown_instruction: "Try this one yourself from the beginning.\r\n\r\n![](https://images.code.org/43001078c4df6feea1a6edf025192d85-image-1467929743355.gif)" + gradek_artist_loops1_markdown_instruction: "Help the artist draw this line + two times forward.\r\n\r\n![](https://images.code.org/7ddc7b43ef27197559c7defb0af56d03-image-1470776934855.gif)" + gradek_artist_loops2_markdown_instruction: "Our artist is trying to draw a + line five times, but can't get it right. Can you help?\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" + gradek_artist_loops3_markdown_instruction: "Now, use a `repeat` loop to draw + this line five times!\r\n\r\n![](https://images.code.org/6d79b5f8291bd8e11c427bff25f423c2-image-1467935497388.gif)" + gradek_artist_loops4_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nDraw a line seven steps long. This will + become our horizon.<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/c00b930eb5fb13ae946847adc51c9bd3-image-1467935631246.gif\" + width=\"300\"/>\r\n" + gradek_artist_loops5_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nLet's put a nice hill in the back.<br/><br/>\r\n</div>\r\n\r\n<img + src=\"https://images.code.org/bbbd114642d829029fc3b0566a4437e3-image-1477107329933.gif\" + width=\"300\"/>\r\n" + gradek_artist_loops6_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nUse the `repeat` loop to add waves to the + water.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/06a1120e0b2da4dbcf960a22c3abc248-image-1470787144854.gif\" + width=\"300\"/>\r\n" + gradek_artist_loops7_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nWe need a ladder up to the boat.<br/>\r\n</div>\r\n\r\n<img + src=\"https://images.code.org/6e4dc767e55d11400f35c6680bbfe1e3-image-1470788284437.gif\" + width=\"300\"/>" + gradek_artist_loops8_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\n**Challenge:** The stairs down to the dock + are broken. Help me fix them.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/53c68133f897895caa0369b4afa3ec3b-image-1470789463684.gif\" + width=\"300\"/>\r\n" + gradek_artist_loops9_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nTime to head back to land. Help me put down + stones so I don't fall in!<br/><br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/5ba9e8e5c1524eec2b0ba3e4684b0cef-image-1467936361364.gif\" + width=\"300\"/>\r\n" + gradek_artist_loopsA_markdown_instruction: "<div style=\"color: #7665a0; font-size: + 1.6em; line-height: 1.4em;\" >\r\nHelp me build steps to watch the ship sail + away.<br/>\r\n</div>\r\n\r\n<img src=\"https://images.code.org/0dfa647dbc835fae09989a0fbfd798c7-image-1470871168220.gif\" + width=\"300\"/>\r\n" + gradek_artist_loopsFP_markdown_instruction: "The artist saw something funny + in the distance. Draw what you think he saw.\r\n\r\n<hr/>\r\n<h3>Ideas</h3>\r\n<table>\r\n<tr>\r\n<td>\r\n<img + src=\"https://images.code.org/8f4f2a68dae2cf0aa82cc0a49ea4df04-image-1466787750475.gif\" + width=\"150\"/><br/>\r\n<h4>A Singing Snail</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/732ce5dd91c7f49f06e88da1a9f664f3-image-1466794904255.gif\" + width=\"150\"/><br/>\r\n<h4>A Big City</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/37fdd6fdd761df09fd4949d5e43f0a7f-image-1466795165642.gif\" + width=\"150\"/><br/>\r\n<h4>A Concert</h4><br/><br/>\r\n</td>\r\n\r\n<td>\r\n<img + src=\"https://images.code.org/f7bf86b0f86669d82ee2c1565738b9cb-image-1466794447737.gif\" + width=\"150\"/><br/>\r\n<h4>A Birthday Cake</h4><br/><br/>\r\n</td>\r\n\r\n</tr>\r\n</table>\r\n" + gradek_playlab_events1c_markdown_instruction: "Jorge the Dog wants to say \"Hi + there.\" Can you help him?" + gradek_playlab_events2c_markdown_instruction: "Help Jorge the Dog get moving + by connecting the ![](https://images.code.org/b3d6215901969328333d6393f8101c5b-image-1478142333199.png) + block to the ![](https://images.code.org/4f2130b2a3053695414a02c3d39ef864-image-1478143461271.png) + event block that is already in the workspace." + gradek_playlab_events3c_markdown_instruction: "Now, get Jorge to move right + when the ![](https://images.code.org/b99365eb23280f158e6ef570fe1c8a76-image-1478145132820.png) + button is clicked." + gradek_playlab_events4c_markdown_instruction: "Add events to have Jorge move + up and down when the ![](https://images.code.org/379493b95d158b273f1424538b1c635a-image-1478145402316.png) + and ![](https://images.code.org/f490d78efd81c21ab74286aefe7af097-image-1478145385132.png) + buttons are pressed." + harvey_pixelation_markdown_instruction: "# Make your own image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* + Encode an image of anything you like using `binary`.\r\n* The binary language + will be represented with `0` and `1` only.\r\n* You might want to do some + planning and sketching with graph paper first. \r\n* Depict something, perhaps + your name written out, your initials, an icon or logo of some sort.\r\n* Get + creative! The image doesn't have to be a perfect square, it can be long and + skinny." + jessie-test_markdown_instruction: "# Cool\r\n\r\n## Markdown\r\n\r\n### Instructions\r\n\r\n#### + here\r\n\r\n##### now\r\n\r\n###### forever" + kikiTesta_markdown_instruction: "Our adventurer wants to collect coins. But she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many as she can using just 4 blocks?" - 'Widget: Black and White Pixelation_markdown_instruction': "# Make your own - image of any size\r\n\r\n![](https://images.code.org/01c15fed4f1a2c6c3af531edc35e736e-image-1439596066108.png)\r\n![](https://images.code.org/24efcaa184d1fc852f37c32911b3b87c-image-1439596070178.png)\r\n![](https://images.code.org/c9a5d0fd5ba445b7f6b5744e08b50e49-image-1439596071878.png)\r\n![](https://images.code.org/f14e1b8dd722b0ca5bc54fa96b34f2eb-image-1439596074236.png)\r\n![](https://images.code.org/fe938c0c16453b9d461b4023098079df-image-1439596075744.png)\r\n![](https://images.code.org/02c88a7da51289b2f2d1f64bd8c97b28-image-1439596077514.png)\r\n![](https://images.code.org/309e3157dcfd91956181007f483f8e58-image-1439596079084.png)\r\n\r\n\r\n**Directions:**\r\n\r\n* - Encode an image of anything you like.\r\n* You might want to do some planning - and sketching with graph paper first.\r\n* DO NOT simply make an abstract - pattern, like a checkerboard. \r\n* Depict something, perhaps your name written - out, your initials, an icon or logo of some sort.\r\n* Get creative! The image - doesn't have to be a perfect square, it can be long and skinny.\r\n* Optional: - for fun, send your image bits to a friend using the <a href =\"https://studio.code.org/s/cspunit1/stage/11/puzzle/2\" - target=\"_blank\">sending bits widget.</a> *(note: this is just a link to - the sending formatted text level from a couple of classes ago)*\r\n\r\n\r\n" - 'Widget: Color Pixelation_markdown_instruction': "# Personal Favicon\r\n**Requirements:**\r\n<img - src = \"https://images.code.org/28fc33ea82996a10863688702af55e65-image-1439596268865.png\" - align=right hspace=20>\r\n\r\n* The icon must be 16x16 pixels. \r\n* You must - use the Pixelation Widget to encode the bits of color information.\r\n* The - image must be encoded with at least 12 bits per pixel.\r\n\r\n" - 'Widget: Text Compression_markdown_instruction': "Look for patterns (repeated - words or phrases) in the text. Enter the patterns you see into the dictionary - on the right. As you type entries into the dictionary, the symbol for the - entry is inserted into the text in place of the pattern." + level 'grade3_Loops_10_markdown_instruction: "Such a busy bee!\r\n\r\nHelp + Bee collect all of the nectar and make all of the honey with the fewest blocks + possible." + level 'grade3_Loops_11_markdown_instruction: "The shape of this path is different + from the others. \r\n\r\nCan you collect all of the nectar using as few blocks + as possible?" + level 'grade3_Loops_3_markdown_instruction: "Use a `repeat` loop to collect + all of the nectar." + level 'grade3_Loops_4_markdown_instruction: "Now use the `repeat` block to + collect all of the nectar and make all of the honey." + level 'grade3_Loops_5_markdown_instruction: "What a beautiful field of flowers! \r\n\r\nHelp + the bee visit each one.\r\n\r\nCan you find a way to do it with fewer than + 7 blocks?" + level 'grade3_Loops_6_markdown_instruction: "How many times can loops help + you in this puzzle? \r\n\r\nLoops are your friend! Use a few of them to complete + this puzzle with the fewest blocks possible." + level 'grade3_Loops_7_markdown_instruction: "Those flowers look tasty!\r\n\r\nCollect + nectar from each of the flowers using the fewest blocks possible." + love_spring_1_markdown_instruction: "Let's celebrate Spring! \r\n\r\nWe have + put some seeds in the ground to prepare for the season's flowers. Can you + cover them up so that the birds don't eat them?" + love_spring_2_markdown_instruction: "Our flowers are in full bloom! \r\n\r\nNow + we need the bee to grab nectar from each one so he can make plenty of honey + back at his hive!" + love_spring_3_markdown_instruction: "<b>The sun is shining, the birds are chirping, + and now it's time to play!</b> <br/><br/>\r\n\r\nRobin has chosen a number + between 10 and 30. \r\nUse the up and down arrows to make a guess about what + it is. \r\nClick Robin to submit your guess.\r\n\r\n- Robin will move up + when your guess is too high\r\n- Robin will move down when your guess is too + low\r\n- Where do you change how far Robin moves each time?\r\n- Where would + you change the range of numbers to choose from?\r\n- Can you change the code + so that Robin chooses a number between 1 & 20?\r\n\r\n<br/>\r\n<b>When you're + ready, press \"Run\" and play until you guess Robin's number!</b>" + maker workshop final_markdown_instruction: "# Challenge: Explore!\r\n\r\nNow + that you've tested the waters a bit, go explore the full extent of this tool. + On this level you'll see lots of new blocks and even some completely new + areas of functionality (like a database backend!). Feel free to go back to + previous levels for inspiration, or go off and building something completely + your own." + mike3bit_markdown_instruction: "# 3-Bit Color\r\n**Directions:**\r\n\r\n* We + start you with the 4x2 image Maddie was creating, but we've left out the + last few pixels. \r\n* Finish off the image by figuring out which colors are + missing and encoding them.\r\n" + mike3bitbird_markdown_instruction: "# 3-Bit Color\r\nHere's an example of + an image made with 3-bit color. Try changing it to understand how it works. + \r\n\r\n*If you want to reset the image, press \"Start Over\".*\r\n" + mike3bitfreeplay_markdown_instruction: "# 3-Bit Color\r\n\r\nYou have one last + chance to experiment and get creative with the pixelation widget. Make something + awesome and share it with your classmates!\r\n\r\n* *Hint:* You can copy and + paste the value of a pixel to use it repeatedly." + mike3bitmario_markdown_instruction: "# 3-Bit Color\r\n \r\n**Challenge:** \r\n\r\nA + careless binary coder typed in ONE extra 0 or 1 somewhere within this image's + data. The extra bit that is causing Mario to glitch out! \r\n\r\nDelete the + extra bit to restore Mario back to normal!\r\n\r\n![](https://images.code.org/8b7c17ba204a1a4d33e1bd6de7f01d76-image-1477306657312.54.57 + AM.png)" + multi-lesson Teaching and Student Support Plan_markdown_instruction: "<br><br>\r\n> + **NOTE: before you start this task, make sure you’ve reviewed the lesson resources + in this module, and have a good sense of how the lesson works. If you haven’t + already reviewed the materials, do that now and come back to this task later.**\r\n\r\n# + Teaching and Student Support Plan\r\n\r\n## Task Description\r\n\r\nNow that + you have a better sense of this lessons in this sequence, let’s think about + the types of supports students will need in order to be successful. Since + the curriculum is based on inquiry learning, lessons feature activities that + engage students in discovering core concepts themselves. It’s important to + think through implementation plans and student support. In this task you will + make a plan for teaching and student support **for one of the lessons in this + sequence** that takes into account differentiation strategies and make-up + work for absent students. Your teaching and student support plan should cover + the following: \r\n\r\n\r\n- **Which lesson in the sequence are you discussing?** + \r\n\r\n- **Details on how you will implement and differentiate the lesson:**\r\n\r\n + - An outline of any changes you will need to make to the lesson to fit your + local constraints or context (for example: pacing and time, dealing with classroom + setup, etc). \r\n - An overview of the types of student needs you’ll likely + need to support in your classroom (for example: students who are struggling + to understand the underlying concept; students who are already familiar with + the concept, but still have room to learn more; etc)\r\n - Your plan for addressing + each of the needs outlined above (for example: integrating extension activities + or other materials for students who already know something about the topic)\r\n + - How will you address or emphasize the connection between lessons in this + sequence? \r\n\r\n<br>\r\n- **Plan for catching up absent students:**\r\n\r\n + - How will absent students catch up on activities they missed? \r\n - How + will you use the fact that the lessons in this sequence are related and build + on one another to address make-up work? \r\n\r\nYou can type out your teaching + and student support plan in the box below, or you can upload a word doc or + pdf file. \r\n\r\n## Getting Credit for Completing this Task\r\n\r\n#### Task + Review Details\r\n\r\nIf this module is listed as your “focus area”, then + your response to the prompt above will be shared anonymously and reviewed + by your peers, and you will review the work done by other teachers. Reviewers + will be looking for thoughtful and thorough answers that demonstrate that + you have spent time considering how the lesson will play out in your own classroom. + Reviewers will have an opportunity to give feedback on your submission, and + you can respond to that feedback and resubmit. \r\n\r\nIn order to get credit + for completing this task, two reviewers need to agree that you have responded + to the prompts fully. If reviewers don’t feel comfortable making a decision + about your task submission, they can elevate to a facilitator to review. You + will always have a chance to address feedback from your reviewers and resubmit + your task! Reviewer feedback will show up at the bottom of this page, once + it’s available. \r\n\r\n<br><br>" + name 'CSD U3 Keypress Boolean Predict'_markdown_instruction: "# Make a Prediction: + keyDown()\r\nThe `keyDown()` block is the first of a new set of blocks that + will let us get input from the user. This is the first step on our road to + actually making games! See if you can figure out how the `keyDown()` block + works.\r\n\r\nWhat do you think will happen when you run the program and press + the \"up\" arrow? Write your prediction below and then run the program to + see if your prediction was accurate." + playEventsK1_markdown_instruction: "This game is called \"Play Lab\".\r\n\r\nSee + if you can figure out what each block does." + playEventsK2_markdown_instruction: "Jorge wants to say \"Hi there.\"\r\n\r\nCan + you help?\r\n\r\n![](https://images.code.org/f32d285fa6f45e1f8d042c04c55f32c8-image-1467988839292.gif)" + playEventsK3_markdown_instruction: "Jorge wants to be scratched behind the + ears!\r\n\r\nCan you make it so that when you click Jorge he is happy?\r\n\r\n![](https://images.code.org/04fb37990455b215e0f20884363092d0-image-1467988943134.gif)" + playEventsK4_markdown_instruction: "Can you make it so that Jorge the dog chases + Robin the bird when you click the up arrow?\r\n\r\n![](https://images.code.org/2fbf6c793bb77a961fa7a52f27e4c59d-image-1467989013878.gif)" + playEventsK5_markdown_instruction: "Now add code so that Robin flies away when + you click the forward arrow.\r\n\r\n![](https://images.code.org/a7e224c5f13e39e5342011f8a76d3b6b-image-1467989101328.gif)" + playEventsK6_markdown_instruction: "Have Robin talk back to Jorge when you + click on her.\r\n\r\n![](https://images.code.org/fc80b1febbb7a472026b6bf2c535b2f4-image-1467989171517.gif)" + playEventsK7_markdown_instruction: "What else can you do in this fun scene?\r\n<br/>\r\n\r\n<h5>\r\n<details>\r\n<summary><b>Need + some ideas?</b></summary>\r\n\t<br/>\r\n\t<h5>\r\n\t\t<ul>\r\n \t<li><strong>Conversation</strong> + - Have the sprites talk to eachother when you click on them.</li>\r\n <li><strong>Pinball</strong> + - Make one sprite play a noise when the other runs into it.</li>\r\n <li><strong>Arrows</strong> + - Write a program so when each arrow key is pressed, the sprite moves in that + direction!</li>\r\n </ul>\r\n\t</h5>\r\n</details>\r\n</h5>" + pre-assessment survey q24A_markdown_instruction: "What computer science skills + do you use in your everyday life? " + pre-assessment survey q25A_markdown_instruction: "If yes, what computer science + course(s) had you taken before your current computer science class? " + sample1_markdown_instruction: "Our adventurer wants to collect coins. But + she can only use 4 blocks to get them. \r\n\r\nCan you help her grab as many + as she can using just 4 blocks?" + sample10a_markdown_instruction: "<h4>You have helped the adventurer and her + bee! \r\nAs a reward, please stay and play around in my magical village. \r\n<br/>\r\n\r\nYou + should have everything you need to create a game of your own.</h4>" + sample4_markdown_instruction: "Our adventurer has found a stash of coins in + this cave.\r\n\r\nCan you help her grab as many as she can using just 7 blocks?" + sample6_markdown_instruction: "**Challenge:** Help bee get all of the nectar.\r\n\r\nThis + puzzle is meant to be hard. You may need to try lots of times." + sample8_markdown_instruction: "Look at this trove of coins! \r\n\r\nHow many + can you get the adventurer to grab?" + test externallink_markdown_instruction: "# Creative Commons\r\n\r\nHead to + the Creative Commons website to learn more about CC licensing models." + test peer review_markdown_instruction: "At this point you've seen 7 of the + 14 lessons from unit 1. Thinking about those lessons, and looking across the + other lessons in <a href=\"curriculum.code.org/csp/unit1/\" target=_blank>unit + 1</a> work with your partner to develop a set of recommendations for using + group work and peer learning in Unit 1. Your recommendations should include:\r\n\r\n- + Which lessons or activities provide opportunities for group work and peer + learning? \r\n- What recommendations do you have for using group work and + peer learning in Unit 1 lessons? \r\n\r\nUse the space below to record any + recommendations or commentary you have for others. Once you submit, another + participant will review chance to send you feedback! \r\n\r\n" + test_anonymous_student_survey_next_class_markdown_instruction: "What you will + do next after this class?" + test_anonymous_student_survey_why_class_markdown_instruction: "Why are you + doing this class? Give at least two reasons." + test_sarah_markdown_instruction: "hi" + test_sarah_freeresponse_markdown_instruction: "This is the question at hand...." + testing code callout_markdown_instruction: "# Click the link!\r\n[Show me where + the sprite moves](#triggercallout=code_triggered)\r\n" + the Journal of Peer Learning_markdown_instruction: "The following link is to + a journal out of Australia that focuses on publishing scholarly research that + investigates innovations in peer learning and the implementation and evaluations + of peer learning programs:"