Including CourseBuilder Interactions and Controls in Dreamweaver Projects

In this chapter

• Exploring CourseBuilder
  • Copying Support Files
  • Adding the Template Fix
  • Examining Browser Compatibility
• Inserting a Multiple Choice Interaction
  • Using the General Tab
  • Using the Choices Tab
  • Using the Action Manager Tab
  • Editing an Interaction
• Modifying the Feedback in the Action Manager
• Inserting a Drag and Drop Interaction
  • Using the General Tab
  • Using the Elements Tab
  • Using the Pairs Tab
  • Using the Action Manager Tab
• Inserting an Explore Interaction
  • Using the General Tab
  • Using the Hot Areas Tab
  • Using the Action Manager Tab
• Inserting a Text Entry Interaction
  • Using the General Tab
  • Using the Responses Tab
  • Using the Action Manager Tab
• Inserting a Button
• Inserting a Timer
  • Using the General Tab
  • Using the Triggers Tab
  • Using the Action Manager Tab
• Inserting a Slider
• Using the General Tab
  • Using the Ranges Tab
  • Using the Action Manager Tab

The CourseBuilder extension for Dreamweaver is a "must have" for learning application developers. This extension began as a software package, called Attain Objects for Dreamweaver, that was available for purchase. Now Macromedia generously gives this extension away on the Macromedia Exchange. CourseBuilder enables you to quickly and easily add learning interactions to your Web pages. CourseBuilder creates multiple choice, text entry, drag and drop, and other types of assessment interactions using a wizard interface. This extension enables you to create interactions that would take hours or days to do by hand in Dreamweaver alone with HTML and JavaScript.

Another advantage of using CourseBuilder is it enables your team to have consistent code. Reusing proven CourseBuilder interactions is better than having individual team members create interactions by using many different methods. Having consistent code makes it easier to troubleshoot problems you might run into when implementing your learning application.

This chapter covers the basics of inserting and editing CourseBuilder interactions and controls. Chapter 11, "Conquering CourseBuilder's Action Manager," goes into more depth on customizing interactions to work in unique ways. Chapter 12, "Scoring an Assessment and Hiding the Answers," explores gathering scores from CourseBuilder interactions and scoring a quiz.

In this chapter, you will understand the following:

• How to insert and edit CourseBuilder interactions and controls

• How to configure the General tab of a CourseBuilder interaction

• How to configure Multiple Choice, Drag and Drop, Explore, and Text Entry interactions

• How to configure Button, Timer, and Slider controls

Exploring CourseBuilder

Installing the CourseBuilder extension in Dreamweaver adds the CourseBuilder object to the Learning tab of the Insert bar. If you didn't install CourseBuilder in Chapter 2, "Assembling the Team and Collecting the Tools," you'll want to return to the Manage Extensions section of that chapter and install CourseBuilder now.

After you install the CourseBuilder extension, you're ready to create new Web pages and insert the interactions. Installing the CourseBuilder extension adds three major commands to Dreamweaver:

• A new Insert bar category—The Learning tab enables insertion of a CourseBuilder object into a Web page. You can use the CourseBuilder object from the Learning tab of the Insert bar or select the CourseBuilder Interaction command from the Insert menu.

• The CourseBuilder submenu—Added to Dreamweaver's Modify menu, shown in Figure 10.1, this submenu contains commands to control CourseBuilder interactions.

Figure 10.1 The CourseBuilder submenu in the Modify menu gives you access to CourseBuilder commands.

• The Using CourseBuilder command—Available under the Help menu, this command gives you access to the extensive CourseBuilder help that's available.

CourseBuilder's strength is the JavaScript functions that control interactions.

When you insert a CourseBuilder object into a Web page, you are presented with the CourseBuilder Gallery, shown in Figure 10.2. In the upper-left corner, you can select interactions that will work in 3.0 or 4.0+ browser versions. If you select 3.0 browsers, you can add only simple Multiple Choice and Text Entry interactions. For the examples in this chapter, select the 4.0+ Browsers radio button.

Figure 10.2 The CourseBuilder Gallery displays CourseBuilder interactions that work in 3.0 or 4.0+ browsers.

With the 4.0+ Browsers option selected, the CourseBuilder Gallery has eight categories: Multiple Choice, Drag and Drop, Explore, Button, Text Entry, Timer, Slider, and Action Manager. When you select one of the categories listed on the left side of the Gallery, the interactions available in that category appear on the right, represented by icons. When you select an interaction, the tabs to set up the interaction appear at the bottom beside the Gallery tab. The tabs vary according to the function of the interaction you select.

CourseBuilder objects are divided into two groups: interactions and controls. In the interactions group are the Multiple Choice, Drag and Drop, Explore, Text Entry, and Action Manager categories. These objects are useful in online learning applications as assessment questions and knowledge checks.

In the controls group are the Button, Timer, and Slider categories. These objects are useful as navigation controls, switches, and time-monitoring devices. This type of CourseBuilder interaction is more like a "gadget" that you add to your Web page.

Copying Support Files

Before you insert a CourseBuilder interaction, you must save the Web page so that CourseBuilder can insert the correct hyperlinks. The first time you insert a CourseBuilder interaction into a Web page in your site, CourseBuilder prompts you to copy support files. The Copy Support Files dialog box is shown in Figure 10.3. The support files consist of a scripts directory, containing the external JavaScript files that make the CourseBuilder interactions function, and a directory of images, including placeholder graphics and images used for buttons and timer.s

Figure 10.3 The Copy Support Files dialog box prompts you to copy the external JavaScript files and images necessary for CourseBuilder interactions to work.

By default, CourseBuilder inserts the support file directories into the same directory where the current Web page is saved. That means if you add CourseBuilder interactions to multiple directories, the support file directories are added to each directory. Because you already have a scripts and an images directory in the root of your Web site, it's more efficient to use those same directories instead of creating new ones.

In an online learning application project, you can modify the CourseBuilder preferences file, Preferences.txt, so that CourseBuilder looks for the support file directories in a single, standard location. The Preferences.txt file is stored in the Dreamweaver\CourseBuilder\Config directory.

To edit Preferences.txt, you can open the file in a text editor or in Dreamweaver, but it's best to use Dreamweaver, shown in Figure 10.4, because the formatting is easier to read. Dreamweaver uses this file to set various CourseBuilder preferences, and you might want to explore this file further after you are more experienced with CourseBuilder. For now, simply modify the first two preference variables in the file: PREF_scriptsUrl and PREF_imagesUrl.

Figure 10.4 Modify CourseBuilder preferences by editing the Preferences.txt file in Dreamweaver.

The online learning application site you are creating is designed to contain all the content Web pages in lesson directories under the root directory. The PREF_scriptsUrl and the PREF_imagesURL variables are relative to the location where you save the Web pages containing the interactions. To link to the images directory and the scripts directory, the URLs will be ../scripts and ../images. The ../ means to go up one directory level and points to the site root when used in one of the lesson directories. Change PREF_scriptsUrl to ../scripts and change PREF_imagesURL to ../images. Then CourseBuilder creates a new directory within your existing images directory to store all the images it adds. Save your changes to the Preferences.txt file and restart Dreamweaver.

Every time you insert a CourseBuilder interaction, CourseBuilder checks to see whether the support file directories exist. Instead of waiting for CourseBuilder to prompt you, however, you'll create these directories now by using the Copy Support Files command:

1. Create a new Web page, save the file, and name it. If you changed your Preferences.txt, you'll need to place your Web page in a directory beneath the site root (maybe a directory called quiz). Now that you have established the location of the current Web page, CourseBuilder will know where to place the support files relative to this file.

2. Create the support file directories with the Copy Support Files command (Modify, CourseBuilder, Copy Support Files).

3. The Copy Support Files dialog box appears, as shown in Figure 10.5. The URL should point to directories in the site root if you've modified the Preferences.txt file correctly. Click the OK button to copy the scripts and images to CourseBuilder. You can leave the Overwrite Existing Images check box unchecked.

Figure 10.5 Check that the Copy Support Files dialog box lists the correct URLs for the common scripts and images directories.

4. Examine the scripts and images directories in the Site panel or Site window. The new files should be present.

Now you have added single copies of the files necessary for CourseBuilder to work. You should not have to add these files again while developing this site, as long as any files containing a CourseBuilder interaction are saved in the subdirectories (lesson1, lesson2, quiz, and so on) off the site root.

Adding the Template Fix

When you insert a CourseBuilder interaction into a Web page, CourseBuilder adds a JavaScript function call to the <body> tag. The JavaScript code calls the MM_initInteractions() function, which sets up the CourseBuilder interactions on the page. The problem appears when you add a CourseBuilder interaction to a Web page based on a template; you cannot edit the <body> tag in these pages. CourseBuilder solves this problem by installing the Add Template Fix command.

You need to create a template that includes the template fix code for use with CourseBuilder interactions. Open one of your templates, select the Add Template Fix command (Modify, CourseBuilder, Add Template Fix), and then save the template with another name. The Add Template Fix dialog box appears, as shown in Figure 10.6.

Figure 10.6 Add necessary JavaScript code to the template by using the Add Template Fix command.

Click the Add button to add the initialization code to both the current page and the parent template file. From now on, all pages using this template will have the initialization code in the <body> tag. The code looks like this:

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"
marginwidth="0" marginheight="0" onLoad="MM_initInteractions>

Examining Browser Compatibility

Macromedia engineers have invested their talents in making CourseBuilder functionality as cross-browser compatible as possible. You should be aware of functionality issues of the interactions you insert into your learning application. Table 10.1 lists compatibility issues with the two major browsers, Netscape Navigator and Microsoft Internet Explorer.

Table 10.1 CourseBuilder Interaction Compatibility with Different Browsers