A Rapid Development Toolkit for Instructional Designers

Transcription

1 605 A Rapid Development Toolkit for Instructional Designers Beth Weingroff Senior Instructional Designer, JPMorgan Chase

2 The Rapid Development Toolkit for Instructional Designers About the session 1.Distinguish between passive and active learning. 2.Reinforce concepts and facts with active learning. 3.Design different solutions for the same gap. 4.Tailor your solutions to your audience. 5.Rapidly design and build e-learning using engaging activities. What is the Rapid Development Toolkit? Body of work containing customizable interactive Flash activities that support different levels of cognitive learning in an e-learning environment. Page 1

3 How did it come about? JPM Chase Process / procedure Application training Just-in-time Relatively short shelf life Version 2 is just around the corner My world Small team of IDs Responsible for A - Z Typical project may last 3 months Scope project / sign off Analysis (user and task) / negotiate and sign off Work, usability test, work, test, work, pilot, tweak, test Deploy What s the bottom line? Build and share - don t need to reinvent the wheel Decrease in time to completion Consistent approach Increase in time to think creatively Page 2

4 Why use it? Promotes active learning Maximizes learning impact Allows rapid development Anticipates client needs Has a significant WOW factor What types of activities? Answer questions Sequence events Compare with an expert Perform a task Operate an application Behind the scenes Course pages built in Dreamweaver Reusable interface Style with.css Customize interactive Flash activities Import.swf files into html pages Page 3

5 What types of activities? Answer questions What types of activities? Answer questions What types of activities? Sequence events Page 4

6 What types of activities? Compare with an expert What types of activities? Perform a task / operate an application This is where is gets interesting Page 5

7 This is where is gets interesting Cognitive The cognitive domain involves knowledge and the development of intellectual skills. This includes: Recall or recognition of specific facts Procedural patterns Concepts that serve in the development of intellectual abilities and skills There are six major categories which can be thought of as degrees of difficulties. That is, the first one must be mastered before the next one can take place. Page 6

8 From the simplest behavior to the most complex 1.Knowledge 2.Comprehension 3.Application 4.Analysis 5.Synthesis 6.Evaluation Teaching an instrument 1. Knowledge: Notes have names recite them 2. Comprehension: Identify notes on paper or by ear 3. Application: Play notes 4. Analysis: Did you play notes correctly 5. Synthesis: Teach back 6. Evaluation: Critique your playing technical and musical components 1. Knowledge Definition: Recall data or information Key Words: Define, describe, label, match, reproduce Activity: Question and Answer Fill in the blank Page 7

9 2. Comprehension Definition: Meaning, interpretation of instructions and problems Key Words: Distinguish, estimate, explain, rewrite Activity: Compare with expert Put in the right order Identify the next step Which of the following is an example of 3. Application Definition: Apply learning Key Words: Demonstrate, modify, predict, solve, use Activity: Simulation Put in the right order Who is responsible 4. Analysis Definition: Separate concepts into component parts Key Words: Analyze, illustrate, outline, compare Activity: Simulation (Assessment level) Answer questions Write Analogies Page 8

10 5. Synthesis Definition: Put parts together to form a whole Key Words: Generate, compose, design, reorganize, tell Activity: Lead / teach back / mentor / monitor Scenario based 6. Evaluation Definition: Judge the value of ideas or materials. Key Words: Compare, criticize, evaluate, critique Activity: Perform a SWOT analysis in relation to alternatives: Strengths Weaknesses Opportunities Threats References: #bloom's%20taxonomy%20overview Page 9

11 Activity Divide into groups Match learning outcomes to activities: Identify what you want user to know. Determine how to present the information. Select reinforcing activities. 20 minutes to create flow Debrief Let s get started Drag and Drop Flash activity Thank you! Page 10

12 DRAG AND DROP This Drag and Drop activity is easy to build and customize. The pairs may be text, images or a combination of either. The ActionScript remembers the start and end coordinates and two types of feedback ensure that learners get it. ABOUT BUILDING THE ACTIVITY To build this Drag and Drop activity, you ll create a button, add ActionScript, and create a movie clip based on the button. You ll duplicate the movie clip to create three steps. Then, you ll create a target and copy it so there are corresponding targets for each step. Next, you ll create a feedback textbox. Finally, you will determine the order of the matches between steps and targets. INTERFACE Users will see three steps and three targets and a feedback field. GOAL Users determine the correct order of the steps by clicking and dragging them to the appropriate targets. FEEDBACK Users receive feedback in two ways: 1. When a step is dragged to an incorrect target, it bounces back to the starting position. When placed correctly, it sticks and the target Alpha changes to Written feedback appears in a text box. SESSION 605 A RAPID DEVELOPMENT TOOLKIT FOR INSTRUCTIONAL DESIGNERS BETH WEINGROFF, JPMORGAN CHASE

13 CREATE A NEW FLASH DOCUMENT Suggested document properties: (Modify menu > Document) Width: 650px Height: 400px Frame rate: 12 Ruler Units: Pixels CREATE A BUTTON 1. Click the Rectangle Tool. 2. Deactivate the Stroke Color. 3. Select a Fill Color. 4. Click and drag a rectangle to any size. 5. Use the Selection Tool to select the rectangle. 6. Using the Properties Panel, resize the rectangle to: W: 160 H: Convert the rectangle to a button symbol: Modify > Convert to Symbol or F8 Name: Btn1 Behavior: Button 8. Double-click Btn1. 9. Drag the keyframe from Up to Hit, leaving Up, Over, and Down empty. Click Scene 1 to return to the main timeline. SESSION 605 A RAPID DEVELOPMENT TOOLKIT FOR INSTRUCTIONAL DESIGNERS BETH WEINGROFF, JPMORGAN CHASE

14 CREATE THE FIRST MOVEABLE STEP November 5-8, With Btn1 selected, convert to a Movie Clip and name it mc_step1. 2. With mc_step1 highlighted, give it an Instance Name of Step1. 3. Double-click Step1. On the timeline, rename Layer 1 Button. 4. Click the rectangle. 5. Open the Actions panel and paste the following code: on (press) { this.startdrag(); _root.answer1 = ""; this.startpositionx=this._x; this.startpositiony=this._y; } on (release) { stopdrag(); if (eval(this._droptarget) == _root.target1) { _root.answer1 = "Correct! This is Step 1."; _root.target1._alpha=0; this._x = eval(this._droptarget)._x; this._y = eval(this._droptarget)._y; } else { _root.answer1 = "Sorry, please again."; this._x=this.startpositionx; this._y=this.startpositiony; } } 6. Create a second layer on the timeline and name it ButtonText. 7. Pull the ButtonText layer below the Button layer. 8. Click the Text tool, click the Stage and from the Properties pane, select: Static Text Font: Verdana Size: 14 Color: Type Step 1. Click the Selection Tool, click the text and position it over the rectangle. Click Scene 1 to return to the main timeline. SESSION 605 A RAPID DEVELOPMENT TOOLKIT FOR INSTRUCTIONAL DESIGNERS BETH WEINGROFF, JPMORGAN CHASE

15 DUPLICATE MOVIE CLIP 1. In the Library (F11), right-click mc_step1 and select Duplicate. The Duplicate Symbol window appears. 2. In the Name field, type mc_step2. 3. Accept the Movie clip option and click OK. 4. Repeat duplication once more and name the movie clip Step3. CUSTOMIZE THE MOVIE CLIPS 1. Pull mc_step2 to the stage from the Library and place below Step1 on the Stage. 2. Provide the Instance Name Step2. 3. Double-click Step2. 4. Lock the Button layer. 5. In the Text layer, change the text to Step Unlock the Button Layer by clicking the lock to toggle it off. 7. Click the Selection Tool and click the rectangle on the stage. 8. Open the Actions panel. 9. Modify the ActionScript as follows: Within the code, change just the highlighted numbers displayed below. In Step2, change each highlighted 1 to 2. if (eval(this._droptarget) == _root.target1) { _root.answer1 = "Correct! This is Step 1."; _root.target1._alpha=0; 10. Click Scene 1 to return to the main timeline. 11. Drag mc_step3 to the stage from the Library. 12. Provide the Instance Name of Step Edit the text and ActionScript per instructions above and code per instructions above. Click Scene 1 to return to the main timeline. SESSION 605 A RAPID DEVELOPMENT TOOLKIT FOR INSTRUCTIONAL DESIGNERS BETH WEINGROFF, JPMORGAN CHASE

16 NAME AND ADD LAYERS ON THE TIMELINE November 5-8, Name Layer 1 Steps. 2. Add two additional layers to the timeline. 3. Name them Target and Text. Note: Pull the Steps layer above Target so they appear as illustrated. CREATE A TARGET 1. Click keyframe 1 on the Target layer of the main timeline. 2. Use the rectangle tool to create a rectangle with the following properties: Stroke color: Fill color: CCCCCC Width: 200px Height: 38px 3. Select the rectangle, convert it to a movie clip and name it mc_target. 4. On the Properties Panel, provide an Instance Name of Target1. ADD THE REMAINING TARGETS TO THE TARGET LAYER 1. To add additional targets, either drag mc_target1 from the Library to the stage two times or copy the existing target on the stage and paste it two times. 2. Provide each target with the unique Instance Name of: Target2 Target3 CREATE THE FEEDBACK TEXT FIELD 1. Click keyframe 1 of the Text layer on the main timeline. 2. Click the Text Tool and draw a Text box with the following properties: Dynamic Text Line Type: Multiline Text color: Show border around text: Select Format Options: Left Margin: 4 px Right Margin: 4 px 3. In the Var field type answer1. SESSION 605 A RAPID DEVELOPMENT TOOLKIT FOR INSTRUCTIONAL DESIGNERS BETH WEINGROFF, JPMORGAN CHASE

17 Publish the file and test it! Add images and text to complete your activity. CHANGE THE ORDER OF THE TARGETS This is the best part! To change the order of the targets, just swap target Instance Names. For example, change Target1 Instance Name to Target3 and so on. REPOSITION THE STEPS OR THE TARGETS No problem! Move them wherever you want. The ActionScript remembers where you put them. ADD MORE STEPS AND TARGETS To add more steps, duplicate an item, give the next numeric value, and modify the ActionScript. To add another target on the stage, drag another instance from the Library and name it the next numeric value on the Properties Panel such as Target4. SESSION 605 A RAPID DEVELOPMENT TOOLKIT FOR INSTRUCTIONAL DESIGNERS BETH WEINGROFF, JPMORGAN CHASE