DekGenius.com
Previous Section Next Section

23.2 CourseBuilder Interactions

CourseBuilder interactions allow you to easily build a project from basic elements. After installing CourseBuilder you can access the full CourseBuilder documentation under Help figs/U2192.gif Using CourseBuilder. The elaborate help files documents each interaction type. Help buttons also appear in each tab of the CourseBuilder Interaction dialog box (see Figure 23-2). If you installed CourseBuilder in the Dreamweaver4/CourseBuilder folder, a sample CourseBuilder project is at Dreamweaver4/CourseBuilder/Tutorial/cb_tutorial/discover_comp/discover_nav.htm. More online information can be found at the resources listed under Help figs/U2192.gif Welcome to CourseBuilder.

If you are developing highly interactive courseware, you should consider using other Macromedia products, such as Flash, Director, or Authorware, in combination with Dreamweaver. Authorware is designed for creating computer-based training (CBT) and is bundled with Dreamweaver in the eLearning Studio (see http://www.macromedia.com/software/elearningstudio/). For an overview of eLearning solutions, see the eLearning product matrix at http://www.macromedia.com/resources/elearning/matrix.pdf.

23.2.1 Inserting and Editing Interactions

To insert a CourseBuilder interaction into an HTML document use Insert figs/U2192.gif CourseBuilder Interaction or click the Insert CourseBuilder Interaction icon in the Objects panel's Learning category, shown in Figure 23-1.

Figure 23-1. The Learning category of the Objects panel
figs/dwn_2301.gif

Inserting an interaction opens the CourseBuilder Interaction dialog box, shown in Figure 23-2. Click the Help button in the CourseBuilder Interaction dialog box to open context-sensitive help for the currently selected interaction.

CourseBuilder requires that support files be installed in the folder in which the HTML document is saved. To avoid redundant copies of the support files, keep all your HTML pages that use CourseBuilder in the same folder. If necessary, Dreamweaver prompts you to copy support files to the needed location automatically. (You can copy the support files manually using Modify figs/U2192.gif CourseBuilder figs/U2192.gif Copy Support Files.) These support files must be uploaded to your web server as described in "What to put on the web server" under Help figs/U2192.gif Using CourseBuilder.

Select an interaction type from the Category list and then choose an interaction in the dialog box's Gallery tab. By default, the CourseBuilder Interaction dialog box shows interactions available for 4.0+ browsers. Targeting 3.0 browsers limits you to Multiple Choice, Text Entry, and Action Manager interactions. Because CourseBuilder is extensible, you can add your own interactions to the built-in ones using Modify figs/U2192.gif CourseBuilder figs/U2192.gif Add Interaction to Gallery.

Some features of the Drag and Drop, Slider, and Explorer interactions may not work in Netscape 6. For more information, see "CourseBuilder interactive compatibility with browsers" under Help figs/U2192.gif Using CourseBuilder.

Click OK to insert an interaction, which adds an <interaction> tag to your HTML document. You can select the <interaction> tag using the Tag Selector. You can open the Property inspector by double-clicking the CourseBuilder placeholder icon that represents each interaction in the Document window (the placeholder looks like the icon shown in Figure 23-1). To edit the selected interaction, use Modify figs/U2192.gif CourseBuilder figs/U2192.gif Edit Interaction, Ctrl+Alt+E (Windows), Cmd+Opt+E (Macintosh), or the Edit button in the Property inspector.

Interactions automatically add HTML <form> tags to your document. There can be more than one interaction per page, each with its own <form> tag. An HTML page can contain both CourseBuilder interactions and standard HTML elements. As shown in the CourseBuilder tutorial, you can also augment an interaction with HTML elements from the Objects panel. For example, you might add a button with a link to the next page of a quiz. However, don't add more <form> tags to existing interactions and don't nest <interaction> tags.

Use the "Insert in Layer (4.0+ browsers only)" checkbox in the Property inspector to place the CourseBuilder interaction within a layer, which allows you to position it on the page. If you insert an interaction within a layer, avoid nesting layers within the interaction, as NN4 doesn't handle nested layers very well.

Let's take a brief look at each type of built-in interaction before covering the Action Manager interaction, which ties them all together. At the end of the chapter we'll describe how to configure interactions.

23.2.2 Multiple Choice

Multiple Choice interactions, shown in Figure 23-2, create input buttons that are more attractive than standard radio buttons or checkboxes. Select a Multiple Choice interaction from the Gallery tab. Use the General, Choices, and Action Mgr tabs to configure the interaction, and click the OK button to insert it. See Section 23.3 later in this chapter for details on configuring Multiple Choice interactions

Figure 23-2. Multiple Choice interactions in the CourseBuilder Interaction dialog box's Gallery tab
figs/dwn_2302.gif

You can use a Multiple Choice interaction to create a menu as demonstrated in the CourseBuilder tutorial under Help figs/U2192.gif Using CourseBuilder. The tutorial also shows how to create test questions using Multiple Choice interactions. You can't test interactions in Dreamweaver. Preview your pages in a browser using File figs/U2192.gif Preview in Browser (F12).

23.2.3 Drag and Drop

Drag and Drop interactions, shown in Figure 23-3, require the site visitor to drag an object to a target location. For example, you could use it to let students sort animals into herbivore and carnivore categories. Select a Drag and Drop interaction from the Gallery tab. Use the General, Elements, Pairs, and Action Mgr tabs to configure the interaction, and click the OK button to insert it. (The Elements tab configures the draggable objects and their targets. The Pairs tab specifies correct and incorrect pairings among drag and drop objects.)

Figure 23-3. Drag and Drop interactions
figs/dwn_2303.gif

The CourseBuilder tutorial under Help figs/U2192.gif Using CourseBuilder demonstrates how to use a Drag and Drop interaction.

23.2.4 Explore

Explore interactions, shown in Figure 23-4, allow visitors to select among multiple hotspots in an image to access more information about an item. Select an Explore interaction from the Gallery tab. Use the General, Hot Areas, and Action Mgr tabs to configure the interaction, and click the OK button to insert it.

Figure 23-4. Explore interactions
figs/dwn_2304.gif

The CourseBuilder tutorial under Help figs/U2192.gif Using CourseBuilder demonstrates how to use an Explore interaction.

23.2.5 Button

Button interactions, shown in Figure 23-5, allow visitors to set a button's state. Choose between the two basic button styles on the Gallery tab, and then configure the button's appearance on the General tab. Use the Action Mgr tab to configure the interaction, and click the OK button to insert it.

Figure 23-5. Button interactions
figs/dwn_2305.gif

The documentation under Help figs/U2192.gif Using CourseBuilder includes extensive details on configuring Button interactions.

23.2.6 Text Entry

Text Entry interactions, shown in Figure 23-6, implement single- or multiline entry fields. You can evaluate the accuracy of text responses by searching the response for chosen words or phrases. You can also provide a list of correct and incorrect responses to a question. Select one of the two Text Entry interactions from the Gallery tab. Use the General, Responses, and Action Mgr tabs to configure the interaction, and click the OK button to insert it.

Figure 23-6. Text Entry interactions
figs/dwn_2306.gif

23.2.7 Timer

Timer interactions, shown in Figure 23-7, can limit the time allowed for a user action and provide a timer that counts up or down. You can choose between single- and multiple-target timers. Choose between the two basic Timer styles on the Gallery tab, and configure the timer's appearance with the General tab. Use the Triggers and Action Mgr tabs to configure the interaction, and click the OK button to insert it.

Figure 23-7. Timer interactions
figs/dwn_2307.gif

The documentation under Help figs/U2192.gif Using CourseBuilder includes extensive details on using and configuring Timer interactions.

23.2.8 Slider

Slider interactions, shown in Figure 23-8, allow users to provide input using a slider bar. For example, slider bars can be used to rate how users feel about a specific test question or to set the volume of background music. You can choose between single- and multiple-selection range sliders. Choose between the two basic Slider styles on the Gallery tab, and configure the slider's appearance on the General tab. Use the Ranges and Action Mgr tabs to configure the interaction, and click the OK button to insert it.

Figure 23-8. Slider interactions
figs/dwn_2308.gif

The documentation under Help figs/U2192.gif Using CourseBuilder includes extensive details on using and configuring Slider interactions.

23.2.9 Action Manager Template

An Action Manager object can manage other CourseBuilder interactions on a page. It can collect the results of other interactions, such as multiple-choice questions, and submit those results to a computer-managed instruction (CMI) system. Don't confuse an Action Manager object, which defines actions regarding other CourseBuilder interactions on the page, with the Action Mgr tab, which defines the conditions and actions for each individual interaction

Figure 23-9 shows the General tab of the Action Manager interaction (a.k.a. the Action Manager template). The General tab can be used, for example, to tell CourseBuilder to judge the other interactions on the page when the user clicks a button (such as a Submit button). The documentation under Help figs/U2192.gif Using CourseBuilder includes suggestions and guidelines for using Action Manager interactions, including using multiple Action Manager objects on a single page. Use the Action Mgr tab to specify how an Action Manager object will judge other interactions, as described in Section 23.3.1 later in this chapter.

Figure 23-9. General tab of the default Action Manager interaction
figs/dwn_2309.gif
    Previous Section Next Section