November 10 - 13, 2009

San Jose, CA

A Technical View of a Virtual Classroom Environment  
Using SharePoint as a Platform 
By Ken Cronin and Rob Robertson 

 
Session 807 – Using SharePoint to Enhance Online Learning Events – Page 1
Kenneth Cronin & Rob Robertson, Citi
 
November 10 - 13, 2009
San Jose, CA
Introduction

This document provides a technical explanation of using SharePoint to create a virtual classroom
environment, focused on our internal implementation. Our design is scalable based on a variable
business model, allowing for the accommodation of more than 150 possible content/class types
and unlimited concurrent classes.

The Architecture

The architecture uses a standard SharePoint portal within a standard SharePoint portal, where
individual classrooms are created as sub sites. While it is not necessary to have a portal in portal
approach to create a virtual classroom environment, our experience managing a very active
portal for our organization led us to this decision. The reasons for this decision are many. The
portal site handles the site directory and structure automatically. Permission and pre-defined
groups propagate to the sub sites and the master templates can be modified without impacting the
main portal. The pre-formatted portal template available in SharePoint provided all the pieces
we initially needed, which expedited the building process. This architecture also supports a large
number of sites and additional resources, necessary to meet our business requirements.

The final architecture is represented in this simple diagram:

Main Training  Virtual  Classroom  Classroom 

Portal  Learning Portal  Site  Site 

Sites were built to reside on individual “islands.” The master templates were modified to remove
all normal breadcrumb navigation. Search scopes only point to the specific classroom. The
purpose of this is to reduce the likelihood a participant will inadvertently participate in a parallel
virtual classroom.

Designing the Sites

We started with “out of the box” parts, all of which are discussed below. To maintain a
consistent look and feel between the sites, the main page of the site cannot be modified by the
instructor. This not only prevents web parts from being deleted accidently but keeps things
consistent should an instructor move from one class to another, reducing the learning curve for
instructors.

Parts Specific to the Instructor

The following parts were added specifically for the instructor. Unless noted, only the
instructor(s) can add or modify the information.

“About” Web Part

Created Using - Content Editor Web Part

Session 807 – Using SharePoint to Enhance Online Learning Events – Page 2

Kenneth Cronin & Rob Robertson, Citi
 
November 10 - 13, 2009
San Jose, CA
Details - Displays the name and photograph of the instructor and
includes a link to a Bio page.

“Bio” page
Created Using - A “Basic Page” and stored in a separate document library
Details - Displays the instructor picture and biography information added by the
instructor. The “basic page” allows changes to be made using an easily accessible Rich
Text Editor.

“Links”
Created Using – A standard Links list
Details - Only links supplied by the instructor are visible to the students.

“Announcements”
Created Using – A standard SharePoint Announcement web part
Details - Used by instructors to post information that needs immediate visibility.

“Training Agenda”
Created Using – A custom list
Details - The agenda can be displayed using a structured or unstructured format. The
structured format uses a week/day grouping in the view to display information. The
unstructured format uses a course grouping in the view and displays the lessons in the
order they are taken. The instructors can load an agenda all at once using the “Edit in
Datasheet” view. The following explains the fields used:

• * Week - Single line of text field – Best used with a numeric value for sorting
purposes.
• * Day - Single line of text field – Best used with a numeric value for sorting
purposes.
• ** Course - Single line of text field – The main heading of the series of lessons to
be completed.
• Lesson/Activity - Single line of text field – Displays the title of the lesson or
activity to be completed.
• Instruction Type - Single line of text field.
• Notes - Multiple lines of text.

* Only used with an structured agenda

** Only used with an unstructured agenda

“Class Events”
Created Using – A standard Events web part
Details – Used to display information pertaining to synchronous instructional events.
The ability to add a date and time to an events list allows the view on the front page to be
limited by date.

“Program Documents”
Session 807 – Using SharePoint to Enhance Online Learning Events – Page 3
Kenneth Cronin & Rob Robertson, Citi
 
November 10 - 13, 2009
San Jose, CA
Created Using – A standard Document Library
Details - Used by the instructor to post information to the class. The
instructor has the ability to create additional folders as well as secure folders when
needed.

“Q&A”
Created Using – A custom list
Details - Contains 3 fields: Category, Question and Answer. Using this format the
instructors can bulk add pre-formatted Q&As using the “Edit in Datasheet” view.

• Category is a choice (dropdown) field that allows for grouping of different

question types.
• Question is a “single line of text” field that holds the text of the question.
• Answer is a “multiple lines of text” field (Rich Text) that can be formatted to
display the answer.

“Availability”
Created Using – A standard Events list
Details - Instructors can create Availability entries but custom permissions allow users to
only modify existing entries, not create new. The Outcome field is removed and a single
line of text field “Scheduled With” added, so participants can add their names to schedule
time with the instructor.

“Class Wiki”
Created Using – A standard SharePoint Wiki Document Library
Details – Accessible from a tab at the top of the site and links on the main page.

“Webinars”
Created Using – A Web Part Page (Full Page Vertical), in a separate Document Library
with a single Content Editor web part applied to the page.
Details – The Content Editor displays an embedded player window that is coded to
display audio or video files in the browser window. For detailed information about the
player please review the white paper “Embedding audio and video files in the SharePoint
environment” which is available where you downloaded this document.

Parts Specific to the Students

The following parts were added specifically for student interaction. Unless noted, the
participants can add or modify the information.

“Participant List”
Created Using – A standard Contacts list
Details - Used to display basic participant information. Depending upon the class,
displayed fields include First Name, Last Name, Work Phone and Email Address. The
instructor adds the participant names prior to the start of the class and the participants add
the additional information as it becomes available.

Session 807 – Using SharePoint to Enhance Online Learning Events – Page 4

Kenneth Cronin & Rob Robertson, Citi
 
November 10 - 13, 2009
San Jose, CA
“Class Discussion”
Created Using – A standard Discussion Board
Details – Used with standard default settings.

“About your Class Members”

Created Using – A custom list (View: Preview Pane style sorted on last name)
Details - This custom web part is designed to let class participants post information about
themselves. Participant access is limited to creating new entries and editing only their
own entries. A link is supplied on the front page of the class and the list is displayed in
Preview Pane style sorted on last name but based on Full name. Questions in the list can
be added as the class progresses. The initial fields available at a new site to be completed
by the participants are:
• “Full Name” - Single line of text field.
• “Preferred Name” - Single line of text field.
• “Why did you choose this company?” - Multiple lines of text field.
• “What experience do you bring that will be helpful to this job?” - Multiple lines
of text field.
• “Favorite Movie or Song?” - Multiple lines of text.
• “Last name” - Single line of text field – Used only to sort the data in the list.

“Time Log”
Created Using – A custom list
Details – This custom list provides start and end time tracking of virtual class
participants. To maintain confidentiality, participants can only view their own entries
and cannot modify or delete an entry after it has been submitted. The list contains only 2
fields: Name and Status.
• “Name” - Single line of text field
• “Status” - Dropdown field that contains entries such as Begin Work, Begin and
End Break or Lunch, and End Work. The business determines which options are
used by the participants.
Time tracking is performed by the “Created” field which is time stamped by the system
and cannot be changed.

“Report a Problem”
Created Using – A custom list
Details – Information collected includes:
• “Your Name” – Single line of text field.
• “Your ID” - Single line of text field.
• “Module or System” - Single line of text field.
• “What the system is telling you to do” - Multiple lines of text field.
• “What you cannot do or the Problem Encountered” - Multiple lines of text field.
• “Resolution (Admin Only)” - Multiple lines of text field.
To determine the impact of the problem being reported, participants can only view and
modify their own entries. This prevents a user from not submitting a report because it

Session 807 – Using SharePoint to Enhance Online Learning Events – Page 5

Kenneth Cronin & Rob Robertson, Citi
 
November 10 - 13, 2009
San Jose, CA
was addressed by someone else, and allows the instructor to
determine how wide-spread an issue becomes.

Post Class Process

Virtual classrooms are treated like brick and mortar classrooms; they are cleaned after the class
is complete and are made ready for the next class. The cleaning occurs 60 days after the last
class day. The instructors are responsible for saving any reports or data that need to be saved
prior to that date.

Once “cleaned” classrooms are deleted and recreated using the standard classroom template.

Conclusion

The process outlined in this document has proven effective within our corporate environment.

The 30 day post class report shows that students trained in the virtual environment meet or
exceed the production statistics of a brick and mortar class. Trainers are acclimating to virtual
facilitation and the consistency of the environment has reduced questions and startup time which
has reduced support costs overall.

Session 807 – Using SharePoint to Enhance Online Learning Events – Page 6

Kenneth Cronin & Rob Robertson, Citi
A Learning Architecture White Paper
541 Sid Martin Road
Gray, TN 37615
423-913-2886

Embedding Video and Audio files in the SharePoint

Environment without a Streaming Media Source

By Kenneth Cronin, Business Analyst

Date: June 15, 2009

 Contents Introduction
Recorded meetings and video based training
Introduction 2 programs are being used more than ever in
Problem Statement 2 business environments and Citi is no
exception.
Previous Options 2
Learning Architecture Solution 3
Implementation 6
Problem Statement
Summary 6
Clicking on a .WMV file in a network drive
or document library is one distribution
solution but this requires users to re-
authenticate when their Windows Media
Player opens. The user base now exceeds
11,000 people so this leads to a whole new
host of problems. The challenge is simple.
Create a simple to use, easy to administer,
user friendly interface that will not prompt
for authentication without access to a media
server.

A second consideration is the cost, access

latency and availability of storage space
within available environments. Although
most files are relatively small (6-8
Megabytes) the accumulation of files can
have a negative impact on the environment

Previous Options
Posting to YouTube and using their
embedded link is an option for some,
business related materials must be kept “In
House” so the sound and video files must be
stored and run from within the network.
Other groups have access to media servers
to distribute streaming media across the
network. The Learning and Performance
solutions group is limited to available
storage solutions.

Date: June 15, 2009

Learning Architecture Solution

Initial research demonstrated there was no out-of-the-box solution within the existing
environment. In addition this issue is faced by others outside of Citi and no solution was
available other than to post videos on YouTube and link within the environment. The
final player needed to play .WMV, .AVI and MP3 files.

In the end it took some outside the box thinking, some HTML style code and a
SharePoint Content Editor Web Part (CEWP). It will play the file types associated with
Windows Media Player in each individual Computer.

Player 1 – Single File Player

The initial request was to play a single file within the environment. This was an .MP3
file so the most obvious choice was to use Windows Media player.

SharePoint allows administrators to add a Content Editor Web Part (CEWP). This web
part allows users to embed HTML code into a SharePoint site. Using standard HTML
code a player can be called using a class ID call (classid=clsid:22D6F312-B0F6-11D0-
94AB-0080C74C7E95). This code makes Windows Media Player appear on the page.
To make the file appear in the player took some research. In the end it was accomplished
by using a parameter call (param name="FileName" value=" filename.wmv"). This
allowed the file to be placed anywhere on the network.

The final working code contained these basic elements:

----------------Begin Code----------------
<div align=center>
<object id="MediaPlayer1" height=230 width=230
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="filename.wmv">
<param name="AutoStart" value="0">
<param name="ShowStatusBar" value="True">
<embed type="application/x-mplayer2"
pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
showstatusbar=true>
</embed>
</object>
</div>
----------------End Code----------------

The final code worked perfectly for all needed file types and was only limited by video
and sound capabilities of the individual computers. It was not long before additional
options were needed.

Date: June 15, 2009

Player 2 – Multi File Player with a Dropdown Menu

Now that Video and audio replay was available in the environment, it was not long before
there was a need to better organize playbacks. The most obvious method was to use a
dropdown menu.

The player is HTML based so the dropdown needed to be the same. The value of the
dropdown needed to be passed to the player and the dropdown could not be limited in
number of files that can be embedded.

The final solution included a “select” dropdown with an “onchange” event handler.
When a selection is made from the dropdown, the HTML code sends the file name and
location to the player window. This format keeps all code on one page and still allows
the files to be located anywhere on the network.

The final working code contained these basic elements:

----------------Begin Code----------------
<div align=center>
<SELECT id=cancion
onchange=document.all.music.filename=document.all.cancion.value; size=1
name=Music>
<OPTION selected>::::: Choose the Video to Play :::::</OPTION><br>
<OPTION value="Filename.wmv">Name 1</OPTION><br>
</SELECT>
<OBJECT id=music height=230 width=230 classid=clsid:22D6F312-B0F6-11D0-
94AB-0080C74C7E95>
<PARAM NAME="AutoStart" VALUE="true">
</OBJECT>
</div>
----------------End Code----------------

The final code worked as expected and removed the need for multiple players on a single
page. The “autostart” value makes the files play automatically so users are not required
to press play. Again, the only limit was video and sound capabilities of the individual
computers. The popularity of the player and the opening of the Virtual Learning
Environment created a new issue. Dropdown menus were getting to long and falling off
the screen and there was no way to logically organize the files. Again, additional options
were needed.

Player 3– Multi File Player with a Dropdown Menu

What if you want to separate files into topics or dates and give each topic or date range its
own dropdown menu with only one player window on the page? This created a unique
set of problems. How to create two unique dropdowns on a single page that will each
send file variables to a single player.
 After research and “trial and error” the final solution involved the “select” dropdown and
the “onchange” event handler. Each dropdown is embedded with a unique name and
determines the file name and location based on a unique identifier of the dropdown code.
Both “onchange” events point to the same player window via the player name. When a
selection is made from either dropdown, the HTML code sends the specific file name and
location to the player window. This process can be used for an unlimited number of
dropdowns on a single page.

Multiple dropdowns created another issue, the ability to control the positioning of the
dropdown menus on the page. This was resolved using standard HTML table code. As
long as all the code was within the same Content Editor Web Part the dropdowns will
parse the file names correctly.

The final working code contained these basic code and formatting elements:

----------------Begin Code----------------
<TABLE style="WIDTH:100%" align=center> <TR> <TD>
<! ---- Begin Dropdown 1 ---------->
<DIV align=center><FONT color=#004080 size=4>Topic Title</FONT>
<SELECT id=cancion1
onchange=document.all.music.filename=document.all.cancion1.value;
size=1 name=Music1>
<OPTION selected>::::: Choose the Video to Play :::::</OPTION>
<OPTION value="Video1name.wmv">Name 1</OPTION>
</SELECT>
</DIV>
<!---- End Dropdown 1 ---------->
<DIV align=center></DIV>
<!---- Begin Dropdown 2 ---------->
<DIV align=center><FONT color=#008040 size=4>Topic 2 Title</FONT>
<SELECT id=cancion2
onchange=document.all.music.filename=document.all.cancion2.value;
size=1 name=Music2>
<OPTION selected>::::: Choose the Video to Play :::::</OPTION>
<OPTION value="Video2name.wmv">Name 1</OPTION>
</SELECT>
</DIV>
<!---- End Dropdown 2 ---------->
</TD>
<TD>
<!------ Begin Player --------->
<OBJECT id=music height=230 width=230 classid=clsid:22D6F312-B0F6-11D0-
94AB-0080C74C7E95></OBJECT>
</TD></TR></TABLE>
----------------End Code----------------

The final code is expandable and allows for an unlimited numbers of files to be
distributed from a single location.
Implementation

An important concern was the storage capacity needed to house the growing number of
videos being presented. We do not have access to a Windows Media Server to stream
the video and the cost of SharePoint storage can be a concern. Before this process was
implemented a viable storage process needed to be developed.

The player is designed to link outside SharePoint so files can be stored elsewhere and
played in the web part. Latency tests were conducted using the SharePoint environment
and the Training Distribution Servers. Tests revealed a latency of 7 seconds out of the
SharePoint environment and a latency of 4 seconds from the Training Distribution
Server. These results along with the storage cost analysis demonstrates faster access and
less cost when files are stored and distributed using the Training Distribution Servers.

Another concern is the original creation of the video and access to video creation
software. Most software creates video files with a size of approximately 30 megabytes
per hour of recording. Testing revealed that Microsoft Live Meeting creates compressed
videos at a resolution of 704 X 258. This size is more than large enough to display in the
web part and gives us a file size of approximately 7 megabytes per hour of recording.
This small file size saves server space and allows remote VPN users quicker access to
files.

The only negative aspect is the need for the administrator to understand HTML code and
have access to the Training Distribution Servers to add or remove files from the player or
dropdown menus.

Implementation of the code at a SharePoint site is a simple matter of adding a web part,
pasting in the base code and modifying it accordingly.

Summary
As stated earlier, my challenge was simple. Create a simple to use, easy to administer,
user friendly interface that will not prompt for authentication.

I was told by many experts in the SharePoint field that an embedded player was
impossible. L&PSG was the first to actually create and embedded player and stream
media without the aid of a Streaming Media Server.

This process did not create an answer to a single question. It followed through the
natural progression of the innovation in the environment and created answers to 2
additional questions that surfaced.

This innovation is unique not only in the Citi environment but in the SharePoint
environment as a whole.