Dreamweaver MX e-Learning Toolkit phần 8 doc

Figure 16-18: When Speed Limits reaches the 60 mph mark, a graphic of a speeder being pulled over appears on the divider lines. The test ends in one of two ways (similar to the HTML Basics final examination described earlier in this chapter): ◆ The student clicks the police button when he has finished answering the four questions. ◆ Time expires at 75 seconds and the timer automatically disables the test interactions and grades whatever work was completed. The first step in creating this timer interaction is to generate the graphics for the speed limit sign. If we have a 75-second timer and want to update that timer every 5 seconds, then we need 16 different graphics, as shown in Figure 16-19. Although the creation of so many graphics may look like a daunting task, it isn’t that bad! The quickest way to create images for custom timers is to open the start- ing image in a graphics program and just tweak and save each file (following the file naming conventions for timers, and saving the images to the timers folder for that site). Remember, you can use as few or as many images as you want; however, a greater number of images provides for a more animated timer. Trigger fires at 60 seconds, displaying animated graphic in previously hidden layer Chapter 16: Timer Interactions 379 526057 ch16.qxd 2/14/03 2:54 PM Page 379 Figure 16-19: The speed limit timer uses 15 different graphics files to display the timer. In addition to the timer graphics, the timer also requires a thumbnail graphic used on the General tab of the CourseBuilder Interaction dialog box, as shown in Figure 16-19. After the timer images are created and stored in the timers folder, you can insert that timer in any Web page. To insert it in the Speed Limits test, click the Insert CourseBuilder Interaction icon on the Learning tab. From the CourseBuilder gallery, select the Timer interaction, and then select the Timer_ Forward2Trigs. Click on the General tab and select the speed timer from the Appearance drop- down menu. Notice that CourseBuilder displays the thumbnail graphic (speed_tnail.gif) when you select the speed timer, as shown in Figure 16-20. Set Duration to 75, and uncheck the Create a Reset button field. On the Triggers tab, define Trigger1 to fire at 60 seconds and Trigger2 to fire at 75 seconds. Then on the Action Mgr tab, we define the actions that the two triggers initiate (see Figure 16-21). Trigger1, which fires at 60 seconds, initiates a Show-Hide Layers action that shows the layer containing the animated graphic of the pulled-over speeder. Trigger2, which fires at 75 seconds, initiates a Judge Interaction that judges the 4 questions and displays feedback for each question using an Action Manager inter- action (Action Manager interactions are fully discussed in Chapter 17). 380 Part III: Controlling and Processing Interactions 526057 ch16.qxd 2/14/03 2:54 PM Page 380 Figure 16-20: When the speed timer is selected, CourseBuilder displays the thumbnail graphic on the General tab. Figure 16-21: Setting the actions for the triggers Chapter 16: Timer Interactions 381 526057 ch16.qxd 2/14/03 2:54 PM Page 381 Summary This chapter described how to: ◆ Use of timers to control the allotted times for tests and activities. ◆ Add multiple triggers to control actions at timed intervals. ◆ Create custom timers. The next chapter describes how to make full use of the Action Manager to process interactions. 382 Part III: Controlling and Processing Interactions 526057 ch16.qxd 2/14/03 2:54 PM Page 382 Chapter 17 Processing Interactions with the Action Manager IN THIS CHAPTER ◆ Examining how the Action Manager drives all processing for CourseBuilder interactions ◆ Comparing the Action Mgr tab and the Action Manager interaction ◆ Using the Action Manager interface to enter and modify processing rules ◆ Working with segments, conditions, and actions ◆ Testing the condition of interaction and interaction element properties ◆ Scoring single-page and multiple-page examinations A point of frequent misunderstanding with the Action Manager is that course authors can define the rules for the Action Manager in two places: ◆ The Action Mgr tab ◆ The Action Manager interaction It may help you avoid confusion to think of the Action Manager as one room (with two doors: Action Mgr tab and Action Manager interaction. That is, you can define the same rules on the Action Mgr tab that you define on the Action Manager interaction. While they both enable you to perform the same task, you typically use the Action Mgr tab to define the rules for processing when you have one or two interactions on a single page. You normally use the Action Manager interaction to define the rules for processing when you have several or many interactions on a single page. The key benefit of the Action Manager interaction is that it allows you to modify all of the processing rules for a page (regardless of how many interac- tions you have) in a single location. 383 526057 ch17.qxd 2/14/03 2:55 PM Page 383 References throughout this book to the “Action Manager” refer to both the Action Manager available to individual interactions through the Action Mgr tab, and the Action Manager as an interaction. Regardless of which path to the Action Manager you choose, you always end up in the same “room,” shown in Figure 17-1. Figure 17-1: The Action Manager The Action Manager drop-down menu shows all of the actions available. The bottom of the list includes other behaviors you have installed through the use of the Extension Manager in Dreamweaver MX. (The composite graphic in Figure 17-1 shows a complete list.) The Action Manager as an interaction We’ve seen plenty of examples throughout this book of the Action Mgr tab. Let’s pick door number 2 and build a more complex set of rules using the Action Manager as an interaction. We won’t be seeing this project from the student’s per- spective, because students see no difference at all whether you’ve defined rules using the Action Mgr tab or the Action Manager interaction. 384 Part III: Controlling and Processing Interactions 526057 ch17.qxd 2/14/03 2:55 PM Page 384 In Chapter 16 we discussed an example in which timers were used to manage the time allotted for the final exam in the HTML Basics course. (If you haven’t already tried the exam, I recommend you take it now. The experience will make it much easier for you to follow the concepts presented in this chapter.) To build that final exam required ◆ 10 multiple-choice interactions, one for each question ◆ 1 button interaction that students press when they’ve completed the test ◆ 1 timer interaction set for 360 seconds (6 minutes) ◆ 1 Action Manager interaction that judges each of the 10 multiple-choice interactions, and processes the scoring at the end of the exam Figure 17-2 shows a portion of the final exam for the HTML Basics course. When students take the exam, they have six minutes to answer 10 questions. Figure 17-2: Students don’t receive evaluation or feedback on the HTML Basics final examination until it is judged. The 10 multiple choice interactions are not evaluated until student presses the Grade It button. Then all 10 interactions are evaluated once, and feedback is written to the bottom frame. Chapter 17: Processing Interactions with the Action Manager 385 526057 ch17.qxd 2/14/03 2:55 PM Page 385 When students finish the exam and click the Grade It button at the end of the exam @or when time expires — they receive their grade in the bottom frame (blackboard) of the frameset, as shown in Figure 17-3. Students also receive feed- back on each question, which is displayed in hidden feedback layers positioned next to each question. Figure 17-3: Students receive their grade in the bottom frame, as well as specific feedback on each answer. To centralize the processing of the rules for the 10 multiple-choice questions, we left the Action Mgr tab for all 10 multiple-choice interactions empty. We want to create an Action Manager interaction that is initiated by the Grade It button, and which then 1. Processes the rules for each of the 10 multiple-choice questions: If the student answered correctly, the Action Manager writes the word Correct in the hidden feedback layer. If the student answered incorrectly, the Action Manager writes the word Incorrect and identifies the correct answer in the hidden feedback layer. If the student didn’t answer, the Action Manager writes the phrase “Incorrect because of lack of response” in the hidden feedback layer. 386 Part III: Controlling and Processing Interactions 526057 ch17.qxd 2/14/03 2:55 PM Page 386 2. Calculates and displays the total score in the bottom frame. 3. Shows (makes visible) all hidden feedback layers so the student can see the feedback for each question. The following example describes how to insert the hidden feedback layers; insert the Action Manager; and insert the button that “kicks it into play” (initiates pro- cessing). We assume that the 10 multiple-choice questions are already included in the file, and that the Action Mgr tab for each of those interactions is blank. 1. Move to the top of the final exam page, if not already there. 2. Insert the 10 student feedback layers, which will be hidden from view until the exam is evaluated. To do so, click the Draw Layer icon on the Insert panel’s Common tab. Dreamweaver changes the cursor into cross- hairs. 3. Position the cursor near Question 1 and draw a small rectangular layer (don’t worry about the size now; we’ll change it to exact dimensions later). 4. Click on the newly-drawn layer to view its properties in the Properties panel. Change its properties as follows (see Figure 17-4): Layer ID to Q1feedback. When you create feedback layers in a Dreamweaver page, it is better to use a specific name related to the function of that layer. That way, it is easier to identify specific layers when, for example, you need to refer to them in defining rules in the Action Manager. W (width) to 180 and H (height) to 60. By setting the layer size numer- ically, you can ensure that all feedback layers are exactly the same size. Z-Index is 30 (as discussed earlier in this book, higher numbered Z-Index layers will display in front of lower numbered Z-Index layers should they overlap). Vis (visible) to hidden. We don’t want the student to see these layers until after the examination, so we want the initial state of them to be hidden. Bg Color to #FFFFCC (to give it contrast to the background). Overflow to auto, meaning that if the text exceeds the defined size of the layer, the layer automatically adds scrollbars. 5. Repeat steps 2–4 for questions 2–10. The only differences between layers are the Layer ID name (use names Q2feedback through Q10feedback) and the placement of each feedback layer next to the corresponding question. Chapter 17: Processing Interactions with the Action Manager 387 526057 ch17.qxd 2/14/03 2:55 PM Page 387 Figure 17-4: Changing the properties of the hidden feedback layer 6. Click anywhere within the file to insert the Action Manager interaction. Although the location of the Action Manager doesn’t matter for process- ing purposes, I generally find it easier to locate the Action Manager if I put it either at the beginning or end of the file, rather than intermingled among test and activity interactions. 7. Click the Insert CourseBuilder Interaction button on the Learning tab. The CourseBuilder Interaction dialog box displays, with the CourseBuilder Gallery active. 8. Choose the Action Manager category to display the Action Manager tem- plate (see Figure 17-5). 9. Click the ActionMgr template. CourseBuilder inserts an additional CourseBuilder interaction invisible element (placeholder) into the Web page, and displays the General and Action Mgr tabs. It does not insert anything that would be visible to the student. 10. Click the General tab (see Figure 17-6) to define the general properties for the Action Manager. There aren’t as many definitions on this General tab as there are for other interactions. 388 Part III: Controlling and Processing Interactions 526057 ch17.qxd 2/14/03 2:55 PM Page 388 [...]... Q1feedback and click the Show button, and repeat the process for the rest of the feedback layers (Q2feedback through Q10feedback) (see Figure 17- 18) Click OK in the Show-Hide Layers dialog box Click OK in the CourseBuilder Interaction dialog box to the page in Dreamweaver MX Notice that there’s no visible evidence of all that work! The Action Manager is specifically meant for behind-the-scenes processing 399... the question number in the Condition Editor Edit each else if Question Incorrect Condition Name and Interaction to increment the question number in the Condition Editor 397 526057 ch17.qxd 3 98 2/14/03 2:55 PM Page 3 98 Part III: Controlling and Processing Interactions Figure 17-15: Copying and pasting segments can save substantial time if the segments are structured similarly On the Set Text of Layer action... was{G01.score+G02.score+G03.score+G04.score+G05.score+G06 score+G07.score+G 08. score+G09.score+G10.score} Please review your test comments for each question by scrolling up through the test. The calculation of student scores is discussed later in this chapter; however, everything you need to do to calculate the score is shown in Figure 17- 18 — CourseBuilder automatically assigns all of the values to variables... Question 1 14 Type Judge Question 1 in the Segment Editor dialog box, as shown in Figure 17 -8 There are two additional options in the dialog box, which we’ll discuss later in this chapter For this exercise, accept the default: Always evaluate from the beginning Click OK in the Segment Editor dialog box Figure 17 -8: Inserting the first segment in the Action Manager With the first segment identified, we... Condition Editor for a multiple-choice interaction that has four elements (buttons) Figure 17-24: A bug that allows the Condition Editor to recognize only every other element 407 526057 ch17.qxd 4 08 2/14/03 2:55 PM Page 4 08 Part III: Controlling and Processing Interactions With choices only for Button 1 and Button 3, how can you test properties on Button 2 and Button 4? The workaround is to change the view... there is no response to judge We can, however, add an Else statement in the Action Manager, which indicates the action to run if all of the other conditions (Is it correct? Is it incorrect?) are not true 28 Select the Else statement (just below Condition) from the Action Manager drop-down menu and click the Add button CourseBuilder inserts the Else statement in the Action Manager 29 Select the Set Text... to us at this point is Judge Interaction, defining what initiates judgment of this Action Manager interaction By the design of our test, either the Grade It button or the timer can initiate processing 389 526057 ch17.qxd 390 2/14/03 2:55 PM Page 390 Part III: Controlling and Processing Interactions of the rules defined in the Action Manager, so we need to specify that this Action Manager wait for another...526057 ch17.qxd 2/14/03 2:55 PM Page 389 Chapter 17: Processing Interactions with the Action Manager Figure 17-5: Selecting the Action Manager category from the CourseBuilder Gallery Figure 17-6: General tab for the ActionMgr interaction 11... click the Add button CourseBuilder launches the Condition Editor, which is the tool you use to define conditions in the Action Manager The first condition we must test for (as the flowchart in Figure 17 -8 shows) is whether the student’s answer to Question 1 is correct 391 526057 ch17.qxd 392 2/14/03 2:55 PM Page 392 Part III: Controlling and Processing Interactions 16 Type Question 1 Correct in the Condition... 2:55 PM Page 400 Part III: Controlling and Processing Interactions Figure 17-17: Inserting the text and code to calculate and display the student’s score in the bottom frame named blackboard Figure 17- 18: Setting the feedback layers to Show (making them visible to students) 526057 ch17.qxd 2/14/03 2:55 PM Page 401 Chapter 17: Processing Interactions with the Action Manager Using the Action Manager The . General tab as there are for other interactions. 388 Part III: Controlling and Processing Interactions 526057 ch17.qxd 2/14/03 2:55 PM Page 388 Figure 17-5: Selecting the Action Manager category. 16-21: Setting the actions for the triggers Chapter 16: Timer Interactions 381 526057 ch16.qxd 2/14/03 2:54 PM Page 381 Summary This chapter described how to: ◆ Use of timers to control the allotted. use of the Action Manager to process interactions. 382 Part III: Controlling and Processing Interactions 526057 ch16.qxd 2/14/03 2:54 PM Page 382 Chapter 17 Processing Interactions with the Action