smartbuilder user guide v9 - suddenlysmart.comsmartbuilder user guide © 2008 suddenly smart, all...

SmartBuilder User Guide

And Tutorial Exercises

Updated October 29, 2008


© 2008 Suddenly Smart, All Rights Reserved 2

Introduction ...................................... ............................................................. 5

SmartBuilder overview ........................................................................................... 5

Chapter 1: SmartBuilder Structure ................. ............................................. 5

Home Window ....................................................................................................... 5

Terminology ........................................................................................................... 5

Lessons vs. Courses .......................................................................................... 5

Work-in-Progress vs. Published content ............................................................. 7

Chapter 2: Authoring Stage Basics ................. ............................................ 8

Creating a new Lesson .......................................................................................... 8

Elements of the Authoring Stage ........................................................................... 9

Object toolbar ..................................................................................................... 9

Main toolbar ..................................................................................................... 11

Design panels .................................................................................................. 12

Development panels ........................................................................................ 12

Inserting objects on the page ............................................................................... 13

Configuring objects .............................................................................................. 13

Moving ............................................................................................................. 13

Resizing ........................................................................................................... 14

Layering ........................................................................................................... 14

Object properties .............................................................................................. 14

Grid .................................................................................................................. 15

Adjusting page size .......................................................................................... 15

Hyperlinks ............................................................................................................ 15

Hands-on Exercise 1: Creating a title page .......................................................... 16

Chapter 3: Creating Pages & Using the Master Page . ............................. 20

Adding a page ..................................................................................................... 20

Moving to another page ....................................................................................... 20

The Master page.................................................................................................. 20

Chapter 4: Uploading and Using Media and Assets ... ............................. 20

Difference between media and assets ................................................................. 20

Supported media file-types: ................................................................................. 20

Supported asset file-types: .................................................................................. 21

Importing media or assets .................................................................................... 21

From the Authoring Stage: ............................................................................... 21

From the Home window: .................................................................................. 21

Using hyperlinks to launch assets ........................................................................ 21 Hands-On Exercise 2: Creating a video lesson with a printable worksheet .......... 21

Chapter 5: Creating Basic Interactivity Using the A ction List ................ 25

About actions ....................................................................................................... 25

Creating actions in the action panel ..................................................................... 25

Basic actions .................................................................................................... 25

Conditional actions ........................................................................................... 26 Hands-On Exercise 3A: Interactive instructions ................................................... 26

Hands-On Exercise 3B: Creating a Help window ................................................. 29

Hands-On Exercise 4B: Creating a reset button .................................................. 31

Chapter 6: Sets and Subsets ....................... .............................................. 33

Why use sets? ..................................................................................................... 33

Types of Sets ....................................................................................................... 33

Group of objects = display or question = subset ............................................... 33

Set = group of subsets ..................................................................................... 33



Behavior of subsets within a set ........................................................................... 33

When to use a question set rather than a display set ........................................... 34

How sets can save you time ................................................................................ 34

Hands-On Exercise 5A: Recreating the Help window .......................................... 34

Chapter 7: Flow Chart ............................. .................................................... 38

Why use the Flow Chart? ..................................................................................... 38

Using displays within the Flow Chart.................................................................... 38

Creating branching conditions.............................................................................. 39

Flow Options ........................................................................................................ 40

Creating additional actions ................................................................................... 41

Submit settings .................................................................................................... 45

Never Adding a loop ....................................................................................................... 48

Hands-On Exercise 8: Creating a simple quiz ...................................................... 53

Never Sequencing ...................................................................................................... 54

Scoring ............................................................................................................. 55

Correct/incorrect node settings ......................................................................... 55

Advanced flow trigger settings ............................................................................. 57

st Adding actions to conditions ................................................................................ 59

Chapter 8: Using Variables ........................ ................................................ 62

What are variables? ............................................................................................. 62

How to store and retrieve data from variables ...................................................... 63 Hands-On Exercise 12A: Creating a counter ....................................................... 64

Hands-On Exercise 12B: Capturing learner input................................................. 66

Chapter 9: Adding Transitions to Objects .......... ...................................... 68

Hands-On Exercise 13A: Adding a transition to a Help window ........................... 68

Hands-On Exercise 13B: Adding transitions to sets and objects .......................... 69

Chapter 10: Advanced Objects ...................... ............................................ 71

Timeline ............................................................................................................... 71

Hands-On Exercise 14A: Creating a timeline object ............................................. 71

Hands-On Exercise 14B: Synchronizing a timeline to audio ................................. 72

Drag and Drop ..................................................................................................... 74

Hands-On Exercise 15A: Creating a drag and drop quiz ...................................... 74

Hands-On Exercise 15B: Delaying feedback on the drag and drop quiz .............. 76

Timer ................................................................................................................... 79

Percent Tracker ................................................................................................... 79

Chapter 11: Templates ............................ .................................................. 79

Using ................................................................................................................... 79

Applying a template .......................................................................................... 79

Linking a template to a lesson page ................................................................. 80

Creating ............................................................................................................... 81

Organizing ........................................................................................................... 81

Multi-Page Templates .......................................................................................... 82

Hands-On Exercise 16: Using and Creating a Template ...................................... 82

Chapter 12: Accessibility ......................... .................................................. 83

Objects ................................................................................................................ 84

Using ................................................................................................................... 84

Tab Index ......................................................................................................... 84



Reading Text .................................................................................................... 85

Description ....................................................................................................... 85

Detecting if a screen reader is turned on ............................................................. 85

Hands on Exercise 17: Creating an Accessible Lesson ....................................... 86

Chapter 13: Content Management & Collaboration Feat ures ................. 87

Translation and re-purposing content................................................................... 87

Using the SmartBuilder Translate window ........................................................ 88

Exporting text to Excel...................................................................................... 88

Lesson Management ........................................................................................... 88

Meta-data ......................................................................................................... 88

Basic vs. advanced Meta-data views ................................................................ 89

Publishing ........................................................................................................ 89

Owners ............................................................................................................ 89

Downloading .................................................................................................... 89

Course Authoring ................................................................................................. 90

Adding lessons ................................................................................................. 90

Adding folders .................................................................................................. 90

Adding owners / reviewers ............................................................................... 90

Editing Meta-data ............................................................................................. 90

Publishing a Course ............................................................................................. 90

Downloading ........................................................................................................ 90

Translation versions ......................................................................................... 91

Using the Shared Library ..................................................................................... 91

Review Process Workflow ................................................................................... 91

Assigning reviewers ......................................................................................... 91

Starting a review cycle ..................................................................................... 91

Reviewing a course/lesson ............................................................................... 92

Adding comments ............................................................................................ 92

Revising a lesson ............................................................................................. 92

“How to” Tips ...................................... ........................................................ 93

Create a bookmark .............................................................................................. 93

Overview .......................................................................................................... 93

Example of how to create a bookmark: ............................................................ 93

Track session time ............................................................................................... 94

Report a score ..................................................................................................... 94

Overview .......................................................................................................... 94

Example of how to report a score using a question set..................................... 94

FAQs: ............................................................................................................... 95

Example of how to report a score without using a question set ........................ 96

Explanations of Triggers and Methods .............. ....................................... 97



INTRODUCTION

SMARTBUILDER OVERVIEW

SmartBuilder is a learning content management system with a robust authoring environment. It is a server-based application that is accessed using a web browser and provides two main areas of functionality:

• Authoring • Content management

CHAPTER 1: SMARTBUILDER STRUCTURE

HOME WINDOW

The Home window includes announcements, quick links for getting started, and links to training and help resources. The Tree on the left outlines the major functional areas of SmartBuilder.

TERMINOLOGY

Lessons vs. Courses 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.



Sample lesson

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.



Sample course wrapper

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.

Work-in-Progress vs. Published content Work-in-Progress 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 content has been published, you can still re-open it for editing. If you do so, a new Work-in-Progress version will be created. Your published version will remain in your Published Content folder.



CHAPTER 2: AUTHORING STAGE BASICS Most of the User Guide is focused on how to build lessons. Creating courses is a simple process of slotting lessons into a tree structure, which will be covered later. The Authoring Stage is the interface for creating lessons.

CREATING A NEW LESSON

From the Home window: • Click New Lesson in the Create list

• Or, select your Home > My Content > Work In Progress > Lessons node in the Home

Tree, and click New.

This will launch the Meta-data window which enables you to name and describe the lesson. Once you have input the information and clicked Ok, you will be ready to begin authoring your lesson.



ELEMENTS OF THE AUTHORING STAGE

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 basic objects, response objects, display objects, and sets.



• Basic Objects – these are the basic building blocks of content: text, graphics, embedded

media, and shapes.

• Response Objects – these are objects that are used for capturing learner responses: check

boxes, radio buttons, regular buttons (e.g., a continue button), hotspots, multistate buttons, dropdown lists, input fields, and drag and drop interactions.

• Display Objects – these are used for a variety of display or feedback purposes.

• Sets – A set is a container that controls when groups of objects, called subsets, are

displayed and hidden. There are two kinds of sets: Display sets and Question sets. Their subsets are called Displays and Questions respectively.

For example, a simple multiple choice interaction with five questions might have one question set that contains five Questions, and one display set containing 10 Displays (two displays for each question: one for correct feedback, and one for incorrect feedback). Each



Question or Display subset would contain multiple objects. For example, Question 1 might contain three objects: a text object for the question stem, a radio button object to capture the learner’s response, and a button object to act as a trigger for the learner to submit their response for validation.

Sets are explained in detail in Chapter 6.

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

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 bar controls.



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

• Cast The Cast lists all the objects on a page, and highlights the currently selected object (“Text 1” in this example). Whatever object is selected on the page will be highlighted in the Cast, and vice-versa.

The Cast allows you to change the layering of objects by using the move up / move down arrows. The higher the object is in the Cast, the higher its layer on the page.

The Cast also lets you hide and lock objects on the page. User tip: Double-click the blue Cast title bar to quickly re-size the Cast.

• Properties

The Properties panel displays the properties of the currently selected object for viewing and editing. The properties of an object will vary depending on the object type.

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

• Variables

A variable is a container that holds numbers, words, or true/false statements.

Variables are explained in detail in Chapter 8.

• Templates The Templates panel allows you to manage templates that have been applied to the page. It contains icons that allow you to add, remove, or refresh the desired template.

User tip: After making changes to a template, use Refresh to revert the locked elements back to their original state. This can be used to make sure your unlinked changes have been saved

Development panels The Development panels can be found at the bottom of the stage and consist of the Action List, the Flow Chart, and the Options panel.



• 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.

• Flow Chart The Flow Chart is used to set up the sequence in which groups of content (Displays or Questions) 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.

Tip: New SmartBuilder users often try to create interactivity using only the Action List. However, the Flow Chart can often help you to create content more quickly and intuitively. The Flow Chart is explained in Chapter 7.

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

INSERTING OBJECTS ON THE PAGE

To insert an object onto the page, click its icon in the object toolbar, and drag it onto the page. You can also just click on the icon, and the object will appear on the page at a default location.

CONFIGURING OBJECTS

Moving To move an object on the page, it must first be selected by clicking on it. Once an object is selected, click and drag it to move it. You can also adjust the location of an object using its x and y values in the Properties Panel, or with the arrow keys. User tip: You can lasso objects to multi-select them by left clicking and dragging your mouse, or by clicking and holding <Shift>. The object outlines will turn gray when multiple objects are selected. User tip: Copy and paste objects to re-use formatting.



Resizing You can resize an object directly on the page by clicking and dragging the selection handles on the selection border of that object. You can also resize an object using the width and height values in the Properties Panel. You cannot resize multiple objects at once.

Layering Every object is on a separate layer. Objects on higher layers will obscure lower objects when they overlap.

To adjust the layer of an object, select it in the Cast, and then click the Move up/ Move down arrows.

Object properties Each object type has unique properties that can be configured in the Properties Panel. Whatever object is selected in the Cast Panel will have its properties visible in the Properties Panel. User tip: Use the Name property to rename your objects descriptively. The initial effort to rename your objects will pay off when creating interactivity. User tip: The Start Visible property controls whether an object will initially be shown or hidden when the content is viewed.



Grid The grid is a tool for facilitating the alignment of objects. To view the grid options, click on the Edit menu and select Grid. Here you can choose to display or hide the grid, as well as specify the distance between the lines and the color of the grid. You can also turn on/off the “Snap to Grid” feature, which automatically aligns the top left corner of an object with the closest vertex of grid lines.

Adjusting page size The white area in the Authoring Stage is your page. Any object that extends into the gray area will be cut off in the final published version. To change your page size, click the Edit menu, and then select Page Size. You can also choose whether your content will be scalable, and if it will maintain its aspect ratio when scaling.

HYPERLINKS

Hyperlinks can be created on text, buttons, and hotspots. With the object selected, click on

the Edit Hyperlink button in the Main toolbar. On the hyperlink window, you can do the following:



Launch asset – launches an asset (see the chapter on media and assets to learn more about ) bundled with the lesson. Launch Web page – opens web page in the window specified under “Open Resource In” section. User tip: This can be used to launch web based pages, such as “http://www.suddenlysmart.com”, as well as local files such as “target.html” by omitting the “http://”. It will default to the folder of the original player.html file of the lesson. You can change directories by specifying files in sub folders, such as “subFolder/target.html” and specify files in a parent directory using “../”, such as “../target.html”. User tip: Use local links to directly open other lessons. For example, when done with lesson 3, you can have a hyperlink that does the following: “../lesson 4/player.html”. Just be sure to place your lesson folders within the same folder parent folder, and name them accordingly. Go to Page – goes to the specified page. Internal Event – creates a trigger that can be used in an action with responses (see the chapter on actions for more information).

HANDS-ON EXERCISE 1: CREATING A TITLE PAGE

In this exercise, you will learn how to: • Add, resize and position objects using the Properties panel • Insert and format text • Use the Cast panel to change the layering of the objects



1. Start off by taking a look at an example of the finished product at http://www.suddenlysmart.com/userguide/start_course.htm. (If you can’t click this hyperlink, copy and paste it into a browser)

2. The first step is to create a large red rectangle. Start by clicking on the Shape object icon

on the Object toolbar, and dragging it onto the page. Releasing the object will place a default white square with a black outline on the stage.

3. Upon creating an object, it will be highlighted (indicated by the control handles along the sides and corners, the orange outline, and the Object menu icon.)

http://www.suddenlysmart.com/userguide/start_course.htm



4. In the Cast panel Shape 1 is also highlighted, and the

Properties panel displays information on the shape’s properties. In the Properties panel, you will change the object’s Name, Size, Line Width, Fill Color and Select Shape properties:

a. Select the Name property and call it “Red Shape”. Notice that it also changes the name in the Cast panel.

b. Next change the Size to W: “495” and H: “295”. c. Click on the Select Shape property button to open up

the Select Shape window. You can also double click on the object itself on the Authoring Stage to open up this window.

i. Change the Shape Category from Common to Rounded Squares using the drop-down menu, and select the last (most rounded) button. Then click OK to accept the new shape.

d. Click on the Line Width drop-down menu and select a value of 2.

e. On the Fill Color property, you can input a hexadecimal value or click on the tile to the right to open the color picker. Using the color picker, pick the shade of red in the far left column.

f. Make sure that Red Shape is in the center of the page by clicking and dragging it to the center. You can also specify the X and Y values of the top left corner using the Position property in the Properties panel. A value of W: “140”, H: “110” will put the shape in the center.

5. Now you are going to create and format a text object.

a. Place a text object on the page using the Text object icon on the Object toolbar.

b. Change the properties to the following:



i. Name: “Main text” ii. Position: X: “155”, Y: “190”

iii. Size: W: “450” (the height will change as you add text) iv. Leave the Border and Fill properties unchecked

c. Now click on the text in the text object. The object border will change from orange to blue to indicate the text object is now in editing mode. Highlight all the text, and click on the Align Center icon on the Text toolbar in the Main toolbar, located above the Authoring Stage.

d. Replace the text in the object with the following, inserting an empty line between each line of text:

“Exercise 1 – Creating a title page Insert, organize and configure objects using the Cast and Properties panels. This is built using 3 objects total. Can you figure out how to replicate it?”

e. Highlight just the first line, change the Font Size to 18, and bold it. f. Next highlight the other two lines and change the Font Size to 16.

6. Finally, you’re going to create a white background for the text. Create another shape and

give it the following properties: a. Name: White Shape b. Position: X: 142, Y: 145 c. Size: W: 491, H: 220 d. Line Width: No line

7. Take a look at the Authoring Stage: The white and red objects are in the correct order, but

the text is obscured by the white rectangle. Whenever you create a new object, it is placed on top of other objects on the page, which means that it will be above other

objects in the Cast panel. Notice in the Cast panel that White Shape is above Main text.

a. Highlight White Shape by either selecting it on the page or in the Cast panel.

b. Click on Move Down to change the object to the middle layer.



8. Congratulations, you have learned how to use the Properties and Cast panels to

configure and layout objects to create a Title Page for a lesson.

CHAPTER 3: CREATING PAGES & USING THE

MASTER PAGE

ADDING A PAGE

To edit the sequence of pages in your lesson, click the Edit menu, and select Page Sequence.

Click the Insert icon to add a new page. You can also delete, or re-order pages from the Page Sequence window.

To add a new page and jump to that page in one step, click the Add page icon on the Main Toolbar.

MOVING TO ANOTHER PAGE

Click the page navigator drop-down menu, and select the desired destination page.

THE MASTER PAGE

Objects on the Master page will appear on all pages of a lesson. Similarly, any interactivity (e.g. 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. 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.

CHAPTER 4: UPLOADING AND USING MEDIA

AND ASSETS

DIFFERENCE BETWEEN MEDIA AND ASSETS

Media can be embedded within the content of a lesson. Assets must be launched out of the lesson using a hyperlink, button click or hotspot click, and will be viewed in a separate browser window.

SUPPORTED MEDIA FILE-TYPES:

• Graphics: .jpg, .swf



• Audio: .mp3 • Video: .flv

Note: Make sure to read the .swf tips on the upload window. Because SmartBuilder uses a Flash interface, you will need to follow certain design guidelines when using .swf files.

SUPPORTED ASSET FILE-TYPES:

Any file type. How these files will be rendered depends on the configuration of the learner’s system. For example, if you include a link to a .pdf asset, the learners will need to have Adobe Acrobat installed on their computers to view the file.

IMPORTING MEDIA OR ASSETS

From the Authoring Stage:

Insert a media object (Graphic, Video, Streaming SWF, Audio) from the Object toolbar and:

• Click the Select Media button in the Properties panel • Or, click the Object menu and choose Select Media

Then click the “Upload” button. (If you do not see an upload button, you do not have the appropriate permissions for the tree node you have selected.)

From the Home window: Select the Media and Assets node in the home tree. Click Upload on the main tool bar.

USING HYPERLINKS TO LAUNCH ASSETS

Assets can only be launched using a hyperlink. Hyperlinks can be created on text, buttons,

and hotspots. With the object selected, click on the Edit Hyperlink button in the Main toolbar. On the hyperlink window, select the Launch Asset radio button, and specify the desired asset.

HANDS-ON EXERCISE 2: CREATING A VIDEO LESSON WITH A

PRINTABLE WORKSHEET

In this exercise, you will learn how to:

• Use the Master Page to create navigation controls and a background for your lesson • Incorporate media and assets into your lessons • Create and re-order pages

1. Start off by taking a look at an example of the finished product at

http://www.suddenlysmart.com/userguide/start_course.htm.



2. You will start by changing the Master Page to create a consistent header for the lesson. Objects on the Master Page, such as logos, headers, and navigation buttons will appear on all subsequent pages of the lesson.

a. On the Main toolbar, click on the Page Navigator drop-down menu and select Master Page.

b. Note on the Properties panel that the Master Page can be layered above or

below the other pages. c. Create a text object and place it on the top of the page. Change the text to

“Lesson Title”, the Font Size to “24”, and Center the text. Change the Size to W: “670” and the Position to X: “120” and Y: “20”.

d. Next, you’ll create a decorative border. Add 2 shape objects and give them the following properties:

Sha

pe 1

Position: Size:

Line Width: Fill Color:

X: 0, Y: 80 W: 790, H: 20 No Line CFCFCF

Sha

pe 2

Position: Size:

Line Width: Fill Color:

X: 0, Y: 65 W: 790, H: 15 No Line F0F0F0

3. Now you will add in a company logo into the empty space in the corner.

a. Place a Graphic object on the page. b. Click on the Object menu arrow and choose Select Media. c. Click Upload on the top left of the Media Select window. d. Browse for a picture of your company’s logo in .JPG format on your computer,

and click Start Upload. e. Once the media has been uploaded, you will have an opportunity to edit or add

any Meta-data. Click OK to accept the data. f. Now you can press Select to add the new item to your lesson. g. Place the logo picture at Position X: 5, Y: 5, and resize it using the control

handles. The Lock Aspect Ratio checkbox is on in the Properties panel, so your image will not become distorted (though it may become pixilated).

h. Now that you have finished with the Master Page, go back to Page 1 to start adding content to the lesson. Note how the content of the Master Page is grayed out.



4. The first page will hold a text object and link to a .PDF asset. a. First, create a text object on the page. b. Replace the default text with the following: “Page 1 text. Click here to launch a

.pdf document.” c. Next, highlight just the word “here” and click on the Edit Hyperlink button

on the Main toolbar.

d. Click the Launch asset radio button and use the folder icon to open the Asset Select Window.

e. Navigate to Select Asset > Shared Library > Training Work Samples. Choose Sample_PDF_document and press Select.

5. Now you are going to add a new page. The easiest way to do this is to click the Insert

Page button on the Main toolbar. Give the page a name of “Video” and press OK. This page will hold a video and a caption.

a. Drag in a Video object from the Object toolbar into the center of the page.

b. Click on the Object menu and choose Select Media. c. Navigate to Select Media > Shared Library >

Training Work Samples. d. Select the Animated Sky Video and press Select. You

can resize the video, but the default size is fine for this exercise.

e. In the Properties panel, you can change some of the options: Experiment with the following properties and use the Preview Lesson button in the Main toolbar to see the changes, if they are not immediate. Note that if you uncheck both Auto Play and Display Controller, the user will be unable to view the video.

f. Once you have selected a combination of video settings that you are happy with, create a text object and type the following: “This is a video located on page 2.” Place this under the video.

6. Now let’s say you wanted to switch the order of the pages. On the Main toolbar, go to

Edit > Page Sequence. In the Page Sequence window you can Duplicate, Add, Delete, change the order, or Edit the name of each page.

a. In this case, move the page with the video to be first and the page with the asset

second using the Move up/Move down arrows. Also use Edit to change the name of Page 1 to Asset. Click OK to accept the changes.

b. Use the Page Navigator to go to each page and update the text so that it displays the correct page number (e.g., “This is a video located on page 1”).



7. Congratulations! You now know how to make a video presentation lesson, with a printable worksheet or transcript. You also know how to add and edit pages including the Master page, insert and upload media, and create links to assets.



CHAPTER 5: CREATING BASIC INTERACTIVITY

USING THE ACTION LIST

ABOUT ACTIONS

The Action Panel allows you to specify 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 Panel 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.

CREATING ACTIONS IN THE ACTION PANEL

Basic actions

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

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.

Descriptive name



Conditional actions You can add conditions to an action by clicking the Add Condition button in the edit 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”.

You can disable actions by clicking the disable button.

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 the second action. Disable the first action, to test the new approach.

HANDS-ON EXERCISE 3A: INTERACTIVE INSTRUCTIONS

In this exercise, you will learn how to: • Use the Grid to help align objects on the Authoring Stage. • Create actions, which are combinations of triggers (e.g. click of a button), and responses

(e.g. show text) 1. First, take a look at an example of the finished product at

http://www.suddenlysmart.com/userguide/start_course.htm. 2. Start off by creating a button.

a. Place a Button object on the page.



b. Change the Button Label property from “Button” to “Topic A”. c. Create 3 more buttons, naming them “Topic B” through “Topic D”.

i. Align the buttons in a vertical column (see image below) by using your arrow keys.

Tip: Holding down the Ctrl key while using your arrow keys will allow you to move objects 1 pixel at a time.

ii. Optional: you can adjust your Snap to Grid and Show Grid settings on the Grid window, which can be launched by clicking the Edit > Grid menu.

3. Now you will add text. a. To the right of each button, insert a text object and type some sample text. b. In the Properties panel, uncheck the Start Visible property for each of the text

objects.

Tip: To save time, configure the properties for one object (e.g. the Start Visible property) and then copy the object to create multiple objects with the same properties. Tip: You can select groups of objects by holding down the <Shift> key when clicking on each object, or, you can click and drag with your mouse to “lasso” them.

4. Now you will link actions to the buttons.

a. Click on the Topic A button and then click on its Object menu. b. Select Create Action and then onClick. This opens up the Response window.



c. Select Text 1 as the response object. d. Then choose show as the Response Method. Click the OK button, and notice the

pop up comment at the bottom of the Authoring Stage. e. The action you just created is saved in the

Action List. Open the Action List using the Show/Hide tab. Click twice on the name of the action and rename it “show text 1”.

User tip: You can name your actions when first creating them by using the name field in the response window that pops up after creating a trigger.

f. On the right side of the Action List is the Options panel (click on the Show/Hide tab if it is collapsed). This panel displays the details of the action, including the Trigger and Response.

5. Another way to add an action is to click on the New Action button on the Action List.

a. Click on the New Action button. b. On the right side of the Action List, use the Trigger Select button to specify

Button 2 > onClick. c. Then choose a Response, Text 2 > show. d. Rename your action in the Action List to “show text 2”. e. Repeat this for the other two buttons using the method of your choice.

6. Click on the Preview Lesson icon on the Main toolbar to check your actions. When you click each button, the text object next to it should appear. Close the preview and go back to the Authoring Stage.

7. Now you will create a button that hides all the text objects. a. Create a new button and change the Button Label property to “Hide

Descriptions”. b. Place it below the other buttons, then click on Object menu arrow, and choose

Create Action > onClick. c. In the Response window, select Text 1 and hide. d. In the Action List, find the “Button 5 – onClick” action and rename it “Hide All

Text”. e. On the details panel to the right, in the Response area click on the Add response

button.

f. Select Text 2 > hide.



g. Add a new hide response for the other two text objects as well.

Note: just as you can have multiple responses, you can also have multiple triggers.

8. Preview your lesson. You can now add actions to show and hide objects. You have also learned how to turn on and off the Grid to help with aligning objects on the Authoring Stage.

HANDS-ON EXERCISE 3B: CREATING A HELP WINDOW

In this exercise, you will learn how to apply your knowledge of actions to create a pop up window. 1. Start by examining the finished product at


2. First you will make the Help button. a. Create a button and place it in the top right corner of the page. Change the

Button Label to “Help”, and the Name to “Help Button”. Notice that the Cast panel uses the Name property, and not the Button Label property.

3. Now you will create the Help window. a. Start off by creating a text object near the Help button and then change the text to

“This is the help text for ‘Hands-on Exercise 3B’”. b. Create another button and place it below the text. Change the Button Label to

“Close Help” and the Name to “Close Button”. c. Create a shape object that covers both the text and the “Close Button”. Use the

Send to Bottom arrow in the Cast panel to move it below the other two objects.

d. Uncheck the Start Visible property for these three elements of the Help window.

4. Now you will make the Help window pop up when the button is pressed, and make the

Help button disappear. a. Add an action using New Action icon on the Action List. Name the action

“Show help”. b. Set the Trigger to Help Button > onClick. c. Add the following Responses:

i. Shape 1 > show ii. Text 1 > show



iii. Close Button > show iv. Help Button > hide

d. Preview the lesson to make sure the Help window pops up and the Help Button disappears. Close the preview.

5. The last step is to close the Help window and bring back the Help button. a. Add an action using New Action icon on the Action List. Name the action “Hide

help”. b. Set the Trigger to Close Button > onClick. c. Add the following Responses:

i. Shape 1 > hide ii. Text 1 > hide

iii. Close Button > hide iv. Help Button > show

Note: you will learn a faster way to show and hide multiple objects in chapter 6 6. Preview the lesson and make sure that the buttons work.

Hands-On Exercise 4A: Building a toggle button to display instructions

In this exercise, you will learn how to add conditions to actions.

1. Start by looking at the completed version at http://www.suddenlysmart.com/userguide/start_course.htm.

2. This exercise requires only a button and a text object. a. Create a button and change the Button Label property to “Show/Hide

Instructions”. Place the button in the top left corner of the page. b. Create a text object and change the text to “These are the instructions for the

following exercise”. Uncheck the Start Visible property and place this text object to the right of the button.

3. Add the action to the button. a. Create a new action using the button’s Object menu , or using the New

Action icon in the Action List. b. Set the Trigger to Button 1 > onClick. c. Set the Response to Text 1 > show. d. Rename the action “show/hide text”.

User tip: Though this will be the only action in this lesson, it is good to get into a habit of giving your actions meaningful names. When you are dealing with many actions, this will make finding and editing actions much easier.

4. The same button will both show and hide the text. You cannot just add another “hide”

response to the same trigger, because it will execute both the “show” and the “hide” response in quick succession, and the learner will never see the text. Instead, you will



use a condition to determine if the text is currently being displayed and then show or hide the text accordingly.

a. Click the Add Condition button on the Options panel in the Action List. You will see two changes.

• The first is an indented Condition below the Trigger. • The other is a second response, called a False Response (the response

you previously made is renamed True Response).

b. Click the Select button in the Condition section and select Text 1 > isVisible.

Uncheck the box next to the equal signs. This reads, “If Text 1-isVisible is false, then…” which means “If Text 1 is not visible, then…”

Tip: You could also have changed the “==” to “!=” and left the check box checked to accomplish the same thing.

c. Change the False Response to Text 1 > hide. If the text object is not visible,

then the true response executes and the text is shown. If the condition is false (i.e., the text is visible), then the text is hidden.

5. Congratulations! You learned how to make a conditional action.

HANDS-ON EXERCISE 4B: CREATING A RESET BUTTON

In this exercise you will learn how to use conditional statements to determine when objects are shown. 1. First, take a look at the finished example at


2. Start by opening the lesson you completed in Exercise 3a, or, open Home > Shared Library > Training Work Samples > Hands-on Exercise 4b partial.



3. You want the Hide Descriptions button to only appear after all 4 of the other buttons have been clicked. The buttons could be clicked in any order, so you can’t simply make the Hide Descriptions button appear after button 4 is clicked.

a. Uncheck the Start Visible property for button 5, the Hide Descriptions button. b. Create a new action in the Action

List. Rename it “show Hide Button”

c. Set the Trigger to Button 1 > onClick. Add 3 new triggers using the Add icon next to the trigger, so that you have one for each of the 4 buttons.

d. Set the Response to Button 5 > show.

e. Now click the Add Condition button. f. In the drop-down menu, select Button 1 > isClicked. This will check to see if

that button has been clicked yet. The default setting checks to see if the condition is true.

g. Use the Add button to create another condition.

Tip: Notice the -AND- that links the conditions. If you click on the -AND-, you can change it to -OR-. Leave it as -AND- because you want the response only after all the conditions are met, not when any of them are.

h. Change the second condition to Button 2 > isClicked. i. Create 2 more of the same conditions for Buttons 3 and 4.

4. That’s it! Preview the lesson to see how it works. Notice that the Hide Description

button stays visible after it is first revealed. You can go back to its Action List, and add as a response Button 5 > hide, though for this example it is not necessary.



CHAPTER 6: SETS AND SUBSETS

WHY USE 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 4 separate actions to show these objects, you can group these objects and then create a single action to simply show the entire group.

TYPES OF SETS

There are two kinds of groups, displays and questions, which are further aggregated into display sets and questions sets. Sets control when each display or question is shown and hidden. For example, based on author settings, the question set can control the order in which questions are displayed to the learner (e.g. linear or random). We’ll use the term “subset” to refer to either a display or a question in a set.

Group of objects = display or question = subset

Set = group of subsets The image below shows that “Display Set 1” contains three displays, and “Display 1” contains three objects.

BEHAVIOR OF SUBSETS WITHIN A SET

Only one subset within a set can be visible at a time. For example, if a question set contains subsets called Question 1 and Question 2, then Question 1 cannot be visible at the same time as Question 2. When you choose to show a subset, the set will automatically hide the other subsets. User tip: If you want to have two different groups of objects visible at the same time, use two different sets.



WHEN TO USE A QUESTION SET RATHER THAN A DISPLAY

SET

A question set is the same as a display set, but includes the following additional functionality when it is linked to the Flow Chart: Sequencing: Question sets can be configured to automatically control the order in which questions are displayed. This logic is based on settings such as random or linear order of questions, when to repeat incorrectly answered questions, etc. Display sets, on the other hand, are “dumb” in the sense that you must specify, using the Flow Chart or Action List, when displays are to be shown or hidden. Scoring: Question sets track correct and incorrect responses and report scores to an LMS using the SCORM API. This functionality will become clearer when we discuss the Flow Chart.

HOW SETS CAN SAVE YOU TIME

1. You can show and hide multiple objects with one action method (e.g. show Display 1

will show all the elements inside the set) 2. When you show a subset, you don’t have to bother hiding the other subsets (you

don’t need to tell the system to hide Q1 when Q2 is shown) 3. You can move ALL the subsets in a set with just one move 4. You can apply transitions to ALL the subsets in a set in one step 5. You can easily/visually create conditional branching by linking subsets to the Flow

Chart

HANDS-ON EXERCISE 5A: RECREATING THE HELP WINDOW

In this exercise, you will learn how to: • Use a Display Set to group objects • Use actions to show displays 1. First, take a look at the example at


2. Start by creating the Help button. a. Insert a button, place it in the top right corner, and change the label to “Help”.

Change the name to “help button”.

3. Next you are going to create a display set.

a. Click on the Display Set icon on the Object toolbar and drag it to the left of the Help button.

b. Uncheck the Start Visible property.



c. Notice that the “Help” button is grayed out because it is not part of the active display.

d. Also notice that the display includes some default text, a button and a shape for a background. You can either use these or delete them depending on your needs. For our purposes, the default objects will work, so you will just edit them.

e. Change the text to “This is the help text for ‘Lesson 5 – Work Sample B’.”. f. Change the Button Label property to “Close Help”. g. Make the shape object smaller to fit tightly around the text and button objects.

4. Click outside of the display, in a blank area of the page. Notice that the display contents are grayed out. Now you will add functionality to the buttons.

a. Click on the Help button and use the Object menu to create an action with onClick as the Trigger.

b. Set the Response to Display Set 1 > Display 1 > show. This will make the text, shape, and button appear because they are contained in the display.

c. In the Action List, name the action “show display”. d. In the Options panel to the right of the Action List, add another Response: help

button > hide. e. Now click on the Close Help button to select it. You may have to click twice,

because the first click will bring the display into focus. Remember, you can always look to the Cast panel to see what is selected.

f. Add an action to that button with the Trigger: onClick, and 2 Responses: help button > show ---and--- Display Set 1 > Display 1 > hide. Name the action “hide display”.

5. That’s it! Perview the lesson and test the functionality. Now you know an easier way to show and hide multiple objects.

Hands-On Exercise 5B: Creating an informational display



In this exercise, you will learn how to: • Use display sets to automatically show and hide displays • Duplicate and rearrange displays 1. Start by taking a look at the finished example at


2. First we will make the buttons: a. Create 4 buttons and change their labels to “Topic A” through “Topic D”. b. Align the buttons vertically.

3. Create a shape object and resize it into a rectangle that is big enough to hold several lines

of text. Place the rectangle to the right of the buttons.

4. Create a display set object.

a. Drag a display set object from the Object toolbar onto the page b. Uncheck the Start Visible property. c. Delete the default shape and button objects in the display. d. Replace the text with “This is descriptive text for topic A”, and change the font to

size 14. e. Move the text so that it is inside of the rectangle. f. Select the text object and copy it using the keyboard shortcut, or by clicking on

the Copy Object icon on the Main toolbar.

5. Create a new subset by clicking the Insert icon on the top of the Display Set object.

a. Now you have a new display with default objects. You can use the Previous and

Next Subset icons to navigate through the displays in a display set. b. Delete the default objects in the second display and paste in the text you copied

earlier with a keyboard shortcut or the Paste Object icon . c. Change the text to “This is descriptive text for topic B”.

6. Now do this 2 more times. This can be made easier by duplicating the displays.

a. Highlight the Display 2 subset by selecting it in the Cast panel.

b. Click the Duplicate icon at the top of the Display Set object. A new display with the same content as the last is created. Do this again to create a 4th display.

c. Update the text in the displays with the appropriate letters.

7. Now all that’s left is to make the buttons work. Add the following to each of the buttons: a. Trigger: Button X > onClick b. Response: Display Set 1 > Display X > show

8. That is all. Preview the lesson to see your work in action. Because display sets can only

show one display at a time, you only need to show a display; you do not need to hide the other displays in the same display set.



CHAPTER 7: FLOW CHART

WHY USE 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.

USING DISPLAYS WITHIN THE FLOW CHART

Begin a Flow Chart by clicking the “Select Display” button.



You add more displays by clicking the drop down carat on an end node.

CREATING BRANCHING CONDITIONS

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.” To create a branching condition, select the relevant display in the Flow Chart, and then click the “Add Condition” button.

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.



FLOW OPTIONS

Notice the “Hide previous display” option below. In this example, when the “Name response” display is shown, the previous display called “Initial response” will be hidden.

Notice the “Continue from Name Response” option below. Because the “On first click of a response object” option is selected, the flow will move to the next display when a learner selects any of the three radio buttons in the display.

On the other hand, if you wanted to give the learner a chance to change their mind after selecting a radio button, you could add a submit button to the display and use the “On trigger” option to continue the flow.



CREATING ADDITIONAL ACTIONS

To create additional actions, select the appropriate condition (in the example below, when the learner makes a correct choice by selecting the middle radio button), then create a true response (increment the customer satisfaction tracker bar). When you create an additional action, an “a” icon will appear inside the condition node.

Hands-On Exercise 6A: Creating a sequential set of instructions In this exercise, you will learn how to use the Flow Chart to control the sequence in which displays are shown 1. First take a look at the finished example at


2. You will start with the background text. a. Create a text object and place a title in it. Place this at the top of the page.

b. Create a second text object and place it in the middle of the page. Replace the text with a concluding message for the learner (e.g. “The End. Did you learn anything?”).

3. Now you will create the display set. a. Insert a display set object from the Object toolbar and place it over the

concluding message. Resize the shape in the display to cover the concluding message, if necessary.

b. Type some introductory text (e.g. “Welcome to this lesson. You will learn XYZ.”)

c. Select the display by clicking on the orange border, or by selecting it in the Cast panel.



d. Duplicate the display to create a second display. Change the text here to give the learner more information (e.g. “You need to achieve a score of 90% or above in order to move on to the next lesson.”)

e. Create a third display and again change the text.

4. Now you will use the Flow Chart to edit the sequence in which the displays are shown. a. Click on the Flow Chart tab. b. Click the Select Display button, and choose Display Set 1 > Display 1.

c. Now click on the Options button or the Show/Hide tab to open the Options panel to the right of the Flow Chart.

d. You will see a Flow Chart with the following:

i. A Display node – this is the first display to be shown. The small icons

show information that becomes useful when making more complicated Flow sequences.

ii. A Response node – here you can create additional responses that will be triggered when the flow moves from “display 1” to the next display in the Flow Chart.

iii. An Empty or End node – this is where you specify the next display that will be shown.

iv. When to Continue: On trigger – by default, the flow will make the first button created in a display the trigger for continuing the flow.

v. Hide previous display – When a new display is shown, a display set will automatically hide the other displays in the same display set. Therefore, this setting is only needed when the previous display belongs to a different set. A good example of when the “Hide previous display” would be used is in a quiz exercise. Questions and Feedback would be in separate sets, and you would want the feedback from question 1 to be hidden when question 2 is shown.

e. Click on the drop-down arrow on the second Display node (labeled “iii” above). Select Display Set 1 > Display 2.



f. Click on the drop-down arrow on the third node and specify Display Set 1 > Display 3. That node is filled, and a new, blank end node is added to the end. Again, the default Trigger is also selected.

g. When the blank node is reached, the last display in the flow will be hidden.

5. Preview the lesson to make sure that the continue buttons work, and that the last display disappears at the end to reveal the text below that was covered by the displays.

a. Go back to the Flow Chart and, using the drop-down arrows, switch Display 1 � Display 2 � Display 3 ---to--- Display 1 � Display 3 � Display 2. Preview the lesson again. The order of the displays is dictated by the Flow Chart, regardless of their sequence in the Authoring Stage.

b. Note that you can change the name of displays by selecting them in the Cast and changing the Name property.

Hands-On Exercise 6B: Creating a lesson with an introduction

In this exercise, you will learn how to: • Create a Flow Chart containing multiple display sets • Change the visibility of subsets 1. First take a look at the finished example at


2. Create the display set that will hold the Welcome display and the Instructions display. a. Place a display set on the page. Change the default text to a welcome message

(e.g., “Welcome to exercise 123”). Change the style of the shape, button and text as it suits you.

b. Select the display subset using the Cast panel. Rename the display to “Welcome display”, then Duplicate it to create a new display. Rename the new subset “Instructions display”.

c. Move the shape object to the top left area of the page and give it a Size property

of W: “670”, H: “75”. d. Change the text to give the learner some instructions (e.g., “Instructions: In this

exercise, you will read the sentence and think about it.”), and place it inside the shape object.



e. Move the button to the center of the page and change the Button Label property to “Begin Exercise”. Increase the text size using the Text toolbar, and increase the size of the button.

3. Now you’ll make the main content Display Set. a. Create a new display set from the Object toolbar. b. Change the name of the display to “Exercise body”. c. Uncheck the Start Visible property for the display, or for the display set.

d. Resize the default shape to W: “670”, H: “255”, and position it in the center of

the Authoring Stage so that it covers the majority of the page, including the “Begin Exercise” button in the other display set, but below the rectangle in the “Instructions” display.

e. Replace the default text in the “Exercise body” display with some text of your own. Also, delete the default “Continue” button.

4. The next step is to create the Flow Chart. a. On the Development panel, open up the Flow Chart tab and choose Display Set

1 > Welcome display from the Select Display drop-down menu.

b. Click on the Options button and notice that the trigger has, by default, been set to the continue button. Close the options by clicking on the Options button again.

c. On the next node, specify Display Set 1 > Instructions display. d. On the third node, specify Display Set 2 > Exercise Body.

5. Preview the lesson to test the function of the Flow Chart. Notice that after each button

click, the previous display is hidden. However, you want the instructions to stay while the exercise body is being displayed.

6. Select the Exercise Body node in the Flow Chart and open the options panel. Uncheck the Hide Previous Display checkbox. This will allow the previous display (Instruction display) to stay visible.



Go back to the Flow Chart and make sure that the Show options icon is enabled. You will see various icons on the display nodes. Click the Help icon to show a help pop-up for the option icons. These icons will allow you to quickly see what the settings are and how the Flow Chart will behave. Notice that Exercise Body has an open eye icon, while the other two have closed eye icons.

7. Preview the lesson and see that it works the way it should, with the first welcome subset

disappearing and the instruction subset staying on, even though another display, the exercise body, is being shown.

a. Go back to the Flow Chart and change the options for the “Instructions display” node. Uncheck the Hide previous display checkbox, and preview the lesson again. Notice that there is no change, and the welcome page disappears despite the option to hide it is set to off.

b. Welcome display and Instructions display are two subsets of the same display set, and remember that only one subset can be viewed at once. Because Exercise Body and Instructions display are in different sets (display set 1 & 2), they will not automatically hide each other.

8. You have learned how to use the Flow Chart to control the presentation of multiple sets, and change display parameters in order to create an instructional introduction to a quiz, which could be located at the end of a lesson.

SUBMIT SETTINGS

The Flow Chart will wait for a signal or event (e.g. 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. Hands-On Exercise 7A: Creating a 3-part Sequential introduction

In this exercise, you will learn how to: • Use different types of triggers to determine when to continue along the flow chart • Use hotspots 1. First, take a look at the finished product at:




2. Place a text object in the center of the page and change the text to “The flow has ended. This is a page-level text object.”

3. Next, insert a display set onto the page. a. In the first subset, make a welcome message and a continue button. There should

also be a shape object that will be big enough to cover the text on the page. Rename the display “on Trigger Display”.

b. Select the display, then Duplicate it to make a new display. c. In the second display, create a text object that prompts the learner with a question

and two options (e.g., “Select your experience level:”, “I am a beginner” and “I am an expert”). Rename the display “on First Selection Display”.

d. Delete the button object.

e. Click on the Hotspot icon in the Object toolbar and drag it into the display. Resize it to cover one of the two options.

Tip: Hotspots are essentially invisible buttons that can capture a learner’s response (e.g. click, rollover). They are typically layered on top of other objects (e.g. images, text, etc). On the Authoring Stage, hotspots are displayed as semi-transparent blue rectangles. You can configure hotspots’ color and transparency in the Properties panel.



f. Create another hotspot and place it over the second option.

g. Insert or duplicate a new display into the display set. Delete the default button (if

there is one) and change the text to “Get ready! The lesson will begin automatically in 4 seconds.” Rename the subset to “on Time Display”.

4. Now you are going to set up the Flow Chart. a. Open the Flow Chart tab and select Display Set 1 > on Trigger Display. b. On the second node, select Display Set 1 > on First Selection Display. c. Click on on First Selection Display and open the options. Under the heading

When to continue: click on the On first click of a response object radio button. This means that whenever the learner clicks on any response object, the Flow Chart will continue.

d. In a more realistic scenario, you might branch to 2 different displays depending

on whether the learner selects hotspot1 or hotspot2. To keep this example simple, just select Display Set 1 > on Time Display as the third node in the Flow Chart.



e. Open the options for the third node, and set the When to continue option to Continue after __ seconds. Change the value from “3” to “4”.

f. Close the options panel and make sure that the Show options icons checkbox is checked. Notice that each of the nodes has different Continue icons that reflect how they were configured in the steps above.

5. Preview the lesson. Confirm that each display continues using a different trigger (on button click, on click of either hotspot, after 4 seconds). You now know how to change the continue settings for the Flow Chart.

ADDING A CONDITION

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 multiple 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 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.

Hands-On Exercise 7B: Creating a Terms and Conditions page In this exercise, you will learn how to: • Use conditional statements in the Flow Chart • Specify conditional statements using condition recording mode • Give the learner relevant feedback based on his or her response • Use checkbox objects 1. First, take a look at the finished product at:


2. Create a display set. This will contain 3 displays: introduction, policy disclaimer, and content.



a. In display 1, change the text to “Welcome to this Lesson on Policy XYZ in the workplace.” Change the Button Label to “Start Lesson”, and expand the shape object to encompass the text and the button. Rename the display “Introduction”.

b. Create a new display in the same set and change the shape object’s Size property to W: “455”, H: “480”. Give the text object a width of “430”. Change the text to “Before beginning this lesson, you must acknowledge reading the terms of use of this training material.” Add additional sample text, if you like. Rename the display “Policy disclaimer”.

i. Insert a Checkbox object from the Object toolbar, and place it below the text. Using the Object menu or the Properties panel, click on Edit Answers.

ii. In the Edit Answers window, Delete Answer 2 & 3. iii. Select the remaining answer and click Edit. Type “I have read and

understand the conditions, and agree to abide by them.”). Click the OK button on the Edit Answers window.

iv. Move the button object below the checkbox text.

c. Create a third display in the set and type sample text. Rename the display “Page Content”.

3. Now you will create a warning message in case the learner tries to continue without checking the “I have read and understand…” check box.

a. Start by creating a new display set. b. Rename the subset “Policy Warning”. c. Uncheck the Start Visibility property. d. Delete the default objects. e. Place a text object into the Display Set and change the text to “You must agree to

the terms and conditions before you can continue.” Place it above the checkbox text, which should appear grayed out because it is in a different display set. Change the font color to red (FF0000) using the color picker in the Main toolbar



and set the font style to bold.

f. Now create a new shape object and place it over the checkbox. Give it the

following properties: i. Size: X: 25, W: 25 ii. Line Width: 2

iii. Line Color: FF0000 (red tile) iv. Fill: uncheck

g. Place the shape over the checkbox, so that it highlights what the learner should do to correct the problem.

4. Now you will set up the Flow Chart and add a condition to show the displays based on the learner’s actions.

a. Go to the Flow Chart and select Display Set 1 > Introduction. b. In the second node, select Display Set 1 > Policy disclaimer. c. With the Policy disclaimer node selected, click on the Add Condition button

located on the top of the Flow Chart. d. You will be in Condition Recording Mode. You can now interact with response

objects and change their state. In the case of the checkbox, it can have 2 states, checked or unchecked. Click on the checkbox until it is in the checked state, and then click on the OK button in the Development panel.

e. In the Flow Chart, two nodes are coming off of the Policy disclaimer node.

i. The node on top is the path that the Flow Chart takes when the condition is met (i.e., when the check mark is selected), and is indicated by a green diamond. The diamond labeled else is the path the Flow Chart will take



if the condition is not met.

ii. The condition is validated when the Policy disclaimer subset is submitted

(when the When to continue trigger fires). Open the options panel, and notice that the When to continue option is already set to when the learner clicks on the continue button.

f. In the empty top node, select Display Set 1 > Page Content from the drop-down menu.

g. In the empty bottom node, select Display Set 2 > Policy warning. h. Preview the lesson. Try going through once by checking the checkbox and

clicking continue. It should display the content display. Now reload the preview, and try to continue without selecting the checkbox. The warning message should appear, but the policy disclaimer disappears! This is because the default setting hides the previous display.

i. Select the Policy warning node and open the options. Uncheck the Hide previous display option. The eye icon node should now be open.

i. Preview the lesson again, and try to continue without checking the checkbox.

The warning shows up on top of the disclaimer, as it should, but the button disappears because, by default, the Continue button is hidden after it has been clicked (see screen shot below).



j. To enable the learner to try again, you need the Flow Chart to loop back to the Policy disclaimer display.

i. Go back to the Flow Chart and select the empty node that follows the Policy warning display. Click and drag from that node to the Policy display node. Notice that the end node is now a Loop node, and a large arrow shows where the loop goes. To loop to a different node, click and drag from the loop node again.

ii. The Policy warning display does not contain a response object (you

deleted the default button object), therefore the Flow Chart has no trigger to continue. To fix this, click on the Policy warning node and change the When to continue option to the Continue after 3 seconds radio button.



5. Preview the lesson again. When the leaner checks the box and tries to continue, he or she is shown the content display. When the learner tries to continue without the checkbox selected, the warning message is displayed and the continue button disappears. After three seconds, the warning message disappears and the continue button is visible again. You can now check the checkbox and continue.

6. Congratulations, you have finished this lesson! You have learned how to add conditional statements and loops to the Flow Chart, and how to use checkboxes.

HANDS-ON EXERCISE 8: CREATING A SIMPLE QUIZ

In this exercise, you will learn how to use loops to link display sets in the Flow Chart. 1. First, take a look at the final product available at:


2. You will start with a partially completed lesson. From the SmartBuilder Home window, select Home > Shared Library > Training Work Samples > Hands-on Exercise 8 partial,

then click the Save As button.

a. Take a look at the Cast panel. There are two shape objects in the background

that provide outlines for the question and feedback areas. b. There are two display sets. Click on the Questions set to see the first question. It

contains a text object, a radio button object with 3 answers, and a continue button. The second question is the same, except with different answers.

c. Next look at the Feedbacks set. It contains two subsets, also, one positive and the other negative, both with a continue button.

3. Begin by opening up the Flow Chart in the Development panel. a. Select Questions > Question 1 to begin the flow. b. Add a condition by clicking the Add Condition button.



c. Use the Condition Recording Mode to select the correct answer and click OK on the Development panel.

d. Following the true condition (top diamond) node, select Feedbacks > Positive

feedback. In the options of this node, uncheck the Hide previous display option. e. In the next node after Positive feedback, select Questions > Question 2. f. Following the else condition (bottom diamond), select Feedbacks > Negative

feedback. Uncheck the Hide previous display option. g. On the following node, create a loop that goes to the Question 2 node directly

above it.

4. Add a condition to the Question 2 node. a. Select the Question 2 node, click the Add Condition button, record the correct

response and then click the OK button. b. On the true node, select Feedbacks > Positive Feedback from the drop-down

menu and uncheck the Hide previous display. c. On the else node, select Feedbacks > Negative Feedback from the drop-down

menu and uncheck the Hide previous display. d. After the Negative Feedback node, create a loop back to Question 2.

5. That’s all! Preview the lesson. You now know how to use loops to connect nodes in the flow chart, and can make a simple multiple choice test.

USING QUESTION SETS WITHIN THE FLOW CHART

Question sets behave differently than display sets in the Flow Chart. You add displays individually to the Flow Chart, whereas 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.

Sequencing The Sequencing property of the Question set controls the sequence in which questions are presented.



Scoring The way a Question set scores its individual questions is controlled through its scoring property.

Correct/incorrect node settings Each condition node can be flagged as correct (green) or incorrect (red)

Hands-On Exercise 9: Creating a randomly ordered multiple choice quiz This exercise will teach you how to use a question set to create a multiple-choice quiz. 1. First, take a look at the final product at:


2. Start by opening the lesson Home > Shared Library > Training Work Samples > Hands-on Exercise 9 partial.

a. Notice that it is exactly the same as the last exercise, except that instead of the questions being in a display set named Questions, they are in a proper question set.

3. Open up the Flow Chart. a. Select Question Set 1 from the drop-down menu. Notice that you can only select

the whole question set rather than individual questions.

b. After you select the question set, notice the following:



i. Each question is followed by a correct (green) condition and an incorrect (red) else condition.

ii. The end nodes all loop back to the question set. The question set will determine the next question to display based on its Sequence property settings.

c. The true conditions have an exclamation mark in the green diamond. This indicates that there is no condition specified for the question.

d. Click on the green diamond to select it, and click the Edit Condition button, or simply double click on the green diamond. This starts Condition Recording Mode. Choose the correct answer to the question, and click OK.

e. Now select Feedbacks > Positive feedback for the end node of the true condition, and leave the else condition as it is.

f. Specify Feedback > Negative feedback as the else condition.

4. Now for the second question.

a. Edit the condition of Question 2 to indicate the correct answer. b. Change the true condition to Feedback > Positive Feedback. c. Change the false condition to Feedback >

Negative Feedback.

5. Now you will create a final feedback message and change the question sequence to random.

a. Click on the Question Set 1 node, or select it in the Cast and open the Question Scoring window from the Properties panel. Click on the Pop-up Message button under the Pass/fail feedback section for both the Pass and Fail conditions.

b. Check the checkbox on the bottom of the Pop-up Message window to show to the “You have earned X of Y points…” message.

c. Now open the Sequence window from the Properties panel. Change the order of the questions to Random from the drop-down menu. Also change the Max number of tries to 2, and select the Repeat question at end of Question Set radio button. Click OK to accept the changes.

6. Preview the lesson. It should present the questions in a random order, and repeat questions that you answer incorrectly.

7. You have learned how to use question sets to create a randomly-ordered, multiple-choice quiz that repeats the incorrect answers.



8. Keep this lesson open or save it. You will use it as the starting place for the next exercise.

ADVANCED FLOW TRIGGER SETTINGS

In the previous examples you have been using just one trigger (e.g. clicking the Submit button) to continue the flow. You can, however, 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 object, such as a submit button, to be hidden after it has been used. For example, after a learner answers a question and the appropriate feedback 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 the learner can submit their response again. For these reasons, the Hide after use and Show when display shown options will default to checked.



HANDS-ON EXERCISE 10: CREATING A TIMED QUIZ :

In the exercise, you will learn how to: • Use a timer object • Use multiple flow triggers • Reorganize the flow chart 1. Begin by taking a look at the final product at:


2. If it is not already open, open the lesson you created in Exercise 9. If you don’t have this lesson, select it in from the Shared Library node in the Home window: Home > Shared Library > Training Work Samples > Hands-on Exercise 9, then click the Save As button.

3. Start by adding an introduction display. a. Create a new Display Set in the center of the page. Name the first display

“Introduction”. b. Delete the shape object, and move the button to the center of the page. c. Change the text to an introduction that tells the learner he or she will be starting a

timed quiz, and will only have 6 seconds to answer each question. d. Change the Button Label property to “Begin”.

4. Next you will set up the Flow Chart.

a. In the Flow Chart, click on the Question Set 1 node and change it to Display Set 1 > Introduction.

b. It will appear that all your question set flow settings are lost, but don’t worry.

Select Question Set 1 from the blank end node and the flow settings will all reappear. Note this flow “memory” only works for questions sets and displays linked to question sets.

5. Now you will add the timer objects.

a. Select Question Set 1 > Question 1 in the Cast.

b. Drag a Timer object from the Object toolbar into the question and place it in the top right corner of the subset border.

c. Change the Start Time (sec) property to “6”. d. Copy the timer object and paste it into Question 2.



6. Now you will configure the Flow Chart to use the timer as a trigger. a. In the Flow Chart, select Question 1 and click the Options button. b. Click on the “…” button after On trigger: Submit Button-onClick.

c. In the Trigger Options window, click the Add button. d. Choose Timer 1 as the Object, and onTimeZero as the Event. Click the OK

button. e. Repeat the steps above to add a timer continue trigger for Question 2.

7. Preview the lesson. If you make the correct selection, but fail to press the continue

button, it will submit your answer at the end of the 6 seconds. If you fail to make any answer in that time, it is the same as not answering and pressing continue.

8. You have reorganized the Flow Chart, added multiple triggers, and used a timer to create a timed quiz for the learner.

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 another branch of the flow is selected.

Hands-On Exercise 11: Adding a score tracker to a quiz

In this exercise, you will learn how to use the percent tracker object to provide performance feedback. 1. Begin by taking a look at the finished product, located at:




2. If it is not already open, open the completed lesson from the previous exercise, or copy (“Save As”) Home > Shared Library > Training Work Samples > Hands on Exercise 11 partial.

a. Drag a percent tracker onto the page using the Pct. Tracker icon on the Object toolbar. Place it at the bottom of the page, below the feedback box. Make sure not to add it to one of the display sets.

b. Give the percent tracker the following properties: i. Size: W: “425”, H: “35” ii. Start Value: “7”.

3. Now you will add responses to the conditions in Flow Chart. They will control whether

the percent tracker grows or shrinks. a. Open the Flow Chart and click on the green diamond node following Question 1. b. Open the options panel.

c. Set the True Response to Pct. Tracker 1 > addValue. In the pop-up window, change the value to “20” then click OK. Now, when the learner answers the question correctly, the percent tracker object will grow 20 percent.

d. Set the False Response to Pct. Tracker 1 > addValue again. In the pop-up window, specify a value of “– 20”. This will decrement the tracker by 20 percent when the learner answers the question incorrectly.

e. Notice that a small “a” is added to the green diamond to indicate that an action is associated with the condition.

f. Add similar actions to the condition diamonds that follow Question 2.

4. Finally, you will inform the learner about the percent tracker. a. Add a sentence in the middle of the Introduction text object: “You’ll notice a

score bar at the bottom of the screen. Its value will increase for each correct answer, and decrease with each incorrect answer.”

5. Preview the lesson. a. The percent tracker bar should grow and shrink depending on the responses.



b. It will not reach 100 percent because there are only 2 questions, which each add only 20 percent. The highest you can achieve is a 47 percent. Later you will be able to determine the actual percentage of correct responses.

c. You’ve finished this exercise, and are now able to add and update a percentage tracker depending on the learner’s performance.



CHAPTER 8: USING VARIABLES

WHAT ARE VARIABLES?

Variables allow you to store and retrieve data. 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 can change.

Example scenario where you might use a variable: You 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.

o Number: Number variables store numbers, as in the example above.

o Text: Text variables store alpha-numeric characters. For instance, at the beginning of a lesson, you might want users to enter their names so that at the end of a lesson you could offer them personalized feedback. To do this, you might create a text variable, called NAME, to store the learner’s name for retrieval later at the end of the lesson.

o True/False: A true/false variable, also known as a Boolean variable, stores a true or

false value. For example, following the text variable example above, 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 would be set to true. When the user tried to continue from that page, you could create a condition that checks to see if the value of COMPLETE is true. If so, a “next” button appears, but if COMPLETE is false, then the user is prompted to enter their name before continuing.

To create a variable, click the green Insert icon in the Variables panel. 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 a globe icon .



HOW TO STORE AND RETRIEVE DATA FROM VARIABLES

To store data in a variable, click the Select button in the response section of 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 drop down 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. .



HANDS-ON EXERCISE 12A: CREATING A COUNTER

In this exercise, you will learn how to: • Create variables • Store and retrieve data from variables 1. Begin by taking a look at the finished product at


2. First you will create the text and the button objects. a. Crate a new lesson, and then place a button object on the page. Change the

Button Label property to “Add 1 to click count”. b. Create a text object and place it to the right of the button. Change the text to

“Number of clicks:”. Change the Name property to “label”. c. Create a second text object and place it to the right of the first. Change the text

to “0”, and the Name to “text to be set”.

3. Create a variable. a. Below the Properties panel is the Variables panel. Open this and click the Insert

icon . This opens the Add User Variable window, where you can specify the name and type of the variable.



b. Change the Name to “Count var”, and leave the Type as Number, then click the OK button.

c. The default value is “0”.

4. Create an action to increment the variable each time the button is clicked.

a. Create a new action. Call it “Increment”. b. Set the Trigger to Button 1 > onClick. c. Set the Response to Local Variables > Number > Count var > add.

i. Change the parameter to “1”. 5. Create an action to show the variable using the text object.

a. Add a second response to the action you just created. b. Set the response to Text to be set > setText. This opens the Select window.

6. Set the parameter to Function > Local Variables > Number > Count var > convertToText

7. Preview the lesson to test it. Try the following to reinforce your understanding of

variables: a. Set the value of Count var to “15” in the Variables panel and preview the lesson

again. Notice that the original text value is whatever you put in, and it is only after the button press that the value is updated and then changes the text. Change it back to 0.

b. Next try switching the responses using the Move up/Move down buttons in the

Action List details. Preview the lesson and notice that the text is updated before the variable is changed.



HANDS-ON EXERCISE 12B: CAPTURING LEARNER INPUT

In this exercise, you will learn how to: • Capture input from the learner and store it in a variable • Use the variable to display the input on a different page

1. Start by taking a look at the finished product at


2. Create the objects for the first page. a. Create a new page (or open a new lesson), then insert a text object and change

the text to “Please enter your name:”. b. Insert an input text object from the Object toolbar. Place it to the right of the

text object and extend it to an appropriate size to accommodate a learner’s first name.

c. Create a button and place it below the input text object. Change the label to “Begin Exercise”.

d. Create a new text variable in the Variable panel. Name it “Name Variable” and

make it a global variable. 3. Create the objects on the second page.

a. Click on the Insert Page icon on the Main toolbar. b. Create a text object and change the text to “Hello”. Change the Name property

to “Static text”. c. Create another text object and place it to the right of the Hello text object, with a

Name property of “Display text”. With nothing selected, the two words should be spaced to appear as text object.

4. Now you will create the actions to 1) store the name and 2) move on to the next page.



a. Go back to the first page and create a new action in the Action List. Name it “Store name then go to next page”.

b. Set the trigger to Button 1 > onClick. c. Set the response to Global Variables > Text > Name Variable > setValue. d. In the Select window, set the parameter to Function > Input Text 1 > getText

e. Add a second response and set it to Page Controller > nextPage.

5. Preview the lesson. The continue button should lead to the next page, but the name will

not be displayed. You need to add an action on the second page to set the value of the text object to match the variable.

a. Close the preview and go to the second page. b. Add a new action in the Action List and call it “Display name from variable”. c. Set the trigger to Page Controller > onPageLoad. d. Set the response to Display text > setText. e. In the Select window, set the parameter to Function > Global Variables > Text >

Name Variable > getValue. f. Go back to the previous page and preview the lesson. Now, when the second

page is loaded, the learner’s name will appear.



CHAPTER 9: ADDING TRANSITIONS TO

OBJECTS Transitions are visual effects associated with the showing and hiding of objects. Each object has a transition property associated with it. Transitions can also be added to Displays and Questions. Adding a transition to a set will apply that same transition across all Displays or Questions. User tip: You need to make sure to specify a time for your transition otherwise it will not be applied.

HANDS-ON EXERCISE 13A: ADDING A TRANSITION TO A HELP

WINDOW

In this exercise, you will learn how to add transitions to objects. 1. Start by taking a look at the finished product at


2. Select Home > Shared Library > Training Work Samples > Hands-on Exercise 13A partial and click the “Save As” button. This is identical to where Exercise 5a left off.

a. Select Display Set 1 in the Cast panel. Click on the Transitions button in the Properties panel.

b. This opens the Transitions window. c. Change the Speed to medium, and check the Zoom-in check box.

Tip: You must select a speed in order to have the Transition display.

d. At the top of the window, click the Hide tab, set the Speed to medium, and check the Zoom-out check box.

3. Preview the lesson. The help window should zoom-in when shown and zoom-out when hidden.



HANDS-ON EXERCISE 13B: ADDING TRANSITIONS TO SETS

AND OBJECTS

In this exercise you will learn how to: • Add transitions to entire display sets • Add transitions to objects within each subset 1. Start by taking a look at the finished product at

http://www.suddenlysmart.com/userguide/start_course.htm. 2. Select Home > Shared Library > Training Work Samples > Hands-on Exercise 13B

partial and click the “Save As” button. a. Select Display Set 1 from the Cast panel, and click the Transitions button in the

Property panel. b. In the Transitions window, select the following:

i. Speed: Medium ii. Effects Category: Slide

iii. Choose Right from the choices given.

c. Click on the Hide tab, and assign the following properties.

i. Speed: Medium ii. Effects Category: Slide

iii. Choose Right from the choices given, and press OK. 3. Preview the lesson. All the content should slide in from the right. Then when you click,

it should slide back out and a new one should come in from the same side. 4. Next, add transitions to the text objects.

a. Close the preview and go to the first display of Display Set 1. Select the text object and open the Transitions properties window.

b. Configure the following transition properties for the Show tab: i. Speed: Slow ii. Effects Category: Reveal

iii. Select Down from the options given. c. And the following for the Hide tab:

i. Speed: Slow ii. Effects Category: Reveal



iii. Select Down from the options given. Click OK to accept the settings. d. You can follow the above steps to each of the text objects, or…

i. Delete Display 2 and 3 by using the delete button on the top of the Display Set.

ii. Copy Display 1 and paste it twice to create new subsets. iii. Update the text for Display 2 and 3. The transitions are already copied

with each text object. iv. However, you now have to update the actions, since you deleted the

displays previously associated with the actions. v. Go to the Action List and set show display 1 and show display 2 to have

the correct responses. vi. In this situation, this approach probably takes just as long as adding the

transitions to each text object since the 2nd and 3rd displays already exist. However, if you set up transitions on objects inside a display before creating new copies of the display, you can save time.

5. Preview the lesson and notice the multiple transitions.



Chapter 10: Advanced Objects

TIMELINE

The Timeline can be used to control the showing and hiding of objects in relation to a timeline, or to an audio file. 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.

HANDS-ON EXERCISE 14A: CREATING A TIMELINE OBJECT

In this exercise, you will learn how to use the Timeline object. 1. Start by taking a look at the finished product at

http://www.suddenlysmart.com/userguide/start_course.htm. 2. Select Home > Shared Library > Training Work Samples > Hands-on Exercise 14

partial and click the “Save As” button.

3. Create a Timeline object and link it to the other objects.

a. Insert a Timeline object from the Object toolbar. Place it anywhere. b. Click on the timeline object and select the Edit Timeline button in the

Properties panel. c. Change the Time Based __ seconds option from “5” to “10” and press <Enter>.

The timeline will adjust to the new value. d. Click the Add Cue button, and then click the Add Object button to the right and

select Background. Check the checkbox in the Show column. e. Move the slider (located on the underside of the timeline) to 3 seconds, add

another cue, and add the object Header and check Show. f. Move the slider to 5 seconds, add another cue and add the object Body Text and

check Show. g. Move the slider to 8 seconds, add another cue and add the object Button and

check Show.



4. Preview the lesson. The objects should appear at the appropriate times. Keep this exercise open, or save it, because you will use it as the starting point for the next exercise.

HANDS-ON EXERCISE 14B: SYNCHRONIZING A TIMELINE TO

AUDIO

In this exercise, you will learn how to use the Timeline object to synchronize object appearances with a narration. 1. Start by taking a look at the finished product at

http://www.suddenlysmart.com/userguide/start_course.htm. 2. Open the completed lesson from the previous hands-on, or, open a Save As copy of

Hands-on Exercise 14 partial.

3. Now, synchronize the appearance of objects to an audio file. a. Delete the Timeline 1 object. You will lose the scripted timeline you have

already made, but you will make another one. b. Insert a new Timeline object, and use the Object menu to select Edit Timeline. c. Click on the Audio Based radio button, and then the Select button to find the

correct media file. d. Choose Select Media > Shared Library > Training Work Samples >

timeline_audio, and press Select. The timeline should extend to the length of the audio file, in this case 16.1 seconds.

e. Press the rewind button, then the play button to hear the audio (make sure your speakers are turned on).



f. Rewind the audio again. At 1 second, create your first cue: Click Add Cue. Add Object > Background. Check the Show box.

g. Play the audio. When the speech first begins, stop the audio and add the second cue, add the Header object, and check Show.

h. At the beginning of the next phrase, add the third cue, add the Body text object and check Show.

i. When you hear “click the continue…”, add the fourth cue, add the Button and check Show.

4. Now add in transitions. Normal transitions applied to objects do not work if these objects

are controlled by a timeline object. Instead, use the Animate In button in the Timeline window to set up transitions for these objects.

a. Select Cue 1 and Background, then click the Animate In button. Select: i. Speed: Medium ii. Zoom in: Checked

iii. Spin: Clockwise. b. Notice the blue line on the timeline that shows how long the object will remain

visible. c. Select Cue 2 and Header, then click the Animate In button. Select:

i. Speed: Medium ii. Zoom in: Checked

d. Select Cue 3 and Body text, then click the Animate In button. Select: i. Speed: Medium ii. Effects category: Slide, Right

e. Select Cue 4 and Button, then click the Animate In button. Select. i. Speed: Medium ii. Zoom in: Checked

iii. Fade in: Checked.

5. Preview the lesson. The objects should appear at the appropriate cue points with the selected transition effects.



DRAG AND DROP

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. It 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.

HANDS-ON EXERCISE 15A: CREATING A DRAG AND DROP

QUIZ

In this exercise, you will learn how to create an interaction using the drag-and-drop object. 1. Start by taking a look at the finished product at

http://www.suddenlysmart.com/userguide/start_course.htm. 2. Start by creating the objects of this interaction.

a. First, drag a text object onto the page and name it “Instructions”. Change the text to “Drag and drop the names of the shapes onto their corresponding shapes.” Place this at the top of the page.

b. Create another text object, changing the text to “Pentagon” and the Name property to “pentagon text”. Create another 2 text objects, and change the text to “Square” and “Octagon” (Names: “square text” and “octagon text”). Place these on the left side of the page.

c. Create three shape objects and place them on the right side of the page. i. Name the first “square shape”. ii. Double click on the second shape and choose an octagon (6th from the

left). Name it “octagon shape”. iii. Double click on the last shape and choose a pentagon (4th from the left).

Name it “pentagon shape”.



3. Next, create and configure a drag and drop interaction. a. Create a Drag and drop object from the Object toolbar. b. Double click on the object, or select the Edit Drag and Drop button in the

Properties panel. c. In the Drag and Drop window, look over the various options. The following

numerals correspond to the numerals in the figure.

i. Click on the Add button under Drag objects and select each of the three text objects.



ii. Click on the Add button under Drop area objects and select each of the three shape objects.

iii. Select each Drag object, then check the checkmark for the corresponding Drop area object in the Correct column.

iv. Under the Correct release settings, check the Use feedback graphic checkbox and click on the button to open the dialogue box. Leave the graphic unspecified. A default check mark graphic will be used. Change the Size parameter to “20”%.

v. Under the Incorrect release settings, check the Use feedback graphic checkbox and click the button to change the options. Leave the graphic unspecified, and a default red X graphic will be used. Change the Size parameter to “20”%.

vi. Check the Auto align drop objects from ___ checkbox and choose Top from the drop down menu. This only applies to correct answers; incorrect answers will be placed in the center of the object. Note: when using the auto align, make sure that the drag object’s width and height are smaller than that of the drop object, otherwise the drag object will not be able to auto align and will snap back to its start position. So, in this example, you will need to reduce the width of your text objects. You can also center the texts to make them align nicely with the shapes when dropped.

4. Accept the changes and preview the lesson. Keep this lesson open, or save it, because you will use it in the next lesson.

HANDS-ON EXERCISE 15B: DELAYING FEEDBACK ON THE

DRAG AND DROP QUIZ

In this exercise, you will learn how to configure a drag and drop interaction to show custom feedback when all the objects have been dropped. 1. Start by taking a look at the finished product at


2. Open the previous exercise, or select Home > Shared Library > Training Work Samples > Hands on Exercise 15b partial and click the “Save As” button.

3. Create the following text objects, with the appropriate Names properties as shown on the page and the Cast panel.



4. Now change the Drag and drop properties.

a. Select the Drag and Drop 1 object and then double click on it to open the Drag and Drop window.



i. Add the shown Correct feedback text objects. ii. Add the shown Incorrect feedback text objects.

iii. For each text object in the Drag object column, select the corresponding text object in the Correct feedback and Incorrect feedback columns.

iv. Uncheck all the options under Correct release settings and Incorrect release settings. You have already specified custom feedback with the text objects.

5. Select the Stay radio button in Drop Settings. This will leave the object where it is

dropped, as opposed to moving to the center or top of the drop area.



6. Preview the lesson. The drag and drop interaction should give individual feedback depending on the learner’s choices.

TIMER

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.

PERCENT TRACKER

The percent tracker object gives you a way to visually represent a value on a scale from 0 - 100. There are several different tracker styles, including a bar tracker, and a gauge.

CHAPTER 11: TEMPLATES A template is pre-built content, including interactions, that can be inserted onto any page of a lesson. You are able to apply multiple templates on the same page, and template changes can be propagated to all lessons that use a given template.

USING

Applying a template To apply a template to the currently selected page, click Edit > Apply Template, or, click the green Add a 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.



Linking a template to a lesson page After selecting a template, you will be asked if you want to maintain a link to the template. By selecting this option you will allow updates to the template to automatically propagate to your lesson. If your lesson includes a Flow Chart, you will also be asked if you want to replace this with the template’s Flow Chart.

If you choose to keep a link to the template, then any objects and actions will initially be non-editable because they will be controlled by the template. That is, any changes to these elements in the template will automatically propagate to your lesson. You can however, choose to unlink these elements as described below:

1. Objects Objects can be linked to the template in two ways: position and value. These are represented by a “P” and “V” icon on the object border, and by the multi-state check box in the Cast.

If you click the “P” icon, making it gray rather than orange, you will un-link the object’s position from the template. This will enable you to move the object, but it also means that changes to the object’s position in the template will no longer propagate to the object in the lesson.



Similarly, you can un-link the object’s value from the template. This will enable you to change the properties, and any text or text formatting. Again, it also means that changes in the template for this object will no longer be propagated to the object in the lesson.

2. Actions Actions in the template will be non-editable, and will be demarcated with a link icon in the action list. You cannot un-link these actions, except by un-linking the entire template (see below for an explanation of this). You can, however, create new, editable, actions on the page.

3. Flow Chart Actions in the template will be non-editable, and will be demarcated with a link icon in the action list.

CREATING

Only someone with the necessary rights can create a template. From the Authoring Stage, select File > Save As Template. You can only save a template into a folder for which you have write access. You can also create a new, blank template from the Template node in the Home window, just like creating a new lesson. User tip: Provide descriptive name for your objects and actions before saving your template to make them more usable.

ORGANIZING

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.



MULTI-PAGE TEMPLATES

Sometimes it is useful to create reusable content that spans across multiple 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.

HANDS-ON EXERCISE 16: USING AND CREATING A TEMPLATE In this exercise, you will insert a multiple choice template, then customize it by adding a timer and tracker object. Save as Template. 1. Start by taking a look at the finished product at


2. Create a new lesson from the Home node, or the Work in Progress > Lessons node, and fill in the Meta-data.

3. When the new lesson opens, click on Edit > Apply Template. From the list, select

Multiple Choice: 4 questions. User Tip: When creating templates, place notes and comments off the page. These will be visible to other authors, but not to end users. 4. Preview the lesson. The interaction is complete! Close the Preview window and return

to the Authoring Stage.

5. Create and configure a timer object. a. Add a timer object to the question and place it in the upper right corner of the

white rectangle. b. Change the Start Time property to “5”. Note that the default Direction property

is set to Count down. c. Change the Count Sound property to Tick. d. Change the Cue Point Sound to Boing. e. Use the object menu and select Create Action > onTimeZero. f. Select Questions > Question 1 > submit as a Response. g. Give the action a name (e.g., “Auto submit questions on timeout”)

6. Configure the timer action for all questions.

a. Find the newly created action from the last step in the Action List. b. Add the following Responses to the action

• Questions > Question 2 > submit • Questions > Question 3 > submit • Questions > Question 4 > submit

c. Finally, use the move up/down arrows to the left of the responses so that the responses are in the following order:



i. Questions > Question 4 > submit ii. Questions > Question 3 > submit

iii. Questions > Question 2 > submit iv. Questions > Question 1 > submit

d. The previous step was done because responses are done sequentially. If they are in order from 1-4, then each question would be submitted right after the last. This way, Question 4 > submit is only valid when it is visible.

e. Create a new action and set the Trigger to Questions > onSubsetChange. f. Set the Response to Timer 1 > reset. g. Add a second Response: Timer 1 > continue. h. Remember to give this action a meaningful name.

7. Add and configure a progress tracker object.

a. Place a percent tracker object onto the page, in the lower right corner of the blue rectangle.

b. Set the Start Value property to “0”. c. Add a new action and set the Trigger to Feedback > onShow. d. Set the Response to Pct. Tracker 1 > add value, and specify a value of “25”. e. Give the action a meaningful name.

8. Preview the lesson. If you let the timer count down to zero, it will automatically submit

your answer and give you feedback. If there is no answer specified, then it will be considered wrong. The progress tracker only measures progress through the interaction, not the score of the user, and should increase after each question. Close the Preview window.

9. Click on File > Save As Template. Then specify where you want the template to be saved. Fill in the Meta-data.

10. Close the lesson and create a new one. Click on Edit > Apply Template and use the one made in this exercise.

CHAPTER 12: 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. 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/

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

http://www.section508.gov/

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



colors that color blind people cannot see properly, or choosing font colors that are easy to read by dyslexic people.

OBJECTS

The following SmartBuilder objects have properties that allow them to be read by screen readers:

• Text objects (please see the Reading Text section below) • Input text objects • Buttons • Hotspots • Graphics • Check box groups • Radio button objects

USING

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, Graphics, Radio Buttons and Check Boxes have a Tab Index property which controls the order in which learners can cycle through the objects. Note that only visible objects can be selected using the Tab key, so even if something has a tab index, it will be missed if it is not currently visible.

User tip: 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.



Reading Text

Learners using screen reading software cannot tab to regular text. In order to make text readable, authors must create a button that, when clicked, will select the text that they want the screen reading software to read. This can be done with the response method "selectAllText" on the Text object.

Example:

Description

When an accessible object is selected, the name, label, and/or description will be read. A description is optional and may be entered by using the Description field in the Properties panel. Use the chart below to see what properties will be read when tabbed to.

User tip: Different screen readers will often verbalize slightly different descriptions and instructions for the objects. For example, one screen reader may say “graphic” whereas another may say “image.” What is read out load will also depend on the screen reader’s settings.

User tip: The screen reader will not read lessons in authoring preview mode; you must view the published version to hear the screen reader or use the tab index.

Finally, with some browsers, such as Firefox, you may need to click onto the lesson page to give it focus before you can start tabbing through the objects. This is not required for most IE browser versions.

Button [button label]; [button description]; push button; to push, press space bar

Check Box checkbox group; [checkbox description]; graphic Check Box item [answer text]; checkbox; to check, press space bar Graphic graphic; [graphic description]; to click press space bar Hotspot hotspot; [hotspot description]; push button; to push, press space bar Input Text editable text; [visible text] Radio Button radio button group; [radio button description]; graphic Radio Button item [answer text]; radio button; to select a different item in the cluster, use

the arrow keys Text, when selected [visible text]; text; read only

DETECTING IF A SCREEN READER IS TURNED ON

You can use a method on the Page Controller object called isAssistiveDeviceOn that will detect if a screen reader is active. It will return a true/false value so that authors can detect if



learners are using a screen reader or not. For example, this would enable you to make a button appear (onPageLoad, if isAssistiveDeviceOn = true, then show button) that can be clicked to read a summary description of a rich interaction that may be too complex to navigate through for those using screen readers. This will allow you to have a single lesson that has different functionality depending on whether a screen reader is on.

HANDS ON EXERCISE 17: CREATING AN ACCESSIBLE LESSON

In this exercise, you will learn how to create a lesson that can be read by a screen reader.

1. First, look at the finished example here: http://www.suddenlysmart.com/userguide/start_course.htm.

User tip: You will probably need screen reading software for this to work properly. Microsoft Windows has a built in screen reader called Narrator, which can be located from the Start Menu > Accessories > Accessibility > Narrator. User tip: The screen reader will only work on published content, so previewing while authoring will not engage the screen reader.

2. First you will lay out the objects and change their properties. a. Place four buttons and two text objects on the stage. b. Add text, and change the Button Label properties as shown below.

c. Uncheck the Start Visible Property of the “Read text” buttons and text objects.

3. Next you will specify the tabbing order of the buttons. a. Give the “Copyright” button a Tab Index of “1”. b. Give the top “Read text” button a Tab Index of “2”. c. Give the “Patent” button a Tab Index of “3”. d. Give the bottom “Read text” button a Tab Index of “4”.

4. Next you will add descriptions to the buttons. a. Click on the “Copyright” button and give it a Description property of “Learn

more about copyrights”

http://www.suddenlysmart.com/userguide/start_course.htm



b. Click on the top “Read text” button and give it a Description property of “Read copyright content”

c. Click on the “Patent” button and give it a Description property of “Learn more about patents”

d. Click on the bottom “Read text” button and give it a Description property of “Read patent content”

5. Then you will set up the actions needed to display the text. a. On the “Copyright” button create an onClick Trigger, and a Response of Text

1 > show and a second response of read button 1 > show. b. On the “Patent” button create an onClick Trigger, and a Response of Text 2 >

show and a second response of read button 2 > show. 6. Finally, you will create the actions that will read the text.

a. On the bottom “Read text” button create an onClick Trigger, and a Response of Text 1> selectAllText.

b. On the top “Read text” button create an onClick Trigger, and a Response of Text 2> selectAllText.

7. That’s it! Publish your lesson, and view it from your My Published Content > Lessons folder to see if the tabbing and screen reading works.

CHAPTER 13: CONTENT MANAGEMENT &

COLLABORATION FEATURES

TRANSLATION AND RE-PURPOSING CONTENT

The translation feature allows you to create alternative versions of a lesson containing different text and media, while maintaining a 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 or different languages. For example, if you want to translate a lesson into Spanish, you can change the text, and possibly some of the images. If you want to create a lesson for employees, and create another version for an external audience that leaves out certain sensitive information, then you can do so using the translate function. When you need to make changes to layout or interactivity, you only have to make those changes in one place, rather than in two or more separate lessons. 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.



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

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.

LESSON MANAGEMENT

Meta-data Meta-data is descriptive information about content such as its name, description and keywords. Meta-data can be used: • By the LMS to catalog the content • By SmartBuilder to make it easier to locate content

when using the search feature



Basic vs. advanced Meta-data views The Advanced tab enables users to input any SCORM Meta-data. The basic view only displays selected key meta-data.

Publishing Publishing a lesson will compile all the content, including text, media and assets, into a package that can be delivered to learners. Once a lesson has been published, it can be downloaded for delivery to the learner (via an LMS, webserver, CD-ROM or other method of your choice), and it can be placed in a Shared Library folder. To publish a lesson from the Authoring stage, select the File > Publish menu. You can also publish a lesson from the Home window. To do this, select the Work in Progress > Lesson node, then click the Manage > Publish menu button in top tool bar. You will then be prompted to enter version comments. These will help you identify the version in case you need to roll-back content to a previous version. After publishing a lesson, it will no longer be in your Work In Progress folder. It will be located in the My Published Content folder.

Owners You can assign multiple owners to a piece of your content (courses, lessons, media, etc) so that others can also edit that content. Without co-ownership, other users will be able to view and copy published content in a shared folder, but will not be able to edit it.

Downloading When you download a lesson, you have several options available.

• Basic – generates a flash file with an html shell, and folder structure for resources

• SCORM – in addition to basic structure, it includes the SCORM manifest and meta-data files

• Translations – if you create translation versions, here you would specify which targets to include in the download package.



COURSE AUTHORING

A course is an aggregation of one or more lesson. When you create a new course, or open an existing course, the Course Edit window will be launched.

Adding lessons In authoring a course, you specify the folder structure and order in which you want your lessons to be presented.

Adding folders You can add folders to group your lessons.

Adding owners / reviewers The Course Edit window is also where you assign reviewers to your course. You can assign reviewers and owners to individual lessons, or the entire course.

Editing Meta-data To edit course Meta-data from the course edit window, the course node needs to be selected. You can also edit course meta-data from the Home window.

PUBLISHING A COURSE

When you publish a course, you will choose the course skin which will affect how your course looks at the time of delivery. If you are delivering your course using an LMS, the skin will not matter since the LMS will provide its own page or framework for launching the individual lessons.

DOWNLOADING

Unlike the lesson download window, the course download window does not have any advanced options. The package will automatically be a SCORM compliant package.



Translation versions However, if you have more than one translation version of a course, you will be asked to specify which version you want to download. If any lessons do not have the specified translation version (e.g. Spanish), then the source version (e.g. English) will be used instead.

USING THE SHARED LIBRARY

The Shared Library contains content that is accessible by multiple users within an organization or department. (Content in the My Content section of the Home Tree is only visible by the content’s owners.) For more uses of Shared Libraries, see the Multi-Page Templates section in Chapter 11. 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.

REVIEW PROCESS WORKFLOW

The workflow feature enables users to: • Capture review and revision comments in a threaded discussion format • To flag overall lesson status as approved or disapproved • To classify reasons for disapproval for analysis.

Assigning reviewers The workflow feature can only be used with courses. If you only have one lesson to review, you can place the lesson inside a temporary course so that you can still use the workflow feature. To assign reviewers, open the course. In the Course Edit window, select the level (lesson, folder or course node) to which you want to assign reviewer(s). Then, click the Add button in the Reviewers section of the panel on the right. Different reviewers can be added to different lessons in a course.

Starting a review cycle Once you have published a course, select it and start a review cycle by clicking Manage > Start Review.



All system users who have been assigned as reviewers for that course will receive an email notification, and a review task in their Assigned Tasks > Review node.

Reviewing a course/lesson To launch the Review window, select the My Assigned Tasks > Review node in the Home tree, select the course you wish to review, then click the Select button in the toolbar. This will launch the Review window in a separate browser. Click on a lesson in the Workflow Course Tree. If you have been assigned as a reviewer for that lesson, you will see a magnifying glass icon on the lesson node and you will need to approve or disapprove the lesson. Only once you have assigned a status to all your assigned lessons will your review task be complete.

Adding comments You also have the ability to add comments to a page of content if you are an assigned reviewer of that lesson. Comments can be categorized for later analysis.

Revising a lesson Once all the reviews have been completed, the owner(s) of the lessons will receive a task in the Revision node of their Home window. After launching the Revision window, lesson owners can reply to reviewer comments. Reviewer comments that have not yet been responded to will show a caption balloon icon to indicate that revisions are still required.



“HOW TO” TIPS

CREATE A BOOKMARK

Overview Bookmarking functionality is not pre-coded into SmartBuilder lessons. Instead, it is up to the author to decide how the bookmark should function, and when to set and retrieve the bookmark. Bookmarking is created by storing a text variable (also known as a string variable) on an LMS, and then retrieving it and taking some action based on the variable. The most common usage is to base the variable on the last page visited, and return to that page when the lesson is re-launched. However, bookmarking could also be used to “remember” other content viewed by the learner. For example, to indicate the last display viewed and return to that display.

Example of how to create a bookmark: 1. On load of page 1, jump to the page with the same name as the bookmarked page:

a. Create an action with a trigger: Page Controller > onPageLoad b. Create a response: Page Controller > gotoPageByName (SCORM API

>getSCOLocation)

2. On all pages except page 1, create an action to update the bookmark with the current page’s name:

a. Create an action with a trigger of Page Controller > onPageLoad



b. Create a response: SCORM API > setSCOLocation (Page Controller >getPageName)

TRACK SESSION TIME

Tracking how long a learner spends in a lesson is automated in SmartBuilder content. The lesson must be launched from a SCORM compliant LMS for this information to be tracked. When the lesson is closed, whether by using the Page Controller > closePage method, or by clicking the browser close “X” button , a SCORM call, session_time, is automatically sent to the server. How this data is used by the LMS is outside the scope of this documentation. For example, some LMS’s may display the session time exactly as reported by the SmartBuilder lesson. Other LMSs may calculate their own session time by subtracting the time of the LMSInitialize call from the LMSfinish call. Other LMSs may aggregate the session time from multiple sessions to create a “total session time”.

REPORT A SCORE

Overview SmartBuilder provides you with the flexibility to report a score for a traditional multiple question quiz format, or for any other type of interaction created in SmartBuilder.

Example of how to report a score using a question s et 1. Create a multiple choice quiz from scratch, or apply a quiz template to your page

(e.g. “Multiple Choice: 4 questions”). 2. Select the question set in the Cast, then select the Scoring property.



3. Change the weighting of the question, if your desire, 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.

4. 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 Sequence property to randomly show 3 questions from a pool of 4 questions, then the questions set is considered “complete” after the 3rd question has been submitted. You can “submit” a question a number of ways (e.g. on a button click, on an expiration of a timer, on first selection of a radio button or hotspot, etc.). See Chapter 7 for more details on how to submit a question or display in the Flow Chart.

FAQs: Q: What score will be reported if I include multiple question sets in a single lesson? A: If you use the Automatically submit score to LMS upon completion feature as described above, each question set will submit a score for the lesson, and the LMS will probably overwrite the previous score. Similarly, if you let the learner take a quiz again, the score will also be submitted to the LMS a second time and overwrite the previous score. Q: What if I don’t want the score from each question set or each attempt to overwrite the previous scores, but instead I want to average the scores. A: You can to store the score(s) in a variable(s), then manipulate the variables (e.g. average them), and then submit them to the LMS using whatever trigger you choose (e.g. on load of the last page of the lesson). For example, to create an average score from 2 question sets, do the following:

1. Uncheck the Automatically submit score to LMS upon completion check box. 2. Create a global number variable (e.g. called “Score1”) 3. When a question set is complete, set the Score1 variable to hold the question set’s

score:



a. Create an action with a trigger: Questions > onComplete b. Create a response: Global Variables > Number > Score1 > setValue

(Questions >getScore) Note: you can report a normalized score (0 – 100 scale) using getScore, or report points using getPoints. For example, if a question set has 4 questions with 1 point each, and if a learner answers 3 questions correctly, then getScore will return 75, getPoints will return 3 and getTotalPoints (total points possible) will return 4.

c. Repeat steps 1-3 above for each questions set. You will need to create a new variable for each question set (e.g. “Score1”, “Score2”) and variable for the total (e.g. “Total”).

d. Average the scores. i. Create an action with a trigger: e.g. Question Set 2 > onComplete ii. Create 3 responses:

1. Global Variables > Number > Total > add (Global Variables > Score1 > getValue)

2. Global Variables > Number > Total > add (Global Variables > Score2 > getValue)

3. Global Variables > Number > Total > divide (2) e. Submit the average score to the LMS:

i. Create an action with a trigger: e.g. PageController > onPageLoad ii. Create a response: SCORM API > setRawScore (Global Variables >

Number > Total > getValue)

Example of how to report a score without using a qu estion set You can manipulate a score (increment, decrement, average, etc.) based on any action you like. In general, you will follow these steps:

1. Create variable(s) to hold the score(s) 2. Create actions with any trigger that is appropriate. For example, if you want to

increment a score when a user clicks on the correct part of a software interface, you might place a hotspot over the interface graphic and use the onClick trigger.

3. Create a response to increment one of your score variables (e.g. Global Variables > Number > Score1 > add(10) )

4. Manipulate the various variables as necessary. To do this you may need to create a variable to hold the result (e.g. “Total”) and use the add, subtract, multiply and divide methods for the Total variable.

5. Decide on an appropriate trigger to submit the score to the LMS. For example, you might place a button on the last page with a label “Submit Score.” Then use the SCORM API > setRawScore method to pass the score to the LMS (e.g. SCORM API > setRawScore (Global Variables > Number > Total > getValue)).



EXPLANATIONS OF TRIGGERS AND METHODS Name Type Description

Audio

onHide Trigger

Triggers when the object's visibility changes

from visible to hidden.

onShow Trigger

Triggers when the object is initially shown, or

when it’s visibility changes from hidden to

visible.

onSoundComplete Trigger Triggers when audio track finishes.

Get Current Time Condition Returns current time elapsed in audio object.

Get Total Time Condition Returns total time of audio object.

isVisible Condition

Checks to see if object is currently visible on

the stage. Returns a "True" value if the object

is visible and a "False" value if it is hidden.

Go to Time Response Sets audio object to specified time.

hide Response

Stops the audio and hides the controller, if

there is one.

Pause Sound Response Pauses the audio track.

Play Sound Response Plays the audio object.

Restart Sound Response Plays the audio track from the beginning.

setVisibility Response

Sets the visibility of object based on a Boolean

(True/False) value. The Boolean value can be

entered as a static value, or can be pulled

from another object, or variable.

show Response

Starts the audio and shows the controller, if

there is one.

Button

onClick Trigger Triggers when the object is clicked.

onRollout Trigger

Triggers when the mouse moves off of the

object.

onRollover Trigger

Triggers when the mouse moves over the

object.

onSelect Trigger

Triggers when object is selected (clicked or

moved into down state).

isClicked Condition Checks to see if button has been clicked yet.

isSelected Condition

Checks to see if the button object is in a down

state (true) or not (false).

isVisible Condition




hide Response Makes the object invisible.



setClicked Response

Changes the state of a button to clicked or

not.

setHyperlink Response

Sets the hyperlink associated with the object.

The specified resource will be launched in a

pop-up browser window when the button is

clicked.

setLabel Response

Changes the button label to static text,

variable, name of another object, or other

string.

setSelected Response

Sets the button to a down state. If the button

is part of a group (using the "Group Name"

property), the other buttons in the group will

be set to an up state.






show Response Makes the object visible.

Check Box Group

onHide Trigger



onSelectionChange Trigger

Triggers when an option is selected or

deselected.

onShow Trigger



visible.

getSelection Condition

Returns a comma delimited string indicating

the checked status. For example, a checkbox

group with 4 boxes and boxes 2 and 4

selected would return: f,t,f,t

isOptionSelected Condition

Checks to see if the specified value (option) is

selected.

isVisible Condition





setSelection Response

Changes which checkboxs are selected to the

specified values.







Display Set



onHide Trigger



onShow Trigger



visible.

onSubmit Trigger Triggers when display is submitted.

isVisible Condition




getActiveSubsetIndex Condition

Returns the number of the currently visible

subset.

getSubsetCount Condition Returns the total number of subsets.

hide Response Hides the display.






show Response

Shows the display and starts any media within

that display.

submit Response Submits the display (continues the Flow).

Drag and Drop

onAllCorrect Trigger

Triggers when all drop areas contain the

correct drag objects.

onAllDropped Trigger

Triggers when all drag objects have been

dropped.

onDrag Trigger

Triggers when a drag object is clicked and

dragged.

onDrop Trigger Triggers when a drag object is released.

onHide Trigger



onShow Trigger



visible.

Get Correct Drop Count Condition

Returns number of objects dropped on the

correct drop areas.

Get Incorrect Drop

Count Condition

Returns number of objects not dropped on

the correct drop areas.

Get Pass Condition

Returns true or false based on whether

enough objects were dropped on their correct

drop areas to meet the "pass" requirement.

isVisible Condition







MoveAllToCorrect Response Moves all drag objects the correct drop areas.

Reset All Response

Moves all drag objects back to the original

places.

Reset Incorrect Response

Moves all incorrectly dropped drag objects

back to the original places.

Reset Incorrect Drop

Count Response Sets incorrect drop count to zero.

Set Pass Response Sets the "pass" requirement to true or false.







Show All Response Shows all drag objects.

Show Correct Response

Makes the correctly placed drag objects

visible.

Show Incorrect Response

Makes the incorrectly placed drag objects

visible.

DropDown List

onHide Trigger



onSelectionChange Trigger Triggers when the selection changes.

onShow Trigger



visible.


Returns the object's current selection in

number format (first selection = 1, second = 2,

etc).

getOptionText Condition

Returns the text of the specified option.

Often used with getSelection.


Checks to see if specified value (option) is

selected.

isVisible Condition






Changes which drop down item is selected to

the specified value.









Flash SDK Object

onHide Trigger



onShow Trigger



visible.

isVisible Condition











Graphic


onHide Trigger



onRollout Trigger


object.

onRollover Trigger


object.

onShow Trigger



visible.

isVisible Condition











HotSpot


onHide Trigger



onRollout Trigger


object.

onRollover Trigger Triggers when the mouse moves over the



object.

onShow Trigger



visible.

getClickCount Condition

Returns the number of times the object has

been clicked.

isClicked Condition

Checks to see if button is in clicked state

(true) or not (false).

isVisible Condition





setClickCount Response

Sets the number of times the object has been

clicked.

setClicked Response

Changes the state of a button to clicked or

not.




pop-up browser window when the hyperlink

is clicked.







Input Text

onFocus Trigger Triggers when the object has focus (is clicked).

onHide Trigger



onShow Trigger



visible.

onUnfocus Trigger

Triggers when the object loses focus (is

clicked away from).

onValueChange Trigger Triggers when the text is changed.

contains Condition

Checks for the specified string (text) in the

text object. Returns true if it is found or false

if it is not.

getText Condition Returns the text object's current value.

getNumber Condition

Returns the text object’s current value as a

number.

isVisible Condition







setText Response Changes text to the specified value.

setTextColor Response Changes the text color to the specified value.







MultiState Button


onHide Trigger



onShow Trigger



visible.

onStateChange Trigger

Triggers when object changes states (clicked

or set).

getStateIndex Condition

Returns in the current state of the object in

number format.

isVisible Condition





setStateIndex Response

Changes the state of the button to the

specified value. Note, if value is higher than

number of states, it will break the multistate

button.







Pct. Tracker

onHide Trigger



onShow Trigger



visible.

onValueChange Trigger Triggers when the object's value changes.

getValue Condition Returns the current value of the object.

isVisible Condition






toString Condition

Returns the current value of the object as

number between 0 and 100 in a string (text)

format.

addValue Response Adds specified value to the object.


setValue Response Sets the value of the object.







Question Set

onHide Trigger



onShow Trigger


when its visibility changes from hidden to

visible.

onSubsetChange Trigger Triggers whenever a subset is changed.

onComplete Trigger

Triggers when the question set is complete

(depends on the scoring and sequence

properties).

onSubmit Trigger Triggers when a display is submitted.

isVisible Condition




hide Response Hides the question set.






gotoSubset Response Goes to specified subset.

nextSubset Response Goes to the next subset.

previousSubset Response Goes to the previous subset.

printVisibleSubset Response Prints the currently visible subset.

show Response Shows the display.

submit Response Submits the display (continues the Flow).

RadioButton Group

onHide Trigger



onSelectionChange Trigger

Triggers when an option is selected or

deselected.



onShow Trigger



visible.


Returns radio button object's current

selection as a number (first option selected =

1, second = 2, etc).

getOptionText Condition

Returns the text of the specified option.

Often used with getSelection.


Checks to see if specified value (option) is

selected.

isVisible Condition






Changes which radio buttons are selected to

the specified values.







Shape


onHide Trigger



onRollout Trigger


object.

onRollover Trigger


object.

onShow Trigger



visible.

isVisible Condition








pop-up browser window when the shape is

clicked.








setFillColor Response

Changes the fill color to the specified hex

value.


Streaming SWF


onHide Trigger



onRollout Trigger


object.

onRollover Trigger


object.

onShow Trigger



visible.

isVisible Condition




hide Response Pauses and hides the object.






show Response Makes the object visible and begins playing.

Text

onHide Trigger



onShow Trigger



visible.

onValueChange Trigger

Triggers when the value of the object

changes.

getText Condition

Returns the current value of the text object in

string (text) format.

isVisible Condition





setText Response

Changes the text value to a static value,

object property, or variable. Takes a string

(text).

setTextColor Response

Changes the text color to the specified

hexidecimal value (e.g. 0099CC).









Timeline

onContinue Trigger

Triggers when timeline continues past a pause

point.

onCue Trigger Triggers whenever a cue is reached.

onEnd Trigger Triggers when timeline ends.

onReset Trigger Triggers when timeline restarts.

onStart Trigger Triggers when timeline starts.

Get CuePoint Condition Returns the current cue point.

Get Current Time Condition Returns the current time of the object.

isVisible Condition




Pause Response Pauses the timline object.

Play Response Resumes or starts the timeline object.

Restart Response Restarts the timeline object.

Timer

onCuePoint Trigger Triggers when cue point is reached.

onHide Trigger



onInterval Trigger

Triggers whenever the interval value is

reached.

onPause Trigger Triggers when the timer object pauses.

onShow Trigger



visible.

onStart Trigger Triggers when the timer starts.

onTimeZero Trigger

Triggers when the timer object counts down

to zero.

getTime Condition Returns current time of counter object.

isCuePointReached Condition

Returns true or false based on whether cue

point has been reached.

isVisible Condition




addTime Response Adds specified time to the timer object.

continue Response Resumes or starts the timer object.




pause Response Pauses the timer object.

reset Response Restarts the timer object.







Video

onHide Trigger



onShow Trigger



visible.

onVideoComplete Trigger Triggers when video object finishes.

isVisible Condition




hide Response Pauses the video object and makes it invisible.

Pause Video Response Pauses the video object at the current time.

Play Video Response Plays the video object.

Restart Video Response Restarts and plays the video object.






show Response Makes the object visible and begins playing.

smartbuilder user guide v9 - suddenlysmart.comsmartbuilder user guide © 2008 suddenly smart, all...

Documents