Flash, XSLT, and show-hide controls

A recent project I worked on involved creating a flash-based display of related information with a more usable interface. Previously the content was displayed in tables with javascript and css divs. There are both advantages and disadvantages to using the javascript method. Advances with ajax and css have greatly improved functionality since the time of the initial implementation of using showhides to present the learning content. When presented with the request, I came up with the following sketch in my instructional design idea book.

As I've previously blogged about re-usability, the first step I took was consideration of how this display object could created for that purpose. I settled on a pretty simple XML structure. This structure is not at all content dependent.

 Foo for you
 foo.jpg
 all you wanted to know about foo

One of disadvantages of displaying content in flash is how to allow users to print that information. The javascript/css showhide didn't have this limitation because a simple function could reveal all the CSS divs when printed. In order to overcome this limitation I turned to Extensible Stylesheet Language Transformations (XSLT) since my content was already written in XML. I know I could have approach this problem on the server side, but this client will be switching application servers and it didn't make sense.

XSLT is an XML-based language used for the transformation of XML documents into other XML or "human-readable" documents (more info at wikipedia entry). XSL files are included at the top of an XML file and allow all newer browsers to render the XML in HTML/XHTML format. All major browsers support XSLT, see list here. Knowledge of XPath is required to traverse the XML structure and output the content desired.

Useful tutorials

• w3 school tutorial on XSLT
• w3 school tutorial on XPath

Since I already load the XML into the flash project at runtime, I had the path to the XML file available to place on a button on the flash stage.

 public function initApp():void
 {

 var thisXML:String = Application.application.parameters.thisXML;

  var loader:URLLoader = new URLLoader(new URLRequest(thisXML));
  loader.addEventListener(Event.COMPLETE, loadNewXML);

 }

 public function loadNewXML(event:Event):void
        {
     
         loadedXML = new XML(event.target.data);
      
        }

In this post I am not going to go into details about the actual actionscript code which generates this swf and instead focus on the XSL commands used to generate the HTML appear content from the button. You can see an example of the project below. To quickly replace the actual content used in this project, I grabbed some state flag images off google and text descriptions from wikipedia..

The actual XSL file is relatively simple and easy to read. I'm basically looping thru the XML nodes with an xsl:for-each select="data/node" tag. Then within the for-each block, I output the title, the image, and text associated with that node. For the text based output I used the xsl:value-of tag. For the image, I used the xsl:variable tag so I could embedded the variable within an img src tag.

N.B. the html and body tag had to be removed to post on blogger. Also the node "title" had to be renamed nodeTitle.

Samples XSLT of States


    
    
      

    
       

     
       
    
    

    

    

In conclusion

So XSLT was extremely useful to generate a printable/human readable rendering of the XML that was used in the flash generated display object. The SWF is re-usable and only needs a different XML file to be used on another web page with different content.

Links week of July 5th

Here are some links that caught my attention in the last week.

E-Learning

• E learning project management
• Top 100 Learning Game Resources
• The Evidence on Online Education
• In-house el-learning skills guide (Kineo)
• ADDIE Model (wikipedia)
• Journal of Online Learning & Teaching (JOLT)

Web Dev/Design

• 10 Things Every Web Designer Just Starting Out Should Know
• 30 Exceptional Web Designs
• 45 Incredibly Useful Web Design Checklists and Questionnaires

My tool box

Computer failures are never fun and mine today brought to mind how much I am thankful for certain applications and cloud computing. So I thought I would share what's in my tool box.

Productivity

This program helps you organize and share your notes. The genius of the application is that it works on the web, macs, pcs, and mobile devices. You can store text, PDFs, snapshots, etc. I've used it in meetings to bring my notes on the agenda as well as snapping a picture of the whiteboard at the end of the discussion. I used to carry spiral notebooks for different projects I was working on, but now with evernote I can make a specific notebook for a project and the notes are always available to me. I still have a sketch book for instructional design ideas, but I either scan my drawings or snap a photo with the iphone. Another amazing feature of evernote is that it can do character recognition on photos/images. My handwriting isn't the best and it has done a great job recognizing words. The Evernote Web Clipper also is handy to store information for later review from webpages. Learn more at www.evernote.com

I've used quite a few personal information managers over the last 20 years. Until I started using gCal all my data was stored locally. I remember getting my first 3Com PDA in 1996 (that would rather become Palm) and being able to sync. But it was still far from ideal and if you were away from the computer and your PDA, you were out of luck. With google supporting CalDav, I can sync my calendars between multiple computers and add events from the web, my iphone or iCal. When I'm on the go, if something gets added to a calendar (say at work), it will get pushed to my iphone. It's like Microsoft Exchange for the little guy. www.google.com/calendar/

I've been a pro user for Remember the Milk (RTM) for nearly a year. While google has come out with its Tasks, I don't intend to switch anytime soon. RTM is a really powerful todo manager. You can manage multiple lists, share lists with contacts, receive text message reminders, and more. RTM has a really great iphone application and now with the recent upgrade push notifications. Third-party developers have created a bunch of add-ons to RTM to make viewing and adding todos very easy (link). I use the QuickSilver plugin to add todos without even having to go to the RTM website. I also really like the being able to forward emails I receive to RTM and even assign the task to a specific list and given due date. www. rememberthemilk.com

Utilities

Carbon Copy Cloner: This MacOS program makes a bootable backup of my hard drive. I do use Apple Time Machine as well, but the redundancy gives me piece of mind. Both are backed up to an external Drobo drive, that currently is 2 gigs. The Drobo is RAID-like so there is redundancy there as well.

TextWrangler: I used BBEdit for many years and TextWrangler is everything I need in a text editor. It is great for coding and cleaning up text files. It is always on the top of my list to install on a new computer.

Growl: Growl is a notification manager for Mac. Several of the applications I use have Growl notifications support. Growl pops up alert messages when I get a new email, iTunes starts playing a new track, a download is completed, etc. It's very handy. www. growl.info

Development

Navicat MySQL: MySQL is my primary database of choice for projects and Navicat offers a nice GUI to view/edit tables. The PC version has more options than the Mac, but it is a very strong database development tool. navicat.com

All my coding projects are backed up to a subversion server. In the past, I've also used hosts such as spring loops and assembla. If you are developing any type of elearning, you really should be incorporating version control into your development process. I have slide deck from a talk I gave on the topic available here

Flex Builder built on Eclipse: While I could have installed the flex plug-in into standard Eclipse, I instead modified my Flex Builder with several plugins/frameworks. My installation includes plug-ins for:

• Subversion
• Cold Fusion
• XML development
• Myln/Trac

Adobe CS4: I recently updated from the dark ages (ie before Adobe called their web/image programs CS 1,2,3). I used dreamweaver primarily, but I'm in code view most of the time. When I have a need for graphics I will use Fireworks and after eons of not having photoshop I'm starting to use it again. CS4 has subversion built right into it, which is quite convenient adobe.com.

Audacity: This is a great tool for editing and recording audio. It's open source/free. I've used it primarily when creating podcasts and it works great. download link.

Cyberduck: This is mac file transfer client that supports multiple protocols. I use SFTP quite a bit and its bookmarking feature makes it so easy to get where I need to go. download link.

So what is in your toolbox? Leave a comment and share.

Developing Interactive Case Studies, Part 1

Advancing acquisition and demonstration of medicine competencies

This post is the first in a series on interactive case learning. I will review the rationale for development; my experiences with developing the model into reality; working with faculty/SME to develop cases; and lessons learned. My posts will be in the context of medical training, but the knowledge translates to other subject areas.

Dilemma :        How do you educate med students and MDs about core competencies in medicine at a distance and then assess them without clinical practicum?

Thesis :           These posts will demonstrate that it is indeed possible to educate adult learners in the acquisitions of new knowledge, skills and competencies similar to in-person training but with an online curriculum. The ICS model is argued to be a vehicle for additional acquisition and synthesis new knowledge and skills, as well as an analytically tool for measuring core competencies.

Definitions:

Interactive Case Studies (ICS)

ICS are iterative, dynamic clinical cases built on the principles of problem-based learning (PBL).

Core Competencies

• Being able to access high-quality, high-value information
• Being able to think critically
• Being able to advise patients intelligently
• Being able to communicate effectively with patients and peers
• Being able to listen, understand, guide, and comfort patients
• Being able to facilitate change, when needed
• Being respectful to humans' needs and experiences

Learning Object

A structured, standalone resource that encapsulates high quality information in a manner that facilitates learning and pedagogy.

Rationale

The ICS Model was developed specifically to (1) meet a need for a more interactive and engaging learning object, and (2) aid in the presentation of the curriculum.

ICS are iterative, dynamic clinical cases built on the principles of problem-based learning (PBL). The design of the ICS is adapted from a design established in the field of organizational management (Moberg & Caldwell, 1989). PBL facilitates not only the acquisition of new knowledge and skills through active engagement of the learner, but also provides for evaluation of the demonstration of knowledge, skills, and competencies through real-world interactive situations. ICS’s present video-snippets of typical physician-patient interactions and allow the learner to practice and demonstrate clinical counseling skills and integrate knowledge from the full curriculum. The ICS model is not solely a model of multiple choice testing, though multiple choice options are a primary mechanism for navigation in the decision tree. Instead, the learner is prompted at various points for qualitative responses and encouraged to reflect on their clinical reasoning which has lead them to a particular point in the case.

In a case, the learner is presented with multiple options of course of action in communicating with the patient. The cases can be produced with specific learning/assessment goals (e.g. patient centered communication, advising on referral, intake, etc). Through the programming, assessment feedback is provided to the learner. Some particular cases can be presented solely for the purpose of synthesis and practice of clinical knowledge and skills, while others can be presented in terms of evaluation.

The initial presentation

I first presented this learning model in 2002, although it was not developed for some time due to resources and other issues. Below is my slide deck from that initial presentation.

Next Post: My next post will focus on taking this initial instructional design and getting buy-in to develop the model.