eme 6226 assignment 1 revised flowcharts, storyboards and ... · storyboard 4 frame # 5610 –...

of 29

EME 6226 Assignment 1

Revised Flowcharts, Storyboards and Narrative “American Red Cross Lifeguard Certification”

Original Project by Team Instructables (Fall 2013)

Revisions by:

Team 1st Responders

Ben Wilson Jonathan Parker Snelson

Roger Hadley Tracy Carpenter

of 29

Table of Contents

Team Note .......................................................................................................................................................................................................... 3

Table 1 – Flowchart Elements .............................................................................................................................................................................. 3

Table 2 – Mayer’s (2009) Design Principles ........................................................................................................................................................... 4

Table 3 – William’s (2008) Design Principles ......................................................................................................................................................... 8

Flowcharts ........................................................................................................................................................................................................... 9 Figure 1 – Flowchart of Basic Canvas Features .....................................................................................................................................................................9 Figure 2 – Flowchart of Instructional Unit(s) ...................................................................................................................................................................... 10 Figure 3 – Flowchart of Assessments ................................................................................................................................................................................. 11

Revised Storyboards .......................................................................................................................................................................................... 12

of 29

Team Note Team 1st Responders selected the flowchart and storyboard project that was created by team Instructables in the Fall semester of 2012. The

present team reviewed the original project after a study of design principles posited by Mayer (2009) in his book Multi-Media Learning. The project

flowchart was reviewed for consistency against the storyboards. Storyboards were reviewed with respect to principles that reduce extraneous

cognitive processing, manage essential processing, and foster generative processing. Table 1 below summarizes where the storyboards were out of

alignment with the flowchart. Table 2 likewise shows where design was out of alignment with design principles and points out where changes are

made to the original project. Finally Table 3 shows the four basic design principles by (Williams, 2008).

Table 1 – Flowchart Elements FLOWCHART ELEMENT RELATED STORYBOARD PAGE NUMBER COMMENTS

Missing or unnamed flowchart elements Video Storyboards page 1-10 Video references links to frame 6206 to 6215 which are not present in the storyboard. Video appears to be embedded in 5622_R1. Revise video flowchart to show embedded video.

5622_R3, 5623_R3, 5624_R3 Storyboard #9 Removed these elements from the flowchart as described in “Coherence” in Table 2.

of 29

Table 2 – Mayer’s (2009) Design Principles

DESIGN PRINCIPLE STORYBOARD PAGE NUMBER - CHANGE DESIGN COMMENTS

REDUCE EXTRANEOUS PROCESSING

Coherence

Storyboards 1 Frame # 1000, 2 Frame # 5000, 3 Frame # 5600, 4 Frame # 5610, 5 Frame # 5620 – Replace extraneous graphics on webpage with graphics that strengthen the material being presented. Storyboard 4 Frame # 5610 – Remove text box; All the words in “Why do I have to learn this?” text box are extraneous and should be removed to simplify the website. Flowchart #5622_R3, # 5623_R3, # 5624_R3 – Remove the calendar section.

Storyboard 9 Frame # 5622_R3 – Remove storyboard.

1-5 Revise to make pictures relevant to the subject matter. Current images are extraneous and do not correspond to the material. 4 – Remove text box, The question of why the material needs to be learned is irrelevant to the Prior Knowledge Survey. Video page 1 – Poolside Setting graphic has been determined essential to the layout of the video design because it establishes the performance context of training lifeguards. Flowchart #5622_R3, # 5623_R3, # 5624_R3 – We removed the calendar section from our unit because the point of the training is to be web based. Learners don't need to be distracted by calendaring activities in the unit where they are doing web training. Storyboard 9 Frame # 5622_R3 – This is web based training so a calendar for f2f sessions is not needed.

of 29

Signaling

Storyboard 2 Frame # 5000 - Script: Change (Candidate Name, facility Location, and Instructor) to all Bold lettering. Video pages 1-10 – Remove instruction and Change Step and # to all Bold. Also add title for each video.

2 – Bold lettering will signal to the learner that this section needs to be filled out. Video p1-10 – Signaling suggests indication of step naming between video steps. Replacing textual narration between steps in the video with simplified step number and name will highlight the essential material being examined. *We will address the instruction by using narration correlating to the Modality principle. Storyboards 3 Frame # 5600, 4 Frame # 5610 – follow the Signaling principle well by making the title of the screen in bold.

Redundancy

Storyboard 7 Frame # 5622_R1 - Remove text box. 7 – Text is not needed with video animation; *This will be addressed using the Modality principle.

Spatial Contiguity

Storyboard 7 Frame # 5622_R1 – Remove text box. 7 – Words in text box are not well related spatially to the video they represent. Words could be moved to be closer to the video but additional problems (redundancy and temporal contiguity) beg for removal of text. *This will be addressed using the Modality principle.

Temporal Contiguity

Storyboard 7 Frame # 5622_R1 – Remove text box. Text box instruction is not synchronous with video Video pages 1-10 – Remove the unnecessary instructional text. The

7 – Text box instruction is not synchronous with video. The words in the text box next to the video have no temporal link with the video presentation.

of 29

text is not presented at the same time as the image. *This will be addressed using the Modality principle. Video pages 1-10 – The text describing the instruction in the video is not included during the action scenes of the video, making it temporally misaligned. Narrate video while the action scene is taking place to synchronize the instruction. *This will be addressed using the Modality principle.

MANAGE ESSENTIAL PROCESSING

Segmenting

Storyboard 3 Frame # 5600 - Enabling Objectives: List the four levels as bullet points. Video pages 1-10 – between steps of instruction shown in the video, include ability for students to pause, review the previous step or the ability to proceed to the next step.

3 – The 4 levels are not listed. Prepare students to mentally segment the instruction by listing the available segments. Video pages 1-10 - When creating the video, stop video progress between steps allowing the user to control the pace of progress.

Pre-training

N/A The instruction assumes basic entry level knowledge sufficient enough for the learner to follow the instructional video without pre-training.

Modality

Storyboard 7 Frame # 5622_R1 – Remove textbox and integrate narration into video. Video pages 1-10 – Use voice narration during video rather than text

7 – Narrating the video will help learners comprehend the material more efficiently then text. Video pages 1-10 – Narrating the video will

of 29

descriptions of instructional steps. help learners comprehend the material more efficiently then text.

FOSTER GENERATIVE PROCESSING

Multimedia

Storyboards 1 Frame # 1000, 2 Frame # 5000, 3 Frame # 5600, 4 Frame # 5610, 5 Frame # 5620, 6 Frame # 5622, 7 Frame # 5622_R1, 8 Frame # 5622_R2 and 9 Frame # 5622_R3 - Change computer files to all lowercase letters.

1 – 9 - png, flv and html files need to be lowercase without spaces to follow multimedia rule: all computer files should be lowercased without spacing.

Personalization Video pages 1-10 - Make dialog style conversational. Video pages 1-10 - The textual script descriptions would not be sufficient to convert to narration. Rewrite narration to provide instruction on the steps in a conversational style.

Voice N/A Use a friendly human voice to narrate steps of video.

Image N/A It is not necessary to show the narrator during the course of video instruction.

of 29

Table 3 – William’s (2008) Design Principles

Contrast

N/A Contrast was used effectively throughout the storyboards.

Repetition Storyboard 5 Frame # 5620 - Screen Layout: Keep theme central. (i.e. headers and buttons need to be consistent in theme. If start with buttons on left, keep them this way for all storyboards. Storyboard 6 Frame # 5622 - Formatting needs to be consistent with all other storyboards, buttons are not formatted the same as other storyboards

Alignment Storyboard 6 Frame # 5622 – Assessment button is placed arbitrarily on page. Center this button on bottom of page.

Proximity N/A Relevant items throughout the storyboards were effectively grouped together.

of 29

Flowcharts The figures in the flowchart sequence outline the navigation that students will follow upon entering into Instructure Canvas as well as the various instructional interactions that take place during Unit 6 – Adult CPR.

Figure 1 – Flowchart of Basic Canvas Features The flowchart below outlines the navigation of canvas features students will interact with throughout the entire web-based course. Canvas is propriety learning management software (LMS) developed by Instructure®. An expansion the items Modules (5000) and Assessments (7000) are included in Figures 2 and 3. Storyboards detailing the navigation of Unit 6 – Lesson 2 are detailed later in this document.

Discussions Syllabus Calendar Modules Assessments Grades

A

2000 3000 4000 5000 6000 7000

Course Homepage

1000

Figure 1 - Flowchart of Basic Canvas Features

of 29

Figure 2 – Flowchart of Instructional Unit(s) The figure below outlines the basic structure and sequence of Unit 6 Adult CPR. After navigating through the course homepage, students will access their instructional content through the Modules (5000) feature and subsequently each Unit Lesson thereafter.

of 29

Figure 2 - Flowchart of Instructional Unit(s)

Figure 3 – Flowchart of Assessments On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab.

B

Lesson OneAssessment

6100

Lesson TwoAssessment

6200

Lesson ThreeAssessment

6300

Lesson FourAssessment

6400

My Grades7000

My Grades7000

My Grades7000

My Grades7000

C D E

Figure 3 - Flowchart of Assessments

of 29

Revised Storyboards

Storyboard 1 – Course Homepage Project Title: American Red Cross Lifeguard Certification File Name: course_homepage.html Frame #: 1000

Page: 1 of 1 Date: 11/19/2012. (Revised 2/3/2013)

Script: American Red Cross CPR/AED for Professional Rescuers and Health Care Providers

Course Homepage

Links from Screen: n/a Links To Screens: 2000 Discussions 3000 Syllabus 4000 Calendar 5000 Modules 6000 Assessments 7000 Grades

Screen Description: Course homepage with navigation links to various features on the Canvas network.

Screen Layout:

Background: canvas_redcross_background(1).png Color Scheme: PANTONE Cool Gray 11 RGB PANTONE 485 RGB Text Attributes: Arial; Heading 2 for headings; Normal for body.

Graphic Stills: button_assessments.png button_calendar.png button_discussion.png button_grades.png button_modules.png button_syllabus.png heart_beat.png

Developer’s Notes:

Screen layout demonstrates features and content packaged within the Canvas online-course.

Logos and color scheme adhere to American Red Cross brand/copyright guidelines.

of 29

Storyboard 2 – Modules Project Title: American Red Cross Lifeguard Certification File Name: modules.html Frame #: 5000


Script: Candidate Name: _______________ Facility Location: _______________ Instructor: ______________

Links From Screen: 1000 Cross Homepage Links To Screens: 5100 Unit One 5200 Unit Two 5300 Unit Three 5400 Unit Four 5500 Unit Five 5600 Unit Six 5700 Unit Seven

Screen Description: Navigation menu page with web buttons linking to individual units and candidate information prominently displayed.

Screen Layout:

Background: canvas_redcross_background(2).png Color Scheme: PANTONE Cool Gray 11 RGB PANTONE 485 RGB Text Attributes: Arial Blold; Heading 2 for headings; Normal for body.

Graphic Stills: unit_01.png unit_02.png unit_03.png unit_04.png unit_05.png unit_06.png unit_07.png arc_modules.png


of 29

Storyboard 3 – Unit Six Overview Project Title: American Red Cross Lifeguard Certification Lesson Title: Unit 6 – Adult CPR File Name: u06_cpr.html Frame #: 5600


Script: Unit Overview

Unit Goal: When given an emergency, lifeguard candidates will learn when and how to apply cardiopulmonary resuscitation (CPR) procedures on an adult victim. Enabling Objectives: When CPR is required in an emergency situation, lifeguard candidates will be be able to demonstrate the following:

Determine a victim’s level of responsiveness according to the AVPU scale.

List the four levels of responsiveness with 100% accuracy.

Demonstrate head tilt-Chin lift technique with 100% accuracy.

Assess victim’s breathing with 100% accuracy.

List all the steps of Adult CPR according to the American Red Cross guidelines with 100% accuracy.

Links From Screen: 5000 Modules Links To Screens: 5610 Prior Knowledge Survey 5620 Lessons Menu

Screen Description: Unit overview with buttons linking to the Prior Knowledge Survey and Lessons Menu.

Screen Layout:

Background: canvas_redcross_background(2).png Color Scheme: PANTONE Cool Gray 11 RGB PANTONE 485 RGB Text Attributes: Arial; heading 2 for headings; normal for body

Graphic Stills: uid_unit06.png button_priorknowledge.png button_lessonsmenu.png cpr_image.png


Prior knowledge survey must be completed before entering lessons menu.

of 29

Storyboard 4 – Prior Knowledge Survey Project Title: American Red Cross Lifeguard Certification Lesson Title: Unit 6 – Adult CPR File Name: u06_survey.html Frame #: 5610


Script: Heading 1: Prior Knowledge Survey Body: 1. Have you ever taken a CRP course before? 2. Have you ever seen anyone perform CPR in an emergency? 3. Have you ever performed CPR in an emergency prior to taking this course? 4. In the box provided below, please list the steps necessary to perform CRP on an adult victim.

Links From Screen: 5600 Unit Six Links To Screens: 5620 Lessons Menu

Screen Description: prior knowledge survey answered by candidate at the beginning of unit. The textbox aligned to the right gives reasons why it is important for the candidate to learn the material covered in the unit and how the material directly relates to them.

Screen Layout:

Background: canvas_redcross_background.png Color Attributes: PANTONE Cool Gray 11 RGB PANTONE 485 RGB Text Attributes: Arial; Heading 2 for headings; Normal for body

Graphic Stills: button_submit.png button_cancel.png med_symbol.png


Candidate must complete prior to entering lessons menu.

of 29

Storyboard 5 – Unit Six │ Lesson Menu Project Title: American Red Cross Lifeguard Certification Lesson Title: File Name: unit6_lessonmenu.html Frame #: 5620


Script: Directions: Each lesson must be completed in sequential order. Lessons will be made available as perquisite lessons are completed.

Links From Screen: 5600 Unit Six Links To Screens: 5621 Lesson One 5622 Lesson Two 5623 Lesson Three 5624 Lesson Four

Screen Description: Unit Six lessons menu provides links to all instructional events necessary to complete the unit.

Screen Layout:

Background: canvas_redcross_background.png Color Scheme: PANTONE Cool Gray 11 RGB PANTONE 485 RGB Text Attributes: Arial; Heading 2 for headings; Normal for body

Graphic Stills: uid_arc_U6.png heart_beat.png button_lesson_01.png button_lesson_02.png button_lesson_03.png button_lesson_04.png


Unavailable lessons appear transparent and un-clickable until candidate successfully completes prerequisite lessons.

Lessons completed in following sequential order: Lesson 1Lesson 2Lesson 3Lesson 4

Navigation tabs at top of page allow user to return to previous page or navigate to available lesson(s).

of 29

Storyboard 6 – Lesson Two Menu Project Title: American Red Cross Lifeguard Certification Lesson Title: Head Tilt/Chin Lift Technique File Name: u06_lesson02.html Frame #: 5622


Script: Animated tutorial (hover-text): “animated tutorial of head tilt/chin lift technique, including step-by-step breakdown of entire procedure” Interactive Simulation (hover-text): “Three-dimensional interactive emergency rescue simulation of head tilt/chin lift technique on an adult at a community pool” Facility Session (hover-text): “Schedule an appointment to practice using a CPR Training Manikin at your local American Red Cross aquatic facility”

Links From Screen: 5620 Lessons Menu Links To Screens: 5622_R1 Animated Tutorial 5622_R2 Interactive Simulation 6200 Lesson Two Assessment

Screen Description: Includes links each of the three instructional events required to complete the lesson. Web buttons link to following pages: animated tutorial, Interactive simulation, and facility session. Information about each event appears when mouse hovers over a web button.

Screen Layout:

Background: canvas_redcross_background.png Color Scheme: R: 255 G: 153 B: 0 PANTONE Cool Grey 11 RGB PANTONE 485 RGB Text Attributes: Arial; Heading 2 for headings; Normal for body

Graphic Stills: uid_arc_Lesson2.png tutorial.png simulation.png facility.png button_tutorial.png button_simulation.png button_facility.png button_lesson_assessment.png


Navigation tabs at top of page allow candidate to access each instructional event (or) return to previous page.

Candidates must perform even in sequential order: Animated tutorialInteractive SimulationFacility Session.

of 29

Storyboard 7 – Video Tutorial Project Title: American Red Cross Lifeguard Certification Lesson Title: Lesson 2 - Animated Tutorial File Name: unit6_lessontwo_tutorial.html Frame #: 5622_R1


Script: [heading] Animated Tutorial: Head Tilt/Chin Lift Technique [body] 1. With the victim in a supine position, kneel beside victim’s head. 2. Place one hand on forehead 3. Apply backward pressure with palm to tilt victim’s head back. 4. Place the tips of the fingers of the other hand under the lower jaw near the bony part of the chin. 5. Lift the chin upward, bring the entre lower jaw with, helping to tilt the head back. Lift so that the teeth are nearly brought together, but avoid closing the mouth completely. Continue to hold the forehead to maintain the backward tilt of the head. 6. Listen by placing ear about 10 inches above victim’s nose and mouth. 7. Feel and listen for movement of air. 8. Watch the victim’s chest and abdomen. 9. Place a hand on victim’s chest to feel for movement.

Links From Screen: 5622 Lesson Two Links To Screens: 5622_R2 Interactive Simulation

Screen Description: Adobe Flash Video tutorial demonstrating step-by-step breakdown of Head Tilt/Chin Lift procedure, accompanied by textbox outlining all steps necessary to perform the procedure.

Screen Layout:

Background: canvas_redcross_background.png Color Scheme: PANTONE Cool Gray 11 RGB PANTONE 485 RGB Text Attributes: Arial; Heading 2 for headings; Normal for body

Video: u06_lesson2_tutorial.flv 800 x 1200 Graphic Stills: uid_lesson02.png



Chin Lift Technique

of 29

Storyboard 8 – Online Simulation Project Title: American Red Cross Lifeguard Certification Lesson Title: Lesson 2 – Interactive Simulation File Name: unit6_lessontwo_simulation.html Frame #: 5622_R2


Script: [textbox] “The online medical simulator will allow you to apply the procedural knowledge you learned by watching the animated tutorial. In order to progress through the lesson, you will need to earn a passing score of 70% or greater. You have an unlimited number of attempts to score a passing grade, please be advised each attempt will present a new, original situation to apply your knowledge. Requirements: Adobe Flash Player and Java Runtime Agent”

Links From Screen: 5622 Lesson Two Links to Screens: 5622_R1 Animated Tutorial

Screen Description: Adobe Flash applet window aligned in center of page that will allow student to interact with content and receive immediate feedback within the applet; and description of simulation and required software can be found in textbox below applet.

Screen Layout:

Background: canvas_redcross_background.png Color Schemes: PANTONE Cool Gray 11 RGB PANTONE 485 RGB Text Attributes: Arial; Heading 2 for headings; Normal for body

Graphic Stills: pool_scene.png arc_logo_classic_horizstkd_simulation.png



of 29

Video Storyboards (5622.1) Project Title: Assignment #1 EME6226 Lesson Title: Head Tilt/Chin Lift Skills Assessment File Name: Head Tilt-Chin Lift Skills

Page 1 of 10 Date: 11/19/2012. (Revised 2/3/2013)

Frame 1 – Title screen Text: Chin Lift Technique Frame 2 – Scene opens to set situation, poolside Action: Camera zooms in on a rescuer and a victim.

Links from Screen: Embedded in 5622_R1 Links To Screens: n/a

Screen Description: Video: Avi file will play when selected. Establishing shot of poolside rescue.

Screen Layout:

Text Attributes: Arial Black 36pt

Video: wmv file Size: 350 x 270

Developer’s Notes: The title frame will be what appears in the video player box embedded in 5622_R2 so that on this page, learners can identify the video. This establishing video scene runs continuous through step 1.

of 29

Scene 1: Video Storyboard (5622.1) Project Title: Assignment #1 EME6226 Lesson Title: Head Tilt/Chin Lift Skills Assessment File Name: Head Tilt-Chin Lift Skills


Skill step 1: Frame- 1 Text: Step 1 – Approach Frame- 2 Action: Victim is lying in the supine position while the rescuer approaches and kneels next to the victim’s head. Narration: In step one, approach the victim. Kneel beside the supine victim’s head as shown.

Links From Screen: Embedded in 5622_R1 Links To Screens: n/a

Scene 1 Description: Victim is lying in the supine position while the rescuer is next to the victim.

Screen Layout:


Video: . wmv, Size: 350 x 270

Developer’s Notes: The video will pause after presentation of each step (Scenario 1-9) allowing the user to repeat the step or advance to the next step.

of 29



Skill step 2: Frame: 1 Text: Step 2 – Set-up Frame: 2 Action: Victim and avatar are next to each. The rescuer places one hand is on the victim’s forehead. Narration: Place your hand on the side adjacent to the victim’s head on his forehead. For example, if you are kneeling on the victim’s right side, place your left hand on his forehead. Kneeling on the victim’s left side use your right hand.


Scene 2 Victim and avatar are next to each other while one hand is on the victim’s forehead.

Screen Layout:




of 29



Skill step 3: Frame: 1 Text: Step 3 – Forehead Pressure Frame: 2 Action: The rescuer applies backwards pressure to the victim’s head; tilting it backwards. Narration: Using your palm, push backwards on the victim’s head to tilt it backwards.


Scene 3 Description: The avatar is holding the victims forehead and applying backward pressure with the palm.

Screen Layout:




of 29


Page 5 of 10 Date: 11/19/2012. (Revised

2/3/2013)

Skill step 4: Frame: 1 Text: Step 4 – Place hand on chin Frame: 2 Action: The rescuer positions his free hand under the victim’s chin. Narration: Using your free hand, place the tips of your fingers under the bony part of the victim’s chin.


Scene 4 Description: The rescuer is positioning his hand under the victim’s chin.

Screen Layout:




of 29



2/3/2013)

Skill step 5: Frame: 1 Text: Step 5 - Chin Lift Frame: 2 Action: The rescuer lifts the chin backwards. Frame: 3 Action: Tilting the head backwards tilting the head and bring the jaw along with the backwards motion. Frame: 4 Action: Lifting so that the teeth are nearly brought together, but avoid closing the mouth completely. Frame: 5 Action: Continues to hold the forehead to maintain the backward tilt of the head. Narration: Lift the chin backwards while applying pressure to the forehead to rotate the head backwards. Bring the jaw along with the tilt of the head but to not close the teeth together completely. Maintain pressure to keep the head tilted backwards.


Scene 5 Description: Rescuer lifts chin, tilts head back and avoids closing teeth.

Screen Layout:




of 29


Page 7 of 10 Date: 11/19/2012.

(Revised 2/3/2013)

Skill step 6: Frame: 1 Text: Step 6 Listen Frame: 2 Action: The rescuer places his ear about 10 inches above victim’s nose and mouth. Narration: Position your ear about 10 inches over the victim’s nose and mouth to listen and feel for signs of breathing.


Screen Description: Rescuer will need to place their ear 10 inches above the victims mouth and nose

Screen Layout:


Video: avi file Size: 350 x 270


of 29

Scene 7: Video Storyboard (5622.1)

Project Title: Assignment #1 EME6226 Lesson Title: Head Tilt/Chin Lift Skills Assessment File Name: Head Tilt-Chin Lift Skills


2/3/2013)

Skill step 7 Frame: 1 Text: Step 7 - Listen and feel Frame 2: Action: Avatar will be listening and feeling for air movement Narration: Listen for sounds of breathing and try to feel for breath on your cheek.


Screen Description: Rescuer will be listening and feeling for air movement.

Screen Layout:




of 29



Skill step 8 Frame: 1 Text: Step 8 - Watch for breath Frame: 2 Action: The rescuer watches the victim’s chest and abdomen for movement. Narration: With your head still positioned above the victim’s nose and mouth, watch the chest and abdomen for signs of breathing.


Screen Description: Rescuer watches the victim’s chest and abdomen for movement

Screen Layout:

Text Attributes: Arial Black 36pt Video: wmv file Size: 350 x 270

Developer’s Notes: The video will pause after presentation of each step (Scene 1-9) allowing the user to repeat the step or advance to the next step.

of 29



2/3/2013)

Skill step 9 Frame: 1 Text: Step 9 – Feel for movement. Frame: 2 Action: The rescuer places his free hand on chest to feel for movement. Narration: Place your free hand on the victim’s chest to feel for movements from breathing.


Screen Description: Rescuer places hand victim’s chest and abdomen.

Screen Layout:




eme 6226 assignment 1 revised flowcharts, storyboards and ... · storyboard 4 frame # 5610 –...

Documents