U.S. Department of Health and Human Services (HHS) The ...€¦ · 2.0 Minimum Requirements for Story Builder/Presenter ... Story Builder is an authoring application whose intuitive

U.S. Department of Health and Human Services (HHS)

The Office of the National Coordinator for Health Information Technology (ONC)

eConsent Trial Project

Graphical User Interface (GUI) Design and Authoring Guide for eConsent

Story Engine

Produced for the U.S. Department of Health and Human Services by: APP Design, Inc.

Version: March 2013

GUI Design and Authoring Guide for eConsent Story Engine

i

Contents Contents ........................................................................................................................................... i

Acronym Index ........................................................................................................................... iv

1.0 Introduction .......................................................................................................................... 1

1.1 Story Builder Functionality .............................................................................................. 1

1.2 Story Presenter Functionality ........................................................................................... 1

1.3 Audit Trail and Statistics Compilation ............................................................................. 2

2.0 Minimum Requirements for Story Builder/Presenter .......................................................... 2

3.0 Story Builder Application .................................................................................................... 2

3.1 Using Story Builder .......................................................................................................... 2

3.2 Creating New Users ......................................................................................................... 3

3.3 Establishing Authors/User Profiles in Story Builder ....................................................... 5

3.4 Logging In ........................................................................................................................ 5

4.0 Story Builder Home Page .................................................................................................... 5

4.1 Story Builder Home Page/Dashboard Overview ............................................................. 5

5.0 Assets Module ...................................................................................................................... 6

5.1 Assets Module/Dashboard Overview ............................................................................... 6

5.2 Uploading Files into the Assets Module .......................................................................... 8

6.0 Pages Module ..................................................................................................................... 10

6.1 Pages Module/Dashboard Overview .............................................................................. 10

6.2 Page Creation and Editing .............................................................................................. 11

6.2.1 Saving Page Edits .......................................................................................................... 13

6.3 Adding Media Assets to a Page...................................................................................... 14

6.4 Adding Image Assets to a Page ...................................................................................... 14

6.5 Page Preview .................................................................................................................. 16

7.0 Stories Module ................................................................................................................... 17

7.1 Stories Dashboard Overview .......................................................................................... 17

7.2 Creating a Story .............................................................................................................. 18

7.3 Story Path ....................................................................................................................... 18

7.3.1 Building a Story Path/Adding Pages.............................................................................. 19

7.4 Story Path Conditions .................................................................................................... 20

7.4.1 Creating Conditions for a Story Path ............................................................................. 20

7.4.2 Revising a Story Path ..................................................................................................... 27

7.4.3 Removing Pages from a Story ....................................................................................... 29


ii

7.5 Publishing/Un-publishing a Story .................................................................................. 29

7.6 Export/Import Module.................................................................................................... 31

7.6.1 Exporting a Story ........................................................................................................... 32

7.6.2 Importing a Story ........................................................................................................... 34

7.6.3 Sample Stories ............................................................................................................... 36

8.0 Story Presenter ................................................................................................................... 36

8.1 Story Presenter ............................................................................................................... 36

8.2 Signature Capture and Display ....................................................................................... 38

9.0 Story Presenter Statistics ................................................................................................... 39

9.1 Story Statistics ................................................................................................................ 40

9.2 Page Statistics ................................................................................................................. 41

10.0 508 Compliance ................................................................................................................. 42

11.0 Security .............................................................................................................................. 43

12.0 Other Implementation Considerations ............................................................................... 43

Figures

Figure 1: Browser Requirements .................................................................................................... 2 Figure 2: Modular Components Menu ............................................................................................ 3

Figure 3: Administration Link ........................................................................................................ 4 Figure 4: Users Dashboard.............................................................................................................. 4 Figure 5: Create User Form ............................................................................................................ 4

Figure 6: Story Builder Sign-In Page.............................................................................................. 5 Figure 7: Story Builder Home Page ................................................................................................ 5

Figure 8: Story Builder Home Page/Dashboard ............................................................................. 6 Figure 10: User Assets Dashboard .................................................................................................. 7

Figure 11: Upload Asset File Page ................................................................................................. 9

Figure 12: Browse Page .................................................................................................................. 9 Figure 13: Upload Asset File Page with File Selected ................................................................. 10

Figure 17: HTML Content Editor ................................................................................................. 13 Figure 18: Adding a Media Asset to a Page ................................................................................. 14 Figure 20: Preview Page ............................................................................................................... 16

Figure 24: Edit Story Path............................................................................................................. 19 Figure 25: Story Path – No Path Established ................................................................................ 19 Figure 26: Add Page to Story Dashboard ..................................................................................... 20 Figure 27: Successful Page Addition ............................................................................................ 20

Figure 28: Story Path – Add Condition to Story Page Form ........................................................ 21 Figure 29: Adding a Condition ..................................................................................................... 22 Figure 30: Saved Condition .......................................................................................................... 22

Figure 31: Extending the Path....................................................................................................... 24 Figure 35: Multiple Conditions ..................................................................................................... 26 Figure 36: Edit Condition Form .................................................................................................... 26 Figure 37: Edit Confirmation ........................................................................................................ 27 Figure 38: Remove Condition Prompt .......................................................................................... 27


iii

Figure 39: Revising a Story Path .................................................................................................. 28 Figure 40: Revised Story Path ...................................................................................................... 28 Figure 41: Sample Story Path ....................................................................................................... 29 Figure 42: Story Builder Home Page ............................................................................................ 30

Figure 43: Story Publish Confirmation Dialogue Box ................................................................. 30 Figure 44: Story Builder Home Page – Story Published .............................................................. 30 Figure 45: Export/Import Functionality ........................................................................................ 31 Figure 46: Exported Stores Dashboard ......................................................................................... 31 Figure 47: Story Download ........................................................................................................... 33

Figure 48: Firefox Interface .......................................................................................................... 33

Figure 49: Explorer Interface ........................................................................................................ 33

Figure 50: Importing Story ........................................................................................................... 34 Figure 51: Upload Story Form ...................................................................................................... 34 Figure 52: Pop-Up Window .......................................................................................................... 35 Figure 53: Upload Story Export Form .......................................................................................... 35

Figure 54: Published Stories ......................................................................................................... 36 Figure 56: Signature Capture Checkbox ....................................................................................... 38

Figure 57: Signature Display ........................................................................................................ 38 Figure 58: Story Builder Home – Statistics .................................................................................. 39 Figure 59: Story and Page Statistics Page..................................................................................... 40


iv

Acronym Index

Acronym Definition

AAC Advanced Audio Coding

GUI Graphical User Interface

HHS U.S. Department of Health and Human Services

HIE Health Information Exchange

HTML Hypertext Markup Language

HTTPS Hypertext Transfer Protocol Secure

ONC Office of the National Coordinator for Health Information Technology

URL Uniform Resource Locator

WAV Waveform Audio File

WYSIWYG What You See Is What You Get


1

1.0 Introduction This user guide provides instructions on how to author/develop a “story” (e.g., educational

material) using the Story Engine application tool to build and present stories for viewing through

a web browser.

Story Engine is one set of code with two parts: Story Builder, the internal back-end authoring

tool, and Story Presenter, the front-end interface for viewing stories. Story Builder is a

collaborative tool; it allows user/authors to design edit and/or view each other’s work while also

allowing authors to work independently. Story Presenter is the Graphical User Interface (GUI)

downloaded during Story Engine installation that allows patients to view stories created by Story

Builder. Both Story Builder and Story Presenter are web-based, so stories can be authored and

viewed anywhere Internet/Intranet connectivity is available.

This user guide, “GUI Design and Authoring Guide,” discusses the use of the application after it

has been installed on a web server. For information related to installing and configuring Story

Engine, please review the “Code Set and Installation Guide for eConsent Story Engine (Story

Builder and Story Presenter).”

The APP Design Team (referred to as “we”) suggests the reader use this guide as if it were

written in three parts for three different audiences.

Part one applies to the author who designs and builds the stories. The author will be most

interested in Sections 2.0 through Section 7.0 as these sections cover story creation using

Story Builder.

Part two is directed at the patient who watches the stories. Section 8.0 discusses how to

view a finished or published story through the Story Presenter GUI.

Part three, Section 9.0, covers statistical data automatically captured and compiled by

Story Engine and available only to those users with Story Builder author privileges.

1.1 Story Builder Functionality Story Builder is an authoring application whose intuitive design makes it easy for users to create

dynamic stories without the need for a deep technical background. Story Builder allows users

(referred to as “authors”) to build stories — multi-page scripts consisting of Hypertext Markup

Language (HTML) formatted text, images, audio, and video which create, define, and organize

the syllabus of the educational content. An author using Story Builder does not need to know

how to use HTML to create content/a story.

1.2 Story Presenter Functionality Story Presenter functionality takes the scripts, audio, and video images stored in Story Builder

and presents them to the patient/viewer through a browser-based interface. Story Presenter is

installed on the web server as part of Story Engine at the same time the application is installed.

Story Presenter is separate from Story Builder in that a patient who can view a story through the

GUI does not automatically have access to the Story Builder content authoring tool. More on

user accessibility to Story Builder is found in Section 3.2.


2

1.3 Audit Trail and Statistics Compilation When a story is viewed through the Story Presenter interface, an audit trail is automatically

compiled on pages viewed, time spent on each page, and the conditional options chosen on each

page. Using this audit data, the application generates statistics on published stories for the

author/administrator to view. Section 9.0 of this guide addresses in detail the operation of Story

Builder/Presenter statistical functionality and the data this functionality captures.

2.0 Minimum Requirements for Story Builder/Presenter Story Builder and Story Presenter are compatible with the web browsers and operating systems

listed below.

Browser Operating Systems

Windows XP Mac OSX GNU/Linux

Internet Explorer 10 OK N/A N/A





Firefox OK OK OK

Chrome OK OK OK

Safari OK OK N/A

Opera OK OK OK

Figure 1: Browser Requirements

The “Code Set and Installation Guide for eConsent Story Engine (Story Builder and Story

Presenter)” should be consulted regarding details and specifications about the minimum

requirements necessary to install the Story Engine application.

In the Architectural Analysis Work Product, we describe the technology and tools we use to

electronically provide educational material, enable the capture of a patient’s choice/consent

decision concerning whether or not a provider can access his/her health information, and display

a short survey recording knowledge gained and satisfaction with the experience. We also discuss

the technology behind the open source tool plus discussions on the different technologies that

compose the eConsent program.

3.0 Story Builder Application

3.1 Using Story Builder Story Builder is a graphical tool that allows authors to create stories. Individuals can create a

story by authoring HTML content, uploading multimedia files (referred to as “assets” in this

guide), and placing them in selected “story paths.” Story Builder’s modular design allows the


3

author to create different stories using the same group of assets without the need to use separate

assets for every story.

Story Builder, as an authoring tool, is composed of three main modules:

1. Assets module (see Section 5.0)

2. Pages module (see Section 6.0)

3. Stories module (see Section 7.0)

All stories are a combination of these modules, and the author determines the displayed story

path. Figure 2 shows the modular components menu displayed at the top of every Story Builder

page; authors can use it to access the different modules. This guide reviews each of these

modules.

Figure 2: Modular Components Menu

Using Story Builder, the author builds individual pages with assets and then links the pages

together into a story path. It is simple to change and/or edit a story because an author only needs

to edit a page or asset rather than an entire story. Because of the modular nature, a page from

one story can be used in another story. Story Builder’s functionality allows authors to take the

same pages and assets and display them in different ways, thereby creating different stories.

3.2 Creating New Users When the Story Builder application is installed, a default system administrator is created. This

default system administrator will create the initial account(s) for new author(s) to access Story

Builder. See the document “Code Set and Installation Guide for eConsent Story Engine (Story

Builder and Story Presenter)” for details on installing the application and creating the default

administrator login.

The default administrator is not the only person who can create new users. However, the default

administrator must create the next user after himself/herself with appropriate privileges if

someone else is to be responsible for creating new users. To add new users, a user must have

administration-level permissions. Administration-level permissions are added at the point a

given user account is established. Once a user is so designated, he/she will follow these steps to

create new authors/users:

1. Press the “Administration” link on the menu bar at the top of the page (Figure 3). Note:

This option will only be displayed for those users with administrator-level privileges.


4

Figure 3: Administration Link

2. The Users dashboard will display (Figure 4). Press the “New User” button in the lower

left corner of the Users dashboard to open the “Create User” form (Figure 5).

Figure 4: Users Dashboard

3. Enter the user’s email in the field displayed in Figure 5.

Figure 5: Create User Form

4. Enter the user’s password and then confirm the same password. Passwords must be a

minimum of six characters in length.

5. To grant user permission, add or change passwords, and/or delete users, check the

“Admin” check box. (Remember, only users with administration permissions can create

a new user account.)

6. Press the “Save” button. Story Builder will return to the Story Home page.


5

3.3 Establishing Authors/User Profiles in Story Builder Story Builder allows authors to work collaboratively and review each other’s work. There can

be multiple users/authors with simultaneous access to the Story Builder application, a story, and

even an individual page. Because of its modular nature, Story Builder permits different authors

the ability to draft different pages of a given story at the same time. Pages are covered in

Section 6.0.

3.4 Logging In To log in to Story Builder, go to the install Uniform Resource Locator (URL) (actual address

depends on installation location) “/login,” (e.g., www.install-location.com/login). The login

page will be displayed. Enter your login credentials from above and press “Sign In.”

Figure 6: Story Builder Sign-In Page

After successfully logging in, the Story Builder dashboard displays. If this is the first time the

user logs into Story Builder, there may be no data for the author to see on the dashboard. If other

authors have used the tool, the dashboard will show work previously created.1

4.0 Story Builder Home Page

4.1 Story Builder Home Page/Dashboard Overview To access the Story Builder Home page, press the menu link “Home” as shown in Figure 7

below.

Figure 7: Story Builder Home Page

1 The software package available on GitHub includes sample stories that can be imported into Story Engine.

For more information on importing stories, refer to Section 7.6.

http://www.install-location.com/login


6

After the “Home” link is selected, a summary list of stories may display as shown in Figure 8.

Because Story Builder is a collaborative tool the stories on the dashboard are a collection of the

stories created by all users. Even if an author has not personally created any stories, stories of

other authors will populate the Story Builder Home dashboard.

A story can be finished but does not need to be “published” immediately. Once a story is

published, it is available for live viewing through Story Presenter (see Section 8.0).

Figure 8: Story Builder Home Page/Dashboard

The criteria displayed on the Home page are:

Title – shows the displayed title of the story.

Name – provides the internal name of the story (which must be unique).

Story Pages – tells the user how many pages are in the story.

Status – informs the author of the state of the story; “Draft” indicates an unpublished

story and “Published” indicates a story is available for live viewing through the Story

Presenter.

Last Changed – provides the date of the most recent edit of the story.

Presented – displays how many times the story has been presented for viewing.

Statistics – provides statistical information related to the story, such as average view time

or average pages viewed.

Publish/Retract – allows the story to be made viewable through Story Presenter. When

a story is published, this button changes to “Retract.” Clicking “Retract” prevents the

story from being viewed.

5.0 Assets Module

5.1 Assets Module/Dashboard Overview Assets are image, video, or audio files that an author can upload into Story Builder for use in

story creation. Story Builder does not create the assets. An author can upload assets to the Asset

module of Story Builder, even before creating pages, to enhance the content that will be used to

create a story.


7

To begin uploading Assets, the author must first select “Assets” from the menu bar at the top of

the Story Builder Home page as shown in Figure 9.

Figure 9: Story Builder Menu “Assets” Link Circled

Once the author selects the “Assets” link from the top of the page, the User Assets dashboard

displays as shown in Figure 10.

Figure 10: User Assets Dashboard

The User Assets dashboard supports various file formats such as MP3, MP4, Waveform Audio

File (wav), jpeg, and other common media formats, including those video files supporting closed

captioning to assist those individuals who might be hearing-impaired.2 Closed captioning is not

a feature of the application, but Story Builder will support video files with closed captioning

embedded within them. It is the obligation of the video author to embed the closed captioning

2 Care should be taken to choose the proper audio/video format. The web browsers that display the story do not

support all audio and video formats. The open source audio/video player included with Story Engine will play

standard MP4 video files. If the web browser does not support native video playback, it will fall back to a built-in

Adobe Flash player. The open source player has been successfully tested to play MP4-formatted files on Firefox

18.0, Internet Explorer 9, and Google Chrome 24.0 browsers.

For audio assets, Internet Explorer only supports MP3 and Advanced Audio Coding (AAC) audio formats. Firefox

supports Ogg Vorbis and wav formats. Chrome supports Ogg Vorbis and MP3 formats. If the web browser does

not support the chosen audio format, the open source audio/video player can NOT fall back to the built-in Adobe

Flash player for audio.


8

text in the file. Once the files are uploaded, a Story Builder author can insert these assets into the

HTML Content Editor discussed throughout Section 6.2.

The User Assets dashboard (Figure 10) displays the following criteria associated with each file

uploaded to the Asset module:

Title – shows name the author assigns to the asset when the asset is uploaded.

Once uploaded, the asset title cannot be changed.

File Type – identifies if the file is an image, video, or audio file.

Size – displays the size of the file.

Created – indicates date when the file was uploaded to the Asset collection.

Actions – shows any available actions; currently the only available action available is to

delete the file. Deletion is permanent and cannot be undone. An alert box is displayed to

confirm asset deletions.

Note: To prevent accidental story corruption, assets cannot be deleted if they are being

used in pages, and pages cannot be deleted if they are being used in stories.

In Figure 10, the title “Allison eConsent intro” displays the file format as “image/jpeg.” For the

“What is a HIE?” title, also listed within Figure 10, the format “audio/wav” shows that an audio

file is attached.

5.2 Uploading Files into the Assets Module Collecting all assets in one place and keeping them together in the User Assets dashboard

permits the author to include a given asset in multiple pages across different stories, rather than

assets being confined to a single page in a specific story.

At the bottom left of the User Assets dashboard (Figure 10) is the “New Asset” button used to

upload new assets.

1. Press the button to display the Upload Asset File form as shown in Figure 11.


9

Figure 11: Upload Asset File Page

2. Enter a name for the asset in the Title field (a required field). Then, press the “Browse”

button to select the file to upload. Figure 12 below displays a sample screen the author

may see after clicking the “Browse” button on the Upload Asset File page. The author

selects a file and clicks the “Open” button, completing the process and taking the author

back to the Upload Asset File page.

Figure 12: Browse Page

Figure 13 below shows the Upload Asset File page after an author has selected a file

to upload.

3. Click the “Upload File” button to upload the file to Story Builder.


10

Figure 13: Upload Asset File Page with File Selected

4. When the file upload is complete, the User Assets dashboard page displays.

6.0 Pages Module

6.1 Pages Module/Dashboard Overview Pages are the cornerstone to creating professional-looking results with Story Builder. Pages are

individual screens that display text and graphical content through Story Presenter. Each story is

composed of multiple pages linked together in a story path.

As shown below in Figure 14, pages are accessed from the Pages link found on the menu bar at

the top of the Home page.

Figure 14: Story Builder Menu “Pages” Link Circled

After selecting the “Pages” menu link from the Story Builder Home page, the screen displays a

summary of all pages within Story Builder, as shown in Figure 15.


11

Figure 15: Pages Dashboard

The Pages dashboard displays the following criteria for each page:

Name – identifies each page with a name assigned by the user when he/she creates the

page. This name links to that page’s Content Editor. See Section 6.2 for details on the

HTML Content Editor.

Excerpt (of content) – provides a short preview of the page’s content, usually the first

several words of the text.

Size – tells the user how large the page file is.

Media Asset – indicates that a video file or audio file is attached to the page. These files

play each time the page is displayed. So, for example, an author can attach a video file to

a page and it will automatically be played when the page is displayed. Pages can be

authored with or without an attached media asset.

Last Updated – lists the most recent date that the page was changed.

Actions – allows preview of pages; allows assistance with page editing; or allows

deletion of a page completely. Note: Deletion is permanent and cannot be undone.

An alert box is displayed to confirm deletions.

6.2 Page Creation and Editing Clicking the blue “New Page” button at the bottom left of the Pages dashboard (Figure 15)

creates a new page and opens the HTML Content Editor. The HTML Content Editor is shown

below in Figure 16.


12

Figure 16: New Page Template

Figure 16 displays a new page template where an author can insert content. The Content Editor

for creating pages is the platform-independent, web-based JavaScript HTML “What You See Is

What You Get” (WYSIWYG) editor/author control interface of Story Builder. It is an open

source tool developed by Moxiecode Systems AB. Additionally, Story Builder’s WYSIWYG

editor (referred to as “the Content Editor”) provides the author tools to insert text and graphics in

the desired positions and format. The Content Editor should be reasonably familiar to anyone

who has used Microsoft Word.

There are several notable features on the Content Editor page:

Name Field – allows the author to name the page for future reference. The Name field

is used internally by Story Builder and is never displayed through the Story Presenter.

Media Asset Selection – allows the author to attach an Asset (e.g., a media file) that has

been previously uploaded to Story Builder (see Sections 5.2 and 6.3).

Signature Checkboxes – used to capture and display a signature through Story

Presenter. See Section 8.0 for more details on these check boxes and the signature

capture functionality of the Story Engine.


13

Figure 17: HTML Content Editor

Figure 17 above shows some of the tools at the author’s disposal when editing content for a

story. The tools include bullets and numbering, page alignment, indentation, and undo. The tool

bar of the Content Editor includes bold, italic, underline, and strikethrough commands for page

drafting. It also includes style settings as well as text formatting, size, and color. When the

author puts his/her cursor over a button on the tool bar, the screen will display a description of

the button’s function. The author enters text into the Content Editor just as one would for a

Microsoft Word document.

Assets can be added to the page to enhance the text. Assets can be image files, audio files,

and/or video files. Pages can host multiple images, but they can only host one audio or video

asset per page. Restricting a page to host/display only one video or audio asset eliminates the

possibility of having competing assets “talking over” each other. The same audio or video assets

can be used in multiple pages or stories.

The Content Editor provides resources for creating stories accessible to those users who may be

visually impaired. For example:

Video Files – embedded with closed captioning can be supported.

Text Sizes – can be increased with the font size control on the task bar.

Audio Files – can be attached to pages as assets.

6.2.1 Saving Page Edits

Because Story Builder is a collaborative authoring tool, two or more authors have the ability to

work on the same page/story at the same time. However, the author who presses “Update Page”

last will overwrite other editing done on the page. The user who presses the “Update Page”

button first will need to review his/her edits and re-save any missing text not captured when the

last author presses “Update Page” and saves his/her work. If two or more authors have the same


14

page open concurrently, it is recommended they review their work collectively to ensure all

editing is saved correctly.

6.3 Adding Media Assets to a Page Within the Content Editor on the Edit page, the author can select a media asset from the Asset

dropdown box (Figure 18 below) to add media assets to a page. The Asset dropdown box pulls

in those assets previously saved in the Asset dashboard (see Section 5.2). Click the arrow and

select from the dropdown list the asset to be attached to the specific page. Press the “Update

Page” button, and the asset file is included with the page. To view the asset, the author will need

to press the “Preview” button from the Actions column on the Page dashboard (Figure 15).

Figure 18: Adding a Media Asset to a Page

The author can add only one audio or video asset (see Section 6.4 about adding image assets) per

page. This capability is in place to help ensure that audio or video files are not playing against

each other when someone is viewing the page.

6.4 Adding Image Assets to a Page Unlike audio or video assets which are limited to one inclusion per page, users can attach

multiple image files to a page. The author can insert image files directly into the HTML content.

To add an image to a page, while in the Content Editor, place the cursor where the image should

go on the page being created, and select the “Insert Image” functionality button from the Content

Editor tool bar (see Figure 19 diagram where the button displays as a “tree” icon at the top of the

Content Editor tool bar). When the Insert/Edit Image form opens, the user presses the Image List

dropdown arrow and selects an image file from the list. Press the “Insert” button to complete the

action. An author can insert as many images as needed or that page space permits.


15

Insert alt text in the Image Description field found on the Insert/Edit Image form discussed above

and shown in Figure 19. Story Builder does support alt text within images.

Figure 19: Steps to Inserting an Image

When the author finishes working on a page, select the “Update Page” button on the left of the

screen to save changes made to the page. The author can revisit the page and edit it at any time.

When all pages are finalized, the author can then create a story. See Section 7.0 for information

on how to use the Stories Module.


16

6.5 Page Preview At any time, authors have preview functionality where they can review progress and

evaluate work on a page through a web browser. The figure below displays a page as seen

through the preview feature.

Figure 20: Preview Page

Figure 20 shows an image taken from an actual story page supporting a video file that is included

as a media asset for a story. The preview page also allows the author to play any media asset

attached to a page. A video player (and controls provided) is a part of the Story Presenter

download; the audio/video player controls will display with the media asset, allowing a viewer to

control the sound volume and rewind the video if desired.

The preview functionality is accessed from the Pages dashboard. Figure 15 shows the summary

of pages and the location of the “Preview” button for each page, which is located to the left of

the red “Delete” button. Pressing the “Preview” button displays the selected page in a web

browser. To preview more than one page, the user will need to click on individual “Preview”

buttons for desired pages. The tool does not allow for the preview of the full story all at once.

However, the author can “publish” the story to view it in total. (See Section 4.1 for more

information about publishing a story.)


17

7.0 Stories Module

7.1 Stories Dashboard Overview A story is viewable content displayed through Story Presenter that the Story Builder application

creates from pages. To access or create a story, select the “Stories” menu link as displayed in the

figure below from the main Story Builder Home page.

Figure 21: Story Menu Link

Once the author selects the “Stories” menu link, a summary of stories similar to Figure 22 will

display on the author’s screen. Because Story Builder is a collaborative tool, even if an author

has not personally created any stories, stories of other authors will populate the dashboard.

Figure 22: Stories Dashboard Page

The Stories dashboard displays the following criteria for each story in the Story module:

Name – is an internal field to identify a specific story and does not display anywhere

else. This field is hyperlinked to an edit/update screen. On the edit/update screen, the

author can change the name of the story.

Title – is a public field that can be displayed with the story.

Status – provides a quick-view indication of story development from draft phase through

published.

Last Changed – displays the date of the last edit performed on the story.

Actions – allows the author to edit the story path or delete the story. See Section 7.3 for

more information on this feature.

Delete – removes the story from the database. Note: Deletion is permanent and cannot

be undone. An alert box displays before the deletion to confirm the action is intentional.


18

7.2 Creating a Story The following steps describe how to create a story, starting with pressing the “Stories” menu link

(Figure 21) to access the Stories dashboard.

1. Once on the Stories dashboard (Figure 22), press the “New Story” button in the lower left

corner to open the New Story form as shown in Figure 23.

2. Fill in the Name and Title fields and press the “Create Story” button. The Name field

text displays under the Name column on the dashboard. The Title field displays on the

dashboard under the Title column.

Figure 23: New Story Page

After the author presses the “Create Story” button, the application returns to the Stories

dashboard and the new story’s name is displayed on the screen. At this point the author still has

not created much of a story; it is really just a shell even though the name is visible on the

dashboard. Authors still need to add content to the story. See the earlier sections on Pages and

Assets to learn how to create content.

Stories are built by adding pages together, building a “story path.” Once content is added and

pages are developed, the author needs to add the pages to the story path to build the structure of

the story. A story path is a specific collection of pages and assets utilizing a feature called

“conditions” to make a story line. Section 7.4 will discuss the creation of conditions, but first we

will examine the story path.

7.3 Story Path The functionality behind organizing a story/sequencing pages is called the story path. The story

path can be looked at as a kind of controller of Story Builder. The author builds the story path

by directing pages to display in a specified order. For most authors, a story will be a linear

progression of pages, but Story Builder supports non-linear story creation. For example, the

progression can be page 1 to page 2 to page 3 or the path can support a jump from page 1 to page

8 and then back to page 2 depending on the patient interaction with the story.

To start the process of building a story path, the author opens the Stories dashboard where he/she

will find the “Edit Story Path” button on the right side of the page (Figure 24).


19

Figure 24: Edit Story Path

Pressing the “Edit Story Path” button will open the Story Path Editor. A form similar to that

displayed below in Figure 25 is displayed.

7.3.1 Building a Story Path/Adding Pages

The following steps describe how to build a story path from the very beginning of a story in

which no pages are included. In a later section (Section 7.4.2), we will look at how to edit a

story path after pages have been added. Figure 25 below shows what the author will see when

creating a story path for a brand new story.

Figure 25: Story Path – No Path Established

Notice how the story’s title displays in grey text, letting the author know he/she has chosen the

correct (or not) story. As this is a new story, the screen displays “No pages in this story.” To

build the story path, the author will want to include content/specific pages. To add specific

pages to a new story to create a story path:

1. Press the “Add Page” button to go to the Add Page to Story dashboard (Figure 26), where

the author selects a page for inclusion into the story path. The Add Page to Story

Dashboard gives authors three options regarding pages:

“Add” button – inserts pages into a story path when clicked

“View” button – displays a preview of the page

“Create New Page” button at the lower left of the screen – creates new pages (see

Section 6.2 for details on creating pages)


20

Figure 26: Add Page to Story Dashboard

2. From the Add Page to Story dashboard, press the “Add” button next to a page to include

that page to a story path (again, story name shown in grey text next to the “Add Page to

Story” label). For the path shown below, the page “Name Field” is chosen.

3. A confirmation message (Figure 27) indicates the page was added successfully.

Figure 27: Successful Page Addition

More pages can be added to a story by repeating the steps described above, or the author can

start working on the next step in the process — adding conditions.

7.4 Story Path Conditions Conditions are options that allow an author to determine the next page to be displayed based on

viewer/patient input/selection. For example, if the page displays a question such as, “Are you

the head of the household?” and the patient chooses “No,” the condition can skip over pages

containing content related to the head of household.

7.4.1 Creating Conditions for a Story Path

To build the story path, the author needs to add conditions to a story through the “Add Condition

to Story Path” form shown below.

1. Locate the “Add Condition” button on the Stories dashboard.


21

2. Pressing the “Add Condition” button in Story Builder will open the Add Condition to

Story Page form seen in Figure 28 below.

Figure 28: Story Path – Add Condition to Story Page Form

The fields of Figure 28 are defined as follows:

Button Title – assigns a name to the condition. This is a free text field allowing the

author to name the condition as desired. This label will appear on the button when the

published story is made available through the Story Presenter.

Button Subtitle – assigns secondary text to a button. This label will appear as secondary

text on the button.

Button Color – sets the background color of the displayed button.

Button Location – sets the location of the button in relation to the page (top, middle, or

bottom).

Destination Story Page – sets the page that will be displayed when a user selects the

button through the Story Presenter. Note: A page must be added to the Story Path

(Section 7.3.1) before it will appear in the dropdown as a destination page.

Destination Story – jumps to the first page of a different story. This allows authors to

break up content into multiple stories for simpler editing and connect them together to

form a longer story.


22

Figure 29: Adding a Condition

Figure 29 above displays the Add Condition to Story Page form where the story page condition

is defined. This image is a duplicate of Figure 28 but with the data fields filled in.

3. Enter appropriate text in the form to build the condition.

4. Press the “Save” button to capture the information entered into the form.

Figure 30: Saved Condition

Story Builder’s confirmation message pops up telling the author the condition was entered and

saved successfully. The fields appearing on the Story Path form are:

Page Title – provides the title of the page selected. The title’s link takes the author to the

Content Editor of the page.

Condition – shows the name appearing on the condition button assigned to this page.

The button’s link takes the author to the Condition form.

Destination Page – represents a sample title of a destination page. A destination page is

the one that will display next/after a user selects the button.


23

These additional controls are also displayed on the form to help the author order the story pages

and conditions:

These arrows allow the author to establish the order in which pages will display in

a story path. As the arrows indicate, they move the selected page up and down in relation to

others.

These arrows determine the order of the conditions for the individual story page.

Referring to Figure 30 above, by pressing the side by side arrows the author can change the

ordering of the conditions. For example, “Condition B” displays AFTER “Condition.”

When the “right” arrow of “Condition” is pressed, “Condition” will change places with

“Condition B,” and “Condition B” will be displayed first.

The letter in parentheses (T) refers to the location of the button on a page. “T” means the

location of the button will be on the top of a page, “M” refers to a middle page button

location, and “B” locates the button on the bottom of a page. Figure 29 displays this control,

and the author can modify it by selecting the dropdown list under the “Button Location”

field.

Pressing this button removes the page AND condition(s) from the story.

Pressing this button adds a condition to a story.

After creating several combinations of pages and conditions, the author should start to get a feel

for what Story Builder can do. The author may start to recognize that the conditions may need

some tweaking or are not wanted at all. Let’s look at how to add conditions, edit conditions, or

how to remove conditions.

7.4.1.1 Adding Conditions

The operation of adding a condition is a function of building up a path, as opposed to Section

7.4.2 Revising a Story Path, which is really meant as instruction on how to change the story path

after its initial construction.

From the Stories dashboard, select the story name of the story path to be extended. For our

example, Figure 31 displays the section of the sample story “Building A Presentation.”


24

Figure 31: Extending the Path

1. Click the “Edit Story Path” button as seen in Figure 31 above. The current story path for

“Building A Presentation” will display on the screen within the Story Path Editor. The

Story Path Editor allows the author to change or revise a story path. If the Story Path

Editor displays established pages, the page names will display as blue hyperlinks similar

to those shown in Figure 32 below. Review Sections 7.3 through 7.4 for details on

adding title names, button names, and conditions.

Figure 32: Additional Condition

2. Press the “Add Condition” button located to the right side of the page label

“Name Field 2.” This action will open the Add Condition form shown below.


25

Figure 33: Add Condition Form

3. Enter text in appropriate fields and press “Save” to capture the edits to add this condition

(Figure 33). Once the “Save” button is pressed, the update is confirmed on the Story Path

form as seen below.

Figure 34: Confirm Additional Condition

Notice the change that has happened to page “Name Field 2.” Figure 34 shows the added

condition (also named “Button Title Field”) below the title field for that page.

Multiple conditions can also be created on a single page. Maybe there is a question on a page

that needs a “Yes” or “No” answer. For adding each condition, the author follows steps 1


26

through 3. The figure below is representative of what multiple conditions to a single page looks

like from the Story Path point of view.

Figure 35: Multiple Conditions

7.4.1.2 Editing Conditions

Figure 35 above shows the name field “Name Field” as a hyperlink to the “Edit Condition” page

where the author can make revisions to the condition.

1. Press on the condition name to open the Edit Condition form.

Figure 36: Edit Condition Form

2. Update the desired text fields. In this example (Figure 36), the button title for the specific

condition is changed to “Green YES Button.” By entering new text into any of the text

fields, the author can edit the condition.

3. Press the blue “Save” button at the lower left to capture the change.

From the page below in Figure 37, viewers will see the button label of the condition has changed

to “Green YES Button” from “Button Title Field.”


27

Figure 37: Edit Confirmation

7.4.1.3 Removing Conditions

1. To remove a condition, begin by following steps 1 through 2 described above in “Adding

Conditions” (Section 7.4.1.1.) which should take the author to the Edit Condition form

(Figure 36).

2. Look for the red “Remove” button on the bottom of the Edit Condition form. Note: The

“Remove” button only displays when the form is in the “edit” mode.

3. Pressing the button will prompt the confirmation shown in Figure 38.

Figure 38: Remove Condition Prompt

4. Press “OK” to complete the action of removing the condition.

After pressing “OK,” the author is returned to the Story Path, where further changes can be made

if desired.

7.4.2 Revising a Story Path

The steps for revising a story path are the same as those for adding conditions to a story path

except that the author is revising an existing condition.


28

Figure 39: Revising a Story Path

By using the arrow controls within the Story Path Editor, displayed in Figure 39, the author can

rearrange pages or conditions to display in an order different than originally planned.

Use the up/down arrows to move pages up and down.

Use the left/right arrows to move conditions back and forth.

Set the cursor on any of the arrows and left-select it. The page name will move depending on the

arrow pressed. For example, let’s revise the image shown in Figure 39. By using the arrow

controls, the pages “Name Field” and “Name Field 2” are rearranged in Figure 40 compared to

Figure 39. The conditions below may also function differently, because when the order was

rearranged, the story path may have changed from that displayed in Figure 39.

Figure 40: Revised Story Path


29

Figure 41 shows part of a highly developed story path for the story “eConsent Survey.” Note the

graphic on the right side of the story path page.

Figure 41: Sample Story Path

The graphic in Figure 41 displays the progressing relationship between the pages for a story. The

flow of a story can get quite complex, and this graph can help authors visualize the story flow

and the relationship between the story pages. The story path graph is composed of various

shapes and colors:

Green triangle – is symbolic of the story’s beginning or source page.

Grey squares – represent additional story pages, with their page titles superimposed over

the squares.

Blue arrows – are a visual indicator of the direction a story progresses from one page to

the next destination.

Red dot – signals where in the flow the viewer is directed to a different story.

7.4.3 Removing Pages from a Story

Review Figure 41 to locate the “Remove” button on a story path. The button will be located just

to the right of the page title. Pressing the “Remove” button will delete that page from the story

plus any conditions associated with that page. Once the “Remove” button is pressed, the action

is final. There is no way to “recover” it within Story Builder.

7.5 Publishing/Un-publishing a Story The act of publishing makes the story available to those who have access to the Story Presenter

GUI. The steps to publish a story are:

1. From the Story Builder Home page (aka dashboard) shown in Figure 42, select the story

to be made viewable through Story Presenter and click “Publish.”


30

Figure 42: Story Builder Home Page

2. A dialogue box, as seen in the figure below, will open and ask for confirmation.

Figure 43: Story Publish Confirmation Dialogue Box

3. Clicking “OK” in the dialogue box makes the story viewable through Story Presenter.

Note the change in the story’s status column from “Draft” to “Published” for the story

“New Story Name” in Figure 44 below.

Figure 44: Story Builder Home Page – Story Published

4. To remove a story from external view, select the “Retract” button next to the story to be

removed from view. The “Retract” button can be seen in the figure above on the right

side of the form. Upon selecting the “Retract” button, the story will no longer be

viewable in Story Presenter. The “Retract” button is replaced with the “Publish” button,

formerly seen in Figure 42 above.


31

7.6 Export/Import Module This section discusses the ability of Story Engine to export a story into a single file from one

Story Engine installation and then import that file into another installation. The Export/Import

module assembles all the contents of a story — including assets, pages, and video files — and

combines them into a single file. This gives the user the opportunity to import the contents of

any Story Builder authored story into a new installation without the need to create new material.

Stories are not required to be published in order to be exported.

There are two features to this functionality. There is the Exported Stories page displaying stories

ready to be imported and there is the export/import functionality. To initiate the export/import

functionality, access the teal “Export” button found on each line of a story, just below the

Actions column label and to the right of the “Edit Story Path” button. Pressing this button

exports that story. More on exporting is covered in Section 7.6.1 Steps to Export a Story.

To display the list of exported stories, press the “Exported Stories” button highlighted in Figure

45 below. Pressing this button brings the author to the Exported Stories page. It displays a quick

view of the items in that list.

Figure 45: Export/Import Functionality

The Exported Stories dashboard (Figure 46) will display a list of stories that have been exported

and are ready to be downloaded into their own zip file and imported to other installations.

Figure 46: Exported Stores Dashboard

The following details are displayed on the Exported Stories dashboard:

Story Name – displays the title that the author assigns to a story along with a timestamp.

Export Date – displays the most current date the story was exported.

Size – displays the size of the story file.


32

Status – displays whether a story has been successfully exported. An unsuccessful

export will display the word “Failed” in the status column.

Actions – provides the column of buttons that act on the corresponding export.

Story Engine will not allow two stories with the same name to occupy the exported stories list.

Because the export/import functionality essentially duplicates the entire content, including story

name, the date and time is added to the story name to prevent duplicates.

The date and time stamp format assigned by the application indicates when the story was

exported. The date format displays as YYYY-MM-DD. The time format displays as HH-MM-

SS. Together, and including the story name, the format will display as [Story Name field YYYY-

MM-DD-HH-MM-SS]. Time is expressed in military time to cover the entire 24-hour clock

accurately. A time of 1:02:28 p.m. will display a time stamp format as 13-02-28.

The export functionality does not overwrite any story that was previously exported. Story

Builder will display the newly exported story along with previously exported stories. Stories

will sort with the most recently exported displayed at the top of the page, followed by the

older ones.

7.6.1 Exporting a Story

1. Access the Stories dashboard from the Story Builder menu bar.

2. Choose the story to export and look for the blue “Export” button to the right of the

selected story.

3. Press the “Export” button. When export is successful, a confirmation message will

display.

After pressing the “Export” button, the author may need to wait a few minutes for the

story export to complete. Story Engine has to gather up all of the content before it can

assemble and post it into a file. The size of asset files and the amount of content on pages

can have an impact on how quickly the exporting function can create the export. The

larger the file size or the greater the amount of content, the longer it takes Story Builder

to export.

4. Locate the “Exported Stories” button found near the top of the Stories dashboard on the

right side of the page.

5. Pressing the button takes the author to the list of exported stories where an exported story

can be downloaded.

Exporting continues on the Exported Stories dashboard by locating the “Download”

button under the Actions column for each story. There is a “Download” button for each

story in this list.


33

Figure 47: Story Download

6. Press the “Download” button for the selected story that is to be downloaded.

The figure below depicts an interface a Firefox browser might display during the

download process.

Figure 48: Firefox Interface

Figure 49 below displays an interface that Internet Explorer might use while working

through the downloading process.

Figure 49: Explorer Interface

7. Continue the exporting process by pressing “OK” (Firefox) or “Open”

(Internet Explorer).

An important consideration to keep in mind while downloading the exported file is that each

browser displays its version of an interface while working through the process. In some cases,

the interface might not look like those shown above. While other browsers have not been

researched for this document, experience tells us these browsers usually have their unique

interfaces to accomplish the same process. The important point to consider here is to not be

concerned about the appearance of the interface but instead be sure the interface has the options

necessary for the process.


34

8. The application will convert the contents into a zip file that the author saves in a

folder of his/her choosing.

This completes the export story operation.

7.6.2 Importing a Story

The Story Engine application treats an imported story the same way it treats a story of its own

creation. After importing, the story will display on the Stories dashboard just as if it were

authored in Story Builder.

The Stories dashboard has another button at the bottom of the page on the left side near the “New

Story” button. This is the “Import Story” button used to import stories previously saved like

those described in Section 7.6.1 Steps to Export a Story.

Figure 50: Importing Story

1. Press the “Import Story” button. This opens the Upload Story File form.

Figure 51: Upload Story Form

2. Press the “Browse” button to open the file pop-up window.


35

Figure 52: Pop-Up Window

3. Select the appropriate story file from the folder where it has been stored.

Note: The authors of this guide make no recommendations on location of saved files.

That location is subject to the internal policy of the facility utilizing the functionality

and would require their research into what best fits their needs.

4. Press the “Open” button on the pop-up window once selection is made.

The application will revert to the Upload Story Export form shown below.

Figure 53: Upload Story Export Form

5. Press the “Upload File” button to complete the action. Story Builder will revert to the

Stories dashboard and the following message will display.

Similar to the exporting process, importing a story may take several minutes depending on the

size and content of the import.

This completes the import story operation. An imported story will still need to be published in

order to be viewable through Story Presenter.


36

7.6.3 Sample Stories

The Office of the National Coordinator for Health Information Technology (ONC) will be

making available several sample stories that can be imported to a Story Engine installation.

These stories are separate from a Story Engine installation and they are not required in order to

download the application to your server.

These samples can be imported using the same steps that we have discussed in Section 7.6.2.

Because ONC is responsible for making these samples available, refer to the ONC website

(HealthIT.gov) for news on how to obtain these samples.

8.0 Story Presenter

8.1 Story Presenter Story Presenter is the interface that permits a viewer to interact with a story created through

Story Builder. With Story Builder, an author creates content that is ultimately viewed on Story

Presenter through a web browser. Story Presenter is included as part of the tool itself when

someone downloads and installs Story Engine. For information on establishing and accessing

Story Presenter, an administrator must consult the “Code Set and Installation Guide for eConsent

Story Engine (Story Builder and Story Presenter).”

Story Presenter displays content, but the story must be published before it will appear on the

interface. From the Story Builder home page, when the author clicks the “Publish” button, the

application tells Story Presenter that the story is ready to be viewed.

A list of published stories is available at the installation’s URL “/presenter.” A viewer (or some

facilitator) would press the hyperlink of a published story and that story will display in Presenter.

A sample image of a Story Presenter published stories list is shown in Figure 54.

Figure 54: Published Stories

The base URL (e.g., http://www.url.com) for Story Presenter will depend on the installation

location. Story Presenter installation is covered in the “Code Set and Installation Guide for

eConsent Story Engine (Story Builder and Story Presenter).”


37

Because Story Presenter requires a web browser for content viewing and because each browser

acts a little differently from one another, the content appearance can vary slightly from browser

to browser. To illustrate this fact, review the two images below (Figure 55) displaying the same

preview image from a Story Builder story. Careful review will show the two images are not

exactly alike.

Figure 55: Browser Comparison

A viewer can see there are subtle differences in text font and text space displayed by content.

There are slight differences in shading between images. These differences are due to the way

browsers display content and cannot be controlled by Story Presenter or Story Builder.

The author may want to make allowances in the design to accommodate a browser’s means

of display.

Prior to publishing a story, authors can use the various preview functions of the tool discussed

earlier in this document to review their work. With some practice, the ability for an author to

visualize completed stories should get easier. Experienced authors will likely gain skill at


38

visualizing the appearance of content, and the need for the preview functionality might not

be required.

8.2 Signature Capture and Display Story Presenter can display a form to capture the signature of a patient’s consent decision.

The capture field is enabled when the “Show Signature Field” checkbox in a page’s HTML

Content Editor (Figure 16 in Section 6.2) is checked. An example is shown in Figure 56 below.

Figure 56: Signature Capture Checkbox

A stylus or a finger can be used to insert a signature as long as the device supports touchscreen

functionality.

When the “Display Signature” checkbox is checked, a field will be displayed containing the

patient’s signature entered in the signature capture field, similar to the following:

Figure 57: Signature Display

This signature page, like the application itself, does not share an automatic connection with a

Health Information Exchange (HIE), so any capture displayed in the interface will not be


39

recorded in a consent storage repository. However, this signature capture page can be integrated

with an HIE’s existing technology/systems as was done with the ONC eConsent pilot.3

9.0 Story Presenter Statistics Story Presenter keeps track of every page viewed, page viewing times, and user’s condition

choice on each page of the stories. This data is generated automatically; generation of this data

does not require special training or development. Based on the data gathered, Story Presenter

compiles statistical information for each viewer for each story viewed through the interface.

Story statistics are accessed from the Story Builder Home page by clicking on the “Home” link

on the menu bar at the top of the page (Figure 7). From the Home page, select “Statistics” to

access the statistics display page for a given story and associated pages.

Figure 58: Story Builder Home – Statistics

Figure 58 above displays the location of the green “Statistics” button on an author’s home page.

The figure below is an image of a Story and Page Statistics display page. Story Builder displays

both story and page statistics on the same page.

3 For the ONC eConsent pilot, a separate third-party system was used to communicate the patient’s consent choice

and signature via Hypertext Transfer Protocol Secure (HTTPS) to the HIE. Due to the lack of standards for

signature capture and communication, we cannot supply a definitive standard or protocol that will be universally

serviceable.


40

Figure 59: Story and Page Statistics Page

All viewer statistics collected are stored anonymously and have no link to patient information.

9.1 Story Statistics Figure 60 below shows sample statistical data that the viewers of the published “eConsent Main

Story” generated by accessing the story through the Story Presenter. At the top of the page, the

following numerical story statistics are displayed:

Stories Presented – presents the total times a story is started in Story Presenter.

Average View Time – shows the average amount of time patients spent viewing the story

through Story Presenter.

Average Pages Viewed – provides the average number of pages viewed per story

presented.

Stories Completed – presents the number of times a story was viewed from the first

through to the last story page.


41

Figure 60: Story Statistics – eConsent Story

Two graphs are displayed:

Percent of Stories Completed – compiles, in pie chart form, the number of times viewers

of the story made it to the last page in the story vs. the number of times the viewer did not

make it to the end of the story.

Story Page Views – compiles, in bar graph form, the number of times each page in the

story was viewed.

9.2 Page Statistics The bottom half of the statistics page displays statistics about individual story pages. Just like

the story statistics, this information relates to a specific story, but it displays the breakdown of

statistics per page, rather than per story. As shown in Figure 61 below, the following data is

available:

Figure 61: Page Statistics

Story Page – displays the names of each page of the story.

Views – compiles the number of times the page was viewed.

Average View Time – compiles the average time a viewer spent on each page.


42

Choice – presents the number of and the type of selections viewers make to

progress/navigate in their story.

10.0 508 Compliance Section 508 of the Rehabilitation Act of 1973 requires that all federal information available

electronically be accessible to those with disabilities. This information must be accessible in a

variety of ways which are specific to each disability. The portion of Section 508 which

specifically relates to websites can be found under subsection B, 1194.22, of the 1998 revised

version of the Rehabilitation Act of 1973.

In order to maintain an acceptable level of accessibility, the Story Engine application adheres to

applicable standards. For example:

Story Builder makes use of label-based buttons in addition to color, preventing confusion

to patients with color blindness.

Story Builder does not use server-side or client-side image maps, eliminating the need for

redundant text links.

For this particular ONC eConsent project, the story developed using Story Builder is presented

using a tablet device similar to a kiosk environment. Kiosks are unlike traditional websites, so

some elements of the Section 508 Technical Standards do not apply directly. Using a tablet

device as the medium provides the following benefits:

A display on a tablet device has a frequency adequate enough to prevent screen flicker.

A tablet device provides a volume control and headphone inputs to allow the hearing-

impaired to adjust the volume accordingly.

Presenting the content on a tablet device in the medical facility eliminates the need for

compatibility with screen reader software or devices commonly used by the visually

impaired in their home setting.

Story Builder is affected indirectly by technological limitations current as of this writing.

An example is a feature known as screen reader technology. Screen reader is a great tool for

people who are visually impaired. Unfortunately, handheld devices are still in their infancy and

most devices, tablets among them, are not sufficiently developed to support the screen reader

technology at this time. Later versions of Story Builder may support screen reader technology,

but as of this writing we do not know of any.

As a reminder, several 508 features have been previously discussed in this document.

We discussed aids to visual impairment in Section 6.2. The option to include alt text is discussed

in Section 6.4. Finally, closed captioning as it relates to video files is covered in Section 5.1.

As an additional aid to compliance for those patients with disabilities or impairments that cannot

be addressed by this software on a tablet, laptop, or other device, any content can be available in

print format, allowing patients to view the material. To print, go to the menu bar at the top of

your browser, click “File,” then select the Print option from the browser. This will print the

currently displayed page.


43

A note about printing: the Story Engine application (and by association Story Builder/Presenter)

does not have a print capability. The print method described here is a function of the browser

used to view the presentation. If later versions of a browser do away with this functionality, an

author may be forced to use a different browser. This print technique is included in this section

as an aid to those who may be visually impaired.

11.0 Security The composition of Story Builder’s assets, pages, and stories can be altered by the author(s).

Only authors have editing capability over the content in Story Builder. This security measure

prevents an unqualified person (e.g., a patient/viewer) from accessing or even accidentally

deleting the content. This is a standard feature of the application. There is nothing that a user

needs to designate once his/her account is established. To prevent accidental story corruption,

assets cannot be deleted if they are being used in pages, and pages cannot be deleted if they are

being used in stories.

During the ONC eConsent pilot, no patient identifiable health care information was stored in

Story Engine. All patient statistics collected are saved under a session identifier which has no

link to patient information.

12.0 Other Implementation Considerations As a tool whose purpose is to accommodate many authors and eventually many viewers, we have

shown Story Engine has many options to provide dynamic stories. At the same time, there is a

need to understand limitations that impact the application and are outside of its control. When

Story Engine is installed on a web server, it is the responsibility of the author or administrator to

determine what type of device the authored content will be viewed on.

The devices used for viewing a story can dictate how that story may need to be built. At present,

the dimensions of most desktop and laptop computers screens are fairly standard from one brand

to the next within the industry. The rise in the use of smartphones and other handheld devices to

view web-based content has introduced new dimensions to viewing areas that do not translate

well between traditional computer screens and handheld screens. When drafting a story, the

author needs to know how the story will be shown on the screen to accommodate the placement

of items like buttons and their size. The story that views well on a desktop computer may not

appear as well on a tablet. All stories should be thoroughly reviewed before making them

available for general viewing.

Documents

U.S. Department of Health and Human Services (HHS) The ...€¦ · 2.0 Minimum Requirements for Story Builder/Presenter ... Story Builder is an authoring application whose intuitive