Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

Including CourseBuilder Interactions and Controls in Dreamweaver Projects

The CourseBuilder extension for Dreamweaver is a "must have" for learning application developers. This sample chapter covers the basics of inserting and editing CourseBuilder interactions and controls.

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.

TIP

In the first paragraph, the Preferences.txt file states that you can make your directories site-root relative. A site-root relative directory begins with a slash and indicates that instead of being relative to the current page, the URL is relative to the site root. Site-root relative addressing is useful when working on large projects, but for the URLs to work, you must always view Web pages through a Web server. I find it easier to preview the Web sites I create on my computer instead of through the server (either local to My Computer or somewhere else).

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.

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

CourseBuilder Interaction

Netscape 4

Netscape 6

Internet Explorer 4+

Multiple choice with form elements

OK, but Reset button does not reset radio buttons, and disabling interaction does not prohibit the user from selecting radio buttons or check boxes.

OK

OK

Multiple choice with graphic elements

OK

OK

OK

Drag and drop

OK, but do not insert in layer.

Does not work.

OK

Explore

OK, but do not insert in layer.

Does not

work.

OK

Button

OK

OK

OK

Text entry

OK, but disabling interaction does not prohibit the user from entering text.

OK

OK

Timer

OK, but limited to one per page.

OK

OK

Slider

OK, but limited to one per page. Do not set a background color in the slider layer.

Does not work.

OK

Action Manager

OK

OK

OK


Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020