Including CourseBuilder Interactions and Controls in Dreamweaver Projects

Inserting a Drag and Drop Interaction

Many learners find Drag and Drop interactions fun. Because these interactions engage learners by allowing them to manipulate objects onscreen, they also can be educational. The Drag and Drop CourseBuilder interaction can judge pairings of objects as correct or incorrect and make objects snap back to their original positions if they are incorrect.

In this section, you'll add a Drag and Drop interaction to a page, setting up the relationships between the pairs of drag objects and target objects. In Chapter 11, you'll add advanced functionality, including feedback particular to individual drag/target pairings. There are seven different Drag and Drop interactions, listed in Table 10.3.

Table 10.3 Drag and Drop Category Interactions

The Drag and Drop interactions can be sorted into three groups: the one-direction interactions, the two-direction interactions, and the ordered interactions. You select the interaction type according to the functionality specified in the storyboard.

Using the General Tab

Insert a CourseBuilder Interaction (Insert, CourseBuilder Interaction) into a Web page. Select the one-way many-to-many Drag and Drop interaction. The Drag and Drop interactions have General and Action Manager tabs, like the Multiple Choice interactions, but they also have an Elements tab, where you set up the drag and target elements, and the Pairs tab, where you set up the relationships between the drag and target elements.

Set up the General tab as shown in Figure 10.14. Leave the default name and judge the interaction when the user clicks the Check Answer button. Leave the Tries and Time limits as Unlimited. Be sure the Reset check box and the Snap Back If Not Dropped on Target check boxes are selected. Leave the Snap Back If Incorrect check box deselected because this interaction enables the learner to make incorrect pairings that are judged when the Check Answer button is clicked.

Figure 10.14 The General tab in a Drag and Drop interaction enables you to configure the basic settings.

Using the Elements Tab

The Elements tab, shown in Figure 10.15, presents a list of elements at the top of the CourseBuilder Interaction dialog box and the individual element options at the bottom. Elements can be defined as drag or target elements. The interaction comes with a default number of three drag elements and three target elements. You can add as many elements as you need for your interaction.

Figure 10.15 The Elements tab enables you to set up each drag and target element, loading images and naming the elements.

To configure the Elements tab for a Drag and Drop interaction, follow these steps:

1. Add an additional drag element by first selecting the element named Drag3. You'll add the new drag element under Drag3. Click the Add button to add it to the list. Because elements are added directly below the selected element, you select Drag3 first so that the drag elements stay in order.

2. Set up the new element's options in the lower half of the dialog box, and enter Drag4 in the Name text box. Ignore the Image File text field for now. Be sure that Drag Element is selected in the Element Is drop-down list.

3. Add a target element by first selecting the element named Target3. Click the Add button to add it to the list.

4. Set up the new element's options in the lower half of the dialog box. Enter Target4 in the Name text box. Again, ignore the Image File text field. Make sure that Target Element is selected in the Element Is drop-down list.

5. Load the drag and target images for each element. Select Drag1, click the Browse button, and select an image. Repeat this step for each element, loading all the images.

Using the Pairs Tab

The Pairs tab, shown in Figure 10.16, enables you to set up all the possible pairs of drag and target elements as either correct or incorrect. CourseBuilder automatically added the nine possible pairs for the three default drag elements and the three default target elements, so you'll need to add the seven additional pairings. You must define all possible pairs as either correct or incorrect pairings.

Figure 10.16 Configure the pairings in this Drag and Drop interaction in the Pairs tab.

The drop-down list at the top of the dialog box lists pairings that aren't yet added to the Pairs list. If you hadn't added additional drag and target elements, this box would say all pairs are created. All nine pairings for the original three drag elements and the original three target elements have already been added to the Pairs list, so you need to add the pairs created by the additional drag and target elements (Drag4 and Target4). To define the additional pairs:

1. It's easier to understand the pairs if you keep them in a logical order. So, add the pairs in the most logical location by selecting the line above where you want the pair located, and then clicking the Add button. For the first pair in the drop-down list, Drag1:Target4, select Drag1:Target3, and then click the Add button. The pair Drag1:Target4 is added under Drag1:Target3.

2. Repeat this procedure for Drag2:Target4 and Drag3:Target4. Select the last line in the Pairs list and add the new Drag4 pairs at the end of the list.

3. For this drag-and-drop question, here are the correct answers: Drag1:Target1, Drag2:Target2, Drag3:Target3, Drag4:Target4. Select each pairing in the Pairs list and set whether they are correct or incorrect in the Choice Is drop-down list.

4. In the Score text box, give each correct pairing a score of 5.

5. Each pairing also has a Snap If Within and a Snap To setting. Leave the default 75 pixels as the Snap If Within setting and leave the Snap To setting as Center. You can edit these settings and fine-tune them later if you need to.

Using the Action Manager Tab

You can leave the default settings in the Action Manager tab. Right now, the code in the Action Manager judges the correctness of all the Drag and Drop pairings, but you'll edit that setting in Chapter 11. Click the OK button to save your settings for the CourseBuilder interaction.

In the Document window, you arrange the drag and target elements, mixing them up so that they aren't immediately obvious to the learner. You can delete the directions that the interactions placed on the Web page, leaving the Check Answer and Reset button in a form. Click on one of the buttons, and then select the <form> tag in the Tag Selector. Cut and paste the form and buttons into the Content layer. Resize the layer and move it to the bottom of the Document window. The finished Drag and Drop interaction should look something like Figure 10.17. Preview the Web page in a browser and check the interaction's functionality.

Figure 10.17 The drag and target elements must be arranged onscreen.

Inserting an Explore Interaction

Explore interactions usually are not used for quiz questions, but they enable the learner to explore information by clicking onscreen elements. An interaction where the learner clicks on the various objects on the page and gets information on them is a perfect example of an Explore interaction. You'll create an Explore interaction with CourseBuilder and see how quickly an Explore interaction can be created. There are three different types of Explore interactions, listed in Table 10.4.

Table 10.4 Explore Category Interactions

The Explore interactions differ depending on whether the hotspots hold the actual images that learners click on to trigger the feedback. If you have a single image over which you need to create hotspots, similar to an image map, you use the first Explore interaction with the transparent hotspots. CourseBuilder places layers containing a transparent GIF; these layers act as hotspots when placed over a region of the background graphic. You must resize the transparent GIF in the Property inspector, as shown in Figure 10.18. Although Internet Explorer captures the onClick event on a layer (<div> tag), Netscape cannot. Therefore, CourseBuilder places the transparent GIF within the layer because both browsers can capture the onClick event on an image.

Figure 10.18 When you select the Explore interaction using transparent hotspots, you need to resize the transparent GIFs that CourseBuilder inserts into the layer hotspots.

Open a new Web page, save the page, and name it. Add a CourseBuilder interaction to the Web page (Insert, CourseBuilder Interaction), and select the Explore category. Select the interaction called Explore_Transparent.

Using the General Tab

The Explore interactions have the standard General and Action Manager tabs plus a Hot Areas tab, where you set up the content of the hotspots. Set up the General tab as shown in Figure 10.19. Leave the Judge Interaction setting when the user clicks a hot area. Leave the Correct When setting alone; this interaction will not be judged. Set the Tries Are text box to 2. Leave all the other settings at the default value, but either change the Backdrop Image or remove the URL; interactions do not have to have a backdrop image.

Figure 10.19 The General tab of the Explore interaction contains the basic interaction settings.

Using the Hot Areas Tab

Select the Hot Areas tab to set up the individual hotspots. By default, CourseBuilder creates five hotspots. If that's not how many you need for the interaction, click the Add or Delete buttons. You can accept the default hotspot names in the Name text box and leave the Text text boxes empty. Each hotspot contains a transparent GIF image.

Using the Action Manager Tab

Select the Action Manager tab to investigate the code behind this interaction. Because you are not using the Check Time segment, you can delete it by selecting the segment and clicking the Cut button. That leaves seven segments: one segment for each hotspot, a segment judging correctness, and a segment checking the tries.

Each of the remaining hotspot segments establishes whether the learner clicks on one of the hotspots and then opens a pop-up message specific to that hotspot. You can edit the pop-up message by selecting it in the Action Manager, clicking the Edit button, and modifying the text in the Message text box. In Chapter 11, you'll modify this interaction to set the text of a layer.

Click the OK button to save the CourseBuilder interaction settings. Arrange the layers and stretch the transparent GIFs by selecting them and dragging the drag handles to cover the hotspot area. Remember, you need to capture a click on the image and not the layer, to be cross-browser compatible. Preview the Web page in a browser and check the interaction's functionality.

Inserting a Text Entry Interaction

Now you'll insert another quiz question by using the Text Entry CourseBuilder interaction. Text Entry interactions are best for single-word answers. CourseBuilder enables you to look for certain words as answers, either correct or incorrect, and even gives you control over judging capitalization. Table 10.5 lists the two types of Text Entry interactions.

Table 10.5 Text Entry Category Interactions

The two Text Entry interactions differ simply in the size of the text area available for the learner to enter the answer.

Using the General Tab

Create a new Web page, save the page, and name it. Place the cursor in the Content layer and insert a CourseBuilder interaction (Insert, CourseBuilder Interaction). Select the Text Entry category and click on the single-line Text Entry interaction, the one on the left.

When you insert the Text Entry CourseBuilder interaction, it places the question stem text on the Web page. You don't set up the question stem within the CourseBuilder Interaction dialog box. After you set up this interaction, you'll save your changes and then add the question text.

Set up the General tab as shown in Figure 10.20. You can use the default interaction name. The text you enter in the Initial Text text box appears in the text area where learners answer the question and requires that they select and delete the text before entering their answers; for now, leave this text box blank. Judge the interaction when the learner clicks the Check Answer button. Leave the Correct When drop-down list as Any Correct and None Incorrect. Leave the Time and Tries limit as Unlimited. The Reset check box should be selected, and the Layer check box should be selected.

Figure 10.20 The General tab of the Text Entry interaction contains the basic interaction settings.

Using the Responses Tab

The Responses tab enables you to specify the correct and incorrect responses. All other responses are considered unknown by CourseBuilder and trigger the Unknown Response code in Action Manager. The Responses tab has three sections. The top section is a list of possible responses, both correct and incorrect. The middle section enables you to set up the possible responses. The lower section is where you specify what to do with any other responses to the question.

To create one correct response and one incorrect response, follow these steps:

1. Select the third response in the Possible Responses list and click the Delete button.

2. Select Response1 at the top of the dialog box. Leave the default name in the Name text box.

3. In the Must Contain text box, enter the text of the correct answer.

4. Leave the Case Sensitive check box deselected because you won't need specific capitalization for this answer.

5. Leave the Exact Match Required check box deselected so that the learner can enter answers such as "arabica beans" or "coffea arabica," the botanical term for coffee, and still be correct when the correct answer is set as "arabica."

6. The Match Is drop-down list should be set to Correct. The Score setting should be 20.

7. The Any Other Response Is drop-down list should be set to Incorrect, as shown in Figure 10.21.

Figure 10.21 The Responses tab enables you to set up the correct and incorrect responses to a Text Entry question. Any other responses are unknown.

8. Select Response2 at the top of the dialog box. Leave the default name in the Name text box.

9. In the Must Contain text box, enter the text of an anticipated incorrect answer.

10. Leave the Case Sensitive and Exact Match Required check boxes deselected.

11. The Match Is drop-down list should be set to Incorrect with a score of 0.

Using the Action Manager Tab

The Action Manager, by default, contains the Check Time, Check Tries, and Correctness segments. Because you have only a single correct and a single incorrect answer, you essentially have specific feedback for both answers as well as a generic feedback message, contained in the else if Unknown Response statement. You can delete the Check Time and Check Tries segments and edit the pop-up messages.

Click the OK button to save your CourseBuilder interaction settings. Preview the Web page in a browser to test the functionality. Try entering the correct answer, and then try entering phrases, including the correct answer. Are these answers judged as correct? Try entering the incorrect answer. Also, try entering other answers to get the unknown response feedback.