Help Documentation

Welcome to the SmartBuilder Help Documentation.  Please use the Navigation Menu on the left or below to find the topics you need.  Also, use the search functionality to efficiently search for topics.

The Home Window

The Home window provides a starting point for all major functions in SmartBuilder.  When you select a node in the Home Tree, the Selection List and Toolbar buttons will populate with items relevant for the selected functional areas.

When SmartBuilder is first launched, it displays a Welcome Screen instead of the Selection List with recent content, common tasks, and resources.  It can be accessed again by clicking on the Home folder at the top of the Home Tree.

At the bottom of the Selection List is the Details Pane, where you can view the full Title, Meta-data description, Date modified, Owners, and preview Snapshot of the content that is selected (lessons require you to use the Snapshot button when previewing the lesson).

Open a Lesson

  1. Click on the Work in Progress > Lessons node OR the My Published Content > Lessons node.
  2. Select the lesson to be opened in the selection list.
  3. Click Open in the main toolbar.

TIP: You can also double-click to open a lesson from the Work in Progress > Lessons node.

Preview a Lesson

  1. Select the lesson to be previewed from the appropriate selection list.
  2. Click View OR click the preview snapshot of the lesson in the Details Pane.

  3. Close the preview window by clicking the button in the upper right of the window or clicking the Close button.

Publish a Lesson

To publish a lesson from the Home Window:

  1. Click the Work in Progress > Lesson node.
  2. Select the lesson to be published.
  3. Click Manage.
  4. Select Publish.
  5. Complete the Publish Lesson window fields as desired. (None are required.)
  6. Click OK.

NOTE: Lessons can also be published from the Authoring Stage.

Templates folder

home tree focusing on templates folder

For adding content, and managing permissions and folders, the Templates folder works similarly to the Shared Library.

Typically you will access this folder from the Templates panel while authoring, and not from the Home Window.  To learn more about this and other functionality, read the main section on Templates.

The Shared Library

You can share your content with others in two different ways:

The Shared Library contains content that is accessible by multiple users within an organization.  Content in the My Content section of the Home Tree is not accessible to other users.

Organizing the Shared Library with Folders

Note that many users will not be able to add or edit folders within their Shared Library.  This is due to permission settings.  Please contact your manager or Suddenly Smart if you do not see these options, but feel that you should.

Uploading to the Shared Library

You can upload files and lessons directly to the Shared Library to save a step.  If you already have content uploaded into SmartBuilder, you can alway drag and drop the content into the desired Shared Folder without re-uploading.

User Group Permissions

Permission to read and write content in a Shared Library folder is assigned to groups of users rather than individual users.

Permissions to create and edit folders are only available to users with the appropriate system rights.

To assign user group permissions to a folder
  1. On the Home window, select the Shared Library folder to which you want to add user permissions.
  2. Click Folder.
  3. Click Permissions.

Work-in-Progress vs. Published Content

Please view the main page on Published and Work in Progress here.

The Authoring Stage

The Authoring Stage consists of four main areas:

The Design and Logic panels are opened by clicking on the splitter bars.

authoring stage

The Design Panels

design panels

The Design panels are in the area on the right side of the stage, and consist of the Cast, Properties, and Templates panels.

The Cast Panel

cast

The Cast provides a hierarchical display of all the objects on a page while highlighting the currently selected object.  Whatever object is selected on the page will be highlighted in the Cast, and vice-versa.  The Cast can be used to select objects, show and hide objects, lock objects, and adjust object layering.

User tip: Double-click the blue Cast title bar to quickly re-size the Cast.

Expand and collapse sets and subsets

  1. Open the Cast.
  2. Click the Expand expand icon next to the set you want to expand.
  3. Click the Expand expand icon next to the subset you want to expand.
  4. Click the Collapse collapse icon next to the subset you want to collapse.
  5. Click the Collapse collapse icon next to the set you want to collapse.

 

Lock objects

lock
  1. Open the Cast.
  2. Click on the Lock check box next to the object you want to lock.

Note: If the check box is checked, the object is locked.

Lock All Objects

lock all
  1. Open the Cast.
  2. Click in the Lock all check box located below the Lock label in the Cast header bar.

Note: If the check box is checked, all objects will be locked, but each can be individually unlocked by unchecking its lock check box.

Object Layering

Every object is on a separate layer.  The higher an object is in the Cast, the higher its layer on the page.  Objects on higher layers will obscure lower objects when they overlap.

Show and Hide objects

  1. Open the Cast.
  2. Click the Hide check box next to the object you want to show or hide.

Note: If the check box is checked, the object is hidden.

Hide All Objects
  1. Open the Cast.
  2. Click in the Hide all hide all check box located below the Hide label in the Cast header bar.

Note: If the check box is checked, all objects will be hidden, but each can be individually shown by unchecking its hide check box.

The Properties Panel

The Properties panel displays the properties of the currently selected object for viewing and editing.  It is also where advanced object functions such as media selection, or transitions are accessed.

The properties of an object will vary depending on the object type.  See the section on Objects, and the page on Common Properties.

User tip: Double-click the blue Properties panel title bar quickly re-size it.

The Templates Panel

The Templates panel allows you to quickly apply, remove, and refresh existing templates on your lesson page.

template panel

For more information concerning templates, click here.

Apply a template from the Templates panel

To apply a simple template to the currently selected page via the Templates panel, simply click the green Add Template icon in the Template panel.  This will open the Select Template window, where you can choose an appropriate template from the template folders in the tree on the left.

Watch the video below to see how to apply Templates to your lesson.

To apply a linked template to the currently selected page via the Templates panel, simply click the green Add Linked Template icon in the Template panel.  This will open the Select Template window, where you can choose an appropriate template from the template folders in the tree on the left.

For more on the differences between the templates, see the templates page here.

The Logic Panel

The Logic panel can be found at the bottom of the stage and houses the Action List, the Flow Chart, the Options Panel, which shows contextual details depending on what is selected in the afore mentioned Action List and Flow Chart, as well as the Variables Panel.

development panels

Action List

The Action List contains all of the actions you have created, and allows you to edit the triggers, responses, and conditions of those actions.

For more detailed information regarding the Action List, click here.

descriptive action name

Flow Chart

The Flow Chart is used to set up the sequence in which groups of content (Display Sets or Question Sets) are shown and hidden on the page.  Branching conditions can be included in the flow to show different content based on whether or not certain conditions are met.  The Flow Chart can often help you to create content more quickly and intuitively.

For more detailed information regarding the Flow Chart, click here.

sample flow chart

Options Panel

The Options panel enables you to configure elements of the Action List and Flow Chart.

The Variables Panel

The Variables panel allows you to create three variable types: number, text, and true/false.

For more information concerning variables, click here.

variable panel

The Main Toolbar

The Main Toolbar is located at the top of the Authoring Stage.

Main Toolbar

It contains the Page Navigator, the save, preview, copy and paste, copy and paste coordinates, undo, redo, and delete icons as well as the Text Toolbar controls and the hyperlink icon.

File Menu

From the File menu you can do the following things:

Saving a lesson

To save a lesson from the Authoring Stage:

  1. Click File.
  2. Select Save.
    -or-
  3. Click the Save icon.
    -or-
  4. If you close a lesson without saving it, you will be prompted to save it.
  5. Click Yes to save the lesson.

SmartBuilder will Autosave your lesson based on the system settings (default 30 minutes).  When opening a lesson, if an autosave is the latest saved version, you will be prompted which version you want to open.

 

Saving a copy of a lesson

To save a lesson as a copy from the Authoring Stage:

  1. Click File.
  2. Select Save As.
  3. Enter the name of the new lesson and any Meta-data.
  4. Click OK.

The current lesson becomes the newly created copy, and the original is left as the last saved version.

You must open a Work In Progress lesson in order to save a copy.

You can create copies of published lessons without opening them, by clicking Manage and choosing Save As.

Saving a page as template

Saving as a template will save the current page as a template in your Work In Progress > Template folder.

  1. On the Authoring Stage, prepare the contents of your page to be exactly as you want the template to be.
  2. Click File.
  3. Select Save As Template.
  4. Enter the meta-data for the template as necessary.
  5. Click OK.
  6. Close your lesson.
  7. Find the Template in your Work in Progress > Templates folder.
  8. Open the template and clean it out (see tips below).
  9. File > Save and Publish your template.  It will now move to your Published > Templates folder.
  10. Apply the template following these directions.

Tips:

  • Templates can only be one page in size, so if you want to templatize a multi-page lesson, consider making a template for each page within the lesson, and using a naming scheme to suggest using them together (for example, Multiple choice quiz page 1 of 3, Multiple choice quiz page 2 of 3, etc).
  • It is highly recommended that you take the extra time before creating a template to rename all objects logically so that someone less familiar with the interaction can make sense of the objects present.
  • Be explicit with your objects on the page. (For instance, rather than leaving a text object saying "Text object 6" edit the text to be "Caption for intro picture text" so that way the guess work is taken out of what you intended to do with your objects on the page.
  • Always check your Variables panel.  All Global Variables will come with your lesson, even if they are not currently being used on the page.  It's a good idea to clean out (delete) any extra Global Variables so they do not pollute the lesson you are going to apply the Tempalte to.

Previewing a lesson from the Authoring Stage

  1. Click File.
  2. Select Preview.
    -or-
    Click the Preview icon.
  3. When finished previewing, click the X button or the Close button to close the Preview window.

You can also take a Snapshot of your lesson for use in the Details Pane.

Publishing a lesson

To publish a lesson from the Authoring Stage:

  1. Click File.
  2. Select Publish.
  3. Enter any version comments.
  4. Click OK.

This will create a new published version of the lesson in the Published > Lessons folder.

 

Open the Translate window

To open the translate page from the Authoring Stage:

  1. Click File.
  2. Choose Translate.

This will open the Translate window.  Read more about Translation here.

Close a lesson

You can close the lesson that is currently open by:

  1. Clicking File.
  2. Choosing Close.
    -or-
  3. Clicking on the X button located on the lesson tab.

If you haven't saved your lesson, you will be prompted to do so.

Copy and Paste Objects

1. Select the object you want to copy.

2. Click Copy copy icon or press <ctrl + C> on your keyboard.

3. Click Paste paste icon or press <ctrl + V> on your keyboard.

4. Your last 10 items will remain in your Paste Queue.  Use the drop down arrow to the right of the Paste icon to view your Paste Queue.

paste queue

Copy and Paste Object Coordinates

1. Select the object whose coordinates you want to copy.

2. Click the Copy Coordinates copy coordinates iconbutton.

3. Select the object which you want to paste to those coordinates.

4. Click the Paste Coordinates paste coordinates icon button.

Delete Objects From the Page

1. Select the item to be deleted.

2. Click the Delete delete icon button or press the <delete> key on your keyboard.

Hyperlinks

hyperlink  

Hyperlinks can be used to link to an asset, to an external URL, to another page, or to trigger an internal event.

Hyperlinks can be applied to the following objects:

  • Text (as a whole, or just selected portions)
  • Hotspots
  • Buttons
  • Shapes
  • Graphics
  • Streaming SWFs

The Hyperlink Icon is located up near the Text toolbar.

Edit Menu

From the Edit menu you can do the following things:

Apply a Template

  1. Click Edit in the main toolbar.
  2. Select Apply Template.
  3. Select the appropriate template from the template folders in the tree on the left.

You can also apply a template from the Templates panel.

Copy and Paste Pages between Lessons

  1. Click Edit in the Main toobar.
  2. Select Page Sequence.
  3. Select the page(s) you want to copy.
  4. Click the copy button.
  5. Click OK or Cancel.
  6. Close the lesson.
  7. Open the target lesson.
  8. Click Edit in the Main toobar.
  9. Select Page Sequence.
  10. Select the page after which you want to add the copied page(s).
  11. Click the paste button.

 

Delete a Page

To delete a page:

  1. Go to a different page.  If you want to delete Page 4, you cannot have Page 4 open.  Simply move to a different page and then follow the rest of the steps.
  2. Open the Page Sequencer
  3. Select the page(s) you want and then use the Delete button in the top toolbar.
    delete the page
  4. Click OK in the warning prompt, and OK in the Page Sequencer to accept the changes.

 

 

Edit Meta-Data

To edit the meta-data of a lesson from the Edit menu, click Edit in the Main toolbar.  Then, select Meta-data.  From the resulting Edit Meta-data window, change the information about your lesson as needed (for example, rename your lesson).

However, this is not the only way to open the Meta-data window.

Re-Order Pages in a Lesson

  1. Click Edit in the Main toobar.
  2. Select Page Sequence.
  3. Select the page which you want to move.
  4. Click the Move Up  or Move Down  button respectively.
  5. Repeat steps 4 and 5 as necessary to re-order other pages.
  6. Click OK.

You can also copy , paste , add , and delete  pages from the lesson from the Page Sequence window.

Setting the Page Size

The page size determines the dimensions of the lesson, and the way it will be scaled.

It can be accessed from the Edit menu.

You can specify the size of the page in the Page size drop down.  You can also specify a custom page size and enter in the Page width and Page hieght fields directly.

The page size can be fixed, scaled proportionally, or it can be set to stretch to fit the screen.

Using the Grid

The Grid allows you to quickly and easily align objects by providing a visual cue by which you can measure the spatial relationship of objects and the page.


The Grid in use.

You can set the size, choose the color, set the visibility, and turn on or off snapping.

Snapping will make objects only move to vertexes of the Grid, which makes aligning objects easier.

Note: when using the Grid, holding down the <Control> key while using the arrows will allow you to move objects one pixel at a time.

Tips for using the Grid:

  • Vary the size of the grid depending on your work task.
  • Speed up creation time by using the snapping feature.
  • Plan object layout with page measurements.

 

Keyboard shortcuts

Here is a list of all the Keyboard Shortcuts that you can use while on the SmartBuilder Authoring Stage:

  Command   Description
  Ctrl + Z   Undo
  Ctrl + Y   Redo
  Ctrl + X   Cut
  Ctrl + C   Copy
  Ctrl + V   Paste
  Ctrl + A   Select all
  Ctrl + Arrows   Move object one pixel at a time
  Alt while Dragging    Duplicate object
  Shift + Left arrow    (While in a Display) go to previous Display   
  Shift + Right arrow    (While in a Display) go to next Display 

Page Navigator

Main Toolbar

The Page Navigator contains a drop down list with all the pages in the lesson, and the Master Page.  Clicking on a page will take you there.

It also contains arrows that will take you to the next and previous pages.

In addition, it has an Insert Page button that will create a new page after the current page.

You can also create new pages from the Page Sequence window.

Text Toolbar

 

The Text Toolbar can be used to format the style of text on the following objects:

  • Text
  • Input Text
  • Buttons
  • Checkbox Groups
  • Radio Buttons
  • Drop Down Lists
  • Timers
  • Percent Trackers

You can change the following features:

      Fonts

      SmartBuilder can use Embedded fonts and Device fonts.

      Embedded fonts are packaged with the lesson and any learner can view them, regardless of what fonts they have installed on their computer.  Device fonts need to be installed on a learner's machine in order for them to see the font.  This is useful if the font is prevalent, or if you are using doublebyte characters (such as Chinese or Japanese) and want to add ~15mb to your lesson size.  When selecting a font, the Embedded fonts are at the top of the list.

      The Object Toolbar

       

      object toolbar

      The Object toolbar is on the left side of the screen.  You can add objects to your page by either clicking on them or dragging and dropping them from the object toolbar.

      The Object toolbar is categorized into four object types: basic objects, response objects, display objects, and sets.  For more information about objects, click here.

      Objects

      To insert an object:

      1. Select the object to be inserted from the Object Toolbar on the left of the Authoring Stage.
      2. Drag and drop the object to the desired location on the page.

      -or-

      1. Click on an object on the Object Toolbar.  It will be added to the Stage at a default location.
      2. Position the object to the desired location on the page.

      Note: If a Subset is currently selected when adding a new object, that object will be added inside that Subset.  If you desire to add an object to the Stage, be sure to click on the Stage.  Similarly, if you wish to add an object to a Subset, be sure to click on the Subset to make it your current selection.

      Note: Sets cannot be added to Subsets, only at the Stage level.  If you wish to create another Subset in a Set, you can use the controls on the Set

      Common Properties

      A number of Properties are shared by many objects.

      Descriptions are used by screen reading software for certain objects.  Also for Graphics, Audio and Video, the description will be used for the exported media list.

      The Object Menu

      The Object menu shortcut allows you to quickly create a trigger action using that object or find all actions associated with that object.

      Create an Action using the Object Menu

      1. Select the object you want to act as the trigger object.
      2. Click the Object menu icon.
      3. Select "Create action".
      4. Select the desired trigger method.
      5. Click the Object selection button.
      6. Choose the desired response object.
      7. Click the Method selection button.
      8. Choose the desired method.
      9. Click OK.
      10. When the summary window appears, you may change the action as desired.
      11. Click OK.

      Find actions referencing a particular object

      1. Select the object you want to act as the trigger object.
      2. Click the Object Menu icon.
      3. Select "Actions Using This Object".
      4. Select the desired action category.
      5. If the action is being referenced in the way you specified, it will appear highlighted in the Action List or Flow Chart.

      Select the object on the stage and use the Object Menu to select "Actions Using this Object > All"

      Or, if you're using Variables, select the Variable (click the Variable's type) and use the "Where Used" Icon.

      Where used

       

      This will result in the action(s) getting highlighted in orange in the Action List...

      ...or highlighted in orange in the Flow Chart.

      Audio object

      The Audio object holds MP3s.

      Note: Although SmartBuilder will play any .MP3 format, it is beneficial to encode your .MP3s at a size that is optimal for online viewing.  We suggest:

      • Layer-3, 44100Hz
      • 128 Kbps, mono

      You can choose whether or not to preload your audio.

      You can choose whether the audio starts to play when it is shown or not. Even with Autoplay checked, if an audio object is hidden, or placed in a non-visible Display, it will not play until it is shown.  Uncheck autoplay only if you want to start the audio with an action, or a user's click.

      User tip: Putting an Audio object in a feedback display with {Autoplay = on} and {Display Controller = off} is a great way to add audio without having to add new actions.

      You can choose whether the controller is displayed or not.

      You can also choose which type of controller you wish to display.

      You can also determine whether the audio loops or not.  A loop count of 0 will play through the audio 1 time and then stop.

      You can set the volume for this specific Audio object.

      Note: You can set the audio for the entire lesson dynamically using the Page Controller > setAudioVolume response method.  You can also use the volume controller widget to further expose this control to the end learner.

      Button object

      Buttons are one of the most common interactive objects that you will use when authoring in SmartBuilder.

      You can have multiple Buttons that are linked in a group, meaning that when you click on one Button, it will remain in the selected state and all other Buttons in that group will become unselected.  This is similar to the idea behind Radio Buttons.

      If you want similar functionality, but with only one Button, you can declare whether you want the Button to toggle (stay selected when clicked, and unselected when clicked again) and whether you want it to start selected or not.

      You can also change the appearance of the Button, either choosing from some preset styles, or importing different button states as graphics or SWFs.  Buttons have three states: Normal, On Rollover, and On Press.

      Note: To change the appearance of the text, please see the section on Text Formatting.

      You can also change the accent color for the default styles.  Some styles display this accent more prominently than others.

      Additionally, you can add a sound to the button to provide an audio cue that the button has been clicked.

      CheckBox Group and RadioButton

      CheckBox and RadioButton Groups are almost identical.

      CheckBox Groups can have 0, 1, or more selected choices.

      RadioButton Groups typically have one and only one choice selected.  Clicking on another choice will clear the previous choice.  They can have 0 choices selected, but this is usually the initial state of a multiple choice question.  They cannot have more than 1 choice selected.

      To edit, add, or reorder the answers:
      1. Select a CheckBox or RadioButton Group on the stage.
      2. In the Properties panel, click the Edit Answers button.
        -or-
        Double click on the object.
      3. In the Edit Answers window, you can:
      • Add new answers by clicking the Add button.
      • Delete answers by selecting the undesired answer and clicking the Delete button.
      • Reorder answers by selecting the desried answer and using the Move Arrows.
      • Edit answers by selecting the desired answer and clicking the Edit button.
        -or by-
        Double clicking on the desired answer.

      Edit the answers by double clicking on what you want to change

      Edit the answers by double clicking on what you want to change.  Double click on the object to open the answers, double click on the answer to edit the text.

        You can randomize answers if you want to deter learners from simply learning the positions of correct answers, rather than learning the .  Randomization only occurs when previewing or viewing published content, and is only cosmetic.  This means it does not effect the order of the answers when viewing them on the Authoring Stage, or in any actions.

        You can also customize the look of the CheckBox Groups or RadioButton Groups in a number of ways.

        Display Sets

        It is often useful to show or hide a number of objects at the same time.  For instance, you might want to show feedback for a question that includes a text object, a graphic, a background shape, and an audio clip.  Rather than creating four separate actions to show these objects, you can group these objects and then create a single action to simply show the entire group.

        Display sets control when each subset is shown or hidden.  Here, the term "subset" refers to a display in the set.

        Group of objects = display = subset

        Set = group of subsets

        The image below shows that "Display Set 1" contains three displays, and "Display 1" contains three objects.

        Sets can save you time in the following ways:

        • You can show and hide multiple objects with one action method (eg. show Display 1 will show all the elements inside the set).
        • When you show a subset, you don't have to bother hiding the other subsets (you con't need to tell the system to hide Q1 when Q2 is shown).
        • You can move ALL the subsets in a set with just one move
        • You can apply transitions to ALL the subsets in a set in one step.
        • You can easily/visually create conditional branching by linking subsets to the Flow Chart.

        The Display toolbar can be used to navigate, add or remove displays from the set.

        Drag and Drop object

        A drag-and-drop interaction is good for classification, association, and identification interactions. Typically, a user drags multiple objects onto one or more drop objects.

        The drag-and-drop object is considered a master object which means that it takes control of other objects on the page. There are three types of objects that can be used as drag objects: text, shapes, and graphics.  The drag-and-drop object can only control objects located in the same peer group as itself. For example, if the drag-and-drop object is within a display, it can only control objects also in that display.

        Drop Down list

        Drop Down Lists are another way to collect data from learners.

        Graphic object

        Graphic objects can hold the following image types:

        • JPGs
        • GIFs
        • PNGs
        • SWFs

        Because they can hold SWFs, Graphics can contain animations.  If using animated SWFs, please refer to the SWF Best Practices page.

        Note: Graphic placeholders will display their Name and Description properties, which can be useful for rapid prototyping.

        When Graphics are loading, they display a loading image, which can be changed in the Preferences.  If you wish for the page to not display until the image has been loaded, you will want to preload that image.  Really, it is a matter of whether you want your learner to see a loading screen for a while, or one that loads piece by piece.  By default preloading is set to off for each new Graphic.

        When scaling graphics, sometimes you don't want to change the size at all (say it is a raster image), or you want to make sure it scales proportionally.

        You can also flip a Graphic horizontally and/or vertically.  You cannot rotate graphics.

        Hotspot object

        The Hotspot is an object that is typically used in conjunction with graphics.  It is very similar to a Button object, but often is invisible to the learner to simulate them clicking on the image below the Hotspot.  However, the appearance of Hotspots can be configured to allow for a multitude of different interaction styles.

        You can change the fill color and transparency individually for each of the three interaction states: Initial, Rollover, and Clicked.

        You can give the Hotspot a border, which will change to be the current state's Color property, but will always be completely opaque, regardless of the state's Transparency property.

        You can make the Hotspot stay in its clicked state when selected by setting the Toggle property.  This can be useful if you want the learner to be able to select, or highlight, aspects of the learning interaction.

        Input Text object

        The input text object  is generally used to capture data from the user.

        For instance, input text objects can be used to create a fill-in-the-blank quiz where the learner types answers into blank input boxes.  The answers can then be compared to the correct answers for scoring.

        How to set up a Conditional Action

        More Objects

        SmartBuilder allows you to import your own custom objects that were created in Flash, and use them in your SmartBuilder lesson.  These SDK objects must follow the Widget Documentation located in the Shared Library > SmartBuilder Widgets > Documentation folder in the Home Tree.

        The terms SDK object and Widget are interchangeable.

        Widgets are essentially treated the same as other SmartBuilder objects, except that they are usually more specific in their functions.  SmartBuilder offers a number of these specialty objects for your use.

        Each Widget looks and acts a little differently.  All will have a placeholder of some sort on the Authoring Stage, and context specific methods for Triggers, Conditions, and Responses.

        Widgets cannot automatically control other objects or the lesson.  In addition to being placed in a lesson, they will often need to be "hooked up" to the lesson or other objects in order to provide the desired functionality.  Luckily, properly designed Widgets will provide "hooks" (methods) that allow them to be useful via actions in the Action List.

        Cookie Object

        This object will allow you to save and retrieve cookies on a user's computer, provided that that user's security settings will allow cookies.

        You can use this object to store a bookmark, a student name, or even a score, on the user's computer.  There is a template in the Template > - Master Page: Resources folder that deals with bookmarking using cookies, and it is best to take a look at it if you're planning on implementing that functionality.

        You must set the name and the value of the cookie as well as how long you want to keep the cookie (in days).

        Note: You will most likely leave the Path section blank.  If you are an advanced user, and want to save and retrieve cookies from different lessons, you may wish to choose a path to the shared cookies.  Be aware that cookies can only be retrieved/saved from a directory that is in their path.  For example, if the lesson is located at "example.com/section4/lesson2" (making your default path for the cookie "/section4/lesson2"), then you cannot choose "/section4/lesson10" as your path.  You must choose "/section4" or just "/" and it will work.

        cookie setCookie

        Email object

        This object is used to launch the learner's default email client.  It can pass information directly into the new email, including the following fields:

        • To
        • CC
        • BCC
        • Subject
        • Body

        This widget will NOT automatically send an email from a server.  Every server handles emails differently, and since there are no standards, it would be impossible for SmartBuilder to try to execute any server-side scripting.  If you wish to send emails directly from the server, you can use the URL Data object to communicate with a PHP or other language script executing the actions, which would have to be built completely outside of SmartBuilder.

        Note, that you don't have to fill in all the fields, only the ones that you care about.

        Google Analytics Object

        This object allows you to track or report status to Google Analytics.

        You must specify your Google Analytics ID in the Account ID Property of the object.

        Then you can use the methods to communicate information.

        The 2 object-specific response methods are:

        For more information on Google Analytics, please view their website here:

        http://code.google.com/apis/analytics/docs/

        HTML Frame

        This widget allows you to control URLs of other html frames that are possibly outside of SmartBuilder.

        The HTML Frame object is a very unique object for when you have a SmartBuilder lesson embedded inside a larger website.  For example, a help site, where you are using frames (e.g., a frame on the left for the Table of Contents, one at the top for the header, and one in the center for the content).  The HTML Frame objects allows the SmartBuilder object to control those other frames, for example changing the Table of Contents to another section.

        It was created for a specific organization, and we made it available to everyone, but chances are, most users will never have a situation that warrants using the HTML Frame object.

        It has 2 methods.

        setURL(url) - To change the target frame url. Internally, it calls "setFrameTarget" through the Flash interface, which takes the window path and the url.

        setFramePath(path) - This is just another way to dynamically change frame path during runtime.

        The object has no visiblity on the stage during runtime.

        IFrame object

        This object will allow you to embed HTML in your SmartBuilder lesson.

        An example of this would be a lesson that has instructions on navigating a company's resource website.  It has the real website embedded in the middle of the lesson, and instructions on where to go below it.  It could also have a question based on that embedded content.

        Below is a lesson with a menu, page navigation, and instructions with the Flash Help site embedded in the middle.

        Some other possible examples of using the IFrame effectively are:
        • Embedding YouTube videos (follow the instructions in this video to see how).
        • Displaying external resources (such as help or a website).
        • Displaying internal resources that are easier to build en masse in a different technology (e.g., a glossary built in HTML, or a PDF resource).
        • Getting around embedding things directly in SmartBuilder, such as AS3-based Flash content, or content from other tools (like Articulate).
        The IFrame object has a few limitations, but often these are not significant barriers.  They are:
        • IFrame always shows up on top of other content.  Since it is technically a popup window without borders or bars, it will always float to the top, even if you layer other objects on top of it on the Authoring Stage.
        • Your lesson cannot scale proportionally.  It must be fixed size.  IFrame does not scale with the content, so it will look strange if the background can change size, but the IFrame does not.
        • IFrame is only visible after publishing.
        • IFrame is also incompatible with some of the 508 functionality, and both cannot be used in the same lesson.

        You can resize the IFrame object on the stage, or specify the size in the Properties panel.

        To point the IFrame to the content of your choice, you have 2 options - one to point to a live URL on the web, or to point to an asset that has been uploaded to SmartBuilder that will be bundled with your lesson.

        • You can specify the URL in the Properties panel.  You can set the URL via the action list as well.
        • Similarly, you can use the Embed code provided by YouTube, Jing, and hundreds of other web-based tools (you could even put a SmartBuilder lesson inside a SmartBuilder lesson!).
        • You can specify the Asset in the Properties panel only.  For more on uploading Assets, see the page here.

        Icon Tracker

        This object is similar to the Percent Tracker, however instead of reporting a value between 0 and 100 based on a smooth gradation, it allows an author to provide feedback based on a whole number.  It is useful for telling how many points are possible, and also how many points the learner has earned.  An example might be a quiz with 10 questions.

        You can customize the Spacing between icons property to change the look of the Icon Tracker.  You cannot change the graphic.  However, if you have a need for a custom graphic, you can request the source file of the widget or a customized widget from Suddenly Smart.

        Menu with Pages

        This object will automatically create a list of the pages from the Lesson.  You can customize the look and feel of this object using the Properties panel and Text Toolbar.

        More often than not, this menu will be located on the Master Page.

        Setting up the Menu Widget:

        After placing the menu object on the Master Page, you will need to set up the following actions:

        Trigger: Page Controller > onPageChange
        Response: Menu Widget > setSelectedPageIndex > Page Controller > getPageIndex

        This will update the Menu Widget, even if a means other than itself is used to change pages.  If a "next" button is used to advance the lesson then we still want to Menu Widget to show a checkmark.

        Trigger: Menu Widget > onSelection
        Response: Page Controller > gotoPage > Function > Menu Widget > getSelectedPageIndex

        This will allow the user to click on the items in the menu to go directly to that page.

        Note: You can check the Allow skip ahead checkbox in the Properties panel if you want your learner to be able to use the menu to go to pages ahead of their current page, or clear the checkbox if you want to only allow them to use the menu to get to previously viewed pages.

        A more customizable menu that allows topics, customizable skins, and selecting which pages are part of the menu can be found here.

        Menu with Topics and Pages

        This object is similar to the Menu Object, but allows you to create topics or folder to organize your menu pages.

        You can customize the look and feel by modifying and loading a specially created SWF into the "Custom skin" Property.  You can obtain the FLA needed to generate the SWF by contacting support -at- suddenlysmart.com.

        More often than not, this menu will be located on the Master Page.

        Before you can use this object, you must specify which pages are part of the menu, by clicking on the Edit Structure property.  The following actions are required for the menu object to operate properly.

         

         

         

         

         

         

        Choosing which pages to show in the Menu:

        Setting up the Menu actions:

        After placing the menu object on the Master Page, you will need to set up the following actions:

        Trigger: Page Controller > onPageChange
        Response: Menu Widget > setSelectedPageIndex > Page Controller > getPageIndex

        This will update the Menu Widget, even if a means other than itself is used to change pages.  If a "next" button is used to advance the lesson then we still want to Menu Widget to show a checkmark.

        Trigger: Menu Widget > onSelection
        Response: Page Controller > gotoPage > Function > Menu Widget > getSelectedPageIndex

        This will allow the user to click on the items in the menu to go directly to that page.

        Note: You can check the Allow skip ahead checkbox in the Properties panel if you want your learner to be able to use the menu to go to pages ahead of their current page, or clear the checkbox if you want to only allow them to use the menu to get to previously viewed pages.

        You can also store and retrieve the state of the object by following the directions here.

        RTMP Streaming Video Object

        This object allows you to use a streaming media service to host your video content (usually a paid service provided by a 3rd party), and to bring that video into SmartBuilder.  You can even use cue points like the regular video object to trigger events in SmartBuilder.

        To use this object, you need to know both the URL and the Stream.  These are placed in the appropriate property fields in the Properties panel.  Here is an example URL and Stream that you can use for testing.

        URL: rtmp://dk2isqp3f.rtmphost.com/flowplayer
        Stream: honda_accord

        SWF Messenger

        This object is similar to the Streaming SWF object.  The widget is placed on the Authoring Stage and a SWF is loaded into it, allowing SWFs to embedded in SmartBuilder lessons.  Using this SWF Messenger widget will allow you to:

        • Fire an event from a SWF that SmartBuilder can catch and use as a trigger.
        • Send a message from SmartBuilder to the SWF, which can be used to change the state of the SWF.

        Scalable Shapes

        This object is similar to both Graphic objects and Shape objects.  Like a Graphic object, it is just a placeholder that can load SWFs.  When the SWF is loaded, it is displayed, and (like a Shape) can be resized without distorting the corners and a Color Property can be set to customize the way it looks.

        Scaling proportionally without Widget Scaling with Scalable Shape Widget

        Notice how the elements on the left and the bottom do not distort.

        After choosing the Scalable Shape, you will have to choose the SWF that you want to load.

        You can preview these object in the Media Select window and see how they look and scale in a similar manner to the examples above.

        These SWFs have to be specially created in Flash and contain ActionScript to work properly.  There are a number located in the Shared Library > SmartBuilder Media & Assets > Design Elements subfolders.  Mostly in the Scalable Shapes subfolder.  They can be used to make backgrounds for displays, and often go well with Graphic Effects.

        If you wish to learn how to create your own Scalable Shapes we can send you the source files, or you have an idea that you would like to see created, please email us with the design and we can build it and share it with everyone.

         

        Search object

        This object will allow you to run searches on the text in your entire lesson, and then go to the page with that text.  Because of this, it makes the most sense to place this object on the Master Page.

        The search object itself is the search results box, and requires an Input Text object and a Button or Hotspot to work properly.

        The following outline will show you how to set up a Search widget.  Depending on the layout and functionality of your lesson, you can change the actions as you see fit.  For example, you may want to have the search results always be visible if the search functionality is located inside a popup display that is built into the interface.  Or you may want to set the trigger to Input Text > onValueChange instead of having a search button.

        URL Data Object

        This object is used to send data to a server.  It is similar to the Server Communication object built into SmartBuilder, except for the following differences:

        • It can send data across domains, and
        • the lesson does not wait for a response from said server.

        Typical uses for a URL Data object include sending information to a server where server-side script will capture it, or launching a certain page or search results based on data captured in SmartBuilder.  See this forum post for more information on how to use it.

        Samples using the URL Data object

        Here is a sample action that will send an update command with a value being passed along.  Of course, there needs to exist some sort of server-side script that can store this in a database.  Essentially this is the same as entering http://www.website.com/serverScript.php?query=update&q1=45&q2=2009 into the address bar of your browser.

        Trigger: Submit Button > onClick
        Response: URL widget > addParam > "query" = "update"
        Response: URL widget > addParam > "q1" = "45"
        Response: URL widget > addParam > "q2" = InputText 1 > getText
        Response: URL widget > setURL > "http://www.website.com/serverScript.php"
        Response: URL widget > invoke

        Here is an example of sending a search query to google, essentially the equivalent of entering "http://www.google.com/search?q=e-learning" into the address bar of your browser.  Since it automatically shows a bunch of search results and changes the webpage, it would make sense to invoke this in a new window so that it doesn't navigate away from your lesson.

        Trigger: Submit Button > onClick
        Response: URL widget > addParam > "q" = "e-learning"
        Response: URL widget > setURL > "http://www.google.com/search"
        Response: URL widget > invokeInNewWindow

        Note: When using the "invoke" method, another name value pair is appended at the end of the url.  This is "&rand=1111111111111", where the string of 1s is a randomly generated number.  This is to prevent caching and the same value being ignored if sent multiple times.  Your server-side script should allow for this value to be received, but it can disregard it (basically, just make sure that your script can handle this extra data without breaking).  This is currently not the case with "invokeInNewWindow" method, but this method may be updated in the near future as well to keep everything consistent.

        Volume Controller

        This is an object that provides a volume controller to your lesson.  It controls the lesson volume, which will include any background audio, voice over narration, sound effects, etc.  It will not pause or play any audio.

        There are several of these objects with different skins.  They operate identically.

        Widget Download Page

        For those of you that do not have a separate, installed environment that we do not have access to, you can ignore this post. For those that do, since Suddenly Smart does not have access to your environment, you must upgrade your widgets. Luckily, this is as easy as uploading or replacing graphics!

        Right-click to do a ‘Save As’ on the widget file.  Remember that you will need to upload it to SmartBuilder as ‘widget.zip’, so do not rename this package.  If you want to download multiple widgets at once we suggest storing them in separate folders.  However, once uploaded into SmartBuilder, you will be able to edit the meta-data for this widget.  We suggest naming the widget according to function (eg. ‘Cookie Object’) to mirror the names on the widget list.

        If you do not already have any widgets, or a certain widget, you will need to upload these into the "Shared Library > SmartBuilder Widgets" folder. Choose "Upload Media & Assets", and then pick "A SmartBuilder Widget" from the radio buttons. Upload the widget.zip and remember to rename the meta-data.

        If you are updating an existing widget, then you need to find the widget (usually located in the "Shared Library > SmartBuilder Widgets" folder.)  Select that widget in your list, and use the ‘Replace’ function to update the widget package.  Upload the widget.zip and remember to rename the meta-data.  By using the ‘Replace’ function, you ensure that all existing instances of that widget in your learning content will automatically be updated the next time it is referenced from a work in progress lesson.

        When you bring a widget into SmartBuilder, it needs to be called "widget.zip". That is why they all have the same name.  If you plan to download all of them, keep them separated in subfolders. When you upload each one, and it prompts you to enter Meta Data, you can change the name from "widget" to the name given on this page, or the subfolder name where you found the widget. Keeping these widgets named the same as the folder will help if support issues arise later.

        Let us know if you have any issues during the process. You can reach me at 760.635.5700x207 or via email ndhillon at suddenly smart dot com.

        Widget Name Date updated  
        Cookie Object  April 15, 2010 Download
        Email Object  August 19, 2009 Download
        Google Analytics Object  February 28, 2011 Download
        IFrame Object  November 02, 2010 Download
        Icon Tracker  August 19, 2009 Download
        Menu with Pages  February 28, 2011 Download
        Menu with Topics and Pages  November 13, 2013 Download
        RTMP Streaming Video Object  March 7, 2012 Download
        SWF Messenger  August 21, 2009 Download
        Scalable Shapes  April 15, 2010 Download
        Search Objects  August 21, 2009 Download
        Tabs Object  April 24, 2012 Download
        URL Data Object  February 28, 2011 Download
        Volume Controller - Blue  August 21, 2009 Download
        Volume Controller - Grey  August 21, 2009 Download
        Volume Controller - BlueIce  November 4, 2009 Download

         

        MultiState Button

        The multistate button allows the learner to flip through a sequential series of images in order to make a selection. For example, in an interaction where the learner must select a screw size, you can use a multistate button containing graphics for each screw. The learner would click on the multistate button until the desired screw was displayed. (NOTE: Only one of the button states can be the correct choice.)

        The size of the multistate button is based on the first graphic being referenced. Similarly, the Lock Aspect Ratio, and Lock Original Size properties will reference the first graphic to compute those settings.

        Page Controller

        The Page Controller is only visible on the Master Page.

        It is available in the action menus on every page.

        The Page Controller has access to page level methods such as onPageLoad, nextPage, previousPage, reload, and others.  On the Master Page, the Page Controller has additional methods available to it.

        You can use the Page Controller to communicate between pages.  Because SmartBuilder lesson pages are reset to their initial status when loaded, communicating between pages only really makes sense when it happens between the current page and the Master Page, which is always visible.  Communication between regular pages is typically handled by storing data in variables.

        Note: Only one Global Event can be sent at any one time.

        Sending a Global Event

        This is an example where when a quiz page loads, it will fire a Global Event to disable the menu button, which exists on the Master Page.  When the quiz has been passed, it will fire another Global Event to hide the next mask.  The names of Global Events can be any string.

        On the Quiz Page:

        Trigger: Page Controller > onPageLoad
        Response: Page Controller > fireGlobalEvent = "disableMenu"

        Trigger: Question Set 1 > onComplete
        Condition: Question Set 1 > isPassed == true
        True Response: Page Controller > fireGlobalEvent = "enableMenu"
        False Response: [leave blank]

        On the Master Page:

        Trigger: Page Controller > onEvent
        Condition: Page Controller > getEvent == "disableMenu"
        True Response: Menu Button > disable
        False Response: [leave blank]

         

        Trigger: Page Controller > onEvent
        Condition: Page Controller > getEvent == "enableMenu"
        True Response: Menu Button > enable
        False Response: [leave blank]

        Percent Tracker

        The Percent Tracker object gives you a way to visually represent a value on a scale from 0 - 100.

        For instance, imagine the learning objective was to teach someone how to manipulate sensitive production machinery, and a negative outcome of doing the proper safety checks incorrectly was that the machinery would overheat. You might use the gauge style tracker, and label it to appear to have a safe, warning, and danger level. As the user made mistakes in the learning interaction, the gauge would increment from safe, to warning, to danger. If the gauge reached the danger level, you could end the interaction, and display negative final feedback.

        Select a tracker style
        There are several different tracker styles including a bar tracker  and a gauge .

        1. Select the Percent Tracker object.
        2. Open the Properties panel.
        3. Click the Style dropdown list.
        4. Select the desired style.

        Question Sets

        A Question Set is the same as a Display Set, but includes the following addtional functionality when it is linked to the Flow Chart:

        For clarification on this functionality, read about Reporting a Score when using a question set in the Flow Chart.

        SCORM / AICC

        SCORM stands for Sharable Content Object Reference Model.  It is a standardized set of calls that allow lessons and courses (Sharable Content Objects, or SCOs) to communicate with a Learning Management System (LMS), such as Moodle or BlackBoard.

        SmartBuilder has a number of preconfigured SCORM calls that can be sent on appropriate triggers, as well as the ability to send any other recognized SCORM call.

        The SCORM / AICC is an object that only exists in action menus, and not on the Authoring Stage at all.

        scorm aicc

        There are two versions of SCORM, SCORM v1.2 and SCORM 2004.  It is not the place of this help documentation to question why a collection of standards does not choose to standardize their own version numbering system, but SCORM 2004 is more recent and has a number of improvements and additional methods available to it than v1.2 does.  However, v1.2 is more widely used.

        Upon downloading a lesson, one must specify if they want their content to be SCORM compliant, along with the version.  SmartBuilder will automatically convert its SCORM calls to the appropriate version, if those calls are available in that version (for example, there is no v1.2 equivalent of setInteractionResponse).

        SmartBuilder is not an LMS, and as such SCORM calls will not work when previewing or viewing content from SmartBuilder.  The best way to test a lesson's SCORM calling functionality is to download it and upload it into your LMS.  If you are troubleshooting, and want detailed logs of what is being transmitted to your LMS, www.scorm.com's TestTrack is an extremely useful (and free) tool for testing your SCORM compliant content.  You must still download your content from SmartBuilder and then upload it into TestTrack.

        Question Sets can automatically submit their raw score to the LMS without having to set up an action.  If you wish to get or set a SCORM call that is not prebuilt, use the LMSSetValue or LMSGetValue to manually enter the SCORM call you wish to send.

        You can use the LMS to store information such as a bookmark, user notes, or the status of a menu object, all of which can be retrieved later.  For bookmarking, please see the Template > Master Page: Resources folder, and refer to the example in the above collapsed section on how to store data.

        Server Communication

        This object will allow you to communicate directly with a server-side script.  See this forum post for more information.  The SmartBuilder lesson must be located on the same server as the server-side script it is trying to communicate with.  SmartBuilder will wait until it gets a response from the server before continuing.

        Important: This means that if SmartBuilder does not receive a response, it will "break" the lesson (it will become unresponsive).

        Use the URL Data widget if you wish to communicate across domains and/or do not want your lesson to wait for a response from the server.

        This object is often used when an organization doesn't want to use an LMS, but still wants to track learners' progress.

        Sample action using the Server Communication object

        Here is a sample action that will send an update command with a value being passed along.  Of course, there needs to exist some sort of server-side script that can store this in a database.  Essentially this is the same as entering http://www.website.com/serverScript.php?query=update&q1=45&q2=2009 into the address bar of your browser.

        Trigger: Submit Button > onClick
        Response: Server Communication > setParameter > "query" = "update"
        Response: Server Communication > setParameter > "q1" = "45"
        Response: Server Communication > setParameter > "q2" = InputText 1 > getText
        Response: Server Communication > sendToURL > "http://www.website.com/serverScript.php"

        Note: Another name value pair is appended at the end of the url.  This is "&rand=1111111111111", where the string of 1s is a randomly generated number.  This is to prevent caching and the same value being ignored if sent multiple times.  Your server-side script should allow for this value to be received, but it can disregard it (basically, just make sure that your script can handle this extra data without breaking).

        The postToURL method is used in SmartBuilder the same way as sendToURL method.  However, there are these differences:

        • sendToURL uses the GET form submission method (appends the data to the URL that is called).  This means that the data is less secure, but easier to manipulate.
        • postToURL uses the POST form submission method (sends the data in the message body of the HTTP request).  This means the data is more secure and more data can be sent, but it is generally more difficult to create a server-side script to make use of this data.

        To learn more about the differences between these methods, please refer to this external resource - http://www.diffen.com/difference/Get_vs_Post

        Shape object

        Shapes are basic building blocks for SmartBuilder lessons.  They can be used to give feedback, provide backgrounds for Displays, mask interactions, and be used as drop areas or drag objects, just to name a few of their uses.

        By default, a shape is a rectangle.

        You can also flip a Shape horizontally and/or vertically.  You cannot rotate Shapes.

        Streaming SWF

        Streaming SWF object highlighted on the Object PalletThis object is used for SWF animations, such as Captivate movies.  If using animated SWFs built in Flash, please refer to the SWF Best Practices page.

        It is identical to the Graphic object, except for the following:

        • It does not display on the Authoring Stage (so it does not take computer resources when authoring).
        • It will start playing before it is fully loaded during Preview and Published views (useful for longer movies that you wish to stream).
        • When using Captivate movies, it resizes more crisply than the graphic object.

        Please refer to the Graphic object page for common actions.

        Text object

        The text object in SmartBuilder is quite flexible, and all text editing and formatting can be done directly to the text object on the page. What's more is that each text object can include an unlimited amount of different text formats.

        Text formatting can be applied to the entire text object, or just a selected portion of it.  To see how to format text, see the page on Formatting.

        For more on creating hyperlinks, see the page on hyperlinks.

        In addition, you can change the following properties:

        keywords: scrollbar scroll bar

        Timeline object

        The Timeline object  allows a user to organize and control the appearance of objects over time.  It can be used to control the showing and hiding of objects in relation to a timeline or to an audio file.  It also controls animations and transition effects associated with the showing and hiding of objects.

        The Timeline is considered a master object, which means that it takes control of other objects.  It can only control objects located in the same peer group as the timeline.  For example, if the timeline object is within a display, it can only control objects also in that display.

        User tip: Double click the Timeline object on the Authoring Stage to view its properties for editing.

        Timer object

        The timer object  allows you to time an interaction in two ways:

        • Count down time, forcing a user to finish an interaction in a specified amount of time
        • Count up, which gives you the ability to track the total completion time of an interaction.

        The Start and Cue points of the timer object can be set in the properties panel, as well as Trigger Intervals, all of which can be used as triggers for actions.

        Additionally, the visual characteristics (size, color, font family) of the timer object can be configured using the text control toolbar.

         

        Video object

        The video object in SmartBuilder requires a FLV file type.

        If you have an MP4 video, you can change the file extension to FLV and it will upload into SmartBuilder

        If you have a video file type other than MP4 or FLV, it is possible to upload that video as an asset, and launch the video in a separate window.  There are also a number of free FLV converters that you can find online.

        The optimal encoding settings for your FLV object will depend on the size, and nature of the video. The best resource for determining these settings will be to use the Flash website. Here is a very good article in their developers forum for this exact topic.

        For larger videos, you can upload your video to an external server, and use the FLV URL property. As soon as you enter the URL, the video will show on your page, and will behave the same as if you were loading from inside SmartBuilder. This is beneficial because you will not have to download large lessons that contain the videos - it is always dynamically pulling the video from that external server. This also makes updating the video or the lesson easier, because they are separate.

        You can use either FLVs or MP4s with this process.  Make sure that the URL thatyou are using ends in either MP4 or FLV, if you just point to a page, like a Vimeo url or YouTube url, or another page hosting a streaming video, that will not work.  You would want to use the IFrame for those situations.

        You can choose whether the video starts to play when it is shown or not. Even with Autoplay checked, if an video object is hidden, or placed in a non-visible Display, it will not play until it is shown.  Uncheck autoplay only if you want to start the video with an action, or a user's click.

        When scaling videos, sometimes you don't want to change the size at all, or you want to make sure it scales proportionally.

        You can choose whether the controller is displayed or not.

        You can also choose which type of controller you wish to display.

        You can also determine whether the video loops or not.  A loop count of 0 will play through the video 1 time and then stop.

        You can set the volume for this specific Video object.

        Variables

        variable panel

        A variable is a container that holds information. A variable has three properties: its name, type and value. The type cannot be changed after the variable is created, but the name and value being stored can change. For example, you might create a variable named SCORE, of type number that has an initial value of 0. Every time a certain action is performed, such as a correct response to a question, the SCORE can be incremented by a value of, say, 1. Then at some point, such as the completion of an exercise, the SCORE variable can be retrieved and displayed on the page.

        There are three variable types: number, text and true/false.

        Local vs Global
        The difference between a Local and a Global variable is that a Local variable is only available on that one page.

        So if you're doing some calculations and are displaying the information on that page, you can limit yourself to a Local variable.  If you only need them on that one page, then by using Local variables you also don't clutter up your variables panel with lots of variables that are not important (for example, if you have lots of variables on page 10, you don't have to see them on all your other pages).

        Global variables are used when you need to carry information from one page to another, or if you need that value remembered when you leave the page and come back.  Examples of this might be an "exercise1Completed" variable or a "studentNameVar" that is recorded on one page, and then displayed on another.

        Now that you know the difference, you can decide whether the variables need to be Global or Local.  If you wish to change an existing variable, simply click the globe icon on the variable, and that will toggle between them.

        Where Used: To aid in your discovery of where these variables are being used, you can also select the variable (click in the empty space somewhere, or on the type [e.g., T/F, Num, Text]), and you can use the right-most icon to highlight any actions that are using that variable (on that page).  See this video:

        Note that the Value displayed with Variable will be the initial value of the variable when the lesson is launched.  The default initial values are 0 for numbers, false for True/False, and blank for Text variables.  However, if you have a count down from 10 points, you might change the initial value to 10.  This can be useful if you plan to change the value later, or for debugging and testing purposes.

        To learn how to create a variable, click here.

        Create a new variable

        To create a variable:

        create a new variable

        1. Click the green Insert icon in the Variables panel.

        2. Enter the name of the variable in the Name field.

        3. Click the Type dropdown menu.

        4. Select the desired type of variable.

        5. Click OK.

        NOTE: Variables can be configured as local variables that are only accessible on a given page, or global variables that are accessible across all pages of a lesson.  Global variables are differentiated in the variable list using the globe icon global variable.

        Delete a Variable

        1. Open the Variables panel.

        2. Select the variable to be deleted (to select a variable, click on variable Type to select the variable).

        3. Click the Delete button.

        select variable

        Number Variables

        A number variable stores numbers.

        For example, you might create a variable named SCORE, of type number that has an initial value of 0. Every time a certain action is performed, such as a correct response to a question, the SCORE can be incremented by a value of, say, 1. Then at some point, such as the completion of an exercise, the SCORE variable can be retrieved and displayed on the page.

        variable panel

        Store and Retrieve Data from Variables

        To store data in a variable, click the Select button in the response section from an action, and then select the desired variable from the pop-up menu.

        You can set the variable to a fixed value.  In the example below, the "Quiz score" variable is being set to "80".

        Alternatively, you can dynamically set the value based on the value returned by some other object.  To do this, click the dropdown menu icon, then select the object that will pass data to the variable.  In the example below, the "Student name" variable is being set to whatever the learner types into the "Name input field" object.

        Set the tracker value to a variable value

        Often times you will want to display a value being stored in a number variable using the tracker object.

        To do this, you will need to specify the trigger when you want this action to take place.  The response object will be the Percent Tracker object.  Choose the method "setValue" and set the value to a function which calls the number variable's "getValue" method.

        Text Variables

        A text variable is also known as a string variable.  This type of variable stores an array, or sequence, of characters.

        For instance, at the beginning of a lesson, you might want a user to enter their name, so that at the end of a lesson, you could offer them personalized feedback. You might create a text variable, NAME, in which to store their name for retrieval at the end of the lesson.

        variable panel

        True/False Variables

        A true/false variable is also known as a boolean variable.  This type of variable stores a true or false value.

        For example, you might require users to enter their name at the beginning of an interaction.  Following that, you might create a true/false variable named COMPLETE and give it an initial value of false.  When the user enters their name, the COMPLETE variable sould be set to true.  When the user tries to continue from that page, a condition checks to see if the value of COMPLETE is true.  If so, the user is allowed to continue, but if COMPLETE is false, then they are prompted to enter their name before continuing.

        variable panel

        Lessons

        A lesson is one or more pages of content. Lessons can be delivered stand-alone, or can be bundled with other lessons to create a course. A stand-alone lesson can be designed like a mini-course in the sense that a lesson can contain its own header, footer and background graphics, resources, and navigational elements.

        Lessons typically have 5-30 pages of content. You should avoid making lessons too large because only one person can edit a lesson at a time, and large lessons are less reusable across multiple courses.

        sample
        Sample lesson

        Create a new lesson

        To create a new lesson:

        Open a lesson

        Lessons can be opened from a variety of places.

        Preview a lesson

        You can preview a lesson or a template from a variety of places.  Authoring Previews and Published Previews are different.

        Create a Snapshot of your lesson

        Create a Snapshot of your lesson that will be displayed as the preview thumbnail in the selection list Details Pane.

        Edit Meta-data

        Besides being launched when you first create a lesson, you can open the Meta-data window from a variety of places.

        Import & export text from a lesson

        You can export all the text from a lesson to a spreadsheet.

        After making changes, you can reimport that spreadsheet to update your lesson.

        This is useful for allowing Subject Matter Experts (SMEs) to directly change the text in a lesson, or for running Find & Replace functions on a large scale.

        Notice that text objects from SmartBuilder that have multiple formats will be split across different cells.  Be sure to preserve this separation.

        This can only be done with lessons that have a Work In Progress copy.

        Export a media list

        You can create a list of the media used in a lesson, with the locations, titles, descriptions, sizes, and types.

        This can be used to externally keep track of the status of a lesson's various media.  This can be used to coordinate with a third party artist, or simply for your own organizational puproses.

        Note: If you want to copy and paste the HTML output into an Excel spreadsheet, be sure to highlight the title as well to preserve proper formatting.

        Import a PowerPoint

        You can import all the text and regular graphics from a PowerPoint file into a new SmartBuilder lesson.  It will bring in all the text, preserving size, color, and location.

        The following items will not be imported:

        • Font
        • Shapes*
        • Certain graphics (like clip art)*

        * To bring these into SmartBuilder, you can Right Click on the object, and choose "Save as Picture".  Then upload the resulting PNG or JPG file into SmartBuilder!

        To Import a PowerPoint:
        1. Save a PowerPoint lesson with an extension of ".ppt".
        2. In the Work In Progress > Lessons folder, click Tools.
        3. Choose Import PowerPoint.
        4. Select the PowerPoint that you want to import.
        5. Enter in a new title or any Meta-data.

        A new lesson will be created in your Work In Progress > Lessons folder.

        Publish a lesson

        This does the same thing as publishing a lesson from the Authoring Stage.

        It will disappear from the Work In Progress > Lessons folder because there is no longer a WIP version of that lesson.  You will have to open up that lesson from the Published > Lessons folder to create a new WIP version.

        For more on the differences between Published and Work In Progress, check here.

        Manage owners

        You can add or delete owners of lessons, templates, courses, media and assets.  This can be done in the Work In Progress or Published folder:

        1. Select the lesson, template, course, media or asset that you wish to change owners on.
        2. Click Manage.
        3. Select Owners.

        From the Edit Owners window you can Add or Delete owners, provided you have the permissions to do so.

        There must be at least one owner.

        To Add an owner
        1. From the Edit Owners window, click the Add button.
        2. Navigate to the user group of your choice (you can use the Search feature for quick selection).
        3. Select the user you want to share your content with.
        4. Click Select.
        5. Back on the Edit Owners window, click OK to confirm your changes.

          About third party lessons

          Third party lessons are those created by another program that are imported into SmartBuilder.  There are virtually an unlimited number of programs and thus file types that can be used as third party lessons.

          When uploading a single file, such as a PowerPoint file, you do not need to specify a launch file.  Likewise, if you are uploading a SCORM compliant package, you do not need to specify a launch file.

          When a third party lesson relies ona local file structure, and sources several files, you will need to zip those contents into a single .zip file.  Said .zip files require that you specify a launch file.

          Different file types will be treated differently by the SmartBuilder system.  Certain programs will allow you to export documents in a number of ways.  You may want to test out different exported file types to find the type that fits best with your needs.  For example, if you upload a Microsoft PowerPoint file, the course will launch the file, ask if you want to open or save it, and if you choose to open it, it will display in its own pop-up window.  However, you can export the PowerPoint content to an .html format, zip the folder contents, specify a launch file, and the content will display within the course wrapper just like a native lesson.

          Delete a lesson

          To delete lessons, courses, media or assets from SmartBuilder:

          1. From the Home window, select the content that you wish to delete.
          2. Click Manage.
          3. Select Delete.
          4. Click OK to confirm your deletion.

          The Master Page

          Objects on the Master page will appear on all pages of a lesson.  Similarly, any interactivity (eg. navigation buttons, exit buttons, etc.) built into the Master page will also work on all pages of the lesson.  Use the Master page to create a consistent look and feel for your lesson.

          The Master page can be layered above or below subsequent pages by changing the setting in the Properties panel of the Master page. If you are going to create popup resources on the Master Page (such as a help, or menu), it makes sense to set the Master Page to be layered On Top.

          The Master page has a built-in page navigator.  Alternatively, you can create your own page navigation by inserting buttons and creating actions in the Action List to move to the next page or previous page.

          To communicate between regular pages and the Master Page, you can use Global Events (such as disabling or enabling a button on the Master Page when a learner clicks on something in a regular page).

          You can also place a lesson level background image by using the Background Graphic setting in the Properties Panel.  Here is a diagram of a Master Page, Regular Page, and the Background image.

          diagram

          You can also just change the Background Color property, which will change the normally white background.  This can even be used in conjunction with a transparent PNG background image.

          master page properties

          A common issue with new users is to place a large graphic on the Master Page, and it is above their regular page content, blocking their page content from view, or blocking users from clicking on things.  The video below shows you how to fix this issue:

          this video will show you how to properly set Master Page backgrounds

          Courses

          A course is a bundle of lessons. When a course is imported into an LMS, the LMS will typically provide a page with links for launching each lesson. For offline or non-LMS course delivery, SmartBuilder generates a course wrapper that provides an interface for launching lessons. The course wrapper is generated in HTML and can be edited using a standard HTML editor.

          Example of a course

          There are a number of higher level course management activities including creating new courses as well as opening and deleting them.

          Most of the important lower level functions are carried out on the Course Edit window.

          To start a review cycle, or other Workflow tasks, please read more on the Workflow.

          Course Edit window

          When a Course is open in the Course Edit window, you can add or remove Lessons and folders from the Course structure on the left.  If a Lesson is selected when adding a Lesson or folder, the new item will be added after the current selection.  If a folder is selected, the Lesson or folder will be added as a child to that folder.

          From the Course Edit window, you can Preview the lesson, access the Meta-data, or open the lesson to edit it using the buttons pictured below.

          You can also Add or Delete owners from Lessons, folders, and from the Course itself.

          Similarly, you can Add or Delete Reviewers from a Lesson, folder or the entire Course.

          Media & Assets

          When content that has been developed outside of SmartBuilder is imported into the system, it is treated as one of three content types: media, assets, or third party lessons.

          • When content is uploaded into the Media & Assets node of the Home Tree, if the file type is .jpg, .swf, .mp3, or .flv, then the content will be treated as media. Media objects can be placed directly on the Authoring Stage via a Graphic, Audio, or Video objects, just like text and shape objects.
          • When content is uploaded into the Media & Assets node of the Home Tree, if the content is a file type other than those listed above, then it will be treated as an asset. Assets cannot be placed directly onto the Authoring Stage, but can be launched in a separate browser window using a hyperlink.
          • When content is uploaded into the My Published Content > Lessons node of the Home Tree, then the content will be treated as a third party learning object. Third party lessons can be incorporated into courses just like lessons that have been created in SmartBuilder.

          Besides uploading Media & Assets, you can manage the owners, edit Meta-data, place it in shared folders, and manage versions.

           

          How to use a SWF in SmartBuilder

          There are many ways to incorporate SWFs into your SmartBuilder lesson.  You can bring in SWFs from 3rd party tools, like Qarbon or Captivate, or you can create your own directly in Flash.  In either case, they will need to abide by the requirements outlined here.

          If you are creating your own SWFs from scratch, then you might not be sure of the best way to bring them into your lesson.  This page will outline provide an outline of the various options available.

          • Graphic Object - If you want no communication between SmartBuilder and the SWF, then this is the object for you.  You can have static drawings, or animations or even ActionScript (as2) running in these SWFs, so long as they do not need to communicate with SmartBuilder.
          • Streaming SWF - Typically you will use this object to load in Captivate or other 3rd-party generated content into SmartBuilder.  It can handle preloaders and streaming media.  Again, no communication to and from SmartBuilder is possible with this object.
          • SWF Messenger - This object allows you to create SWFs that communicate with SmartBuilder.  You can add ActionScript to your SWF so that you can send and receive data from the SWF.  You can even place special SWFs into your Captivate files that can alert SmartBuilder when you get a certain point.
          • SmartBuilder SDK object (Widget) - This is the most flexible and most complex objects to create.  They integrate directly into SmartBuilder and offer methods and properties that you can access directly in the SmartBuilder interface.  You must follow our documentation (found in the Shared Library > SmartBuilder Widgets > Documentation folder) on creating these objects.

          SWF best practices

          In most cases, Flash media will perform as expected in SmartBuilder. If not, verify that the following instructions are followed when creating the .SWF file.

          • Format: Make sure that the export format is Flash Player 8 and ActionScript 2.  ActionScript 3 is not supported at this time.
          • Paths: Use relative paths and local variables for any actions used in the movie such as ../ or _parent.name to reference any scripting element.  Do not refer to the _root.  Try to keep Actionscript code to a minimum and test it after it has been uploaded to SmartBuilder.
          • Object Size: When SmartBuilder loads files, the height and width measurements of the uploaded .swf are based on the first frame of the .SWF file. To ensure that your movie appears in SmartBuilder correctly, create a background shape that is the same size as the Flash authoring page, and is located at coordinates 0,0.  It can have an alpha of 0 so it is invisible, if you wish.
          • Flash Buttons: Are not supported and may cause SmartBuilder objects to fail, or not operate as designed. Note, the SmartBuilder button object includes built-in roll-over and click effects.
          • Animation: If your movie includes an animation, please follow the instructions above regarding object size. Also make sure that the animation starts after the first keyframe to avoid distortion. In order to ensure correct playback, all animations should be made into a movie clip symbol with no stop action in the first frame, instead of putting them into the main timeline. If you want to prevent animation from extending out of the SmartBuilder object border, place a mask over the page area.
          • Authoring Stage: Place the following code on the first frame of the timeline to keep the animation from playing on the Authoring Stage:
        1. You cannot use the attachSound() function: The attachSound() function does not work when the swf is being dynamically loaded into another swf. The sound in the library will not play unless it is located in the main swf's library.

          You will need to use one of these two strategies:

          • add the sound to a movieclip's timeline and use the movieclips stop/puase/play methods to control the playback; or
          • you can load sound as mp3 externally.
        2. Templates

          A template is pre-built content that can be inserted onto any page of a lesson. Templates consist of all the objects on the page and their associated interactions from the Flow Chart and Action Panel. Templates provide three main benefits:
          1. They can be used as a starting point to accelerate the development process because most of the required objects and interactions are included in the template.
          2. Users can learn how to set up various types of interactions and presentations from the examples that templates provide.
          3. Templates can be used to promote consistency of layout, look and feel, and even functionality (see linked templates).

          Users with the appropriate rights can create new templates.

          Tips:

          • Provide descriptive names for your objects and actions before saving your template to make them more usable for someone less familiar with the interaction.
          • Templates can only be one page in size, so if you want to templatize a multi-page lesson, consider making a template for each page within the lesson, and using a naming scheme to suggest using them together (for example: Multiple choice quiz page 1 of 3, Multiple choice quiz page 2 of 3, etc).
          • Be explicit with your objects on the page.  (For instance, rather than leaving a text object named "Text object 6", edit the name to be "Caption for intro picture text" so that the guess work is taken out of what you indended to do with your objects on the page.

          Linking a template to a lesson page

          Linked templates by default are locked down to prevent changes made on the applied template.  If you want to make changes to the tempalte itself, you will have to edit it directly (not as part of the lesson).

          Changes made to a template, once published, will propegate out to all the lessons and pages that are using that template and are still in Work In Progress.

          However, you can unlink individual parts of the template, such as the Value of a text object in order to change the text that is displayed.  This will allow you to customize the template to the specific instance used on this particular page of the lesson.

          An example might be a Master Page that is used in multiple lessons.  You would want to keep the core functionality the same and consistent, while making only minor cutomizations for each lesson where the template is used.

          If not sure if you need a linked template or a regular template, choose the regular template.

          Multi-Page Templates

          Sometimes it is useful to create reusable content that spans across multple pages.  You can create new lessons and place them in a shared library, located at the same level as the Template folder.

          Creating, editing, and adding to shared folders requires certain rights.  Once a lesson is placed in the Shared Library, any user with access to the folder in the Shared Library can use the "Save As" feature to copy the lesson.  While these are not technically "templates", this process allows you to create model lessons that can be used as starting points for new lessons.

          Organizing your templates

          Additional folders can be added to the Template library by users with the appropriate rights.

          Template folders can be assigned read or read/write permissions so that only users belonging to a certain group can view and use the templates in the folder.

          Translating and Re-Purposing Content

          The translation feature allows you to create alternative versions of a lesson containing different text and media, while maintaining a single source version for all other elements of the lesson such as layout and interactivity. In other words, you can maintain the basic functionality of a lesson, but re-purpose the content for different audiences.

          This can be useful if you need to translate a lesson to another language. It can also be useful if you need to re-brand a piece of content for a different audience.

          SmartBuilder does not automatically translate content.  Rather it allows for easy translation, or content manipulation, to be done using a translation manager.

          There are two ways of using the translate function to make different versions of the same lesson:

          1. In the SmartBuilder interface:  The main advantage of this approach is that you can manage media and hyperlinks in the target versions.
          2. By exporting text to an Excel spreadsheet:  The advantage of this approach is that the edits can be made outside SmartBuilder using a desktop application with which most translators are familiar.

          Watch the videos here!

          and

            Assign translators

            You can add or delete translators from lessons.  This can be done in the Work In Progress or Published folder (however, see Note below):

            1. Select the lesson that you wish to add or delete translators from.
            2. Click Manage.
            3. Select Translators.
            4. Select the translation language target that you wish to add a translator.  For more on translations see here.

            From the Edit Translators window you can Add or Delete translators, provided you have the permissions to do so.

            Note: In order for a translator to view the translation, there must be a Work In Progress version of the lesson.

            Translators

            If someone has been assigned as a Translator, they can view the lessons that they have been assigned from the Home Window > My Assigned Tasks > Translate Folder.
            Once there, they can select the lesson they wish to translate and click Open to view the translation panel.  They can only edit or replace the following:

            • Text (edit)
            • Graphics (replace)
            • Audio (replace)
            • Video (replace)

            Exporting text to Excel

            After creating one or more target versions, that version can be exported.  Select the lesson you wish to export from the Lessons Folder on the Home Window.  Then click on Tools > Export Text, and select the target version you wish to export.

            This will generate an Excel Spreadsheet (.xls) with the source text on the left and target text on the right.  After translating or modifying the text, you can re-import text back into the lesson using Tools > Import Text.  After importing the spreadsheet, a version of the lesson including the new text will appear in the owners' Work in Progress list.

            Exporting text is useful if you have a translation team, or use a translation service, since they do not need to log in to SmartBuilder and learn the interface in order to make changes.

            However, you cannot specify new media (graphics, audio, etc) in the .xls document.  Media can only be changed in the SmartBuilder Translate window.

            Using the SmartBuilder Translate window

            Open the lesson you wish to translate and select File > Translate from the main toolbar.  This opens the SmartBuilder Translate window.  Create a new target by clicking on the plus icon by the Target pull down menu.

            From this dialogue box, you can choose from a list of target languages or create your own target label.  You can create multiple targets.
            At this point, you can start translating or changing the text and media.  The source is in the left column, and the target is on the right.

            Editing the text and media directly in SmartBuilder provides the following benefits:

            • You can specify different media for each version
            • You can make minor edits quickly
            • You can track progress using color-coded indicators that show what has been translated and what needs to be done

             

            Watch the videos here!

            and

              Review Cycle and Workflow

              The Workflow is a tool for managing the review and revision cycle of courses.

              You can learn more from watching the video on the topic here.

              Note: A review cycle can only be started on a course.  Even if you only have one lesson that needs review, it must be added to a course.  See step 1 below on how to create a course.

              A typical workflow process would include the following steps:

                1. The course owner assembles the course (for specific instructions, see the Course Edit window page).

                2. The course owner assigns reviewers to the lessons or course as a whole (for specific instructions, see the Course Edit window page).

                3. The course owner publishes the course (for specific instructions, see the Courses page).

                4. The course owner starts the review cycle.

                  5. Any user that has been assigned to review one or more lessons in the course will see the course listed in their Review node. They may also receive an email to notify them that they have been assigned a course to review.

                  6. The reviewers open the review task for the course, which launches a separate browser window for reviewing the course.

                  7. The reviewer approves or disapproves the lessons that they have been assigned to review. The reviewer can also leave comments on any page of the lessons that they have been assigned. For those lessons that are NOT assigned to a reviewer, he/she can view the lesson content and associated comments, but cannot make comments or set the approval status. The review step is completed when all reviewers have either approved or disapproved the lessons that they have been assigned. It will autmoatically be removed from the My Assigned Tasks > Review folder.

                  8. The course owner opens the revise task for the course, which launches a separate browser window for viewing comments and the approval status of the lessons. The course owner edits the lessons based on feedback from the reviewers and responds to comments using a threaded discussion feature in the revise window. The revise step is completed when all review comments are closed, either by making a response comment, or by using the "mark as read" button.

                  9. The course owner may decide to re-start the review cycle once edits have been completed to provide the opportunity for reviewers to re-review the updated content. Comments from previous review cycles will be retained, but the approval status of all lessons will be reset to "not reviewed", indicated by a yellow yield sign icon.

                    Preferences

                    Here you can set your preferences, including loaders and defaults when creating new lessons.

                    Management Functions

                    These are functions that only system administrators can see or edit.

                    You can create and edit Roles, which are used as predefined collections of rights.  Examples of Roles might be Author, Translator, and Group Manager.  These Roles can be assigned to individual users or to groups as a whole.

                    With the proper priveleges, you can also manage Users and User Groups.

                    Note: Based on your priveleges, you may not be able to change or reset your password.  Please email an administrator or support AT suddenlysmart.

                    Based on the number of licenses that your organization has, you may need to activate or deactivate Users.

                    Accessibility

                    "Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities..." (from W3C Web Accessibility Initiative).

                    In order to make learning content accessible to people with disabilities (e.g. the visually impaired), SmartBuilder follows web accessibility guidelines as stipulated in Section 508. To learn more about web accessibility, please visit these websites:

                    http://www.section508.gov

                    http://www.w3.org/WAI/

                    When most people refer to 508-compliant content, they mean that the content has to be accessible to a screen reader. To make your lessons accessible to a screen reader you must use the HTML5 Converter to create HTML5 output. You will also need to add tab indexes on individual objects to define the order the screen reader will read them, and descriptions to some objects, such as hotspots, so that the screen reader has something to read.

                    SmartBuilder allows many objects to be visible to screen reading software and enables authors to define a tabbing order. To create truly accessible content, however, authors must consider many other factors when developing web-based lessons. Examples include avoiding colors that color blind people cannot see properly, or choosing font colors that are easy to read by dyslexic people.

                    •   The following SmartBuilder objects have properties that allow them to be read by screen readers:
                      • Text objects
                      • Input text objects
                      • Buttons
                      • Hotspots
                      • Graphics
                      • Check box groups
                      • Radio button objects
                    •   The supported environment for 508 compliant content created with SmartBuilder is:
                      • Windows 7
                      • Internet Explorer 9+ browser
                      • JAWS screen reader

                      You can use Chromevox for the Chrome browser, or Windows Narrator, for testing purposes or audiences that do not have access to JAWS, but these are not officially supported.

                      Setting up a Tab Index

                      Screen readers use keyboard shortcuts to help learners navigate around the screen. Most frequently, the "Tab" key is used to cycle through the interactive objects. Buttons, Hotspots, Input Text, regular Text objects, Graphics, Radio Buttons and Check Boxes have a Tab Index property which controls the order in which learners can cycle through the objects.

                      Note: Only visible objects can be selected using the Tab key.  Even if something has a tab index, it will be missed if it is not currently visible.

                      User tip: You may wish to set up your initial tab index in increments of 10. This will allow you to later add new objects with a tab index somewhere in the middle of your existing objects without having to re-number all the existing objects.

                      User tip: Tab indexing may also be useful for your general learners. Set up tab indexes so your learners can quickly navigate through the objects on the screen.

                       

                      SmartBuilder WACG 2.0 and 508 Compliance and Guidlelines (download as PDF)

                       

                      Section 508 Regulation

                      WCAG 2.0 

                      Explanation

                      How to Implement in SmartBuilder 

                      § 1194.22 (a)
                      A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

                      1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

                      All graphics and similar visual elements must have a text description that a screen reader can access.  This text is referred to as “alt” (alternative) text. 

                      When a non-text object is selected, the name, label, and/or description is read by the screen reader. 

                      SmartBuilder automatically exposes an object's name and label, if there is one, so that these can be read by a screen reader.  You should also populate the Description field in the Properties panel for graphic objects and hotspots since they have no label that can provide a text equivalent.

                      § 1194.22 (b)
                      Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

                      1.2 Time-based Media: Provide alternatives for time-based media.

                      Videos and movies that are presented on screen require both closed captioning of the audio and a description of the visual elements.  These items must be timed to the media presentation.

                      Compliance is largely a design decision and can be achieved in a number of ways.  A typical approach is to provide a display containing a text object with a transcription of the audio or video.  The display can be persistent on the page or could be shown and hidden using a button.

                      § 1194.22 (c)
                      Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

                      1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

                      3.1 Readable: Make text content readable and understandable.

                      Any object or text that uses color for emphasis must also use emphasis techniques that do not depend on color, such as text formatting or descriptions.

                      Compliance is based on design.  SmartBuilder provides the flexibility to design content using any color combinations.

                      § 1194.22 (d)
                      Documents shall be organized so they are readable without requiring an associated style sheet.

                      3.1 Readable: Make text content readable and understandable.

                      Style sheets should not affect the ability to read the content on the screen.  If the learner is using a browser that cannot use a style sheet, the learner will still be able to read the content, although it may not appear in the intended font.

                      Not applicable - SmartBuilder does not use style sheets

                      § 1194.22 (e)
                      Redundant text links shall be provided for each active region of a server-side image map.

                      Not applicable

                      Each area of the image map must have an equivalent text-based hotspot that is accessible by a keyboard or assistive device.

                      Not applicable - SmartBuilder does not use sever-side image maps.

                      § 1194.22 (f)
                      Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

                      Not applicable

                      Server-side maps limit accessibility.  Client-side maps are preferred.

                      You can create a client side image map using hotspot objects placed over a graphic.  You can associate a description with each hotspot using the Description field in the Properties panel.

                      § 1194.22 (g)
                      Row and column headers shall be identified for data tables.

                      Not applicable

                      The headers for rows and columns need to be coded so that screen readers read them in the correct order.

                      Not applicable - SmartBuilder does not provide data tables as a single object.  Text and shapes can be aligned to create a table look and feel.  Text is automatically exposed to screen readers.

                      § 1194.22 (h)
                      Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

                      Not applicable

                      The headers for rows and columns need to be coded so that screen readers read them in the correct order.  If multiple cells are used as a single header, the coding should indicate to read these together.

                      Not applicable - SmartBuilder does not provide data tables as a single object.  Text and shapes can be aligned to create a table look and feel.  Text is automatically exposed to screen readers.

                      Using the Tab Order field in the Properties panel, authors can expose objects to screen readers in the correct order.

                      § 1194.22 (i)
                      Frames shall be titled with text that facilitates frame identification and navigation.

                      Not applicable

                      Each frame within a website should have a title that a screen reader can access to ensure the learner knows which frame is active.

                      Not applicable - SmartBuilder does not use frames.

                      § 1194.22 (j)
                      Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

                      2.3 Seizures: Do not design content in a way that is known to cause seizures.

                      Content should not cause the screen to refresh at a rapid rate.

                      SmartBuilder does not have any rapid animations that should cause the screen to refresh in that manner.

                      § 1194.22 (k)
                      A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

                      1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

                      If a screen has too many elements or too much interactivity to be made 508 accessible through other means, it must have a text only page with equivalent content.  This page should be updated every time the screen is.

                      Compliance is based on design.  Authors can create a text-only version of a lesson.

                      § 1194.22 (l)
                      When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

                      Not applicable

                      Any content dynamically generated through script must include accessibility information, such as button names and alt text, that is accessible to screen readers.

                      SmartBuilder automatically exposes an object's name and label, if there is one, so that these can be read by a screen reader.  For example, if a button is used to launch a pop-up window, the button label can be used to explain via the screen reader what will happen when the button is clicked. For hotspots, which don’t have labels, the description property can be used to describe when the hotspot is clicked.

                      § 1194.22 (m)
                      When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

                      Not applicable

                      Any plug ins required to access content must be available to the user.

                      For example, a site that contains a Flash-based solution must also include a link to the appropriate Flash player.

                      SmartBuilder's HTML5 output does not require any plugins.

                      § 1194.22 (n)
                      When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

                      3.3 Input Assistance: Help users avoid and correct mistakes.

                      Assistive technology must be able to navigate through the form and provide assistance to the user when filling out the information.

                      SmartBuilder automatically exposes an object's name and label, if there is one, so that these can be read by a screen reader.  Descriptions can also be added to each form object such as radio buttons, check boxes, input text, etc. Conditional actions can be created to look for inappropriate answers or to help them avoid and correct mistakes.

                      § 1194.22 (o)
                      A method shall be provided that permits users to skip repetitive navigation links.

                      2.1 Keyboard Accessible: Make all functionality available from a keyboard.

                      2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.

                      3.2 Predictable: Make Web pages appear and operate in predictable ways.

                      All content must be available without going through the complete navigational path again.

                      For example, to access a program in Windows, the user may have to click Start, Programs… etc.  The user could save a shortcut to the program on the desktop or task bar for future reference. 

                      If a website contains multiple navigational levels to access content, the user should be able to return to that content without going through all the navigational levels again.

                      SmartBuilder provides authors with the ability to select the tab order that optimizes accessibility.

                      § 1194.22 (p)
                      When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

                      2.2 Enough Time: Provide users enough time to read and use content.

                      If there is a limit on the amount of time the system allows you to be inactive or if a test is timed, then a warning must inform the learner that time is ending.  The learner must have the option of extending the time limit.  I. e. "Warning, your session is about to expire.  Please click here to continue."

                      Compliance is achieved through design. Authors can include text or audio warnings that can be triggered based on timer progress.

                      Not applicable

                      4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

                      Make sure that your content follows accessibility standards.

                      SmartBuilder will continue to be updated to ensure compatibility with accessibility standards and assistive devices.

                       

                       

                      Actions and the Action List

                      The Action List allows you to specifiy events, or triggers, and corresponding responses. For example, you can set up an interaction so that when the learner clicks a button object (the trigger) a text object is shown (the response). You can also include conditions to create more sophisticated interactions. For example, when a submit button is clicked (the trigger), if the score is greater than 15 (the condition), then show feedback one (true response), else show feedback two (false response).

                      The Action List is organized into one or more sections. If there are multiple sections, then these are executed sequentially starting from the top. Each section contains subsections for: trigger events (required), conditions (optional), true responses (required), and false responses (optional).

                      User tip: Provide descriptive names to your actions so that they will be easier to find later.

                      descriptive action name

                      Conditional Actions

                      You can add conditions to an action by clicking the Add Condition button in the Options panel.  Multiple conditions can be connected using an "And" or "Or" conjunction.  To toggle between "And" and "Or", click on the word "And" or "Or".

                      conditions

                      Creating Basic Actions

                      To create a new action, click the Add Action  icon in the Actions List.  Use the Options panel on the right side of the Action List to edit actions you've created.

                      action list

                      Alternatively, select the object on the page that you want to act as the trigger for the action, and then use the object menu to create the action.

                      Delete an Action or Folder of Actions

                      1. Open the Action List.

                      2. To delete an action:

                           3. Select the action you wish to delete.

                           4. Click the Delete button.

                      5. To delete a folder of actions:

                           6. Select the folder you wish to delete.

                           7. Click the Delete button.

                      Disabling Actions

                      You can disable actions by clicking in the Disable check box.

                      disable

                      User tip: If you are having trouble making an action work the way you want it to, try copying and pasting that action, and tweaking that second action.  Disable the first action to test the new approach.

                      How order affects the execution of actions

                      Actions within the Action List are executed in order, so whatever you specify to happen at the top of the list will be executed before the events at the bottom of the list.

                      For example:

                      Scenario 1: You have two actions.  The first sets a variable X to True.  The second section executes an action only if the vraible X is True.  In this case, the action of the second section would be fired because the condition was met.

                      Scenario 2: You reverse the order of the two actions, and the action to set the variable to True is now second.  In this case, the first action would not fire because the required condition was not met -- the variable was still False.

                      Organizing actions with folders

                      As lesson content becomes increasingly complex, more actions get added to the Action List.  This often results in a single, unorganized list of actions.  You can organize your actions by grouping related actions into folders.

                      organized

                      Note: The order of actions in the Action List does affect how the actions will be executed.  Click here to learn more.

                      Re-order Actions in the Action List

                      1. Open the Action List
                      2. Select the action you want to move.
                      3. Click the Move Up move up or Move Down move downbuttons to move the section as desired.

                      Note: The order of actions in the Action List does affect how actions are executed.  Click here to learn more.

                      Concepts & Terminology

                      There are several concepts and certain terminology that are used throughout SmartBuilder.  Because they are used in multiple locations, they are grouped together here as sort of "miscellaneous" collection.

                      Typically, a SmartBuilder user searching this help documentation will be linked directly to one of these child pages.  Going through these child pages linearly will be less coherent than some of the other topics in this documentation.

                      Clearing Cache

                      About the Browser Cache

                      In order to speed up web browsing, browsers are designed to download web pages and store them on your computer in an area called the cache (pronounced cash). When you visit the same page for a second time, the browser speeds up the display time by loading the pages locally from the cache instead of downloading everything again. This sometimes results in less than current versions of web pages being displayed, along with problems on registration and authentication pages.

                      Sometimes it is necessary to clear the cache in order to get access to the latest code.

                      How to Clear the Browser Cache

                      Select your web browser:

                      Internet Explorer for Windows

                      To find your version of Internet Explorer, click Help, then select About Internet Explorer. If you don't see the Help menu, press Alt to reveal the menus.

                      Internet Explorer 6:

                      • Open Internet Explorer, choose the Tools menu, and select Internet Options.
                      • Select the General tab.
                        1st part of step 1.
                      • In the Temporary Internet files section, click Delete Files. In the window that opens, check the box next to Delete all offline content, then click OK. Depending on the number of files, this could take anywhere from a few seconds to a few minutes.
                      • Click OK to save your changes.
                      • To be safe we recommend you close and reopen Internet Explorer.

                      Internet Explorer 7:

                      • Open Internet Explorer, choose the Tools menu, and select Internet Options.
                      • Select the General tab.
                      • In the Browsing history section, click the Delete... button.
                      • Click Delete files.... A window will open that reads Are you sure you want to delete all temporary Internet Explorer files? Click Yes. (Depending on the number of files, this could take anywhere from a few seconds to a few minutes.)
                      • Click OK to save your changes.
                      • To be safe we recommend you close and reopen Internet Explorer.

                      Internet Explorer 8:

                      • Open Internet Explorer, choose the Tools menu, and select Delete Browsing History.
                      • Check the boxes next to Temporary Internet Files.
                      • Click the Delete button.
                      • To be safe we recommend you close and reopen Internet Explorer.

                      Firefox for Windows & Mac

                      Firefox 3.5x for Windows:

                      • Open Firefox, select the Tools menu, and choose Clear Recent History.
                      • Under Time Range to Clear drop-down menu, select Everything.
                      • Select Details and check the boxes next to Cache.
                      • Click Clear Now.

                      Firefox 3.5x for Mac:

                      • Open Firefox, select the Tools menu, and choose Clear Recent History.
                      • Under Time Range to Clear drop-down menu, select Everything.
                      • Select Details and check the boxes next to Cache.
                      • Click Clear Now.

                      Safari for Windows & Mac

                      For Windows:

                      • Click the Settings button in the right-hand corner of the browser window and select Reset Safari.
                      • A box will appear that reads Are you sure you want to reset Safari?
                      • Make sure that the checkboxes next to Empty the Cache (Deselect any of the items you don not want to reset.)
                      • Click Reset.

                      For Mac:

                      • Open the Safari menu and select Empty Cache...
                        1st part of step 1.
                      • In the window that opens, click Empty (or Empty Cache) to remove the saved files.

                      Chrome for Windows & Mac

                      For Windows & Mac:

                      • Click the wrench icon in the right corner of your browser toolbar.
                      • Select Tools.
                      • Select Clear browsing data.
                      • In the dialog that appears, select the checkboxes for the types of information that you want to remove.
                      • Use the menu at the top to select the amount of data that you want to delete. Select the beginning of time to delete everything.
                      • Click Clear browsing data.

                      Downloading and Delivery

                      Once a lesson or course has been published, you can download it.  You will get a .zip file that you can either extract or directly upload into an LMS (depending on the download options that you pick).

                      Note: If you try to launch the lesson without having unzipped (extracted) the package, then the lesson may not operate properly.

                      There are a number of download options that are available:

                      Download window

                      Meta-data window

                      Use the Meta-data window to name or rename Lessons, Courses, and Media & Assets.  You can also enter a Description, which will appear in the Details Pane, and Keywords, which can be searched by SmartBuilder.

                      Typically, one gets to the Edit Meta-data window when first creating or uploading content, or by selecting the content and clicking Meta-data or Manage > Meta-data in the top toolbar.

                      In addition, you can click on the Advanced View tab to see and change all the meta-data that can be viewed from an LMS.

                      Published vs Work In Progress

                      Work In Progress (or WIP for short) content is any lesson or course that you are still editing.

                      Published content means that content has been compiled into a single package and can be downloaded for distribution to learners.

                      Once a lesson or template has been published, it will disappear from your Work-in-Progress list.  This is normal.  Publishing will update your Published content with a new version.  To read more about versions and reverting to a previous version, go to the page on versions.

                      You can still re-open the lesson by going to the published lesson and clicking "Open".  If you do so, a new Work-in-Progress version will be created.  Your published version will remain in your Published Content folder regardless of whether or not a Work-in-Progress version exists.

                      Search

                      You can search from almost every folder on the Home Tree.

                      Shared Folders

                      You can share your content with others in two different ways:

                      Versions

                      Published content can have multiple versions.  A new version of a lesson or course is created every time a lesson or course is published.  For Media or Asset, a new version is created when that content is replaced.  When publishing or uploading, you can specify version comments.

                      By selecting the published content and clicking on Manage > Versions, you can launch the Versions window.

                      where to find the versions panel

                      From this window, if you click on any of the previous versions, you can view the Version Comments in the pane at the bottom.  Pro tip: Publish every so often (weekly, before major changes, or right after major changes) and be thorough with your version comments regarding what has been changed in case someone accidentally breaks or deletes important functionality.  Doubly important when multiple people own the lesson.

                      You can also effectively roll back to an older version, by creating a new authoring version from one of the old versions by selecting a version and clicking on the Make Authoring Version button.  This will create a Work In Progress version of the lesson from that published version.  Note: this will overwrite any curent WIP lesson.  You can open this WIP lesson and republish it to revert the lesson back to that version, or you can use File > Save As Copy to create a copy.

                      Only the last 15 versions of the lesson will be saved.

                      The Flow Chart

                      The Flow Chart allows you to control the sequence in which displays are shown to the learner.  The flow can include branches that are selected based on a learner's actions.

                      Although not obvious at first, the Flow Chart can help you create rich interactions much more quickly and easily than by using the Action List alone.

                      In the example below, the Flow Chart is used to create a branching scenario whereby the simulated customer on the left will react to choices that the learner makes while playing the role of the customer support representative on the right.

                      The Flow Chart is highly configurable. For example, you can choose how to capture the learner's responses (e.g. click a radio button, click a hotspot, enter text into an input field, etc.), you can choose the number of options or branches to include, you can loop branches, and so on.

                      sample flow chart

                      About the Flow Icons

                      The Flow icons are used to represent settings you find within the Options panel.  They help to give you a glimpse of how things are configured, and allow you to easily identify any places where settings do not match.

                          How to use the "default" or "else" node

                          Using Displays within the Flow Chart

                          Begin a Flow Chart by clicking the "Select Display" button.

                          select display

                          Add more displays by clicking the drop down carat on an end node of the Flow Chart.

                          Branching Conditions

                          In certain situations, you may want to display different content depending on a learner's actions.  For example, if a learner selects a certain radio button in a multple choice quiz, then you may want to show correct or incorrect feedback depending on their selection.

                          You can create these different paths in the Flow Chart by linking conditions to subsets (Displays or Questions).  For each condition, you must visually record the desired state of response objects in that display.

                          At run-time, the flow will look at the state of the response objects and compare these with the recorded conditions to decide which branch to follow.

                          Adding Actions to Conditions

                          If a certain condition is met in the Flow Chart, you may want to trigger other events in addition to continuing the flow.  For instance, you might want to increment a score tracker every time a learner correctly answers a question.

                          To add or edit actions, select the appropriate condition (diamond icon) in the Flow Chart, and then open the Options panel to the right.  True Response actions will be executed if the selected condition is met, and False Response actions, which are rarely used, will be executed if any other branch of the flow is selected.

                          Adding a Condition

                          Create a branching condition
                          1. Select the relevant display in the Flow Chart.

                          2. Click the "Add Condition" button.

                          >> Alternatively, select a condition node, and click the "Edit Condition" button.

                          add condition or edit condition

                          3. In Condition Recording Mode, record a possible learner response, and then click the OK button.  This will create a new condition node (diamond shape) in the flow chart.

                          Click here for more detailed instructions about recording conditions for specific response objects.

                          In the screen shot below, notice that the display highlighted in dark blue in the Flow Chart is also highlighted in orange on the page.  The green diamonds following the dark blue node are branching conditions.  A condition node can be interpreted as follows: "If the learner selects radio button X in the display, then show the display to the right of this diamond."

                          Record conditions of response objects (in detail)

                          1. Enter the Condition Recording Mode by adding a condition, or editing an existing condition.

                          2. Click on the response object for which you want to record a response state.

                          3. Click the Active check box in the object's border (or anywhere on the object's border).

                          4. Change the state of the object to show the desired response according to its type.

                               5. Radio buttons & check boxes:

                                    a. Check the correct answer option(s).

                               6. Hotspot, button, multi-state button, and drag-and-drop objects:

                                    a. Click on the objectuntil it shows the desired state.

                               7. Input text object:

                                    a. Enter the desired response text.

                               8. Dropdown list:

                                    a. Click on the dropdown list button.

                                    b. Select the desired answer out of the list of answer options.

                          Adding a Loop

                          The empty end nodes in the flow chart can be looped (connected) to other nodes in the flow.

                          To do this, click on an end node, and drag it to another display in the Flow Chart, and then release your mouse button.

                          Edit a condition in the Flow Chart

                          1. Open the Flow Chart.

                          2. Click on the condition you would like to change.

                          3. Click Edit Condition.

                          4. Click on the response object for which you want to change the recorded response state.

                          5. Change the object until it shows the desired state.  For more information see how to Record conditions of response objects (in detail).

                          7. Click OK.

                          Submit Settings

                          The Flow Chart will wait for a signal or event (eg. when the user clicks a "next" button) before continuing on to the next display in the Flow Chart.  When a display is selected, these "When to Continue" options are displayed in the edit panel located within the tab at the far right of the Development panel.

                          Related topics:

                          Advanced Flow Trigger Settings

                          You may want to include multiple triggers to continue the flow.  For example, in a quiz question, you may want to continue the flow when the learner clicks a submit button or when a timer reaches zero.  To add additional triggers, click the Add button next to the trigger Objects list.

                          Typically, you will want a trigger objects, such as a submit button, to be hidden after it has been used.  For example, after a learner answers a question and the appropriate feeback appears you would not want the submit button for the question to remain visible.  However, if the flow loops back to a display or question, you will typically want the trigger to re-appear so that th learner can submit their response again.  For these reasons, the Hide after use and Show when display shown options will default to checked.

                          Using Question Sets within the Flow Chart

                          Question sets behave different from Display sets in the Flow Chart. While you add displays individually to the Flow Chart, you add entire question sets at once to the flow.  This is because a question set controls the sequencing of the individual questions within it.  When linked in the Flow Chart, a Question set includes the following functionality:

                          Report a Score

                          1. Select the Question set in the Cast, then select the Scoring property.
                          2. Change the weighting of the question as desired, then check the Automatically submit score to LMS upon completion check box.  If you created the quiz from a template, this may already be checked.

                          The lesson will submit a normalized score (0-100 scale) to the LMS once the question set is "complete".  When the question set is complete will depend on the question set's properties.  For example, if you edit the Sequence property to randomly show three questions from a pool of four questions, then the Questions set is considered "complete" after the third question has been submitted.  You can "submit" a question a number of ways (eg. on a button click, on an expiration of a timer, on first selection of a radio button or hotspot, etc.).  For more information on submitting a question, click here.

                          The Correct Answer Feature

                          The Correct Answer check box in the Record Condition panel tells the question set scoring mechanism to count that condition as a correct answer.  Conditions that are marked as a correct answer are represented by a green condition node .  Conditions that are marked as an incorrect answer are represented by a red node .