Page Last Updated Sunday, April 27, 2008 10:21 PM

Project Title


Project Manager

Jerry Bates

Project Team

Ray Chapman, Angela Macklin


Dr. Michael Grant


April 28, 2008

Treatment Report

The electronic performance support system’s initial treatment plan were supplanted by the product specifications and high concept statement, which follow.

Product Specifications

The required product is a database of generic drug names, categories, subcategories, descriptions, brand names, phonetic spellings, and audio pronunciations.  The database must be accessible to the users through a Web interface, which is neither platform nor browser dependent. The user must be able to access a drug name by its category and play an audio pronunciation of the generic name for the drug.

The product must be initially populated with 90 drug names, must support expansion to a comprehensive list of drugs, and must be able to accommodate video clips (provided by UTHSC) which UTHSC plans to add at a later date.  At present, 700 drugs comprise the comprehensive list.

Audio files for the pronunciations may be derived from video files provided by UTHSC, retrieved from authoritative external sources, or recorded by new subject matter experts.

The site must be designed to conform to and use the UTHSC Medical Library server specifications: OS X (10.4), 250 GB storage, 2GB RAM, php 5.0 (minimum), mySQL 5.1 (minimum), SQLite 3.0 (minimum), support for SSH/SFTP, 10/100/1000 ethernet adapter, and Linux based system.  The system will be hosted by the UTHSC Library and will not require a user login.  However, access to the UTHSC Library system is restricted through a separate login authentication to College of Medicine students, faculty, and administrators.
System maintenance documentation must be included with the product to delineate how to add, change, and delete database entries.

High concept statement

  • ePharmacology is an on-demand Web-based system supporting medical students as they learn to pronounce the names of pharmaceuticals in their Medical Pharmacology course.  Students use an audio icon to play the model pronunciation of the drug name they have selected from a categorized list.
  • Hosted at the client’s site, the menu-driven product uses a database to store both the generic and brand names of drugs and audio pronunciation files.  The database accommodates a multi-layered categorical system so descriptive information is displayed together with the drug selected by the user. 
  • The system initially houses 90 autonomic drugs from 19 categories, but this number can be expanded without limit.  The system can also be expanded by the users to include video clips.
  • A streamlined user interface uses a simple two-column layout.  From the left column, students select the name of a drug from the master list.  The right column then provides details of the selected pharmaceutical together with the accompanying audio pronunciation file. 
  • An included user-friendly job aid for the database manager delineates the steps needed to add, edit, and discontinue existing records.

Description of the site and rationale

The website ( is composed of 4 html pages, and one frameset containing 2 separate frames.  Each page displays the same banner.  The banner identifies the product name and includes the UTHSC logo (directly from the UTHSC website).  This logo is an active link to the website.  The bottom of each page is bounded by a color footer which identifies the solution developer and date (OpenJAR Solutions, 2008).  The 4 pages are:

  1. Introduction
  2. Illustrated Guide
  3. ePharm (active content)
  4. Resources

Progression is non-linear, based on user selection of pages.  Users select pages using a horizontal navigation bar that appears directly under the banner.  The navigation bar appears on each page, in the same location.  The main content page is constructed using frames, with the content in the frames generated via php script.


About ePharmacology

The “about ePharmacology” page (index.htm) is the first link in the navigation bar.  This page contains a welcome message, a changeable message box on the right side of the screen, and a link to go directly to the ePharm page.

About ePharmacology Screen Image


Illustrated Guide

The “illustrated guide” page (guide.htm) is the second link in the navigation bar.  This page contains a screen image of the main content page together with brief instructions for using the system.  The guide page also includes a link for downloading a one-page pdf document presenting the illustrated guide together with callouts marking salient points.  The downloadable guide advises the user that the plug-ins needed for the system can be downloaded free from the Internet.  Finally, the guide page includes a link to the ePharm page.  This is particularly useful for the user who is not yet familiar with the navigation bar.

Illustrated Guide-top half of screen shot

Illustrated Guide-Bottom half


ePharm (main content)

The “ePharm” page (epharm.htm) is the third link in the navigation bar.  (Links to this page are also located in the body of the index and the guide pages.)  The ePharm page is the main content page.

The “ePharm” page inserts an inline frameset immediately following the horizontal navigation bar. The frameset contains two frames, each with a php database connection with mySQL (e.g.,

The content in the left frame is drawn from the category table in the database.  Indented beneath each category in the left frame are hyperlinked names of drugs belonging to the category.  The hyperlinked drug names in the left frame activate the content for the right frame.

The right frame displays content  in a drug information table.  This table contains the following: (a) drug name; (b) simulated phonetic spelling of drug name; (c) audio control; (d) name of category; (e) name of treatment area; (f) name of sub-treatment area; (g) multiple brand names; and (h) video control. The audio control is a Quicktime or Media Player control (depending on client browser plug-in) which links to the address of the audio file connected to the selected drug.  The link may be either internal to the host sytem or external.  The video control links to the address of the video file.  As delivered, all video control links display the same place-holder, a Flash video which informs the user that “Video [is] currently not available.”

ePharm Screen Shot



The “resources” page (resources.htm) is the fourth link in the navigation bar. This page identifies and acknowledges two content sources, one of which is the audio source. The sponsor of the project team and the names of the team members of the solution provider are identified. The page concludes with a copyright notice.


Page 4 Resources


Templates, sitemap, and style sheet

A template was not employed for this product.  Instead, an external style sheet (css) was created.  Page divisions defined in the study sheet were the masthead, a horizontal navigation bar, main content, and sidebar area, a callout text box, and a footer area.   Refer to the Technical Appendix for copies of the style sheet and php code.  The site map for the ePharm product is shown in Figure 1.

Figure 1: Sitemap for ePharmacology

Planning documents

Initial storyboards were emailed to the client on February 22, 2008, who provided positive feedback, indicating this was more than he had anticipated.  According to this initial plan, the user would select a drug category from a list.  Then the list of drugs belonging to that category would be displayed.  From the list of drugs, the user would select a drug and then view the information and have access to the audio control.  The original storyboards are presented in a separate pdf document.

As database development progressed, the team was found the original model was not conducive to the database design.  As a result, the model was revised.  A reference table at the top of the screen presented the drug category list used to identify the category’s 3-digit prefix. The left lower portion of the screen presented drug names, each with its identifying 6-digit drug number.  Users were to match the first 3 digits of the drug number with the category number, thereby identifying the drugs  belonging to the category.  Scrolling through the list, the user would use the drug name’s hyperlink to retrieve information from the database which was displayed on the right side of the screen.  Selecting a different drug name would refresh the display with new data. A new storyboard representing the new presentation model was drafted March 18 using PowerPoint.   Illustrating the basic four page concept that was ultimatedly used, prototype two actually required multiple pages to explain the complicated method of locating drugs belonging to a particular category.  The second set of layouts is presented in a separate pdf document.  Since this method was considered unduly awkward, requiring far too much user action to retrieve the information, the design team determined to find a more user-friendly presentation method.  This second prototype was therefore not presented to the client, as the team knew it would not fairly represent what it hoped it would ultimately deliver.

Following additional investigation regarding database access and presentation, the model represented in the second iteration was revised utilizing an inline frameset model.  This simplified approach presented the complete list of categorized drugs in the left frame.  Selecting a drug’s hyperlinked name from the list populated the drug information table on the right.  This revision meant users did not need to refer to a category table or match a drug number with a category number.  Once this third model for the core page was tested, the production of the remainder of the web pages proceeded using this design.  The third iteration of design documents was produced March 30 in xhtml, after the cascading style sheet (css) was established.  The client, who was provided with a link to this third prototype on April 2, responded favorably to this final design.  This version was used for the formative evaluation which commenced with e-Learning expert reviews on April 3. 

The fourth design revised the third prototype based on findings from the e-Learning experts, as discussed in the Formative Evaluation Report.  The interface screens presented earlier in this report represent this final iteration.  The css content and the php code for this fourth iteration are available in the Technical Appendix.

Technical Appendix

Styles2.css (Stylesheet for ePharm htm pages)

/* ------------- "generic" styles */ body { margin: 0; padding: 0; background: #FFE; color: #333; font: small "Lucida Grande", Arial, sans-serif; margin-bottom: 0px; } a { text-decoration: none; } a img { border: 0; } p { margin: 0 0 1em; } /* ------------- masthead styles */ #masthead { margin-bottom: 0.5em; padding-top: 1px; background: #003300; } #masthead p { margin: 0.25em 0 0 0; padding: 0 0.25em 0.25em 0.25em; border-bottom: 5px #FF9900 double; font-family: Garamond, "Times New Roman", serif; font-weight: bold; font-size: 36pt; font-stretch:extra-expanded; text-align: left; color: #FFE; } #masthead p.img { border-right: 1em; } #navlinks { margin: 0; padding: 0.5em 3em; background: #396D39; color: #FFFFFF; } #navlinks li { display: inline; margin-right: 0.5em; padding-right: 0.75em; border-right: 1px solid #FC840A; font-weight: bold; } #navlinks li.last { border-right: 0; } #navlinks a { color: #98BC1D; } #navlinks a:hover { color: #FF9900; } /* ------------- main column styles */ #content { float: left; padding: 0 20em 1em 3em; } #content h1 { margin: 0 33% 1.25em -2em; padding: 0.5em 2em; background: #F90; color: #124411; font-size: 1.5em; } #content h1 b { color: #D4EC84; } #content h2 { margin: 0.5em 0; padding-bottom: 0.25em; background: #FFE; color: #F90; border-bottom: 1px solid #B0D742; font-size: 1.5em; } #content img.illus { float: left; margin: 1em 1em 1em 0; } /* ------------- sidebar styles */ #sidebar { float: left; width: 17em; margin: 0 0 4em -18em; } /*----------#sidebar div h3 { background: #F90 }*/ #sidebar div { background: #D4EC84; color: #124411; padding: 0 1em 1em; } #sidebar div h3 { font-size: 1.25em; margin: 0 -0.8em; padding: 0.4em 0.8em; text-transform: lowercase; background: #F90 } #tip-of-the-day h4 { margin: 0 0 0.5em; padding: 0.5em 0; border-bottom: 1px solid #FFF; font-weight: normal; } #future-feature p:first-line { font-style: italic; } /*-------------- footer styles */ #footer { clear: both; padding: 0.5em 3em; background: #D4EC84; } #footer p { margin: 0; font-size: smaller; } /* ------------- epharm styles */ #epharm { width: 100%; height: 100%; } #druglist a { text-decoration: underline } #druglist ul { list-style-type: none; } #druglist li { text-decoration: none; padding: 0px; } #druglist h4 { margin: 0.5em 0.25em 0; padding-bottom: 0em; border-bottom: 1px solid #b0d742; font-size: 1.25em; } #drugtable h4 { margin: 0.5em 0.25em 0; padding-bottom: 0em; font-size: 1.25em; } #drugtable { margin: 0 1.5em; }


Word document Php Scripts for data connections on ePharm page




Page Last Updated Sunday, April 27, 2008 10:21 PM