Our system allows you to design activities that respond to actions taken by the user of the activity.  For example, you can build your activities to respond to events like a user touching a graphic on your activity.  You use action blocks to specify what actions should occur at the point in time of the event.   You use the Events tab of the Property Inspector to select which event you want to respond to and when you do so, you are presented with the Action Block Surface where you can design your actions.

This tutorial will walk you through using the action block surface, understanding some of the nuances and quirks related to the surface, and will help you feel more comfortable in navigating through this part of our system.

First, let’s do a refresher and remember where the Events tab is located.  When you tap on an activity item and make that item the “currently selected item”, and then click on the “hammer/wrench” icon, you will be presented with the Property Designer window.  At the bottom of the window is a toolbar and on the toolbar is the word “Events”.  When you tap “Events”, the events supported by the activity item are displayed.  A common event to work with is the “Touched” event.  This event is triggered any time someone touches the item while the activity is running.  Here’s a screen shot of the Events tab for an item:

By tapping on the line “Touched”, the Action Design Surface is presented:

Let’s review the pieces and parts of the action design surface.  First, at the bottom of the surface is a toolbar with 2 options… Cancel and Done.

Cancel and Done

If, while working with the action design surface, you decide you do not want to save your work, simply tap Cancel.  The surface will close and the work will be discarded.  If on the other hand you DO want to save your work, touch Done.  The work you’ve generated will be saved and the action design surface will close.

Action Block Notebook

Just above the toolbar is the action block notebook.  The action block notebook contains a collection of notebook tabs (Common, Appearance, Motion, etc).  Each tab, when touched, displays a set of action blocks that can be dragged to the action block surface to specify what actions should occur for the event you’re working on.

Design Surface

The white space above the notebook tab is the design surface.  This is where you drag your action blocks, connecting them together to specify the actions that should occur when the event happens in your activity.

Trash

In this white space, near the top right corner, is a trash can.  The trash can is used to remove action blocks that you decide you do not want to participate in your action.  Straight up, it’s kind of annoying to use.  The idea makes sense… you drag an action off the surface and drop it on the trash can to delete it, but that little trash can seems to have an attitude!  If you don’t drop your action right exactly on top of it, it won’t delete the action.  You’ll know when the action is deleted as it is erased.  If you drop the action on the trash can and it doesn’t disappear, then you’ll need to re-drop it on the trash can until it does.  Annoying…. sigh… but something we can deal with for now.

Undo/Redo

Towards the top left, there are two curvy arrows.  Those arrows are for “undo” and “redo”.  They let you back out a change or redo a change you just undid.

Action Block Notebook

When you touch a tab on the action block notebook, the action blocks associated with that tab are shown.  The tabs are named to give you an idea of the kind of action blocks you might find within that tab.  If you are looking for action blocks that affect the appearance of an item in your activity, chances are good that the action block you need will be inside the ‘Appearance’ tab.

Note that the tabs are scrollable.  What this means is that there are more tabs than space available to show the tabs.  You can drag the tabs back and forth by touching and holding a tab and sliding your finger left or right to see the other tabs (as shown in the following video).

When you touch a tab within the notebook, the action blocks associated with that tab display as shown below.

Above, we have tapped the “Audio/Visual” tab and the blocks associated with that tab are shown above it.  As shown in the video below, there can be numerous action blocks associated with a tab and as such, the blocks, too, are scrollable as shown in the video:

There is a trick to scrolling the blocks… if you tap and slide on a block, the designer is going to think you’ve selected that block and will add it to your surface.  If you are just trying to slide through the blocks, do so by placing your finger in the gray space just above the tab names and slide left and right from there (as shown by the red arrow in the following screen clip)

Assembling Blocks

You assemble action blocks together in the action block surface in order to specify the actions you want to occur given the event you’ve previously selected.

Adding a block

To add an action, you drag an action block from the action block notebook up and drop it on the surface as shown in the following video:

 

Deleting a Block

To get rid of a block, drag that block to the trash can… recall what I said above about it being annoying… drag the block with your finger and drop it onto the trash can.  Note the trash can enlarges to hopefully show you have the item in the right place…although sometimes I’ve seen the trash can enlarge, you drop the block, and it doesn’t delete.  Re-drop the block on the trash can until you see it disappear to ensure it is deleted.

Connecting Blocks Together

Blocks are made to be connected together, kind of like puzzle pieces.  Blocks have notches on them to show where they can optionally connect to other blocks.  In the following vide, I’ll connect a couple of blocks.  First, I’ll add a new action that allows me to set the color of an item on my activity.  Next, I’ll specify that I want the most recently touched item to be the one whose color is changed.

There are a couple of things to notice in that video.  First, I connected the “Set Foreground Color of” block to the “Say Something” block.  I did so by connecting “Set Foreground Color Of” to the bottom notch on the “Say Something” block, indicating these blocks should run one right after the other.

The next thing I did was connect a block “Primary Item’s Name” to the notch next to the name field of the “Set Foreground Color of” block.  What this will do is override the name field of “Set Foreground Color of Block” from the value of “Square-” to the name of the most recently touched item.

Did you notice when I dragged the blocks next to each other they kind of “Clicked” into place?  That little motion lets you know that you have successfully connected the blocks.

In this example, the action that I’ve set up with the blocks would run when the user touches the item on my activity.  Because of the block we’ve selected, when the item is touched, the system would say the words “Hello, World!” and then change the most recently touched item’s color to red.

Deleting Connected Blocks

You can delete more than one block at a time by dragging the connected blocks to the garbage can.  You can also peel apart your block and drag them back together again.  When peeled apart, you’ll be able to select an item from a group of blocks that you may wish to delete.  The following video shows me peeling apart the blocks so that I can get rid of the “Say Something” action block.  I do so by grabbing the blocks below the “Say Something” block and dragging them down.  This frees the “Say Something” block and allows me to delete it.

 

So, that’s pretty much it!! You’ve now mastered the art of dragging and dropping and connecting blocks to formulate your actions!!  Great job!