So… we’re still sitting here… yellow block… boring blue background.  Everything just sitting…sitting…sitting… nothing moving at all.  Well, I don’t know about you, but it seems like our yellow square is looking bored.  All that sitting around is not good for a yellow square.  It’s time to get him moving!

When you are designing an activity, often times you want the user that is viewing the activity to be able to interact with the activity.   For example, with that yellow block just sitting there, it seems like if someone touched it, maybe it could do something other than just ignore being touched.  Well, the good news is, you can make that little yellow block do a wide variety of things, once you get your head around the concept of events and “Blocks!”.

Let’s get started.  Remember the property inspector?  This is the window that displays when you are in edit mode and you tap on an item in your activity, getting the yellow ring to circle the item, and then you tap on the hammer/wrench icon.  When you do this, up comes the property inspector.

When we first encountered the property inspector, we used it to change the color of our square to yellow.  We explored some of the other properties as well.  One thing we didn’t do though, is check out what the “Events” button on the property inspector was all about.

When you tap on events after touching on our yellow square, you’ll see a display that looks something like the following:

What is shown on this display is the list of events that are recognized by this square.  One of the events is the “Touched” event.   This event is recognized if, during the running of the activity, someone touches the square.

So, that’s all well and good, but what if we want to do something special when the event occurs?  Let’s say we want to change the square’s color to red when it is touched.  Well, you do this through the event list and more specifically you tell the square what to do by hooking together a collection of “action blocks” as if they were legos!!  This is where it gets cool people!!!!

Go ahead and touch on the event named “Touched”.  When you do so, an entirely new display is presented that looks something like this:

This is what we call the “Action Block Surface”.  It is a surface where you will design the actions you want to occur when that “Touched” event happens.  (Touch here for more information on working with the Action Block Surface)

In this case, let’s do something simple.  When someone touches our yellow block, let’s change the block’s color to red.  To do this, we are going to need to add an action block to our action block surface.  First, we need to find the action block that might help us get this work done…

On the action block surface, at the bottom, is a notebook that groups together a collection of action blocks in the category specified on the notebook tabs page.  Since we are wanting to change the color of the block to red, I suggest we look into the “Audio/Visual” tab and see if there is anything there that can help us.  When we do so, the action blocks contained in the tab are displayed.

Very carefully, slid the blocks to the left by using your finger to grab and slide the gray space under the blocks until you find the block named “Set Foreground Color of”.  When you find that block, using your finger, touch it and drag it to the big white space of the action block surface as I’ve shown below.

This action block has the ability to change the color of an item on our activity.  The block let’s you pick the item whose color should change and it lets you identify the color you’d like it to change to.

We can already see that it is set up to change an item’s color to red (the red box next to the word “To” is kind of a hint).  But, the action block hasn’t been told yet which item’s color needs to be changed.  We need to tell it that.  We can do so by either typing in the squares full name (available in the Property inspector on the first page) or we can use another block to figure it out for us.  Let’s be daring and let another block do the work…

Under the “Common” tab at the bottom of the action block surface, you’ll find an action block named “Primary Item’s Name”.  Take that block and drag it up onto the action block surface right next to the “Set foreground color of” block.  If you place it correctly, the new purple “Primary Item’s Name” block will connect like a puzzle piece into the “Set Foreground color of” block and it will look something like this:

So, what you’ve just done now is:

1. Decided that when our old yellow square gets touched, that something should happen
2. You’ve decided that you want it’s color to change to red
3. You used the Action Block Surface to connect together 2 action blocks, one that says it can change an item’s color and another that helps us identify that item so that we now have an action that will change the color of the most recently touched block to red.

This is HUGE!! You’ve just uncovered the secret to interactive activity design.  You use blocks that you connect together to make actions happen given an event!   And, you’ve probably figured out that there are like a gazillion action blocks with tons of neat actions that you can use in your activity!  This could get interesting!!

Let’s be happy for now that we got this kind of wired together.  Go ahead and touch “Done” on the bottom toolbar of the action design surface.  When you do so, you’ll be back to our old friendly activity designer surface where “Yellow Block” lives.

Now, let’s try this out.  Click “Done” to exit edit mode.  When the Save prompt comes up, select, “Save Changes”….  The instructions display will show up if you have instructions associated with the activity.  Click ok, then click the play button….

Wait… I thought we were going to have a Red block show up?  Well, remember we said it should show up when someone touches our yellow block…. So, what are you waiting for?? Tap that yellow block!

You did it!!!! You are now officially “Dangerous!”   You have created your first interactive activity.  You made it so that when you clicked on the block, it turned red!  You did it using the action block designer.

If you’ve done this, you have really opened the doors on the power of activity design.  Now, you know how to:

1. Add graphics to an activity
2. Orient the graphics
3. Colorize the graphics
4. Take action when an event occurs

Now, there’s a lot more to activity design than this, but I gotta tell you, if you got this to work, you are well on your way to mastering the design of activities!  Great job!!