Adobe COURSEBUILDER User Manual

Download

ma crom edia

COURSEBUILDER

for DREAMWEAVER

Using CourseBuilder

™

macromedia

™

Trademarks

Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind and Xtra are trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words or phrases mentioned within this publication may be trademarks, servicemarks, or tradenames of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally.

This guide contains links to third-party Web sites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party Web site mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.

Apple Disclaimer

APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE ENCLOSED COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES. THE ABOVE EXCLUSION MAY NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC LEGAL RIGHTS. THERE MAY BE OTHER RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO STATE.

Copyright © 1999 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without prior written approval of Macromedia, Inc. Part Number ZCB30M100

Acknowledgments

Project Management: Sheila McGinn

Writing: Kim Diezel

Production: Chris Basmajian

First Edition: December1999

Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

INTRODUCTION

Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

What you can do with CourseBuilder for Dreamweaver . . . . . . . . . . . .12

System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

Installing CourseBuilder for Dreamweaver . . . . . . . . . . . . . . . . . . . . . .13

Learning CourseBuilder for Dreamweaver. . . . . . . . . . . . . . . . . . . . . . .14

New user’s checklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16

What’s new in CourseBuilder for Dreamweaver. . . . . . . . . . . . . . . . . . .18

CHAPTER 1

CourseBuilder for Dreamweaver Tutorial . . . . . . . . 21

Tutorial overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21

Set up site structure for the tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . .22

Deﬁne a local site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

Create an explore CourseBuilder Interaction . . . . . . . . . . . . . . . . . . . . .24

Deﬁne the hot areas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26

Create user feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31

Create a drag-and-drop interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . .36

Create drag-and-drop pairs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40

Create user feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45

Create a multiple-choice quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48

Create user feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53

Create a Multiple-choice interaction . . . . . . . . . . . . . . . . . . . . . . . . . . .55

Deﬁne the multiple-choice interaction . . . . . . . . . . . . . . . . . . . . . . . . .57

Deﬁne the choices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59

Deﬁne the action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61

Test the interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66

CHAPTER 2

CourseBuilder for Dreamweaver basics. . . . . . . . . . 67

CourseBuilder Interaction compatibility with browsers. . . . . . . . . . . . .73

What’s new—step-by-step procedures . . . . . . . . . . . . . . . . . . . . . . . . . .74

Converting from previous versions . . . . . . . . . . . . . . . . . . . . . . . . . . . .75

What to put on the web server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76

Troubleshooting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76

CHAPTER 3

Multiple-Choice CourseBuilder Interactions. . . . . . 79

Multiple-choice interaction overview. . . . . . . . . . . . . . . . . . . . . . . . . . .79

The multiple-choice templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80

The multiple-choice CourseBuilder Interaction tabs . . . . . . . . . . . . . . .81

Multiple-choice CourseBuilder Interactions—

step-by-step procedures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83

True/false questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85

Creating a true/false question . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86

Replacing “True” and “False” with different words . . . . . . . . . . . . . . . .88

Multiple-choice questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88

Creating a multiple-choice question . . . . . . . . . . . . . . . . . . . . . . . . . . .89

Graphic multiple-choice questions . . . . . . . . . . . . . . . . . . . . . . . . . . . .91

Using images instead of text as choices . . . . . . . . . . . . . . . . . . . . . . . . .92

All-that-apply questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94

Creating an all-that-apply question . . . . . . . . . . . . . . . . . . . . . . . . . . . .95

Changing the order of the choices. . . . . . . . . . . . . . . . . . . . . . . . . . . . .96

Adding or deleting a choice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97

Naming a choice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98

Adding an image to a text choice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98

Contents

CHAPTER 4

Drag-and-Drop CourseBuilder Interactions . . . . . . 99

Drag-and-drop interaction overview . . . . . . . . . . . . . . . . . . . . . . . . . . .99

The drag-and-drop templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100

The drag-and-drop CourseBuilder Interaction tabs . . . . . . . . . . . . . . .102

Drag-and-drop CourseBuilder Interactions—

step-by-step procedures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104

One-to-one matching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106

One-to-one matching, either way . . . . . . . . . . . . . . . . . . . . . . . . . . . .107

One-to-many matching. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108

One-to-many matching, either way. . . . . . . . . . . . . . . . . . . . . . . . . . .109

Creating a matching exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110

The “Build your own” template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112

Building your own matching exercise . . . . . . . . . . . . . . . . . . . . . . . . .113

Two-step procedure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116

Two-step procedure with a distractor. . . . . . . . . . . . . . . . . . . . . . . . . .117

Creating a procedure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118

Building your own procedure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120

Replacing placeholder graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122

Naming a drag-and-drop element . . . . . . . . . . . . . . . . . . . . . . . . . . . .123

Adding and deleting drag-and-drop elements . . . . . . . . . . . . . . . . . . .124

Adding and deleting drag-and-drop pairs . . . . . . . . . . . . . . . . . . . . . .125

A target’s active area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126

Setting how an element behaves when dropped. . . . . . . . . . . . . . . . . .127

Making an element a drag element or a target . . . . . . . . . . . . . . . . . . .128

CHAPTER 5

Explore CourseBuilder Interactions. . . . . . . . . . . . . 129

Explore interactions overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129

The explore templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130

The explore CourseBuilder Interaction tabs . . . . . . . . . . . . . . . . . . . .131

Explore CourseBuilder Interactions—step-by-step procedures. . . . . . .133

Random exploration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135

Creating a random exploration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136

Structured exploration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138

Creating a structured exploration . . . . . . . . . . . . . . . . . . . . . . . . . . . .139

Replacing placeholder graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141

Naming a hot area. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141

Adding text to a hot area. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142

Adding and deleting hot areas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142

Contents

CHAPTER 6

Text Entry CourseBuilder Interactions . . . . . . . . . . 143

Text entry interaction overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .143

The text entry templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144

The text entry CourseBuilder Interaction tabs. . . . . . . . . . . . . . . . . . .145

Text entry CourseBuilder Interactions—step-by-step procedures. . . . .147

Single-line text entries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149

Multiple-line text entries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .150

Creating a text entry ﬁeld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151

Adding default text to a ﬁeld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153

Naming a response . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153

Adding and deleting responses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154

Checking for correct capitalization . . . . . . . . . . . . . . . . . . . . . . . . . . .154

Checking for an exact match. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155

Checking for key words or phrases . . . . . . . . . . . . . . . . . . . . . . . . . . .155

Checking for unanticipated responses . . . . . . . . . . . . . . . . . . . . . . . . .156

CHAPTER 7

Enhancements and Customization . . . . . . . . . . . . . 157

Enhancing and customizing CourseBuilder Interactions . . . . . . . . . . .157

Editing CourseBuilder Interactions . . . . . . . . . . . . . . . . . . . . . . . . . . .158

Cutting, copying, pasting, and clearing interactions . . . . . . . . . . . . . .158

Customizing feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159

Displaying feedback in a frame, layer, status bar, or text ﬁeld . . . . . . .160

Limiting the number of tries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162

Putting a time limit on an interaction . . . . . . . . . . . . . . . . . . . . . . . . .163

Setting when a CourseBuilder Interaction is judged . . . . . . . . . . . . . .163

Changing the name of the Submit button. . . . . . . . . . . . . . . . . . . . . .164

Resetting a CourseBuilder Interaction. . . . . . . . . . . . . . . . . . . . . . . . .165

Inserting a CourseBuilder Interaction into a layer . . . . . . . . . . . . . . . .166

Setting preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167

Authorware integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167

Using the Insert Authorware object. . . . . . . . . . . . . . . . . . . . . . . . . . .168

Managing CourseBuilder Interaction templates. . . . . . . . . . . . . . . . . .169

Working with Gallery ﬁles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170

Contents

CHAPTER 8

CourseBuilder Interaction Controls . . . . . . . . . . . . . 173

Button CourseBuilder Interactions . . . . . . . . . . . . . . . . . . . . . . . . . . .173

The button templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .174

The button CourseBuilder Interaction tabs. . . . . . . . . . . . . . . . . . . . .175

Button CourseBuilder Interactions—step-by-step procedures . . . . . . .176

Toggle switches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177

Push buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178

Creating a button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179

Choosing a look for a button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182

Highlighting a button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182

Changing the initial state of a button . . . . . . . . . . . . . . . . . . . . . . . . .183

Changing the type of button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183

Adding custom button graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184

Timer CourseBuilder Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . .185

The timer templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185

The timer CourseBuilder Interaction tabs . . . . . . . . . . . . . . . . . . . . . .186

Timer CourseBuilder Interactions—step-by-step procedures. . . . . . . .187

Timers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189

Creating a timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190

Timers with a warning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192

Creating a timer with a warning . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193

Setting a timer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195

Setting a trigger. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195

Choosing a look for a timer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196

Naming a trigger. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196

Adding and deleting triggers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197

Judging a response before the ﬁrst trigger is reached . . . . . . . . . . . . . .198

Adding custom timer graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198

Slider CourseBuilder Interaction. . . . . . . . . . . . . . . . . . . . . . . . . . . . .200

The slider templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .200

The slider CourseBuilder Interaction tabs . . . . . . . . . . . . . . . . . . . . .201

Slider CourseBuilder Interactions—step-by-step procedures . . . . . . . .202

Range sliders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .204

Creating a range slider. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205

Point sliders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207

Creating a point slider. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208

Choosing a look for a slider. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210

Setting a slider’s start and end values . . . . . . . . . . . . . . . . . . . . . . . . . .210

Setting a range. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211

Contents

Naming a range. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211

Adding and deleting ranges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212

Adding custom slider graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213

CHAPTER 9

Action Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Action Manager CourseBuilder Interactions . . . . . . . . . . . . . . . . . . . .215

Action Manager CourseBuilder Interactions—

step-by-step procedures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215

Action Manager pop-up menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217

Adding a segment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218

Adding a condition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219

Creating expressions for a condition . . . . . . . . . . . . . . . . . . . . . . . . . .221

Adding an action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .224

Renaming a segment, condition, or action . . . . . . . . . . . . . . . . . . . . .224

Expanding and collapsing a segment or condition. . . . . . . . . . . . . . . .225

Promoting and demoting a condition . . . . . . . . . . . . . . . . . . . . . . . . .225

Editing a segment, condition, or action. . . . . . . . . . . . . . . . . . . . . . . .225

Cutting, copying, and pasting a segment, condition, or action . . . . . .226

Where to create actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226

Learning-speciﬁc actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .227

Setting interaction properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238

CourseBuilder Interaction properties. . . . . . . . . . . . . . . . . . . . . . . . . .240

Setting Action Manager properties . . . . . . . . . . . . . . . . . . . . . . . . . . .247

Setting the JavaScript property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248

Adding a custom behavior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249

Action Manager CourseBuilder Interactions . . . . . . . . . . . . . . . . . . . .249

The Action Manager template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250

The Action Manager CourseBuilder Interaction tabs. . . . . . . . . . . . . .250

Contents

CHAPTER 10

Scoring and Data Tracking . . . . . . . . . . . . . . . . . . . . 251

Tracking user performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251

Scoring and data tracking—step-by-step procedures . . . . . . . . . . . . . .252

Marking a response right or wrong . . . . . . . . . . . . . . . . . . . . . . . . . . .254

Scoring a response. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255

Displaying feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .256

Locating the CourseBuilder Interaction identiﬁer in

HTML Source code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257

Scoring multiple interactions on the same HTML page . . . . . . . . . . .257

Scoring multiple interactions on different HTML pages . . . . . . . . . . .259

Tracking the time remaining . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264

Tracking the number of tries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265

JavaScript variables for tracking performance . . . . . . . . . . . . . . . . . . .265

Recording performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266

Using Knowledge Track. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267

Using CourseBuilder for Dreamweaver with Lotus Pathware. . . . . . . .269

Connecting with databases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .272

Creating the data source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273

Collecting data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .274

Transferring data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276

Recording data using Cold Fusion. . . . . . . . . . . . . . . . . . . . . . . . . . . .278

Recording data using ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279

Recording data with other transport methods . . . . . . . . . . . . . . . . . . .280

Contents

CHAPTER 11

CourseBuilder Interaction Options . . . . . . . . . . . . . 281

General options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281

Tracking tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287

Choices options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287

Drag-and-drop element options . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289

Pairs options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289

Hot areas options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291

Responses options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292

Triggers options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293

Ranges options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294

Action Manager segments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295

Check Time segment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296

Correctness segment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296

Check Tries segment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296

Multiple-choice segments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297

One-to-one matching segments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297

One-to-one matching (either way) segments . . . . . . . . . . . . . . . . . . . .297

One-to-many matching segments . . . . . . . . . . . . . . . . . . . . . . . . . . . .298

“Build your own” template segments. . . . . . . . . . . . . . . . . . . . . . . . . .298

Two-step procedure segments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299

Explore segments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300

Toggle-switch segment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300

Pushbutton segment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301

Text entry segments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301

Timer segment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301

Timer with warning segment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .302

Range slider segment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .302

Point slider segment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303

Contents

INDEX

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

INTRODUCTION

Getting Started

.............................................................................................................

Macromedia CourseBuilder is an extension application to Dreamweaver for creating Web-based learning content and interactive Web pages. CourseBuilder extends Dreamweaver with a set of easy to use templates and tools that simplify and accelerate the development of online learning content. CourseBuilder for Dreamweaver is the ﬁrst visual authoring tool developed speciﬁcally for creating Web-based learning. Learning interactions created with CourseBuilder are 100% Web-native, enabling cross-platform and cross-browser delivery without plug-ins or applets.

All CourseBuilder Interactions require at least a version 3 browser. Because of the capabilities of the browsers, some interactions—drag-and-drop, explore, timer, and slider—work only with version 4 browsers. (See “CourseBuilder Interaction compatibility with browsers” on page 73.)

What you can do with CourseBuilder for Dreamweaver

CourseBuilder for Dreamweaver helps you quickly design compelling learning interactions with step-by-step assistance. In minutes, you can:

Create true/false, multiple-choice, and all-that-apply quizzes



See “Multiple-choice CourseBuilder Interactions—step-by-step procedures” on page 83

Create drag-and-drop matching exercises



See “Drag-and-drop CourseBuilder Interactions—step-by-step procedures” on page 104

Create explore interactions



See “Explore CourseBuilder Interactions—step-by-step procedures” on page 133

Create text-entry interactions



See “Text entry CourseBuilder Interactions—step-by-step procedures” on page 147

Create buttons, timers, and sliders



See “Button CourseBuilder Interactions— step-by-step procedures” on page 176

See “Timer CourseBuilder Interactions—step-by-step procedures” on page 187

See “Slider CourseBuilder Interactions— step-by-step procedures” on page 202

CourseBuilder for Dreamweaver lets you deﬁne a complete Web-based learning interaction. Choose which type of interaction you want to create from the CourseBuilder Interactions Gallery (see “CourseBuilder Interaction Gallery” on page 71). You can edit the content of a CourseBuilder Interaction, so you don’t have to start from scratch if you want to make changes. You can extend the CourseBuilder Interaction’s built-in functionality by creating your own interaction templates.

CourseBuilder includes both traditional learning interactions (multiple choice, drag and drop, explore, text entry) and learning interactions that function much like desktop controls (buttons, timers, and sliders). You can combine CourseBuilder Interactions—for example, you can include a timer object with a drag-and-drop object that records how long the user takes to complete the dragand-drop interaction. You can use an Action Manager CourseBuilder Interaction to control conditions and actions for any or all other CourseBuilder Interactions on the page.

Introduction

System requirements

The following hardware and software is required to run CourseBuilder for Dreamweaver.

For Microsoft Windows™:

An Intel Pentium® 133-MHz or equivalent processor running Windows 95,



Windows 98, or Windows NT version 4.0 or later.

32 MB of random-access memory (RAM) plus 30 MB of available disk space.



A color monitor capable of 800 x 600 pixel resolution.



A CD-ROM drive.



For the Macintosh®:



A Power Macintosh, running Mac OS 8.1 or later.



32 MB of RAM with virtual memory set to 64 MB, plus 30 MB of available disk space.



A color monitor capable of 800 x 600 pixel resolution.



A CD-ROM drive.

Installing CourseBuilder for Dreamweaver

Follow these steps to install CourseBuilder for Dreamweaver on either a Windows or a Macintosh computer.

To install CourseBuilder for Dreamweaver:

Insert the CourseBuilder for Dreamweaver CD into the computer’s CD-ROM drive.

Choose from the following options:



In Windows, choose Start > Run. Click Browse and choose the Setup.exe ﬁle on the CourseBuilder for Dreamweaver CD. Click OK in the Run dialog box to begin the installation.

On the Macintosh, double-click the CourseBuilder for Dreamweaver



Installer icon.

Follow the on-screen instructions.

If prompted, restart your computer.

Getting Started

Learning CourseBuilder for Dreamweaver

The CourseBuilder for Dreamweaver package contains a variety of resources to help you learn the program quickly and become proﬁcient in creating your own Web page interactions. These resources include online HTML help pages that appear in your browser, a tutorial, and a printed book. In addition, the CourseBuilder for Dreamweaver Web site is updated regularly.

CourseBuilder for Dreamweaver Help

The CourseBuilder for Dreamweaver HTML help pages provide comprehensive information about all CourseBuilder Interaction features. These browsers are strongly recommended for viewing CourseBuilder for Dreamweaver Help:



In Windows: Netscape Navigator 4 and later or Microsoft Internet Explorer 4 and later



On the Macintosh: Netscape Navigator 4 and later

If you use a 3 browser, all the content is still accessible, but some features (such as Search) will not work.

CourseBuilder for Dreamweaver Help makes extensive use of JavaScript. Make sure that JavaScript is enabled in your browser. If you plan to use the search feature, make sure that Java is enabled as well.

CourseBuilder for Dreamweaver Help includes the following components:

The table of contents

Click top-level entries to view subtopics.

The index,

like a traditional printed index, can be used to ﬁnd important terms

and go to related topics.

allows you to ﬁnd any character string in all topic text. The search feature

requires a version 4 browser with Java enabled.

enables you to see all information organized by subject.

Introduction

Note:

After clicking Search, a Java security window may appear, asking for permission to read ﬁles on your hard disk. You must grant this permission for the search to work. The applet does not write anything to your hard disk, nor does it read any ﬁles outside the HTML help pages.

To search for a phrase, simply type the phrase in the text ﬁeld.



To search for ﬁles that contain two keywords (for example,



text

and

entry

separate the search terms with a plus (+) sign.

Context-sensitive help

provides a Help button in each dialog box, or a question

mark icon in inspectors, windows, and palettes, that opens a relevant help topic.

The Help navigation bar

provides buttons you can click to move through topics. The Previous and Next buttons move to the previous or next topic in a section (following the topic order listed in the table of contents).

CourseBuilder for Dreamweaver tutorial

The CourseBuilder for Dreamweaver tutorial is the best place to start if you don’t have very much experience in developing Web-based learning interactions. By working through the tutorial, you’ll learn how to create learning interactions with some of CourseBuilder’s most useful and powerful features. The tutorial is in both CourseBuilder for Dreamweaver Help and the

Dreamweaver

book.

Using CourseBuilder for

CourseBuilder for Dreamweaver user’s guide (printed book)

The

Using CourseBuilder for Dreamweaver

book provides a printed alternative to

CourseBuilder for Dreamweaver Help.

CourseBuilder for Dreamweaver Support Center

The CourseBuilder for Dreamweaver Support Center Web site is updated regularly with the latest information on CourseBuilder for Dreamweaver, plus advice from expert users, information on advanced topics, examples, tips, and updates. Check the Web site often for the latest news on CourseBuilder for Dreamweaver and how to get the most out of the program at http://www.macromedia.com/support/coursebuilder.

Getting Started

New user’s checklist

CourseBuilder for Dreamweaver is a sophisticated tool that’s both powerful and easy to use. You’ll learn the basics quickly. Other things will take you more time to master. This checklist will help you ﬁnd the resources you need to learn everything you need to know about using CourseBuilder for Dreamweaver.



Work through the tutorial.



Read this book.

Using CourseBuilder for Dreamweaver

behind using CourseBuilder Interactions. Don’t overlook the lists of step-bystep procedures. They give you an overview of all the things you can do and tell you where to ﬁnd detailed instructions.

The material in this book is available online throughout CourseBuilder for Dreamweaver Help. Choose Help > Using CourseBuilder for Dreamweaver.

The CourseBuilder for Dreamweaver Help Pages are always the quickest way to ﬁnd the answers to your questions. Use the index to search for the topic you’re interested in.



Visit the CourseBuilder for Dreamweaver Support Center.

It’s a rich source of information about CourseBuilder for Dreamweaver that includes articles by expert users on new features and common problems, regular installments of new Show Me examples, and information about books and Web sites, user groups and events, and tools and services you may need. Click the What’s New button at the top of the Help Pages browser or visit www.macromedia.com/support/courseBuilder.

Join the DWARE list.



The DWARE discussion list is an online forum for discussing CourseBuilder for Dreamweaver. This list is maintained, not by Macromedia, but by CourseBuilder for Dreamweaver developers worldwide. It’s a great way to share your problems with and learn from expert users from around the globe.

To subscribe to the DWARE discussion list, send the following message to LISTSERV@LS.KULEUVEN.AC.BE:

SUBSCRIBE DWA Your_First_Name Your_Last_Name

For example,

SUBSCRIBE DWA Chris Chen

You can remove your name from the list any time by sending a SIGNOFF DWA command to LISTSERV@LISTSERV.CC.KULEUVEN.AC.BE.



Check the CourseBuilder for Dreamweaver TechNotes when you have a problem.

is the ideal place to ﬁnd the concepts

Introduction



If you’re having a problem, chances are that Technical Support has already solved the problem for someone else.Check the CourseBuilder for Dreamweaver Discussion Group.

If you’re having a problem, and you can’t ﬁnd the answer in the TechNotes, check the CourseBuilder Discussion Group. The discussion group is part of the CourseBuilder for Dreamweaver Support Center. Visit www.macromedia.com/ support/coursebuilder.



Join a user group.

Other developers can help you over a lot of hurdles. The best place to meet them is at a user group. For a list of user groups, visit www.macromedia.com/ support/coursebuilder.

Getting Started

What’s new in CourseBuilder for Dreamweaver

CourseBuilder for Dreamweaver is the new name for the product originally called Dreamweaver Attain or Attain Objects for Dreamweaver.

CourseBuilder for Dreamweaver is fully compatible with Dreamweaver 3 allowing you to expand on the ﬂexibility and power of Dreamweaver as you create interactive learning content.

If you’ve worked with Attain Objects for Dreamweaver, most of the changes you see will be interface changes related to the new product name and enhanced integration with Dreamweaver 3.

If you’ve worked with Dreamweaver Attain, you’ll see more signiﬁcant changes and new features: saving custom CourseBuilder Interactions to the Gallery, creating Pathware framesets, and copying support ﬁles have all been streamlined. Behind the scenes, CourseBuilder for Dreamweaver creates and manages code differently, resulting in more compact HTML and eliminating code duplication.

Interface enhancements

CourseBuilder Interaction icons

allow you to easily select an interaction to make

edits to, copy, or cut. See CourseBuilder for Dreamweaver basics.

The new <interaction> tag

Interactions. When you select a CourseBuilder Interaction,

has been added to identify CourseBuilder

appears

in the tag selector. See CourseBuilder for Dreamweaver basics.

A custom Property inspector for CourseBuilder Interactions

contains a list of all the CourseBuilder Interactions on the page and an Edit button, which you can use to reopen the CourseBuilder Interaction dialog box to make changes to a selected interaction. See “Editing CourseBuilder Interactions” on page 158.

Improved functionality

Live updates

let you make changes in the CourseBuilder Interaction dialog box appear immediately in the Document window. Live updating allows you to see information as you enter it and changes as you make them.

The Undo Command

now undoes each single change rather than all of the changes you make to one CourseBuilder Interaction. Often, the change you’re undoing may not be apparent. For example, if you change the answer of a multiple-choice question from true to false, and then undo it, you won’t see any change in the Document window.

Copying support files

is now prompted. When you add a CourseBuilder Interaction from the Object palette, you’ll be prompted to copy the support ﬁles to the folder that contains your document.

Support ﬁles

refers to the scripts and images CourseBuilder for Dreamweaver adds to a page as it builds the CourseBuilder Interaction. See “Copying support ﬁles” on page 68.

Introduction

Customizing CourseBuilder Interactions

The Insert in Layer option

places a CourseBuilder Interaction in its own layer, thereby simplifying Netscape layer issues and allowing absolute placement of the interaction on the page. Inserting the interaction into its own layer also facilitates the use of various actions, such as Show-Hide layers. This feature is available only in version 4 browser interactions. See “Inserting a CourseBuilder Interaction into a layer” on page 166.

Customizing the Actions pop-up menu

is now possible. You can edit the order of the items listed on the Actions pop-up menu to ﬁt the way you work. See “Action Manager pop-up menu” on page 217.

Adding custom behaviors is now easier because the list of behaviors in the Action

Manager is now dynamically generated. Copy custom behaviors to the folder Dreamweaver\Conﬁguration\Behaviors\Actions, and they will be visible both at the bottom of the Action Manager pop-up menu and in the Behavior window the next time you launch CourseBuilder for Dreamweaver. For information about custom behaviors, see “Adding a custom behavior” on page 249.

Action Manager changes

Segment, Condition, and Action Editors are now dialog boxes instead of tabs. The

Segment, Condition, or Action Editor appears when you add a segment, condition, or action or when you click the Edit button to edit one, thereby eliminating the confusion caused by switching between tabs to edit information.

Edit and Rename buttons are now available in the Action Manager tab:

 The Edit button reopens the dialog box for a selected segment, condition, or

action, making it easier for you to make edits. See “Editing a segment, condition, or action” on page 225.

 The Rename button allows you to rename elements in the Action Manager. See

“Renaming a segment, condition, or action” on page 224.

Help buttons now appear on every tab in the CourseBuilder Interaction

dialog box.

Getting Started

Menu changes

CourseBuilder Interaction commands can now be found on one of two menus— the Insert menu and the Modify menu.

The Insert CourseBuilder Interaction command in the Insert menu displays the

CourseBuilder Interaction dialog box, from which you can insert a CourseBuilder Interaction into your document.

New Modify commands The CourseBuilder Interaction commands in the Modify

menu display a submenu of commands to speciﬁcally use with CourseBuilder for Dreamweaver:

 The Edit Interaction command brings up the CourseBuilder Interaction dialog

box from which you can edit a CourseBuilder Interaction.

 The Add CourseBuilder Interaction to Gallery command saves custom

CourseBuilder Interactions for easy, reusable access in the CourseBuilder Interaction Gallery. See “Adding a CourseBuilder Interaction template to the Gallery” on page 169.

 The Create Tracking Frameset and Create Pathware Frameset commands allow

you to create the frameset and results ﬁles needed for tracking student performance either in Lotus Pathware or in another computer-managed instruction (CMI) tracking system. See “Using Knowledge Track” on page 267.

 The Copy Support Files command copies the support ﬁles (scripts and images)

to the same folder in which CourseBuilder for Dreamweaver document has been saved. Without the support ﬁles, a CourseBuilder Interaction may not work or may not be able to ﬁnd the images it needs.

 The Convert From Previous Version command converts pages made with the

previous version of Dreamweaver Attain so that they can be edited in CourseBuilder for Dreamweaver. See “Converting from previous versions” on page 75.

Improved integration

The Insert Authorware button lets you place a Web-packaged Authorware piece on

a Web page. See “Using the Insert Authorware object” on page 168.

Introduction20

CHAPTER 1

CourseBuilder for Dreamweaver Tutorial

.............................................................................................................

Tutorial overview

This tutorial shows you how to use CourseBuilder for Dreamweaver to create three types of learning interactions.

As you develop a web-based sales training module for sales representatives of Discovertoys.com, a ﬁctitious company, you’ll create an explore interaction (where a user clicks areas on a page to gain more information about an object), a multiple-choice interaction (where a user selects a correct response from a set of choices), and a drag-and-drop interaction (where a user demonstrates knowledge by dragging one object on the screen to another object on the screen).

You need Netscape Navigator 4 or Microsoft Internet Explorer 4—or a later version of either browser—to view the pages you create in this tutorial.

Along the way you’ll learn how to perform the following tasks:

 Copy support ﬁles to a local site folder

 Insert CourseBuilder Interactions in a document

 Use the CourseBuilder Interaction dialog box to select an interaction template

 Customize CourseBuilder Interaction templates

 Use the Action Manager to attach actions to an interaction

 Edit CourseBuilder Interactions

 Test an interaction

Preview the completed Discover Toys interaction

Take a look at the completed CourseBuilder for Dreamweaver ﬁles to get an idea of what you’re working toward. In the folder in which you installed CourseBuilder for Dreamweaver, open the folder named cb_tutorial. Then locate the folder named discover_comp, and double-click the ﬁle named discover_nav.htm.

The discover_nav page opens in your browser, click the buttons on this page to navigate to other pages of the site.

Try all of the possible combinations of correct and incorrect responses on the quiz pages to see how the interactions work. Click Refresh or Reload in the browser to restart an interaction.

Close the browser when you’re ﬁnished looking at the ﬁles.

How the tutorial files are arranged

The cb_tutorial folder contains both the completed and partially completed HTML ﬁles used in this tutorial.

The completed ﬁles are in the discover_comp folder. Images and other associated ﬁles for the completed ﬁles are in folders within the discover_comp folder. The partially completed ﬁles—which you’ll be working on—are in the cb_discover folder. (The complete path to the discover_comp folder will vary, depending on where you have CourseBuilder for Dreamweaver installed.)

Each ﬁle has a meaningful name—for example, the HTML ﬁle for the completed module’s navigation page is named discover_nav.htm.The partially completed ﬁles have names similar to their counterparts in the complete site, except they begin with cb_; the partially completed version of discover_nav.htm, for example, is called cb_nav.htm.

Set up site structure for the tutorial

Before you start the tutorial, create a new folder into which you’ll transfer the CourseBuilder for Dreamweaver tutorial ﬁles.

If you completed the Dreamweaver tutorial and already created a Sites folder, skip step 1.

1 At the root level of your local disk, create a new folder and name it Sites—for

example, C:\Sites (Windows) or Hard Drive:Sites (Macintosh).

2 From the Dreamweaver\CourseBuilder\Tutorial folder, copy the entire

cb_tutorial folder to the Sites folder.

Chapter 122

Define a local site

Set up a local site to develop a ﬁle structure for your site. A local site contains all the ﬁles used within a speciﬁed site, such as HTML ﬁles, images, scripts, and other asset ﬁles. For this tutorial, you’ll specify the cb_tutorial folder as the local site folder.

1 Launch CourseBuilder for Dreamweaver.

A blank document opens.

2 Choose Site > New Site.

3 In the Site Deﬁnition dialog box, make sure Local Info is selected in the

Category list.

4 In the Site Name ﬁeld, type my_course.

5 Click the folder icon to the right of the Local Root Folder ﬁeld, navigate to

the Sites\cb_tutorial folder, and then click Select (Windows) or Choose (Macintosh).

The Local Root Folder ﬁeld updates to display the path to the local site.

Note: The complete path to the cb_tutorial folder may vary, depending on where you

have created your Sites folder.

Click OK.

CourseBuilder for Dreamweaver Tutorial 23

Click Create when asked if you’d like to create a cache ﬁle for the site.

Caching the ﬁles in the cb_tutorial folder creates a record of existing ﬁles so Dreamweaver can quickly update links when you move, rename, or delete a ﬁle.

The Site window now displays a list of the folders and ﬁles in the local site my_course. The list also acts as a ﬁle manager, allowing you to copy, paste, delete, move, and open ﬁles just as you would in the ﬁle ﬁnder or explorer on your own computer.

8 Leave the Site window open.

9 Click the Document window to make it active.

Create an explore CourseBuilder Interaction

CourseBuilder Interactions cannot be added to an unsaved document. You can either start with a new document, then save it, or you can open an existing document.

In this tutorial, you’ll add CourseBuilder Interactions to existing partially completed pages which contain the same elements—a background image and a training department banner.

Now, you’ll create an explore interaction. In this interaction users click pictures of the toy products to learn about them.

Open the ﬁle to which you’ll add an explore CourseBuilder Interaction.

1 Choose File > Open.

2 In the dialog box that appears, navigate to Sites/cb_tutorial/cb_discover, then

select cb_explore.htm, and click Select (Windows) or Open (Macintosh) to open the ﬁle.

Chapter 124

Copy support files

CourseBuilder for Dreamweaver requires support ﬁles that contain images and scripts; the support ﬁles enable CourseBuilder Interactions to function.

You’ll copy support ﬁles to the cb_discover folder.

1 Choose Modify > CourseBuilder > Copy Support Files.

A message appears advising where the support ﬁles will be copied.

2 Click OK to create the necessary folders and to copy the ﬁles.

The ﬁles are copied to the cb_discover folder.

Insert a CourseBuilder Interaction

1 If the Object palette isn’t already open, choose Window > Objects to open it.

2 In the Document window, click in the middle of the document to place the

insertion point after existing page elements.

3 In the Object palette’s Common panel, click the CourseBuilder Interaction

icon to open the CourseBuilder Interaction dialog box.

CourseBuilder Interaction icon

CourseBuilder for Dreamweaver Tutorial 25

Select the type of interaction

1 In the CourseBuilder Interaction dialog box, under Target, 4.0+ Browsers

should already be selected. If it is not, select it.

2 Select Explore in the Category list.

The icons in the Gallery represent the explore CourseBuilder Interactions that function in version 4 and later browsers.

3 Click the icon for the Explore_Areas template.

Define the hot areas

You don’t need to change the default settings that are in the General tab, so you’ll begin by specifying the hot area elements of the explore interaction—graphic images of the toys the users will click.

Chapter 126

Add graphics for the hot areas

1 Start by clicking the Hot Areas tab.

In the Hot Areas list, Hot Area1 is already selected.

2 In the Image ﬁeld, click Browse. Then, in the Select Appearance dialog box,

navigate to the cb_graphics folder and select toy_racer.gif. Then click Select (Windows) or Choose (Macintosh) to display the image.

Add three more hot area graphics

1 In the Hot Areas list, select HotArea2.

2 In the Image ﬁeld, click Browse. Then, in the Select Appearance dialog box,

navigate to the cb_graphics folder and select toy_coldfusion.gif. Then click Select (Windows) or Choose (Macintosh) to display the image.

3 In the Hot Areas list, select HotArea3.

4 In the Image ﬁeld, click Browse. Then, in the Select Appearance dialog box,

navigate to the cb_graphics folder and select toy_satellite.gif. Then click Select (Windows) or Choose (Macintosh) to display the image.

5 In the Hot Areas list, select HotArea4.

6 In the Image ﬁeld, click Browse. Then in the Select Appearance dialog box,

navigate to the cb_graphics folder and select toy_waverider.gif. Then click Select (Windows) or Choose (Macintosh) to display the image.

7 Click OK to close the CourseBuilder Interaction dialog box.

8 Save your ﬁle.

CourseBuilder for Dreamweaver Tutorial 27

Arrange the hot areas in the document

Next, you’ll remove the text instructions on the page, and move the hot area layers to make room for a new layer that you’ll use to provide feedback to users.

1 In the Document window, select the text “Click on a hot area” at the top of the

screen, then press Backspace (Windows) or Delete (Macintosh) to delete it.

2 In the Document window, click the border of a hot area layer to select the layer.

Handles appear around a selected layer:

Layer tab

Layer handle

3 Click the layer tab, on the upper left corner, then drag the layer where you want

to position it.

Move each hot area, as necessary, to position the layers like this:

4 Save your changes.

Chapter 128

Add a layer for user feedback

Next, you’ll create a layer where both instructions to the user and the product information will appear in the page.

1 Click the Layer icon on the Object palette.

Image icon

Layer icon

2 Move the pointer to the Document window, then drag to draw a layer in the

right side of the document.

3 Click the border of the layer to select it. Then, in the Property inspector’s

LayerID ﬁeld, replace the default text “Layer1” by typing ProductInfo.

4 In the Document window, click in the middle of the ProductInfo layer to set

the insertion point in the layer.

5 In the Object palette, click the Image icon to insert an image in the layer.

The Select Image Source dialog box appears.

CourseBuilder for Dreamweaver Tutorial 29

In the dialog box, navigate to the cb_graphics folder, select text_any.jpg, and click Select (Windows) or Choose (Macintosh) to insert the image in the layer.

The user instructions appear in the layer in the Document window.

Editing a CourseBuilder Interaction

The elements are set up; however, you still need to deﬁne what happens when a user clicks one of the hot areas. To ensure that your interactions function correctly, always make changes to the elements of a CourseBuilder Interaction in the CourseBuilder Interaction dialog box. Reopen the CourseBuilder Interaction dialog box.

1 In the Document window, do one of the following to select the CourseBuilder

Interaction:

 Click the CourseBuilder Interaction icon in the Document window.

 Click any of the hot area layers, then click <interaction> in the tag selector.

2 In the Property inspector, click Edit to open the CourseBuilder Interaction

dialog box.

Chapter 130

Create user feedback

When users clicks a hot area, they should learn about the product they selected. You’ll set up a swap image to switch the image displayed in the ProductInfo layer with an image that contains information about the product that was clicked.

Use the Action Manager to deﬁne what happens when a speciﬁc hot area is clicked. You’ll remove the default Popup Message action feedback and add a Swap Image action for each hot area.

View the Action Manager tab

Start by clicking the Action Manager tab.

The Action Manager tab displays default segments and conditions based on the type of interaction selected. Segments preceded by a plus sign (+) are collapsed. To view the conditions and actions of a selected collapsed segment, click Expand in the Action Manager tab.

Action ﬂows from the top of the list down until a deﬁned condition is met—for example, if a user clicks Hot Area 1. When a deﬁned condition is met, action ﬂows to the next item within that segment—for example, if Hot Area 1 is clicked, a Popup Message would be displayed.

Although segments are automatically added in the Action Manager to check the time limit and tries limit, the actions for these segments aren’t triggered unless you select these options in the General tab.

CourseBuilder for Dreamweaver Tutorial 31

Add a swap image action for racer product information

1 In the Action Manager list under “if Hot Area1 Selected,” select Popup

Message, then click Cut.

2 Select “if Hot Area1 Selected,” then in the Actions pop-up menu choose Swap

Image, and click Add.

The Swap Image dialog box appears:

In the Swap Image dialog box, “unnamed <img>” is selected. This is the image you inserted in the ProductInfo layer. You’ll swap this image for an image that describes the image in Hot Area 1, the racer.

3 In the “Set Source to” ﬁeld, click Browse.

4 In the Select Image Source dialog box that appears, select text_racer.jpg, then

click Select (Windows) or Choose (Macintosh) to display the image.

5 Click OK to close the dialog box.

Chapter 132

Add a swap image action for Cold Fusion product information

Replace the user instruction text with text describing the Cold Fusion Kit.

1 In the Action Manager list under “if Hot Area2 Selected,” select Popup

Message, then click Cut.

2 Select “if Hot Area2 Selected,” then in the Actions pop-up menu choose Swap

Image, and click Add.

The Swap Image dialog box appears.

In the Swap Image dialog box’s Images list, “image ‘Image1’ in layer ‘ProductInfo’” is already selected, and the image is set to display text_racer.jpg. You’ll set the image to display the correct text for Hot Area 2, the Cold Fusion product.

3 In the “Set Source to” ﬁeld, click Browse.

4 In the Select Image Source dialog box, select text_coldfusion.jpg, then click

Select (Windows) or Choose (Macintosh) to display the image.

5 Click OK to close the dialog box.

CourseBuilder for Dreamweaver Tutorial 33

Add a swap image action for satellite product information

Replace the user instruction text with text describing the satellite.

1 In the Action Manager list under “if Hot Area3 Selected,” select Popup

Message, then click Cut.

2 Select “if Hot Area3 Selected,” then in the Actions pop-up menu choose Swap

Image, and click Add.

3 In the Swap Image dialog box’s Images list, “image ‘Image1’ in layer

‘ProductInfo’” is already selected. Click Browse next to the “Set Source to” ﬁeld to select the replacement image.

4 In the Select Image Source dialog box, select text_satellite.jpg, then click Select

(Windows) or Choose (Macintosh) to display the image.

5 Click OK to close the dialog box.

Add a swap image action for wave-rider product information

Now, you’ll replace the user instruction text with text describing the wave-rider helmet.

1 In the Action Manager list under “if Hot Area4 Selected,” select Popup

Message, then click Cut.

2 Select “if Hot Area4 Selected,” then in the Actions pop-up menu choose Swap

Image, and click Add.

3 In the Swap Image dialog box’s Images list, “image ‘Image1’ in layer

‘ProductInfo’” is already selected. Click Browse next to the “Set Source to” ﬁeld to select the replacement image.

4 In the Select Image Source dialog box, select text_waverider.jpg, then click

Select (Windows) or Choose (Macintosh) to display the image.

5 Click OK to close the dialog box.

6 Click OK to close the CourseBuilder Interaction dialog box.

Chapter 134

Create a link to the next page

Link this page to the next interaction page, the drag-and-drop quiz.

1 In the Object palette’s Common panel, click the Layer icon, then move the

pointer to the page, and drag to draw a layer in the space beneath the ProductInfo layer.

2 Click the layer to select it, then move the layer if you need to position it.

Use the layer tab on the upper left corner of the layer to position the layer:

3 Click in the layer to place the insertion point in the layer. In the Object

palette, click the Image icon to insert an image in the layer.

4 In the Select Image Source dialog box, open the cb_graphics folder (if it’s not

already open), select Arrow_Sharp_Right.gif, and click Select (Windows) or Choose (Macintosh).

An arrow appears in the layer.

5 In the Property inspector, click the folder icon next to the Link ﬁeld. Then, in

the Select File dialog box, navigate to the cb_discover folder, select cb_drag_drop.htm, and click Select (Windows) or Choose (Macintosh) to select the ﬁle to open when the arrow is clicked.

6 Click the border of the layer to select it, then use one of the handles to resize

the layer to the size of the graphic.

7 Save your document.

CourseBuilder for Dreamweaver Tutorial 35

Test the explore interaction

Test the page to see how the interaction works.

1 Choose File > Preview in Browser, and choose the browser you want to use.

The browser launches and displays the page.

2 Click each of the products and make sure the correct information appears.

3 Click the arrow to see if it goes to the “Know your target audience” page.

Create a drag-and-drop interaction

Now you’ll create a drag-and-drop matching quiz. Users will test their knowledge of the products by dragging a toy to the target audience for which the toy is designed.