Code.org is updating Sprite Lab, the main lab in CS Fundamentals Courses E and F and CS Connections, to run on the newest version of Blockly. This transition includes improved features and enhanced block-based coding in our Sprite Lab programming environment.

This update brings subtle changes to the user interface (UI) for a more intuitive programming experience, with modifications in block layouts and components like the function editor and “if” blocks. We’ve purposefully designed any UI changes to be as intuitive as possible for students.

A Redesigned Function Editor

Used in CS Fundamentals: Courses E and F

In some lessons, students learn to define and call custom functions and behaviors. Here’s what a function looks like on the main workspace.

Depending on the lesson, this code might appear on the student’s main workspace, or it might be accessible using a special function editor with a dedicated workspace. With this update, the function editor has a more streamlined appearance. The function’s name is edited right on the block in the new version, just like in the main workspace. The description has moved to an editable field on the block. The “Delete” and “Close” buttons are in the same location and have the same purpose.

 

 

The new user experience also applies when editing behaviors. Here’s an example of a behavior in one of our levels.

Behavior definitions also typically require a “this sprite” block, which has been moved into a miniature toolbox inside the block. 

 

For additional details on what’s changed, see the following questions below in the FAQ:

• How do I use the editor for functions?
• How do I use the editor for behaviors?

A new +/- based UI for some blocks

Some blocks, including our “if” and “join” blocks, have a new plus-minus interface. These blocks do not appear often in our curriculum, but we hope these new icons will make it easier for students to understand how to change the shape of these blocks to fit their programming needs. 

“If blocks,” before:

“If blocks,” after:

For additional details on how to use these blocks, see the following questions below, in the FAQ:

• How do I use an “if block”?
• How do I use a “join block”?

FAQs

Where is Sprite Lab used?

Sprite Lab is used in the following places:

• Any Sprite Lab project created outside of our courses (using the create menu, remix/share, or projects page)
• CS Connections: Coding Book Covers, Simulating a Marine Ecosystem, Modeling Animal Adaptations, and Coding Interactive Maps
• CS Fundamentals Courses E and F
• Hour of Code: Hello World (6 versions), Outbreak Simulator, Code Break Younger

Where might students see the new blocks?

Students can write and edit functions and behaviors in the following places:

• Sprite Lab projects created outside of our courses (using the create menu, remix/share, or projects page)
• CS Connections: Animal Adaptations
• CS Fundamentals: Courses E and F End-of-Course Projects

The “if blocks” and “join blocks” are more specialized and less heavily emphasized in our curriculum. They primarily appear in free-play levels; we expect most students won't notice the change. 

How do I use the editor for functions?

Some lessons encourage students to make custom functions or behaviors, which allows them to use the editor. As their coding skills develop, students will learn that functions are key to efficiency, enabling them to repeatedly apply the same code segment without redundancy in their programs, thereby streamlining their coding process.

Where available, here’s how to use the editor for functions:

1. Click “Create a Function” in the “Functions” category of the toolbox to open the modal.
2. Click the name input field directly on the function definition block to change the function’s name. 
3. Click the blank input field next to the “Description” label to add a description to your block. Descriptions are useful for planning, helping others understand your code, or reminding yourself later what you were doing!
4. Use the “Close” button to return to the main workspace.
5. Use the “Delete” button to delete this function and all its call blocks from the main workspace. Like before, users will see, “Warning! Are you sure you want to delete [this function]?” and must confirm their choices for deletion to take effect. 

How do I use the new editor for behaviors?

In Sprite Lab, you can think of a "sprite" as a character or object in your game or story. A "behavior" is like a set of instructions or rules that you give to your sprite. It tells your sprite how to act or what to do. For example, you can give a behavior to a sprite to make it move around or change colors.

Where available, here’s how to use the editor for behaviors: 

1. Click “Create a Behavior” in the “Behaviors” category of the toolbox to open the modal.
2. Click the name input field directly on the behavior definition block to change the behavior’s name. 
3. Click the blank input field next to the “Description” label to add a description to your block. The description will not appear on the main workspace but will be visible when you reopen the behavior definition.
4. Click and drag the “this sprite” block to use it in your behavior, just as you would from a normal toolbox. Since behaviors are like functions applied to specific sprites, the "this sprite" block allows you to ensure that various actions only affect the sprite(s) with that behavior.
5. Hide the “this sprite” block, if desired, by clicking the blue -/minus button in the upper left corner of the behavior definition block. 
6. Use the “Close” button to return to the main workspace.
7. Use the “Delete” button to delete this behavior and all its call blocks from the main workspace. Like before, users will see, “Warning! Are you sure you want to delete [this behavior]?” and must confirm their choices for deletion to take effect. 

How do I use an “if block”?

An “if block” is a type of conditional block. A condition block in coding is like a decision-making tool: it checks if something is true or false and decides what action to take. For instance, in a game, if the condition is "if the player scores 10 points," the game might respond with the action "then the player wins a bonus." This way, condition blocks help make our code interactive and responsive to different situations.

1. Drag an “if” block out of the “Logic” section of the toolbox.
2. Click the plus button to reveal the “else” condition on the “if/else” block.
3. Click the plus button additional times to add “else if” statements to the block.
4. Click the minus button(s) to remove a statement. The block(s) that occupied the removed connections will remain disabled on the workspace until they are deleted or used elsewhere.

How do I use a “join block”?

A “join block,” or concatenation, is like a puzzle piece connector in coding: it links different pieces of text into one longer string. For example, by using a join block, you can connect the phrase "happy birthday, " with a variable named "username" that contains a user's name, resulting in a personalized greeting like "happy birthday, [username]."

1. Drag a “join” block out of the “Text” section of the toolbox.
2. Click the plus button to add a connection to the block.
3. Click the minus button to remove a connection from the block. The block(s) that occupied the removed connection will remain disabled on the workspace until they are deleted or used elsewhere.