Merge branch 'staging' of github.com:code-dot-org/code-dot-org into s…

…taging

dashboard/config/locales/dsls.en.yml

@@ -603,6 +603,7 @@ en:
       'CSD: Lists': {}
       'CSD: Review Events': {}
       'CSD: colorLed list': {}
+      'CSD: getText vs getNumber': {}
       'CSD: setProperty': {}
       CSDU2 - Fundamentals Videos: {}
       CSDU2 - Pick Elements Styled: {}
@@ -3354,6 +3355,16 @@ en:
         Shows the name of the page in a new tab: Shows the name of the page in a new tab
         Starts and ends the HTML document: Starts and ends the HTML document
         Tells the computer that this document is an HTML file: Tells the computer that this document is an HTML file
+      'CSD: Variables Matching':
+        "![](https://images.code.org/7c46bbd6967456652171894454913042-image-1463067997744.gif)": "![](https://images.code.org/7c46bbd6967456652171894454913042-image-1463067997744.gif)"
+        "![](https://images.code.org/7c66a6cadb0d0a136492bbedac65ebb0-image-1463067992351.gif)": "![](https://images.code.org/7c66a6cadb0d0a136492bbedac65ebb0-image-1463067992351.gif)"
+        "![](https://images.code.org/c999112a199aa2c9cf304a728ea6fda3-image-1463067995185.gif)": "![](https://images.code.org/c999112a199aa2c9cf304a728ea6fda3-image-1463067995185.gif)"
+        "![](https://images.code.org/f53831a3dd4f122ba9a873640da67825-image-1463067988435.gif)": "![](https://images.code.org/f53831a3dd4f122ba9a873640da67825-image-1463067988435.gif)"
+        <img src="https://images.code.org/c999112a199aa2c9cf304a728ea6fda3-image-1463067995185.gif" style="width:150px">: <img src="https://images.code.org/c999112a199aa2c9cf304a728ea6fda3-image-1463067995185.gif" style="width:150px">
+        Program 1: Program 1
+        Program 2: Program 2
+        Program 3: Program 3
+        Program 4: Program 4
       CSDU2 Match RGB Colors:
         Question: Question
         'red: 107, green: 142, blue: 35 - rgb(107,142,35)': 'red: 107, green: 142, blue: 35 - rgb(107,142,35)'

dashboard/config/locales/scripts.en.yml

@@ -2667,6 +2667,9 @@ en:
             Foo: Foo
             Lists: Lists
             Lights: Lights
+            Event Types: Event Types
+            Getters and Setters: Getters and Setters
+            Input Unplugged: Input Unplugged
           title: Draft Unit 6
           description_audience: ''
           description_short: ''

dashboard/config/scripts/csd6-draft.script

@@ -1,29 +1,33 @@
 stage 'Computing Innovations'
 level 'CSDU6 SFLP'
 
-stage 'Input Uplugged'
+stage 'Input Unplugged'
 level 'CSDU6 GameLab Input 1'
 level 'CSDU6 AppLab Input 1'
 
-stage 'UI and Input'
+stage 'Event Types'
 named_level 'CSD U6L03 Overview'
 named_level 'CSD Review: Design Mode, IDs, and Events'
 named_level 'CSD: Review Events'
-level 'CSDU6 - UI and Inputs - Debug Screens and IDs'
+named_level 'CSD: Creating Variables In App Lab'
 level 'CSDU6 - UI and Inputs - event type testing'
+
+stage 'Getters and Setters'
 named_level 'CSD - Getters and Setters'
+level 'CSDU6 - UI and Inputs - setScreen'
 level 'CSDU6 - UI and Inputs - setText'
 level 'CSDU6 - UI and Inputs - hide show'
-named_level 'CSD: Creating Variables In App Lab'
 level 'CSDU6 - UI and Inputs - getText'
 level 'CSDU6 - UI and Inputs - dropdown setText'
-named_level 'Stop: Review Getters and Setters'
-named_level 'CSD: Slider Example'
-level 'CSDU6 - UI and Inputs - slider UI'
-level 'CSDU6 - UI and Inputs - set slider range'
+level 'CSDU6 - UI and Inputs - get set with text input'
+level 'CSDU6 - UI and Inputs - getNumber practice'
+named_level 'CSD: getText vs getNumber'
 level 'CSDU6 - UI and Inputs - getNumber'
 named_level 'CSD: setProperty'
+level 'CSDU6 - UI and Inputs - setProperty first level'
+level 'CSDU6 - UI and Inputs - setProperty Image'
 level 'CSDU6 - UI and Inputs - setProperty'
+named_level 'Stop: Review Getters and Setters'
 named_level 'Challenge: Input and UI'
 
 stage 'The Circuit Playground'
@@ -56,17 +60,15 @@ named_level 'CSD: List Length'
 level 'CSDU6 - Arrays - length'
 level 'CSDU6 - Arrays - lengthMinus1'
 level 'CSDU6 - lists - lists 5'
-named_level 'Challenge: List of Notes'
+named_level 'Challenge: Random Button Colors'
 
 stage 'Lights'
 named_level 'CSD: colorLed list'
 level 'CSDU6L06 - lists and colorLeds - song list'
 level 'CSDU6L06 - lists and colorLeds - set color'
 level 'CSDU6L06 - lists and colorLeds - debug'
 level 'CSDU6L06 - lists and colorLeds - toggle'
-level 'CSDU6L06 - lists and colorLeds - blink'
-level 'CSDU6L06 - lists and colorLeds - pulse'
-level 'CSDU6L06 - lists and colorLeds -solo light pattern'
 named_level 'CSD - Functions Review'
-named_level 'CSD: Dropdown & Conditionals'
+level 'CSDU6L06 - lists and colorLeds -solo light pattern'
+level 'CSDU6L06 - lists and colorLeds - light pattern off'
 named_level 'Challenge: Lights Picker'

dashboard/config/scripts/csd_accessing_list_items.external

@@ -18,14 +18,11 @@ If you try to access an index that does not exist the program does not know what
 
 ` var myList = ["dog", "cat", "pig"] `
 
-If I tried to access an index less than zero or greater than 3 the program would evaluate that to be undefined since it has not been defined in my code.
-
-` 
-console.log(myList[-1]);
-console.log(myList[3]);
-console.log(myList[20]); 
-`
-All of these would print 'undefined' in the console.
+If I tried to access an index less than zero or greater than 3 the program would evaluate that to be undefined since it has not been defined in my code. All of these would print 'undefined' in the console.
+
+`console.log(myList[-1]);` <br>
+`console.log(myList[3]);` <br>
+`console.log(myList[20]);` <br>
 
 
 ## Expressions as Indexes

dashboard/config/scripts/csd_creating_variables_in_app_lab.external

@@ -1,13 +1,14 @@
 name 'CSD: Creating Variables In App Lab'
 href 'path/to/html/in/asset/folder'
 markdown <<MARKDOWN
-# Where should you create variables?
+# Variables in App Lab
+## Where should you create variables?
 
 In Game Lab you got very used to creating all your variables at the top above the draw loop. In App Lab you will want to continue to use a similar method. 
 
-**Stick to this: All variables should be created and given an initial value at the very top of your program above all your event handlers and any functions you write. This will also make it easy to go look for them later as you will know where they are. ** 
+**Stick to this: All variables should be created and given an initial value at the very TOP of your program above all your event handlers and any functions you write.** This will also make it easy to go look for them later as you will know where they are. 
 
-# Why create your variables at the top?
+## Why create your variables at the top?
 
 Where you create your variables matter. In Javascript you have two choices: 
 
@@ -17,7 +18,7 @@ Where you create your variables matter. In Javascript you have two choices:
 
 The term for this concept is **"variable scope."** The **scope** of a variable defines which parts of your code can access and modify the variable.
 
-# Understanding Variable Scope
+## Understanding Variable Scope
 
 Javascript has two scopes: **global** and **local**. Here's the difference...
 

dashboard/config/scripts/csd_getters_and_setters.external

@@ -5,21 +5,21 @@ markdown <<MARKDOWN
 
 # Setters
 
-Used setScreen before.  setScreen takes one piece of information - the screen to set to.
+Setters are commands which **set** or change information. Setters all require at least one thing as input : what it wants to change the information to.
 
-In addition to getting information sometimes we want to change the information to. We use setters to set the information.
+You have used `setScreen()` before.  `setScreen()` changes the screen that the user is viewing. The one input `setScreen()` takes is the new screen to change to.
 
-example setText
+Another example of a setter that you will be using is `setText()`.
 
-important thing is setText takes one input - what the UI element you want to set the text of
+<img src="//curriculum.code.org/images/applab/setText.png" style="margin: 20px auto">
 
 # Getters
 
-setting different parts of a program is a common part of a program that is often called to a getter
+Getters are commands which **get** or retrieve information. Getters often require at least one input: the place you want to retrieve information from.
 
-example getText
+`getText()` is a common getter you will use. It can be used to get the text from something like a text input. 
 
-important thing is getText takes one input - what the UI element you want to get the text of
+<img src="//curriculum.code.org/images/applab/getText.png" style="margin: 20px auto">
 
-whenever you use a getter it is good practice to save it with a variable since you will probably want to use that information later.
+Often when you use a getter it is a good idea to save the result in a variable so that you can use it throughout your program.
 MARKDOWN

dashboard/config/scripts/csd_gettext_vs_getnumber.external

@@ -0,0 +1,19 @@
+name 'CSD: getText vs getNumber'
+href 'path/to/html/in/asset/folder'
+markdown <<MARKDOWN
+# getText vs getNumber
+
+Computers store information in different ways. Two different ways a computer stores information are strings and numbers. 
+
+`getNumber()` tries to get the value of whatever you are asking about as a number.
+
+`getText()` gets the value of whatever you are asking about as a string. Strings are often marked in your programs with `" "`. For example all the names of your IDs are strings. You can use `getText()` to retrieve a number but just know that it will be surrounded by `" "`.
+
+## Why does that matter?
+
+Usually it is fine to get everything as a string but when you want to do mathematical operations you need numbers not strings.  When you try to add two strings together the computer thinks you want to combine the two strings together into one string. 
+
+So when you say `"2" + "2"` the computer evaluates that to `"22"`.
+
+Where as when you say `2 + 2` (notice no `" "`) the computer evaluates that to `4`.
+MARKDOWN

dashboard/config/scripts/csd_lists.external

@@ -11,7 +11,15 @@ Lists have many features which make them different from variables, but **most of
 * Lists are created using `var`.
 * Lists can be initialized/set using `=`.
 
-**Example: Creating a List**
+List commands can be found in the Variables toolbox. 
+
+<img src="https://images.code.org/b21cdf00a2c673437c786aef3476734b-image-1486668653247.29.06 PM.png" style="width:150px">
+
+The list command looks this: 
+
+<img src="https://images.code.org/d941a693850a6a7027d0902f463d2382-image-1486668640890.28.55 PM.png" style="width:225px">
+
+## Example
 
 ![](https://images.code.org/0b7d201db2990f0189963bb6a565a057-image-1447097600773.33.08 PM.png)
 
@@ -20,4 +28,5 @@ This list contains 3 values: 100, 250, 500. Notice that the values are separated
 ![](https://images.code.org/7d4be70330108e3e5d6325fa4e721ef4-image-1447097904253.38.18 PM.png)
 
 This will print out [100, 250, 500] in the console area.
+
 MARKDOWN

dashboard/config/scripts/csd_review_events.external

@@ -40,7 +40,7 @@ It's important to understand in Event-Driven programming that:
 
 App Lab's `onEvent` block is a type of event-handling function called an **Event Listener**. It wraps all of the setup up you need to do event handling into one command that has several parts. Here is an example with everything labeled:
 
-<img src="https://images.code.org/a4cf535f00b0b77737d5259386b4442d-image-1476884080311.png" style="display: block; margin: auto">
+<img src="//curriculum.code.org/images/applab/onEvent_diagram.png" style="display: block; margin: 20px auto">
 
 <div style="column-count: 3; column-gap: 20px; column-rule: 0.5px solid #00adbc; -moz-column-count: 3; width: 100%">
 

dashboard/config/scripts/csd_u3_game_intro.external

@@ -9,7 +9,7 @@ Now that you have all the skills you need, it's time to make your own game!
 
 With a partner, brainstorm some different ideas for your game.  You can think about the games you've already seen, or look at some more sample games to give you ideas.
 
-* Side scroller
+* Side Scroller
 * Platform Jumper
 * Air Hockey
 * Defender Game

dashboard/config/scripts/csd_variables_matching.match

@@ -0,0 +1,59 @@
+name 'CSD: Variables Matching'
+question 'Program 3'
+answer '<img src="https://images.code.org/c999112a199aa2c9cf304a728ea6fda3-image-1463067995185.gif" style="width:150px">'
+question 'Program 2'
+answer '![](https://images.code.org/7c66a6cadb0d0a136492bbedac65ebb0-image-1463067992351.gif)'
+question 'Program 4'
+answer '![](https://images.code.org/7c46bbd6967456652171894454913042-image-1463067997744.gif)'
+question 'Program 1'
+answer '![](https://images.code.org/f53831a3dd4f122ba9a873640da67825-image-1463067988435.gif)'
+
+markdown <<MARKDOWN
+# Stop and Discuss
+
+This lesson was all about how to use **expressions** to be able to **use a variable like a counter**. To get more comfortable with how this works, try matching these 4 programs to their output. **Be prepared to justify your choices for each one**.
+
+**Program 1:**
+
+	var position = 0;
+
+    function draw(){
+    	position = position + 1;
+    	background("white");
+        fill("red");
+        rect(position, 20, 50, 50);
+    }
+
+**Program 2:**
+
+	var position = 400;
+
+    function draw(){
+    	position = position - 1;
+        background("white");
+        fill("red");
+        rect(20, position, 50, 50);
+    }
+
+**Program 3:**
+
+	var position = 0;
+
+    function draw(){
+    	position = position + 0.5;
+        background("white");
+        fill("red");
+        rect(position, 20, 50, 50);
+    }
+
+**Program 4:**
+
+	var position = 400;
+
+    function draw(){
+    	position = position - 1;
+        background("white");
+        fill("red");
+        rect(position, position, 50, 50);
+    }
+MARKDOWN