Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

3. Changing Costumes When Clicked


In this video, you’ll program the outcome sprites to change to the next costume when clicked.

In the last step, you edited the costumes for each sprite.

They should each have three quiz options.

When one sprite, or quiz option, is clicked, both sprites will switch to the next costume, allowing the user to choose which one he or she prefers.

To start, program the outcome 1 and outcome 2 sprites to start on their first costume.

Click the outcome 1 sprite and the looks menu.

Drag a “switch costume to” block and change the value to “option 1”.

Then click events and drag a “when flag clicked” event on top.

Click the flag to test.


To copy this code to outcome 2, just drag and drop the code onto the outcome 2 sprite.

Click it to test it.

The first and second sprite should each be on their first costume now.

To make the costume change *when* the sprite is clicked, add a “when this sprite clicked” event.

Then, add a “next costume” block from looks.

Click the “outcome 1” sprite to try it out.

Each time you click, the next costume appears.

When you click the outcome 1 sprite, both sprites should change to the next costume.

Otherwise, you’ll have the same quiz option for outcome 2, and that wouldn’t make for a very fun quiz.

To do this, broadcast a message that tells outcome 2 sprite to change costumes.

Click events, and drag a “broadcast” block before the “next costume” block.

Click the dropdown to make a new message, and call it something like “next option.”

Next, make the other sprite able to receive the “next option” message.

Click the “outcome 2” sprite, and add a “when I receive” block.

Check that the dropdown reads “next option.”

Then, add a “next costume” block.

Try this out by clicking the “outcome 1” sprite.


Both sprites change costumes now.

Next, program “outcome 2” the same way.

Copy code from one sprite to another by dragging and dropping block stacks onto that sprite.

Drag the two block stacks from outcome 1 to outcome 2.

Click outcome 2 to see the code you just copied.

Then, drag the “when I receive” block stack from outcome 2 to outcome 1.

Try it out!

Okay, both sprites start at the first quiz option when the flag is clicked.

Click the outcome 1 sprite, and, hrmm!

It skips the second quiz option and switches right to the third.

When a program doesn’t run how a computer scientist intends, it’s called a “bug.”

The best way to find a bug is to read your code.

When the first sprite is clicked, it changes to the next costume, broadcasts the “next option” message, and changes costume again.

You found the bug.

The costume changes twice when the sprite is clicked.

Remove the “next costume” block after “when this sprite clicked.”

Do this for both sprites.

Try it again.


Now it’s your turn: Broadcast a new message called “next option” when the outcome 1 sprite is clicked.

Add a “when I receive” block, and a “next costume” block to the outcome 1 sprite.

When the flag is clicked, set the costume for each sprite to option 1 Finally, Duplicate this code for the outcome 2 sprite.

arrow_backward Back
Next arrow_forward
  1. Program the outcome sprites to start on their first costumes.
  2. Make the costumes for both sprites change.