Merge pull request code-dot-org#10316 from code-dot-org/levelbuilder

Levelbuilder > Staging

Author: breville

dashboard/config/scripts/csp1.script

@@ -11,7 +11,7 @@ stage "Personal Innovations"
 #named_level 'CSP Pre-survey'
 level 'U1L1 Student Lesson Introduction'
 named_level 'Computer Science is Changing Everything'
-level 'U1L1 - FR computer science word association'
+# level 'U1L1 - FR computer science word association'
 
 stage "Sending Binary Messages"
 level 'v2 U1L2 Student Lesson Introduction'

dashboard/config/scripts/levels/4-5 Artist 3.5.level

@@ -32,8 +32,8 @@
     "impressive": "false",
     "disable_sharing": "false",
     "never_autoplay_video": "false",
-    "contained_level_names": null,
-    "discard_background": "false"
+    "discard_background": "false",
+    "contained_level_names": null
   },
   "published": true,
   "notes": "",

dashboard/config/scripts/levels/CSD U3 abstraction car template.level

@@ -33,7 +33,7 @@
     "debugger_disabled": "false",
     "hide_animation_mode": "false",
     "start_animations": "{\r\n  \"orderedKeys\": [\"red_car\"],\r\n  \"propsByKey\": {\r\n    \"red_car\": {\r\n      \"name\": \"red_car\",\r\n      \"sourceUrl\": \"https://curriculum.code.org/images/sprites/red_car.png\",\r\n      \"frameSize\": {\"x\":170, \"y\": 76},\r\n      \"frameCount\": 1,\r\n      \"frameRate\": 15\r\n    }\r\n  }\r\n}",
-    "start_blocks": "var sprite = createSprite(70,300);\r\nsprite.setAnimation(\"red_car\");\r\n\r\nfunction draw() {\r\n  background(\"green\");\r\n  stroke(\"gray\");\r\n  strokeWeight(70);\r\n  line(0, 335, 400, 185);\r\n  stroke(\"black\");\r\n  strokeWeight(5);\r\n  line(0, 370, 400, 220);\r\n  line(0, 300, 400, 150);\r\n  line(0, 335, 80, 305);\r\n  line(160, 275, 240, 245);\r\n  line(320, 215, 400, 185);\r\n  drawSprites();\r\n}\r\n",
+    "start_blocks": "var car = createSprite(70,300);\r\ncar.setAnimation(\"red_car\");\r\n\r\nfunction draw() {\r\n  background(\"green\");\r\n  stroke(\"gray\");\r\n  strokeWeight(70);\r\n  line(0, 335, 400, 185);\r\n  stroke(\"black\");\r\n  strokeWeight(5);\r\n  line(0, 370, 400, 220);\r\n  line(0, 300, 400, 150);\r\n  line(0, 335, 80, 305);\r\n  line(160, 275, 240, 245);\r\n  line(320, 215, 400, 185);\r\n  drawSprites();\r\n}\r\n",
     "project_template_level_name": "car velocity",
     "markdown_instructions": "# 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.",
     "palette_category_at_start": "sprites",

dashboard/config/scripts/levels/CSD U3 abstraction change velocityXY.level

@@ -57,10 +57,11 @@
     "submittable": "false",
     "hide_view_data_button": "false",
     "debugger_disabled": "false",
-    "markdown_instructions": "# Getting faster at an angle\r\n\r\nHere's a different car that uses the same method of changing the velocity to make the car go faster, but it changes both `velocityX` and `velocityY`.  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)",
-    "start_blocks": "var sprite = createSprite(70,300);\r\nsprite.setAnimation(\"green_car\");\r\n// initialize the sprite's velocity\r\nsprite.velocityX = 0.8;\r\nsprite.velocityY = -0.3;\r\nsprite.rotateToDirection = true;\r\n\r\nfunction draw() {\r\n  // change the sprite's velocity\r\n  sprite.velocityX = sprite.velocityX + 0.1;\r\n  sprite.velocityY = sprite.velocityY - 0.1;\r\n  \r\n  // draw the background\r\n  background(\"green\");\r\n  stroke(\"gray\");\r\n  strokeWeight(70);\r\n  line(0, 335, 400, 185);\r\n  stroke(\"black\");\r\n  strokeWeight(5);\r\n  line(0, 370, 400, 220);\r\n  line(0, 300, 400, 150);\r\n  line(0, 335, 80, 305);\r\n  line(160, 275, 240, 245);\r\n  line(320, 215, 400, 185);\r\n  \r\n  \r\n drawSprites();\r\n}\r\n",
+    "markdown_instructions": "# Getting faster at an angle\r\n\r\nHere's a different car that uses the same counter pattern 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)",
+    "start_blocks": "var car = createSprite(70,300);\r\ncar.setAnimation(\"green_car\");\r\n// initialize the sprite's velocity\r\ncar.velocityX = 0.8;\r\ncar.velocityY = -0.3;\r\ncar.rotateToDirection = true;\r\n\r\nfunction draw() {\r\n  // draw the background\r\n  background(\"green\");\r\n  stroke(\"gray\");\r\n  strokeWeight(70);\r\n  line(0, 335, 400, 185);\r\n  stroke(\"black\");\r\n  strokeWeight(5);\r\n  line(0, 370, 400, 220);\r\n  line(0, 300, 400, 150);\r\n  line(0, 335, 80, 305);\r\n  line(160, 275, 240, 245);\r\n  line(320, 215, 400, 185);\r\n  \r\n  // update the sprite's velocity\r\n  car.velocityX = car.velocityX + 0.1;\r\n  car.velocityY = car.velocityY - 0.1;\r\n  // show the velocities in the debug console\r\n  console.log(\"speed: \" + car.getSpeed() + \", dir: \" + car.getDirection());\r\n  \r\n  drawSprites();\r\n}\r\n",
     "start_animations": "{\r\n  \"orderedKeys\": [\"green_car\"],\r\n  \"propsByKey\": {\r\n    \"green_car\": {\r\n      \"name\": \"green_car\",\r\n      \"sourceUrl\": \"https://images.code.org/4d1af9cc274f30b9d9263a47f9f64f13-image-1470941637433.png\",\r\n      \"frameSize\": {\"x\":100, \"y\": 50},\r\n      \"frameCount\": 1,\r\n      \"frameRate\": 15\r\n    }\r\n  }\r\n}",
     "pause_animations_by_default": "false",
+    "callout_json": "[\r\n {\r\n  \"localization_key\": \"CSD_U3_L12_S4_C1\",\r\n  \"callout_text\": \"The velocity is updated here.\",\r\n  \"element_id\": \"\",\r\n  \"on\": \"code_triggered\",\r\n  \"qtip_config\": {\r\n   \"codeStudio\": {\r\n    \"canReappear\": true,\r\n    \"dropletPaletteCategory\": \"\",\r\n     \"codeString\": \"// change the sprite's velocity\"\r\n   },\r\n   \"style\": {\r\n    \"classes\": \"\"\r\n   },\r\n   \"position\": {\r\n    \"my\": \"right center\",\r\n    \"at\": \"bottom left\",\r\n    \"adjust\": {\r\n     \"x\": 60,\r\n     \"y\": 10\r\n    }\r\n   }\r\n  }\r\n }\r\n]",
     "contained_level_names": null
   },
   "published": true,

dashboard/config/scripts/levels/CSD U3 abstraction circle.level

@@ -67,7 +67,7 @@
     "debugger_disabled": "false",
     "hide_animation_mode": "false",
     "start_animations": "{\r\n  \"orderedKeys\": [\"red_car\"],\r\n  \"propsByKey\": {\r\n    \"red_car\": {\r\n      \"name\": \"red_car\",\r\n      \"sourceUrl\": \"https://images.code.org/63b04e63fc4bc21700b64ef3d6c6b8b7-image-1471475653020.png\",\r\n      \"frameSize\": {\"x\":60, \"y\": 30},\r\n      \"frameCount\": 1,\r\n      \"frameRate\": 15\r\n    }\r\n  }\r\n}",
-    "markdown_instructions": "# getDirection()\r\n\r\nYou've been using `getSpeed` and `getSpeedAndDirection`  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* 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)",
+    "markdown_instructions": "# 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* 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)",
     "start_blocks": "var car = createSprite(200, 50);\r\ncar.setAnimation(\"red_car\");\r\n// initialize sprite's speed and direction\r\ncar.setSpeed(5, 0);\r\ncar.rotateToDirection = true;\r\n\r\nfunction draw() {\r\n  //change sprite's direction\r\n  car.setSpeed(5, car.getDirection() + 5);\r\n  \r\n  background(\"green\");\r\n  drawSprites();\r\n}\r\n",
     "palette_category_at_start": "sprites",
     "pause_animations_by_default": "false",

dashboard/config/scripts/levels/CSD U3 abstraction drive.level

@@ -177,7 +177,7 @@
     "show_d_pad": "true",
     "edit_code": true,
     "embed": "false",
-    "markdown_instructions": "# 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.  The first should check whether the up arrow is pressed, and increase the speed of the car.  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?*",
+    "markdown_instructions": "# 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?*",
     "is_k1": "false",
     "skip_instructions_popup": "false",
     "never_autoplay_video": "false",

dashboard/config/scripts/levels/CSD U3 abstraction fish template.level

@@ -40,7 +40,7 @@
     "contained_level_names": null
   },
   "published": true,
-  "notes": "",
+  "notes": "This was used when the fish was used both for setting velocityX the first time and then incrementing it.  It's not used anymore, because the fish aren't used to increment velocityX.",
   "level_concept_difficulty": {
   }
 }]]></config>

dashboard/config/scripts/levels/CSD U3 abstraction rotation accelerate.level

@@ -60,7 +60,7 @@
     "debugger_disabled": "false",
     "start_animations": "{\r\n  \"orderedKeys\": [\"wheel\"],\r\n  \"propsByKey\": {\r\n    \"wheel\": {\r\n      \"name\": \"wheel\",\r\n      \"sourceUrl\": \"https://curriculum.code.org/images/sprites/wheel.png\",\r\n      \"sourceSize\": {\"x\":350, \"y\": 350},\r\n      \"frameSize\": {\"x\":350, \"y\": 350},\r\n      \"frameCount\": 1,\r\n      \"frameRate\": 15\r\n    }\r\n  }\r\n}",
     "start_blocks": "var wheel = createSprite(200, 200);\r\nwheel.setAnimation(\"wheel\");\r\nwheel.rotationSpeed = 1;\r\n\r\nfunction draw() {\r\n  background(\"blue\");\r\n  \r\n  // wheel speeds up when the up arrow is pressed\r\n  if (keyWentDown(\"up\")) {\r\n      wheel.rotationSpeed = wheel.rotationSpeed + 1;\r\n  }\r\n  // wheel slows down when the down arrow is pressed\r\n  if (keyWentDown(\"down\")) {\r\n    \r\n  }\r\n  drawSprites();\r\n}\r\n",
-    "markdown_instructions": "# 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 `roationSpeed` 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)",
+    "markdown_instructions": "# 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)",
     "palette_category_at_start": "sprites",
     "pause_animations_by_default": "false",
     "callout_json": "[\r\n {\r\n  \"localization_key\": \"CSD_U3_L11_S5_C1\",\r\n  \"callout_text\": \"Look at this code.\",\r\n  \"element_id\": \"\",\r\n  \"on\": \"code_triggered1\",\r\n  \"qtip_config\": {\r\n   \"codeStudio\": {\r\n    \"canReappear\": true,\r\n    \"dropletPaletteCategory\": \"\",\r\n     \"codeString\": \"if (keyWentDown(\\\"up\\\")) {\"\r\n   },\r\n   \"style\": {\r\n    \"classes\": \"\"\r\n   },\r\n   \"position\": {\r\n    \"my\": \"top left\",\r\n    \"at\": \"bottom left\",\r\n    \"adjust\": {\r\n     \"x\": 160,\r\n     \"y\": 10\r\n    }\r\n   }\r\n  }\r\n },\r\n {\r\n  \"localization_key\": \"CSD_U3_L11_S5_C2\",\r\n  \"callout_text\": \"Add your code here.\",\r\n  \"element_id\": \"\",\r\n  \"on\": \"code_triggered2\",\r\n  \"qtip_config\": {\r\n   \"codeStudio\": {\r\n    \"canReappear\": true,\r\n    \"dropletPaletteCategory\": \"\",\r\n     \"codeString\": \"if (keyWentDown(\\\"down\\\")) {\"\r\n   },\r\n   \"style\": {\r\n    \"classes\": \"\"\r\n   },\r\n   \"position\": {\r\n    \"my\": \"top left\",\r\n    \"at\": \"bottom left\",\r\n    \"adjust\": {\r\n     \"x\": 160,\r\n     \"y\": 10\r\n    }\r\n   }\r\n  }\r\n }\r\n]",

dashboard/config/scripts/levels/CSD U3 abstraction setSpeed intro.level

@@ -33,7 +33,7 @@
     "show_d_pad": "true",
     "edit_code": true,
     "embed": "false",
-    "markdown_instructions": "# 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\nFor each sprite, look at its `velocityX` and `velocityY` and guess what its speed and direction are.  Then run the code and see the answers in the debug console.\r\n",
+    "markdown_instructions": "# 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",
     "is_k1": "false",
     "skip_instructions_popup": "false",
     "never_autoplay_video": "false",

dashboard/config/scripts/levels/CSD U3 abstraction space comet.level

@@ -1,7 +1,7 @@
 <Gamelab>
   <config><![CDATA[{
   "game_id": 50,
-  "created_at": "2016-08-23T22:18:13.399Z",
+  "created_at": "2016-08-23T22:18:13.000Z",
   "level_num": "custom",
   "user_id": 324,
   "properties": {
@@ -24,7 +24,7 @@
     "show_d_pad": "true",
     "edit_code": true,
     "embed": "false",
-    "markdown_instructions": "# 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",
+    "markdown_instructions": "# Animate The Comet\r\n\r\n<img style=\"float:right\" src=\"https://images.code.org/d2ad362f37d0e5f9b98691654256d2fb-image-1469469372823.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.*",
     "is_k1": "false",
     "skip_instructions_popup": "false",
     "never_autoplay_video": "false",

dashboard/config/scripts/levels/CSD U3 abstraction space earth.level

@@ -24,7 +24,7 @@
     "show_d_pad": "true",
     "edit_code": true,
     "embed": "false",
-    "markdown_instructions": "# 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",
+    "markdown_instructions": "# Animate The Earth\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 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.",
     "is_k1": "false",
     "skip_instructions_popup": "false",
     "never_autoplay_video": "false",