Dreamweaver MX e-Learning Toolkit phần 5 potx

Figure 9-13: The multiple-choice interaction inserted into Dreamweaver MX Figure 9-14: The multiple-choice interaction reformatted into a table Chapter 9: True/False and Multiple-Choice Interactions 205 526057 ch09.qxd 2/14/03 3:52 PM Page 205 When you cut and paste (or select and drag) CourseBuilder buttons and other content within Dreamweaver MX, be sure that all of the behaviors attached to that button remain with the button by cutting and pasting any invisible ele- ments (which represent the processing code for the interaction) as well. Choosing Your Multiple-Choice Template The six multiple-choice templates in CourseBuilder Gallery (see Figure 9-15) fall into three categories: ◆ One correct choice with one distractor (MultCh_TrueFalse). ◆ One correct choice with multiple distractors (MultCh_Radios, MultCh_ImageRadios , and MultCh_ImageButton). ◆ One or more correct choices with multiple distractors, also called “all that apply”, MultCh_Checkboxes, and MultCh_ImageChkboxes). Figure 9-15: Multiple-choice templates available in the CourseBuilder Gallery MultCh_ImageRadios MultCh_Radios MultCh_TrueFalse MultCh_ImageChkboxes MultCh_Checkboxes MultCh_ImageButton 206 Part II: Test and Activity 526057 ch09.qxd 2/14/03 3:52 PM Page 206 The next 6 sections describe each of the multiple-choice templates in detail. Choosing true or false (MultCh_TrueFalse) Use the MultCh_TrueFalse template when there are only two choices: one correct and one incorrect. Students use radio buttons for selectors (radio buttons are com- monly used in standard Web forms to let the user select a single option from two or more options). By default, this interaction ◆ Judges an answer correct when the student selects any correct answer (General tab). ◆ Judges the interaction automatically when the student clicks any choice (General tab). ◆ Initially provides two choices (Choices tab). ◆ Lets you optionally select an image instead of text for the content of each choice. Don’t confuse this with image buttons; students do not click on this image to select their choice. (Choices tab). ◆ Initially specifies choice1 as correct and choice2 as incorrect (Choices tab). You can modify these defaults on the General and Choices tabs. Figure 9-16 shows the default layout for the MultCh_TrueFalse interaction after it is inserted into Dreamweaver MX. Figure 9-16: The MultCh_TrueFalse interaction, inserted into Dreamweaver MX Chapter 9: True/False and Multiple-Choice Interactions 207 526057 ch09.qxd 2/14/03 3:52 PM Page 207 Choosing one from many with radio buttons (MultCh_Radios) Use the MultCh_Radios template when there is only one correct choice among multiple distractors, and you want to use a standard radio button as a selector (radio buttons are commonly used in standard Web forms to let the user select a single option from many options). By default, this interaction ◆ Judges an answer correct when the student selects any correct answer (General tab). ◆ Judges the interaction automatically when the student clicks any choice (General tab). ◆ Initially provides four choices (Choices tab). ◆ Lets you optionally select an image instead of text for the content of each choice. Don’t confuse this with image buttons; students do not click this image to select their choice (Choices tab). ◆ Initially specifies choice1 as correct and all other choices incorrect (Choices tab). You can modify these defaults on the General and Choices tabs. Figure 9-17 shows the default layout for the MultCh_Radios interaction after it is inserted into Dreamweaver MX. Figure 9-17: The MultCh_Radios interaction, inserted into Dreamweaver MX 208 Part II: Test and Activity 526057 ch09.qxd 2/14/03 3:52 PM Page 208 Choosing one from many with image radio buttons (MultCh_ImageRadios) Use the MultCh_ImageRadios template when there is only one correct choice among multiple distractors, and you want to use an image button as a selector (see Table 6-2 for a description of the buttons available; of course, you can also use custom buttons). By default, this interaction ◆ Judges an answer correct when the student selects any correct answer (General tab). ◆ Judges the interaction automatically when the student clicks any choice (General tab). ◆ Positions the button selector to the left of the text for each choice (Choices tab). ◆ Initially provides four choices (Choices tab). ◆ Lets you optionally select an image instead of text for the content of each choice. Don’t confuse this with image buttons; students do not click on this image to select their choice (Choices tab). ◆ Initially specifies choice1 as correct and all other choices incorrect (Choices tab). You can modify these defaults on the General and Choices tabs. Figure 9-18 shows the default layout for the MultCh_ImageRadios interaction after it is inserted into Dreamweaver MX. Choosing one from many with image buttons MultCh_ImageButton Use the MultCh_ImageButton template when there is only one correct choice among multiple distractors, and you want to use a custom image button as a selector (for example, students click on photographs of presidents to indicate their choices in The Presidential Files sample on the CD-ROM). By default, this interaction ◆ Judges an answer correct when the student selects any correct answer (General tab). ◆ Judges the interaction automatically when the student clicks any choice (General tab). ◆ Positions the button selector to the left of the text for each choice (Choices tab). ◆ Initially provides four choices (Choices tab). Chapter 9: True/False and Multiple-Choice Interactions 209 526057 ch09.qxd 2/14/03 3:52 PM Page 209 ◆ Lets you optionally select an image instead of text for the content of each choice. Don’t confuse this with image buttons; students do not click this image to select their choice (Choices tab). ◆ Initially specifies choice1 as correct and all other choices incorrect (Choices tab). Figure 9-18: The MultCh_ImageRadios interaction, inserted into Dreamweaver MX You can modify these defaults on the General and Choices tabs. Figure 9-19 shows the default layout for the MultCh_ImageButton interaction after it is inserted into Dreamweaver MX. You can select the image for image buttons in the Choices tab by using the Appearance field’s Browse button to browse to a file for each choice. Or, as shown in Figure 9-19, you can let CourseBuilder insert placeholder images into the Web page and change those images on the Properties panel in Dreamweaver MX. 210 Part II: Test and Activity 526057 ch09.qxd 2/14/03 3:52 PM Page 210 Figure 9-19: The MultCh_ImageButton interaction, inserted into Dreamweaver MX Choosing all that apply with checkboxes (MultCh_Checkboxes) Use the MultCh_Checkboxes template when there are one or more correct choices among multiple distractors. (Checkboxes are commonly used in standard Web forms to let the user select “all that apply” from a set of options.) By default, this interaction ◆ Judges an answer correct when the student selects all (not just any) correct answer (General tab). ◆ Judges the interaction when the student clicks a Submit button because the interaction often has more than one correct answer (General tab). ◆ Inserts a Reset button (General tab). ◆ Positions the checkbox selector to the left of the text for each choice (Choices tab). ◆ Initially provides four choices (Choices tab). Chapter 9: True/False and Multiple-Choice Interactions 211 526057 ch09.qxd 2/14/03 3:52 PM Page 211 ◆ Lets you optionally select an image instead of text for the content of each choice. Don’t confuse this with image buttons; students do not click on this image to select their choice (Choices tab). ◆ Initially specifies choice1 and choice2 as correct, and choice3 and choice4 as incorrect (Choices tab). You can modify these defaults on the General and Choices tabs. Figure 9-20 shows the default layout for the MultCh_Checkboxes interaction after it is inserted into Dreamweaver MX. Figure 9-20: The MultCh_Checkboxes interaction, inserted into Dreamweaver MX Choosing all that apply with image checkboxes (MultCh_ImageChkboxes) Use the MultCh_ImageChkboxes template when there are one or more correct choices among multiple distractors, and you want to use an image button as a selector (see Table 6-2 for a description of the buttons available; you can also use custom buttons). By default, this interaction ◆ Judges an answer correct when the student selects all (not just any) correct answer. (General tab). 212 Part II: Test and Activity 526057 ch09.qxd 2/14/03 3:52 PM Page 212 ◆ Judges the interaction when the student clicks a Submit button because interaction often has more than one correct answer (General tab). ◆ Inserts a Reset button (General tab). ◆ Positions the checkbox selector to the left of the text for each choice (Choices tab). ◆ Initially provides four choices (Choices tab). ◆ Lets you optionally select an image instead of text for the content of each choice. (Don’t confuse this with image buttons.) ◆ Initially specifies choice1 and choice2 as correct, with choice3 and choice4 as incorrect (Choices tab). You can modify these defaults on the General and Choices tabs. Figure 9-21 shows the default layout for the MultCh_ImageChkboxes interaction after it is inserted into Dreamweaver MX. Figure 9-21: The MultCh_ImageChkboxes interaction, inserted into Dreamweaver MX Chapter 9: True/False and Multiple-Choice Interactions 213 526057 ch09.qxd 2/14/03 3:52 PM Page 213 Defining the Choices Tab Properties The Choices tab is unique to multiple-choice interactions. Figure 9-22 shows the Choices tab with the default settings for the MultCh_ImageChkboxes, Figure 9-22: The Choices tab for the MultCh_ImageChkboxes multiple-choice interaction On the Choices tab, you ◆ Define correct and incorrect choices by highlighting each choice in the Choices list, and selecting Correct or Incorrect from the Choice Is drop- down menu at the bottom of the Choices tab (define one at a time). ◆ Use the Add and Delete buttons to add new or delete existing choices. ◆ Rearrange the order of choices by highlighting a choice and clicking the Up or Down button to reposition the choice. ◆ Name for the choice, which is an internal name used for processing. Adds a new choice or Deletes an existing choice in the Choices list. Moves the order of a highlighted choice up or down the list. 214 Part II: Test and Activity 526057 ch09.qxd 2/14/03 3:52 PM Page 214 [...]... General and Responses tabs Figure 10-16 shows the default layout for the Text_Multiline interaction after it is inserted into Dreamweaver MX 2 35 526 057 ch10.qxd 236 2/14/03 3 :53 PM Page 236 Part II: Test and Activity Figure 10-16: The Text_Multiline interaction inserted into Dreamweaver MX Generally speaking, you’ll find very little use for this interaction There are too many lines to make it an effective... same text-entry interaction from the course author’s perspective Figure 10-3 shows the Text Entry question opened in Dreamweaver MX 52 6 057 ch10.qxd 2/14/03 3 :53 PM Page 223 Chapter 10: Text Entry (Fill-in-the-Blank) Interactions Figure 10-3: The text-entry question open in Dreamweaver MX The question consists of a single-line text area interaction This type of textentry interaction is called Text_Singleline... Action Manager 231 52 6 057 ch10.qxd 232 2/14/03 3 :53 PM Page 232 Part II: Test and Activity 18 Click OK when you’ve completed defining the rules in the Action Manager CourseBuilder writes the processing rules into the HTML file, and displays text-entry question in Dreamweaver MX, similar to Figure 10-13 Figure 10-13: The single-line text-entry interaction inserted into Dreamweaver MX Choosing Your Text... button) 2 15 526 057 ch09.qxd 216 2/14/03 3 :52 PM Page 216 Part II: Test and Activity Figure 9-23: Initial screen from The Presidential Files, a multiple-choice course where students click on image buttons (MultCh_ImageButtons) to select answers Figure 9-24: Select the image for each image button by browsing to the image file from the Appearance field on the Choices tab 52 6 057 ch09.qxd 2/14/03 3 :52 PM Page... multiple-line standard form text area field, with a width of 40 characters and a length of 4 lines visible You can easily change the size by selecting the text field in Dreamweaver MX and entering a different 52 6 057 ch10.qxd 2/14/03 3 :53 PM Page 2 35 Chapter 10: Text Entry (Fill-in-the-Blank) Interactions character width or number of lines (Char Width and Num Lines fields) on the Properties panel ◆ Inserts... default to incorrect (Responses tab) You can modify these defaults on the General and Responses tabs Figure 10- 15 shows the default layout for the Text_Singleline interaction after it is inserted into Dreamweaver MX Figure 10- 15: The Text_Singleline interaction, inserted into Dreamweaver MX Choosing multiple-line text area (Text_Multiline) Use the Text_Multiline template when you want a text-entry... single-line standard form text field, with a width of 24 characters visible You can easily change the size by selecting the text field in Dreamweaver MX and entering a different character width (Char Width field) on the Properties panel 52 6 057 ch10.qxd 2/14/03 3 :53 PM Page 233 Chapter 10: Text Entry (Fill-in-the-Blank) Interactions Text_Singleline Text_Multiline Figure 10-14: Text-entry templates available... interaction Because of the nature of what we are asking (syntax), we will define only the correct answers and judge every other answer as incorrect 52 6 057 ch10.qxd 2/14/03 3 :53 PM Page 2 25 Chapter 10: Text Entry (Fill-in-the-Blank) Interactions Figure 10 -5: General tab for the Text_Singleline interaction The options for Text_Singleline and Text_Multiline on the General tab are identical Before we define... course 229 52 6 057 ch10.qxd 230 2/14/03 3 :53 PM Page 230 Part II: Test and Activity Figure 10-10: Select the Set Text of Frame action Figure 10-11: Enter the text for student feedback when they answer correctly (defined by the if Correct contition) This text is written to the frame named blackboard 17 Repeat Steps 14-16 for the if Incorrect and if Unknown Response conditions as well 52 6 057 ch10.qxd... requirements 3 Click the Text_Singleline template CourseBuilder inserts a working copy of the template into your Dreamweaver MX page, and activates the additional tabs for that template (General, Responses, Action Mgr) in the dialog box, as shown in Figure 10-4 223 52 6 057 ch10.qxd 224 2/14/03 3 :53 PM Page 224 Part II: Test and Activity Figure 10-4: The CourseBuilder Gallery with the single line text-entry . into Dreamweaver MX Figure 9-14: The multiple-choice interaction reformatted into a table Chapter 9: True/False and Multiple-Choice Interactions 2 05 526 057 ch09.qxd 2/14/03 3 :52 PM Page 2 05 When. inserted into Dreamweaver MX. Figure 9-16: The MultCh_TrueFalse interaction, inserted into Dreamweaver MX Chapter 9: True/False and Multiple-Choice Interactions 207 52 6 057 ch09.qxd 2/14/03 3 :52 PM Page. after it is inserted into Dreamweaver MX. Figure 9-17: The MultCh_Radios interaction, inserted into Dreamweaver MX 208 Part II: Test and Activity 52 6 057 ch09.qxd 2/14/03 3 :52 PM Page 208 Choosing