Dreamweaver MX e-Learning Toolkit phần 7 pps

After you insert the interaction, you can rearrange the layers and text box to the final format. For instance, the text box in the HTML Basics example (see Figure 13-10) is dragged into a separate layer to display the numeric location of the thumb on the track. It has style characteristics attached from an external Cascading Style Sheet that changes the numbers to blue and enlarges the font. Figure 13-10: Rearrange the interaction’s layers in Dreamweaver MX. Figure 13-11 shows a flowchart that diagrams the decisions and actions taken by the Action Manager when processing this slider interaction. Chapter 13: Slider Interactions 321 526057 ch13.qxd 2/14/03 2:46 PM Page 321 Figure 13-11: Processing of the slider interaction in the Action Manager Student Releases the Thumb of the Slider Slider location delivered to Action Manager Action Manager Did the student select a number on the slider within Range1 (0 to 71)? YES NO Set Text of Frame blackboard for incorrect response Did the student select a number on the slider within Range2 (72 to 96)? YES NO Set Text of Frame blackboard for correct response Did the student select a number on the slider within Range3 (97 to 300)? YES Set Text of Frame blackboard for incorrect response 322 Part II: Test and Activity 526057 ch13.qxd 2/14/03 2:46 PM Page 322 Creating Custom Sliders Creating custom sliders is a relatively straightforward task. Every custom slider consists of three components, all stored in the sliders folder within the images folder: ◆ The image for the track (.gif or .jpg file). ◆ The image for the thumb (.gif or .jpg file). ◆ The thumbnail (100x100-pixel representation of the slider) displayed on the General tab in the CourseBuilder Interaction dialog box when you select the custom slider (.gif or .jpg file). CourseBuilder sliders fall into two categories: ◆ Horizontal sliders, where the track has a horizontal orientation and the thumb moves from left to right (the far left is a value of 0, and the far right is the high end of the range). ◆ Vertical sliders, where the track has a vertical orientation and the thumb moves from bottom to top (the bottom is a value of 0, and the top is the high end of the range). You implicitly specify the orientation for a slider by the naming convention you follow when you deposit your thumb, track, and thumbnail images into the slid- ers folder (subfolder within the images folder). Table 13-1 lists these conventions, which are added to the end of the image name. For example, a GIF image named pencil that you want to use as a thumb on a horizontal slider would be named pencil_hor_thm.gif. TABLE 13-1 SLIDER IMAGE NAMING CONVENTIONS Slider Orientation GIF Image JPG Image Horizontal _hor_thm.gif (thumb) _hor_thm.jpg (thumb) _hor_tnail.gif (thumbnail) _hor_tnail.jpg (thumbnail) _hor_trk.gif (track) _hor_trk.jpg (track) Vertical _ver_thm.gif (thumb) _ver_thm.jpg (thumb) _ver_trk.gif (track) _ver_trk.jpg (track) _ver_tnail.gif (thumbnail) _ver_tnail.jpg (thumbnail) Chapter 13: Slider Interactions 323 526057 ch13.qxd 2/14/03 2:46 PM Page 323 In the HTML Basics slider example, the custom slider monitor can be found in the Appearance drop-down menu on the General tab. CourseBuilder automatically abstracts that name because it found the following files in the sliders folder: monitor_hor_thm.gif, monitor_hor_track.gif, and monitor_tnail.gif. You cannot mix and match graphics types (.GIF and .JPG) for a single slider; also, CourseBuilder will not display the slider as an option in the General tab unless all three necessary images (thumb, track, and thumbnail) are present in the sliders folder. Although the track and thumb can be whatever size you want, the thumbnail graphic should be sized to 100 by 100 pixels. Since the only purpose of the thumb- nail is to represent the slider in the dialog box, it does not really matter if the image is somewhat distorted by resizing. Of course, the real challenge in creating tracks is making sure each location on the track accurately represents the sub-ranges. See “Example: The Mesozoic Era (as a multiple-choice test)” at the end of this chapter for directions on how to propor- tionally match a graphical track to the ranges defined in the slider interaction. Choosing Your Slider Template The CourseBuilder Gallery contains two slider templates, as shown in Figure 13-12. The significant difference between the two templates is that one slider is designed as a multiple-choice test, and the other slider is designed as a control interaction. Choosing a slider as a control interaction (Slider_2Ranges) Use the Slider_2Ranges template when you want to use a slider interaction for control, without judging choices. By default, this interaction ◆ Displays all of the sliders in the sliders folder for that site. CourseBuilder lists any slider that provides the three necessary files for each slider, dis- cussed earlier in this chapter (General tab). ◆ Sets the overall range at 0 to 100 (General tab). ◆ Sets the initial value to 0, which means that the thumb is initially posi- tioned to the far left on horizontal sliders or at the bottom of vertical slid- ers. You can select any number within the overall range as the starting point for the thumb (General tab). 324 Part II: Test and Activity 526057 ch13.qxd 2/14/03 2:46 PM Page 324 Figure 13-12: Slider templates available in the CourseBuilder Gallery ◆ Judges the interaction automatically when the student releases the slider thumb (General tab). ◆ Judges an answer correct if any are correct and none incorrect, although this setting is irrelevant because the ranges on the Ranges tab are not judged (General tab). ◆ Inserts a Reset button to allow students to return elements to their starting position and start over (General tab). ◆ Provides two sub-ranges: Range1, which is initially set at 0 to 49; and Range2, which is initially set at 50 to 100 (Ranges tab). ◆ Sets all ranges to Not Judged (Ranges tab). ◆ Inserts segments that include conditions for every range defined on the Ranges tab: if Range1 Selected, if Range2 Selected, and so forth (Action Mgr). You can modify these defaults on the General and Ranges tabs. Figure 13-13 shows the default layout for the Slider_2Ranges interaction after it is inserted into Dreamweaver MX. Slider_2Ranges Slider_CorrectRange Chapter 13: Slider Interactions 325 526057 ch13.qxd 2/14/03 2:46 PM Page 325 Figure 13-13: The Slider_2Ranges interaction, inserted into Dreamweaver MX. In addition to the slider, CourseBuilder automatically inserts a text box that displays the numeric location of the thumb on the slider at any given point. Choosing a slider for multiple choice (Slider_CorrectRange) Use the Slider_CorrectRange template when you want to use a slider interaction for multiple choices, where each range is judged as correct or incorrect. By default, this interaction ◆ Displays all of the sliders in the sliders folder for that site. CourseBuilder lists any slider that provides the three necessary files for each slider, dis- cussed earlier in this chapter (General tab). ◆ Sets the overall range at 0 to 100 (General tab). ◆ Sets the initial value to 0, which means that the thumb is initially posi- tioned to the far left on horizontal sliders or at the bottom of vertical slid- ers. You can select any number within the overall range as the starting point for the thumb (General tab). ◆ Judges the interaction automatically when the student releases the slider thumb (General tab). 326 Part II: Test and Activity 526057 ch13.qxd 2/14/03 2:46 PM Page 326 ◆ 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). ◆ Provides three sub-ranges: Range1, which is initially set at 0 to 48; Range2, which is initially set at 49 to 51; and Range3, which is initially set to 52 to 100 (Ranges tab). ◆ Sets Range1 and Range3 to Incorrect, and Range2 to correct (Ranges tab). ◆ Inserts segments that include conditions for both incorrect ranges defined on the Ranges tab: if Range1 Selected, and if Range3 Selected (Action Mgr). ◆ Includes the standard conditions under the Correctness segment (if Correct , else if Incorrect, and else if Unknown Response), each containing a Popup Message as the action (Action Mgr). You can modify these defaults on the General and Ranges tabs. Figure 13-14 shows the default layout for the Slider_CorrectRange interaction after it is inserted into Dreamweaver MX. Figure 13-14: The Slider_CorrectRange interaction, inserted into Dreamweaver MXCourseBuilder automatically inserts a text box that displays the numeric location of the thumb on the slider at any given point. Chapter 13: Slider Interactions 327 526057 ch13.qxd 2/14/03 2:46 PM Page 327 Application Examples Slider interactions provide students with a strong feeling of interactivity with a course. The examples described in this section both use the same slider: one as a means for control, the other for answering a multiple-choice question. Example: The Mesozoic Era (as a multiple-choice test) The Slider_CorrectRange template enables you to create a slider that judges each range on the track. Students answer each question by sliding the thumb to the cor- rect location on the track and then releasing the thumb. The Mesozoic Era uses a slider consisting of a Triceratops thumb that moves along a timeline track to answer questions. The slider is set to provide three options for student answers (as shown in Figure 13-15): Triassic, Jurassic, or Cretaceous. Figure 13-15: The Mesozoic Era as a multiple-choice test, where students use the slider to answer questions that are subsequently judged Before inserting the interaction, the page was generally laid out, as shown in Figure 13-16. Of particular importance is the creation of the layer named feedback, which is used by the Action Manager as the location for conveying feedback to students. 328 Part II: Test and Activity 526057 ch13.qxd 2/14/03 2:46 PM Page 328 Figure 13-16: The Mesozoic Era web page before the slider interaction is inserted into the page To create this example, select a Slider_CorrectRange template, because that template judges student answers. To begin defining your slider, select the Appearance for the slider — in this case, a custom slider named dino. This custom slider is automatically listed (by the unique part of the filename, dino) in the slider interaction General tab because these three files were deposited into the sliders folder:dino_hor_thm.gif (thumb), dino_hor_trk.gif (track), and dino_hor_tnail.gif (thumbnail). As shown in Figure 13-17, you can define the ranges in “reverse order”, so to speak, to match the orientation of the range of years on the track. Enter the overall range as 248 to 65. Since these numbers are only used for determining position on the track, you do not need to add the extra zeroes to make the numbers “millions”. If you wanted to represent the full number of years, such as 248,000,000 to 65,000,000, you could do so. However, you cannot enter separators such as commas or decimal points in the Range fields, so you’d use 248000000 to 65000000. Chapter 13: Slider Interactions 329 526057 ch13.qxd 2/14/03 2:46 PM Page 329 Figure 13-17: The Mesozoic Era covers the years from 248 million years ago until 65 million years ago. You can enter the range in reverse order on the General tab. The Reset button is omitted for this interaction. The next step in the process is to define the sub-ranges on the Ranges tab. These sub-ranges equate to each main period in The Mesozoic Era, as follows: ◆ Triassic, from 248 to 206 millions of years ago ◆ Jurassic, from 206 to 144 millions of years ago ◆ Cretaceous, from 144 to 65 millions of years ago Notice that the range numbers overlap. For example, Triassic ends in 206 and Jurassic begins in 206; so when students pick 206, what period are they choosing? If ranges overlap, CourseBuilder associates the overlapped portion with the earliest defined range, so if 206 is selected, CourseBuilder associates it to the Triassic range. Figure 13-18 shows the definitions of each range on the Ranges tab, with Triassic set as correct and Jurassic and Cretaceous set to incorrect. We’ve given each range the name of the Mesozoic period so that it is easier to follow the logic once we go to the Action Manager. 330 Part II: Test and Activity 526057 ch13.qxd 2/14/03 2:46 PM Page 330 [...]... displays the button interaction in Dreamweaver MX, similar to Figure 15 -7 Figure 15-8 shows a flowchart that diagrams the decisions and actions taken by the Action Manager when processing this button interaction 351 5260 57 ch15.qxd 352 2/14/03 2:53 PM Page 352 Part III: Controlling and Processing Interactions Figure 15 -7: The button interaction inserted into the Dreamweaver MX Web page It initiates judgment... processing of interactions 5260 57 PP03.qxd 2/14/03 3:19 PM Page 3 37 Part III Controlling and Processing Interactions CHAPTER 14 Understanding Control and Processing Interactions CHAPTER 15 Button Interactions CHAPTER 16 Timer Interactions CHAPTER 17 Processing Interactions with the Action Manager 5260 57 PP03.qxd 2/14/03 3:19 PM Page 338 5260 57 ch14.qxd 2/14/03 2: 47 PM Page 339 Chapter 14 Understanding... CourseBuilder control interactions and the Action Manager to build highly interactive e-Learning content Summary This chapter described the concepts of the CourseBuilder interactions that manage control and processing of interactions The next chapter describes button interactions 343 5260 57 ch14.qxd 2/14/03 2: 47 PM Page 344 5260 57 ch15.qxd 2/14/03 2:53 PM Page 345 Chapter 15 Button Interactions IN THIS CHAPTER... 0 and ends at location 97 (23% from the left of the track) Jurassic begins at location 97 and ends at location 240 (add the Jurassic 34% to the Triassic 23%) Cretaceous begins at location 240 and ends at location 420 (the end of the scale) You can place the beginning and ending markers for sub-ranges as exactly as you need in a graphics program such as Macromedia Fireworks MX, as long as the program... insert the button inside a layer for easy repositioning within Dreamweaver MX 14 Click the Action Mgr tab CourseBuilder displays the default rules for processing this interaction, which consists of a segment named Button Feedback that includes a Popup Message (that says “Button Pushed”) by default 15 Highlight Popup Message and click Cut 5260 57 ch15.qxd 2/14/03 2:53 PM Page 351 Chapter 15: Button Interactions... Jurassic: 62 (206 minus 144) Cretaceous: 79 (144 minus 65) 331 5260 57 ch13.qxd 332 2/14/03 2:46 PM Page 332 Part II: Test and Activity Now that you know the overall range and each sub-range, you can figure out the percentages that each sub-range covers (numbers are rounded): Triassic: 23% (42 divided by 183) Jurassic: 34% (62 divided by 183) Cretaceous: 43% (79 divided by 183) In our example, the horizontal... Setting an interaction to wait for a button or slider to initiate judgment Figure 14-2: Defining a button to judge a multiple-choice interaction when the student clicks the button 341 5260 57 ch14.qxd 342 2/14/03 2: 47 PM Page 342 Part III: Controlling and Processing Interactions Once the student clicks the button, the Action Manager for that button begins processing and finds a single instruction: start... including the time when the timer expires Because timers are interactions, they include an Action Manager that lets you test conditions or perform actions at the intervals you specify 5260 57 ch14.qxd 2/14/03 2: 47 PM Page 343 Chapter 14: Understanding Control and Processing Interactions The power of control and processing interactions is really in the assemblage of complex tests and activities that... into Macromedia Fireworks MX Using rulers allows you to precisely map locations on a graphical track to ranges used in slider interactions Once the ranges are defined on the Ranges tab, you are ready to define the processing rules in the Action Manager By default, CourseBuilder creates a feedback segments for each range, as well as the standard Correctness segments 5260 57 ch13.qxd 2/14/03 2:46 PM... exercise ◆ Display sample HTML code you write by launching the code into a browser ◆ Initiate evaluation of a test or activity interaction You can easily insert a button into any Web page within Dreamweaver MX by inserting a rollover image and attaching behaviors to it So why use a button interaction? Because each button interaction lets you define processing rules in the Action Manager for that button, . into Dreamweaver MX. Slider_2Ranges Slider_CorrectRange Chapter 13: Slider Interactions 325 5260 57 ch13.qxd 2/14/03 2:46 PM Page 325 Figure 13-13: The Slider_2Ranges interaction, inserted into Dreamweaver. Slider_CorrectRange interaction after it is inserted into Dreamweaver MX. Figure 13-14: The Slider_CorrectRange interaction, inserted into Dreamweaver MXCourseBuilder automatically inserts a text box. Interactions CHAPTER 16 Timer Interactions CHAPTER 17 Processing Interactions with the Action Manager Part III 5260 57 PP03.qxd 2/14/03 3:19 PM Page 3 37 5260 57 PP03.qxd 2/14/03 3:19 PM Page 338 Chapter