Dreamweaver MX e-Learning Toolkit phần 6 ppsx

Figure 11-15: The Drag_ManyToMany interaction, inserted into Dreamweaver MX Choosing multiple elements, all dragable to each other (Drag_2wayManyToMany) Use the Drag_2wayManyToMany template when you want an interaction that uses multiple elements, each serving as both drag and target elements (you can drag any element to any other element). By default, this interaction ◆ Judges the interaction when students click a Submit button. You can select automatic judgment (when the student drops any element); or you can have the interaction judged by a specific event, such as a button or slider interaction (General tab). ◆ Judges an answer correct if all are correct and none incorrect (General tab). ◆ Inserts a Reset button to allow students to return elements to their original positions and start over (General tab). ◆ Provides six elements, each serving the dual role of drag element and tar- get element, allowing all six elements to move: DragTarget1 through DragTarget6. If this template were used in the HTML Basics drag-and- drop interaction for protocol definitions, for example, students would have the option of dragging terms to the definitions or definitions to the terms (Elements tab). Chapter 11: Drag-and-Drop (Match-up) Interactions 263 526057 ch11.qxd 2/14/03 3:57 PM Page 263 ◆ Names any additional drag and target elements that you add as unnamed (unnamed1, unnamed2, unnamed3, and so forth). You can rename them in the Name field (If you highlight any element and click the Add button, CourseBuilder adds an additional element that is both a drag and target element.) (Elements tab). ◆ Defines 18 possible pairings out of 30, with 6 pairs set to correct: DragTarget1:DragTarget4 (correct) DragTarget4:DragTarget1 (correct) DragTarget2:DragTarget5 (correct) DragTarget5:DragTarget2 (correct) DragTarget3:DragTarget6 (correct) DragTarget6:DragTarget3 (correct) Twelve pairings are set to incorrect (these are the additional combinations available by pairing DragTarget elements in the left-hand grouping with DragTarget elements in the right-hand grouping): DragTarget1:DragTarget5 (incorrect) DragTarget1:DragTarget6 (incorrect) DragTarget5:DragTarget1 (incorrect) DragTarget6:DragTarget1 (incorrect) DragTarget2:DragTarget4 (incorrect) DragTarget2:DragTarget6 (incorrect) DragTarget4:DragTarget2 (incorrect) DragTarget6:DragTarget2 (incorrect) DragTarget3:DragTarget4 (incorrect) DragTarget3:DragTarget5 (incorrect) DragTarget4:DragTarget3 (incorrect) DragTarget5:DragTarget3 (incorrect) There are 12 additional possible combinations that you can add but are not initially defined in the Pairs list. These additional combinations are pairings within a grouping (DragTarget1:DragTarget3, DragTarget4:DragTarget5, and so forth) (Pairs tab). ◆ Sets each element to snap to the center of another element if the student drops it within 75 pixels of any other element’s center. See the section, “Pairs tab,” later in this chapter for more details (Pairs tab). ◆ Does not include in the Pairs list any new elements you added on the Elements tab. You can add them manually by selecting each new possible pair from the drop-down list on the Pairs tab and clicking the Add button (Pairs tab). You can modify these defaults on the General, Elements, and Pairs tabs. Figure 11-16 shows the default layout for the Drag_2wayManyToMany interaction after it is inserted into Dreamweaver MX. 264 Part II: Test and Activity 526057 ch11.qxd 2/14/03 3:57 PM Page 264 Figure 11-16: The Drag_2wayManyToMany interaction, inserted into Dreamweaver MX Choosing one drag element with multiple targets (Drag_1ToMany) Use the Drag_1ToMany template when you want an interaction that has a single drag element that can be dragged to one correct target element among multiple target distractors, with the target elements remaining stationary. By default, this interaction ◆ Judges the interaction automatically when a student drops the drag ele- ment onto any target element. You can choose the option to have the interaction judged when the student clicks a Submit button, or by a specific event, such as a button or slider interaction (General tab). ◆ Judges an answer correct if any are correct and none incorrect (General tab). ◆ Inserts a Reset button to allow students to return elements to their original position and start over (General tab). ◆ Snaps elements back to their original position if they are dropped any- where but onto a target (General tab). ◆ Provides four elements: one drag element named Drag1, and three target elements named Target1 through Target3 (Elements tab). Chapter 11: Drag-and-Drop (Match-up) Interactions 265 526057 ch11.qxd 2/14/03 3:57 PM Page 265 ◆ Names additional drag and target elements that you add as unnamed (unnamed1, unnamed2, unnamed3, and so forth). You can rename them in the Name field (If you highlight a drag element and click the Add button, CourseBuilder adds an additional drag element. If you highlight a target element and click the Add button, CourseBuilder adds an additional target element.) (Elements tab). ◆ Defines all three possible pairings, with the first pair set to correct (Pairs tab): Drag1:Target1 (correct) Drag1:Target2 (incorrect) Drag1:Target3 (incorrect) ◆ Sets a drag element to snap to the center of a target if the student drops it within 75 pixels of a target’s center. See the section, “Pairs tab,” later in this chapter for more details (Pairs tab). ◆ Does not include on the Pairs list any new elements you added on the Elements tab. You can add them manually by selecting each new possible pair from the drop-down list on the Pairs tab and clicking the Add button (Pairs tab). You can modify these defaults on the General, Elements, and Pairs tabs. Figure 11-17 shows the default layout for the Drag_1ToMany interaction after it is inserted into Dreamweaver MX. Figure 11-17: The Drag_1ToMany interaction, inserted into Dreamweaver MX 266 Part II: Test and Activity 526057 ch11.qxd 2/14/03 3:57 PM Page 266 Choosing one drag element with multiple targets, all dragable to each other (Drag_2way1ToMany) Use the Drag_2way1ToMany template when you want an interaction that only uses elements that are both drag and target elements, so that all elements can be moved. By default, this interaction ◆ Judges the interaction automatically when a student drops the drag ele- ment onto any target element. You can choose to have the interaction judged when the student clicks a Submit button, or by a specific event, such as a button or slider interaction (General tab). ◆ Judges an answer correct if any are correct and none incorrect (General tab). ◆ Inserts a Reset button to allow students to return elements to their original positions and start over (General tab). ◆ Provides four elements (DragTarget1 through DragTarget4), each serving the dual role of drag element and target element, and allows all four ele- ments to move. Students can drag any element to any other element (Elements tab). ◆ Names additional drag and target elements that you add as unnamed (unnamed1, unnamed2, unnamed3, and so forth). You can rename them in the Name field (If you highlight any element and click the Add button, CourseBuilder adds an additional element that is both a drag and target element.) (Elements tab). ◆ Defines six possible pairings out of 12, with two pairs set to correct: DragTarget1:DragTarget2 (correct) DragTarget2:DragTarget1 (correct) The other four defined pairings — the additional combinations available by pairing DragTarget1 with the remaining elements — are set to incorrect: DragTarget1:DragTarget3 (incorrect) DragTarget1:DragTarget4 (incorrect) DragTarget3:DragTarget1 (incorrect) DragTarget4:DragTarget1 (incorrect) There are six additional possible combinations that you can add but which are not initially defined in the Pairs list. These additional combina- tions are pairings within the grouping of multiple elements (DragTarget2:DragTarget3, DragTarget4:DragTarget3, and so forth) (Pairs tab). Chapter 11: Drag-and-Drop (Match-up) Interactions 267 526057 ch11.qxd 2/14/03 3:57 PM Page 267 ◆ Sets each element to snap to the center of another element if the student drops it within 75 pixels of any other element’s center. See the section, “Pairs tab,” later in this chapter for more details (Pairs tab). ◆ Does not include in the Pairs list any new elements you added on the Elements tab. You can add them manually by selecting each new possible pair from the drop-down list on the Pairs tab and clicking the Add button (Pairs tab). You can modify these defaults on the General, Elements, and Pairs tabs. Figure 11-18 shows the default layout for the Drag_2way1ToMany interaction after it is inserted into Dreamweaver MX. Figure 11-18: The Drag_2way1ToMany interaction, inserted into Dreamweaver MX Choosing two elements, both dragable (Drag_2way1To1) Use the Drag_2way1To1template when you want a drag-and-drop interaction that has two elements, both of which are target and drag elements. This template is typ- ically used for demonstration purposes. By default, this interaction 268 Part II: Test and Activity 526057 ch11.qxd 2/14/03 3:57 PM Page 268 ◆ Judges the interaction automatically when students drop the drag element onto any target element. You can choose to have the interaction judged when the student clicks a Submit button or by a specific event, such as a button or slider interaction (General tab). ◆ Judges an answer correct if any are correct and none incorrect (General tab). ◆ Inserts a Reset button to allow students to return elements to their original positions and start over (General tab). ◆ Provides two elements (DragTarget1 and DragTarget2), each serving the dual role of drag element and target element, and allows both elements to move. Students can drag any element to any other element (Elements tab). ◆ Names additional drag and target elements that you add as unnamed (unnamed1, unnamed2, unnamed3, and so forth). You can rename them in the Name field (If you highlight any element and click the Add button, CourseBuilder adds an additional element that is both a drag and target element.) (Elements tab). ◆ Defines both possible pairings as not judged: DragTarget1:DragTarget2 (not judged) DragTarget2:DragTarget1 (not judged) ◆ Sets each element to snap to the center of another element if the student drops it within 75 pixels of any other element’s center. See the section, “Pairs tab,” later in this chapter for more details (Pairs tab). ◆ Does not include in the Pairs list any add new elements you added on the Elements tab. You can add them manually by selecting each new possible pair from the drop-down list on the Pairs tab and clicking the Add button (Pairs tab). You can modify these defaults on the General, Elements, and Pairs tabs. Figure 11-19 shows the default layout for the Drag_2way1To1interaction after it is inserted into Dreamweaver MX. Chapter 11: Drag-and-Drop (Match-up) Interactions 269 526057 ch11.qxd 2/14/03 3:57 PM Page 269 Figure 11-19: The Drag_2way1To1 interaction, inserted into Dreamweaver MX Choosing a multi-step sequence (Drag_2StepsInOrder) Use the Drag_2StepsInOrder template when you want an interaction that has a single drag element that is dropped on multiple target elements in a specific sequence, with the target elements remaining stationary. By default, this interaction ◆ Judges the interaction automatically when students drop the drag element onto any target element. You can choose to have the interaction judged when the student clicks a Submit button; or by a specific event, such as a button or slider interaction (General tab). ◆ Judges an answer correct if any are correct and none incorrect (General tab). ◆ Inserts a Reset button to allow students to return elements to their original position and start over (General tab). ◆ Snaps elements back to their original position if they are dropped any- where but onto a target (General tab). 270 Part II: Test and Activity 526057 ch11.qxd 2/14/03 3:57 PM Page 270 ◆ Provides three elements: one drag element (Drag1) and two target elements (Target1 and Target2), where students must drop the Drag1 element on Target1 before they drop it on Target2 (Elements tab). ◆ Names additional drag and target elements that you add as unnamed (unnamed1, unnamed2, unnamed3, and so forth). You can rename them in the Name field. If you highlight a target element and click the Add button, CourseBuilder adds an additional target element. If you decide to add more target elements, note that you will need to add the processing rules to test the sequence for those new elements in the Action Manager (Elements tab). ◆ Defines both possible pairings as not judged: Drag1:Target1 (not judged) Drag1:Target2 (not judged) All pairings are set as not judged because the decision about correct or incorrect depends on the sequence the student chooses and is handled through conditions in the Action Manager. ◆ Sets a drag element to snap to the center of a target if the student drops it within 75 pixels of a target’s center. See the section, “Pairs tab,” later in this chapter for more details (Pairs tab). ◆ Does not include in the Pairs list any new elements you added on the Elements tab. You can add them manually by selecting each new possible pair from the drop-down list on the Pairs tab and clicking the Add button (Pairs tab). You can modify these defaults on the General, Elements, and Pairs tabs. Figure 11-20 shows the default layout for the Drag_2StepsInOrder interaction after it is inserted into Dreamweaver MX. Chapter 11: Drag-and-Drop (Match-up) Interactions 271 526057 ch11.qxd 2/14/03 3:57 PM Page 271 Figure 11-20: The Drag_2StepsInOrder interaction, inserted into Dreamweaver MX Choosing a multi-step sequence with a distractor (Drag_2Steps1ToMany) Use the Drag_2Steps1ToMany template when you want an interaction that has a single drag element that is dropped on multiple target elements in a specific sequence, with target distractors added, and with the target elements remaining stationary. By default, this interaction ◆ Judges the interaction automatically when students drop the drag element onto any target element. You can choose to have the interaction judged when the student clicks a Submit button; or by a specific event, such as a button or slider interaction (General tab). ◆ Judges an answer correct if any are correct and none incorrect (General tab). ◆ Inserts a Reset button to allow students to return elements to their original positions and start over (General tab). 272 Part II: Test and Activity 526057 ch11.qxd 2/14/03 3:57 PM Page 272 [...]... and Pairs tabs Figure 11-21 shows the default layout for the Drag_2Steps1ToMany interaction after it is inserted into Dreamweaver MX 273 5 260 57 ch11.qxd 274 2/14/03 3:57 PM Page 274 Part II: Test and Activity Figure 11-21: The Drag_2Steps1ToMany interaction, inserted into Dreamweaver MX Defining the Elements and Pairs Tab Properties Drag-and-drop interactions are the only interactions that require two... into Dreamweaver MX When the explore interaction is inserted into your Dreamweaver MX page, the hot area names (HotArea1 through HotArea4) all contain the prefix G01 on the Properties panel.This prefix is to distinguish hot areas if you insert multiple interactions on a single page The remainder of this chapter continues to refer to hot area names without the prefix, for the sake of simplicity 297 5 260 57... setting Not Judged Now we need to identify the image that each hot area will contain 293 5 260 57 ch12.qxd 294 2/14/03 2:42 PM Page 294 Part II: Test and Activity Figure 12-10: The Dreamweaver MX page with the backdrop image inserted into the background layer Figure 12-11: The Hot Areas tab for an explore interaction 5 260 57 ch12.qxd 2/14/03 2:42 PM Page 295 Chapter 12: Explore (Image Hot Area) Interactions... later in the chapter.) Figure 12-7: Changing the properties of the feedback layer on the Properties panel 291 5 260 57 ch12.qxd 292 2/14/03 2:42 PM Page 292 Part II: Test and Activity 6 Click the Explore_Random template CourseBuilder inserts a working copy of the template into your Dreamweaver MX page, and activates additional tabs for that template (General, Hot Areas, Action Mgr), as shown in Figure... perspective Figure 12-4 shows the interaction open in Dreamweaver MX The interaction is identified in the Properties panel as an Explore_Random interaction It contains a different folder within each hot area, and the hot areas are layered on top of each other (see the sidebar “Understanding the Z-Index” for information about overlapping layers) 287 5 260 57 ch12.qxd 288 2/14/03 2:42 PM Page 288 Part II:... different folders Figure 12-3: A student has clicked the images folder, and the URL at the top left of the page reflects the path to the selected folder Figure 12-4: The explore interaction open in Dreamweaver MX 5 260 57 ch12.qxd 2/14/03 2:42 PM Page 289 Chapter 12: Explore (Image Hot Area) Interactions Understanding the Z-Index Many CourseBuilder interactions (including drag and drop and explore) rely on... target elements ◆ Choose each element’s function The Element Is field identifies the func- tion of an element as a ■ Drag Element, meaning the layer can be dragged and dropped 275 5 260 57 ch11.qxd 2 76 2/14/03 3:57 PM Page 2 76 Part II: Test and Activity ■ Target Element, meaning the layer is stationary, waiting for a drag element to be dropped on it ■ Both Drag and Target, meaning the layer can both be... CourseBuilder support files) 5 260 57 ch12.qxd 2/14/03 2:42 PM Page 293 Chapter 12: Explore (Image Hot Area) Interactions Figure 12-9: General tab for the Explore_Random interaction 8 Click the Browse button to select the Backdrop Image file Select the disk.gif file from the images folder in the HTML Basics root folder CourseBuilder updates the Explore_Random template in Dreamweaver MX with the backdrop image... drag-and-drop interactions “bring things to life.” 5 260 57 ch11.qxd 2/14/03 3:57 PM Page 279 Chapter 11: Drag-and-Drop (Match-up) Interactions Example: The Beginnings of Animation The Beginnings of Animation example provides a match-up of animation timeframes (on theater tickets) with images from actual animation samples (Figure 11- 26) Figure 11- 26: In The Beginnings of Animation page students must... area By default, a click in a hot area launches a Popup Message action that identifies the area Instead, we want the clicks to change the text in the feedback layer named url 295 5 260 57 ch12.qxd 2 96 2/14/03 2:42 PM Page 2 96 Part II: Test and Activity 13 Highlight each Popup Message action in the Action Manager tab and click the Cut button to delete it (this must be done for each message; there is no . is inserted into Dreamweaver MX. Figure 11-17: The Drag_1ToMany interaction, inserted into Dreamweaver MX 266 Part II: Test and Activity 5 260 57 ch11.qxd 2/14/03 3:57 PM Page 266 Choosing one drag. inserted into Dreamweaver MX. Chapter 11: Drag-and-Drop (Match-up) Interactions 269 5 260 57 ch11.qxd 2/14/03 3:57 PM Page 269 Figure 11-19: The Drag_2way1To1 interaction, inserted into Dreamweaver MX Choosing. Figure 11- 16 shows the default layout for the Drag_2wayManyToMany interaction after it is inserted into Dreamweaver MX. 264 Part II: Test and Activity 5 260 57 ch11.qxd 2/14/03 3:57 PM Page 264 Figure