Procházet zdrojové kódy

Add White Belt Guide

michtang před 3 roky
rodič
revize
4efc941e32

+ 15 - 0
01-white/01-00-coded-messages.js

@@ -0,0 +1,15 @@
+/**
+ * Ninjas perform an activity in which they discover how computers interpret text.
+
+Sensei Notes
+* Provide the Ninja with two pieces of paper, a pen, and scissors.
+* Instruct the Ninja to write their name twice, once in all capital letters and once in all lowercase letters.
+* Make sure they leave enough room to cut each letter out.
+* Have the Ninja arrange the letters to recreate their name using a mix of upper and lowercase letters,
+modeling if necessary.
+* Have the Ninja make and record as many combinations as they can. It's okay if they don't make every single
+combination.
+* Explain how while humans read CoDeY and coDEY as the same thing, computers do not.
+Provide an example of when you made a mistake like this and how it is okay.
+
+ */

+ 55 - 0
01-white/01-01-zombie-island.js

@@ -0,0 +1,55 @@
+/** 
+Ninjas familiarize with GDP and altering object properties:
+* scale (in the X and Y direction)
+
+Sensei Notes
+* Guide the Ninja through their first time navigating through the GDP.
+* Stress the importance of reading the manual carefully.
+* The first few games focus on adding and modifying GDP objects.
+*Help the Ninjas navigate through the Game Objects menu and the Events, Debug, and Properties tabs.
+* If the Ninja is having issues viewing the screen, assist in making the text bigger or smaller.
+* The goal of this game is for the Ninjas to have a fun and welcoming introduction to the GDP and Code
+Ninjas.
+* Cultivate curiosity and problem solving, not perfection and copy/pasting.
+* There is no coding in this activity.
+* The Ninja should be able to navigate the GDP and change the properties of existing objects.
+
+Solution Steps
+1 Make sure the Ninja understands the Student Dojo interface.
+2 Make sure the Ninja knows the difference between Code Combat, the GDP, and the Curriculum.
+3 If the Ninja is not in the White Belt path, help them navigate to it. Make sure they click the correct game.
+4 Help the Ninja find and understand the Start Game and Stop Game buttons.
+S Let the Ninja play the game for a few minutes. Remember that this first game will set the tone for the Ninja's
+future experiences in your Dojo.
+6 Help the Ninja understand that the Game Objects menu contains only some of the objects in the Scene. In
+the early belts, only the objects that are referenced in the curriculum will be visible to the Ninjas.
+7 Make sure the Ninja understands how the Game Objects menu works.
+8 Make sure that the cannonBall object was selected. Explain that the Properties tab will change only the
+selected object.
+9 Currently, the GDP will not update an object until the property box loses focus. Get the Ninjas in a habit of
+changing a value and clicking on a different box or area of the Properties tab.
+10 Verify that the Ninja's scene looks like the pictures in the manual.
+11 Help the Ninja find the Scale Y property box. Remind them that to see updates they must click off the box.
+12 Let the Ninja play their modified game for a few minutes.
+13 Make sure the Ninja selects the cannonBall game object from the Game Objects menu.
+14 Let the Ninja play around with the Scale X and Scale Y values. If they play with other values, let them know
+that they see unexpected changes or no difference at all.
+15 Help the ninja find the zombie and gZombie game objects. Both the objects are off the screen, so any
+changes they make will not be seen until they play the game and the zombies appear on the screen.
+16 Let the Ninja play the game for a few minutes. Help them find the save and submit buttons. Explain this
+process and how it lets the Senseis grade their games.
+
+Sensei Stops
+5 Tell a Sensei how to go to the Dojo, open the GDP, and open a Gome Scene.
+Correct the Ninja and model where necessary. Ask them more questions like "How did you know which
+game scene to open?" and "How do you stop a game?"
+10 Increasing the value of SCALE X stretched the cannonball horizontally. Tell a Sensei what you think will
+happen to the cannonball if you increase the value of SCALE Y.
+Ask the Ninja to explain their reasoning behind their prediction. Guide them as they change the SCALE Y
+value, then ask them what it did. Ask them to define scale, x, and yin their own words.
+15 Tell a Sensei how you changed the size of the zombies. Explain how it was similar and how it was different
+from when you changed the size of the cannonball.
+Ask the Ninja to change the scale of one of the zombies again and watch how they do it. If they are stuck or
+struggle, gently nudge them in the right direction.
+
+**/

+ 58 - 0
01-white/01-02 Shapeshifter.js

@@ -0,0 +1,58 @@
+/**
+Ninjas investigate how changing an object's properties visually affects the object in the scene. 
+* scale
+* opacity
+* rotation
+* width/height
+
+Sensei Notes
+* The goal of this activity and the other activities in section 1 is to continue to develop familiarity with the GDP
+before Ninjas start coding.
+* Ninjas are instructed to add any shape, change the properties, and then delete the shape. If they struggle,
+then help and have them repeat the process with each shape.
+* The Z value is briefly touched on, but it might require a more detailed explanation. Work with the Ninja to
+find the object in the physical Dojo that is farthest away from the Ninja. Assign this real-world object a z
+value of 0. Then find another object on the Ninja's desk like a laptop or pen and assign it a z value of 5. Have
+the Ninja assign four other objects with appropriate z values of 1, 2, 3, and 4 . Explain how the object with a z
+value of 2 is closer to the Ninja than the object with a value of 1, but it is farther away than the object with a
+value of 4.
+* Make sure that the Ninjas don't get overwhelmed with all the shapes and properties in the GDP. Familiarity
+with the interface is more important than understanding each property.
+* There is no coding in this activity.
+* The Ninja should be able to navigate the GDP and add new objects.
+* The Ninja should be able to change the properties of objects.
+
+Solution Steps
+1 As the Ninja navigates to the correct scene, ask them "What's the next step?" to see if they can navigate the
+GDP.
+2 Explain that this activity requires the student to add and modify their very own shapes. They will need to
+recreate the logo in the scene, but in the next activity they will have complete creative freedom.
+3 The manual uses a circle, but let the Ninja add any shape to the scene. It will be deleted in a later step.
+4 Help the Ninja select their shape and open the Properties tab. Explain that they can either click on the shape
+in the scene or the name of the shape in the Game Objects menu.
+5 Let the Ninja play with the properties and investigate what each does. During your Sensei Stop, ask what
+they did to their shape.
+6 Again, let the Ninja play with the properties and investigate what each does. If the Ninja selected a circle,
+discuss why rotation doesn't seem to do anything. Explain how you cannot see the changes of the speed
+property because the object is not moving.
+7 Let the Ninja play with the colors of the object. If the shape has any special properties, let the Ninja play with
+and investigate what each does.
+8 Help the Ninja find the delete button. Stress that you cannot recover a deleted object.
+9 Explain the four shapes that are required. Have the Ninja verbalize how they think they need to approach the
+problem.
+10 Make sure the Ninja's logo is like the image in step 9.
+
+Sensei Stops
+5 Tell a Sensei what the OPACITY property did to your shape. What is the maximum value? What is the
+minimum value?
+The definition of opacity is never explicitly stated in the manual. Ninjas should experiment and come up with
+their own definition and understanding. If they struggle, tell them to slide it to the right and ask them about
+what the shape looks like and the value. Tell them to slide it to the middle and ask them what changed about
+the shape and what changed about the value. Ask them to predict what will happen when the slider is all the
+way to the left.
+10 Tell a Sensei what you did to create your logo. What shape did you odd first? How did you make sure the
+shapes were in the correct places?
+Ask the Ninja if they thought this was easy or hard. The next activity requires them to build their own scene
+from nothing, so they must understand how to add objects and edit properties.
+
+ */

+ 39 - 0
01-white/01-03-PY-digital-painting.js

@@ -0,0 +1,39 @@
+/**
+Ninjas use their knowledge of GDP objects to create their own static scene.
+ * application of opacity, scale, rotation, size
+
+NOTE: This activity is generally skipped because they 02-03 Under the Stars
+has them doing the same thing in addition to adding some code to make it more
+interesting
+
+Sensei Notes
+* The goal of this activity and the other activities in section 1 is to continue 
+to develop familiarity with the GDP before Ninjas start coding.
+* Provide the Ninja with paper and drawing utensils, ideally colored pencils.
+* If the Ninja is having a difficult time deciding what to draw, ask them about 
+some of their favorite movies, shows, or games.
+* If a Ninja wants to jump right into the GDP, make sure that they take the time to
+plan out what they aregoing to create. Stress that it is okay to change their ideas 
+in the GDP later.
+* There is no coding in this activity.
+* The Ninja should be able to navigate the GDP and add new objects.
+* The Ninja should be able to change the properties of objects.
+
+Solution Steps
+1 Provide the Ninja with paper and drawing utensils.
+2 Explain that the GDP only knows a few basic shapes but that they can create complex objects out of many
+simple shapes.
+3 Help the Ninjas navigate to the correct scene. Make sure they know where to do and can do it without
+assistance.
+4 Review the Ninja's sketch and ask how they are going to begin to recreate it in the GDP.
+5 Review the Ninja's final scene to see if they demonstrated mastery of adding and modifying GDP shapes.
+
+Sensei Stops
+5 Tello Sensei about your digital pointing. What is it? Why did you make it? Was it easy or hard to turn o real
+drawing into o digital piece of art?
+The goal of this activity was to let the Ninja be creative while also increasing their proficiency navigating the
+GDP. This is also a good time to make personal connections with your Ninja. Listen to their answers and ask
+follow-up questions. Ask if there is a story behind their scene. Do they like art or programming more? Do you
+have a relatable story or experience to share with the Ninja?
+
+ */

+ 18 - 0
01-white/02-00-ninja-says.js

@@ -0,0 +1,18 @@
+/**
+Ninjas are introduced to the concept of functions by verbally instructing a "Sensei Robot" that can only perform
+8 simple operations.
+
+Sensei Notes
+* In this activity, the Sensei will be at the board with a marker and the ninja will instruct the Sensei how to draw
+the ninja image.
+* If the Ninja asks you do perform an action that is not one of the 8 listed, then respond with "I do not know
+what that means."
+* If the Ninja uses a command, perform exactly what they ask. If they say "move up" but don't specify how
+long, then move up forever.
+*  The goal is to provide a visual "anchor" for how a programmer interacts with a computer. You should be able
+to reference this activity in the future when you need to explain why code is behaving a certain way. For
+example, if a Ninja codes to move left when the left arrow is pressed but they leave out the negative sign,
+the computer is doing exactly what is told to do. The Ninja must alter the instructions to correct the
+computer's output.
+
+ */

+ 76 - 0
01-white/02-01-spin-a-star.js

@@ -0,0 +1,76 @@
+/**
+Ninjas code their first function by using the built in GDP spin function. They reference an object by name and
+investigate how changing parameters affect the targeted object.
+
+New Vocabulary and Concepts
+* GDP spin() function
+* Javascript semicolons
+* parameters
+
+Reinforced Vocabulary and Concepts
+* Functions
+* GDP Objects and Properties
+* Object Names
+
+Sensei Notes
+* This activity is the Ninja's first introduction into coding.
+* The Ninjas need to add and customize a star.
+* They may decorate the scene, but they must have one object named "star" to complete the coding portion
+of the activity.
+* All the coding in White Belt takes place in the scene's update every frame event. If you see a Ninja coding on
+an object or in a different event, help them move their code to the right place.
+* Reference the Coded Messages and Ninja Says activities when explaining functions. Functions, as well as
+objects, have unique case sensitive names. The GDP only understands spin(object, rate), so stress that the
+Ninja needs to make sure they have the exact name and the correct parameters. You can reference the
+Debug tab if you feel the Ninja will understand it.
+* Semicolons are not required for JavaScript code to run and execute but using them is a good practice to help
+communicate the concept of statements.
+* This activity has a lot of new vocabulary, so consider writing definitions on the board and having the Ninja
+come up with examples or their own ways to explain the concepts.
+
+Solution Steps
+1 Make sure the Ninja can navigate to the correct scene on their own.
+2 Make sure the Ninja adds only one star to the scene. If they want to add more shapes, then tell them they
+can do that after they complete the lesson content. It is best if the scene is not cluttered with other objects.
+3 Let the Ninja customize their star. Make sure that it you will be able to see it being rotated . The rotation of a
+star with a very large number of points or a similar inner and outer radius will be difficult to see. The object
+name is important from this activity on. Make sure that the Ninja keeps this object's default name of star.
+4 Make sure the Ninja is in the scene's update every frame event. All coding in the White Belt will take place
+here, so it is essential that the Ninjas develop a habit of checking where they are before they start coding.
+S Instruct the Ninjas to copy the code exactly. Make sure they know the location of each character on the
+keyboard. Explain the purpose of a semicolon.
+    spin(star, 10)
+6 Ask the Ninja if they predicted correctly. If not, have them explain what happened. Ask the Ninja to connect
+the result in the scene to the code.
+7 Explain the three pieces of the spin function. Explain the three rules of functions. If the Ninja doesn't seem to
+understand, work with them to come up with real world actions that could have parameters that alter the
+outcome. For example, riding a bike could have a parameter of speed.
+8 Make sure the ninja changes only the second parameter. The star should spin the same direction, just
+significantly faster.
+    spin(star, 10); 
+    spin(star, 200);
+9 Make sure the ninja changes only the second parameter. The star should spin the same direction, just
+significantly slower.
+Code Diff:
+    spin(star, 200); 
+    spin(star, l);
+10 Ask the Ninja how they feel about writing their first line of code. Ask them to explain what each part of the
+code does.
+
+ */
+spin(star, 1);
+
+/**
+Sensei Stops
+5 Tell a Sensei what you think is going to happen when you start your game. Will the star move? How?
+Make sure that the Ninja has the correct line of code. Before the Ninja plays the game, they should predict
+what will happen to their star. No matter what their answer is, ask them why they thought that. If they have
+a fundamental misunderstanding, reference the Ninja Says activity to get them back on the right path. If the
+Ninja pressed play too early and has already seen what happens to the star, get them to explain how the line
+of code caused the star to spin.
+10 Tell a Sensei what happens when you change the second parameter of the spin function. What happens
+when your number is big? What about o smo// number?
+It is important for the Ninja to make the connection that we are spinning the star at a rate. If we change the
+rate, then the speed of the spin changes. They should be able to explain that a bigger number makes it spin
+faster and a lower number makes it spin slower. Encourage them to experiment with different numbers.
+ */

+ 60 - 0
01-white/02-02-seeing-stars.js

@@ -0,0 +1,60 @@
+/**
+Ninjas practice using the spin function on three different objects.
+
+New Vocabulary and Concepts
+* Logs and Errors
+
+Reinforced Vocabulary and Concepts
+* Functions and Parameters
+* GDP spin() function
+* Object Names
+
+Sensei Notes
+* The Ninjas will not add any objects to the scene.
+* This activity introduces an error on purpose to stress the importance of GDP object names. The Debug tab is
+not a focus of the White Belt.
+
+Solution Steps
+1 Make sure the Ninja opens the correct scene.
+2 Make sure the Ninja is on the correct object and in the correct event.
+3 This piece of code is the same as the first piece of code in the previous activity. The Ninjas need to realize
+that the GDP acts on objects with specific names. There is not an object named "star' in this scene, so the
+GDP does not know what to do.
+    spin(star, 10);
+4 No stars should be spinning. You can ask the Ninja what they think is wrong, but they should not know why
+at this point.
+5 This is could be the Ninja's first scene that is "broken," so stress that debugging is part of programming.
+There is no "right" or "wrong" answer or way to program. The Error in the console should be "ReferenceError:
+star is not defined."
+6 Explain that each object has a unique name and that the names of the three stars in this scene are
+yellowStar, orangeStar, and greenStar.
+7 Have the ninja change only the first parameter from star to yellowStar. When the Ninja plays the game, only
+the yellow star should be spinning.
+8 This is the first time that the Ninja is adding more than one line of code. Make sure they understand the enter
+key moves to the next line. When the Ninja plays, the yellow and orange stars should be spinning at the
+same exact rate.
+9 This is the first time Ninjas are expected to produce their own line of code from nothing. If they struggle,
+help them use the existing two lines as a model for the new line. The first parameter should now be
+greenStar.
+10 Before the Ninja submits their game, make sure they understand the purpose of functions. We can ask the
+GDP to perform actions on objects. While pieces of functions might change, they always have a name,
+parentheses, and zero or more parameters.
+
+ */
+
+spin(yellowStar, 10);
+spin(orangeStar, 10);
+spin(greenStar, 10);
+
+/**
+Sensei Stops
+5 Tello Sensei whot you think this error means. What does it mean when it soys, "star is not defined?"
+Ask the Ninja what "star" is in this context. Remind them that it was referring to an object in the scene. Ask
+the Ninja what happens if you call them by the wrong name? Would they respond? Of course not! That must
+mean that we don't have the correct name of any of the stars.
+10 Tell a Sensei about line 3 of your code. How did you know what name to use? What are the components of a
+function?
+It is important to understand the thought process of the Ninja. They came up with the code on their own, so
+ask how they knew what to type. See if they remember the definitions of function and parameter. See if they
+remember the parameters of the spin function.
+ */

+ 51 - 0
01-white/02-03-PY-under-the-stars.js

@@ -0,0 +1,51 @@
+/**
+Ninjas will use their knowledge of the GDP, GDP objects, and the spin function to create their own scene.
+
+New Vocabulary and Concepts
+* GDP Asset Library
+* Negative Numbers
+
+Reinforced Vocabulary and Concepts
+* Functions and Parameters
+* GDP Objects and Properties
+* GDP spin() function
+* Object Names and Renaming
+
+Sensei Notes
+* The Ninja needs to demonstrate mastery of the GDP by creating a scene from scratch.
+* There are a lot of Ninja characters, backgrounds, and other images in the GDP Assets that can be accessed
+by clicking on the magnifying glass on the bottom white bar.
+* The Ninja should compose a scene to the best of their ability.
+* Encourage them to experiment with changing shape properties.
+* Stress the importance of knowing the name of each object. Step 3 shows how to rename an object.
+
+Solution Steps
+1 Make sure the Ninja opens the correct scene.
+2 Encourage the Ninja to be creative within the bounds of the activity. The end goal is to use the spin function
+on their own game objects. Changing the offset of an object will drastically change how the object responds
+to the spin function. By using an offset, you can simulate shooting stars. Encourage them create complex
+items out of the simple shapes. For example, a telescope can be made from rectangles for the legs, an ellipse
+for the body, and a circle for the lens.
+3 The GDP gives generic names with numbers to all new objects. Help the Ninja pick appropriate names.
+4 Make sure the Ninja is coding in the scene's Update Every Frame event. If they coded somewhere else, help
+them copy and paste the code into the correct location. Because they will be adding to the scene, it is easy
+to lose track of what object is selected. Point out that the name of the selected object is always directly
+under the Events tab. If the Ninjas have a hard time understanding a negative number, help them write the
+code and then ask them what changed.
+5 Before the Ninjas submit their scene, verify that they have used the spin function properly on at least two
+objects. Ask them what a negative number does to the spin direction of an object.
+
+ */
+
+//All Ninja scripts for this activity should be unique. At minimum, there should be two spin functions. One
+//function should have a positive spin rate and the other should have a negative spin rate.
+spin(firstObject, 48);
+spin(secondObject,-330);
+
+/**
+Sensei Stops
+5 Tell a Sensei how you created your scene. Did you use any GDP assets? How did you change the properties?
+Explain how you used the spin function.
+This is the last activity before new computer science concepts and GDP functions are introduced. Ensure
+that the Ninja can explain in their own words what they have learned up to this point.
+ */

+ 14 - 0
01-white/03-00-myopic-mapper.js

@@ -0,0 +1,14 @@
+/**
+A Ninja and a Sensei will work together to create a detailed map of the Dojo by communicating only verbally.
+
+New Vocabulary and Concepts
+* Coordinates
+
+Sensei Notes
+* Provide the Ninja with a piece of graph paper. This can be special graph paper, or you can find a template
+online to print.
+* The goal of this activity is to give a concrete reference point for a coordinate system.
+* If the Ninja does not at first come up with their own coordinate system the first time, that is okay. You can
+talk about what was difficult about communicating and suggest coordinates to solve the problems.
+* Connect the coordinate system created in this activity with the GDP coordinate system.
+ */

+ 64 - 0
01-white/03-01-wall-bounce.js

@@ -0,0 +1,64 @@
+/**
+Ninjas will use the GDP's moveX function to move a ball and then write the if statement that bounces the ball if
+it touches the wall.
+
+New Vocabulary and Concepts
+* Boolean Logic
+* GDP moveX() function
+* If statements
+
+Reinforced Vocabulary and Concepts
+* Functions and Parameters
+* Object Names
+
+Sensei Notes
+* This is the first introduction to Boolean logic.
+* Make sure the Ninja understands that true is like yes or on, and that false is like no or off.
+
+Solution Steps
+1 Make sure the Ninja opens the correct scene.
+2 To simplify this activity, some of the code is hidden from the Ninja. Make sure the focus is on the logic of
+why and when code is executing and not how it is happening.
+3 Make sure the Ninja is in the scene's Update Every Frame event. The name of the object is circle.
+    moveX(circle);
+4 Relate the moveX function to the spin function. Ask the Ninja to explain the similarities and differences
+between the two.
+5 The ball should not bounce, but the text should change from false to true.
+6 Help the Ninja type the if statement, making sure that the brackets and parentheses are in the correct
+places. This is a lot more code than in previous games but introducing Boolean logic will allow for more
+interactive games. Explain that moveX is a GDP function and isTouchingWall is a function that this circle
+knows.
+    if(circle.isTouchingWall()) {
+
+    }
+7 Explain the different parts of an if statement. Walk through the example of looking outside and grabbing an
+umbrella if it is raining . Ask the Ninja to come up with another real-world situation and write a code version
+of it together.
+8 Help the Ninja place the new line of code inside the if statement. Explain again that we are asking the circle
+to perform its function named bounce.
+    if(circle.isTouchingWall()) {
+        circle.bounce();
+        }
+9 The circle should bounce every time it hits the wall.
+10 Before the Ninja submits the scene, make sure they have a basic understanding of if statements and
+Booleans.
+*/
+moveX(circle);
+
+if(circle.isTouchingWall()) {
+    circle.bounce();
+}
+
+/**
+Sensei Stops
+5 Tell a Sense/ why your circle doesn't bounce. What do is mean when circ/e.isTouchingWo/1 is fa lse? What
+about when it is true?
+The Ninja should recognize that we are just asking the ball to move. We have not asked it to bounce yet, but
+it is reporting when it is touching the wall. Ask the Ninja to describe what the circle looks like when it says
+false and compare it to when it says true.
+10 Act out what is happening in the scene with a Sense/. You ore the circle, so soy out loud what you ore
+thinking! You must always move. How often do you ask yourself if you are touching the wall? Once? Every
+step? What happens if you touch the wall?
+Help the Ninja act out this activity. You can use the real walls in the Dojo or come up with other bounds. The
+Ninja should understand that the circle is constantly asking itself if it is touching a wall.
+ */

+ 100 - 0
01-white/03-02-laser-chase.js

@@ -0,0 +1,100 @@
+/**
+Ninjas create two if statements to use the mouse to control the position of an object in the scene.
+
+New Vocabulary and Concepts
+* Comparison Operators
+* GDP getMouseX()
+* GDP .x() function
+* Pseudocode
+
+Reinforced Vocabulary and Concepts
+* Boolean Logic
+* Functions and Parameters
+* if() statements
+* Object Names
+
+Sensei Notes
+* This is the first introduction to user input.
+* This activity uses if statements and Boolean logic.
+
+Solution Steps
+1 Make sure the Ninja opens the correct scene.
+2 Let the Ninja play the game so they can see what functionality needs to be added.
+3 This step introduces pseudocode. As the code becomes more complex, the manual places a larger focus on
+the logic rather than the syntax.
+4 Work with the Ninja to brainstorm and think about the first piece of pseudocode and the situations it applies
+to. Lead them to discover we need a second if statement that covers when the laser is to the right of the
+mouse. Help the Ninja write their pseudocode statement. It is okay if it is not perfect.
+5 Compare and contrast the Ninja's pseudocode with the provided pseudocode.
+6 Make sure the Ninja is coding in the scene's Update Every Frame event. Reference the pseudocode before
+the Ninja types the if statement. The GDP's editor will say there is an error. This is because we have an
+incomplete if statement. This will be fixed in the next step.
+    if(){
+
+    }
+7 Make sure the Ninja writes the new line of code inside the parentheses. All GDP objects have an x and y
+function that can be used to get or set the object's position. The error is now gone, but the game hasn't
+changed. Ask the Ninja what functionality still needs to be coded.
+    if(laser.x()) {
+        
+    }
+8 This is the introduction to operators. If the Ninja does not understand what the less than operator means,
+then ask them if a real -world object's age or size is less than another object's age or size.
+    if(laser.x() < ) {
+
+    }
+9 Make sure the Ninja writes the getMouseX function in the correct location of the if statement. This function
+will return the x value of the current or last known mouse position.
+    if(laser.x() < getMouseX()) {
+
+    }
+10 Make sure the Ninja writes the new line of code inside the body of the if statement. Since we want to easily
+control the direction that the laser moves, we are using a version of moveX that takes the speed as a second
+parameter. If the second parameter is left out, then the laser will move at the rate of speedX that is set
+directly in the properties tab. A speed of 400 is not too slow or too fast, but the Ninja can change it if they
+want.
+    if(laser.x() < getMouseX()) {
+        moveX(laser, 400);
+    }
+11 Make sure the Ninja types the new if statement after the first. There will be another error like in step 6.
+    if() {
+        
+    }
+12 Help the Ninja write the entire conditional statement using the pseudocode and the first if statement. Make
+sure they use the greater than sign.
+    if(laser.x() > getMouseX()) {
+        
+    }
+13 Help the Ninja write the body of the second if statement using the pseudocode and the body of the first if
+statement. Mention that since we want the laser to move to the left, we want to use a negative speed.
+    if(laser.x() > getMouseX()) {
+        moveX(laser, -400);            
+    }
+14 This step asks the Ninja to change the speed being passed to the moveX function. Make sure the Ninja
+changes it at least twice to see how a smaller and a larger number affects the speed.
+15 Before the Ninja submits the scene, verify that the script is correct.
+
+ */
+if(laser.x() < getMouseX()) {
+    moveX(laser, 400);
+}
+
+if(laser.x() > getMouseX()) {
+    moveX(laser, -400);            
+}
+
+/**
+Sensei Stops
+5 Read your pseudocode if statement to a Sensei. Explain what your condition is and what happens when that
+condition is met. Why is it helpful to use pseudocode?
+If the Ninja's pseudocode is incorrect, discuss what is wrong and how to correct it. Pseudocode is important
+because it lets you plan before you start coding.
+10 Play your game and explain your code to a Sensei. Be sure to explain the three parts of the condition and the
+code in the body. What do you think you need to change for the second if statement?
+Right now, the laser will only move right towards the mouse. Have the Ninja connect the code to the action
+in the scene. Have the Ninja think about what parts of the if statement will need to change to make the laser
+move in the opposite direction.
+15 Explain to a Sensei how planning out your code before you program it is helpful. Was it easier to understand
+the real code ofter you wrote out the pseudocode?
+Compare planning with pseudocode to brainstorming and outlining before writing in school.
+ */

+ 0 - 0
01-white/03-03-PY-space-zapper.js


+ 22 - 7
02-yellow/02-03-PY-RollingDice.js

@@ -1,12 +1,12 @@
 //CN Sensei Guide Solution
 
-//Scene - Initialize when Scene Starts
+//*******Scene - Initialize when Scene Starts*************//
 $this.dieClick=false;
 
 //totalText does not need to be called from $this.scene
 //We can access totalText just by totalText.text()  
 
-//Scene - Update Every Frame
+//***********Scene - Update Every Frame********************//
 if($this.scene.dieClick){
     var roll1=Math.round(random(5));
     var roll2=Math.round(random(5));
@@ -17,16 +17,31 @@ if($this.scene.dieClick){
     $this.scene.dieClick=false;
 }
 
-//die1 and die2 Objects: Mouse Click Events
+//************die1 and die2 Objects: Mouse Click Events**********//
 if(!$this.scene.dieClick){
     $this.scene.dieClick=true;
 }
 
-//Alternate Solution - how our senseis teach it
-//We eliminate the use of the boolean to detect the mouse
-//click which is a topic taught in the next section
+/* 
+Alternate Solution - how our senseis teach it
+We eliminate the use of the boolean to detect the mouse
+click which is a topic taught in the next section
 
-//die1 - Mouse Click Event
+Decomposition of Rolling Dice:
+* When die is clicked, 2 numbers need to generated and
+stored into 2 variables
+* The variables will be use to show the correct image
+using frameIndex()
+* The two variables are added together and stored in 
+a separate variable
+* This variable (sum) will be displayed in a label - which
+will be an incorrect sum
+* last part is figuring out how to make the sum correct
+*/
+
+
+
+//*********************************die1 - Mouse Click Event**********************************************//
 //Use random() to generate numbers to simulate die roll. 
 //Good place to teach ninjas about the possible numbers when running random(5) - 0,1,2,3,4,5
 //This happens to coincide with the frame indexes for the die values 

+ 1 - 1
02-yellow/03-01-hiding-ninja.js

@@ -1,4 +1,4 @@
-//Scene Object: Initialize When Scene Starts Event
+//************************Scene Object: Initialize When Scene Starts Event******************************************//
 ninja.toggleVisible(); //we are exploring booleans, toggles are like light switches, it is either on or off
 
 if($this.scene.state()=="PLAY"){

+ 8 - 6
02-yellow/03-02-hiding-ninjas.js

@@ -1,8 +1,10 @@
-//ninja1 - Mouse Click Event
-//for the teaching, we want to ask ninjas what we want to happen
-//next we need to know when we want it to happen
-//and how will we make this happen -- try to ilicit if() 
-//should only happen IF ninja is visible
+//**************ninja1 - Mouse Click Event*********************//
+/**
+For the teaching, we want to ask ninjas what we want to happen
+next we need to know when we want it to happen
+and how will we make this happen -- try to ilicit if() 
+should only happen IF ninja is visible
+**/
 if($this.visible()){
     //if the ninja is visible, we'll do the following:
     $this.toggleVisible();
@@ -11,7 +13,7 @@ if($this.visible()){
     
 }
 
-//Scene - initialize when scene starts
+//*********Scene - initialize when scene starts**************//
 $this.score = 0;
 //following code is pre-populated:
 if($this.scene.state() == "PLAY"){

+ 2 - 2
02-yellow/03-03-whack-a-ninja.js

@@ -1,9 +1,9 @@
 //Score decreases when background is clicked
-//Background Object - Mouse Click Event
+//*******Background Object - Mouse Click Event******//
 $this.scene.score -= 1;
 score.text($this.scene.score);
 
-//Scene - Initialize When Scene Starts
+//******Scene - Initialize When Scene Starts*******//
 if($this.scene.state() == "PLAY") {
     ninja_1.visible(false);
     ninja_2.visible(false);

+ 3 - 3
02-yellow/03-04-ninja-supplies.js

@@ -2,7 +2,7 @@
 //so game could be buggy
 //Buggy on Brave Browser, use Chrome
 
-//Sword Object - Mouse Button Up Event
+//***********Sword Object - Mouse Button Up Event************//
 if ($this.isTouching(ninja)) { 
     $this.remove(); // remove the original sword 
     star.toggleDraggable(); // make the star draggable 
@@ -12,7 +12,7 @@ if ($this.isTouching(ninja)) {
     $this.x(672); $this.y(314); 
 }
 
-//Star Object - Mouse Button Up Event
+//********Star Object - Mouse Button Up Event***************//
 if ($this.isTouching(ninja)) { 
     $this.remove(); // remove the original star 
     staff.toggleDraggable(); // make the star draggable 
@@ -22,7 +22,7 @@ if ($this.isTouching(ninja)) {
     $this.x(492); $this.y(372); 
 }
 
-//Staff Object - Mouse Button Up Event
+//**********Staff Object - Mouse Button Up Event************//
 if ($this.isTouching(ninja)) { 
     $this.remove(); // remove the original staff 
     staff.toggleDraggable(); // make the staff dragable 

+ 3 - 3
02-yellow/03-05-PY-whats-inside.js

@@ -12,7 +12,7 @@ openDoor4.visible(false);
 
 //open doors don't have underscores but closed doors have it
 
-//door_1 - Mouse Click Event
+//************door_1 - Mouse Click Event************************//
 //Check if it's closed, if it is, the sprite is visible
 if ($this.visible()) {
     $this.visible(false); //we'll hide it when it's clicked
@@ -27,7 +27,7 @@ if ($this.visible()) {
     // it would be showing the card so we can't click it.
 }
 
-//openDoor1 - Mous Click Event
+//**************openDoor1 - Mous Click Event*********************//
 //Check if it's open, if it is, this sprite is visible
 if($this.visible()) {
     $this.visible(false); //hide openDoor when clicked
@@ -42,7 +42,7 @@ if($this.visible()) {
 
 //CN Sensei Guide Solution
 
-// door_x - Mouse Click Events
+//***************door_x - Mouse Click Events********************//
 if ($this.visible()) { 
     //reset all the doors 
     openDoor1.visible(false); 

+ 4 - 4
02-yellow/03-06-PY-rock-paper-scissors.js

@@ -13,7 +13,7 @@ Look at RPS1 Animations for frameIndex:
  * 2 - scissors
  **/
 
-//Scene - Initialize When Scene Starts 
+//***********Scene - Initialize When Scene Starts***************// 
 //Nothing picked yet, so big images should be hidden
 RPS1.visible(false);
 RPS2.visible(false);
@@ -21,7 +21,7 @@ RPS2.visible(false);
 //Ninja could change it to a welcome text
 results.text("Welcome to RPS v.1.0");
 
-//paperButton - Mouse Click Event [0]
+//*************paperButton - Mouse Click Event [0]****************//
 //generate the computer's choice
 var compChoice = random(0,2);
 
@@ -44,7 +44,7 @@ if (compChoice == 1) { //Comnputer chose rock [1]
     results.text("It's a tie!")
 }
 
-//rockButton - Mouse Click Event [1]
+//***************rockButton - Mouse Click Event [1]********************//
 //generate the computer's choice
 var compChoice = random(0,2);
 
@@ -67,7 +67,7 @@ if (compChoice == 2) { //Comnputer chose scissors [2]
     results.text("It's a tie!")
 }
 
-//scissorsButton - Mouse Click Event [2]
+//************scissorsButton - Mouse Click Event [2]******************//
 //generate the computer's choice
 var compChoice = random(0,2);
 

+ 125 - 0
02-yellow/03-07-PY-robot-builder.js

@@ -0,0 +1,125 @@
+/**
+ Decompose Robot Builder
+* Make robot parts draggable
+* Robot parts snap in correct spots
+* Robot parts bounce back when incorrect
+* findDistance() function will require teaching
+* Review of .x() and .y() and how they work
+*/
+
+//All parts require $this.draggable(true); at Initialize When Scene Starts
+
+//*************body Object - Mouse Button Up Event********************//
+//find distance between body part and bodySpace
+//store it in variable called distance
+var distance = $this.findDistance(bodySpace);
+if (distance < 20) { //if it's dragged close enough to bodySpace
+    //snap it to x and y of bodySpace
+    $this.x(bodySpace.x());
+    $this.y(bodySpace.y());
+    //make it no longer draggable
+    $this.draggable(false); //Ninja Supplies
+} else { //was dragged to the wrong spot
+    //snap it back to where it started
+    //Hungry Ninja code
+    $this.x(616);
+    $this.y(42);
+}
+
+//***********arm1 Object - Mouse Button Up Event**********************//
+//find distance between arm1 part and arm1Space
+//store it in variable called distance
+var distance = $this.findDistance(arm1Space);
+if (distance < 20) { //if it's dragged close enough to arm1Space
+    //snap it to x and y of arm1Space
+    $this.x(arm1Space.x());
+    $this.y(arm1Space.y());
+    //make it no longer draggable
+    $this.draggable(false); //Ninja Supplies
+} else { //was dragged to the wrong spot
+    //snap it back to where it started
+    //Hungry Ninja code
+    $this.x(634);
+    $this.y(244);
+}
+
+//*************arm2 Object - Mouse Button Up Event********************//
+//find distance between arm2 part and arm2Space
+//store it in variable called distance
+var distance = $this.findDistance(arm2Space);
+if (distance < 20) { //if it's dragged close enough to arm2Space
+    //snap it to x and y of arm2Space
+    $this.x(arm2Space.x());
+    $this.y(arm2Space.y());
+    //make it no longer draggable
+    $this.draggable(false); //Ninja Supplies
+} else { //was dragged to the wrong spot
+    //snap it back to where it started
+    //Hungry Ninja code
+    $this.x(44);
+    $this.y(242);
+}
+
+//*************head Object - Mouse Button Up Event********************//
+//find distance between head part and headSpace
+//store it in variable called distance
+var distance = $this.findDistance(headSpace);
+if (distance < 20) { //if it's dragged close enough to headSpace
+    //snap it to x and y of headSpace
+    $this.x(headSpace.x());
+    $this.y(headSpace.y());
+    //make it no longer draggable
+    $this.draggable(false); //Ninja Supplies
+} else { //was dragged to the wrong spot
+    //snap it back to where it started
+    //Hungry Ninja code
+    $this.x(512);
+    $this.y(408);
+}
+
+//*************leg1 Object - Mouse Button Up Event**********************//
+//find distance between leg1 part and leg1Space
+//store it in variable called distance
+var distance = $this.findDistance(leg1Space);
+if (distance < 20) { //if it's dragged close enough to leg1Space
+    //snap it to x and y of leg1Space
+    $this.x(leg1Space.x());
+    $this.y(leg1Space.y());
+    //make it no longer draggable
+    $this.draggable(false); //Ninja Supplies
+} else { //was dragged to the wrong spot
+    //snap it back to where it started
+    //Hungry Ninja code
+    $this.x(58);
+    $this.y(66);
+}
+
+//****************leg2 Object - Mouse Button Up Event*******************//
+//find distance between leg2 part and leg2Space
+//store it in variable called distance
+var distance = $this.findDistance(leg2Space);
+if (distance < 20) { //if it's dragged close enough to leg2Space
+    //snap it to x and y of leg2Space
+    $this.x(leg2Space.x());
+    $this.y(leg2Space.y());
+    //make it no longer draggable
+    $this.draggable(false); //Ninja Supplies
+} else { //was dragged to the wrong spot
+    //snap it back to where it started
+    //Hungry Ninja code
+    $this.x(150);
+    $this.y(476);
+}
+
+//************Scene Object - Initialize When Scene Starts***************//
+//Make a variable to keep track of how many parts were snapped in correctly
+//Also Add to Scene a label called message to display text
+$this.correct = 0;
+message.text("Welcome to Robot Building v.1.0");
+
+//***********Scene Object - Update Every Frame************************//
+//We will check if correct = 6 every frame 
+//When it's 6, display congratulatory message
+if($this.correct == 6) {
+    message.text("Nice work, you finished!")
+}