CHAPTER 12: FLOWCHARTS, you can illustrate the sequence of instructional

content provided to target learners.

STORYBOARDS AND RAPID
------------------------------------------------------------------
PROTOTYPING
------------------------------------------------------------------ Flowcharting
"What I hear, I forget; what I see, I remember; what I
do, I understand." ---Confucius Overview of Flowcharts
A flowchart is a pictorial representation depicting the
Introduction
flow of steps in a program, people in an organization,
The tasks associated with the analysis and design or pages in a presentation. In instructional design,
phases of the systematic design process are fairly flowcharts provide a bird's-eye view of the
consistent across delivery systems. Whether structure and sequence of a lesson. Elements are
designing instruction for delivery via interactive represented by simple icons (circles, rectangles,
television (ITV), video, mail correspondence, the diamonds, or other shapes), with lines and arrows
Web, or stand-alone computers, it is necessary to representing connections between events and the
conduct goal, instructional, learner and context direction or order in which they occur. A
analyses, define objectives, determine learner flowchart indicates sequences and decision points
assessment methods, develop instructional strategies, as well as starting and stopping points. Since it is
and prepare instructional treatment plans. easier to grasp relationships in a visual form than
in a verbal description, flowcharts can prevent the
During the development phase, a variety of tools
omission of steps in a process. Flowcharts are
and techniques are utilized in conjunction with
particularly useful for instructional designers who
the delivery system. For example, with instructor-
are novice or occasional programmers.
led ITV distance education, instructional
technologists may create instructor guides
(including PowerPoint presentations, lesson
Flowcharting Conventions
plans, and instructor notes), assessment While boxes, circles, diamonds and other symbols
instruments and student materials. On the other are not required to construct a flowchart, they
hand, instructional videos require developers to convey information about the events in the
prepare shot sheets and scripts, and flowcharts, process clearly and efficiently. Standard symbols
storyboards, and prototypes are generated for that are applicable to most situations complex are
Web-based training and computer-based training described below:
(CBT).
In this Chapter you will learn how to develop
instructional units by creating flowcharts,
storyboards, and working prototypes. In this way

Rounded Box Represents an event that occurs automatically, triggering a subsequent action.

Represents an event that is controlled within the process, typically a step or action
Rectangle or Box
taken. In most flowcharts this will be the most common symbol.

Represents a decision point in the process, usually requiring a `yes' or `no'

Diamond
response, then branching to different parts of the flowchart.

Represents connection with another process. A reference to the new process

Circle
should appear within the circle.

Indicates direction of flow. Horizontal arrows depict procedures or linear sequence

Directional Arrow
of events, and vertical arrows depict sub- or super- ordinate skills and knowledge.

Program Decision
Represents multiple choices for the user, with the chosen option determining the
- 3 Or More
user's path through the remainder of the program.
Options

90
 Drawing Flowcharts
Why Flowchart?
There is not a rigid set of rules for constructing
The ability to construct, read, and interpret flowcharts, but the following six steps serve as
flowcharts is a necessary skill for all instructional guidelines to ensure consistency and accuracy.
technologists. Flowchart symbols are universally Note how each step has been applied in the
recognized across multiple disciplines, and will allow example, and consider the implications for the
an instructional designer to communicate a great deal different phases in the systematic design process.
of information accurately, efficiently, and succinctly.
1. Describe the process to be charted in a
In addition, programmers and software and
one-line statement. Example: "How to fill
multimedia designers routinely use flowcharts to
the car's petrol tank."
illustrate software capabilities, required user
performance (input), and computer response 2. Start with the 'trigger' event that initiates
(output). The high level of interactivity and the process. Example: "Low fuel warning
branching involved in educational software in light comes on."
particular belies the need for instructional
3. Note each successive action in concise
technologists to be comfortable with flowcharting
terms, avoiding ambiguous descriptions.
protocol.
Example: "Locate and drive into service
The following text conveys the same instructions station," etc.
as the flowchart that follows it. Which do you
4. When the flowchart branches into a
think provides a better understanding of the
complex number of options, choose the
instructional flow?
most important alternative and continue.
Dial 0, then your friend's number. You will hear a Additional detail can be provided in other
tone. If you have a calling card number, dial your home charts without subverting the efficiency of
phone number and the PIN number. If you don't have the main idea. Example: "Decision
a calling card number, dial the 800 collect number. required: Quantity of fuel to be put into
When the computer voice asks you to say your name, tank."
say your name. Wait for your friend to answer. If you
have a calling card number, leave a message on your 5. Make cross references to supporting
friend's answering machine. If you don't have a calling information. Example: A cross-reference
card number, hang up. may be made to a list of cars requiring
unleaded fuel, a table of preferred brands
of fuel.
6. Continue describing each event, action, or
decision as it occurs in sequence, until the
process is concluded (a 'target' point).
Example: "Fuel is paid for, tank is filled,
customer exits the station."
 calendars are added, culminating in a simulator
running the process to indicate the movement of
information.
For more information about flowcharting
software, check the following Web sites:
CorelFlow http://www.corel.com
Inspiration http://www.inspiration.com
LotusNotes http://www.lotus.com
Microsoft http://www.microsoft.com
Project
Primavera http://www.primavera.com
Project Planner
ProcessCharter http://www.scitor.com
SmartDraw http://www.smartdraw.com
TeamFlow http://www.teamflow.com
Visio http://www.microsoft.com/office/
visio/

Guidelines for Flowcharting in Instructional

Design
To flowchart an entire course, it would be
necessary to establish a complete sequence of
frames and a navigation scheme. Depending upon
the scope of the course and the number of user
options, this can be a time consuming process,
Flowcharting Software requiring extensive organization and foresight.
Many think of flowcharts in terms of their original Without a clear and intuitive structure and
form, depictions of an algorithm's logic path, navigation system, visitors to the site will have
hand-drawn by computer programmers. difficulty maneuvering and will either get lost or
However, a flowchart's usefulness goes well leave in frustration. One benefit of authoring
beyond mathematical functions. As a means of systems is that this job is usually simplified by a
representing a process from beginning to end, pre-existing framework.
whether that process is an algorithm, procedure, or an
instructional unit, the tool once used exclusively by
programmers has become a fundamental part of
instructional design.
When flowcharts were constructed by hand,
making changes was difficult and messy. As
graphic programs became easier to manipulate,
and the educational and business communities
realized flowcharting software's potential,
enterprising developers responded with a variety
of packages for desktop computers.
Figure 11.1: An example of Flowchart in Instructional
Applications that include real-time or time-critical Design
processes require dynamic process modeling.
Distance learning instruction typically consists of
Programs such as ProcessCharter and Optima!
multiple, linked pages, with a clear and intuitive
allow users to create complex interactive models
navigation scheme. In creating flowcharts for
and observe how they perform over time. A
instructional units, you examine the content to
process flowchart is created, and resources and
determine the number and sequence of sections,
92
using the events and interactions defined in the instructional strategy created in Table 11.1, an
Instructional Treatment Plan (resuly of Goal additional column has been added to illustrate the
Analysis). Each event or related group of events is grouping of information and events. Typical
usually represented by one box. As you construct courses would also include separate pages for
your flowcharts, check for clarity and accuracy in each event as indicated in the "Media Selection"
the depiction of the sequence and column.
interrelationship of the Web pages.

Figure 11.2: Example of Flowchart in Instructional

Design
Figure 11.3: Example of Flowchart in Virtual School
The flowcharting process should be informed by software
the specifications, events, and interactions
identified in the instructional treatment plan and
the instructional strategy. In the sample
Media
Page Event Description Interaction
Selection
Set analysis in context of previous tasks and systematic design process.
Provide Task Learner-
1 Describe analysis tasks, provide rationale for completing tasks and Web Page
Overview Content
delineate time requirements.
Inform Learners Learner-
1 List terminal and enabling objectives. Web Page
of Objectives Content
Describe desired prior skills and knowledge related to systematic design
Inform Learners Learner-
1 (goal, instructional, learner and context analyses). Also list required Web Page
of Prerequisites Content
knowledge or access subject matter expertise, target audience and context.
List Required Materials.

1. Read Dick, Carey and Carey (2000) Chapter 1

Introduction to Instructional Design (p. 2-13).
List Required Learner-
1 Web Page
Materials 2. Alternative forms of performance support for each Content
type of analysis; and

3. Training modules provided for each analysis.

Inform learners to start by reviewing the performance criteria, job aids
Describe Process and some examples associated with the task. Tell learners that if they
including use of feel confident in their ability to complete the task and meet the
Learner-
1 Performance performance criteria, they should go directly to the assignment. However, Web Page
Content
Support if learners are not confident in their ability to complete the task, suggest
Interface that they discuss the task with others (using the communications link)
and/or go through the available training.
Present learners with direct links to:
Provide Direct Task
Access to Performance Criteria Learner- Web Page E-
1
Performance Examples Content Mail BBS
Support Tools Goal statement and analysis chart
Instructional analysis map

93
 Learner analysis report
Context analysis report
Communication links
Email to instructor
Email to follow classmates
Email to others
Course BBS
Job Aids
Job aid for clarifying fuzzy goals
Flowcharting conventions
Learner analysis template
Context analysis template
Training
Goal statement & analysis
Instructional analysis
Learner analysis
Context analysis
If learners are working in a group, instruct them to review and discuss E-Mail
Promote Social Learner-
1 the individual analysis reports generated by teammates and determine Student Web
Interaction Learner
process for generating and posting one report for your team. Sites
Inform learners to post at least one question or comment about goal,
Promote Social instructional, learner or context analyses and respond to at least one Learner-
1 BBS
Interaction other posting in the appropriate location of the course bulletin board Learner
system.
Web Page
Elicit Instruct learners to complete assignment and provide directions for Learner-
2 Student Web
Performance submitting and/or posting their work. Instructor
Sites
Performance Present performance criteria for assessing the quality of completed Learner-
3 Web Page
Support assignments. Content
Assess
Student Web
Performance & Assess learners assignments and provide feedback based on performance Learner-
20 Sites
Provide criteria as soon as possible. Instructor
Email
Feedback
Table 11.1 - Instructional Strategy Example

Flowcharts should depict the sequence of the

instruction in the instructional unit in a clear and
unambiguous manner. Figure 11.4(a) illustrates
frames or pages presented to students in a linear
format, while Figure 11.4(b) depicts a non-linear
navigation scheme. A linear format decreases the
chances that students will accidentally miss or
skip information. However it also restricts
students to viewing and reviewing content in a Figure 11.4(a): Figure 11.4(b): Non-linear
particular order and format. Non-linear Linear navigation navigation
navigation provides students with greater
Organizing content into hierarchies (Figure 11.5)
flexibility, but requires careful planning to ensure
facilitates effective design and management of
that information is divided into logical and
information. With a typical, multiple page site,
meaningful "chunks." It is also important to
determining the most appropriate way for
ensure that students can navigate through all of
students to progress through the information is
the pages without getting lost or overwhelmed by
critical. A thoughtful analysis of the flowchart
the sheer volume of information.
provides perspective on the balance of depth (the
number of levels of content) and breadth (the
number of aspects or topics covered) of the
content.

94
 Storyboarding

Overview of Storyboarding

Figure 11.5: Example of a content hierarchy

Summary Storyboarding provides a rough outline of how

the presentation will appear, including a
Since humans are primarily a visual species, a conceptual idea of the location of images and text,
picture of a process conveys information more related links, and general layout. It provides a
efficiently than a written or verbal description. simple means of creating a visual representation
Making a process visible also renders it easier to of the user interface developed for each page,
manage and captures the subtle interactions illustrating its relationship to the overall scheme.
among components. Flowcharts identify all key
tasks, and the completed chart can be used: Artistic ability is not a prerequisite for producing
a storyboard. Sketching in outlines and simple
as a springboard for further discussion of shapes with explanations such as, "This image,
the process; top right hand corner, heading, level 2 and
centered," communicates all necessary
to connect with other flowcharts
information. Files are named in relationship to the
explaining related activities;
topic or page (e.g., "intro1.jpg"). Copy, image
to identify points where data can be style, and size of graphics should be indicated for
usefully collected and analyzed; clarity, efficiency, and consistency. The
developers should be able to take your storyboard
to isolate possible problem areas; and and put together the same instructional site you
to communicate the process to those would produce. With a large unit, clear
unfamiliar with it. storyboards are essential, as the work will often
be delegated to other team members. When the
Producing a clear and concise flowchart begins portions are assembled, pages should exhibit
with a brief overview of the process and consistent design despite having different
progresses to the level of detail necessary for your authors. Storyboarding is a time-consuming
instructional unit. The complexity of the lesson process, with one study stating that
determines the level of detail to include; simple approximately 19% of development time is spent
tutorials require little detail, while complex creating and revising storyboards.
lessons such as simulations require a significant
degree of detail. In general, the more time and
Storyboards for Interactive Multimedia
effort devoted to constructing flowcharts, the less
time and effort required correcting errors later. In the past, selecting a storyboard format was easy
- there was only one choice! However, traditional
------------------------------------------------------------------
storyboard formats are inadequate for designing
today's interactive training.

95
 Figure 11.7: Example of Super Media Storyboard

Figure 11.6: Traditional, linear storyboard used

primarily for video production
Who Uses Storyboards?
The three primary users of storyboards are
With the proliferation of highly interactive
developers, graphic artists, and SMEs (subject
multimedia courses and presentations, the two
matter experts). Storyboards provide inclusive
column format is no longer sufficient. Current and
programming instructions for the developer.
future multimedia training and education deal
Unless a separate list of graphics needed for
with more than audio and/or video. Today's
production is provided, graphic designers will
courseware contains dynamic interactions, such as
review storyboards to ascertain the number,
animated technical drawings, learner control of
location, and type of graphics needed for each
video sequences, click-and-drag exercises,
screen or as part of animation.
matching games, role-playing scenarios, virtual
world navigation, and much more.
The inadequacies of the two-column storyboard
(script) prompted developers of interactive
training to adopt the concept of the "super"
storyboard. Using this approach, a document is
created containing detailed information on each
student interaction, with one full page dedicated
to each. Super storyboards contained information
about every media element and programming
logic used in the interaction as well as a visual
representation of the screen's appearance. These Figure 11.8: Team Members Reviewing Storyboards
storyboard forms contain dozens of fields related
to media development and multimedia authoring, For SMEs, storyboards are the main deliverable to
including event name, graphic, and video be reviewed and approved before building
description, video shot list information (location, begins. It is vital that storyboards are clear and
subject, props), SMPTE time code, on-screen touch unambiguous to ensure that SMEs gain an
areas, branching logic, programming notes, and accurate understanding of the proposed product.
many other related fields. Designers reasoned that In addition to communicating information,
comprehensive storyboards containing this degree storyboards also serve as documentation,
of detail would produce forms and templates that facilitating changes and revisions.
would hasten the scripting process. Instructional
developers complete the storyboard process by
Storyboarding Process
filling in the appropriate fields.
Seven steps for storyboarding:

1. Write and revise primary text

2. Write and revise secondary text

3. Produce storyboards

96
 4. Check the fit of overlaying displays Compose feedback that is clear, informative,
and positive for both correct and incorrect
5. Draw and revise graphic displays and
responses.
plan other output
Feedback for incorrect responses should not
6. Check graphics and simultaneous text for be more entertaining than feedback for
fit
correct responses
7. Review the flowcharts and storyboards
Step 2. Write and revise secondary text
Step 1. Write and revise primary text Secondary text messages are written after the
In this step, the text that students will see in the primary text has been completed, and consist of
lesson is written. The primary text contains the directions, menus, transitions, prompts, hints,
essential instructional content. In tutorials, review material, help, score and progress
primary text usually contains new information, information, and lesson exit messages. Secondary
such as definitions, descriptions, and principles, text messages should also be clear, concise, and
the questions asked and the feedback given after accurate.
responses. In drills, the primary displays are
stimuli to which students respond and the Step 3. Produce storyboards
feedback they receive. At this point, both primary and secondary texts
Primary text displays do not include directions, are in draft form. While ordinary 8 1/2 by 11
help messages, hints, or cues. Observe the paper can accommodate about eighty characters
following guidelines while writing primary text per line and sixty-six lines, most computer screens
information: have between one-half to one-sixth the display
capacity of a sheet of paper. Primary and
Keep presentations concise and to the point.
secondary text displays must therefore be
Use formatting features to emphasize what is designed to accommodate the capacity of
important. Bolding, underlining, or coloring computer displays. Dividing text into smaller
text draws the user's attention to the segments will also provide opportunities for
information, but also be careful not to student interaction with the instructional content
overuse these features. by inserting questions, displaying pictures, and
allowing navigational flexibility.
Use analogies and metaphors, and
incorporate frequent active student Storyboarding grids are created on paper that
participation to reinforce understanding. corresponds to the size of a computer display,
with horizontal and vertical lines depicting
Organize the content so that it is clear.
dimensions across and down the page (Figure
Arrange information in lists when 11.9).
appropriate and state applicable rules.

Include brief but obvious statements of

transition when changing the topic or moving
from one point to another.

Be attentive to grammar, spelling, and

sentence structure.

Maintain a general writing style and choice of

vocabulary that is appropriate to your
intended audience's experience and reading
level.

Vary the types of questions within the Figure 11.9: Storyboarding Grid
instruction (multiple choice, matching,
Using a storyboard grid provides ease in
completion) and ensure that questions are
centering and spacing text and restricts the
concise and the method of response is clear to
amount of text placed on each line. Graphic
students.
displays can be drawn on paper that has been

97
scaled down, but for maximum clarity it is best to presented on the screen all at once, but is added a
use the same dimensions as your computer little at a time, and in replaced text, in which a
screen. portion of text is erased from a larger display and
replaced with different text. Using storyboards
It is often unwieldy to assemble the entire
that have grids and are all the same size, or
collection of storyboard grids developed for a
storyboarding on the computer makes checking
course or program, and with computers that use
for overcrowded or overlapped text simple.
proportional fonts (e.g., Macintosh), grids are
problematic. Designers often substitute index
cards, placing an entire lesson on a bulletin board Step 5. Draw and revise graphic displays and
for evaluation. plan other output

The usefulness of storyboard grids is further "Graphic displays" refers to a variety of non-text
limited by the advent of scrolling text fields and presentations, including line drawings, cartoons,
frames. Virtually unlimited amounts of text may animations, geometric figures, and bar and line
be displayed in one screen. If more text than can graphs. Observe the following guidelines in
be viewed on a single computer display or storyboarding graphic elements:
storyboard frame is to be included, additional Use graphics to present or elaborate
pages of text information must be attached to the important information.
storyboard.
Avoid unnecessary detail or ambiguity.
Step 4. Check the fit of overlaying displays Use color sparingly, to distinguish or
emphasize portions of pictures or graphs;
Many of the separate storyboards will be
avoid using too many colors simultaneously.
"overlaid" on single computer displays. A
common example occurs when a student is asked Always allot space for simultaneous text.
a question. One storyboard contains the question
Animations require special consideration because
as well as the space in which the student will type
it is difficult to capture the nature of movement
a response. Another storyboard contains a
on paper. In addition to producing the essential
feedback message presented when the student
elements in still form, make marginal notations
gives an incorrect response. During the lesson
that include a description of which elements
presentation these two displays may appear on
change and the nature of the change, such as
the screen at the same time. However, they are not
direction, size, distance, and rate of change.
written on the same storyboard because:
Drawing a few still pictures to show the change at
Different messages appear on the screen different stages is often helpful.
depending on whether the student answers Other output consists of any presentation that
the questions correctly or incorrectly. Instead does not appear on the computer screen, most
they are placed in identical locations on frequently referring to sound. Sound requires
separate storyboards, ensuring that each special consideration because it is difficult to
message will fit simultaneously with the describe on paper. A storyboard for sound would
original question. consist entirely of marginal information
describing the sound in terms of its nature (e.g.,
The same message may be used as feedback
music, speech), content, and duration.
for different questions.

Establishing a one-to-one correspondence Step 6. Check graphics and simultaneous text for
between storyboards and segments of a fit
lesson, such as subroutines is advantageous.
Graphic displays, like text displays, are
Since computer displays within a lesson are sometimes overlaid with one another or with
frequently programmed separately, then other text. As with text, check that there is no
assembled, it is best to storyboard on overlapping or overcrowding in the composite
different cards. displays, and that graphics and corresponding
Storyboard overlays occur primarily in question- text are displayed simultaneously. Superimposing
answer-feedback displays, user control messages, one storyboards on another to check for fit is a
and directions or help message displays. They typical feature of graphics software. If
also occur in incremental text, text that is not overlapping or overcrowding exists, corrective

98
revisions can involve changing the proximity, Tools for Creating Storyboards
size, or detail of graphics.
Depending on its complexity, a single application
may require a number of storyboards. For
Step 7. Review the flowcharts and storyboards
example, a game would include multiple changes
Assemble the storyboards in the order a of direction and action by the user, multiple
student would encounter them in the lesson, graphics, and multiple representations and
as indicated by the flowcharts, placing them feedback. In a non-sequential instructional unit,
side by side or tacking them on a bulletin the user chooses any of multiple destinations and
board so they can be viewed all at once. paths with a mouse click. In an application
produced with a multimedia-authoring package
Review flowcharts and storyboard layout for
such as Toolbook, a different background could
sequence, style, completeness, student
represent each of the storyboards. The selection of
control, and length.
storyboarding tools reflects the level of
Assume the role of an average student. complexity required. Options include:
Proceed from card to card, interacting with
Word processor. Many designers use the drawing
the lesson, answering each question correctly
function in Windows or MacOS to rough out
and incorrectly, encountering the appropriate
graphics and locations of various elements,
presentations, choices, questions, hints,
including text.
feedback messages, and remediation.
Graphics application. A graphics application can
Anticipate any problems and mark for
be used to draw simple mock-ups of the screens
revision.
with areas designated for additional notes.
The most frequently encountered problems
Database management application. In complex
include:
applications (e.g., military simulations), the cost of
Missing or incomplete directions mistakes can be serious. Databases are
constructed with detailed explanations of
Insufficient student interaction components and with forms and reporting tools
providing the content to users. In organizations
Inadequate coverage of topics
that generate large numbers of applications, this
Overlapping, overcrowded, or poorly can be a cost-effective approach
spaced displays
Storyboarding Software
Redundant or irrelevant displays
This is a partial list of software applications that
Question loops in which students may get help developers produce storyboards (Note:
stuck Multimedia authoring packages can also produce
Poor transitions quick designs to be printed out and annotated).
Canvas http://www.deneba.com
Poor student control, such as displays that
cannot be reviewed Scriptwerx http://www.originalvision.com
IVD Toolkit http://www.electronicvision.com
Text passages with no graphic
enhancements StoryBoard http://www.powerproduction.co
Quick m
Flowcharts and storyboards should be reviewed
by other instructional designers, content experts,
your client, and programming professionals to Summary
assess pedagogical quality, correctness of content Storyboards are the blueprints of the interactive
and sequence, attainment of objectives, aesthetics, courseware design and development process. The
hardware and software suitability. Students primary purpose of storyboarding is to
should also review the documents to assess level communicate the intended design to each member
of difficulty, clarity of text and pictures, and of the team and provide documentation
overall impression of the lesson. After throughout development. The effectiveness of the
synthesizing the feedback from reviewers, revise communication and documentation is in direct
the documents. relationship to the level of detail included in the

99
storyboards. Ensuring completion and accuracy of 11.11. Producing a vertical prototype of this
the storyboarding process minimizes confusion course would include all aspects of one
and errors that result in delays and major instructional unit and its related components.
reworking.

Rapid Prototyping

Overview of Rapid Prototyping

In designing technology-based instruction, it is an
efficient practice to use storyboards and
flowcharts that are indicative of the content,
layout, and organization of the unit to develop a
small portion of the program. The representative
portion is tested, evaluated, and revised before
the resources necessary to produce a complete
course are expended. This process of developing a
sample to facilitate the identification of
organization or design problems is called rapid
prototyping.
Figure 11.11: Vertical Prototype Structure
The goal of prototyping is to provide a workable
example of features of the system to users, Course developers test the specific features of the
decreasing the complexity of performance by user interface before beginning full-scale
focusing on limited components. There are two production. The vertical prototype serves as a
types of prototypes: horizontal and vertical template for all other instructional units,
(Figure 11.10). Horizontal prototypes present establishing consistent formatting and navigation
users with a wide range of program features that standards for the entire course.
are not fully functional. Vertical prototypes
present users with a small number of fully There are many possibilities of formatting and
functional program features. navigation standards. For example, the designer
might specify:

Level one headings are 18 point, bold, Arial

font

Embedded links are 12 point, plain, Arial font

Pages contain a link back to home page

and/or

Assignment pages have links back to

Overview pages

Figure 11.10: Vertical And Horizontal Prototype

Structure

Horizontal Prototyping
A horizontal prototype would include program
features accessible from the homepage, allowing
developers to test the intuitiveness of icons and
user interface features.

Vertical Prototyping
Vertical prototypes include one or more fully
functional course features, as illustrated in Figure
100